GitBucket
Newer
<template>
<!-- 关联监测 -->
<div class="guanlianjianceHeHu flex">
<!-- <div class="leftBtn flex flex-v flex-justcontent-spacearound">
<div class="btnClass" :class="item.value==activeValue?'activeBtn':'' " v-for="(item) in tabList" :key="item.value" @click="tabGLClick(item)">{{item.label}}</div>
</div> -->
<div class="flex-1 GLJCform">
<el-form :model="Search_form" label-width="auto" :inline="true">
<el-form-item label="监测点">
<el-select v-model="Search_form.stCode" @change="searchFun">
<el-option
v-for="item in AllData.paikou"
:key="item.stCode"
:label="item.stName"
:value="item.stCode"
/>
</el-select>
</el-form-item>
<el-form-item label="监测时间">
<el-date-picker @change="searchFun"
v-model="Search_form.Timers"
type="datetimerange"
range-separator="至"
:clearable="false"
format="YYYY-MM-DD HH:mm"
value-format="YYYY-MM-DD HH:mm"
start-placeholder="开始时间"
end-placeholder="结束时间"
/>
</el-form-item>
<el-form-item>
<el-button color="#0B9BFF" :icon="Search" @click="searchFun">搜索</el-button>
</el-form-item>
</el-form>
<!-- <div class="popUpTable" v-loading="loading"
element-loading-background="rgba(11, 18, 52, 0.3)">
<el-table :data="AllData.tableData" class="" stripe>
<el-table-column prop="tt" label="观测时间">
</el-table-column>
<el-table-column prop="zvalue" label="水位(m)" />
<el-table-column prop="time" label="水位趋势">
<template #default="scope">
<div v-html="scope.row.zvalueTrend"></div>
</template>
</el-table-column>
<el-table-column prop="zamplitude" label="幅度" />
</el-table>
<div class="paginationBox">
<el-pagination v-if="Search_form.query.total>0"
layout="total, sizes, prev, pager, next, jumper"
:page-size="Search_form.query.pageSize"
:total="Search_form.query.total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</div> -->
<div class="ChartHeight" v-loading="loadingEchart"
element-loading-background="rgba(11, 18, 52, 0.3)">
<MonitoringAnalysisChart v-if="isEchart" :refresh="chartInfo2.refresh"
:DataName="chartInfo2.DataName"
:XAxis="chartInfo2.XAxis"
:YAxis="chartInfo2.YAxis"
:typeName="chartInfo2.typeName"
:typeName2="chartInfo2.typeName2"
:YAxis2="chartInfo2.YAxis2"
:marklineJYL="chartInfo2.marklineJYL"
:marklineSS="chartInfo2.marklineSS"
XnameTop="-480"
/>
</div>
</div>
</div>
</template>
<script setup name="guanlianjianceHeHu">
import {ref,reactive,onMounted} from "vue"
import { Search } from "@element-plus/icons-vue";
import { siteHistoryMonitorDataAnalysis } from '@/api/FloodControlAndDrainage';
import { getRELAList,getEchart } from '@/api/MonitorAssetsOnMap';
import MonitoringAnalysisChart from './MonitoringAnalysisChart.vue';
import moment from 'moment';
const { proxy } = getCurrentInstance();
const props = defineProps({
Getproperties:{
type: Object,
}
});
const loading=ref(false)
const activeValue=ref('SW')
const tabList=ref([
{
label:'河湖水位监测',
value:'SW'
},
// {
// label:'河湖水质监测',
// value:'SZ'
// },
])
const AllData = reactive({
paikou:[],
tableData:[]
})
const Search_form = reactive({
stCode: "",
Timers: [
moment().subtract(3, "day").format("YYYY-MM-DD HH:mm:ss"),
moment().format("YYYY-MM-DD HH:mm:ss"),
],
query: {
pageNum: 1,
pageSize: 10,
total: 0,
},
});
function searchFun(){
Search_form.query.pageNum=1
Search_form.query.pageSize=10
getDataEchart()
}
const tabGLClick=(e)=>{
activeValue.value=e.value
}
// 获取对应排口
function getpaikouData(){
let params={
dataCode:'lake_info',
dataId:props.Getproperties.id
}
getRELAList(params).then(res => {
if (res && res.code == 200) {
AllData.paikou=res.data
if(res.data?.length>0){
Search_form.stCode=res.data?.[0].stCode
// getTableList()
getDataEchart()
}
}
})
}
function getTableList(){
loading.value=true
let params={
stCode:Search_form.stCode,
// stCode:'0201460310',
startTime:Search_form.Timers[0],
endTime:Search_form.Timers[1],
pageSize:Search_form.query.pageSize,
pageNum:Search_form.query.pageNum,
}
siteHistoryMonitorDataAnalysis(params).then(res => {
loading.value=false
if (res && res.code == 200) {
Search_form.query.total=res.total
AllData.tableData=res.data
}
},(error)=>{
loading.value=false
})
}
const handleSizeChange = (val) => {
Search_form.query.pageSize = val;
console.log(Search_form.query);
getTableList()
};
const handleCurrentChange = (val) => {
Search_form.query.pageNum = val;
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()
if(props.Getproperties.daterange){
Search_form.Timers=props.Getproperties.daterange
}
});
</script>
<style lang="scss" scoped>
.guanlianjianceHeHu {
height: 100%;
padding:0 15px;
.leftBtn {
min-width: 120px;
height: 100%;
border-right: 1px solid #0d2359;
padding-right: 10px;
box-sizing: border-box;
.btnClass {
width: 100%;
height: 40px;
line-height: 40px;
text-align: center;
border: 1px solid #283179;
color: #fff;
font-size: 16px;
border-radius: 3px;
cursor: pointer;
}
.activeBtn {
background: #409EFF;
border: none;
}
}
:deep(.GLJCform) {
height: 110px;
// width: 100%;
width: calc(100% - 150px);
padding-left: 10px;
box-sizing: border-box;
.el-form-item__label {
font-weight: bold;
font-size: 14px;
color: #ccdfff;
}
.el-input__wrapper {
background: #0d2359;
border-radius: 6px;
border: 1px solid #0b9bff;
box-shadow: none;
.el-input__inner {
color: #8fbffe;
}
}
.el-select {
background: #0d2359;
}
.el-date-editor .el-range-input {
color: #8fbffe;
}
.el-date-editor .el-range-separator,.el-date-editor .el-range__icon {
color: #fff;
}
}
.ChartHeight {
width: 100%;
height: 550px;
}
}
</style>