添加树图

master
夜笙歌 5 months ago
parent 355443c250
commit 3b3c2eae4c

@ -0,0 +1,10 @@
import request from '@/utils/request'
// 详情数据水
export function tablewareDetailsInfo(query) {
return request({
url: '/energy/report/board/tablewareDetailsInfo',
method: 'get',
params: query
})
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 267 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 45 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

@ -0,0 +1,150 @@
<template>
<div>
<div class="item" v-for="i in data">
<div :style="i.children? `transform: translateY(calc(-${(height||[])[i.id]/2}px + ${4*vw}px + 30px));` : ''"
:class="i.children? 'item1 itemInb':'itemInb'" ref="item" @click="itemClick(i)"
>
<div class="icon" ref="icon" :id="i.id" :childrenId="(i.children || []).map(e=>e.id).join(',')">
<div class="line" v-for="item in lineData[(i.id||'')]">
<div v-if="!item.isTop" :style="`width:${item.width}px;height:${item.height}px;position: absolute;`">
<svg :style="`width:${item.width}px;height:${item.height}px;position: absolute`">
<path
:d="`M0 0 Q${item.width/2} 0 ${item.width/2} ${item.height/2} ${item.width/2} ${item.height} ${item.width} ${item.height}`"
style="stroke: #fff; stroke-width: 2px; fill: none"
/>
</svg>
</div>
<div v-else
:style="`width:${item.width}px;height:${item.height}px;transform: translateY(-100%);position: absolute;`"
>
<svg :style="`width:${item.width}px;height:${item.height}px;position: absolute`">
<path
:d="`M0 ${item.height} Q${item.width/2} ${item.height} ${item.width/2} ${item.height/2} ${item.width/2} 0 ${item.width} 0`"
style="stroke: #fff; stroke-width: 2px; fill: none"
/>
</svg>
</div>
</div>
</div>
<div class="span">
<p>{{ i.name }}</p>
<p>{{ i.id }}</p>
<p>{{ i.id }}</p>
</div>
</div>
<div v-if="(i.children || []).length>0"
:style="`display: inline-block;left:calc${(index+1)*7.7}vw + ${(index+1)*24}px`"
>
<Tree :data="i.children" :index="index+1" ref="Tree" :vw="vw" :id="i.id" @getHeight="getHeight" @itemClick="itemClick"/>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Tree',
props: ['data', 'index', 'vw', 'id'],
data() {
return {
height: null,
lineData: {}
}
},
watch: {
vw: {
deep: true,
handler() {
this.getHeight()
}
}
},
mounted() {
this.$nextTick(() => {
this.getHeight()
this.$emit('getHeight')
})
},
methods: {
async getHeight() {
if (this.$refs.Tree) {
let arr = {}
this.$refs.Tree.forEach(e => {
arr[e.id] = e.$el.offsetHeight
})
this.height = arr
}
await this.$nextTick()
if (this.$refs?.Tree?.[0]?.$refs) {
let icons = this.$refs.icon
let icon2s = this.$refs.Tree.map(com => com.$refs.icon).flat(Infinity)
icons.forEach(e => {
let id = e.getAttribute('id')
let po = e.getBoundingClientRect()
let data = {
top: po.top + (po.height / 2),
left: po.left + po.width,
children: e.getAttribute('childrenId').split(',')
}
this.$set(this.lineData, id, icon2s.filter(el => {
return data.children.includes(el.getAttribute('id'))
}).map(v => {
let po2 = v.getBoundingClientRect()
let data2 = {
top: po2.top + (po2.height / 2),
left: po2.left
}
return {
width: data2.left - data.left,
height: Math.max(1, ((data.top - data2.top) > 0 ? (data.top - data2.top) : (data2.top - data.top))),
isTop: (data.top - data2.top) > 0
}
}))
})
}
},
itemClick(i){
this.$emit('itemClick',i)
}
}
}
</script>
<style lang="scss" scoped>
.item {
width: auto;
height: auto;
position: relative;
}
.itemInb {
display: inline-block;
margin-right: 5vw;
}
.icon {
width: 8vw;
height: 8vw;
background-image: url("~@/assets/images/electricityOne1.png");
background-repeat: no-repeat;
position: relative;
background-size: 100% 100%;
.line {
position: absolute;
top: 50%;
left: 100%;
}
}
.span {
color: #fff;
text-align: center;
}
.item1 {
}
</style>

