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

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

web/src/components/ComTable.vue

@@ -161,8 +161,11 @@ const scroll = ref({})
 onMounted(async () => {
   data.newColumns = [...props.columns]
   data.realTableData = [...props.tableData]
+
   await nextTick()
   // console.log(props.tableH, 'props.tableH');
+  console.log(comtable.value.offsetHeight,'comtable.value.offsetHeight');
+
 
   scroll.value = { y: comtable.value.offsetHeight - 56 }
 })
@@ -220,10 +223,11 @@ defineExpose({ ...toRefs(data), loading, mountedScroll, scroll: data.scroll })
 
 <style lang="scss" scoped>
 .comtable {
-  border-radius: 8px;
-  font-size: 14px;
   width: 100%;
   height: 100%;
+  border-radius: 8px;
+  font-size: 14px;
+
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -261,6 +265,10 @@ defineExpose({ ...toRefs(data), loading, mountedScroll, scroll: data.scroll })
     background: transparent;
     color: #fff !important;
     border-bottom: none !important; /* 可选：去除底部边框 */
+    &.ant-table-cell-fix-right{
+    background: #10687d !important;
+
+    }
   }
 }
 
@@ -339,19 +347,22 @@ defineExpose({ ...toRefs(data), loading, mountedScroll, scroll: data.scroll })
     top: -210px !important;
   }
   .ant-pagination-item {
+    border: 1px solid #fff;
     &:not(.ant-pagination-item-active):hover {
       background: #1c797a !important;
     }
     a {
       color: #fff;
       border-radius: 2px;
-      background: #1c797a !important;
+      
     }
   }
-
+:deep(.ant-pagination-item-ellipsis){
+  color: rgb(255 255 255 / 25%) !important;
+}
   .ant-pagination-item-active {
-    border: 1px solid transparent;
     color: #fff;
+      border: none !important;
     background: #1c797a !important;
   }
 }
@@ -369,6 +380,12 @@ defineExpose({ ...toRefs(data), loading, mountedScroll, scroll: data.scroll })
     }
   
   }
+
+
+}
+:deep(.ant-table-body .ant-table-cell-fix-right.ant-table-cell-fix-right-first){
+    background: #082e4a  !important;
+
 }
 :deep(.ant-table-body) {
   color:#fff;
@@ -416,4 +433,9 @@ defineExpose({ ...toRefs(data), loading, mountedScroll, scroll: data.scroll })
 :deep(.ant-table-wrapper .ant-table-thead th.ant-table-column-has-sorters:hover) {
   background: var(--table-select) !important;
 }
+:deep(.ant-table-cell-fix-right){
+  &::after{
+    border-inline-end:none !important
+  }
+}
 </style>

web/src/components/DetailInfo.vue

@@ -371,7 +371,7 @@ import {
   onMounted,
   defineExpose
 } from 'vue'
-import { TreeSelect } from 'ant-design-vue'
+
 import iconfonts from '../assets/iconfont/iconfont.json'
 import validateRulesObj from '../utils/decorator'
 
@@ -641,7 +641,7 @@ defineExpose({
     }
 
     .form-item {
-      width: 320px !important;
+      // width: 320px !important;
     }
   }
 }

web/src/components/EditCom.vue

@@ -174,6 +174,7 @@ export default {
         case 'alarmLog':
           this.detailInfos = alarmlogOptions
           this.formRules = {}
+          break
         case 'serviceApi':
           this.detailInfos = serviceApiOptions
           this.formRules = serviceApiFormRules

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>

web/src/components/monitor/videos.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="videos">
-    <div class="video-item" v-for="item in 8" :key="item">
+    <div class="video-item" v-for="item in videoList" :key="item">
       <div class="title">
-        <span>xxxxz监控点</span>
+        <span>{{ item.name }}</span>
         <img
           src="@/assets/images/fillScreen.png"
           alt=""
@@ -34,10 +34,9 @@
       <ComTable
         :columns="columns[activeTab]"
         :table-data="tableDatas[activeTab]"
-        @handlePagesizeChange="handlePagesizeChange"
         ref="comTable"
-        :table-option="tableOption"
-        :page-option="pageOption"
+        :table-option="{page:false}"
+
       >
       </ComTable>
     </div>
@@ -53,10 +52,6 @@ export default {
     stationId: {
       type: String,
       default: ''
-    },
-    systemType: {
-      type: Number,
-      default: 1
     }
   },
   data() {
@@ -111,7 +106,7 @@ export default {
             align: 'center'
           }
         ],
-        'temp_hum': [
+        temp_hum: [
           {
             title: '点位',
             dataIndex: 'pos',
@@ -158,20 +153,39 @@ export default {
       tableOption: {
         select: false,
         page: false
-      }
+      },
+      videoList: []
     }
   },
   mounted() {
+    console.log(this.systemType)
+
     this.getEnvironment()
+    this.getDeviceList()
   },
   methods: {
     async getEnvironment() {
       try {
         const res = await getReq('/queryEnvironment', { station_id: this.stationId })
-        console.log(res, '==============')
         this.tableDatas = res.data
-        // this.deviceList=res.data
+        
       } catch (error) {
+        this.tableDatas={}
+        console.log(error)
+      }
+    },
+    //请求运行监控系统设备信息
+    async getDeviceList() {
+      try {
+        const res = await getReq('/queryDevicByCategory', {
+          station_id: this.stationId,
+          category: 4
+        })
+
+        this.videoList = res.data.concat(res.data)
+      } catch (error) {
+        this.videoList = []
+
         console.log(error)
       }
     }
@@ -182,18 +196,18 @@ export default {
 <style lang="scss" scoped>
 .videos {
   width: calc(100% - 470px);
+  height: 100%;
   margin-left: 20px;
   display: grid;
   grid-gap: 20px;
-  grid-template-columns: 1fr 1fr;
   overflow-y: auto;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   .video-item {
-    // width: 410px;
-    // height: 340px;
     border-radius: 15px;
-
     background: $bg2-color;
-    padding: 10px;
+    padding: 15px;
+    max-height: 290px;
+    max-width: 400px;
     .title {
       display: flex;
       align-items: center;
@@ -250,6 +264,7 @@ export default {
         cursor: pointer;
         border: 1px solid $tab-border;
         border-radius: 4px;
+        text-align: center;
       }
     }
     .actived {

web/src/components/system/policyForm.vue

@@ -2,7 +2,7 @@
 <template>
   <div class="policyForm">
     <div class="title">
-      <div>基础信息{{ formStatus }}</div>
+      <div>基础信息</div>
       <img src="@/assets/images/titleLine.png" alt="" />
     </div>
     <a-form
@@ -645,32 +645,5 @@ export default {
 :deep(.ant-table-wrapper .ant-table-cell){
     background:none!important;
   }
-// /* 禁用行的 hover 过渡动画 */
-// .ant-table-tbody > tr.ant-table-row {
-//   transition: none !important;
-// }
 
-// /* 确保 hover 背景色完全透明 */
-// .ant-table-tbody > tr.ant-table-row:hover > td {
-//   background-color: transparent !important;
-// }
-// .ant-table-wrapper .ant-table-tbody > tr.ant-table-row:hover > td {
-//   background-color: transparent !important;
-// }
-// :deep(.ant-table-tbody > tr.ant-table-row:hover > td) {
-//   background-color: transparent !important;
-// }
-// :deep(.ant-table-tbody) {
-//   color: var(--theme-text-default) !important;
-
-//   > tr {
-//     &:hover {
-//       > .ant-table-cell {
-
-//         background: none !important;
-//       }
-//     }
-
-//   }
-// }
 </style>