feat(system): 优化系统日志页面布局和功能

- 修改系统日志页面的列配置，增加固定列和对齐方式
- 优化表格组件的样式和功能，支持右列固定和自定义样式
- 调整分页配置，统一表格相关属性

web/src/components/monitor/device.vue

@@ -35,9 +35,15 @@
           <span class="value">{{ info.v }}</span>
         </div>
       </div>
-      <div v-if="item.view == 1" class="item-button">
-        <span class="text">实时数据：</span>
-        <a-button type="primary" size="small" @click="openModal(item)">查看</a-button>
+      <div class="item-button">
+        <div v-if="item.view == 1">
+          <span class="text">实时数据：</span>
+          <a-button type="primary" size="small" @click="openModal(item, 1)">查看</a-button>
+        </div>
+        <div v-if="item.type == 105">
+          <span class="text">单体信息：</span>
+          <a-button type="primary" size="small" @click="openModal(item, 2)">查看</a-button>
+        </div>
       </div>
     </div>
     <a-modal
@@ -47,31 +53,46 @@
       class="modal-device"
       :get-container="() => $refs.device"
     >
-      <div>
-        <div class="title">
-          <div>电流电压</div>
-          <img src="@/assets/images/titleLine.png" alt="" />
+      <div v-if="modalComponent == 1">
+        <div>
+          <div class="title">
+            <div>电流电压</div>
+            <img src="@/assets/images/titleLine.png" alt="" />
+          </div>
+          <div class="echarts">
+            <predictEcharts
+              :chart-options="chartOptions[0]"
+              :chart-data="chartData"
+              ref="chartRef1"
+            />
+          </div>
         </div>
-        <div class="echarts">
-          <predictEcharts
-            :chart-options="chartOptions[0]"
-            :chart-data="chartData"
-            ref="chartRef1"
-          />
+        <div>
+          <div class="title">
+            <div>功率</div>
+            <img src="@/assets/images/titleLine.png" alt="" />
+          </div>
+          <div class="echarts">
+            <predictEcharts
+              :chart-options="chartOptions[1]"
+              :chart-data="chartData"
+              ref="chartRef2"
+            />
+          </div>
         </div>
       </div>
-      <div>
-        <div class="title">
-          <div>功率</div>
-          <img src="@/assets/images/titleLine.png" alt="" />
-        </div>
-        <div class="echarts">
-          <predictEcharts
-            :chart-options="chartOptions[1]"
-            :chart-data="chartData"
-            ref="chartRef2"
-          />
-        </div>
+
+      <div class="content-table" style="height: 600px" v-else>
+        <a-table
+          :columns="columns"
+          :data-source="tableData"
+          size="small"
+          :scroll="{ y: 500 }"
+          :pagination="false"
+          row-class-name="no-hover-row"
+          row-key="id"
+        >
+        </a-table>
       </div>
     </a-modal>
   </div>
