ljf
/
shuili-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat: 预警预报详情

master_tdsql
ruancuihong 1 year ago
parent
2b504213f5
commit
34a2dbeeb7
4 changed files with 817 additions and 144 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. 11
      src/views/aiSupervision/fourPredictions/warnInfo/components/Tree.vue
  2. 416
      src/views/aiSupervision/fourPredictions/warnInfo/components/forecastDetail.vue
  3. 113
      src/views/aiSupervision/fourPredictions/warnInfo/detail/PlanDetail.vue
  4. 421
      src/views/aiSupervision/fourPredictions/warnInfo/js/detailData.js

11
src/views/aiSupervision/fourPredictions/warnInfo/components/Tree.vue
View File

@ -308,12 +308,13 @@ export default {
display: flex;
align-items: center;
justify-content: flex-start;
border-radius: 4px;
}
.el-tree-node:focus>.el-tree-node__content,
.el-tree-node__content:hover {
background: #ebf7f5;
color: rgb(54, 178, 158) !important;
color: rgba(0, 0, 0, 0.9) !important;
// border-right: 3px solid #36b29e;
}
@ -330,7 +331,7 @@ export default {
display: flex;
justify-content: space-between;
align-items: center;
// color: rgb(38, 38, 38);
color: rgba(0, 0, 0, 0.6);
// width: 100%;
// padding-right: 8px;
font-family: "思源黑体";
@ -368,6 +369,12 @@ export default {
background: rgba(255, 255, 255, 0.16);
}
}
&:hover,
&:active,
&:focus {
color: rgba(0, 0, 0, 0.9);
}
}
.custom-tree-node.opacity {

416
src/views/aiSupervision/fourPredictions/warnInfo/components/forecastDetail.vue
View File

@ -1,63 +1,267 @@
<template>
<div class="forecast-detail-wrapper">
<div class="detail-title">预报详情</div>
<div class="select-content">
<span>预报类型</span>
<el-select v-model="selectValue" placeholder="请选择">
<el-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
<el-radio-group v-model="radioValue">
<el-radio v-for="item in radioOptions" :key="item.label" :label="item.label">{{ item.name }}</el-radio>
</el-radio-group>
<div class="title-content">
<div class="detail-title">预报详情</div>
<div class="select-content">
<span class="select-type">预报类型</span>
<el-select v-model="selectValue" placeholder="请选择" @change="changeType">
<el-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
<el-radio-group v-model="radioValue" v-show="!isCheckbox" @change="changeProject">
<el-radio v-for="item in radioOptions" :key="item.label" :label="item.label">{{ item.name
}}</el-radio>
</el-radio-group>
<el-checkbox-group v-model="checkedValue" :min="0" :max="2" v-show="isCheckbox" @change="changeProject">
<el-checkbox v-for="item in radioOptions" :key="item.label" :label="item.label">{{ item.name
}}</el-checkbox>
</el-checkbox-group>
</div>
</div>
<div class="analysis-content">
<div class="echarts-content" id="chart"></div>
<div class="echarts-content" id="chart">
<span class="title-name">河道水位-流量关系图</span>
<div class="echarts-box" id="waterchart" :style="{ 'zoom': zoom }"></div>
</div>
<div class="warn-analysis">
<span class="title-name">预警分析</span>
<el-table height="262" :data="analysisTableData" border>
<el-table-column prop="projectName" align="center" label="站点名称">
</el-table-column>
<el-table-column prop="warningType" align="center" label="预警类型">
</el-table-column>
<el-table-column prop="warningStatus" align="center" label="预警状态">
<template slot-scope="scope">
{{ scope.row.warningStatus === '1' ? '处理中' : '已处理' }}
</template>
</el-table-column>
<el-table-column prop="warningInfo" align="center" label="预报">
</el-table-column>
</el-table>
</div>
</div>
<div class="analysis-content" v-show="isCheckbox">
<div class="echarts-content">
<span class="title-name">河道水位-流量关系图</span>
<div class="echarts-box" id="flowchart" :style="{ 'zoom': zoom }"></div>
</div>
<div class="warn-analysis">
<span class="title-name">预警分析</span>
<el-table height="262" :data="analysisTableData" border>
<el-table-column prop="projectName" align="center" label="站点名称">
</el-table-column>
<el-table-column prop="warningType" align="center" label="预警类型">
</el-table-column>
<el-table-column prop="warningStatus" align="center" label="预警状态">
<template slot-scope="scope">
{{ scope.row.warningStatus === '1' ? '处理中' : '已处理' }}
</template>
</el-table-column>
<el-table-column prop="warningInfo" align="center" label="预报">
</el-table-column>
</el-table>
</div>
</div>
<div class="water-leve-forecast" v-show="!isCheckbox">
<span class="title-name">河道流量预报</span>
<el-table height="235" :data="flowTableData" border>
<el-table-column prop="projectName" align="center" label="工程名称">
</el-table-column>
<el-table-column prop="projectID" align="center" label="ID">
</el-table-column>
<el-table-column prop="rainFlow" align="center" label="预报雨量">
</el-table-column>
<el-table-column prop="waterFlow" align="center" label="预报来水量">
</el-table-column>
<el-table-column prop="outFlow" align="center" label="预报出库流量">
</el-table-column>
<el-table-column prop="water" align="center" label="预报水位">
</el-table-column>
<el-table-column prop="flow" align="center" label="河道流量">
</el-table-column>
<el-table-column prop="warningTime" align="center" label="预报时间">
</el-table-column>
</el-table>
</div>
</div>
</template>
<script>
import { WARNTYPE, WARNTYPELIST, AnalysisTableData, FlowTableData, FlowWaterChartData } from "../js/detailData";
let flowChart
let waterchart
export default {
data () {
return {
selectOptions: [{
value: '1',
label: '工程水位预报'
}, {
value: '2',
label: '河道水位预报'
}, {
value: '3',
label: '工程降雨量预报'
}, {
value: '4',
label: '水库出库流量预报'
}, {
value: '5',
label: '流域来水量预报'
}, {
value: '6',
label: '河道流量预报'
}],
selectOptions: WARNTYPE,
selectValue: '1',
radioOptions: [{
label: 1,
name: '飞来峡水库'
}, {
label: 2,
name: '龙潭水库'
}],
radioValue: 1
radioOptions: WARNTYPELIST,
radioValue: '1',
analysisTableData: AnalysisTableData,
flowTableData: FlowTableData,
zoom: 1,
isCheckbox: false,
checkedValue: ['1']
};
},
mounted () {
this.initChart()
this.zoom = 1 / document.body.style.zoom;
window.onresize = () => {
this.zoom = 1 / document.body.style.zoom;
this.initChart()
};
},
methods: {
handleNodeClick (data) {
console.log(data);
changeProject (data) {
this.radioValue = data
this.checkedValue = data
this.initChart()
},
changeType (val) {
this.selectValue = val
this.radioValue = '1'
this.checkedValue = ['1']
let node = WARNTYPE.find(item => item.value === val)
this.isCheckbox = node.checkbox
this.initChart()
},
initChart () {
if (waterchart) waterchart.dispose();
waterchart = this.$echarts.init(document.getElementById('waterchart'))
waterchart.clear();
let series = []
let yAxis = []
let tooltip = {}
let chartData = FlowWaterChartData.find(item => item.warnType === this.selectValue)
if (!chartData) chartData = FlowWaterChartData[0]
if (chartData.toolTipTrigger) {
tooltip.trigger = chartData.toolTipTrigger
}
if (this.selectValue === '3') {
let item = chartData.YData[0]
series.push(
{
name: item.unit,
data: item.Data,
type: item.barType,
smooth: true,
yAxisIndex: item.yAxisIndex,
itemStyle: {
opacity: item.opacity
},
barWidth: item.barWidth
}
)
yAxis.push({
name: item.yAxisName,
alignTicks: item.alignTicks,
type: item.yAxisType
})
} else {
chartData.YData.forEach(item => {
series.push(
{
name: item.unit,
data: item.Data,
type: item.barType,
smooth: true,
yAxisIndex: item.yAxisIndex,
itemStyle: {
opacity: item.opacity
},
barWidth: item.barWidth
}
)
yAxis.push({
name: item.yAxisName,
alignTicks: item.alignTicks,
type: item.yAxisType
})
})
}
let option = {
tooltip: tooltip,
legend: {
right: 'center',
top: '2%'
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLine: { onZero: false },
data: chartData.XData.map(function (str) {
return str.replace(' ', '\n');
})
},
yAxis: yAxis,
grid: {
top: '15%',
bottom: '14%',
left: '5%',
right: '5%'
},
series: series
}
waterchart.setOption(option);
// this.$nextTick(() => {
// waterchart.resize();
// });
if (this.isCheckbox) {
if (flowChart) flowChart.dispose();
flowChart = this.$echarts.init(document.getElementById('flowchart'))
flowChart.clear();
let series = []
let yAxis = []
let tooltip = {
trigger: 'axis'
}
let chartData = FlowWaterChartData.find(item => item.warnType === this.selectValue)
if (!chartData) chartData = FlowWaterChartData[0]
let item = chartData.YData[1]
series.push(
{
name: item.unit,
data: item.Data,
type: item.barType,
smooth: true,
yAxisIndex: item.yAxisIndex,
itemStyle: {
opacity: item.opacity
},
barWidth: item.barWidth
}
)
yAxis.push({
name: item.yAxisName,
alignTicks: item.alignTicks,
type: item.yAxisType
})
let option = {
tooltip: tooltip,
legend: {
right: 'center',
top: '2%'
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLine: { onZero: false },
data: chartData.XData.map(function (str) {
return str.replace(' ', '\n');
})
},
yAxis: yAxis,
grid: {
top: '15%',
bottom: '14%',
left: '5%',
right: '5%'
},
series: series
}
flowChart.setOption(option);
}
}
}
};
@ -66,5 +270,131 @@ export default {
.forecast-detail-wrapper {
width: 100%;
height: 100%;
.title-content {
display: flex;
justify-content: space-between;
width: 100%;
height: 40px;
border-radius: 0px 8px 0px 0px;
align-items: center;
padding: 0px 12px;
background: #FFFFFF;
border-width: 0px 0px 1px 0px;
border-style: solid;
border-color: #E7E7E7;
.detail-title {
height: 22px;
font-family: 思源黑体;
font-size: 14px;
font-weight: 500;
line-height: 22px;
letter-spacing: 0px;
color: #1A1A1A;
position: relative;
padding: 0 8px;
&:before {
content: '';
position: absolute;
background: #31A08E;
width: 3px;
height: 18px;
left: 0px;
top: 2px;
margin-right: 8px;
}
}
.select-content {
height: 34px;
display: flex;
align-items: center;
.select-type {
font-family: PingFang SC;
font-size: 14px;
font-weight: normal;
line-height: 22px;
text-align: center;
letter-spacing: 0px;
color: rgba(0, 0, 0, 0.6);
margin-right: 12px;
}
.el-select {
height: 26px;
line-height: 26px;
margin-right: 24px;
width: 200px;
border-radius: 4px;
}
.el-checkbox-group {
height: 26px;
line-height: 26px;
}
::v-deep.el-input--medium .el-input__inner {
height: 26px;
line-height: 26px;
}
}
}
.analysis-content {
height: 300px;
display: flex;
padding: 0px;
justify-content: space-between;
.echarts-content {
width: 951px;
height: 300px;
border-bottom: 1px solid #E5E5E5;
.echarts-box {
width: 951px;
height: 240px;
}
}
.warn-analysis {
width: 441px;
height: 300px;
border-left: 1px solid #E5E5E5;
border-right: 1px solid #E5E5E5;
border-bottom: 1px solid #E5E5E5;
}
}
.water-leve-forecast {
height: 260px;
width: 100%;
border-width: 0px 1px 1px 0px;
border-style: solid;
border-color: #E7E7E7;
}
.title-name {
height: 40px;
border-radius: 8px 8px 0px 0px;
display: flex;
flex-direction: row;
align-items: center;
padding: 9px 16px;
gap: 8px;
align-self: stretch;
background: #FFFFFF;
box-sizing: border-box;
font-family: Source Han Sans;
font-size: 14px;
font-weight: 500;
line-height: 22px;
letter-spacing: 0em;
font-variation-settings: "opsz" auto;
color: rgba(0, 0, 0, 0.9);
}
}
</style>

113
src/views/aiSupervision/fourPredictions/warnInfo/detail/PlanDetail.vue
View File

@ -22,113 +22,18 @@
</template>
</Tree>
<forecastDetail></forecastDetail>
<forecastDetail class="detail-right"></forecastDetail>
</div>
</template>
<script>
import forecastDetail from '../components/forecastDetail.vue'
import Tree from '../components/Tree.vue'
import { TreeData } from "../js/detailData";
export default {
components: { Tree, forecastDetail },
data () {
return {
treeData: [
{
"id": "1752932766908338178",
"parentId": "root",
"name": "全部",
"userId": 1,
"children": [
{
"id": "1759857493740810240",
"parentId": "1752932766908338178",
"name": "2024年预报方案",
"userId": 1,
"children": [
{
"id": "1759858444149125122",
"name": "4月12号",
"level": 2,
"children": [
{
"id": "1759858444149125142",
"name": "预报方案1",
"level": 3
},
{
"id": "1759458444149125142",
"name": "预报方案2",
"level": 3
}
]
},
{
"id": "1776817687412244481",
"name": "4月13号",
"level": 2,
"children": [
{
"id": "1759858444142125142",
"name": "预报方案1",
"level": 3
},
{
"id": "1759468444149125142",
"name": "预报方案2",
"level": 3
}
]
}
],
"level": 1
},
{
"id": "1759857493700810240",
"parentId": "1752932766908338178",
"name": "2023年预报方案",
"userId": 1,
"children": [
{
"id": "1759858444109125122",
"name": "4月15号",
"level": 2,
"children": [
{
"id": "1759858484149125142",
"name": "预报方案1",
"level": 3
},
{
"id": "1759458444142125142",
"name": "预报方案2",
"level": 3
}
]
},
{
"id": "1776817687412244481",
"name": "4月17号",
"level": 2,
"children": [
{
"id": "1759858544142125142",
"name": "预报方案1",
"level": 3
},
{
"id": "1759468444749125142",
"name": "预报方案2",
"level": 3
}
]
}
],
"level": 1
}
],
"level": 0
}
],
treeData: TreeData,
defaultProps: {
children: "children",
label: "name",
@ -155,9 +60,19 @@ export default {
height: 100%;
display: flex;
justify-content: space-between;
margin-top: -16px;
}
.warn-tree {
width: 350px !important;
width: 240px;
height: calc(100vh - 300px);
overflow-x: hidden;
}
.detail-right {
width: 1392px;
height: calc(100vh - 300px);
overflow-x: hidden;
border-left: 1px solid #E5E5E5;
}
</style>

421
src/views/aiSupervision/fourPredictions/warnInfo/js/detailData.js
View File

@ -0,0 +1,421 @@
export const TreeData = [
{
"id": "1752932766908338178",
"parentId": "root",
"name": "全部",
"userId": 1,
"children": [
{
"id": "1759857493740810240",
"parentId": "1752932766908338178",
"name": "2024年预报方案",
"userId": 1,
"children": [
{
"id": "1759858444149125122",
"name": "4月12号",
"level": 2,
"children": [
{
"id": "1759858444149125142",
"name": "预报方案1",
"level": 3
},
{
"id": "1759458444149125142",
"name": "预报方案2",
"level": 3
}
]
},
{
"id": "1776817687412244481",
"name": "4月13号",
"level": 2,
"children": [
{
"id": "1759858444142125142",
"name": "预报方案1",
"level": 3
},
{
"id": "1759468444149125142",
"name": "预报方案2",
"level": 3
}
]
}
],
"level": 1
},
{
"id": "1759857493700810240",
"parentId": "1752932766908338178",
"name": "2023年预报方案",
"userId": 1,
"children": [
{
"id": "1759858444109125122",
"name": "4月15号",
"level": 2,
"children": [
{
"id": "1759858484149125142",
"name": "预报方案1",
"level": 3
},
{
"id": "1759458444142125142",
"name": "预报方案2",
"level": 3
}
]
},
{
"id": "1776817687412244481",
"name": "4月17号",
"level": 2,
"children": [
{
"id": "1759858544142125142",
"name": "预报方案1",
"level": 3
},
{
"id": "1759468444749125142",
"name": "预报方案2",
"level": 3
}
]
}
],
"level": 1
}
],
"level": 0
}
]
export const WARNTYPE = [{
value: '1',
label: '工程水位预报',
checkbox : false
}, {
value: '2',
label: '河道水位预报',
checkbox : false
}, {
value: '3',
label: '工程降雨量预报',
checkbox : true
}, {
value: '4',
label: '水库出库流量预报',
checkbox : false
}, {
value: '5',
label: '流域来水量预报',
checkbox : false
}, {
value: '6',
label: '河道流量预报',
checkbox : false
}]
export const WARNTYPELIST = [{
label: '1',
name: '飞来峡水库'
}, {
label: '2',
name: '龙潭水库'
}, {
label: '3',
name: '龙潭水库'
}, {
label: '4',
name: '龙潭水库'
}]
export const AnalysisTableData = [
{
projectName: '南门口水位测站1',
warningType: '超警戒水位',
warningStatus: '2',
warningInfo: '12'
},
{
projectName: '南门口水位测站2',
warningType: '超警戒水位',
warningStatus: '1',
warningInfo: '12'
},
{
projectName: '南门口水位测站3',
warningType: '超警戒水位',
warningStatus: '2',
warningInfo: '12'
}, {
projectName: '南门口水位测站4',
warningType: '超警戒水位',
warningStatus: '2',
warningInfo: '12'
}, {
projectName: '南门口水位测站5',
warningType: '超警戒水位',
warningStatus: '1',
warningInfo: '12'
}, {
projectName: '南门口水位测站6',
warningType: '超警戒水位',
warningStatus: '2',
warningInfo: '12'
}, {
projectName: '南门口水位测站7',
warningType: '超警戒水位',
warningStatus: '1',
warningInfo: '12'
}
]
export const FlowTableData = [{
projectName: '南门口水位测站1',
projectID: 'BHA10000001',
rainFlow: '200',
waterFlow: '1002',
outFlow: '820',
water: '12.5',
flow: '8',
warningTime: '04/09 12:00'
}, {
projectName: '南门口水位测站1',
projectID: 'BHA10000001',
rainFlow: '200',
waterFlow: '1002',
outFlow: '820',
water: '12.5',
flow: '8',
warningTime: '04/09 12:00'
},
{
projectName: '南门口水位测站1',
projectID: 'BHA10000001',
rainFlow: '200',
waterFlow: '1002',
outFlow: '820',
water: '12.5',
flow: '8',
warningTime: '04/09 12:00'
},
{
projectName: '南门口水位测站1',
projectID: 'BHA10000001',
rainFlow: '200',
waterFlow: '1002',
outFlow: '820',
water: '12.5',
flow: '8',
warningTime: '04/09 12:00'
},
{
projectName: '南门口水位测站1',
projectID: 'BHA10000001',
rainFlow: '200',
waterFlow: '1002',
outFlow: '820',
water: '12.5',
flow: '8',
warningTime: '04/09 12:00'
},
{
projectName: '南门口水位测站1',
projectID: 'BHA10000001',
rainFlow: '200',
waterFlow: '1002',
outFlow: '820',
water: '12.5',
flow: '8',
warningTime: '04/09 12:00'
},
{
projectName: '南门口水位测站1',
projectID: 'BHA10000001',
rainFlow: '200',
waterFlow: '1002',
outFlow: '820',
water: '12.5',
flow: '8',
warningTime: '04/09 12:00'
},
{
projectName: '南门口水位测站1',
projectID: 'BHA10000001',
rainFlow: '200',
waterFlow: '1002',
outFlow: '820',
water: '12.5',
flow: '8',
warningTime: '04/09 12:00'
}]
export const FlowWaterChartData = [
// 工程水位预报
{
warnType: '1',
toolTipTrigger: 'axis',
XData: [
'04/09 08:00',
'04/09 12:00',
'04/09 16:00',
'04/09 20:00',
'04/10 08:00',
'04/10 12:00',
'04/10 16:00'
],
YData: [
{
Data: [10, 32, 11, 34, 90, 30, 20],
unit: '水位',
barType: 'line',
yAxisIndex: 0,
yAxisName: '水位:mm',
yAxisType: 'value',
alignTicks: false,
opacity: 0,
barWidth: 10
},
{
Data: [320, 332, 301, 334, 390, 330, 320],
unit: '水库水位',
barType: 'line',
yAxisIndex: 1,
yAxisName: '雨量:mm',
yAxisType: 'value',
alignTicks: true,
opacity: 0,
barWidth: 10
}
]
},
// 河道水位预报
{
warnType: '2',
toolTipTrigger: 'axis',
XData: [
'04/09 08:00',
'04/09 12:00',
'04/09 16:00',
'04/09 20:00',
'04/10 08:00',
'04/10 12:00',
'04/10 16:00'
],
YData: [
{
Data: [10, 32, 11, 34, 90, 30, 20],
unit: '降雨量',
barType: 'line',
yAxisIndex: 1,
yAxisName: '雨量:mm',
yAxisType: 'value',
alignTicks: true,
opacity: 0,
barWidth: 10
},
{
Data: [320, 332, 301, 334, 390, 330, 320],
unit: '河道水位',
barType: 'line',
yAxisIndex: 1,
yAxisName: '水位:mm',
yAxisType: 'value',
alignTicks: false,
opacity: 0,
barWidth: 10
}
]
},
// 工程降雨量预报
{
warnType: '3',
toolTipTrigger: '',
XData: [
'04/09 08:00',
'04/09 12:00',
'04/09 16:00',
'04/09 20:00',
'04/10 08:00',
'04/10 12:00',
'04/10 16:00'
],
YData: [
{
Data: [10, 32, 11, 34, 90, 30, 20],
unit: '降雨量',
barType: 'bar',
yAxisIndex: 0,
yAxisName: '雨量:mm',
yAxisType: 'value',
alignTicks: true,
opacity: 1,
barWidth: 6
},
{
Data: [10, 32, 11, 34, 90, 30, 20],
unit: '降雨量',
barType: 'line',
yAxisIndex: 0,
yAxisName: '雨量:mm',
yAxisType: 'value',
alignTicks: true,
opacity: 1,
barWidth: 6
},
]
},
// 水库出库流量预报
{
warnType: '4',
toolTipTrigger: 'axis',
XData: [
'04/09 08:00',
'04/09 12:00',
'04/09 16:00',
'04/09 20:00',
'04/10 08:00',
'04/10 12:00',
'04/10 16:00'
],
YData: [
{
Data: [10, 32, 11, 34, 90, 30, 20],
unit: '水库库容',
barType: 'line',
yAxisIndex: 0,
yAxisName: '库容:万m³',
yAxisType: 'value',
alignTicks: true,
opacity: 0,
barWidth: 10
},
{
Data: [320, 332, 301, 334, 390, 330, 320],
unit: '出库流量',
barType: 'line',
yAxisIndex: 1,
yAxisName: '流量:m³/s',
yAxisType: 'value',
alignTicks: false,
opacity: 0,
barWidth: 10
},
{
Data: [194, 129, 341, 334, 90, 230, 130],
unit: '入库流量',
barType: 'line',
yAxisIndex: 1,
yAxisName: '流量:m³/s',
yAxisType: 'value',
alignTicks: false,
opacity: 0,
barWidth: 10
}
]
},
]
Write Preview
Loading…
Cancel
Save