feat/联动管理页面，平面图效果优化
This commit is contained in:
季万俊
parent
6084d9832f
commit
1f77b00c58
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1760607440762" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9824" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M737.28 506.42944c68.28032 109.24032 102.4 183.13216 102.4 221.67552 0 58.5728-45.8752 106.00448-102.4 106.00448S634.88 786.67776 634.88 728.10496c0-38.5024 34.11968-112.4352 102.4-221.67552z m45.75232-312.60672a102.4 102.4 0 0 1 0 144.83456L471.04 650.69056a143.36 143.36 0 1 1-143.36-144.26112l-2.12992 0.04096 312.68864-312.64768a102.4 102.4 0 0 1 144.7936 0zM737.28 634.88c-13.63968 42.76224-20.48 62.42304-20.48 76.75904 0 21.504 9.17504 38.912 20.48 38.912s20.48-17.408 20.48-38.912c0-14.336-6.84032-33.9968-20.48-76.75904z m-10.32192-383.71328a20.48 20.48 0 0 0-28.95872 0l-343.40864 343.36768a61.44 61.44 0 1 0 28.75392 29.20448l343.61344-343.6544a20.48 20.48 0 0 0 0-28.91776z" fill="#444444" p-id="9825"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1760607371164" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5823" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 981.333333c259.072-0.341333 468.992-210.261333 469.333333-469.333333-0.341333-259.072-210.261333-468.992-469.333333-469.333333-259.072 0.341333-468.992 210.261333-469.333333 469.333333 0.341333 259.072 210.261333 468.992 469.333333 469.333333z m0 42.666667C229.354667 1023.68 0.32 794.645333 0 512 0.32 229.354667 229.354667 0.32 512 0c282.645333 0.32 511.68 229.354667 512 512-0.32 282.645333-229.354667 511.68-512 512z" fill="#333333" p-id="5824"></path><path d="M325.333333 325.610667a168.32 168.32 0 0 0 168.256 168.32h25.941334V157.376h-25.941334a168.32 168.32 0 0 0-168.256 168.256z m96.32 454.186666a168.32 168.32 0 0 0 61.632-229.930666l-12.949333-22.378667-291.626667 168.256 12.928 22.442667a168.32 168.32 0 0 0 229.952 61.610666h0.064z m349.376-318.677333a168.32 168.32 0 0 0-229.866666 61.632l-12.928 22.421333 291.477333 168.32 12.928-22.421333a168.32 168.32 0 0 0-61.610667-229.952z" fill="#333333" p-id="5825"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1760607420456" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8784" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M888.207 759.168l-328.02-550.935a55.244 55.244 0 0 0-75.975-20.727 56 56 0 0 0-20.44 20.727L135.457 759.168c-15.333 27.166-6.051 61.807 20.755 77.352a55.342 55.342 0 0 0 27.671 7.5h656.408c42.568-0.514 69.7-47.269 48-84.847h-0.084z m-376.36 20.769c-26.236 0.007-47.507-21.54-47.514-48.116s21.238-48.158 47.467-48.165h0.047c26.223 0.007 47.481 21.575 47.467 48.165-0.011 26.562-21.262 48.095-47.467 48.116z m48.848-181.128c-1.032 27.368-23.757 48.706-50.751 47.657-25.553-0.986-46.046-21.755-47.018-47.657V396.981c1.032-27.361 23.75-48.706 50.758-47.657 25.539 0.986 46.032 21.755 47.011 47.657v201.828z" fill="#DADADA" p-id="8785"></path></svg>
|
||||
|
After Width: | Height: | Size: 977 B |
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1760607389345" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6872" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M949.333333 170.666667c-17.066667 0-32 14.933333-32 32v10.666666H512c-164.266667 0-298.666667 134.4-298.666667 298.666667 0 38.4 6.4 72.533333 19.2 106.666667H106.666667v-10.666667c0-17.066667-14.933333-32-32-32S42.666667 590.933333 42.666667 608v213.333333c0 17.066667 14.933333 32 32 32S106.666667 838.4 106.666667 821.333333V810.666667h405.333333c164.266667 0 298.666667-134.4 298.666667-298.666667 0-38.4-6.4-72.533333-19.2-106.666667H917.333333v10.666667c0 17.066667 14.933333 32 32 32s32-14.933333 32-32v-213.333333c0-17.066667-14.933333-32-32-32zM512 682.666667c-93.866667 0-170.666667-76.8-170.666667-170.666667s76.8-170.666667 170.666667-170.666667 170.666667 76.8 170.666667 170.666667-76.8 170.666667-170.666667 170.666667z" p-id="6873"></path><path d="M608 497.066667l17.066667-17.066667c6.4-6.4 6.4-17.066667 0-23.466667-6.4-6.4-17.066667-6.4-23.466667 0l-40.533333 40.533334h-32v-32l40.533333-40.533334c6.4-6.4 6.4-17.066667 0-23.466666s-17.066667-6.4-23.466667 0l-17.066666 17.066666v-14.933333c0-8.533333-8.533333-17.066667-17.066667-17.066667s-17.066667 8.533333-17.066667 17.066667v14.933333l-17.066666-17.066666c-6.4-6.4-17.066667-6.4-23.466667 0-6.4 6.4-6.4 17.066667 0 23.466666l40.533333 40.533334v32h-32l-40.533333-40.533334c-6.4-6.4-17.066667-6.4-23.466667 0-6.4 6.4-6.4 17.066667 0 23.466667l17.066667 17.066667h-14.933333c-8.533333 0-17.066667 8.533333-17.066667 17.066666s8.533333 17.066667 17.066667 17.066667h14.933333l-17.066667 17.066667c-2.133333 2.133333-4.266667 8.533333-4.266666 12.8 0 8.533333 8.533333 17.066667 17.066666 17.066666 4.266667 0 8.533333-2.133333 12.8-4.266666l40.533334-40.533334h32v32l-40.533334 40.533334c-6.4 6.4-6.4 17.066667 0 23.466666 6.4 6.4 17.066667 6.4 23.466667 0l17.066667-17.066666v14.933333c0 8.533333 8.533333 17.066667 17.066666 17.066667s17.066667-8.533333 17.066667-17.066667v-14.933333l17.066667 17.066666c4.266667 4.266667 8.533333 4.266667 12.8 4.266667 4.266667 0 8.533333-2.133333 12.8-4.266667 6.4-6.4 6.4-17.066667 0-23.466666L533.333333 565.333333V533.333333h32l40.533334 40.533334c4.266667 4.266667 8.533333 4.266667 12.8 4.266666 4.266667 0 8.533333-2.133333 12.8-4.266666 6.4-6.4 6.4-17.066667 0-23.466667l-17.066667-17.066667h14.933333c8.533333 0 17.066667-8.533333 17.066667-17.066666s-8.533333-17.066667-17.066667-17.066667h-21.333333z" p-id="6874"></path></svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
|
|
@ -76,8 +76,8 @@ export const constantRoutes = [
|
|||
path: 'index',
|
||||
component: () => import('@/views/index'),
|
||||
name: 'Index',
|
||||
meta: { title: '工作台', icon: 'index', affix: true }
|
||||
// meta: { title: '首页', icon: '@/assets/treeIcons/index.png', affix: true }
|
||||
meta: { title: '工作台', icon: 'index' }
|
||||
// meta: { title: '首页', icon: '@/assets/treeIcons/index.png', affix: true } affix 是否常驻
|
||||
},
|
||||
]
|
||||
},
|
||||
|
|
@ -90,7 +90,7 @@ export const constantRoutes = [
|
|||
path: 'plan',
|
||||
component: () => import('@/views/plan'),
|
||||
name: 'Plan',
|
||||
meta: { title: '平面图', icon: 'plan', affix: true }
|
||||
meta: { title: '平面图', icon: 'plan' }
|
||||
},
|
||||
|
||||
]
|
||||
|
|
@ -234,6 +234,71 @@ export const constantRoutes = [
|
|||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "linkConfig",
|
||||
alwaysShow: true,
|
||||
component: Layout,
|
||||
hidden: false,
|
||||
name: "linkConfig",
|
||||
path: "/linkConfig",
|
||||
redirect: "noRedirect",
|
||||
meta: {
|
||||
icon: "link",
|
||||
link: null,
|
||||
noCache: false,
|
||||
title: "联动配置管理",
|
||||
},
|
||||
children: [
|
||||
{
|
||||
component: () => import('@/views/linkConfig/alarmConfig'),
|
||||
hidden: false,
|
||||
name: "alarmConfig",
|
||||
path: "alarmConfig",
|
||||
meta: {
|
||||
icon: "gjdj",
|
||||
link: null,
|
||||
noCache: false,
|
||||
title: "报警等级配置",
|
||||
},
|
||||
},
|
||||
{
|
||||
component: () => import('@/views/linkConfig/fanLinkConfig'),
|
||||
hidden: false,
|
||||
name: "fanLinkConfig",
|
||||
path: "fanLinkConfig",
|
||||
meta: {
|
||||
icon: "fan",
|
||||
link: null,
|
||||
noCache: false,
|
||||
title: "风机联动阈值配置",
|
||||
},
|
||||
},
|
||||
{
|
||||
component: () => import('@/views/linkConfig/pumpLinkConfig'),
|
||||
hidden: false,
|
||||
name: "pumpLinkConfig",
|
||||
path: "pumpLinkConfig",
|
||||
meta: {
|
||||
icon: "pump",
|
||||
link: null,
|
||||
noCache: false,
|
||||
title: "水泵联动阈值配置",
|
||||
},
|
||||
},
|
||||
{
|
||||
component: () => import('@/views/linkConfig/sensorConfig'),
|
||||
hidden: false,
|
||||
name: "sensorConfig",
|
||||
path: "sensorConfig",
|
||||
meta: {
|
||||
icon: "cgq",
|
||||
link: null,
|
||||
noCache: false,
|
||||
title: "传感器报警阈值",
|
||||
},
|
||||
},
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
name: "Equipment",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,222 @@
|
|||
<template>
|
||||
<div class="alarm-config-page">
|
||||
<el-card shadow="never" class="mb-16">
|
||||
<template #header>
|
||||
<div class="card-header">报警等级配置</div>
|
||||
</template>
|
||||
|
||||
<el-form :model="formLevel" label-width="100px" class="w-100p">
|
||||
<el-table :data="alarmTypes" border style="width: 100%">
|
||||
<el-table-column prop="label" label="报警类型" width="180" />
|
||||
<el-table-column label="报警等级">
|
||||
<template #default="{ row }">
|
||||
<el-select
|
||||
v-model="formLevel[row.value]"
|
||||
placeholder="请选择等级"
|
||||
style="width: 200px"
|
||||
>
|
||||
<el-option
|
||||
v-for="lvl in levelOptions"
|
||||
:key="lvl.value"
|
||||
:label="lvl.label"
|
||||
:value="lvl.value"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="mt-16">
|
||||
<el-button
|
||||
type="primary"
|
||||
:disabled="!isLevelValid"
|
||||
@click="saveLevels"
|
||||
>保存等级配置</el-button
|
||||
>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">报警消弭时间配置</div>
|
||||
</template>
|
||||
|
||||
<el-form :model="formElimination" label-width="180px" class="w-100p">
|
||||
<el-form-item label="一级消弭时间（分钟）">
|
||||
<el-input-number
|
||||
v-model="formElimination.times.level1"
|
||||
:min="1"
|
||||
:max="1440"
|
||||
:step="1"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="二级消弭时间（分钟）">
|
||||
<el-input-number
|
||||
v-model="formElimination.times.level2"
|
||||
:min="1"
|
||||
:max="1440"
|
||||
:step="1"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="三级消弭时间（分钟）">
|
||||
<el-input-number
|
||||
v-model="formElimination.times.level3"
|
||||
:min="1"
|
||||
:max="1440"
|
||||
:step="1"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<div class="mt-16">
|
||||
<el-button
|
||||
type="primary"
|
||||
:disabled="!isTimesValid"
|
||||
@click="saveEliminationTimes"
|
||||
>保存时间配置</el-button
|
||||
>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, computed, onMounted, ref } from "vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
// import { getSensorConfigs } from "@/api/index";
|
||||
|
||||
const alarmTypes = [
|
||||
{ label: "环境报警", value: "huanjing" },
|
||||
{ label: "入侵报警", value: "ruqin" },
|
||||
{ label: "设备报警", value: "shebei" },
|
||||
{ label: "消防报警", value: "xiaofang" },
|
||||
];
|
||||
|
||||
const levelOptions = [
|
||||
{ label: "一级", value: "一级" },
|
||||
{ label: "二级", value: "二级" },
|
||||
{ label: "三级", value: "三级" },
|
||||
];
|
||||
|
||||
// 等级配置（按类型）
|
||||
const formLevel = ref({});
|
||||
|
||||
// 消弭时间配置（按等级）
|
||||
const formElimination = reactive({
|
||||
times: {},
|
||||
});
|
||||
|
||||
const isLevelValid = computed(() => {
|
||||
return alarmTypes.every((t) =>
|
||||
["一级", "二级", "三级"].includes(formLevel.value[t.value])
|
||||
);
|
||||
});
|
||||
|
||||
const isTimesValid = computed(() => {
|
||||
const { level1, level2, level3 } = formElimination.times;
|
||||
|
||||
return level1 && level2 && level3;
|
||||
});
|
||||
|
||||
const saveLevels = async () => {
|
||||
let params = {
|
||||
config: "alarmlevel",
|
||||
option: "editlevel",
|
||||
};
|
||||
let dataP = {
|
||||
id: formLevel.value.id,
|
||||
data: JSON.stringify({
|
||||
huanjing: formLevel.value.huanjing,
|
||||
ruqin: formLevel.value.ruqin,
|
||||
shebei: formLevel.value.shebei,
|
||||
xiaofang: formLevel.value.xiaofang,
|
||||
}),
|
||||
};
|
||||
|
||||
let res = await getSensorConfigs(params, dataP);
|
||||
if (res && res.code == 0) {
|
||||
ElMessage.success("等级配置已保存");
|
||||
} else {
|
||||
ElMessage.error("等级配置失败");
|
||||
}
|
||||
};
|
||||
|
||||
const saveEliminationTimes = async () => {
|
||||
let params = {
|
||||
config: "alarmlevel",
|
||||
option: "edittime",
|
||||
};
|
||||
let dataP = {
|
||||
id: formElimination.times.id,
|
||||
data: JSON.stringify({
|
||||
level1: formElimination.times.level1,
|
||||
level2: formElimination.times.level2,
|
||||
level3: formElimination.times.level3,
|
||||
}),
|
||||
};
|
||||
|
||||
let res = await getSensorConfigs(params, dataP);
|
||||
if (res && res.code == 0) {
|
||||
ElMessage.success("等级配置已保存");
|
||||
} else {
|
||||
ElMessage.error("等级配置失败");
|
||||
}
|
||||
}
|
||||
|
||||
const getAlarmLevel = async () => {
|
||||
let params = {
|
||||
config: "alarmlevel",
|
||||
option: "querylevel",
|
||||
};
|
||||
let res = await getSensorConfigs(params);
|
||||
if (res && res.code == 0) {
|
||||
formLevel.value = res.data;
|
||||
}
|
||||
};
|
||||
|
||||
const getAlarmTimes = async () => {
|
||||
let params = {
|
||||
config: "alarmlevel",
|
||||
option: "querytime",
|
||||
};
|
||||
let res = await getSensorConfigs(params);
|
||||
if (res && res.code == 0) {
|
||||
formElimination.times = res.data;
|
||||
if (formElimination.times.level1) {
|
||||
formElimination.times.level1 = Number(formElimination.times.level1);
|
||||
}
|
||||
if (formElimination.times.level2) {
|
||||
formElimination.times.level2 = Number(formElimination.times.level2);
|
||||
}
|
||||
if (formElimination.times.level3) {
|
||||
formElimination.times.level3 = Number(formElimination.times.level3);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
// getAlarmLevel();
|
||||
// getAlarmTimes();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.alarm-config-page {
|
||||
padding: 16px;
|
||||
}
|
||||
.mb-16 {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.mt-16 {
|
||||
margin-top: 16px;
|
||||
}
|
||||
.w-100p {
|
||||
width: 100%;
|
||||
}
|
||||
.card-header {
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,830 @@
|
|||
<template>
|
||||
<div class="pump-threshold-config-page">
|
||||
<div class="page-header">
|
||||
<div class="page-header-left">
|
||||
<h2>水泵联动液位阈值配置</h2>
|
||||
<p class="page-description">
|
||||
配置水泵联动受液位影响的阈值配置,
|
||||
<span class="value-start">绿色</span>为启动水泵阈值,
|
||||
<span class="value-stop">橙色</span>为停止水泵阈值.
|
||||
</p>
|
||||
</div>
|
||||
<div class="page-header-actions">
|
||||
<el-button type="primary" @click="openBatchDialog">批量配置</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分区卡片展示 -->
|
||||
<div v-loading="loading" class="zones-grid">
|
||||
<el-card
|
||||
v-for="zone in zoneConfigs"
|
||||
:key="zone.id"
|
||||
class="zone-card"
|
||||
shadow="hover"
|
||||
@click="openConfigDialog(zone)"
|
||||
>
|
||||
<template #header>
|
||||
<div class="zone-card-header">
|
||||
<div class="zone-title">
|
||||
<el-tag type="success" size="large">
|
||||
{{ zone.name }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="zone-config-preview">
|
||||
<!-- 1分区特殊显示两个配置 -->
|
||||
<template v-if="zone.id === 1">
|
||||
<div class="config-item">
|
||||
<div class="config-label">
|
||||
<el-icon><Watermelon /></el-icon>
|
||||
<span>基于1分区液位</span>
|
||||
</div>
|
||||
<div class="config-values">
|
||||
<span class="value-start"
|
||||
>{{ zone.thresholds.self.start }}cm</span
|
||||
>
|
||||
<span class="value-separator">/</span>
|
||||
<span class="value-stop"
|
||||
>{{ zone.thresholds.self.stop }}cm</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="config-item">
|
||||
<div class="config-label">
|
||||
<el-icon><Connection /></el-icon>
|
||||
<span>基于2分区液位</span>
|
||||
</div>
|
||||
<div class="config-values">
|
||||
<span class="value-start"
|
||||
>{{ zone.thresholds.zone2.start }}cm</span
|
||||
>
|
||||
<span class="value-separator">/</span>
|
||||
<span class="value-stop"
|
||||
>{{ zone.thresholds.zone2.stop }}cm</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 其他分区正常显示 -->
|
||||
<template v-else>
|
||||
<div class="config-item">
|
||||
<div class="config-label">
|
||||
<el-icon><Watermelon /></el-icon>
|
||||
<span>液位高度</span>
|
||||
</div>
|
||||
<div class="config-values">
|
||||
<span class="value-start"
|
||||
>{{ zone.thresholds.self.start }}cm</span
|
||||
>
|
||||
<span class="value-separator">/</span>
|
||||
<span class="value-stop"
|
||||
>{{ zone.thresholds.self.stop }}cm</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="zone-card-footer">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click.stop="openConfigDialog(zone)"
|
||||
>
|
||||
配置设置
|
||||
</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 分区配置对话框 -->
|
||||
<el-dialog
|
||||
v-model="showConfigDialog"
|
||||
:title="`${currentZone?.name} - 液位阈值配置`"
|
||||
width="600px"
|
||||
top="50px"
|
||||
>
|
||||
<div class="config-dialog-content">
|
||||
<el-form :model="currentZone.thresholds" label-width="140px">
|
||||
<!-- 1分区特殊配置 -->
|
||||
<template v-if="currentZone.id === 1">
|
||||
<el-card class="config-section" shadow="never">
|
||||
<template #header>
|
||||
<div class="section-header">
|
||||
<el-icon><Watermelon /></el-icon>
|
||||
<span>基于1分区液位配置 (cm)</span>
|
||||
<el-tooltip
|
||||
content="启动水泵阈值应大于停止水泵阈值"
|
||||
placement="top"
|
||||
>
|
||||
<el-icon><QuestionFilled /></el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="启动水泵阈值">
|
||||
<el-input-number
|
||||
v-model="currentZone.thresholds.self.start"
|
||||
:min="0"
|
||||
:max="1000"
|
||||
:step="1"
|
||||
style="width: 100%"
|
||||
@change="validateSelfThreshold(currentZone)"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="停止水泵阈值">
|
||||
<el-input-number
|
||||
v-model="currentZone.thresholds.self.stop"
|
||||
:min="0"
|
||||
:max="1000"
|
||||
:step="1"
|
||||
style="width: 100%"
|
||||
@change="validateSelfThreshold(currentZone)"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div v-if="currentZone.errors.self" class="error-message">
|
||||
{{ currentZone.errors.self }}
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card class="config-section" shadow="never">
|
||||
<template #header>
|
||||
<div class="section-header">
|
||||
<el-icon><Connection /></el-icon>
|
||||
<span>基于2分区液位配置 (cm)</span>
|
||||
<el-tooltip
|
||||
content="启动水泵阈值应小于停止水泵阈值"
|
||||
placement="top"
|
||||
>
|
||||
<el-icon><QuestionFilled /></el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="启动水泵阈值">
|
||||
<el-input-number
|
||||
v-model="currentZone.thresholds.zone2.start"
|
||||
:min="0"
|
||||
:max="1000"
|
||||
:step="1"
|
||||
style="width: 100%"
|
||||
@change="validateZone2Threshold(currentZone)"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="停止水泵阈值">
|
||||
<el-input-number
|
||||
v-model="currentZone.thresholds.zone2.stop"
|
||||
:min="0"
|
||||
:max="1000"
|
||||
:step="1"
|
||||
style="width: 100%"
|
||||
@change="validateZone2Threshold(currentZone)"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div v-if="currentZone.errors.zone2" class="error-message">
|
||||
{{ currentZone.errors.zone2 }}
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<!-- 其他分区配置 -->
|
||||
<template v-else>
|
||||
<el-card class="config-section" shadow="never">
|
||||
<template #header>
|
||||
<div class="section-header">
|
||||
<el-icon><Watermelon /></el-icon>
|
||||
<span>液位配置 (cm)</span>
|
||||
<el-tooltip
|
||||
content="启动水泵阈值应大于停止水泵阈值"
|
||||
placement="top"
|
||||
>
|
||||
<el-icon><QuestionFilled /></el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="启动水泵阈值">
|
||||
<el-input-number
|
||||
v-model="currentZone.thresholds.self.start"
|
||||
:min="0"
|
||||
:max="1000"
|
||||
:step="1"
|
||||
style="width: 100%"
|
||||
@change="validateSelfThreshold(currentZone)"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="停止水泵阈值">
|
||||
<el-input-number
|
||||
v-model="currentZone.thresholds.self.stop"
|
||||
:min="0"
|
||||
:max="1000"
|
||||
:step="1"
|
||||
style="width: 100%"
|
||||
@change="validateSelfThreshold(currentZone)"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div v-if="currentZone.errors.self" class="error-message">
|
||||
{{ currentZone.errors.self }}
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="showConfigDialog = false">取消</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="saveCurrentZoneConfig"
|
||||
:disabled="!currentZone?.isValid"
|
||||
>
|
||||
保存配置
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 批量配置对话框 -->
|
||||
<el-dialog
|
||||
v-model="showBatchDialog"
|
||||
title="批量配置液位阈值"
|
||||
width="700px"
|
||||
top="20px"
|
||||
>
|
||||
<div class="config-dialog-content">
|
||||
<el-form :model="batchForm" label-width="140px">
|
||||
<!-- 分区选择 -->
|
||||
<el-form-item label="选择分区(多选)" class="sp-item">
|
||||
<el-select
|
||||
v-model="batchSelectedZones"
|
||||
multiple
|
||||
collapse-tags
|
||||
placeholder="请选择分区"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in zoneConfigs"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 液位配置 -->
|
||||
<el-card class="config-section" shadow="never">
|
||||
<template #header>
|
||||
<div class="section-header">
|
||||
<el-icon><Watermelon /></el-icon>
|
||||
<span>液位配置 (cm)</span>
|
||||
<el-tooltip
|
||||
content="启动水泵阈值应大于停止水泵阈值"
|
||||
placement="top"
|
||||
>
|
||||
<el-icon><QuestionFilled /></el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="启动水泵阈值">
|
||||
<el-input-number
|
||||
v-model="batchForm.self.start"
|
||||
:min="0"
|
||||
:max="1000"
|
||||
:step="1"
|
||||
style="width: 100%"
|
||||
@change="validateBatchThreshold"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="停止水泵阈值">
|
||||
<el-input-number
|
||||
v-model="batchForm.self.stop"
|
||||
:min="0"
|
||||
:max="1000"
|
||||
:step="1"
|
||||
style="width: 100%"
|
||||
@change="validateBatchThreshold"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div v-if="batchErrors.self" class="error-message">
|
||||
{{ batchErrors.self }}
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-divider />
|
||||
|
||||
<!-- 提示信息 -->
|
||||
<el-alert title="提示" type="info" :closable="false" show-icon>
|
||||
<template #default>
|
||||
<p>• 请至少选择一个分区进行配置</p>
|
||||
<p>• 启动水泵阈值应大于停止水泵阈值</p>
|
||||
<p>• 批量配置只会设置各分区基于自身液位的阈值</p>
|
||||
<p>• 1分区的基于2分区液位配置需要单独设置</p>
|
||||
</template>
|
||||
</el-alert>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="showBatchDialog = false">取消</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="applyBatchAndSave"
|
||||
:loading="loading"
|
||||
>
|
||||
应用配置并保存
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref, computed, onMounted } from "vue";
|
||||
// import { getSensorConfigs } from "@/api/index";
|
||||
import { ElMessage } from "element-plus";
|
||||
import {
|
||||
QuestionFilled,
|
||||
Watermelon,
|
||||
Connection,
|
||||
} from "@element-plus/icons-vue";
|
||||
|
||||
// 默认阈值配置
|
||||
const defaultThresholds = {
|
||||
self: { start: 0, stop: 0 }, // 基于自身液位的配置
|
||||
zone2: { start: 0, stop: 0 }, // 1分区特有的基于2分区液位的配置
|
||||
};
|
||||
|
||||
// 生成14个分区的配置
|
||||
const generateZoneConfigs = () => {
|
||||
return zones;
|
||||
};
|
||||
|
||||
// 响应式数据
|
||||
const zoneConfigs = ref([]);
|
||||
const showConfigDialog = ref(false);
|
||||
const currentZone = ref(null);
|
||||
const showBatchDialog = ref(false);
|
||||
const loading = ref(false);
|
||||
|
||||
// 批量配置相关
|
||||
const batchForm = reactive({
|
||||
self: { start: 0, stop: 0 },
|
||||
});
|
||||
const batchErrors = reactive({ self: "" });
|
||||
const batchSelectedZones = ref([]);
|
||||
|
||||
// 验证阈值逻辑
|
||||
const validateSelfThreshold = (zone) => {
|
||||
const threshold = zone.thresholds.self;
|
||||
let isValid = true;
|
||||
let errorMessage = "";
|
||||
|
||||
if (threshold.start < threshold.stop) {
|
||||
isValid = false;
|
||||
errorMessage = "启动阈值应大于停止阈值";
|
||||
}
|
||||
|
||||
// 更新验证状态
|
||||
updateZoneValidity(zone, "self", isValid, errorMessage);
|
||||
return isValid;
|
||||
};
|
||||
|
||||
const validateZone2Threshold = (zone) => {
|
||||
const threshold = zone.thresholds.zone2;
|
||||
let isValid = true;
|
||||
let errorMessage = "";
|
||||
|
||||
// 更新验证状态
|
||||
updateZoneValidity(zone, "zone2", isValid, errorMessage);
|
||||
return isValid;
|
||||
};
|
||||
|
||||
const updateZoneValidity = (zone, thresholdType, isValid, errorMessage) => {
|
||||
zone.errors[thresholdType] = errorMessage;
|
||||
|
||||
// 检查所有阈值配置是否都有效
|
||||
let overallValid = true;
|
||||
if (zone.id === 1) {
|
||||
// 1分区需要检查两个配置
|
||||
overallValid = !zone.errors.self && !zone.errors.zone2;
|
||||
} else {
|
||||
// 其他分区只检查自身配置
|
||||
overallValid = !zone.errors.self;
|
||||
}
|
||||
|
||||
zone.isValid = overallValid;
|
||||
};
|
||||
|
||||
// 验证批量配置阈值
|
||||
const validateBatchThreshold = () => {
|
||||
const threshold = batchForm.self;
|
||||
let isValid = true;
|
||||
let errorMessage = "";
|
||||
|
||||
if (threshold.start < threshold.stop) {
|
||||
isValid = false;
|
||||
errorMessage = "启动阈值应大于停止阈值";
|
||||
}
|
||||
|
||||
batchErrors.self = errorMessage;
|
||||
return isValid;
|
||||
};
|
||||
|
||||
// 打开配置对话框
|
||||
const openConfigDialog = (zone) => {
|
||||
currentZone.value = JSON.parse(JSON.stringify(zone));
|
||||
showConfigDialog.value = true;
|
||||
};
|
||||
|
||||
const openBatchDialog = () => {
|
||||
batchSelectedZones.value = [];
|
||||
batchForm.self = { start: 0, stop: 0 };
|
||||
batchErrors.self = "";
|
||||
showBatchDialog.value = true;
|
||||
};
|
||||
|
||||
// 应用批量配置并保存
|
||||
const applyBatchAndSave = async () => {
|
||||
if (batchSelectedZones.value.length === 0) {
|
||||
ElMessage.error("请至少选择一个分区");
|
||||
return;
|
||||
}
|
||||
|
||||
// 验证批量阈值
|
||||
if (!validateBatchThreshold()) {
|
||||
ElMessage.error("批量阈值设置不合理");
|
||||
return;
|
||||
}
|
||||
|
||||
// 检查是否有设置值
|
||||
if (batchForm.self.start === 0 && batchForm.self.stop === 0) {
|
||||
ElMessage.error("请至少设置启动或停止阈值");
|
||||
return;
|
||||
}
|
||||
|
||||
// 更新选中的分区配置
|
||||
batchSelectedZones.value.forEach((zoneId) => {
|
||||
const zone = zoneConfigs.value.find((z) => z.id === zoneId);
|
||||
if (zone) {
|
||||
// 只更新基于自身液位的配置
|
||||
zone.thresholds.self = { ...batchForm.self };
|
||||
// 重新验证
|
||||
validateSelfThreshold(zone);
|
||||
}
|
||||
});
|
||||
|
||||
// 模拟API调用
|
||||
loading.value = true;
|
||||
|
||||
console.log(batchSelectedZones.value.join(","), batchForm.self);
|
||||
|
||||
try {
|
||||
let params = {
|
||||
START_THRESHOLD: batchForm.self.start,
|
||||
STOP_THRESHOLD: batchForm.self.stop,
|
||||
};
|
||||
let res = await getSensorConfigs(
|
||||
{
|
||||
config: "pumprule",
|
||||
option: "batchedit",
|
||||
areaid: batchSelectedZones.value.join(","),
|
||||
},
|
||||
{ data: JSON.stringify(params) }
|
||||
);
|
||||
|
||||
if (res && res.code == 0) {
|
||||
ElMessage.success("批量配置保存成功");
|
||||
showBatchDialog.value = false;
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error("保存失败");
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 保存当前分区配置
|
||||
const saveCurrentZoneConfig = async () => {
|
||||
if (!currentZone.value || !currentZone.value.isValid) {
|
||||
ElMessage.error("配置有误，请检查阈值设置");
|
||||
return;
|
||||
}
|
||||
|
||||
// 验证所有阈值
|
||||
let hasError = false;
|
||||
if (currentZone.value.id === 1) {
|
||||
if (
|
||||
!validateSelfThreshold(currentZone.value) ||
|
||||
!validateZone2Threshold(currentZone.value)
|
||||
) {
|
||||
hasError = true;
|
||||
}
|
||||
} else {
|
||||
if (!validateSelfThreshold(currentZone.value)) {
|
||||
hasError = true;
|
||||
}
|
||||
}
|
||||
|
||||
if (hasError) {
|
||||
ElMessage.error("存在配置错误，请检查后重试");
|
||||
return;
|
||||
}
|
||||
|
||||
// 更新原始数据
|
||||
const originalZone = zoneConfigs.value.find(
|
||||
(z) => z.id === currentZone.value.id
|
||||
);
|
||||
if (originalZone) {
|
||||
originalZone.thresholds = JSON.parse(
|
||||
JSON.stringify(currentZone.value.thresholds)
|
||||
);
|
||||
originalZone.isValid = currentZone.value.isValid;
|
||||
originalZone.errors = { ...currentZone.value.errors };
|
||||
}
|
||||
|
||||
// 模拟API调用
|
||||
loading.value = true;
|
||||
|
||||
let params = {
|
||||
START_THRESHOLD: currentZone.value.thresholds.self.start,
|
||||
STOP_THRESHOLD: currentZone.value.thresholds.self.stop,
|
||||
SPECIAL_START: currentZone.value.thresholds.zone2.start,
|
||||
SPECIAL_STOP: currentZone.value.thresholds.zone2.stop,
|
||||
};
|
||||
|
||||
let res = await getSensorConfigs(
|
||||
{
|
||||
config: "pumprule",
|
||||
option: "edit",
|
||||
areaid: currentZone.value.id,
|
||||
},
|
||||
{ data: JSON.stringify(params) }
|
||||
);
|
||||
loading.value = false;
|
||||
|
||||
if (res && res.code == 0) {
|
||||
showConfigDialog.value = false;
|
||||
ElMessage({
|
||||
message: "保存配置成功",
|
||||
type: "success",
|
||||
duration: 2000,
|
||||
});
|
||||
} else {
|
||||
ElMessage({
|
||||
message: "保存配置失败",
|
||||
type: "error",
|
||||
duration: 2000,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const getConfig = async () => {
|
||||
// let res = await getSensorConfigs({
|
||||
// config: "pumprule",
|
||||
// option: "queryall",
|
||||
// });
|
||||
|
||||
// let configs = res.data || [];
|
||||
let configs = [];
|
||||
|
||||
const zones = [];
|
||||
for (let i = 1; i <= 14; i++) {
|
||||
let _areaConfig = configs.filter((d) => {
|
||||
return d.AreaId == i;
|
||||
});
|
||||
if (_areaConfig && _areaConfig[0]) {
|
||||
let area_config = {
|
||||
self: {
|
||||
start: _areaConfig[0].START_THRESHOLD,
|
||||
stop: _areaConfig[0].STOP_THRESHOLD,
|
||||
}, // 基于自身液位的配置
|
||||
zone2: {
|
||||
start: _areaConfig[0].SPECIAL_START,
|
||||
stop: _areaConfig[0].SPECIAL_STOP,
|
||||
}, // 1分区特有的基于2分区液位的配置
|
||||
};
|
||||
zones.push({
|
||||
id: i,
|
||||
name: `分区${i}`,
|
||||
thresholds: area_config,
|
||||
isValid: true,
|
||||
errors: {},
|
||||
});
|
||||
} else {
|
||||
zones.push({
|
||||
id: i,
|
||||
name: `分区${i}`,
|
||||
thresholds: JSON.parse(JSON.stringify(defaultThresholds)),
|
||||
isValid: true,
|
||||
errors: {},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
zoneConfigs.value = zones;
|
||||
};
|
||||
|
||||
// 初始化配置
|
||||
onMounted(() => {
|
||||
// 这里可以加载初始数据
|
||||
getConfig();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.pump-threshold-config-page {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
/* 分区网格布局 */
|
||||
.zones-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
grid-template-rows: repeat(3, 1fr);
|
||||
gap: 16px;
|
||||
margin-top: 20px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
/* 分区卡片样式 */
|
||||
.zone-card {
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
border: 2px solid transparent;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
border-radius: 12px;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.zone-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
|
||||
border-color: #409eff;
|
||||
}
|
||||
|
||||
.zone-card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 配置预览样式 */
|
||||
.zone-config-preview {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.config-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.config-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.config-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.config-values {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.value-start {
|
||||
color: #67c23a;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.value-separator {
|
||||
color: #909399;
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
.value-stop {
|
||||
color: #e6a23c;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.zone-card-footer {
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.config-section {
|
||||
margin-bottom: 20px;
|
||||
border: 1px solid #e4e7ed;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: #f56c6c;
|
||||
font-size: 12px;
|
||||
margin-top: 8px;
|
||||
padding: 4px 8px;
|
||||
background-color: #fef0f0;
|
||||
border-radius: 4px;
|
||||
border-left: 3px solid #f56c6c;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
::v-deep .el-card__body {
|
||||
padding: 12px;
|
||||
}
|
||||
::v-deep .el-card__header {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.page-header h2 {
|
||||
color: #303133;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
line-height: 30px;
|
||||
display: inline-block;
|
||||
}
|
||||
.page-header p {
|
||||
color: #000;
|
||||
align-items: end;
|
||||
line-height: 36px;
|
||||
margin: 0;
|
||||
}
|
||||
.page-header-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
height: 32px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
::v-deep .sp-item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
::v-deep .sp-item .el-form-item__label {
|
||||
text-align: left !important;
|
||||
width: 120px !important;
|
||||
justify-content: start !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,356 @@
|
|||
<template>
|
||||
<div class="sensor-threshold-config">
|
||||
<!-- 页面标题 -->
|
||||
<div class="page-header">
|
||||
<h2>传感器报警阈值配置</h2>
|
||||
<p class="page-description">配置传感器上下限报警阈值</p>
|
||||
</div>
|
||||
|
||||
<!-- 传感器列表 -->
|
||||
<div class="sensor-list">
|
||||
<el-card class="sensor-card" v-for="sensor in sensors" :key="sensor.id">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<div class="sensor-info">
|
||||
<h3>{{ sensor.name }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 阈值配置表单 -->
|
||||
<el-form
|
||||
:model="sensor"
|
||||
:rules="thresholdRules"
|
||||
ref="formRefs"
|
||||
label-width="100px"
|
||||
class="threshold-form"
|
||||
>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item :label="sensor.TypeId == 31 ? '上限阈值' : '限值一'" prop="upperLimit">
|
||||
<el-input-number
|
||||
v-model="sensor.upperLimit"
|
||||
:min="0"
|
||||
:max="1000"
|
||||
:precision="2"
|
||||
style="width: 100%"
|
||||
:placeholder="`请输入上限阈值${sensor.unit}`"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item :label="sensor.TypeId == 31 ? '下限阈值' : '限值二'" prop="lowerLimit">
|
||||
<el-input-number
|
||||
v-model="sensor.lowerLimit"
|
||||
:min="0"
|
||||
:max="1000"
|
||||
:precision="2"
|
||||
style="width: 100%"
|
||||
:placeholder="`请输入下限阈值${sensor.unit}`"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="saveThresholds(sensor)"
|
||||
:loading="saving"
|
||||
>
|
||||
保存配置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
// import { handlerData } from "@/api/index";
|
||||
|
||||
// 响应式数据
|
||||
const saving = ref(false);
|
||||
const formRefs = ref({});
|
||||
|
||||
// 阈值验证规则
|
||||
const thresholdRules = {
|
||||
upperLimit: [
|
||||
{ required: true, message: "请输入上限阈值", trigger: "blur" },
|
||||
{
|
||||
type: "number",
|
||||
min: 0,
|
||||
message: "上限阈值必须大于等于0",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
lowerLimit: [
|
||||
{ required: true, message: "请输入下限阈值", trigger: "blur" },
|
||||
{
|
||||
type: "number",
|
||||
min: 0,
|
||||
message: "下限阈值必须大于等于0",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
// 传感器数据
|
||||
const sensors = ref([
|
||||
{
|
||||
id: 0,
|
||||
TypeId: 26,
|
||||
name: "温度传感器",
|
||||
upperLimit: 0,
|
||||
lowerLimit: 0,
|
||||
unit: "℃",
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
TypeId: 30,
|
||||
name: "湿度传感器",
|
||||
upperLimit: 0,
|
||||
lowerLimit: 0,
|
||||
unit: "%",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
TypeId: 31,
|
||||
name: "氧气传感器",
|
||||
upperLimit: 0,
|
||||
lowerLimit: 0,
|
||||
unit: "%",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
TypeId: 32,
|
||||
name: "液位传感器",
|
||||
upperLimit: 0,
|
||||
lowerLimit: 0,
|
||||
unit: "cm",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
TypeId: 34,
|
||||
name: "硫化氢传感器",
|
||||
upperLimit: 0,
|
||||
lowerLimit: 0,
|
||||
unit: "",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
TypeId: 35,
|
||||
name: "甲烷传感器",
|
||||
upperLimit: 0,
|
||||
lowerLimit: 0,
|
||||
unit: "ppm",
|
||||
},
|
||||
]);
|
||||
|
||||
const getThresholds = async () => {
|
||||
let params = {
|
||||
action: "GetDeviceTypeLimitAll",
|
||||
};
|
||||
let res = await handlerData(params);
|
||||
if (res && res.data && res.data.length) {
|
||||
sensors.value.forEach((d) => {
|
||||
let _data = res.data.filter((c) => {
|
||||
return c.TypeId === d.TypeId;
|
||||
});
|
||||
d.upperLimit = Number(_data[0].UpperLimitValue);
|
||||
d.lowerLimit = Number(_data[0].LowerLimitValue);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 方法
|
||||
const saveThresholds = async (sensor) => {
|
||||
try {
|
||||
// 验证表单
|
||||
const formRef = formRefs.value[sensor.id];
|
||||
if (formRef) {
|
||||
await formRef.validate();
|
||||
}
|
||||
|
||||
// 验证阈值逻辑
|
||||
if (sensor.upperLimit <= sensor.lowerLimit) {
|
||||
ElMessage.error("上限阈值必须大于下限阈值");
|
||||
return;
|
||||
}
|
||||
|
||||
saving.value = true;
|
||||
|
||||
let params = {
|
||||
action: "UpdateDeviceTypeLimitValue",
|
||||
TypeId: sensor.TypeId,
|
||||
UpperLimitValue: sensor.upperLimit,
|
||||
LowerLimitValue: sensor.lowerLimit,
|
||||
};
|
||||
|
||||
let res = await handlerData(params);
|
||||
if (res && res.message == 'success') {
|
||||
ElMessage.success(`${sensor.name} 阈值配置保存成功`);
|
||||
} else {
|
||||
ElMessage.error("保存失败，请检查输入值");
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error("保存失败，请检查输入值");
|
||||
} finally {
|
||||
saving.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 生命周期
|
||||
onMounted(() => {
|
||||
// getThresholds();
|
||||
console.log("传感器阈值配置页面已加载");
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.sensor-threshold-config {
|
||||
padding: 20px;
|
||||
background-color: #f5f7fa;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.page-header h2 {
|
||||
color: #303133;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
.page-description {
|
||||
color: #909399;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.sensor-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.sensor-card {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
transition: box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.sensor-card:hover {
|
||||
box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.sensor-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.sensor-info h3 {
|
||||
margin: 0;
|
||||
color: #303133;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.value-label {
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.normal-value {
|
||||
color: #67c23a;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.alarm-value {
|
||||
color: #f56c6c;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.threshold-form {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.sensor-threshold-config {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.sensor-list {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.sensor-info {
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
/* 卡片样式优化 */
|
||||
:deep(.el-card__header) {
|
||||
background-color: #f8f9fa;
|
||||
border-bottom: 1px solid #e4e7ed;
|
||||
padding: 15px 20px;
|
||||
}
|
||||
|
||||
:deep(.el-card__body) {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* 表单样式优化 */
|
||||
:deep(.el-form-item__label) {
|
||||
font-weight: 500;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
:deep(.el-input-number) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:deep(.el-input-number .el-input__inner) {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* 按钮样式优化 */
|
||||
:deep(.el-button) {
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
:deep(.el-button--primary) {
|
||||
background-color: #409eff;
|
||||
border-color: #409eff;
|
||||
}
|
||||
|
||||
:deep(.el-button--primary:hover) {
|
||||
background-color: #66b1ff;
|
||||
border-color: #66b1ff;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -70,10 +70,7 @@
|
|||
</div>
|
||||
<div class="canvas-wrapper">
|
||||
<!-- 底层Canvas：仅绘制背景图（静态内容） -->
|
||||
<canvas
|
||||
ref="bgCanvasRef"
|
||||
class="bg-canvas"
|
||||
></canvas>
|
||||
<canvas ref="bgCanvasRef" class="bg-canvas"></canvas>
|
||||
<!-- 上层Canvas：绘制图表、标记点等动态内容 -->
|
||||
<canvas
|
||||
ref="canvasRef"
|
||||
|
|
@ -90,6 +87,9 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="charts-content">
|
||||
<div ref="chartRef" class="line-chart"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="progress-container spslider">
|
||||
|
|
@ -158,6 +158,7 @@ import {
|
|||
import typesDictionary from "../utils/equipmentType"; //设备类型字典
|
||||
import videoEle from "./components/videoEle.vue";
|
||||
import tableEle from "./components/tableEle.vue";
|
||||
import * as echarts from "echarts";
|
||||
|
||||
const tableModelValue = ref(false);
|
||||
// 新增：底层背景Canvas引用
|
||||
|
|
@ -248,7 +249,7 @@ const MOUSE_CURRENT_Y = ref(0);
|
|||
const activeMarker = ref({ target: "" });
|
||||
const Shrink = ref(false);
|
||||
|
||||
const SELECT_ACTION_TYPE = ref('');
|
||||
const SELECT_ACTION_TYPE = ref("");
|
||||
|
||||
//背景图片/标记图片等（保持不变）
|
||||
const backgroundImage = new URL("../assets/gl.png", import.meta.url).href;
|
||||
|
|
@ -276,7 +277,10 @@ const icons = {
|
|||
};
|
||||
|
||||
icons.baiye.src = new URL("../assets/icon/baiye.png", import.meta.url).href;
|
||||
icons.dianbiao.src = new URL("../assets/icon/dianbiao.png", import.meta.url).href;
|
||||
icons.dianbiao.src = new URL(
|
||||
"../assets/icon/dianbiao.png",
|
||||
import.meta.url
|
||||
).href;
|
||||
icons.hongwai.src = new URL("../assets/icon/hongwai.png", import.meta.url).href;
|
||||
icons.jiawan.src = new URL("../assets/icon/jiawan.png", import.meta.url).href;
|
||||
icons.jingai.src = new URL("../assets/icon/jingai.png", import.meta.url).href;
|
||||
|
|
@ -303,6 +307,170 @@ const updateTableModelValue = (value) => {
|
|||
tableModelValue.value = value;
|
||||
};
|
||||
|
||||
// 图表引用和实例
|
||||
const chartRef = ref(null);
|
||||
let chartInstance = null;
|
||||
|
||||
// 状态变量
|
||||
const darkMode = ref(true);
|
||||
const chartData = ref({
|
||||
xAxis: [
|
||||
"1月",
|
||||
"2月",
|
||||
"3月",
|
||||
"4月",
|
||||
"5月",
|
||||
"6月",
|
||||
"7月",
|
||||
"8月",
|
||||
"9月",
|
||||
"10月",
|
||||
"11月",
|
||||
"12月",
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "产品A",
|
||||
data: [120, 132, 101, 134, 90, 230, 210, 230, 180, 230, 210, 250],
|
||||
color: "#42b983", // 柔和的绿色
|
||||
},
|
||||
{
|
||||
name: "产品B",
|
||||
data: [220, 182, 191, 234, 290, 330, 310, 330, 380, 330, 310, 350],
|
||||
color: "#3498db", // 柔和的蓝色
|
||||
},
|
||||
{
|
||||
name: "产品C",
|
||||
data: [150, 232, 201, 154, 190, 330, 410, 330, 380, 430, 410, 450],
|
||||
color: "#f39c12", // 柔和的橙色
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
// 初始化图表
|
||||
const initChart = () => {
|
||||
// 销毁已有实例
|
||||
if (chartInstance) {
|
||||
chartInstance.dispose();
|
||||
}
|
||||
|
||||
// 创建新实例
|
||||
chartInstance = echarts.init(chartRef.value);
|
||||
|
||||
// 设置图表选项
|
||||
const option = {
|
||||
backgroundColor: darkMode.value
|
||||
? "rgba(30, 30, 30, 0.7)"
|
||||
: "rgba(255, 255, 255, 0.7)",
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
backgroundColor: darkMode.value
|
||||
? "rgba(40, 40, 40, 0.9)"
|
||||
: "rgba(255, 255, 255, 0.9)",
|
||||
borderColor: darkMode.value ? "#555" : "#ddd",
|
||||
textStyle: {
|
||||
color: darkMode.value ? "#fff" : "#333",
|
||||
},
|
||||
padding: 10,
|
||||
borderRadius: 6,
|
||||
},
|
||||
legend: {
|
||||
data: chartData.value.series.map((item) => item.name),
|
||||
top: 10,
|
||||
textStyle: {
|
||||
color: darkMode.value ? "#eee" : "#555",
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: "3%",
|
||||
right: "4%",
|
||||
bottom: "3%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
data: chartData.value.xAxis,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: darkMode.value ? "#555" : "#ddd",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: darkMode.value ? "#bbb" : "#666",
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: darkMode.value
|
||||
? "rgba(255, 255, 255, 0.05)"
|
||||
: "rgba(0, 0, 0, 0.05)",
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: darkMode.value ? "#555" : "#ddd",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: darkMode.value ? "#bbb" : "#666",
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: darkMode.value
|
||||
? "rgba(255, 255, 255, 0.05)"
|
||||
: "rgba(0, 0, 0, 0.05)",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: chartData.value.series.map((item) => ({
|
||||
name: item.name,
|
||||
type: "line",
|
||||
data: item.data,
|
||||
symbol: "circle",
|
||||
symbolSize: 6,
|
||||
emphasis: {
|
||||
symbolSize: 8,
|
||||
},
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: item.color,
|
||||
},
|
||||
itemStyle: {
|
||||
color: item.color,
|
||||
borderWidth: 2,
|
||||
borderColor: darkMode.value ? "#333" : "#fff",
|
||||
},
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: item.color + "80", // 透明度80%
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: item.color + "00", // 透明度0%
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
})),
|
||||
};
|
||||
|
||||
// 设置选项
|
||||
chartInstance.setOption(option);
|
||||
};
|
||||
|
||||
const pointsToPartiData = (data) => {
|
||||
let _partiData = {};
|
||||
let areaId = 0;
|
||||
|
|
@ -327,7 +495,7 @@ const handleTabbar = (e) => {
|
|||
d.isSelected = false;
|
||||
}
|
||||
});
|
||||
if(e.isSelected) {
|
||||
if (e.isSelected) {
|
||||
SELECT_ACTION_TYPE.value = e.value;
|
||||
} else {
|
||||
SELECT_ACTION_TYPE.value = "";
|
||||
|
|
@ -401,15 +569,15 @@ const drawBackground = () => {
|
|||
|
||||
// 初始化Canvas（修改：同时初始化两层Canvas）
|
||||
const initCanvas = () => {
|
||||
nextTick(()=> {
|
||||
nextTick(() => {
|
||||
// 初始化上层主Canvas
|
||||
ctx.value = canvasRef.value.getContext("2d");
|
||||
// 初始化底层背景Canvas
|
||||
bgCtx.value = bgCanvasRef.value.getContext("2d");
|
||||
|
||||
|
||||
// 加载背景图（加载完成后绘制底层背景）
|
||||
loadImage();
|
||||
})
|
||||
});
|
||||
};
|
||||
|
||||
const getIcon = (id) => {
|
||||
|
|
@ -444,18 +612,18 @@ const resizeCanvas = () => {
|
|||
// 同时设置两层Canvas的大小（保持一致）
|
||||
const clientWidth = canvasRef.value.clientWidth;
|
||||
const clientHeight = canvasRef.value.clientHeight;
|
||||
|
||||
|
||||
canvasRef.value.width = clientWidth;
|
||||
canvasRef.value.height = clientHeight;
|
||||
bgCanvasRef.value.width = clientWidth;
|
||||
bgCanvasRef.value.height = clientHeight;
|
||||
|
||||
|
||||
canvasWidthNum.value = clientWidth;
|
||||
canvasHeightNum.value = clientHeight;
|
||||
|
||||
|
||||
BL.value = clientHeight / StandardC;
|
||||
getCurrentArea();
|
||||
|
||||
|
||||
// 窗口 resize 时需要重新绘制背景
|
||||
drawBackground();
|
||||
// 同时重绘上层内容
|
||||
|
|
@ -481,7 +649,14 @@ const getCurrentArea = () => {
|
|||
};
|
||||
|
||||
const isCGQ = (type) => {
|
||||
if (type == 26 || type == 30 || type == 31 || type == 32 || type == 34 || type == 35) {
|
||||
if (
|
||||
type == 26 ||
|
||||
type == 30 ||
|
||||
type == 31 ||
|
||||
type == 32 ||
|
||||
type == 34 ||
|
||||
type == 35
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
|
|
@ -516,7 +691,7 @@ const drawTooltip = () => {
|
|||
const canvasY = activeMarker.value.y * BL.value * scale.value + offsetY.value;
|
||||
|
||||
let x = canvasX - tooltipWidth / 2;
|
||||
let y = canvasY - tooltipHeight - (20 * scale.value);
|
||||
let y = canvasY - tooltipHeight - 20 * scale.value;
|
||||
|
||||
const canvasWidth = canvasRef.value.width;
|
||||
const canvasHeight = canvasRef.value.height;
|
||||
|
|
@ -536,7 +711,13 @@ const drawTooltip = () => {
|
|||
ctxTooltip.lineTo(x + tooltipWidth - radius, y);
|
||||
ctxTooltip.arcTo(x + tooltipWidth, y, x + tooltipWidth, y + radius, radius);
|
||||
ctxTooltip.lineTo(x + tooltipWidth, y + tooltipHeight - radius);
|
||||
ctxTooltip.arcTo(x + tooltipWidth, y + tooltipHeight, x + tooltipWidth - radius, y + tooltipHeight, radius);
|
||||
ctxTooltip.arcTo(
|
||||
x + tooltipWidth,
|
||||
y + tooltipHeight,
|
||||
x + tooltipWidth - radius,
|
||||
y + tooltipHeight,
|
||||
radius
|
||||
);
|
||||
ctxTooltip.lineTo(x + radius, y + tooltipHeight);
|
||||
ctxTooltip.arcTo(x, y + tooltipHeight, x, y + tooltipHeight - radius, radius);
|
||||
ctxTooltip.lineTo(x, y + radius);
|
||||
|
|
@ -580,7 +761,7 @@ const draw = (alpha = 1) => {
|
|||
const canvasHeight = canvasRef.value.height;
|
||||
|
||||
BL.value = canvasHeight / StandardC;
|
||||
|
||||
|
||||
// 清除上层画布（只清除动态内容）
|
||||
ctx.value.clearRect(0, 0, canvasWidth, canvasHeight);
|
||||
|
||||
|
|
@ -613,8 +794,11 @@ const draw = (alpha = 1) => {
|
|||
for (const key in points) {
|
||||
let _points = points[key];
|
||||
_points.forEach((point) => {
|
||||
if(SELECT_ACTION_TYPE.value && point.TypeId !== SELECT_ACTION_TYPE.value) {
|
||||
return
|
||||
if (
|
||||
SELECT_ACTION_TYPE.value &&
|
||||
point.TypeId !== SELECT_ACTION_TYPE.value
|
||||
) {
|
||||
return;
|
||||
}
|
||||
let status = getIconStatus(point.TypeId);
|
||||
|
||||
|
|
@ -655,19 +839,78 @@ const draw = (alpha = 1) => {
|
|||
);
|
||||
}
|
||||
|
||||
// 添加文字传感器数值
|
||||
if(point.TypeId == 26) {
|
||||
// 辅助函数：绘制圆角矩形
|
||||
function roundedRect(ctx, x, y, width, height, radius, isStroke = false) {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x + radius, y);
|
||||
ctx.lineTo(x + width - radius, y);
|
||||
ctx.arcTo(x + width, y, x + width, y + radius, radius);
|
||||
ctx.lineTo(x + width, y + height - radius);
|
||||
ctx.arcTo(
|
||||
x + width,
|
||||
y + height,
|
||||
x + width - radius,
|
||||
y + height,
|
||||
radius
|
||||
);
|
||||
ctx.lineTo(x + radius, y + height);
|
||||
ctx.arcTo(x, y + height, x, y + height - radius, radius);
|
||||
ctx.lineTo(x, y + radius);
|
||||
ctx.arcTo(x, y, x + radius, y, radius);
|
||||
ctx.closePath();
|
||||
|
||||
if (isStroke) {
|
||||
ctx.stroke();
|
||||
} else {
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
|
||||
// 添加文字传感器数值（带圆角边框和半透明背景）
|
||||
if (point.TypeId == 26) {
|
||||
// 设置字体样式
|
||||
ctx.value.font = `10px Arial`;
|
||||
const textColor = "#FFF"; // 白色字体
|
||||
const borderColor = "rgba(100, 180, 255, 0.9)"; // 浅蓝色边框
|
||||
const bgColor = "rgba(100, 180, 255, 0.4)"; // 同色系半透明背景
|
||||
|
||||
let _value = point.Data[0].Value; // 传感器数值value
|
||||
|
||||
ctx.value.font = `10px Arial`; // 设置字体和大小
|
||||
ctx.value.fillStyle = "#FFF"; // 设置文字颜色
|
||||
// 计算文字位置（图标右侧10px处，垂直居中对齐）
|
||||
const textX = point.x * BL.value;
|
||||
const textY = point.y * BL.value + 20; // 垂直居中调整
|
||||
|
||||
let _value = point.Data[0].Value; //传感器数值value
|
||||
// 测量文本宽度，用于计算背景框大小
|
||||
const textMetrics = ctx.value.measureText(_value);
|
||||
const padding = 3; // 文字周围的内边距
|
||||
const borderRadius = 3; // 圆角半径
|
||||
|
||||
const textX = point.x * BL.value + (iSize * BL.value) / scale.value / 2 + 1;
|
||||
const textY = point.y * BL.value + 15; // +5是为了视觉上垂直居中
|
||||
ctx.value.fillText(_value, textX, textY); // 绘制文字
|
||||
// 计算背景框的位置和大小
|
||||
const bgX = textX - padding - textMetrics.width / 2;
|
||||
const bgY = textY - 10; // 基于10px字体的位置调整
|
||||
const bgWidth = textMetrics.width + padding * 2;
|
||||
const bgHeight = 14; // 适合10px字体的高度
|
||||
|
||||
// 绘制圆角背景
|
||||
ctx.value.fillStyle = bgColor;
|
||||
roundedRect(ctx.value, bgX, bgY + 10, bgWidth, bgHeight, borderRadius);
|
||||
|
||||
// 绘制圆角边框
|
||||
ctx.value.strokeStyle = borderColor;
|
||||
ctx.value.lineWidth = 1;
|
||||
roundedRect(
|
||||
ctx.value,
|
||||
bgX,
|
||||
bgY + 10,
|
||||
bgWidth,
|
||||
bgHeight,
|
||||
borderRadius,
|
||||
true
|
||||
);
|
||||
|
||||
// 绘制文字（确保在最上层）
|
||||
ctx.value.fillStyle = textColor;
|
||||
ctx.value.fillText(_value, textX - textMetrics.width / 2, textY + 10);
|
||||
}
|
||||
|
||||
if (point.target == "device" && point.IsOpen) {
|
||||
|
|
@ -682,7 +925,11 @@ const draw = (alpha = 1) => {
|
|||
ctx.value.strokeStyle = window.customConfigUrl.faultColor;
|
||||
ctx.value.lineWidth = (4 / scale.value) * BL.value;
|
||||
ctx.value.stroke();
|
||||
} else if (point.target == "device" && !isCGQ(point.TypeId) && point.TypeId != 66) {
|
||||
} else if (
|
||||
point.target == "device" &&
|
||||
!isCGQ(point.TypeId) &&
|
||||
point.TypeId != 66
|
||||
) {
|
||||
ctx.value.strokeStyle = window.customConfigUrl.closeColor;
|
||||
ctx.value.lineWidth = (4 / scale.value) * BL.value;
|
||||
ctx.value.stroke();
|
||||
|
|
@ -716,7 +963,7 @@ const animate = () => {
|
|||
let mouseMoveTimeout = null;
|
||||
const MOUSE_MOVE_DELAY = 16;
|
||||
const onMouseMove = (e) => {
|
||||
if(!BL.value) return;
|
||||
if (!BL.value) return;
|
||||
if (dragging.value === null) {
|
||||
if (mouseMoveTimeout) {
|
||||
cancelAnimationFrame(mouseMoveTimeout);
|
||||
|
|
@ -763,7 +1010,8 @@ const onMouseMove = (e) => {
|
|||
activeReferenceLine.value = closestLine;
|
||||
if (closestLine !== null) {
|
||||
const easingFactor = 0.2;
|
||||
currentPoint.y = currentPoint.y + (closestLine - currentPoint.y) * easingFactor;
|
||||
currentPoint.y =
|
||||
currentPoint.y + (closestLine - currentPoint.y) * easingFactor;
|
||||
if (Math.abs(currentPoint.y - closestLine) < 10) {
|
||||
currentPoint.y = closestLine;
|
||||
}
|
||||
|
|
@ -934,7 +1182,10 @@ const handleWheel = (e) => {
|
|||
|
||||
const zoomIntensity = 0.1;
|
||||
const wheel = e.deltaY < 0 ? 1 : -1;
|
||||
const newScale = Math.max(0.75, Math.min(2, scale.value + wheel * zoomIntensity));
|
||||
const newScale = Math.max(
|
||||
0.75,
|
||||
Math.min(2, scale.value + wheel * zoomIntensity)
|
||||
);
|
||||
|
||||
scalePercent.value = Math.round(newScale * 100);
|
||||
|
||||
|
|
@ -942,7 +1193,7 @@ const handleWheel = (e) => {
|
|||
offsetY.value = mouseY - imgY * newScale;
|
||||
|
||||
scale.value = newScale;
|
||||
|
||||
|
||||
// 缩放时需要重新绘制背景
|
||||
drawBackground();
|
||||
// 同时重绘上层内容
|
||||
|
|
@ -960,7 +1211,9 @@ const handleCanvasClick = (e) => {
|
|||
const originalY = (y - offsetY.value) / scale.value;
|
||||
|
||||
console.log(
|
||||
`点击坐标: (${(originalX / BL.value).toFixed(1)}, ${(originalY / BL.value).toFixed(1)})`
|
||||
`点击坐标: (${(originalX / BL.value).toFixed(1)}, ${(
|
||||
originalY / BL.value
|
||||
).toFixed(1)})`
|
||||
);
|
||||
|
||||
let clickedPoint = false;
|
||||
|
|
@ -1008,7 +1261,7 @@ const resetView = () => {
|
|||
selectedPointId.value = null;
|
||||
progress.value = 0;
|
||||
selectAreaId.value = 1;
|
||||
|
||||
|
||||
// 重置背景
|
||||
drawBackground();
|
||||
// 重置上层内容
|
||||
|
|
@ -1137,6 +1390,7 @@ const upDialogZindex = (e) => {
|
|||
// 初始化
|
||||
onMounted(() => {
|
||||
getJson();
|
||||
initChart();
|
||||
window.addEventListener("resize", resizeCanvas);
|
||||
initCanvas();
|
||||
// animate(); // 根据原代码注释，按需启用
|
||||
|
|
@ -1282,7 +1536,8 @@ body {
|
|||
}
|
||||
|
||||
/* 新增：两层Canvas样式，确保完全重叠 */
|
||||
.bg-canvas, .main-canvas {
|
||||
.bg-canvas,
|
||||
.main-canvas {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -1383,9 +1638,8 @@ button:active {
|
|||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(4px);
|
||||
border-radius: 4px;
|
||||
margin-top: 15px;
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
top: 30px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
box-shadow: 0 4px 10px rgba(255, 255, 255, 0.1);
|
||||
|
|
@ -1407,6 +1661,24 @@ button:active {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.charts-content {
|
||||
width: 800px;
|
||||
height: 240px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(4px);
|
||||
border-radius: 4px;
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
box-shadow: 0 4px 10px rgba(255, 255, 255, 0.1);
|
||||
display: flex;
|
||||
.line-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .el-slider__button {
|
||||
height: 10px !important;
|
||||
width: 10px !important;
|
||||
|
|
|
|||
|
|
@ -55,6 +55,9 @@
|
|||
<el-form-item>
|
||||
<el-button type="primary" @click="handleQuery">查询</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item style="float: right;margin: 0;">
|
||||
<el-button type="primary" @click="exportFun" style="margin: 0;">导出</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- 操作记录表格：边框 + 斑马纹 -->
|
||||
|
|
|
|||
Loading…
Reference in New Issue