wanzai_lingdaojiashi/src/components/energy/energyLeft.vue

<template>
  <div class="container">
    <!-- 标题区域 -->
    <div class="title">
      <div class="title_text">能耗管理</div>
      <div class="title_sub">Energy Management</div>
    </div>

    <!-- 内容区域 -->
    <div class="content">
      <div class="sub_title">能耗统计</div>
      <!-- 用电量总计区域 -->
      <div class="energy_box">
        <div class="energy_box_left">
          <div class="left_top">
            <img src="@/assets/images/energy-left-icon.png" />
            用电量总计（kw.h）
          </div>
          <div class="left_bottom" ref="eleValueDom">{{ eleValue }}</div>
        </div>
        <div class="energy_box_right">
          <!-- <div class="right_top">增速</div>
          <div class="right_bottom">
            <div ref="eleSpeedDom">{{ eleSpeed }}</div>
            <span>%</span>
          </div> -->
        </div>
      </div>

      <!-- 用水量总计区域 -->
      <div class="energy_box">
        <div class="energy_box_left">
          <div class="left_top">
            <img src="@/assets/images/energy-left-icon2.png" />
            用水量总计（m³）
          </div>
          <div class="left_bottom" ref="waterValueDom">{{ waterValue }}</div>
        </div>
        <div class="energy_box_right">
          <!-- <div class="right_top">增速</div>
          <div class="right_bottom">
            <div ref="waterSpeedDom">{{ waterSpeed }}</div>
            <span>%</span>
          </div> -->
        </div>
      </div>

      <!-- 平均用量区域 -->
      <div class="evenly">
        <div class="evenly_box">
          <img src="@/assets/images/evenly-box-icon.png" />
          <div class="box_right">
            <div class="right_top">
              <div ref="eleValueAvDom">{{ eleValueAv }}</div>
              <span>kw.h</span>
            </div>
            <div>人均用电量</div>
          </div>
        </div>

        <div class="evenly_box">
          <img src="@/assets/images/evenly-box-icon2.png" />
          <div class="box_right">
            <div class="right_top">
              <div ref="waterValueAvDom">{{ waterValueAv }}</div>
              <span>m³</span>
            </div>
            <div>人均用水量</div>
          </div>
        </div>
      </div>

      <div class="sub_title">区域能耗统计</div>

      <!-- 水电切换按钮区域 -->
      <div class="change">
        <div
          class="button"
          :class="currentIndex === '水' ? 'active' : ''"
          @click="handleClickWater"
        >
          水
        </div>
        <div
          class="button"
          :class="currentIndex === '电' ? 'active' : ''"
          @click="handleClickEle"
        >
          电
        </div>
      </div>

      <!-- 区域能耗统计图表 -->
      <div class="bar" ref="barChart"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import * as Echarts from "echarts";
import { countUpNum } from "@/utils/countUpNum";
// 引入能耗管理相关的接口
import {
  reqGetEnergyAll,
  reqGetEnergyevenly,
  reqGetEnergyMonth,
} from "@/api/energy/index";

// 用电总量
const eleValue = ref();
const eleValueDom = ref();

// 用电速率
// const eleSpeed = ref(10.06);
// const eleSpeedDom = ref();

// 用水总量
const waterValue = ref();
const waterValueDom = ref();

// 用水速率
// const waterSpeed = ref(10.06);
// const waterSpeedDom = ref();

// 人均用电量
const eleValueAv = ref(0);
const eleValueAvDom = ref();

// 人均用水量
const waterValueAv = ref(0);
const waterValueAvDom = ref();

// 区域能耗统计图表实例
let myBarChart: any;
// 区域能耗统计图表DOM
const barChart = ref(null);

// 图表x轴数据
const Xdata = ref<any>([]);

// 地点数组
const placeList = ref<any>([]);

// 探问楼数据
const chartData = ref<any>([]);

