Browse Source

初始信息配置完成

master_tdsql
hejunjie 1 year ago
parent
commit
89e6e4e88e
  1. 11
      src/views/aiSupervision/compoments/tree/Tree.vue
  2. 2
      src/views/aiSupervision/fourPredictions/planInfo/detail/PlanDetail.vue
  3. 416
      src/views/aiSupervision/fourPredictions/warnInfo/components/forecastDetail.vue
  4. 113
      src/views/aiSupervision/fourPredictions/warnInfo/detail/PlanDetail.vue
  5. 421
      src/views/aiSupervision/fourPredictions/warnInfo/js/detailData.js
  6. 105
      src/views/aiSupervision/waterSetting/InitialInformation/detail/PlanDetail.vue
  7. 93
      src/views/aiSupervision/waterSetting/InitialInformation/detail/edit.vue
  8. 52
      src/views/aiSupervision/waterSetting/InitialInformation/index.vue
  9. 205
      src/views/aiSupervision/waterSetting/const.js

11
src/views/aiSupervision/compoments/tree/Tree.vue

@ -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 {

2
src/views/aiSupervision/fourPredictions/planInfo/detail/PlanDetail.vue

@ -187,7 +187,7 @@ export default {
@click="handleAdd()"
>新增
</el-button>
<el-table height="625" :data="tableData" border>
<el-table :data="tableData" border>
<el-table-column type="index" align="center" label="序号" width="100">
</el-table-column>
<el-table-column prop="planName" align="center" label="预案名称">

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

@ -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

@ -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 '../../../compoments/tree/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": "17529327 66908338178",
"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

@ -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
}
]
},
]

105
src/views/aiSupervision/waterSetting/InitialInformation/detail/PlanDetail.vue

