sagacloud-cwc-pages/src/views/evaluate/evIndoorTemperature.vue

<template>
  <div class="p-echarts">
    <div class="pLegend">
      <i class="icon1"></i>按照策略执行
      <i class="icon2"></i>未按照策略执行
      <i class="icon3"></i>未按照策略执行，申诉通过
      <i class="icon4"></i>室内温度满足率
      <i class="icon5"></i>节能率
    </div>
    <div id="pCharts2" style="width: 100%;height: 100%;margin-top:20px;"></div>
  </div>
</template>

<script>
var echarts = require("echarts");
export default {
  data() {
    return {
      dataX: [],
      energyY: [],
      indoorY: [],
      strategy1: [],
      strategy2: [],
      strategy3: []
    };
  },
  props: ["energyDataList"],
  mounted() {
    this.$nextTick(function() {
      this.getDrawData();
    });
  },
  methods: {
    getDrawData() {
      this.dataX = [];
      this.energyY = [];
      this.indoorY = [];
      this.strategy1 = [];
      this.strategy2 = [];
      this.strategy3 = [];
      if (this.energyDataList) {
        this.energyDataList.forEach(el => {
          el.time = el.date.slice(4, 6) + "." + el.date.slice(6, 8);
          this.dataX.push(el.time);
          this.indoorY.push(
            el.tindoorFillRate ? el.tindoorFillRate.toFixed(2) : 0
          );
          this.energyY.push(
            el.energySavingRate ? el.energySavingRate.toFixed(2) : 0
          );
          if (el.chillerExecuteRateReal >= 75) {
            //绿色
            this.strategy1.push(2);
            this.strategy2.push(null);
            this.strategy3.push(null);
          } else if (el.chillerExecuteRate >= 75) {
            // 灰色
            this.strategy1.push(null);
            this.strategy2.push(null);
            this.strategy3.push(2);
          } else {
            this.strategy1.push(null);
            this.strategy2.push(2);
            this.strategy3.push(null);
          }
          // if (el.chillerExecuteRateReal < 75 && el.chillerExecuteRate >= 75) {
          //   //红色
          //   this.strategy2.push(2);
          // } else {
          //   this.strategy2.push(null);
          // }
          // if (el.chillerExecuteRateReal < 75 || el.chillerExecuteRate < 75) {
          //   //灰色
          //   this.strategy3.push(2);
          // } else {
          //   this.strategy3.push(null);
          // }
        });
          console.log(this.strategy3)
        this.drawIt();
      }
    },
    drawIt() {
      let myCharts = echarts.init(document.getElementById("pCharts2"));
      var colors = ["#34C724", "#8D9399", "#F54E45", "#00D6B9", "#0091FF"];
      var option = { 
        color: colors,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          },
          formatter:function(params){
            return params[0].name +'<br/>'+params[0].seriesName+'<br/>'+'<i class="icon1"></i> 室内温度:'+ (params[1].value || 0) +'% <br/>'+'<i class="icon2"></i>节能率:' + (params[2].value || 0) + '%'
          }
        
        },
        grid: {
          right: "5%",
          left: "5%"
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              alignWithLabel: true
            },
            splitLine: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: "#8D9399"
              }
            },
            axisLabel: {
              interval: 0 //代表显示所有x轴标签显示
            },
            data: this.dataX
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "节能率",
            axisLine: {
              lineStyle: {
                color: "#8D9399"
              }
            },
            splitLine: {
              show: false
            },
            min: 0,
            max: 100,
            position: "right",
            axisLabel: {
              formatter: "{value} %"
            }
          },
          {
            type: "value",
            show: false,
            name: "",
            min: 0,
            max: 1,
            position: "right",
            offset: 80,
            axisLine: {
              show: false
            },
            axisLabel: {
              formatter: function() {
                return "";
              }
            }
          },
          {
            type: "value",
            name: "室内温度满足率",
            axisLine: {
              lineStyle: {
                color: "#8D9399"
              }
            },
            splitLine: {
              show: false
            },     
            position: "left",
            axisLabel: {
              formatter: "{value} %"
            }
          }
        ],
        series: [
          {
            name: "按照策略执行",
            type: "bar",
            barWidth: 38,
            data: this.strategy1
          },
          {
            name: "未按照策略执行",
            type: "bar",
            barWidth: 38,
            data: this.strategy2
          },
          {
            name: "未按照策略执行，申诉通过",
            type: "bar",
            barWidth: 38,
            data: this.strategy3
          },
          {
            name: "室内温度满足率",
            type: "line",
            yAxisIndex: 2,
            data: this.indoorY
          },
          {
            name: "节能率",
            type: "line",
            yAxisIndex: 2,
            data: this.energyY
          }
        ]
      };
      myCharts.setOption(option);
      myCharts.on("click", param => {
        this.$router.push("/evaluate/evTwoLevelMenu");
        if (param.seriesName == "室内温度满足率") {
          this.$router.push({
            path: "/evaluate/evTwoLevelMenu",
            query: { type: 1, name: param.name }
          });
        } else if (param.seriesName == "节能率") {
          this.$router.push({
            path: "/evaluate/evTwoLevelMenu",
            query: { type: 2, name: param.name }
          });
        } else {
          this.$router.push({
            path: "/evaluate/evTwoLevelMenu",
            query: { type: 3, name: param.name }
          });
        }
      });
    }
  },
  watch: {
    energyDataList: {
      immediate: true,
      handler(val, old) {
        if (old) {
          this.getDrawData();
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.p-echarts {
  width: 100%;
  height: 100%;
  #pCharts2 {
    width: 100%;
    height: 100%;
  }
  .pLegend {
    font-size: 12px;
    color: #000000;
    text-align: center;
    margin-top: 20px;
   
  }
   .icon1 {
      display: inline-block;
      width: 12px;
      height: 12px;
      background: rgba(52, 199, 36, 1);
      vertical-align: middle;
      margin-right: 3px;
    }
    .icon2 {
      display: inline-block;
      width: 12px;
      height: 12px;
      background: #f54e45;
      vertical-align: middle;
      margin-right: 3px;
      margin-left: 20px;
    }
    .icon3 {
      display: inline-block;
      width: 12px;
      height: 12px;
      background: #8d9399;
      vertical-align: middle;
      margin-right: 3px;
      margin-left: 20px;
    }
    .icon4 {
      display: inline-block;
      height: 6px;
      width: 16px;
      background: #00d6b9;
      border-radius: 3px;
      vertical-align: middle;
      margin-right: 3px;
      margin-left: 20px;
    }
    .icon5 {
      display: inline-block;
      height: 6px;
      width: 16px;
      background: rgba(0, 145, 255, 1);
      border-radius: 3px;
      vertical-align: middle;
      margin-right: 3px;
      margin-left: 20px;
    }
}
</style>