feat(system): 优化设备列表展示逻辑

- 调整设备编号展示位置，解决信息冗余问题
- 优化设备状态展示方式，增加颜色区分
- 改进设备参数展示布局，提高可读性
- 统一模态样式，调整弹窗位置

web/components.d.ts

@@ -55,6 +55,7 @@ declare module 'vue' {
     OperateCom: typeof import('./src/components/OperateCom.vue')['default']
     Operational: typeof import('./src/components/Home/Operational.vue')['default']
     OperationalInfo: typeof import('./src/components/Home/Modal/OperationalInfo.vue')['default']
+    PlusOutlined: typeof import('@ant-design/icons-vue')['PlusOutlined']
     PolicyForm: typeof import('./src/components/system/policyForm.vue')['default']
     'PolicyForm copy': typeof import('./src/components/system/policyForm copy.vue')['default']
     PredictEcharts: typeof import('./src/components/predict/predictEcharts.vue')['default']

web/public/config/columnList.js

@@ -244,6 +244,10 @@ export const columnList = [
         ellipsis: true,
         fixed: 'left'
       },
+      {
+        title: '设备编号',
+        dataIndex: 'code'
+      },
       {
         title: '所属场站',
         dataIndex: 'station_id',
@@ -261,10 +265,6 @@ export const columnList = [
         title: '设备名称',
         dataIndex: 'name'
       },
-      {
-        title: '设备编号',
-        dataIndex: 'code'
-      },
 
       {
         title: '厂家信息',

web/src/components/ComTable.vue

@@ -17,7 +17,7 @@
                 selectedRowKeys: data.selectedRowKeys,
                 onChange: onSelectChange
               }
-            : {}
+            : null
         "
         :expanded-row-keys="data.newTableOpt.expand ? data.expandedKeys : null"
         size="middle"

web/src/components/DetailInfo.vue

@@ -704,7 +704,13 @@ defineExpose({
   border: none !important;
   color: var(--theme-text-default) !important;
 }
-
+:deep(.ant-input-clear-icon){
+  color: #fff;
+}
+:deep(.ant-select .ant-select-clear,.ant-select-clear:hover){
+  color: #fff;
+  background: none !important;
+}
 :deep(.ant-checkbox-wrapper) {
   color: var(--theme-text-default);
 }

web/src/components/EditCom.vue

@@ -9,6 +9,7 @@
         :disabled="disabled"
       >
         <template #role_id="item">
+          
           <a-select
             :dropdown-match-select-width="false"
             v-model:value="detailInfo.ruleForm[item.key]"
@@ -191,6 +192,10 @@ export default {
   mounted() {
     this.getRoleIdList()
   },
+  unmounted() {
+    console.log('modal');
+    
+  },
   methods: {
     async getRoleIdList() {
       const params = {
@@ -516,6 +521,16 @@ export default {
       }
 
       return ids
+    },
+    //移除校验
+    clearValidate(){
+
+      for (let i = 0; i < this.detailInfos.length; i++) {
+        // console.log(`detailInfo${i}`);
+        
+        this.$refs[`detailInfo${i}`].handleReset()
+  
+      }
     }
   }
 }

web/src/components/monitor/device.vue

@@ -8,27 +8,63 @@
           </div>
           <div class="title">
             <span class="number">{{ item.device_id }}</span>
-            <span class="name">{{ item.name }}</span>
+            <span class="name" :title="name">{{ item.name }}</span>
             <span class="number type">{{ item.typename }}</span>
           </div>
         </div>
 
         <div class="status">
           <div class="status-item">
-            <span>{{ ['离线', '在线'][item.is_online] }}</span>
+            <a-tag :color="item.is_online == 1 ? 'green' : 'red'">{{
+              ['离线', '在线'][item.is_online]
+            }}</a-tag>
             <span class="text">在线状态</span>
           </div>
           <div class="status-item">
-            <span>{{ ['正常', '错误'][item.is_error] }}</span>
+            <a-tag :color="item.is_online == 0 ? 'green' : 'red'">{{
+              ['正常', '错误'][item.is_online]
+            }}</a-tag>
+
             <span class="text">故障状态</span>
           </div>
           <div class="status-item">
-            <span>{{ ['空闲', '工作'][item.is_running] }}</span>
+            <a-tag :color="item.is_online == 0 ? 'orange' : 'green'">{{
+              ['空闲', '工作'][item.is_online]
+            }}</a-tag>
+
             <span class="text">工作状态</span>
           </div>
         </div>
       </div>
-      <div class="item-content">
+      <div class="item-gun" v-if="item.type == 106">
+        <div class="gun">
+          <div class="header">
+            <div class="verline"></div>
+            <span>枪：1</span>
+          </div>
+          <div class="gun-content">
+            <div v-for="info in item.params" :key="info.k" class="gun-info">
+              <span class="text">{{ info.k }}：</span>
+
+              <span class="value">{{ info.v }}</span>
+            </div>
+          </div>
+        </div>
+        <div class="gun">
+          <div class="header">
+            <div class="verline"></div>
+            <span>枪：2</span>
+          </div>
+          <div class="gun-content">
+            <div v-for="info in item.params1" :key="info.k" class="gun-info">
+              <span class="text">{{ info.k }}：</span>
+
+              <span class="value">{{ info.v }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="item-content" v-else>
         <div v-for="info in item.params" :key="info.k" class="item-info">
           <span class="text">{{ info.k }}：</span>
 
@@ -226,7 +262,8 @@ export default {
           y: 500
         },
         page: false
-      }
+      },
+      timer: null
     }
   },
   watch: {
@@ -244,8 +281,14 @@ export default {
   },
   mounted() {
     this.getDeviceList()
+    this.timer=setInterval(() => {
+      this.getDeviceList()
+    }, 20000)
     
-    
+  },
+  unmounted() {
+    clearInterval(this.timer)
+
   },
   methods: {
     handlePagesizeChange(pageOption) {
@@ -364,9 +407,9 @@ export default {
     border-radius: 15px;
     background: $bg2-color;
     padding: 15px;
-    min-width: 340px;
+    min-width: 390px;
-    max-width: 430px;
+    max-width: 450px;
-    height: 260px;
+    // height: 260px;
     flex: 1;
     .item-header {
       display: flex;
@@ -397,6 +440,11 @@ export default {
       }
       .name {
         font-size: 14px;
+        display: block; /* 或 block，根据需求调整 */
+        width: 80px; /* 固定宽度 */
+        white-space: nowrap; /* 禁止换行 */
+        overflow: hidden; /* 隐藏超出部分 */
+        text-overflow: ellipsis;
       }
       .type {
         color: #08a5ff;
@@ -405,16 +453,20 @@ export default {
         display: flex;
         font-size: 14px;
         height: 100%;
-        width: 50%;
+        justify-content: space-evenly;
-        justify-content: space-between;
         &-item {
           display: flex;
           flex-direction: column;
           text-align: center;
           justify-content: space-evenly;
-          span:first-child {
+          align-items: center;
-            font-weight: 700;
+          min-width: 70px;
+          :deep(.ant-tag) {
+            margin-inline-end: 0 !important;
           }
+          // span:first-child {
+          //   font-weight: 700;
+          // }
           .text {
             color: $text-color;
           }
@@ -426,8 +478,8 @@ export default {
       color: #fff;
       display: grid;
       margin-top: 15px;
-      margin-bottom: 3px;
+      // margin-bottom: 3px;
-      padding: 0 10px;
+      padding: 0 5px;
       height: 120px;
       overflow-y: auto;
       .value {
@@ -437,13 +489,56 @@ export default {
         height: 30px;
       }
     }
-    .item-button {
+    .item-gun {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 20px;
       width: 100%;
-      padding-left: 10px;
+      .gun {
-      display: flex;
+        border: 1px solid #37d6d970;
-      div {
+        border-radius: 5px;
-        width: calc(50% - 10px);
+        margin: 5px 0;
       }
+      .header {
+        height: 20px;
+        font-size: 12px;
+        display: flex;
+        align-items: center;
+        margin: 5px;
+        .verline {
+          margin-right: 10px;
+          background: linear-gradient(
+              180deg,
+              rgba(0, 230, 172, 1) 0%,
+              rgba(0, 210, 255, 1) 98.78%,
+              rgba(0, 210, 255, 1) 100%
+            ),
+            rgba(1, 223, 239, 1);
+          width: 4px;
+          height: 15px;
+          border-radius: 6px;
+        }
+      }
+      .gun-content {
+        display: grid;
+        grid-template-columns: 1fr;
+        height: 120px;
+        padding: 0 5px;
+        overflow-y: auto;
+        .gun-info {
+          height: 30px;
+        }
+      }
+    }
+    .item-button {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      color: #fff;
+      margin-bottom: 3px;
+      padding: 0 5px;
+      // div {
+      //   width: calc(50% - 10px);
+      // }
     }
     .text {
       color: $text-color;

web/src/components/monitor/videos.vue

@@ -8,7 +8,6 @@
     >
       <haikang :index="index" :item="item" class="video"></haikang>
     </div>
-    
   </div>
   <div class="environment">
     <div class="tab-header">
@@ -25,7 +24,7 @@
         :columns="columns[activeTab]"
         :table-data="tableDatas[activeTab]"
         ref="comTable"
-        :table-option="{ page: false }"
+        :table-option="{ page: false, select: false }"
       >
       </ComTable>
     </div>
@@ -126,16 +125,17 @@ export default {
           name: '环境温湿度信息'
         },
         {
-          key: 'fire40',
+          key: 'cooling',
-          name: '安防信息'
+          name: '冷机信息'
         },
+
         {
           key: 'airc',
           name: '空调信息'
         },
         {
-          key: 'cooling',
+          key: 'fire40',
-          name: '冷机信息'
+          name: '消防信息'
         }
       ],
       tableDatas: {},
@@ -155,7 +155,8 @@ export default {
       username: '',
       password: '',
       iRtspPort: '',
-      videosPageWidth: ''
+      videosPageWidth: '',
+      timer: null
     }
   },
   mounted() {
@@ -167,6 +168,13 @@ export default {
 
     this.getEnvironment()
     this.getDeviceList()
+    this.timer=setInterval(() => {
+      this.getEnvironment()
+      this.getDeviceList()
+    }, 20000)
+  },
+  unmounted() {
+    clearInterval(this.timer)
   },
   methods: {
     async getEnvironment() {

web/src/components/system/policyForm.vue

@@ -17,12 +17,7 @@
       </a-form-item>
 
       <a-form-item label="类型" class="col2" name="type">
-        <a-select
+        <a-select v-model:value="formData.type" placeholder="" :disabled="formStatus == 'read'">
-          v-model:value="formData.type"
-          placeholder=""
-          :disabled="formStatus == 'read'"
-          
-        >
           <a-select-option v-for="item in policyTypes" :value="item.value">{{
             item.label
           }}</a-select-option>
@@ -35,6 +30,8 @@
           v-model:value="formData.price[0]"
           suffix="元/kWh"
           :disabled="formStatus == 'read'"
+          :min="0"
+          addon-after="元/kWh"
         />
       </a-form-item>
 
@@ -44,6 +41,8 @@
           v-model:value="formData.price[1]"
           suffix="元/kWh"
           :disabled="formStatus == 'read'"
+          :min="0"
+          addon-after="元/kWh"
         />
       </a-form-item>
 
@@ -53,6 +52,8 @@
           v-model:value="formData.price[2]"
           suffix="元/kWh"
           :disabled="formStatus == 'read'"
+          :min="0"
+          addon-after="元/kWh"
         />
       </a-form-item>
 
@@ -62,6 +63,8 @@
           v-model:value="formData.price[3]"
           suffix="元/kWh"
           :disabled="formStatus == 'read'"
+          :min="0"
+          addon-after="元/kWh"
         />
       </a-form-item>
 
@@ -70,19 +73,24 @@
           :columns="columns"
           :data-source="formData.period1"
           size="small"
-          :scroll="{ y: 500 }"
+          :scroll="{ y: 200 }"
           :pagination="false"
           row-class-name="no-hover-row"
           row-key="month"
+          :expanded-row-keys="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]"
         >
           <template #headerCell="{ column }">
             <template v-if="column.key === 'action'">
               <span>
-                <i
+                <!-- <i
                   class="iconfont icon-add"
                   @click="handleAdd"
                   :style="{ cursor: formStatus == 'read' ? 'not-allowed' : 'pointer' }"
-                ></i>
+                ></i> -->
+                <PlusOutlined
+                  @click="handleAdd"
+                  :style="{ cursor: formStatus == 'read' ? 'not-allowed' : 'pointer' }"
+                />
               </span>
             </template>
           </template>
@@ -146,30 +154,34 @@
                 </a-form-item>
 
                 <a-form-item label="充电功率" class="col2" name="chargeType">
-                  <a-radio-group
+                  <a-radio-group v-model:value="formData.period5[index].chargeType">
-                    v-model:value="formData.period5[index].chargeType"
+                    <div>
-                   
+                      <a-radio :value="0">自动</a-radio>
-                  >
+                    </div>
-                    <a-radio :value="0">自动</a-radio>
+                    <div>
-                    <a-radio :value="1">自定义</a-radio>
+                      <a-radio :value="1">自定义</a-radio>
-                    <a-input
+                      <a-input
-                      style="width: 60px"
+                        style="width: 120px"
-                      v-model:value="formData.period5[index]['charge_power']"
+                        v-model:value="formData.period5[index]['charge_power']"
-                    ></a-input>
+                        suffix="kW"
+                      ></a-input>
+                    </div>
                   </a-radio-group>
                 </a-form-item>
 
                 <a-form-item label="放电功率" class="col2" name="dischargeType">
-                  <a-radio-group
+                  <a-radio-group v-model:value="formData.period5[index].dischargeType">
-                    v-model:value="formData.period5[index].dischargeType"
+                    <div>
-                    
+                      <a-radio :value="0">自动</a-radio>
-                  >
+                    </div>
-                    <a-radio :value="0">自动</a-radio>
+                    <div>
-                    <a-radio :value="1">自定义</a-radio>
+                      <a-radio :value="1">自定义</a-radio>
-                    <a-input
+                      <a-input
-                      style="width: 60px"
+                        style="width: 120px"
-                      v-model:value="formData.period5[index]['discharge_power']"
+                        v-model:value="formData.period5[index]['discharge_power']"
-                    ></a-input>
+                        suffix="kW"
+                      ></a-input>
+                    </div>
                   </a-radio-group>
                 </a-form-item>
               </a-form>
@@ -187,13 +199,18 @@
       <a-form-item class="col1">
         <div style="display: flex; justify-content: center; gap: 20px">
           <a-button @click="handleCancel">取消</a-button>
-          <a-button @click="handleOk" type="primary"  :disabled="formStatus == 'read'">确认</a-button>
+          <a-button @click="handleOk" type="primary" :disabled="formStatus == 'read'"
+            >确认</a-button
+          >
         </div>
       </a-form-item>
     </a-form>
   </div>
   <a-modal
-v-model:open="periodModal" @ok="handlePeriodModalOk" :get-container="()=>$refs.policyForm">
+    v-model:open="periodModal"
+    @ok="handlePeriodModalOk"
+    :get-container="() => $refs.policyForm"
+  >
     <a-form
       ref="periodRef"
       :model="periodForm"
@@ -201,10 +218,17 @@ v-model:open="periodModal" @ok="handlePeriodModalOk" :get-container="()=>$refs.p
       :rules="rules"
     >
       <a-form-item ref="name" label="月份" name="month" required>
-        <a-input v-model:value="periodForm.month" />
+        <a-select ref="select" v-model:value="periodForm.month" @change="selectMonth">
+          <a-select-option v-for="item in 12" :value="item">{{ item }}</a-select-option>
+        </a-select>
       </a-form-item>
       <a-form-item label="开始时间" name="time" required>
-        <a-time-picker v-model:value="periodForm.time" value-format="HH:mm" format="HH:mm" />
+        <a-time-picker
+          v-model:value="periodForm.time"
+          value-format="HH:mm"
+          format="HH:mm"
+          :disabled-time="disabledTimeConfig"
+        />
       </a-form-item>
       <a-form-item label="时段类型" name="type" required>
         <a-select ref="select" v-model:value="periodForm.type">
@@ -240,7 +264,7 @@ export default {
       default: 'add'
     }
   },
-  emits:['closeModal'],
+  emits: ['closeModal'],
   data() {
     return {
       data: [],
@@ -301,7 +325,9 @@ export default {
         chargeType: [{ required: true, trigger: 'change' }],
         dischargeType: [{ required: true, trigger: 'change' }]
       },
-      periodFormRefs: []
+      periodFormRefs: [],
+      disabledHours: [],
+      disabledMinutes: []
     }
   },
   watch: {
@@ -322,12 +348,10 @@ export default {
                 chargeType: null,
                 dischargeType: null
               }
-              
             ],
             is_open: false,
             chargePolicy: 1
           }
-          
         } else {
           this.getFormData(newVal)
         }
@@ -338,25 +362,62 @@ export default {
   },
   mounted() {},
   methods: {
+    disabledTimeConfig() {
+      const that = this
+      return {
+        disabledHours: () => that.disabledHours.map((item) => Number(item)), // 禁用点
+        disabledMinutes: () => that.disabledMinutes.map((item) => Number(item)),
+        disabledSeconds: () => []
+      }
+    },
+    splitAndDedupeTimeArray(times) {
+      const hours = times.map((time) => {
+        const [hour] = time.split(':')
+        return parseInt(hour, 10)
+      })
+
+      const minutes = times.map((time) => {
+        const [, minute] = time.split(':')
+        return parseInt(minute, 10)
+      })
+
+      return {
+        hours: [...new Set(hours)],
+        minutes: [...new Set(minutes)]
+      }
+    },
+    selectMonth(val) {
+      let arr = []
+      const res = this.formData.period1.find((item) => item.month == val) || null
+
+      if (res) {
+        if (res.children && res.children.length > 0) {
+          arr = [res, ...res.children].map((item) => item.time)
+        } else {
+          arr = [res.time]
+        }
+      }
+      const { hours, minutes } = this.splitAndDedupeTimeArray(arr)
+      this.disabledHours = hours
+      this.disabledMinutes = minutes
+    },
     changePolicy(e) {
       const val = e.target.value
+      console.log(val)
+
       if (val == 1) {
-        // const {length} = this.formData.period5
-
-        // this.formData.period5.splice(1,1)
-        this.formData.period1=[]
 
+        this.formData.period5.splice(0, 1)
+        this.formData.period1 = []
       } else {
-        this.formData.period5[1] = 
+        this.formData.period5[1] = {
-          {
+          charge_time: [],
-            charge_time: [],
+          discharge_time: [],
-            discharge_time: [],
+          charge_power: '',
-            charge_power: '',
+          discharge_power: '',
-            discharge_power: '',
+          chargeType: null,
-            chargeType: null,
+          dischargeType: null
-            dischargeType:null
+        }
-          }
-          
       }
     },
     //提交表单
@@ -383,40 +444,28 @@ export default {
         delete newForm.period5
       }
       delete newForm.price
-      // console.log(this.$refs.formRef,'=================');
+      
-
-      //校验表单
-      // const formRefres = await this.validateform('formRef',newForm)
-      // const formRefres = this.validateform(periodKey,newForm)
-      // console.log(formRefres);
 
       this.validateform(newForm)
     },
     async validateform(newForm) {
       try {
         await this.$refs.formRef.validateFields()
-        if(newForm.type==5){
+        if (newForm.type == 5) {
-          const validFormRefs = this.periodFormRefs.filter((item) => 
+          const validFormRefs = this.periodFormRefs.filter(
-            item && typeof item.validateFields === 'function'
+            (item) => item && typeof item.validateFields === 'function'
-          )
-          await Promise.all(
-            validFormRefs.map((item) => item.validateFields())
           )
+          await Promise.all(validFormRefs.map((item) => item.validateFields()))
         }
-       
+
-    
         if (this.formStatus == 'add') {
           this.addPolicy(newForm)
         } else if (this.formStatus == 'edit') {
           this.updatePolicy(newForm)
         }
-        
-
-
       } catch (error) {
         console.log(error)
       }
-      
     },
     handleCancel() {
       this.$emit('closeModal')
@@ -447,7 +496,6 @@ export default {
     },
     //时段表删除
     delPeriod(index) {
-      // console.log(record);
       this.formData.period1.splice(index, 1)
     },
 
@@ -463,12 +511,10 @@ export default {
         is_open: Boolean(newVal['is_open']),
         price
       }
-      // const periodKey=period[type]
       this.formData[`period${type}`] = this.getPeriod(type, period)
-      console.log(this.formData)
     },
     handleAdd() {
-      if(this.formStatus=='read') return
+      if (this.formStatus == 'read') return
       this.periodModal = true
       this.periodForm = {}
     },
@@ -476,15 +522,45 @@ export default {
       this.$refs.periodRef
         .validateFields()
         .then((res) => {
-          const target = this.formData.period1.find((item) => item.month == this.periodForm.month)
+          const targetIndex = this.formData.period1.findIndex(
+            (item) => item.month == this.periodForm.month
+          )
 
-          if (target) {
+          if (targetIndex !== -1) {
-            target.children.push(this.periodForm) // 如果找到，放入 children
+            // 如果找到，获取目标对象
-          }else{
+            const target = this.formData.period1[targetIndex]
-            this.formData.period1.push(this.periodForm)
+
+            // 创建所有项目的副本，避免循环引用
+            const allItems = [
+              { ...target },
+              ...target.children.map((child) => ({ ...child,month:target.month })),
+              { ...this.periodForm }
+            ]
+
+            // 按时间排序
+            allItems.sort((a, b) => {
+              return a.time.localeCompare(b.time)
+            })
+
+            // 排序后第一个作为新的父级元素
+            const newTarget = allItems[0]
+            // 其余元素作为children
+            newTarget.children = allItems.slice(1).map((item) => {
+              // 确保children中的项目不包含month属性
+              const { month,children, ...rest } = item
+              return rest
+            })
+
+            // 替换原数组中的元素
+            this.formData.period1.splice(targetIndex, 1, newTarget)
+          } else {
+            // 如果未找到，创建新记录
+            this.formData.period1.push({
+              ...this.periodForm,
+              children: []
+            })
           }
 
-          // this.formData.period1.push(this.periodForm)
           this.periodModal = false
         })
         .catch((err) => {
@@ -574,7 +650,7 @@ export default {
 }
 .ant-form {
   display: flex;
-  flex-wrap:wrap ;
+  flex-wrap: wrap;
 
   .charge {
     // display: grid;
@@ -612,9 +688,15 @@ export default {
   .ant-picker,
   .ant-select,
   .ant-input-affix-wrapper,
-  .ant-input-number {
+  .ant-input-number,
+  .ant-input-number-group,
+  :deep(.ant-input-number-wrapper) {
     width: 200px;
   }
+  :deep(.ant-input-number-group .ant-input-number-group-addon) {
+    color: #fff;
+    border: 1px solid $border-color;
+  }
   textarea {
     .ant-input {
       width: 100%;
@@ -641,13 +723,12 @@ export default {
 :deep(.no-hover-row:hover > td) {
   background-color: transparent !important;
 }
-:deep(.ant-table-wrapper .ant-table-cell){
+:deep(.ant-table-wrapper .ant-table-cell) {
-    background:none!important;
+  background: none !important;
+}
+:deep(.ant-table-cell) {
+  &::before {
+    width: 0 !important;
   }
-  :deep(.ant-table-cell){
+}
-    &::before{
-      width: 0 !important;
-    }
-  }
-
 </style>

web/src/router/index.js

@@ -111,4 +111,23 @@ const router = createRouter({
   routes
 })
 
+router.beforeEach((to, from, next) => {
+  console.log(to)
+  const token = localStorage.getItem('token') || ''
+
+  if (to.path == '/login') {
+    if (token && token != '') {
+      next('/')
+    } else {
+      next()
+    }
+  } else {
+    if (token && token != '') {
+      next()
+    } else {
+      next('/login')
+    }
+  }
+})
+
 export default router

web/src/style/antd.scss

@@ -133,7 +133,7 @@ $page-border: #cad2dd;
 .ant-modal .ant-modal-content {
   background-image: url('@/assets/images/modalBg.png');
   background-size: 100% 100%;
-  background-color: #ffffff00 !important;
+  background-color: rgb(6 25 42) !important;
   border-radius: 0;
 }
 .ant-modal .ant-modal-footer {

web/src/style/index.scss

@@ -18,11 +18,11 @@
 ::-webkit-scrollbar-thumb {
   cursor: pointer;
   border-radius: 4px;
-  background: rgba(144, 147, 153, 0.3);
+  background: rgba(144, 147, 153, 0.1);
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: #989eac;
+  background: #d3d5db65;
 }
 
 ::-webkit-scrollbar-corner {

web/src/views/MainView.vue

@@ -14,7 +14,7 @@
       </span>
     </div>
 
-    <div class="page">
+    <div class="page" ref="page">
       <div class="subMenu" v-if="subMenu.length > 0">
         <div
           class="subItem"
@@ -58,7 +58,6 @@ export default {
       currentKey: '',
       subCurrentKey: '',
       menuList: [],
-     
       subMenu: [],
       currentTime: '',
       timer: null,
@@ -94,6 +93,8 @@ export default {
   },
 
   mounted() {
+    console.log(this.$refs.page.offsetHeight,'============');
+    
     this.getDateTime()
     this.timer = setInterval(() => {
       this.getDateTime()

web/src/views/monitor.vue

@@ -4,7 +4,7 @@
       <div class="left">
         <div class="search-item">
           <span>场站切换</span>
-          <a-select v-model:value="selectStationId" style="width: 220px" @change="getStationChange">
+          <a-select v-model:value="selectStationId" style="width: 400px" @change="getStationChange">
             <a-select-option v-for="station in stations" :value="station['station_id']"
               >{{ station.name }}
             </a-select-option>
@@ -70,7 +70,7 @@ export default {
         {
           name: '储能系统',
           titles: [
-            { v: '边缘网关', key: 'num' },
+            { v: '边缘网关编号', key: 'num' },
             { v: '总有功功率(台区)', key: 'power', sufix: 'kW' }
           ],
           power: 60,
@@ -114,10 +114,10 @@ export default {
       workMode: '',
       workModes: [
         // 0：手动，1：峰谷套利，2：增网配容，3：应急供电，4：并网保电，5：自定时段
-        {
+        // {
-          value: 0,
+        //   value: 0,
-          label: '手动'
+        //   label: '手动'
-        },
+        // },
         {
           value: 1,
           label: '峰谷套利'
@@ -256,6 +256,9 @@ export default {
         color: #fff;
         padding: 10px 10px;
         cursor: pointer;
+        &:hover{
+          background: $table-bg;
+        }
 
         .name {
           font-size: 20px;

web/src/views/predict.vue

@@ -49,7 +49,7 @@ export default {
             },
             {
               key: 'W_store_ou',
-              label: '储能放电电量',
+              label: '放电电量',
               seriesOptions:{
                 symbol: 'circle',
                 symbolSize: 8,
@@ -73,7 +73,7 @@ export default {
      
             {
               key: 'W_charge',
-              label: '运行负荷',
+              label: '充电电量',
               seriesOptions:{
                 symbol: 'circle',
                 symbolSize: 8,

web/src/views/system/alarmLog.vue

@@ -26,7 +26,7 @@
         </template>
       </ComTable>
     </div>
-    <a-modal v-model:open="formModal" width="750px" style="top: 20px" :footer="null">
+    <a-modal v-model:open="formModal" width="750px" style="top: 80px" :footer="null">
       <!-- action:edit add -->
       <EditCom
         :record="formState"

web/src/views/system/device.vue

@@ -1,9 +1,6 @@
 <template>
   <div class="device">
-    <searchBox
+    <searchBox :btn-option-list="btnOptionList" @operateForm="operateForm"></searchBox>
-      :btn-option-list="btnOptionList"
-      @operateForm="operateForm"
-    ></searchBox>
 
     <div class="content-table">
       <ComTable
@@ -17,10 +14,12 @@
         <template #type="record">
           <span>{{ getType(record.type) }}</span>
         </template>
-         <template #isEnable="record">
+        <template #isEnable="record">
-          <span><a-tag :color="record.is_open==1 ? 'green' : 'red'">{{
+          <span
-                record.is_open==1 ? '启用' : '禁用'
+            ><a-tag :color="record.is_open == 1 ? 'green' : 'red'">{{
-              }}</a-tag></span>
+              record.is_open == 1 ? '启用' : '禁用'
+            }}</a-tag></span
+          >
         </template>
 
         <template #action="record">
@@ -28,13 +27,15 @@
         </template>
       </ComTable>
     </div>
-    <a-modal v-model:open="formModal" width="750px" style="top: 20px" :footer="null">
+    <a-modal v-model:open="formModal" width="750px" style="top: 80px" :footer="null">
       <!-- action:edit add -->
       <EditCom
+        v-if="formModal"
         :record="formState"
         @operateForm="operateForm"
         type="device"
         :action="formStatus"
+        ref="editComRef"
       ></EditCom>
     </a-modal>
   </div>
@@ -50,8 +51,8 @@ import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
 import { createVNode } from 'vue'
 
 import searchBox from '@/components/SearchBox.vue'
-import {deviceTypeList} from '@/utils/config'
+import { deviceTypeList } from '@/utils/config'
-export default { 
+export default {
   name: '',
   components: {
     searchBox,
@@ -72,9 +73,9 @@ export default {
       },
       btnOptionList: [],
       paramsDate: {},
-      tableData:[],
+      tableData: [],
-      tableOption:{},
+      tableOption: {},
-      stations:[],//场站列表
+      stations: [] //场站列表
     }
   },
   computed: {},
@@ -99,23 +100,20 @@ export default {
   methods: {
     //查询场站列表
     async getStations() {
-      this.stations=[]
+      this.stations = []
       try {
-        const res = await getReq('/queryStationList', { page: 0, 'page_size': 10000 })
+        const res = await getReq('/queryStationList', { page: 0, page_size: 10000 })
 
         this.stations = res.data
-        
       } catch (error) {
         this.stations = []
-        
       }
-      return 
+      return
     },
     //获取设备类型
-    getType(type){
+    getType(type) {
-      const deviceType = this.deviceTypeList.find((item) => item.value == type).label||''
+      const deviceType = this.deviceTypeList.find((item) => item.value == type).label || ''
       return deviceType
-      
     },
     async getList() {
       this.$refs.comTable.loading = true
@@ -150,25 +148,24 @@ export default {
     },
     async operateForm(type, record = {}) {
       this.formStatus = type
-      if(type=='add'){
+      if (type == 'add') {
         this.formModal = true
         this.formState = {}
         this.getRuleFormInfo()
-      }else if(type=='edit'||type=='read'){ 
+      } else if (type == 'edit' || type == 'read') {
         await this.getRuleFormInfo(record)
 
         this.formModal = true
         this.formState = record
-      }else if(type=='del'){
+      } else if (type == 'del') {
-        this.handleDelete([record.device_id],this.getList)
+        this.handleDelete([record.device_id], this.getList)
-      }else if(type=='back'){
+      } else if (type == 'back') {
         this.formModal = false
         this.getList()
       }
-      
     },
     //  删除操作
-    async handleDelete(id,callback) {
+    async handleDelete(id, callback) {
       const that = this
       this.$Modal.confirm({
         title: '你确认删除数据吗?',
@@ -176,10 +173,10 @@ export default {
 
         async onOk() {
           try {
-            const res = await getReq('/deleteDevice',{device_id:id})
+            const res = await getReq('/deleteDevice', { device_id: id })
             if (res.errcode === 0) {
               this.$message.success(res.errmsg)
-              this.pageOption.page=1
+              this.pageOption.page = 1
               callback()
             } else {
               throw res
@@ -188,14 +185,11 @@ export default {
             callback()
           }
         },
-        onCancel() {
+        onCancel() {},
-        },
         class: 'test'
       })
     },
     async getRuleFormInfo(record) {
-      
-
       const row = record || {}
 
       for (let e of deviceOptions) {
@@ -209,14 +203,12 @@ export default {
           }
 
           if (i.key === 'station_id') {
-            i.list =  this.stations
+            i.list = this.stations
           }
-          if(['rated_capacity', 'rated_current', 'rated_voltage', 'reted_power'].includes(i.key)){
+          if (['rated_capacity', 'rated_current', 'rated_voltage', 'reted_power'].includes(i.key)) {
-            const attrs=JSON.parse(row.attrs||"{}")
+            const attrs = JSON.parse(row.attrs || '{}')
             e.ruleForm[i.key] = attrs[i.key]
           }
-          
-
         }
       }
     },
@@ -237,7 +229,6 @@ export default {
   .content-table {
     width: 100%;
     height: calc(100% - 90px);
-    padding: 0 10px;
   }
 }
 </style>

web/src/views/system/log.vue

@@ -23,7 +23,7 @@
         </template>
       </ComTable>
     </div>
-    <a-modal v-model:open="formModal" width="750px" style="top: 20px" :footer="null">
+    <a-modal v-model:open="formModal" width="750px" style="top: 80px" :footer="null">
       <!-- action:edit add -->
       <EditCom
         :record="record"

web/src/views/system/permission.vue

@@ -30,7 +30,7 @@
         </template>
       </TreeTable>
     </div>
-    <a-modal v-model:open="formModal" width="750px" style="top: 20px" :footer="null">
+    <a-modal v-model:open="formModal" width="750px" style="top: 80px" :footer="null">
       <!-- action:edit add -->
       <EditCom
         :record="record"

web/src/views/system/policy.vue

@@ -24,17 +24,17 @@
       </ComTable>
     </div>
   </div>
-  <div>
+  <!-- <div> -->
     <a-modal
       v-model:open="formModal"
-      width="900px"
+      width="800px"
-      style="top: 20px;"
+      style="top: 80px;height: 600px;"
       :footer="null"
       :get-container="() => $refs.policy"
     >
-      <policyForm :form-state="formState" :form-status="formStatus" @closeModal="closeModal" />
+      <policyForm v-if="formModal" :form-state="formState" :form-status="formStatus" @closeModal="closeModal" />
     </a-modal>
-  </div>
+  <!-- </div> -->
 </template>
 
 <script>
@@ -236,7 +236,6 @@ export default {
   .content-table {
     width: 100%;
     height: calc(100% - 90px);
-    padding: 0 10px;
   }
 }
 </style>

web/src/views/system/role.vue

@@ -30,7 +30,7 @@
         </template>
       </ComTable>
     </div>
-    <a-modal v-model:open="formModal" width="950px" style="top: 20px" :footer="null" :destroy-on-close="true">
+    <a-modal v-model:open="formModal" width="950px" style="top: 80px" :footer="null" :destroy-on-close="true">
       <!-- action:edit add -->
       <EditCom
         :show-flag="formModal"

web/src/views/system/service.vue

@@ -26,7 +26,7 @@
         </template>
       </ComTable>
     </div>
-    <a-modal v-model:open="formModal" width="750px" style="top: 20px" :footer="null">
+    <a-modal v-model:open="formModal" width="750px" style="top: 80px" :footer="null">
       <!-- action:edit add -->
       <EditCom
         :record="record"

web/src/views/system/station.vue

@@ -31,7 +31,7 @@
         </template>
       </ComTable>
     </div>
-    <a-modal v-model:open="formModal" width="750px" style="top: 20px" :footer="null">
+    <a-modal v-model:open="formModal" width="750px" style="top: 80px" :footer="null">
       <!-- action:edit add -->
       <EditCom
         :record="record"

web/src/views/system/user.vue

@@ -26,7 +26,7 @@
         </template>
       </ComTable>
     </div>
-    <a-modal v-model:open="formModal" width="750px" style="top: 20px" :footer="null">
+    <a-modal v-model:open="formModal" width="750px" style="top: 80px" :footer="null">
       <!-- action:edit add -->
       <EditCom
         :record="record"