优化261 262 275 方法

src/components/DataModal/common/RealtimeTable.vue

@@ -4,7 +4,7 @@
     <el-table
       v-loading="tableData.length <= 0"
       element-loading-background="inherit"
-      :span-method="objectSpanMethod262"
+      :span-method="objectSpanMethod261"
       :data="tableData"
       :header-cell-style="{
         color: '#FFF',
@@ -12,7 +12,7 @@
         background: 'inherit',
         borderBottom: 'none'
       }"
-      :cell-style="getCellStyle262"
+      :cell-style="getCellStyle261"
       row-key="id"
       :border="false"
       style="background-color: inherit">
@@ -22,17 +22,26 @@
           align="center"
       >
         <template slot-scope="scope">
-          <el-tooltip :content="scope.row.remark" placement="top" v-if="scope.row.remark.length > 4">
-            <div :style="{ color: scope.row.status ? '#5daf34' : '#f19409' }">
-              {{ scope.row.remark.slice(0, 4) + '.' }}
+          <div :style="getStyleForIndex261(scope.row, scope.$index)">
+            <el-tooltip :content="scope.row.remark" placement="top" v-if="scope.row.remark.length > 4">
+              <div>
+                {{ scope.row.remark.slice(0, 4) + '.' }}
+              </div>
+            </el-tooltip>
+            <div v-else>
+              {{ scope.row.remark }}
             </div>
-          </el-tooltip>
-          <div v-else :style="{ color: scope.row.status ? '#5daf34' : '#f19409' }">
-            {{ scope.row.remark }}
           </div>
         </template>
       </el-table-column>
-
+      <!--          <el-tooltip :content="scope.row.remark" placement="top" v-if="scope.row.remark.length > 4">-->
+      <!--            <div :style="objectSpanMethod261">-->
+      <!--              {{ scope.row.remark.slice(0, 4) + '.' }}-->
+      <!--            </div>-->
+      <!--          </el-tooltip>-->
+      <!--          <div v-else :style="{ color: scope.row.status ? '#5daf34' : '#f19409' }" >-->
+      <!--            {{ scope.row.remark }}-->
+      <!--          </div>-->
       <el-table-column
         column-key="second"
         prop="second"
@@ -42,7 +51,7 @@
         <template slot-scope="scope">
 <!--          <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>
@@ -111,6 +120,7 @@ export default {
       tableDataWrapper: [],
       tableColumns: [],
       tableData: [],
+      color:'',
     }
   },
   computed: {
@@ -180,41 +190,100 @@ export default {
         }
       }
     },
-    objectSpanMethod261({row, column, rowIndex, columnIndex }){
-      if (columnIndex === 0) {
-        // 根据 rowIndex 判断应用的合并规则
-        if (rowIndex === 0) {
+    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' };
+        }
+      }
 
-          return {rowspan: 2, colspan: 1};
-        }else if (rowIndex===1){
-          return {rowspan: 0, colspan: 0};
+      // 检查第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' };
         }
-        else if (rowIndex === 3) {
+      }
 
-          return {rowspan: 2, colspan: 1};
-        } else if (rowIndex === 4) {
+      // 对其他行分别设置颜色
+      return { color: row.status ? '#5daf34' : '#f19409' };
+    },
 
-          return {rowspan: 0, colspan: 0};
-        }  else {
-          return {rowspan: 1, colspan: 1}; // 默认情况，不合并
+    // objectSpanMethod261({row, column, rowIndex, columnIndex }){
+    //   if (columnIndex === 0) {
+    //     // 根据 rowIndex 判断应用的合并规则
+    //     if (rowIndex === 0) {
+    //       return {rowspan: 2, colspan: 1};
+    //     }else if (rowIndex===1){
+    //       return {rowspan: 0, colspan: 0};
+    //     }
+    //     else if (rowIndex === 3) {
+    //
+    //       return {rowspan: 2, colspan: 1};
+    //     } else if (rowIndex === 4) {
+    //
+    //       return {rowspan: 0, colspan: 0};
+    //     }  else {
+    //       return {rowspan: 1, colspan: 1}; // 默认情况，不合并
+    //     }
+    //   }
+    //   if (columnIndex === 4) {
+    //     // 根据 rowIndex 判断应用的合并规则
+    //     if (rowIndex === 0) {
+    //       return {rowspan: 2, colspan: 1};
+    //     }else if (rowIndex===1){
+    //       return {rowspan: 0, colspan: 0};
+    //     }
+    //     else if (rowIndex === 3) {
+    //
+    //       return {rowspan: 2, colspan: 1};
+    //     } else if (rowIndex === 4) {
+    //
+    //       return {rowspan: 0, colspan: 0};
+    //     }  else {
+    //       return {rowspan: 1, colspan: 1}; // 默认情况，不合并
+    //     }
+    //   }
+    // },
+    objectSpanMethod261({ row, column, rowIndex, columnIndex }) {
+      if (columnIndex === 0) {
+        if (rowIndex === 0) {
+          return { rowspan: 2, colspan: 1 };
+        } else if (rowIndex === 1) {
+          return { rowspan: 0, colspan: 0 };
+        } else if (rowIndex === 3) {
+          return { rowspan: 2, colspan: 1 };
+        } else if (rowIndex === 4) {
+          return { rowspan: 0, colspan: 0 };
+        } else {
+          return { rowspan: 1, colspan: 1 }; // 默认情况，不合并
         }
       }
       if (columnIndex === 4) {
-        // 根据 rowIndex 判断应用的合并规则
         if (rowIndex === 0) {
-
-          return {rowspan: 2, colspan: 1};
-        }else if (rowIndex===1){
-          return {rowspan: 0, colspan: 0};
-        }
-        else if (rowIndex === 3) {
-
-          return {rowspan: 2, colspan: 1};
+          return { rowspan: 2, colspan: 1 };
+        } else if (rowIndex === 1) {
+          return { rowspan: 0, colspan: 0 };
+        } else if (rowIndex === 3) {
+          return { rowspan: 2, colspan: 1 };
         } else if (rowIndex === 4) {
-
-          return {rowspan: 0, colspan: 0};
-        }  else {
-          return {rowspan: 1, colspan: 1}; // 默认情况，不合并
+          return { rowspan: 0, colspan: 0 };
+        } else {
+          return { rowspan: 1, colspan: 1 }; // 默认情况，不合并
         }
       }
     },
@@ -260,6 +329,7 @@ export default {
     },
     // 表格方法开始
     async getTableData() {
+      console.log(1)
       const handleData = (dataArr, data) => {
         for (const item of data) {
           const obj = {
@@ -311,6 +381,7 @@ export default {
     //   return obj
     // },
     getCellStyle261({ row, column, rowIndex, columnIndex }) {
+
       const obj = {
         color: '#FFF',
         fontSize: '18px',
@@ -320,6 +391,7 @@ export default {
       } else {
         obj.background = ''
       }
+
       return obj
     },
     getCellStyle262({ row, column, rowIndex, columnIndex }) {

src/views/Data.vue

@@ -287,7 +287,7 @@ export default {
         // 按照实体分类, 对应第二列
         const tableDataWrapper = []
         handleData(tableDataWrapper, res.data)
-        setOperate262(tableDataWrapper)
+        setOperate261(tableDataWrapper)
         this.tableDataWrapper = tableDataWrapper
       })
       const handleData = (dataArr, data) => {