@@ -98,19 +119,7 @@ export default {
     return {
       modalOpen: false,
       deviceList: [],
-      chunengInfo: [
-        { label: '运行模式', key: 'operationMode', value: '并网运行' },
-        { label: '电池储能容量', key: 'batteryCapacity', value: '100kWh' },
-        { label: '实时电压', key: 'voltage', value: '232.5V' },
-        { label: '功率因数', key: 'powerFactor', value: '0.95' },
-        { label: '实时电流', key: 'current', value: '0.01A' },
-        { label: '额定电压', key: 'ratedVoltage', value: '232.5V' },
-        { label: '实时功率', key: 'power', value: '0.01kW' },
-        { label: '额定电流', key: 'ratedCurrent', value: '0.01A' },
-        { label: '实时数据', key: 'realTimeData', value: '0.01kWh' },
-        { label: '额定功率', key: 'ratedPower', value: '0.01kW' },
-        { label: '冷却方式', key: 'coolingMethod', value: '风冷' }
-      ],
+
       chartOptions: [
         {
           type: 'line',
@@ -173,6 +182,52 @@ export default {
       chartData: {
         xdata: [],
         ydata: {}
+      },
+      modalComponent: 1,
+      columns: [
+        {
+          title: '序号',
+          dataIndex: 'id',
+          key: 'id',
+          ellipsis: true,
+          fixed: 'left'
+        },
+        {
+          title: '单体SOC（%）',
+          dataIndex: 'SOC',
+          key: 'SOC'
+        },
+        {
+          title: '单体SOH（%）',
+          dataIndex: 'SOH',
+          key: 'SOH'
+        },
+        {
+          title: '单体电压（V）',
+          dataIndex: 'V',
+          key: 'V'
+        },
+        {
+          title: '单体温度（℃）',
+          dataIndex: 'T',
+          key: 'T'
+        },
+        {
+          title: '单体内阻（Ω）',
+          dataIndex: 'R_i',
+          key: 'R_i'
+        }
+      ],
+      tableData: [],
+      pageOption: {
+        // pageSize: 1000,
+        // page: 1
+      },
+      tableOption: {
+        scroll: {
+          y: 500
+        },
+        page: false
       }
     }
   },
@@ -193,6 +248,11 @@ export default {
     this.getDeviceList()
   },
   methods: {
+    handlePagesizeChange(pageOption) {
+      this.pageOption.pageSize = pageOption.pageSize
+      this.pageOption.page = pageOption.page
+      this.getList()
+    },
     getIcongont(ele) {
       return deviceTypeList.find((item) => item.value == ele.type).iconfont || ''
     },
@@ -228,7 +288,22 @@ export default {
         this.chartData.xdata = this.generateTimePoints()
         this.$refs.chartRef1.initCharts()
         this.$refs.chartRef2.initCharts()
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    //查询BCU单体信息
+    async getDeviceBCUDetail(item) {
+      try {
+        const res = await getReq('/queryDeviceBCUDetail', {
+          station_id: this.stationId,
+          device_id: item.device_id
+        })
 
+        this.tableData = res.data.map((item, index) => {
+          item.id = index + 1
+          return item
+        })
       } catch (error) {
         console.log(error)
       }
@@ -249,8 +324,14 @@ export default {
         console.log(error)
       }
     },
-    async openModal(item) {
-      await this.getDevicCharts(item)
+    async openModal(item, val) {
+      console.log(item, '=============')
+      this.modalComponent = val
+      if (val == 1) {
+        await this.getDevicCharts(item)
+      } else {
+        await this.getDeviceBCUDetail(item)
+      }
 
       this.modalOpen = true
     },
@@ -268,13 +349,16 @@ export default {
   margin-left: 20px;
   display: grid;
   grid-gap: 20px;
-  grid-template-columns: 1fr 1fr 1fr;
   overflow-y: auto;
+  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
   .device-item {
     border-radius: 15px;
-
     background: $bg2-color;
     padding: 15px;
+    min-width: 340px;
+    max-width: 430px;
+    max-height: 230px;
+    flex: 1;
     .item-header {
       display: flex;
       align-items: center;
@@ -290,7 +374,7 @@ export default {
         background: linear-gradient(90deg, #3dfefa 0%, #2a82e4 2.96%, #27a188 100%),
           linear-gradient(90deg, #3dfefa 0%, #01dfef 2.96%, #08a5ff 100%);
         .iconfont {
-          font-size: 50px;
+          font-size: 45px;
         }
       }
       .title {
@@ -332,8 +416,8 @@ export default {
       grid-template-columns: 1fr 1fr;
       color: #fff;
       display: grid;
-      // line-height: 45px;
       margin-top: 15px;
+      margin-bottom: 3px;
       padding: 0 10px;
       height: 120px;
       overflow-y: auto;
@@ -345,7 +429,12 @@ export default {
       }
     }
     .item-button {
+      width: 100%;
       padding-left: 10px;
+      display: flex;
+      div {
+        width: calc(50% - 10px);
+      }
     }
     .text {
       color: $text-color;
@@ -354,26 +443,35 @@ export default {
       margin-top: 10px;
     }
   }
+  .content-table {
+    height: 700px;
+    margin-top: 40px;
+
+    :deep(.ant-table-header tr th) {
+      background: $table-border !important;
+      color: #fff;
+    }
+    :deep(.ant-table-body tr td, .ant-table-cell) {
+      background: $table-bg !important;
+      color: #fff;
+    }
+  }
 }
 .environment {
   width: 200px;
 }
-:deep(.modal-device) {
-  color: #fff;
-  .title {
-    display: flex;
-    font-weight: 700;
-    flex-direction: column;
 
-    img {
-      width: 232px;
-      height: 6px;
-      margin-top: 10px;
-    }
+:deep(.ant-modal-body) {
+  :deep(.ant-table-wrapper .ant-table-row-expand-icon) {
+    color: $green !important;
   }
-  .echarts {
-    width: 100%;
-    height: 280px;
+  //表格行悬浮样式
+  .no-hover-row:hover > td {
+    // background-color: transparent !important;
+    background-color: #f0f8ff !important;
   }
 }
+//   .a-modal :deep(.ant-table-thead > tr > th) {
+//   background-color: #f0f8ff !important;
+// }
 </style>