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

<template>
  <div class="data-overview-wrap">
    <!-- 检测总量汇总 -->
    <div class="grid-container">
      <div class="grid-item">
        <div class="module-header">
          <ContentHeader bgLayout="918">
            <template #title>
              <div class="w-[200px] bg_title bg_title_0"></div>
            </template>
            <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>
          </ContentHeader>
        </div>
        <div class="chart-container chart-container-bar">
          <BarChart
            :xData="xData"
            :legendArr="legendArr"
            :datas="datas"
            :colorArr="colorArr"
          />
        </div>
      </div>
      <!-- 设备信息 -->
      <div class="grid-item">
        <div class="module-header">
          <ContentHeader bgLayout="918">
            <template #title>
              <div class="w-[200px] bg_title bg_title_1"></div>
            </template>
            <template #extra>
              <div></div>
            </template>
          </ContentHeader>
        </div>
        <div class="device-info">
          <div class="total-device">
            <div class="device-icon"></div>
            <div class="device-count">
              <div>设备总数</div>
              <div class="count-number">{{ deviceTotal }}</div>
            </div>
          </div>
          <div class="device-list">
            <div class="device-card">
              <div class="mb-3">车体检测设备: {{ carDevice.total }}</div>
              <DeviceStatus :deviceStatus="carDevice" />
            </div>
            <div class="device-card">
              <div class="mb-3">撑杆检测设备: {{ poleDevice.total }}</div>
              <DeviceStatus :deviceStatus="poleDevice" />
            </div>
            <div class="device-card">
              <div class="mb-3">钩机检测设备: {{ excavatorDevice.total }}</div>
              <DeviceStatus :deviceStatus="excavatorDevice" />
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 中部检测模块 -->
    <div class="grid-container">
      <ul class="flex grid-item grid-item-pie">
        <li>
          <div class="module-header">
            <ContentHeader bgLayout="450">
              <template #title>
                <div class="w-[200px] bg_title bg_title_2"></div>
              </template>
              <template #extra>
                  <el-select v-model="searchForm.car" placeholder="时间" class="custom-select" @change="getCarFault()">
                    <el-option label="1月" value="1"></el-option>
                    <el-option label="2月" value="2"></el-option>
                    <el-option label="3月" value="3"></el-option>
                    <el-option label="4月" value="4"></el-option>
                    <el-option label="5月" value="5"></el-option>
                    <el-option label="6月" value="6"></el-option>
                    <el-option label="7月" value="7"></el-option>
                    <el-option label="8月" value="8"></el-option>
                    <el-option label="9月" value="9"></el-option>
                    <el-option label="10月" value="10"></el-option>
                    <el-option label="11月" value="11"></el-option>
                    <el-option label="12月" value="12"></el-option>
                </el-select>
              </template>
            </ContentHeader>
          </div>
          <div class="chart-container chart-pie-bg">
            <PieChart
              :data="carFaultTotal"
              :colors="[
                '#FF7C09',
                '#0032FF',
                '#04FFF2',
                '#D19EFF',
                '#FF0103',
                '#9EFFF3',
              ]"
            />
          </div>
        </li>
        <li>
          <div class="module-header">
            <ContentHeader bgLayout="450">
              <template #title>
                <div class="w-[200px] bg_title bg_title_3"></div>
              </template>
              <template #extra>
                <el-select v-model="searchForm.pole" placeholder="时间" class="custom-select" @change="getPoleFault()">
                  <el-option label="1月" value="1"></el-option>
                    <el-option label="2月" value="2"></el-option>
                    <el-option label="3月" value="3"></el-option>
                    <el-option label="4月" value="4"></el-option>
                    <el-option label="5月" value="5"></el-option>
                    <el-option label="6月" value="6"></el-option>
                    <el-option label="7月" value="7"></el-option>
                    <el-option label="8月" value="8"></el-option>
                    <el-option label="9月" value="9"></el-option>
                    <el-option label="10月" value="10"></el-option>
                    <el-option label="11月" value="11"></el-option>
                    <el-option label="12月" value="12"></el-option>
                </el-select>
              </template>
            </ContentHeader>
          </div>
          <div class="chart-container chart-pie-bg">
            <PieChartSmall
              :data="poleFaultTotal"
              :colors="['#9DFFF3', '#FFA179']"
            />
          </div>
        </li>
      </ul>

      <div class="grid-item">
        <div class="module-header">
          <ContentHeader bgLayout="918">
            <template #title>
              <div class="w-[200px] bg_title bg_title_4"></div>
            </template>
            <template #extra>
              <div></div>
            </template>
          </ContentHeader>
        </div>
        <div class="monitor-images">
          <div class="monitor-images-left">
            <img :src="imageFault[0]?.url" alt="监控画面" />
            <div class="fault-info">{{ imageFault[0]?.fault_type }}</div>
          </div>
          <div class="monitor-images-right">
            <img :src="imageFault[1]?.url" alt="监控画面" />
            <div class="fault-info">{{ imageFault[1]?.fault_type }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import * as echarts from "echarts";
import ContentHeader from "@/components/ContentHeader.vue";
import BarChart from "./components/BarChart.vue";
import PieChart from "./components/PieChart.vue";
import PieChartSmall from "./components/PieChartSmall.vue";
import DeviceStatus from "./components/DeviceStatus.vue";
import { getDataOverviewApi,getDeviceInfowApi,getRecordFaultApi,getRealTimeApi } from '@/api/dashboard';

defineOptions({
    name: "DataOverviewWrap"
});
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 carDevice = ref({});
const poleDevice = ref({});
const excavatorDevice = ref({});
const carFaultTotal = ref([]);
const poleFaultTotal = ref([]);
const imageFault = ref([]);
const activeBtn = ref("month");
const getList = async (dateType:string = "month") => {
    activeBtn.value = dateType
    const res = await getDataOverviewApi({ dateType })
    const { data } = await 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();
    const { data } = res;
    deviceTotal.value = data.deviceTotal;
    carDevice.value = data.appearance;
    poleDevice.value = data.pole;
    excavatorDevice.value = data.excavator;
    // deviceStatus.value = data
  } catch (error) {
    console.error('获取设备信息出错:', error);
  }
}
const getPoleFault = async () => {
  try {
    const res = await getRecordFaultApi({dateType: 'month',value: searchForm.pole,type:"pole"});
    const { data } = res;
    poleFaultTotal.value = data;
    // deviceStatus.value = data
    console.log(data);
  } catch (error) {
    console.error('获取设备信息出错:', error);
  }
}
const getCarFault = async () => {
  try {
    const res = await getRecordFaultApi({dateType: 'month',value: searchForm.car,type:"appearance"});
    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: ''});
    const { data } = res;
    imageFault.value = data;
    // deviceStatus.value = data
    console.log(data);
  } catch (error) {
    console.error('获取设备信息出错:', error);
  }
}
onMounted(() => {
  getList()
  getDeviceInfo()
  getCarFault()
  getPoleFault()
  getRealTime()
});
</script>

<style scoped lang="scss">
@import url("./DataOverview.scss");
</style>