Newer
Older
KaiFengPC / src / views / floodSys / floodOneMap / commonPopupRain.vue
@鲁yixuan 鲁yixuan on 30 Aug 9 KB updada
  1. <template>
  2. <!-- 降雨量弹窗 -->
  3. <div class="jyPopup" id="jyPopup" 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="date"
  48. value-format="YYYY-MM-DD"
  49. start-placeholder="开始时间"
  50. end-placeholder="结束时间"
  51. size="small"
  52. style="width: 120px; margin-left: 10px"
  53. @change="changeDate"
  54. />
  55. -
  56. <el-date-picker
  57. v-model="allData.dataTime2"
  58. type="date"
  59. value-format="YYYY-MM-DD"
  60. start-placeholder="开始时间"
  61. end-placeholder="结束时间"
  62. size="small"
  63. style="width: 120px"
  64. @change="changeDate"
  65. />
  66. <el-select v-model="selectCode" style="margin: 0px 0px 0px 10px; width: 155px" size="small" @change="changeRainType">
  67. <el-option v-for="item in dataOption" :key="item.value" :label="item.label" :value="item.value" />
  68. </el-select>
  69. <div id="chartPopupRain"></div>
  70. </div>
  71. </div>
  72. </div>
  73. </template>
  74.  
  75. <script setup name="commonRainPopup">
  76. import bus from '@/bus';
  77. import chartOption from '@/components/Echarts/pieChart_1.js';
  78. import * as echarts from 'echarts';
  79. import { graphicReport } from '@/api/dataAnalysis/syntherticData';
  80. import { getImageUrl } from '@/utils/ruoyi';
  81.  
  82. const { proxy } = getCurrentInstance();
  83. const allData = reactive({
  84. popupShow: false,
  85. currentIndex: 1,
  86. dataTime1: proxy.moment(new Date()).subtract(3, 'days').format('YYYY-MM-DD'),
  87. dataTime2: proxy.moment(new Date()).format('YYYY-MM-DD'),
  88. tabList: [
  89. {
  90. index: 1,
  91. name: '基础信息',
  92. },
  93. {
  94. index: 2,
  95. name: '数据监测',
  96. },
  97. ],
  98. dataList: {},
  99. });
  100. const srcList = ref([getImageUrl('tiaoxuchi.png', 'newImgs/paishuiImgs')]);
  101. const dataOption = ref([]);
  102. const selectData = ref([]);
  103. const selectCode = ref('');
  104. const seleceName = ref('');
  105. const unitName = ref('');
  106. const propertyMonitorXList = ref([]);
  107.  
  108. //时间格式化
  109. const getYearMonthDay = time => {
  110. return proxy.moment(time).format('YYYY-MM-DD HH:mm:ss');
  111. };
  112. const changeDate = () => {
  113. // allData.dataTime1 = [getYearMonthDay(allData.dataTime1[0]), getYearMonthDay(allData.dataTime1[1])];
  114. getSuperViseData();
  115. };
  116.  
  117. const closePopup = () => {
  118. allData.dataTime1 = proxy.moment(new Date()).subtract(3, 'days').format('YYYY-MM-DD');
  119. allData.dataTime2 = proxy.moment(new Date()).format('YYYY-MM-DD');
  120. allData.popupShow = false;
  121. newfiberMapbox.map.easeTo({
  122. center: [114.312, 34.802],
  123. zoom: 12.9,
  124. pitch: 55,
  125. });
  126. let clearSelectedFeature = [];
  127. newfiberMapbox.getLayers().forEach(feature => {
  128. if (feature.newfiberId == 'highlight_point') {
  129. clearSelectedFeature.push(feature);
  130. }
  131. });
  132.  
  133. if (!!clearSelectedFeature.length) {
  134. clearSelectedFeature[0].setData({ type: 'FeatureCollection', features: [] });
  135. }
  136. };
  137. // 降雨趋势折线图
  138. let chartPopupRain = null;
  139. const initEchartsPopup = () => {
  140. if (!!chartPopupRain) chartPopupRain.dispose();
  141. chartPopupRain = echarts.init(document.getElementById('chartPopupRain'));
  142. chartOption.popupRainTrend.legend.data = [seleceName.value];
  143. chartOption.popupRainTrend.yAxis.name = unitName.value;
  144. chartOption.popupRainTrend.xAxis.data = propertyMonitorXList.value;
  145. chartOption.popupRainTrend.series.name = seleceName.value;
  146. chartOption.popupRainTrend.series.data = selectData.value;
  147. // 设置鼠标滚轮放大缩小展示数据区间
  148. chartOption.popupRainTrend.dataZoom = [{ type: 'inside', startValue: propertyMonitorXList.value[propertyMonitorXList.value.length / 2] }];
  149. if (propertyMonitorXList.value.length > 0) {
  150. chartOption.popupRainTrend.graphic.invisible = true; //暂无数据
  151. } else {
  152. chartOption.popupRainTrend.graphic.invisible = false; //暂无数据
  153. }
  154. chartPopupRain.clear();
  155. chartPopupRain.setOption(chartOption.popupRainTrend);
  156. };
  157. // 切换因子点击
  158. const changeRainType = val => {
  159. selectCode.value = val;
  160. let obj = dataOption.value.filter(item => item.value == val)[0];
  161. selectCode.value = obj.value;
  162. seleceName.value = obj.label;
  163. unitName.value = obj.propertyUnit;
  164. selectData.value = obj.ylist;
  165. initEchartsPopup();
  166. };
  167. //获取监测数据
  168. const getSuperViseData = async () => {
  169. let params = {
  170. startTime: allData.dataTime1,
  171. endTime: allData.dataTime2,
  172. stCode: allData.dataList['stCode'] || allData.dataList['站点编码'],
  173. };
  174. dataOption.value = [];
  175. let res = await graphicReport(params);
  176. if (res && res.code == 200) {
  177. let datas = res.data;
  178. if (datas.propertyMonitorXList.length == 0) return;
  179. datas.propertyMonitorList.map(item => {
  180. dataOption.value.push({
  181. value: item.stCode + item.monitorPropertyName,
  182. label: item.monitorPropertyName,
  183. propertyUnit: item.propertyUnit,
  184. ylist: item.ylist,
  185. });
  186. });
  187. if (Boolean(datas.propertyMonitorXList.length)) {
  188. propertyMonitorXList.value = [];
  189. datas.propertyMonitorXList.forEach(i => {
  190. propertyMonitorXList.value.push(i.substr(0, 16));
  191. });
  192. }
  193. selectCode.value = dataOption.value[0].value;
  194. seleceName.value = dataOption.value[0].label;
  195. // propertyMonitorXList.value = datas.propertyMonitorXList;
  196. unitName.value = datas.propertyMonitorList[0].propertyUnit;
  197. selectData.value = datas.propertyMonitorList[0].ylist;
  198. initEchartsPopup();
  199. }
  200. };
  201. onMounted(() => {
  202. bus.on('closeCommonPopup', closeCommonPopup => {
  203. allData.popupShow = closeCommonPopup;
  204. });
  205. bus.on('popupRainData', data => {
  206. allData.popupShow = data.popupShow;
  207. allData.dataList = data.popupInfo;
  208. getSuperViseData();
  209. });
  210. });
  211. onBeforeUnmount(() => {
  212. bus.off('popupRainData');
  213. bus.off('closeCommonPopup');
  214. });
  215. </script>
  216. <style lang="scss">
  217. .jyPopup {
  218. width: 748px;
  219. height: 476px;
  220. background-image: url('@/assets/newImgs/layer1.png');
  221. background-size: 100% 100%;
  222. z-index: 1150;
  223. position: absolute;
  224. top: 80px;
  225. left: 530px;
  226. .title {
  227. padding-top: 30px;
  228. display: flex;
  229. align-items: center;
  230. justify-content: space-between;
  231. .titleName {
  232. display: flex;
  233. align-items: center;
  234. height: 22px;
  235. font-size: 16px;
  236. font-family: PingFang SC;
  237. font-weight: 400;
  238. color: #ccf1ff;
  239. line-height: 22px;
  240. padding-left: 80px;
  241. &:before {
  242. display: block;
  243. content: '';
  244. width: 3px;
  245. height: 16px;
  246. background: #00d1ff;
  247. margin-right: 10px;
  248. }
  249. }
  250. .closePopup {
  251. padding-right: 40px;
  252. height: 22px;
  253. cursor: pointer;
  254. }
  255. }
  256.  
  257. .allContent {
  258. display: flex;
  259. .basicInfo {
  260. width: 270px;
  261. margin-top: 10px;
  262. .basicContent {
  263. .contentInfo {
  264. display: flex;
  265. align-items: center;
  266. padding-left: 80px;
  267. .contentName {
  268. margin: 3px;
  269. height: 20px;
  270. width: 70px;
  271. font-size: 14px;
  272. font-weight: 400;
  273. line-height: 20px;
  274. color: #00d1ff;
  275. }
  276. .contentValue {
  277. height: 20px;
  278. width: 100px;
  279. font-size: 14px;
  280. font-weight: 400;
  281. line-height: 20px;
  282. color: #00d1ff;
  283. overflow: hidden;
  284. white-space: nowrap;
  285. text-overflow: ellipsis;
  286. }
  287. }
  288. }
  289. }
  290. .dividerLine {
  291. width: 3px;
  292. height: 350px;
  293. position: absolute;
  294. left: 250px;
  295. border: 1px;
  296. background: linear-gradient(90deg, rgba(0, 115, 165, 0) 0.79%, #0073a5 20.43%, #0073a5 82.43%, rgba(0, 115, 165, 0) 100%);
  297. }
  298. .trend {
  299. width: 100%;
  300. #chartPopupRain {
  301. width: 85%;
  302. height: 300px;
  303. margin-top: 10px;
  304. margin-left: 20px;
  305. }
  306. }
  307. }
  308. }
  309. </style>