优化261 262 275 方法

src/components/DataModal/common/DataModalWarn.vue

@@ -17,12 +17,22 @@
         show-overflow-tooltip
       />
       <el-table-column
-        prop="desc"
-        label="对象名"
-        align="center"
-        width="110px"
-        show-overflow-tooltip
-      />
+          prop="desc"
+          label="对象名"
+          align="center"
+          width="110px"
+      >
+        <template slot-scope="scope">
+          <el-tooltip v-if="scope.row.desc && scope.row.desc.length > 6" :content="scope.row.desc" placement="top">
+            <div>
+              {{ scope.row.desc.slice(0, 6) + '.' }}
+            </div>
+          </el-tooltip>
+          <div v-else>
+            {{ scope.row.desc }}
+          </div>
+        </template>
+      </el-table-column>
       <el-table-column
         prop="warnTypeText"
         label="报警类型"

src/components/DataModal/common/RealtimeLine.vue

@@ -12,7 +12,8 @@
               :key="key"
               :style="chartBoxStyle"
             >
-              <div class="chart-box-title">{{ workshopList[key].workshopName }}</div>
+              <div class="chart-box-title">{{ workshopList[key].remark+workshopList[key].workshopName }}</div>
+<!--              <div class="chart-box-title">{{ workshopList[key].workshopName }}</div>-->
               <div class="chart-box-content">
                 <div :id="key" style="height: 100%;"/>
               </div>
@@ -85,6 +86,7 @@ export default {
       }
     },
     async workshopList(newVal) {
+      // console.log('newVal', newVal)
       if (newVal) {
         this.$nextTick(() => {
           this.chartLoading = false

src/components/DataModal/common/RealtimeTable.vue

@@ -1,8 +1,10 @@
 <template>
   <div class="realtime-table">
+<!--&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="{
         color: '#FFF',
@@ -10,10 +12,27 @@
         background: 'inherit',
         borderBottom: 'none'
       }"
-      :cell-style="getCellStyle"
+      :cell-style="getCellStyle262"
       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>
+          </el-tooltip>
+          <div v-else :style="{ color: scope.row.status ? '#5daf34' : '#f19409' }">
+            {{ scope.row.remark }}
+          </div>
+        </template>
+      </el-table-column>
+
       <el-table-column
         column-key="second"
         prop="second"
@@ -21,7 +40,15 @@
         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) + '..' }}
+            </div>
+          </el-tooltip>
+          <div v-else :style="{ color: scope.row.status ? '#5daf34' : '#f19409' }">
+            {{ scope.row.second }}
+          </div>
         </template>
       </el-table-column>
       <el-table-column
@@ -76,7 +103,6 @@
 import { findEntityByAcqId } from '@/api/CollectEntity'
 import { findTableColumnsNotStatus } from '@/api/TableConfig'
 import { mapState } from 'vuex'
