实时数据表格更改

src/views/govern/device/control/tabs/realtime.vue

@@ -21,11 +21,13 @@
             </div>
         </div>
         <div class="view_bot">
-            <div class="view_bot_tables">
+            <div class="view_bot_tables" v-loading="loading">
                 <!-- 表格数据 -->
                 <div v-if="tableData.length != 0">
                     <!-- div设计table -->
-                    <div class="table" v-for="(item, index) in columnsData" :key="index">
+                    <div class="table_container">
+                        <div class="table" v-for="(item, index) in columnsDataTop" :key="index">
+                            <div class="table_info">
                                 <!-- 单层表头 -->
                                 <div class="thead">
                                     <div class="thead_top">
@@ -33,7 +35,7 @@
                                     </div>
                                     <div class="thead_bot">
                                         <div class="thead_bot_cell" v-for="(vv, key) in item" :key="key">
-                                    {{ vv.phase + '相 ' }}
+                                            {{ vv.phase == 'M' ? '' : vv.phase + '相 ' }}
                                         </div>
                                     </div>
                                 </div>
@@ -53,7 +55,41 @@
                                 </div>
                             </div>
                         </div>
-                <div v-else style="border: 1px solid #eee" v-loading="loading">
+                    </div>
+
+                    <div class="table_container">
+                        <div class="table" v-for="(item, index) in columnsDataBot" :key="index">
+                            <div class="table_info">
+                                <!-- 单层表头 -->
+                                <div class="thead">
+                                    <div class="thead_top">
+                                        {{ item[0].showName ? item[0].showName : '' }}({{ item[0].unit }})
+                                    </div>
+                                    <div class="thead_bot">
+                                        <div class="thead_bot_cell" v-for="(vv, key) in item" :key="key">
+                                            {{ vv.phase == 'M' ? '' : vv.phase + '相 ' }}
+                                        </div>
+                                    </div>
+                                </div>
+                                <!-- 有合并表头的数据 -->
+                                <div class="tbody">
+                                    <div class="tbody_cell" v-for="(vv, key) in item" :key="key">
+                                        {{
+                                            tableData.find(item => {
+                                                return item.anotherName == vv.showName && item.phase == vv.phase
+                                            })?.statisticalData
+                                                ? tableData.find(item => {
+                                                      return item.anotherName == vv.showName && item.phase == vv.phase
+                                                  })?.statisticalData
+                                                : '/'
+                                        }}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div v-else style="border: 1px solid #eee">
                     <el-empty description="暂无数据" />
                 </div>
             </div>
@@ -65,7 +101,6 @@ import { ref, onMounted } from 'vue'
 import MyEchart from '@/components/echarts/MyEchart.vue'
 import { getRealTimeTableList } from '@/api/cs-device-boot/EquipmentDelivery'
 import * as echarts from 'echarts'
-import { split } from 'lodash-es'
 const pieChartRef: any = ref()
 const pieChart1: any = ref()
 const pieChart2: any = ref()
@@ -374,7 +409,6 @@ const listA: any = ref([])
 const loading = ref(false)
 //定义表格所需要的数据
 const tableData: any = ref([])
-loading.value = true
 const columnsData: any = ref([])
 const getColumns = () => {
     getRealTimeTableList().then(res => {
@@ -382,20 +416,34 @@ const getColumns = () => {
     })
 }
 //处理表格数据
+const columnsDataTop: any = ref([])
+const columnsDataBot: any = ref([])
 const getTableData = (list: any) => {
+    loading.value = true
     tableData.value = list
-    columnsData.value.map((item: any) => {
+    columnsDataTop.value = []
+    columnsDataBot.value = []
+    columnsData.value.map((item: any, index: any) => {
         item.map((vv: any) => {
             vv.statisticalData = list.find((kk: any) => {
                 return kk.anotherName == vv.showName && kk.phase == vv.phase
             })?.statisticalData
         })
-    })
+        if (index < 4) {
+            columnsDataTop.value.push(item)
+        }
+        if (index >= 4) {
+            columnsDataBot.value.push(item)
+        }
         loading.value = false
+    })
 }
 //获取实时数据
 const getRealTimeData = (val: any) => {
+    loading.value = true
     if (val.length != 0) {
+        getColumns()
+        getTableData(val)
         dataList.value = val
         dataList.value.map((item: any, index: any) => {
             if (item.anotherName == '相电压总有效值') {
@@ -478,8 +526,6 @@ const getRealTimeData = (val: any) => {
             }
         ]
         pieChart6.value.initChart()
-        getColumns()
-        getTableData(val)
     } else {
         init()
     }
@@ -551,13 +597,22 @@ onMounted(() => {
         .view_bot_tables {
             margin-bottom: 10px;
             height: auto;
+            min-height: 120px;
         }
     }
 }
 .view::-webkit-scrollbar {
     display: none;
 }
+.table_container {
+    width: 100%;
+    height: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     .table {
+        flex: 1;
+        .table_info {
             width: 100%;
             height: 120px;
             border: 1px solid #eee;
@@ -565,6 +620,7 @@ onMounted(() => {
             margin-bottom: 20px;
             display: flex;
             flex-direction: column;
+        }
         .thead {
             width: 100%;
             height: auto;
@@ -611,4 +667,13 @@ onMounted(() => {
             background: #f4f6f9;
         }
     }
+}
+.table_container:hover{
+    .table {
+        .tbody{
+            background: #f4f6f9;
+        }  
+   }
+}
+
 </style>