Newer
Older
KaiFengPC / src / views / sponeScreen / waterFlood / pipeDetail.vue
@zhangdeliang zhangdeliang on 18 Dec 13 KB udpate
  1. <template>
  2. <!-- 管网监测点详情 -->
  3. <div class="pipeMonitorDetail">
  4. <el-tabs v-model="tabActive" @tab-change="changeTab">
  5. <el-tab-pane label="管网剖面" name="1"></el-tab-pane>
  6. <el-tab-pane label="监测数据" name="2"></el-tab-pane>
  7. </el-tabs>
  8. <div class="content" v-loading="dataLoading">
  9. <!-- 管网剖面 -->
  10. <div class="pipePou flex" v-if="tabActive == 1">
  11. <div class="leftP">
  12. <!-- 井深 -->
  13. <div class="part partJ">井深:{{ pipeDetail.bottomBuriedDepthTemp || '--' }}米</div>
  14.  
  15. <!-- 水高度 -->
  16. <img src="@/assets/newImgs/HMScreen/pipeW.png" alt="" class="water" :style="{ height: waterHeight + 'px' }" />
  17. <div :class="['part', 'partW', realData.z > pipeDetail.pipelineDiameterTemp ? 'red' : '']">水深:{{ realData.z || '--' }}米</div>
  18.  
  19. <!-- 管径 -->
  20. <div class="part partJ" style="top: 210px">管径:{{ pipeDetail.pipelineDiameterTemp || '--' }}米</div>
  21. <div class="partGJ"></div>
  22.  
  23. <!-- 流速 -->
  24. <div class="part partL">流速:{{ realData.va || '--' }} m/s</div>
  25.  
  26. <!-- 设备 -->
  27. <img src="@/assets/newImgs/HMScreen/equip.png" alt="" class="equipA" />
  28. </div>
  29. <div class="rightP">
  30. <div class="title">基本信息</div>
  31. <div class="part flex">
  32. <div class="biaoti">站点名称:</div>
  33. <div class="cont">{{ realData.stName }}</div>
  34. </div>
  35. <div class="part flex">
  36. <div class="biaoti">所在位置:</div>
  37. <div class="cont">{{ pipeDetail.address || '--' }}</div>
  38. </div>
  39. <div class="part flex">
  40. <div class="biaoti">建设方式:</div>
  41. <div class="cont">{{ pipeDetail.buildType == 'owner' ? '自建' : '共享' }}</div>
  42. </div>
  43. <div class="part flex">
  44. <div class="biaoti">管网直径:</div>
  45. <div class="cont">{{ pipeDetail.pipelineDiameterTemp || '--' }} 米</div>
  46. </div>
  47. <div class="part flex">
  48. <div class="biaoti">安装高度:</div>
  49. <div class="cont">{{ pipeDetail.installHeight || '--' }} 米</div>
  50. </div>
  51. <div class="part flex">
  52. <div class="biaoti">安装日期:</div>
  53. <div class="cont">{{ pipeDetail.installDate || '--' }}</div>
  54. </div>
  55.  
  56. <div class="title" style="margin-top: 30px">实时数据</div>
  57. <div class="part flex">
  58. <div class="biaoti">水深:</div>
  59. <div class="cont">{{ realData.z || '--' }} 米</div>
  60. </div>
  61. <div class="part flex">
  62. <div class="biaoti">流速:</div>
  63. <div class="cont">{{ realData.va || '--' }}m/s</div>
  64. </div>
  65. <div class="part flex">
  66. <div class="biaoti">SS:</div>
  67. <div class="cont">{{ realData.turb || '--' }} mg/L</div>
  68. </div>
  69. <div class="part flex">
  70. <div class="biaoti">更新时间:</div>
  71. <div class="cont">{{ realData.tt || '--' }}</div>
  72. </div>
  73.  
  74. <div class="title">责任信息</div>
  75. <div class="part flex">
  76. <div class="biaoti">城管负责人:</div>
  77. <div class="cont">张小强 13328873032</div>
  78. </div>
  79.  
  80. <!-- 实时数据 -->
  81. <div v-if="ifReal">
  82. <!-- 有满管、管网冒溢风险时推送消息 -->
  83. <div class="part flex" v-if="realData.z >= (pipeDetail.pipelineDiameterTemp || '2')">
  84. <div class="biaoti">
  85. <el-button type="warning" @click="dialogShow = true">有满管风险,通知相关责任人进行处理</el-button>
  86. </div>
  87. </div>
  88. <div class="part flex" v-if="realData.z >= (pipeDetail.bottomBuriedDepthTemp || '2')">
  89. <div class="biaoti">
  90. <el-button type="warning" @click="dialogShow = true">有管网冒溢风险,通知相关责任人进行处理</el-button>
  91. </div>
  92. </div>
  93. </div>
  94.  
  95. <!-- 历史数据 -->
  96. <div v-if="!ifReal">
  97. <div class="part flex" v-if="realData.z >= (pipeDetail.pipelineDiameterTemp || '2')">
  98. <div class="biaoti" @click="dialogShow = true"><el-button type="warning">已短信通知相关责任人进行处理</el-button></div>
  99. </div>
  100. </div>
  101. </div>
  102. </div>
  103. <!-- 监测数据 -->
  104. <div class="pipeMonitor" v-if="tabActive == 2">
  105. <div class="selectToolList">
  106. <el-date-picker
  107. v-model="pipeTime"
  108. type="daterange"
  109. value-format="YYYY-MM-DD"
  110. start-placeholder="开始时间"
  111. end-placeholder="结束时间"
  112. style="width: 240px"
  113. :clearable="false"
  114. />
  115. <el-button type="warning" @click="changePipeDate" style="margin: -4px 0px 0px 8px">搜索</el-button>
  116. </div>
  117. <div id="monitorPipe" v-loading="pipeLoading"></div>
  118. </div>
  119.  
  120. <!-- 发送短信给城管局相关人员 -->
  121. <el-dialog v-model="dialogShow" title="监测报警反馈" width="600px" append-to-body>
  122. <SendMessage :realData="realData" :pipeDetail="pipeDetail"></SendMessage>
  123. </el-dialog>
  124. </div>
  125. </div>
  126. </template>
  127.  
  128. <script setup>
  129. import chartOption from '@/components/Echarts/pieChart_1.js';
  130. import SendMessage from '@/views/sponeScreen/waterFlood/sendMessage.vue';
  131. import * as echarts from 'echarts';
  132. import { graphicReport, realtimeDataLatest, getStationDetail } from '@/api/dataAnalysis/syntherticData';
  133.  
  134. const { proxy } = getCurrentInstance();
  135. const tabActive = ref('1');
  136. const pipeTime = ref([proxy.moment(new Date()).subtract(1, 'days').format('YYYY-MM-DD'), proxy.moment().format('YYYY-MM-DD')]);
  137. const realData = ref({});
  138. const pipeDetail = ref({});
  139. const pipeLoading = ref(true);
  140. const valIndex = ref(0);
  141. const dialogShow = ref(false);
  142. const waterHeight = ref(0);
  143. const dataLoading = ref(true);
  144. const ifReal = ref(true);
  145.  
  146. const props = defineProps({
  147. pipeParams: {
  148. type: Object,
  149. },
  150. });
  151.  
  152. // tab切换
  153. function changeTab(val) {
  154. if (val == 2) {
  155. setTimeout(() => {
  156. initPipeChart();
  157. });
  158. }
  159. }
  160. // 监测数据日期搜索
  161. function changePipeDate() {
  162. initPipeChart();
  163. }
  164.  
  165. //管网监测趋势图
  166. let pipeChart = null;
  167. const initPipeChart = async () => {
  168. pipeChart && pipeChart.dispose();
  169. pipeChart = echarts.init(document.getElementById('monitorPipe'));
  170. let params = {
  171. startTime: pipeTime.value[0],
  172. endTime: pipeTime.value[1],
  173. stCode: props.pipeParams.stCode,
  174. };
  175. pipeLoading.value = true;
  176. //管网监测值
  177. let res = await graphicReport(params);
  178. if (res && res.code == 200) {
  179. let datas = res.data;
  180. chartOption.floodOneMapPipeSupervise.xAxis[0].data = datas.propertyMonitorXList;
  181. chartOption.floodOneMapPipeSupervise.yAxis[0].name = '水深(m)';
  182. chartOption.floodOneMapPipeSupervise.yAxis[1].name = '雨量(mm)';
  183.  
  184. chartOption.floodOneMapPipeSupervise.legend.data = ['水深', '雨量'];
  185. chartOption.floodOneMapPipeSupervise.series[0].name = '水深';
  186. chartOption.floodOneMapPipeSupervise.series[0].data = datas.propertyMonitorList[0].ylist;
  187. }
  188.  
  189. // 雨量站数据
  190. let params2 = {
  191. startTime: pipeTime.value[0],
  192. endTime: pipeTime.value[1],
  193. stCode: pipeDetail.value.referRainStCode,
  194. };
  195. let res2 = await graphicReport(params2);
  196. if (res2 && res2.code == 200) {
  197. let datas = res2.data;
  198. chartOption.floodOneMapPipeSupervise.series[1].data = datas.propertyMonitorList[0].ylist;
  199. chartOption.floodOneMapPipeSupervise.yAxis[1].max = Math.max(...datas.propertyMonitorList[0].ylist) + 0.5;
  200. chartOption.floodOneMapPipeSupervise.series[1].name = '雨量';
  201. chartOption.floodOneMapPipeSupervise.series[1].type = 'bar';
  202. chartOption.floodOneMapPipeSupervise.series[1].barWidth = 'auto';
  203. chartOption.floodOneMapPipeSupervise.yAxis[1].inverse = true; //翻转
  204. chartOption.floodOneMapPipeSupervise.yAxis[1].nameLocation = 'start'; //坐标轴名称显示位置
  205. if (datas.propertyMonitorXList.length > 0) {
  206. chartOption.floodOneMapPipeSupervise.graphic.invisible = true; //暂无数据
  207. } else {
  208. chartOption.floodOneMapPipeSupervise.graphic.invisible = false; //暂无数据
  209. }
  210. }
  211. pipeChart.clear();
  212. pipeChart.setOption(chartOption.floodOneMapPipeSupervise);
  213. pipeLoading.value = false;
  214. };
  215.  
  216. // 获取管网详情实时数据
  217. function getDataReal() {
  218. // 实时数据
  219. realtimeDataLatest(props.pipeParams.stCode).then(res => {
  220. realData.value = res.data;
  221. getWaterHeight();
  222. });
  223. }
  224.  
  225. // 获取管网详情某一天数据
  226. async function getHistoryData() {
  227. let params = {
  228. startTime: localStorage.getItem('setRainDateKF'),
  229. endTime: localStorage.getItem('setRainDateKF'),
  230. stCode: props.pipeParams.stCode,
  231. };
  232. pipeLoading.value = true;
  233. //管网监测值
  234. let res = await graphicReport(params);
  235. if (res && res.code == 200) {
  236. let datas = res.data;
  237. // 取最大的值
  238. let max = Math.max(...nameToData(datas.propertyMonitorList, '水位'));
  239. valIndex.value = nameToData(datas.propertyMonitorList, '水位').findIndex(item => {
  240. return item == max;
  241. });
  242. realData.value.z = nameToData(datas.propertyMonitorList, '水位')[valIndex.value];
  243. realData.value.va = nameToData(datas.propertyMonitorList, '流速')[valIndex.value];
  244. realData.value.turb = nameToData(datas.propertyMonitorList, 'SS')[valIndex.value];
  245. realData.value.tt = datas.propertyMonitorXList[valIndex.value];
  246. realData.value.stName = datas.propertyMonitorList[0].stName;
  247. getWaterHeight();
  248. }
  249. }
  250. // 公共方法,根据监测名称来匹配对应的数值
  251. function nameToData(data, name) {
  252. let arr = data.filter(item => item.monitorPropertyName == name);
  253. let lists = arr[0] ? arr[0].ylist : [];
  254. return lists;
  255. }
  256.  
  257. // 获取站点详情
  258. async function getStationData() {
  259. dataLoading.value = true;
  260. let res = await getStationDetail(props.pipeParams.id);
  261. if (res && res.code == 200) {
  262. pipeDetail.value = res.data;
  263. // 项目建设中需要获取某一天的监测数据,排水防涝里面获取实时数据
  264. if (ifReal.value) {
  265. getDataReal();
  266. } else {
  267. pipeTime.value = [localStorage.getItem('setRainDateKF'), localStorage.getItem('setRainDateKF')];
  268. getHistoryData();
  269. }
  270. }
  271. }
  272.  
  273. // 水深高度
  274. function getWaterHeight() {
  275. // 水深高度判断 非满管 满管溢流
  276. if (realData.value.z > pipeDetail.value.bottomBuriedDepthTemp) {
  277. waterHeight.value = 390;
  278. } else if (realData.value.z <= pipeDetail.value.pipelineDiameterTemp) {
  279. waterHeight.value = (140 * realData.value.z) / pipeDetail.value.pipelineDiameterTemp;
  280. } else if (realData.value.z > pipeDetail.value.pipelineDiameterTemp) {
  281. // 满管溢流
  282. waterHeight.value =
  283. 140 +
  284. (250 * (realData.value.z - pipeDetail.value.pipelineDiameterTemp)) /
  285. (pipeDetail.value.bottomBuriedDepthTemp - pipeDetail.value.pipelineDiameterTemp);
  286. }
  287. dataLoading.value = false;
  288. }
  289.  
  290. onMounted(() => {
  291. if (localStorage.getItem('showHistoryMonitor') == '1') {
  292. ifReal.value = false; //项目建设历史数据
  293. } else {
  294. ifReal.value = true; //其他模块最新数据
  295. }
  296. getStationData();
  297. });
  298. </script>
  299.  
  300. <style lang="scss" scoped>
  301. // prettier-ignore
  302. .pipeMonitorDetail {
  303. width: 100%;
  304. .content {
  305. height: 600PX;
  306. .pipePou{
  307. .leftP{
  308. width:530PX;
  309. height: 570PX;
  310. background: url('@/assets/newImgs/HMScreen/pipe.gif') no-repeat;
  311. background-size:100% 100%;
  312. position:relative;
  313. .water{
  314. position:absolute;
  315. bottom:50PX;
  316. left:0px;
  317. z-index: 10;
  318. width:530PX;
  319. height: 128PX;
  320. }
  321. .partGJ{
  322. width:100%;
  323. border:1px dashed #484848;
  324. position:absolute;
  325. bottom:180PX;
  326. left:0px;
  327. z-index: 210;
  328. }
  329. .part{
  330. background: #0874EF;
  331. border-radius: 12px;
  332. padding:0px 10px;
  333. height: 26px;
  334. line-height: 26px;
  335. font-family: Source Han Sans CN;
  336. font-weight: 400;
  337. font-size: 16px;
  338. color: #FFFFFF;
  339. text-align: center
  340. }
  341. .partW{
  342. position:absolute;
  343. bottom:190PX;
  344. left:60px;
  345. z-index: 10;
  346. }
  347. .partJ{
  348. position:absolute;
  349. top:175PX;
  350. left:325px;
  351. z-index: 20;
  352. }
  353. .partL{
  354. position:absolute;
  355. bottom:190PX;
  356. left:325px;
  357. z-index: 10;
  358. }
  359. .equipA{
  360. position:absolute;
  361. bottom:60PX;
  362. left:30px;
  363. z-index: 15;
  364. width:470PX;
  365. height: 339PX;
  366. }
  367. }
  368. .rightP{
  369. margin-left:30px;
  370. color: #fff;
  371. .title{
  372. border-left:5px solid #67BCFA;
  373. padding-left:8px;
  374. font-size: 16px;
  375. font-weight: 600;
  376. margin-top:10px;
  377. }
  378. .part{
  379. margin:14px 0px 10px 10px;
  380. color: #C8DBE0;
  381. font-size: 15px;
  382. .biaoti{
  383. width:100px;
  384. }
  385. }
  386. }
  387. }
  388. #monitorPipe {
  389. width: 100%;
  390. height: 520px;
  391. margin-top: 10px;
  392. }
  393. }
  394. }
  395. </style>