fix: 数据字段更换

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

@@ -26,43 +26,24 @@
                 </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="预警状态">
+                    <el-table height="258" v-if="!loading" :data="item.tableData" border class="table-fixed" ref="table-fixed">
+                        <el-table-column v-for="(items, indexs) in analysisTableColumnData" :key="indexs" :prop="items.prop" align="center" :label="items.label" width="110">
                             <template slot-scope="scope">
-                                <div @click="openWarnDeal(scope.row)"
+                                <div @click="openWarnDeal(scope.row)" v-if="items.prop === 'warningStatus'" 
                                     :class="{ 'green-span': scope.row.warningStatus !== '1' }" class="default-span">
                                     {{ scope.row.warningStatus === '1' ? '处理中' : '已处理' }}
                                 </div>
+                                <div v-else>{{ scope.row[`${items.prop}`] }}</div>
                             </template>
                         </el-table-column>
-                        <el-table-column prop="warningInfo" align="center" label="预报">
-                        </el-table-column>
                     </el-table>
                 </div>
             </div>
         </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>
-                <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 height="235" v-if="!loading" :data="flowTableData" border class="table-fixed">
+                <el-table-column v-for="(item, index) in flowTableColumnData" :key="index" :prop="item.prop" align="center" :label="item.label">
                 </el-table-column>
             </el-table>
         </div>
@@ -184,7 +165,10 @@ export default {
                     value: '1小时'
                 },
             ],
-            isSuccessDeal: false
+            isSuccessDeal: false,
+            analysisTableColumnData: [],
+            flowTableColumnData: [],
+            loading: false
         };
     },
     watch: {
@@ -204,13 +188,16 @@ export default {
     },
     methods: {
         init () {
+            this.resetData()
             if (!this.warnItem.length) return
+            this.loading = true
             this.warnDetailData = this.warnItem.find(item => item.warnType === this.selectValue)
-            const { warnTypeList, checkbox, analysisTableData, flowTableData, flowWaterChartData, analysisTableName } = this.warnDetailData
+            const { warnTypeList, checkbox, analysisTableData, flowTableData, flowWaterChartData, analysisTableName, analysisTableColumnData, flowTableColumnData } = this.warnDetailData
             this.radioOptions = warnTypeList
             this.flowTableData = flowTableData
             this.isCheckbox = checkbox
-            this.analysisList = []
+            this.analysisTableColumnData = analysisTableColumnData
+            this.flowTableColumnData = flowTableColumnData
             if (checkbox) {
                 this.checkedValue.forEach(elem => {
                     let chart = flowWaterChartData.find(item => item.id === elem)
@@ -222,9 +209,12 @@ export default {
             }
             this.$nextTick(() => {
                 this.initChart()
+                this.loading = false
             });
+            
         },
         changeProject (data) {
+            this.loading = true
             this.radioValue = data
             this.checkedValue = ['1']
             this.analysisList = []
@@ -232,9 +222,11 @@ export default {
             this.analysisList.push({ chartId: 'chart' + data, chartData: chart, tableName: this.warnDetailData.analysisTableName, tableData: this.warnDetailData.analysisTableData })
             this.$nextTick(() => {
                 this.initChart()
+                this.loading = false
             });
         },
         changeCheckProject (data) {
+            this.loading = true
             this.radioValue = '1'
             this.checkedValue = data
             this.analysisList = []
@@ -244,18 +236,22 @@ export default {
             });
             this.$nextTick(() => {
                 this.initChart()
+                this.loading = false
             });
         },
         changeType (val) {
+            this.resetData()
+            this.loading = true
             this.warnDetailData = this.warnItem.find(item => item.warnType === this.selectValue)
-            const { warnTypeList, checkbox, analysisTableData, flowTableData, flowWaterChartData, analysisTableName } = this.warnDetailData
+            const { warnTypeList, checkbox, analysisTableData, flowTableData, flowWaterChartData, analysisTableName, analysisTableColumnData, flowTableColumnData } = this.warnDetailData
             this.radioOptions = warnTypeList
             this.flowTableData = flowTableData
             this.isCheckbox = checkbox
+            this.analysisTableColumnData = analysisTableColumnData
+            this.flowTableColumnData = flowTableColumnData
             this.selectValue = val
             this.radioValue = '1'
             this.checkedValue = ['1']
-            this.analysisList = []
             if (checkbox) {
                 this.checkedValue.forEach(elem => {
                     let chart = flowWaterChartData.find(item => item.id === elem)
@@ -267,8 +263,17 @@ export default {
             }
             this.$nextTick(() => {
                 this.initChart()
+                this.loading = false
             });
         },
+        resetData() {
+            this.analysisList = []
+            this.analysisTableColumnData = []
+            this.flowTableColumnData = [] 
+            this.radioOptions = []
+            this.flowTableData = []
+            this.isCheckbox = false
+        },
         initChart () {
             this.analysisList.forEach((data) => {
                 let chart = echarts.init(document.getElementById(data.chartId));
@@ -461,6 +466,7 @@ export default {
         .warn-analysis {
             width: 441px;
             height: 300px;
+            padding-right: 16px;
             border-right: 1px solid #E5E5E5;
         }
     }
@@ -501,6 +507,11 @@ export default {
     .green-span {
         color: #31A08E;
     }
+    ::v-deep.table-fixed {
+        .el-table__body-wrapper {
+            height: calc(100% - 44px) !important;
+        }
+    }
 }
 
 ::v-deep.drawer-wrapper {