smartpark-front/src/views/sourceAnaly/components/buildElectric.vue

<template>
  <div class="build-electric">
    <p class="yq-title">楼宇耗电分析</p>
    <div class="change-tab" style="position: absolute; top: 1rem; right: 1.25rem">
      <div @click="selectBuildType('')" :style="{
        backgroundColor: chooseBuildType == '' ? 'rgb(8,166,255)' : '',
      }">
        全部
      </div>
      <div @click="selectBuildType('1')" :style="{
        backgroundColor: chooseBuildType == '1' ? 'rgb(8,166,255)' : '',
      }">
        照明
      </div>
      <div @click="selectBuildType('2')" :style="{
        backgroundColor: chooseBuildType == '2' ? 'rgb(8,166,255)' : '',
      }">
        空调
      </div>
    </div>
    <div class="search-box">
      <div class="choose-time" style="float: left">
        <span>选择楼宇</span>
        <el-select placeholder="请选择楼宇" size="mini" style="margin-left: 10px; width: 7.5rem" v-model="choseBuild"
          @change="searchBuild">
          <el-option v-for="(item, index) in buildings" :label="item.name" :value="item.id" :key="index">
          </el-option>
        </el-select>
        <span>&nbsp;选择楼层</span>
        <el-select :disabled="
          this.choseBuild == '' || choseBuild == '08' || choseBuild == '09'
            ? true
            : false
        " placeholder="请选择楼层" size="mini" style="margin-left: 10px; width: 7.5rem" v-model="choseFloor"
          @change="getPieData">
          <el-option v-for="(item, index) in floors" :label="item.name" :value="item.id" :key="index" v-if="
            (choseBuild == '03' || choseBuild == '05') && item.id == '03'
              ? false
              : (choseBuild == '08' || choseBuild == '09') && item.id != ''
                ? false
                : true
          "></el-option>
        </el-select>
      </div>
      <div style="float: right">
        <el-date-picker size="mini" ref="buildDate" style="
            width: 9.375rem;
            margin-right: 10px;
            border-radius: 5px;
            background-color: rgb(152, 160, 173);
            border: 0;
          " v-model="chooseDateValue" :type="
            choseDate == 1
              ? 'year'
              : choseDate == 2
                ? 'month'
                : choseDate == 3
                  ? 'date'
                  : 'date'
          " :value-format="
  choseDate == 1
    ? 'yyyy'
    : choseDate == 2
      ? 'yyyy-MM'
      : choseDate == 3
        ? 'yyyy-MM-dd'
        : 'yyyy-MM-dd'
" :placeholder="
  choseDate == 1
    ? '选择年份'
    : choseDate == 2
      ? '选择月份'
      : choseDate == 3
        ? '选择日期'
        : '选择日期'
" clearable="false" @change="searchBuild">
        </el-date-picker>
        <div class="change-tab">
          <div @click="selectDate(1)" :style="{ backgroundColor: choseDate == 1 ? 'rgb(8,166,255)' : '' }">
            年
          </div>
          <div @click="selectDate(2)" :style="{ backgroundColor: choseDate == 2 ? 'rgb(8,166,255)' : '' }">
            月
          </div>
          <div @click="selectDate(3)" :style="{ backgroundColor: choseDate == 3 ? 'rgb(8,166,255)' : '' }">
            日
          </div>
        </div>
      </div>
    </div>
    <div class="electric-chart">
      <div class="leida">
        <p style="margin-left: 1.25rem">耗电分析图</p>
        <div id="pie" style="width: 15.625rem; height: 14.375rem"></div>
        <!-- <radarChart id="leida" ref="radar"></radarChart> -->
      </div>
      <lineCharts id="line-chart" ref="line" width="33rem" height="16.375rem"></lineCharts>
    </div>
  </div>
</template>