@ -0,0 +1,387 @@
<template>
<div id="wrapbg" class="app-container" style="height: 100vh">
<div class="aa">
<Tree :data="treeData" :index="0" :vw="vw" @itemClick="itemClick"/>
</div>
<div
v-show="ModelShow"
id="modalBg"
class="modalBg"
@click="ModelShow = false"
></div>
<div v-show="ModelShow" class="modalInfo">
<span
style="
position: absolute;
top: 33%;
left: 17%;
transform: translate(-50%, -50%);
color: rgb(66, 183, 253);
font-size: 22px;
font-weight: 600;
"
>{{ equipment.consumption || 0 }}</span
>
<span
style="
position: absolute;
top: 37.5%;
left: 17%;
transform: translate(-50%, -50%);
color: rgb(204, 204, 204);
font-weight: 600;
"
>{{ energyType === 2 ? 'kwh' : 'm³' }}</span
>
<span
style="
position: absolute;
top: 20%;
left: 40%;
transform: translateY(-50%);
color: rgb(204, 204, 204);
"
>计量设备编号<span style="color: rgb(255, 255, 255)">{{
equipment.monitorId
}}</span></span
>
<span
style="
position: absolute;
top: 32%;
left: 40%;
transform: translateY(-50%);
color: rgb(204, 204, 204);
"
>计量设备名称<span style="color: rgb(255, 255, 255)">{{
equipment.monitorName
}}</span></span
>
<span
style="
position: absolute;
top: 44%;
left: 40%;
transform: translateY(-50%);
color: rgb(204, 204, 204);
"
>计量设备位置<span style="color: rgb(255, 255, 255)">{{
equipment.address
}}</span></span
>
<span
style="
position: absolute;
top: 58.2%;
left: 26.1%;
width: 41.6%;
height: 6%;
padding-left: 20px;
line-height: 34px;
transform: translate(-50%, -50%);
color: rgb(170, 170, 170);
background-color: rgb(5, 33, 83);
"
>Ua:
<span style="color: rgb(204, 204, 204)">{{ equipment.va }}</span></span
>
<span
style="
position: absolute;
top: 64.2%;
left: 26.1%;
width: 41.6%;
height: 6%;
padding-left: 20px;
line-height: 34px;
transform: translate(-50%, -50%);
color: rgb(170, 170, 170);
"
>Ia:
<span style="color: rgb(204, 204, 204)">{{ equipment.ia }}</span></span
>
<span
style="
position: absolute;
top: 70.2%;
left: 26.1%;
width: 41.6%;
height: 6%;
padding-left: 20px;
line-height: 34px;
transform: translate(-50%, -50%);
color: rgb(170, 170, 170);
background-color: rgb(5, 33, 83);
"
>cosΦ:
<span style="color: rgb(204, 204, 204)">{{
equipment.glys
}}</span></span
>
<span
style="
position: absolute;
top: 76.2%;
left: 26.1%;
width: 41.6%;
height: 6%;
padding-left: 20px;
line-height: 34px;
transform: translate(-50%, -50%);
color: rgb(170, 170, 170);
"
>Ep:
<span style="color: rgb(204, 204, 204)">{{ equipment.zxyg }}</span></span
>
<span
style="
position: absolute;
top: 82.2%;
left: 26.1%;
width: 41.6%;
height: 6%;
padding-left: 20px;
line-height: 34px;
transform: translate(-50%, -50%);
color: rgb(170, 170, 170);
background-color: rgb(5, 33, 83);
"
>P总:
<span style="color: rgb(204, 204, 204)">{{ equipment.activePower }}</span></span
>
<span
style="
position: absolute;
top: 88.2%;
left: 26.1%;
width: 41.6%;
height: 6%;
padding-left: 20px;
line-height: 34px;
transform: translate(-50%, -50%);
color: rgb(170, 170, 170);
"
>Q总:
<span style="color: rgb(204, 204, 204)">{{ equipment.reactivePower }}</span></span
>
<span
style="
position: absolute;
top: 58.2%;
left: 71.1%;
width: 41.6%;
height: 6%;
padding-left: 20px;
line-height: 34px;
transform: translate(-50%, -50%);
color: rgb(170, 170, 170);
background-color: rgb(5, 33, 83);
"
>A相电流值:
<span style="color: rgb(204, 204, 204)">{{ equipment.ia }}</span></span
>
<span
style="
position: absolute;
top: 64.2%;
left: 71.1%;
width: 41.6%;
height: 6%;
padding-left: 20px;
line-height: 34px;
transform: translate(-50%, -50%);
color: rgb(170, 170, 170);
"
>B相电流值:
<span style="color: rgb(204, 204, 204)">{{
equipment.ib
}}</span></span
>
<span
style="
position: absolute;
top: 70.2%;
left: 71.1%;
width: 41.6%;
height: 6%;
padding-left: 20px;
line-height: 34px;
transform: translate(-50%, -50%);
color: rgb(170, 170, 170);
background-color: rgb(5, 33, 83);
"
>C相电流值:
<span style="color: rgb(204, 204, 204)">{{
equipment.ic
}}</span></span
>
<span
style="
position: absolute;
top: 76.2%;
left: 71.1%;
width: 41.6%;
height: 6%;
padding-left: 20px;
line-height: 34px;
transform: translate(-50%, -50%);
color: rgb(170, 170, 170);
"
>A相电压值:
<span style="color: rgb(204, 204, 204)">{{ equipment.va }}</span></span
>
<span
style="
position: absolute;
top: 82.2%;
left: 71.1%;
width: 41.6%;
height: 6%;
padding-left: 20px;
line-height: 34px;
transform: translate(-50%, -50%);
color: rgb(170, 170, 170);
background-color: rgb(5, 33, 83);
"
>B相电压值:
<span style="color: rgb(204, 204, 204)">{{ equipment.vb }}</span></span
>
<span
style="
position: absolute;
top: 88.2%;
left: 71.1%;
width: 41.6%;
height: 6%;
padding-left: 20px;
line-height: 34px;
transform: translate(-50%, -50%);
color: rgb(170, 170, 170);
"
>C相电压值:
<span style="color: rgb(204, 204, 204)">{{ equipment.vc }}</span></span
>
<div class="closeBtn"></div>
</div>
</div>
</template>
<script>
import Tree from '@/components/Tree/Tree.vue'
import request from '@/utils/request'
import {
tablewareDetailsInfo
} from '@/api/instrumentStatus/instrumentStatus'
export default {
name: 'Index',
components: {
Tree
},
data() {
return {
vw: document.body.clientWidth / 100,
treeData: [],
equipment: {},
ModelShow:false,
energyType:2,
}
},
mounted() {
window.onresize = () => {
this.vw = document.body.clientWidth / 100
}
const fun = (arr, data) => {
let resData = []
arr.forEach(v => {
if (v.pId === data.id) {
resData.push({
...v,
children: fun(arr, v)
})
}
})
return resData.length === 0 ? null : resData
}
request({
url: '/energy/report/board/fixtureStatus',
method: 'get',
params: {
energyType: 2
}
}).then(e => {
let data = []
e.data.result.forEach(v => {
if (v.pId === 0) {
let a = {
...v,
children: fun(e.data.result, v)
}
data.push(a)
}
})
this.treeData = data
// console.log([data[0]])
})
},
created() {
},
methods: {
itemClick(i){
const nowDate = this.parseTime(new Date(), '{y}-{m}-{d}')
tablewareDetailsInfo({
energyType: 2,
monitorId: i.title,
beginCollectTime:nowDate + ' 00:00:00',
endCollectTime:nowDate + ' 23:59:59'
}).then((response) => {
this.equipment = response.data.result
this.ModelShow = true
})
}
}
}
</script>
<style lang="scss" scoped>
.aa {
position: absolute;
top: 11%;
left: 18%;
width: 80%;
height: 84%;
overflow: auto;
}
.app-container {
width: 100%;
height: 100vh;
background-image: url("~@/assets/images/ApparentState.jpeg");
background-repeat: no-repeat;
background-size: 100% 100%;
position: relative;
}
.modalInfo {
width: 600px;
height: 580px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-image: url("../../../assets/images/electricityModal.png");
background-repeat: no-repeat;
background-size: 100% 100%;
z-index: 2;
}
.modalBg {
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.4);
z-index: 1;
}
</style>
Loading…
Cancel
Save