admin-vben5/apps/web-antd/src/views/property/energyManagement/electricEnergy/electricTrend/index.vue

<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
import type { Dayjs } from "dayjs";
import dayjs from "dayjs";
import { Page } from "@vben/common-ui";
import { DatePicker } from "ant-design-vue";
import FloorTree from "../components/floor-tree.vue";
import { meterRecordTrend } from "#/api/property/energyManagement/meterRecord";

const currentDay = ref<Dayjs>(dayjs());
const currentMonth = ref<Dayjs>(dayjs());
const currentYear = ref<Dayjs>(dayjs());
const disabledDay = (current: Dayjs) => {
  return current && current > dayjs().endOf("day");
};
const disabledMonth = (current: Dayjs) => {
  return current && current > dayjs().endOf("month");
};
const disabledYear = (current: Dayjs) => {
  return current && current > dayjs().endOf("year");
};

onMounted(() => {
  //day
  const chartDay = document.getElementById("day");
  const myChartDay = echarts.init(chartDay);
  const optionDay = {
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["当日", "昨日"],
    },
    toolbox: {
      show: true,
      feature: {
        magicType: { show: true, type: ["line", "bar"] },
        restore: { show: true },
      },
    },
    calculable: true,
    xAxis: [
      {
        type: "category",
        name: "时",
        data: [
          "00:00",
          "01:00",
          "02:00",
          "03:00",
          "04:00",
          "05:00",
          "06:00",
          "07:00",
          "08:00",
          "09:00",
          "10:00",
          "11:00",
          "12:00",
          "13:00",
          "14:00",
          "15:00",
          "16:00",
          "17:00",
          "18:00",
          "19:00",
          "20:00",
          "21:00",
          "22:00",
          "23:00",
        ],
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "KW.h",
      },
    ],
    series: [
      {
        name: "当日",
        type: "bar",
        data: [
          2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3,
          2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3,
        ],
        markPoint: {
          data: [
            { type: "max", name: "Max" },
            { type: "min", name: "Min" },
          ],
        },
      },
      {
        name: "昨日",
        type: "bar",
        data: [
          2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 152.2, 48.7, 18.8, 6.0, 2.3,
          2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3,
        ],
        markPoint: {
          data: [
            { type: "max", name: "Max" },
            { type: "min", name: "Min" },
          ],
        },
      },
    ],
    dataZoom: [
      {
        type: "inside",
        xAxisIndex: 0,
        zoomOnMouseWheel: true,
        filterMode: "filter",
      },
    ],
  };
  optionDay && myChartDay.setOption(optionDay);

  //month
  const chartMonth = document.getElementById("month");
  const myChartMonth = echarts.init(chartMonth);
  const optionMonth = {
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["当月", "上月"],
    },
    toolbox: {
      show: true,
      feature: {
        magicType: { show: true, type: ["line", "bar"] },
        restore: { show: true },
      },
    },
    calculable: true,
    xAxis: [
      {
        type: "category",
        name: "日",
        data: [
          "01",
          "02",
          "03",
          "04",
          "05",
          "06",
          "07",
          "08",
          "09",
          "10",
          "11",
          "12",
          "13",
          "14",
          "15",
          "16",
          "17",
          "18",
          "19",
          "20",
          "21",
          "22",
          "23",
          "24",
          "25",
          "26",
          "27",
          "28",
          "29",
          "30",
          "31",
        ],
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "KW.h",
      },
    ],
    series: [
      {
        name: "当月",
        type: "bar",
        data: [
          2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3,
          2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3,
          2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6,
        ],
        markPoint: {
          data: [
            { type: "max", name: "Max" },
            { type: "min", name: "Min" },
          ],
        },
      },
      {
        name: "上月",
        type: "bar",
        data: [
          2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3,
          2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3,
          2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6,
        ],
        markPoint: {
          data: [
            { type: "max", name: "Max" },
            { type: "min", name: "Min" },
          ],
        },
      },
    ],
    dataZoom: [
      {
        type: "inside",
        xAxisIndex: 0,
        zoomOnMouseWheel: true,
        filterMode: "filter",
      },
    ],
  };
  optionMonth && myChartMonth.setOption(optionMonth);

  //year
  const chartYear = document.getElementById("year");
  const myChartYear = echarts.init(chartYear);
  const optionYear = {
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["当年", "去年"],
    },
    toolbox: {
      show: true,
      feature: {
        magicType: { show: true, type: ["line", "bar"] },
        restore: { show: true },
      },
    },
    calculable: true,
    xAxis: [
      {
        type: "category",
        name: "月",
        data: [
          "01",
          "02",
          "03",
          "04",
          "05",
          "06",
          "07",
          "08",
          "09",
          "10",
          "11",
          "12",
        ],
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "KW.h",
      },
    ],
    series: [
      {
        name: "当年",
        type: "bar",
        data: [
          2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3,
        ],
        markPoint: {
          data: [
            { type: "max", name: "Max" },
            { type: "min", name: "Min" },
          ],
        },
      },
      {
        name: "去年",
        type: "bar",
        data: [
          2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3,
        ],
        markPoint: {
          data: [
            { type: "max", name: "Max" },
            { type: "min", name: "Min" },
          ],
        },
      },
    ],
    dataZoom: [
      {
        type: "inside",
        xAxisIndex: 0,
        zoomOnMouseWheel: true,
        filterMode: "filter",
      },
    ],
  };
  optionYear && myChartYear.setOption(optionYear);

  // 鼠标悬停时激活缩放
  myChartDay.on("mouseover", { seriesIndex: 0 }, () => {
    myChartDay.dispatchAction({
      type: "takeGlobalCursor",
      key: "dataZoomSelect",
      dataZoomSelectActive: true,
    });
  });

  // 鼠标离开时取消缩放
  myChartDay.on("mouseout", { seriesIndex: 0 }, () => {
    myChartDay.dispatchAction({
      type: "takeGlobalCursor",
      key: "dataZoomSelect",
      dataZoomSelectActive: false,
    });
  });

  // 鼠标悬停时激活缩放
  myChartYear.on("mouseover", { seriesIndex: 0 }, () => {
    myChartYear.dispatchAction({
      type: "takeGlobalCursor",
      key: "dataZoomSelect",
      dataZoomSelectActive: true,
    });
  });

  // 鼠标离开时取消缩放
  myChartYear.on("mouseout", { seriesIndex: 0 }, () => {
    myChartYear.dispatchAction({
      type: "takeGlobalCursor",
      key: "dataZoomSelect",
      dataZoomSelectActive: false,
    });
  });

  // 鼠标悬停时激活缩放
  myChartMonth.on("mouseover", { seriesIndex: 0 }, () => {
    myChartMonth.dispatchAction({
      type: "takeGlobalCursor",
      key: "dataZoomSelect",
      dataZoomSelectActive: true,
    });
  });

  // 鼠标离开时取消缩放
  myChartMonth.on("mouseout", { seriesIndex: 0 }, () => {
    myChartMonth.dispatchAction({
      type: "takeGlobalCursor",
      key: "dataZoomSelect",
      dataZoomSelectActive: false,
    });
  });
});

