|
|
|
@ -1,7 +1,18 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div id="wrapbg" class="app-container" style="height: 100vh">
|
|
|
|
|
<div class="zoomButton">
|
|
|
|
|
缩放比例:
|
|
|
|
|
<el-button size="small" type="primary" icon="el-icon-minus" @click="reduce"></el-button>
|
|
|
|
|
{{ zoom }}
|
|
|
|
|
<el-button size="small" type="primary" icon="el-icon-plus" @click="add"></el-button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="aa">
|
|
|
|
|
<Tree :data="treeData" :index="0" :vw="vw" @itemClick="itemClick"/>
|
|
|
|
|
<div class="zoom" :style="`transform-origin: 0 0;transform: scale(${zoom})`">
|
|
|
|
|
<Tree :data="treeData" :index="0" :vw="vw" @itemClick="itemClick" :key="key" v-if="treeShow"/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="menu">
|
|
|
|
|
<el-tree :data="leftTreeData" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div
|
|
|
|
@ -283,9 +294,17 @@ export default {
|
|
|
|
|
return {
|
|
|
|
|
vw: document.body.clientWidth / 100,
|
|
|
|
|
treeData: [],
|
|
|
|
|
leftTreeData:[],
|
|
|
|
|
equipment: {},
|
|
|
|
|
ModelShow:false,
|
|
|
|
|
energyType:2,
|
|
|
|
|
ModelShow: false,
|
|
|
|
|
energyType: 2,
|
|
|
|
|
zoom: 1,
|
|
|
|
|
key:1,
|
|
|
|
|
treeShow:true,
|
|
|
|
|
defaultProps: {
|
|
|
|
|
children: 'children',
|
|
|
|
|
label: 'name'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
@ -322,24 +341,83 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
this.treeData = data
|
|
|
|
|
this.leftTreeData = data
|
|
|
|
|
console.log(data)
|
|
|
|
|
this.key +=1
|
|
|
|
|
this.treeShow = false
|
|
|
|
|
this.treeShow = true
|
|
|
|
|
// console.log([data[0]])
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
itemClick(i){
|
|
|
|
|
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'
|
|
|
|
|
beginCollectTime: nowDate + ' 00:00:00',
|
|
|
|
|
endCollectTime: nowDate + ' 23:59:59'
|
|
|
|
|
}).then((response) => {
|
|
|
|
|
console.log(response)
|
|
|
|
|
this.equipment = response.data.result
|
|
|
|
|
this.ModelShow = true
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
reduce() {
|
|
|
|
|
if (this.zoom <= 0.1) {
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
if (this.zoom <= 1) {
|
|
|
|
|
this.zoom = Number((this.zoom - 0.1).toFixed(1))
|
|
|
|
|
} else if (this.zoom > 1) {
|
|
|
|
|
this.zoom = Number((this.zoom - 0.5).toFixed(1))
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
add() {
|
|
|
|
|
console.log(this.zoom)
|
|
|
|
|
if (this.zoom < 1) {
|
|
|
|
|
this.zoom = Number((this.zoom + 0.1).toFixed(1))
|
|
|
|
|
} else if (this.zoom >= 1) {
|
|
|
|
|
this.zoom = Number((this.zoom + 0.5).toFixed(1))
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
handleNodeClick(v){
|
|
|
|
|
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,
|
|
|
|
|
objId:v.id
|
|
|
|
|
}
|
|
|
|
|
}).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
|
|
|
|
|
this.key +=1
|
|
|
|
|
this.treeShow = false
|
|
|
|
|
this.treeShow = true
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|