sunli
/
qingtian-report-ui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

docs：洪水预报

master
waibao2 1 month ago
parent
a77ee546a9
commit
199ca6cde0
1 changed files with 490 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 490
      src/views/flood/index.vue

490
src/views/flood/index.vue
Unescape View File

@ -0,0 +1,490 @@ @@ -0,0 +1,490 @@
<template>
<div class="app-container app-container-bg">
<el-card class="first-card" ref='firstCard' shadow="always">
<el-form :model="queryParams" ref="queryForm" :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-button type="primary" @click="showSetting = true">设置</el-button> -->
</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 slot="label">
预测最高值
</template>
{{predict.maxValue}}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
预测最低值
</template>
{{predict.minValue}}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
时间
</template>
{{predict.maxTime}}
</el-descriptions-item>
<el-descriptions-item>
<template slot="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%; "></div>
</pane>
</splitpanes>
</div>
</template>
<script>
import * as echarts from "echarts";
import request from "@/utils/request";
import {
Splitpanes,
Pane
} from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'
import dayjs from 'dayjs'
export default {
name: 'Flood',
components: {
Splitpanes,
Pane
},
data() {
const endTime = dayjs(new Date());
const startTime = endTime.subtract(10, 'hour').format('YYYY-MM-DD HH:mm:00');
const endTimeFormatted = dayjs(new Date()).format('YYYY-MM-DD HH:mm:00');
return {
loading: false,
showSetting: false,
tableData: [],
stationList: [],
queryForm: {
station: null,
dateRange: [startTime, endTimeFormatted]
},
isEditing: false,
// 起报时间
qbTime: '',
// 预测值信息
predict: {
maxValue: '',
minValue: '',
maxTime: '',
minTime: ''
}
}
},
created() {
this.getStationList()
},
mounted() {
},
methods: {
// 获取测站选择下拉框数据
async getStationList() {
let res = await request({
url: "/history/data/getStationList",
method: 'post',
});
if (res.code == 0) {
let data = res.data;
this.stationList = data;
this.queryForm.station = this.stationList[0].stnmId;
this.drawChart()
}
},
async drawChart() {
this.loading = true
let params = {
startTime: this.queryForm.dateRange[0],
endTime: this.queryForm.dateRange[1],
stnmId: this.queryForm.station,
stationType: 'A',
stcd: ''
}
let res = await request({
url: "/history/data/newHistorydata",
method: 'post',
params: params
});
if (res.code == 0) {
this.chartData = res.data;
let rainData = res.data.A.data || [];
let 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');
this.queryForm.dateRange = [actualStartTime, actualEndTime]
}
let predictData = res.data.Z.data || [];
// 👇 关键：表格用的水位数据，去掉最后一个点
const waterDataForTable = waterData.length > 0 ? waterData.slice(0, -1) : [];
// 构建表格数据（雨量 + 水位，水位不包含最后一个点）
const tableData = 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()
};
});
this.tableData = tableData;
this.initEcharts() // 图表仍使用完整的 waterData 和 predictData
this.loading = false
}
},
initEcharts() {
// 1. 取出A和V数据
const rainArr = this.chartData?.A?.data || [];
const waterArr = this.chartData?.C?.data || [];
const predictArr = this.chartData?.Z?.data || [];
// const filteredRain = waterArr
// let Xdata = [...filteredRain, ...predictArr]
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];
}
// 3. 生成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条数据的起始索引
this.qbTime = dayjs(Xdata[startIndex][0]).format('YYYY-MM-DD HH:mm:ss')
// const rainfallData = filteredRain.map(item => item[1]);
// 雨量
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
// 5. 预测水位
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]);
this.predict.maxValue = maxItem.value;
this.predict.minValue = minItem.value;
this.predict.maxTime = timeData[maxItem.index];
this.predict.minTime = timeData[minItem.index];
}
// 15条横线颜色，首尾黑色，中间灰色
const splitLineColors = [
'#000', '#ccc', '#ccc', '#ccc', '#ccc',
'#ccc', '#ccc', '#ccc', '#ccc', '#ccc',
'#ccc', '#ccc', '#ccc', '#ccc', '#000'
];
let 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; let that = this
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',
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',
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 (this.chartInstance) {
this.chartInstance.dispose();
}
this.chartInstance = echarts.init(chartDom);
this.chartInstance.setOption(option);
// 监听窗口变化
window.addEventListener('resize', () => {
if (this.chartInstance) {
this.chartInstance.resize();
}
});
},
// 改变下拉框数据
changeStation(val) {
this.queryForm.station = val
this.drawChart()
},
}
}
</script>
Write Preview
Loading…
Cancel
Save