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="activeBtn = '月'" :class="{ 'active-btn': activeBtn === '月' }">
                   月
                </el-button>
                <el-button class="week-btn" @click="activeBtn = '周'" :class="{ 'active-btn': activeBtn === '周' }">
                   周
                </el-button>
              </div>
            </template>
          </ContentHeader>
        </div>
        <div class="chart-container">
          <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">37</div>
            </div>
          </div>
          <div class="device-list">
            <div class="device-card">
              <div class="mb-3">车体检测设备: 12</div>
              <DeviceStatus :deviceStatus="deviceStatus" />
            </div>
            <div class="device-card">
              <div class="mb-3">撑杆检测设备: 10</div>
              <DeviceStatus :deviceStatus="deviceStatus" />
            </div>
            <div class="device-card">
              <div class="mb-3">钩机检测设备: 15</div>
              <DeviceStatus :deviceStatus="deviceStatus" />
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 中部检测模块 -->
    <div class="grid-container">
      <ul class="flex grid-item">
        <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.name" placeholder="时间" class="custom-select">
                    <el-option label="A" value="deviceA"></el-option>
                    <el-option label="B" value="deviceB"></el-option>
                </el-select>
              </template>
            </ContentHeader>
          </div>
          <div class="chart-container">
            <PieChart
              :data="[
                { value: 26, name: '搭扣未搭' },
                { value: 35, name: '下侧门缺失' },
                { value: 15, name: '小门搭扣丢失' },
                { value: 15, name: '门折页脱落' },
                { value: 10, name: '小门外翘' },
                { value: 5, name: '小窗裂纹' },
              ]"
              :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.name" placeholder="时间" class="custom-select">
                    <el-option label="A" value="deviceA"></el-option>
                    <el-option label="B" value="deviceB"></el-option>
                </el-select>
              </template>
            </ContentHeader>
          </div>
          <div class="chart-container">
            <PieChartSmall
              :data="[
                { value: 65, name: '撑杆断裂' },
                { value: 35, name: '撑杆弯曲' },
              ]"
              :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">
          <img src="https://picsum.photos/300/200?random=1" alt="监控画面" />
          <img src="https://picsum.photos/300/200?random=2" alt="监控画面" />
        </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";
const xData = ref(["1月", "2月", "3月", "4月", "5月"]);
const legendArr = ["车体检测", "撑杆检测"];
const datas = [
  [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({
    name: "",
    status: "",
    faultType: "",
});
const activeBtn = ref("月");
onMounted(() => {
});
</script>

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