[Style 0000] 除尘风机智能检测页面样式更新

src/views/vent/gas/components/list/index.vue

@@ -46,8 +46,8 @@
       type?: 'input' | 'default' | 'status-light';
       /** 输入框的固定宽度 */
       labelWidth?: number | string;
-      /** 通用状态灯配置，第一项配置激活状态，第二项配置失活状态 */
-      status?: [{ label: string; value: any }, { label: string }];
+      /** 状态灯配置，第一项配置激活状态，第二项配置失活状态，都不匹配则为默认无状态 */
+      status?: [{ label: string; value: any }, { label: string; value: any }];
       items: {
         /** value（即右侧）部分是否有边框 */
         bordered?: boolean;
@@ -61,8 +61,8 @@
         type?: 'input' | 'default' | 'status-light';
         /** 输入框的固定宽度 */
         labelWidth?: number | string;
-        /** 状态灯配置，第一项配置激活状态，第二项配置失活状态 */
-        status?: [{ label: string; value: any }, { label: string }];
+        /** 状态灯配置，第一项配置激活状态，第二项配置失活状态，都不匹配则为默认无状态 */
+        status?: [{ label: string; value: any }, { label: string; value: any }];
         span?: number;
       }[];
     }>(),

src/views/vent/gas/components/list/listItem.vue

@@ -52,15 +52,15 @@
       labelWidth?: number | string;
       /** 输入框的固定宽度 */
       valueWidth?: number | string;
-      /** 状态灯配置，第一项配置激活状态，第二项配置失活状态 */
-      status?: [{ label: string; value: any }, { label: string }];
+      /** 状态灯配置，第一项配置激活状态，第二项配置失活状态，都不匹配则为默认无状态 */
+      status?: [{ label: string; value: any }, { label: string; value: any }];
     }>(),
     {
       bordered: false,
       backgrounded: true,
       type: 'default',
       label: '',
-      value: '',
+      value: '-',
       labelWidth: 100,
     }
   );
@@ -69,11 +69,20 @@
   // 状态灯相关的内容
   const statusLightConfig = computed(() => {
     if (!props.status) return { label: 'unknown', class: 'list-item__deactived' };
-    const actived = props.value === props.status[0].value;
+    let classSuffix = 'default';
+    let statusLabel = '';
+    if (props.value === props.status[0].value) {
+      classSuffix = 'actived';
+      statusLabel = props.status[0].label;
+    }
+    if (props.value === props.status[1].value) {
+      classSuffix = 'deactived';
+      statusLabel = props.status[1].label;
+    }
 
     return {
-      label: props.status[actived ? 0 : 1].label,
-      class: actived ? 'list-item__actived' : 'list-item__deactived',
+      label: statusLabel,
+      class: `list-item__${classSuffix}`,
     };
   });
 
@@ -142,6 +151,8 @@
   }
 
   .list-item__actived {
+    min-width: 20px;
+    height: 100%;
     padding-left: 20px;
     background-image: url('@/assets/images/company/home/select-bg.png');
     background-repeat: no-repeat;
@@ -150,6 +161,8 @@
   }
 
   .list-item__deactived {
+    min-width: 20px;
+    height: 100%;
     padding-left: 20px;
     background-image: url('@/assets/images/company/home/unselect-bg.png');
     background-repeat: no-repeat;
@@ -157,6 +170,37 @@
     background-size: 20px 20px;
   }
 
+  .list-item__default {
+    min-width: 20px;
+    height: 100%;
+    padding-left: 20px;
+    position: relative;
+  }
+  .list-item__default::before {
+    display: block;
+    content: '';
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    top: calc(50% - 4px);
+    left: 10px;
+    border-radius: 50%;
+    background-color: #858585;
+  }
+  .list-item__default::after {
+    display: block;
+    content: '';
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    top: calc(50% - 6px);
+    left: 8px;
+    border-radius: 50%;
+    background-color: #85858544;
+    box-shadow: 0 0 1px 1px #85858599;
+    box-sizing: border-box;
+  }
+
   ::v-deep .zxm-input {
     color: @white;
   }

src/views/vent/monitorManager/dedustMonitor/components/DedustHome.vue

@@ -1,15 +1,18 @@
 <template>
   <a-spin tip="Loading..." :spinning="loading">
     <div class="monitor-container">
+      <div style="position: absolute; height: 40px; width: 100%; top: calc(50%-20px); font-size: 20px; color: red; text-align: center">
+        {{ deviceInfo.warnDes }}
+      </div>
       <div class="lr left-box vent-margin-t-10">
         <ventBox1>
           <template #title>
             <div>除尘机状态</div>
           </template>
           <template #container>
-            <List layout="double-columns" title="故障状态" v-bind="dedustStatusPropA" />
-            <List title="报警状态" v-bind="dedustStatusPropB" />
-            <List title="激活状态" v-bind="dedustStatusPropC" />
+            <List icon="warning-title" type="status-light" :labelWidth="130" layout="double-columns" title="故障状态" v-bind="dedustStatusPropA" />
+            <List icon="warning-title" type="status-light" :labelWidth="300" title="报警状态" v-bind="dedustStatusPropB" />
+            <List icon="warning-title" type="status-light" :labelWidth="300" title="激活状态" v-bind="dedustStatusPropC" />
           </template>
         </ventBox1>
       </div>
@@ -19,7 +22,7 @@
             <div>监测参数</div>
           </template>
           <template #container>
-            <List v-bind="dedustMonitorProp" />
+            <List :labelWidth="200" v-bind="dedustMonitorProp" />
           </template>
         </ventBox1>
       </div>
@@ -130,7 +133,7 @@
       Object.assign(e, e.readData);
       e.readData = null;
     });
-    deviceInfo.value = _.get(res, 'deviceInfo.dedustefan.datalist[0]', {});
+    deviceInfo.value = _.get(res, 'deviceInfo.dedustefan.datalist[0]', { warnDes: '设备断开' });
     workFaceHistorySource.value = res.sysInfo.history;
     workFaceSource.value = Object.assign(res.sysInfo, res.sysInfo.readData);
     loading.value = false;

src/views/vent/monitorManager/dedustMonitor/dedust.data.ts

@@ -1,15 +1,11 @@
-/** 故障相关状态配置 */
-export const statusConfigA = [{ value: 1, label: '故障' }, { label: '正常' }];
-/** 报警相关状态配置 */
-export const statusConfigB = [{ value: 1, label: '报警' }, { label: '正常' }];
-/** 激活与否相关状态配置 */
-export const statusConfigC = [{ value: 1, label: '激活' }, { label: '接触' }];
+/** 故障相关状态配置 0 正常 1 故障 */
+export const statusConfigA = [{ value: 0, label: '' }, { label: '' }];
+/** 报警相关状态配置 0 正常 1 报警 */
+export const statusConfigB = [{ value: 0, label: '' }, { label: '' }];
+/** 激活与否相关状态配置 0 接触 1 激活 */
+export const statusConfigC = [{ value: 0, label: '' }, { label: '' }];
 
 export const dedustMonitorConfig = [
-  {
-    prop: 'warnDes',
-    label: '报警描述',
-  },
   // {
   //   prop: 'FrequencySetPointZD',
   //   label: '最低频率设置',
@@ -24,31 +20,31 @@ export const dedustMonitorConfig = [
   // },
   {
     prop: 'Frequency',
-    label: '运行频率',
+    label: '运行频率（Hz）',
   },
   {
     prop: 'BusVoltage',
-    label: '母线电压',
+    label: '母线电压（V）',
   },
   {
     prop: 'OutputVoltage',
-    label: '输出电压',
+    label: '输出电压（V）',
   },
   {
     prop: 'Outputcurrent',
-    label: '输出电流',
+    label: '输出电流（A）',
   },
   {
     prop: 'OutputPower',
-    label: '输出功率',
+    label: '输出功率（kW）',
   },
   {
     prop: 'Current1',
-    label: '前机电流',
+    label: '前机电流（A）',
   },
   {
     prop: 'Current2',
-    label: '后机电流',
+    label: '后机电流（A）',
   },
 ];