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

Feat/layout style

See merge request !13

src/layout/index.vue

@@ -19,7 +19,7 @@
          
           <template #dropdown>
             <el-dropdown-menu>
-              <el-dropdown-item :icon="Plus" @click="logout">退出登录</el-dropdown-item>
+              <el-dropdown-item  @click="logout">退出登录</el-dropdown-item>
             </el-dropdown-menu>
           </template>
         </el-dropdown>
@@ -39,7 +39,7 @@
 </template>
 <script>
 import menuCom from "./menuCom.vue";
-import { CaretBottom, Plus } from "@element-plus/icons-vue";
+import { CaretBottom } from "@element-plus/icons-vue";
 import { useRoute, useRouter } from 'vue-router';
 import { watch, ref, onMounted } from 'vue';
 import { getToken } from '@/utils/auth';

src/pinia/user.js

@@ -26,7 +26,6 @@ export const useUsersStore = defineStore('user', {
     },
     actions: {
         login(userInfo) {
-            debugger
             const { account, password, rememberMe } = userInfo
             return new Promise((resolve, reject) => {
                 login(JSON.stringify(userInfo)).then(response => {

src/request/api/dustOverview.js

@@ -21,10 +21,11 @@ export function getCloseLoopNum() {
 }
 
 
-export function getProductionLine() {
+export function getProductionLine(params) {
     return request({
       url: "/transaction/getProductionLine",
       method: "get",
+      params,
     });
   }
 

src/views/dustOverview/components/addDustCollectorDialog.vue

 <template>
-  <el-dialog :model-value="modelValue" title="新增除尘器" width="460px" :close-on-click-modal="false"
+  <el-dialog :model-value="modelValue" :title="editData ? '编辑除尘器' : '新增除尘器'" width="460px" :close-on-click-modal="false"
     :close-on-press-escape="false" @update:model-value="$emit('update:modelValue', $event)">
     <div class="add-dust-form">
       <div class="form-item">
@@ -81,15 +81,18 @@
 </template>
 
 <script setup>
-import { ref, reactive, onMounted } from 'vue';
+import { ref, reactive, onMounted, watch } from 'vue';
 import { getVisDusterList, getProductionLine } from "@/request/api/dustOverview";
-
-
+import { getToken } from "@/utils/auth";
 const props = defineProps({
   modelValue: {
     type: Boolean,
     default: false
   },
+  editData: {
+    type: Object,
+    default: null
+  }
 });
 
 const emit = defineEmits(['update:modelValue', 'save']);
@@ -116,6 +119,22 @@ const formData = reactive({
   coordinateY: null
 });
 
+// 监听editData变化，初始化表单数据
+watch(() => props.editData, (newVal) => {
+  if (newVal) {
+    formData.name = newVal.deviceName;
+    formData.code = newVal.deviceNo;
+    formData.process = newVal.productionLineId;
+    formData.chamberCount = Number(newVal.compartNum);
+    formData.valveCount = Number(newVal.valveNum);
+    formData.pressureMin = Number(newVal.pressureDiffLow);
+    formData.pressureMax = Number(newVal.pressureDiffHigh);
+    formData.serverIp = newVal.serviceIp;
+    formData.coordinateX = Number(newVal.x);
+    formData.coordinateY = Number(newVal.y);
+  }
+}, { immediate: true });
+
 const rules = {
   name: [{ required: true, message: '请输入除尘器名称', trigger: 'blur' }],
   code: [{ required: true, message: '请输入除尘器编号', trigger: 'blur' }],
@@ -207,7 +226,9 @@ const handleSearch = (query) => {
 };
 
 const productionLine = () => {
-  getProductionLine().then(res => {
+  getProductionLine({
+    branchFactoryId: getToken("dataBranchFactoryId")
+  }).then(res => {
     processOptions.value = res.data;
   })
 }
@@ -231,9 +252,6 @@ const submitForm = () => {
   if (!formRef.value) return;
   formRef.value.validate((valid) => {
     if (valid) {
-      // 组装压差范围
-      const pressureRange = `${formData.pressureMin}～${formData.pressureMax}`;
-
       // 准备提交的数据
       const submitData = {
         deviceNo: formData.code,
@@ -248,6 +266,11 @@ const submitForm = () => {
         y: formData.coordinateY,
       };
 
+      // 如果是编辑模式，添加id
+      if (props.editData) {
+        submitData.id = props.editData.id;
+      }
+
       // 发送数据到父组件处理保存逻辑
       emit('save', submitData);
       emit('update:modelValue', false);
@@ -267,6 +290,9 @@ const cancel = () => {
   formData.process = '';
   formData.chamberCount = null;
   formData.valveCount = null;
+  formData.pressureMin = null;
+  formData.pressureMax = null;
+  formData.serverIp = '';
   formData.coordinateX = null;
   formData.coordinateY = null;
   emit('update:modelValue', false);

src/views/dustOverview/components/roomSettingDialog.vue

@@ -49,11 +49,15 @@
         size="small"
         border
       >
-        <el-table-column prop="row" label="排" width="180" />
-        <el-table-column prop="count" label="仓数量">
+        <el-table-column prop="compartPositionRow" label="排" width="180"> 
+            <template #default="{ row }">
+            <span>第{{row.compartPositionRow}}排</span>
+          </template>
+            </el-table-column>
+        <el-table-column prop="compartPositionColumnNum" label="仓数量">
           <template #default="{ row }">
             <el-input-number
-              v-model="row.count"
+              v-model="row.compartPositionColumnNum"
               :min="1"
               :max="50"
               controls-position="right"
@@ -81,13 +85,9 @@ import { ref, computed, watch } from "vue";
 
 const props = defineProps({
   modelValue: Boolean,
-  totalRooms: {
-    type: Number,
-    required: true
-  },
-  initialDistribution: {
-    type: Array,
-    default: () => []
+  data: {
+    type: Object,
+    default: () => {}
   }
 });
 
@@ -101,14 +101,17 @@ const roomForm = ref({
 const distributionData = ref([]);
 
 const initializeState = () => {
-  if (props.modelValue) {
-    roomForm.value.totalRooms = props.totalRooms;
+    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
     
-    if (props.initialDistribution && props.initialDistribution.length > 0) {
-      roomForm.value.rows = props.initialDistribution.length;
-      distributionData.value = props.initialDistribution.map((row, index) => ({
-        row: `第${index + 1}排`,
-        count: row.length
+    if (compartHealthList && compartHealthList.length > 0) {
+      roomForm.value.rows = compartHealthList.length;
+      distributionData.value = compartHealthList.map((row, index) => ({
+        compartPositionRow: index + 1,
+        compartPositionColumnNum: row.length
       }));
     } else {
       roomForm.value.rows = 0;
@@ -117,7 +120,7 @@ const initializeState = () => {
   }
 };
 
-watch(() => props.modelValue, (newVal) => {
+watch(() => props.data, (newVal) => {
   if (newVal) {
     initializeState();
   }
@@ -125,7 +128,7 @@ watch(() => props.modelValue, (newVal) => {
 
 const distributionDiff = computed(() => {
   const total = distributionData.value.reduce(
-    (sum, item) => sum + item.count,
+    (sum, item) => sum + item.compartPositionColumnNum,
     0
   );
   return total - roomForm.value.totalRooms;
@@ -142,8 +145,8 @@ const handleRowsChange = (value) => {
   // 生成分布数据
   distributionData.value = Array.from({ length: value }, (_, index) => {
     return {
-      row: `第${index + 1}排`,
-      count: index < remainder ? baseValue + 1 : baseValue
+        compartPositionRow: index + 1,
+      compartPositionColumnNum: index < remainder ? baseValue + 1 : baseValue
     };
   });
 };
@@ -154,8 +157,14 @@ const handleDistributionChange = () => {
 
 const handleConfirm = () => {
   if (distributionDiff.value === 0) {
-    emit("confirm", distributionData.value);
-    emit("update:modelValue", false);
+    const { deviceNo, compartNum } = props.data;
+    emit("confirm", {
+        compartNum,
+        dusterNo: deviceNo,
+        compartRowNum: roomForm.value.rows,
+        detailList: distributionData.value
+    });
+    // emit("update:modelValue", false);
   }
 };
 </script>

src/views/dustOverview/components/valveSettingDialog.vue

@@ -42,7 +42,7 @@
           />
         </div>
         <div class="input-group">
-          <span>布阀数量：</span>
+          <span>布袋数量：</span>
           <el-input-number
             v-model="valveForm.distribution"
             :min="1"
@@ -108,12 +108,8 @@ import { ref, watch, computed } from "vue";
 
 const props = defineProps({
   modelValue: Boolean,
-  totalValves: {
-    type: Number,
-    required: true
-  },
-  statusData: {
-    type: Array,
+  data: {
+    type: Object,
     default: () => []
   }
 });
@@ -160,19 +156,22 @@ const validateValveCount = computed(() => {
 
 const initializeState = () => {
   if (props.modelValue) {
-    valveForm.value.total = props.totalValves;
-    statusData.value = [...props.statusData]; // 深拷贝状态数据
-    errorMessage.value = "";
+    console.log(props.data)
+    // 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; // 默认布阀数量等于电磁阀数量
-    }
+    // // 如果有数据，默认选中第一个仓室
+    // 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; // 默认布阀数量等于电磁阀数量
+    // }
   }
 };
 
+// getToken("customerId"),
+
 // 当选中的仓室改变时，更新电磁阀分布数量
 const handleRoomChange = (roomIndex) => {
   const selectedRoom = statusData.value.find(cell => cell.index === roomIndex);

src/views/dustOverview/index.vue

@@ -95,7 +95,7 @@
             }}</span>
           </template>
           <template #valveNum="{ row }">
-            <span class="health-score" @click="handlevalveNumClick(row)">{{
+            <span class="health-score" @click="handleValveNumClick(row)">{{
               row.valveNum
             }}</span>
           </template>
@@ -144,22 +144,21 @@
     <!-- 使用新的仓室数量设置弹窗组件 -->
     <RoomSettingDialog
       v-model="roomSettingVisible"
-      :total-rooms="currentEditingRow?.healthScore || 0"
-      :initial-distribution="currentEditingRow?.status || []"
+      :data="currentEditingRow"
       @confirm="handleRoomSettingConfirm"
     />
 
     <!-- 使用新的电磁阀数量设置弹窗组件 -->
     <ValveSettingDialog
       v-model="valveSettingVisible"
-      :total-valves="valveForm.total"
-      :status-data="currentEditingRow?.status || []"
+      :data="currentEditingRow"
       @confirm="handleValveSettingConfirm"
     />
 
     <!-- 使用新增除尘器弹窗组件 -->
     <AddDustCollectorDialog
       v-model="isAddDustCollectorVisible"
+      :edit-data="currentEditingDustCollector"
       @save="handleSaveDustCollector"
     />
   </div>
@@ -167,8 +166,10 @@
 
 <script setup>
 import { ref, onMounted, onBeforeUnmount, computed, watch } from "vue";
-import { getDusterLeakNum, getHealthPercent, getCloseLoopNum, getProductionLine, getDusterList, postAddDuster, postUpdateDuster } from "@/request/api/dustOverview";
+import { getDusterLeakNum, getHealthPercent, getCloseLoopNum, getProductionLine, getDusterList, postAddDuster, postUpdateDuster, postAddCompartAllocation } from "@/request/api/dustOverview";
+import { getToken } from "@/utils/auth";
 import CommonTable from "@/components/commonTable/index.vue";
+import { ElMessageBox, ElMessage } from "element-plus";
 import RoomSettingDialog from "./components/roomSettingDialog.vue";
 import ValveSettingDialog from "./components/valveSettingDialog.vue";
 import AddDustCollectorDialog from "./components/addDustCollectorDialog.vue";
@@ -242,6 +243,21 @@ const tableColumns = ref([
 
 const tableData = ref([]);
 
+// 仓室设置相关
+const roomSettingVisible = ref(false);
+const currentEditingRow = ref(null);
+
+// 电磁阀设置相关
+const valveSettingVisible = ref(false);
+const valveForm = ref({
+  total: 120,
+});
+
+// 新增除尘器相关
+const isAddDustCollectorVisible = ref(false);
+const currentEditingDustCollector = ref(null);
+
+
 watch(productionLine, (newVal) => {
   productionLineFiltered.value = newVal;
 });
@@ -282,7 +298,8 @@ const handleView = (row) => {
 };
 
 const handleEdit = (row) => {
-  console.log("编辑", row);
+  currentEditingDustCollector.value = row;
+  isAddDustCollectorVisible.value = true;
 };
 
 const handlePaginationChange = (pagination) => {
@@ -297,73 +314,41 @@ const onSubmit = () => {
   getData();
 };
 
-// 仓室设置相关
-const roomSettingVisible = ref(false);
-const currentEditingRow = ref(null);
 
-// 电磁阀设置相关
-const valveSettingVisible = ref(false);
-const valveForm = ref({
-  total: 120,
-});
-
-// 新增除尘器相关
-const isAddDustCollectorVisible = ref(false);
 
 // 修改打开弹窗的处理函数
 const handleHealthScoreClick = (row) => {
+  if (row.compartNum < 1) {
+    ElMessageBox.alert('当前仓室数量为0，无法进行设置', '提示');
+    return;
+  }
   currentEditingRow.value = JSON.parse(JSON.stringify(row));
   roomSettingVisible.value = true;
 };
 
 // 确认设置
-const handleRoomSettingConfirm = (distributionData) => {
-  if (currentEditingRow.value) {
-    // 创建新的状态矩阵
-    const newStatus = [];
-    let chamberIndex = 1;
-
-    // 根据分布数据重新生成状态矩阵
-    distributionData.forEach((rowData, rowIndex) => {
-      const rowArray = [];
-      
-      // 获取当前行中应该有多少个仓室
-      const rowCount = rowData.count;
-      
-      for (let i = 0; i < rowCount; i++) {
-        // 尝试获取原始数据或创建新数据
-        let existingRoom = null;
-        
-        if (currentEditingRow.value.status[rowIndex] && 
-            currentEditingRow.value.status[rowIndex][i]) {
-          existingRoom = {...currentEditingRow.value.status[rowIndex][i]};
-        }
-        
-        rowArray.push(existingRoom || {
-          index: chamberIndex,
-          status: 1, // 默认状态正常
-          count: 1  // 默认阀门数量
-        });
-        
-        chamberIndex++;
-      }
-      
-      newStatus.push(rowArray);
-    });
-    
-    // 更新行的状态矩阵和总数
-    currentEditingRow.value.status = newStatus;
-    currentEditingRow.value.healthScore = chamberIndex - 1; // 总仓室数
-  }
+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;
+        getData();
+    } else {
+      ElMessage.error(res.message);
+    }
+  })
 };
 
 // 点击电磁阀数量时打开弹窗
 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;
+  // const flattenedStatus = row.status.flat().map(item => ({...item}));
+  // currentEditingRow.value.status = flattenedStatus;
+  // valveForm.value.total = row.valveNum;
   valveSettingVisible.value = true;
 };
 
@@ -396,24 +381,28 @@ const handleValveSettingConfirm = (updatedStatusData) => {
 
 // 打开新增除尘器弹窗
 const handleAddDustCollector = () => {
+  currentEditingDustCollector.value = null;
   isAddDustCollectorVisible.value = true;
 };
 
-// 保存新增除尘器
+// 保存新增或编辑除尘器
 const handleSaveDustCollector = (data) => {
   if (data.id) {
+    // 编辑模式
     postUpdateDuster(data).then(res => {
       if (res.code == 1) {
         ElMessage.success('更新除尘器成功');
         isAddDustCollectorVisible.value = false;
-        refreshData();
+        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('新增除尘器成功');
@@ -424,19 +413,10 @@ const handleSaveDustCollector = (data) => {
       }
     }).catch(err => {
       ElMessage.error(err.message);
-    })
+    });
   }
-  console.log("保存新增除尘器数据:", data);
-
-  
-  // 这里可以调用API进行保存
-  // await api.addDustCollector(data);
-  
-
 };
 
-
-
 const IdusterLeakNum = () => {
   getDusterLeakNum().then(res => {
     dusterLeakNum.value = res.data || 0;
@@ -456,7 +436,9 @@ const IcloseLoopNum = () => {
 }
 
 const IproductionLine = () => {
-  getProductionLine().then(res => {
+  getProductionLine({
+    branchFactoryId: getToken("dataBranchFactoryId")
+  }).then(res => {
     productionLine.value = res.data || [];
     // 默认显示全部
     productionLineFiltered.value = res.data || [];
@@ -491,8 +473,6 @@ const refreshData = () => {
   getData();
 }
 
-
-
 onMounted(async () => {
   IdusterLeakNum();
   IhealthPercent();
@@ -585,6 +565,7 @@ onBeforeUnmount(() => {});
     cursor: pointer;
     display: block;
     width: 100%;
+    text-decoration: underline;
   }
 
   .status-matrix {
@@ -631,6 +612,10 @@ onBeforeUnmount(() => {});
 
   .view-btn {
     margin-right: 8px;
+    cursor: pointer;
+  }
+  .edit-btn {
+    cursor: pointer;
   }
 
   .dialog-footer {

src/views/login/index.vue

@@ -1169,6 +1169,7 @@ $cursor: #ccc;
     border-bottom: 1px solid #fff;
     background: #fff;
   }
+
 }
 </style>