|
|
|
|
<template>
|
|
|
|
|
<div class="app-container app-container-bg">
|
|
|
|
|
<el-card class="first-card" ref="firstCard" shadow="always">
|
|
|
|
|
<el-form :model="queryForm" ref="queryFormRef" :inline="true" @submit.native.prevent>
|
|
|
|
|
<el-form-item label="测站选择：">
|
|
|
|
|
<el-select v-model="queryForm.station" placeholder="测站选择" style="width: 240px;" @change="changeStation">
|
|
|
|
|
<el-option v-for="item in stationList" :key="item.stnmId" :label="item.name" :value="item.stnmId" />
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="起止时段：">
|
|
|
|
|
<el-date-picker v-model="queryForm.dateRange" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD HH:mm:00">
|
|
|
|
|
</el-date-picker>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-button type="primary" @click="drawChart">查询</el-button>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
<el-row class="info-bar">
|
|
|
|
|
<el-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10">
|
|
|
|
|
<span>起报时间：</span><span>{{ qbTime }}</span>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
|
|
|
|
|
<span>预报时段：</span><span>1小时</span>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
|
|
|
|
|
<el-descriptions class="margin-top" :column="2" border>
|
|
|
|
|
<el-descriptions-item>
|
|
|
|
|
<template #label>
|
|
|
|
|
预测最高值
|
|
|
|
|
</template>
|
|
|
|
|
{{ predict.maxValue }}
|
|
|
|
|
</el-descriptions-item>
|
|
|
|
|
<el-descriptions-item>
|
|
|
|
|
<template #label>
|
|
|
|
|
预测最低值
|
|
|
|
|
</template>
|
|
|
|
|
{{ predict.minValue }}
|
|
|
|
|
</el-descriptions-item>
|
|
|
|
|
<el-descriptions-item>
|
|
|
|
|
<template #label>
|
|
|
|
|
时间
|
|
|
|
|
</template>
|
|
|
|
|
{{ predict.maxTime }}
|
|
|
|
|
</el-descriptions-item>
|
|
|
|
|
<el-descriptions-item>
|
|
|
|
|
<template #label>
|
|
|
|
|
时间
|
|
|
|
|
</template>
|
|
|
|
|
{{ predict.minTime }}
|
|
|
|
|
</el-descriptions-item>
|
|
|
|
|
</el-descriptions>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
</el-card>
|
|
|
|
|
<splitpanes class="el-card-p card-shadow carder-border mt10 pad10 default-theme container-box">
|
|
|
|
|
<pane size="30" min-size="30" max-size="30" style="height: 100%;">
|
|
|
|
|
<el-table v-table-height :data="tableData" border v-loading="loading">
|
|
|
|
|
<el-table-column prop="date" label="日期"></el-table-column>
|
|
|
|
|
<el-table-column prop="rain" label="雨量(mm)">
|
|
|
|
|
<template #default="scope">
|
|
|
|
|
<el-input v-if="isEditing" v-model="scope.row.rain" size="small" />
|
|
|
|
|
<span v-else>{{ scope.row.rain }}</span>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column prop="water" label="水位(mm)">
|
|
|
|
|
<template #default="scope">
|
|
|
|
|
<el-input type="number" v-if="isEditing" v-model="scope.row.water" size="small" />
|
|
|
|
|
<span v-else>{{ scope.row.water }}</span>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
</pane>
|
|
|
|
|
<pane size="70" min-size="70" max-size="70" class="ml10 pad20" v-loading="loading">
|
|
|
|
|
<div v-table-height id="main" style="width: 100%; height: 100%;"></div>
|
|
|
|
|
</pane>
|
|
|
|
|
</splitpanes>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup name="Flood">
|
|
|
|
|
import { ref, reactive, onMounted, onUnmounted, nextTick } from 'vue'
|
|
|
|
|
import * as echarts from "echarts"
|
|
|
|
|
import request from "@/utils/request"
|
|
|
|
|
import { Splitpanes, Pane } from 'splitpanes'
|
|
|
|
|
import 'splitpanes/dist/splitpanes.css'
|
|
|
|
|
import dayjs from 'dayjs'
|
|
|
|
|
|
|
|
|
|
// 响应式数据
|
|
|
|
|
const loading = ref(false)
|
|
|
|
|
const showSetting = ref(false)
|
|
|
|
|
const tableData = ref([])
|
|
|
|
|
const stationList = ref([])
|
|
|
|
|
const isEditing = ref(false)
|
|
|
|
|
const qbTime = ref('')
|
|
|
|
|
const chartInstance = ref(null)
|
|
|
|
|
const firstCard = ref(null)
|
|
|
|
|
const queryFormRef = ref(null)
|
|
|
|
|
|
|
|
|
|
// 预测值信息
|
|
|
|
|
const predict = reactive({
|
|
|
|
|
maxValue: '',
|
|
|
|
|
minValue: '',
|
|
|
|
|
maxTime: '',
|
|
|
|
|
minTime: ''
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
// 查询表单
|
|
|
|
|
const endTime = dayjs(new Date())
|
|
|
|
|
const startTime = endTime.subtract(10, 'hour').format('YYYY-MM-DD HH:mm:00')
|
|
|
|
|
const endTimeFormatted = endTime.format('YYYY-MM-DD HH:mm:00')
|
|
|
|
|
|
|
|
|
|
const queryForm = reactive({
|
|
|
|
|
station: null,
|
|
|
|
|
dateRange: [startTime, endTimeFormatted]
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
// 图表数据
|
|
|
|
|
const chartData = ref({})
|
|
|
|
|
|
|
|
|
|
// resize 处理函数引用
|
|
|
|
|
let resizeHandler = null
|
|
|
|
|
|
|
|
|
|
// 组件挂载时获取测站列表
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
getStationList()
|
|
|
|
|
|
|
|
|
|
// 初始化 resize 处理函数
|
|
|
|
|
resizeHandler = () => {
|
|
|
|
|
if (chartInstance.value) {
|
|
|
|
|
chartInstance.value.resize()
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 添加窗口大小改变监听
|
|
|
|
|
window.addEventListener('resize', resizeHandler)
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
// 组件卸载时清理资源
|
|
|
|
|
onUnmounted(() => {
|
|
|
|
|
// 移除窗口大小改变监听
|
|
|
|
|
if (resizeHandler) {
|
|
|
|
|
window.removeEventListener('resize', resizeHandler)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 销毁 echarts 实例
|
|
|
|
|
if (chartInstance.value) {
|
|
|
|
|
chartInstance.value.dispose()
|
|
|
|
|
chartInstance.value = null
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
// 获取测站选择下拉框数据
|
|
|
|
|
const getStationList = async () => {
|
|
|
|
|
try {
|
|
|
|
|
const res = await request({
|
|
|
|
|
url: "/history/data/getStationList",
|
|
|
|
|
method: 'post',
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
if (res.code == 0) {
|
|
|
|
|
stationList.value = res.data
|
|
|
|
|
queryForm.station = stationList.value[0].stnmId
|
|
|
|
|
drawChart()
|
|
|
|
|
}
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.error('获取测站列表失败:', error)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 绘制图表
|
|
|
|
|
const drawChart = async () => {
|
|
|
|
|
loading.value = true
|
|
|
|
|
|
|
|
|
|
const params = {
|
|
|
|
|
startTime: queryForm.dateRange[0],
|
|
|
|
|
endTime: queryForm.dateRange[1],
|
|
|
|
|
stnmId: queryForm.station,
|
|
|
|
|
stationType: 'A',
|
|
|
|
|
stcd: ''
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
try {
|
|
|
|
|
const res = await request({
|
|
|
|
|
url: "/history/data/newHistorydata",
|
|
|
|
|
method: 'post',
|
|
|
|
|
params: params
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
if (res.code == 0) {
|
|
|
|
|
chartData.value = res.data
|
|
|
|
|
const rainData = res.data.A?.data || []
|
|
|
|
|
const waterData = res.data.C?.data || []
|
|
|
|
|
|
|
|
|
|
if (waterData && waterData.length > 0) {
|
|
|
|
|
const actualStartTime = dayjs(waterData[0][0]).format('YYYY-MM-DD HH:mm:ss')
|
|
|
|
|
const actualEndTime = dayjs(waterData[waterData.length - 1][0]).format('YYYY-MM-DD HH:mm:ss')
|
|
|
|
|
queryForm.dateRange = [actualStartTime, actualEndTime]
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const predictData = res.data.Z?.data || []
|
|
|
|
|
|
|
|
|
|
// 表格用的水位数据，去掉最后一个点
|
|
|
|
|
const waterDataForTable = waterData.length > 0 ? waterData.slice(0, -1) : []
|
|
|
|
|
|
|
|
|
|
// 构建表格数据（雨量 + 水位，水位不包含最后一个点）
|
|
|
|
|
const tableDataValue = waterDataForTable.map(waterItem => {
|
|
|
|
|
const [timestamp, water] = waterItem
|
|
|
|
|
const rainItem = rainData.find(r => r[0] === timestamp)
|
|
|
|
|
const date = dayjs(timestamp).format('YYYY/MM/DD HH:mm:ss')
|
|
|
|
|
return {
|
|
|
|
|
date,
|
|
|
|
|
rain: rainItem ? rainItem[1]?.toString() : '',
|
|
|
|
|
water: water?.toString()
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
tableData.value = tableDataValue
|
|
|
|
|
// 使用 nextTick 确保 DOM 更新后再初始化图表
|
|
|
|
|
await nextTick()
|
|
|
|
|
initEcharts() // 图表仍使用完整的 waterData 和 predictData
|
|
|
|
|
}
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.error('获取图表数据失败:', error)
|
|
|
|
|
} finally {
|
|
|
|
|
loading.value = false
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 初始化图表
|
|
|
|
|
const initEcharts = () => {
|
|
|
|
|
// 取出A和V数据
|
|
|
|
|
const rainArr = chartData.value?.A?.data || []
|
|
|
|
|
const waterArr = chartData.value?.C?.data || []
|
|
|
|
|
const predictArr = chartData.value?.Z?.data || []
|
|
|
|
|
|
|
|
|
|
const filteredRain = waterArr
|
|
|
|
|
|
|
|
|
|
// 合并数据，去重相同时间点
|
|
|
|
|
let Xdata
|
|
|
|
|
if (waterArr.length > 0 && predictArr.length > 0 && waterArr[waterArr.length - 1][0] === predictArr[0][0]) {
|
|
|
|
|
Xdata = [...waterArr, ...predictArr.slice(1)]
|
|
|
|
|
} else {
|
|
|
|
|
Xdata = [...waterArr, ...predictArr]
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 生成timeData和rainfallData
|
|
|
|
|
const timeData = Xdata.map(item => {
|
|
|
|
|
// 时间戳转格式
|
|
|
|
|
return dayjs(item[0]).format('MM月DD日 HH:mm')
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
const timeDataLength = timeData.length
|
|
|
|
|
const startIndex = Math.max(0, timeDataLength - 12) // 后12条数据的起始索引
|
|
|
|
|
qbTime.value = dayjs(Xdata[startIndex][0]).format('YYYY-MM-DD HH:mm:ss')
|
|
|
|
|
|
|
|
|
|
// 雨量
|
|
|
|
|
const rainfallData = filteredRain.map(item => {
|
|
|
|
|
const waterItem = rainArr.find(w => w[0] === item[0])
|
|
|
|
|
return waterItem ? waterItem[1] : null
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
// 水位
|
|
|
|
|
const rainData = filteredRain.map(item => {
|
|
|
|
|
const waterItem = waterArr.find(w => w[0] === item[0])
|
|
|
|
|
return waterItem ? waterItem[1] : null
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
const levelData = rainData
|
|
|
|
|
|
|
|
|
|
// 预测水位
|
|
|
|
|
const waterForecast = Xdata.map(item => {
|
|
|
|
|
const waterItem = predictArr.find(w => w[0] === item[0])
|
|
|
|
|
return waterItem ? waterItem[1] : null
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
// 获取预测水位的最高值和最低值及对应时间
|
|
|
|
|
const validForecast = waterForecast.map((value, index) => ({ value, index })).filter(item => item.value !== null)
|
|
|
|
|
if (validForecast.length > 0) {
|
|
|
|
|
const maxItem = validForecast.reduce((max, current) =>
|
|
|
|
|
(current.value > max.value ? current : max), validForecast[0])
|
|
|
|
|
const minItem = validForecast.reduce((min, current) =>
|
|
|
|
|
(current.value < min.value ? current : min), validForecast[0])
|
|
|
|
|
|
|
|
|
|
predict.maxValue = maxItem.value
|
|
|
|
|
predict.minValue = minItem.value
|
|
|
|
|
predict.maxTime = timeData[maxItem.index]
|
|
|
|
|
predict.minTime = timeData[minItem.index]
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 15条横线颜色，首尾黑色，中间灰色
|
|
|
|
|
const splitLineColors = [
|
|
|
|
|
'#000', '#ccc', '#ccc', '#ccc', '#ccc',
|
|
|
|
|
'#ccc', '#ccc', '#ccc', '#ccc', '#ccc',
|
|
|
|
|
'#ccc', '#ccc', '#ccc', '#ccc', '#000'
|
|
|
|
|
]
|
|
|
|
|
|
|
|
|
|
const ycColor = '#1EA1CE'
|
|
|
|
|
|
|
|
|
|
function getSplitLine(index) {
|
|
|
|
|
return {
|
|
|
|
|
show: true,
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: splitLineColors,
|
|
|
|
|
width: 1
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 计算y轴的最小值和最大值，用于自动设置刻度
|
|
|
|
|
const yAxisRainMin = Math.min(...rainfallData.filter(v => v !== undefined && v !== null))
|
|
|
|
|
const yAxisRainMax = Math.max(...rainfallData.filter(v => v !== undefined && v !== null))
|
|
|
|
|
const allWaterData = levelData.concat(waterForecast).filter(v => v !== undefined && v !== null)
|
|
|
|
|
const yAxisWaterMin = allWaterData.length ? Math.min(...allWaterData) : 0
|
|
|
|
|
const yAxisWaterMax = allWaterData.length ? Math.max(...allWaterData) : 10
|
|
|
|
|
|
|
|
|
|
const option = {
|
|
|
|
|
backgroundColor: '#fff',
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: 'axis',
|
|
|
|
|
axisPointer: { type: 'cross' },
|
|
|
|
|
// 在 tooltip.formatter 函数中替换以下代码
|
|
|
|
|
formatter: function (params) {
|
|
|
|
|
let dataIndex = params[0].dataIndex
|
|
|
|
|
let html = `<div><strong>${timeData[dataIndex]}</strong></div>`
|
|
|
|
|
|
|
|
|
|
// 检查是否为预测数据区间
|
|
|
|
|
const isForecast = dataIndex >= filteredRain.length
|
|
|
|
|
|
|
|
|
|
// 显示雨量（仅在非预测时段或有雨量数据时显示）
|
|
|
|
|
if (!isForecast || rainfallData[dataIndex] !== undefined) {
|
|
|
|
|
html += `<div style="margin-top:4px;">
|
|
|
|
|
<span style="display:inline-block;width:10px;height:10px;background:#1075FD;margin-right:4px;"></span>
|
|
|
|
|
雨量: ${rainfallData[dataIndex] ?? '-'} mm
|
|
|
|
|
</div>`
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 显示实际水位（仅在非预测时段显示）
|
|
|
|
|
if (!isForecast) {
|
|
|
|
|
html += `<div>
|
|
|
|
|
<span style="display:inline-block;width:10px;height:10px;background:#EE6666;margin-right:4px;"></span>
|
|
|
|
|
水位: ${levelData[dataIndex] ?? '-'} m
|
|
|
|
|
</div>`
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 显示预测水位（在预测时段显示）
|
|
|
|
|
if (isForecast || waterForecast[dataIndex] !== null) {
|
|
|
|
|
html += `<div>
|
|
|
|
|
<span style="display:inline-block;width:10px;height:10px;background:#6f46fd;margin-right:4px;"></span>
|
|
|
|
|
预测水位: ${waterForecast[dataIndex] ?? '-'} m
|
|
|
|
|
</div>`
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return html
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
legend: {
|
|
|
|
|
data: ['雨量', '水位', '预测水位'],
|
|
|
|
|
top: 20
|
|
|
|
|
},
|
|
|
|
|
toolbox: {
|
|
|
|
|
show: true,
|
|
|
|
|
feature: {
|
|
|
|
|
saveAsImage: { show: true, title: '下载图片' },
|
|
|
|
|
},
|
|
|
|
|
right: 30,
|
|
|
|
|
top: 20
|
|
|
|
|
},
|
|
|
|
|
grid: {
|
|
|
|
|
left: 60,
|
|
|
|
|
right: 60,
|
|
|
|
|
top: '15%',
|
|
|
|
|
height: '60%' // 调整高度以适应dataZoom
|
|
|
|
|
},
|
|
|
|
|
xAxis: {
|
|
|
|
|
type: 'category',
|
|
|
|
|
data: timeData,
|
|
|
|
|
axisLabel: {
|
|
|
|
|
rotate: 0,
|
|
|
|
|
formatter: function (value) {
|
|
|
|
|
const [date, time] = value.split(' ')
|
|
|
|
|
return `${time}\n${date}`
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
yAxis: [
|
|
|
|
|
{ // 雨量 - 左侧
|
|
|
|
|
type: 'value',
|
|
|
|
|
axisLine: {
|
|
|
|
|
show: true
|
|
|
|
|
},
|
|
|
|
|
name: '雨量 (mm)',
|
|
|
|
|
nameLocation: 'middle',
|
|
|
|
|
nameGap: 35,
|
|
|
|
|
inverse: true,
|
|
|
|
|
min: Math.floor(yAxisRainMin),
|
|
|
|
|
max: Math.ceil(yAxisRainMax),
|
|
|
|
|
axisLabel: { color: '#1075FD' },
|
|
|
|
|
nameTextStyle: { color: '#1075FD', fontWeight: 'bold' },
|
|
|
|
|
splitLine: getSplitLine(0),
|
|
|
|
|
},
|
|
|
|
|
{ // 水位 - 右侧
|
|
|
|
|
type: 'value',
|
|
|
|
|
axisLine: {
|
|
|
|
|
show: true
|
|
|
|
|
},
|
|
|
|
|
name: '水位 (m)',
|
|
|
|
|
nameLocation: 'middle',
|
|
|
|
|
nameGap: 45,
|
|
|
|
|
min: Math.floor(yAxisWaterMin),
|
|
|
|
|
max: Math.ceil(yAxisWaterMax),
|
|
|
|
|
position: 'right',
|
|
|
|
|
axisLabel: { color: '#EE6666' },
|
|
|
|
|
nameTextStyle: { color: '#EE6666', fontWeight: 'bold' },
|
|
|
|
|
splitLine: getSplitLine(1),
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
dataZoom: [
|
|
|
|
|
{
|
|
|
|
|
type: 'inside', // 内置型数据区域缩放组件
|
|
|
|
|
xAxisIndex: [0], // 控制第一个x轴
|
|
|
|
|
start: 0,
|
|
|
|
|
end: 100
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: 'slider', // 滑动条型数据区域缩放组件
|
|
|
|
|
xAxisIndex: [0],
|
|
|
|
|
start: 0,
|
|
|
|
|
end: 100,
|
|
|
|
|
bottom: 50, // 距离底部距离
|
|
|
|
|
height: 30, // 高度
|
|
|
|
|
fillerColor: 'rgba(167,183,204,0.4)', // 选中区域的背景色
|
|
|
|
|
borderColor: '#ddd',
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: '#999'
|
|
|
|
|
},
|
|
|
|
|
handleSize: '100%', // 手柄大小
|
|
|
|
|
handleStyle: {
|
|
|
|
|
color: '#a7b7cc'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
name: '雨量',
|
|
|
|
|
type: 'bar',
|
|
|
|
|
yAxisIndex: 0, // 使用左侧y轴
|
|
|
|
|
data: rainfallData,
|
|
|
|
|
barWidth: 10,
|
|
|
|
|
z: 10,
|
|
|
|
|
lineStyle: { color: '#1075FD', width: 3 },
|
|
|
|
|
itemStyle: { color: '#1075FD' },
|
|
|
|
|
markLine: {
|
|
|
|
|
symbol: 'none',
|
|
|
|
|
label: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: ycColor,
|
|
|
|
|
type: "dashed",
|
|
|
|
|
width: 2
|
|
|
|
|
},
|
|
|
|
|
z: 20,
|
|
|
|
|
data: [
|
|
|
|
|
{
|
|
|
|
|
xAxis: timeData.slice(startIndex)[0]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: '水位',
|
|
|
|
|
type: 'line',
|
|
|
|
|
yAxisIndex: 1, // 使用右侧y轴
|
|
|
|
|
data: levelData,
|
|
|
|
|
symbol: 'circle',
|
|
|
|
|
lineStyle: { color: '#EE6666', width: 3 },
|
|
|
|
|
itemStyle: { color: '#EE6666' },
|
|
|
|
|
markLine: {
|
|
|
|
|
symbol: 'none',
|
|
|
|
|
label: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: ycColor,
|
|
|
|
|
type: "dashed",
|
|
|
|
|
width: 2
|
|
|
|
|
},
|
|
|
|
|
data: [
|
|
|
|
|
{
|
|
|
|
|
xAxis: timeData.slice(startIndex)[0]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: '预测水位',
|
|
|
|
|
type: 'line',
|
|
|
|
|
yAxisIndex: 1, // 使用右侧y轴
|
|
|
|
|
data: waterForecast,
|
|
|
|
|
symbol: 'circle',
|
|
|
|
|
lineStyle: { color: '#6f46fd', width: 2 },
|
|
|
|
|
itemStyle: { color: '#6f46fd' },
|
|
|
|
|
markLine: {
|
|
|
|
|
symbol: 'none',
|
|
|
|
|
label: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: ycColor,
|
|
|
|
|
type: "dashed",
|
|
|
|
|
width: 2
|
|
|
|
|
},
|
|
|
|
|
data: [
|
|
|
|
|
{
|
|
|
|
|
xAxis: timeData.slice(startIndex)[0]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const chartDom = document.getElementById('main')
|
|
|
|
|
if (!chartDom) return
|
|
|
|
|
|
|
|
|
|
// 销毁已存在的实例
|
|
|
|
|
if (chartInstance.value) {
|
|
|
|
|
chartInstance.value.dispose()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 初始化新的 echarts 实例
|
|
|
|
|
chartInstance.value = echarts.init(chartDom)
|
|
|
|
|
chartInstance.value.setOption(option)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 改变下拉框数据
|
|
|
|
|
const changeStation = (val) => {
|
|
|
|
|
queryForm.station = val
|
|
|
|
|
drawChart()
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
/* 如果需要添加样式可以在这里添加 */
|
|
|
|
|
</style>
|
