Newer
Older
KaiFengPC / src / views / floodSys / floodOneMap / tabRightWL.vue
@jimengfei jimengfei on 23 Jul 44 KB updata
  1. <template>
  2. <!-- 物联感知 -->
  3. <div class="tabRightWL" v-if="allData.tabShowWL == 2">
  4. <div class="tabChangeList">
  5. <div
  6. :class="['tabChange', allData.currentIndex === item.index ? 'active' : '']"
  7. v-for="item in allData.tabList"
  8. :key="item.index"
  9. @click="tabChangeClick(item.index)"
  10. >
  11. {{ item.name }}
  12. </div>
  13. </div>
  14. <div class="dividerLine"></div>
  15.  
  16. <!-- 雨量监测 -->
  17. <div v-if="allData.currentIndex == 1" class="allContent">
  18. <div class="selectTitle">
  19. <div class="name">气象信息</div>
  20. </div>
  21. <div class="weatherInfo">
  22. <div class="part" v-for="(item, index) in weatherArr" :key="'a' + index">
  23. <p style="color: #00d1ff">{{ item.week }}</p>
  24. <p style="color: #b4e7f2">{{ item.date.slice(5, 10) }}</p>
  25. <img :src="getWeatherImageUrl(`icon__${item.code_day}`, 'weather_icon')" style="width: 50px; height: 50px" />
  26. <p style="color: #b4e7f2">{{ item.text_day }}</p>
  27. <p style="color: #00d1ff">{{ item.low }}~{{ item.high }}℃</p>
  28. <!-- <p style="color: #00d1ff">{{ item.wd_day }}{{ item.wc_day }}</p> -->
  29. </div>
  30. <!-- 暂无数据 -->
  31. <el-empty :image-size="100" v-if="weatherArr.length == 0" />
  32. </div>
  33. <div class="selectTitle">
  34. <div class="name">雨量数据采集</div>
  35. </div>
  36. <el-table :data="tableData1" class="rightTab" height="250" @row-click="clickRain">
  37. <el-table-column prop="stName" label="雨量站名称" width="100" />
  38. <el-table-column prop="buildType" label="类型" width="60">
  39. <template #default="scope">
  40. {{ scope.row.buildType == 'owner' ? '新建' : scope.row.buildType == 'share' ? '共享' : '--' }}
  41. </template>
  42. </el-table-column>
  43. <el-table-column prop="pj" label="当前降雨量(mm)">
  44. <template #default="scope"> {{ scope.row.pj || '--' }} </template>
  45. </el-table-column>
  46. <el-table-column prop="ago1h" label="过去1h降雨量(mm)" width="100">
  47. <template #default="scope"> {{ scope.row.ago1h }} </template>
  48. </el-table-column>
  49. <el-table-column prop="ago3h" label="过去3h降雨量(mm)" width="100">
  50. <template #default="scope"> {{ scope.row.ago3h }} </template>
  51. </el-table-column>
  52. <el-table-column prop="ago6h" label="过去6h降雨量(mm)" width="100">
  53. <template #default="scope"> {{ scope.row.ago6h }} </template>
  54. </el-table-column>
  55. <el-table-column prop="ago12h" label="过去12h降雨量(mm)" width="100">
  56. <template #default="scope"> {{ scope.row.ago12h }} </template>
  57. </el-table-column>
  58. <el-table-column prop="ago24h" label="过去24h降雨量(mm)" width="100">
  59. <template #default="scope"> {{ scope.row.ago24h }} </template>
  60. </el-table-column>
  61. <el-table-column prop="ago72h" label="过去72h降雨量(mm)" width="100">
  62. <template #def ault="scope"> {{ scope.row.ago72h }} </template>
  63. </el-table-column>
  64. </el-table>
  65. <monitorCalender :isCaleisnder="'calender'"></monitorCalender>
  66. </div>
  67.  
  68. <!-- 管网监测 -->
  69. <div v-if="allData.currentIndex == 2" class="allContent">
  70. <div class="selectTitle">
  71. <div class="name">实时监测</div>
  72. <el-select v-model="allData.pipelineType" size="small" style="width: 120px" @change="getRealtimePipeLine">
  73. <el-option label="全部" value="" />
  74. <el-option label="雨水管网" value="Rain" />
  75. <el-option label="污水管网" value="Sewage" />
  76. <!-- <el-option label="雨污合流管网" value="Combined" /> -->
  77. </el-select>
  78. </div>
  79. <el-table
  80. :data="tableData2"
  81. class="rightTab"
  82. height="600"
  83. v-loading="tableDataLoading2"
  84. @row-click="clickPipeSupervise"
  85. highlight-current-row
  86. >
  87. <el-table-column prop="stName" label="监测站点名称" width="150" />
  88. <el-table-column prop="pipelineType" label="管网类型">
  89. <template #default="scope">
  90. {{
  91. scope.row.pipelineType == 'Rain'
  92. ? '雨水'
  93. : scope.row.pipelineType == 'Sewage'
  94. ? '污水'
  95. : scope.row.pipelineType == 'Combined'
  96. ? '雨污合流'
  97. : '--'
  98. }}
  99. </template>
  100. </el-table-column>
  101. <el-table-column prop="waterElevation" label="水位高程(m)" width="150" />
  102. <!-- <el-table-column prop="z" label="水位(m)" /> -->
  103. <el-table-column prop="va" label="流速(m/s)" width="110" />
  104. <el-table-column prop="turb" label="SS(mg/L)" />
  105. <el-table-column prop="buildType" label="类型" width="60">
  106. <template #default="scope">
  107. {{ scope.row.buildType == 'owner' ? '新建' : scope.row.buildType == 'share' ? '共享' : '--' }}
  108. </template>
  109. </el-table-column>
  110. <el-table-column prop="tt" label="观测时间" width="160" />
  111. </el-table>
  112. </div>
  113.  
  114. <!-- 积水点 -->
  115. <div v-if="allData.currentIndex == 3" class="allContent">
  116. <div class="selectTitle">
  117. <div class="name">实时监测</div>
  118. </div>
  119. <el-table :data="tableData3" v-loading="loadingZSD" class="rightTab" height="600" @row-click="clickZS" highlight-current-row>
  120. <el-table-column prop="stName" label="监测点名称" width="210px" />
  121. <el-table-column prop="buildType" label="类型">
  122. <template #default="scope">
  123. {{ scope.row.buildType == 'owner' ? '新建' : scope.row.buildType == 'share' ? '共享' : '--' }}
  124. </template>
  125. </el-table-column>
  126. <el-table-column prop="z" label="水位(m)">
  127. <template #default="scope"> {{ scope.row.z || '--' }} </template>
  128. </el-table-column>
  129. <el-table-column prop="z" label="摄像头">
  130. <template #default="scope">
  131. <img
  132. :src="videoCamera"
  133. alt=""
  134. v-if="scope.row.cameraInfoIndexList && scope.row.cameraInfoIndexList.length > 0"
  135. @click.native.stop="checkVideo(scope.row)"
  136. />
  137. <span v-else>--</span>
  138. </template>
  139. </el-table-column>
  140. <el-table-column prop="tt" label="更新时间" width="160">
  141. <template #default="scope"> {{ scope.row.tt || '--' }} </template>
  142. </el-table-column>
  143. </el-table>
  144. </div>
  145.  
  146. <!-- 排口 -->
  147. <div v-if="allData.currentIndex == 4" class="allContent">
  148. <div class="selectTitle">
  149. <div class="name">实时监测</div>
  150. <el-select v-model="allData.paikouType" size="small" style="width: 120px" @change="getRealtimedRainOutlet">
  151. <el-option label="雨水口" value="Rain" />
  152. <el-option label="溢流口" value="Sewage" />
  153. </el-select>
  154. </div>
  155. <el-table
  156. :data="tableData4"
  157. class="rightTab"
  158. height="600"
  159. v-loading="tableDataLoading4"
  160. @row-click="clickPipeSupervise"
  161. highlight-current-row
  162. >
  163. <el-table-column prop="stName" label="监测站点名称" width="150" />
  164. <el-table-column prop="dataTime" label="观测时间" width="160" />
  165. <el-table-column prop="waterElevation" label="水位高程(m)" />
  166. <el-table-column prop="va" label="流速(m/s)" width="110" />
  167. <el-table-column prop="sbl1" label="小时流量(m³/h)" width="110" />
  168. <el-table-column prop="turb" label="SS(mg/L)" />
  169. <el-table-column prop="codmn" label="COD(mg/l)" width="110" />
  170. <el-table-column prop="pipelineType" label="排口类型">
  171. <template #default="scope">
  172. {{ scope.row.pipelineType == 'Rain' ? '雨水口' : scope.row.pipelineType == 'Sewage' ? '溢流口' : '--' }}
  173. </template>
  174. </el-table-column>
  175. </el-table>
  176. </div>
  177.  
  178. <!-- 河道监测 -->
  179. <div v-if="allData.currentIndex == 5" class="allContent">
  180. <div class="selectTitle" style="margin-bottom: 10px">
  181. <div class="name">河道水位</div>
  182. <el-select v-model="riverTitle" size="small" style="width: 120px" @change="checkRiverP">
  183. <el-option label="老澴河" value="老澴河" />
  184. <el-option label="槐荫河" value="槐荫河" />
  185. </el-select>
  186. </div>
  187. <el-table
  188. :data="tableData5"
  189. class="rightTab"
  190. height="260"
  191. v-loading="tableDataLoading5"
  192. @row-click="clickRiver"
  193. highlight-current-row
  194. >
  195. <el-table-column prop="stName" label="监测点名称" />
  196. <el-table-column prop="z" label="水位(m)" width="100" />
  197. <el-table-column prop="buildType" label="类型" width="60">
  198. <template #default="scope">
  199. {{ scope.row.buildType == 'owner' ? '新建' : scope.row.buildType == 'share' ? '共享' : '--' }}
  200. </template>
  201. </el-table-column>
  202. <el-table-column prop="dataTime" label="观测时间" width="165" />
  203. </el-table>
  204. <div class="selectTitle" style="margin-bottom: 10px">
  205. <div class="name">人工水质采样</div>
  206. <el-select v-model="allData.sampleDate" size="small" style="width: 120px" @change="getSampleRiverSectionData">
  207. <el-option v-for="item in allData.options1" :key="item.value" :label="item.label" :value="item.value" />
  208. </el-select>
  209. </div>
  210. <div class="DMcontent">
  211. <div
  212. :class="['DMpart', allData.riverActive == item.id ? 'activeR' : '']"
  213. v-for="(item, index) in detailList"
  214. :key="index"
  215. @click="clickSample(item)"
  216. >
  217. <div class="partContent">
  218. <p class="title">{{ item.surfaceWaterBodiesName }}</p>
  219. </div>
  220. </div>
  221. </div>
  222. <el-table :data="tableData6" style="width: 100%; margin: 5px 0 5px 0" height="240">
  223. <el-table-column prop="sectionName" label="断面名称" width="205px" />
  224. <el-table-column prop="propertyName" label="指标名称" width="80px" />
  225. <el-table-column prop="value" label="监测值" />
  226. <el-table-column prop="propertyUnit" label="指标单位" />
  227. </el-table>
  228. </div>
  229.  
  230. <!-- 厂站监测 -->
  231. <div v-if="allData.currentIndex == 6" class="allContent">
  232. <div class="selectTitle">
  233. <div class="name">厂站概况</div>
  234. <el-select v-model="allData.currentIndex2" size="small" style="width: 120px" @change="checkInfo(allData.currentIndex2)">
  235. <el-option label="雨水系统" value="rain_water" />
  236. <el-option label="污水系统" value="sewage_water" />
  237. </el-select>
  238. <!-- <div class="navBtn">
  239. <p :class="[allData.currentIndex2 == 'rain_water' ? 'active' : '']" @click="checkInfo('rain_water')">雨水系统</p>
  240. <p :class="[allData.currentIndex2 == 'sewage_water' ? 'active' : '']" @click="checkInfo('sewage_water')">污水系统</p>
  241. </div> -->
  242. </div>
  243. <el-table :data="tableData7" class="rightTab" height="250" v-loading="tableDataLoading7" @row-click="clickCZ" highlight-current-row>
  244. <el-table-column prop="pumpName" label="厂站名称" width="100" />
  245. <el-table-column prop="qcyw" label="前池水位(m)" v-if="allData.currentIndex2 == 'rain_water'" width="100" />
  246. <el-table-column prop="qbWaterlevel" label="起抽水位(m)" v-if="allData.currentIndex2 == 'rain_water'" width="100" />
  247. <el-table-column prop="designScale" label="规模(m³/s)" v-if="allData.currentIndex2 == 'rain_water'" width="90" />
  248. <el-table-column prop="designScale" label="规模(万吨/日)" v-if="allData.currentIndex2 == 'sewage_water'" />
  249. <el-table-column prop="totalLarge" label="累计处理量(万吨)" v-if="allData.currentIndex2 == 'sewage_water'" />
  250. <el-table-column prop="monitorTime" label="观测时间" width="160" />
  251. </el-table>
  252. <div class="selectTitle" style="margin-bottom: 10px">
  253. <div class="name">历史趋势</div>
  254. <div class="selectToolList">
  255. <el-date-picker
  256. v-model="allData.GWtime1"
  257. type="daterange"
  258. start-placeholder="开始时间"
  259. end-placeholder="结束时间"
  260. value-format="YYYY-MM-DD"
  261. size="small"
  262. style="width: 300px; margin-left: -30px"
  263. @change="changeBengZhanDate"
  264. />
  265. </div>
  266. </div>
  267. <div class="staticPicture">
  268. <div id="chartThree"></div>
  269. </div>
  270. </div>
  271. <!-- 源头地块 -->
  272. <div v-if="allData.currentIndex == 7" class="allContent">
  273. <div class="selectTitle">
  274. <div class="name">源头地块监测</div>
  275. </div>
  276. <el-table
  277. :data="tableData71"
  278. v-loading="tableLoading71"
  279. class="rightTab"
  280. ref="tableRef71"
  281. height="250"
  282. @row-click="clickPipeSupervise"
  283. highlight-current-row
  284. >
  285. <el-table-column prop="stName" label="点位名称" width="150" />
  286. <el-table-column prop="dataTime" label="观测时间" width="100" />
  287. <el-table-column prop="z" label="水位(m)" />
  288. <el-table-column prop="va" label="流速(m/s)" width="100" />
  289. <el-table-column prop="turb" label="SS(mg/L)" />
  290. <el-table-column prop="sbl1" label="小时水量(m³/h)" width="110" />
  291. <el-table-column prop="cq1" label="累计流量" />
  292. </el-table>
  293. <div class="selectTitle" style="margin-bottom: 10px">
  294. <div class="name">历史趋势分析</div>
  295. <div class="selectToolList">
  296. <el-date-picker
  297. v-model="allData.pipeTime"
  298. type="daterange"
  299. start-placeholder="开始时间"
  300. end-placeholder="结束时间"
  301. size="small"
  302. style="width: 220px; margin-left: 70px"
  303. @change="changePipeDate"
  304. />
  305. </div>
  306. </div>
  307. <div class="staticPicture">
  308. <div id="chartSuperviseWL"></div>
  309. </div>
  310. </div>
  311. </div>
  312. </template>
  313. <script setup name="tabRightWL">
  314. import chartOption from '@/components/Echarts/pieChart_1.js';
  315. import * as echarts from 'echarts';
  316. import bus from '@/bus';
  317. import useUserStore from '@/store/modules/user';
  318. import videoCamera from '@/assets/images/gisMap/video.png';
  319. import monitorCalender from './monitorCalender.vue'; // 降雨日历统计
  320. import {
  321. xfSevenDays,
  322. realtimeDataListByType,
  323. realtimeDataPipelineListByType,
  324. realtimeRainfallStatistics,
  325. orinignList,
  326. orinignDataList,
  327. realtimeDataWaterlogging,
  328. sampleDateList,
  329. sampleRiverSectionData,
  330. realtimeDataByPump,
  331. historyDataByPumpCode,
  332. sampleRiverList,
  333. getRiverProfileByRiverName,
  334. } from '@/api/floodSys/oneMap.js';
  335. import { graphicReport } from '@/api/dataAnalysis/syntherticData';
  336. const emit = defineEmits(['showStationRiverclose']);
  337. const { proxy } = getCurrentInstance();
  338. const pinias = useUserStore();
  339. const timer = ref(null);
  340. const datevalue = ref(new Date());
  341. const allData = reactive({
  342. tableDatalist: '',
  343. pipelineType: 'Rain',
  344. paikouType: 'Rain',
  345. riverActive: '',
  346. centerSearchShow: true,
  347. tabShowWL: null,
  348. currentIndex: 1,
  349. currentIndex2: 'rain_water',
  350. GWtime1: null,
  351. waterloggingDate: null,
  352. pipeTime: null,
  353. supervisePipeCode: null,
  354. systemType: 1,
  355. tabList: [
  356. { index: 1, name: '雨量监测' },
  357. { index: 5, name: '河道监测' },
  358. { index: 2, name: '管网监测' },
  359. // { index: 4, name: '排口' },
  360. { index: 3, name: '积水点' },
  361. { index: 7, name: '源头地块' },
  362. { index: 6, name: '厂站监测' },
  363. ],
  364. options: [
  365. {
  366. value: 1,
  367. label: '按天',
  368. },
  369. {
  370. value: 2,
  371. label: '按周',
  372. },
  373. {
  374. value: 3,
  375. label: '按月',
  376. },
  377. ],
  378. options1: [],
  379. sampleDate: null,
  380. surfaceWaterBodies: null,
  381. pumpCode: null,
  382. });
  383. const refresh = ref(null);
  384. const supervisePopupdata = ref('');
  385. const echartData = ref({
  386. xAxisData: [],
  387. seriesData: [
  388. {
  389. name: '当前水位',
  390. type: 'line',
  391. symbol: 'none',
  392. smooth: true,
  393. lineStyle: {
  394. color: 'rgba(156, 205, 247, 0.5)',
  395. },
  396. // 填充区域的样式
  397. areaStyle: {
  398. // 填充色渐变
  399. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  400. { offset: 1, color: 'rgba(156, 205, 247, 0.3)' },
  401. { offset: 0, color: 'rgba(156, 205, 247, 1)' },
  402. ]),
  403. },
  404. data: [],
  405. // 标注点
  406. markPoint: {
  407. symbol: 'arrow',
  408. symbolSize: 20,
  409. label: {
  410. show: true,
  411. formatter: params => {
  412. let a = params.data.name[0] + params.data.name[1] + 'm';
  413. return a;
  414. },
  415. fontSize: 12,
  416. color: '#fff',
  417. backgroundColor: 'transparent',
  418. },
  419. data: [
  420. {
  421. name: ['老澴河', '18'],
  422. coord: ['2', '18'],
  423. },
  424. ],
  425. },
  426. },
  427. {
  428. name: '河床',
  429. type: 'line',
  430. symbol: 'none',
  431. smooth: true,
  432. lineStyle: {
  433. color: 'rgba(215, 207, 143, 0.5)',
  434. },
  435. // 填充区域的样式
  436. areaStyle: {
  437. // 填充色渐变
  438. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  439. { offset: 1, color: 'rgba(215, 207, 143, 0.3)' },
  440. { offset: 0, color: 'rgba(215, 207, 143, 1)' },
  441. ]),
  442. },
  443. data: [],
  444. // 标注点
  445. markPoint: {
  446. symbol: 'circle',
  447. symbolSize: 10,
  448. itemStyle: { color: 'red' },
  449. data: [
  450. {
  451. coord: ['800', '20.53'],
  452. },
  453. ],
  454. },
  455. },
  456. {
  457. name: '排口街道',
  458. barWidth: '0.1%',
  459. type: 'bar',
  460. data: [],
  461. itemStyle: '',
  462. },
  463. // { name: '右岸高程', type: 'line', smooth: true, symbol: 'none', data: [] },
  464. ],
  465. });
  466. const riverTitle = ref('');
  467. const showStationRiver = ref(false);
  468.  
  469. //时间格式化
  470. const getYearMonthDay = time => {
  471. return proxy.moment(time).format('YYYY-MM-DD');
  472. };
  473.  
  474. // 统计分析散点图
  475. let chart4 = null;
  476. const initEcharts4 = () => {
  477. if (!!chart4) chart4.dispose();
  478. chart4 = echarts.init(document.getElementById('chartThree'));
  479. chart4.clear();
  480. chart4.setOption(chartOption.floodOneMapDataByPumpCode);
  481. };
  482.  
  483. // 查看监控视频
  484. function checkVideo(row) {
  485. bus.emit('VideosHK', row);
  486. }
  487.  
  488. const weatherArr = ref([]);
  489. //获取气象信息
  490. const getWeatherPredict = async () => {
  491. let res = await xfSevenDays();
  492. if (res && res.code == 200) {
  493. let datas = JSON.parse(res.data);
  494. if (datas.result) {
  495. // weatherArr.value = datas.result.daily_fcsts.slice(0, 5);
  496. weatherArr.value = datas.result.daily_fcsts;
  497. }
  498. }
  499. };
  500. const tableData1 = ref([]);
  501. //获取雨量数据采集信息
  502. const getRealtimeRain = async () => {
  503. let params = {
  504. monitorTargetType: 'rainfall',
  505. orderBy: 'tt desc',
  506. };
  507. let res = await realtimeRainfallStatistics(params);
  508. if (res && res.code == 200) {
  509. let data = res.data;
  510. tableData1.value = data;
  511. }
  512. };
  513.  
  514. const tableData2 = ref([]);
  515. const tableDataLoading2 = ref(false);
  516. const tableDataLoading4 = ref(false);
  517. const tableDataLoading5 = ref(false);
  518. const tableDataLoading7 = ref(false);
  519.  
  520. //获取管网实时监测
  521. const getRealtimePipeLine = async () => {
  522. tableDataLoading2.value = true;
  523. let params = {
  524. monitorTargetType: 'pipeline',
  525. orderBy: 'tt desc',
  526. pipelineType: allData.pipelineType,
  527. };
  528. let res = await realtimeDataPipelineListByType(params);
  529. if (res && res.code == 200) {
  530. let data = res.data;
  531. tableData2.value = data;
  532. tableDataLoading2.value = false;
  533. }
  534. };
  535. //获取管网监测统计分析
  536. const getSuperVisePipeData = async () => {
  537. let params = {
  538. startTime: allData.pipeTime[0],
  539. endTime: allData.pipeTime[1],
  540. stCode: allData.supervisePipeCode,
  541. };
  542. let res = await graphicReport(params);
  543. if (res && res.code == 200) {
  544. let datas = res.data;
  545. if (!!!datas) return;
  546. if (datas.propertyMonitorList.length > 1) {
  547. chartOption.floodOneMapPipeSupervise.legend.data = [
  548. datas.propertyMonitorList[2].monitorPropertyName,
  549. datas.propertyMonitorList[0].monitorPropertyName,
  550. ];
  551. chartOption.floodOneMapPipeSupervise.xAxis[0].data = datas.propertyMonitorXList;
  552. chartOption.floodOneMapPipeSupervise.yAxis[0].name = datas.propertyMonitorList[2].propertyUnit;
  553. chartOption.floodOneMapPipeSupervise.yAxis[1].name = datas.propertyMonitorList[0].propertyUnit;
  554. chartOption.floodOneMapPipeSupervise.series[0].name = datas.propertyMonitorList[2].monitorPropertyName;
  555. chartOption.floodOneMapPipeSupervise.series[1].name = datas.propertyMonitorList[0].monitorPropertyName;
  556. chartOption.floodOneMapPipeSupervise.series[0].data = datas.propertyMonitorList[2].ylist;
  557. chartOption.floodOneMapPipeSupervise.series[1].data = datas.propertyMonitorList[0].ylist;
  558. chartOption.floodOneMapPipeSupervise.graphic.invisible = true; // 暂无数据
  559. } else if (datas.propertyMonitorList.length == 1) {
  560. chartOption.floodOneMapPipeSupervise.legend.data = [datas.propertyMonitorList[0].monitorPropertyName];
  561. chartOption.floodOneMapPipeSupervise.xAxis[0].data = datas.propertyMonitorXList;
  562. chartOption.floodOneMapPipeSupervise.yAxis[0].name = datas.propertyMonitorList[0].propertyUnit;
  563. chartOption.floodOneMapPipeSupervise.yAxis[1].name = '';
  564. chartOption.floodOneMapPipeSupervise.series[0].name = datas.propertyMonitorList[0].monitorPropertyName;
  565. chartOption.floodOneMapPipeSupervise.series[1].name = '';
  566. chartOption.floodOneMapPipeSupervise.series[0].data = datas.propertyMonitorList[0].ylist;
  567. chartOption.floodOneMapPipeSupervise.series[1].data = [];
  568. chartOption.floodOneMapPipeSupervise.graphic.invisible = true; // 暂无数据
  569. } else if (datas.propertyMonitorXList.length == 0) {
  570. chartOption.floodOneMapPipeSupervise.graphic.invisible = false; // 暂无数据
  571. chartOption.floodOneMapPipeSupervise.xAxis[0].data = [];
  572. chartOption.floodOneMapPipeSupervise.series[0].data = [];
  573. chartOption.floodOneMapPipeSupervise.series[1].data = [];
  574. chartOption.floodOneMapPipeSupervise.yAxis[0].name = '';
  575. chartOption.floodOneMapPipeSupervise.yAxis[1].name = '';
  576. chartOption.floodOneMapPipeSupervise.series[0].name = '';
  577. chartOption.floodOneMapPipeSupervise.series[1].name = '';
  578. }
  579. // 设置鼠标滚轮放大缩小展示数据区间
  580. chartOption.floodOneMapPipeSupervise.dataZoom = [
  581. { type: 'inside', startValue: datas.propertyMonitorXList[datas.propertyMonitorXList.length / 2] },
  582. ];
  583. initPipeChart();
  584. }
  585. };
  586. //管网监测趋势图
  587. let pipeChart = null;
  588. const initPipeChart = () => {
  589. pipeChart && pipeChart.dispose();
  590. pipeChart = echarts.init(document.getElementById('chartSuperviseWL'));
  591. pipeChart.clear();
  592. pipeChart.setOption(chartOption.floodOneMapPipeSupervise);
  593. };
  594. const changePipeDate = () => {
  595. allData.pipeTime = [getYearMonthDay(allData.pipeTime[0]), getYearMonthDay(allData.pipeTime[1])];
  596. getSuperVisePipeData();
  597. };
  598. const tableData3 = ref([]);
  599. const loadingZSD = ref(true);
  600. //获取积水点实时监测
  601. const getRealtimeDataWaterlogging = async () => {
  602. loadingZSD.value = true;
  603. let res = await realtimeDataWaterlogging({ monitorTargetType: 'waterlogging', orderBy: 'tt desc' });
  604. if (res && res.code == 200) {
  605. let data = res.data;
  606. tableData3.value = data;
  607. loadingZSD.value = false;
  608. }
  609. };
  610.  
  611. const tableData4 = ref([]);
  612. //获取排口实时监测
  613. const getRealtimedRainOutlet = async () => {
  614. tableDataLoading4.value = true;
  615. let params = {
  616. monitorTargetType: 'drain_outlet',
  617. orderBy: 'tt desc',
  618. pipelineType: allData.paikouType,
  619. };
  620. let res = await realtimeDataListByType(params);
  621. if (res && res.code == 200) {
  622. let data = res.data;
  623. data.forEach(element => {
  624. if (element.monitorValueList && element.monitorValueList.length > 0) {
  625. element.dataTime = element.monitorValueList[0].tt;
  626. }
  627. });
  628. tableData4.value = data;
  629. tableDataLoading4.value = false;
  630. }
  631. };
  632. const tableData5 = ref([]);
  633. //获取管网实时监测
  634. const getRealtimedRiver = async () => {
  635. tableDataLoading5.value = true;
  636. let params = {
  637. monitorTargetType: 'river',
  638. orderBy: 'order_no desc',
  639. };
  640. let res = await realtimeDataListByType(params);
  641. if (res && res.code == 200) {
  642. let data = res.data;
  643. data.forEach(element => {
  644. if (element.monitorValueList && element.monitorValueList.length > 0) {
  645. element.dataTime = element.monitorValueList[0].tt;
  646. }
  647. });
  648. tableData5.value = data;
  649. tableDataLoading5.value = false;
  650. }
  651. };
  652. //获取人工采样时间字典
  653. const getSampleDateList = async () => {
  654. let res = await sampleDateList();
  655. if (res && res.code == 200) {
  656. let data = res.data;
  657. let dataList = [];
  658. data.forEach(item => {
  659. dataList.push({ value: item, label: item });
  660. });
  661. allData.options1 = dataList;
  662. allData.sampleDate = allData.options1[0].value;
  663. getSampleRiverList();
  664. }
  665. };
  666. //获取人工采样河湖查询
  667. const getSampleRiverList = async () => {
  668. let res = await sampleRiverList();
  669. if (res && res.code == 200) {
  670. let data = res.data;
  671. detailList.value = data;
  672. // data.map(item=>{
  673. // if(item=detailList.name){
  674. // }
  675. // })
  676.  
  677. allData.surfaceWaterBodies = detailList.value[0].surfaceWaterBodies;
  678. allData.riverActive = detailList.value[0].id;
  679. getSampleRiverSectionData();
  680. }
  681. };
  682. // 河道横断面分析点击
  683. const checkRiverP = async val => {
  684. riverTitle.value = val;
  685. showStationRiver.value = true;
  686. let lonlat;
  687. val == '老澴河' ? (lonlat = '113.9263827,30.89512155') : (lonlat = '113.941462,30.926146');
  688. let lonLat = lonlat.split(',');
  689. newfiberMapbox.map.easeTo({
  690. center: [Number(lonLat[0]), Number(lonLat[1])],
  691. zoom: 13.5,
  692. });
  693. bus.emit('initeLayer', ['paiKou', 'drainOutlet']);
  694. let res = await getRiverProfileByRiverName({ riverName: val });
  695. if (res && res.code == 200) {
  696. let datas = res.data;
  697. echartData.value.xAxisData = datas.chainageList; //河道里程列表
  698. echartData.value.seriesData[0].data = datas.stationZList; //监测站点水位数据
  699. echartData.value.seriesData[1].data = datas.channelList; //河床高程列表
  700. // echartData.value.seriesData[2].data = datas.leftBankList; //左岸高程列表
  701. // echartData.value.seriesData[3].data = datas.rightBankList; //右岸高程列表
  702. //排口点位列表
  703. allData.tableDatalist = datas.outfallList;
  704.  
  705. let titlenames = datas.roadNameList;
  706. let options = '';
  707. datas.roadNameList.forEach((item, index) => {
  708. if (item) {
  709. options = datas.sfZList[0];
  710. } else {
  711. options = '';
  712. }
  713. echartData.value.seriesData[2].data.push(options);
  714. });
  715. echartData.value.seriesData[2].itemStyle = {
  716. normal: {
  717. label: {
  718. show: true, //开启显示
  719. position: 'top', //内部显示
  720. rotate: 45,
  721. formatter: function (params) {
  722. return titlenames[params.dataIndex];
  723. },
  724.  
  725. textStyle: {
  726. //数值样式
  727. color: '#ffffff',
  728. fontSize: 12,
  729. },
  730. },
  731. },
  732. };
  733.  
  734. echartData.value.seriesData[1].markPoint.data = [];
  735. datas.outfallList &&
  736. datas.outfallList.map(item => {
  737. echartData.value.seriesData[1].markPoint.data.push({
  738. coord: [item.x, item.y],
  739. pointNumber: item.pointNumber,
  740. lonLat: item.lonLat,
  741. roadName: item.roadName,
  742. });
  743. });
  744. // 河道中建筑物类型,pump(泵站),gate(闸门),weir(堰)等
  745. let buildArr = [];
  746. if (Object.keys(datas.structureList).length > 0) {
  747. for (let i in datas.structureList) {
  748. buildArr.push({
  749. name: i,
  750. type: 'line',
  751. smooth: true,
  752. symbol: 'none',
  753. data: datas.structureList[i],
  754. areaStyle: { color: '#4085FF' },
  755. });
  756. }
  757. echartData.value.seriesData = echartData.value.seriesData.concat(buildArr);
  758. } else {
  759. echartData.value.seriesData = echartData.value.seriesData.slice(0, 4);
  760. }
  761.  
  762. refresh.value = Math.random();
  763. supervisePopupdata.value = {
  764. riverTitle: allData.riverTitle,
  765. refresh: refresh.value,
  766. echartData: echartData.value,
  767. tableDatalist: allData.tableDatalist,
  768. };
  769. emit('showStationRiverclose', supervisePopupdata.value);
  770. }
  771. };
  772. //河湖断面采样数据查询
  773. const getSampleRiverSectionData = async () => {
  774. let params = {
  775. surfaceWaterBodies: allData.surfaceWaterBodies,
  776. sampleDate: allData.sampleDate,
  777. };
  778. let res = await sampleRiverSectionData(params);
  779. if (res && res.code == 200) {
  780. let data = res.data;
  781. let dataList = [];
  782.  
  783. data.forEach(item => {
  784. item.property == 'samplePh'
  785. ? ((item.propertyName = 'PH'), (item.propertyUnit = '--'))
  786. : item.property == 'sampleCond'
  787. ? ((item.propertyName = '电导率'), (item.propertyUnit = 'uS/m'))
  788. : item.property == 'sampleOrp'
  789. ? ((item.propertyName = '氧化还原电位'), (item.propertyUnit = 'mV'))
  790. : item.property == 'sampleDo'
  791. ? ((item.propertyName = '溶解氧'), (item.propertyUnit = 'mg/L'))
  792. : item.property == 'sampleCod'
  793. ? ((item.propertyName = '化学需氧量'), (item.propertyUnit = 'mg/L'))
  794. : item.property == 'sampleSs'
  795. ? ((item.propertyName = '悬浮物'), (item.propertyUnit = 'mg/L'))
  796. : item.property == 'sampleNh3n'
  797. ? ((item.propertyName = '氨氮'), (item.propertyUnit = 'mg/L'))
  798. : item.property == 'sampleTn'
  799. ? ((item.propertyName = '总氮'), (item.propertyUnit = 'mg/L'))
  800. : ((item.propertyName = '总磷'), (item.propertyUnit = 'mg/L'));
  801. });
  802. tableData6.value = data;
  803. }
  804. };
  805. const clickSample = item => {
  806. allData.surfaceWaterBodies = item.surfaceWaterBodies;
  807. allData.riverActive = item.id;
  808. getSampleRiverSectionData();
  809. };
  810. const tableData6 = ref([]);
  811. const tableData71 = ref([]);
  812. const tableRef71 = ref(null);
  813. const tableLoading71 = ref(true);
  814. //获取源头地块
  815. const getOrinignList = async () => {
  816. tableLoading71.value = true;
  817. let res = await orinignList();
  818. if (res && res.code == 200) {
  819. let data = res.data;
  820. let params = data[0].stCodes;
  821. let res1 = await orinignDataList(params);
  822. if (res1 && res1.code == 200) {
  823. tableData71.value = res1.data;
  824. tableData71.value.forEach((item, index) => {
  825. item.dataTime = res1.data[index].monitorValueList[0].tt;
  826. });
  827. tableRef71.value.setCurrentRow(tableData71.value[0], true); //表格默认第一个高亮选中
  828. tableLoading71.value = false;
  829. }
  830. }
  831. };
  832. const tableData7 = ref([]);
  833. //获取厂站概况
  834. const getRealtimeDataByPump = async () => {
  835. tableDataLoading7.value = true;
  836. let params = {
  837. pumpType: allData.currentIndex2,
  838. };
  839. let res = await realtimeDataByPump(params);
  840. if (res && res.code == 200) {
  841. tableData7.value = res.data;
  842. tableDataLoading7.value = false;
  843. allData.pumpCode = res.data[0].pumpCode;
  844. getHistoryDataByPumpCode();
  845. }
  846. };
  847. //厂站历史数据
  848. const getHistoryDataByPumpCode = async () => {
  849. let params = {
  850. startTime: allData.GWtime1[0],
  851. endTime: allData.GWtime1[1],
  852. pumpCode: allData.pumpCode,
  853. };
  854. let res = await historyDataByPumpCode(params);
  855. let data = res.data;
  856. chartOption.floodOneMapDataByPumpCode.legend.data = [data.pointName];
  857. chartOption.floodOneMapDataByPumpCode.xAxis.data = data.ttList;
  858. chartOption.floodOneMapDataByPumpCode.yAxis.name = data.unit;
  859. chartOption.floodOneMapDataByPumpCode.series.name = data.pointName;
  860. chartOption.floodOneMapDataByPumpCode.series.data = data.dataList;
  861. if (data.ttList.length == 0) {
  862. chartOption.floodOneMapDataByPumpCode.graphic.invisible = false; //暂无数据
  863. } else {
  864. chartOption.floodOneMapDataByPumpCode.graphic.invisible = true; //暂无数据
  865. }
  866. initEcharts4();
  867. };
  868. const changeBengZhanDate = () => {
  869. allData.GWtime1 = [
  870. proxy.moment(allData.GWtime1[0]).format('YYYY-MM-DD 00:00:00'),
  871. proxy.moment(allData.GWtime1[1]).format('YYYY-MM-DD 23:59:59'),
  872. ];
  873. console.log(allData.GWtime1);
  874. getHistoryDataByPumpCode();
  875. };
  876. const detailList = ref([]);
  877. const tabChangeClick = async value => {
  878. allData.currentIndex = value;
  879. bus.emit('setHighlight');
  880. if (allData.currentIndex == 1) {
  881. allData.centerSearchShow = true;
  882. getWeatherPredict();
  883. getRealtimeRain();
  884. nextTick(() => {
  885. let closeCommonPopup = false;
  886. bus.emit('closeCommonPopup', closeCommonPopup);
  887. bus.emit('initeLayer', ['rainStation']);
  888. newfiberMapbox.map.easeTo({
  889. center: [114.312, 34.802],
  890. zoom: 12.9,
  891. pitch: 55,
  892. });
  893. //dataToMap('rainStation', tableData1.value);
  894. });
  895. } else if (allData.currentIndex == 2) {
  896. allData.centerSearchShow = false;
  897. await getRealtimePipeLine();
  898. allData.supervisePipeCode = '2109600079';
  899. allData.pipeTime = [proxy.moment().subtract(1, 'days').format('YYYY-MM-DD'), proxy.moment().format('YYYY-MM-DD')];
  900. nextTick(() => {
  901. let closeCommonPopup = false;
  902. bus.emit('closeCommonPopup', closeCommonPopup);
  903. bus.emit('initeLayer', ['pipeSupervise']);
  904. newfiberMapbox.map.easeTo({
  905. center: [114.312, 34.802],
  906. zoom: 12.9,
  907. pitch: 55,
  908. });
  909. });
  910. } else if (allData.currentIndex == 3) {
  911. allData.centerSearchShow = false;
  912. getRealtimeDataWaterlogging();
  913. allData.waterloggingDate = proxy.moment().format('YYYY');
  914. let closeCommonPopup = false;
  915. bus.emit('closeCommonPopup', closeCommonPopup);
  916. bus.emit('initeLayer', ['waterlog']);
  917. newfiberMapbox.map.easeTo({
  918. center: [114.312, 34.802],
  919. zoom: 12.9,
  920. pitch: 55,
  921. });
  922. } else if (allData.currentIndex == 4) {
  923. allData.centerSearchShow = false;
  924. getRealtimedRainOutlet();
  925. allData.supervisePipeCode = '2109600075';
  926. allData.pipeTime = [proxy.moment().subtract(1, 'days').format('YYYY-MM-DD'), proxy.moment().format('YYYY-MM-DD')];
  927. let closeCommonPopup = false;
  928. bus.emit('closeCommonPopup', closeCommonPopup);
  929. bus.emit('initeLayer', ['PKsupervise']);
  930. newfiberMapbox.map.easeTo({
  931. center: [114.312, 34.802],
  932. zoom: 12.9,
  933. pitch: 55,
  934. });
  935. } else if (allData.currentIndex == 5) {
  936. riverTitle.value = '';
  937. allData.centerSearchShow = false;
  938. getRealtimedRiver();
  939. getSampleDateList();
  940. let closeCommonPopup = false;
  941. bus.emit('closeCommonPopup', closeCommonPopup);
  942. //bus.emit('initeLayer', ['riverLake']);
  943. newfiberMapbox.map.easeTo({
  944. center: [114.312, 34.802],
  945. zoom: 12.9,
  946. pitch: 55,
  947. });
  948. } else if (allData.currentIndex == 6) {
  949. allData.centerSearchShow = false;
  950. allData.GWtime1 = [proxy.moment().subtract(1, 'days').format('YYYY-MM-DD hh:mm:ss'), proxy.moment().format('YYYY-MM-DD hh:mm:ss')];
  951. getRealtimeDataByPump();
  952. let closeCommonPopup = false;
  953. bus.emit('closeCommonPopup', closeCommonPopup);
  954. bus.emit('initeLayer', ['YSBZ', 'WSBZ', 'WSCLC']);
  955. newfiberMapbox.map.easeTo({
  956. center: [114.312, 34.802],
  957. zoom: 12.9,
  958. pitch: 55,
  959. });
  960. chartOption.floodOneMapRainStatic.series[0].data = [
  961. { value: 5, name: '超警戒水位' },
  962. { value: 3, name: '超起抽水位' },
  963. ];
  964. chartOption.floodOneMapJSDTrend.legend.data = ['水位'];
  965. chartOption.floodOneMapJSDTrend.yAxis.name = '单位:m';
  966. chartOption.floodOneMapJSDTrend.series[0].name = '水位';
  967. nextTick(() => {
  968. initEcharts4();
  969. });
  970. } else if (allData.currentIndex == 7) {
  971. allData.centerSearchShow = false;
  972. getOrinignList();
  973. allData.pipeTime = [proxy.moment().subtract(1, 'days').format('YYYY-MM-DD'), proxy.moment().format('YYYY-MM-DD')];
  974. allData.supervisePipeCode = '2109600078';
  975. let closeCommonPopup = false;
  976. bus.emit('closeCommonPopup', closeCommonPopup);
  977. bus.emit('initeLayer', ['orinign']);
  978. timer.value = setInterval(() => {
  979. if (!!!newfiberMapbox) {
  980. return;
  981. } else {
  982. newfiberMapbox.map.easeTo({
  983. center: [114.312, 34.802],
  984. zoom: 12.9,
  985. pitch: 55,
  986. });
  987. clearInterval(timer.value);
  988. }
  989. }, 1000);
  990.  
  991. getSuperVisePipeData();
  992. }
  993. bus.emit('centerSearchShow', allData.centerSearchShow);
  994. };
  995. const checkInfo = value => {
  996. allData.currentIndex2 = value;
  997. getRealtimeDataByPump();
  998. };
  999. //地图定位
  1000. const mapFlyTo = lonlat => {
  1001. newfiberMapbox.map.easeTo({
  1002. center: [Number(lonlat[0]), Number(lonlat[1])],
  1003. zoom: 15.5,
  1004. });
  1005. };
  1006. //雨量数据表格点击事件
  1007. const clickRain = row => {
  1008. highlight(row);
  1009. let closeCommonPopup = false;
  1010. bus.emit('closeCommonPopup', closeCommonPopup);
  1011. if (!!!row.lonLat) {
  1012. proxy.$modal.msgError('站点坐标缺失');
  1013. return;
  1014. }
  1015. let lonlat = row.lonLat.split(',');
  1016. mapFlyTo(lonlat);
  1017. };
  1018. //管网检测表格点击事件
  1019. const clickPipeSupervise = row => {
  1020. highlight(row);
  1021. let closeCommonPopup = false;
  1022. bus.emit('closeCommonPopup', closeCommonPopup);
  1023. if (!!!row.lonLat) {
  1024. proxy.$modal.msgError('站点坐标缺失');
  1025. return;
  1026. }
  1027. let lonlat = row.lonLat.split(',');
  1028. mapFlyTo(lonlat);
  1029.  
  1030. allData.supervisePipeCode = row.stCode;
  1031. // 源头地块加载对应历史数据
  1032. if (row.monitorTargetType == 'typical_land') {
  1033. allData.supervisePipeCode = row.stCode;
  1034. getSuperVisePipeData(); //加载历史数据
  1035. }
  1036. };
  1037. //积水点数据表格点击事件
  1038. const clickZS = row => {
  1039. highlight(row);
  1040. let closeCommonPopup = false;
  1041. bus.emit('closeCommonPopup', closeCommonPopup);
  1042. if (!!!row.lonLat) {
  1043. proxy.$modal.msgError('站点坐标缺失');
  1044. return;
  1045. }
  1046. let lonlat = row.lonLat.split(',');
  1047. mapFlyTo(lonlat);
  1048. };
  1049. //河道数据表格点击事件
  1050. const clickRiver = row => {
  1051. highlight(row);
  1052. let closeCommonPopup = false;
  1053. bus.emit('closeCommonPopup', closeCommonPopup);
  1054. if (!!!row.lonLat) {
  1055. proxy.$modal.msgError('站点坐标缺失');
  1056. return;
  1057. }
  1058. let lonlat = row.lonLat.split(',');
  1059. mapFlyTo(lonlat);
  1060. };
  1061. //厂站检测表格点击事件
  1062. const clickCZ = row => {
  1063. highlight(row);
  1064. let closeCommonPopup = false;
  1065. bus.emit('closeCommonPopup', closeCommonPopup);
  1066. if (!!!row.lon && !!!row.lat) {
  1067. proxy.$modal.msgError('站点坐标缺失');
  1068. return;
  1069. }
  1070. let lonlat = [Number(row.lon), Number(row.lat)];
  1071. mapFlyTo(lonlat);
  1072. allData.pumpCode = row.pumpCode;
  1073. getHistoryDataByPumpCode();
  1074. };
  1075. onMounted(() => {
  1076. bus.on('changeTableContent', val => {
  1077. if (val == 2) {
  1078. allData.centerSearchShow = true;
  1079. tabChangeClick(1); //默认加载雨量监测数据
  1080. bus.emit('centerSearchShow', allData.centerSearchShow);
  1081. allData.tabShowWL = val;
  1082. } else {
  1083. allData.tabShowWL = null;
  1084. allData.centerSearchShow = false;
  1085. bus.emit('centerSearchShow', allData.centerSearchShow);
  1086. }
  1087. });
  1088. });
  1089.  
  1090. const types = ['rainStation', 'pipeSupervise', 'waterlog', 'PKsupervise', 'riverLake', 'YSBZ', 'orinign'];
  1091.  
  1092. watch(
  1093. () => tableData1.value,
  1094. val => dataToMap(types[0], val)
  1095. );
  1096. watch(
  1097. () => tableData2.value,
  1098. val => dataToMap(types[1], val)
  1099. );
  1100. watch(
  1101. () => tableData3.value,
  1102. val => dataToMap(types[2], val)
  1103. );
  1104. watch(
  1105. () => tableData4.value,
  1106. val => dataToMap(types[3], val)
  1107. );
  1108. watch(
  1109. () => tableData5.value,
  1110. val => dataToMap(types[4], val)
  1111. );
  1112. watch(
  1113. () => tableData7.value,
  1114. val => dataToMap(types[5], val)
  1115. );
  1116. watch(
  1117. () => tableData71.value,
  1118. val => dataToMap(types[6], val)
  1119. );
  1120. // 关闭弹窗;
  1121. const closePopup = () => {
  1122. showStationRiver.value = false;
  1123. bus.emit('initeLayer', []);
  1124. };
  1125. const dataToMap = (type, data) => {
  1126. if (!!!(newfiberMapbox && newfiberMapbox.map.load)) {
  1127. let interval = setInterval(() => {
  1128. if (newfiberMapbox && newfiberMapbox.map.load) return method(), clearInterval(interval);
  1129. }, 1000);
  1130. return;
  1131. }
  1132. method();
  1133. function method() {
  1134. let closeCommonPopup = false;
  1135. bus.emit('closeCommonPopup', closeCommonPopup);
  1136. newfiberMapbox.map.easeTo({
  1137. center: [114.312, 34.802],
  1138. zoom: 12.9,
  1139. pitch: 55,
  1140. });
  1141. types.forEach(i => bus.emit('setLayerVisible', { layername: i, isCheck: false }));
  1142. let features = data
  1143. .filter(i => i.lonLat || i.lon || i.lat)
  1144. .map(i => {
  1145. i.geometry = `POINT(${i.lonLat ? i.lonLat.replaceAll(',', ' ') : `${i.lon} ${i.lat}`})`;
  1146. i.type = type;
  1147. return turf.feature(Terraformer.WKT.parse(i.geometry), Object.assign({}, i));
  1148. });
  1149. bus.emit('removeMapDatas', [type]);
  1150. bus.emit('setGeoJSON', { json: turf.featureCollection(features), type });
  1151. bus.emit('setLayerVisible', { layername: type, isCheck: true });
  1152. }
  1153. };
  1154.  
  1155. const highlight = i => {
  1156. if (!(i.lonLat || i.lon || i.lat)) return;
  1157. i.geometry = `POINT(${i.lonLat ? i.lonLat.replaceAll(',', ' ') : `${i.lon} ${i.lat}`})`;
  1158. let feature = turf.feature(Terraformer.WKT.parse(i.geometry), Object.assign({}, i));
  1159. bus.emit('setHighlight', feature);
  1160. };
  1161. onBeforeUnmount(() => {
  1162. bus.off('changeTableContent');
  1163. if (timer.value) {
  1164. clearInterval(timer.value);
  1165. }
  1166. });
  1167. </script>
  1168. <style lang="scss" scoped>
  1169. .tabRightWL {
  1170. width: 100%;
  1171. height: 100%;
  1172. position: absolute;
  1173. background: #00314e;
  1174. border: 1px solid #094065;
  1175. z-index: 115;
  1176. overflow: auto;
  1177. .tabChangeList {
  1178. display: flex;
  1179. align-items: center;
  1180. justify-content: space-around;
  1181. .tabChange {
  1182. width: 145px;
  1183. height: 22px;
  1184. font-family: PingFang SC;
  1185. margin: 20px 0 10px 0px;
  1186. font-size: 16px;
  1187. font-weight: 400;
  1188. line-height: 22px;
  1189. text-align: center;
  1190. cursor: pointer;
  1191. &:hover {
  1192. color: #00d1ff;
  1193. }
  1194. }
  1195. .active {
  1196. color: #00d1ff;
  1197. }
  1198. }
  1199. .dividerLine {
  1200. height: 2px;
  1201. border: 1px;
  1202. margin: 0px 0 10px 0px;
  1203. background: linear-gradient(90deg, rgba(0, 115, 165, 0) 0.79%, #0073a5 20.43%, #0073a5 82.43%, rgba(0, 115, 165, 0) 100%);
  1204. }
  1205. .allContent {
  1206. .selectTitle {
  1207. .selectToolList {
  1208. width: 300px;
  1209. .selectTool {
  1210. width: 135px;
  1211. height: 26px;
  1212. border-radius: 2px;
  1213. background: linear-gradient(0deg, #004770, #004770), linear-gradient(0deg, #00d1ff, #00d1ff);
  1214. border: 0.5px solid #00d1ff;
  1215. margin-right: 10px;
  1216. }
  1217. }
  1218. }
  1219. .staticPicture {
  1220. #chartThree {
  1221. width: 500px;
  1222. height: 300px;
  1223. }
  1224. #chartSuperviseWL {
  1225. width: 500px;
  1226. height: 300px;
  1227. }
  1228. }
  1229. .navBtn {
  1230. display: flex;
  1231. justify-content: flex-end;
  1232. p {
  1233. width: 70px;
  1234. height: 20px;
  1235. text-align: center;
  1236. color: #00a6d2;
  1237. cursor: pointer;
  1238. background: #004770;
  1239. font-family: PingFang SC;
  1240. font-size: 14px;
  1241. font-weight: 400;
  1242. line-height: 20px;
  1243. border-radius: 10px;
  1244. }
  1245. .active {
  1246. background: #0188b1;
  1247. border-radius: 10px;
  1248. color: #004c6c;
  1249. }
  1250. }
  1251. .DMcontent {
  1252. display: flex;
  1253. .activeR {
  1254. background: #0188b1;
  1255. color: #004c6c;
  1256. }
  1257. .DMpart {
  1258. width: 154px;
  1259. margin: 5px 10px;
  1260. fill: linear-gradient(180deg, #0073a5 -112.14%, rgba(0, 115, 165, 0) 97.26%);
  1261. border: 1px solid #0073a5;
  1262. border-radius: 10px;
  1263. display: flex;
  1264. justify-content: center;
  1265. &:hover {
  1266. background: #0188b1;
  1267. color: #004c6c;
  1268. }
  1269. .partContent {
  1270. display: flex;
  1271. align-items: center;
  1272. flex-direction: column;
  1273. cursor: pointer;
  1274.  
  1275. .title {
  1276. color: #00d1ff;
  1277. text-align: center;
  1278. font-family: PingFang SC;
  1279. font-size: 14px;
  1280. font-style: normal;
  1281. font-weight: 400;
  1282. line-height: normal;
  1283. margin: 10px 0;
  1284. }
  1285. }
  1286. }
  1287. }
  1288. .weatherInfo {
  1289. display: flex;
  1290. justify-content: space-around;
  1291. // margin-top: 5px;
  1292. height: 200px;
  1293. overflow-y: hidden;
  1294. overflow-x: scroll;
  1295. .part {
  1296. padding: 10px;
  1297. margin: 5px 6px;
  1298. width: 100px !important;
  1299. background: #003758;
  1300. display: flex;
  1301. flex-direction: column;
  1302. justify-content: center;
  1303. align-items: center;
  1304. border-radius: 10px;
  1305. &:hover {
  1306. background: linear-gradient(180deg, #004770 0%, rgba(0, 71, 112, 0) 100%);
  1307. border: 1px solid #0073a5;
  1308. }
  1309. &:nth-child(1) {
  1310. background: linear-gradient(180deg, #004770 0%, rgba(0, 71, 112, 0) 100%);
  1311. border: 1px solid #0073a5;
  1312. }
  1313. }
  1314. p {
  1315. text-align: center;
  1316. margin: 3px;
  1317. height: 20px;
  1318. font-size: 14px;
  1319. font-weight: 400;
  1320. line-height: 20px;
  1321. }
  1322. }
  1323. }
  1324. .rightTab {
  1325. width: 100%;
  1326. margin-top: 10px;
  1327. cursor: pointer;
  1328. margin-bottom: 10px;
  1329. }
  1330. }
  1331. </style>