<script>
import radarChart from "./radarChart";
import lineCharts from "./lineCharts";
import { getBuildElectLine, getBuildElectPie } from "@/api/source/total";
import { dateFormat } from "@/util/date";
export default {
  props: {
    area: {
      type: Number,
      default: 1,
    },
  },
  components: {
    radarChart,
    lineCharts,
  },
  data() {
    return {
      choseDate: "3", //日期选择模式
      chooseDateValue: dateFormat(new Date(), "yyyy-MM-dd"), //日期选中值
      chooseBuildType: "", //查询类型 全部 照明 空调
      build: ["#1", "#2", "#3", "#4", "#5", "#6", "塔楼", "塔台辅楼"],
      buildColor: [
        "rgb(56,169,255)",
        "rgb(44,246,172)",
        "rgb(255,243,91)",
        "rgb(236,105,67)",
        "rgb(126,207,142)",
        "rgb(242,155,119)",
        "#c400fc",
        "#a3ff20",
      ],
      buildValue: "",
      choseBuild: "",
      buildings: [
        {
          id: "",
          name: "全部",
        },
        {
          id: "01",
          name: "1号楼",
        },
        {
          id: "02",
          name: "2号楼",
        },
        {
          id: "03",
          name: "3号楼",
        },
        {
          id: "04",
          name: "4号楼",
        },
        {
          id: "05",
          name: "5号楼",
        },
        {
          id: "06",
          name: "6号楼",
        },
        {
          id: "08",
          name: "塔楼",
        },
        {
          id: "09",
          name: "塔台辅楼",
        },
      ],
      choseFloor: "", //选择楼层 - 业务区，3号楼只有两层
      floors: [
        {
          id: "",
          name: "全部",
        },
        {
          id: "01",
          name: "1层",
        },
        {
          id: "02",
          name: "2层",
        },
        {
          id: "03",
          name: "3层",
        },
      ], //楼层 - 只针对耗电分析饼图
      intervalTime33: null,
    };
  },
  beforeDestroy() {
    if (this.intervalTime33) {
      console.log('clearInterval33')
      clearInterval(this.intervalTime33);
      this.intervalTime33 = null;
    }
  },
  mounted() {
    this.getData();
    this.intervalTime33 = setInterval(() => {
      this.getData();
    },30*60*1000)
  },
  methods: {
    //日期类型
    selectDate(index) {
      this.choseDate = index;
      if (this.chooseDateValue) {
        if (index == 1) {
          this.chooseDateValue =
            this.chooseDateValue.length > 4
              ? this.chooseDateValue.substring(0, 4)
              : this.chooseDateValue;
        } else if (index == 2) {
          this.chooseDateValue =
            this.chooseDateValue.length < 5
              ? dateFormat(new Date(), "yyyy-MM")
              : this.chooseDateValue.length > 7
                ? this.chooseDateValue.substring(0, 7)
                : this.chooseDateValue;
        } else if (index == 3) {
          this.chooseDateValue =
            this.chooseDateValue.length < 5
              ? dateFormat(new Date(), "yyyy-MM-dd")
              : this.chooseDateValue.length < 10
                ? dateFormat(new Date(), "yyyy-MM-dd")
                : this.chooseDateValue;
        }
      }
      this.$nextTick(() => {
        this.getData();
      });
    },
    // 耗电类型
    selectBuildType(index) {
      this.chooseBuildType = index;
      this.getData();
    },
    getData() {
      //折线图
      getBuildElectLine(
        "",
        this.buildValue,
        this.choseDate,
        this.chooseDateValue ? this.chooseDateValue : "",
        this.chooseBuildType
      ).then((res) => {
        let leidaData = [];
        let lineData = [];
        let floorData = [];
        const data = res.data.data;
        for (let i = 0; i < data.dataList.length; i++) {
          // leidaData.push(data.dataList[i].consume);
          lineData.push(data.dataList[i].consumeList);
          let floor =
            parseInt(data.dataList[i].locationNumber) === 0
              ? "-1"
              : parseInt(data.dataList[i].locationNumber);
          floorData.push(this.buildValue == '08' ? '塔楼' : this.buildValue == '09' ? '塔台辅楼' : floor + "F");
        }
        if (this.buildValue == "") {
          // this.getLeida(leidaData);
          this.getLineChart(lineData, data.dateList);
        } else {
          // this.floorLeida(leidaData, floorData);
          this.floorLineChart(lineData, floorData, data.dateList);
        }
      });
      this.getPieData();
    },
    getPieData() {
      //饼状图
      getBuildElectPie(
        "",
        this.buildValue,
        this.choseDate,
        this.chooseDateValue ? this.chooseDateValue : "",
        this.choseFloor ? this.choseFloor : ""
      ).then((res) => {
        const data = res.data.data;
        this.getPie(data);
      });
    },
    //耗电类型分析-饼状图
    getPie(data) {
      let chart_data = [];
      var myChart = this.$echarts.init(document.getElementById("pie"));
      data.map((item, index) => {
        if (item.percent != "0.00") {
          chart_data.push(item);
        }
      });
      let option = {
        // color: ["#07a6ff", "#f2b448", "#01feae", "#ff8b2e"], //["#f2b448", "#07a6ff"],//
        tooltip: {
          show: "item",
        },
        series: [
          {
            name: "耗电分析",
            type: "pie",
            radius: "45%",
            center: ["50%", "40%"],
            data: chart_data,
            label: {
              formatter: "{b}\n{d}%",
              color: "rgba(255,255,255,0.5)",
              textBorderWidth: 0,
            },
            labelLine: {
              length: 10,
              length2: 6,
              lineStyle: {
                color: "rgba(255,255,255,0.5)",
                showAbove: true,
              },
            },
            emphasis: {
              disabled: false,
              scale: false,
            },
          },
          {
            name: "耗电分析",
            type: "pie",
            radius: "45%",
            center: ["50%", "40%"],
            data: chart_data,
            label: {
              position: "inner",
              formatter: "{c}",
            },
            z: 4,
          },
        ],
      };
      myChart.setOption(option);
    },
    getLeida(value) {
      const data = [
        {
          value: value,
          name: "楼宇耗电",
        },
      ];
      const title = [
        { name: "#1" },
        { name: "#2" },
        { name: "#3" },
        { name: "#4" },
        { name: "#5" },
        { name: "#6" },
      ];
      this.$refs.radar.getLeidaChart(
        "耗电",
        "rgb(45,247,173)",
        "rgba(45,247,173,.8)",
        data,
        title
      );
    },
    floorLeida(value, floorData) {
      let _bgArr = [...value].sort((n1, n2) => {
        return n2 - n1;
      });
      let bigMax = _bgArr[0] + 100;
      let data = [
        {
          value: [0, 0, 0, 0, 0, 0],
          name: "楼宇耗电",
        },
      ];
      let title = [
        { name: "1F", max: 0 },
        { name: "", max: 0 },
        { name: "2F", max: 0 },
        { name: "", max: 0 },
        { name: "3F", max: 0 },
        { name: "", max: 0 },
      ];
      for (let i = 0; i < title.length; i++) {
        let isFindIndex = floorData.findIndex((item) => item == title[i].name);
        if (isFindIndex == -1) {
          title[i] = { name: "", max: bigMax };
        } else {
          data[0].value[i] = value[isFindIndex];
          title[i] = { name: title[i].name, max: bigMax };
        }
      }
      // alert(data[0].value);
      this.$refs.radar.getLeidaChart(
        "耗电",
        "rgb(45,247,173)",
        "rgba(45,247,173,.8)",
        data,
        title
      );
    },
    getLineChart(value, dateList) {
      const data = [];
      for (let i = 0; i < this.build.length; i++) {
        data.push({
          name: this.build[i],
          type: "line",
          data: value[i],
          symbol: "rect",
          symbolSize: 4,
          itemStyle: {
            color: this.buildColor[i],
          },
          lineStyle: {
            color: this.buildColor[i],
            width: 1,
          },
        });
      }
      this.$refs.line.getLineCharts("耗电量(kw·h)", data, dateList);
    },
    floorLineChart(value, floorData, dateList) {
      let data = [];
      for (let i = 0; i < floorData.length; i++) {
        data.push({
          name: floorData[i],
          type: "line",
          data: value[i],
          symbol: "rect",
          symbolSize: 4,
          itemStyle: {
            color: this.buildColor[i],
          },
          lineStyle: {
            color: this.buildColor[i],
            width: 1,
          },
        });
      }
      // console.log("折现楼层", data);
      this.$refs.line.getLineCharts("耗电量(kw·h)", data, dateList);
    },
    searchBuild() {
      this.buildValue = this.choseBuild;
      this.choseFloor = "";
      this.getData();
      // this.floorLeida();
      // this.floorLineChart()
    },
  },
};
</script>

<style scoped lang="scss">
.build-electric {
  width: 50.062rem;
  height: 22.562rem;
  background-image: url(../../../../public/img/analysis/build-electric.png);
  background-size: 100% 100%;
  margin-left: 1.562rem;
  position: relative;

  // overflow: hidden;
  .yq-title {
    margin: 0.7rem 0 0 2.5rem;
    color: white;
    font-weight: bold;
  }

  .change-tab {
    display: inline-flex;
    border: 1px solid #08a6ff;
    width: 7.5rem;
    justify-content: flex-start;
    border-radius: 0.312rem;
    cursor: pointer;
    font-size: 14px;
    z-index: 100;

    div {
      color: white;
      width: 50%;
      text-align: center;
      border-right: 1px solid rgb(8, 166, 255);
    }
  }

  .search-box {
    position: absolute;
    left: 1.25rem;
    top: 3.875rem;
    right: 1.25rem;
    overflow: hidden;

    /deep/ .el-date-editor .el-input__inner {
      background-color: rgb(152, 160, 173);
      color: rgba(255, 255, 255, 0.7);
      border-color: rgb(152, 160, 173);
    }

    /deep/ .el-date-editor .el-input__inner::-webkit-input-placeholder {
      color: white;
    }
  }

  .electric-chart {
    margin-top: 3rem;
    // margin-left: 1.25rem;
    display: flex;

    .leida {
      p {
        color: rgb(7, 230, 236);
      }

      #leida {
        width: 15.625rem;
        height: 14.375rem;
      }
    }

    #line-chart {
      width: 33rem;
      height: 16.875rem;
    }
  }

  .choose-time {
    // position: absolute;
    // top: 0.5rem;
    // right: 2.5rem;

    span {
      color: rgb(8, 231, 235);
      font-size: 14px;
    }

    .search-btn {
      background-color: rgb(1, 238, 235);
      color: #0f93e1;
      border: 0;
      width: 4.687rem;
      margin-left: 0.937rem;
      font-size: 15px;
    }

    /deep/ .el-select .el-input__inner {
      background-color: rgb(152, 160, 173);
      color: rgba(255, 255, 255, 0.7);
      border-color: rgb(152, 160, 173);
    }

    /deep/ .el-select .el-input__inner::-webkit-input-placeholder {
      color: white;
    }
  }
}
</style>