Newer
Older
KaiFengPC / src / views / floodSys / floodOneMap / commonPopupRiver.vue
@zhangdeliang zhangdeliang on 23 May 7 KB 初始化项目
  1. <template>
  2. <!-- 河道监测弹窗 -->
  3. <div class="riverPopup" id="riverPopup" 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">
  32. <div class="contentName">在线状态:</div>
  33. <div class="contentValue">{{ allData.dataList['onlineStatus'] }}</div>
  34. </div>
  35. </div>
  36. <el-image
  37. v-if="allData.dataList['coverPhotosFileList']"
  38. :src="allData.dataList['coverPhotosFileList'][0]"
  39. :preview-src-list="srcList"
  40. style="padding-left: 50px"
  41. />
  42. </div>
  43. <div class="dividerLine"></div>
  44. <div class="trend">
  45. <!-- <el-date-picker
  46. v-model="allData.dataTime1"
  47. type="daterange"
  48. start-placeholder="开始时间"
  49. end-placeholder="结束时间"
  50. size="small"
  51. style="width: 220px; margin-left: 50px"
  52. @change="changeDate"
  53. /> -->
  54. <el-date-picker
  55. v-model="allData.dataTime1"
  56. type="date"
  57. value-format="YYYY-MM-DD"
  58. start-placeholder="开始时间"
  59. end-placeholder="结束时间"
  60. size="small"
  61. style="width: 120px; margin-left: 10px"
  62. @change="changeDate"
  63. />
  64. -
  65. <el-date-picker
  66. v-model="allData.dataTime2"
  67. type="date"
  68. value-format="YYYY-MM-DD"
  69. start-placeholder="开始时间"
  70. end-placeholder="结束时间"
  71. size="small"
  72. style="width: 120px"
  73. @change="changeDate"
  74. />
  75. <div id="chartPopupRiver"></div>
  76. </div>
  77. </div>
  78. </div>
  79. </template>
  80.  
  81. <script setup name="commonZSPopup">
  82. import bus from '@/bus';
  83. import { graphicReport } from '@/api/dataAnalysis/syntherticData';
  84. import chartOption from '@/components/Echarts/pieChart_1.js';
  85. import * as echarts from 'echarts';
  86.  
  87. const { proxy } = getCurrentInstance();
  88. const allData = reactive({
  89. popupShow: false,
  90. dataTime1: proxy.moment(new Date()).subtract(3, 'days').format('YYYY-MM-DD'),
  91. dataTime2: proxy.moment(new Date()).format('YYYY-MM-DD'),
  92. systemType: null,
  93. dataList: {},
  94. });
  95.  
  96. const closePopup = () => {
  97. allData.popupShow = false;
  98. allData.dataTime1 = proxy.moment(new Date()).subtract(3, 'days').format('YYYY-MM-DD');
  99. allData.dataTime2 = proxy.moment(new Date()).format('YYYY-MM-DD');
  100. newfiberMapbox.map.easeTo({
  101. center: [113.953, 30.906],
  102. zoom: 13.6,
  103. pitch: 55,
  104. });
  105. let clearSelectedFeature = [];
  106. newfiberMapbox.getLayers().forEach(feature => {
  107. if (feature.newfiberId == 'highlight_point') {
  108. clearSelectedFeature.push(feature);
  109. }
  110. });
  111.  
  112. if (!!clearSelectedFeature.length) {
  113. clearSelectedFeature[0].setData({ type: 'FeatureCollection', features: [] });
  114. }
  115. };
  116. //时间格式化
  117. const getYearMonthDay = time => {
  118. return proxy.moment(time).format('YYYY-MM-DD');
  119. };
  120. const changeDate = () => {
  121. getSuperViseData();
  122. };
  123. //获取监测数据
  124. const getSuperViseData = async () => {
  125. let params = {
  126. startTime: allData.dataTime1,
  127. endTime: allData.dataTime2,
  128. stCode: allData.dataList['stCode'] || allData.dataList['站点编码'],
  129. };
  130. let res = await graphicReport(params);
  131. if (res && res.code == 200) {
  132. let datas = res.data;
  133. chartOption.popupTrendRiver.xAxis.data = [];
  134. if (Boolean(datas.propertyMonitorXList.length)) {
  135. datas.propertyMonitorXList.forEach(i => {
  136. chartOption.popupTrendRiver.xAxis.data.push(i.substr(0, 16));
  137. });
  138. }
  139. if (datas.propertyMonitorXList.length > 0) {
  140. chartOption.popupTrendRiver.graphic.invisible = true; //暂无数据
  141. } else {
  142. chartOption.popupTrendRiver.graphic.invisible = false; //暂无数据
  143. }
  144. if (datas.propertyMonitorList.length > 0) {
  145. chartOption.popupTrendRiver.series.data = datas.propertyMonitorList.filter(item => item.monitorPropertyName == '水位')[0].ylist;
  146. } else {
  147. chartOption.popupTrendRiver.series.data = [];
  148. }
  149. // 设置鼠标滚轮放大缩小展示数据区间
  150. chartOption.popupTrendRiver.dataZoom = [
  151. { type: 'inside', startValue: datas.propertyMonitorXList[datas.propertyMonitorXList.length / 2] },
  152. ];
  153. initEchartsPopup();
  154. }
  155. };
  156. // 积水点势折线图
  157. let chartPopupRiver = null;
  158. const initEchartsPopup = () => {
  159. if (!!chartPopupRiver) chartPopupRiver.dispose();
  160. chartPopupRiver = echarts.init(document.getElementById('chartPopupRiver'));
  161. chartPopupRiver.clear();
  162. chartPopupRiver.setOption(chartOption.popupTrendRiver);
  163. };
  164.  
  165. onMounted(() => {
  166. bus.on('closeCommonPopup', closeCommonPopup => {
  167. allData.popupShow = closeCommonPopup;
  168. });
  169. bus.on('popupRiverData', data => {
  170. allData.popupShow = data.popupShow;
  171. allData.dataList = data.popupInfo;
  172. getSuperViseData();
  173. });
  174. });
  175. onBeforeUnmount(() => {
  176. bus.off('popupRiverData');
  177. bus.off('closeCommonPopup');
  178. });
  179. </script>
  180. <style lang="scss">
  181. .riverPopup {
  182. width: 748px;
  183. height: 476px;
  184. background-image: url('@/assets/newImgs/layer1.png');
  185. background-size: 100% 100%;
  186. z-index: 115;
  187. position: absolute;
  188. top: 80px;
  189. left: 330px;
  190. .title {
  191. padding-top: 30px;
  192. display: flex;
  193. align-items: center;
  194. justify-content: space-between;
  195. .titleName {
  196. display: flex;
  197. align-items: center;
  198. height: 22px;
  199. font-size: 16px;
  200. font-family: PingFang SC;
  201. font-weight: 400;
  202. color: #ccf1ff;
  203. line-height: 22px;
  204. padding-left: 80px;
  205. &:before {
  206. display: block;
  207. content: '';
  208. width: 3px;
  209. height: 16px;
  210. background: #00d1ff;
  211. margin-right: 10px;
  212. }
  213. }
  214. .closePopup {
  215. padding-right: 40px;
  216. height: 22px;
  217. cursor: pointer;
  218. }
  219. }
  220.  
  221. .allContent {
  222. display: flex;
  223. .basicInfo {
  224. width: 270px;
  225. margin-top: 10px;
  226. .basicContent {
  227. .contentInfo {
  228. display: flex;
  229. align-items: center;
  230. padding-left: 80px;
  231. .contentName {
  232. margin: 3px;
  233. height: 20px;
  234. width: 70px;
  235. font-size: 14px;
  236. font-weight: 400;
  237. line-height: 20px;
  238. color: #00d1ff;
  239. }
  240. .contentValue {
  241. height: 20px;
  242. width: 100px;
  243. font-size: 14px;
  244. font-weight: 400;
  245. line-height: 20px;
  246. color: #00d1ff;
  247. overflow: hidden;
  248. white-space: nowrap;
  249. text-overflow: ellipsis;
  250. }
  251. }
  252. }
  253. }
  254. .dividerLine {
  255. width: 3px;
  256. height: 350px;
  257. position: absolute;
  258. left: 250px;
  259. border: 1px;
  260. background: linear-gradient(90deg, rgba(0, 115, 165, 0) 0.79%, #0073a5 20.43%, #0073a5 82.43%, rgba(0, 115, 165, 0) 100%);
  261. }
  262. .trend {
  263. width: 450px;
  264. #chartPopupRiver {
  265. width: 95%;
  266. height: 300px;
  267. margin-top: 10px;
  268. }
  269. }
  270. }
  271. }
  272. </style>