CviLux_fe/src/views/dashboard/Dashboard.vue

<script setup>
import { onMounted, onUnmounted, ref, provide, watch } from "vue";
import { getEnergyCost } from "@/apis/dashboard";
import ButtonConnectedGroup from "@/components/customUI/ButtonConnectedGroup.vue";
import Forge from "@/components/forge/Forge.vue";
import DashboardStat from "./components/DashboardStat.vue";
import DashboardSysCard from "./components/DashboardSysCard.vue";
import DashboardSysProgress from "./components/DashboardSysProgress.vue";
import DashboardElecRank from "./components/DashboardElecRank.vue";
import DashboardElecTrends from "./components/DashboardElecTrends.vue";
import DashboardElecCompare from "./components/DashboardElecCompare.vue";
import useBuildingStore from "@/stores/useBuildingStore";
import useActiveBtn from "@/hooks/useActiveBtn";
import { twMerge } from "tailwind-merge";

const store = useBuildingStore();
const { items, changeActiveBtn, setItems, selectedBtn } = useActiveBtn();
let intervalId = null;
const energyCostData = ref({});
const formState = ref({
  building_guid: null,
  floor_guid: "all",
  department_id: "all",
});
// 控制顯示2D/3D切換與內容
const showForgeArea = ref(true);

const getEnergyCostData = async (params) => {
  const res = await getEnergyCost(params);
  energyCostData.value = res.data;
};

watch(
  () => store.selectedBuilding,
  (newBuilding) => {
    if (newBuilding) {
      formState.value.building_guid = newBuilding.building_guid;
    }
  },
  { immediate: true, deep: true }
);

watch(
  () => formState.value,
  (newVal) => {
    if (newVal) {
      const params = { ...newVal };

      if (params.floor_guid === "all") {
        delete params.floor_guid;
      }
      if (params.department_id === "all") {
        delete params.department_id;
      }

      if (params.building_guid) {
        getEnergyCostData(params);
      }

      if (intervalId) {
        clearInterval(intervalId);
      }
      intervalId = setInterval(() => {
        getEnergyCostData(params);
      }, 3600000);
    }
  },
  { immediate: true, deep: true }
);

onMounted(() => {
  if (showForgeArea.value) {
    setItems([
      {
        title: "2D",
        key: "2D",
        active: false,
      },
      {
        title: "3D",
        key: "3D",
        active: true,
      },
    ]);
  }
});

onUnmounted(() => {
  clearInterval(intervalId);
});
</script>

<template>
  <div class="flex flex-wrap items-center">
    <!-- 建築圖 -->
    <div class="w-full xl:w-1/3 relative">
      <template v-if="showForgeArea">
        <ButtonConnectedGroup
          :items="items"
          className="btn-xs absolute right-3 top-6 z-20 bg-slate-800 p-0 rounded-lg "
          :onclick="(e, item) => changeActiveBtn(item)"
        />
        <div class="area-img-box relative">
          <!-- setting頁面要新增讓他能上傳圖片 -->
          <img
            alt="build"
            src="/build_img.jpg"
            :class="
              twMerge(
                'absolute w-full h-full transition-opacity duration-300',
                selectedBtn?.key == '2D'
                  ? 'opacity-100  z-10'
                  : 'opacity-0  z-0'
              )
            "
          />
          <Forge
            :class="
              twMerge(
                'absolute transition-opacity duration-300',
                selectedBtn?.key == '3D'
                  ? 'opacity-100  z-10'
                  : 'opacity-0  z-0'
              )
            "
          />
        </div>
      </template>
      <template v-else>
        <img
          alt="build"
          src="/build_img.jpg"
          class="area-img-box w-full h-[460px] block relative rounded-sm mt-3"
        />
      </template>
    </div>

    <div class="w-full xl:w-2/3">
      <!-- 用電數據 -->
      <DashboardStat />

      <div class="flex flex-wrap pt-4">
        <!-- 當月能耗排行 -->
        <div class="lg:w-1/3 w-full">
          <DashboardElecRank :energyCostData="energyCostData" />
        </div>
        <!-- 近30天能耗趨勢 -->
        <div class="lg:w-2/3 w-full">
          <DashboardElecTrends
            :formState="formState"
            :energyCostData="energyCostData"
            :getEnergyCostData="getEnergyCostData"
          />
        </div>
      </div>
    </div>

    <!-- 設備小卡 -->
    <div class="w-full lg:w-1/3">
      <DashboardSysCard />
    </div>
    <!--狀態、進度-->
    <div class="w-full lg:w-1/3">
      <DashboardSysProgress />
    </div>
    <!-- 環比能耗 -->
    <div class="w-full lg:w-1/3">
      <DashboardElecCompare :energyCostData="energyCostData" />
    </div>
  </div>
</template>

<style lang="css" scoped>
.area-img-box {
  @apply border border-light-info bg-dark-info w-full h-[460px] block relative rounded-sm mt-3;
}

.area-img-box::before {
  @apply absolute left-0 right-0 -top-[4px] m-auto h-[8px] w-[140px] bg-no-repeat z-10;
  content: "";
  background: url(@ASSET/img/area-img-box-line-top.png) center center;
}

.area-img-box::after {
  @apply absolute left-0 right-0 -bottom-[4px] m-auto h-[8px] w-[140px] bg-no-repeat z-10;
  content: "";
  background: url(@ASSET/img/area-img-box-line-bottom.png) center center;
}
</style>