- <template>
- <!-- 管网监测弹窗 -->
- <div class="supervisePopup" id="supervisePopup" 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" v-if="allData.dataList['onlineStatus']">
- <div class="contentName">在线状态:</div>
- <div class="contentValue">{{ allData.dataList['onlineStatus'] }}</div>
- </div>
- <div class="contentInfo" v-if="allData.dataList['groundElevation']">
- <div class="contentName">地面标高:</div>
- <div class="contentValue">{{ allData.dataList['groundElevation'] }}m</div>
- </div>
- <div class="contentInfo" v-if="allData.dataList['bottomBuriedDepth']">
- <div class="contentName">井底标高:</div>
- <div class="contentValue">{{ allData.dataList['bottomBuriedDepth'] }}m</div>
- </div>
- <div class="contentInfo" v-if="allData.dataList['sectionTypeMax']">
- <div class="contentName">管径:</div>
- <div class="contentValue">{{ allData.dataList['sectionTypeMax'] }}m</div>
- </div>
- <!-- <div class="contentInfo" v-if="allData.dataList['sectionType']">
- <div class="contentName">管径:</div>
- <div class="contentValue">{{ allData.dataList['sectionType'] }}m</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"
- @change="changeDate"
- style="width: 220px"
- /> -->
- <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: 120px" size="small" @change="changeSuperType">
- <el-option v-for="(item, index) in dataOption" :key="index" :label="item.label" :value="item.value" />
- </el-select>
- <div id="chartPopupSupervise" v-if="propertyMonitorXList.length > 0"></div>
- <!-- 暂无数据 -->
- <el-empty :image-size="80" v-if="propertyMonitorXList.length == 0" style="margin-top: 50px" />
- </div>
- </div>
- </div>
- </template>
-
- <script setup name="commonSupervisePopup">
- import bus from '@/bus';
- import chartOption from '@/components/Echarts/pieChart_1.js';
- import * as echarts from 'echarts';
- import { graphicReport } from '@/api/dataAnalysis/syntherticData';
- const { proxy } = getCurrentInstance();
- const allData = reactive({
- popupShow: false,
- currentIndex: 1,
- warnFormulaValue: '',
- dataTime1: proxy.moment(new Date()).subtract(3, 'days').format('YYYY-MM-DD'),
- dataTime2: proxy.moment(new Date()).format('YYYY-MM-DD'),
- // dataTime1: [proxy.moment().subtract(1, 'days').format('YYYY-MM-DD'), proxy.moment().format('YYYY-MM-DD')],
- dataList: {},
- });
- const dataOption = ref([]);
- const selectData = ref([]);
- const selectCode = ref('');
- const seleceName = ref('');
- const unitName = ref('');
- const propertyMonitorXList = ref([]);
-
- const dmgc = ref(''); //地面高程
- const gqgc = ref(''); //管顶高程
- const yjzhb = ref(''); //预警值带海拔
- const swdhb = ref(''); //水位带海拔
- const gdgc = ref(''); //管底高程
-
- 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: [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: [] });
- }
- };
- //时间格式化
- const getYearMonthDay = time => {
- return proxy.moment(time).format('YYYY-MM-DD');
- };
- const changeDate = () => {
- // allData.dataTime1 = [getYearMonthDay(allData.dataTime1[0]), getYearMonthDay(allData.dataTime1[1])];
-
- getSuperViseData();
- };
- function changeSuperType(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;
- allData.warnFormulaValue = '';
- if (Boolean(allData.dataList.siteWarnConfigList && allData.dataList.siteWarnConfigList.length) && seleceName.value) {
- let alist = JSON.parse(allData.dataList.siteWarnConfigList);
- alist.forEach(element => {
- if (element.warnFactorName.includes(seleceName.value)) {
- allData.warnFormulaValue = element.warnFormulaValue;
- }
- });
- }
- //如果是水位,则计算地面高程、管顶高程、预警值带海拔、水位带海拔、管底高程
-
- if (seleceName.value === '水位' && allData.dataList.groundElevation) {
- var testData = { ...allData.dataList };
- // testData.endCopNoseElevation = '25.004';
- // testData.endGroundDepth = '0.98';
-
- var test = calcValue({
- groundElevation: testData.groundElevation,
- endTopElevation: testData.endTopElevation,
- sectionTypeMax: testData.sectionTypeMax,
- warnFormulaValue: allData.warnFormulaValue,
- waterLevel: selectData.value,
- });
- dmgc.value = test.dmgc; //地面高程
- gqgc.value = test.gxgc; //管顶高程
- yjzhb.value = test.yjzdhb; //预警值带海拔
- swdhb.value = test.swdhb; //水位带海拔
- gdgc.value = test.gdgc; //管底高程
- } else {
- dmgc.value = ''; //地面高程
- gqgc.value = ''; //管顶高程
- yjzhb.value = ''; //预警值带海拔
- swdhb.value = ''; //水位带海拔
- gdgc.value = ''; //管底高程
- }
- setTimeout(() => {
- initEcharts1();
- });
- }
-
- /**
- * 处理数字,若是NaN则返回空字符串,否则返回保留两位小数的字符串
- * @param {string} val
- */
- function stringToNumberFixed(val) {
- return isNaN(val) ? '' : val.toFixed(2);
- }
- /**
- * 计算地面高程、管顶高程、预警值带海拔、水位带海拔、管底高程
- * @param {*} posinfoData
- */
- function calcValue(posinfoData) {
- var {
- groundElevation,
- endTopElevation,
- sectionTypeMax,
- // 水位
- waterLevel,
- // 预警值
- warnFormulaValue,
- } = posinfoData;
- // console.log('testtesttesttesttest', groundElevation, endTopElevation, sectionTypeMax, waterLevel, warnFormulaValue);
- // 地面高程 groundElevation
- // 管顶高程 endTopElevation
- // 预警值带海拔 endTopElevation-sectionTypeMax+预警值
- // 水位带海拔 endTopElevation-sectionTypeMax+水位
- // 管底高程 endTopElevation-sectionTypeMax
-
- var gxgc = parseFloat(endTopElevation);
- var tempVal = gxgc - parseFloat(sectionTypeMax);
- return {
- // 地面高程
- dmgc: stringToNumberFixed(parseFloat(groundElevation)),
- // 管顶高程
- gxgc: stringToNumberFixed(gxgc),
- // 预警值带海拔
- yjzdhb: warnFormulaValue ? stringToNumberFixed(tempVal + parseFloat(warnFormulaValue)) : '',
- // 水位带海拔
- swdhb: waterLevel.map(item => stringToNumberFixed(tempVal + parseFloat(item))),
- // 管底高程
- gdgc: stringToNumberFixed(tempVal),
- };
- }
- //获取监测数据
- const getSuperViseData = async () => {
- let params = {
- startTime: allData.dataTime1,
- endTime: allData.dataTime2,
- // startTime: '2024-01-01',
- // endTime: '2024-01-02',
- stCode: allData.dataList['stCode'] || allData.dataList['站点编码'],
- };
- dataOption.value = [];
- let res = await graphicReport(params);
- if (res && res.code == 200) {
- let datas = res.data;
- datas.propertyMonitorList.map(item => {
- dataOption.value.push({
- value: item.stCode + item.monitorPropertyName,
- label: item.monitorPropertyName,
- propertyUnit: item.propertyUnit,
- ylist: item.ylist,
- });
- });
- propertyMonitorXList.value = datas.propertyMonitorXList;
- if (datas.propertyMonitorXList.length == 0) return;
- selectCode.value = dataOption.value[0].value;
- seleceName.value = dataOption.value[0].label;
- unitName.value = dataOption.value[0].propertyUnit;
- selectData.value = dataOption.value[0].ylist;
- if (Boolean(allData.dataList.siteWarnConfigList && allData.dataList.siteWarnConfigList.length) && seleceName.value) {
- let alist = JSON.parse(allData.dataList.siteWarnConfigList);
- alist.forEach(element => {
- if (element.warnFactorName.includes(seleceName.value)) {
- allData.warnFormulaValue = element.warnFormulaValue;
- }
- });
- }
- //如果是水位,则计算地面高程、管顶高程、预警值带海拔、水位带海拔、管底高程
-
- if (seleceName.value === '水位' && allData.dataList.groundElevation) {
- var testData = { ...allData.dataList };
- var test = calcValue({
- groundElevation: testData.groundElevation,
- endTopElevation: testData.endTopElevation,
- sectionTypeMax: testData.sectionTypeMax,
- warnFormulaValue: allData.warnFormulaValue,
- waterLevel: selectData.value,
- });
- dmgc.value = test.dmgc; //地面高程
- gqgc.value = test.gxgc; //管顶高程
- yjzhb.value = test.yjzdhb; //预警值带海拔
- swdhb.value = test.swdhb; //水位带海拔
- gdgc.value = test.gdgc; //管底高程
- } else {
- chartOption.floodOneMapPipewater.series[1].data = [];
- chartOption.floodOneMapPipewater.series[1].markLine = '';
- }
- setTimeout(() => {
- initEcharts1();
- });
- }
- };
- //管网监测趋势图
- let chartPopupSup = null;
- const initEcharts1 = () => {
- if (!!chartPopupSup) chartPopupSup.dispose();
- chartPopupSup = echarts.init(document.getElementById('chartPopupSupervise'));
- chartOption.floodOneMapPipewater.legend.data = [seleceName.value];
- (chartOption.floodOneMapPipewater.yAxis[0] = {
- name: 'SS(mg/l)',
- type: 'value',
- textStyle: {
- color: '#00D1FF',
- },
- axisLine: {
- show: false,
- lineStyle: {
- color: '#00D1FF', //刻度线的颜色
- },
- },
- splitLine: {
- //x网格样式
- show: true,
- lineStyle: {
- color: '#00D1FF',
- type: 'dashed',
- },
- },
- }),
- (chartOption.floodOneMapPipewater.yAxis[0].name = unitName.value);
- chartOption.floodOneMapPipewater.yAxis[1].name = '';
-
- // chartOption.floodOneMapPipewater.xAxis[0].data = propertyMonitorXList.value;
- chartOption.floodOneMapPipewater.xAxis[0].data = [];
- if (Boolean(propertyMonitorXList.value.length)) {
- propertyMonitorXList.value.forEach(i => {
- chartOption.floodOneMapPipewater.xAxis[0].data.push(i.substr(0, 16));
- });
- }
- chartOption.floodOneMapPipewater.series[0].name = seleceName.value;
- chartOption.floodOneMapPipewater.series[0].data = selectData.value;
- chartOption.floodOneMapPipewater.series[1].data = [];
- chartOption.floodOneMapPipewater.series[0].markLine = {
- symbol: 'none',
- label: {
- show: !!allData.warnFormulaValue,
- position: 'middle',
- formatter: seleceName.value + '警戒值:{c}',
- color: 'red',
- fontWeight: 'bold',
- },
- lineStyle: {
- color: 'red',
- width: 2,
- type: 'solid',
- },
- data: [
- {
- name: '警戒值',
- yAxis: allData.warnFormulaValue,
- },
- ],
- };
- if (seleceName.value === '水位' && swdhb.value) {
- chartOption.floodOneMapPipewater.series[0].data = swdhb.value;
- chartOption.floodOneMapPipewater.series[0].name = '水位';
- chartOption.floodOneMapPipewater.legend.data = ['水位'];
-
- chartOption.floodOneMapPipewater.series[0].markLine = {
- symbol: 'none', //去掉警戒线最后面的箭头
- label: {
- position: 'end', //将警示值放在哪个位置,三个值“start”,"middle","end" 开始 中点 结束
- },
- data: [
- {
- silent: false, //鼠标悬停事件 true没有,false有
- lineStyle: {
- //警戒线的样式 ,虚实 颜色
- type: 'dashed',
- color: '#80c342',
- },
- name: '地面标高',
- yAxis: dmgc.value,
- label: {
- formatter: '地面标高',
- color: '#80c342',
- rotate: 40,
- },
- },
- {
- silent: false, //鼠标悬停事件 true没有,false有
- lineStyle: {
- //警戒线的样式 ,虚实 颜色
- type: 'dashed',
- color: '#4d90fe',
- },
- name: '管顶标高',
- yAxis: gqgc.value,
- label: {
- formatter: '管顶标高',
- color: '#4d90fe',
- rotate: 40,
- },
- },
- {
- silent: false, //鼠标悬停事件 true没有,false有
- lineStyle: {
- //警戒线的样式 ,虚实 颜色
- type: 'dashed',
- color: '#e94242',
- },
- name: '管底标高',
- yAxis: gdgc.value,
- label: {
- formatter: '管底标高',
- color: '#e94242',
- rotate: 40,
- },
- },
- ],
- };
- chartOption.floodOneMapPipewater.yAxis[0] = {
- type: 'value',
- name: '单位(m)',
- nameTextStyle: {
- //y轴上方单位的颜色
- color: '#00d1ff',
- },
- axisLabel: {
- textStyle: {
- color: '#00d1ff', // 设置 y 轴标签文字的颜色为绿色
- },
- },
- max: parseFloat(dmgc.value) + 2,
- min: stringToNumberFixed(gdgc.value - parseFloat(gdgc.value) * 0.05),
- axisLine: {
- show: false,
- },
- axisTick: {
- show: false,
- },
- splitLine: {
- show: false,
- },
- };
- }
- // 设置鼠标滚轮放大缩小展示数据区间
- chartOption.floodOneMapPipewater.dataZoom = [
- { type: 'inside', startValue: propertyMonitorXList.value[propertyMonitorXList.value.length / 2] },
- ];
- if (propertyMonitorXList.value.length > 0) {
- chartOption.floodOneMapPipewater.graphic.invisible = true; //暂无数据
- } else {
- chartOption.floodOneMapPipewater.graphic.invisible = false; //暂无数据
- }
- console.log(chartOption.floodOneMapPipewater, 9999999);
- chartPopupSup.clear();
- chartPopupSup.setOption(chartOption.floodOneMapPipewater);
- };
- onMounted(() => {
- bus.on('closeCommonPopup', closeCommonPopup => {
- allData.popupShow = closeCommonPopup;
- });
- bus.on('popupSuperviseData', data => {
- allData.popupShow = data.popupShow;
- allData.dataList = data.popupInfo;
- if (!!chartPopupSup) chartPopupSup.dispose();
- selectCode.value = '';
- seleceName.value = '';
- getSuperViseData();
- });
- });
- onBeforeUnmount(() => {
- bus.off('popupSuperviseData');
- bus.off('closeCommonPopup');
- });
- </script>
- <style lang="scss">
- .supervisePopup {
- 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;
- #chartPopupSupervise {
- width: 90%;
- height: 300px;
- margin-top: 20px;
- }
- }
- }
- }
- </style>