feat(*): 添加菜单icon

src/layout/menuCom.vue

@@ -13,7 +13,8 @@
             class="submenu-box"
           >
             <template #title>
-              <el-icon><location /></el-icon>
+              <!-- <el-icon><location /></el-icon> -->
+               <img class="menu-icon" :src="`/src/assets/menu/${item.meta.icon}.png`" alt="">
               <span>{{getMenuTitle(item)}}</span>
             </template>
               <el-menu-item v-for="(item_son, index_son) in item.children" :key="item_son.path" :index="index + '_' + index_son"
@@ -23,7 +24,8 @@
               </el-menu-item>
           </el-sub-menu>
           <el-menu-item v-else :index="index + ''"  class="submenu-box"  @click="handleClick(item.path)">
-            <el-icon><setting /></el-icon>
+            <!-- <el-icon><setting /></el-icon> -->
+            <img class="menu-icon" :src="`/src/assets/menu/${item.meta.icon}.png`" alt="">
             <span>{{getMenuTitle(item)}}</span>
           </el-menu-item>
         </template>
@@ -77,6 +79,11 @@ const getMenuTitle = (item) => {
   span, a, i {
     color: #fff !important;
   }
+  .menu-icon {
+    width: 16px;
+    // height: 18px;
+    margin-right: 5px;
+  }
 }
 
 

src/router/index.js

