添加树页面
夜笙歌
3 months ago
parent
b12da9590a
commit
055f8bc1c1
Binary file not shown.
|
After Width: | Height: | Size: 183 KiB |
@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<div class="deviceList">
|
||||
<div class="deviceItem" v-for="d in devices" :key="d.id">
|
||||
<div class="line"></div>
|
||||
<div class="title">
|
||||
{{ d.monitorCode }}
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="name">
|
||||
{{ d.monitorName }}
|
||||
</div>
|
||||
<div class="list" v-for="i in d.data">
|
||||
<div class="value">{{ i.value }}</div>
|
||||
<div class="units">{{ i.units }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'DeviceList',
|
||||
props: ['devices'],
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.deviceList {
|
||||
display: flex;
|
||||
flex-direction: row; /* 横向排列设备 */
|
||||
gap: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
.line {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 100%;
|
||||
transform: translate(100%, -50%);
|
||||
height: 1px;
|
||||
width: 20px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.deviceItem {
|
||||
padding: 6px 20px;
|
||||
color: #fff;
|
||||
border-radius: 6px;
|
||||
white-space: nowrap;
|
||||
min-width: 100px;
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
border: 1px solid #fff;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border: 1px solid #fff;
|
||||
|
||||
.name {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid #fff;
|
||||
}
|
||||
|
||||
.list {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
white-space: nowrap;
|
||||
|
||||
.value {
|
||||
display: inline-block;
|
||||
min-width: 100px;
|
||||
margin-right: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.units {
|
||||
display: inline-block;
|
||||
min-width: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,320 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="bg">
|
||||
<div class="title">正道能源监控系统</div>
|
||||
<div class="content">
|
||||
<div class="list" v-for="item in list" :key="item.name">
|
||||
<ListItem :itemData="item" :isRoot="true"></ListItem>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Chart from "@/components/Charts/Chart.vue";
|
||||
import * as echarts from 'echarts'
|
||||
import {realTimeData} from "@/api/board";
|
||||
import ListItem from "./components/listItem.vue";
|
||||
|
||||
export default {
|
||||
name: 'Board1',
|
||||
components: {
|
||||
Chart,
|
||||
ListItem
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list1: [
|
||||
{
|
||||
name: '根节点1',
|
||||
children: [
|
||||
{
|
||||
name: '节点1',
|
||||
children: [
|
||||
{
|
||||
name: '节点1-1',
|
||||
id: '1-1',
|
||||
device: [
|
||||
{
|
||||
name: '设备1',
|
||||
data: [
|
||||
{
|
||||
name: '数据1',
|
||||
value: '10',
|
||||
units: "℃"
|
||||
},
|
||||
{
|
||||
name: '数据2',
|
||||
value: '20',
|
||||
units: "℃"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '设备2',
|
||||
data: [
|
||||
{
|
||||
name: '数据1',
|
||||
value: '10',
|
||||
units: "℃"
|
||||
},
|
||||
{
|
||||
name: '数据2',
|
||||
value: '20',
|
||||
units: "℃"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '节点1-2',
|
||||
device: [
|
||||
{
|
||||
name: '设备1',
|
||||
data: [
|
||||
{
|
||||
name: '数据1',
|
||||
value: '10',
|
||||
units: "℃"
|
||||
},
|
||||
{
|
||||
name: '数据2',
|
||||
value: '20',
|
||||
units: "℃"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '设备2',
|
||||
data: [
|
||||
{
|
||||
name: '数据1',
|
||||
value: '10',
|
||||
units: "℃"
|
||||
},
|
||||
{
|
||||
name: '数据2',
|
||||
value: '20',
|
||||
units: "℃"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '节点2',
|
||||
children: [
|
||||
{
|
||||
name: '节点1-1',
|
||||
id: '1-1',
|
||||
device: [
|
||||
{
|
||||
name: '设备1',
|
||||
data: [
|
||||
{
|
||||
name: '数据1',
|
||||
value: '10',
|
||||
units: "℃"
|
||||
},
|
||||
{
|
||||
name: '数据2',
|
||||
value: '20',
|
||||
units: "℃"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '设备2',
|
||||
data: [
|
||||
{
|
||||
name: '数据1',
|
||||
value: '10',
|
||||
units: "℃"
|
||||
},
|
||||
{
|
||||
name: '数据2',
|
||||
value: '20',
|
||||
units: "℃"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '节点1-2',
|
||||
device: [
|
||||
{
|
||||
name: '设备1',
|
||||
data: [
|
||||
{
|
||||
name: '数据1',
|
||||
value: '10',
|
||||
units: "℃"
|
||||
},
|
||||
{
|
||||
name: '数据2',
|
||||
value: '20',
|
||||
units: "℃"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '设备2',
|
||||
data: [
|
||||
{
|
||||
name: '数据1',
|
||||
value: '10',
|
||||
units: "℃"
|
||||
},
|
||||
{
|
||||
name: '数据2',
|
||||
value: '20',
|
||||
units: "℃"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '根节点2',
|
||||
children: [
|
||||
{
|
||||
name: '节点2',
|
||||
children: [
|
||||
{
|
||||
name: '节点2-1'
|
||||
},
|
||||
{
|
||||
name: '节点2-2'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
list: [],
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
const fieldUnits = {
|
||||
vA: 'V', vB: 'V', vC: 'V',
|
||||
iA: 'A', iB: 'A', iC: 'A',
|
||||
zxyg: '', fxyg: '',
|
||||
};
|
||||
|
||||
const fieldFilter = ['vA', 'vB', 'vC', 'iA', 'iB', 'iC', 'glys', 'zxyg', 'fxyg', 'fluxFlow', 'waterFlow', 'steamFlow', 'temperature', 'press', 'density', 'purity'];
|
||||
|
||||
realTimeData({
|
||||
monitorType: 2
|
||||
}).then(res => {
|
||||
console.log(res)
|
||||
const tree = this.buildTree(res.data, 0, fieldUnits, fieldFilter);
|
||||
this.list = tree
|
||||
console.log(tree)
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
buildTree(list, rootId = 0, fieldUnits = {}, fieldFilter = []) {
|
||||
const map = new Map(list.map(item => [item.objId, {...item}]));
|
||||
|
||||
function processNode(node) {
|
||||
// 处理 data 字段
|
||||
const isAmmeter = String(node.isAmmeter);
|
||||
if (isAmmeter !== "0") {
|
||||
const data = [];
|
||||
for (const key of fieldFilter) {
|
||||
if (node.hasOwnProperty(key) && node[key] !== null && node[key] !== undefined) {
|
||||
data.push({value: node[key], units: fieldUnits[key] || ''});
|
||||
delete node[key]; // 删除原字段
|
||||
}
|
||||
}
|
||||
if (data.length) node.data = data;
|
||||
}
|
||||
|
||||
// 递归处理子节点
|
||||
const children = [];
|
||||
const devices = [];
|
||||
for (const child of list) {
|
||||
if (child.parentId === node.objId) {
|
||||
const childNode = map.get(child.objId);
|
||||
processNode(childNode); // 递归
|
||||
// 所有子节点根据自身 isAmmeter 决定挂到 children 或 device
|
||||
if (String(childNode.isAmmeter) === "0") {
|
||||
children.push(childNode);
|
||||
} else {
|
||||
devices.push(childNode);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (children.length) node.children = children;
|
||||
if (devices.length) node.device = devices;
|
||||
|
||||
// 删除空字段
|
||||
if (node.children && node.children.length === 0) delete node.children;
|
||||
if (node.device && node.device.length === 0) delete node.device;
|
||||
}
|
||||
|
||||
const tree = [];
|
||||
for (const item of list) {
|
||||
if (item.parentId === rootId) {
|
||||
const node = map.get(item.objId);
|
||||
processNode(node);
|
||||
tree.push(node);
|
||||
}
|
||||
}
|
||||
|
||||
return tree;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
|
||||
.bg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-image: url('~@/assets/board/bg1.jpg');
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.title {
|
||||
position: absolute;
|
||||
top: 2%;
|
||||
left: 50%;
|
||||
color: #eee;
|
||||
font-size: 2vw;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5vw;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.content {
|
||||
position: absolute;
|
||||
top: 10%;
|
||||
left: 1%;
|
||||
width: 98%;
|
||||
height: 88%;
|
||||
overflow: auto;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.list {
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue