- <template>
- <!-- 河道监测弹窗 -->
- <div class="riverPopup" id="riverPopup" 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="daterange"
- start-placeholder="开始时间"
- end-placeholder="结束时间"
- size="small"
- style="width: 220px; margin-left: 50px"
- @change="changeDate"
- /> -->
- <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"
- />
- <div id="chartPopupRiver"></div>
- </div>
- </div>
- </div>
- </template>
-
- <script setup name="commonZSPopup">
- import bus from '@/bus';
- import { graphicReport } from '@/api/dataAnalysis/syntherticData';
- import chartOption from '@/components/Echarts/pieChart_1.js';
- import * as echarts from 'echarts';
-
- const { proxy } = getCurrentInstance();
- const allData = reactive({
- popupShow: false,
- dataTime1: proxy.moment(new Date()).subtract(3, 'days').format('YYYY-MM-DD'),
- dataTime2: proxy.moment(new Date()).format('YYYY-MM-DD'),
- systemType: null,
- dataList: {},
- });
-
- const closePopup = () => {
- allData.popupShow = false;
- allData.dataTime1 = proxy.moment(new Date()).subtract(3, 'days').format('YYYY-MM-DD');
- allData.dataTime2 = proxy.moment(new Date()).format('YYYY-MM-DD');
- newfiberMapbox.map.easeTo({
- center: [113.953, 30.906],
- zoom: 13.6,
- 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: [] });
- }
- };
- //时间格式化
- const getYearMonthDay = time => {
- return proxy.moment(time).format('YYYY-MM-DD');
- };
- const changeDate = () => {
- getSuperViseData();
- };
- //获取监测数据
- const getSuperViseData = async () => {
- let params = {
- startTime: allData.dataTime1,
- endTime: allData.dataTime2,
- stCode: allData.dataList['stCode'] || allData.dataList['站点编码'],
- };
- let res = await graphicReport(params);
- if (res && res.code == 200) {
- let datas = res.data;
- chartOption.popupTrendRiver.xAxis.data = [];
- if (Boolean(datas.propertyMonitorXList.length)) {
- datas.propertyMonitorXList.forEach(i => {
- chartOption.popupTrendRiver.xAxis.data.push(i.substr(0, 16));
- });
- }
- if (datas.propertyMonitorXList.length > 0) {
- chartOption.popupTrendRiver.graphic.invisible = true; //暂无数据
- } else {
- chartOption.popupTrendRiver.graphic.invisible = false; //暂无数据
- }
- if (datas.propertyMonitorList.length > 0) {
- chartOption.popupTrendRiver.series.data = datas.propertyMonitorList.filter(item => item.monitorPropertyName == '水位')[0].ylist;
- } else {
- chartOption.popupTrendRiver.series.data = [];
- }
- // 设置鼠标滚轮放大缩小展示数据区间
- chartOption.popupTrendRiver.dataZoom = [
- { type: 'inside', startValue: datas.propertyMonitorXList[datas.propertyMonitorXList.length / 2] },
- ];
- initEchartsPopup();
- }
- };
- // 积水点势折线图
- let chartPopupRiver = null;
- const initEchartsPopup = () => {
- if (!!chartPopupRiver) chartPopupRiver.dispose();
- chartPopupRiver = echarts.init(document.getElementById('chartPopupRiver'));
- chartPopupRiver.clear();
- chartPopupRiver.setOption(chartOption.popupTrendRiver);
- };
-
- onMounted(() => {
- bus.on('closeCommonPopup', closeCommonPopup => {
- allData.popupShow = closeCommonPopup;
- });
- bus.on('popupRiverData', data => {
- allData.popupShow = data.popupShow;
- allData.dataList = data.popupInfo;
- getSuperViseData();
- });
- });
- onBeforeUnmount(() => {
- bus.off('popupRiverData');
- bus.off('closeCommonPopup');
- });
- </script>
- <style lang="scss">
- .riverPopup {
- width: 748px;
- height: 476px;
- background-image: url('@/assets/newImgs/layer1.png');
- background-size: 100% 100%;
- z-index: 115;
- position: absolute;
- top: 80px;
- left: 330px;
- .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: 450px;
- #chartPopupRiver {
- width: 95%;
- height: 300px;
- margin-top: 10px;
- }
- }
- }
- }
- </style>