@ -1,7 +1,7 @@
<script>
import { getAreasData } from "@/api/areas/index";
import Edit from "./edit.vue";
import { ENGINTYPE, PLANLIST } from "../../const";
import { STATIONTYPE, PLANLIST } from "../../const";
let that;
export default {
name: "PlanDetail",
@ -11,23 +11,22 @@ export default {
data() {
return {
searchForm: {
enginType: "1",
adcd: "",
stationType: "1",
value: ""
},
dialog: {
title: "新增预案",
title: "新增配置",
dom: "",
visible: false,
},
mdl: null,
enginTypeList: ENGINTYPE, //
stationTypeList: [],
areasOptions: [],
areasOptionProps: {
emitPath: false,
checkStrictly: true, //
},
enginType: '0',
tableData: [],
pageData: {
pageNum: 1, //
@ -39,13 +38,10 @@ export default {
},
created() {
that = this;
},
filters: {
//
filterembankment(price) {
const data = that.enginTypeList.filter((res) => res.dictValue == price);
return data[0] ? data[0].dictLabel : "/";
},
this.enginType = this.$route.query.enginType
this.stationTypeList = STATIONTYPE.filter(res =>{
return res.dictType == this.enginType
})[0].dictValue
},
methods: {
handleGoManage(row) {
@ -94,7 +90,6 @@ export default {
this.$message.success("删除成功");
},
submitForm() {
console.log(123)
this.$refs.component.submitForm(async (from) => {
if (this.mdl) {
this.$message.success("修改成功");
@ -134,14 +129,23 @@ export default {
}
});
},
handleStation() {
this.getTableData()
},
//
getTableData() {
console.log(this.searchForm);
const list = PLANLIST.filter(res => {
let filter = true
if (res.enginType !== this.enginType) {
filter = false
}
if (res.stationType !== this.searchForm.stationType) {
filter = false
}
//
if (this.searchForm.value) {
if (!res.planName.includes(this.searchForm.value)) {
if (!res.codeNum.includes(this.searchForm.value) && !res.name.includes(this.searchForm.value)) {
filter = false
}
}
@ -167,11 +171,21 @@ export default {
ref="searchForm"
class="demo-ruleForm"
>
<el-form-item label="测站/测点类型:" prop="enginType">
<el-select v-model="searchForm.stationType" @change="handleStation" placeholder="请选择">
<el-option
v-for="item in stationTypeList"
:label="item.dictLabel"
:value="item.dictValue"
:key="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item prop="value">
<el-input
v-model="searchForm.value"
class="search-input"
placeholder="请输入名称"
placeholder="请输入图层目录名称或编号"
></el-input>
</el-form-item>
<el-form-item>
@ -187,18 +201,54 @@ export default {
@click="handleAdd()"
>新增
</el-button>
<el-table height="625" :data="tableData" border>
<el-table-column type="index" align="center" label="序号" width="100">
<el-table :data="tableData" border>
<el-table-column key="1" type="index" align="center" label="序号" width="100">
</el-table-column>
<el-table-column key="2" v-if="searchForm.stationType === '0'" prop="name" align="center" label="水位站名">
</el-table-column>
<el-table-column key="3" v-if="searchForm.stationType === '1'" prop="name" align="center" label="雨量站名">
</el-table-column>
<el-table-column key="4" v-if="searchForm.stationType === '2'" prop="name" align="center" label="视频站名">
</el-table-column>
<el-table-column key="5" v-if="enginType === '0' && searchForm.stationType === '3'" prop="name" align="center" label="渗压计名">
</el-table-column>
<el-table-column key="6" v-if="enginType === '1' && searchForm.stationType === '3'" prop="name" align="center" label="水平变形监测组名">
</el-table-column>
<el-table-column key="7" v-if="enginType === '1' && searchForm.stationType === '4'" prop="name" align="center" label="沉降监测组名">
</el-table-column>
<el-table-column key="8" v-if="enginType === '1' && searchForm.stationType === '5'" prop="name" align="center" label="水质监测组名">
</el-table-column>
<el-table-column key="9" v-if="enginType === '1' && searchForm.stationType === '6'" prop="name" align="center" label="流量监测点名">
</el-table-column>
<el-table-column key="10" v-if="enginType === '1' && searchForm.stationType === '7'" prop="name" align="center" label="闸门开度监测组名">
</el-table-column>
<el-table-column prop="planName" align="center" label="预案名称">
<el-table-column key="11" prop="codeNum" align="center" label="编号">
</el-table-column>
<el-table-column prop="planType" align="center" label="预案类型">
<el-table-column key="12" v-if="enginType === '1' && ['3','4','5','6'].includes(searchForm.stationType)" prop="gaugingPoint" align="center" label="测点编号">
</el-table-column>
<el-table-column prop="director" align="center" label="负责人">
<el-table-column key="13" v-if="enginType === '1' && searchForm.stationType === '7'" prop="gateNum" align="gateNum" label="闸门编号">
</el-table-column>
<el-table-column prop="correlation" align="center" label="关联对象">
<el-table-column key="14" v-if="enginType !== '0' || searchForm.stationType !== '3'" prop="coors" align="center" label="坐标">
</el-table-column>
<el-table-column prop="updateTime" align="center" label="最近开展时间">
<el-table-column key="15" v-if="enginType === '0' && searchForm.stationType === '3'" prop="pipeOpen" align="center" label="管口高程">
</el-table-column>
<el-table-column key="16" v-if="enginType === '0' && searchForm.stationType === '3'" prop="pipeBottom" align="center" label="管底高程">
</el-table-column>
<el-table-column key="18" v-if="searchForm.stationType === '0'" prop="address" align="center" label="水位值引入地址">
</el-table-column>
<el-table-column key="19" v-if="searchForm.stationType === '1'" prop="address" align="center" label="雨量值引入地址">
</el-table-column>
<el-table-column key="20" v-if="searchForm.stationType === '2'" prop="address" align="center" label="视频引入地址">
</el-table-column>
<el-table-column key="21" v-if="enginType === '0' && searchForm.stationType === '3'" prop="address" align="center" label="渗透压力值引入地址">
</el-table-column>
<el-table-column key="22" v-if="enginType === '1' && ['3','4'].includes(searchForm.stationType)" prop="address" align="center" label="位移值引入地址">
</el-table-column>
<el-table-column key="23" v-if="enginType === '1' && searchForm.stationType === '5'" prop="address" align="center" label="水质值引入地址">
</el-table-column>
<el-table-column key="24" v-if="enginType === '1' && searchForm.stationType === '6'" prop="address" align="center" label="流量值引入地址">
</el-table-column>
<el-table-column key="25" v-if="enginType === '1' && searchForm.stationType === '7'" prop="address" align="center" label="闸门开度值引入地址">
</el-table-column>
<el-table-column
prop="address"
@ -207,14 +257,6 @@ export default {
min-width="200"
>
<template slot-scope="scope">
<el-button
style="margin-right: 16px"
@click="handleCheck(scope.row)"
type="text"
size="small"
>
查看
</el-button>
<el-button
style="margin-right: 16px"
@click="handleEdit(scope.row)"
@ -266,6 +308,7 @@ export default {
:is="dialog.dom"
ref="component"
:model="mdl"
:enginType="enginType"
></component>
<div slot="footer" class="dialog-footer">
<el-button size="mini" @click="closeDialog"> </el-button>

93
src/views/aiSupervision/waterSetting/InitialInformation/detail/edit.vue

@ -1,22 +1,30 @@
<script>
import { STATIONTYPE } from "../../const";
export default {
name: "Edit",
props: {
model: {
type: Object,
default: null
},
enginType: {
type: String,
default: '0'
}
},
data() {
return {
stationTypeList: [],
ruleForm: {
planName: '',
correlation: '',
director: '',
planType: '',
updateTime: '',
content: ''
stationType: '',
name: '',
codeNum: '',
pipeOpen: '',
pipeBottom: '',
gaugingPoint: '',
gateNum: '',
coors: '',
address: ''
},
}
},
@ -30,15 +38,24 @@ export default {
}
})
},
handleStation() {
this.$refs.ruleForm.resetFields()
},
},
mounted() {
this.stationTypeList = STATIONTYPE.filter(res =>{
return res.dictType == this.enginType
})[0].dictValue
if (this.model) {
this.ruleForm.planName = this.model.planName
this.ruleForm.correlation = this.model.correlation
this.ruleForm.director = this.model.director
this.ruleForm.planType = this.model.planType
this.ruleForm.updateTime = this.model.updateTime
this.ruleForm.content = this.model.content
this.ruleForm.stationType = this.model.stationType || ''
this.ruleForm.name = this.model.name || ''
this.ruleForm.codeNum = this.model.codeNum || ''
this.ruleForm.pipeOpen = this.model.pipeOpen || ''
this.ruleForm.pipeBottom = this.model.pipeBottom || ''
this.ruleForm.gaugingPoint = this.model.gaugingPoint || ''
this.ruleForm.gateNum = this.model.gateNum || ''
this.ruleForm.coors = this.model.coors || ''
this.ruleForm.address = this.model.address || ''
}
}
}
@ -50,36 +67,58 @@ export default {
:model="ruleForm"
:disabled="!!model && model.eventType !== 'edit'"
ref="ruleForm"
label-width="100px"
label-width="120px"
>
<el-col :span="24">
<el-form-item label-width="120px" label="预案名称" prop="name">
<el-input v-model="ruleForm.planName"></el-input>
<el-form-item label="测站/测点类型:" prop="enginType">
<el-select style="width: 100%;" v-model="ruleForm.stationType" @change="handleStation" placeholder="请选择">
<el-option
v-for="item in stationTypeList"
:label="item.dictLabel"
:value="item.dictValue"
:key="item.id"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label-width="120px" label="关联对象" prop="name">
<el-input v-model="ruleForm.correlation"></el-input>
<el-form-item label-width="120px" label="名称" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label-width="120px" label="负责人" prop="number">
<el-input v-model="ruleForm.director"></el-input>
</el-form-item>
<el-form-item label-width="120px" label="编号" prop="codeNum">
<el-input v-model="ruleForm.codeNum"></el-input>
</el-form-item>
</el-col>
<el-col :span="24" v-if="enginType === '1' && ['3','4','5','6'].includes(ruleForm.stationType)">
<el-form-item label-width="120px" label="测点编号" prop="gaugingPoint">
<el-input v-model="ruleForm.gaugingPoint"></el-input>
</el-form-item>
</el-col>
<el-col :span="24" v-if="enginType === '1' && ruleForm.stationType === '7'">
<el-form-item label-width="120px" label="闸门编号" prop="gateNum">
<el-input v-model="ruleForm.gateNum"></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item v-if="enginType === '0' && ruleForm.stationType === '3'" label-width="120px" label="管口高程" prop="pipeOpen">
<el-input v-model="ruleForm.pipeOpen"></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label-width="120px" label="类型" prop="control">
<el-input v-model="ruleForm.planType"></el-input>
<el-form-item v-if="enginType === '0' && ruleForm.stationType === '3'" label-width="120px" label="管底高程" prop="pipeBottom">
<el-input v-model="ruleForm.pipeBottom"></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label-width="120px" label="开展时间" prop="instruct">
<el-input v-model="ruleForm.updateTime"></el-input>
<el-form-item v-if="enginType !== '0' || ruleForm.stationType !== '3'" label-width="120px" label="坐标" prop="coors">
<el-input v-model="ruleForm.coors"></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label-width="120px" label="预案内容" prop="leftTrunk">
<el-input v-model="ruleForm.content"></el-input>
<el-form-item label-width="120px" label="地址" prop="address">
<el-input v-model="ruleForm.address"></el-input>
</el-form-item>
</el-col>
</el-form>

52
src/views/aiSupervision/waterSetting/InitialInformation/index.vue

@ -42,7 +42,7 @@ export default {
handleGoManage(row) {
this.$router.push({
path: "initialDetail",
query: { id: row.id },
query: { id: row.id, enginType: row.enginType},
});
},
handleCurrentPageChange(page) {
@ -89,9 +89,11 @@ export default {
}
});
},
handleEngin() {
this.getTableData();
},
//
getTableData() {
console.log(this.searchForm);
const list = TABELLIST.filter(res => {
let filter = true
//
@ -136,7 +138,7 @@ export default {
class="demo-ruleForm"
>
<el-form-item label="水工程对象类型:" prop="enginType">
<el-select v-model="searchForm.enginType" placeholder="请选择">
<el-select v-model="searchForm.enginType" @change="handleEngin" placeholder="请选择">
<el-option
v-for="item in enginTypeList"
:label="item.dictLabel"
@ -175,20 +177,56 @@ export default {
</el-table-column>
<el-table-column prop="projectName" align="center" label="项目名">
</el-table-column>
<el-table-column prop="code" align="center" label="编">
<el-table-column prop="num" align="center" label="编">
</el-table-column>
<el-table-column prop="enginName" align="center" label="工程名">
</el-table-column>
<el-table-column prop="id" align="center" label="ID">
</el-table-column>
<el-table-column align="center" label="工程类型">
<el-table-column v-if="searchForm.enginType === '1' || searchForm.enginType === '0'" prop="coors" align="center" label="坐标">
</el-table-column>
<el-table-column v-if="searchForm.enginType === '0'" align="center" label="工程类型">
<template slot-scope="scope">
{{ scope.row.enginType | filterembankment }}
</template>
</el-table-column>
<el-table-column prop="updateTime" align="center" label="最新预报时间">
<el-table-column prop="riversName" align="center" label="所在河流(湖泊)名称">
</el-table-column>
<el-table-column prop="code" align="center" label="编码">
</el-table-column>
<el-table-column v-if="searchForm.enginType === '0'" prop="blockType" align="center" label="挡水主坝类型">
</el-table-column>
<el-table-column v-if="searchForm.enginType === '0'" prop="dischargeType" align="center" label="主要泄洪建筑物型式">
</el-table-column>
<el-table-column v-if="searchForm.enginType === '0'" prop="area" align="center" label="坝址控制流域面积">
</el-table-column>
<el-table-column v-if="searchForm.enginType === '0'" prop="flow" align="center" label="坝址多年平均径流量">
</el-table-column>
<el-table-column v-if="searchForm.enginType === '0'" prop="createTime" align="center" label="建成时间">
</el-table-column>
<el-table-column v-if="searchForm.enginType === '0'" prop="grade" align="center" label="工程等级">
</el-table-column>
<el-table-column v-if="searchForm.enginType === '0'" prop="level" align="center" label="主坝级别">
</el-table-column>
<el-table-column v-if="searchForm.enginType === '0'" prop="dischargeMax" align="center" label="最大泄洪量">
</el-table-column>
<el-table-column v-if="searchForm.enginType === '1'" prop="holeNum" align="center" label="闸孔数">
</el-table-column>
<el-table-column v-if="searchForm.enginType === '1'" prop="width" align="center" label="闸孔总净宽">
</el-table-column>
<el-table-column v-if="searchForm.enginType === '1'" prop="sluiceType" align="center" label="水闸类型">
</el-table-column>
<el-table-column v-if="searchForm.enginType === '1'" prop="createTime" align="center" label="建成时间">
</el-table-column>
<el-table-column v-if="searchForm.enginType === '1'" prop="grade" align="center" label="工程等级">
</el-table-column>
<el-table-column v-if="searchForm.enginType === '2'" prop="shorSeparation" align="center" label="河流岸别">
</el-table-column>
<el-table-column v-if="searchForm.enginType === '2'" prop="dikeType" align="center" label="堤防类型">
</el-table-column>
<el-table-column v-if="searchForm.enginType === '2'" prop="shape" align="center" label="堤防型式">
</el-table-column>
<el-table-column prop="planNum" align="center" label="预案数量">
<el-table-column v-if="searchForm.enginType === '2'" prop="system" align="center" label="高程系统">
</el-table-column>
<el-table-column prop="address" align="center" label="操作">
<template slot-scope="scope">

205
src/views/aiSupervision/waterSetting/const.js

@ -59,40 +59,175 @@ export const ENGINTYPE = [{
dictLabel: '堤防',
dictValue: '2'
}]
// 预案列表
// 可以换成系统字典
export const STATIONTYPE = [{
dictName: '水库',
dictType: '0',
dictValue: [{
dictLabel: '水位站',
dictValue: '0'
},{
dictLabel: '雨量站',
dictValue: '1'
},{
dictLabel: '视频站',
dictValue: '2'
},{
dictLabel: '渗压计',
dictValue: '3'
}]
},{
dictName: '水闸',
dictType: '1',
dictValue: [{
dictLabel: '水位站',
dictValue: '0'
},{
dictLabel: '雨量站',
dictValue: '1'
},{
dictLabel: '视频站',
dictValue: '2'
},{
dictLabel: '水平变形监测组',
dictValue: '3'
},{
dictLabel: '沉降监测组',
dictValue: '4'
},{
dictLabel: '水质监测组',
dictValue: '5'
},{
dictLabel: '流量监测点',
dictValue: '6'
},{
dictLabel: '闸门开度监测组',
dictValue: '7'
}]
},{
dictName: '堤防',
dictType: '2',
dictValue: [{
dictLabel: '水位站',
dictValue: '0'
},{
dictLabel: '雨量站',
dictValue: '1'
},{
dictLabel: '视频站',
dictValue: '2'
}]
},]
// 初始项目详情
export const PLANLIST = [{
planName: '预案一',
planType: '演练',
director: '王宇',
correlation: '飞来峡水峡',
updateTime: '2024-04-10 15:30',
content: '哈哈哈哈啊哈哈哈哈哈',
},{
planName: '预案二',
planType: '演练',
director: '王宇',
correlation: '飞来峡水峡',
updateTime: '2024-04-10 15:30',
content: '哈哈哈哈啊哈哈哈哈哈',
},{
planName: '预案三',
planType: '演练',
director: '王宇',
correlation: '飞来峡水峡',
updateTime: '2024-04-10 15:30',
content: '哈哈哈哈啊哈哈哈哈哈',
},{
planName: '预案四',
planType: '演练',
director: '王宇',
correlation: '飞来峡水峡',
updateTime: '2024-04-10 15:30',
content: '哈哈哈哈啊哈哈哈哈哈',
},{
planName: '预案五',
planType: '演练',
director: '王宇',
correlation: '飞来峡水峡',
updateTime: '2024-04-10 15:30',
content: '哈哈哈哈啊哈哈哈哈哈',
enginType: '0',
stationType: '0',
name: '名称',
codeNum: '编号',
coors: '坐标',
address: '地址',
},{
enginType: '0',
stationType: '1',
name: '名称',
codeNum: '编号',
coors: '坐标',
address: '地址',
},{
enginType: '0',
stationType: '2',
name: '名称',
codeNum: '编号',
coors: '坐标',
address: '地址',
},{
enginType: '0',
stationType: '3',
name: '名称',
codeNum: '编号',
pipeOpen: '管口高程',
pipeBottom: '管底高程',
address: '地址',
},{
enginType: '1',
stationType: '0',
name: '名称',
codeNum: '编号',
coors: '坐标',
address: '地址',
},{
enginType: '1',
stationType: '1',
name: '名称',
codeNum: '编号',
coors: '坐标',
address: '地址',
},{
enginType: '1',
stationType: '2',
name: '名称',
codeNum: '编号',
coors: '坐标',
address: '地址',
},{
enginType: '1',
stationType: '3',
name: '名称',
codeNum: '编号',
gaugingPoint: '测点编号',
coors: '坐标',
address: '地址',
},{
enginType: '1',
stationType: '4',
name: '名称',
codeNum: '编号',
gaugingPoint: '测点编号',
coors: '坐标',
address: '地址',
},{
enginType: '1',
stationType: '5',
name: '名称',
codeNum: '编号',
gaugingPoint: '测点编号',
coors: '坐标',
address: '地址',
},{
enginType: '1',
stationType: '6',
name: '名称',
codeNum: '编号',
gaugingPoint: '测点编号',
coors: '坐标',
address: '地址',
},{
enginType: '1',
stationType: '7',
name: '名称',
codeNum: '编号',
gateNum: '闸门编号',
coors: '坐标',
address: '地址',
},{
enginType: '2',
stationType: '0',
name: '名称',
codeNum: '编号',
coors: '坐标',
address: '地址',
},{
enginType: '2',
stationType: '1',
name: '名称',
codeNum: '编号',
coors: '坐标',
address: '地址',
},{
enginType: '2',
stationType: '2',
name: '名称',
codeNum: '编号',
coors: '坐标',
address: '地址',
}]

Loading…
Cancel
Save