// 探理楼数据
const chartData2 = ref<any>([]);

// 探学楼数据
const chartData3 = ref<any>([]);

// 默认选中按钮
const currentIndex = ref("水");

onMounted(() => {
  // 获取能耗统计（总量）信息
  getEnergyAll();

  // 能耗统计（平均）信息接口地址
  getEnergyevenly();

  // 获取区域能耗统计数据
  getChartData();
});

// 获取能耗统计（总量）信息
const getEnergyAll = async () => {
  const res = await reqGetEnergyAll();
  // console.log(res);
  if ((res as any).code == 200) {
    res.data.forEach((ele: any) => {
      if (ele.name === "用电量") {
        eleValue.value = ele.num;
      }
      if (ele.name === "用水量") {
        waterValue.value = ele.num;
      }
    });

    // 让数字跳动
    countUpNum(eleValueDom.value, eleValue.value, 2);
    countUpNum(waterValueDom.value, waterValue.value, 2);
  }
};

// 能耗统计（平均）信息接口地址
const getEnergyevenly = async () => {
  const res = await reqGetEnergyevenly();
  // console.log(res);

  if ((res as any).code == 200) {
    res.data.forEach((ele: any) => {
      if (ele.name === "用电量") {
        eleValueAv.value = ele.num;
      }
      if (ele.name === "用水量") {
        waterValueAv.value = ele.num;
      }
    });

    // 让数字跳动
    countUpNum(eleValueAvDom.value, eleValueAv.value, 2);
    countUpNum(waterValueAvDom.value, waterValueAv.value, 2);
  }
};

// 获取区域能耗统计数据
const getChartData = async () => {
  const res = await reqGetEnergyMonth({
    type: currentIndex.value === "水" ? 0 : 1,
  });
  // console.log(res);
  if ((res as any).code == 200) {
    res.data.forEach((ele: any) => {
      // 获取图表x轴数据
      Xdata.value.push(ele.month.slice(-2) + "月");

      // 获取图表Y轴数据
      ele.data.forEach((item: any) => {
        if (item.name === "探问楼") {
          chartData.value.push(item.num);
        } else if (item.name === "探理楼") {
          chartData2.value.push(item.num);
        } else if (item.name === "探学楼") {
          chartData3.value.push(item.num);
        }
      });
    });

    // 获取地点数组
    res.data[0].data.forEach((ele: any) => {
      placeList.value.push(ele.name);
    });
  }
  // 初始化区域能耗统计图表
  initBarChart();
};

// 点击水 按钮回调
const handleClickWater = () => {
  if (currentIndex.value !== "水") {
    currentIndex.value = "水";
    // 清空数据重新请求
    placeList.value = [];
    Xdata.value = [];
    chartData.value = [];
    chartData2.value = [];
    chartData3.value = [];
    myBarChart.dispose();
    getChartData();
  }
};

// 点击电 按钮回调
const handleClickEle = () => {
  if (currentIndex.value !== "电") {
    currentIndex.value = "电";
    // 清空数据重新请求
    placeList.value = [];
    Xdata.value = [];
    chartData.value = [];
    chartData2.value = [];
    chartData3.value = [];
    myBarChart.dispose();
    getChartData();
  }
};

// 初始化区域能耗统计
const initBarChart = () => {
  myBarChart = Echarts.init(barChart.value);
  // 图表配置
  const options = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {
      data: placeList.value,
      top: 45,
      right: 22,
      textStyle: {
        color: "#fff",
      },
    },
    color: ["#0A87E8", "#BFA23B", "#09B9DB", "#00BAAD"],
    grid: {
      top: "28%",
      left: "3%",
      right: "6%",
      bottom: "6%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        axisTick: { show: false },
        axisLabel: {
          color: "#fff",
        },
        data: Xdata.value,
      },
    ],
    yAxis: [
      {
        type: "value",
        name: currentIndex.value === "水" ? "m³" : "kw.h",
        nameTextStyle: {
          fontSize: 14,
          color: "#fff",
        },
        axisLabel: {
          color: "#fff",
        },
        splitLine: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: placeList.value[0],
        type: "bar",
        barGap: 0,
        emphasis: {
          focus: "series",
        },
        data: chartData.value,
      },
      {
        name: placeList.value[1],
        type: "bar",

        emphasis: {
          focus: "series",
        },
        data: chartData2.value,
      },
      {
        name: placeList.value[2],
        type: "bar",
        emphasis: {
          focus: "series",
        },
        data: chartData3.value,
      },
    ],
  };
  myBarChart.setOption(options);
};
</script>

