Newer
Older
KaiFengPC / src / views / floodSys / floodOneMap / commonPopupSupervise.vue
@jimengfei jimengfei on 22 Jul 18 KB updata
  1. <template>
  2. <!-- 管网监测弹窗 -->
  3. <div class="supervisePopup" id="supervisePopup" v-show="allData.popupShow">
  4. <div class="title">
  5. <div class="titleName">{{ allData.dataList['stName'] }}</div>
  6. <div class="closePopup">
  7. <el-icon :size="18" @click="closePopup"><Close /></el-icon>
  8. </div>
  9. </div>
  10. <div class="allContent">
  11. <div class="basicInfo">
  12. <div class="basicContent">
  13. <div class="contentInfo">
  14. <div class="contentName">站点编码:</div>
  15. <div class="contentValue">{{ allData.dataList['stCode'] }}</div>
  16. </div>
  17. <div class="contentInfo" v-if="allData.dataList['address']">
  18. <div class="contentName">安装地址:</div>
  19. <div class="contentValue" :title="allData.dataList['address']">
  20. {{ allData.dataList['address'] }}
  21. </div>
  22. </div>
  23. <div class="contentInfo">
  24. <div class="contentName">站点经度:</div>
  25. <div class="contentValue">{{ allData.dataList['lon'] }}</div>
  26. </div>
  27. <div class="contentInfo">
  28. <div class="contentName">站点纬度:</div>
  29. <div class="contentValue">{{ allData.dataList['lat'] }}</div>
  30. </div>
  31. <div class="contentInfo" v-if="allData.dataList['onlineStatus']">
  32. <div class="contentName">在线状态:</div>
  33. <div class="contentValue">{{ allData.dataList['onlineStatus'] }}</div>
  34. </div>
  35. <div class="contentInfo" v-if="allData.dataList['groundElevation']">
  36. <div class="contentName">地面标高:</div>
  37. <div class="contentValue">{{ allData.dataList['groundElevation'] }}m</div>
  38. </div>
  39. <div class="contentInfo" v-if="allData.dataList['bottomBuriedDepth']">
  40. <div class="contentName">井底标高:</div>
  41. <div class="contentValue">{{ allData.dataList['bottomBuriedDepth'] }}m</div>
  42. </div>
  43. <div class="contentInfo" v-if="allData.dataList['sectionTypeMax']">
  44. <div class="contentName">管径:</div>
  45. <div class="contentValue">{{ allData.dataList['sectionTypeMax'] }}m</div>
  46. </div>
  47. <!-- <div class="contentInfo" v-if="allData.dataList['sectionType']">
  48. <div class="contentName">管径:</div>
  49. <div class="contentValue">{{ allData.dataList['sectionType'] }}m</div>
  50. </div> -->
  51. </div>
  52. <el-image
  53. v-if="allData.dataList['coverPhotosFileList']"
  54. :src="allData.dataList['coverPhotosFileList'][0]"
  55. :preview-src-list="srcList"
  56. style="padding-left: 50px"
  57. />
  58. </div>
  59. <div class="dividerLine"></div>
  60. <div class="trend">
  61. <!-- <el-date-picker
  62. v-model="allData.dataTime1"
  63. type="daterange"
  64. start-placeholder="开始时间"
  65. end-placeholder="结束时间"
  66. size="small"
  67. @change="changeDate"
  68. style="width: 220px"
  69. /> -->
  70. <el-date-picker
  71. v-model="allData.dataTime1"
  72. type="date"
  73. value-format="YYYY-MM-DD"
  74. start-placeholder="开始时间"
  75. end-placeholder="结束时间"
  76. size="small"
  77. style="width: 120px; margin-left: 10px"
  78. @change="changeDate"
  79. />
  80. -
  81. <el-date-picker
  82. v-model="allData.dataTime2"
  83. type="date"
  84. value-format="YYYY-MM-DD"
  85. start-placeholder="开始时间"
  86. end-placeholder="结束时间"
  87. size="small"
  88. style="width: 120px"
  89. @change="changeDate"
  90. />
  91. <el-select v-model="selectCode" style="margin: 0px 0px 0px 10px; width: 120px" size="small" @change="changeSuperType">
  92. <el-option v-for="(item, index) in dataOption" :key="index" :label="item.label" :value="item.value" />
  93. </el-select>
  94. <div id="chartPopupSupervise" v-if="propertyMonitorXList.length > 0"></div>
  95. <!-- 暂无数据 -->
  96. <el-empty :image-size="80" v-if="propertyMonitorXList.length == 0" style="margin-top: 50px" />
  97. </div>
  98. </div>
  99. </div>
  100. </template>
  101.  
  102. <script setup name="commonSupervisePopup">
  103. import bus from '@/bus';
  104. import chartOption from '@/components/Echarts/pieChart_1.js';
  105. import * as echarts from 'echarts';
  106. import { graphicReport } from '@/api/dataAnalysis/syntherticData';
  107. const { proxy } = getCurrentInstance();
  108. const allData = reactive({
  109. popupShow: false,
  110. currentIndex: 1,
  111. warnFormulaValue: '',
  112. dataTime1: proxy.moment(new Date()).subtract(3, 'days').format('YYYY-MM-DD'),
  113. dataTime2: proxy.moment(new Date()).format('YYYY-MM-DD'),
  114. // dataTime1: [proxy.moment().subtract(1, 'days').format('YYYY-MM-DD'), proxy.moment().format('YYYY-MM-DD')],
  115. dataList: {},
  116. });
  117. const dataOption = ref([]);
  118. const selectData = ref([]);
  119. const selectCode = ref('');
  120. const seleceName = ref('');
  121. const unitName = ref('');
  122. const propertyMonitorXList = ref([]);
  123.  
  124. const dmgc = ref(''); //地面高程
  125. const gqgc = ref(''); //管顶高程
  126. const yjzhb = ref(''); //预警值带海拔
  127. const swdhb = ref(''); //水位带海拔
  128. const gdgc = ref(''); //管底高程
  129.  
  130. const closePopup = () => {
  131. allData.popupShow = false;
  132. allData.dataTime1 = proxy.moment(new Date()).subtract(3, 'days').format('YYYY-MM-DD');
  133. allData.dataTime2 = proxy.moment(new Date()).format('YYYY-MM-DD');
  134. newfiberMapbox.map.easeTo({
  135. center: [114.312, 34.802],
  136. zoom: 12.9,
  137. pitch: 55,
  138. });
  139.  
  140. let clearSelectedFeature = [];
  141. newfiberMapbox.getLayers().forEach(feature => {
  142. if (feature.newfiberId == 'highlight_point') {
  143. clearSelectedFeature.push(feature);
  144. }
  145. });
  146.  
  147. if (!!clearSelectedFeature.length) {
  148. clearSelectedFeature[0].setData({ type: 'FeatureCollection', features: [] });
  149. }
  150. };
  151. //时间格式化
  152. const getYearMonthDay = time => {
  153. return proxy.moment(time).format('YYYY-MM-DD');
  154. };
  155. const changeDate = () => {
  156. // allData.dataTime1 = [getYearMonthDay(allData.dataTime1[0]), getYearMonthDay(allData.dataTime1[1])];
  157.  
  158. getSuperViseData();
  159. };
  160. function changeSuperType(val) {
  161. selectCode.value = val;
  162. let obj = dataOption.value.filter(item => item.value == val)[0];
  163. selectCode.value = obj.value;
  164. seleceName.value = obj.label;
  165. unitName.value = obj.propertyUnit;
  166. selectData.value = obj.ylist;
  167. allData.warnFormulaValue = '';
  168. if (Boolean(allData.dataList.siteWarnConfigList && allData.dataList.siteWarnConfigList.length) && seleceName.value) {
  169. let alist = JSON.parse(allData.dataList.siteWarnConfigList);
  170. alist.forEach(element => {
  171. if (element.warnFactorName.includes(seleceName.value)) {
  172. allData.warnFormulaValue = element.warnFormulaValue;
  173. }
  174. });
  175. }
  176. //如果是水位,则计算地面高程、管顶高程、预警值带海拔、水位带海拔、管底高程
  177.  
  178. if (seleceName.value === '水位' && allData.dataList.groundElevation) {
  179. var testData = { ...allData.dataList };
  180. // testData.endCopNoseElevation = '25.004';
  181. // testData.endGroundDepth = '0.98';
  182.  
  183. var test = calcValue({
  184. groundElevation: testData.groundElevation,
  185. endTopElevation: testData.endTopElevation,
  186. sectionTypeMax: testData.sectionTypeMax,
  187. warnFormulaValue: allData.warnFormulaValue,
  188. waterLevel: selectData.value,
  189. });
  190. dmgc.value = test.dmgc; //地面高程
  191. gqgc.value = test.gxgc; //管顶高程
  192. yjzhb.value = test.yjzdhb; //预警值带海拔
  193. swdhb.value = test.swdhb; //水位带海拔
  194. gdgc.value = test.gdgc; //管底高程
  195. } else {
  196. dmgc.value = ''; //地面高程
  197. gqgc.value = ''; //管顶高程
  198. yjzhb.value = ''; //预警值带海拔
  199. swdhb.value = ''; //水位带海拔
  200. gdgc.value = ''; //管底高程
  201. }
  202. setTimeout(() => {
  203. initEcharts1();
  204. });
  205. }
  206.  
  207. /**
  208. * 处理数字,若是NaN则返回空字符串,否则返回保留两位小数的字符串
  209. * @param {string} val
  210. */
  211. function stringToNumberFixed(val) {
  212. return isNaN(val) ? '' : val.toFixed(2);
  213. }
  214. /**
  215. * 计算地面高程、管顶高程、预警值带海拔、水位带海拔、管底高程
  216. * @param {*} posinfoData
  217. */
  218. function calcValue(posinfoData) {
  219. var {
  220. groundElevation,
  221. endTopElevation,
  222. sectionTypeMax,
  223. // 水位
  224. waterLevel,
  225. // 预警值
  226. warnFormulaValue,
  227. } = posinfoData;
  228. // console.log('testtesttesttesttest', groundElevation, endTopElevation, sectionTypeMax, waterLevel, warnFormulaValue);
  229. // 地面高程 groundElevation
  230. // 管顶高程 endTopElevation
  231. // 预警值带海拔 endTopElevation-sectionTypeMax+预警值
  232. // 水位带海拔 endTopElevation-sectionTypeMax+水位
  233. // 管底高程 endTopElevation-sectionTypeMax
  234.  
  235. var gxgc = parseFloat(endTopElevation);
  236. var tempVal = gxgc - parseFloat(sectionTypeMax);
  237. return {
  238. // 地面高程
  239. dmgc: stringToNumberFixed(parseFloat(groundElevation)),
  240. // 管顶高程
  241. gxgc: stringToNumberFixed(gxgc),
  242. // 预警值带海拔
  243. yjzdhb: warnFormulaValue ? stringToNumberFixed(tempVal + parseFloat(warnFormulaValue)) : '',
  244. // 水位带海拔
  245. swdhb: waterLevel.map(item => stringToNumberFixed(tempVal + parseFloat(item))),
  246. // 管底高程
  247. gdgc: stringToNumberFixed(tempVal),
  248. };
  249. }
  250. //获取监测数据
  251. const getSuperViseData = async () => {
  252. let params = {
  253. startTime: allData.dataTime1,
  254. endTime: allData.dataTime2,
  255. // startTime: '2024-01-01',
  256. // endTime: '2024-01-02',
  257. stCode: allData.dataList['stCode'] || allData.dataList['站点编码'],
  258. };
  259. dataOption.value = [];
  260. let res = await graphicReport(params);
  261. if (res && res.code == 200) {
  262. let datas = res.data;
  263. datas.propertyMonitorList.map(item => {
  264. dataOption.value.push({
  265. value: item.stCode + item.monitorPropertyName,
  266. label: item.monitorPropertyName,
  267. propertyUnit: item.propertyUnit,
  268. ylist: item.ylist,
  269. });
  270. });
  271. propertyMonitorXList.value = datas.propertyMonitorXList;
  272. if (datas.propertyMonitorXList.length == 0) return;
  273. selectCode.value = dataOption.value[0].value;
  274. seleceName.value = dataOption.value[0].label;
  275. unitName.value = dataOption.value[0].propertyUnit;
  276. selectData.value = dataOption.value[0].ylist;
  277. if (Boolean(allData.dataList.siteWarnConfigList && allData.dataList.siteWarnConfigList.length) && seleceName.value) {
  278. let alist = JSON.parse(allData.dataList.siteWarnConfigList);
  279. alist.forEach(element => {
  280. if (element.warnFactorName.includes(seleceName.value)) {
  281. allData.warnFormulaValue = element.warnFormulaValue;
  282. }
  283. });
  284. }
  285. //如果是水位,则计算地面高程、管顶高程、预警值带海拔、水位带海拔、管底高程
  286.  
  287. if (seleceName.value === '水位' && allData.dataList.groundElevation) {
  288. var testData = { ...allData.dataList };
  289. var test = calcValue({
  290. groundElevation: testData.groundElevation,
  291. endTopElevation: testData.endTopElevation,
  292. sectionTypeMax: testData.sectionTypeMax,
  293. warnFormulaValue: allData.warnFormulaValue,
  294. waterLevel: selectData.value,
  295. });
  296. dmgc.value = test.dmgc; //地面高程
  297. gqgc.value = test.gxgc; //管顶高程
  298. yjzhb.value = test.yjzdhb; //预警值带海拔
  299. swdhb.value = test.swdhb; //水位带海拔
  300. gdgc.value = test.gdgc; //管底高程
  301. } else {
  302. chartOption.floodOneMapPipewater.series[1].data = [];
  303. chartOption.floodOneMapPipewater.series[1].markLine = '';
  304. }
  305. setTimeout(() => {
  306. initEcharts1();
  307. });
  308. }
  309. };
  310. //管网监测趋势图
  311. let chartPopupSup = null;
  312. const initEcharts1 = () => {
  313. if (!!chartPopupSup) chartPopupSup.dispose();
  314. chartPopupSup = echarts.init(document.getElementById('chartPopupSupervise'));
  315. chartOption.floodOneMapPipewater.legend.data = [seleceName.value];
  316. (chartOption.floodOneMapPipewater.yAxis[0] = {
  317. name: 'SS(mg/l)',
  318. type: 'value',
  319. textStyle: {
  320. color: '#00D1FF',
  321. },
  322. axisLine: {
  323. show: false,
  324. lineStyle: {
  325. color: '#00D1FF', //刻度线的颜色
  326. },
  327. },
  328. splitLine: {
  329. //x网格样式
  330. show: true,
  331. lineStyle: {
  332. color: '#00D1FF',
  333. type: 'dashed',
  334. },
  335. },
  336. }),
  337. (chartOption.floodOneMapPipewater.yAxis[0].name = unitName.value);
  338. chartOption.floodOneMapPipewater.yAxis[1].name = '';
  339.  
  340. // chartOption.floodOneMapPipewater.xAxis[0].data = propertyMonitorXList.value;
  341. chartOption.floodOneMapPipewater.xAxis[0].data = [];
  342. if (Boolean(propertyMonitorXList.value.length)) {
  343. propertyMonitorXList.value.forEach(i => {
  344. chartOption.floodOneMapPipewater.xAxis[0].data.push(i.substr(0, 16));
  345. });
  346. }
  347. chartOption.floodOneMapPipewater.series[0].name = seleceName.value;
  348. chartOption.floodOneMapPipewater.series[0].data = selectData.value;
  349. chartOption.floodOneMapPipewater.series[1].data = [];
  350. chartOption.floodOneMapPipewater.series[0].markLine = {
  351. symbol: 'none',
  352. label: {
  353. show: !!allData.warnFormulaValue,
  354. position: 'middle',
  355. formatter: seleceName.value + '警戒值:{c}',
  356. color: 'red',
  357. fontWeight: 'bold',
  358. },
  359. lineStyle: {
  360. color: 'red',
  361. width: 2,
  362. type: 'solid',
  363. },
  364. data: [
  365. {
  366. name: '警戒值',
  367. yAxis: allData.warnFormulaValue,
  368. },
  369. ],
  370. };
  371. if (seleceName.value === '水位' && swdhb.value) {
  372. chartOption.floodOneMapPipewater.series[0].data = swdhb.value;
  373. chartOption.floodOneMapPipewater.series[0].name = '水位';
  374. chartOption.floodOneMapPipewater.legend.data = ['水位'];
  375.  
  376. chartOption.floodOneMapPipewater.series[0].markLine = {
  377. symbol: 'none', //去掉警戒线最后面的箭头
  378. label: {
  379. position: 'end', //将警示值放在哪个位置,三个值“start”,"middle","end"  开始  中点 结束
  380. },
  381. data: [
  382. {
  383. silent: false, //鼠标悬停事件  true没有,false有
  384. lineStyle: {
  385. //警戒线的样式  ,虚实  颜色
  386. type: 'dashed',
  387. color: '#80c342',
  388. },
  389. name: '地面标高',
  390. yAxis: dmgc.value,
  391. label: {
  392. formatter: '地面标高',
  393. color: '#80c342',
  394. rotate: 40,
  395. },
  396. },
  397. {
  398. silent: false, //鼠标悬停事件  true没有,false有
  399. lineStyle: {
  400. //警戒线的样式  ,虚实  颜色
  401. type: 'dashed',
  402. color: '#4d90fe',
  403. },
  404. name: '管顶标高',
  405. yAxis: gqgc.value,
  406. label: {
  407. formatter: '管顶标高',
  408. color: '#4d90fe',
  409. rotate: 40,
  410. },
  411. },
  412. {
  413. silent: false, //鼠标悬停事件  true没有,false有
  414. lineStyle: {
  415. //警戒线的样式  ,虚实  颜色
  416. type: 'dashed',
  417. color: '#e94242',
  418. },
  419. name: '管底标高',
  420. yAxis: gdgc.value,
  421. label: {
  422. formatter: '管底标高',
  423. color: '#e94242',
  424. rotate: 40,
  425. },
  426. },
  427. ],
  428. };
  429. chartOption.floodOneMapPipewater.yAxis[0] = {
  430. type: 'value',
  431. name: '单位(m)',
  432. nameTextStyle: {
  433. //y轴上方单位的颜色
  434. color: '#00d1ff',
  435. },
  436. axisLabel: {
  437. textStyle: {
  438. color: '#00d1ff', // 设置 y 轴标签文字的颜色为绿色
  439. },
  440. },
  441. max: parseFloat(dmgc.value) + 2,
  442. min: stringToNumberFixed(gdgc.value - parseFloat(gdgc.value) * 0.05),
  443. axisLine: {
  444. show: false,
  445. },
  446. axisTick: {
  447. show: false,
  448. },
  449. splitLine: {
  450. show: false,
  451. },
  452. };
  453. }
  454. // 设置鼠标滚轮放大缩小展示数据区间
  455. chartOption.floodOneMapPipewater.dataZoom = [
  456. { type: 'inside', startValue: propertyMonitorXList.value[propertyMonitorXList.value.length / 2] },
  457. ];
  458. if (propertyMonitorXList.value.length > 0) {
  459. chartOption.floodOneMapPipewater.graphic.invisible = true; //暂无数据
  460. } else {
  461. chartOption.floodOneMapPipewater.graphic.invisible = false; //暂无数据
  462. }
  463. console.log(chartOption.floodOneMapPipewater, 9999999);
  464. chartPopupSup.clear();
  465. chartPopupSup.setOption(chartOption.floodOneMapPipewater);
  466. };
  467. onMounted(() => {
  468. bus.on('closeCommonPopup', closeCommonPopup => {
  469. allData.popupShow = closeCommonPopup;
  470. });
  471. bus.on('popupSuperviseData', data => {
  472. allData.popupShow = data.popupShow;
  473. allData.dataList = data.popupInfo;
  474. if (!!chartPopupSup) chartPopupSup.dispose();
  475. selectCode.value = '';
  476. seleceName.value = '';
  477. getSuperViseData();
  478. });
  479. });
  480. onBeforeUnmount(() => {
  481. bus.off('popupSuperviseData');
  482. bus.off('closeCommonPopup');
  483. });
  484. </script>
  485. <style lang="scss">
  486. .supervisePopup {
  487. width: 748px;
  488. height: 476px;
  489. background-image: url('@/assets/newImgs/layer1.png');
  490. background-size: 100% 100%;
  491. z-index: 115;
  492. position: absolute;
  493. top: 80px;
  494. left: 330px;
  495. .title {
  496. padding-top: 30px;
  497. display: flex;
  498. align-items: center;
  499. justify-content: space-between;
  500. .titleName {
  501. display: flex;
  502. align-items: center;
  503. height: 22px;
  504. font-size: 16px;
  505. font-family: PingFang SC;
  506. font-weight: 400;
  507. color: #ccf1ff;
  508. line-height: 22px;
  509. padding-left: 80px;
  510. &:before {
  511. display: block;
  512. content: '';
  513. width: 3px;
  514. height: 16px;
  515. background: #00d1ff;
  516. margin-right: 10px;
  517. }
  518. }
  519. .closePopup {
  520. padding-right: 40px;
  521. height: 22px;
  522. cursor: pointer;
  523. }
  524. }
  525.  
  526. .allContent {
  527. display: flex;
  528. .basicInfo {
  529. width: 270px;
  530. margin-top: 10px;
  531. .basicContent {
  532. .contentInfo {
  533. display: flex;
  534. align-items: center;
  535. padding-left: 80px;
  536. .contentName {
  537. margin: 3px;
  538. height: 20px;
  539. width: 70px;
  540. font-size: 14px;
  541. font-weight: 400;
  542. line-height: 20px;
  543. color: #00d1ff;
  544. }
  545. .contentValue {
  546. height: 20px;
  547. width: 100px;
  548. font-size: 14px;
  549. font-weight: 400;
  550. line-height: 20px;
  551. color: #00d1ff;
  552. overflow: hidden;
  553. white-space: nowrap;
  554. text-overflow: ellipsis;
  555. }
  556. }
  557. }
  558. }
  559. .dividerLine {
  560. width: 3px;
  561. height: 350px;
  562. position: absolute;
  563. left: 250px;
  564. border: 1px;
  565. background: linear-gradient(90deg, rgba(0, 115, 165, 0) 0.79%, #0073a5 20.43%, #0073a5 82.43%, rgba(0, 115, 165, 0) 100%);
  566. }
  567. .trend {
  568. width: 450px;
  569. #chartPopupSupervise {
  570. width: 90%;
  571. height: 300px;
  572. margin-top: 20px;
  573. }
  574. }
  575. }
  576. }
  577. </style>