-
 export default {
   name: 'RealtimeTable',
   data() {
@@ -104,6 +130,134 @@ export default {
     },
   },
   methods: {
+    objectSpanMethod275({ row, column, rowIndex, columnIndex }) {
+      if (columnIndex === 0) {
+        // 根据 rowIndex 判断应用的合并规则
+        if (rowIndex === 1) {
+          // 合并第二三条，只保留第二条数据
+          return {rowspan: 2, colspan: 1};
+        } else if (rowIndex === 2) {
+          // 第三条数据，不需要渲染，返回空对象
+          return {rowspan: 0, colspan: 0};
+        } else if (rowIndex === 5) {
+          // 合并第六七条，只保留第六条数据
+          return {rowspan: 2, colspan: 1};
+        } else if (rowIndex === 6) {
+          // 第七条数据，不需要渲染，返回空对象
+          return {rowspan: 0, colspan: 0};
+        } else if (rowIndex === 7) {
+          // 合并第八九条，只保留第八条数据
+          return {rowspan: 2, colspan: 1};
+        } else if (rowIndex === 8) {
+          // 第九条数据，不需要渲染，返回空对象
+          return {rowspan: 0, colspan: 0};
+        } else {
+          return {rowspan: 1, colspan: 1}; // 默认情况，不合并
+        }
+      }
+      if (columnIndex === 4) {
+        // 根据 rowIndex 判断应用的合并规则
+        if (rowIndex === 1) {
+          // 合并第二三条，只保留第二条数据
+          return {rowspan: 2, colspan: 1};
+        } else if (rowIndex === 2) {
+          // 第三条数据，不需要渲染，返回空对象
+          return {rowspan: 0, colspan: 0};
+        } else if (rowIndex === 5) {
+          // 合并第六七条，只保留第六条数据
+          return {rowspan: 2, colspan: 1};
+        } else if (rowIndex === 6) {
+          // 第七条数据，不需要渲染，返回空对象
+          return {rowspan: 0, colspan: 0};
+        } else if (rowIndex === 7) {
+          // 合并第八九条，只保留第八条数据
+          return {rowspan: 2, colspan: 1};
+        } else if (rowIndex === 8) {
+          // 第九条数据，不需要渲染，返回空对象
+          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}; // 默认情况，不合并
+        }
+      }
+    },
+    objectSpanMethod262({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 === 2) {
+          return {rowspan: 3, colspan: 1};
+        } else if (rowIndex === 3) {
+          return {rowspan: 0, colspan: 0};
+        } 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 === 2) {
+          return {rowspan: 3, colspan: 1};
+        } else if (rowIndex === 3) {
+
+          return {rowspan: 0, colspan: 0};
+        } else if (rowIndex === 4) {
+
+          return {rowspan: 0, colspan: 0};
+        } else {
+          return {rowspan: 1, colspan: 1}; // 默认情况，不合并
+        }
+      }
+    },
     // 表格方法开始
     async getTableData() {
       const handleData = (dataArr, data) => {
@@ -111,6 +265,7 @@ export default {
           const obj = {
             id: item.id,
             first: item.collectStationName,
+            remark:item.remark,
             second: item.entityName,
             startType: item.startType,
             limitValue: item.limitValue,
@@ -139,13 +294,52 @@ export default {
         this.tableDataWrapper = tableDataWrapper
       })
     },
-    getCellStyle({ row, column, rowIndex, columnIndex }) {
+    // getCellStyle({ row, column, rowIndex, columnIndex }) {
+    //   const obj = {
+    //     color: '#FFF',
+    //     fontSize: '18px',
+    //   }
+    //   const a = this.tableDataWrapper.length / 2 === 0 ? 0 : 1
+    //   if (rowIndex % 2 === a) {
+    //     obj.background = '#194364'
+    //   // #194364
+    //   // #04091F
+    //   // #133453
+    //   } else {
+    //     obj.background = ''
+    //   }
+    //   return obj
+    // },
+    getCellStyle261({ row, column, rowIndex, columnIndex }) {
+      const obj = {
+        color: '#FFF',
+        fontSize: '18px',
+      }
+      if (rowIndex === 0 || rowIndex === 1 || rowIndex === 3 || rowIndex === 4) {
+        obj.background = '#194364'
+      } else {
+        obj.background = ''
+      }
+      return obj
+    },
+    getCellStyle262({ row, column, rowIndex, columnIndex }) {
+      const obj = {
+        color: '#FFF',
+        fontSize: '18px',
+      }
+      if (rowIndex === 0 || rowIndex === 1 || rowIndex === 5 || rowIndex === 7) {
+        obj.background = '#194364'
+      } else {
+        obj.background = ''
+      }
+      return obj
+    },
+    getCellStyle275({ row, column, rowIndex, columnIndex }) {
       const obj = {
         color: '#FFF',
         fontSize: '18px',
       }
-      const a = this.tableDataWrapper.length / 2 === 0 ? 0 : 1
-      if (rowIndex % 2 === a) {
+      if (rowIndex === 0 || rowIndex === 3 || rowIndex === 5 || rowIndex === 6) {
         obj.background = '#194364'
       } else {
         obj.background = ''
@@ -166,6 +360,7 @@ export default {
           item.status = item.FEEDBACK === 1
         }
         this.tableData = tableData
+
       }
       if (this.realtimeDataArray.length > 10) {
         this.realtimeDataArray = []

src/views/Data.vue

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