function handleSelectFloor(selectedKeys, info) {
  let data = {
    day: currentDay.value.format("YYYY-MM-DD"),
    month: currentMonth.value.format("YYYY-MM"),
    year: currentYear.value.format("YYYY"),
    meterType: 1,
  };

  if (info.node.level == 3) {
    data.floorId = selectedKeys[0];
  } else {
    data.meterId = selectedKeys[0];
  }

  meterRecordTrend(data);
}
</script>

<template>
  <Page :auto-content-height="true">
    <div class="flex h-full gap-[8px]">
      <FloorTree class="w-[260px]"
                 @select="handleSelectFloor"></FloorTree>
      <div class=" flex-1 overflow-hidden">
        <div style="background: #fff;border-radius: 8px;padding: 10px;height: 33%">
          <div>
            <div style="display: flex;justify-content: space-between;">
              <DatePicker v-model:value="currentDay"
                          :disabled-date="disabledDay" />当日能耗总值：125.04KW.h
            </div>
          </div>
          <div id="day"
               style="height: 100%;width: 100%;"></div>
        </div>
        <div style="background: #fff;border-radius: 8px;padding: 10px;margin-top: 16px;height: 33%">
          <div>
            <div style="display: flex;justify-content: space-between;">
              <DatePicker v-model:value="currentMonth"
                          :disabled-date="disabledMonth"
                          picker="month" />当月能耗总值：125.04KW.h
            </div>
          </div>
          <div id="month"
               style="height: 100%;width: 100%;"></div>
        </div>
        <div style="background: #fff;border-radius: 8px;padding: 10px;margin-top: 16px;height: 33%">
          <div>
            <div style="display: flex;justify-content: space-between;">
              <DatePicker v-model:value="currentYear"
                          :disabled-date="disabledYear"
                          picker="year" />当年能耗总值：125.04KW.h
            </div>
          </div>
          <div id="year"
               style="height: 100%;width: 100%;"></div>
        </div>
      </div>
    </div>
  </Page>
</template>