General-AI-Platform-Web-Client/src/views/workbench/index.vue

<script setup lang="ts">
import ReCol from "@/components/ReCol";
import { barChart, pieChart, pie3DChart } from "./components/chart";
import DeviceStatus from "./components/DeviceStatus.vue";
import Notify from "./components/Notify.vue";
import SwiperShow from "./components/SwiperShow.vue";
// import dataViewIcon1 from "@/assets/svg/icons/dataViewIcon1.svg";
// import dataViewIcon2 from "@/assets/svg/icons/dataViewIcon1.svg";

defineOptions({
  name: "Workbench"
});

/** 分析概览 */
// const barChartData = [
//   {
//     requireData: [2101, 5288, 4239, 4962, 6752, 5208, 7450],
//     questionData: [2216, 1148, 1255, 1788, 4821, 1973, 4379]
//   },
//   {
//     requireData: [2101, 3280, 4400, 4962, 5752, 6889, 7600],
//     questionData: [2116, 3148, 3255, 3788, 4821, 4970, 5390]
//   }
// ];
const pie3Ddata = {
  data: [
    { name: "紧急", value: 30 },
    { name: "较高", value: 10 },
    { name: "一般", value: 60 }
  ]
};

// 数据预览
// TODO 图标需要替换
const dataViewList = [
  {
    label: "异常总量",
    value: "110200",
    color: "#FF861A",
    bgColor: "#FFE9D6",
    icon: "icon-suanlipeizhi"
  },
  {
    label: "设备总量",
    value: "46700",
    color: "#5786FF",
    bgColor: "#D6E0FF",
    icon: "icon-suanlipeizhi"
  },
  {
    label: "覆盖网点",
    value: "304800",
    color: "#5024FE",
    bgColor: "#DDD5FD",
    icon: "icon-suanlipeizhi"
  },
  {
    label: "资源使用",
    value: "89300",
    color: "#14A1FF",
    bgColor: "#D6EFFF",
    icon: "icon-suanlipeizhi"
  }
];
</script>

<template>
  <div class="main">
    <el-row :gutter="24" justify="space-around">
      <re-col
        v-motion
        class="mb-[18px]"
        :value="24"
        :md="24"
        :sm="24"
        :xs="24"
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 480
          }
        }"
      >
        <el-card class="line-card" shadow="never" :body-style="{ padding: 0 }">
          <div class="flex justify-between h-[140px]">
            <SwiperShow />
          </div>
        </el-card>
      </re-col>

      <!-- up -->

      <re-col
        v-motion
        class="mb-[18px]"
        :value="8"
        :md="8"
        :sm="8"
        :xs="8"
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 480
          }
        }"
      >
        <span class="inline-block mb-3 text-base">数据总览</span>

        <ul class="flex justify-between flex-wrap h-[252px] dataView_box">
          <!-- <pieChart /> -->
          <li v-for="(v, k) in dataViewList" :key="k" class="w-1/2">
            <el-card class="line-card" shadow="always">
              <div class="flex items-center justify-center h-[77px]">
                <div
                  class="flex items-center justify-center"
                  style="width: 48px; height: 48px; border-radius: 50%"
                  :style="{ backgroundColor: v.bgColor }"
                >
                  <i
                    class="iconfont"
                    :class="v.icon"
                    style="font-size: 28px"
                    :style="{ color: v.color }"
                  />
                </div>
                <div class="dataView_info">
                  <span>{{ v.label }}</span>
                  <p>{{ v.value }}</p>
                </div>
              </div>
            </el-card>
          </li>
        </ul>
      </re-col>
      <re-col
        v-motion
        class="mb-[18px]"
        :value="8"
        :md="8"
        :sm="8"
        :xs="8"
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 480
          }
        }"
      >
        <span class="inline-block mb-3 text-base">设备状态</span>
        <el-card
          class="line-card"
          shadow="always"
          :body-style="{ padding: '16px' }"
        >
          <div class="flex justify-between h-[220px]"><DeviceStatus /></div>
        </el-card>
      </re-col>
      <re-col
        v-motion
        class="mb-[18px]"
        :value="8"
        :md="8"
        :sm="8"
        :xs="8"
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 480
          }
        }"
      >
        <span class="inline-block mb-3 text-base">设备告警情况</span>
        <el-card
          class="line-card"
          shadow="always"
          :body-style="{ padding: '16px' }"
        >
          <div class="flex justify-between h-[220px]">
            <pie3DChart :data="pie3Ddata.data" />
          </div>
        </el-card>
      </re-col>
      <!-- down -->
      <re-col
        v-motion
        class="mb-[18px]"
        :value="8"
        :md="8"
        :sm="8"
        :xs="8"
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 480
          }
        }"
      >
        <span class="inline-block mb-3 text-base">违规总量</span>
        <el-card
          class="line-card"
          shadow="always"
          :body-style="{ padding: '16px' }"
        >
          <div class="flex justify-between h-[265px]">
            <barChart />
          </div>
        </el-card>
      </re-col>
      <re-col
        v-motion
        class="mb-[18px]"
        :value="8"
        :md="8"
        :sm="8"
        :xs="8"
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 480
          }
        }"
      >
        <span class="inline-block mb-3 text-base">算力占用</span>
        <el-card
          class="line-card"
          shadow="always"
          :body-style="{ padding: '16px' }"
        >
          <div class="flex justify-between h-[265px]">
            <pieChart />
          </div>
        </el-card>
      </re-col>
      <re-col
        v-motion
        class="mb-[18px]"
        :value="8"
        :md="8"
        :sm="8"
        :xs="8"
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 480
          }
        }"
      >
        <span class="inline-block mb-3 text-base">消息通知</span>
        <el-card class="line-card" shadow="always" :body-style="{ padding: 0 }">
          <div class="flex justify-between h-[297px]">
            <Notify />
          </div>
        </el-card>
      </re-col>
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
.dataView_box {
  & > li {
    padding-right: 16px;
    margin-bottom: 16px;
    &:nth-child(2n) {
      padding-right: 0;
    }
  }
  .dataView_info {
    padding-left: 16px;
    & > span {
      color: #666;
      font-size: 14fpx;
    }
    & > p {
      color: #333;
      font-size: 24px;
      line-height: 36px;
    }
  }
}
</style>