@@ -24,16 +24,16 @@ const routes = [
           {
             path: '/dashboard',
             component: Dashboard,
-            meta: { title: '首页' },
+            meta: { title: '首页', icon: 'dashboard', },
           },
           {
             path: '/dust-overview',
             component: DustOverview,
-            meta: { title: '除尘器总览' },
+            meta: { title: '除尘器总览', icon: 'dustOverview' },
           },
           {
             path: '/device-management',
-            meta: { title: '设备管理' },
+            meta: { title: '设备管理', icon: 'deviceManage' },
             children: [
               {
                 path: '/management/device-management',
@@ -50,26 +50,26 @@ const routes = [
           {
             path: '/monitor',
             component: dustMonitoring,
-            meta: { title: '除尘器监控' },
+            meta: { title: '除尘器监控', icon: 'monitor' },
           },
            {
             path: '/collectorList',
             component: CollectorList,
-            meta: { title: '布袋周期' },
+            meta: { title: '布袋周期', icon: 'collectorList' },
           },
           {
             path: '/bag-monitor',
             component: bagMonitoring,
-            meta: { title: 'BME布袋监测' },
+            meta: { title: 'BME布袋监测', icon: 'collectorList' },
           },
           {
             path: '/alerts',
             component: AboutView,
-            meta: { title: '告警总览' },
+            meta: { title: '告警总览', icon: 'warnning' },
           },
           {
             path: '/my-loop',
-            meta: { title: '我的闭环' },
+            meta: { title: '我的闭环', icon: 'closeIcon' },
             children: [
               {
                 path: '/my-loop/myAgency',

src/views/dustOverview/components/valveSettingDialog.vue

@@ -21,12 +21,12 @@
       <div class="setting-row">
         <div class="input-group">
           <span>仓室编号：</span>
-          <el-select v-model="valveForm.compartNo" style="width: 120px" @change="handleRoomChange">
+          <el-select v-model="valveForm.frontCompartNo" style="width: 120px" @change="handleRoomChange">
             <el-option
               v-for="cell in statusData"
-              :key="cell.compartNo"
-              :label="`${cell.compartNo}仓`"
-              :value="cell.compartNo"
+              :key="cell.frontCompartNo"
+              :label="`${cell.frontCompartNo}仓`"
+              :value="cell.frontCompartNo"
             />
           </el-select>
         </div>
@@ -34,7 +34,7 @@
           <span>电磁阀分布数量：</span>
           <el-input-number
             v-model="valveForm.valveNum"
-            :min="1"
+            :min="0"
             controls-position="right"
             style="width: 120px"
             :class="{ 'is-error': errorMessage }"
@@ -44,7 +44,7 @@
           <span>布袋数量：</span>
           <el-input-number
             v-model="valveForm.bagNum"
-            :min="1"
+            :min="0"
             controls-position="right"
             style="width: 120px"
           />
@@ -81,10 +81,10 @@
             v-for="(cell, colIndex) in statusData"
             :key="colIndex"
             class="valve-cell"
-            :class="{ 'active-cell': cell.compartNo === valveForm.compartNo }"
-            @click="valveForm.compartNo = cell.compartNo; handleRoomChange(cell.compartNo)"
+            :class="{ 'active-cell': cell.frontCompartNo === valveForm.frontCompartNo }"
+            @click="valveForm.frontCompartNo = cell.frontCompartNo; handleRoomChange(cell.frontCompartNo)"
           >
-            <div class="cell-index">{{ cell.compartNo }}仓</div>
+            <div class="cell-index">{{ cell.frontCompartNo }}仓</div>
             <div class="cell-value">{{ cell.valveNum }} <span>({{ cell.bagNum }})</span></div>
           </div>
         </div>
@@ -119,7 +119,7 @@ const emit = defineEmits(["update:modelValue", "confirm"]);
 const valveForm = ref({
   total: 0,
   rows: 0,
-  compartNo: 0,
+  frontCompartNo: 0,
   valveNum: 0,
   bagNum: 0
 });
@@ -135,7 +135,7 @@ const currentTotalValves = computed(() => {
 // 计算当前修改后的总数量
 const projectedTotalValves = computed(() => {
   // 找到当前修改的仓室
-  const selectedRoom = statusData.value.find(cell => cell.compartNo === valveForm.value.compartNo);
+  const selectedRoom = statusData.value.find(cell => cell.frontCompartNo === valveForm.value.frontCompartNo);
   if (!selectedRoom) return currentTotalValves.value;
   
   // 计算替换后的总数
@@ -167,7 +167,7 @@ const initializeState = () => {
     
     // // 如果有数据，默认选中第一个仓室
     // if (statusData.value.length > 0) {
-    //   valveForm.value.compartNo = statusData.value[0].index;
+    //   valveForm.value.frontCompartNo = statusData.value[0].index;
     //   valveForm.value.valveNum = statusData.value[0].valveNum;
     //   valveForm.value.bagNum = statusData.value[0].valveNum; // 默认布阀数量等于电磁阀数量
     // }
@@ -178,7 +178,7 @@ const getAllocation = (params) => {
   getValveAllocation(params).then(res => {
     if (res.code === 1 && res.data.valveList.length > 0) {
       statusData.value = res.data.valveList;
-      valveForm.value.compartNo = statusData.value[0].compartNo;
+      valveForm.value.frontCompartNo = statusData.value[0].frontCompartNo;
       valveForm.value.valveNum = statusData.value[0].valveNum;
       valveForm.value.bagNum = statusData.value[0].bagNum;
     }
@@ -189,7 +189,7 @@ const getAllocation = (params) => {
 
 // 当选中的仓室改变时，更新电磁阀分布数量
 const handleRoomChange = (roomIndex) => {
-  const selectedRoom = statusData.value.find(cell => cell.compartNo === roomIndex);
+  const selectedRoom = statusData.value.find(cell => cell.frontCompartNo === roomIndex);
   if (selectedRoom) {
     valveForm.value.valveNum = selectedRoom.valveNum;
     valveForm.value.bagNum = selectedRoom.bagNum;
@@ -227,7 +227,7 @@ const handleAverageDistribute = () => {
   });
   
   // 更新当前选中仓室的值
-  handleRoomChange(valveForm.value.compartNo);
+  handleRoomChange(valveForm.value.frontCompartNo);
   errorMessage.value = ""; // 重置错误信息
 };
 
@@ -240,7 +240,7 @@ const handleSave = () => {
   }
 
   // 保存当前选中仓室的电磁阀分布数量
-  const selectedRoom = statusData.value.find(cell => cell.compartNo === valveForm.value.compartNo);
+  const selectedRoom = statusData.value.find(cell => cell.frontCompartNo === valveForm.value.frontCompartNo);
   if (selectedRoom) {
     selectedRoom.valveNum = valveForm.value.valveNum;
     selectedRoom.bagNum = valveForm.value.bagNum;
@@ -251,6 +251,7 @@ const handleSave = () => {
 
 const handleConfirm = () => {
   // 最终确认时再次验证总数是否符合要求
+  console.log(statusData.value);
   const totalValves = statusData.value.reduce((sum, cell) => sum + cell.valveNum, 0);
   if (totalValves > valveForm.value.total) {
     errorMessage.value = `电磁阀总数超出限制 ${totalValves - valveForm.value.total} 个，请调整后再提交`;
@@ -367,11 +368,12 @@ const handleConfirm = () => {
     .cell-value {
       display: flex;
       justify-content: center;
-      align-items: center;
+      align-items: end;
       font-size: 16px;
       color: #606266;
       span {
         font-size: 12px;
+        line-height: 18px;
         color: #909399;
         margin-left: 2px;
       }

src/views/dustOverview/index.vue

@@ -5,7 +5,7 @@
         <img src="@/assets/icons/warn.png" alt="dust" />
         <div class="title">
           <span>泄漏告警(条)</span>
-          <div class="content">{{dusterLeakNum}}</div>
+          <div class="content">{{ dusterLeakNum }}</div>
         </div>
       </div>
 
@@ -13,7 +13,7 @@
         <img src="@/assets/icons/health.png" alt="dust" />
         <div class="title">
           <span>综合健康度</span>
-          <div class="content">{{healthPercent}}</div>
+          <div class="content">{{ healthPercent }}</div>
         </div>
       </div>
 
@@ -21,7 +21,7 @@
         <img src="@/assets/icons/close.png" alt="dust" />
         <div class="title">
           <span>闭环(条)</span>
-          <div class="content">{{closeLoopNum}}</div>
+          <div class="content">{{ closeLoopNum }}</div>
         </div>
       </div>
     </div>
@@ -37,11 +37,7 @@
               filterable
               :filter-method="filterProductionLine"
             >
-            <el-option
-              key="all"
-              label="全部"
-              value="all"
-            />
+              <el-option key="all" label="全部" value="all" />
               <el-option
                 v-for="item in productionLineFiltered"
                 :key="item.productionLineId"
@@ -66,7 +62,10 @@
             <el-button type="primary" class="search-btn" @click="onSubmit"
               >查询</el-button
             >
-            <el-button type="success" class="add-btn" @click="handleAddDustCollector"
+            <el-button
+              type="success"
+              class="add-btn"
+              @click="handleAddDustCollector"
               >新增</el-button
             >
           </el-form-item>
@@ -129,9 +128,7 @@
           </template>
 
           <template #pressureDiffLow="{ row }">
-            <span>
-              {{ row.pressureDiffLow }}～{{ row.pressureDiffHigh }}
-            </span>
+            <span> {{ row.pressureDiffLow }}～{{ row.pressureDiffHigh }} </span>
           </template>
 
           <template #operation="{ row }">
@@ -167,7 +164,17 @@
 
 <script setup>
 import { ref, onMounted, onBeforeUnmount, computed, watch } from "vue";
-import { getDusterLeakNum, getHealthPercent, getCloseLoopNum, getProductionLine, getDusterList, postAddDuster, postUpdateDuster, postAddCompartAllocation, postAddValveInfo } from "@/request/api/dustOverview";
+import {
+  getDusterLeakNum,
+  getHealthPercent,
+  getCloseLoopNum,
+  getProductionLine,
+  getDusterList,
+  postAddDuster,
+  postUpdateDuster,
+  postAddCompartAllocation,
+  postAddValveInfo,
+} from "@/request/api/dustOverview";
 import { getToken } from "@/utils/auth";
 import CommonTable from "@/components/commonTable/index.vue";
 import { ElMessageBox, ElMessage } from "element-plus";
@@ -177,14 +184,14 @@ import AddDustCollectorDialog from "./components/addDustCollectorDialog.vue";
 
 const formInline = ref({
   deviceName: "",
-  region: 'all',
+  region: "all",
 });
 
 const currentPage = ref(1);
 const pageSize = ref(10);
 const total = ref(0);
 const dusterLeakNum = ref(0);
-const healthPercent = ref('100%');
+const healthPercent = ref("100%");
 const closeLoopNum = ref(0);
 
 const productionLine = ref([]);
@@ -259,7 +266,6 @@ const valveForm = ref({
 const isAddDustCollectorVisible = ref(false);
 const currentEditingDustCollector = ref(null);
 
-
 watch(productionLine, (newVal) => {
   productionLineFiltered.value = newVal;
 });
@@ -268,7 +274,7 @@ const filterProductionLine = (query) => {
   if (!query) {
     productionLineFiltered.value = productionLine.value;
   } else {
-    productionLineFiltered.value = productionLine.value.filter(item =>
+    productionLineFiltered.value = productionLine.value.filter((item) =>
       item.productionLineName.toLowerCase().includes(query.toLowerCase())
     );
   }
@@ -285,7 +291,7 @@ const getStatusType = (status) => {
 
 const getHealthScoreColor = (score) => {
   // 去除百分号
-  const value = parseInt(score.replace('%', ''));
+  const value = parseInt(score.replace("%", ""));
   if (value >= 90) return "#67C23A";
   if (value >= 70) return "#E6A23C";
   return "#F56C6C";
@@ -316,12 +322,10 @@ const onSubmit = () => {
   getData();
 };
 
-
-
 // 修改打开弹窗的处理函数
 const handleHealthScoreClick = (row) => {
   if (row.compartNum < 1) {
-    ElMessageBox.alert('当前仓室数量为0，无法进行设置', '提示');
+    ElMessageBox.alert("当前仓室数量为0，无法进行设置", "提示");
     return;
   }
   currentEditingRow.value = JSON.parse(JSON.stringify(row));
@@ -331,15 +335,15 @@ const handleHealthScoreClick = (row) => {
 // 确认设置
 const handleRoomSettingConfirm = (data) => {
   const params = data;
-  postAddCompartAllocation(params).then(res => {
+  postAddCompartAllocation(params).then((res) => {
     if (res.code == 1) {
-        ElMessage.success('更新仓室数量成功');
-        roomSettingVisible.value = false;
-        getData();
+      ElMessage.success("更新仓室数量成功");
+      roomSettingVisible.value = false;
+      getData();
     } else {
       ElMessage.error(res.message);
     }
-  })
+  });
 };
 
 // 点击电磁阀数量时打开弹窗
@@ -349,20 +353,20 @@ const handleValveNumClick = (row) => {
     currentEditingRow.value = JSON.parse(JSON.stringify(row));
     valveSettingVisible.value = true;
   } else {
-    ElMessage.error('当前仓室数量为0，无法进行设置');
+    ElMessage.error("当前仓室数量为0，无法进行设置");
   }
 };
 
 // 确认电磁阀设置
 const handleValveSettingConfirm = (updatedStatusData) => {
-  const list = updatedStatusData.map(item => {
+  const list = updatedStatusData.map((item) => {
     return {
-      "compartNo": item.compartNo,
-        "valveNum": item.valveNum,
-        "bagNum": item.bagNum,
-        "dusterNo": item.dusterNo
-    }
-  })
+      frontCompartNo: item.frontCompartNo,
+      valveNum: item.valveNum,
+      bagNum: item.bagNum,
+      dusterNo: item.dusterNo,
+    };
+  });
   setValveInfo(list);
 };
 
@@ -373,103 +377,108 @@ const handleAddDustCollector = () => {
 };
 
 const setValveInfo = (data) => {
-  postAddValveInfo(data).then(res => {
+  postAddValveInfo(data).then((res) => {
     if (res.code == 1) {
-      ElMessage.success('更新电磁阀数量成功');
+      ElMessage.success("更新电磁阀数量成功");
       valveSettingVisible.value = false;
       getData();
     } else {
       ElMessage.error(res.message);
     }
-  })
-}
+  });
+};
 
 // 保存新增或编辑除尘器
 const handleSaveDustCollector = (data) => {
   if (data.id) {
     // 编辑模式
-    postUpdateDuster(data).then(res => {
-      if (res.code == 1) {
-        ElMessage.success('更新除尘器成功');
-        isAddDustCollectorVisible.value = false;
-        currentEditingDustCollector.value = null;
-        getData();
-      } else {
-        ElMessage.error(res.message);
-      }
-    }).catch(err => {
-      ElMessage.error(err.message);
-    });
+    postUpdateDuster(data)
+      .then((res) => {
+        if (res.code == 1) {
+          ElMessage.success("更新除尘器成功");
+          isAddDustCollectorVisible.value = false;
+          currentEditingDustCollector.value = null;
+          getData();
+        } else {
+          ElMessage.error(res.message);
+        }
+      })
+      .catch((err) => {
+        ElMessage.error(err.message);
+      });
   } else {
     // 新增模式
-    postAddDuster(data).then(res => {
-      if (res.code == 1) {
-        ElMessage.success('新增除尘器成功');
-        isAddDustCollectorVisible.value = false;
-        refreshData();
-      } else {
-        ElMessage.error(res.message);
-      }
-    }).catch(err => {
-      ElMessage.error(err.message);
-    });
+    postAddDuster(data)
+      .then((res) => {
+        if (res.code == 1) {
+          ElMessage.success("新增除尘器成功");
+          isAddDustCollectorVisible.value = false;
+          refreshData();
+        } else {
+          ElMessage.error(res.message);
+        }
+      })
+      .catch((err) => {
+        ElMessage.error(err.message);
+      });
   }
 };
 
 const IdusterLeakNum = () => {
-  getDusterLeakNum().then(res => {
+  getDusterLeakNum().then((res) => {
     dusterLeakNum.value = res.data || 0;
-  })
-}
+  });
+};
 
 const IhealthPercent = () => {
-  getHealthPercent().then(res => {
-    healthPercent.value = res.data || '100%';
-  })
-}
+  getHealthPercent().then((res) => {
+    healthPercent.value = res.data || "100%";
+  });
+};
 
 const IcloseLoopNum = () => {
-  getCloseLoopNum().then(res => {
+  getCloseLoopNum().then((res) => {
     closeLoopNum.value = res.data || 0;
-  })
-}
+  });
+};
 
 const IproductionLine = () => {
   getProductionLine({
-    branchFactoryId: getToken("dataBranchFactoryId")
-  }).then(res => {
+    branchFactoryId: getToken("dataBranchFactoryId"),
+  }).then((res) => {
     productionLine.value = res.data || [];
     // 默认显示全部
     productionLineFiltered.value = res.data || [];
-  })
-}
+  });
+};
 
 const getData = () => {
   const params = {
     pageNo: currentPage.value,
     pageSize: pageSize.value,
-    productionLineId: formInline.value.region === 'all' ? '' : formInline.value.region,
+    productionLineId:
+      formInline.value.region === "all" ? "" : formInline.value.region,
     keyword: formInline.value.deviceName,
-  }
-  getDusterList(params).then(res => {
+  };
+  getDusterList(params).then((res) => {
     if (res.code == 1) {
       tableData.value = res.data.records || [];
       total.value = res.data.total || 0;
     } else {
       ElMessage.error(res.message);
     }
-  })
-}
+  });
+};
 
 const refreshData = () => {
   currentPage.value = 1;
   pageSize.value = 10;
   formInline.value = {
-    region: '',
-    deviceName: '',
-  }
+    region: "",
+    deviceName: "",
+  };
   getData();
-}
+};
 
 onMounted(async () => {
   IdusterLeakNum();