首頁初切版

.env.development

@@ -1,4 +1,4 @@
-VITE_API_BASEURL = "https://ibms-cvilux-demo-api.production.mjmtech.com.tw"
+VITE_API_BASEURL = "https://ibms-cvilux-api.production.mjmtech.com.tw"
 VITE_FILE_API_BASEURL = "https://cgems.cvilux-group.com:8088"
 VITE_MQTT_BASEURL = "wss://mqttwss.mjm-staging.developers-homelab.net"
 VITE_FORGE_BASEURL = "https://cgems.cvilux-group.com:8088/dist"

src/router/index.js

@@ -9,6 +9,7 @@ import AlertManagement from "@/views/alert/AlertManagement.vue";
 import ProductSetting from "@/views/productSetting/ProductSetting.vue";
 import EnergyManagement from "@/views/energyManagement/EnergyManagement.vue";
 import SettingManagement from "@/views/setting/SettingManagement.vue";
+import HeadquartersManagement from "@/views/headquarters/HeadquartersManagement.vue";
 import Login from "@/views/login/Login.vue";
 import useUserInfoStore from "@/stores/useUserInfoStore";
 import useGetCookie from "@/hooks/useGetCookie";
@@ -90,6 +91,11 @@ const router = createRouter({
       name: "setting",
       component: SettingManagement,
     },
+    {
+      path: "/headquarters",
+      name: "headquarters",
+      component: HeadquartersManagement,
+    },
     {
       path: "/mytestfile/mjm",
       name: "mytestfile",
@@ -101,7 +107,7 @@ const router = createRouter({
 router.beforeEach(async (to, from, next) => {
   console.log("route", to, location, document.cookie);
   // redirect to login page if not logged in and trying to access a restricted page
-  const publicPages = ["/login", "/"];
+  const publicPages = ["/login", "/", "/headquarters"];
   const authRequired = !publicPages.includes(to.path);
   const auth = useUserInfoStore();
   const token = useGetCookie("JWT-Authorization");
@@ -110,7 +116,7 @@ router.beforeEach(async (to, from, next) => {
   if ((authRequired && !token) || to.path === "/") {
     auth.user.token = "";
     next({ path: "/login" });
-  } else if (!authRequired) {
+  } else if (!authRequired && (to.path === "/login" || to.path === "/")) {
     document.cookie = "JWT-Authorization=; Max-Age=0";
     document.cookie = "user_name=; Max-Age=0";
     auth.user.token = "";

src/views/headquarters/HeadquartersManagement.vue

@@ -0,0 +1,103 @@
+<script setup>
+import { ref, computed, watch, onUnmounted } from "vue";
+import SysProgress from "./components/SysProgress.vue";
+import ElecRank from "./components/ElecRank.vue";
+import ElecTrends from "./components/ElecTrends.vue";
+import ElecCompare from "./components/ElecCompare.vue";
+import { getEnergyCost } from "@/apis/dashboard";
+import useBuildingStore from "@/stores/useBuildingStore";
+
+const store = useBuildingStore();
+let intervalId = null;
+const energyCostData = ref({});
+const formState = ref({
+  building_guid: null,
+  floor_guid: "all",
+  department_id: "all",
+});
+
+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 }
+);
+
+onUnmounted(() => {
+  clearInterval(intervalId);
+});
+</script>
+
+<template>
+  <div class="flex gap-4">
+    <div class="w-full xl:w-1/4 mt-2">
+      <div class="area-img-box">
+        <img
+          alt="build"
+          src="/build_img.jpg"
+          class="w-full h-48 object-cover border-cyan-400 shadow-cyan-500/40"
+        />
+        <p
+          class="p-4 text-gray-100 text-base font-light bg-gray-800/60 rounded-b-xl backdrop-blur-md border-t border-cyan-400/30 shadow-inner"
+        >
+          深耕電子精密連接器、光通信元件、軟性排線、線纜組件、PCBA電子機板、電子成品專業製造廠並代理電子零組件做為整合行銷。公司創立於1990年，產品行銷全球以穩定，快速以及高品質知名;
+          未來，瀚荃會持續精進提供更快、更好以及高附加價值的產品與服務來滿足您的需求。
+        </p>
+      </div>
+      <!--狀態、進度-->
+      <SysProgress />
+    </div>
+    <div class="w-full xl:w-2/4 mt-2"></div>
+    <div class="w-full xl:w-1/4 mt-2">
+      <ElecRank :energyCostData="energyCostData" />
+      <ElecTrends
+        :formState="formState"
+        :energyCostData="energyCostData"
+        :getEnergyCostData="getEnergyCostData"
+      />
+      <ElecCompare :energyCostData="energyCostData" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.area-img-box {
+  @apply border border-light-info bg-gray-900/80 backdrop-blur-lg relative overflow-hidden shadow-md shadow-blue-300 mb-3;
+}
+</style>

src/views/headquarters/components/ElecCompare.vue

@@ -0,0 +1,305 @@
+<script setup>
+import { ref, onMounted, watch, computed } from "vue";
+import * as echarts from "echarts";
+import BarChart from "@/components/chart/BarChart.vue";
+import { useI18n } from "vue-i18n";
+
+const { locale, t } = useI18n();
+const props = defineProps({
+  energyCostData: {
+    type: Object,
+    required: true,
+  },
+});
+
+const chartData = ref([]); // 初始化為空陣列
+
+const labels = computed(() => [
+  t("dashboard.today"),
+  t("dashboard.yesterday"),
+  t("dashboard.this_week"),
+  t("dashboard.last_week"),
+  t("dashboard.this_month"),
+  t("dashboard.last_month"),
+  t("dashboard.this_year"),
+  t("dashboard.last_year"),
+]);
+const barWidth = 30; // Set barWidth
+
+const barChartOptions = ref({
+  xAxis: {
+    type: "category",
+    data: chartData.value.map((item) => item.category),
+    axisLine: { lineStyle: { color: "#fff" } },
+  },
+  yAxis: { type: "value", show: false },
+  series: [], // 初始化為空陣列
+  tooltip: {
+    trigger: "axis",
+    axisPointer: { type: "shadow" },
+    formatter: function (params) {
+      let tooltipText = `<div>${params[0].axisValueLabel}</div>`;
+      const filteredParams = params.filter((item) => item.seriesType === "bar");
+      filteredParams.forEach((item) => {
+        tooltipText += `<div>${item.marker} ${
+          item.value ? item.value : "-"
+        }</div>`;
+      });
+
+      return tooltipText;
+    },
+  },
+});
+
+function updateChartData(newEnergyCostData) {
+  if (newEnergyCostData && newEnergyCostData.compare) {
+    // 從 props.energyCostData.compare 中提取資料
+    const compareData = newEnergyCostData.compare;
+
+    // 轉換資料格式
+    chartData.value = [
+      {
+        category: t("dashboard.daily_relative_change"),
+        this: compareData.day.current,
+        last: compareData.day.last,
+        change: compareData.day.percentage,
+      },
+      {
+        category: t("dashboard.weekly_relative_change"),
+        this: compareData.week.current,
+        last: compareData.week.last,
+        change: compareData.week.percentage,
+      },
+      {
+        category: t("dashboard.monthly_relative_change"),
+        this: compareData.month.current,
+        last: compareData.month.last,
+        change: compareData.month.percentage,
+      },
+      {
+        category: t("dashboard.yearly_relative_change"),
+        this: compareData.year.current,
+        last: compareData.year.last,
+        change: compareData.year.percentage,
+      },
+    ];
+
+    // 更新 barChartOptions
+    barChartOptions.value = {
+      xAxis: {
+        type: "category",
+        data: chartData.value.map((item) => item.category),
+        axisLine: { lineStyle: { color: "#fff" } },
+      },
+      yAxis: { type: "value", show: false },
+      grid: {
+        left: "-10%",
+        right: "1%",
+        bottom: "3%",
+        top: "4%",
+        containLabel: true,
+      },
+      series: [
+        {
+          name: "當前週期",
+          data: chartData.value.map((item) => item.this),
+          type: "bar",
+          barWidth: barWidth,
+          barGap: "-10%",
+          itemStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: "#186B80" },
+              { offset: 1, color: "#50C3E3" },
+            ]),
+            shadowBlur: 5,
+            shadowColor: "rgba(0, 0, 0, 0.3)",
+            shadowOffsetY: 2,
+            shadowOffsetX: 5,
+          },
+          z: 3,
+        },
+        {
+          name: "對比週期",
+          data: chartData.value.map((item) => item.last),
+          type: "bar",
+          barWidth: barWidth,
+          itemStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: "#988F2C" },
+              { offset: 1, color: "#FFF26D" },
+            ]),
+            shadowBlur: 5,
+            shadowColor: "rgba(0, 0, 0, 0.3)",
+            shadowOffsetY: 2,
+            shadowOffsetX: 5,
+          },
+        },
+        {
+          // this top
+          z: 6,
+          type: "pictorialBar",
+          symbolPosition: "end",
+          data: chartData.value.map((item) => item.this),
+          symbol: "diamond",
+          symbolOffset: ["-45%", "-50%"],
+          symbolSize: [barWidth, barWidth * 0.5],
+          itemStyle: {
+            borderWidth: 0,
+            color: "#50C3E3",
+          },
+        },
+        {
+          // this bot
+          z: 6,
+          type: "pictorialBar",
+          symbolPosition: "start",
+          data: chartData.value.map((item) => item.this),
+          symbol: "diamond",
+          symbolOffset: ["-45%", "50%"],
+          symbolSize: [barWidth, barWidth * 0.5],
+          itemStyle: {
+            borderWidth: 0,
+            color: "#50C3E3",
+          },
+        },
+        {
+          // last top
+          z: 3,
+          type: "pictorialBar",
+          symbolPosition: "end",
+          data: chartData.value.map((item) => item.last),
+          symbol: "diamond",
+          symbolOffset: ["45%", "-50%"],
+          symbolSize: [barWidth, barWidth * 0.5],
+          itemStyle: {
+            borderWidth: 0,
+            color: "#FFF26D",
+          },
+        },
+        {
+          // last bot
+          z: 3,
+          type: "pictorialBar",
+          symbolPosition: "start",
+          data: chartData.value.map((item) => item.last),
+          symbol: "diamond",
+          symbolOffset: ["45%", "50%"],
+          symbolSize: [barWidth, barWidth * 0.5],
+          itemStyle: {
+            borderWidth: 0,
+            color: "#FFF26D",
+          },
+        },
+      ],
+      tooltip: {
+        trigger: "axis",
+        axisPointer: { type: "shadow" },
+        formatter: function (params) {
+          let tooltipText = `<div>${params[0].axisValueLabel}</div>`;
+          const filteredParams = params.filter(
+            (item) => item.seriesType === "bar"
+          );
+          filteredParams.forEach((item) => {
+            tooltipText += `<div>${item.marker} ${
+              item.value ? item.value : "-"
+            }</div>`;
+          });
+
+          return tooltipText;
+        },
+      },
+    };
+  }
+}
+// 使用 watch 監聽 energyCostData 的變化
+watch(
+  () => props.energyCostData,
+  (newEnergyCostData) => {
+    updateChartData(newEnergyCostData);
+  },
+  { immediate: true } // 立即執行一次，確保初始資料載入
+);
+
+watch(locale, () => {
+  updateChartData(props.energyCostData);
+});
+</script>
+
+<template>
+  <div class="flex flex-wrap">
+    <div class="w-full chart-data relative px-3 mb-3">
+      <div class="flex flex-wrap items-center justify-between">
+        <h2 class="font-light">
+          {{ $t("dashboard.relative_energy_consumption") }}
+        </h2>
+      </div>
+      <div class="h-[100px]">
+        <BarChart
+          id="dashboard_chart_compare"
+          class="h-full"
+          :option="barChartOptions"
+        />
+      </div>
+
+      <!-- 表格數據展示 -->
+      <div class="flex justify-between">
+        <div
+          v-for="(data, index) in chartData"
+          :key="index"
+          class="w-1/4 text-center mx-1"
+        >
+          <div
+            class="text-sm bg-cyan-900 p-1 border border-cyan-100 border-opacity-20"
+          >
+            {{ labels[index * 2] }}
+          </div>
+          <div
+            class="text-sm bg-cyan-900 p-1 border border-cyan-100 border-opacity-20"
+          >
+            {{ data.this ?? "-" }}
+          </div>
+          <div
+            class="text-sm bg-cyan-900 p-1 border border-cyan-100 border-opacity-20"
+          >
+            {{ labels[index * 2 + 1] }}
+          </div>
+          <div
+            class="text-sm bg-cyan-900 p-1 border border-cyan-100 border-opacity-20"
+          >
+            {{ data.last ?? "-" }}
+          </div>
+          <div
+            class="text-sm bg-cyan-900 p-1 border border-cyan-100 border-opacity-20"
+          >
+            <span
+              :class="{
+                'text-red-500': data.change > 0,
+                'text-green-500': data.change < 0,
+              }"
+            >
+              {{
+                data.change
+                  ? (data.change > 0 ? "+" : "") + data.change + "%"
+                  : "-"
+              }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.chart-data:before {
+  @apply absolute -left-0 -top-2 h-10 w-10 bg-no-repeat z-10;
+  content: "";
+  background: url(@ASSET/img/chart-data-background01.svg) center center;
+}
+
+.chart-data::after {
+  @apply absolute -right-1 -bottom-3 h-10 w-10 bg-no-repeat z-10;
+  content: "";
+  background: url(@ASSET/img/chart-data-background02.svg) center center;
+}
+</style>

src/views/headquarters/components/ElecRank.vue

@@ -0,0 +1,109 @@
+<script setup>
+import { ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
+
+const props = defineProps({
+  energyCostData: {
+    type: Object,
+    required: true,
+  },
+});
+
+const energyTypeList = ref([
+  {
+    title: t("dashboard.today_energy_consumption"),
+    key: "today",
+  },
+  {
+    title: t("dashboard.this_month_energy_consumption"),
+    key: "month",
+  },
+]);
+const currentEnergyType = ref({
+  name: "month",
+});
+
+// 取得當前能耗資料
+const getCurrentEnergyData = () => {
+  if (!props.energyCostData || !props.energyCostData.rank) { 
+    return []; // 或者返回一些默认值
+  }
+
+  return currentEnergyType.value.name === "month"
+    ? props.energyCostData?.rank.month || []
+    : props.energyCostData?.rank.day || [];
+};
+</script>
+
+<template>
+  <div class="state-box-col relative h-full max-h-[200px] mb-3">
+    <div class="state-box h-full">
+      <!-- 標題和切換按鈕 -->
+      <div class="flex justify-between items-center mb-2">
+        <h2 class="font-light relative">
+          {{ $t("dashboard.energy_ranking") }}
+        </h2>
+        <Select
+          :value="currentEnergyType"
+          class="!w-24"
+          selectClass="border-info focus-within:border-info btn-xs text-xs"
+          name="name"
+          Attribute="title"
+          :options="energyTypeList"
+          :isTopLabelExist="false"
+          :isBottomLabelExist="false"
+        >
+        </Select>
+      </div>
+
+      <!-- 能耗排名列表 -->
+      <div class="max-h-[150px] overflow-y-auto">
+        <table class="table table-sm text-center">
+          <tbody>
+            <tr
+              v-for="(item, index) in getCurrentEnergyData()"
+              :key="index"
+              :class="[
+                { 'text-red-300': index + 1 === 1 },
+                { 'text-orange-300': index + 1 === 2 },
+                { 'text-yellow-300': index + 1 === 3 },
+                { 'text-teal-300': index + 1 > 3 },
+              ]"
+            >
+              <td class="flex items-center">
+                <font-awesome-icon :icon="['fas', 'crown']" class="me-1" />{{
+                  index + 1
+                }}
+              </td>
+              <td>{{ item.name }}</td>
+              <td>{{ item.value }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.state-box {
+  @apply border-2 border-light-info rounded-sm p-2 text-white relative;
+}
+
+.state-box-col:before {
+  @apply absolute left-0 right-0 -top-0.5 m-auto h-2 w-36 bg-no-repeat bg-center z-10;
+  content: "";
+  background-image: url(@ASSET/img/state-box-top.png);
+}
+
+.state-box-col:after {
+  @apply absolute left-0 right-0 -bottom-0.5 m-auto h-2 w-36 bg-no-repeat bg-center z-10;
+  content: "";
+  background-image: url(@ASSET/img/state-box-bottom.png);
+}
+
+tr td {
+  @apply text-[13px] text-start;
+}
+</style>

src/views/headquarters/components/ElecTrends.vue

@@ -0,0 +1,226 @@
+<script setup>
+import { ref, onMounted, watch } from "vue";
+import * as echarts from "echarts";
+import BarChart from "@/components/chart/BarChart.vue";
+import { useI18n } from "vue-i18n";
+import dayjs from "dayjs";
+import useBuildingStore from "@/stores/useBuildingStore";
+
+const storeBuild = useBuildingStore();
+const { t } = useI18n();
+
+const props = defineProps({
+  formState: {
+    type: Object, 
+    required: true,
+  },
+  energyCostData: {
+    type: Object, 
+    required: true,
+  },
+  getEnergyCostData: {
+    type: Function,
+    required: true,
+  }
+});
+
+
+const chartData = ref([]);
+const floorList = ref([]);
+const deptList = ref([]);
+const weekComparisonOption = ref({});
+
+// 生成柱狀圖的 option
+const generateCylinderChartOption = (data) => {
+  const barWidth = 15;
+  return {
+    xAxis: {
+      type: "category",
+      data: data.map((item) => item.date),
+      axisLine: {
+        lineStyle: {
+          color: "#fff",
+        },
+      },
+    },
+    yAxis: {
+      type: "value",
+      name: "kWh",
+      axisLine: {
+        lineStyle: {
+          color: "#fff",
+        },
+      },
+      splitLine: {
+        show: false,
+      },
+    },
+    series: [
+      {
+        data: data.map((item) => item.energy),
+        type: "bar",
+        barWidth: barWidth,
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
+            { offset: 0, color: "#1F7B47" },
+            { offset: 1, color: "#247E95" },
+          ]),
+          shadowBlur: 5,
+          shadowColor: "rgba(0, 0, 0, 0.5)",
+          shadowOffsetY: 5,
+        },
+      },
+      {
+        z: 15,
+        type: "pictorialBar",
+        symbolPosition: "end",
+        data: data.map((item) => item.energy),
+        symbol: "diamond",
+        symbolOffset: [0, -5],
+        symbolSize: [barWidth, barWidth * 0.5],
+        itemStyle: {
+          color: "#62E39A",
+        },
+      },
+      {
+        z: 10,
+        type: "pictorialBar",
+        data: data.map((item) => item.energy),
+        symbol: "diamond",
+        symbolSize: [barWidth, barWidth * 0.5],
+        symbolOffset: [0, 6],
+        itemStyle: {
+          color: "#247E95",
+        },
+      },
+    ],
+    grid: {
+      left: "0%",
+      right: "0%",
+      bottom: "3%",
+      top: "10%",
+      containLabel: true,
+    },
+    tooltip: {
+      trigger: "axis",
+      formatter: function (params) {
+        const item = params[0];
+        return `<p>${item.name}</p> <p>${item.marker}Energy consumption : ${item.value}</p>`;
+      },
+    },
+  };
+};
+
+const processEnergyData = () => {
+  if (!props.energyCostData || !props.energyCostData.trend) {
+    chartData.value = []; 
+    weekComparisonOption.value = generateCylinderChartOption(chartData.value);
+    return;
+  }
+
+  const dailyData = [...props.energyCostData.trend].sort(
+    (a, b) => new Date(a.time) - new Date(b.time)
+  );
+
+  chartData.value = dailyData.map((item) => ({
+    date: dayjs(item.time).format("MM/DD"), 
+    energy: item.value, 
+  }));
+
+  weekComparisonOption.value = generateCylinderChartOption(chartData.value);
+};
+
+watch(
+  () => props.energyCostData,
+  (newEnergyCostData) => {
+    processEnergyData();
+  },
+  { deep: true, immediate: true } 
+);
+
+watch(
+  () => storeBuild.floorList,
+  (newValue) => {
+    if (newValue) {
+      console.log('newValue',newValue);
+      
+      floorList.value = [
+        {
+          title: "All",
+          key: "all",
+        },
+        ...storeBuild.floorList,
+      ];
+    }
+  },
+  {
+    immediate: true,
+  }
+);
+
+watch(
+  () => storeBuild.floorList,
+  (newValue) => {
+    if (newValue) {
+      floorList.value = [
+        {
+          title: "All",
+          key: "all",
+        },
+        ...storeBuild.floorList,
+      ];
+    }
+  },
+  {
+    immediate: true,
+  }
+);
+
+watch(
+  () => storeBuild.deptList,
+  (newValue) => {
+    if (newValue) {
+      deptList.value = [
+        {
+          title: "All",
+          key: "all",
+        },
+        ...storeBuild.deptList,
+      ];
+    }
+  },
+  {
+    deep: true,
+    immediate: true,
+  }
+);
+</script>
+
+<template>
+  <div class="w-full chart-data relative px-3 mb-3">
+    <div class="flex flex-wrap items-center justify-between">
+      <h2 class="font-light">{{ $t("dashboard.last_30_days_energy_trend") }}</h2>
+    </div>
+    <div class="h-[200px]">
+      <BarChart
+        id="dashboard_chart_week_comparison"
+        class="h-full"
+        :option="weekComparisonOption"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.chart-data:before {
+  @apply absolute -left-0 -top-1 h-10 w-10 bg-no-repeat z-10;
+  content: "";
+  background: url(@ASSET/img/chart-data-background01.svg) center center;
+}
+
+.chart-data::after {
+  @apply absolute -right-1 -bottom-1 h-10 w-10 bg-no-repeat z-10;
+  content: "";
+  background: url(@ASSET/img/chart-data-background02.svg) center center;
+}
+</style>

