closeWall.vue 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671
  1. <template>
  2. <div class="closeWall">
  3. <div class="title">
  4. <div class="box-container">
  5. <div class="contents">
  6. <div class="text">
  7. <div class="text-label">位置: </div>
  8. <!-- <div class="text-value">{{ topContent.position }}</div> -->
  9. <div class="text-value">
  10. <a-select v-model:value="selectData" style="width: 360px" @change="changeSelect">
  11. <a-select-option v-for="file in selectList" :key="file.label" :value="file.value">{{ file.label
  12. }}</a-select-option>
  13. </a-select>
  14. </div>
  15. </div>
  16. <div class="text">
  17. <span class="text-label">时间 : </span>
  18. <span class="text-value">{{ topContent.time }}</span>
  19. </div>
  20. </div>
  21. <div class="contents">
  22. <img src="../../../../../assets/images/fire/pie.png" alt="" />
  23. <span class="text">{{ topContent.temperature }}</span>
  24. <span class="dw">°C</span>
  25. </div>
  26. </div>
  27. <div class="box-container">
  28. <div class="text1">
  29. <span>预警等级 : </span>
  30. <span :class="{
  31. value1: topContent.warnLevel == '绿色预警',
  32. value2: topContent.warnLevel == '黄色预警',
  33. value3: topContent.warnLevel == '红色预警',
  34. }">{{ topContent.warnLevel || '-' }}</span>
  35. </div>
  36. <div class="text1">
  37. <span>煤自燃阶段 : </span>
  38. <span>{{ topContent.smokeJd || '-' }}</span>
  39. </div>
  40. </div>
  41. </div>
  42. <div class="content">
  43. <div class="title-b">采空区密闭参数</div>
  44. <div class="card-btn">
  45. <div :class="activeIndex == index ? 'box-container1' : 'box-container'" v-for="(item, index) in mbList"
  46. :key="index" @click="btnClick(item, index)">
  47. <div class="box-label">
  48. <span> {{ item.label }}</span>
  49. <span>{{ item.dw }}</span>
  50. </div>
  51. <div class="box-item box-item1">
  52. <span class="text-t">{{ `${item.label1}:` }}</span>
  53. <span class="text-v">{{ item.nd }}</span>
  54. </div>
  55. <div class="box-item box-item2">
  56. <span class="text-t">{{ `${item.label2}:` }}</span>
  57. <span class="text-v">{{ item.time1 }}</span>
  58. </div>
  59. <div class="box-item box-item3">
  60. <span class="text-t">{{ `${item.label3}:` }}</span>
  61. <span class="text-v">{{ item.address }}</span>
  62. </div>
  63. </div>
  64. </div>
  65. <div class="echart-box">
  66. <div class="left-echartbox">
  67. <div class="title-f">
  68. <div class="title-text">{{ `${type}趋势` }}&nbsp; <span style="color: red">{{ netStatus != 1 ?
  69. '(设备未连接)' :
  70. '' }}</span></div>
  71. </div>
  72. <div class="echarts-box">
  73. <echartLine1 :echartDataSg="echartDataSg1" :lengedDataName="echartDataSg1.lengedDataName" />
  74. </div>
  75. </div>
  76. <div class="right-echartbox">
  77. <warnZb :widthV="widthV" :heightV="heightV" :coordDw="coordDw" :widthCanvas="widthCanvas"
  78. :heightCanvas="heightCanvas" :warnLevel="topContent.warnLevel"></warnZb>
  79. </div>
  80. </div>
  81. </div>
  82. </div>
  83. </template>
  84. <script lang="ts" setup>
  85. import { onMounted, ref, reactive, watch, defineProps } from 'vue';
  86. import echartLine1 from './echartLine1.vue';
  87. import warnZb from './warnZb.vue'
  88. let props = defineProps({
  89. listData: Object,
  90. });
  91. let selectSj = ref<any[]>([])
  92. let selectData = ref('')
  93. let selectList = reactive<any[]>([])
  94. let widthV = ref('75%')
  95. let heightV = ref('80%')
  96. let coordDw = ref<any[]>([47, 95])
  97. let widthCanvas = ref(562)
  98. let heightCanvas = ref(316)
  99. //设备连接状态
  100. let netStatus = ref(0)
  101. //密闭-顶部区域数据
  102. let topContent = reactive({
  103. temperature: 0,
  104. position: '',
  105. time: '',
  106. warnLevel: '',
  107. smokeJd: '',
  108. });
  109. //密闭参数列表
  110. let mbList = reactive([
  111. {
  112. label: 'O₂',
  113. dw: '(%)',
  114. label1: '浓度',
  115. label2: '时间',
  116. label3: '位置',
  117. nd: '0',
  118. time1: '',
  119. address: '',
  120. },
  121. {
  122. label: 'CO',
  123. dw: '(ppm)',
  124. label1: '浓度',
  125. label2: '时间',
  126. label3: '位置',
  127. nd: '0',
  128. time1: '',
  129. address: '',
  130. },
  131. {
  132. label: 'CO₂',
  133. dw: '(%)',
  134. label1: '浓度',
  135. label2: '时间',
  136. label3: '位置',
  137. nd: '0',
  138. time1: '',
  139. address: '',
  140. },
  141. {
  142. label: 'CH₄',
  143. dw: '(%)',
  144. label1: '浓度',
  145. label2: '时间',
  146. label3: '位置',
  147. nd: '0',
  148. time1: '',
  149. address: '',
  150. },
  151. {
  152. label: 'C₂H₂',
  153. dw: '(ppm)',
  154. label1: '浓度',
  155. label2: '时间',
  156. label3: '位置',
  157. nd: '0',
  158. time1: '',
  159. address: '',
  160. },
  161. {
  162. label: 'C₂H₄',
  163. dw: '(ppm)',
  164. label1: '浓度',
  165. label2: '时间',
  166. label3: '位置',
  167. nd: '0',
  168. time1: '',
  169. address: '',
  170. },
  171. ]);
  172. //当前密闭参数激活选项
  173. let activeIndex = ref(0);
  174. //当前激活密闭参数类型
  175. let type = ref('O₂');
  176. let echartDataSg1 = reactive({
  177. xData: [],
  178. yData: [],
  179. lengedData: 'O₂',
  180. lengedDataName: '(%)',
  181. });
  182. let echartDataSgList = reactive<any[]>([]);
  183. //密闭参数选项切换
  184. function btnClick(item, ind) {
  185. activeIndex.value = ind;
  186. type.value = item.label;
  187. echartDataSg1.xData.length = 0;
  188. echartDataSg1.yData.length = 0;
  189. echartDataSg1.lengedData = type.value;
  190. echartDataSg1.lengedDataName = item.dw;
  191. switch (type.value) {
  192. case 'O₂':
  193. echartDataSgList.forEach((el) => {
  194. echartDataSg1.xData.push(el.time);
  195. echartDataSg1.yData.push(el.o2val);
  196. });
  197. break;
  198. case 'C₂H₄':
  199. echartDataSgList.forEach((el) => {
  200. echartDataSg1.xData.push(el.time);
  201. echartDataSg1.yData.push(el.ch2val);
  202. });
  203. break;
  204. case 'CO':
  205. echartDataSgList.forEach((el) => {
  206. echartDataSg1.xData.push(el.time);
  207. echartDataSg1.yData.push(el.coval);
  208. });
  209. break;
  210. case 'CH₄':
  211. echartDataSgList.forEach((el) => {
  212. echartDataSg1.xData.push(el.time);
  213. echartDataSg1.yData.push(el.chval);
  214. });
  215. break;
  216. case 'CO₂':
  217. echartDataSgList.forEach((el) => {
  218. echartDataSg1.xData.push(el.time);
  219. echartDataSg1.yData.push(el.co2val);
  220. });
  221. break;
  222. case 'C₂H₂':
  223. echartDataSgList.forEach((el) => {
  224. echartDataSg1.xData.push(el.time);
  225. echartDataSg1.yData.push(el.gasval);
  226. });
  227. break;
  228. }
  229. }
  230. function changeSelect(val) {
  231. selectData.value = val
  232. let data = selectSj.value.filter(v => v.strinstallpos == selectData.value)[0]
  233. topContent.time = data.readTime || '--';
  234. topContent.warnLevel = data.syswarnLevel_str
  235. topContent.smokeJd = data.syswarnLevel_des
  236. mbList[0].nd = data.readData.o2val || '--';
  237. mbList[1].nd = data.readData.coval || '--';
  238. mbList[2].nd = data.readData.co2val || '--';
  239. mbList[3].nd = data.readData.chval || '--';
  240. mbList[4].nd = data.readData.ch2val || '--';
  241. mbList[5].nd = data.readData.gasval || '--';
  242. mbList.forEach((el) => {
  243. el.time1 = data ? data.readTime.substring(0, data.readTime.lastIndexOf(':')) : '--';
  244. el.address = data ? data.strinstallpos : '--';
  245. });
  246. netStatus.value = data['netStatus']
  247. }
  248. watch(
  249. () => props.listData,
  250. (val) => {
  251. console.log(val, 'val---');
  252. echartDataSg1.xData.length = 0;
  253. echartDataSg1.yData.length = 0;
  254. echartDataSgList.length = 0;
  255. selectList.length = 0
  256. if (JSON.stringify(val) != '{}') {
  257. if (val.bundletube.length != 0) {
  258. selectSj.value = val.bundletube
  259. selectSj.value.forEach(el => {
  260. selectList.push({ label: el.strinstallpos, value: el.strinstallpos })
  261. })
  262. selectData.value = selectData.value ? selectData.value : selectList[0].value
  263. let dataVal = selectData.value ? selectSj.value.filter(v => v.strinstallpos == selectData.value)[0] : selectSj.value[0];
  264. topContent.temperature = val.temperature[0] ? val.temperature[0].readData.temperature : '--';
  265. // topContent.position = dataVal.strinstallpos || '--';
  266. topContent.time = dataVal.readTime || '--';
  267. topContent.warnLevel = dataVal.syswarnLevel_str
  268. topContent.smokeJd = dataVal.syswarnLevel_des
  269. mbList[0].nd = dataVal.readData.o2val || '--';
  270. mbList[1].nd = dataVal.readData.coval || '--';
  271. mbList[2].nd = dataVal.readData.co2val || '--';
  272. mbList[3].nd = dataVal.readData.chval || '--';
  273. mbList[4].nd = dataVal.readData.ch2val || '--';
  274. mbList[5].nd = dataVal.readData.gasval || '--';
  275. mbList.forEach((el) => {
  276. el.time1 = dataVal ? dataVal.readTime.substring(0, dataVal.readTime.lastIndexOf(':')) : '--';
  277. el.address = dataVal ? dataVal.strinstallpos : '--';
  278. });
  279. netStatus.value = dataVal['netStatus']
  280. dataVal.history.forEach((v) => {
  281. echartDataSg1.xData.push(v.time);
  282. if (echartDataSg1.lengedData == 'O₂') {
  283. echartDataSg1.yData.push(v.o2val);
  284. } else if (echartDataSg1.lengedData == 'C₂H₄') {
  285. echartDataSg1.yData.push(v.ch2val);
  286. } else if (echartDataSg1.lengedData == 'CO') {
  287. echartDataSg1.yData.push(v.coval);
  288. } else if (echartDataSg1.lengedData == 'CH₄') {
  289. echartDataSg1.yData.push(v.chval);
  290. } else if (echartDataSg1.lengedData == 'CO₂') {
  291. echartDataSg1.yData.push(v.co2val);
  292. } else if (echartDataSg1.lengedData == 'C₂H₂') {
  293. echartDataSg1.yData.push(v.gasval);
  294. }
  295. echartDataSgList.push(v);
  296. });
  297. } else {
  298. topContent.temperature = 0;
  299. // topContent.position = '--';
  300. topContent.time = '--';
  301. topContent.warnLevel = '--';
  302. topContent.smokeJd = '--'
  303. mbList[0].nd = '--';
  304. mbList[1].nd = '--';
  305. mbList[2].nd = '--';
  306. mbList[3].nd = '--';
  307. mbList[4].nd = '--';
  308. mbList[5].nd = '--';
  309. mbList.forEach((el) => {
  310. el.time1 = '--';
  311. el.address = '--';
  312. });
  313. }
  314. }
  315. },
  316. { immediate: true, deep: true }
  317. );
  318. </script>
  319. <style lang="less" scoped>
  320. .closeWall {
  321. width: 100%;
  322. height: 100%;
  323. padding: 20px;
  324. box-sizing: border-box;
  325. .title {
  326. width: 100%;
  327. height: 17%;
  328. margin-bottom: 20px;
  329. display: flex;
  330. justify-content: space-between;
  331. background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
  332. background-size: 100% 100%;
  333. align-items: center;
  334. .box-container {
  335. display: flex;
  336. &:nth-child(1) {
  337. justify-content: space-around;
  338. align-items: center;
  339. flex: 2;
  340. height: 100%;
  341. border-right: 2px solid;
  342. border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
  343. }
  344. &:nth-child(2) {
  345. flex-direction: column;
  346. flex: 1;
  347. justify-content: space-around;
  348. align-items: center;
  349. height: 73%;
  350. }
  351. .contents {
  352. height: 73%;
  353. &:nth-child(1) {
  354. width: 40%;
  355. display: flex;
  356. flex-direction: column;
  357. justify-content: space-around;
  358. .text {
  359. font-size: 14px;
  360. display: flex;
  361. align-items: center;
  362. .text-label {
  363. color: #b3b8cc;
  364. font-weight: bold;
  365. }
  366. .text-value {
  367. font-family: 'douyuFont';
  368. color: #3df6ff;
  369. margin-left: 10px;
  370. }
  371. }
  372. }
  373. &:nth-child(2) {
  374. width: 40%;
  375. display: flex;
  376. justify-content: center;
  377. align-items: center;
  378. img {
  379. position: relative;
  380. width: 23%;
  381. height: 100%;
  382. background: url('../../../../../assets/images/fire/pj.svg') no-repeat center;
  383. background-size: 50% 50%;
  384. }
  385. .text {
  386. font-family: 'douyuFont';
  387. font-size: 28px;
  388. margin: 0px 15px;
  389. color: #3df6ff;
  390. }
  391. .dw {
  392. font-size: 14px;
  393. color: #b3b8cc;
  394. }
  395. }
  396. }
  397. .text1 {
  398. width: 90%;
  399. height: 30px;
  400. line-height: 30px;
  401. font-size: 14px;
  402. color: #b3b8cc;
  403. font-weight: bold;
  404. span {
  405. display: inline-block;
  406. &:nth-child(1) {
  407. width: 160px;
  408. text-align: right;
  409. }
  410. &:nth-child(2) {
  411. font-family: 'douyuFont';
  412. color: #3df6ff;
  413. margin-left: 10px;
  414. }
  415. }
  416. .value1 {
  417. color: rgb(145, 230, 9) !important;
  418. }
  419. .value2 {
  420. // color: rgb(0, 242, 255) !important;
  421. color: #ffff35 !important;
  422. }
  423. .value3 {
  424. // color: #ffff35 !important;
  425. color: #ff0000 !important;
  426. }
  427. .value4 {
  428. color: #ffbe69 !important;
  429. }
  430. .value5 {
  431. color: #ff6f00 !important;
  432. }
  433. .value6 {
  434. color: #ff0000 !important;
  435. }
  436. }
  437. }
  438. }
  439. .content {
  440. width: 100%;
  441. height: calc(83% - 20px);
  442. padding: 10px;
  443. background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
  444. background-size: 100% 100%;
  445. box-sizing: border-box;
  446. .title-b {
  447. height: 30px;
  448. line-height: 30px;
  449. font-family: 'douyuFont';
  450. font-size: 14px;
  451. color: #fff;
  452. // color: #3df6ff;
  453. }
  454. .card-btn {
  455. height: 28%;
  456. margin-bottom: 10px;
  457. display: flex;
  458. justify-content: space-between;
  459. .box-container {
  460. position: relative;
  461. width: 16%;
  462. height: 100%;
  463. background: url('../../../../../assets/images/fire/1.png') no-repeat center;
  464. background-size: 100% 100%;
  465. cursor: pointer;
  466. .box-label {
  467. position: absolute;
  468. left: 50%;
  469. top: 2px;
  470. transform: translate(-50%);
  471. color: #fff;
  472. }
  473. .box-item {
  474. position: absolute;
  475. left: 50%;
  476. transform: translate(-50%, 0);
  477. width: 89%;
  478. height: 16%;
  479. padding: 0px 10px;
  480. display: flex;
  481. justify-content: space-between;
  482. align-items: center;
  483. background: url('../../../../../assets/images/fire/contetn.png') no-repeat center;
  484. background-size: 100% 100%;
  485. .text-t {
  486. width: 17%;
  487. color: #fff;
  488. font-size: 12px;
  489. }
  490. .text-v {
  491. width: 83%;
  492. font-family: 'douyuFont';
  493. font-size: 10px;
  494. color: #3df6ff;
  495. display: flex;
  496. justify-content: flex-end;
  497. }
  498. }
  499. .box-item1 {
  500. top: 24%;
  501. }
  502. .box-item2 {
  503. top: 50%;
  504. }
  505. .box-item3 {
  506. top: 75%;
  507. }
  508. }
  509. .box-container1 {
  510. position: relative;
  511. width: 16%;
  512. height: 100%;
  513. background: url('../../../../../assets/images/fire/2.png') no-repeat center;
  514. background-size: 100% 100%;
  515. cursor: pointer;
  516. .box-label {
  517. position: absolute;
  518. left: 50%;
  519. top: 2px;
  520. transform: translate(-50%);
  521. color: #fff;
  522. }
  523. .box-item {
  524. position: absolute;
  525. left: 50%;
  526. transform: translate(-50%, 0);
  527. width: 89%;
  528. height: 16%;
  529. padding: 0px 10px;
  530. display: flex;
  531. justify-content: space-between;
  532. align-items: center;
  533. background: url('../../../../../assets/images/fire/contetn.png') no-repeat center;
  534. background-size: 100% 100%;
  535. .text-t {
  536. width: 17%;
  537. color: #fff;
  538. font-size: 12px;
  539. }
  540. .text-v {
  541. width: 83%;
  542. font-family: 'douyuFont';
  543. font-size: 10px;
  544. color: #3df6ff;
  545. display: flex;
  546. justify-content: flex-end;
  547. }
  548. }
  549. .box-item1 {
  550. top: 19%;
  551. }
  552. .box-item2 {
  553. top: 41%;
  554. }
  555. .box-item3 {
  556. top: 63%;
  557. }
  558. }
  559. }
  560. .echart-box {
  561. display: flex;
  562. height: calc(72% - 41px);
  563. .left-echartbox {
  564. width: calc(50% - 6px);
  565. margin-right: 6px;
  566. border: 1px solid #114aac;
  567. border-radius: 5px;
  568. .title-f {
  569. height: 40px;
  570. padding: 0px 10px;
  571. box-sizing: border-box;
  572. display: flex;
  573. justify-content: space-between;
  574. align-items: center;
  575. .title-text {
  576. font-family: 'douyuFont';
  577. font-size: 14px;
  578. color: #fff;
  579. // color: #3df6ff;
  580. }
  581. }
  582. .echarts-box {
  583. height: calc(100% - 40px);
  584. padding: 0px 10px;
  585. box-sizing: border-box;
  586. }
  587. }
  588. .right-echartbox {
  589. width: calc(50% - 6px);
  590. margin-left: 6px;
  591. border: 1px solid #114aac;
  592. border-radius: 5px;
  593. }
  594. }
  595. }
  596. }
  597. :deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
  598. border: 1px solid #3ad8ff77 !important;
  599. background-color: #ffffff00 !important;
  600. }
  601. :deep(.zxm-select-selection-item) {
  602. color: #fff !important;
  603. }
  604. </style>