|
@@ -9,7 +9,7 @@
|
|
<div class="count-image count-image1"></div>
|
|
<div class="count-image count-image1"></div>
|
|
<div class="count-label">
|
|
<div class="count-label">
|
|
<span class="count-name">设备健康度</span>
|
|
<span class="count-name">设备健康度</span>
|
|
- <span class="count-number alibaba">99</span>
|
|
|
|
|
|
+ <span class="count-number alibaba">{{testCount.column1}}</span>
|
|
<span class="count-unit">分</span>
|
|
<span class="count-unit">分</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -17,50 +17,23 @@
|
|
<div class="count-image count-image2"></div>
|
|
<div class="count-image count-image2"></div>
|
|
<div class="count-label">
|
|
<div class="count-label">
|
|
<span class="count-name">故障设备</span>
|
|
<span class="count-name">故障设备</span>
|
|
- <span class="count-number alibaba">0</span>
|
|
|
|
|
|
+ <span class="count-number alibaba">{{testCount.offline}}</span>
|
|
<span class="count-unit">台</span>
|
|
<span class="count-unit">台</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="chart-table">
|
|
<div class="chart-table">
|
|
- <div class="chart-tr">
|
|
|
|
|
|
+ <div class="chart-tr title">
|
|
<span class="chart-name">设备名称</span>
|
|
<span class="chart-name">设备名称</span>
|
|
<span class="chart-label">故障内容</span>
|
|
<span class="chart-label">故障内容</span>
|
|
<span class="chart-date">故障时间</span>
|
|
<span class="chart-date">故障时间</span>
|
|
</div>
|
|
</div>
|
|
- <div class="chart-tr">
|
|
|
|
- <span class="chart-name">设备名称</span>
|
|
|
|
- <span class="chart-label">故障原因导致的</span>
|
|
|
|
- <span class="chart-date">2023-12-13</span>
|
|
|
|
- </div>
|
|
|
|
- <div class="chart-tr">
|
|
|
|
- <span class="chart-name">设备名称</span>
|
|
|
|
- <span class="chart-label">故障原因导致的</span>
|
|
|
|
- <span class="chart-date">2023-12-13</span>
|
|
|
|
- </div>
|
|
|
|
- <div class="chart-tr">
|
|
|
|
- <span class="chart-name">设备名称</span>
|
|
|
|
- <span class="chart-label">故障原因导致的</span>
|
|
|
|
- <span class="chart-date">2023-12-13</span>
|
|
|
|
- </div>
|
|
|
|
- <div class="chart-tr">
|
|
|
|
- <span class="chart-name">设备名称</span>
|
|
|
|
- <span class="chart-label">故障原因导致的</span>
|
|
|
|
- <span class="chart-date">2023-12-13</span>
|
|
|
|
- </div>
|
|
|
|
- <div class="chart-tr">
|
|
|
|
- <span class="chart-name">设备名称</span>
|
|
|
|
- <span class="chart-label">故障原因导致的</span>
|
|
|
|
- <span class="chart-date">2023-12-13</span>
|
|
|
|
- </div>
|
|
|
|
- <div class="chart-tr">
|
|
|
|
- <span class="chart-name">设备名称</span>
|
|
|
|
- <span class="chart-label">故障原因导致的</span>
|
|
|
|
- <span class="chart-date">2023-12-13</span>
|
|
|
|
- </div>
|
|
|
|
- <div class="chart-tr">
|
|
|
|
- <span class="chart-name">设备名称</span>
|
|
|
|
- <span class="chart-label">故障原因导致的</span>
|
|
|
|
- <span class="chart-date">2023-12-13</span>
|
|
|
|
|
|
+ <empty width="80" description="暂无故障记录" style="margin: 20px 0;" v-if="list.length === 0"></empty>
|
|
|
|
+ <div v-else style="min-height: 128px;">
|
|
|
|
+ <div class="chart-tr" v-for="(item,index) in list" :key="index">
|
|
|
|
+ <span class="chart-name">{{item.deviceName}}</span>
|
|
|
|
+ <span class="chart-label">{{item.info}}</span>
|
|
|
|
+ <span class="chart-date">{{$dayjs(item.date).format('YYYY-MM-DD')}}</span>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="hui-chart-title">
|
|
<div class="hui-chart-title">
|
|
@@ -70,14 +43,14 @@
|
|
<div class="now-item">
|
|
<div class="now-item">
|
|
<div class="now-title">实时制冷量</div>
|
|
<div class="now-title">实时制冷量</div>
|
|
<div class="now-label">
|
|
<div class="now-label">
|
|
- <span class="count-number alibaba">12</span>
|
|
|
|
|
|
+ <span class="count-number alibaba">{{nowData.totalNumber}}</span>
|
|
<span class="count-unit">kw</span>
|
|
<span class="count-unit">kw</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="now-item">
|
|
<div class="now-item">
|
|
<div class="now-title">实时排热量</div>
|
|
<div class="now-title">实时排热量</div>
|
|
<div class="now-label">
|
|
<div class="now-label">
|
|
- <span class="count-number alibaba">12</span>
|
|
|
|
|
|
+ <span class="count-number alibaba">{{nowData.online}}</span>
|
|
<span class="count-unit">kw</span>
|
|
<span class="count-unit">kw</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -86,14 +59,14 @@
|
|
<div class="now-item">
|
|
<div class="now-item">
|
|
<div class="now-title">实时总耗功率</div>
|
|
<div class="now-title">实时总耗功率</div>
|
|
<div class="now-label">
|
|
<div class="now-label">
|
|
- <span class="count-number alibaba">12</span>
|
|
|
|
|
|
+ <span class="count-number alibaba">{{nowData.offline}}</span>
|
|
<span class="count-unit">kw</span>
|
|
<span class="count-unit">kw</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="now-item">
|
|
<div class="now-item">
|
|
<div class="now-title">热平衡度</div>
|
|
<div class="now-title">热平衡度</div>
|
|
<div class="now-label">
|
|
<div class="now-label">
|
|
- <span class="count-number alibaba">45</span>
|
|
|
|
|
|
+ <span class="count-number alibaba">{{nowData.column1}}</span>
|
|
<span class="count-unit">%</span>
|
|
<span class="count-unit">%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -104,25 +77,10 @@
|
|
<div class="chart-box">
|
|
<div class="chart-box">
|
|
<div ref="cold" class="chart-cold"></div>
|
|
<div ref="cold" class="chart-cold"></div>
|
|
<div class="chart-legend">
|
|
<div class="chart-legend">
|
|
- <div class="legend-item">
|
|
|
|
- <span class="dage"></span>
|
|
|
|
- <span class="name">冷水机组</span>
|
|
|
|
- <span class="number">2 23.5%</span>
|
|
|
|
- </div>
|
|
|
|
- <div class="legend-item">
|
|
|
|
- <span class="dage"></span>
|
|
|
|
- <span class="name">冷冻水泵</span>
|
|
|
|
- <span class="number">8 45%</span>
|
|
|
|
- </div>
|
|
|
|
- <div class="legend-item">
|
|
|
|
- <span class="dage"></span>
|
|
|
|
- <span class="name">冷却水泵</span>
|
|
|
|
- <span class="number">1 20%</span>
|
|
|
|
- </div>
|
|
|
|
- <div class="legend-item">
|
|
|
|
|
|
+ <div class="legend-item" v-for="item in testList" :key="index">
|
|
<span class="dage"></span>
|
|
<span class="dage"></span>
|
|
- <span class="name">冷却塔</span>
|
|
|
|
- <span class="number">3 25.5%</span>
|
|
|
|
|
|
+ <span class="name">{{item.name}}</span>
|
|
|
|
+ <span class="number">{{item.value}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -132,7 +90,7 @@
|
|
<div class="real-time-label">
|
|
<div class="real-time-label">
|
|
<div class="real-time-key">冷冻总管流量计</div>
|
|
<div class="real-time-key">冷冻总管流量计</div>
|
|
<div class="real-time-value">
|
|
<div class="real-time-value">
|
|
- <span class="number alibaba">6.39</span>
|
|
|
|
|
|
+ <span class="number alibaba">{{coldPumpNumber}}</span>
|
|
kw
|
|
kw
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -191,15 +149,13 @@
|
|
冷战能效
|
|
冷战能效
|
|
</div>
|
|
</div>
|
|
<div class="cold-energy-value">
|
|
<div class="cold-energy-value">
|
|
- <span class="color-cyan">优</span>
|
|
|
|
- <span class="number alibaba">6.17</span>
|
|
|
|
|
|
+ <span :class="reurnStateColor(num)">{{reurnStateColor(num,1)}}</span>
|
|
|
|
+ <span class="number alibaba">{{num}}</span>
|
|
<span class="unit">kw</span>
|
|
<span class="unit">kw</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <div class="hui-chart-title">
|
|
|
|
- 冷水机组
|
|
|
|
- </div>
|
|
|
|
|
|
+ <div class="hui-chart-title">冷水机组</div>
|
|
<div class="cold-water">
|
|
<div class="cold-water">
|
|
<div class="cold-water-title">
|
|
<div class="cold-water-title">
|
|
<div class="cold-water-label">
|
|
<div class="cold-water-label">
|
|
@@ -224,116 +180,44 @@
|
|
<img src="https://file-node.oss-cn-shanghai.aliyuncs.com/youji/57e5b1c42af4477f8db041d4aea8fea5"
|
|
<img src="https://file-node.oss-cn-shanghai.aliyuncs.com/youji/57e5b1c42af4477f8db041d4aea8fea5"
|
|
alt="" />
|
|
alt="" />
|
|
</div>
|
|
</div>
|
|
- <div class="cold-water-list">
|
|
|
|
- <div class="cold-water-item">
|
|
|
|
- <span class="cold-water-count">1#</span>
|
|
|
|
- <span class="cold-water-content">
|
|
|
|
- COU
|
|
|
|
- <span class="color-yellow">3.25</span>
|
|
|
|
- </span>
|
|
|
|
- <span class="cold-water-operation">
|
|
|
|
- <el-switch v-model="value1">
|
|
|
|
- </el-switch>
|
|
|
|
- </span>
|
|
|
|
- </div>
|
|
|
|
- <div class="cold-water-item">
|
|
|
|
- <span class="cold-water-count">2#</span>
|
|
|
|
- <span class="cold-water-content">
|
|
|
|
- COU
|
|
|
|
- <span class="color-red">1.22</span>
|
|
|
|
- </span>
|
|
|
|
- <span class="cold-water-operation">
|
|
|
|
- <el-switch v-model="value1">
|
|
|
|
- </el-switch>
|
|
|
|
- </span>
|
|
|
|
- </div>
|
|
|
|
- <div class="cold-water-item">
|
|
|
|
- <span class="cold-water-count">3#</span>
|
|
|
|
- <span class="cold-water-content">
|
|
|
|
- COU
|
|
|
|
- <span class="color-cyan">5</span>
|
|
|
|
- </span>
|
|
|
|
- <span class="cold-water-operation">
|
|
|
|
- <el-switch v-model="value2">
|
|
|
|
- </el-switch>
|
|
|
|
- </span>
|
|
|
|
- </div>
|
|
|
|
- <div class="cold-water-item">
|
|
|
|
- <span class="cold-water-count">4#</span>
|
|
|
|
- <span class="cold-water-content">
|
|
|
|
- COU
|
|
|
|
- <span class="color-blue">4.5</span>
|
|
|
|
- </span>
|
|
|
|
- <span class="cold-water-operation">
|
|
|
|
- <el-switch v-model="value2">
|
|
|
|
- </el-switch>
|
|
|
|
- </span>
|
|
|
|
- </div>
|
|
|
|
- <div class="cold-water-item">
|
|
|
|
- <span class="cold-water-count">5#</span>
|
|
|
|
|
|
+ <div class="cold-water-list hui-no-tips" v-if="coldGroup.length === 0">
|
|
|
|
+ <empty width="80" description="暂无冷却机组" style="margin: 20px 0;"></empty>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="cold-water-list" v-else>
|
|
|
|
+ <div class="cold-water-item" v-for="item in coldGroup" :key="item.id">
|
|
|
|
+ <span class="cold-water-count">{{item.name}}</span>
|
|
<span class="cold-water-content">
|
|
<span class="cold-water-content">
|
|
- COU
|
|
|
|
- <span class="color-red">0</span>
|
|
|
|
|
|
+ <span :class="reurnStateColor(item.column1)">{{item.column1}}</span>
|
|
</span>
|
|
</span>
|
|
<span class="cold-water-operation">
|
|
<span class="cold-water-operation">
|
|
- <el-switch v-model="value2">
|
|
|
|
|
|
+ <el-switch v-model="item.state" :active-value="1" :inactive-value="2"
|
|
|
|
+ @change="value=>changeDoor(value,item)">
|
|
</el-switch>
|
|
</el-switch>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <div class="hui-chart-title">
|
|
|
|
- 冷却塔
|
|
|
|
- </div>
|
|
|
|
|
|
+ <div class="hui-chart-title">冷却塔</div>
|
|
<div class="cold-water">
|
|
<div class="cold-water">
|
|
<div class="cold-water-box">
|
|
<div class="cold-water-box">
|
|
<div class="cold-water-image">
|
|
<div class="cold-water-image">
|
|
<img src="https://file-node.oss-cn-shanghai.aliyuncs.com/youji/9cd9340b47d8419e9da73321edad0f42"
|
|
<img src="https://file-node.oss-cn-shanghai.aliyuncs.com/youji/9cd9340b47d8419e9da73321edad0f42"
|
|
alt="" />
|
|
alt="" />
|
|
</div>
|
|
</div>
|
|
- <div class="cold-water-list">
|
|
|
|
- <div class="cold-water-item">
|
|
|
|
- <span class="cold-water-count">1#</span>
|
|
|
|
- <span class="cold-water-content">
|
|
|
|
- 换热效率
|
|
|
|
- <span>3.25</span>
|
|
|
|
- </span>
|
|
|
|
- <span class="cold-water-operation">
|
|
|
|
- <el-switch v-model="value1">
|
|
|
|
- </el-switch>
|
|
|
|
- </span>
|
|
|
|
- </div>
|
|
|
|
- <div class="cold-water-item">
|
|
|
|
- <span class="cold-water-count">2#</span>
|
|
|
|
- <span class="cold-water-content">
|
|
|
|
- 换热效率
|
|
|
|
- <span>1.22</span>
|
|
|
|
- </span>
|
|
|
|
- <span class="cold-water-operation">
|
|
|
|
- <el-switch v-model="value1">
|
|
|
|
- </el-switch>
|
|
|
|
- </span>
|
|
|
|
- </div>
|
|
|
|
- <div class="cold-water-item">
|
|
|
|
- <span class="cold-water-count">3#</span>
|
|
|
|
- <span class="cold-water-content">
|
|
|
|
- 换热效率
|
|
|
|
- <span>5</span>
|
|
|
|
- </span>
|
|
|
|
- <span class="cold-water-operation">
|
|
|
|
- <el-switch v-model="value2">
|
|
|
|
- </el-switch>
|
|
|
|
- </span>
|
|
|
|
- </div>
|
|
|
|
- <div class="cold-water-item">
|
|
|
|
- <span class="cold-water-count">4#</span>
|
|
|
|
|
|
+ <div class="cold-water-list hui-no-tips" v-if="coldTower.length === 0">
|
|
|
|
+ <empty width="80" description="暂无冷却塔" style="margin: 20px 0;"></empty>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="cold-water-list" v-else>
|
|
|
|
+ <div class="cold-water-item" v-for="item in coldTower" :key="item.id">
|
|
|
|
+ <span class="cold-water-count">{{item.name}}</span>
|
|
<span class="cold-water-content">
|
|
<span class="cold-water-content">
|
|
- 换热效率
|
|
|
|
- <span>4.5</span>
|
|
|
|
|
|
+ 效率
|
|
|
|
+ <span>{{item.column1}}</span>
|
|
</span>
|
|
</span>
|
|
<span class="cold-water-operation">
|
|
<span class="cold-water-operation">
|
|
- <el-switch v-model="value2">
|
|
|
|
|
|
+ <el-switch v-model="item.state" :active-value="1" :inactive-value="2"
|
|
|
|
+ @change="value=>changeDoor(value,item)">
|
|
</el-switch>
|
|
</el-switch>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
@@ -345,28 +229,165 @@
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
|
+ import {
|
|
|
|
+ getDeviceCountList,
|
|
|
|
+ getDeviceAlarmList,
|
|
|
|
+ getEnergyDeviceList,
|
|
|
|
+ updateEnergyDevice
|
|
|
|
+ } from '@/httpApi/test'
|
|
import model from '@/components/work/common/model'
|
|
import model from '@/components/work/common/model'
|
|
export default {
|
|
export default {
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
- value1: true,
|
|
|
|
- value2: false,
|
|
|
|
|
|
+ list: [],
|
|
|
|
+ testCount: {
|
|
|
|
+ column1: 0,
|
|
|
|
+ offline: 0
|
|
|
|
+ },
|
|
|
|
+ coldGroup: [],
|
|
|
|
+ coldTower: [],
|
|
|
|
+ coldPump: [],
|
|
|
|
+ coldPumpNumber: 0,
|
|
|
|
+ num: 0,
|
|
|
|
+ testList: [],
|
|
|
|
+ nowData: {
|
|
|
|
+ column1: 0,
|
|
|
|
+ totalNumber: 0,
|
|
|
|
+ online: 0,
|
|
|
|
+ offline: 0
|
|
|
|
+ }
|
|
}
|
|
}
|
|
},
|
|
},
|
|
created() {
|
|
created() {
|
|
this.$nextTick(() => {
|
|
this.$nextTick(() => {
|
|
- this.chartCold();
|
|
|
|
- this.chartEnergy({
|
|
|
|
- min: 0,
|
|
|
|
- max: 10,
|
|
|
|
- value: 5
|
|
|
|
- });
|
|
|
|
|
|
+ this.init();
|
|
})
|
|
})
|
|
},
|
|
},
|
|
components: {
|
|
components: {
|
|
model
|
|
model
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
|
|
+ init() {
|
|
|
|
+ getDeviceCountList({
|
|
|
|
+ type: 18,
|
|
|
|
+ projectId: this.$store.getters.project.id
|
|
|
|
+ }).then(res => {
|
|
|
|
+ if (res.state) {
|
|
|
|
+ this.nowData = res.data[0] ? res.data[0] : {
|
|
|
|
+ column1: 0,
|
|
|
|
+ totalNumber: 0,
|
|
|
|
+ online: 0,
|
|
|
|
+ offline: 0
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ getDeviceCountList({
|
|
|
|
+ type: 17,
|
|
|
|
+ projectId: this.$store.getters.project.id
|
|
|
|
+ }).then(res => {
|
|
|
|
+ if (res.state) {
|
|
|
|
+ this.testCount = res.data[0] ? res.data[0] : {
|
|
|
|
+ column1: 0,
|
|
|
|
+ offline: 0
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ getDeviceAlarmList({
|
|
|
|
+ type: 17,
|
|
|
|
+ projectId: this.$store.getters.project.id
|
|
|
|
+ }).then(res => {
|
|
|
|
+ if (res.state) {
|
|
|
|
+ this.list = res.data;
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ getEnergyDeviceList({
|
|
|
|
+ type: 6,
|
|
|
|
+ projectId: this.$store.getters.project.id
|
|
|
|
+ }).then(res => {
|
|
|
|
+ if (res.state) {
|
|
|
|
+ let data = res.data;
|
|
|
|
+ this.testChart(data);
|
|
|
|
+ this.coldGroup = data.filter(node => node.column3 === '冷水机组');
|
|
|
|
+ this.coldTower = data.filter(node => node.column3 === '冷却塔');
|
|
|
|
+ this.coldPump = data.filter(node => node.column3 === '冷冻水泵');
|
|
|
|
+ if (this.coldGroup.length > 0) {
|
|
|
|
+ let number = 0;
|
|
|
|
+ for (let i = 0; i < this.coldGroup.length; i++) {
|
|
|
|
+ number += Number(this.coldGroup[i].column1);
|
|
|
|
+ }
|
|
|
|
+ this.num = Math.round((number / this.coldGroup.length) * 100) / 100;
|
|
|
|
+ }
|
|
|
|
+ this.chartEnergy({
|
|
|
|
+ min: 0,
|
|
|
|
+ max: 10,
|
|
|
|
+ value: this.num
|
|
|
|
+ });
|
|
|
|
+ if (this.coldPump.length > 0) {
|
|
|
|
+ let number = 0;
|
|
|
|
+ for (let i = 0; i < this.coldPump.length; i++) {
|
|
|
|
+ number += Number(this.coldPump[i].column1);
|
|
|
|
+ }
|
|
|
|
+ this.coldPumpNumber = number;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ reurnStateColor(num, type) {
|
|
|
|
+ let colorClass = '',
|
|
|
|
+ str = '';
|
|
|
|
+ if (num > 5.02) {
|
|
|
|
+ colorClass = 'color-cyan';
|
|
|
|
+ str = '优';
|
|
|
|
+ } else if (num > 4.14 && num <= 5.02) {
|
|
|
|
+ colorClass = 'color-blue';
|
|
|
|
+ str = '良';
|
|
|
|
+ } else if (num > 3.52 && num <= 4.14) {
|
|
|
|
+ colorClass = 'color-orange';
|
|
|
|
+ str = '一般';
|
|
|
|
+ } else if (num <= 3.52) {
|
|
|
|
+ colorClass = 'color-red';
|
|
|
|
+ str = '需改善';
|
|
|
|
+ }
|
|
|
|
+ return type === 1 ? str : colorClass;
|
|
|
|
+ },
|
|
|
|
+ changeDoor(value, item) {
|
|
|
|
+ updateEnergyDevice({
|
|
|
|
+ id: item.id,
|
|
|
|
+ state: value
|
|
|
|
+ }).then(res => {
|
|
|
|
+ if (res.state) {
|
|
|
|
+ this.$message.success('操作成功');
|
|
|
|
+ getEnergyDeviceList({
|
|
|
|
+ type: 6,
|
|
|
|
+ projectId: this.$store.getters.project.id
|
|
|
|
+ }).then(res => {
|
|
|
|
+ if (res.state) {
|
|
|
|
+ let data = res.data;
|
|
|
|
+ this.coldGroup = data.filter(node => node.column3 === '冷水机组');
|
|
|
|
+ this.coldTower = data.filter(node => node.column3 === '冷却塔');
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ testChart(data) {
|
|
|
|
+ let obj = {},
|
|
|
|
+ list = [];
|
|
|
|
+ for (let i = 0; i < data.length; i++) {
|
|
|
|
+ if (!obj[data[i].column3]) {
|
|
|
|
+ obj[data[i].column3] = 1;
|
|
|
|
+ list.push({
|
|
|
|
+ name: data[i].column3,
|
|
|
|
+ value: 0,
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ list.find(node => node.name == data[i].column3).value++;
|
|
|
|
+ }
|
|
|
|
+ this.testList = list;
|
|
|
|
+ let title = list[0].name;
|
|
|
|
+ let len = list[0].value;
|
|
|
|
+ this.chartCold(title, ((len / data.length) * 100).toFixed(2).padStart(5, '0'), list);
|
|
|
|
+ },
|
|
chartEnergy(data) {
|
|
chartEnergy(data) {
|
|
let chart = echarts.init(this.$refs.energy);
|
|
let chart = echarts.init(this.$refs.energy);
|
|
let option = {
|
|
let option = {
|
|
@@ -382,9 +403,9 @@
|
|
lineStyle: {
|
|
lineStyle: {
|
|
width: 10,
|
|
width: 10,
|
|
color: [
|
|
color: [
|
|
- [0.3, '#F04243'],
|
|
|
|
- [0.5, '#FEBC00'],
|
|
|
|
- [0.8, '#25AAFE'],
|
|
|
|
|
|
+ [0.352, '#F04243'],
|
|
|
|
+ [0.414, '#FEBC00'],
|
|
|
|
+ [0.502, '#25AAFE'],
|
|
[1, '#06E0E9']
|
|
[1, '#06E0E9']
|
|
]
|
|
]
|
|
}
|
|
}
|
|
@@ -458,9 +479,9 @@
|
|
lineStyle: {
|
|
lineStyle: {
|
|
width: 10,
|
|
width: 10,
|
|
color: [
|
|
color: [
|
|
- [0.3, '#F04243'],
|
|
|
|
- [0.5, '#FEBC00'],
|
|
|
|
- [0.8, '#25AAFE'],
|
|
|
|
|
|
+ [0.352, '#F04243'],
|
|
|
|
+ [0.414, '#FEBC00'],
|
|
|
|
+ [0.502, '#25AAFE'],
|
|
[1, '#06E0E9']
|
|
[1, '#06E0E9']
|
|
]
|
|
]
|
|
}
|
|
}
|
|
@@ -497,10 +518,8 @@
|
|
};
|
|
};
|
|
chart.setOption(option);
|
|
chart.setOption(option);
|
|
},
|
|
},
|
|
- chartCold() {
|
|
|
|
|
|
+ chartCold(title, len, data) {
|
|
let chart = echarts.init(this.$refs.cold);
|
|
let chart = echarts.init(this.$refs.cold);
|
|
- let title = '冷水机组',
|
|
|
|
- len = "23.5"
|
|
|
|
let option = {
|
|
let option = {
|
|
title: {
|
|
title: {
|
|
text: ("{name|" + title + "}" + "\n{percent|" + len + "%}"),
|
|
text: ("{name|" + title + "}" + "\n{percent|" + len + "%}"),
|
|
@@ -544,11 +563,11 @@
|
|
]),
|
|
]),
|
|
new echarts.graphic.LinearGradient(1, 1, 0, 0, [{
|
|
new echarts.graphic.LinearGradient(1, 1, 0, 0, [{
|
|
offset: 0,
|
|
offset: 0,
|
|
- color: "transparent"
|
|
|
|
|
|
+ color: "#95C0FF"
|
|
},
|
|
},
|
|
{
|
|
{
|
|
offset: 1,
|
|
offset: 1,
|
|
- color: "#95C0FF"
|
|
|
|
|
|
+ color: "transparent"
|
|
}
|
|
}
|
|
]),
|
|
]),
|
|
new echarts.graphic.LinearGradient(0, 1, 1, 1, [{
|
|
new echarts.graphic.LinearGradient(0, 1, 1, 1, [{
|
|
@@ -594,23 +613,7 @@
|
|
labelLine: {
|
|
labelLine: {
|
|
show: false
|
|
show: false
|
|
},
|
|
},
|
|
- data: [{
|
|
|
|
- value: 3,
|
|
|
|
- name: "冷水机组"
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- value: 2,
|
|
|
|
- name: "冷冻水泵"
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- value: 1,
|
|
|
|
- name: "冷却水泵"
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- value: 1,
|
|
|
|
- name: "冷却塔"
|
|
|
|
- }
|
|
|
|
- ]
|
|
|
|
|
|
+ data: data
|
|
}]
|
|
}]
|
|
};
|
|
};
|
|
chart.setOption(option);
|
|
chart.setOption(option);
|
|
@@ -689,7 +692,8 @@
|
|
}
|
|
}
|
|
|
|
|
|
.cold-water-image {
|
|
.cold-water-image {
|
|
- padding-left: 10px;
|
|
|
|
|
|
+ width: 76px;
|
|
|
|
+ text-align: center;
|
|
}
|
|
}
|
|
|
|
|
|
.cold-water-list {
|
|
.cold-water-list {
|
|
@@ -1011,9 +1015,13 @@
|
|
font-size: 12px;
|
|
font-size: 12px;
|
|
line-height: 32px;
|
|
line-height: 32px;
|
|
padding: 0 10px;
|
|
padding: 0 10px;
|
|
|
|
+
|
|
|
|
+ &.title {
|
|
|
|
+ background: rgba(97, 133, 214, 0.08);
|
|
|
|
+ }
|
|
}
|
|
}
|
|
|
|
|
|
- .chart-tr:nth-child(2n-1) {
|
|
|
|
|
|
+ .chart-tr:nth-child(2n) {
|
|
background: rgba(97, 133, 214, 0.08);
|
|
background: rgba(97, 133, 214, 0.08);
|
|
}
|
|
}
|
|
|
|
|