suixy
/
energy-visual-editor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

添加接口和新组件

Browse Source
main
suixy 4 weeks ago
parent 8fbc702e86
commit 54810b76d0
3 changed files with 578 additions and 14 deletions
Show Stats Download Patch File Download Diff File

537
src/views/visualEditor/index.vue
Unescape Escape View File

@ -1,6 +1,7 @@
<template>
<div style="width: 100%; height: 100vh">
<div class="top">
<el-button type="primary" @click="restoration">复位</el-button>
<el-button type="primary">保存</el-button>
<el-button type="info" @click="setPageData">设置</el-button>
</div>
@ -71,7 +72,6 @@
:zoom-on-double-click="false"
:snapToGrid="isSnapToGrid"
:panOnDrag="false"
:zoomOnScroll="false"
:autoPanSpeed="0"
:snapGrid="[10, 10]"
v-model:nodes="nodes"
@ -93,7 +93,10 @@
/>
<template #node-area="props">
<AreaNode v-bind="props" :pageData="{ width: '960px', height: '540px' }"></AreaNode>
<AreaNode
v-bind="props"
:pageData="{ width: '960px', height: '540px', bgColor: nodes.find((e) => (e.type = 'area'))?.data.style.backgroundColor }"
></AreaNode>
</template>
<template #node-circuitComponent="props">
<CircuitComponentNode :monitorType="monitorType" v-bind="props" :networkData="deviceData" />
@ -226,6 +229,7 @@ import TextNode from './nodes/text.vue';
import { MarkerType, useVueFlow, VueFlow } from '@vue-flow/core';
import { Background } from '@vue-flow/background';
import tool from './tool.js';
import { getIotEnvMonitorLatestAll } from '@/api/ems/report/recordIotenvInstant/index.ts';
const rightRef = ref();
const flowRef = ref();
@ -279,14 +283,516 @@ const deviceData = ref([
]);
const monitorType = ref([
{ label: '温度', value: 'tem' },
{ label: '字段1', value: 'a' },
{ label: '字段2', value: 'v' }
{ label: '温度', value: 'temperature' },
{ label: '湿度', value: 'humidity' },
{ label: '照度', value: 'illuminance' },
{ label: '噪声', value: 'noise' },
{ label: '硫化氢浓度', value: 'concentration' },
{ label: '振动速度', value: 'vibrationSpeed' },
{ label: '振动位移', value: 'vibrationDisplacement' },
{ label: '振动加速度', value: 'vibrationAcceleration' },
{ label: '振动温度', value: 'vibrationTemp' }
]);
const { onDragStart, onDrop, onDragOver } = tool();
const { addEdges, updateNode, removeNodes, addNodes, onNodesChange } = useVueFlow({ id: 'flowA' });
const transformData = (arr) => {
const exclude = ['collectTime', 'objid', 'monitorCode', 'monitorId', 'monitorType'];
return arr.map((item) => {
const options = {};
Object.keys(item).forEach((key) => {
if (!exclude.includes(key)) {
options[key] = item[key];
}
});
return {
id: item.monitorCode,
options
};
});
};
/*
[
{
"id": "6",
"options": {
"monitorName": "666",
"energyName": "未知",
"temperature": null,
"humidity": null,
"illuminance": null,
"noise": null,
"concentration": null,
"vibrationSpeed": null,
"vibrationDisplacement": null,
"vibrationAcceleration": null,
"vibrationTemp": null,
"recodeTime": null
}
},
{
"id": "T0001",
"options": {
"monitorName": "温度",
"energyName": "温度",
"temperature": null,
"recodeTime": null
}
},
{
"id": "H0001",
"options": {
"monitorName": "温湿度",
"energyName": "温湿度",
"temperature": null,
"humidity": null,
"recodeTime": null
}
},
{
"id": "Z0001",
"options": {
"monitorName": "振动",
"energyName": "振动",
"vibrationSpeed": null,
"vibrationDisplacement": null,
"vibrationAcceleration": null,
"vibrationTemp": null,
"recodeTime": null
}
},
{
"id": "N0001",
"options": {
"monitorName": "噪声",
"energyName": "噪声",
"noise": null,
"recodeTime": null
}
},
{
"id": "E0001_1900",
"options": {
"monitorName": "LCC81交换机箱",
"energyName": "温度",
"temperature": "20.5000",
"recodeTime": "2026-04-09 14:54:09"
}
},
{
"id": "E0001_1400",
"options": {
"monitorName": "LCC24网关箱",
"energyName": "温度",
"temperature": "19.3700",
"recodeTime": "2026-04-09 14:54:09"
}
},
{
"id": "E0001_2100",
"options": {
"monitorName": "CCC02主控柜",
"energyName": "温度",
"temperature": "18.8100",
"recodeTime": "2026-04-09 14:54:10"
}
},
{
"id": "E0001_0400",
"options": {
"monitorName": "VSB",
"energyName": "温度",
"temperature": "20.1200",
"recodeTime": "2026-04-09 14:54:10"
}
},
{
"id": "E0001_2200",
"options": {
"monitorName": "7.47.01",
"energyName": "温度",
"temperature": "45.1800",
"recodeTime": "2026-04-09 14:54:10"
}
},
{
"id": "E0001_0700",
"options": {
"monitorName": "7.49.01",
"energyName": "温度",
"temperature": "18.8700",
"recodeTime": "2026-04-09 14:54:10"
}
},
{
"id": "E0002_1100",
"options": {
"monitorName": "LCC23网关箱",
"energyName": "温度",
"temperature": "20.6200",
"recodeTime": "2026-04-09 14:54:37"
}
},
{
"id": "E0002_1800",
"options": {
"monitorName": "7.41.04",
"energyName": "温度",
"temperature": "18.7500",
"recodeTime": "2026-04-09 14:53:46"
}
},
{
"id": "E0002_2400",
"options": {
"monitorName": "7.41.03",
"energyName": "温度",
"temperature": "18.4300",
"recodeTime": "2026-04-09 14:53:46"
}
},
{
"id": "E0003_2700",
"options": {
"monitorName": "7.35.01",
"energyName": "温度",
"temperature": "19.0000",
"recodeTime": "2026-04-09 14:48:24"
}
},
{
"id": "E0003_2900",
"options": {
"monitorName": "7.35.02",
"energyName": "温度",
"temperature": "19.0000",
"recodeTime": "2026-04-09 14:48:25"
}
},
{
"id": "E0004_0800",
"options": {
"monitorName": "0007+CCC01",
"energyName": "温度",
"temperature": null,
"recodeTime": null
}
},
{
"id": "E0004_0500",
"options": {
"monitorName": "7.31.01",
"energyName": "温度",
"temperature": null,
"recodeTime": null
}
},
{
"id": "E0005_0300",
"options": {
"monitorName": "转盘TT",
"energyName": "温度",
"temperature": "23.7500",
"recodeTime": "2026-04-09 14:54:31"
}
},
{
"id": "E0006_0600",
"options": {
"monitorName": "7.49.5",
"energyName": "温度",
"temperature": "16.2500",
"recodeTime": "2026-04-09 14:54:14"
}
},
{
"id": "E0007_3100",
"options": {
"monitorName": "7.53.01",
"energyName": "温度",
"temperature": "31.2500",
"recodeTime": "2026-04-09 14:53:03"
}
},
{
"id": "E0007_2800",
"options": {
"monitorName": "7.53.03",
"energyName": "温度",
"temperature": "47.0000",
"recodeTime": "2026-04-09 14:53:05"
}
},
{
"id": "E0014_1600",
"options": {
"monitorName": "LCC21网关箱",
"energyName": "温度",
"temperature": "23.5000",
"recodeTime": "2026-04-09 12:55:03"
}
},
{
"id": "E0014_2500",
"options": {
"monitorName": "LCC22网关箱",
"energyName": "温度",
"temperature": "25.8100",
"recodeTime": "2026-04-09 14:09:59"
}
},
{
"id": "E0014_2300",
"options": {
"monitorName": "KO7柜台控制器",
"energyName": "温度",
"temperature": "24.2500",
"recodeTime": "2026-04-09 12:55:04"
}
},
{
"id": "E0014_1200",
"options": {
"monitorName": "KO9柜台控制器",
"energyName": "温度",
"temperature": "24.5600",
"recodeTime": "2026-04-09 14:09:59"
}
},
{
"id": "E0014_1300",
"options": {
"monitorName": "KO1柜台控制器",
"energyName": "温度",
"temperature": "23.8700",
"recodeTime": "2026-04-09 12:55:02"
}
},
{
"id": "E0014_3200",
"options": {
"monitorName": "KO3柜台控制器",
"energyName": "温度",
"temperature": "24.0600",
"recodeTime": "2026-04-09 14:09:59"
}
},
{
"id": "E0013_2000",
"options": {
"monitorName": "7.17.01",
"energyName": "温度",
"temperature": null,
"recodeTime": null
}
},
{
"id": "E0013_1700",
"options": {
"monitorName": "7.19.01",
"energyName": "温度",
"temperature": null,
"recodeTime": null
}
},
{
"id": "E0013_2600",
"options": {
"monitorName": "7.21.01",
"energyName": "温度",
"temperature": null,
"recodeTime": null
}
},
{
"id": "E0013_1000",
"options": {
"monitorName": "7.25.01",
"energyName": "温度",
"temperature": null,
"recodeTime": null
}
},
{
"id": "E0013_3300",
"options": {
"monitorName": "7.29.01",
"energyName": "温度",
"temperature": null,
"recodeTime": null
}
},
{
"id": "E0013_1500",
"options": {
"monitorName": "7.23.3",
"energyName": "温度",
"temperature": null,
"recodeTime": null
}
},
{
"id": "E0013_0900",
"options": {
"monitorName": "7.23.04",
"energyName": "温度",
"temperature": null,
"recodeTime": null
}
},
{
"id": "E0013_3000",
"options": {
"monitorName": "7.27.01",
"energyName": "温度",
"temperature": null,
"recodeTime": null
}
},
{
"id": "E0012_4300",
"options": {
"monitorName": "0033+CCC01",
"energyName": "温湿度",
"temperature": "18.7900",
"humidity": "58.1300",
"recodeTime": "2026-04-09 14:54:25"
}
},
{
"id": "E0004_3800",
"options": {
"monitorName": "7.31.15",
"energyName": "振动",
"vibrationSpeed": null,
"vibrationDisplacement": null,
"vibrationAcceleration": null,
"vibrationTemp": null,
"recodeTime": null
}
},
{
"id": "E0004_3400",
"options": {
"monitorName": "7.31.9",
"energyName": "振动",
"vibrationSpeed": null,
"vibrationDisplacement": null,
"vibrationAcceleration": null,
"vibrationTemp": null,
"recodeTime": null
}
},
{
"id": "E0004_3600",
"options": {
"monitorName": "7.31.1",
"energyName": "振动",
"vibrationSpeed": null,
"vibrationDisplacement": null,
"vibrationAcceleration": null,
"vibrationTemp": null,
"recodeTime": null
}
},
{
"id": "E0015_4400",
"options": {
"monitorName": "7.15.01",
"energyName": "振动",
"vibrationSpeed": "1.2000",
"vibrationDisplacement": "1.2000",
"vibrationAcceleration": "4.6000",
"vibrationTemp": "25.8000",
"recodeTime": "2026-04-09 14:53:56"
}
},
{
"id": "E0014_3700",
"options": {
"monitorName": "7.35.03",
"energyName": "振动",
"vibrationSpeed": "0.5000",
"vibrationDisplacement": "0.4000",
"vibrationAcceleration": "2.8000",
"vibrationTemp": "35.7000",
"recodeTime": "2026-04-09 12:54:15"
}
},
{
"id": "E0014_0200",
"options": {
"monitorName": "7.15.03",
"energyName": "温度",
"temperature": "36.8100",
"recodeTime": "2026-04-09 14:09:59"
}
},
{
"id": "E0014_0100",
"options": {
"monitorName": "7.15.01温度",
"energyName": "温度",
"temperature": "37.4300",
"recodeTime": "2026-04-09 12:55:05"
}
},
{
"id": "E0008_4100",
"options": {
"monitorName": "BF 29.69.1导入口",
"energyName": "噪声",
"noise": "62.7000",
"recodeTime": "2026-04-09 14:54:07"
}
},
{
"id": "E0009_4200",
"options": {
"monitorName": "BF 23.11.1导入口",
"energyName": "噪声",
"noise": "69.5000",
"recodeTime": "2026-04-09 14:54:33"
}
},
{
"id": "E0010_4000",
"options": {
"monitorName": "BF 21.12.4导入口",
"energyName": "噪声",
"noise": "91.5000",
"recodeTime": "2026-04-09 14:53:53"
}
},
{
"id": "E0011_3900",
"options": {
"monitorName": "BF 26.51.1导入口",
"energyName": "噪声",
"noise": "78.7000",
"recodeTime": "2026-04-09 14:54:27"
}
}
]
*/
const getDeviceData = () => {
getIotEnvMonitorLatestAll().then((res) => {
console.log(transformData(res.data));
deviceData.value = transformData(res.data);
//collectTime objid monitorCode monitorId monitorType
});
};
const getParentNode = (id) => {
let node = nodes.value.find((e) => e.id === id);
if (node.parentNode) {
node = nodes.value.find((e) => e.id === node.parentNode);
}
return node;
};
const logEvent = async (eventname, event) => {
switch (eventname) {
case 'paneClick':
@ -304,8 +810,9 @@ const logEvent = async (eventname, event) => {
case 'contextmenu':
event.event.preventDefault();
nodeOptionVisible.value = true;
nodeType.value = event.node.type;
nodeData.value = event.node.data.options;
let node = getParentNode(event.node.id);
nodeType.value = node.type;
nodeData.value = node.data.options;
break;
}
};
@ -320,9 +827,9 @@ onNodesChange((changes) => {
const setPageData = () => {
pageDataVisible.value = true;
pageData.value = nodes.value.find((e) => (e.type = 'area'))?.data.style;
console.log(pageData.value);
};
onMounted(() => {
getDeviceData();
let scale = 0;
const width = window.innerWidth - 220;
rightRef.value.style.width = width + 'px';
@ -343,6 +850,20 @@ onMounted(() => {
}
});
});
const restoration = () => {
let scale = 0;
const width = window.innerWidth - 220;
rightRef.value.style.width = width + 'px';
rightRef.value.style.height = (width * 540) / 960 + 'px';
scale = width / 960;
flowRef.value.setTransform({
x: 0,
y: 0,
zoom: scale
});
};
watch(
nodes,
() => {

50
src/views/visualEditor/nodes/area.vue
Unescape Escape View File

@ -3,7 +3,7 @@
<div class="custom-node">
<div
class="area"
:style="`width:${props.pageData?.width || '100px'};height:${props.pageData?.height || '100px'};border: 1px solid #fff;`"
:style="`width:${props.pageData?.width || '100px'};height:${props.pageData?.height || '100px'};border: 1px solid ${getInverseColor(props.pageData.bgColor)};`"
></div>
</div>
</div>
@ -18,6 +18,54 @@ const props = defineProps({
required: false
}
});
const getInverseColor = (color) => {
color = color.trim();
// HEX
if (color.startsWith('#')) {
let hex = color.slice(1);
if (hex.length === 3 || hex.length === 4) {
hex = hex
.split('')
.map((c) => c + c)
.join('');
}
let r = parseInt(hex.slice(0, 2), 16);
let g = parseInt(hex.slice(2, 4), 16);
let b = parseInt(hex.slice(4, 6), 16);
let a = hex.length === 8 ? hex.slice(6, 8) : '';
r = 255 - r;
g = 255 - g;
b = 255 - b;
const toHex = (v) => v.toString(16).padStart(2, '0');
return '#' + toHex(r) + toHex(g) + toHex(b) + a;
}
// RGB / RGBA
const match = color.match(/rgba?\(([^)]+)\)/);
if (match) {
const parts = match[1].split(',').map((v) => v.trim());
let r = 255 - parseInt(parts[0]);
let g = 255 - parseInt(parts[1]);
let b = 255 - parseInt(parts[2]);
if (parts.length === 4) {
return `rgba(${r}, ${g}, ${b}, ${parts[3]})`;
}
return `rgb(${r}, ${g}, ${b})`;
}
return color;
};
</script>
<style scoped>
.area {

5
src/views/visualEditor/nodes/deviceDataList.vue
Unescape Escape View File

@ -58,7 +58,6 @@
<script setup>
import { defineEmits, defineProps, ref } from 'vue';
import { NodeResizer } from '@vue-flow/node-resizer';
import { Handle, Position } from '@vue-flow/core';
const props = defineProps({
ratioWidth: {
@ -125,16 +124,12 @@ const pNode = computed(() => props.nodes.find((n) => n.id === props.parentNodeId
const getList = () => {
let deviceData = props.networkData.find((e) => e.id === pNode.value.data.options.id)?.options;
let options = pNode.value.data.options.infos;
console.log(deviceData);
console.log(options);
console.log(props.monitorType);
list.value =
options?.map((e, i) => {
let item = {};
item.label = props.monitorType.find((v) => v.value === e)?.label;
item.key = e;
item.value = deviceData[e];
console.log(item);
return item;
}) || [];
};

Write Preview
Loading…
Cancel
Save