src/views/headquarters/components/SysProgress.vue

@@ -0,0 +1,143 @@
+<script setup>
+import { ref, computed, watch, onUnmounted } from "vue";
+import { useRouter } from "vue-router";
+import { getAlarmOperationInfo } from "@/apis/dashboard";
+import useBuildingStore from "@/stores/useBuildingStore";
+// import DashboardSysProgressModal from "./DashboardSysProgressModal.vue";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
+const router = useRouter();
+const store = useBuildingStore();
+const equipmentData = ref({
+  title: t("dashboard.system_status"),
+  items: [],
+});
+const modalData = ref({});
+let intervalId = null;
+
+const getAlarmsInfos = async () => {
+  try {
+    const res = await getAlarmOperationInfo(
+      store.selectedBuilding.building_guid
+    );
+    const apiData = res.data;
+
+    // 轉換 equipmentData 的資料格式
+    if (apiData && apiData.alarm) {
+      equipmentData.value.items = apiData.alarm.map((item) => ({
+        label: item.name,
+        online: item.online || 0,
+        offline: item.offline || 0,
+        alarm: item.alarm || 0,
+      }));
+    }
+  } catch (error) {
+    console.error("Error fetching alarm info:", error);
+  }
+};
+
+watch(
+  () => store.selectedBuilding,
+  (newBuilding) => {
+    if (newBuilding) {
+      getAlarmsInfos();
+
+      if (intervalId) {
+        clearInterval(intervalId);
+      }
+      intervalId = setInterval(() => {
+        getAlarmsInfos();
+      }, 30000);
+    }
+  },
+  { immediate: true }
+);
+
+onUnmounted(() => {
+  clearInterval(intervalId);
+});
+</script>
+
+<template>
+  <!-- <DashboardSysProgressModal :onCancel="onCancel" :modalData="modalData" /> -->
+    <div class="w-full state-box-col relative">
+      <div class="state-box">
+        <div class="title">
+          <img class="state-title01" src="@ASSET/img/state-title01.svg" />
+          <span class="">{{ equipmentData.title }}</span>
+          <img class="state-title02" src="@ASSET/img/state-title02.svg" />
+        </div>
+        <table class="table table-sm text-center">
+          <thead>
+            <tr class="border-cyan-400 text-cyan-100">
+              <th></th>
+              <th>{{ $t("alert.online") }}</th>
+              <th>{{ $t("alert.offline") }}</th>
+              <th>{{ $t("alert.alarm") }}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="(item, index) in equipmentData.items"
+              :key="index"
+              class="border-cyan-400 cursor-pointer hover:text-info"
+            >
+              <th class="px-0 text-start">{{ item.label }}</th>
+              <td>
+                {{ item.online.length }}
+              </td>
+              <td>
+                {{ item.offline.length }}
+              </td>
+              <td>
+                {{ item.alarm.length }}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.state-box-col:before {
+  @apply absolute left-0 right-0 -top-0.5 m-auto h-2 w-36 bg-no-repeat bg-center z-10;
+  content: "";
+  background-image: url(@ASSET/img/state-box-top.png);
+}
+
+.state-box-col:after {
+  @apply absolute left-0 right-0 -bottom-0.5 m-auto h-2 w-36 bg-no-repeat bg-center z-10;
+  content: "";
+  background-image: url(@ASSET/img/state-box-bottom.png);
+}
+
+.state-box {
+  @apply h-[21rem] border border-light-info shadow-md shadow-blue-300 rounded-sm py-2 px-6 mb-5 text-white relative;
+}
+
+.state-box:after {
+  @apply absolute right-3 top-3 w-4 h-4 bg-no-repeat bg-center z-10;
+  content: "";
+  background-image: url(@ASSET/img/state-title01.svg);
+}
+
+.state-box:before {
+  @apply absolute right-0.5 bottom-5 w-4 h-32 bg-no-repeat bg-center z-10;
+  content: "";
+  background-image: url(@ASSET/img/state-ul-background02.svg);
+}
+
+.state-box .title {
+  @apply relative flex items-center mb-1;
+}
+
+.state-box .title .state-title01 {
+  @apply w-4 mr-1.5;
+}
+
+.state-box .title .state-title02 {
+  @apply w-5 ml-1.5;
+}
+</style>