diff --git a/src/views/pictureOnMap/page/components/DialogTabs/component/MonitoringAnalysisChart.vue b/src/views/pictureOnMap/page/components/DialogTabs/component/MonitoringAnalysisChart.vue index bc959e2..fe2802c 100644 --- a/src/views/pictureOnMap/page/components/DialogTabs/component/MonitoringAnalysisChart.vue +++ b/src/views/pictureOnMap/page/components/DialogTabs/component/MonitoringAnalysisChart.vue @@ -51,6 +51,10 @@ refresh: { type: Number, }, + XnameTop:{ + type: String, + default: () => '-190', + } }); watch( @@ -67,6 +71,7 @@ ); function init() { + console.log('XnameTop',props.XnameTop); let position = ["insideStartTop", "insideMiddleTop", "insideEndBottom"]; myChart.value = echarts.init(document.getElementById(id)); let colorarr = ['#409eff', '#0ba47b', '#a34a5e', '#dac16f']; @@ -236,7 +241,7 @@ name: props.typeName, nameTextStyle: { fontSize: nowSize(12,1920), - padding: [nowSize(-200, 1920), 0, 0,nowSize(90, 1920)], + padding: [nowSize(props.XnameTop, 1920), 0, 0,nowSize(90, 1920)], }, type: 'value', diff --git a/src/views/pictureOnMap/page/components/DialogTabs/component/MonitoringAnalysisChart.vue b/src/views/pictureOnMap/page/components/DialogTabs/component/MonitoringAnalysisChart.vue index bc959e2..fe2802c 100644 --- a/src/views/pictureOnMap/page/components/DialogTabs/component/MonitoringAnalysisChart.vue +++ b/src/views/pictureOnMap/page/components/DialogTabs/component/MonitoringAnalysisChart.vue @@ -51,6 +51,10 @@ refresh: { type: Number, }, + XnameTop:{ + type: String, + default: () => '-190', + } }); watch( @@ -67,6 +71,7 @@ ); function init() { + console.log('XnameTop',props.XnameTop); let position = ["insideStartTop", "insideMiddleTop", "insideEndBottom"]; myChart.value = echarts.init(document.getElementById(id)); let colorarr = ['#409eff', '#0ba47b', '#a34a5e', '#dac16f']; @@ -236,7 +241,7 @@ name: props.typeName, nameTextStyle: { fontSize: nowSize(12,1920), - padding: [nowSize(-200, 1920), 0, 0,nowSize(90, 1920)], + padding: [nowSize(props.XnameTop, 1920), 0, 0,nowSize(90, 1920)], }, type: 'value', diff --git a/src/views/pictureOnMap/page/components/DialogTabs/component/guanlianjianceHeHu.vue b/src/views/pictureOnMap/page/components/DialogTabs/component/guanlianjianceHeHu.vue index 973ab07..34deecd 100644 --- a/src/views/pictureOnMap/page/components/DialogTabs/component/guanlianjianceHeHu.vue +++ b/src/views/pictureOnMap/page/components/DialogTabs/component/guanlianjianceHeHu.vue @@ -33,13 +33,11 @@ 搜索 -
- + @@ -58,7 +56,22 @@ @current-change="handleCurrentChange" />
- + --> +
+ +
@@ -67,7 +80,9 @@ import { Search } from "@element-plus/icons-vue"; import { siteHistoryMonitorDataAnalysis } from '@/api/FloodControlAndDrainage'; -import { getRELAList } from '@/api/MonitorAssetsOnMap'; +import { getRELAList,getEchart } from '@/api/MonitorAssetsOnMap'; +import MonitoringAnalysisChart from './MonitoringAnalysisChart.vue'; + import moment from 'moment'; const { proxy } = getCurrentInstance(); @@ -107,7 +122,7 @@ function searchFun(){ Search_form.query.pageNum=1 Search_form.query.pageSize=10 - getTableList() + getDataEchart() } const tabGLClick=(e)=>{ activeValue.value=e.value @@ -123,7 +138,8 @@ AllData.paikou=res.data if(res.data?.length>0){ Search_form.stCode=res.data?.[0].stCode - getTableList() + // getTableList() + getDataEchart() } } @@ -161,6 +177,137 @@ console.log(Search_form.query); getTableList() }; +const chartInfo2=ref({ + refresh: 1, + // DataName: "", + XAxis: [ + + ], + typeName: '5分钟降雨量(mm)', + typeName2: '水深(m)', + YAxis: [], + YAxis2: [], + loading: false, + marklineJYL:[], + marklineSS:[], +}) + let isEchart=ref(false) + let loadingEchart=ref(false) +function getDataEchart(){ + loadingEchart.value=true + let params={ + + stType:props.Getproperties.stType, + stCode:Search_form.stCode, + start:Search_form.Timers[0], + end:Search_form.Timers[1], + } + console.log('params',params); + getEchart(params).then(res => { + isEchart.value=true + + let res1={ + "code":200, + "msg":"操作成功", + "data":{ + "datas":[ + { + "dataKey":"z", + "dataName":"黄海水位", + "unit":"(m)", + "datas":['0','0','1','0','2','0.5','0','0','0','0.2'], + "cordonLineList":[ + { + "id":"1856620587907244131", + "cordonId":"1856647503229968394", + "lineName":"正常蓄水位", + "lineValue":"1.3", + "lineType":"2", + "lineColor":"rgba(0, 255, 68, 1)", + "systemDefault":"0", + "code":"normal_water_level", + "stConfig":"z", + "calcType":"2", + "relateRainSiteSt":"4201110002" + }, + { + "id":"1856620587932409132", + "cordonId":"1856647503229968394", + "lineName":"设计洪水位", + "lineValue":"1.8", + "lineType":"1", + "lineColor":"rgba(221, 255, 0, 1)", + "systemDefault":"0", + "code":"design_flood_level", + "stConfig":"z", + "calcType":"2", + "relateRainSiteSt":"4201110002" + }, + { + "id":"1856620587936604135", + "cordonId":"1856647503229968394", + "lineName":"校核洪水位", + "lineValue":"1.98", + "lineType":"1", + "lineColor":"rgba(255, 191, 0, 1)", + "systemDefault":"0", + "code":"verify_flood_level", + "stConfig":"z", + "calcType":"2", + "relateRainSiteSt":"4201110002" + }, + { + "id":"1856620587936604134", + "cordonId":"1856647503229968394", + "lineName":"坝顶高程", + "lineValue":"2.8", + "lineType":"1", + "lineColor":"rgba(255, 81, 0, 1)", + "systemDefault":"0", + "code":"dam_hight", + "stConfig":"z", + "calcType":"2", + "relateRainSiteSt":"4201110002" + } + ] + }, + { + "dataKey":"pn05", + "dataName":"降雨量", + "unit":"mm", + "datas":['10','5','11','2','2','20','15','0','0','0.2'], + "cordonLineList":[ + + ] + } + ], + "times":['1732291200000','1732291200000','1732291800000','1732292100000','1732292400000','1732292700000','1732293000000','1732293300000','1732293600000','1732293900000',] + } +} + console.log('监测分析统计res',res); + loadingEchart.value=false + + if (res && res.code == 200) { + let data=res.data + let pn05Arr= data.datas.find(item => item.dataKey == 'pn05')||[] //降雨 + let zArr= data.datas.find(item => item.dataKey == 'z')||[] //水深 + if(pn05Arr){ + chartInfo2.value.YAxis=pn05Arr.datas + chartInfo2.value.marklineJYL=pn05Arr.cordonLineList + } + if(zArr){ + chartInfo2.value.YAxis2=zArr.datas + chartInfo2.value.marklineSS=zArr.cordonLineList + } + + chartInfo2.value.XAxis=data.times + // console.log('chartInfo2123',chartInfo2.value); + chartInfo2.value.refresh = Math.random(); + } + },(error)=>{ + loadingEchart.value=false + }) +} onMounted(() => { console.log('props.Getproperties.id',props.Getproperties); getpaikouData() @@ -227,7 +374,10 @@ color: #fff; } } - + .ChartHeight { + width: 100%; + height: 550px; + } }