dustWarn.vue 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643
  1. <template>
  2. <customHeader :options="options" @change="getSelectRow" :optionValue="optionValue"> 粉尘监测预警 </customHeader>
  3. <div class="dustWarn">
  4. <div class="top-dust">
  5. <a-button
  6. v-if="!hasPermission('dustWarn:return')"
  7. preIcon="ant-design:rollback-outlined"
  8. type="text"
  9. size="small"
  10. style="position: absolute; left: 15px; top: 15px; color: #fff"
  11. @click="getBack"
  12. >返回</a-button
  13. >
  14. <div class="alarm-menu">
  15. <div class="card-btn">
  16. <div :class="activeIndex1 == ind ? 'btn1' : 'btn'" v-for="(item, ind) in menuList" :key="ind" @click="cardClick(ind, item)">
  17. <div class="text">{{ item.name }}</div>
  18. <div class="warn">{{ item.warn }}</div>
  19. </div>
  20. </div>
  21. </div>
  22. <div class="dust-content">
  23. <div class="content-left">
  24. <div
  25. :class="activeIndex == index ? 'content-left-item' : 'content-left-item1'"
  26. v-for="(item, index) in topAreaList"
  27. :key="index"
  28. @click="topAreaClick(index)"
  29. >
  30. <div class="content-title">{{ item.title }}</div>
  31. <div class="content-items" v-for="(ite, ind) in item.content" :key="ind">
  32. <span>{{ ite.label }}</span>
  33. <span style="color: var(--vent-table-action-link)">{{ ite.value }}</span>
  34. </div>
  35. </div>
  36. </div>
  37. <div class="content-right">
  38. <div class="title-t">
  39. <div class="text-t">粉尘信息状态监测</div>
  40. </div>
  41. <div class="echart-boxd">
  42. <echartLine :echartDataGq="echartDataFc" :maxY="maxY" :echartDw="echartDw" :gridV="gridV" />
  43. </div>
  44. </div>
  45. </div>
  46. </div>
  47. <div class="bot-dust">
  48. <div class="bot-area">
  49. <MeasurePoint title="粉尘监控测点信息" :cards="cardListTf" :charts="chartListTf" chartWidth="420px" />
  50. </div>
  51. </div>
  52. </div>
  53. </template>
  54. <script setup lang="ts">
  55. import { ref, reactive, onMounted, onUnmounted } from 'vue';
  56. import { sysTypeWarnList, sysWarn, getDevice } from '../common.api';
  57. import echartLine from '../common/echartLine.vue';
  58. import { useSystemSelect } from '/@/hooks/vent/useSystemSelect';
  59. import { useRouter } from 'vue-router';
  60. import CustomHeader from '/@/components/vent/customHeader.vue';
  61. import { usePermission } from '/@/hooks/web/usePermission';
  62. import MeasurePoint from '../common/measurePoint.vue';
  63. import moment from 'moment';
  64. const { hasPermission } = usePermission();
  65. const { options, optionValue, getSelectRow, getSysDataSource } = useSystemSelect('sys_surface_caimei'); // 参数为场景类型(设备类型管理中可以查询到)
  66. //左侧数据列表
  67. let menuList = ref<any[]>([]);
  68. //当前左侧激活菜单的索引
  69. let activeIndex1 = ref(0);
  70. //顶部区域激活选项
  71. let activeIndex = ref(0);
  72. //顶部区域数据
  73. let topAreaList = reactive<any[]>([]);
  74. let choiceData = reactive<any[]>([]);
  75. //粉尘图表数据
  76. let echartDataFc = reactive({
  77. maxData: {
  78. lengedData: '实时值(mg/m³)',
  79. data: [],
  80. },
  81. minData: {
  82. lengedData: '预测值(mg/m³)',
  83. data: [],
  84. },
  85. aveValue: {
  86. lengedData: '预警值(mg/m³)',
  87. data: [],
  88. },
  89. xData: [],
  90. });
  91. let maxY = ref<any>(0);
  92. let echartDw = ref('(mg/m³)');
  93. let gridV = reactive({
  94. top: '12%',
  95. left: '1%',
  96. bottom: '5%',
  97. right: '5%',
  98. containLabel: true,
  99. });
  100. const cardListTf = ref<any[]>([]);
  101. const chartListTf = ref<any[]>([]);
  102. let router = useRouter();
  103. let echartNow = ref<any[]>([]);
  104. let echartYc = reactive<any[]>([]);
  105. let flag = ref(true);
  106. // https获取监测数据
  107. let timer: null | NodeJS.Timeout = null;
  108. function getMonitor(deviceID, flag?) {
  109. timer = setTimeout(
  110. async () => {
  111. await getSysWarnList(deviceID, 'dust');
  112. await getWindDeviceList();
  113. if (timer) {
  114. timer = null;
  115. }
  116. getMonitor(deviceID);
  117. },
  118. flag ? 0 : 3000
  119. );
  120. }
  121. //返回首页
  122. function getBack() {
  123. router.push('/monitorChannel/monitor-alarm-home');
  124. }
  125. //菜单选项切换
  126. function cardClick(ind, item) {
  127. activeIndex1.value = ind;
  128. clearTimeout(timer);
  129. getMonitor(item.deviceID, true);
  130. }
  131. //顶部区域选项切换
  132. function topAreaClick(index) {
  133. activeIndex.value = index;
  134. echartDataFc.maxData.data.length = 0;
  135. echartDataFc.minData.data.length = 0;
  136. echartDataFc.aveValue.data.length = 0;
  137. echartDataFc.xData.length = 0;
  138. echartYc.length = 0;
  139. flag.value = true;
  140. if (flag.value) {
  141. echartNow.value = JSON.parse(choiceData[index].readData.expectInfo)['list'];
  142. flag.value = false;
  143. }
  144. echartYc.push({
  145. time: JSON.parse(choiceData[index].readData.expectInfo)['nowTime'],
  146. value: JSON.parse(choiceData[index].readData.expectInfo)['nowVal'],
  147. });
  148. let setData = [...echartNow.value, ...echartYc].sort((a, b) => Date.parse(new Date(a.time)) - Date.parse(new Date(b.time)));
  149. setData.forEach((el) => {
  150. if (el.value && el.value != '0') {
  151. echartDataFc.xData.push(el.time);
  152. echartDataFc.maxData.data.push(el.value);
  153. echartDataFc.minData.data.push(JSON.parse(choiceData[index].readData.expectInfo)['aveVal']);
  154. echartDataFc.aveValue.data.push(
  155. JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['fmin']
  156. ? JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['fmin']
  157. : 0
  158. );
  159. }
  160. });
  161. }
  162. //获取左侧菜单列表
  163. async function getMenuList() {
  164. let res = await sysTypeWarnList({ type: 'dust' });
  165. if (res.length != 0) {
  166. const menuListTemp: any[] = [];
  167. res.forEach((el) => {
  168. menuListTemp.push({
  169. name: el.systemname,
  170. warn: '低风险',
  171. deviceID: el.id,
  172. strtype: el.strtype,
  173. });
  174. });
  175. menuList.value = menuListTemp;
  176. getMonitor(menuList.value[0].deviceID, true);
  177. }
  178. }
  179. //获取预警详情弹窗右侧数据
  180. function getSysWarnList(id, type) {
  181. sysWarn({ sysid: id, type: type }).then((res) => {
  182. // listData.common = res;
  183. topAreaList.length = 0;
  184. if (JSON.stringify(res) != '{}') {
  185. res.dust.forEach((el) => {
  186. topAreaList.push({
  187. title: el.strinstallpos,
  188. content: [
  189. { ids: 0, label: '温度(°C)', value: el.readData.temperature || '--' },
  190. { ids: 1, label: '粉尘浓度(mg/m³)', value: el.readData.dustval || '--' },
  191. { ids: 2, label: '喷雾水压(MPa)', value: el.readData.waterPressure || '--' },
  192. { ids: 3, label: '喷雾状态', value: el.readData.atomizingState || '--' },
  193. ],
  194. });
  195. });
  196. choiceData = res.dust;
  197. if (choiceData[activeIndex.value]) {
  198. if (flag.value) {
  199. echartNow.value = JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['list'];
  200. flag.value = false;
  201. }
  202. echartYc.push({
  203. time: JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['nowTime'],
  204. value: JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['nowVal'],
  205. });
  206. let setData = [...echartNow.value, ...echartYc].sort((a, b) => Date.parse(new Date(a.time)) - Date.parse(new Date(b.time)));
  207. echartDataFc.maxData.data.length = 0;
  208. echartDataFc.minData.data.length = 0;
  209. echartDataFc.aveValue.data.length = 0;
  210. echartDataFc.xData.length = 0;
  211. setData.forEach((el) => {
  212. if (el.value && el.value != '0') {
  213. echartDataFc.xData.push(el.time);
  214. echartDataFc.maxData.data.push(el.value);
  215. echartDataFc.minData.data.push(JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['aveVal']);
  216. echartDataFc.aveValue.data.push(
  217. JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['fmin']
  218. ? JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['fmin']
  219. : 0
  220. );
  221. }
  222. });
  223. maxY.value = echartDataFc.maxData.data.reduce((acr, cur) => {
  224. return acr > cur ? acr : cur;
  225. });
  226. maxY.value =
  227. maxY.value.toString().indexOf('.') == -1 ? maxY.value.toString() : maxY.value.toString().substring(0, maxY.value.toString().indexOf('.'));
  228. if (maxY.value.length < 2 && Number(maxY.value) < 1) {
  229. maxY.value = 1;
  230. } else if (maxY.value.length < 2 && Number(maxY.value) >= 1) {
  231. maxY.value = 10;
  232. } else if (maxY.value.length < 3) {
  233. maxY.value = (Number(maxY.value[0]) + 1) * 10;
  234. } else if (maxY.value.length < 4) {
  235. maxY.value = (Number(maxY.value[0]) + 1) * 100;
  236. } else if (maxY.value.length < 5) {
  237. maxY.value = (Number(maxY.value[0]) + 1) * 1000;
  238. } else if (maxY.value.length < 6) {
  239. maxY.value = (Number(maxY.value[0]) + 1) * 10000;
  240. }
  241. } else {
  242. activeIndex.value = 0;
  243. if (flag.value) {
  244. echartNow.value = JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['list'];
  245. flag.value = false;
  246. }
  247. echartYc.push({
  248. time: JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['nowTime'],
  249. value: JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['nowVal'],
  250. });
  251. let setData = [...echartNow.value, ...echartYc].sort((a, b) => Date.parse(new Date(a.time)) - Date.parse(new Date(b.time)));
  252. echartDataFc.maxData.data.length = 0;
  253. echartDataFc.minData.data.length = 0;
  254. echartDataFc.aveValue.data.length = 0;
  255. echartDataFc.xData.length = 0;
  256. setData.forEach((el) => {
  257. if (el.value && el.value != '0') {
  258. echartDataFc.xData.push(el.time);
  259. echartDataFc.maxData.data.push(el.value);
  260. echartDataFc.minData.data.push(JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['aveVal']);
  261. echartDataFc.aveValue.data.push(
  262. JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['fmin']
  263. ? JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['fmin']
  264. : 0
  265. );
  266. }
  267. });
  268. maxY.value = echartDataFc.maxData.data.reduce((acr, cur) => {
  269. return acr > cur ? acr : cur;
  270. });
  271. maxY.value =
  272. maxY.value.toString().indexOf('.') == -1 ? maxY.value.toString() : maxY.value.toString().substring(0, maxY.value.toString().indexOf('.'));
  273. if (maxY.value.length < 2) {
  274. maxY.value = 10;
  275. } else if (maxY.value.length < 3) {
  276. maxY.value = (Number(maxY.value[0]) + 1) * 10;
  277. } else if (maxY.value.length < 4) {
  278. maxY.value = (Number(maxY.value[0]) + 1) * 100;
  279. } else if (maxY.value.length < 5) {
  280. maxY.value = (Number(maxY.value[0]) + 1) * 1000;
  281. } else if (maxY.value.length < 6) {
  282. maxY.value = (Number(maxY.value[0]) + 1) * 10000;
  283. }
  284. }
  285. }
  286. });
  287. }
  288. //获取粉尘监控测点信息
  289. async function getWindDeviceList() {
  290. // cardListTf.length = 0;
  291. const cardListTfTemp: any[] = [];
  292. const chartListTfTemp: any[] = [];
  293. let res = await getDevice({ devicetype: 'dusting', pagetype: 'normal' });
  294. if (res && res.msgTxt[0]) {
  295. let list = res.msgTxt[0].datalist || [];
  296. if (list.length > 0) {
  297. list.forEach((el: any) => {
  298. const readData = el.readData;
  299. el = Object.assign(el, readData);
  300. cardListTfTemp.push({
  301. label: '通信状态',
  302. value: el.netStatus == '0' ? '断开' : '连接',
  303. listR: [
  304. { id: 0, label: '安装位置', dw: '', value: el.strinstallpos || '-' },
  305. { id: 1, label: '粉尘浓度', dw: '(mg/m³)', value: el.dustval || '-' },
  306. {
  307. id: 2,
  308. label: '巷道湿度',
  309. dw: el.humidity && Number(el.humidity) < 1 ? '(RH)' : el.humidity && Number(el.humidity) > 1 ? '(%RH)' : '',
  310. value: el.humidity || '-',
  311. },
  312. { id: 4, label: '巷道温度', dw: el.humidity ? '(℃)' : '', value: el.temperature || '-' },
  313. {
  314. id: 3,
  315. label: '是否报警',
  316. dw: '',
  317. value: el.warnFlag == '0' ? '正常' : el.warnFlag == 1 ? '报警' : el.warnFlag == 2 ? '断开' : '未监测',
  318. },
  319. ],
  320. });
  321. // 初始化预测曲线配置,分别为x轴时间、平均、最大、最小、实时
  322. const avgParam = el.avgParam || {
  323. avg_dusting_value: 0,
  324. max_dusting_value: 0,
  325. min_dusting_value: 0,
  326. };
  327. chartListTfTemp.push({
  328. label: el.strinstallpos,
  329. time: new Date(),
  330. data: [avgParam.avg_dusting_value, avgParam.max_dusting_value, avgParam.min_dusting_value, el.readData.dustval],
  331. });
  332. });
  333. }
  334. }
  335. cardListTf.value = cardListTfTemp;
  336. chartListTf.value = chartListTfTemp;
  337. }
  338. onMounted(() => {
  339. getMenuList();
  340. // getWindDeviceList();
  341. });
  342. onUnmounted(() => {
  343. if (timer) {
  344. clearTimeout(timer);
  345. timer = undefined;
  346. }
  347. });
  348. </script>
  349. <style lang="less" scoped>
  350. @import '/@/design/theme.less';
  351. @{theme-deepblue} {
  352. .dustWarn {
  353. --image-border: url('/@/assets/images/themify/deepblue/fire/border.png');
  354. --image-no-choice: url('/@/assets/images/themify/deepblue/fire/no-choice.png');
  355. --image-choice: url('/@/assets/images/themify/deepblue/fire/choice.png');
  356. --image-dust-choice: url('/@/assets/images/themify/deepblue/fire/dust-choice.png');
  357. --image-dust-content: url('/@/assets/images/themify/deepblue/fire/dust-content.png');
  358. --image-dust-choice1: url('/@/assets/images/themify/deepblue/fire/dust-choice1.png');
  359. --image-dust-content: url('/@/assets/images/themify/deepblue/fire/dust-content.png');
  360. --image-bj1: url('/@/assets/images/themify/deepblue/fire/bj1.png');
  361. }
  362. }
  363. .dustWarn {
  364. --image-border: url('/@/assets/images/fire/border.png');
  365. --image-no-choice: url('/@/assets/images/fire/no-choice.png');
  366. --image-choice: url('/@/assets/images/fire/choice.png');
  367. --image-dust-choice: url('/@/assets/images/fire/dust-choice.png');
  368. --image-dust-content: url('/@/assets/images/fire/dust-content.png');
  369. --image-dust-choice1: url('/@/assets/images/fire/dust-choice1.png');
  370. --image-dust-content: url('/@/assets/images/fire/dust-content.png');
  371. --image-bj1: url('/@/assets/images/fire/bj1.png');
  372. width: 100%;
  373. height: 100%;
  374. padding: 80px 10px 15px 10px;
  375. box-sizing: border-box;
  376. .top-dust {
  377. display: flex;
  378. justify-content: space-between;
  379. height: 50%;
  380. margin-bottom: 15px;
  381. background: var(--image-border) no-repeat center;
  382. background-size: 100% 100%;
  383. .alarm-menu {
  384. height: 100%;
  385. width: 15%;
  386. padding: 10px;
  387. box-sizing: border-box;
  388. .card-btn {
  389. width: 100%;
  390. height: 100%;
  391. overflow-y: auto;
  392. .btn {
  393. position: relative;
  394. width: 81%;
  395. height: 24%;
  396. margin-bottom: 6%;
  397. font-family: 'douyuFont';
  398. background: var(--image-no-choice) no-repeat;
  399. background-size: 100% 100%;
  400. cursor: pointer;
  401. .text {
  402. width: 80%;
  403. position: absolute;
  404. left: 50%;
  405. top: 28px;
  406. font-size: 14px;
  407. color: var(--vent-table-action-link);
  408. text-align: center;
  409. transform: translate(-50%, 0);
  410. }
  411. .warn {
  412. width: 100%;
  413. position: absolute;
  414. left: 50%;
  415. bottom: 11px;
  416. font-size: 12px;
  417. color: #fff;
  418. text-align: center;
  419. transform: translate(-50%, 0);
  420. }
  421. }
  422. .btn1 {
  423. position: relative;
  424. width: 100%;
  425. height: 24%;
  426. margin-bottom: 6%;
  427. font-family: 'douyuFont';
  428. background: var(--image-choice) no-repeat;
  429. background-size: 100% 100%;
  430. cursor: pointer;
  431. .text {
  432. width: 80%;
  433. position: absolute;
  434. left: 50%;
  435. top: 28px;
  436. font-size: 14px;
  437. color: var(--vent-table-action-link);
  438. text-align: center;
  439. transform: translate(-62%, 0);
  440. }
  441. .warn {
  442. width: 100%;
  443. position: absolute;
  444. left: 50%;
  445. bottom: 11px;
  446. font-size: 14px;
  447. color: #fff;
  448. text-align: center;
  449. transform: translate(-60%, 0);
  450. }
  451. }
  452. }
  453. }
  454. .dust-content {
  455. display: flex;
  456. justify-content: space-between;
  457. height: 100%;
  458. width: 85%;
  459. padding: 10px 0px;
  460. box-sizing: border-box;
  461. .content-left {
  462. width: 280px;
  463. height: 100%;
  464. display: flex;
  465. flex-direction: column;
  466. // justify-content: space-around;
  467. align-items: flex-start;
  468. overflow-y: auto;
  469. overflow-x: hidden;
  470. .content-left-item {
  471. position: relative;
  472. width: 272px;
  473. height: 173px;
  474. flex-shrink: 0;
  475. background: var(--image-dust-choice) no-repeat center;
  476. background-size: 100% 100%;
  477. margin: 5px 0px;
  478. .content-title {
  479. width: 85%;
  480. position: absolute;
  481. top: 2px;
  482. left: 50%;
  483. transform: translate(-55%, 0);
  484. font-size: 14px;
  485. color: #fff;
  486. text-align: center;
  487. }
  488. .content-items {
  489. position: absolute;
  490. left: 50%;
  491. transform: translate(-54%, 0);
  492. display: flex;
  493. justify-content: space-between;
  494. align-items: center;
  495. width: 240px;
  496. height: 26px;
  497. color: #fff;
  498. font-size: 14px;
  499. padding: 0px 5px;
  500. box-sizing: border-box;
  501. background: var(--image-dust-content) no-repeat center;
  502. background-size: 100% 100%;
  503. &:nth-child(2) {
  504. top: 32px;
  505. }
  506. &:nth-child(3) {
  507. top: 67px;
  508. }
  509. &:nth-child(4) {
  510. top: 102px;
  511. }
  512. &:nth-child(5) {
  513. top: 136px;
  514. }
  515. }
  516. }
  517. .content-left-item1 {
  518. position: relative;
  519. width: 250px;
  520. height: 173px;
  521. flex-shrink: 0;
  522. background: var(--image-dust-choice1) no-repeat center;
  523. background-size: 100% 100%;
  524. margin: 5px 0px;
  525. .content-title {
  526. width: 85%;
  527. position: absolute;
  528. top: 2px;
  529. left: 50%;
  530. transform: translate(-50%, 0);
  531. font-size: 14px;
  532. color: #fff;
  533. text-align: center;
  534. }
  535. .content-items {
  536. position: absolute;
  537. left: 50%;
  538. transform: translate(-54%, 0);
  539. display: flex;
  540. justify-content: space-between;
  541. align-items: center;
  542. width: 215px;
  543. height: 26px;
  544. color: #fff;
  545. font-size: 14px;
  546. padding: 0px 5px;
  547. box-sizing: border-box;
  548. background: var(--image-dust-content) no-repeat center;
  549. background-size: 100% 100%;
  550. &:nth-child(2) {
  551. top: 32px;
  552. }
  553. &:nth-child(3) {
  554. top: 67px;
  555. }
  556. &:nth-child(4) {
  557. top: 102px;
  558. }
  559. &:nth-child(5) {
  560. top: 136px;
  561. }
  562. }
  563. }
  564. }
  565. .content-right {
  566. width: calc(100% - 280px);
  567. height: 100%;
  568. .title-t {
  569. height: 30px;
  570. margin-bottom: 10px;
  571. display: flex;
  572. justify-content: space-between;
  573. align-items: center;
  574. .text-t {
  575. font-family: 'douyuFont';
  576. font-size: 14px;
  577. color: #fff;
  578. }
  579. }
  580. .echart-boxd {
  581. width: 100%;
  582. height: calc(100% - 40px);
  583. }
  584. }
  585. }
  586. }
  587. .bot-dust {
  588. height: calc(50% - 15px);
  589. background: var(--image-border) no-repeat center;
  590. background-size: 100% 100%;
  591. padding: 10px;
  592. box-sizing: border-box;
  593. .bot-area {
  594. height: 100%;
  595. padding: 10px;
  596. background: var(--image-bj1) no-repeat center;
  597. background-size: 100% 100%;
  598. box-sizing: border-box;
  599. }
  600. }
  601. }
  602. </style>