优化261 262 275 合并单元格颜色问题 现在默认是275的方法

src/components/DataModal/common/RealtimeTable.vue

@@ -1,28 +1,28 @@
 <template>
   <div class="realtime-table">
-<!--&lt;!&ndash;    :span-method="objectSpanMethod262"&ndash;&gt;  合并单元格-->
+    <!--&lt;!&ndash;    :span-method="objectSpanMethod262"&ndash;&gt;  合并单元格-->
     <el-table
-      v-loading="tableData.length <= 0"
-      element-loading-background="inherit"
-      :span-method="objectSpanMethod261"
-      :data="tableData"
-      :header-cell-style="{
+        v-loading="tableData.length <= 0"
+        element-loading-background="inherit"
+        :span-method="objectSpanMethod275"
+        :data="tableData"
+        :header-cell-style="{
         color: '#FFF',
         fontSize: '16px',
         background: 'inherit',
         borderBottom: 'none'
       }"
-      :cell-style="getCellStyle261"
-      row-key="id"
-      :border="false"
-      style="background-color: inherit">
+        :cell-style="getCellStyle275"
+        row-key="id"
+        :border="false"
+        style="background-color: inherit">
       <el-table-column
           prop="remark"
           label="操作间"
           align="center"
       >
         <template slot-scope="scope">
-          <div :style="getStyleForIndex261(scope.row, scope.$index)">
+          <div :style="getStyle(scope.$index)">
             <el-tooltip :content="scope.row.remark" placement="top" v-if="scope.row.remark.length > 4">
               <div>
                 {{ scope.row.remark.slice(0, 4) + '.' }}
@@ -43,15 +43,15 @@
       <!--            {{ scope.row.remark }}-->
       <!--          </div>-->
       <el-table-column
-        column-key="second"
-        prop="second"
-        label="设备名称"
-        align="center"
+          column-key="second"
+          prop="second"
+          label="设备名称"
+          align="center"
       >
         <template slot-scope="scope">
-<!--          <div :style="{ color: scope.row.status ? '#5daf34' : '#f19409' }">{{ scope.row.second }}</div>-->
+          <!--          <div :style="{ color: scope.row.status ? '#5daf34' : '#f19409' }">{{ scope.row.second }}</div>-->
           <el-tooltip :content="scope.row.second" placement="top" v-if="scope.row.second.length > 4">
-            <div :style="{ color: scope.row.status ? '#5daf34' : '#f19409' }" >
+            <div :style="{ color: scope.row.status ? '#5daf34' : '#f19409' }">
               {{ scope.row.second.slice(0, 4) + '..' }}
             </div>
           </el-tooltip>
@@ -61,16 +61,18 @@
         </template>
       </el-table-column>
       <el-table-column
-        v-if="item.prop !== 'second'"
-        v-for="item in tableColumns"
-        :key="item.id"
-        :column-key="item.prop"
-        :prop="item.prop"
-        :label="item.label"
-        :align="item.align ? item.align : 'center'"
+          v-if="item.prop !== 'second'"
+          v-for="item in tableColumns"
+          :key="item.id"
+          :column-key="item.prop"
+          :prop="item.prop"
+          :label="item.label"
+          :align="item.align ? item.align : 'center'"
       >
         <template slot-scope="scope">
-          <span>{{ Number(scope.row[item.prop]).toFixed(2) === 'NaN' ? '' : Number(scope.row[item.prop]).toFixed(2) }}</span>
+          <span>{{
+              Number(scope.row[item.prop]).toFixed(2) === 'NaN' ? '' : Number(scope.row[item.prop]).toFixed(2)
+            }}</span>
         </template>
       </el-table-column>
       <!--
@@ -109,9 +111,10 @@
 </template>
 
 <script>
