Skip to content

D
DC-TOM
Commit 0d157e8d authored by Cai Wei's avatar Cai Wei
Browse files
Options

feat(*): 除尘器总览问题修复

parent eb1cbab7
Show whitespace changes
Inline Side-by-side
Showing with 141 additions and 71 deletions
src/components/commonTable/index.vue
View file @ 0d157e8d
......@@ -4,6 +4,7 @@
ref="tableRef"
:data="currentPageData"
v-bind="$attrs"
:resizable="false"
border
:height="tableHeight"
>
......@@ -221,6 +222,8 @@ watch(
width: 100% !important;
}
.el-table__header th { user-select: none; }
.el-table {
// 设置表头样式
th.el-table__cell {
......
src/views/dustMonitoring/bag-monitoring.vue
View file @ 0d157e8d
......@@ -92,7 +92,7 @@
</thead>
<tbody>
<tr>
<td>峰值_R</td>
<td>峰值{{currentData.row}}排_R</td>
<td v-for="(value, index) in tableData" :key="'r' + index">
{{ value.peakValueR || "-" }}
</td>
......
src/views/dustMonitoring/index.vue
View file @ 0d157e8d
......@@ -120,7 +120,7 @@
</template>
<script setup>
import { ref, reactive, onMounted, onUnmounted, watch, computed } from "vue";
import { useRouter } from "vue-router";
import { useRouter, useRoute } from "vue-router";
import * as echarts from "echarts";
import { getDataFun } from "@/request/method.js";
import { useUsersStore } from "@/pinia/user.js";
......@@ -128,6 +128,7 @@ import moment from "moment";
import warnCom from "./components/warn.vue";
import healthyCom from "./components/healthyProgress.vue";
import { getLineOption2, getGaugeOption } from "@/utils/chart";
const userStore = useUsersStore();
const form = reactive({
dusterNo: "",
......@@ -136,23 +137,8 @@ const form = reactive({
new Date(),
],
});
const option = {
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
},
yAxis: {
type: "value",
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: "line",
smooth: true,
},
],
};
const router = useRouter();
const route = useRoute();
const chartInstance = reactive({});
const chartData = reactive([{}, {}, {}]);
const initChart = (instance, option, domEl) => {
......@@ -278,7 +264,7 @@ const getDusterNameEnum = () => {
.then((res) => {
dusterList.value = (res && res.data) || [];
// 判断除尘器名称是否有值
form.dusterNo = dusterList.value[0].dusterNo;
form.dusterNo = route.query.dusterNo || dusterList.value[0].dusterNo;
})
.catch(() => {
dusterList.value = [];
......
src/views/dustOverview/components/addDustCollectorDialog.vue
View file @ 0d157e8d
<template>
<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)">
<el-dialog :model-value="modelValue" :title="editData ? '编辑除尘器' : '新增除尘器'" width="500px" :close-on-click-modal="false"
:close-on-press-escape="false" @update:model-value="cancel">
<div class="add-dust-form">
<div class="form-item">
<div class="selector-wrap">
......@@ -14,7 +14,7 @@
</div>
<div class="form-content">
<el-form ref="formRef" :model="formData" label-width="100px" :rules="rules">
<el-form ref="formRef" :model="formData" label-width="120px" :rules="rules">
<el-form-item label="除尘器名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入" />
</el-form-item>
......@@ -38,7 +38,7 @@
<el-input v-model.number="formData.valveCount" placeholder="请输入" />
</el-form-item>
<el-form-item label="合理压差范围">
<el-form-item label="合理压差范围" required>
<div class="range-input">
<el-form-item prop="pressureMin" class="coordinate-item">
<el-input v-model.number="formData.pressureMin" placeholder="请输入" />
......@@ -119,26 +119,12 @@ 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' }],
process: [{ required: true, message: '请选择所属工序', trigger: 'change' }],
process: [{ required: true, message: '请选择所属工序', trigger: 'blur' }],
chamberCount: [
{ required: true, message: '请输入仓室数量', trigger: 'blur' },
{ type: 'number', min: 1, message: '仓室数量必须大于0', trigger: 'blur' }
......@@ -149,7 +135,7 @@ const rules = {
],
pressureMin: [
{ required: true, message: '请输入最小压差', trigger: 'blur' },
{ type: 'number', min: 1, message: '最小压差必须大于0', trigger: 'blur' },
{ type: 'number', min: 0, message: '最小压差不能小于0', trigger: 'blur' },
{
validator: (rule, value, callback) => {
if (value && formData.pressureMax && value >= formData.pressureMax) {
......@@ -163,7 +149,7 @@ const rules = {
],
pressureMax: [
{ required: true, message: '请输入最大压差', trigger: 'blur' },
{ type: 'number', min: 0, message: '最大压差必须大于0', trigger: 'blur' },
{ type: 'number', min: 0, message: '最大压差不能小于0', trigger: 'blur' },
{
validator: (rule, value, callback) => {
if (value && formData.pressureMin && value <= formData.pressureMin) {
......@@ -236,7 +222,6 @@ const productionLine = () => {
onMounted(() => {
productionLine();
initDustOptions();
});
const selectDustType = () => {
......@@ -270,7 +255,6 @@ const submitForm = () => {
if (props.editData) {
submitData.id = props.editData.id;
}
// 发送数据到父组件处理保存逻辑
emit('save', submitData);
// emit('update:modelValue', false);
......@@ -279,10 +263,8 @@ const submitForm = () => {
}
});
};
const cancel = () => {
const resetForm = () => {
// 重置表单状态和数据
formRef.value.resetFields();
formData.dustType = '';
formData.name = '';
formData.code = '';
......@@ -294,9 +276,38 @@ const cancel = () => {
formData.serverIp = '';
formData.coordinateX = null;
formData.coordinateY = null;
emit('update:modelValue', false);
}
const cancel = () => {
resetForm();
formRef.value.resetFields();
emit('cancel', {});
};
// 监听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);
} else {
resetForm();
}
}, { immediate: true });
watch(() => props.modelValue, (newVal) => {
if (newVal === false) {
resetForm();
}
}, { immediate: true });
</script>
<style lang="scss" scoped>
......@@ -343,7 +354,7 @@ const cancel = () => {
}
.form-footer {
margin-top: 20px;
margin-top: 30px;
display: flex;
justify-content: center;
......
src/views/dustOverview/components/roomSettingDialog.vue
View file @ 0d157e8d
......@@ -48,6 +48,7 @@
style="width: 100%"
size="small"
border
:resizable="false"
>
<el-table-column prop="compartPositionRow" label="排" width="180">
<template #default="{ row }">
......
src/views/dustOverview/components/valveSettingDialog.vue
View file @ 0d157e8d
......@@ -5,7 +5,7 @@
width="800px"
:close-on-click-modal="false"
:close-on-press-escape="false"
@update:model-value="$emit('update:modelValue', $event)"
@update:model-value="cancel"
>
<div class="valve-setting">
<div class="setting-row">
......@@ -37,6 +37,7 @@
:min="0"
controls-position="right"
style="width: 120px"
@change="handleValveNumChange"
:class="{ 'is-error': errorMessage }"
/>
</div>
......@@ -47,6 +48,7 @@
:min="0"
controls-position="right"
style="width: 120px"
@change="handleBagNumChange"
/>
</div>
</div>
......@@ -57,14 +59,14 @@
{{ errorMessage }}
</div>
<div>
<!-- <div>
<el-button
type="primary"
class="save-btn"
@click="handleSave"
:disabled="!!errorMessage || valveForm.valveNum === null || valveForm.bagNum === null"
>设置</el-button>
</div>
</div> -->
</div>
<!-- 分布表格 -->
......@@ -93,7 +95,7 @@
<template #footer>
<span class="dialog-footer">
<el-button @click="$emit('update:modelValue', false)">取消</el-button>
<el-button @click="cancel">取消</el-button>
<el-button type="primary" @click="handleConfirm" :disabled="!!errorMessage">
保存
</el-button>
......@@ -119,7 +121,7 @@ const emit = defineEmits(["update:modelValue", "confirm"]);
const valveForm = ref({
total: 0,
rows: 0,
frontCompartNo: 0,
frontCompartNo: null,
valveNum: 0,
bagNum: 0
});
......@@ -174,13 +176,24 @@ const initializeState = () => {
}
};
const resetForm = () => {
statusData.value = [];
valveForm.value.frontCompartNo = null;
valveForm.value.valveNum = 0;
valveForm.value.bagNum = 0;
}
const getAllocation = (params) => {
getValveAllocation(params).then(res => {
if (res.code === 1 && res.data.valveList.length > 0) {
if (res.code === 1) {
if (res.data.valveList.length > 0) {
statusData.value = res.data.valveList;
valveForm.value.frontCompartNo = statusData.value[0].frontCompartNo;
valveForm.value.valveNum = statusData.value[0].valveNum;
valveForm.value.bagNum = statusData.value[0].bagNum;
} else {
resetForm();
}
}
})
}
......@@ -197,6 +210,45 @@ const handleRoomChange = (roomIndex) => {
}
};
// 监听电磁阀数量变化
const handleValveNumChange = () => {
// 验证是否超出限制
const validation = validateValveCount.value;
if (!validation.valid) {
errorMessage.value = validation.message;
return;
}
// 保存当前选中仓室的电磁阀分布数量
const selectedRoom = statusData.value.find(cell => cell.frontCompartNo === valveForm.value.frontCompartNo);
if (selectedRoom) {
selectedRoom.valveNum = valveForm.value.valveNum;
selectedRoom.bagNum = valveForm.value.bagNum;
// 更新错误信息
errorMessage.value = "";
}
}
// 监听布袋数量变化
const handleBagNumChange = () => {
// 验证是否超出限制
const validation = validateValveCount.value;
if (!validation.valid) {
errorMessage.value = validation.message;
return;
}
// 保存当前选中仓室的电磁阀分布数量
const selectedRoom = statusData.value.find(cell => cell.frontCompartNo === valveForm.value.frontCompartNo);
if (selectedRoom) {
selectedRoom.valveNum = valveForm.value.valveNum;
selectedRoom.bagNum = valveForm.value.bagNum;
// 更新错误信息
errorMessage.value = "";
}
}
watch(() => props.modelValue, (newVal) => {
if (newVal) {
initializeState();
......@@ -251,7 +303,6 @@ 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} 个，请调整后再提交`;
......@@ -261,6 +312,11 @@ const handleConfirm = () => {
emit("confirm", statusData.value);
// emit("update:modelValue", false);
};
const cancel = () => {
resetForm();
emit("update:modelValue", false);
}
</script>
<style lang="scss" scoped>
......@@ -334,6 +390,7 @@ const handleConfirm = () => {
display: flex;
flex-direction: column;
gap: 8px;
min-height: 152px;
padding: 12px;
background: #f5f7fa;
border-radius: 4px;
......
src/views/dustOverview/index.vue
View file @ 0d157e8d
......@@ -159,6 +159,7 @@
v-model="isAddDustCollectorVisible"
:edit-data="currentEditingDustCollector"
@save="handleSaveDustCollector"
@cancel="handleCancel"
/>
</div>
</template>
......@@ -284,19 +285,10 @@ const filterProductionLine = (query) => {
}
};
const getStatusType = (status) => {
const statusMap = {
正常运行: "success",
轻微异常: "warning",
故障: "danger",
};
return statusMap[status] || "info";
};
const getHealthScoreColor = (score) => {
// 去除百分号
const value = parseInt(score.replace("%", ""));
if (value >= 90) return "#67C23A";
if (value == 100) return "#67C23A";
if (value >= 70) return "#E6A23C";
return "#F56C6C";
};
......@@ -306,7 +298,12 @@ const getIndex = (index) => {
};
const handleView = (row) => {
console.log("查看详情", row);
router.push({
path: "/monitor",
query: {
dusterNo: row.deviceNo,
},
});
};
const handleEdit = (row) => {
......@@ -401,6 +398,10 @@ const setValveInfo = (data) => {
});
};
const handleCancel = () => {
isAddDustCollectorVisible.value = false;
currentEditingDustCollector.value = null;
};
// 保存新增或编辑除尘器
const handleSaveDustCollector = (data) => {
if (data.id) {
......@@ -425,6 +426,7 @@ const handleSaveDustCollector = (data) => {
.then((res) => {
if (res.code == 1) {
ElMessage.success("新增除尘器成功");
currentEditingDustCollector.value = null;
isAddDustCollectorVisible.value = false;
refreshData();
} else {
......@@ -749,4 +751,14 @@ onBeforeUnmount(() => {});
}
}
}
:deep(.el-table) {
.el-table__column-resize-proxy {
display: none !important;
}
.el-table__header th {
user-select: none;
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment