- <template>
- <!-- 降雨量弹窗 -->
- <div class="jyPopup" id="jyPopup" v-show="allData.popupShow">
- <div class="title">
- <div class="titleName">{{ allData.dataList['stName'] }}</div>
- <div class="closePopup">
- <el-icon :size="18" @click="closePopup"><Close /></el-icon>
- </div>
- </div>
- <div class="allContent">
- <div class="basicInfo">
- <div class="basicContent">
- <div class="contentInfo">
- <div class="contentName">站点编码:</div>
- <div class="contentValue">{{ allData.dataList['stCode'] }}</div>
- </div>
- <div class="contentInfo" v-if="allData.dataList['address']">
- <div class="contentName">安装地址:</div>
- <div class="contentValue" :title="allData.dataList['address']">
- {{ allData.dataList['address'] }}
- </div>
- </div>
- <div class="contentInfo">
- <div class="contentName">站点经度:</div>
- <div class="contentValue">{{ allData.dataList['lon'] }}</div>
- </div>
- <div class="contentInfo">
- <div class="contentName">站点纬度:</div>
- <div class="contentValue">{{ allData.dataList['lat'] }}</div>
- </div>
- <div class="contentInfo">
- <div class="contentName">在线状态:</div>
- <div class="contentValue">{{ allData.dataList['onlineStatus'] }}</div>
- </div>
- </div>
- <el-image
- v-if="allData.dataList['coverPhotosFileList']"
- :src="allData.dataList['coverPhotosFileList'][0]"
- :preview-src-list="srcList"
- style="padding-left: 50px"
- />
- </div>
- <div class="dividerLine"></div>
- <div class="trend">
- <el-date-picker
- v-model="allData.dataTime1"
- type="date"
- value-format="YYYY-MM-DD"
- start-placeholder="开始时间"
- end-placeholder="结束时间"
- size="small"
- style="width: 120px; margin-left: 10px"
- @change="changeDate"
- />
- -
- <el-date-picker
- v-model="allData.dataTime2"
- type="date"
- value-format="YYYY-MM-DD"
- start-placeholder="开始时间"
- end-placeholder="结束时间"
- size="small"
- style="width: 120px"
- @change="changeDate"
- />
- <el-select v-model="selectCode" style="margin: 0px 0px 0px 10px; width: 155px" size="small" @change="changeRainType">
- <el-option v-for="item in dataOption" :key="item.value" :label="item.label" :value="item.value" />
- </el-select>
- <div id="chartPopupRain"></div>
- </div>
- </div>
- </div>
- </template>
-
- <script setup name="commonRainPopup">
- import bus from '@/bus';
- import chartOption from '@/components/Echarts/pieChart_1.js';
- import * as echarts from 'echarts';
- import { graphicReport } from '@/api/dataAnalysis/syntherticData';
- import { getImageUrl } from '@/utils/ruoyi';
-
- const { proxy } = getCurrentInstance();
- const allData = reactive({
- popupShow: false,
- currentIndex: 1,
- dataTime1: proxy.moment(new Date()).subtract(3, 'days').format('YYYY-MM-DD'),
- dataTime2: proxy.moment(new Date()).format('YYYY-MM-DD'),
- tabList: [
- {
- index: 1,
- name: '基础信息',
- },
- {
- index: 2,
- name: '数据监测',
- },
- ],
- dataList: {},
- });
- const srcList = ref([getImageUrl('tiaoxuchi.png', 'newImgs/paishuiImgs')]);
- const dataOption = ref([]);
- const selectData = ref([]);
- const selectCode = ref('');
- const seleceName = ref('');
- const unitName = ref('');
- const propertyMonitorXList = ref([]);
-
- //时间格式化
- const getYearMonthDay = time => {
- return proxy.moment(time).format('YYYY-MM-DD HH:mm:ss');
- };
- const changeDate = () => {
- // allData.dataTime1 = [getYearMonthDay(allData.dataTime1[0]), getYearMonthDay(allData.dataTime1[1])];
- getSuperViseData();
- };
-
- const closePopup = () => {
- allData.dataTime1 = proxy.moment(new Date()).subtract(3, 'days').format('YYYY-MM-DD');
- allData.dataTime2 = proxy.moment(new Date()).format('YYYY-MM-DD');
- allData.popupShow = false;
- newfiberMapbox.map.easeTo({
- center: [114.312, 34.802],
- zoom: 12.9,
- pitch: 55,
- });
- let clearSelectedFeature = [];
- newfiberMapbox.getLayers().forEach(feature => {
- if (feature.newfiberId == 'highlight_point') {
- clearSelectedFeature.push(feature);
- }
- });
-
- if (!!clearSelectedFeature.length) {
- clearSelectedFeature[0].setData({ type: 'FeatureCollection', features: [] });
- }
- };
- // 降雨趋势折线图
- let chartPopupRain = null;
- const initEchartsPopup = () => {
- if (!!chartPopupRain) chartPopupRain.dispose();
- chartPopupRain = echarts.init(document.getElementById('chartPopupRain'));
- chartOption.popupRainTrend.legend.data = [seleceName.value];
- chartOption.popupRainTrend.yAxis.name = unitName.value;
- chartOption.popupRainTrend.xAxis.data = propertyMonitorXList.value;
- chartOption.popupRainTrend.series.name = seleceName.value;
- chartOption.popupRainTrend.series.data = selectData.value;
- // 设置鼠标滚轮放大缩小展示数据区间
- chartOption.popupRainTrend.dataZoom = [{ type: 'inside', startValue: propertyMonitorXList.value[propertyMonitorXList.value.length / 2] }];
- if (propertyMonitorXList.value.length > 0) {
- chartOption.popupRainTrend.graphic.invisible = true; //暂无数据
- } else {
- chartOption.popupRainTrend.graphic.invisible = false; //暂无数据
- }
- chartPopupRain.clear();
- chartPopupRain.setOption(chartOption.popupRainTrend);
- };
- // 切换因子点击
- const changeRainType = val => {
- selectCode.value = val;
- let obj = dataOption.value.filter(item => item.value == val)[0];
- selectCode.value = obj.value;
- seleceName.value = obj.label;
- unitName.value = obj.propertyUnit;
- selectData.value = obj.ylist;
- initEchartsPopup();
- };
- //获取监测数据
- const getSuperViseData = async () => {
- let params = {
- startTime: allData.dataTime1,
- endTime: allData.dataTime2,
- stCode: allData.dataList['stCode'] || allData.dataList['站点编码'],
- };
- dataOption.value = [];
- let res = await graphicReport(params);
- if (res && res.code == 200) {
- let datas = res.data;
- if (datas.propertyMonitorXList.length == 0) return;
- datas.propertyMonitorList.map(item => {
- dataOption.value.push({
- value: item.stCode + item.monitorPropertyName,
- label: item.monitorPropertyName,
- propertyUnit: item.propertyUnit,
- ylist: item.ylist,
- });
- });
- if (Boolean(datas.propertyMonitorXList.length)) {
- propertyMonitorXList.value = [];
- datas.propertyMonitorXList.forEach(i => {
- propertyMonitorXList.value.push(i.substr(0, 16));
- });
- }
- selectCode.value = dataOption.value[0].value;
- seleceName.value = dataOption.value[0].label;
- // propertyMonitorXList.value = datas.propertyMonitorXList;
- unitName.value = datas.propertyMonitorList[0].propertyUnit;
- selectData.value = datas.propertyMonitorList[0].ylist;
- initEchartsPopup();
- }
- };
- onMounted(() => {
- bus.on('closeCommonPopup', closeCommonPopup => {
- allData.popupShow = closeCommonPopup;
- });
- bus.on('popupRainData', data => {
- allData.popupShow = data.popupShow;
- allData.dataList = data.popupInfo;
- getSuperViseData();
- });
- });
- onBeforeUnmount(() => {
- bus.off('popupRainData');
- bus.off('closeCommonPopup');
- });
- </script>
- <style lang="scss">
- .jyPopup {
- width: 748px;
- height: 476px;
- background-image: url('@/assets/newImgs/layer1.png');
- background-size: 100% 100%;
- z-index: 1150;
- position: absolute;
- top: 80px;
- left: 530px;
- .title {
- padding-top: 30px;
- display: flex;
- align-items: center;
- justify-content: space-between;
- .titleName {
- display: flex;
- align-items: center;
- height: 22px;
- font-size: 16px;
- font-family: PingFang SC;
- font-weight: 400;
- color: #ccf1ff;
- line-height: 22px;
- padding-left: 80px;
- &:before {
- display: block;
- content: '';
- width: 3px;
- height: 16px;
- background: #00d1ff;
- margin-right: 10px;
- }
- }
- .closePopup {
- padding-right: 40px;
- height: 22px;
- cursor: pointer;
- }
- }
-
- .allContent {
- display: flex;
- .basicInfo {
- width: 270px;
- margin-top: 10px;
- .basicContent {
- .contentInfo {
- display: flex;
- align-items: center;
- padding-left: 80px;
- .contentName {
- margin: 3px;
- height: 20px;
- width: 70px;
- font-size: 14px;
- font-weight: 400;
- line-height: 20px;
- color: #00d1ff;
- }
- .contentValue {
- height: 20px;
- width: 100px;
- font-size: 14px;
- font-weight: 400;
- line-height: 20px;
- color: #00d1ff;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
- }
- }
- }
- .dividerLine {
- width: 3px;
- height: 350px;
- position: absolute;
- left: 250px;
- border: 1px;
- background: linear-gradient(90deg, rgba(0, 115, 165, 0) 0.79%, #0073a5 20.43%, #0073a5 82.43%, rgba(0, 115, 165, 0) 100%);
- }
- .trend {
- width: 100%;
- #chartPopupRain {
- width: 85%;
- height: 300px;
- margin-top: 10px;
- margin-left: 20px;
- }
- }
- }
- }
- </style>