5G-Loading-Bay-Web/src/views/dashboard/DataOverview.vue

<script lang="ts" setup>
import * as echarts from "echarts";
import TotalChart from "@/components/Charts/totalChart.vue";
import PoleMonitorChart from "@/components/Charts/poleMonitorChart.vue";
import VehicleMonitorChart from "@/components/Charts/vehicleMonitorChart.vue";
import HomeSubTitle from "@/components/HeaderBar/homeSubTitle.vue";
import DeviceStatus from "./components/DeviceStatus.vue";
import car_device_icon from "@/assets/home/car_device_icon.png";
import pole_device_icon from "@/assets/home/pole_device_icon.png";
import excavator_device_icon from "@/assets/home/excavator_device_icon.png";
import {
  getDataOverviewApi,
  getDeviceInfowApi,
  getRecordFaultApi,
  getRealTimeApi,
} from "@/api/dashboard";
import { isSuccessApi } from "@/utils/forApi";
import { isArray } from "@/utils/is";
import AlarmModal from "./components/AlarmModal.vue";
import { dataViewConfig } from "@/config/dataView";
import { useWebSocketStore } from "@/stores/websocketStore";
import { onBeforeRouteLeave } from "vue-router";
defineOptions({
  name: "DataOverviewWrap",
});
// TODO 需要转移到mock中
const xData = ref(["1月", "2月", "3月", "4月", "5月"]);
const legendArr = ["车体检测", "撑杆检测"];
const datas = ref([
  [1528, 1266.02, 2468.39, 2982.67, 3165.91],
  [2844.44, 6505.07, 8016.12, 6350.87, 1474.61],
]);
const colorArr = [
  ["#3B9FFE", "#5070F2"],
  ["#FFDA8D", "#FFAC06"],
];
const deviceStatus = ref({
  onlineCount: 50,
  errorCount: 10,
  outlineCount: 10,
});
const searchForm = reactive({
  car: "1",
  pole: "1",
});
const deviceTotal = ref(0);

const carFaultTotal = ref([]);
const poleFaultTotal = ref([]);
const imageFault = ref([]);
const activeBtn = ref("month");
const isAlarmOpen = ref<Boolean>(false); //详情弹窗
const currentRow = ref<Record<string, any>>({}); // 当前选中行
const currFileList = ref<Record<string, any>[]>([]); // 详情的文件列表
const deviceInfo = reactive({
  list: [
    {
      name: "车体检测设备",
      bindVal: {
        total: 0,
      },
      icon: car_device_icon,
    },
    {
      name: "撑杆检测设备",
      bindVal: {
        total: 0,
      },
      icon: pole_device_icon,
    },
    {
      name: "钩机检测设备",
      bindVal: {
        total: 0,
      },
      icon: excavator_device_icon,
    },
  ],
});

const websocketStore = useWebSocketStore();
// 监听 messages 的变化
watch(
  () => websocketStore.messages,
  (newMessages: string[], oldMessages: string[]) => {
    if (newMessages?.length > 0 && !isAlarmOpen.value) {
      currentRow.value = newMessages[newMessages?.length - 1];
      currFileList.value = newMessages[newMessages?.length - 1]?.images;
      isAlarmOpen.value = true;
    }
  },
  { deep: true, immediate: true }
);

const getList = async (dateType: string = "month") => {
  activeBtn.value = dateType;
  const res = await getDataOverviewApi({ dateType });
  if (isSuccessApi(res)) {
    const { data } = res;
    datas.value[0] = data.appearance;
    datas.value[1] = data.pole;
    if (dateType === "month") {
      xData.value = data.dateArr.map((item: any) => {
        if (dateType === "month") {
          return item + "月";
        }
      });
    } else {
      xData.value = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
    }
    // console.log(data, 'getList_data')
  }
};
const getDeviceInfo = async () => {
  try {
    const res = await getDeviceInfowApi();
    if (isSuccessApi(res)) {
      const { data } = res;
      deviceTotal.value = data.deviceTotal;
      deviceInfo.list = [
        {
          name: "车体检测设备",
          bindVal: data?.appearance,
          icon: car_device_icon,
        },
        {
          name: "撑杆检测设备",
          bindVal: data?.pole,
          icon: pole_device_icon,
        },
        {
          name: "钩机检测设备",
          bindVal: data?.excavator,
          icon: excavator_device_icon,
        },
      ];
    }
  } catch (error) {
    console.error("获取设备信息出错:", error);
  }
};
const fetchPoleMonitorData = async () => {
  try {
    const res = await getRecordFaultApi({
      dateType: "month",
      value: searchForm.pole,
      type: "pole",
    });
    if (isSuccessApi(res)) {
      const { data } = res;
      poleFaultTotal.value = data;
      // deviceStatus.value = data
      console.log(data);
    }
  } catch (error) {
    console.error("获取设备信息出错:", error);
  }
};
//
const fetchTrainMonitorData = async () => {
  try {
    const res = await getRecordFaultApi({
      dateType: "month",
      value: searchForm.car,
      type: "appearance",
    });
    if (isSuccessApi(res)) {
      const { data } = res;
      carFaultTotal.value = data;
      // deviceStatus.value = data
      console.log(data);
    }
  } catch (error) {
    console.error("获取设备信息出错:", error);
  }
};

