Skip to content

D
DC-TOM
Commit 6dd78db8 authored by liuzhaoh's avatar liuzhaoh
Browse files
Options

Merge branch 'dev' of http://app.bmetech.com/liuzhaohui/dctomproject into dev

parents a5e2a398 bbb317a3
Hide whitespace changes
Inline Side-by-side
Showing with 2360 additions and 308 deletions
package.json
View file @ 6dd78db8
......@@ -9,6 +9,7 @@
"preview": "vite preview"
},
"dependencies": {
"@element-plus/icons-vue": "^2.3.1",
"axios": "^1.9.0",
"crypto-js": "^4.2.0",
"echarts": "^5.6.0",
......
src/router/index.js
View file @ 6dd78db8
......@@ -2,13 +2,14 @@ import { createWebHistory, createRouter } from 'vue-router'
import Dashboard from '../views/dashboard/index.vue'
import DustOverview from '../views/dustOverview/index.vue'
import HomeView from '../views/HomeView.vue'
import AboutView from '../views/AboutView.vue'
import CollectorList from '../views/collectorList/collectorList.vue'
import User from '../views/user.vue'
import Layout from '../layout/index.vue'
import Login from '../views/login/index.vue'
import equipmentManagement from '../views/equipmentManagement/index.vue'
import dustMonitoring from '../views/dustMonitoring/index.vue'
import bagMonitoring from '../views/dustMonitoring/bag-monitoring.vue'
import myAgency from '@/views/closeManage/myAgency.vue';
import myDone from '@/views/closeManage/myDone.vue';
......@@ -36,6 +37,16 @@ const routes = [
path: '/monitor',
component: dustMonitoring,
meta: { title: '除尘器监控' },
},
{
path: '/collectorList',
component: CollectorList,
meta: { title: '布袋周期' },
},
{
path: '/bag-monitor',
component: bagMonitoring,
meta: { title: 'BME布袋监测' },
},
{
path: '/alerts',
......
src/utils/chart.js
View file @ 6dd78db8
import { color } from "echarts";
export const getLineOption = (xData = [], seriesData = []) => ({
tooltip: {
trigger: 'axis',
},
grid: {
left: '3%',
right: '4%',
bottom: '15%',
top: '5%',
containLabel: true,
},
legend: {
data: ['健康度指数（%）'],
bottom: '0%',
icon:"circle",
itemWidth: 10,
itemHeight: 10,
itemGap: 10,
},
xAxis: {
type: 'category',
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: '#E9ECF2',
},
tooltip: {
trigger: "axis",
},
grid: {
left: "3%",
right: "4%",
bottom: "15%",
top: "5%",
containLabel: true,
},
legend: {
data: ["健康度指数（%）"],
bottom: "0%",
icon: "circle",
itemWidth: 10,
itemHeight: 10,
itemGap: 10,
},
xAxis: {
type: "category",
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: "#E9ECF2",
},
axisLabel: {
color: 'rgba(0,0,0,0.6)',
},
axisLabel: {
color: "rgba(0,0,0,0.6)",
},
data: xData,
},
yAxis: {
type: "value",
axisLabel: {
color: "rgba(0,0,0,0.6)",
},
splitLine: {
lineStyle: {
color: "#E9ECF2",
type: "dashed",
},
data: xData,
},
},
series: [
{
name: "健康度指数（%）",
type: "line",
color: "#399DFA",
data: seriesData,
smooth: true,
},
],
});
export const getDustLineOption = (xData = [], seriesData = []) => ({
tooltip: {
trigger: "axis",
},
grid: {
left: "3%",
right: "4%",
bottom: "15%",
top: "5%",
containLabel: true,
},
legend: {
data: ["健康度指数（%）"],
bottom: "0%",
icon: "circle",
itemWidth: 10,
itemHeight: 10,
itemGap: 10,
},
xAxis: {
type: "category",
axisTick: {
show: false,
},
yAxis: {
type: 'value',
axisLabel: {
color: 'rgba(0,0,0,0.6)',
axisLine: {
lineStyle: {
color: "#E9ECF2",
},
splitLine: {
lineStyle: {
color: '#E9ECF2',
type: 'dashed',
},
},
axisLabel: {
color: "rgba(0,0,0,0.6)",
},
data: xData,
},
yAxis: {
type: "value",
axisLabel: {
color: "rgba(0,0,0,0.6)",
},
splitLine: {
lineStyle: {
color: "#E9ECF2",
type: "dashed",
},
},
},
series: [
{
name: "",
type: "line",
color: "#399DFA",
data: seriesData,
smooth: true,
},
],
});
// 布袋监测图表配置
export const getBagMonitoringChartOption = (xData = [], seriesData = []) => ({
tooltip: {
trigger: "axis",
axisPointer: {
type: "line",
lineStyle: {
color: "#6E7079",
width: 1,
},
},
},
grid: {
left: "20",
right: "20",
bottom: "30",
top: "3%",
containLabel: true,
},
xAxis: {
type: "category",
boundaryGap: false,
axisLine: {
lineStyle: {
color: "#E9ECF2",
},
},
axisLabel: {
color: "rgba(0,0,0,0.6)",
fontSize: 12,
interval: "auto",
rotate: 0,
},
axisTick: {
show: false,
},
data: xData,
},
yAxis: {
type: "value",
min: 0,
max: 600,
interval: 200,
axisLabel: {
color: "rgba(0,0,0,0.6)",
formatter: "{value}",
},
series: [
{
name: '健康度指数（%）',
type: 'line',
color: '#399DFA',
data: seriesData,
smooth: true,
splitLine: {
lineStyle: {
color: "#E9ECF2",
type: "dashed",
},
],
});
\ No newline at end of file
},
},
series: [
{
name: "监测值",
type: "line",
smooth: false,
symbol: "none",
sampling: "average",
itemStyle: {
color: "#7B68EE",
},
lineStyle: {
width: 1,
},
areaStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(123, 104, 238, 0.4)",
},
{
offset: 1,
color: "rgba(123, 104, 238, 0.1)",
},
],
},
},
data: seriesData,
},
],
});
src/views/collectorList/collectorList.vue 0 → 100644
View file @ 6dd78db8
<template>
<div class="page-container collectorList">
<div class="content-box">
<div class="search">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="仓室">
<el-input
v-model="formInline.deviceName"
placeholder="请输入仓室名称"
style="width: 200px"
clearable
/>
</el-form-item>
<el-form-item label="除尘器名称">
<el-input
v-model="formInline.deviceName"
placeholder="请输入除尘器名称"
style="width: 200px"
clearable
/>
</el-form-item>
<el-form-item label="更换时间">
<el-date-picker
v-model="formInline.date"
type="datetimerange"
range-separator="~"
start-placeholder="开始时间"
end-placeholder="结束时间"
:teleported="false"
/>
</el-form-item>
<el-form-item>
<el-button type="default" class="default-btn" @click="onSubmit"
>重置</el-button
>
<el-button type="primary" class="search-btn" @click="onSubmit"
>查询</el-button
>
<el-button type="success" class="add-btn" @click="openDialog()"
>更换周期分析</el-button
>
</el-form-item>
</el-form>
</div>
<div class="table-box">
<common-table
:data="tableData.list"
:columns="tableColumns"
:default-page-size="10"
@pagination-change="handlePaginationChange"
:pagination-texts="{
total: '共',
sizeChange: '条/页',
prev: '前一页',
next: '后一页',
jumper: '跳至',
}"
>
<template #index="{ $index }">
{{ getIndex($index) }}
</template>
<template #deviceName="{ row }">
<span class="health-score" @dblclick="openDialog(row.deviceName)">{{
row.deviceName
}}</span>
</template>
<!-- <template #operation="{ row }">
<span class="view-btn" @click="handleView(row)">详情</span>
<span class="edit-btn" @click="handleEdit(row)">编辑</span>
</template> -->
</common-table>
</div>
</div>
<!-- 除尘器曲线 -->
<el-dialog
class="dustListDialog"
v-model="dustLineisShow"
title="仓室数量设置"
width="1000px"
:close-on-click-modal="false"
:close-on-press-escape="false"
>
<div class="input-group">
<span>仓室编号：</span>
<el-select
v-model="selectDustNo"
@change="changeDust"
style="width: 120px"
>
<el-option
v-for="i in dustList.list"
:key="i"
:label="`${i.deviceName}`"
:value="i.deviceNo"
/>
</el-select>
</div>
<div class="echartBox">
<chartLine :dustLineInfo="dustLineInfo.list"></chartLine>
</div>
<!-- <template #footer>
<span class="dialog-footer">
<el-button @click="dustLine = false">取消</el-button>
<el-button type="primary" @click="handleRoomSettingConfirm">
确认
</el-button>
</span>
</template> -->
</el-dialog>
</div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount, computed, reactive } from "vue";
import CommonTable from "@/components/commonTable/index.vue";
import chartLine from "./components/chart-line.vue";
const formInline = ref({
compart: "",
dusterName: "",
date: "",
});
const currentPage = ref(1);
const pageSize = ref(10);
const dustLineisShow = ref(false);
const tableColumns = ref([
{
prop: "index",
label: "序号",
width: "5%",
},
{
prop: "deviceName",
label: "除尘器名称",
width: "8%",
},
{
prop: "compart",
label: "仓室",
width: "8%",
},
{
prop: "position",
label: "布袋位置（排/列）",
width: "8%",
},
{
prop: "changeDateRemind",
label: "布袋更换提醒时间",
width: "8%",
},
{
prop: "changeDate",
label: "更换时间",
width: "8%",
},
{
prop: "changePeo",
label: "更换人",
width: "8%",
},
{
prop: "ownerdeviceName",
label: "所属除尘器",
width: "8%",
},
{
prop: "lastAlarmTime",
label: "布袋更换提醒时间",
width: "10%",
},
{
prop: "changeRound",
label: "更换周期(与上次更换比)",
width: "6%",
},
]);
const tableData = reactive({
list: [
{
deviceName: "1#除尘器",
compart: "1234567890",
position: "转炉",
changeDateRemind: "xx",
changeDate: "xx",
changePeo: "xx",
ownerdeviceName: "xx",
lastAlarmTime: "xx",
changeRound: "xx",
},
],
});
const selectDustNo = ref("");
const dustList = reactive({
list: [],
});
const getHealthScoreColor = (score) => {
const value = parseInt(score);
if (value >= 90) return "#67C23A";
if (value >= 70) return "#E6A23C";
return "#F56C6C";
};
const getIndex = (index) => {
return (currentPage.value - 1) * pageSize.value + index + 1;
};
const handleView = (row) => {
console.log("查看详情", row);
};
const handleEdit = (row) => {
console.log("编辑", row);
};
const handlePaginationChange = (pagination) => {
currentPage.value = pagination.currentPage;
pageSize.value = pagination.pageSize;
console.log("分页变化", pagination);
};
const onSubmit = () => {
console.log("submit!", formInline.value);
};
const dustLineInfo = reactive({ list: [{}] });
const openDialog = (deviceName) => {
changeDust(deviceName);
dustLineisShow.value = true;
};
const getDustList = () => {
return [
{
deviceName: "1#除尘器",
deviceNo: "11111",
},
{
deviceName: "2#除尘器",
deviceNo: "22222",
},
{
deviceName: "3#除尘器",
deviceNo: "333333",
},
];
};
const getDustListInfo = () => {
return [
{ time: "1", value: "20" },
{ time: "2", value: "30" },
{ time: "4", value: "40" },
{ time: "8", value: "45" },
{ time: "10", value: "15" },
{ time: "周期", value: "20" },
];
};
const changeDust = (deviceName) => {
dustList.list = getDustList();
if (deviceName) {
dustList.list.forEach((i) => {
if (i.deviceName == deviceName) {
selectDustNo.value = i.deviceNo;
}
});
} else {
selectDustNo.value = dustList.list[0].deviceNo || "";
}
let list = getDustListInfo();
dustLineInfo.list = list;
};
onMounted(async () => {});
onBeforeUnmount(() => {});
</script>
<style lang="scss" scoped>
.collectorList {
width: 100%;
height: calc(100% - 14px);
box-sizing: border-box;
:deep(.el-input--small) {
width: 100%;
}
.content-box {
margin-top: 24px;
.search {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.table-box {
width: 100%;
height: calc(100vh - 400px);
}
}
.default-btn {
width: 85px;
}
.search-btn {
width: 85px;
background: #2182a0;
border: 1px solid #2182a0;
}
.add-btn {
width: 85px;
}
.health-score {
color: #027ffc;
cursor: pointer;
display: block;
width: 100%;
}
.status-matrix {
width: fit-content;
display: flex;
padding: 10px;
box-sizing: border-box;
flex-direction: column;
align-items: flex-start;
gap: 6px;
border: 1px solid #e4e7ed;
border-radius: 4px;
background-color: #ffffff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
.matrix-row {
display: flex;
gap: 6px;
justify-content: flex-start;
}
.status-dot {
width: 14px;
height: 14px;
border-radius: 50%;
&:hover {
cursor: pointer;
transform: scale(1.2);
}
}
.status-normal {
background-color: #67c23a; // 绿色
}
.status-warning {
background-color: #e6a23c; // 橙色
}
.status-error {
background-color: #f56c6c; // 红色
}
}
.view-btn {
margin-right: 8px;
}
.dialog-footer {
display: flex;
justify-content: center;
gap: 12px;
}
:deep(.el-dialog__body) {
padding: 20px;
}
.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;
}
: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;
}
.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;
}
}
}
}
.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;
.cell-index {
font-size: 12px;
color: #909399;
margin-bottom: 8px;
}
.cell-value {
:deep(.el-input-number) {
width: 100px;
}
}
}
}
.readonly-value {
font-size: 14px;
color: #606266;
line-height: 32px;
padding: 0 12px;
}
.distribution-warning {
display: inline-block;
font-size: 13px;
margin-left: 12px;
padding: 2px 8px;
border-radius: 4px;
&.warning-more {
color: #e6a23c;
background-color: #fdf6ec;
}
&.warning-less {
color: #f56c6c;
background-color: #fef0f0;
}
}
.dustListDialog {
.echartBox {
margin: 0 auto;
width: 950px;
height: 450px;
> div {
width: 950px;
height: 450px;
}
}
}
}
</style>
src/views/collectorList/components/chart-line.vue 0 → 100644
View file @ 6dd78db8
<template>
<div ref="chartDustRef" class="chart-line"></div>
</template>
<script setup>
import { onMounted, onBeforeUnmount, ref, watch, nextTick } from "vue";
import * as echarts from "echarts";
import { getDustLineOption } from "@/utils/chart";
const props = defineProps({
// 表格数据
dustLineInfo: {
type: Array,
required: true,
default: () => [],
},
});
const chartDustRef = ref(null);
let chartInstance = null;
const initChart = () => {
if (chartDustRef.value) {
let xData = [];
let seriesData = [];
if (props.dustLineInfo) {
props.dustLineInfo.forEach((i) => {
xData.push(i.time);
seriesData.push(i.value);
});
}
chartInstance = echarts.init(chartDustRef.value);
const option = getDustLineOption(xData, seriesData);
nextTick(() => {
// DOM 更新完成后执行
chartInstance.setOption(option);
});
}
};
watch(
() => props.dustLineInfo,
() => {
initChart();
console.log("props.dustLineInfo", props.dustLineInfo);
},
{ deep: true }
);
onMounted(() => {
initChart();
window.addEventListener("resize", () => {
chartInstance?.resize();
});
});
onBeforeUnmount(() => {
chartInstance?.dispose();
});
</script>
<style lang="scss" scoped>
.chart-line {
canvas {
width: 100%;
height: 100%;
}
}
</style>
src/views/dashboard/components/map-svg.vue
View file @ 6dd78db8
......@@ -234,6 +234,7 @@ onBeforeUnmount(() => {
&.active {
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
z-index: 100;
}
.pulse {
......@@ -284,7 +285,7 @@ onBeforeUnmount(() => {
padding: 12px;
color: #fff;
pointer-events: none;
z-index: 3;
z-index: 999;
.text-status-normal {
color: #00ff9d !important;
......
src/views/dustMonitoring/bag-monitoring.vue 0 → 100644
View file @ 6dd78db8
<template>
<div class="page-container bag-monitoring-container">
<div class="header">
<div class="select-container">
<span>检测仪器11</span>
<el-select v-model="selectedDevice" placeholder="1#布袋检测仪">
<el-option label="1#布袋检测仪" value="1"></el-option>
</el-select>
</div>
<div class="title">BME布袋监测</div>
</div>
<div class="chart-container">
<div class="chart-wrapper" ref="chartRef"></div>
<div class="data-panel" :class="{ 'collapsed': !isPanelOpen }">
<div class="panel-toggle" :class="{ 'collapsed-icon': !isPanelOpen, 'expanded-icon': isPanelOpen }" @click="togglePanel">
<el-icon v-if="isPanelOpen"><ArrowRightBold /></el-icon>
<el-icon v-if="!isPanelOpen"><ArrowLeftBold /></el-icon>
</div>
<div class="data-box">
<div class="data-item">
<div>时间: {{ currentData.time }}</div>
<div>仓室: {{ currentData.chamber }}</div>
<div>反吹: {{ currentData.backwash }}</div>
</div>
<div class="data-item">
<div>DI3: {{ currentData.di3 }}</div>
<div>排: {{ currentData.row }}</div>
<div>实时值: {{ currentData.realValue }}</div>
</div>
<div class="data-item">
<div>基线值: {{ currentData.baseline }}</div>
<div>Delay: {{ currentData.delay }}</div>
<div>totaltime: {{ currentData.totaltime }}</div>
</div>
<div class="data-item">
<div>{{ currentData.next }}</div>
<div>valve:{{ currentData.valve }}</div>
<div>DI_TIME={{ currentData.di_time }}</div>
</div>
<div class="data-item">
<div>false:{{ currentData.false }}</div>
<div>peak={{ currentData.peak }}</div>
</div>
</div>
<div class="data-box second-box">
<div>时间:{{ secondaryData.time }}, 仓室: {{ secondaryData.chamber }}, 反吹: {{ secondaryData.backwash }}, 谷值: {{ secondaryData.valleyValue }}, 仓室状态阀门{{ secondaryData.status }}False{{ secondaryData.falseVal }}</div>
</div>
</div>
</div>
<div class="data-table">
<div class="time-controls">
<el-button @click="navigateBackward">
<el-icon><ArrowLeftBold />向前</el-icon>
</el-button>
<el-button @click="navigateForward">
<el-icon><ArrowRightBold />向后</el-icon>
</el-button>
<span class="time-label">间隔</span>
<el-input v-model="timeInterval" class="time-input"></el-input>
<span class="time-unit">分钟</span>
<el-button @click="reset">重置</el-button>
</div>
<table>
<thead>
<tr>
<th>名称</th>
<th v-for="i in 20" :key="i">{{ i }}仓</th>
</tr>
</thead>
<tbody>
<tr>
<td>峰值_R</td>
<td v-for="(value, index) in peakValuesR" :key="'r'+index">{{ value }}</td>
</tr>
<tr>
<td>峰值_H</td>
<td v-for="(value, index) in peakValuesH" :key="'h'+index">{{ value }}</td>
</tr>
<tr>
<td>状态</td>
<td v-for="(value, index) in statusValues" :key="'s'+index" :class="{ 'error': value === '故障' }">{{ value }}</td>
</tr>
<tr>
<td>反吹中</td>
<td v-for="(value, index) in backwashValues" :key="'b'+index">{{ value }}</td>
</tr>
<tr>
<td>谷值</td>
<td v-for="(value, index) in valleyValues" :key="'v'+index">{{ value }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<script setup>
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
import * as echarts from 'echarts'
import { ArrowRightBold, ArrowLeftBold } from '@element-plus/icons-vue'
import { getBagMonitoringChartOption } from '@/utils/chart.js'
// 设备选择
const selectedDevice = ref('1')
const isPanelOpen = ref(true)
// 图表相关
const chartRef = ref(null)
let chartInstance = null
let updateTimer = null // 定时器引用
// 时间导航相关
let isRealTimeMode = true
let lastTimePoint = null
// 图表数据
const chartData = reactive({
xData: [],
seriesData: []
})
// 当前数据面板
const currentData = reactive({
time: '641',
chamber: '5',
backwash: '0',
di3: '0, 0,',
row: '1,',
realValue: '18.87,',
baseline: '10,',
delay: '0,',
totaltime: '1837',
next: 'next:765,',
valve: '5',
di_time: '1848',
false: '0:0,',
peak: '4, 1, 46'
})
// 次要数据面板
const secondaryData = reactive({
time: '784',
chamber: '6',
backwash: '0',
valleyValue: '3',
status: '212',
falseVal: '0'
})
// 表格数据
const peakValuesR = [0, 0, -30, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
const peakValuesH = [30, 56, 60, 70, 18, 56, 18, 41, 41, 0, 41, 41, 41, 41, 41, 41, 500, 41, 31, 41]
const statusValues = Array(20).fill('正常')
statusValues[2] = '故障'
statusValues[16] = '故障'
const backwashValues = [0, 15, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
const valleyValues = [-8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, -9, 0, 0, 0, 0, 0]
// 时间控制
const timeInterval = ref('10')
const togglePanel = () => {
isPanelOpen.value = !isPanelOpen.value
}
// 格式化时间为 HH:MM:SS 格式
const formatTime = (date) => {
const hours = date.getHours().toString().padStart(2, '0')
const minutes = date.getMinutes().toString().padStart(2, '0')
const seconds = date.getSeconds().toString().padStart(2, '0')
return `${hours}:${minutes}:${seconds}`
}
// 初始化图表
const initChart = () => {
if (chartInstance) {
chartInstance.dispose()
}
// 初始化图表数据
initChartData()
chartInstance = echarts.init(chartRef.value)
// updateChart()
// 启动定时更新
startRealTimeUpdates()
}
// 初始化图表数据
const initChartData = () => {
const now = new Date()
chartData.xData = []
chartData.seriesData = []
// 创建初始数据点，从5分钟前开始
for (let i = 300; i >= 0; i--) {
const time = new Date(now.getTime() - i * 1000)
chartData.xData.push(formatTime(time))
chartData.seriesData.push(generateRandomValue())
}
}
// 生成一个介于 20-300 之间的随机值，模拟实时数据
const generateRandomValue = () => {
// 有10%的概率生成峰值
if (Math.random() < 0.1) {
return Math.floor(Math.random() * 200) + 200 // 200-400之间的峰值
}
return Math.floor(Math.random() * 130) + 20 // 20-150之间的基础值
}
// 更新图表
const updateChart = () => {
if (chartInstance) {
chartInstance.setOption(getBagMonitoringChartOption(chartData.xData, chartData.seriesData))
}
}
// 启动实时更新
const startRealTimeUpdates = () => {
if (updateTimer) {
clearInterval(updateTimer)
}
updateTimer = setInterval(() => {
// 添加新数据点
const now = new Date()
chartData.xData.push(formatTime(now))
chartData.seriesData.push(generateRandomValue())
// 移除最旧的数据点以保持固定长度
if (chartData.xData.length > 31) { // 保持30秒的数据
chartData.xData.shift()
chartData.seriesData.shift()
}
// 更新图表
updateChart()
updateDataPanels()
}, 1000)
isRealTimeMode = true
}
// 停止实时更新
const stopRealTimeUpdates = () => {
if (updateTimer) {
clearInterval(updateTimer)
updateTimer = null
}
isRealTimeMode = false
}
// 向前导航（查看更早的数据）
const navigateBackward = () => {
// 关闭实时更新
stopRealTimeUpdates()
// 获取时间间隔（分钟）
const interval = parseInt(timeInterval.value) || 10
const intervalMs = interval * 60 * 1000
// 如果是第一次点击，以当前最后一条数据的时间为参考
if (lastTimePoint === null && chartData.xData.length > 0) {
const lastTimeString = chartData.xData[chartData.xData.length - 1]
const [hours, minutes, seconds] = lastTimeString.split(':').map(Number)
const now = new Date()
lastTimePoint = new Date(now.getFullYear(), now.getMonth(), now.getDate(), hours, minutes, seconds)
} else if (lastTimePoint === null) {
// 如果没有数据，使用当前时间
lastTimePoint = new Date()
}
// 计算新的时间范围
const endTime = new Date(lastTimePoint.getTime() - intervalMs)
lastTimePoint = endTime
// 重新生成数据
generateHistoricalData(endTime, interval)
}
// 向后导航（查看更近的数据）
const navigateForward = () => {
// 关闭实时更新
stopRealTimeUpdates()
// 获取时间间隔（分钟）
const interval = parseInt(timeInterval.value) || 10
const intervalMs = interval * 60 * 1000
// 如果是第一次点击，以当前最后一条数据的时间为参考
if (lastTimePoint === null && chartData.xData.length > 0) {
const lastTimeString = chartData.xData[chartData.xData.length - 1]
const [hours, minutes, seconds] = lastTimeString.split(':').map(Number)
const now = new Date()
lastTimePoint = new Date(now.getFullYear(), now.getMonth(), now.getDate(), hours, minutes, seconds)
} else if (lastTimePoint === null) {
// 如果没有数据，使用当前时间
lastTimePoint = new Date()
}
// 计算新的时间范围
const endTime = new Date(lastTimePoint.getTime() + intervalMs)
// // 如果新的结束时间超过当前时间，则切换回实时模式
const now = new Date()
if (endTime > now) {
lastTimePoint = null
// startRealTimeUpdates()
return
}
lastTimePoint = endTime
// 重新生成数据
generateHistoricalData(endTime, interval)
}
const reset = () => {
// 清空现有数据
chartData.xData = []
chartData.seriesData = []
lastTimePoint = null
// 重新生成当前时间往前300秒的数据
const now = new Date()
generateHistoricalData(now, 5)
// 开启实时更新
startRealTimeUpdate()
}
// 开启实时更新（重置用）
const startRealTimeUpdate = () => {
// 确保之前的定时器已清除
stopRealTimeUpdates()
// 初始化实时模式标志
isRealTimeMode = true
// 启动定时更新
updateTimer = setInterval(() => {
// 添加新数据点
const now = new Date()
chartData.xData.push(formatTime(now))
chartData.seriesData.push(generateRandomValue())
// 移除最旧的数据点以保持固定长度
if (chartData.xData.length > 31) { // 保持30秒的数据
chartData.xData.shift()
chartData.seriesData.shift()
}
// 更新图表
updateChart()
updateDataPanels()
}, 1000)
}
// 生成历史数据
const generateHistoricalData = (endTime, intervalMinutes) => {
// 清空现有数据
chartData.xData = []
chartData.seriesData = []
// 计算开始时间（结束时间减去间隔）
const startTime = new Date(endTime.getTime() - intervalMinutes * 60 * 1000)
// 生成数据点（每秒一个）
for (let time = new Date(startTime); time <= endTime; time = new Date(time.getTime() + 1000)) {
chartData.xData.push(formatTime(time))
chartData.seriesData.push(generateRandomValue())
}
// 更新图表
updateChart()
}
// 更新数据面板
const updateDataPanels = () => {
// 随机更新当前数据面板的实时值
currentData.realValue = (Math.random() * 30 + 10).toFixed(2) + ','
// 更新时间显示
const now = new Date()
currentData.time = Math.floor((now.getTime() / 1000) % 1000).toString()
// 每10秒更新一次次要数据面板
if (now.getSeconds() % 1 === 0) {
secondaryData.time = Math.floor((now.getTime() / 1000) % 1000).toString()
secondaryData.valleyValue = Math.floor(Math.random() * 10).toString()
}
}
// 监听窗口大小变化，调整图表大小
const handleResize = () => {
if (chartInstance) {
chartInstance.resize()
}
}
onMounted(() => {
initChart()
window.addEventListener('resize', handleResize)
})
onBeforeUnmount(() => {
window.removeEventListener('resize', handleResize)
// 清除定时器
if (updateTimer) {
clearInterval(updateTimer)
updateTimer = null
}
// 销毁图表实例
if (chartInstance) {
chartInstance.dispose()
chartInstance = null
}
})
</script>
<style scoped lang="scss">
.bag-monitoring-container {
width: 100%;
height: calc(100% - 14px);
box-sizing: border-box;
overflow-x: hidden;
.header {
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10px;
.select-container {
position: absolute;
left: 0;
top: 0;
width: 400px;
display: flex;
align-items: center;
z-index: 99;
span {
display: block;
width: 110px;
margin-right: 10px;
}
.device-number {
background: #fcf0c2;
padding: 2px 8px;
margin-left: 10px;
border-radius: 4px;
}
}
.title {
font-size: 18px;
font-weight: bold;
color: #409EFF;
}
}
.chart-container {
width: 100%;
height: calc(100% - 350px);
background-color: #fff;
border-radius: 4px;
display: flex;
flex-direction: column;
.chart-wrapper {
flex: 1;
width: 100%;
}
.data-panel {
position: absolute;
top: 80px;
right: 25px;
width: 320px;
z-index: 10;
transition: transform 0.3s ease-in-out;
&.collapsed {
transform: translateX(345px);
}
.panel-toggle {
position: absolute;
width: 25px;
height: 30px;
background: #fff;
top: 1px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: 4px;
}
.collapsed-icon {
left: -23px;
}
.expanded-icon {
right: -23px;
}
.data-box {
padding: 10px;
background-color: rgba(255, 255, 255, 0.9);
border-radius: 4px;
border: 1px solid #ebeef5;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
margin-bottom: 10px;
.data-item {
display: flex;
justify-content: space-between;
margin-bottom: 5px;
font-size: 14px;
div {
flex: 1;
}
}
}
.second-box {
font-size: 12px;
}
}
}
.data-table {
background-color: #fff;
border-radius: 4px;
padding: 10px 0;
box-sizing: border-box;
table {
width: 100%;
border-collapse: collapse;
th, td {
border: 1px solid #EBEEF5;
text-align: center;
padding: 8px;
font-size: 14px;
}
th {
background-color: #F5F7FA;
color: #606266;
}
.error {
color: #F56C6C;
}
.highlight {
background-color: #FCF8E3;
position: relative;
&::after {
content: "";
position: absolute;
width: 16px;
height: 16px;
background-color: #E6A23C;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
}
}
.time-controls {
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: flex-end;
.time-label, .time-unit {
margin: 0 5px;
}
.time-input {
width: 60px;
}
}
}
}
</style>
\ No newline at end of file
src/views/dustOverview/components/addDustCollectorDialog.vue 0 → 100644
View file @ 6dd78db8
<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 @ 6dd78db8
<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 @ 6dd78db8
<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 @ 6dd78db8
......@@ -60,7 +60,7 @@
<el-button type="primary" class="search-btn" @click="onSubmit"
>查询</el-button
>
<el-button type="success" class="add-btn" @click="onSubmit"
<el-button type="success" class="add-btn" @click="handleAddDustCollector"
>新增</el-button
>
</el-form-item>
......@@ -128,168 +128,36 @@
</div>
</div>
<!-- 仓室数量设置弹窗 -->
<el-dialog
<!-- 使用新的仓室数量设置弹窗组件 -->
<RoomSettingDialog
v-model="roomSettingVisible"
title="仓室数量设置"
width="500px"
:close-on-click-modal="false"
:close-on-press-escape="false"
>
<el-form :model="roomForm" label-width="120px">
<el-form-item label="仓室数量">
<!-- <span class="readonly-value">{{ roomForm.totalRooms }}</span> -->
<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>
:total-rooms="currentEditingRow?.healthScore || 0"
:initial-distribution="currentEditingRow?.status || []"
@confirm="handleRoomSettingConfirm"
/>
<template #footer>
<span class="dialog-footer">
<el-button @click="roomSettingVisible = false">取消</el-button>
<el-button type="primary" @click="handleRoomSettingConfirm">
确认
</el-button>
</span>
</template>
</el-dialog>
<!-- 电磁阀数量设置弹窗 -->
<el-dialog
<!-- 使用新的电磁阀数量设置弹窗组件 -->
<ValveSettingDialog
v-model="valveSettingVisible"
title="电磁阀数量设置"
width="800px"
:close-on-click-modal="false"
:close-on-press-escape="false"
>
<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">
<el-option
v-for="i in roomForm.rows"
:key="i"
:label="`${i}`"
:value="i"
/>
</el-select>
</div>
<div class="input-group">
<span>电磁阀分布数量：</span>
<el-input-number
v-model="valveForm.valveCount"
:min="1"
controls-position="right"
style="width: 120px"
/>
</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>
<!-- 分布表格 -->
<div class="distribution-table">
<div class="table-title">仓室脉冲阀数量分布</div>
<div class="valve-distribution-grid">
<div class="valve-row">
<div
v-for="(cell, colIndex) in currentEditingRow?.status"
:key="colIndex"
class="valve-cell"
>
<div class="cell-index">{{ cell.index }}仓</div>
<div class="cell-value">
{{ currentEditingRow.status[colIndex].count }}
</div>
</div>
</div>
</div>
</div>
<template #footer>
<span class="dialog-footer">
<el-button @click="valveSettingVisible = false">取消</el-button>
<el-button type="primary" @click="handleValveSettingConfirm">
保存
</el-button>
</span>
</template>
</el-dialog>
:total-valves="valveForm.total"
:status-data="currentEditingRow?.status || []"
@confirm="handleValveSettingConfirm"
/>
<!-- 使用新增除尘器弹窗组件 -->
<AddDustCollectorDialog
v-model="isAddDustCollectorVisible"
@save="handleSaveDustCollector"
/>
</div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount, computed } from "vue";
import CommonTable from "@/components/commonTable/index.vue";
import RoomSettingDialog from "./components/roomSettingDialog.vue";
import ValveSettingDialog from "./components/valveSettingDialog.vue";
import AddDustCollectorDialog from "./components/addDustCollectorDialog.vue";
const formInline = ref({
deviceName: "",
......@@ -614,135 +482,121 @@ const onSubmit = () => {
// 仓室设置相关
const roomSettingVisible = ref(false);
const roomForm = ref({
totalRooms: 0,
rows: 0,
});
const currentEditingRow = ref(null);
// 分布数据
const distributionData = ref([]);
// 计算分布差异
const distributionDiff = computed(() => {
const total = distributionData.value.reduce(
(sum, item) => sum + item.count,
0
);
return total - roomForm.value.totalRooms;
// 电磁阀设置相关
const valveSettingVisible = ref(false);
const valveForm = ref({
total: 120,
});
// 处理行数变化
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) => {
const isLast = index === value - 1;
const count = isLast
? baseValue + remainder // 最后一项加上余数
: baseValue;
return {
row: `第${index + 1}排`,
count,
};
});
};
// 处理分布数量变化
const handleDistributionChange = () => {
// 移除自动更新总数的逻辑，保持总数不变
// const total = distributionData.value.reduce(
// (sum, item) => sum + item.count,
// 0
// );
// roomForm.value.totalRooms = total;
};
// 新增除尘器相关
const isAddDustCollectorVisible = ref(false);
// 修改打开弹窗的处理函数
const handleHealthScoreClick = (row) => {
currentEditingRow.value = row;
console.log(currentEditingRow.value.status);
roomForm.value.totalRooms = row.healthScore;
roomForm.value.rows = row.status.length;
// 初始化分布数据
distributionData.value = row.status.map((item, index) => {
return {
row: `第${index + 1}排`,
count: item.length,
};
});
currentEditingRow.value = JSON.parse(JSON.stringify(row));
roomSettingVisible.value = true;
};
// 确认设置
const handleRoomSettingConfirm = () => {
const handleRoomSettingConfirm = (distributionData) => {
if (currentEditingRow.value) {
currentEditingRow.value.healthScore = roomForm.value.totalRooms;
// 这里可以添加更新状态矩阵的逻辑
// 创建新的状态矩阵
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; // 总仓室数
}
roomSettingVisible.value = false;
};
// 电磁阀设置相关
const valveSettingVisible = ref(false);
const valveForm = ref({
total: 120,
roomNo: 1,
valveCount: 5,
distribution: 30,
});
// 点击电磁阀数量时打开弹窗
const handleHealth2ScoreClick = (row) => {
// 创建一个扁平化的状态数组用于电磁阀设置
currentEditingRow.value = JSON.parse(JSON.stringify(row));
currentEditingRow.value.status = currentEditingRow.value.status.flat();
const flattenedStatus = row.status.flat().map(item => ({...item}));
currentEditingRow.value.status = flattenedStatus;
valveForm.value.total = row.health2Score;
valveSettingVisible.value = true;
};
// 平均分布生成
const handleAverageDistribute = () => {
if (!currentEditingRow.value?.status) return;
const status = currentEditingRow.value.status;
const total = Number(valveForm.value.total) || 0;
// 计算总仓室数
const totalRooms = status.reduce((sum, row) => sum + row.length, 0);
if (totalRooms === 0 || total === 0) return;
// 计算基础平均值（向下取整）和余数
const baseValue = Math.floor(total / totalRooms);
const remainder = total % totalRooms;
// 先将所有仓室设置为基础值
status.forEach((row, rowIndex) => {
row.forEach((_, colIndex) => {
currentEditingRow.value.status[rowIndex][colIndex] = baseValue;
});
});
// 如果有余数，将其加到最后一个仓室
if (remainder > 0) {
const lastRow = status.length - 1;
const lastCol = status[lastRow].length - 1;
currentEditingRow.value.status[lastRow][lastCol] += remainder;
// 确认电磁阀设置
const handleValveSettingConfirm = (updatedStatusData) => {
if (currentEditingRow.value && updatedStatusData) {
// 更新总数
const originalRow = tableData.find(item => item === currentEditingRow.value);
if (originalRow) {
originalRow.health2Score = 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);
}
});
});
}
}
valveSettingVisible.value = false;
};
// 确认设置
const handleValveSettingConfirm = () => {
if (currentEditingRow.value) {
currentEditingRow.value.health2Score = valveForm.value.total;
}
valveSettingVisible.value = false;
// 打开新增除尘器弹窗
const handleAddDustCollector = () => {
isAddDustCollectorVisible.value = true;
};
// 保存新增除尘器
const handleSaveDustCollector = (data) => {
console.log("保存新增除尘器数据:", data);
// 添加到表格数据中
tableData.push({
...data,
alarmCount: "100%", // 设置默认健康度
location: "", // 可以根据需要设置默认位置
});
// 这里可以调用API进行保存
// await api.addDustCollector(data);
// 关闭弹窗
isAddDustCollectorVisible.value = false;
};
onMounted(async () => {});
......
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