|
|
@@ -5,12 +5,8 @@
|
|
|
<div class="hui-chart-title">
|
|
|
楼层用电量统计
|
|
|
<div class="combination-select">
|
|
|
- <el-select size="mini" v-model="value" placeholder="请选择">
|
|
|
- <el-option label="1F" :value="1">
|
|
|
- </el-option>
|
|
|
- <el-option label="2F" :value="2">
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
+ <el-cascader size="mini" v-model="value" :options="treeData" :props="{value:'id',label:'name'}"
|
|
|
+ @change="changeValue"></el-cascader>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="floor-hvac-content">
|
|
|
@@ -22,8 +18,8 @@
|
|
|
</div>
|
|
|
<div class="number-text">
|
|
|
<div class="number-count">
|
|
|
- <span class="alibaba number">18</span>
|
|
|
- <span class="unit">kwh</span>
|
|
|
+ <span class="alibaba number">{{electricityData.dayValue}}</span>
|
|
|
+ <span class="unit">{{electricityData.unit}}</span>
|
|
|
</div>
|
|
|
<div class="number-label">
|
|
|
当日用电量
|
|
|
@@ -36,8 +32,8 @@
|
|
|
</div>
|
|
|
<div class="number-text">
|
|
|
<div class="number-count">
|
|
|
- <span class="alibaba number">18</span>
|
|
|
- <span class="unit">kwh</span>
|
|
|
+ <span class="alibaba number">{{electricityData.dayColdValue}}</span>
|
|
|
+ <span class="unit">{{electricityData.unit}}</span>
|
|
|
</div>
|
|
|
<div class="number-label">
|
|
|
当日制冷量
|
|
|
@@ -48,56 +44,62 @@
|
|
|
<div class="floor-hvac-list">
|
|
|
<div class="hvac-tr">
|
|
|
<div class="hvac-td hvac-flex">
|
|
|
- 单位面积用电量(kwh/m³)
|
|
|
- </div>
|
|
|
- <div class="hvac-td alibaba hvac-80 number">
|
|
|
- 156.2
|
|
|
+ 单位面积用电量({{electricityData.unit}}/m²)
|
|
|
</div>
|
|
|
+ <div class="hvac-td alibaba hvac-80 number">{{electricityData.projectItemValue}}</div>
|
|
|
<div class="hvac-td alibaba hvac-50 label">
|
|
|
年环比
|
|
|
</div>
|
|
|
<div class="hvac-td">
|
|
|
- <div>
|
|
|
- <span class="color-green alibaba">11.23%</span>
|
|
|
+ <div v-if="electricityData.projectItemYearValue > 0">
|
|
|
+ <span class="color-red alibaba">{{electricityData.projectItemYearValue}}%</span>
|
|
|
+ <i class="el-icon-top color-red"></i>
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ <span
|
|
|
+ class="color-green alibaba">{{electricityData.projectItemYearValue}}%</span>
|
|
|
<i class="el-icon-bottom color-green"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="hvac-tr">
|
|
|
<div class="hvac-td hvac-flex">
|
|
|
- 当月用电量(kwh)
|
|
|
+ 当月用电量({{electricityData.unit}})
|
|
|
</div>
|
|
|
<div class="hvac-td alibaba hvac-80 number">
|
|
|
- 58
|
|
|
+ {{electricityData.monthValue}}
|
|
|
</div>
|
|
|
<div class="hvac-td alibaba hvac-50 label">
|
|
|
- <div>年环比</div>
|
|
|
<div>月环比</div>
|
|
|
</div>
|
|
|
<div class="hvac-td">
|
|
|
- <div>
|
|
|
- <span class="color-green alibaba">11.23%</span>
|
|
|
- <i class="el-icon-bottom color-green"></i>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <span class="color-red alibaba">1.23%</span>
|
|
|
+ <div v-if="electricityData.chainMonthValue > 0">
|
|
|
+ <span class="color-red alibaba">{{electricityData.chainMonthValue}}%</span>
|
|
|
<i class="el-icon-top color-red"></i>
|
|
|
</div>
|
|
|
+ <div v-else>
|
|
|
+ <span class="color-green alibaba">{{electricityData.chainMonthValue}}%</span>
|
|
|
+ <i class="el-icon-bottom color-green"></i>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="hvac-tr">
|
|
|
<div class="hvac-td hvac-flex">
|
|
|
- 当年用电量(kwh)
|
|
|
+ 当年用电量({{electricityData.unit}})
|
|
|
</div>
|
|
|
<div class="hvac-td alibaba hvac-80 number">
|
|
|
- 156.2
|
|
|
+ {{electricityData.yearValue}}
|
|
|
</div>
|
|
|
<div class="hvac-td alibaba hvac-50 label">
|
|
|
年环比
|
|
|
</div>
|
|
|
<div class="hvac-td">
|
|
|
- <div>
|
|
|
- <span class="color-green alibaba">11.23%</span>
|
|
|
+ <div v-if="electricityData.chainYearValue > 0">
|
|
|
+ <span class="color-red alibaba">{{electricityData.chainYearValue}}%</span>
|
|
|
+ <i class="el-icon-top color-red"></i>
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ <span class="color-green alibaba">{{electricityData.chainYearValue}}%</span>
|
|
|
<i class="el-icon-bottom color-green"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -107,9 +109,6 @@
|
|
|
<div class="hvac-electricity-box">
|
|
|
<div class="hvac-chart-title">
|
|
|
<span class="label">楼层电量趋势图</span>
|
|
|
- <div class="year-picker">
|
|
|
- <el-year-picker size="mini" v-model="year"></el-year-picker>
|
|
|
- </div>
|
|
|
</div>
|
|
|
<div ref="chart1" class="hvac-chart-box"></div>
|
|
|
</div>
|
|
|
@@ -118,25 +117,22 @@
|
|
|
<div class="floor-hvac-item floor-hvac-item-small">
|
|
|
<div class="hui-chart-title">
|
|
|
楼层用电量排名
|
|
|
- <div class="year-picker">
|
|
|
- <el-year-picker size="mini" v-model="year"></el-year-picker>
|
|
|
- </div>
|
|
|
</div>
|
|
|
<div class="floor-hvac-chart">
|
|
|
<div class="floor-hvac-chart-item">
|
|
|
<span class="label">平均值</span>
|
|
|
- <span class="alibaba">72.36</span>
|
|
|
- <span class="label">kwh</span>
|
|
|
+ <span class="alibaba">{{electricityChartData.average}}</span>
|
|
|
+ <span class="label">{{electricityData.unit}}</span>
|
|
|
</div>
|
|
|
<div class="floor-hvac-chart-item">
|
|
|
<span class="label">最大值</span>
|
|
|
- <span class="alibaba">72.36</span>
|
|
|
- <span class="label">kwh</span>
|
|
|
+ <span class="alibaba">{{electricityChartData.max}}</span>
|
|
|
+ <span class="label">{{electricityData.unit}}</span>
|
|
|
</div>
|
|
|
<div class="floor-hvac-chart-item">
|
|
|
<span class="label">最小值</span>
|
|
|
- <span class="alibaba">12.36</span>
|
|
|
- <span class="label">kwh</span>
|
|
|
+ <span class="alibaba">{{electricityChartData.min}}</span>
|
|
|
+ <span class="label">{{electricityData.unit}}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div ref="chart3" class="hvac-chart-box"></div>
|
|
|
@@ -145,27 +141,19 @@
|
|
|
<div class="floor-hvac-flex">
|
|
|
<div class="floor-hvac-item floor-hvac-item-big">
|
|
|
<div class="hui-chart-title">
|
|
|
- 楼层用电量统计
|
|
|
- <div class="combination-select">
|
|
|
- <el-select size="mini" v-model="value" placeholder="请选择">
|
|
|
- <el-option label="1F" :value="1">
|
|
|
- </el-option>
|
|
|
- <el-option label="2F" :value="2">
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
+ 楼层用水量统计
|
|
|
</div>
|
|
|
<div class="floor-hvac-content">
|
|
|
<div class="floor-hvac-test">
|
|
|
<div class="floor-hvac-number">
|
|
|
<div class="number-item">
|
|
|
<div class="number-icon">
|
|
|
- <i class="iconfont huifont-dian"></i>
|
|
|
+ <i class="iconfont huifont-shuiwei"></i>
|
|
|
</div>
|
|
|
<div class="number-text">
|
|
|
<div class="number-count">
|
|
|
- <span class="alibaba number">18</span>
|
|
|
- <span class="unit">t</span>
|
|
|
+ <span class="alibaba number">{{waterData.dayValue}}</span>
|
|
|
+ <span class="unit">{{waterData.unit}}</span>
|
|
|
</div>
|
|
|
<div class="number-label">
|
|
|
当日用水量
|
|
|
@@ -176,56 +164,61 @@
|
|
|
<div class="floor-hvac-list">
|
|
|
<div class="hvac-tr">
|
|
|
<div class="hvac-td hvac-flex">
|
|
|
- 单位面积用水量(t/m³)
|
|
|
- </div>
|
|
|
- <div class="hvac-td alibaba hvac-80 number">
|
|
|
- 156.2
|
|
|
+ 单位面积用水量({{waterData.unit}}/m²)
|
|
|
</div>
|
|
|
+ <div class="hvac-td alibaba hvac-80 number">{{waterData.projectItemValue}}</div>
|
|
|
<div class="hvac-td alibaba hvac-50 label">
|
|
|
年环比
|
|
|
</div>
|
|
|
<div class="hvac-td">
|
|
|
- <div>
|
|
|
- <span class="color-green alibaba">11.23%</span>
|
|
|
+ <div v-if="waterData.projectItemYearValue > 0">
|
|
|
+ <span class="color-red alibaba">{{waterData.projectItemYearValue}}%</span>
|
|
|
+ <i class="el-icon-top color-red"></i>
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ <span class="color-green alibaba">{{waterData.projectItemYearValue}}%</span>
|
|
|
<i class="el-icon-bottom color-green"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="hvac-tr">
|
|
|
<div class="hvac-td hvac-flex">
|
|
|
- 当月用水量(t)
|
|
|
+ 当月用电量({{waterData.unit}})
|
|
|
</div>
|
|
|
<div class="hvac-td alibaba hvac-80 number">
|
|
|
- 58
|
|
|
+ {{waterData.monthValue}}
|
|
|
</div>
|
|
|
<div class="hvac-td alibaba hvac-50 label">
|
|
|
- <div>年环比</div>
|
|
|
<div>月环比</div>
|
|
|
</div>
|
|
|
<div class="hvac-td">
|
|
|
- <div>
|
|
|
- <span class="color-green alibaba">11.23%</span>
|
|
|
- <i class="el-icon-bottom color-green"></i>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <span class="color-red alibaba">1.23%</span>
|
|
|
+ <div v-if="waterData.chainMonthValue > 0">
|
|
|
+ <span class="color-red alibaba">{{waterData.chainMonthValue}}%</span>
|
|
|
<i class="el-icon-top color-red"></i>
|
|
|
</div>
|
|
|
+ <div v-else>
|
|
|
+ <span class="color-green alibaba">{{waterData.chainMonthValue}}%</span>
|
|
|
+ <i class="el-icon-bottom color-green"></i>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="hvac-tr">
|
|
|
<div class="hvac-td hvac-flex">
|
|
|
- 当年用水量(t)
|
|
|
+ 当年用电量({{waterData.unit}})
|
|
|
</div>
|
|
|
<div class="hvac-td alibaba hvac-80 number">
|
|
|
- 156.2
|
|
|
+ {{waterData.yearValue}}
|
|
|
</div>
|
|
|
<div class="hvac-td alibaba hvac-50 label">
|
|
|
年环比
|
|
|
</div>
|
|
|
<div class="hvac-td">
|
|
|
- <div>
|
|
|
- <span class="color-green alibaba">11.23%</span>
|
|
|
+ <div v-if="waterData.chainYearValue > 0">
|
|
|
+ <span class="color-red alibaba">{{waterData.chainYearValue}}%</span>
|
|
|
+ <i class="el-icon-top color-red"></i>
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ <span class="color-green alibaba">{{waterData.chainYearValue}}%</span>
|
|
|
<i class="el-icon-bottom color-green"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -235,9 +228,6 @@
|
|
|
<div class="hvac-electricity-box">
|
|
|
<div class="hvac-chart-title">
|
|
|
<span class="label">楼层水量趋势图</span>
|
|
|
- <div class="year-picker">
|
|
|
- <el-year-picker size="mini" v-model="year"></el-year-picker>
|
|
|
- </div>
|
|
|
</div>
|
|
|
<div ref="chart2" class="hvac-chart-box"></div>
|
|
|
</div>
|
|
|
@@ -246,25 +236,22 @@
|
|
|
<div class="floor-hvac-item floor-hvac-item-small">
|
|
|
<div class="hui-chart-title">
|
|
|
楼层用水量排名
|
|
|
- <div class="year-picker">
|
|
|
- <el-year-picker size="mini" v-model="year"></el-year-picker>
|
|
|
- </div>
|
|
|
</div>
|
|
|
<div class="floor-hvac-chart">
|
|
|
<div class="floor-hvac-chart-item">
|
|
|
<span class="label">平均值</span>
|
|
|
- <span class="alibaba">72.36</span>
|
|
|
- <span class="label">t</span>
|
|
|
+ <span class="alibaba">{{waterChartData.average}}</span>
|
|
|
+ <span class="label">{{waterData.unit}}</span>
|
|
|
</div>
|
|
|
<div class="floor-hvac-chart-item">
|
|
|
<span class="label">最大值</span>
|
|
|
- <span class="alibaba">72.36</span>
|
|
|
- <span class="label">t</span>
|
|
|
+ <span class="alibaba">{{waterChartData.max}}</span>
|
|
|
+ <span class="label">{{waterData.unit}}</span>
|
|
|
</div>
|
|
|
<div class="floor-hvac-chart-item">
|
|
|
<span class="label">最小值</span>
|
|
|
- <span class="alibaba">12.36</span>
|
|
|
- <span class="label">t</span>
|
|
|
+ <span class="alibaba">{{waterChartData.min}}</span>
|
|
|
+ <span class="label">{{waterData.unit}}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div ref="chart4" class="hvac-chart-box"></div>
|
|
|
@@ -275,36 +262,139 @@
|
|
|
|
|
|
<script>
|
|
|
import elYearPicker from '@/components/common/elYearPicker'
|
|
|
+ import {
|
|
|
+ getProjectDetailById
|
|
|
+ } from '@/httpApi/space'
|
|
|
+ import {
|
|
|
+ getEnergyDeviceList
|
|
|
+ } from '@/httpApi/test'
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- value: '',
|
|
|
- year: []
|
|
|
+ treeData: [],
|
|
|
+ electricityData: {
|
|
|
+ unit: "kwh",
|
|
|
+ dayValue: 0,
|
|
|
+ dayColdValue: 0,
|
|
|
+ yearValue: 0,
|
|
|
+ chainYearValue: 0,
|
|
|
+ monthValue: 0,
|
|
|
+ chainMonthValue: 0,
|
|
|
+ ratedDayValue: 0,
|
|
|
+ projectItemValue: 0,
|
|
|
+ projectItemYearValue: 0,
|
|
|
+ },
|
|
|
+ electricityChartData: {
|
|
|
+ max: 0,
|
|
|
+ min: 0,
|
|
|
+ average: 0
|
|
|
+ },
|
|
|
+ waterData: {
|
|
|
+ unit: "t",
|
|
|
+ dayValue: 0,
|
|
|
+ dayColdValue: 0,
|
|
|
+ yearValue: 0,
|
|
|
+ chainYearValue: 0,
|
|
|
+ monthValue: 0,
|
|
|
+ chainMonthValue: 0,
|
|
|
+ ratedDayValue: 0,
|
|
|
+ projectItemValue: 0,
|
|
|
+ projectItemYearValue: 0
|
|
|
+ },
|
|
|
+ waterChartData: {
|
|
|
+ max: 0,
|
|
|
+ min: 0,
|
|
|
+ average: 0
|
|
|
+ },
|
|
|
+ value: [],
|
|
|
+ year: [],
|
|
|
+ projectItemTargetList: [],
|
|
|
+ nowData: {},
|
|
|
+ nowProjectItem: {}
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
this.$nextTick(() => {
|
|
|
- this.chart1(this.$refs.chart1, [1, 2, 2, 3, 2, 3], [2, 3, 3, 4, 3, 4], new echarts.graphic
|
|
|
- .LinearGradient(0, 0, 0, 1, [{
|
|
|
- offset: 0,
|
|
|
- color: '#FFD577'
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 1,
|
|
|
- color: '#FFAA42'
|
|
|
- }
|
|
|
- ]))
|
|
|
- this.chart1(this.$refs.chart2, [1, 2, 2, 3, 2, 3], [2, 3, 3, 4, 3, 4], new echarts.graphic
|
|
|
- .LinearGradient(0, 0, 0, 1, [{
|
|
|
- offset: 0,
|
|
|
- color: '#80DCBD'
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 1,
|
|
|
- color: '#49B788'
|
|
|
- }
|
|
|
- ]))
|
|
|
- this.chart(this.$refs.chart3, [1, 2, 2, 3, 2, 3, 1, 2, 2, 3, 2, 3, 1, 1], new echarts.graphic
|
|
|
+ getProjectDetailById(this.$store.getters.project.id).then(res => {
|
|
|
+ if (res.state) {
|
|
|
+ this.treeData = res.data.projectItemList.map(node => {
|
|
|
+ node['children'] = node.projectItemTargetList.map(target => {
|
|
|
+ target['id'] = -target.id
|
|
|
+ return target;
|
|
|
+ });
|
|
|
+ if (node['children'].length > 0 && this.value.length === 0) {
|
|
|
+ this.projectItemTargetList = node.children.reverse();
|
|
|
+ this.value = [node.id, this.projectItemTargetList[0].id];
|
|
|
+ this.nowProjectItem = node;
|
|
|
+ }
|
|
|
+ return node;
|
|
|
+ });
|
|
|
+ this.init();
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ init() {
|
|
|
+ getEnergyDeviceList({
|
|
|
+ projectItemId: this.value[0],
|
|
|
+ type: 14,
|
|
|
+ }).then(res => {
|
|
|
+ if (res.state) {
|
|
|
+ this.nowData = res.data;
|
|
|
+ this.successFunc();
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ successFunc() {
|
|
|
+ let data = this.nowData;
|
|
|
+ let electricityData = data.filter(node => node.column3 === '电');
|
|
|
+ let waterData = data.filter(node => node.column3 === '水');
|
|
|
+ let nowElectricityData = electricityData.filter(node => node.projectItemTargetId == -this
|
|
|
+ .value[1])
|
|
|
+ if (electricityData.length > 0 && nowElectricityData.length > 0) {
|
|
|
+ this.electricityData = JSON.parse(nowElectricityData[0].data);
|
|
|
+ let chartData = JSON.parse(nowElectricityData[0].column1);
|
|
|
+ this.chart1(this.$refs.chart1, chartData.x, chartData.data, new echarts
|
|
|
+ .graphic
|
|
|
+ .LinearGradient(0, 0, 0, 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: '#FFD577'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: '#FFAA42'
|
|
|
+ }
|
|
|
+ ]))
|
|
|
+ } else {
|
|
|
+ this.electricityData = {
|
|
|
+ unit: "kwh",
|
|
|
+ dayValue: 0,
|
|
|
+ dayColdValue: 0,
|
|
|
+ yearValue: 0,
|
|
|
+ chainYearValue: 0,
|
|
|
+ monthValue: 0,
|
|
|
+ chainMonthValue: 0,
|
|
|
+ ratedDayValue: 0,
|
|
|
+ projectItemValue: 0,
|
|
|
+ projectItemYearValue: 0,
|
|
|
+ max: 0,
|
|
|
+ min: 0,
|
|
|
+ average: 0
|
|
|
+ }
|
|
|
+ this.chart1(this.$refs.chart1, [], [], new echarts
|
|
|
+ .graphic
|
|
|
+ .LinearGradient(0, 0, 0, 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: '#FFD577'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: '#FFAA42'
|
|
|
+ }
|
|
|
+ ]))
|
|
|
+ }
|
|
|
+ this.initChart(electricityData, this.$refs.chart3, new echarts.graphic
|
|
|
.LinearGradient(0, 0, 0, 1, [{
|
|
|
offset: 0,
|
|
|
color: '#FFD577'
|
|
|
@@ -313,9 +403,50 @@
|
|
|
offset: 1,
|
|
|
color: '#FFAA42'
|
|
|
}
|
|
|
- ]))
|
|
|
- this.chart(this.$refs.chart4, [1, 2, 2, 3, 2, 3, 1, 2, 2, 3, 2, 3, 1, 1], new echarts.graphic
|
|
|
- .LinearGradient(0, 0, 0, 1, [{
|
|
|
+ ]));
|
|
|
+ let nowWaterData = waterData.filter(node => node.projectItemTargetId == -this.value[1])
|
|
|
+ if (waterData.length > 0 && nowWaterData.length > 0) {
|
|
|
+ this.waterData = JSON.parse(nowWaterData[0].data);
|
|
|
+ let chartData = JSON.parse(nowWaterData[0].column1);
|
|
|
+ this.chart1(this.$refs.chart2, chartData.x, chartData.data, new echarts
|
|
|
+ .graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: '#80DCBD'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: '#49B788'
|
|
|
+ }
|
|
|
+ ]))
|
|
|
+ } else {
|
|
|
+ this.waterData = {
|
|
|
+ unit: "t",
|
|
|
+ dayValue: 0,
|
|
|
+ dayColdValue: 0,
|
|
|
+ yearValue: 0,
|
|
|
+ chainYearValue: 0,
|
|
|
+ monthValue: 0,
|
|
|
+ chainMonthValue: 0,
|
|
|
+ ratedDayValue: 0,
|
|
|
+ projectItemValue: 0,
|
|
|
+ projectItemYearValue: 0,
|
|
|
+ max: 0,
|
|
|
+ min: 0,
|
|
|
+ average: 0
|
|
|
+ }
|
|
|
+ this.chart1(this.$refs.chart2, [], [], new echarts.graphic.LinearGradient(0, 0, 0, 1,
|
|
|
+ [{
|
|
|
+ offset: 0,
|
|
|
+ color: '#80DCBD'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: '#49B788'
|
|
|
+ }
|
|
|
+ ]))
|
|
|
+ }
|
|
|
+ this.initChart(waterData, this.$refs.chart4, new echarts.graphic.LinearGradient(0, 0, 0, 1,
|
|
|
+ [{
|
|
|
offset: 0,
|
|
|
color: '#80DCBD'
|
|
|
},
|
|
|
@@ -323,11 +454,25 @@
|
|
|
offset: 1,
|
|
|
color: '#49B788'
|
|
|
}
|
|
|
- ]))
|
|
|
- })
|
|
|
- },
|
|
|
- methods: {
|
|
|
- chart(elem, data, color) {
|
|
|
+ ]));
|
|
|
+
|
|
|
+ },
|
|
|
+ initChart(data, elem, color) {
|
|
|
+ let arr = [];
|
|
|
+ for (let i = 0; i < this.projectItemTargetList.length; i++) {
|
|
|
+ let item = data.find(item => item.projectItemTargetId == -this.projectItemTargetList[i].id);
|
|
|
+ let num = item ? item.column2 : 0;
|
|
|
+ arr.push(num);
|
|
|
+ }
|
|
|
+ this.chart(elem, arr, this.projectItemTargetList.map(node => node.name), color);
|
|
|
+ },
|
|
|
+ changeValue(val) {
|
|
|
+ if (this.nowProjectItem.id === this.value[0]) return this.successFunc();
|
|
|
+ this.nowProjectItem = this.treeData.find(node => node.id === this.value[0]);
|
|
|
+ this.projectItemTargetList = this.nowProjectItem.children;
|
|
|
+ this.init();
|
|
|
+ },
|
|
|
+ chart(elem, data, x, color) {
|
|
|
let chart = echarts.init(elem);
|
|
|
let option = {
|
|
|
tooltip: {
|
|
|
@@ -355,15 +500,12 @@
|
|
|
},
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
- data: ['1F', '2F', '3F', '4F', '5F', '6F', '7F', '8F', '9F', '10F', '11F', '12F', '13F',
|
|
|
- '14F'
|
|
|
- ],
|
|
|
+ data: x,
|
|
|
axisLabel: {
|
|
|
margin: 4,
|
|
|
color: '#D0DEEE',
|
|
|
fontSize: 10
|
|
|
},
|
|
|
- boundaryGap: false,
|
|
|
axisLine: {
|
|
|
lineStyle: {
|
|
|
color: '#6C8097'
|
|
|
@@ -404,7 +546,7 @@
|
|
|
};
|
|
|
chart.setOption(option);
|
|
|
},
|
|
|
- chart1(elem, data, data1, color) {
|
|
|
+ chart1(elem, x, data, color) {
|
|
|
let chart = echarts.init(elem);
|
|
|
let option = {
|
|
|
tooltip: {
|
|
|
@@ -432,7 +574,7 @@
|
|
|
},
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
- data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'],
|
|
|
+ data: x,
|
|
|
axisLabel: {
|
|
|
margin: 4,
|
|
|
color: '#D0DEEE',
|
|
|
@@ -475,44 +617,6 @@
|
|
|
barWidth: 10,
|
|
|
color: color,
|
|
|
z: 99
|
|
|
- }, {
|
|
|
- data: data1,
|
|
|
- type: 'line',
|
|
|
- symbolSize: 6,
|
|
|
- color: ['#AFB9CC'],
|
|
|
- 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: data1,
|
|
|
- type: 'line',
|
|
|
- showSymbol: false,
|
|
|
- color: ['#AFB9CC'],
|
|
|
- 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);
|
