- <template>
- <!-- 监测监视--降雨日历统计 -->
- <div class="monitorCalender">
- <div :class="isCaleisnder">
- <div class="selectTitleHM">
- <div class="name">降雨日历统计</div>
- <el-date-picker
- :clearable="false"
- format="YYYY-MM"
- v-model="datevalue"
- type="month"
- placeholder="选择月"
- style="width: 150px"
- size="small"
- @change="timeChange()"
- />
- </div>
-
- <el-calendar v-model="datevalue">
- <template #date-cell="{ data }">
- <div style="height: 100%" @click="changepeople(data.day)">
- <div class="calendar-day">{{ data.day.split('-').slice(2).join('-') }}</div>
- <div
- class="data"
- v-for="(item, index) in allData.scheduleData"
- :key="item"
- v-show="moment(item.rainTime).format('YYYY-MM-DD') == moment(data.day).format('YYYY-MM-DD')"
- >
- <div class="data-body" v-if="item.rainTime == moment(data.day).format('YYYY-MM-DD')">
- <div class="datadiv" style="color: #ffeb3b">
- {{ item.rainCumulative == 0.0 ? '' : item.rainCumulative ? item.rainCumulative + 'mm' : '' }}
- </div>
- </div>
- </div>
- </div>
- </template>
- </el-calendar>
- <div class="supervisePopupPK" id="supervisePopupPK" v-show="allData.popupShow">
- <div class="titleTop">
- <div class="titleName">{{ dialogTitle }}</div>
- <div class="closePopup">
- <el-icon :size="18" @click="closePopup"><Close /></el-icon>
- </div>
- </div>
- <div class="allContent">
- <div id="waterChar" class="chartHeight"></div>
- </div>
- </div>
- </div>
- </div>
- </template>
-
- <script setup>
- import optionChart from './chartOption.js';
- import { rainTimeDay } from '@/api/newPageline/riverCapacity.js';
- import { graphicReport } from '@/api/dataAnalysis/syntherticData';
- import { rainDistributionMapData } from '@/api/floodSys/floodStation.js';
- import { getKrigingByPoints } from '@/utils/gis/rainkriging';
- import bjBoundaryJson from '@/assets/geojson/krigingBoundary.json';
- import moment from 'moment';
- import { nextTick, onBeforeUnmount } from 'vue';
- const datevalue = ref(new Date());
- const dialogTitle = ref('');
- const { proxy } = getCurrentInstance();
- const waterEchart = shallowRef(null);
- const fromTime = ref('');
- const toTime = ref('');
- const krigingJson = ref([]);
- const Chartvalue = ref({
- xlist: [],
- ylist: [],
- });
-
- const props = defineProps({
- isCaleisnder: {
- type: String,
- default: '',
- },
- });
- const allData = reactive({
- popupShow: false,
- clickitem: '',
- scheduleData: [],
- });
- const closePopup = () => {
- allData.popupShow = false;
- };
-
- // 畅通道echart
- function waterBarChartHM(rainList) {
- let stCode = '';
- let startTime = '';
- let endTime = '';
- stCode = rainList.stCode;
- startTime = rainList.rainTime + ' 08:00:00';
- endTime = moment(rainList.rainTime).add(1, 'days').format('YYYY-MM-DD 08:00:00');
- console.log(endTime, 'stCode');
- let prams = {
- stCode: stCode,
- startTime: startTime,
- endTime: endTime,
- };
- graphicReport(prams).then(res => {
- // console.log('res.data', res, res.data.propertyMonitorXList);
- Chartvalue.value.xlist = res.data.propertyMonitorXList;
- if (res.data.propertyMonitorXList.length == 0) return;
- res.data.propertyMonitorList.map(item => {
- console.log(item, 'item');
- if (item.monitorPropertyName == '5分钟时段降水量') {
- Chartvalue.value.ylist = item.ylist;
- }
- });
- intChart();
- });
- }
- //获取降雨插值
- const getRainDistribution = async time => {
- if (newfiberMapbox.map.getLayer('kriging_layer')) {
- newfiberMapbox.map.removeLayer('kriging_layer');
- newfiberMapbox.map.removeLayer('krigingSymbol_layer');
- newfiberMapbox.map.removeSource('kriging_source');
- newfiberMapbox.map.removeSource('krigingSymbol_source');
- }
- !!newfiberMapbox.map.getLayer('kriging_layer') && newfiberMapbox.map.removeLayer('kriging_layer');
- !!newfiberMapbox.map.getSource('kriging_source') && newfiberMapbox.map.removeSource('kriging_source');
- krigingJson.value = [];
- let params = {
- startTime: time,
- endTime: time,
- };
- let res = await rainDistributionMapData(params);
- if (res && res.code == 200) {
- let allRainData = res.data;
- if (!!!allRainData.length) {
- proxy.$modal.msgError('暂无数据');
- return;
- }
- allRainData.forEach(data => {
- // data.rainSiteDistributionVOS.push(
- // {
- // lonLat: '113.973921,30.951959',
- // p24: '19.1',
- // stCode: '2109600001',
- // stName: '市政府雨量站',
- // },
- // {
- // lonLat: '113.953921,30.901959',
- // p24: '10.1',
- // stCode: '2109600001',
- // stName: '市政府雨量站',
- // }
- // );
- let rainDataJson = getKrigingJson(data.rainSiteDistributionVOS);
- krigingJson.value.push(rainDataJson);
- });
- addKrigingLayer(krigingJson.value[0]);
- }
- };
- //获取雨量插值json
- const getKrigingJson = dataList => {
- if (!!!dataList.length) return;
- let features = [];
- dataList.forEach(element => {
- let feature = {
- type: 'Feature',
- geometry: {
- type: 'Point',
- coordinates: [Number(element.lonLat.split(',')[0]), Number(element.lonLat.split(',')[1])],
- },
- // properties: { value: element.p24, name: `${element.p24}mm`, label: element.p24 + `${element.p24}mm` },
- properties: { value: element.p24, name: `${element.p24}mm`, label: `${element.p24}mm` },
- };
- features.push(feature);
- });
- return {
- type: 'FeatureCollection',
- features: features,
- };
- };
- //地图添加降雨插值图
- const addKrigingLayer = geoJson => {
- let layerId = `kriging_layer`;
- let sourceId = `kriging_source`;
- let layerSymbolId = `krigingSymbol_layer`;
- let sourceSymbolId = `krigingSymbol_source`;
- let kriging = getKrigingByPoints(geoJson, bjBoundaryJson);
- !newfiberMapbox.map.getSource(sourceSymbolId) && newfiberMapbox.map.addSource(sourceSymbolId, { type: 'geojson', data: geoJson });
- !newfiberMapbox.map.getLayer(layerSymbolId) &&
- newfiberMapbox.map.addLayer({
- id: layerSymbolId,
- type: 'symbol',
- source: sourceSymbolId,
- layout: {
- 'text-field': '{label}',
- 'text-font': ['KlokanTech Noto Sans Regular'],
- 'text-size': 16,
- 'text-line-height': 3,
- 'text-anchor': 'bottom',
- 'text-max-width': 50,
- 'text-offset': [-2, 1],
- },
- paint: {
- 'text-color': '#ffffff',
- },
- });
- !newfiberMapbox.map.getSource(sourceId) && newfiberMapbox.map.addSource(sourceId, { type: 'geojson', data: kriging });
- !newfiberMapbox.map.getLayer(layerId) &&
- newfiberMapbox.map.addLayer({
- id: layerId,
- type: 'fill',
- source: sourceId,
- layout: {},
- paint: {
- 'fill-color': { type: 'identity', property: 'color' },
- 'fill-opacity': 0.6,
- },
- });
- };
- const intChart = () => {
- let waterBar = JSON.parse(JSON.stringify(optionChart.option2));
- waterEchart.value = proxy.echarts.init(document.getElementById('waterChar'));
- waterBar.graphic.invisible = true; // 暂无数据
- waterBar.series = [
- {
- name: '',
- type: 'bar',
- barWidth: '40%',
- data: Chartvalue.value.ylist,
- },
- ];
- waterBar.tooltip = {
- trigger: 'item',
- formatter: function (params, index) {
- // console.log('echarts', params, 'index', index);
- return '时间:' + params.name + '</br>' + '降雨量:' + params.data + 'mm';
- },
- };
- waterBar.xAxis = {
- type: 'category',
- data: Chartvalue.value.xlist,
- axisLabel: {
- color: '#c6c6c6',
- },
- axisLine: {
- lineStyle: {
- color: '#066592',
- },
- },
- };
- waterBar.dataZoom = [{ type: 'inside', startValue: Chartvalue.value.xlist[Chartvalue.value.xlist.length / 2] }];
- waterBar.yAxis.name = '单位: mm';
- waterEchart.value.clear();
- waterEchart.value.setOption(waterBar);
- };
-
- function timeChange() {
- let startDate = moment(datevalue.value).startOf('month').format('YYYY-MM-DD');
- let endDate = moment(datevalue.value).endOf('month').format('YYYY-MM-DD');
- let prams = {
- fromTime: startDate,
- toTime: endDate,
- };
- rainTimeDay(prams).then(res => {
- let datas = res.data;
- allData.scheduleData = datas;
- });
- }
-
- // 降雨日历点击事件
- const changepeople = time => {
- fromTime.value = time;
- let rainList = '';
- allData.scheduleData.map(element => {
- if (element.rainTime == time) {
- rainList = element;
- }
- });
- console.log(rainList.rainCumulative, 'rainCumulative', time);
- getRainDistribution(time);
- if (!rainList.rainCumulative || rainList.rainCumulative <= 0.0) {
- proxy.$modal.msgError('当日暂无降雨');
- } else {
- if (props.isCaleisnder !== 'calender2') {
- return;
- } else {
- allData.popupShow = true;
- dialogTitle.value = time + '降雨量';
- nextTick(() => {
- waterBarChartHM(rainList);
- }, 0);
- }
- }
- };
- function resizeTheChart() {
- waterEchart.value.resize();
- }
- onMounted(() => {
- timeChange();
- window.addEventListener('resize', resizeTheChart);
- });
- onBeforeUnmount(() => {
- if (newfiberMapbox.map.getLayer('kriging_layer')) {
- newfiberMapbox.map.removeLayer('kriging_layer');
- newfiberMapbox.map.removeLayer('krigingSymbol_layer');
- newfiberMapbox.map.removeSource('kriging_source');
- newfiberMapbox.map.removeSource('krigingSymbol_source');
- }
- });
- </script>
-
- <style lang="scss">
- @import '@/assets/styles/variables.module.scss';
- .monitorCalender {
- position: relative;
- .el-calendar {
- // height: 100%;
- border: none !important;
- background-color: rgba(1, 20, 49, 0.8);
- }
- .el-calendar-day {
- height: 25px !important;
- border: none;
- text-align: center;
- padding: 0px !important;
- background: #021532;
- font-size: 12px;
- }
- .el-calendar__header {
- padding: 5px 5px;
- }
- .el-calendar__body {
- height: 200px;
- padding: 0px !important;
- background: #021532;
- }
-
- .calender {
- .selectTitleHM {
- display: flex;
- align-items: center;
- justify-content: space-between;
- height: 45px;
- background: url('@/assets/images/setting/titleBg.png') no-repeat;
- background-size: 100% 100%;
- .name {
- font-family: YouSheBiaoTiHei;
- font-size: 22px;
- font-style: normal;
- font-weight: bold;
- line-height: normal;
- letter-spacing: 2px;
- color: #21adda;
- margin-left: 70px;
- background: linear-gradient(180deg, #fff 26.56%, #21adda 100%);
- background-clip: text;
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- }
- }
- .el-calendar {
- height: 180px;
- border: none !important;
- background-color: #00314e;
- }
- .el-calendar-day {
- height: 40px !important;
- border: none;
- text-align: center;
- padding: 0px !important;
- background: #00314e;
- font-size: 12px;
- }
- .el-calendar__body {
- height: 200px;
- padding: 0px !important;
- background: #00314e;
- }
- /* 日历单元格鼠标经过背景色 */
- .el-calendar-table .el-calendar-day:hover {
- background-color: #003f62 !important;
- }
- // #supervisePopupPK {
- // position: fixed;
- // left: 52%;
- // top: 70%;
- // transform: translate(-50%, -50%);
- // width: 420px;
- // height: 250px;
- // background: #004065;
- // border: 1px solid #114f89;
- // z-index: 2000;
- // }
- }
-
- .calender2 {
- .el-calendar {
- // height: 100%;
- border: none !important;
- background-color: rgba(1, 20, 49, 0.8);
- }
- .el-calendar-day {
- height: 25px !important;
- border: none;
- text-align: center;
- padding: 0px !important;
- background: #021532;
- font-size: 12px;
- }
- /* 日历单元格鼠标经过背景色 */
- .el-calendar-table .el-calendar-day:hover {
- background-color: #052351 !important;
- }
- }
- .el-calendar-table tr:first-child td,
- .el-calendar-table td,
- .el-calendar-table tr td:first-child {
- border: none;
- }
- .el-calendar-table {
- padding: 2px;
- }
- .is-selected {
- color: #1989fa;
- }
- //取消日历选中背景颜色
- .el-calendar-table td.is-selected {
- background-color: inherit;
- }
- /* 日历单元格鼠标经过背景色 */
- .el-calendar-table .el-calendar-day:hover {
- background-color: #052351 !important;
- }
- .datadiv {
- font-size: 10px;
- }
- .yellow {
- color: #ffeb3b;
- }
- .blue {
- color: #2196f3;
- }
- .dialogClass {
- position: fixed;
- top: 250px;
- width: 100vw;
- height: 500px;
- left: 0;
- }
- .el-calendar__header {
- display: none;
- }
- #supervisePopupPK {
- position: fixed;
- left: 52%;
- top: 19%;
- transform: translate(-50%, -50%);
- width: 360px;
- height: 210px;
- background: #021534;
- border: 1px solid #114f89;
- z-index: 2000;
- .titleTop {
- position: relative;
- height: 30px;
- padding-top: 8px;
- margin-left: 20px;
- }
- .closePopup {
- cursor: pointer;
- position: absolute;
- right: 12px;
- top: 50%;
- transform: translateY(-50%);
- color: #1096db;
- }
-
- .allContent {
- width: 360px;
- height: 180px;
- }
- .chartHeight {
- width: 360px;
- height: 180px;
- }
- }
- }
- </style>