Skip to content

D
DC-TOM
Commit 4ab71b43 authored by Cai Wei's avatar Cai Wei
Browse files
Options

feat(*): 除尘器总览页面开发

parent 2e7543e8
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 973 additions and 258 deletions
src/views/dustOverview/components/addDustCollectorDialog.vue 0 → 100644
View file @ 4ab71b43
<template>
<el-dialog
:model-value="modelValue"
title="新增除尘器"
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">
<div class="selector-wrap">
<el-select v-model="formData.dustType" placeholder="除尘器选择" style="width: 238px">
<el-option
v-for="item in dustTypeOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<el-button type="primary" size="default" @click="selectDustType">选择</el-button>
</div>
</div>
<div class="form-content">
<el-form ref="formRef" :model="formData" label-width="100px" :rules="rules">
<el-form-item label="除尘器名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入" />
</el-form-item>
<el-form-item label="除尘器编号" prop="code">
<el-input v-model="formData.code" placeholder="请输入" />
</el-form-item>
<el-form-item label="所属工序" prop="process">
<el-select v-model="formData.process" placeholder="工序选择">
<el-option
v-for="item in processOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="仓室数量" prop="chamberCount">
<el-input v-model.number="formData.chamberCount" placeholder="请输入" />
</el-form-item>
<el-form-item label="电磁阀数量" prop="valveCount">
<el-input v-model.number="formData.valveCount" placeholder="请输入" />
</el-form-item>
<el-form-item label="合理压差范围" prop="pressureRange">
<div class="range-input">
<el-input v-model.number="formData.pressureMin" placeholder="请输入" />
<span class="separator">～</span>
<el-input v-model.number="formData.pressureMax" placeholder="请输入" />
</div>
</el-form-item>
<el-form-item label="服务器IP" prop="serverIp">
<el-input v-model="formData.serverIp" placeholder="请输入" />
</el-form-item>
</el-form>
</div>
<div class="form-footer">
<el-button @click="cancel">取消</el-button>
<el-button type="primary" @click="submitForm">确认</el-button>
</div>
</div>
</el-dialog>
</template>
<script setup>
import { ref, reactive } from 'vue';
const props = defineProps({
modelValue: {
type: Boolean,
default: false
}
});
const emit = defineEmits(['update:modelValue', 'save']);
const formRef = ref(null);
const dustTypeOptions = [
{ value: 1, label: '除尘器类型1' },
{ value: 2, label: '除尘器类型2' },
{ value: 3, label: '除尘器类型3' }
];
const processOptions = [
{ value: 1, label: '转炉' },
{ value: 2, label: '炼铁' }
];
const formData = reactive({
dustType: '',
name: '',
code: '',
process: '',
chamberCount: null,
valveCount: null,
pressureMin: null,
pressureMax: null,
serverIp: ''
});
const rules = {
name: [{ required: true, message: '请输入除尘器名称', trigger: 'blur' }],
code: [{ required: true, message: '请输入除尘器编号', trigger: 'blur' }],
process: [{ required: true, message: '请选择所属工序', trigger: 'change' }],
chamberCount: [
{ required: true, message: '请输入仓室数量', trigger: 'blur' },
{ type: 'number', min: 1, message: '仓室数量必须大于0', trigger: 'blur' }
],
valveCount: [
{ required: true, message: '请输入电磁阀数量', trigger: 'blur' },
{ type: 'number', min: 1, message: '电磁阀数量必须大于0', trigger: 'blur' }
],
pressureMin: [
{ required: true, message: '请输入最小压差', trigger: 'blur' },
{ type: 'number', message: '必须为数字', trigger: 'blur' }
],
pressureMax: [
{ required: true, message: '请输入最大压差', trigger: 'blur' },
{ type: 'number', message: '必须为数字', trigger: 'blur' }
],
serverIp: [
{ required: true, message: '请输入服务器IP', trigger: 'blur' },
{ pattern: /^(\d{1,3}\.){3}\d{1,3}$/, message: 'IP地址格式不正确', trigger: 'blur' }
]
};
const selectDustType = () => {
// 这里可以根据选择的除尘器类型预填充表单数据
// 如果有预设模板数据，可以在这里设置
console.log('Selected dust type:', formData.dustType);
};
const submitForm = () => {
if (!formRef.value) return;
formRef.value.validate((valid) => {
if (valid) {
// 组装压差范围
const pressureRange = `${formData.pressureMin}～${formData.pressureMax}`;
// 准备提交的数据
const submitData = {
dustType: formData.dustType,
deviceName: formData.name,
deviceNo: formData.code,
process: formData.process,
healthScore: formData.chamberCount, // 仓室数量保存在healthScore
health2Score: formData.valveCount, // 电磁阀数量保存在health2Score
lastAlarmTime: pressureRange, // 合理压差范围保存在lastAlarmTime字段
serverIp: formData.serverIp,
// 生成默认的状态矩阵
status: generateDefaultStatus(formData.chamberCount)
};
// 发送数据到父组件处理保存逻辑
emit('save', submitData);
emit('update:modelValue', false);
} else {
console.error('Form validation failed');
return false;
}
});
};
const cancel = () => {
// 重置表单状态和数据
formRef.value.resetFields();
formData.dustType = '';
formData.name = '';
formData.code = '';
formData.process = '';
formData.chamberCount = null;
formData.valveCount = null;
emit('update:modelValue', false);
};
// 生成默认的状态矩阵
const generateDefaultStatus = (totalChambers) => {
// 默认状态：正常（status=1），每排最多5个仓室
const rows = Math.ceil(totalChambers / 5);
const result = [];
let chamberIndex = 1;
for (let rowIndex = 0; rowIndex < rows; rowIndex++) {
const row = [];
const chambersInRow = Math.min(5, totalChambers - rowIndex * 5);
for (let i = 0; i < chambersInRow; i++) {
row.push({
index: chamberIndex++,
status: 1, // 正常状态
count: 1 // 默认阀门数量
});
}
result.push(row);
}
return result;
};
</script>
<style lang="scss" scoped>
.add-dust-form {
.form-item {
display: flex;
align-items: center;
margin-bottom: 20px;
padding: 0 0 0 50px;
box-sizing: border-box;
.number-badge {
width: 24px;
height: 24px;
line-height: 24px;
text-align: center;
background-color: #f8cd4e;
color: #000;
border-radius: 4px;
font-weight: bold;
margin-right: 10px;
}
.selector-wrap {
display: flex;
align-items: center;
gap: 10px;
flex: 1;
}
}
.form-content {
padding: 0 30px;
.range-input {
display: flex;
align-items: center;
.separator {
margin: 0 5px;
color: #606266;
}
}
}
.form-footer {
margin-top: 20px;
display: flex;
justify-content: center;
.el-button {
width: 120px;
}
}
}
:deep(.el-form-item__label) {
font-size: 14px;
color: #606266;
}
:deep(.el-input) {
width: 100%;
}
:deep(.el-select) {
width: 100%;
}
</style>
\ No newline at end of file
src/views/dustOverview/components/roomSettingDialog.vue 0 → 100644
View file @ 4ab71b43
<template>
<el-dialog
:model-value="modelValue"
title="仓室数量设置"
width="500px"
:close-on-click-modal="false"
:close-on-press-escape="false"
@update:model-value="$emit('update:modelValue', $event)"
@open="initializeState"
>
<el-form :model="roomForm" label-width="120px">
<el-form-item label="仓室数量">
<el-input
v-model="roomForm.totalRooms"
controls-position="right"
style="width: 150px"
disabled
/>
</el-form-item>
<el-form-item label="仓室分几排">
<el-input-number
v-model="roomForm.rows"
:min="1"
:max="20"
controls-position="right"
@change="handleRowsChange"
/>
</el-form-item>
</el-form>
<!-- 分布表格 -->
<div class="distribution-table">
<div class="table-title">
仓室数量分布
<div
v-if="distributionDiff !== 0"
:class="[
'distribution-warning',
distributionDiff > 0 ? 'warning-less' : 'warning-less',
]"
>
当前仓室总数{{ distributionDiff > 0 ? "大于" : "小于" }}默认仓室数量
{{ Math.abs(distributionDiff) }} 个，请修改。
</div>
</div>
<el-table
:data="distributionData"
style="width: 100%"
size="small"
border
>
<el-table-column prop="row" label="排" width="180" />
<el-table-column prop="count" label="仓数量">
<template #default="{ row }">
<el-input-number
v-model="row.count"
:min="1"
:max="50"
controls-position="right"
size="small"
@change="handleDistributionChange"
/>
</template>
</el-table-column>
</el-table>
</div>
<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>
</span>
</template>
</el-dialog>
</template>
<script setup>
import { ref, computed, watch } from "vue";
const props = defineProps({
modelValue: Boolean,
totalRooms: {
type: Number,
required: true
},
initialDistribution: {
type: Array,
default: () => []
}
});
const emit = defineEmits(["update:modelValue", "confirm"]);
const roomForm = ref({
totalRooms: 0,
rows: 0
});
const distributionData = ref([]);
const initializeState = () => {
if (props.modelValue) {
roomForm.value.totalRooms = props.totalRooms;
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
}));
} else {
roomForm.value.rows = 0;
distributionData.value = [];
}
}
};
watch(() => props.modelValue, (newVal) => {
if (newVal) {
initializeState();
}
}, { immediate: true });
const distributionDiff = computed(() => {
const total = distributionData.value.reduce(
(sum, item) => sum + item.count,
0
);
return total - roomForm.value.totalRooms;
});
const handleRowsChange = (value) => {
const total = roomForm.value.totalRooms;
if (!total || !value) return;
// 计算每行的基础数量（向下取整）和余数
const baseValue = Math.floor(total / value);
const remainder = total % value;
// 生成分布数据
distributionData.value = Array.from({ length: value }, (_, index) => {
return {
row: `第${index + 1}排`,
count: index < remainder ? baseValue + 1 : baseValue
};
});
};
const handleDistributionChange = () => {
// 分布数量变化时不需要特殊处理，distributionDiff会自动计算
};
const handleConfirm = () => {
if (distributionDiff.value === 0) {
emit("confirm", distributionData.value);
emit("update:modelValue", false);
}
};
</script>
<style lang="scss" scoped>
.dialog-footer {
display: flex;
justify-content: center;
gap: 12px;
}
.distribution-table {
margin-top: 20px;
border-top: 1px solid #ebeef5;
padding-top: 20px;
}
.table-title {
font-size: 14px;
color: #2182a0;
margin-bottom: 16px;
font-weight: 500;
}
.distribution-warning {
display: inline-block;
font-size: 13px;
margin-left: 12px;
padding: 1px 8px;
box-sizing: border-box;
border-radius: 4px;
&.warning-more {
color: #e6a23c;
background-color: #fdf6ec;
}
&.warning-less {
color: #f56c6c;
background-color: #fef0f0;
}
}
:deep(.el-input-number.el-input-number--small) {
width: 130px;
}
:deep(.distribution-table .el-table--border .el-table__cell) {
border-right: 1px solid #ebeef5 !important;
}
</style>
\ No newline at end of file
src/views/dustOverview/components/valveSettingDialog.vue 0 → 100644
View file @ 4ab71b43
<template>
<el-dialog
:model-value="modelValue"
title="电磁阀数量设置"
width="800px"
: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">
<div class="input-group">
<span>电磁阀总数量：</span>
<el-input v-model="valveForm.total" style="width: 120px" disabled />
</div>
<el-button type="primary" @click="handleAverageDistribute"
>平均分布生成</el-button
>
</div>
<div class="table-title">仓室脉冲阀数量分布</div>
<div class="setting-row">
<div class="input-group">
<span>仓室编号：</span>
<el-select v-model="valveForm.roomNo" style="width: 120px" @change="handleRoomChange">
<el-option
v-for="cell in statusData"
:key="cell.index"
:label="`${cell.index}仓`"
:value="cell.index"
/>
</el-select>
</div>
<div class="input-group">
<span>电磁阀分布数量：</span>
<el-input-number
v-model="valveForm.valveCount"
:min="1"
controls-position="right"
style="width: 120px"
:class="{ 'is-error': errorMessage }"
/>
</div>
<div class="input-group">
<span>布阀数量：</span>
<el-input-number
v-model="valveForm.distribution"
:min="1"
controls-position="right"
style="width: 120px"
/>
</div>
</div>
<!-- 错误提示 -->
<div v-if="errorMessage" class="error-message">
<i class="el-icon-warning"></i>
{{ errorMessage }}
</div>
<div>
<el-button
type="primary"
class="save-btn"
@click="handleSave"
:disabled="!!errorMessage || valveForm.valveCount === null || valveForm.distribution === null"
>保存</el-button>
</div>
</div>
<!-- 分布表格 -->
<div class="distribution-table">
<div class="table-title">
仓室脉冲阀数量分布
<span class="valve-count-info">
(当前分配: {{ currentTotalValves }}/{{ valveForm.total }})
</span>
</div>
<div class="valve-distribution-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)"
>
<div class="cell-index">{{ cell.index }}仓</div>
<div class="cell-value">{{ cell.count }}</div>
</div>
</div>
</div>
</div>
<template #footer>
<span class="dialog-footer">
<el-button @click="$emit('update:modelValue', false)">取消</el-button>
<el-button type="primary" @click="handleConfirm" :disabled="!!errorMessage">
保存
</el-button>
</span>
</template>
</el-dialog>
</template>
<script setup>
import { ref, watch, computed } from "vue";
const props = defineProps({
modelValue: Boolean,
totalValves: {
type: Number,
required: true
},
statusData: {
type: Array,
default: () => []
}
});
const emit = defineEmits(["update:modelValue", "confirm"]);
const valveForm = ref({
total: 0,
rows: 0,
roomNo: 0,
valveCount: 0,
distribution: 0
});
const statusData = ref([]);
const errorMessage = ref("");
// 计算当前已分配的电磁阀总数量
const currentTotalValves = computed(() => {
return statusData.value.reduce((sum, cell) => sum + cell.count, 0);
});
// 计算当前修改后的总数量
const projectedTotalValves = computed(() => {
// 找到当前修改的仓室
const selectedRoom = statusData.value.find(cell => cell.index === valveForm.value.roomNo);
if (!selectedRoom) return currentTotalValves.value;
// 计算替换后的总数
const diff = valveForm.value.valveCount - selectedRoom.count;
return currentTotalValves.value + diff;
});
// 验证是否超过总数限制
const validateValveCount = computed(() => {
if (projectedTotalValves.value > valveForm.value.total) {
return {
valid: false,
message: `超出电磁阀总数限制，当前配置后总数为 ${projectedTotalValves.value}，超出限制 ${projectedTotalValves.value - valveForm.value.total} 个`
};
}
return { valid: true, message: "" };
});
const initializeState = () => {
if (props.modelValue) {
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; // 默认布阀数量等于电磁阀数量
}
}
};
// 当选中的仓室改变时，更新电磁阀分布数量
const handleRoomChange = (roomIndex) => {
const selectedRoom = statusData.value.find(cell => cell.index === roomIndex);
if (selectedRoom) {
valveForm.value.valveCount = selectedRoom.count;
valveForm.value.distribution = selectedRoom.count;
errorMessage.value = "";
}
};
watch(() => props.modelValue, (newVal) => {
if (newVal) {
initializeState();
}
}, { immediate: true });
// 监听阀门数量变化，实时验证
watch(() => valveForm.value.valveCount, () => {
const validation = validateValveCount.value;
errorMessage.value = validation.valid ? "" : validation.message;
});
const handleAverageDistribute = () => {
if (!statusData.value || statusData.value.length === 0) return;
const total = Number(valveForm.value.total) || 0;
const totalRooms = statusData.value.length;
if (totalRooms === 0 || total === 0) return;
// 计算基础平均值（向下取整）和余数
const baseValue = Math.floor(total / totalRooms);
const remainder = total % totalRooms;
// 平均分配阀数量 多余的阀数量分配到前面的仓室
statusData.value.forEach((cell, index) => {
cell.count = baseValue + (index < remainder ? 1 : 0);
});
// 更新当前选中仓室的值
handleRoomChange(valveForm.value.roomNo);
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);
if (selectedRoom) {
selectedRoom.count = valveForm.value.valveCount;
// 更新错误信息
errorMessage.value = "";
}
};
const handleConfirm = () => {
// 最终确认时再次验证总数是否符合要求
const totalValves = statusData.value.reduce((sum, cell) => sum + cell.count, 0);
if (totalValves > valveForm.value.total) {
errorMessage.value = `电磁阀总数超出限制 ${totalValves - valveForm.value.total} 个，请调整后再提交`;
return;
}
emit("confirm", statusData.value);
emit("update:modelValue", false);
};
</script>
<style lang="scss" scoped>
.dialog-footer {
display: flex;
justify-content: center;
gap: 12px;
}
.valve-setting {
.setting-row {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 20px;
.input-group {
display: flex;
align-items: center;
gap: 8px;
span {
white-space: nowrap;
color: #606266;
}
}
}
.save-btn {
display: block;
width: 120px;
margin: 0 auto;
}
}
.error-message {
color: #F56C6C;
background-color: #FEF0F0;
padding: 8px 16px;
border-radius: 4px;
margin: 10px 0;
font-size: 14px;
display: flex;
align-items: center;
i {
margin-right: 8px;
font-size: 16px;
}
}
.distribution-table {
margin-top: 20px;
border-top: 1px solid #ebeef5;
padding-top: 20px;
}
.table-title {
font-size: 14px;
color: #2182a0;
margin-bottom: 16px;
font-weight: 500;
.valve-count-info {
font-size: 12px;
color: #909399;
margin-left: 8px;
}
}
.valve-distribution-grid {
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px;
background: #f5f7fa;
border-radius: 4px;
.valve-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.valve-cell {
width: 41px;
background: white;
padding: 4px;
border-radius: 4px;
text-align: center;
border: 1px solid #dcdfe6;
transition: all 0.3s;
cursor: pointer;
&.active-cell {
box-shadow: 0 0 10px 0 rgba(64, 158, 255, 0.8);
transform: scale(1.05);
}
.cell-index {
font-size: 12px;
color: #909399;
margin-bottom: 8px;
}
.cell-value {
font-size: 14px;
color: #606266;
}
}
}
:deep(.is-error) {
.el-input__inner {
border-color: #F56C6C;
}
.el-input-number__decrease,
.el-input-number__increase {
border-color: #F56C6C;
}
}
</style>
\ No newline at end of file
src/views/dustOverview/index.vue
View file @ 4ab71b43
This diff is collapsed.
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