[Feat 0000] 添加综合预警看板

src/views/vent/home/billboard/billboard.api.ts

@@ -13,197 +13,15 @@ enum Api {
  * @param params
  */
 export const getSummary: () => Promise<BillboardType[]> = () =>
-  Promise.resolve([
-    {
-      dustInfo: {
-        // 矿井粉尘风险信息
-        totalNum: 0,
-        dustTypeList: [
-          {
-            deviceType: '/',
-            warnLevel: 0,
-            num: 0,
-            typeName: '/',
-          },
-          {
-            deviceType: '/',
-            warnLevel: 0,
-            num: 0,
-            typeName: '/',
-          },
-        ],
-        dustWarnLevel: 0, // 矿井粉尘风险性等级
+  defHttp
+    .post({
+      url: Api.getSummary,
+      params: {
+        userName: store.userInfo?.username,
       },
-      fileServerInfo: {
-        totalNum: 0, // 文档总数
-        approvalNum: 0, // 待审批文档
-      },
-      fireInfo: {
-        tempMax: 29,
-        fireWarnLevel: 1001,
-        bundletubeInfo: {
-          typeName: '束管',
-          maxValueInstallPos: '31310采空区50m',
-          tempMax: 0,
-          coval: '2.0',
-          ch2val: '0.0',
-          deviceType: 'bundletube_auto',
-          warnLevel: 1001,
-          maxValue: 2,
-          o2val: '10.31',
-          totalNum: 12,
-          chval: '0.0',
-          gasval: '0.0',
-          time: '2024-05-31 16:34:04',
-          isRun: '-2',
-          co2val: '7.42',
-        },
-        smokeSensorInfo: {
-          deviceType: 'modelsensor_smoke',
-          tempMax: 0,
-          warnLevel: 0,
-          totalNum: 30,
-          maxValue: 0,
-          typeName: '烟雾传感器',
-          maxValueInstallPos: '12煤井底停车场',
-        },
-        fiberInfo: {
-          deviceType: 'fiber_normal',
-          tempMax: 0,
-          warnLevel: 0,
-          totalNum: 4,
-          maxValue: 25,
-          typeName: '光纤测温',
-          maxValueInstallPos: '31煤中央变电所电缆沟-通道一',
-        },
-        tempSensorInfo: {
-          deviceType: 'modelsensor_temperature',
-          tempMax: 29,
-          warnLevel: 0,
-          totalNum: 51,
-          maxValue: 29,
-          typeName: '温度传感器',
-          maxValueInstallPos: '主通风机房配电室',
-        },
-      },
-      gasInfo: {
-        gasWarnLevel: 0, // 瓦斯风险等级
-        gasTypeList: [
-          {
-            warnLevel: 0,
-            num: 0,
-            typeName: '/',
-          },
-        ],
-      },
-      ventInfo: {
-        //通风系统信息
-        totallength: 0, //矿井巷道总长度
-        zonghuifeng: '0', //总回风
-        fanMainList: [
-          {
-            sqzlfb: '/',
-            strname: '/',
-            strinstallpos: '/',
-            Fan1m3: '/',
-            Fan2m3: '/',
-          },
-        ],
-        xufengliang: 0, //总需风量
-        zongjinfeng: '/', //总进风
-      },
-      sys_warndata: {
-        info: {
-          sysInfo: {
-            ventS: {
-              maxLevel: 0,
-              netstatus: 0,
-              code: '/',
-              levelstatus: '/',
-              maxLevel_str: '/',
-              name: '/',
-              count: 0,
-              status: '/',
-              maxLevel_status: '/',
-            },
-            fireS: {
-              maxLevel: 0,
-              code: '/',
-              maxLevel_str: '/',
-              count: 0,
-              netstatus: 0,
-              levelstatus: '/',
-              name: '/',
-              status: '/',
-              maxLevel_status: '/',
-            },
-            synthesizeS: {
-              maxLevel: 0,
-              netstatus: 1,
-              code: 'synthesizeS',
-              levelstatus: '低风险',
-              maxLevel_str: '正常',
-              name: '综合',
-              count: 0,
-              status: '正常',
-              maxLevel_status: '低风险',
-            },
-            dustS: {
-              maxLevel: 0,
-              netstatus: 0,
-              code: 'dustS',
-              levelstatus: '低风险',
-              maxLevel_str: '正常',
-              name: '防尘',
-              count: 0,
-              status: '正常',
-              maxLevel_status: '低风险',
-            },
-            gasS: {
-              maxLevel: 0,
-              netstatus: 0,
-              code: 'gasS',
-              levelstatus: '低风险',
-              maxLevel_str: '正常',
-              devices: [],
-              name: '瓦斯',
-              count: 0,
-              status: '正常',
-              maxLevel_status: '低风险',
-            },
-            deviceWarnInfo: {
-              maxLevel: 101,
-              levelstatus: '低风险',
-              maxLevel_str: '低风险预警',
-              status: '异常',
-              devMaxlevel_status: '低风险预警',
-            },
-          },
-        },
-      },
-      warningInfo: {
-        total: 5,
-        vent: 1,
-        gas: 1,
-        dust: 1,
-        fire: 1,
-        safety: 1,
-        maxLevel: 5,
-      },
-      orgname: '/',
-      orgcode: '/',
-      ip: 'localhost',
-    },
-  ]);
-// defHttp
-//   .post({
-//     url: Api.getSummary,
-//     params: {
-//       userName: store.userInfo?.username,
-//     },
-//   })
-//   .then((res: BillboardType[]) => {
-//     return res.reverse().sort((r) => {
-//       return r.orgname ? -1 : 1;
-//     });
-//   });
+    })
+    .then((res: BillboardType[]) => {
+      return res.reverse().sort((r) => {
+        return r.orgname ? -1 : 1;
+      });
+    });

src/views/vent/home/billboard/billboard.data.ts

@@ -1,192 +1,192 @@
 import leftImg from '/@/assets/images/files/homes/file.svg';
 import rightImg from '/@/assets/images/files/homes/sp.svg';
-import GasIcon from '/@/assets/images/vent/gas-icon.png';
-import FireIcon from '/@/assets/images/vent/fire-icon.png';
-import VentIcon from '/@/assets/images/vent/vent-icon.png';
-import SafetyIcon from '/@/assets/images/vent/safety-icon.png';
-import DustIcon from '/@/assets/images/vent/dust-icon.png';
+import GasIcon from '/@/assets/images/vent/gas-icon-2.png';
+import FireIcon from '/@/assets/images/vent/fire-icon-2.png';
+import VentIcon from '/@/assets/images/vent/vent-icon-2.png';
+import SafetyIcon from '/@/assets/images/vent/safety-icon-2.png';
+import DustIcon from '/@/assets/images/vent/dust-icon-2.png';
 
-export type Translation = Record<string | number, string>;
-export interface TitleConfig {
-  label: string;
-  prop: string;
-  translation?: Translation;
-}
-export interface HeaderConfig {
-  label: string;
-  prop: string;
-  translation?: Translation;
-}
-export interface TableConfig {
-  prop: string;
-  columns: { label: string; prop: string; _t?: boolean }[];
-  collapses: { label: string; prop: string; _t?: boolean }[];
-  translation?: Translation;
-}
-export interface ListConfig {
-  icon: string;
-  label: string;
-  prop: string;
-  translation?: Translation;
-  collapses: { label: string; prop: string; _t?: boolean }[];
-}
-export interface OverviewConfig {
-  label: string;
-  prop: string;
-  src: string;
-}
-export interface TreeConfig {
-  prefix: string;
-  prop: string;
-  suffix: string;
-  children: {
-    prefix: string;
-    prop: string;
-    suffix: string;
-  }[];
-  translation?: Record<string | number, string>;
-}
+// export type Translation = Record<string | number, string>;
+// export interface TitleConfig {
+//   label: string;
+//   prop: string;
+//   translation?: Translation;
+// }
+// export interface HeaderConfig {
+//   label: string;
+//   prop: string;
+//   translation?: Translation;
+// }
+// export interface TableConfig {
+//   prop: string;
+//   columns: { label: string; prop: string; _t?: boolean }[];
+//   collapses: { label: string; prop: string; _t?: boolean }[];
+//   translation?: Translation;
+// }
+// export interface ListConfig {
+//   icon: string;
+//   label: string;
+//   prop: string;
+//   translation?: Translation;
+//   collapses: { label: string; prop: string; _t?: boolean }[];
+// }
+// export interface OverviewConfig {
+//   label: string;
+//   prop: string;
+//   src: string;
+// }
+// export interface TreeConfig {
+//   prefix: string;
+//   prop: string;
+//   suffix: string;
+//   children: {
+//     prefix: string;
+//     prop: string;
+//     suffix: string;
+//   }[];
+//   translation?: Record<string | number, string>;
+// }
 
-/** 看板的总配置 */
-export const BillboardConfig: {
-  DustStatus: {
-    title: TitleConfig;
-    table: TableConfig;
-  };
-  FileOverview: {
-    contents: OverviewConfig[];
-  };
-  FireStatus: {
-    title: TitleConfig;
-    lists: ListConfig[];
-  };
-  GasStauts: {
-    headers: HeaderConfig[];
-    table: TableConfig;
-  };
-  Summary: {
-    headers: HeaderConfig[];
-    table: TableConfig;
-  };
-  VentilationStauts: {
-    headers: HeaderConfig[];
-    tree: TreeConfig;
-  };
-  Warning: {
-    contents: OverviewConfig[];
-  };
-} = {
-  DustStatus: {
-    title: {
-      text: '',
-      prop: '',
-      translation: {},
-    },
-    table: {
-      columns: [{ label: '', prop: '' }],
-      collapses: [{ label: '', prop: '' }],
-      translation: {},
-    },
-  },
-  FileOverview: {
-    content: [
-      { src: leftImg, text: '文档总数', prop: 'totalNum' },
-      { src: rightImg, text: '待审批数', prop: 'approvalNum' },
-    ],
-  },
-  FireStatus: {
-    title: {
-      text: '',
-      prop: '',
-      translation: {},
-    },
-    list: [
-      {
-        icon: '',
-        label: '',
-        prop: '',
-        type: '',
-        translation: {},
-        collapses: [{ label: '', prop: '' }],
-      },
-    ],
-  },
-  GasStatus: {
-    header: [
-      {
-        label: '',
-        prop: '',
-        translation: {},
-      },
-    ],
-    table: {
-      columns: [],
-      collapses: [],
-      translation: {},
-    },
-  },
-  Summary: {
-    header: [
-      {
-        label: '',
-        prop: '',
-        translation: {},
-      },
-    ],
-    table: {
-      columns: [],
-      translation: {},
-    },
-  },
-  VentilationStatus: {
-    header: [
-      {
-        label: '',
-        prop: '',
-        filte: '',
-        translation: {},
-      },
-    ],
-    tree: {
-      prefix: '',
-      prop: 'strname',
-      suffix: '',
-      children: [
-        {
-          prefix: '名称：',
-          prop: 'strinstallpos',
-          suffix: '',
-        },
-        {
-          prefix: '1号风机风量：',
-          prop: 'Fan1m3',
-          suffix: '(m³/min)',
-        },
-        {
-          prefix: '2号风机风量：',
-          prop: 'Fan2m3',
-          suffix: '(m³/min)',
-        },
-        {
-          prefix: '频率：',
-          prop: 'FanFreqHz',
-          suffix: 'Hz',
-        },
-        {
-          prefix: '三区阻力分布：',
-          prop: 'sqzlfb',
-          suffix: '',
-        },
-      ],
-    },
-  },
-  Warning: {
-    content: [
-      { src: leftImg, text: '文档总数', prop: 'totalNum' },
-      { src: rightImg, text: '待审批数', prop: 'approvalNum' },
-    ],
-  },
-};
+// /** 看板的总配置 */
+// export const BillboardConfig: {
+//   DustStatus: {
+//     title: TitleConfig;
+//     table: TableConfig;
+//   };
+//   FileOverview: {
+//     contents: OverviewConfig[];
+//   };
+//   FireStatus: {
+//     title: TitleConfig;
+//     lists: ListConfig[];
+//   };
+//   GasStauts: {
+//     headers: HeaderConfig[];
+//     table: TableConfig;
+//   };
+//   Summary: {
+//     headers: HeaderConfig[];
+//     table: TableConfig;
+//   };
+//   VentilationStauts: {
+//     headers: HeaderConfig[];
+//     tree: TreeConfig;
+//   };
+//   Warning: {
+//     contents: OverviewConfig[];
+//   };
+// } = {
+//   DustStatus: {
+//     title: {
+//       text: '',
+//       prop: '',
+//       translation: {},
+//     },
+//     table: {
+//       columns: [{ label: '', prop: '' }],
+//       collapses: [{ label: '', prop: '' }],
+//       translation: {},
+//     },
+//   },
+//   FileOverview: {
+//     content: [
+//       { src: leftImg, text: '文档总数', prop: 'totalNum' },
+//       { src: rightImg, text: '待审批数', prop: 'approvalNum' },
+//     ],
+//   },
+//   FireStatus: {
+//     title: {
+//       text: '',
+//       prop: '',
+//       translation: {},
+//     },
+//     list: [
+//       {
+//         icon: '',
+//         label: '',
+//         prop: '',
+//         type: '',
+//         translation: {},
+//         collapses: [{ label: '', prop: '' }],
+//       },
+//     ],
+//   },
+//   GasStatus: {
+//     header: [
+//       {
+//         label: '',
+//         prop: '',
+//         translation: {},
+//       },
+//     ],
+//     table: {
+//       columns: [],
+//       collapses: [],
+//       translation: {},
+//     },
+//   },
+//   Summary: {
+//     header: [
+//       {
+//         label: '',
+//         prop: '',
+//         translation: {},
+//       },
+//     ],
+//     table: {
+//       columns: [],
+//       translation: {},
+//     },
+//   },
+//   VentilationStatus: {
+//     header: [
+//       {
+//         label: '',
+//         prop: '',
+//         filte: '',
+//         translation: {},
+//       },
+//     ],
+//     tree: {
+//       prefix: '',
+//       prop: 'strname',
+//       suffix: '',
+//       children: [
+//         {
+//           prefix: '名称：',
+//           prop: 'strinstallpos',
+//           suffix: '',
+//         },
+//         {
+//           prefix: '1号风机风量：',
+//           prop: 'Fan1m3',
+//           suffix: '(m³/min)',
+//         },
+//         {
+//           prefix: '2号风机风量：',
+//           prop: 'Fan2m3',
+//           suffix: '(m³/min)',
+//         },
+//         {
+//           prefix: '频率：',
+//           prop: 'FanFreqHz',
+//           suffix: 'Hz',
+//         },
+//         {
+//           prefix: '三区阻力分布：',
+//           prop: 'sqzlfb',
+//           suffix: '',
+//         },
+//       ],
+//     },
+//   },
+//   Warning: {
+//     content: [
+//       { src: leftImg, text: '文档总数', prop: 'totalNum' },
+//       { src: rightImg, text: '待审批数', prop: 'approvalNum' },
+//     ],
+//   },
+// };
 
 // 基础的表格列配置，针对普通设备
 export const GAS_STATUS_COLUMN = [
@@ -442,12 +442,12 @@ export const SUMMARY_COLUMN = [
 
 // 预警总览相关的内容配置项
 export const WARNING_CONFIG = [
-  { src: '', text: '总预警数量', prop: 'total', id: 'warning_cfg_000' },
-  { src: GasIcon, text: '瓦斯', prop: 'gas', id: 'warning_cfg_001' },
-  { src: FireIcon, text: '火灾', prop: 'fire', id: 'warning_cfg_002' },
-  { src: DustIcon, text: '粉尘', prop: 'dust', id: 'warning_cfg_003' },
-  { src: VentIcon, text: '通风', prop: 'vent', id: 'warning_cfg_004' },
-  { src: SafetyIcon, text: '安全监控', prop: 'safety', id: 'warning_cfg_005' },
+  { src: '', text: '监测总数', prop: 'total', prop2: 'total', id: 'warning_cfg_000' },
+  { src: SafetyIcon, text: '安全监测', prop: 'safety', prop2: 'safetyRisk', id: 'warning_cfg_005' },
+  { src: VentIcon, text: '通风', prop: 'vent', prop2: 'ventRisk', id: 'warning_cfg_004' },
+  { src: DustIcon, text: '粉尘', prop: 'dust', prop2: 'dustRisk', id: 'warning_cfg_003' },
+  { src: GasIcon, text: '瓦斯', prop: 'gas', prop2: 'gasRisk', id: 'warning_cfg_001' },
+  { src: FireIcon, text: '火灾', prop: 'fire', prop2: 'fireRisk', id: 'warning_cfg_002' },
 ];
 
 export const DEFAULT_TEST_DATA = {
@@ -620,10 +620,15 @@ export const DEFAULT_TEST_DATA = {
   warningInfo: {
     total: 5,
     vent: 1,
+    ventRisk: '低风险',
     gas: 1,
+    gasRisk: '低风险',
     dust: 1,
+    dustRisk: '低风险',
     fire: 1,
+    fireRisk: '低风险',
     safety: 1,
+    safetyRisk: '低风险',
     maxLevel: 5,
   },
   orgname: '/',

src/views/vent/home/billboard/components/Warning.vue

@@ -4,7 +4,9 @@
     <div class="warning-item" v-for="item in WARNING_CONFIG" :key="item.id" @click="$emit('click', item)">
       <div class="img"> <img :src="item.src" alt="" /> </div>
       <div class="text">{{ item.text }}</div>
+      <div class="extra">监测数量</div>
       <div class="num" :class="`warning-level_${warnData.maxLevel}`">{{ warnData[item.prop] }}</div>
+      <div class="risk" :class="`warning-level_${warnData.maxLevel}`">{{ warnData[item.prop2] }}</div>
     </div>
   </div>
 </template>
@@ -26,10 +28,15 @@
   const warnData = shallowRef<BillboardType['warningInfo']>({
     total: 5,
     vent: 1,
+    ventRisk: '低风险',
     gas: 1,
+    gasRisk: '低风险',
     dust: 1,
+    dustRisk: '低风险',
     fire: 1,
+    fireRisk: '低风险',
     safety: 1,
+    safetyRisk: '低风险',
     maxLevel: 5,
   });
 
@@ -45,6 +52,7 @@
 </script>
 
 <style lang="less" scoped>
+  @import '@/design/vent/color.less';
   @font-face {
     font-family: 'douyuFont';
     src: url(/@/assets/images/files/douyuFont.otf);
@@ -52,42 +60,82 @@
 
   .warning {
     height: 100%;
-    display: flex;
-    justify-content: space-evenly;
-    align-items: center;
-    flex-wrap: wrap;
+    // display: flex;
+    // justify-content: space-evenly;
+    // align-items: center;
+    // flex-wrap: wrap;
   }
 
   .warning-item:first-of-type {
-    width: 100%;
-    flex-basis: 100%;
-    flex-shrink: 0;
-    flex-grow: 1;
-    font-size: 17px;
-    padding: 10px 0;
-
-    div {
-      display: inline;
-    }
+    background-image: url(/@/assets/images/vent/home/select-bg.png);
+    background-size: auto 100%;
+    background-position: left center;
+    padding-left: 60px;
 
     .text {
-      margin-right: 10px;
+      width: 100px;
+      text-align: left;
     }
+    .risk {
+      display: none;
+    }
+    .extra {
+      display: none;
+    }
+    .num {
+      text-align: right;
+      flex-grow: 1;
+    }
+
+    // .warning-level_5 {
+    //   color: red;
+    // }
+    // .warning-level_4 {
+    //   color: orange;
+    // }
+    // .warning-level_3 {
+    //   color: yellow;
+    // }
+    // .warning-level_2 {
+    //   color: green;
+    // }
+  }
+  .warning-item {
+    display: flex;
+    align-items: center;
+    background-image: url(/@/assets/images/company/list-item-9.png);
+    background-size: auto 80%;
+    background-repeat: no-repeat;
+    background-position: right center;
+    height: 40px;
+    margin-top: 10px;
 
-    .warning-level_5 {
-      color: red;
+    .text {
+      text-align: center;
+      width: 60px;
     }
-    .warning-level_4 {
-      color: orange;
+    .extra {
+      text-align: center;
+      width: 100px;
     }
-    .warning-level_3 {
-      color: yellow;
+    .num {
+      text-align: center;
+      width: 100px;
     }
-    .warning-level_2 {
-      color: green;
+    .risk {
+      text-align: right;
+      width: 80px;
     }
   }
-  .warning-item {
-    flex-basis: 30%;
+
+  .num {
+    font-size: 20px;
+    font-family: douyuFont;
+    color: @vent-gas-primary-text;
+  }
+  .risk {
+    font-size: 20px;
+    font-family: douyuFont;
+    color: @vent-gas-primary-text;
   }
 </style>