src/components/DataModal/common/RealtimeTable.vue

@@ -1,46 +1,55 @@
 <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="objectSpanMethod262"
-      :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="getCellStyle262"
-      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">
-          <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="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) + '.' }}
+              </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"
-        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' }">
               {{ scope.row.second.slice(0, 4) + '..' }}
@@ -52,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>
       <!--
@@ -100,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() {
@@ -111,6 +123,17 @@ export default {
       tableDataWrapper: [],
       tableColumns: [],
       tableData: [],
+      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: {
@@ -130,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) {
@@ -180,51 +206,77 @@ export default {
         }
       }
     },
-    objectSpanMethod261({row, column, rowIndex, columnIndex }){
+    // 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) {
-        // 根据 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 === 3) {
-
+        } else if (rowIndex === 3) {
           return {rowspan: 2, colspan: 1};
         } else if (rowIndex === 4) {
-
           return {rowspan: 0, colspan: 0};
-        }  else {
+        } else {
           return {rowspan: 1, colspan: 1}; // 默认情况，不合并
         }
       }
       if (columnIndex === 4) {
-        // 根据 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 === 3) {
-
+        } else if (rowIndex === 3) {
           return {rowspan: 2, colspan: 1};
         } else if (rowIndex === 4) {
-
           return {rowspan: 0, colspan: 0};
-        }  else {
+        } else {
           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};
@@ -242,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) {
 
@@ -265,7 +316,7 @@ export default {
           const obj = {
             id: item.id,
             first: item.collectStationName,
-            remark:item.remark,
+            remark: item.remark,
             second: item.entityName,
             startType: item.startType,
             limitValue: item.limitValue,
@@ -281,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 = {
@@ -294,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',
@@ -310,7 +384,8 @@ export default {
     //   }
     //   return obj
     // },
-    getCellStyle261({ row, column, rowIndex, columnIndex }) {
+    getCellStyle261({row, column, rowIndex, columnIndex}) {
+
       const obj = {
         color: '#FFF',
         fontSize: '18px',
@@ -320,9 +395,10 @@ export default {
       } else {
         obj.background = ''
       }
+
       return obj
     },
-    getCellStyle262({ row, column, rowIndex, columnIndex }) {
+    getCellStyle262({row, column, rowIndex, columnIndex}) {
       const obj = {
         color: '#FFF',
         fontSize: '18px',
@@ -334,7 +410,7 @@ export default {
       }
       return obj
     },
-    getCellStyle275({ row, column, rowIndex, columnIndex }) {
+    getCellStyle275({row, column, rowIndex, columnIndex}) {
       const obj = {
         color: '#FFF',
         fontSize: '18px',
@@ -360,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 = []
@@ -371,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)
-        setOperate262(tableDataWrapper)
+        setOperate275(tableDataWrapper)
         this.tableDataWrapper = tableDataWrapper
       })
       const handleData = (dataArr, data) => {