|
@@ -1,11 +1,11 @@
|
|
|
<template>
|
|
|
<div class="yui-tree-box">
|
|
|
- <select-space></select-space>
|
|
|
+ <project-item-tree @treeclick="treeclick" iconfontClass="el-icon-place"></project-item-tree>
|
|
|
<div class="hui-tree-content">
|
|
|
<div class="basement box-background">
|
|
|
<div class="basement-box">
|
|
|
<div class="basement-center">
|
|
|
- <test-alarm></test-alarm>
|
|
|
+ <test-alarm ref="testAlarm" :type="30"></test-alarm>
|
|
|
<div class="bim-box">
|
|
|
<model type="basement" fileId="10000786668082"></model>
|
|
|
</div>
|
|
@@ -17,65 +17,19 @@
|
|
|
风机柜控制
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="light-list">
|
|
|
- <div class="light-item">
|
|
|
- <div class="item-box">
|
|
|
- <div class="light-top">
|
|
|
- <i class="iconfont huifont-fengdiangui"></i>
|
|
|
- <el-switch v-model="value1">
|
|
|
- </el-switch>
|
|
|
- </div>
|
|
|
- <div class="label hui-ellipsis">
|
|
|
- 风机柜1
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="light-item">
|
|
|
- <div class="item-box">
|
|
|
- <div class="light-top">
|
|
|
- <i class="iconfont huifont-fengdiangui"></i>
|
|
|
- <el-switch v-model="value1">
|
|
|
- </el-switch>
|
|
|
- </div>
|
|
|
- <div class="label hui-ellipsis">
|
|
|
- 风机柜2
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="light-item">
|
|
|
- <div class="item-box">
|
|
|
- <div class="light-top">
|
|
|
- <i class="iconfont huifont-fengdiangui"></i>
|
|
|
- <el-switch v-model="value1">
|
|
|
- </el-switch>
|
|
|
- </div>
|
|
|
- <div class="label hui-ellipsis">
|
|
|
- 风机柜3
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="light-item">
|
|
|
- <div class="item-box">
|
|
|
- <div class="light-top">
|
|
|
- <i class="iconfont huifont-fengdiangui"></i>
|
|
|
- <el-switch v-model="value1">
|
|
|
- </el-switch>
|
|
|
- </div>
|
|
|
- <div class="label hui-ellipsis">
|
|
|
- 风机柜4
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="light-item">
|
|
|
+ <div class="light-list hui-no-tips" v-if="windList.length === 0">
|
|
|
+ <empty width="40" description="暂无风柜机"></empty>
|
|
|
+ </div>
|
|
|
+ <div class="light-list" v-else>
|
|
|
+ <div class="light-item" v-for="(item,index) in windList" :key="index">
|
|
|
<div class="item-box">
|
|
|
<div class="light-top">
|
|
|
<i class="iconfont huifont-fengdiangui"></i>
|
|
|
- <el-switch v-model="value1">
|
|
|
+ <el-switch v-model="item.state" :active-value="1" :inactive-value="2"
|
|
|
+ @change="value=>changeDoor(value,item)">
|
|
|
</el-switch>
|
|
|
</div>
|
|
|
- <div class="label hui-ellipsis">
|
|
|
- 风机柜5
|
|
|
- </div>
|
|
|
+ <div class="label hui-ellipsis">{{item.name}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -86,49 +40,11 @@
|
|
|
CO传感器
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="co-list">
|
|
|
- <div class="co-item">
|
|
|
- <div class="co-title">
|
|
|
- CO传感器1
|
|
|
- </div>
|
|
|
- <div class="co-label">
|
|
|
- <div class="co-icon">
|
|
|
- <i class="iconfont huifont-eryanghuatan"></i>
|
|
|
- </div>
|
|
|
- <span class="label">实时CO浓度</span>
|
|
|
- <span class="number alibaba color-cyan">0.4</span>
|
|
|
- <span class="unit">ppm</span>
|
|
|
- </div>
|
|
|
- <div ref="chart1" class="co-chart"></div>
|
|
|
- </div>
|
|
|
- <div class="co-item">
|
|
|
- <div class="co-title">
|
|
|
- CO传感器1
|
|
|
- </div>
|
|
|
- <div class="co-label">
|
|
|
- <div class="co-icon">
|
|
|
- <i class="iconfont huifont-eryanghuatan"></i>
|
|
|
- </div>
|
|
|
- <span class="label">实时CO浓度</span>
|
|
|
- <span class="number alibaba color-cyan">0.4</span>
|
|
|
- <span class="unit">ppm</span>
|
|
|
- </div>
|
|
|
- <div ref="chart2" class="co-chart"></div>
|
|
|
- </div>
|
|
|
- <div class="co-item">
|
|
|
- <div class="co-title">
|
|
|
- CO传感器1
|
|
|
- </div>
|
|
|
- <div class="co-label">
|
|
|
- <div class="co-icon">
|
|
|
- <i class="iconfont huifont-eryanghuatan"></i>
|
|
|
- </div>
|
|
|
- <span class="label">实时CO浓度</span>
|
|
|
- <span class="number alibaba color-cyan">0.4</span>
|
|
|
- <span class="unit">ppm</span>
|
|
|
- </div>
|
|
|
- <div ref="chart3" class="co-chart"></div>
|
|
|
- </div>
|
|
|
+ <div class="co-list hui-no-tips" v-if="windList.length === 0">
|
|
|
+ <empty width="100" description="暂无CO传感器"></empty>
|
|
|
+ </div>
|
|
|
+ <div class="co-list" v-else>
|
|
|
+ <basement-item v-for="(item,index) in list" :key="index" :list="item"></basement-item>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -140,144 +56,75 @@
|
|
|
|
|
|
<script>
|
|
|
import testAlarm from '@/components/work/common/testAlarm'
|
|
|
- import selectSpace from '@/components/work/common/selectSpace'
|
|
|
+ import projectItemTree from '@/components/common/projectItemTree'
|
|
|
import model from '@/components/work/common/model'
|
|
|
+ import basementItem from '@/components/work/energy/ventilate/basementItem'
|
|
|
+ import {
|
|
|
+ getEnergyDeviceList,
|
|
|
+ updateEnergyDevice
|
|
|
+ } from '@/httpApi/test'
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- value1: true
|
|
|
+ option: null,
|
|
|
+ windList: [],
|
|
|
+ list: []
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
- this.$nextTick(() => {
|
|
|
- this.chart(this.$refs.chart1, [1, 3, 2, 6, 1]);
|
|
|
- this.chart(this.$refs.chart2, [1, 3, 2, 6, 1]);
|
|
|
- this.chart(this.$refs.chart3, [1, 3, 2, 6, 1]);
|
|
|
- })
|
|
|
+ this.init();
|
|
|
},
|
|
|
components: {
|
|
|
testAlarm,
|
|
|
- selectSpace,
|
|
|
- model
|
|
|
+ projectItemTree,
|
|
|
+ model,
|
|
|
+ basementItem
|
|
|
},
|
|
|
methods: {
|
|
|
- initList() {
|
|
|
- getProjectTreeList(this.$store.getters.project.id).then(res => {
|
|
|
+ init(option) {
|
|
|
+ let postData = {
|
|
|
+ type: 12,
|
|
|
+ projectId: this.$store.getters.project.id
|
|
|
+ }
|
|
|
+ this.option = option;
|
|
|
+ if (option) postData = Object.assign(postData, option);
|
|
|
+ getEnergyDeviceList(postData).then(res => {
|
|
|
if (res.state) {
|
|
|
- this.treeData = roomList(res.data.projectItemList, 'room');
|
|
|
- this.activeName = this.treeData.map(node => node.id);
|
|
|
+ this.windList = res.data.filter(node => node.column3 === '风机柜');
|
|
|
+ let data = res.data.filter(node => node.column3 === 'CO传感器');
|
|
|
+ let obj = {},list = [];
|
|
|
+ for (let i = 0; i < data.length; i++) {
|
|
|
+ if(!obj[data[i].name]){
|
|
|
+ obj[data[i].name] = 1;
|
|
|
+ list.push({
|
|
|
+ name:data[i].name,
|
|
|
+ node:[]
|
|
|
+ })
|
|
|
+ }
|
|
|
+ list.find(node=>node.name === data[i].name).node.push(data[i])
|
|
|
+ }
|
|
|
+ this.list = list;
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
- selectItem(item) {
|
|
|
- if (item.projectItemTargetId) this.nowItem = item;
|
|
|
- },
|
|
|
- chart(elem, data) {
|
|
|
- let chart = echarts.init(elem);
|
|
|
- let option = {
|
|
|
- tooltip: {
|
|
|
- show: true,
|
|
|
- trigger: 'axis',
|
|
|
- formatter: function() {
|
|
|
- return ''
|
|
|
- },
|
|
|
- backgroundColor: 'rgba(255,255,255,0)',
|
|
|
- borderWidth: 0,
|
|
|
- padding: 0,
|
|
|
- axisPointer: {
|
|
|
- lineStyle: {
|
|
|
- type: 'solid',
|
|
|
- color: '#4E5561',
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- grid: {
|
|
|
- left: '20',
|
|
|
- top: '35',
|
|
|
- right: '20',
|
|
|
- bottom: '15',
|
|
|
- containLabel: true
|
|
|
- },
|
|
|
- color: ['#AFB9CC'],
|
|
|
- xAxis: {
|
|
|
- type: 'category',
|
|
|
- data: ['安装', '保养', '维修', '巡检', '拆除'],
|
|
|
- axisLabel: {
|
|
|
- margin: 4,
|
|
|
- color: '#D0DEEE',
|
|
|
- fontSize: 10
|
|
|
- },
|
|
|
- boundaryGap: false,
|
|
|
- axisLine: {
|
|
|
- lineStyle: {
|
|
|
- color: '#6C8097'
|
|
|
- }
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
- show: false
|
|
|
- }
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- name: '当日趋势',
|
|
|
- type: 'value',
|
|
|
- nameTextStyle: {
|
|
|
- color: '#D0DEEE',
|
|
|
- fontSize: 10,
|
|
|
- align: 'center',
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- margin: 10,
|
|
|
- color: '#D0DEEE',
|
|
|
- fontSize: 10
|
|
|
- },
|
|
|
- splitLine: {
|
|
|
- show: true,
|
|
|
- lineStyle: {
|
|
|
- color: 'rgba(108,128,151,0.3)',
|
|
|
- type: 'dashed'
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- series: [{
|
|
|
- data: data,
|
|
|
- type: 'line',
|
|
|
- symbolSize: 6,
|
|
|
- areaStyle: {
|
|
|
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
- offset: 0,
|
|
|
- color: 'rgba(175,185,204,0.15)'
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 1,
|
|
|
- color: 'rgba(175,185,204,0)'
|
|
|
- }
|
|
|
- ])
|
|
|
- },
|
|
|
- z: 99
|
|
|
- }, {
|
|
|
- data: data,
|
|
|
- type: 'line',
|
|
|
- showSymbol: false,
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- color: '#D0DEEE'
|
|
|
- },
|
|
|
- areaStyle: {
|
|
|
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
- offset: 0,
|
|
|
- color: 'rgba(175,185,204,0.15)'
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 1,
|
|
|
- color: 'rgba(175,185,204,0)'
|
|
|
- }
|
|
|
- ])
|
|
|
- },
|
|
|
- z: 99
|
|
|
- }]
|
|
|
- };
|
|
|
- chart.setOption(option);
|
|
|
+ treeclick(item) {
|
|
|
+ let obj = item.id ? {
|
|
|
+ projectItemTargetId: item.id
|
|
|
+ } : {}
|
|
|
+ if (this.$refs.testAlarm) this.$refs.testAlarm.init(obj);
|
|
|
+ this.init(obj);
|
|
|
},
|
|
|
+ changeDoor(value, item) {
|
|
|
+ updateEnergyDevice({
|
|
|
+ id: item.id,
|
|
|
+ state: value
|
|
|
+ }).then(res => {
|
|
|
+ if (res.state) {
|
|
|
+ this.$message.success('操作成功');
|
|
|
+ this.init(this.option);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
@@ -351,7 +198,7 @@
|
|
|
|
|
|
.basement-title {
|
|
|
padding: 20px 20px 0 20px;
|
|
|
- margin-bottom: 12px;
|
|
|
+ margin-bottom: 10px;
|
|
|
}
|
|
|
|
|
|
.basement-box {
|