Newer
Older
urbanLifeline_YanAn / src / views / oneMap / components / ZHRQ.vue
@鲁yixuan 鲁yixuan on 17 Oct 47 KB updata
  1. <template>
  2. <div id="ZHRQ">
  3. <div :class="['LeftBox', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
  4. <div class="ComBox LeftBox1_1">
  5. <div class="Box_header">管道风险评估</div>
  6. <div class="Box_Body">
  7. <div class="TJListBox">
  8. <div class="TJList TJList_RQ" @click="TuChengClick(0)">
  9. <img class="TJListImg" src="@/assets/images/Sponge_screen/RQ/RQ_RQ.png" alt="" />
  10. <span class="TJListName">燃气管道</span>
  11. <span class="TJListValue">4549km</span>
  12. </div>
  13. <div class="TJList TJList_GZ">
  14. <img class="TJListImg" src="@/assets/images/Sponge_screen/RQ/RQ_GZ.png" alt="" />
  15. <span class="TJListName">需改造</span>
  16. <span class="TJListValue">1922km</span>
  17. </div>
  18. </div>
  19. <div class="RQ_EchartsBox">
  20. <div class="ClickDiv1" @click="TuChengClick(1)"></div>
  21. <div class="ClickDiv2" @click="TuChengClick(2)"></div>
  22. <div class="ClickDiv3" @click="TuChengClick(3)"></div>
  23. <div class="ClickDiv4" @click="TuChengClick(4)"></div>
  24. </div>
  25. </div>
  26. </div>
  27. <div class="ComBox LeftBox1_2">
  28. <div class="Box_header">风险监测</div>
  29. <div class="Box_Body">
  30. <div class="TJListBox">
  31. <div class="TJList2" @click="showIndexOver()">
  32. <span class="TJList2Name">指标超标</span>
  33. <span class="TJList2Value">10</span>
  34. </div>
  35. <div class="TJList2" @click="showIndexWarning()">
  36. <span class="TJList2Name">预警站点数</span>
  37. <span class="TJList2Value">1</span>
  38. </div>
  39. </div>
  40. <div class="TableChange">
  41. <div
  42. class="TableChangeList"
  43. :class="AllData.TableChangeIndex == item.id ? 'TableCheck' : ''"
  44. v-for="item in AllData.ChangeData"
  45. @click="AllData.TableChangeIndex = item.id"
  46. >
  47. {{ item.name }}
  48. </div>
  49. </div>
  50. <!-- 弹性盒子 -->
  51. <div class="TableBox">
  52. <div class="tableHeader">
  53. <span class="tableHeaderList tableList1">指标</span>
  54. <span class="tableHeaderList tableList2">数值</span>
  55. <span class="tableHeaderList tableList3">状态</span>
  56. <span class="tableHeaderList tableList4">操作</span>
  57. </div>
  58. <div class="tableBody">
  59. <div class="tableBodyList" v-for="item in AllData.FXJCData">
  60. <span class="tableBodyList_span1" @click="FengXianClick(item)">{{ item.zb }}</span>
  61. <span class="tableBodyList_span2" @click="FengXianClick(item)"
  62. >{{ item.sz }}
  63. <el-icon v-if="item.szzt" color="lime" size="14"><Top /> </el-icon>
  64. <el-icon v-else color="#f54444" size="14">
  65. <Bottom />
  66. </el-icon>
  67. </span>
  68. <span class="tableBodyList_span3" :class="item.zt == 0 ? 'YJClass' : ''">{{
  69. item.zt == 0 ? '预警' : '正常'
  70. }}</span>
  71. <span class="tableBodyList_span4" @click="PaiFa(item)">派发</span>
  72. </div>
  73. </div>
  74. <div class="tableFoot">更新时间:2024-09-27 10:00</div>
  75. </div>
  76. </div>
  77. </div>
  78. <div class="ComBox LeftBox1_3">
  79. <div class="Box_header">预警统计</div>
  80. <div class="Box_Body">
  81. <div class="TableChange2">
  82. <div
  83. class="TableChangeList2"
  84. :class="AllData.YJChangeIndex == item.id ? 'TableCheck2' : ''"
  85. v-for="item in AllData.YJChangeData"
  86. @click="initEcharts(item.id)"
  87. >
  88. {{ item.name }}
  89. </div>
  90. </div>
  91. <div id="YJEchartsBox"></div>
  92. </div>
  93. </div>
  94. </div>
  95. <div :class="['RightBox', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
  96. <div class="ComBox RightBox1_1">
  97. <div class="Box_header">辅助决策</div>
  98. <div class="Box_Body">
  99. <div class="JCListBox" v-for="item in AllData.JCData">
  100. <div class="JCListBox_List">
  101. <span class="JCListBox_List_label">风险区域:</span>
  102. <span class="JCListBox_List_value">{{ item.qy }}</span>
  103. </div>
  104. <div class="JCListBox_List">
  105. <span class="JCListBox_List_label">风险特征:</span>
  106. <span class="JCListBox_List_value">{{ item.tz }}</span>
  107. </div>
  108. <div class="JCListBox_List">
  109. <span class="JCListBox_List_label">历史事件:</span>
  110. <span class="JCListBox_List_value">{{ item.sj }}</span>
  111. </div>
  112. <div class="JCListBox_List">
  113. <span class="JCListBox_List_label">问题研判:</span>
  114. <span class="JCListBox_List_value color_red">{{ item.yp }}</span>
  115. </div>
  116. <div class="JCListBox_List JCListBox_List_BTN">
  117. <el-button style="background: #03b6a0; color: white; border: none" size="small" @click="GongDanPaiFa(item)"
  118. >工单派发</el-button
  119. >
  120. <el-button style="background: #03b6a0; color: white; border: none" size="small" @click="XianChangLianXian(item)"
  121. >现场联线</el-button
  122. >
  123. </div>
  124. </div>
  125. </div>
  126. </div>
  127. <div class="ComBox RightBox1_2">
  128. <div class="Box_header">巡查反馈</div>
  129. <div class="Box_Body">
  130. <div class="FK_headerBox">
  131. <div class="FK_headerBox_list" @click="dealOrNoDeal(1)"><span class="FK_headerBox_list_colorBox1"></span> 未处理</div>
  132. <div class="FK_headerBox_list" @click="dealOrNoDeal(2)"><span class="FK_headerBox_list_colorBox2"></span> 已处理</div>
  133. </div>
  134. <div class="FK_bodyBox">
  135. <div class="FK_bodyBox_list" v-for="item in AllData.XCFKData">
  136. <span class="FK_bodyBox_list_label" @click="XunChaFanKui(item)">{{ item.name }}</span>
  137. <div class="FK_BigBox">
  138. <div class="FK_CenBox1" :style="getWidth(item, 1)">{{ item.num1 }}</div>
  139. <div class="FK_CenBox2" :style="getWidth(item, 2)">{{ item.num2 }}</div>
  140. </div>
  141. </div>
  142. </div>
  143. </div>
  144. </div>
  145. </div>
  146. <div :class="['TopBox', 'animate__animated', showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown']">
  147. <div class="TopTableHeader">
  148. <span class="TopTableListSpan TopTableListSpan1">时间</span>
  149. <span class="TopTableListSpan TopTableListSpan2">事件明细</span>
  150. <span class="TopTableListSpan TopTableListSpan3">地点</span>
  151. <span class="TopTableListSpan TopTableListSpan4">状态</span>
  152. <span class="TopTableListSpan TopTableListSpan5">责任单位</span>
  153. <span class="TopTableListSpan TopTableListSpan6">督办</span>
  154. </div>
  155. <!-- <div class="TopTableBody"> -->
  156. <Vue3SeamlessScroll :list="AllData.TopTableData" :singleHeight="34" :hover="true" class="TopTableBody">
  157. <div class="TopTableBody_list" v-for="item in AllData.TopTableData">
  158. <span class="TopTableListSpan TopTableListSpan1">{{ item.sj }}</span>
  159. <span class="TopTableListSpan TopTableListSpan2">{{ item.mx }}</span>
  160. <span class="TopTableListSpan TopTableListSpan3">{{ item.dd }}</span>
  161. <span class="TopTableListSpan TopTableListSpan4">{{ item.zt == 0 ? '未处理' : '已处理' }}</span>
  162. <span class="TopTableListSpan TopTableListSpan5">{{ item.dw }}</span>
  163. <span class="TopTableListSpan TopTableListSpan6">
  164. <img class="TopTableListSpanImg2" src="@/assets/images/Sponge_screen/RQ/RQ_XX.png" alt="" @click="PaiFa(item)" />
  165. <img
  166. class="TopTableListSpanImg"
  167. src="@/assets/images/Sponge_screen/RQ/RQ_SP.png"
  168. alt=""
  169. @click="XianChangLianXian(item)"
  170. />
  171. </span>
  172. </div>
  173. </Vue3SeamlessScroll>
  174. <!-- </div> -->
  175. </div>
  176. <div :class="['bottomBox', 'animate__animated', showPanel ? 'animate__bounceOutDown' : 'animate__fadeInUpBig']">
  177. <div class="TopTableHeader">
  178. <span class="TopTableListSpan TopTableListSpan1">指挥中心</span>
  179. <span class="TopTableListSpan TopTableListSpan2">动态</span>
  180. <span class="TopTableListSpan TopTableListSpan3">时间</span>
  181. <span class="TopTableListSpan TopTableListSpan4">指令状态</span>
  182. </div>
  183. <Vue3SeamlessScroll :list="AllData.bottomTableData" :singleHeight="34" :hover="true" class="TopTableBody">
  184. <div class="TopTableBody_list" v-for="item in AllData.bottomTableData">
  185. <span class="TopTableListSpan TopTableListSpan1">{{ item.zhzx }}</span>
  186. <span class="TopTableListSpan TopTableListSpan2">{{ item.dt }}</span>
  187. <span class="TopTableListSpan TopTableListSpan3">{{ item.sj }}</span>
  188. <span class="TopTableListSpan TopTableListSpan4">{{ item.zlzt }}</span>
  189. </div>
  190. </Vue3SeamlessScroll>
  191. </div>
  192.  
  193. <div class="IssueWarning" @click="WarningClick">发布预警</div>
  194. </div>
  195. </template>
  196.  
  197. <script setup name="ZHRQ">
  198. import { ref, reactive, toRefs, onMounted, onBeforeUnmount, nextTick } from 'vue';
  199.  
  200. import * as echarts from 'echarts';
  201. import bus from '@/bus';
  202. import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
  203. import sheBeiLost from '@/assets/sheBeiLost.json';
  204. import xiaXian from '@/assets/xiaXian.json';
  205. import yiBian from '@/assets/yiBian.json';
  206. import zaWuDuiFang from '@/assets/zaWuDuiFang.json';
  207. import rq_QiTa from '@/assets/rq_QiTa.json';
  208. import no_sheBeiLost from '@/assets/no_sheBeiLost.json';
  209. import no_xiaXian from '@/assets/no_xiaXian.json';
  210. import no_yiBian from '@/assets/no_yiBian.json';
  211. import no_zaWuDuiFang from '@/assets/no_zaWuDuiFang.json';
  212. import no_rq_QiTa from '@/assets/no_rq_QiTa.json';
  213. import yanAnRQoverindex from '@/assets/yanAnRQoverindex.json';
  214. import yanAnWarring from '@/assets/yanAnWarring.json';
  215.  
  216. const AllData = reactive({
  217. xunChaStatic: null,
  218. xunChaLayers: [
  219. 'alreadyDeal_DF',
  220. 'alreadyDeal_DS',
  221. 'alreadyDeal_XX',
  222. 'alreadyDeal_YB',
  223. 'alreadyDeal_QT',
  224. 'noDeal_DF',
  225. 'noDeal_DS',
  226. 'noDeall_XX',
  227. 'noDeal_YB',
  228. 'noDeal_QT',
  229. ],
  230. ChangeData: [
  231. {
  232. name: '枣园',
  233. id: 1,
  234. },
  235. {
  236. name: '杨家湾',
  237. id: 2,
  238. },
  239. {
  240. name: '丰富川',
  241. id: 3,
  242. },
  243. ],
  244. TableChangeIndex: 1,
  245. // 风险监测
  246. FXJCData: [
  247. {
  248. zb: '甲烷浓度',
  249. sz: '3%',
  250. szzt: true,
  251. zt: 0, //0预警 1 正常
  252. value: 'JWND',
  253. },
  254. {
  255. zb: '压力',
  256. sz: '5MPa',
  257. szzt: false,
  258. zt: 1, //0预警 1 正常
  259. value: 'YL',
  260. },
  261. {
  262. zb: '温度',
  263. sz: '25C°',
  264. szzt: true,
  265. zt: 1, //0预警 1 正常
  266. value: 'WD',
  267. },
  268. ],
  269. YJChangeData: [
  270. {
  271. name: '综合',
  272. id: 1,
  273. },
  274. {
  275. name: '压力',
  276. id: 2,
  277. },
  278. {
  279. name: '温度',
  280. id: 3,
  281. },
  282. ],
  283. YJChangeIndex: 1,
  284. //辅助决策
  285. JCData: [
  286. {
  287. qy: '宝塔区凤凰山街道二道街',
  288. tz: '压力监测异常波动',
  289. sj: 5,
  290. yp: '设施故障',
  291. value: '001', //语音识别内容编码-前段自己设置的,后期项目有接口就直接替换数据唯一id
  292. },
  293. {
  294. qy: '宝塔区凤凰山街道二道街',
  295. tz: '燃气管道压力过大',
  296. sj: 5,
  297. yp: '燃气爆管风险',
  298. value: '002',
  299. },
  300. {
  301. qy: '宝塔区凤凰山街道二道街',
  302. tz: '高峰期流量持续降低',
  303. sj: 4,
  304. yp: '燃气泄漏风险',
  305. value: '003',
  306. },
  307. ],
  308. // 巡查反馈
  309. XCFKData: [
  310. {
  311. name: '堆放杂物',
  312. num1: 20,
  313. num2: 80,
  314. },
  315. {
  316. name: '设备丢失',
  317. num1: 12,
  318. num2: 88,
  319. },
  320. {
  321. name: '下陷',
  322. num1: 32,
  323. num2: 68,
  324. },
  325. {
  326. name: '异变',
  327. num1: 30,
  328. num2: 70,
  329. },
  330. {
  331. name: '其他',
  332. num1: 20,
  333. num2: 80,
  334. },
  335. ],
  336. // 顶部表格数据
  337. TopTableData: [
  338. {
  339. sj: '2024-09-26 10:00:29',
  340. mx: '燃气常规检查发现泄漏',
  341. dd: '宝塔区凤凰山街道二道街',
  342. zt: 0, //0未处理 1已处理
  343. dw: '延安市燃气总公司',
  344. value: null,
  345. },
  346. {
  347. sj: '2024-09-27 16:10:248',
  348. mx: '燃气常规检查发现泄漏',
  349. dd: '宝塔区凤凰山街道二道街',
  350. zt: 0, //0未处理 1已处理
  351. dw: '延安市燃气总公司',
  352. value: null,
  353. },
  354. {
  355. sj: '2024-09-26 10:00:29',
  356. mx: '燃气常规检查发现泄漏',
  357. dd: '宝塔区凤凰山街道二道街',
  358. zt: 0, //0未处理 1已处理
  359. dw: '延安市燃气总公司',
  360. value: null,
  361. },
  362. {
  363. sj: '2024-09-27 16:10:248',
  364. mx: '燃气常规检查发现泄漏',
  365. dd: '宝塔区凤凰山街道二道街',
  366. zt: 0, //0未处理 1已处理
  367. dw: '延安市燃气总公司',
  368. value: null,
  369. },
  370. ],
  371. // 底部表格数据
  372. bottomTableData: [
  373. {
  374. zhzx: '预警发布',
  375. dt: '启动预警并通知成员单位',
  376. sj: '10-20 08:30',
  377. zlzt: '预警下发给城管局各单位,燃气供应处',
  378. },
  379. {
  380. zhzx: '预警启动',
  381. dt: '起草燃气安全预警应急行动',
  382. sj: '10-20 07:00',
  383. zlzt: '起草了预警通知',
  384. },
  385. ],
  386. timer: null,
  387. });
  388. // 预警统计echarts实例
  389. const myChart = shallowRef(null);
  390. //面板展开收起
  391. const showPanel = ref(true);
  392. // 面板内容展开收起控制
  393. const props = defineProps({
  394. showPanel: {
  395. type: Boolean,
  396. },
  397. });
  398. // 初始化预警统计的Echarts
  399. const initEcharts = id => {
  400. AllData.YJChangeIndex = id;
  401. let Data1 = [];
  402. let Data2 = [];
  403. if (AllData.YJChangeIndex == 1) {
  404. Data1 = [6, 2, 1, 5, 7, 6, 3];
  405. Data2 = [16, 7, 8, 12, 16, 13, 12];
  406. } else if (AllData.YJChangeIndex == 2) {
  407. Data1 = [2, 3, 8, 3, 2, 1, 4];
  408. Data2 = [7, 16, 13, 16, 12, 8, 12];
  409. } else {
  410. Data1 = [6, 4, 3, 5, 8, 3, 8];
  411. Data2 = [8, 12, 16, 13, 16, 7, 12];
  412. }
  413. if (!!AllData.timer) {
  414. clearTimeout(AllData.timer);
  415. }
  416. if (!!myChart.value) {
  417. myChart.value.dispose();
  418. }
  419. myChart.value = echarts.init(document.getElementById('YJEchartsBox'));
  420. myChart.value.off('click');
  421. myChart.value.setOption({
  422. color: ['#18A7F2', '#1AF7AA'],
  423. tooltip: {
  424. trigger: 'axis',
  425. },
  426. grid: {
  427. top: '30%',
  428. left: '3%',
  429. right: '4%',
  430. bottom: '3%',
  431. containLabel: true,
  432. },
  433. legend: {
  434. data: ['预警次数', '持续时长'],
  435. textStyle: {
  436. color: '#fffd', // 图例文字颜色
  437. },
  438. x: '40',
  439. y: '10',
  440. },
  441. xAxis: [
  442. {
  443. type: 'category',
  444. data: ['今日', '09/27', '09/26', '09/25', '09/24', '09/23', '09/22'],
  445. axisPointer: {
  446. type: 'shadow',
  447. },
  448. textStyle: {
  449. color: '#EBFEFF',
  450. },
  451. axisLine: {
  452. lineStyle: {
  453. color: '#EBFEFF',
  454. },
  455. },
  456. // boundaryGap: false,
  457. },
  458. ],
  459. yAxis: [
  460. {
  461. type: 'value',
  462. name: '预警次数',
  463. min: 0,
  464. max: 12,
  465. interval: 2,
  466. axisLabel: {
  467. formatter: '{value}',
  468. },
  469. axisLine: {
  470. lineStyle: {
  471. color: '#AAC1CF',
  472. },
  473. },
  474. splitLine: {
  475. lineStyle: {
  476. // 使用深浅的间隔色
  477. color: ['#184E5A'],
  478. },
  479. },
  480. },
  481. {
  482. type: 'value',
  483. name: '持续时长',
  484. min: 0,
  485. max: 30,
  486. interval: 5,
  487. axisLabel: {
  488. formatter: '{value}',
  489. },
  490. axisLine: {
  491. lineStyle: {
  492. color: '#AAC1CF',
  493. },
  494. },
  495. splitLine: {
  496. lineStyle: {
  497. // 使用深浅的间隔色
  498. color: ['#184E5A'],
  499. },
  500. },
  501. },
  502. ],
  503. series: [
  504. {
  505. name: '预警次数',
  506. type: 'bar',
  507. barWidth: '10px',
  508. showBackground: true,
  509. tooltip: {
  510. valueFormatter: function (value) {
  511. return value + ' 次';
  512. },
  513. },
  514. itemStyle: {
  515. // borderRadius: 10, // 统一设置四个角的圆角大小
  516. borderRadius: [10, 10, 0, 0], //(顺时针左上,右上,右下,左下)
  517. },
  518. data: Data1,
  519. },
  520. {
  521. name: '持续时长',
  522. type: 'line',
  523. yAxisIndex: 1,
  524. tooltip: {
  525. valueFormatter: function (value) {
  526. return value + 'min';
  527. },
  528. },
  529. areaStyle: {
  530. opacity: 0.8,
  531. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  532. {
  533. offset: 0,
  534. color: '#1AF7AA',
  535. },
  536. {
  537. offset: 1,
  538. color: '#1AF7AA00',
  539. },
  540. ]),
  541. },
  542.  
  543. data: Data2,
  544. },
  545. ],
  546. });
  547. myChart.value.on('click', param => {
  548. console.log(param);
  549. let data = {
  550. title: '风险监测',
  551. comIDs: ['RQ_FengXianJianCe'],
  552. };
  553. bus.emit('publicDialog', data);
  554. let a = {
  555. value: '全部',
  556. endTime: '2024-10-05',
  557. };
  558. setTimeout(() => {
  559. bus.emit('getDataListFxjc', a);
  560. }, 500);
  561. });
  562.  
  563. animateChart();
  564. };
  565.  
  566. const animateChart = () => {
  567. let length = 7;
  568. let i = 0;
  569. AllData.timer = setInterval(() => {
  570. i++;
  571. if (i == length) i = 0;
  572. myChart.value.dispatchAction({
  573. type: 'showTip',
  574. seriesIndex: 0,
  575. dataIndex: i,
  576. });
  577. }, 2000);
  578. };
  579. // 动态计算盒子的宽度
  580. const getWidth = (item, num) => {
  581. let widthNum = 0;
  582. if (num == 1) {
  583. widthNum = (item.num1 / (item.num1 + item.num2)) * 100;
  584. } else {
  585. widthNum = (item.num2 / (item.num1 + item.num2)) * 100;
  586. }
  587. return `width:${widthNum}%`;
  588. };
  589. // 工单派发
  590. const GongDanPaiFa = item => {
  591. console.log(item);
  592. let data = {
  593. title: item.qy,
  594. comIDs: ['gdpf'],
  595. getSiteId: item.value,
  596. };
  597. bus.emit('publicDialog', data);
  598. };
  599. // // 风险
  600. // const FengXianClick = (item) => {
  601. // console.log(item);
  602. // let data = {
  603. // title: item.zb + " 风险监测",
  604. // comIDs: ["RQ_FengXianJianCe"],
  605. // };
  606. // bus.emit("publicDialog", data);
  607. // };
  608. // 风险监测派发
  609. const PaiFa = item => {
  610. console.log(item);
  611. let data = {
  612. title: '智慧外呼',
  613. comIDs: ['RQ_ZhiHuiWaiHu'],
  614. getSiteId: item.value,
  615. };
  616. bus.emit('publicDialog', data);
  617. };
  618. //巡查反馈处理、未处理
  619. const dealOrNoDeal = item => {
  620. AllData.xunChaStatic = item;
  621. newfiberMapbox.map.easeTo({
  622. center: [109.488, 36.596],
  623. zoom: 12,
  624. pitch: 55,
  625. });
  626. bus.emit('removeMapDatas', ['warning_monitor']);
  627. if (item == 1) {
  628. let removedLayer = AllData.xunChaLayers.filter(layer => layer.includes('noDeal'));
  629. let selectedLayer = AllData.xunChaLayers.filter(layer => layer.includes('alreadyDeal'));
  630. bus.emit('removeMapDatas', AllData.xunChaLayers);
  631. bus.emit('setGeoJSON', { json: zaWuDuiFang, key: 'alreadyDeal_DF' });
  632. bus.emit('setGeoJSON', { json: sheBeiLost, key: 'alreadyDeal_DS' });
  633. bus.emit('setGeoJSON', { json: xiaXian, key: 'alreadyDeal_XX' });
  634. bus.emit('setGeoJSON', { json: yiBian, key: 'alreadyDeal_YB' });
  635. bus.emit('setGeoJSON', { json: rq_QiTa, key: 'alreadyDeal_QT' });
  636. selectedLayer.forEach(layer => {
  637. bus.emit('setLayerVisible', { layername: layer, isCheck: true });
  638. });
  639. } else {
  640. let removedLayer = AllData.xunChaLayers.filter(layer => layer.includes('alreadyDeal'));
  641. let selectedLayer = AllData.xunChaLayers.filter(layer => layer.includes('noDeal'));
  642. bus.emit('removeMapDatas', AllData.xunChaLayers);
  643. bus.emit('setGeoJSON', { json: no_zaWuDuiFang, key: 'onDeal_DF' });
  644. bus.emit('setGeoJSON', { json: no_sheBeiLost, key: 'onDeal_DS' });
  645. bus.emit('setGeoJSON', { json: no_xiaXian, key: 'onDeal_XX' });
  646. bus.emit('setGeoJSON', { json: no_yiBian, key: 'onDeal_YB' });
  647. bus.emit('setGeoJSON', { json: no_rq_QiTa, key: 'onDeal_QT' });
  648. selectedLayer.forEach(layer => {
  649. bus.emit('setLayerVisible', { layername: layer, isCheck: true });
  650. });
  651. }
  652. };
  653. // 巡查反馈
  654. const XunChaFanKui = item => {
  655. let removedLayer = [];
  656. let selectedLayer = [];
  657. newfiberMapbox.map.easeTo({
  658. center: [109.488, 36.596],
  659. zoom: 12,
  660. pitch: 55,
  661. });
  662. switch (item.name) {
  663. case '堆放杂物':
  664. removedLayer = AllData.xunChaLayers.filter(layer => layer != 'alreadyDeal_DF' && layer != 'noDeal_DF');
  665. selectedLayer = AllData.xunChaLayers.filter(layer => layer == 'alreadyDeal_DF' || layer == 'noDeal_DF');
  666. selectedLayer.forEach(layer => {
  667. bus.emit('setLayerVisible', { layername: layer, isCheck: true });
  668. });
  669. removedLayer.forEach(layer => {
  670. bus.emit('setLayerVisible', { layername: layer, isCheck: false });
  671. });
  672. break;
  673. case '设备丢失':
  674. removedLayer = AllData.xunChaLayers.filter(layer => layer != 'alreadyDeal_DS' && layer != 'noDeal_DS');
  675. selectedLayer = AllData.xunChaLayers.filter(layer => layer == 'alreadyDeal_DS' || layer == 'noDeal_DS');
  676. selectedLayer.forEach(layer => {
  677. bus.emit('setLayerVisible', { layername: layer, isCheck: true });
  678. });
  679. removedLayer.forEach(layer => {
  680. bus.emit('setLayerVisible', { layername: layer, isCheck: false });
  681. });
  682. break;
  683. case '下陷':
  684. removedLayer = AllData.xunChaLayers.filter(layer => layer != 'alreadyDeal_XX' && layer != 'noDeal_XX');
  685. selectedLayer = AllData.xunChaLayers.filter(layer => layer == 'alreadyDeal_XX' || layer == 'noDeal_XX');
  686. selectedLayer.forEach(layer => {
  687. bus.emit('setLayerVisible', { layername: layer, isCheck: true });
  688. });
  689. removedLayer.forEach(layer => {
  690. bus.emit('setLayerVisible', { layername: layer, isCheck: false });
  691. });
  692. break;
  693. case '异变':
  694. removedLayer = AllData.xunChaLayers.filter(layer => layer != 'alreadyDeal_YB' && layer != 'noDeal_YB');
  695. selectedLayer = AllData.xunChaLayers.filter(layer => layer == 'alreadyDeal_YB' || layer == 'noDeal_YB');
  696. selectedLayer.forEach(layer => {
  697. bus.emit('setLayerVisible', { layername: layer, isCheck: true });
  698. });
  699. removedLayer.forEach(layer => {
  700. bus.emit('setLayerVisible', { layername: layer, isCheck: false });
  701. });
  702. break;
  703. case '其他':
  704. removedLayer = AllData.xunChaLayers.filter(layer => layer != 'alreadyDeal_QT' && layer != 'noDeal_QT');
  705. selectedLayer = AllData.xunChaLayers.filter(layer => layer == 'alreadyDeal_QT' || layer == 'noDeal_QT');
  706. selectedLayer.forEach(layer => {
  707. bus.emit('setLayerVisible', { layername: layer, isCheck: true });
  708. });
  709. removedLayer.forEach(layer => {
  710. bus.emit('setLayerVisible', { layername: layer, isCheck: false });
  711. });
  712. break;
  713. }
  714. };
  715. // 风险评估
  716. const TuChengClick = item => {
  717. newfiberMapbox.map.easeTo({
  718. center: [109.488, 36.596],
  719. zoom: 12,
  720. pitch: 55,
  721. });
  722. switch (item) {
  723. case 0:
  724. bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: false });
  725. bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: false });
  726. bus.emit('setLayerVisible', { layername: 'rq_LGLH', isCheck: false });
  727. bus.emit('setLayerVisible', { layername: 'rq_other', isCheck: false });
  728. bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: true }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
  729. break;
  730. case 1:
  731. bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
  732. bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: true });
  733. bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: false });
  734. bus.emit('setLayerVisible', { layername: 'rq_LGLH', isCheck: false });
  735. bus.emit('setLayerVisible', { layername: 'rq_other', isCheck: false });
  736. break;
  737. case 2:
  738. bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
  739. bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: false });
  740. bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: true });
  741. bus.emit('setLayerVisible', { layername: 'rq_LGLH', isCheck: false });
  742. bus.emit('setLayerVisible', { layername: 'rq_other', isCheck: false });
  743.  
  744. break;
  745. case 3:
  746. bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
  747. bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: false });
  748. bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: false });
  749. bus.emit('setLayerVisible', { layername: 'rq_LGLH', isCheck: true });
  750. bus.emit('setLayerVisible', { layername: 'rq_other', isCheck: false });
  751. break;
  752. case 4:
  753. bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
  754. bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: false });
  755. bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: false });
  756. bus.emit('setLayerVisible', { layername: 'rq_LGLH', isCheck: false });
  757. bus.emit('setLayerVisible', { layername: 'rq_other', isCheck: true });
  758. break;
  759. }
  760. };
  761.  
  762. // 风险
  763. const FengXianClick = item => {
  764. let data = {
  765. title: item.zb + ' 风险监测',
  766. comIDs: ['RQ_FengXianJianCe'],
  767. };
  768. bus.emit('publicDialog', data);
  769. // 传给组件数据
  770.  
  771. setTimeout(() => {
  772. bus.emit('getDataListFxjc', item);
  773. }, 500);
  774. };
  775.  
  776. // 现场连线
  777. const XianChangLianXian = item => {
  778. bus.emit('OpenRY');
  779. };
  780.  
  781. // 发布预警
  782. const WarningClick = item => {
  783. let data = {
  784. title: '发布预警',
  785. comIDs: ['RQ_Warning'],
  786. };
  787. bus.emit('publicDialog', data);
  788. };
  789.  
  790. watch(
  791. () => props.showPanel,
  792. () => {
  793. showPanel.value = props.showPanel;
  794. },
  795. { immediate: true }
  796. );
  797. //燃气超标
  798. const showIndexOver = () => {
  799. bus.emit('removeMapDatas', AllData.xunChaLayers);
  800. let key = 'warning_monitor';
  801. bus.emit('getGeojsonByType', {
  802. type: key,
  803. callback: geojson => {
  804. if (!!!geojson.features.length) bus.emit('setGeoJSON', { json: yanAnRQoverindex, key: 'warning_monitor' });
  805. bus.emit('setLayerVisible', { type: 'point', layername: key, isCheck: true });
  806. },
  807. });
  808. newfiberMapbox.map.easeTo({
  809. center: [109.488, 36.596],
  810. zoom: 13,
  811. });
  812. };
  813. //燃气告警
  814. const showIndexWarning = () => {
  815. bus.emit('removeMapDatas', AllData.xunChaLayers);
  816. let key = 'warning_monitor';
  817. bus.emit('getGeojsonByType', {
  818. type: key,
  819. callback: geojson => {
  820. if (!!!geojson.features.length) bus.emit('setGeoJSON', { json: yanAnWarring, key: 'warning_monitor' });
  821. bus.emit('setLayerVisible', { type: 'point', layername: key, isCheck: true });
  822. },
  823. });
  824. newfiberMapbox.map.easeTo({
  825. center: [109.488, 36.596],
  826. zoom: 13,
  827. });
  828. };
  829. onMounted(() => {
  830. let initeRQTimer = setInterval(() => {
  831. if (!newfiberMapbox) return;
  832. if (!newfiberMapbox.map.getLayer('rq_pipeline_info')) return;
  833. if (!newfiberMapbox.map.getLayer('sx_ya_smx_rq_point')) return;
  834. newfiberMapbox.map.easeTo({
  835. center: [109.488, 36.596],
  836. zoom: 12,
  837. });
  838. //告警点事件
  839. let warningPoint = newfiberMapbox.getLayers().filter(feature => feature.newfiberId == 'warning_monitor')[0];
  840. if (warningPoint) {
  841. warningPoint.on('click', e => {
  842. let popupData = e.feature.properties;
  843.  
  844. console.log('popupData---', '告警---------', popupData);
  845. });
  846. }
  847. bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: true }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
  848. bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: true });
  849. bus.emit('setLayerVisible', { layername: 'sx_ya_smx_rq_line_sz', isCheck: true });
  850. bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: true });
  851. bus.emit('setLayerVisible', { layername: 'sx_ya_smx_rq_line_zg', isCheck: true });
  852. clearInterval(initeRQTimer);
  853. }, 100);
  854. initEcharts(1);
  855. });
  856. onBeforeUnmount(() => {
  857. bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: false });
  858. bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: false });
  859. bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: false });
  860. bus.emit('setLayerVisible', { layername: 'rq_LGLH', isCheck: false });
  861. bus.emit('setLayerVisible', { layername: 'rq_other', isCheck: false });
  862. bus.emit('removeMapDatas', AllData.xunChaLayers);
  863. bus.emit('removeMapDatas', ['warning_monitor']);
  864. bus.emit('setLayerVisible', { layername: 'warning_monitor', isCheck: false });
  865. bus.emit('closeCesiumPopup');
  866. bus.emit('SetLayerShow', ['蓝色地图']);
  867. if (!!newfiberMapbox.getLayerByName('rqLine')) {
  868. newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('rqLine'));
  869. }
  870. });
  871. </script>
  872.  
  873. <style lang="scss" scoped>
  874. @import '@/assets/styles/transition_oneMap.scss';
  875. #ZHRQ {
  876. .LeftBox {
  877. width: 450px;
  878. height: calc(100% - 98px);
  879. position: absolute;
  880. left: 10px;
  881. top: 70px;
  882. background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
  883. border-radius: 6px;
  884. border: 1px solid #47eef3;
  885. box-sizing: border-box;
  886. padding: 10px;
  887. box-shadow: inset 0 0 5px 5px #47eef38a;
  888.  
  889. .LeftBox1_1 {
  890. height: 365px;
  891.  
  892. .TJListBox {
  893. height: 42px;
  894. margin-top: 10px;
  895. width: 100%;
  896. display: flex;
  897. flex-direction: row;
  898. flex-wrap: nowrap;
  899. justify-content: space-between;
  900. align-items: center;
  901.  
  902. .TJList {
  903. height: 42px;
  904. width: calc(50% - 9px);
  905. display: flex;
  906. .TJListImg {
  907. width: 22px;
  908. height: 22px;
  909. margin: 9px;
  910. }
  911. .TJListName {
  912. font-family: Source Han Sans CN;
  913. font-weight: 400;
  914. font-size: 14px;
  915. color: #f4f9ff;
  916. width: 65px;
  917. height: 40px;
  918. line-height: 40px;
  919. }
  920.  
  921. .TJListValue {
  922. font-family: Source Han Sans CN;
  923. font-weight: bold;
  924. font-size: 20px;
  925. width: calc(100% - 110px);
  926. height: 40px;
  927. line-height: 40px;
  928. text-align: right;
  929. }
  930. }
  931.  
  932. .TJList_RQ {
  933. background: rgba(7, 54, 102, 0.3);
  934. border-radius: 4px;
  935. border: 1px solid #15d2fd;
  936. box-shadow: inset 0 0 10px #15d2fdb0; /* 水平偏移|垂直偏移|模糊半径|颜色 */
  937. cursor: pointer;
  938.  
  939. .TJListValue {
  940. color: #12f9ff;
  941. }
  942. }
  943. .TJList_GZ {
  944. background: rgba(164, 74, 8, 0.3);
  945. border-radius: 4px;
  946. border: 1px solid #ffd97f;
  947. box-shadow: inset 0 0 10px #ffd97fb0; /* 水平偏移|垂直偏移|模糊半径|颜色 */
  948. .TJListValue {
  949. color: #ffd97f;
  950. }
  951. }
  952. }
  953. .RQ_EchartsBox {
  954. width: 100%;
  955. height: calc(100% - 72px);
  956. margin-top: 10px;
  957. background: url('@/assets/images/Sponge_screen/RQ/Ech.png') no-repeat center;
  958. position: relative;
  959.  
  960. .ClickDiv1 {
  961. width: 80px;
  962. height: 250px;
  963. // background: #ff000063;
  964. position: absolute;
  965. bottom: 0px;
  966. left: 60px;
  967. cursor: pointer;
  968. }
  969. .ClickDiv2 {
  970. width: 80px;
  971. height: 250px;
  972. // background: #ff000063;
  973. position: absolute;
  974. bottom: 0px;
  975. left: 160px;
  976. cursor: pointer;
  977. }
  978. .ClickDiv3 {
  979. width: 80px;
  980. height: 250px;
  981. // background: #ff000063;
  982. position: absolute;
  983. bottom: 0px;
  984. left: 255px;
  985. cursor: pointer;
  986. }
  987. .ClickDiv4 {
  988. width: 80px;
  989. height: 250px;
  990. // background: #ff000063;
  991. position: absolute;
  992. bottom: 0px;
  993. left: 340px;
  994. cursor: pointer;
  995. }
  996. }
  997. }
  998. .LeftBox1_2 {
  999. height: calc(100% - 365px - 275px - 10px);
  1000. margin-bottom: 10px;
  1001. // 风险监测
  1002. .TJListBox {
  1003. height: 42px;
  1004. margin-top: 10px;
  1005. width: 100%;
  1006. display: flex;
  1007. flex-direction: row;
  1008. flex-wrap: nowrap;
  1009. justify-content: space-between;
  1010. align-items: center;
  1011. .TJList2 {
  1012. height: 42px;
  1013. width: calc(50% - 9px);
  1014. display: flex;
  1015. background: url('@/assets/images/Sponge_screen/RQ/RQ_FX.png') no-repeat center;
  1016. background-size: 100% 100%;
  1017. cursor: pointer;
  1018.  
  1019. .TJList2Name {
  1020. width: 50%;
  1021. font-family: Source Han Sans CN;
  1022. font-weight: 400;
  1023. font-size: 14px;
  1024. color: #f4f9ff;
  1025. height: 40px;
  1026. line-height: 40px;
  1027. text-align: left;
  1028. box-sizing: border-box;
  1029. padding-left: 20px;
  1030. }
  1031. .TJList2Value {
  1032. width: 50%;
  1033. font-family: Source Han Sans CN;
  1034. font-weight: bold;
  1035. font-size: 20px;
  1036. color: #12f9ff;
  1037. height: 40px;
  1038. line-height: 40px;
  1039. text-align: center;
  1040. }
  1041. }
  1042. }
  1043. .TableChange {
  1044. height: 42px;
  1045. width: 100%;
  1046. box-sizing: border-box;
  1047. padding: 10px 0px;
  1048. display: flex;
  1049. flex-direction: row;
  1050. flex-wrap: nowrap;
  1051. justify-content: flex-end;
  1052. align-items: center;
  1053.  
  1054. .TableChangeList {
  1055. width: 60px;
  1056. height: 22px;
  1057. background: #00344f;
  1058. border-radius: 2px;
  1059. font-family: Source Han Sans CN;
  1060. font-weight: 500;
  1061. font-size: 14px;
  1062. color: #c1d3d4;
  1063. text-align: center;
  1064. line-height: 20px;
  1065. cursor: pointer;
  1066. }
  1067.  
  1068. .TableCheck {
  1069. background: #00344f;
  1070. border-radius: 2px;
  1071. border: 1px solid #1cf5fc;
  1072. font-family: Source Han Sans CN;
  1073. font-weight: bold;
  1074. font-size: 12px;
  1075. color: #ebfeff;
  1076. background: #1cf4fc22;
  1077. }
  1078. }
  1079.  
  1080. .TableBox {
  1081. width: 100%;
  1082. height: calc(100% - 94px);
  1083.  
  1084. .tableHeader {
  1085. width: 100%;
  1086. height: 34px;
  1087. background: linear-gradient(0deg, #00fbffa3 0%, #00fbff00 100%);
  1088. border-radius: 2px;
  1089. border: 1px solid #74dde1;
  1090. display: flex;
  1091.  
  1092. .tableHeaderList {
  1093. font-family: Source Han Sans CN;
  1094. font-weight: 400;
  1095. font-size: 14px;
  1096. color: #ffffff;
  1097. height: 34px;
  1098. line-height: 34px;
  1099. text-align: center;
  1100. }
  1101. .tableList1 {
  1102. width: 20%;
  1103. }
  1104. .tableList2 {
  1105. width: 30%;
  1106. }
  1107. .tableList3 {
  1108. width: 30%;
  1109. }
  1110. .tableList4 {
  1111. width: 20%;
  1112. }
  1113. }
  1114.  
  1115. .tableBody {
  1116. width: 100%;
  1117. height: calc(100% - 68px);
  1118. overflow: auto;
  1119.  
  1120. .tableBodyList {
  1121. height: 34px;
  1122. line-height: 34px;
  1123. width: 100%;
  1124. display: flex;
  1125. /* 选择偶数行 */
  1126. &:nth-child(even) {
  1127. background: linear-gradient(0deg, #008599 0%, #08596d 100%);
  1128. }
  1129.  
  1130. .tableBodyList_span1 {
  1131. font-family: Source Han Sans CN;
  1132. font-weight: 400;
  1133. font-size: 14px;
  1134. color: #ffffff;
  1135. height: 34px;
  1136. line-height: 34px;
  1137. text-align: center;
  1138. width: 20%;
  1139. cursor: pointer;
  1140. }
  1141. .tableBodyList_span2 {
  1142. font-family: Source Han Sans CN;
  1143. font-weight: 400;
  1144. font-size: 14px;
  1145. color: #ffffff;
  1146. height: 34px;
  1147. line-height: 34px;
  1148. text-align: center;
  1149. width: 30%;
  1150. cursor: pointer;
  1151. }
  1152. .tableBodyList_span3 {
  1153. font-family: Source Han Sans CN;
  1154. font-weight: 400;
  1155. font-size: 14px;
  1156. color: #ffffff;
  1157. height: 34px;
  1158. line-height: 34px;
  1159. text-align: center;
  1160. width: 30%;
  1161. }
  1162. .YJClass {
  1163. color: #ffe243;
  1164. }
  1165. .tableBodyList_span4 {
  1166. font-family: Source Han Sans CN;
  1167. font-weight: 400;
  1168. font-size: 14px;
  1169. color: #ffffff;
  1170. height: 34px;
  1171. line-height: 34px;
  1172. text-align: center;
  1173. width: 20%;
  1174. cursor: pointer;
  1175. }
  1176. }
  1177. }
  1178.  
  1179. .tableFoot {
  1180. width: 100%;
  1181. height: 34px;
  1182. background: linear-gradient(0deg, #008599b7 0%, #08596d91 100%);
  1183. font-family: Source Han Sans CN;
  1184. font-weight: 400;
  1185. font-size: 14px;
  1186. color: #ebfeff;
  1187. line-height: 34px;
  1188. text-align: center;
  1189. }
  1190. }
  1191. }
  1192. .LeftBox1_3 {
  1193. height: 275px;
  1194.  
  1195. .TableChange2 {
  1196. height: 42px;
  1197. width: 200px;
  1198. box-sizing: border-box;
  1199. padding: 10px 0px;
  1200. display: flex;
  1201. flex-direction: row;
  1202. flex-wrap: nowrap;
  1203. justify-content: flex-end;
  1204. align-items: center;
  1205. position: absolute;
  1206. top: 0px;
  1207. right: 0px;
  1208. z-index: 999;
  1209.  
  1210. .TableChangeList2 {
  1211. width: 60px;
  1212. height: 22px;
  1213. background: #00344f;
  1214. border-radius: 2px;
  1215. font-family: Source Han Sans CN;
  1216. font-weight: 500;
  1217. font-size: 14px;
  1218. color: #c1d3d4;
  1219. text-align: center;
  1220. line-height: 20px;
  1221. cursor: pointer;
  1222. }
  1223.  
  1224. .TableCheck2 {
  1225. background: #00344f;
  1226. border-radius: 2px;
  1227. border: 1px solid #1cf5fc;
  1228. font-family: Source Han Sans CN;
  1229. font-weight: bold;
  1230. font-size: 12px;
  1231. color: #ebfeff;
  1232. background: #1cf4fc22;
  1233. }
  1234. }
  1235. #YJEchartsBox {
  1236. width: 100%;
  1237. height: 100%;
  1238. }
  1239. }
  1240. }
  1241. .RightBox {
  1242. width: 450px;
  1243. height: calc(100% - 98px);
  1244. position: absolute;
  1245. right: 10px;
  1246. top: 70px;
  1247. background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
  1248. border-radius: 6px;
  1249. border: 1px solid #47eef3;
  1250. box-sizing: border-box;
  1251. padding: 10px;
  1252. box-shadow: inset 0 0 5px 5px #47eef38a;
  1253.  
  1254. .RightBox1_1 {
  1255. height: calc(100% - 298px);
  1256. margin-bottom: 10px;
  1257. box-sizing: border-box;
  1258. // padding: 0 10px;
  1259.  
  1260. .JCListBox {
  1261. margin-top: 10px;
  1262. width: 100%;
  1263. height: 196px;
  1264. background: linear-gradient(0deg, #008599 0%, #08596d 100%);
  1265. border-radius: 4px;
  1266. overflow: hidden;
  1267.  
  1268. .JCListBox_List {
  1269. width: 100%;
  1270. height: 28px;
  1271. margin-top: 10px;
  1272. display: flex;
  1273. flex-direction: row;
  1274. flex-wrap: nowrap;
  1275. justify-content: space-evenly;
  1276. align-items: center;
  1277.  
  1278. .JCListBox_List_label {
  1279. display: inline-block;
  1280. font-family: Source Han Sans CN;
  1281. font-weight: 400;
  1282. font-size: 14px;
  1283. color: #c1d3d4;
  1284. height: 28px;
  1285. line-height: 28px;
  1286. text-align: right;
  1287. width: 70px;
  1288. }
  1289. .JCListBox_List_value {
  1290. display: inline-block;
  1291. border: 1px solid #1cf5fc;
  1292. width: 290px;
  1293. height: 28px;
  1294. line-height: 28px;
  1295. font-family: Source Han Sans CN;
  1296. font-weight: 400;
  1297. font-size: 14px;
  1298. color: #ffffff;
  1299. text-align: center;
  1300. }
  1301. }
  1302. .JCListBox_List_BTN {
  1303. justify-content: center;
  1304. align-items: center;
  1305. }
  1306. }
  1307. }
  1308. .RightBox1_2 {
  1309. height: 288px;
  1310. .FK_headerBox {
  1311. width: 100%;
  1312. height: 45px;
  1313. display: flex;
  1314. flex-direction: row;
  1315. flex-wrap: nowrap;
  1316. justify-content: center;
  1317. align-items: center;
  1318. cursor: pointer;
  1319. .FK_headerBox_list {
  1320. font-family: Source Han Sans CN;
  1321. font-weight: bold;
  1322. font-size: 14px;
  1323. color: #ebfeff;
  1324. width: 100px;
  1325. text-align: center;
  1326.  
  1327. .FK_headerBox_list_colorBox1 {
  1328. display: inline-block;
  1329. width: 10px;
  1330. height: 10px;
  1331. background: #ee5777;
  1332. }
  1333. .FK_headerBox_list_colorBox2 {
  1334. display: inline-block;
  1335. width: 10px;
  1336. height: 10px;
  1337. background: #00ffbe;
  1338. }
  1339. }
  1340. }
  1341. .FK_bodyBox {
  1342. width: 100%;
  1343. height: 200px;
  1344. overflow: auto;
  1345. box-sizing: border-box;
  1346. padding: 0 30px;
  1347.  
  1348. .FK_bodyBox_list {
  1349. width: 100%;
  1350. height: 20px;
  1351. margin-bottom: 20px;
  1352. display: flex;
  1353.  
  1354. .FK_bodyBox_list_label {
  1355. display: block;
  1356. font-family: Source Han Sans CN;
  1357. font-weight: 500;
  1358. font-size: 14px;
  1359. color: #ffffff;
  1360. width: 80px;
  1361. cursor: pointer;
  1362. }
  1363. .FK_BigBox {
  1364. display: block;
  1365. width: calc(100% - 80px);
  1366. height: 20px;
  1367.  
  1368. .FK_CenBox1 {
  1369. display: inline-block;
  1370. height: 20px;
  1371. background: linear-gradient(-90deg, #f35f7f 0%, #c21439 100%);
  1372. font-family: Source Han Sans CN;
  1373. font-weight: bold;
  1374. font-size: 14px;
  1375. color: #ffffff;
  1376. text-align: right;
  1377. line-height: 20px;
  1378. box-sizing: border-box;
  1379. padding: 0 10px;
  1380. }
  1381. .FK_CenBox2 {
  1382. display: inline-block;
  1383. height: 20px;
  1384. background: linear-gradient(90deg, #20d9aa 0%, #0882a0 100%);
  1385. font-weight: bold;
  1386. font-size: 14px;
  1387. color: #ffffff;
  1388. text-align: right;
  1389. line-height: 20px;
  1390. box-sizing: border-box;
  1391. padding: 0 10px;
  1392. }
  1393. }
  1394. }
  1395. }
  1396. }
  1397. }
  1398. .TopBox {
  1399. width: calc(100% - 1040px);
  1400. height: 122px;
  1401. position: absolute;
  1402. left: 520px;
  1403. top: 110px;
  1404. background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
  1405. border-radius: 6px;
  1406. border: 1px solid #47eef3;
  1407. box-sizing: border-box;
  1408. box-shadow: inset 0 0 5px 5px #47eef38a;
  1409. padding: 10px;
  1410. .TopTableHeader {
  1411. width: 100%;
  1412. height: 34px;
  1413. background: linear-gradient(0deg, #00fbffa3 0%, #00fbff00 100%);
  1414. border: 1px solid #74dde1;
  1415. display: flex;
  1416. }
  1417.  
  1418. .TopTableBody {
  1419. width: 100%;
  1420. height: calc(100% - 34px);
  1421. overflow: auto;
  1422. // display: flex;
  1423. // flex-direction: column;
  1424. // flex-wrap: nowrap;
  1425.  
  1426. .TopTableBody_list {
  1427. display: inline-block;
  1428. width: 100%;
  1429. height: 34px;
  1430. /* 选择偶数行 */
  1431. &:nth-child(even) {
  1432. background: linear-gradient(0deg, #008599 0%, #08596d 100%);
  1433. }
  1434. }
  1435. }
  1436.  
  1437. .TopTableListSpan {
  1438. font-family: Source Han Sans CN;
  1439. font-weight: 400;
  1440. font-size: 14px;
  1441. color: #ffffff;
  1442. height: 34px;
  1443. line-height: 34px;
  1444. display: inline-block;
  1445. box-sizing: border-box;
  1446. overflow: hidden;
  1447. text-overflow: ellipsis; /* 超出宽度后显示省略号 */
  1448. white-space: nowrap; /* 限制不允许换行 */
  1449. }
  1450. .TopTableListSpan1 {
  1451. width: 20%;
  1452. text-align: left;
  1453. padding-left: 10px;
  1454. }
  1455. .TopTableListSpan2 {
  1456. width: 25%;
  1457. text-align: center;
  1458. }
  1459. .TopTableListSpan3 {
  1460. width: 20%;
  1461. text-align: center;
  1462. }
  1463. .TopTableListSpan4 {
  1464. width: 10%;
  1465. text-align: center;
  1466. }
  1467. .TopTableListSpan5 {
  1468. width: 15%;
  1469. text-align: center;
  1470. }
  1471. .TopTableListSpan6 {
  1472. width: 10%;
  1473. text-align: right;
  1474. padding-right: 10px;
  1475.  
  1476. .TopTableListSpanImg {
  1477. width: 15px;
  1478. height: 19px;
  1479. margin: 7px;
  1480. cursor: pointer;
  1481. }
  1482. .TopTableListSpanImg2 {
  1483. width: 19px;
  1484. height: 19px;
  1485. margin: 7px;
  1486. cursor: pointer;
  1487. }
  1488. }
  1489. }
  1490. .bottomBox {
  1491. width: calc(100% - 1040px);
  1492. height: 122px;
  1493. position: absolute;
  1494. left: 510px;
  1495. bottom: 180px;
  1496. background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
  1497. border-radius: 6px;
  1498. border: 1px solid #47eef3;
  1499. box-sizing: border-box;
  1500. box-shadow: inset 0 0 5px 5px #47eef38a;
  1501. padding: 10px;
  1502. .TopTableHeader {
  1503. width: 100%;
  1504. height: 34px;
  1505. background: linear-gradient(0deg, #00fbffa3 0%, #00fbff00 100%);
  1506. border: 1px solid #74dde1;
  1507. display: flex;
  1508. }
  1509.  
  1510. .TopTableBody {
  1511. width: 100%;
  1512. height: calc(100% - 34px);
  1513. overflow: auto;
  1514. // display: flex;
  1515. // flex-direction: column;
  1516. // flex-wrap: nowrap;
  1517.  
  1518. .TopTableBody_list {
  1519. display: inline-block;
  1520. width: 100%;
  1521. height: 34px;
  1522. /* 选择偶数行 */
  1523. &:nth-child(even) {
  1524. background: linear-gradient(0deg, #008599 0%, #08596d 100%);
  1525. }
  1526. }
  1527. }
  1528.  
  1529. .TopTableListSpan {
  1530. font-family: Source Han Sans CN;
  1531. font-weight: 400;
  1532. font-size: 14px;
  1533. color: #ffffff;
  1534. height: 34px;
  1535. line-height: 34px;
  1536. display: inline-block;
  1537. box-sizing: border-box;
  1538. overflow: hidden;
  1539. text-overflow: ellipsis; /* 超出宽度后显示省略号 */
  1540. white-space: nowrap; /* 限制不允许换行 */
  1541. }
  1542.  
  1543. .TopTableListSpan1 {
  1544. width: 25%;
  1545. text-align: left;
  1546. padding-left: 10px;
  1547. }
  1548. .TopTableListSpan2 {
  1549. width: 25%;
  1550. text-align: center;
  1551. }
  1552. .TopTableListSpan3 {
  1553. width: 25%;
  1554. text-align: center;
  1555. }
  1556. .TopTableListSpan4 {
  1557. width: 25%;
  1558. text-align: right;
  1559. padding-right: 10px;
  1560. }
  1561. }
  1562.  
  1563. // 左右两侧展示板块公共样式
  1564. .ComBox {
  1565. width: 100%;
  1566. box-sizing: border-box;
  1567. .Box_header {
  1568. width: 100%;
  1569. height: 43px;
  1570. background: url('@/assets/images/Sponge_screen/Box_HeaderBackground.png') no-repeat center;
  1571. background-size: cover;
  1572. font-family: PangMenZhengDao;
  1573. font-weight: 400;
  1574. font-size: 23px;
  1575. color: #ebfeff;
  1576. line-height: 43px;
  1577. box-sizing: border-box;
  1578. padding-left: 35px;
  1579. }
  1580.  
  1581. .Box_Body {
  1582. width: 100%;
  1583. height: calc(100% - 43px);
  1584. box-sizing: border-box;
  1585. position: relative;
  1586. overflow: auto;
  1587. }
  1588. }
  1589. .color_red {
  1590. color: #ff3f3f !important;
  1591. }
  1592. .IssueWarning {
  1593. width: 40px;
  1594. height: 60px;
  1595. position: absolute;
  1596. bottom: 150px;
  1597. left: 1400px;
  1598. font-family: Source Han Sans CN;
  1599. font-weight: 400;
  1600. font-size: 13px;
  1601. color: #ffffff;
  1602. text-align: center;
  1603. background: #003756;
  1604. border-radius: 28px;
  1605. border: 1px solid #53c6c9;
  1606. display: flex;
  1607. align-items: center;
  1608. cursor: pointer;
  1609. box-shadow: inset 0 0 5px 2px #47eef38a;
  1610. }
  1611. }
  1612. </style>