-import { findEntityByAcqId } from '@/api/CollectEntity'
-import { findTableColumnsNotStatus } from '@/api/TableConfig'
-import { mapState } from 'vuex'
+import {findEntityByAcqId} from '@/api/CollectEntity'
+import {findTableColumnsNotStatus} from '@/api/TableConfig'
+import {mapState} from 'vuex'
+
 export default {
   name: 'RealtimeTable',
   data() {
@@ -120,7 +123,17 @@ export default {
       tableDataWrapper: [],
       tableColumns: [],
       tableData: [],
-      color:'',
+      color: '',
+      style0: { color: '#f19409' },
+      style1: { color: '#f19409' },
+      style2: { color: '#f19409' },
+      style3: { color: '#f19409' },
+      style4: { color: '#f19409' },
+      style5: { color: '#f19409' },
+      style6: { color: '#f19409' },
+      style7: { color: '#f19409' },
+      style8: { color: '#f19409' },
+      style9: { color: '#f19409' },
     }
   },
   computed: {
@@ -140,7 +153,10 @@ export default {
     },
   },
   methods: {
-    objectSpanMethod275({ row, column, rowIndex, columnIndex }) {
+    getStyle(index) {
+      return this['style' + index]
+    },
+    objectSpanMethod275({row, column, rowIndex, columnIndex}) {
       if (columnIndex === 0) {
         // 根据 rowIndex 判断应用的合并规则
         if (rowIndex === 1) {
@@ -190,39 +206,6 @@ export default {
         }
       }
     },
-    getStyleForIndex261(row, index){
-      // 检查第0行和第1行的状态
-      if (index === 0 || index === 1) {
-        const firstRow = this.tableData[0];
-        const secondRow = this.tableData[1];
-        if (firstRow.status || secondRow.status) {
-          console.log(1)
-          console.log('firstRow',firstRow)
-          console.log('secondRow',secondRow)
-          return { color: '#5daf34' };
-        } else {
-          console.log(2)
-          console.log('firstRow',firstRow.status)
-          console.log('secondRow',secondRow.status)
-          return { color: '#f19409' };
-        }
-      }
-
-      // 检查第3行和第4行的状态
-      if (index === 3 || index === 4) {
-        const thirdRow = this.tableData[3];
-        const fourthRow = this.tableData[4];
-        if (thirdRow.status || fourthRow.status) {
-          return { color: '#5daf34' };
-        } else {
-          return { color: '#f19409' };
-        }
-      }
-
-      // 对其他行分别设置颜色
-      return { color: row.status ? '#5daf34' : '#f19409' };
-    },
-
     // objectSpanMethod261({row, column, rowIndex, columnIndex }){
     //   if (columnIndex === 0) {
     //     // 根据 rowIndex 判断应用的合并规则
@@ -259,41 +242,41 @@ export default {
     //     }
     //   }
     // },
-    objectSpanMethod261({ row, column, rowIndex, columnIndex }) {
+    objectSpanMethod261({row, column, rowIndex, columnIndex}) {
       if (columnIndex === 0) {
         if (rowIndex === 0) {
-          return { rowspan: 2, colspan: 1 };
+          return {rowspan: 2, colspan: 1};
         } else if (rowIndex === 1) {
-          return { rowspan: 0, colspan: 0 };
+          return {rowspan: 0, colspan: 0};
         } else if (rowIndex === 3) {
-          return { rowspan: 2, colspan: 1 };
+          return {rowspan: 2, colspan: 1};
         } else if (rowIndex === 4) {
-          return { rowspan: 0, colspan: 0 };
+          return {rowspan: 0, colspan: 0};
         } else {
-          return { rowspan: 1, colspan: 1 }; // 默认情况，不合并
+          return {rowspan: 1, colspan: 1}; // 默认情况，不合并
         }
       }
       if (columnIndex === 4) {
         if (rowIndex === 0) {
-          return { rowspan: 2, colspan: 1 };
+          return {rowspan: 2, colspan: 1};
         } else if (rowIndex === 1) {
-          return { rowspan: 0, colspan: 0 };
+          return {rowspan: 0, colspan: 0};
         } else if (rowIndex === 3) {
-          return { rowspan: 2, colspan: 1 };
+          return {rowspan: 2, colspan: 1};
         } else if (rowIndex === 4) {
-          return { rowspan: 0, colspan: 0 };
+          return {rowspan: 0, colspan: 0};
         } else {
-          return { rowspan: 1, colspan: 1 }; // 默认情况，不合并
+          return {rowspan: 1, colspan: 1}; // 默认情况，不合并
         }
       }
     },
-    objectSpanMethod262({row, column, rowIndex, columnIndex }){
+    objectSpanMethod262({row, column, rowIndex, columnIndex}) {
 
       if (columnIndex === 0) {
         // 根据 rowIndex 判断应用的合并规则
         if (rowIndex === 0) {
           return {rowspan: 2, colspan: 1};
-        }else if (rowIndex=== 1){
+        } else if (rowIndex === 1) {
           return {rowspan: 0, colspan: 0};
         } else if (rowIndex === 2) {
           return {rowspan: 3, colspan: 1};
@@ -311,10 +294,9 @@ export default {
         if (rowIndex === 0) {
 
           return {rowspan: 2, colspan: 1};
-        }else if (rowIndex===1){
+        } else if (rowIndex === 1) {
           return {rowspan: 0, colspan: 0};
-        }
-        else if (rowIndex === 2) {
+        } else if (rowIndex === 2) {
           return {rowspan: 3, colspan: 1};
         } else if (rowIndex === 3) {
 
@@ -329,13 +311,12 @@ export default {
     },
     // 表格方法开始
     async getTableData() {
-      console.log(1)
       const handleData = (dataArr, data) => {
         for (const item of data) {
           const obj = {
             id: item.id,
             first: item.collectStationName,
-            remark:item.remark,
+            remark: item.remark,
             second: item.entityName,
             startType: item.startType,
             limitValue: item.limitValue,
@@ -351,7 +332,7 @@ export default {
       }
       await findTableColumnsNotStatus().then(res => {
         if (res && res.code === '200') {
-          this.tableColumns = res.data.filter(e=>e.prop!=='remark')
+          this.tableColumns = res.data.filter(e => e.prop !== 'remark')
         }
       })
       const params = {
@@ -364,6 +345,29 @@ export default {
         this.tableDataWrapper = tableDataWrapper
       })
     },
+    setWorkspaceStyle261() {
+      this.style0 = this.tableData[0].status || this.tableData[1].status ? {color: '#5daf34'} : {color: '#f19409'}
+      this.style2 = this.tableData[2].status ? {color: '#5daf34'} : {color: '#f19409'}
+      this.style3 = this.tableData[3].status || this.tableData[4].status ? {color: '#5daf34'} : {color: '#f19409'}
+      this.style5 = this.tableData[5].status ? {color: '#5daf34'} : {color: '#f19409'}
+    },
+    setWorkspaceStyle262() {
+      this.style0 = this.tableData[0].status || this.tableData[1].status ? {color: '#5daf34'} : {color: '#f19409'}
+      this.style2 = this.tableData[2].status || this.tableData[3].status ||this.tableData[4].status ? {color: '#5daf34'} : {color: '#f19409'}
+      this.style5 = this.tableData[5].status ? {color: '#5daf34'} : {color: '#f19409'}
+      this.style6 = this.tableData[6].status ? {color: '#5daf34'} : {color: '#f19409'}
+      this.style7 = this.tableData[7].status ? {color: '#5daf34'} : {color: '#f19409'}
+      this.style8 = this.tableData[8].status ? {color: '#5daf34'} : {color: '#f19409'}
+
+    },
+    setWorkspaceStyle275() {
+      this.style0 = this.tableData[0].status ? {color: '#5daf34'} : {color: '#f19409'}
+      this.style1 = this.tableData[1].status || this.tableData[2].status? {color: '#5daf34'} : {color: '#f19409'}
+      this.style3 = this.tableData[3].status ? {color: '#5daf34'} : {color: '#f19409'}
+      this.style4 = this.tableData[4].status ? {color: '#5daf34'} : {color: '#f19409'}
+      this.style5 = this.tableData[5].status || this.tableData[6].status? {color: '#5daf34'} : {color: '#f19409'}
+      this.style7 = this.tableData[7].status || this.tableData[8].status? {color: '#5daf34'} : {color: '#f19409'}
+    },
     // getCellStyle({ row, column, rowIndex, columnIndex }) {
     //   const obj = {
     //     color: '#FFF',
@@ -380,7 +384,7 @@ export default {
     //   }
     //   return obj
     // },
-    getCellStyle261({ row, column, rowIndex, columnIndex }) {
+    getCellStyle261({row, column, rowIndex, columnIndex}) {
 
       const obj = {
         color: '#FFF',
@@ -394,7 +398,7 @@ export default {
 
       return obj
     },
-    getCellStyle262({ row, column, rowIndex, columnIndex }) {
+    getCellStyle262({row, column, rowIndex, columnIndex}) {
       const obj = {
         color: '#FFF',
         fontSize: '18px',
@@ -406,7 +410,7 @@ export default {
       }
       return obj
     },
-    getCellStyle275({ row, column, rowIndex, columnIndex }) {
+    getCellStyle275({row, column, rowIndex, columnIndex}) {
       const obj = {
         color: '#FFF',
         fontSize: '18px',
@@ -432,7 +436,9 @@ export default {
           item.status = item.FEEDBACK === 1
         }
         this.tableData = tableData
-
+        // this.setWorkspaceStyle261()
+        // this.setWorkspaceStyle262()
+        this.setWorkspaceStyle275()
       }
       if (this.realtimeDataArray.length > 10) {
         this.realtimeDataArray = []
@@ -443,27 +449,27 @@ export default {
 </script>
 
 <style lang="less" scoped>
-  .realtime-table {
-    width: 100%;
+.realtime-table {
+  width: 100%;
 
-    /deep/ .el-table tr {
-      background-color: inherit;
-    }
+  /deep/ .el-table tr {
+    background-color: inherit;
+  }
 
-    /deep/ .el-table--border::after, .el-table--group::after, .el-table::before {
-      content: '';
-      position: absolute;
-      background-color: inherit;
-      z-index: 1;
-    }
+  /deep/ .el-table--border::after, .el-table--group::after, .el-table::before {
+    content: '';
+    position: absolute;
+    background-color: inherit;
+    z-index: 1;
+  }
 
-    /deep/ .el-table--enable-row-hover .el-table__body tr:hover > td {
-      background-color: inherit;
-      cursor: pointer;
-    }
+  /deep/ .el-table--enable-row-hover .el-table__body tr:hover > td {
+    background-color: inherit;
+    cursor: pointer;
+  }
 
-    /deep/ .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
-      border-bottom: none;
-    }
+  /deep/ .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
+    border-bottom: none;
   }
+}
 </style>

src/views/Data.vue

@@ -26,7 +26,7 @@
     <el-table
       :data="tableData"
       height="100%"
-      :span-method="objectSpanMethod262"
+      :span-method="objectSpanMethod275"
       :header-cell-style="{
         background: '#BFBFBF',
         boxShadow: 'inset grey 0px -1px',
@@ -287,7 +287,7 @@ export default {
         // 按照实体分类, 对应第二列
         const tableDataWrapper = []
         handleData(tableDataWrapper, res.data)
-        setOperate261(tableDataWrapper)
+        setOperate275(tableDataWrapper)
         this.tableDataWrapper = tableDataWrapper
       })
       const handleData = (dataArr, data) => {