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

fix: 数据更换、告警处理

master_tdsql
ruancuihong 1 year ago
parent
34a2dbeeb7
commit
a48f7cb7fd
5 changed files with 2014 additions and 438 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. BIN
      src/assets/common/icon-more.png
  2. 10
      src/views/aiSupervision/fourPredictions/warnInfo/components/Tree.vue
  3. 371
      src/views/aiSupervision/fourPredictions/warnInfo/components/forecastDetail.vue
  4. 26
      src/views/aiSupervision/fourPredictions/warnInfo/detail/PlanDetail.vue
  5. 1589
      src/views/aiSupervision/fourPredictions/warnInfo/js/detailData.js

BIN
src/assets/common/icon-more.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 123 B

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

@ -314,10 +314,18 @@ export default {
.el-tree-node:focus>.el-tree-node__content,
.el-tree-node__content:hover {
background: #ebf7f5;
color: rgba(0, 0, 0, 0.9) !important;
color: rgba(0, 0, 0, 0.9);
// border-right: 3px solid #36b29e;
}
.is-current>.el-tree-node__content {
background: #ebf7f5;
.custom-tree-node {
color: rgba(0, 0, 0, 0.9);
}
}
//.el-tree-node__expand-icon {
// color: rgba(255, 255, 255, 0.55);
// }

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

@ -12,49 +12,31 @@
<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>
</div>
<div class="analysis-content" v-show="isCheckbox">
<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">河道水位-流量关系图</span>
<div class="echarts-box" id="flowchart" :style="{ 'zoom': zoom }"></div>
<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">预警分析</span>
<el-table height="262" :data="analysisTableData" border>
<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="预报">
@ -62,8 +44,9 @@
</el-table>
</div>
</div>
<div class="water-leve-forecast" v-show="!isCheckbox">
<span class="title-name">河道流量预报</span>
</div>
<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.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.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();
this.analysisList.forEach((data) => {
let chart = echarts.init(document.getElementById(data.chartId));
chart.clear();
let series = []
let yAxis = []
let tooltip = {}
let chartData = FlowWaterChartData.find(item => item.warnType === this.selectValue)
if (!chartData) chartData = FlowWaterChartData[0]
let chartData = data.chartData
if (!chartData) chartData = this.warnItem[0].flowWaterChartData
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(
{
@ -178,7 +301,6 @@ export default {
type: item.yAxisType
})
})
}
let option = {
tooltip: tooltip,
@ -203,66 +325,40 @@ export default {
},
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
chart.setOption(option);
this.$refs[data.chartId] = chart;
});
},
barWidth: item.barWidth
}
)
yAxis.push({
name: item.yAxisName,
alignTicks: item.alignTicks,
type: item.yAxisType
})
let option = {
tooltip: tooltip,
legend: {
right: 'center',
top: '2%'
openWarnDeal (item) {
this.drawerVisible = true
this.isSuccessDeal = item.warningStatus !== '1'
this.resetForm()
this.dynamicValidateForm.wranDesc = item.warningStatus === '1' ? '' : '预警信息处置'
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLine: { onZero: false },
data: chartData.XData.map(function (str) {
return str.replace(' ', '\n');
})
nextStep () {
if (this.active++ > 2) this.active = 0;
},
yAxis: yAxis,
grid: {
top: '15%',
bottom: '14%',
left: '5%',
right: '5%'
upStep () {
if (this.active-- < 0) this.active = 0;
},
series: series
}
flowChart.setOption(option);
}
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>

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

@ -2,14 +2,14 @@
<div class="warn-wrapper">
<!-- 预警信息管理 -->
<Tree :data="treeData" :defaultProps="defaultProps" :showInput="false" :default-checked-keys="defaultCheckedKeys"
show-checkbox no-checkbox node-key="id" ref="warnTreeRef" class="warn-tree">
show-checkbox no-checkbox node-key="id" @node-click="nodeClick" ref="warnTreeRef" class="warn-tree">
<template v-slot:default="{ node, data }">
<span class="name">{{ data.name }}</span>
</template>
<template v-slot:right="{ node, data }">
<el-dropdown @command="handleCommand($event, data)" v-if="data && !data.children">
<span class="btn-item">
<i class="el-icon-more"></i>
<img src="@/assets/common/icon-more.png" alt="">
</span>
<template #dropdown>
<el-dropdown-menu class="dropdown-menu">
@ -20,15 +20,14 @@
</template>
</el-dropdown>
</template>
</Tree>
<forecastDetail class="detail-right"></forecastDetail>
<forecastDetail class="detail-right" :warnItem="wranDetailData"></forecastDetail>
</div>
</template>
<script>
import forecastDetail from '../components/forecastDetail.vue'
import Tree from '../components/Tree.vue'
import { TreeData } from "../js/detailData";
import { TreeData, wranPlan } from "../js/detailData";
export default {
components: { Tree, forecastDetail },
data () {
@ -45,9 +44,21 @@ export default {
checkedKeys: [],
entityFeatures: [],
childArr: [],
wranDetailData: [],
treePlanId: '1759858444149125142'
};
},
mounted () {
let wranPlanData = wranPlan.find(item => item.planId === this.treePlanId)
this.wranDetailData = wranPlanData ? wranPlanData.data : []
},
methods: {
nodeClick (data, node, self) {
// console.log(data, node, self);
this.treePlanId = data.id
let wranPlanData = wranPlan.find(item => item.planId === data.id)
this.wranDetailData = wranPlanData ? wranPlanData.data : wranPlan.find(item => item.planId === 'root').data
},
handleCommand (node, data) {
console.log(node, data, 'node, data');
}
@ -75,4 +86,9 @@ export default {
overflow-x: hidden;
border-left: 1px solid #E5E5E5;
}
.btn-item {
height: 16px;
width: 16px;
}
</style>

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

File diff suppressed because it is too large
Write Preview
Loading…
Cancel
Save