|
|
|
@ -12,58 +12,41 @@ |
|
|
|
<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-group v-model="checkedValue" v-show="isCheckbox" @change="changeCheckProject"> |
|
|
|
<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"> |
|
|
|
<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 v-if="analysisList.length"> |
|
|
|
<div class="analysis-content" v-for="(item, index) in analysisList" :key="index"> |
|
|
|
<div class="echarts-content"> |
|
|
|
<span class="title-name">{{ item.chartData.chartName }}</span> |
|
|
|
<div class="echarts-box" :id="item.chartId" :ref="item.chartId" :style="{ 'zoom': zoom }"></div> |
|
|
|
</div> |
|
|
|
<div class="warn-analysis"> |
|
|
|
<span class="title-name">{{ item.tableName }}</span> |
|
|
|
<el-table height="258" :data="item.tableData" 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"> |
|
|
|
<div @click="openWarnDeal(scope.row)" |
|
|
|
:class="{ 'green-span': scope.row.warningStatus !== '1' }" class="default-span"> |
|
|
|
{{ scope.row.warningStatus === '1' ? '处理中' : '已处理' }} |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="warningInfo" align="center" label="预报"> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
</div> |
|
|
|
</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> |
|
|
|
<div class="water-leve-forecast"> |
|
|
|
<span class="title-name">{{warnDetailData.wranTypeName}}</span> |
|
|
|
<el-table height="235" :data="flowTableData" border> |
|
|
|
<el-table-column prop="projectName" align="center" label="工程名称"> |
|
|
|
</el-table-column> |
|
|
|
@ -83,28 +66,136 @@ |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
</div> |
|
|
|
<el-drawer title="预警处理详情" class="drawer-wrapper" :visible.sync="drawerVisible" :append-to-body="true" @close="closeDrawer" |
|
|
|
:with-header="true"> |
|
|
|
<div class="warn-deal-content"> |
|
|
|
<el-steps direction="vertical" :active="active" finish-status="success"> |
|
|
|
<el-step title="超汛限预警"> |
|
|
|
<template slot="description"> |
|
|
|
<div class="step-description"> |
|
|
|
<div class="description-item"> |
|
|
|
<span class="item-name">ID：</span> |
|
|
|
<span class="item-value">{{ '4001523562' }}</span> |
|
|
|
</div> |
|
|
|
<div class="description-item"> |
|
|
|
<span class="item-name">时间：</span> |
|
|
|
<span class="item-value">{{ '2024/04/10 15:30' }}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</el-step> |
|
|
|
<el-step title="专家交互"> |
|
|
|
<template slot="description"> |
|
|
|
<div class="step-description" v-if="active >= 1"> |
|
|
|
<div class="description-item" v-for="(item, index) in warnDealData" :key="index"> |
|
|
|
<span class="item-name">{{ item.name }}：</span> |
|
|
|
<span class="item-value">{{ item.value }}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</el-step> |
|
|
|
<el-step title="预警处置"> |
|
|
|
<template slot="description"> |
|
|
|
<div class="step-description" v-if="active === 2"> |
|
|
|
<el-form :model="dynamicValidateForm" :label-position="'top'" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic"> |
|
|
|
<el-form-item |
|
|
|
prop="wranDesc" |
|
|
|
label="处置描述" |
|
|
|
:rules="[ |
|
|
|
{ required: true, message: '请输入处置描述', trigger: 'blur' } |
|
|
|
]" |
|
|
|
> |
|
|
|
<el-input v-model="dynamicValidateForm.wranDesc" type="textarea" :disabled="active !== 2 || isSuccessDeal" :autosize="{ minRows: 2, maxRows: 6 }"></el-input> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</el-step> |
|
|
|
</el-steps> |
|
|
|
<div class="detail-footer"> |
|
|
|
<el-button style="margin-top: 12px;" @click="closeDrawer">取消</el-button> |
|
|
|
<el-button style="margin-top: 12px;" @click="upStep" v-if="active !== 0">上一步</el-button> |
|
|
|
<el-button style="margin-top: 12px;" @click="nextStep" v-if="active !== 2">下一步</el-button> |
|
|
|
<el-button style="margin-top: 12px;" @click="submitForm()" v-if="active === 2 && !isSuccessDeal">提交</el-button> |
|
|
|
<el-button style="margin-top: 12px;" @click="submitForm()" v-if="active === 2 && isSuccessDeal">关闭</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-drawer> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<script> |
|
|
|
import { WARNTYPE, WARNTYPELIST, AnalysisTableData, FlowTableData, FlowWaterChartData } from "../js/detailData"; |
|
|
|
let flowChart |
|
|
|
let waterchart |
|
|
|
import * as echarts from 'echarts'; |
|
|
|
import { WARNTYPE } from "../js/detailData"; |
|
|
|
export default { |
|
|
|
props: { |
|
|
|
warnItem: { |
|
|
|
type: Array, |
|
|
|
default: () => [] |
|
|
|
} |
|
|
|
}, |
|
|
|
data () { |
|
|
|
return { |
|
|
|
selectOptions: WARNTYPE, |
|
|
|
selectValue: '1', |
|
|
|
radioOptions: WARNTYPELIST, |
|
|
|
radioOptions: [], |
|
|
|
radioValue: '1', |
|
|
|
analysisTableData: AnalysisTableData, |
|
|
|
flowTableData: FlowTableData, |
|
|
|
flowTableData: [], |
|
|
|
zoom: 1, |
|
|
|
isCheckbox: false, |
|
|
|
checkedValue: ['1'] |
|
|
|
checkedValue: ['1'], |
|
|
|
warnDetailData: {}, |
|
|
|
analysisList: [], |
|
|
|
drawerVisible: false, |
|
|
|
active: 0, |
|
|
|
dynamicValidateForm: { |
|
|
|
wranDesc: '' |
|
|
|
}, |
|
|
|
warnDealData: [ |
|
|
|
{ |
|
|
|
name: 'ID', |
|
|
|
value: '4001523562' |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '姓名', |
|
|
|
value: '张为民' |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '职位', |
|
|
|
value: '工程师' |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '单位', |
|
|
|
value: '水科院' |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '联系方式', |
|
|
|
value: '15025468255' |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '年龄', |
|
|
|
value: '41' |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '性别', |
|
|
|
value: '男' |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '剩余处理时间', |
|
|
|
value: '1小时' |
|
|
|
}, |
|
|
|
], |
|
|
|
isSuccessDeal: false |
|
|
|
}; |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
warnItem (value) { |
|
|
|
if (value.length) { |
|
|
|
this.init() |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
mounted () { |
|
|
|
this.initChart() |
|
|
|
this.init() |
|
|
|
this.zoom = 1 / document.body.style.zoom; |
|
|
|
window.onresize = () => { |
|
|
|
this.zoom = 1 / document.body.style.zoom; |
|
|
|
@ -112,52 +203,84 @@ export default { |
|
|
|
}; |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
init () { |
|
|
|
if (!this.warnItem.length) return |
|
|
|
this.warnDetailData = this.warnItem.find(item => item.warnType === this.selectValue) |
|
|
|
const { warnTypeList, checkbox, analysisTableData, flowTableData, flowWaterChartData, analysisTableName } = this.warnDetailData |
|
|
|
this.radioOptions = warnTypeList |
|
|
|
this.flowTableData = flowTableData |
|
|
|
this.isCheckbox = checkbox |
|
|
|
this.analysisList = [] |
|
|
|
if (checkbox) { |
|
|
|
this.checkedValue.forEach(elem => { |
|
|
|
let chart = flowWaterChartData.find(item => item.id === elem) |
|
|
|
this.analysisList.push({ chartId: 'chart' + elem, chartData: chart, tableName: analysisTableName, tableData: analysisTableData }) |
|
|
|
}); |
|
|
|
} else { |
|
|
|
let chart = flowWaterChartData.find(item => item.id === this.radioValue) |
|
|
|
this.analysisList.push({ chartId: 'chart' + this.radioValue, chartData: chart, tableName: analysisTableName, tableData: analysisTableData }) |
|
|
|
} |
|
|
|
this.$nextTick(() => { |
|
|
|
this.initChart() |
|
|
|
}); |
|
|
|
}, |
|
|
|
changeProject (data) { |
|
|
|
this.radioValue = data |
|
|
|
this.checkedValue = ['1'] |
|
|
|
this.analysisList = [] |
|
|
|
let chart = this.warnDetailData.flowWaterChartData.find(item => item.id === data) |
|
|
|
this.analysisList.push({ chartId: 'chart' + data, chartData: chart, tableName: this.warnDetailData.analysisTableName, tableData: this.warnDetailData.analysisTableData }) |
|
|
|
this.$nextTick(() => { |
|
|
|
this.initChart() |
|
|
|
}); |
|
|
|
}, |
|
|
|
changeCheckProject (data) { |
|
|
|
this.radioValue = '1' |
|
|
|
this.checkedValue = data |
|
|
|
this.initChart() |
|
|
|
this.analysisList = [] |
|
|
|
data.forEach(elem => { |
|
|
|
let chart = this.warnDetailData.flowWaterChartData.find(item => item.id === elem) |
|
|
|
this.analysisList.push({ chartId: 'chart' + elem, chartData: chart, tableName: this.warnDetailData.analysisTableName, tableData: this.warnDetailData.analysisTableData }) |
|
|
|
}); |
|
|
|
this.$nextTick(() => { |
|
|
|
this.initChart() |
|
|
|
}); |
|
|
|
}, |
|
|
|
changeType (val) { |
|
|
|
this.warnDetailData = this.warnItem.find(item => item.warnType === this.selectValue) |
|
|
|
const { warnTypeList, checkbox, analysisTableData, flowTableData, flowWaterChartData, analysisTableName } = this.warnDetailData |
|
|
|
this.radioOptions = warnTypeList |
|
|
|
this.flowTableData = flowTableData |
|
|
|
this.isCheckbox = checkbox |
|
|
|
this.selectValue = val |
|
|
|
this.radioValue = '1' |
|
|
|
this.checkedValue = ['1'] |
|
|
|
let node = WARNTYPE.find(item => item.value === val) |
|
|
|
this.isCheckbox = node.checkbox |
|
|
|
this.initChart() |
|
|
|
this.analysisList = [] |
|
|
|
if (checkbox) { |
|
|
|
this.checkedValue.forEach(elem => { |
|
|
|
let chart = flowWaterChartData.find(item => item.id === elem) |
|
|
|
this.analysisList.push({ chartId: 'chart' + elem, chartData: chart, tableName: analysisTableName, tableData: analysisTableData }) |
|
|
|
}); |
|
|
|
} else { |
|
|
|
let chart = flowWaterChartData.find(item => item.id === this.radioValue) |
|
|
|
this.analysisList.push({ chartId: 'chart' + this.radioValue, chartData: chart, tableName: analysisTableName, tableData: analysisTableData }) |
|
|
|
} |
|
|
|
this.$nextTick(() => { |
|
|
|
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 { |
|
|
|
this.analysisList.forEach((data) => { |
|
|
|
let chart = echarts.init(document.getElementById(data.chartId)); |
|
|
|
chart.clear(); |
|
|
|
let series = [] |
|
|
|
let yAxis = [] |
|
|
|
let tooltip = {} |
|
|
|
let chartData = data.chartData |
|
|
|
if (!chartData) chartData = this.warnItem[0].flowWaterChartData |
|
|
|
if (chartData.toolTipTrigger) { |
|
|
|
tooltip.trigger = chartData.toolTipTrigger |
|
|
|
} |
|
|
|
chartData.YData.forEach(item => { |
|
|
|
series.push( |
|
|
|
{ |
|
|
|
@ -178,65 +301,7 @@ export default { |
|
|
|
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: { |
|
|
|
@ -260,9 +325,40 @@ export default { |
|
|
|
}, |
|
|
|
series: series |
|
|
|
} |
|
|
|
flowChart.setOption(option); |
|
|
|
} |
|
|
|
} |
|
|
|
chart.setOption(option); |
|
|
|
this.$refs[data.chartId] = chart; |
|
|
|
}); |
|
|
|
}, |
|
|
|
openWarnDeal (item) { |
|
|
|
this.drawerVisible = true |
|
|
|
this.isSuccessDeal = item.warningStatus !== '1' |
|
|
|
this.resetForm() |
|
|
|
this.dynamicValidateForm.wranDesc = item.warningStatus === '1' ? '' : '预警信息处置' |
|
|
|
}, |
|
|
|
nextStep () { |
|
|
|
if (this.active++ > 2) this.active = 0; |
|
|
|
}, |
|
|
|
upStep () { |
|
|
|
if (this.active-- < 0) this.active = 0; |
|
|
|
}, |
|
|
|
closeDrawer() { |
|
|
|
this.drawerVisible = false |
|
|
|
this.active = 0 |
|
|
|
this.resetForm() |
|
|
|
}, |
|
|
|
submitForm() { |
|
|
|
this.$refs['dynamicValidateForm'].validate((valid) => { |
|
|
|
if (valid) { |
|
|
|
this.drawerVisible = false |
|
|
|
this.active = 0 |
|
|
|
} else { |
|
|
|
return false; |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
resetForm() { |
|
|
|
this.$refs['dynamicValidateForm']?.resetFields(); |
|
|
|
}, |
|
|
|
} |
|
|
|
}; |
|
|
|
</script> |
|
|
|
@ -348,11 +444,13 @@ export default { |
|
|
|
display: flex; |
|
|
|
padding: 0px; |
|
|
|
justify-content: space-between; |
|
|
|
|
|
|
|
margin-bottom: 16px; |
|
|
|
border-top: 1px solid #E5E5E5; |
|
|
|
border-bottom: 1px solid #E5E5E5; |
|
|
|
.echarts-content { |
|
|
|
width: 951px; |
|
|
|
height: 300px; |
|
|
|
border-bottom: 1px solid #E5E5E5; |
|
|
|
border-right: 1px solid #E5E5E5; |
|
|
|
|
|
|
|
.echarts-box { |
|
|
|
width: 951px; |
|
|
|
@ -363,9 +461,7 @@ export default { |
|
|
|
.warn-analysis { |
|
|
|
width: 441px; |
|
|
|
height: 300px; |
|
|
|
border-left: 1px solid #E5E5E5; |
|
|
|
border-right: 1px solid #E5E5E5; |
|
|
|
border-bottom: 1px solid #E5E5E5; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@ -396,5 +492,28 @@ export default { |
|
|
|
font-variation-settings: "opsz" auto; |
|
|
|
color: rgba(0, 0, 0, 0.9); |
|
|
|
} |
|
|
|
|
|
|
|
.default-span { |
|
|
|
color: #faad10; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
|
|
|
|
.green-span { |
|
|
|
color: #31A08E; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
::v-deep.drawer-wrapper { |
|
|
|
.el-drawer__header { |
|
|
|
margin-bottom: 0px; |
|
|
|
} |
|
|
|
|
|
|
|
.warn-deal-content { |
|
|
|
padding: 16px; |
|
|
|
|
|
|
|
.step-description { |
|
|
|
margin-bottom: 12px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
ruancuihong
1 year ago