<style lang="scss" scoped>
.container {
  width: 435px;
  height: 951px;
  color: #fff;
  background-image: url(@/assets/images/box-bg.png);

  .title {
    display: flex;
    align-items: center;
    width: 430px;
    height: 47px;
    font-family: "庞门正道标题体";
    background-image: url(@/assets/images/title-bg.png);
    background-size: 100% 100%;

    .title_text {
      margin-left: 38px;
      font-size: 20px;
      text-shadow: 0px 0px 9px #158eff;
    }

    .title_sub {
      margin-left: 19px;
      font-size: 12px;
      color: #215a8e;
    }
  }

  .content {
    padding: 20px 19px 0 14px;
    height: 904px;

    .sub_title {
      padding-left: 28px;
      height: 35px;
      line-height: 18px;
      color: #abd6ff;
      font-weight: bold;
      background-image: url(@/assets/images/title-bg2.png);
      background-size: 100% 100%;
    }

    .energy_box {
      display: flex;
      justify-content: space-between;
      margin-top: 24px;
      padding: 0 30px 0 26px;
      width: 100%;
      height: 88px;
      background-image: url(@/assets/images/energy-box-bg.png);
      background-size: 100% 100%;

      .energy_box_left {
        .left_top {
          display: flex;
          align-items: center;
          margin-top: 9px;
          font-size: 16px;

          img {
            margin-right: 4px;
            width: 20px;
            height: 20px;
          }
        }

        .left_bottom {
          margin-top: 2px;
          font-size: 38px;
          font-weight: bold;
        }
      }

      .energy_box_right {
        min-width: 100px;
        .right_top {
          margin-top: 22px;
          font-size: 14px;
        }

        .right_bottom {
          display: flex;
          align-items: flex-end;
          margin-top: 2px;
          color: #ffd15c;
          font-size: 24px;
          font-weight: bold;
          span {
            margin-left: 2px;
            font-size: 18px;
          }
        }
      }
    }

    .evenly {
      display: flex;
      height: 130px;

      .evenly_box {
        flex: 1;
        display: flex;
        align-items: center;

        img {
          margin-right: 8px;
          width: 84px;
          height: 48px;
        }

        .box_right {
          font-size: 16px;

          .right_top {
            display: flex;
            align-items: center;
            font-weight: bold;
            font-size: 24px;

            span {
              margin-top: 5px;
              margin-left: 5px;
              font-size: 12px;
              font-weight: 400;
            }
          }
        }
      }
    }

    .change {
      display: flex;
      justify-content: flex-end;
      align-items: flex-end;
      height: 60px;
      .button {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 18px;
        width: 88px;
        height: 32px;
        font-size: 14px;
        border-radius: 4px;
        border: 1px solid #bef4f7;
        background-image: linear-gradient(
          rgba(156, 255, 248, 0.4),
          rgba(152, 217, 237, 0.15),
          rgba(188, 216, 247, 0.4)
        );
        cursor: pointer;
      }

      .active {
        background-image: linear-gradient(
          rgba(29, 242, 228, 0.8),
          rgba(61, 198, 239, 0.4),
          rgba(26, 94, 232, 0.8)
        );
      }
    }

    .bar {
      height: 398px;
    }
  }
}
</style>