const getRealTime = async () => {
  try {
    const res = await getRealTimeApi({ deviceType: "" });
    if (isSuccessApi(res)) {
      const { data } = res;
      if (isArray(data)) {
        // TODO 暂时使用接口图重复填充
        imageFault.value = data.concat(data).concat(data).splice(0, 4);
      }
      // deviceStatus.value = data
      console.log(data);
    }
  } catch (error) {
    console.error("获取设备信息出错:", error);
  }
};
onBeforeRouteLeave(() => {
  isAlarmOpen.value = false;
  currentRow.value = {};
  currFileList.value = [];
});
onMounted(() => {
  getList();
  getDeviceInfo();
  fetchTrainMonitorData();
  fetchPoleMonitorData();
  getRealTime();
});
</script>
<template>
  <div class="flex data-overview-wrap">
    <!-- 检测总量汇总 -->
    <div class="grid-container">
      <div class="grid-item">
        <div class="module-header">
          <HomeSubTitle title="检测总量汇总">
            <template #extra>
              <div>
                <el-button
                  type="primary"
                  class="month-btn"
                  @click="getList('month')"
                  :class="{ 'active-btn': activeBtn === 'month' }"
                >
                  月
                </el-button>
                <el-button
                  class="week-btn"
                  @click="getList('week')"
                  :class="{ 'active-btn': activeBtn === 'week' }"
                >
                  周
                </el-button>
              </div>
            </template>
          </HomeSubTitle>
        </div>
        <div class="chart-container">
          <TotalChart
            :xData="xData"
            :legendArr="legendArr"
            :datas="datas"
            :colorArr="colorArr"
          />
        </div>
      </div>
      <div class="grid-item">
        <div class="module-header">
          <HomeSubTitle title="车体监测">
            <template #extra>
              <div class="flex items-center text-[14px] px-[16px]">
                <span>时间：</span>
                <el-select
                  v-model="searchForm.pole"
                  placeholder="时间"
                  class="custom-select mini-size"
                  @change="fetchPoleMonitorData()"
                >
                  <el-option
                    v-for="v in dataViewConfig.monthArr"
                    :key="v?.value"
                    :label="v?.name"
                    :value="v?.value"
                  ></el-option>
                </el-select>
              </div>
            </template>
          </HomeSubTitle>
        </div>
        <div class="chart-container chart-pie-bg">
          <!-- <PieChart :data="carFaultTotal" :colors="[
              '#FF7C09',
              '#0032FF',
              '#04FFF2',
              '#D19EFF',
              '#FF0103',
              '#9EFFF3',
            ]" /> -->
          <VehicleMonitorChart />
        </div>
      </div>
      <div class="grid-item">
        <div class="module-header">
          <HomeSubTitle title="撑杆监测">
            <template #extra>
              <div class="flex items-center text-[14px] px-[16px]">
                <span>时间：</span>
                <el-select
                  v-model="searchForm.pole"
                  placeholder="时间"
                  class="custom-select mini-size"
                  @change="fetchPoleMonitorData()"
                >
                  <el-option
                    v-for="v in dataViewConfig.monthArr"
                    :key="v?.value"
                    :label="v?.name"
                    :value="v?.value"
                  ></el-option>
                </el-select>
              </div>
            </template>
          </HomeSubTitle>
        </div>
        <div class="chart-container chart-pie-bg">
          <PoleMonitorChart />
          <!-- <PieChartSmall :data="poleFaultTotal" :colors="['#9DFFF3', '#FFA179']" /> -->
        </div>
      </div>
    </div>
    <!-- 中部检测模块 -->
    <div class="realTime-monitor-box">
      <div class="w-full h-[35px] fg-title px-[16px] py-[20px]">
        实时监测画面
      </div>
      <ul class="flex monitor-images">
        <li class="monitor-images-item" v-for="(v, i) in imageFault" :key="i">
          <img :src="v?.url" />
          <div class="fault-info">{{ v?.fault_type }}</div>
        </li>
      </ul>
    </div>
    <!-- 设备信息 -->
    <div class="device-info-box">
      <div class="module-header">
        <HomeSubTitle title="设备信息"> </HomeSubTitle>
      </div>
      <div class="device-info">
        <div class="flex items-center justify-center total-device">
          <div class="device-total-icon mt-[24px]"></div>
          <div class="device-count ml-[24px]">
            <div class="fg-mark1 text-[32px] font-bold">
              {{ deviceTotal }}
            </div>
            <div class="text-[14px]">设备总数</div>
          </div>
        </div>
        <ul class="device-list">
          <li class="device-card" v-for="(v, k) in deviceInfo.list" :key="k">
            <div
              class="device-card-head text-[16px] flex items-center mb-[12px]"
            >
              <img :src="v.icon" alt="" class="w-[32px]" />
              <span class="ml-[12px]">{{ v.name }}：</span>
              <span class="font-bold">{{ v.bindVal?.total || 0 }}</span>
            </div>
            <!-- //TODO 使用echarts重构 https://echarts.zhangmuchen.top/#/detail?cid=164bb-40c1-e483-b7c9b-6cb171ad -->
            <DeviceStatus :deviceStatus="v.bindVal" />
          </li>
        </ul>
      </div>
    </div>
    <AlarmModal
      v-model:value="isAlarmOpen"
      :info="currentRow"
      :image="currFileList"
      @close="isAlarmOpen = false"
    />
  </div>
</template>
<style scoped lang="scss">
@import url("./DataOverview.scss");
</style>