Merge branch 'feat/layout-style' into 'dev'

Feat/layout style

See merge request !14

src/components/CommonTable/index.vue

@@ -81,6 +81,10 @@ const props = defineProps({
       jumper: "前往",
     }),
   },
+  total: {
+    type: Number,
+    default: 0,
+  },
   // 表格最小高度
   minHeight: {
     type: Number,
@@ -136,7 +140,7 @@ watch(
 // 分页相关
 const currentPage = ref(1);
 const pageSize = ref(props.defaultPageSize);
-const total = computed(() => props.data.length);
+const total = computed(() => props.total);
 
 // 当前页数据
 const currentPageData = computed(() => {

src/views/dustOverview/components/addDustCollectorDialog.vue

@@ -273,9 +273,8 @@ const submitForm = () => {
 
       // 发送数据到父组件处理保存逻辑
       emit('save', submitData);
-      emit('update:modelValue', false);
+      // emit('update:modelValue', false);
     } else {
-      console.error('Form validation failed');
       return false;
     }
   });

src/views/dustOverview/components/roomSettingDialog.vue

@@ -20,7 +20,7 @@
       <el-form-item label="仓室分几排">
         <el-input-number
           v-model="roomForm.rows"
-          :min="1"
+          :min="0"
           :max="20"
           controls-position="right"
           @change="handleRowsChange"
@@ -33,7 +33,7 @@
       <div class="table-title">
         仓室数量分布
         <div
-          v-if="distributionDiff !== 0"
+          v-if="distributionDiff > 0"
           :class="[
             'distribution-warning',
             distributionDiff > 0 ? 'warning-less' : 'warning-less',
@@ -49,17 +49,17 @@
         size="small"
         border
       >
-        <el-table-column prop="compartPositionRow" label="排" width="180"> 
-            <template #default="{ row }">
-            <span>第{{row.compartPositionRow}}排</span>
+        <el-table-column prop="compartPositionRow" label="排" width="180">
+          <template #default="{ row }">
+            <span>第{{ row.compartPositionRow }}排</span>
           </template>
-            </el-table-column>
+        </el-table-column>
         <el-table-column prop="compartPositionColumnNum" label="仓数量">
           <template #default="{ row }">
             <el-input-number
               v-model="row.compartPositionColumnNum"
               :min="1"
-              :max="50"
+              :max="1000"
               controls-position="right"
               size="small"
               @change="handleDistributionChange"
@@ -72,7 +72,11 @@
     <template #footer>
       <span class="dialog-footer">
         <el-button @click="$emit('update:modelValue', false)">取消</el-button>
-        <el-button type="primary" @click="handleConfirm" :disabled="distributionDiff !== 0">
+        <el-button
+          type="primary"
+          @click="handleConfirm"
+          :disabled="distributionDiff > 0"
+        >
           确认
         </el-button>
       </span>
@@ -87,31 +91,30 @@ const props = defineProps({
   modelValue: Boolean,
   data: {
     type: Object,
-    default: () => {}
-  }
+    default: () => {},
+  },
 });
 
 const emit = defineEmits(["update:modelValue", "confirm"]);
 
 const roomForm = ref({
   totalRooms: 0,
-  rows: 0
+  rows: 0,
 });
 
 const distributionData = ref([]);
 
 const initializeState = () => {
-    console.log(props.data.deviceNo)
   if (props.data.deviceNo) {
     const { compartNum, compartRowNum, compartHealthList } = props.data;
     roomForm.value.totalRooms = compartNum || 0;
-    roomForm.value.rows = compartRowNum || 0
-    
+    roomForm.value.rows = compartRowNum || 0;
+
     if (compartHealthList && compartHealthList.length > 0) {
       roomForm.value.rows = compartHealthList.length;
       distributionData.value = compartHealthList.map((row, index) => ({
         compartPositionRow: index + 1,
-        compartPositionColumnNum: row.length
+        compartPositionColumnNum: row.length,
       }));
     } else {
       roomForm.value.rows = 0;
@@ -120,11 +123,15 @@ const initializeState = () => {
   }
 };
 
-watch(() => props.data, (newVal) => {
-  if (newVal) {
-    initializeState();
-  }
-}, { immediate: true });
+watch(
+  () => props.data,
+  (newVal) => {
+    if (newVal) {
+      initializeState();
+    }
+  },
+  { immediate: true }
+);
 
 const distributionDiff = computed(() => {
   const total = distributionData.value.reduce(
@@ -141,12 +148,11 @@ const handleRowsChange = (value) => {
   // 计算每行的基础数量（向下取整）和余数
   const baseValue = Math.floor(total / value);
   const remainder = total % value;
-
   // 生成分布数据
   distributionData.value = Array.from({ length: value }, (_, index) => {
     return {
-        compartPositionRow: index + 1,
-      compartPositionColumnNum: index < remainder ? baseValue + 1 : baseValue
+      compartPositionRow: index + 1,
+      compartPositionColumnNum: index < remainder ? baseValue + 1 : baseValue,
     };
   });
 };
@@ -156,13 +162,13 @@ const handleDistributionChange = () => {
 };
 
 const handleConfirm = () => {
-  if (distributionDiff.value === 0) {
+  if (distributionDiff.value <= 0) {
     const { deviceNo, compartNum } = props.data;
     emit("confirm", {
-        compartNum,
-        dusterNo: deviceNo,
-        compartRowNum: roomForm.value.rows,
-        detailList: distributionData.value
+      compartNum,
+      dusterNo: deviceNo,
+      compartRowNum: roomForm.value.rows,
+      detailList: distributionData.value,
     });
     // emit("update:modelValue", false);
   }
@@ -215,4 +221,4 @@ const handleConfirm = () => {
 :deep(.distribution-table .el-table--border .el-table__cell) {
   border-right: 1px solid #ebeef5 !important;
 }
-</style> 
+</style>
\ No newline at end of file

src/views/dustOverview/components/valveSettingDialog.vue

@@ -6,7 +6,6 @@
     :close-on-click-modal="false"
     :close-on-press-escape="false"
     @update:model-value="$emit('update:modelValue', $event)"
-    @open="initializeState"
   >
     <div class="valve-setting">
       <div class="setting-row">
@@ -22,19 +21,19 @@
       <div class="setting-row">
         <div class="input-group">
           <span>仓室编号：</span>
-          <el-select v-model="valveForm.roomNo" style="width: 120px" @change="handleRoomChange">
+          <el-select v-model="valveForm.compartNo" style="width: 120px" @change="handleRoomChange">
             <el-option
               v-for="cell in statusData"
-              :key="cell.index"
-              :label="`${cell.index}仓`"
-              :value="cell.index"
+              :key="cell.compartNo"
+              :label="`${cell.compartNo}仓`"
+              :value="cell.compartNo"
             />
           </el-select>
         </div>
         <div class="input-group">
           <span>电磁阀分布数量：</span>
           <el-input-number
-            v-model="valveForm.valveCount"
+            v-model="valveForm.valveNum"
             :min="1"
             controls-position="right"
             style="width: 120px"
@@ -44,7 +43,7 @@
         <div class="input-group">
           <span>布袋数量：</span>
           <el-input-number
-            v-model="valveForm.distribution"
+            v-model="valveForm.bagNum"
             :min="1"
             controls-position="right"
             style="width: 120px"
@@ -63,30 +62,30 @@
           type="primary" 
           class="save-btn" 
           @click="handleSave"
-          :disabled="!!errorMessage || valveForm.valveCount === null || valveForm.distribution === null"
-        >保存</el-button>
+          :disabled="!!errorMessage || valveForm.valveNum === null || valveForm.bagNum === null"
+        >设置</el-button>
       </div>
     </div>
 
     <!-- 分布表格 -->
-    <div class="distribution-table">
+    <div class="bagNum-table">
       <div class="table-title">
         仓室脉冲阀数量分布
-        <span class="valve-count-info">
+        <span class="valve-valveNum-info">
           (当前分配: {{ currentTotalValves }}/{{ valveForm.total }})
         </span>
       </div>
-      <div class="valve-distribution-grid">
+      <div class="valve-bagNum-grid">
         <div class="valve-row">
           <div
             v-for="(cell, colIndex) in statusData"
             :key="colIndex"
             class="valve-cell"
-            :class="{ 'active-cell': cell.index === valveForm.roomNo }"
-            @click="valveForm.roomNo = cell.index; handleRoomChange(cell.index)"
+            :class="{ 'active-cell': cell.compartNo === valveForm.compartNo }"
+            @click="valveForm.compartNo = cell.compartNo; handleRoomChange(cell.compartNo)"
           >
-            <div class="cell-index">{{ cell.index }}仓</div>
-            <div class="cell-value">{{ cell.count }}</div>
+            <div class="cell-index">{{ cell.compartNo }}仓</div>
+            <div class="cell-value">{{ cell.valveNum }} <span>({{ cell.bagNum }})</span></div>
           </div>
         </div>
       </div>
@@ -105,6 +104,7 @@
 
 <script setup>
 import { ref, watch, computed } from "vue";
+import { getValveAllocation } from "@/request/api/dustOverview";
 
 const props = defineProps({
   modelValue: Boolean,
@@ -119,9 +119,9 @@ const emit = defineEmits(["update:modelValue", "confirm"]);
 const valveForm = ref({
   total: 0,
   rows: 0,
-  roomNo: 0,
-  valveCount: 0,
-  distribution: 0
+  compartNo: 0,
+  valveNum: 0,
+  bagNum: 0
 });
 
 const statusData = ref([]);
@@ -129,17 +129,17 @@ const errorMessage = ref("");
 
 // 计算当前已分配的电磁阀总数量
 const currentTotalValves = computed(() => {
-  return statusData.value.reduce((sum, cell) => sum + cell.count, 0);
+  return statusData.value.reduce((sum, cell) => sum + cell.valveNum, 0);
 });
 
 // 计算当前修改后的总数量
 const projectedTotalValves = computed(() => {
   // 找到当前修改的仓室
-  const selectedRoom = statusData.value.find(cell => cell.index === valveForm.value.roomNo);
+  const selectedRoom = statusData.value.find(cell => cell.compartNo === valveForm.value.compartNo);
   if (!selectedRoom) return currentTotalValves.value;
   
   // 计算替换后的总数
-  const diff = valveForm.value.valveCount - selectedRoom.count;
+  const diff = valveForm.value.valveNum - selectedRoom.valveNum;
   return currentTotalValves.value + diff;
 });
 
@@ -156,28 +156,43 @@ const validateValveCount = computed(() => {
 
 const initializeState = () => {
   if (props.modelValue) {
-    console.log(props.data)
+    valveForm.value.total = props.data.valveNum;
+    getAllocation({
+      customerId: props.data.customerId,
+      dusterNo: props.data.deviceNo
+    });
     // valveForm.value.total = props.totalValves;
     // statusData.value = [...props.statusData]; // 深拷贝状态数据
     // errorMessage.value = "";
     
     // // 如果有数据，默认选中第一个仓室
     // if (statusData.value.length > 0) {
-    //   valveForm.value.roomNo = statusData.value[0].index;
-    //   valveForm.value.valveCount = statusData.value[0].count;
-    //   valveForm.value.distribution = statusData.value[0].count; // 默认布阀数量等于电磁阀数量
+    //   valveForm.value.compartNo = statusData.value[0].index;
+    //   valveForm.value.valveNum = statusData.value[0].valveNum;
+    //   valveForm.value.bagNum = statusData.value[0].valveNum; // 默认布阀数量等于电磁阀数量
     // }
   }
 };
 
+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.valveNum = statusData.value[0].valveNum;
+      valveForm.value.bagNum = statusData.value[0].bagNum;
+    }
+  })
+}
+
 // getToken("customerId"),
 
 // 当选中的仓室改变时，更新电磁阀分布数量
 const handleRoomChange = (roomIndex) => {
-  const selectedRoom = statusData.value.find(cell => cell.index === roomIndex);
+  const selectedRoom = statusData.value.find(cell => cell.compartNo === roomIndex);
   if (selectedRoom) {
-    valveForm.value.valveCount = selectedRoom.count;
-    valveForm.value.distribution = selectedRoom.count;
+    valveForm.value.valveNum = selectedRoom.valveNum;
+    valveForm.value.bagNum = selectedRoom.bagNum;
     errorMessage.value = "";
   }
 };
@@ -189,7 +204,7 @@ watch(() => props.modelValue, (newVal) => {
 }, { immediate: true });
 
 // 监听阀门数量变化，实时验证
-watch(() => valveForm.value.valveCount, () => {
+watch(() => valveForm.value.valveNum, () => {
   const validation = validateValveCount.value;
   errorMessage.value = validation.valid ? "" : validation.message;
 });
@@ -208,28 +223,27 @@ const handleAverageDistribute = () => {
 
   // 平均分配阀数量 多余的阀数量分配到前面的仓室
   statusData.value.forEach((cell, index) => {
-    cell.count = baseValue + (index < remainder ? 1 : 0);
+    cell.valveNum = baseValue + (index < remainder ? 1 : 0);
   });
   
   // 更新当前选中仓室的值
-  handleRoomChange(valveForm.value.roomNo);
+  handleRoomChange(valveForm.value.compartNo);
   errorMessage.value = ""; // 重置错误信息
 };
 
 const handleSave = () => {
   // 验证是否超出限制
   const validation = validateValveCount.value;
-  console.log(valveForm.value.valveCount);
   if (!validation.valid) {
     errorMessage.value = validation.message;
     return;
   }
 
   // 保存当前选中仓室的电磁阀分布数量
-  const selectedRoom = statusData.value.find(cell => cell.index === valveForm.value.roomNo);
+  const selectedRoom = statusData.value.find(cell => cell.compartNo === valveForm.value.compartNo);
   if (selectedRoom) {
-    selectedRoom.count = valveForm.value.valveCount;
-    
+    selectedRoom.valveNum = valveForm.value.valveNum;
+    selectedRoom.bagNum = valveForm.value.bagNum;
     // 更新错误信息
     errorMessage.value = "";
   }
@@ -237,14 +251,14 @@ const handleSave = () => {
 
 const handleConfirm = () => {
   // 最终确认时再次验证总数是否符合要求
-  const totalValves = statusData.value.reduce((sum, cell) => sum + cell.count, 0);
+  const totalValves = statusData.value.reduce((sum, cell) => sum + cell.valveNum, 0);
   if (totalValves > valveForm.value.total) {
     errorMessage.value = `电磁阀总数超出限制 ${totalValves - valveForm.value.total} 个，请调整后再提交`;
     return;
   }
   
   emit("confirm", statusData.value);
-  emit("update:modelValue", false);
+  // emit("update:modelValue", false);
 };
 </script>
 
@@ -296,7 +310,7 @@ const handleConfirm = () => {
   }
 }
 
-.distribution-table {
+.bagNum-table {
   margin-top: 20px;
   border-top: 1px solid #ebeef5;
   padding-top: 20px;
@@ -308,14 +322,14 @@ const handleConfirm = () => {
   margin-bottom: 16px;
   font-weight: 500;
   
-  .valve-count-info {
+  .valve-valveNum-info {
     font-size: 12px;
     color: #909399;
     margin-left: 8px;
   }
 }
 
-.valve-distribution-grid {
+.valve-bagNum-grid {
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -332,7 +346,7 @@ const handleConfirm = () => {
   .valve-cell {
     width: 41px;
     background: white;
-    padding: 4px;
+    padding: 4px 8px;
     border-radius: 4px;
     text-align: center;
     border: 1px solid #dcdfe6;
@@ -351,8 +365,16 @@ const handleConfirm = () => {
     }
 
     .cell-value {
-      font-size: 14px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 16px;
       color: #606266;
+      span {
+        font-size: 12px;
+        color: #909399;
+        margin-left: 2px;
+      }
     }
   }
 }

src/views/dustOverview/index.vue

@@ -78,6 +78,7 @@
           :columns="tableColumns"
           :default-page-size="10"
           @pagination-change="handlePaginationChange"
+          :total="total"
           :pagination-texts="{
             total: '共',
             sizeChange: '条/页',
@@ -166,7 +167,7 @@
 
 <script setup>
 import { ref, onMounted, onBeforeUnmount, computed, watch } from "vue";
-import { getDusterLeakNum, getHealthPercent, getCloseLoopNum, getProductionLine, getDusterList, postAddDuster, postUpdateDuster, postAddCompartAllocation } 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";
@@ -181,6 +182,7 @@ const formInline = ref({
 
 const currentPage = ref(1);
 const pageSize = ref(10);
+const total = ref(0);
 const dusterLeakNum = ref(0);
 const healthPercent = ref('100%');
 const closeLoopNum = ref(0);
@@ -305,7 +307,7 @@ const handleEdit = (row) => {
 const handlePaginationChange = (pagination) => {
   currentPage.value = pagination.currentPage;
   pageSize.value = pagination.pageSize;
-  console.log("分页变化", pagination);
+  getData();
 };
 
 const onSubmit = () => {
@@ -328,10 +330,8 @@ const handleHealthScoreClick = (row) => {
 
 // 确认设置
 const handleRoomSettingConfirm = (data) => {
-  console.log('data', data)
   const params = data;
   postAddCompartAllocation(params).then(res => {
-    console.log(res);
     if (res.code == 1) {
         ElMessage.success('更新仓室数量成功');
         roomSettingVisible.value = false;
@@ -345,38 +345,25 @@ const handleRoomSettingConfirm = (data) => {
 // 点击电磁阀数量时打开弹窗
 const handleValveNumClick = (row) => {
   // 创建一个扁平化的状态数组用于电磁阀设置
-  currentEditingRow.value = JSON.parse(JSON.stringify(row));
-  // const flattenedStatus = row.status.flat().map(item => ({...item}));
-  // currentEditingRow.value.status = flattenedStatus;
-  // valveForm.value.total = row.valveNum;
-  valveSettingVisible.value = true;
+  if (row.compartHealthList.length > 0) {
+    currentEditingRow.value = JSON.parse(JSON.stringify(row));
+    valveSettingVisible.value = true;
+  } else {
+    ElMessage.error('当前仓室数量为0，无法进行设置');
+  }
 };
 
 // 确认电磁阀设置
 const handleValveSettingConfirm = (updatedStatusData) => {
-  if (currentEditingRow.value && updatedStatusData) {
-    // 更新总数
-    const originalRow = tableData.find(item => item === currentEditingRow.value);
-    if (originalRow) {
-      originalRow.valveNum = valveForm.value.total;
-      
-      // 更新各个仓室的电磁阀数量
-      const flatStatusMap = new Map();
-      updatedStatusData.forEach(cell => {
-        flatStatusMap.set(cell.index, cell.count);
-      });
-      
-      // 将更新后的数量应用到原始的2D结构中
-      originalRow.status.forEach(row => {
-        row.forEach(chamber => {
-          if (flatStatusMap.has(chamber.index)) {
-            chamber.count = flatStatusMap.get(chamber.index);
-          }
-        });
-      });
+  const list = updatedStatusData.map(item => {
+    return {
+      "compartNo": item.compartNo,
+        "valveNum": item.valveNum,
+        "bagNum": item.bagNum,
+        "dusterNo": item.dusterNo
     }
-  }
-  valveSettingVisible.value = false;
+  })
+  setValveInfo(list);
 };
 
 // 打开新增除尘器弹窗
@@ -385,6 +372,18 @@ const handleAddDustCollector = () => {
   isAddDustCollectorVisible.value = true;
 };
 
+const setValveInfo = (data) => {
+  postAddValveInfo(data).then(res => {
+    if (res.code == 1) {
+      ElMessage.success('更新电磁阀数量成功');
+      valveSettingVisible.value = false;
+      getData();
+    } else {
+      ElMessage.error(res.message);
+    }
+  })
+}
+
 // 保存新增或编辑除尘器
 const handleSaveDustCollector = (data) => {
   if (data.id) {
@@ -453,10 +452,9 @@ const getData = () => {
     keyword: formInline.value.deviceName,
   }
   getDusterList(params).then(res => {
-    console.log(res);
     if (res.code == 1) {
       tableData.value = res.data.records || [];
-      // total.value = res.data.total || 0;
+      total.value = res.data.total || 0;
     } else {
       ElMessage.error(res.message);
     }