Newer
Older
KaiFengPC / src / views / spongePerformance / waterlogging / prevention / index.vue
@zhangdeliang zhangdeliang on 13 Jul 20 KB update
  1. <template>
  2. <!-- 示范期考核-内涝防治 -->
  3. <div class="assessmentPage">
  4. <el-tabs v-model="tabActive" @tab-click="changeTab" class="tabsContent">
  5. <el-tab-pane label="模型法" name="model"></el-tab-pane>
  6. <el-tab-pane label="监测法" name="monitor"></el-tab-pane>
  7. </el-tabs>
  8.  
  9. <!-- gis地图 -->
  10. <MapBox :initJson="`/static/libs/mapbox/style/preventionSFQ.json`" l7=""></MapBox>
  11.  
  12. <!-- 模型法 -->
  13. <div v-if="tabActive == 'model'">
  14. <div class="tuli">
  15. <div style="margin: 10px; font-size: 18px">图例</div>
  16. <div class="tuli_img">
  17. <img src="/images/2.jpg" alt="" />
  18. <div>内涝区域</div>
  19. </div>
  20. </div>
  21. <div class="content" style="width: 800px">
  22. <el-table
  23. ref="tableModal"
  24. :data="tableData"
  25. max-height="500"
  26. v-loading="tableLoading"
  27. @row-click="clickModal"
  28. highlight-current-row
  29. >
  30. <el-table-column label="考核年度" prop="year" />
  31. <el-table-column label="降雨重现期" prop="targetCxq" />
  32. <el-table-column label="设计雨量(mm)" prop="rainfall" />
  33. <el-table-column label="最大内涝面积(㎡)" prop="totalFloodArea" />
  34. <el-table-column label="占建成区比例(%)" prop="floodPercent" />
  35. <el-table-column label="目标(%)" prop="targetPercent" />
  36. <el-table-column label="达标情况" prop="isStandard">
  37. <template #default="{ row }">
  38. {{ row.isStandard === '1' ? '达标' : '未达标' }}
  39. </template>
  40. </el-table-column>
  41. </el-table>
  42. </div>
  43. </div>
  44.  
  45. <!-- 监测法 -->
  46. <div v-if="tabActive == 'monitor'">
  47. <div class="tuli">
  48. <div style="margin: 10px; font-size: 18px">图例</div>
  49. <div class="tuli_img">
  50. <img src="/images/1.1.jpg" alt="" />
  51. <div>内涝点</div>
  52. </div>
  53. </div>
  54.  
  55. <div class="content">
  56. <div class="selectTitle">
  57. <div class="name">监测法测算结果</div>
  58. <!-- <el-select v-model="currentYear" @change="changeMonitorYear" style="width: 100px" size="small">
  59. <el-option label="2021年" value="2021"></el-option>
  60. <el-option label="2022年" value="2022"></el-option>
  61. <el-option label="2023年" value="2023"></el-option>
  62. </el-select> -->
  63. <el-select v-model="currentYear" @change="changeMonitorYear" style="width: 100px" size="small">
  64. <el-option v-for="item in yearList" :key="item.value" :label="item.label" :value="item.value"></el-option>
  65. </el-select>
  66. </div>
  67.  
  68. <PieChart :echartData="echartData" :title="`建成区面积\n${areaData}k㎡`" :refresh="refresh" class="chartHeight"></PieChart>
  69.  
  70. <div class="selectTitle">
  71. <div class="name">内涝点监测感知情况</div>
  72. <el-popover placement="top-start" :width="80" trigger="hover">
  73. <template #reference> <img :src="getImageUrl('res.png', 'newImgs/HaiMianScreen')" alt="" /></template>
  74. <template #default>
  75. <div class="typeMap">内涝点积水评判标准:积水时长>30分钟且积水深度≥15cm</div>
  76. </template>
  77. </el-popover>
  78. </div>
  79. <el-table :data="tableDataNL" height="450" v-loading="tableLoadingNL">
  80. <el-table-column label="内涝点名称" prop="name" />
  81. <el-table-column label="积水时长(h)" prop="yearTotalHour" />
  82. <el-table-column label="积水深度(cm)" prop="yearMaxDepth" />
  83. </el-table>
  84. </div>
  85. </div>
  86.  
  87. <div class="PopupWaterlogging" id="PopupWaterlogging" v-if="pipePopupShow">
  88. <div class="titleTop">
  89. <el-tabs class="PopupWaterloggingtabs">
  90. <el-tab-pane label="降雨过程线">
  91. <div class="allContent">
  92. <div>开始时间:{{ yearMaxStartTime }}</div>
  93. <div>结束时间:{{ yearMaxEndTime }}</div>
  94. <empty v-if="pipePopupdata" emptyText="暂无降雨数据" :width="100" :height="100" style="margin-top: 50px"></empty>
  95. <div id="chartPopupRain"></div>
  96. </div>
  97. </el-tab-pane>
  98. </el-tabs>
  99. </div>
  100. <div class="closePopup">
  101. <el-icon :size="18" @click="closePopup"><Close /></el-icon>
  102. </div>
  103. </div>
  104. <div class="mapLegendColor modelmapLegend" v-if="tabActive == 'model'">
  105. <p class="title">最大积水深度(米)</p>
  106. <p><span class="info"></span> 0.05-0.15</p>
  107. <p><span class="primary"></span> 0.15-0.3</p>
  108. <p><span class="yellow"></span> 0.3-0.5</p>
  109. <p><span class="pink"></span> 0.5-1.0</p>
  110. <p><span class="red"></span> 大于1.0</p>
  111. </div>
  112. </div>
  113. </template>
  114. <script setup>
  115. import MapBox from '@/views/gisMapPage/gisMapBox1'; //gis地图
  116. import PieChart from '@/components/Echarts/pieChart.vue'; //饼图
  117. import bus from '@/bus';
  118. import { moduleFloodResult, monitorEvaluateResult } from '@/api/spongePerformance/prevention';
  119. import { graphicReport } from '@/api/dataAnalysis/syntherticData';
  120. import { getConfigKey } from '@/api/system/config'; //获取参数值
  121. import chartOption from '@/components/Echarts/pieChart_1.js';
  122. import * as echarts from 'echarts';
  123. import { nextTick } from 'vue';
  124. const pipePopupShow = ref(false);
  125. const pipePopupdata = ref(false);
  126. const { proxy } = getCurrentInstance();
  127. const currentYear = ref('');
  128. const yearList = ref([]);
  129. const timer = ref(null);
  130. const tabActive = ref('model');
  131. const tableModal = ref(null);
  132. const tableLoading = ref(false);
  133. const tableData = ref([]);
  134. const areaData = ref('');
  135. const resultList = ref([]);
  136. const waterEchart = shallowRef(null);
  137. const yearMaxStartTime = ref('');
  138. const yearMaxEndTime = ref('');
  139. const stCodes = ref('');
  140. const selectData = ref([]);
  141. const selectCode = ref('');
  142. const seleceName = ref('');
  143. const unitName = ref('');
  144. const propertyMonitorXList = ref([]);
  145. const echartData = ref([
  146. { name: '内涝区域', value: 0 },
  147. { name: '未发生内涝', value: 0 },
  148. ]);
  149. const refresh = ref(1);
  150. const tableDataNL = ref([]);
  151. const tableLoadingNL = ref(false);
  152. const dataListNL = ref([]);
  153.  
  154. // 模型法数据获取
  155. async function getModalData() {
  156. tableLoading.value = true;
  157. let res = await moduleFloodResult();
  158. if (res && res.code == 200) {
  159. tableData.value = res.data;
  160. if (Boolean(tableData.value.length)) {
  161. tableData.value.forEach(i => {
  162. i.targetCxq = i.targetCxq + '年一遇24h';
  163. });
  164. }
  165. tableModal.value.setCurrentRow(tableData.value[0], true); //表格默认第一个高亮选中
  166. resultList.value = tableData.value[0].resultList;
  167. let moduleGeojson = getFeatureGeojson(tableData.value[0].partitionList);
  168. let moduleBoundaryGeojson = getGeojsonBoundary(moduleGeojson);
  169. let modulelabelGeojson = getGeojsonCenter(moduleGeojson);
  170. //gis渲染内涝区域
  171. addModuleLayer(moduleGeojson, 'moduleFlood', '#95f204');
  172. addModuleBoundary(moduleBoundaryGeojson, 'moduleFloodBoundary');
  173. addGeojsonLable(modulelabelGeojson, 'moduleFloodlabel', '#ffffff');
  174. }
  175. tableLoading.value = false;
  176. }
  177. // 模型法表格点击
  178. function clickModal(row) {
  179. resultList.value = row.resultList;
  180. let moduleGeojson = getFeatureGeojson(row.partitionList);
  181. let moduleBoundaryGeojson = getGeojsonBoundary(moduleGeojson);
  182. let modulelabelGeojson = getGeojsonCenter(moduleGeojson);
  183. //gis渲染内涝区域
  184. newfiberMapbox.map.getSource('moduleFlood').setData(moduleGeojson);
  185. newfiberMapbox.map.getSource('moduleFloodBoundary').setData(moduleBoundaryGeojson);
  186. newfiberMapbox.map.getSource('moduleFloodlabel').setData(modulelabelGeojson);
  187. }
  188. //获取geojson
  189. const getFeatureGeojson = dataList => {
  190. let features = [];
  191. dataList.forEach(data => {
  192. let feature = turf.feature(Terraformer.WKT.parse(data.geometry), data);
  193. features.push(feature);
  194. });
  195. return {
  196. type: 'FeatureCollection',
  197. features: features,
  198. };
  199. };
  200. //获取geojson中心点
  201. const getGeojsonCenter = geojson => {
  202. let features = [];
  203. geojson.features.forEach(element => {
  204. let center = turf.center(element.geometry);
  205. center.properties = element.properties;
  206. features.push(center);
  207. });
  208. return {
  209. type: 'FeatureCollection',
  210. features: features,
  211. };
  212. };
  213. //获取geojson边界
  214. const getGeojsonBoundary = geojson => {
  215. let features = [];
  216. geojson.features.forEach(element => {
  217. let line = turf.polygonToLine(element.geometry);
  218. features.push(line);
  219. });
  220. return {
  221. type: 'FeatureCollection',
  222. features: features,
  223. };
  224. };
  225. //添加模型法地图
  226. const addModuleLayer = (geojson, layerName, color) => {
  227. !newfiberMapbox.map.getSource(layerName) && newfiberMapbox.map.addSource(layerName, { type: 'geojson', data: geojson });
  228. !newfiberMapbox.map.getLayer(layerName) &&
  229. newfiberMapbox.map.addLayer({
  230. id: layerName,
  231. type: 'fill',
  232. source: layerName,
  233. paint: {
  234. 'fill-color': '#95f204',
  235. 'fill-opacity': 0.5,
  236. },
  237. });
  238. };
  239. const addModuleBoundary = (geojson, layerName) => {
  240. !newfiberMapbox.map.getSource(layerName) && newfiberMapbox.map.addSource(layerName, { type: 'geojson', data: geojson });
  241. !newfiberMapbox.map.getLayer(layerName) &&
  242. newfiberMapbox.map.addLayer({
  243. id: layerName,
  244. type: 'line',
  245. source: layerName,
  246. paint: {
  247. 'line-color': '#95f204',
  248. 'line-width': 3,
  249. },
  250. });
  251. };
  252. const addGeojsonLable = (geojson, layerName, color) => {
  253. !newfiberMapbox.map.getSource(layerName) && newfiberMapbox.map.addSource(layerName, { type: 'geojson', data: geojson });
  254. !newfiberMapbox.map.getLayer(layerName) &&
  255. !newfiberMapbox.map.addLayer({
  256. id: layerName,
  257. type: 'symbol',
  258. source: layerName,
  259. paint: {
  260. 'text-color': geojson.features[0].properties.color ? ['get', 'color'] : color,
  261. 'text-halo-color': 'rgba(0,0,0,1)',
  262. 'text-halo-width': 2,
  263. },
  264. layout: {
  265. 'text-allow-overlap': true,
  266. 'text-field': ['get', 'partitionName'],
  267. 'text-font': ['KlokanTech Noto Sans Regular'],
  268. 'text-size': 16,
  269. 'text-line-height': 3,
  270. 'text-anchor': 'bottom',
  271. 'text-max-width': 50,
  272. 'text-offset': [0, -1],
  273. },
  274. });
  275. };
  276. // tab切换
  277. function changeTab(e) {
  278. tabActive.value = e.props.name;
  279. if (tabActive.value == 'model') {
  280. bus.emit('removeMapDatas', ['error_zishui']);
  281. if (newfiberMapbox.map.getLayer('waterLoging')) {
  282. newfiberMapbox.map.removeLayer('waterLoging');
  283. newfiberMapbox.map.removeSource('waterLoging');
  284. }
  285. newfiberMapbox.popupService.popups.forEach(popup => {
  286. nextTick(() => {
  287. newfiberMapbox.removePopup(popup);
  288. });
  289. });
  290. getModalData();
  291. } else {
  292. getMonitorData();
  293. if (newfiberMapbox.map.getLayer('moduleFlood')) {
  294. newfiberMapbox.map.removeLayer('moduleFlood');
  295. newfiberMapbox.map.removeLayer('moduleFloodBoundary');
  296. newfiberMapbox.map.removeLayer('moduleFloodlabel');
  297. newfiberMapbox.map.removeSource('moduleFlood');
  298. newfiberMapbox.map.removeSource('moduleFloodBoundary');
  299. newfiberMapbox.map.removeSource('moduleFloodlabel');
  300. }
  301. }
  302. }
  303.  
  304. // 获取监测法数据
  305. async function getMonitorData() {
  306. tableLoadingNL.value = true;
  307. let res = await monitorEvaluateResult();
  308. if (res && res.code == 200) {
  309. dataListNL.value = res.data;
  310. yearList.value = [];
  311. if (dataListNL.value.length == 0) return;
  312. dataListNL.value.map(item => {
  313. yearList.value.push({
  314. value: item.year,
  315. label: item.year + '年',
  316. });
  317. });
  318. console.log(yearList.value, ' yearList.value');
  319. currentYear.value = dataListNL.value[0].year;
  320. changeMonitorYear(currentYear.value);
  321. }
  322. tableLoadingNL.value = false;
  323. }
  324. // 监测法年份切换
  325. function changeMonitorYear(val) {
  326. currentYear.value = val;
  327. let rows = dataListNL.value.filter(item => item.year == val);
  328. tableDataNL.value = rows[0].allWaterLoggingPointList;
  329. echartData.value[0].value = rows[0].floodArea; //内涝
  330. echartData.value[1].value = areaData.value - rows[0].floodArea; //内涝未发生
  331. refresh.value = Math.random();
  332. //gis渲染内涝点
  333. intiMapDataPoint();
  334. }
  335.  
  336. // 地图渲染点位
  337. function intiMapDataPoint() {
  338. if (newfiberMapbox.map.getLayer('waterLoging')) {
  339. newfiberMapbox.map.removeLayer('waterLoging');
  340. newfiberMapbox.map.removeSource('waterLoging');
  341. }
  342. newfiberMapbox.popupService.popups.forEach((popup, index) => {
  343. nextTick(() => {
  344. newfiberMapbox.removePopup(popup);
  345. });
  346. });
  347. let geojson1 = turf.featureCollection(
  348. tableDataNL.value.map(item =>
  349. turf.point([item.longitude, item.latitude], {
  350. ...item,
  351. waterlogName: `${item.name}`,
  352. waterlogTime: `${item.yearTotalHour} h`,
  353. waterlogDepth: `${item.yearMaxDepth} m`,
  354. color: item.isFlood == '1' ? '#d9001b' : item.isFlood == '0' ? '#95f204' : '',
  355. })
  356. )
  357. );
  358. addWaterloggingLayer(geojson1, 'waterLoging');
  359. // let key = 'error_zishui';
  360. // bus.emit('getGeojsonByType', {
  361. // type: 'error_zishui',
  362. // callback: geojson => {
  363. // setTimeout(() => {
  364. // bus.emit('removeMapDatas', ['error_zishui']);
  365. // if (!!!geojson.features.length) bus.emit('setGeoJSON', { json: geojson1, key });
  366. // bus.emit('setLayerVisible', { layername: key, isCheck: true });
  367. // }, 2000);
  368. // },
  369. // });
  370. geojson1.features.forEach(feature => {
  371. // console.log(feature.properties, 123321);
  372. let popupClass;
  373. feature.properties.isFlood == '0' ? (popupClass = 'successPopup') : (popupClass = 'errorPopup');
  374. !!feature.properties.isFlood ? (feature.properties.isFlood = '0') : (feature.properties.isFlood = '1');
  375. return newfiberMapbox.addPopup(
  376. new mapboxL7.Popup({
  377. title: '',
  378. html: `
  379. <div class=${popupClass}><div class='title'>${feature.properties.waterlogName}</div>
  380. <div class='part'>积水总时长:${feature.properties.waterlogTime || 0}</div>
  381. <div class='part'>最大积水深度:${feature.properties.waterlogDepth || 0}</div>
  382. <div class='part'>雨量站监测累计雨量:${feature.properties.yearMaxRain || 0}mm</div>
  383. </div>`,
  384. lngLat: {
  385. lng: feature.geometry.coordinates[0],
  386. lat: feature.geometry.coordinates[1],
  387. },
  388. anchor: 'center',
  389. offsets: [20, 80],
  390. autoClose: false,
  391. })
  392. );
  393. });
  394. }
  395. //地图渲染内涝点
  396. const addWaterloggingLayer = async (geojson, layerName) => {
  397. !!!newfiberMapbox.map.getSource(layerName) && newfiberMapbox.map.addSource(layerName, { type: 'geojson', data: geojson });
  398. !!!newfiberMapbox.map.getLayer(layerName) &&
  399. newfiberMapbox.map.addLayer({
  400. id: layerName,
  401. type: 'circle',
  402. source: layerName,
  403. paint: {
  404. 'circle-color': ['get', 'color'],
  405. 'circle-radius': 7,
  406. },
  407. });
  408. newfiberMapbox.map.on('click', layerName, e => {
  409. let clickfeature = newfiberMapbox.map
  410. .queryRenderedFeatures([
  411. [e.point.x - 10 / 2, e.point.y - 10 / 2],
  412. [e.point.x + 10 / 2, e.point.y + 10 / 2],
  413. ])
  414. .filter(i => i.layer.id == 'waterLoging');
  415. if (clickfeature[0].properties.isFlood == '0') return;
  416. console.log('clickfeature', '点击事件', clickfeature[0].properties.isFlood);
  417. if (clickfeature[0].properties.isFlood == '1') {
  418. yearMaxStartTime.value = clickfeature[0].properties.yearMaxStartTime;
  419. yearMaxEndTime.value = clickfeature[0].properties.yearMaxEndTime;
  420. stCodes.value = clickfeature[0].properties.stCodes;
  421.  
  422. getSuperViseData();
  423. }
  424. });
  425. };
  426. //获取监测数据
  427. const getSuperViseData = async () => {
  428. let params = {
  429. startTime: yearMaxStartTime.value,
  430. endTime: yearMaxEndTime.value,
  431. stCode: stCodes.value,
  432. };
  433.  
  434. let res = await graphicReport(params);
  435. if (res && res.code == 200) {
  436. let datas = res.data;
  437.  
  438. pipePopupShow.value = true;
  439. if (datas.propertyMonitorXList.length == 0) {
  440. pipePopupdata.value = true;
  441. return;
  442. }
  443. if (Boolean(datas.propertyMonitorXList.length)) {
  444. propertyMonitorXList.value = [];
  445. datas.propertyMonitorXList.forEach(i => {
  446. propertyMonitorXList.value.push(i.substr(0, 16));
  447. });
  448. }
  449. unitName.value = datas.propertyMonitorList[0].propertyUnit;
  450. selectData.value = datas.propertyMonitorList[0].ylist;
  451.  
  452. //降雨过程线
  453. setTimeout(() => {
  454. initEchartsPopup();
  455. }, 1000);
  456. }
  457. };
  458. // 获取建成区面积
  459. function getAreaData() {
  460. getConfigKey('jcq_area').then(res => {
  461. areaData.value = res.data || '58.1';
  462. });
  463. }
  464. const closePopup = () => {
  465. pipePopupShow.value = false;
  466. };
  467. // 降雨趋势折线图
  468. let chartPopupRain = null;
  469. const initEchartsPopup = () => {
  470. if (!!chartPopupRain) chartPopupRain.dispose();
  471. chartPopupRain = echarts.init(document.getElementById('chartPopupRain'));
  472. chartOption.popupRainTrend.legend.data = [seleceName.value];
  473. chartOption.popupRainTrend.yAxis.name = unitName.value;
  474. chartOption.popupRainTrend.xAxis.data = propertyMonitorXList.value;
  475. chartOption.popupRainTrend.series.name = seleceName.value;
  476. chartOption.popupRainTrend.series.data = selectData.value;
  477. // 设置鼠标滚轮放大缩小展示数据区间
  478. chartOption.popupRainTrend.dataZoom = [{ type: 'inside', startValue: propertyMonitorXList.value[propertyMonitorXList.value.length / 2] }];
  479. if (propertyMonitorXList.value.length > 0) {
  480. chartOption.popupRainTrend.graphic.invisible = true; //暂无数据
  481. } else {
  482. chartOption.popupRainTrend.graphic.invisible = false; //暂无数据
  483. }
  484. chartPopupRain.clear();
  485. chartPopupRain.setOption(chartOption.popupRainTrend);
  486. };
  487. onMounted(() => {
  488. getAreaData();
  489. getModalData();
  490. });
  491. onBeforeUnmount(() => {
  492. if (!!!newfiberMapbox) return;
  493. !!newfiberMapbox.map.getLayer('waterLoging') && newfiberMapbox.map.removeLayer('waterLoging');
  494. !!newfiberMapbox.map.getSource('waterLoging') && newfiberMapbox.map.removeSource('waterLoging');
  495. newfiberMapbox.popupService.popups.forEach(popup => {
  496. nextTick(() => {
  497. newfiberMapbox.removePopup(popup);
  498. });
  499. });
  500. if (timer.value) {
  501. clearInterval(timer.value);
  502. }
  503. });
  504. </script>
  505. <style lang="scss">
  506. @import '@/assets/styles/variables.module.scss';
  507. .assessmentPage {
  508. width: 100%;
  509. height: 95%;
  510. .content {
  511. width: 500px;
  512. background: $mainBg;
  513. border-radius: 8px;
  514. position: absolute;
  515. top: 20px;
  516. right: 20px;
  517. z-index: 90;
  518. padding: 15px;
  519. overflow: auto;
  520. .chartHeight {
  521. width: 100%;
  522. height: 240px !important;
  523. }
  524. }
  525. .tabsContent {
  526. position: absolute;
  527. z-index: 99;
  528. left: 30px;
  529. top: 20px;
  530. }
  531. .imgTL {
  532. position: absolute;
  533. z-index: 99;
  534. left: 30px;
  535. bottom: 20px;
  536. }
  537. .tuli {
  538. left: 20px;
  539. bottom: 40px;
  540. z-index: 111;
  541. position: absolute;
  542. padding: 10px;
  543. background: #00314e;
  544. display: flex;
  545. flex-direction: column;
  546. justify-content: space-between;
  547. align-items: center;
  548. color: #fff;
  549. div {
  550. flex: 1;
  551. }
  552. .tuli_img {
  553. display: flex;
  554. width: 120px;
  555. align-items: center;
  556. margin-top: 5px;
  557. img {
  558. margin-right: 10px;
  559. width: 25px;
  560. }
  561. }
  562. }
  563. }
  564. .l7-popup-tip {
  565. display: none;
  566. }
  567. .l7-popup .l7-popup-content {
  568. padding: 0px;
  569. background: none;
  570. }
  571. .l7-popup .l7-popup-content .l7-popup-close-button {
  572. display: none;
  573. }
  574.  
  575. .contentInfo {
  576. display: flex;
  577. align-items: center;
  578. .contentName {
  579. margin: 3px;
  580. height: 20px;
  581. width: 70px;
  582. font-size: 14px;
  583. font-weight: 400;
  584. line-height: 20px;
  585. color: #00d1ff;
  586. }
  587. .contentValue {
  588. height: 20px;
  589. width: 100px;
  590. font-size: 14px;
  591. font-weight: 400;
  592. line-height: 20px;
  593. color: #00d1ff;
  594. overflow: hidden;
  595. white-space: nowrap;
  596. text-overflow: ellipsis;
  597. }
  598. }
  599. .el-popper {
  600. .typeMap {
  601. color: #ffffff;
  602. }
  603. }
  604. #PopupWaterlogging {
  605. position: fixed;
  606. left: 52%;
  607. top: 30%;
  608. transform: translate(-50%, -50%);
  609. width: 500px;
  610. height: 310px;
  611. background: #021534;
  612. border: 1px solid #114f89;
  613. z-index: 2000;
  614. display: flex;
  615. .allContent {
  616. width: 425px;
  617. height: 300px;
  618. display: flex;
  619. flex-direction: column;
  620. }
  621. #chartPopupRain {
  622. width: 425px;
  623. height: 200px;
  624. }
  625. .titleTop {
  626. width: 95%;
  627. display: flex;
  628. padding-top: 8px;
  629. margin-left: 20px;
  630. }
  631. .closePopup {
  632. width: 5%;
  633. margin: 15px;
  634.  
  635. cursor: pointer;
  636. }
  637. .PopupWaterloggingtabs {
  638. width: 100%;
  639. }
  640. }
  641. .errorPopup {
  642. border-radius: 8px;
  643. background-color: rgba(247, 189, 15, 0.5);
  644. border: 2px solid #f7bd0f;
  645. padding: 5px;
  646. // color: #000;
  647. }
  648. .successPopup {
  649. border-radius: 8px;
  650. background-color: rgba(129, 211, 248, 0.5);
  651. border: 2px solid #81d3f8;
  652. padding: 5px;
  653. }
  654. .modelmapLegend {
  655. }
  656. </style>
  657. <style lang="scss" scoped>
  658. .modelmapLegend {
  659. position: absolute;
  660. right: 20px !important;
  661. }
  662. </style>