LNYD_Web/src/views/screen/index.vue

<script setup lang="ts">
import Header from "@/views/screen/components/Header.vue";
import BoxGroup from "@/views/screen/components/BoxGroup.vue";
import UsedStatus from "@/views/screen/layouts/UsedStatus.vue";
import { reactive } from "vue";
import LineChart1 from "@/views/screen/components/charts/LineChart1.vue";
import LineChart2 from "@/views/screen/components/charts/LineChart2.vue";
import Pie1 from "@/views/screen/components/charts/Pie1.vue";
import RadarChart1 from "@/views/screen/components/charts/RadarChart1.vue";
import NewCompany from "@/views/screen/components/charts/NewCompany.vue";
import BarChart1 from "@/views/screen/components/charts/BarChart1.vue";
import BarChart2 from "@/views/screen/components/charts/BarChart2.vue";
import LongBoxGroup from "@/views/screen/components/LongBoxGroup.vue";
import LineChart3 from "@/views/screen/components/charts/LineChart3.vue";
import Pie3D from "@/views/screen/components/charts/Pie3D.vue";
import {
  card1_data,
  card2_data,
  card3_data,
  card4_data,
  card5_data,
  card6_data,
  card7_data,
  card8_data,
  card9_data,
  card10_data
} from "./mock";
defineOptions({
  name: "Screen"
});

const state = reactive({
  data: {
    card1: card1_data,
    card2: card2_data,
    card3: card3_data,
    card4: card4_data,
    card5: card5_data,
    card6: card6_data,
    card7: card7_data,
    card8: card8_data,
    card9: card9_data,
    card10: card10_data
  }
});

const randomIntFn = (min: number, max: number) => {
  return Math.floor(Math.random() * (max - min + 1) + min);
};

const randomFloatFn = (min: number, max: number) => {
  return (Math.random() * (max - min + 1) + min).toFixed(2);
};

setInterval(() => {
  //card1
  setTimeout(() => {
    state.data.card1.data[0].value = randomIntFn(0, 1000);
    state.data.card1.data[1].value = randomIntFn(0, 1000);
  }, 100);
  //card2
  setTimeout(() => {
    state.data.card2.data[0].value = randomIntFn(0, 1000);
    state.data.card2.data[1].value = randomIntFn(0, 1000);
    state.data.card2.data[2].value = randomIntFn(0, 1000);
    state.data.card2.data[3].value = randomIntFn(0, 1000);
    state.data.card2.data[4].value = randomIntFn(0, 1000);
    state.data.card2.data[5].value = randomIntFn(0, 1000);
    state.data.card2.data[6].value = randomIntFn(0, 1000);
  }, 200);

  //card3
  setTimeout(() => {
    state.data.card3.data[0].value = randomIntFn(0, 500);
    state.data.card3.data[1].value = randomIntFn(0, 500);
    state.data.card3.data[2].value = randomIntFn(0, 500);
    state.data.card3.data[3].value = randomIntFn(0, 500);
    state.data.card3.data[4].value = randomIntFn(0, 500);
  }, 300);

  //card4

  //card5
  setTimeout(() => {
    state.data.card5.data.month_data[0].value = randomIntFn(0, 1000);
    state.data.card5.data.month_data[1].value = randomIntFn(0, 1000);
    state.data.card5.data.month_data[2].value = randomIntFn(0, 1000);
    state.data.card5.data.month_data[3].value = randomIntFn(0, 1000);
    state.data.card5.data.month_data[4].value = randomIntFn(0, 1000);
    state.data.card5.data.month_data[5].value = randomIntFn(0, 1000);
    state.data.card5.data.month_data[6].value = randomIntFn(0, 1000);
    state.data.card5.data.month_data[7].value = randomIntFn(0, 1000);
    state.data.card5.data.month_data[8].value = randomIntFn(0, 1000);
    state.data.card5.data.month_data[9].value = randomIntFn(0, 1000);
    state.data.card5.data.month_data[10].value = randomIntFn(0, 1000);
    state.data.card5.data.month_data[11].value = randomIntFn(0, 1000);
  }, 400);

  //card6
  setTimeout(() => {
    state.data.card6.data[0].value = randomIntFn(0, 500);
    state.data.card6.data[1].value = randomIntFn(0, 500);
    state.data.card6.data[2].value = randomIntFn(0, 500);
    state.data.card6.data[3].value = randomIntFn(0, 500);
    state.data.card6.data[4].value = randomIntFn(0, 500);
  }, 500);

  //card7
  setTimeout(() => {
    state.data.card7.data[0].value = randomIntFn(0, 500);
    state.data.card7.data[1].value = randomIntFn(0, 500);
  }, 600);

  //card8
  setTimeout(() => {
    state.data.card8.data.cpu_used = randomFloatFn(0, 100);
    state.data.card8.data.memory_used = randomFloatFn(0, 100);
    state.data.card8.data.disk_used = randomFloatFn(0, 100);
    state.data.card8.data.image_server_used = randomFloatFn(0, 100);
  }, 700);

  //card9
  setTimeout(() => {
    state.data.card9.data[0].value = randomIntFn(0, 100);
    state.data.card9.data[1].value = randomIntFn(0, 100);
    state.data.card9.data[2].value = randomIntFn(0, 100);
    state.data.card9.data[3].value = randomIntFn(0, 100);
    state.data.card9.data[4].value = randomIntFn(0, 100);
    state.data.card9.data[5].value = randomIntFn(0, 100);
    state.data.card9.data[6].value = randomIntFn(0, 100);
    state.data.card9.data[7].value = randomIntFn(0, 100);
    state.data.card9.data[8].value = randomIntFn(0, 100);
    state.data.card9.data[9].value = randomIntFn(0, 100);
    state.data.card9.data[10].value = randomIntFn(0, 100);
    state.data.card9.data[11].value = randomIntFn(0, 100);
  }, 800);

  //card10
  setTimeout(() => {
    state.data.card10.cloud_cpu_used_top5[0].value = randomFloatFn(0, 100);
    state.data.card10.cloud_cpu_used_top5[1].value = randomFloatFn(0, 100);
    state.data.card10.cloud_cpu_used_top5[2].value = randomFloatFn(0, 100);
    state.data.card10.cloud_cpu_used_top5[3].value = randomFloatFn(0, 100);
    state.data.card10.cloud_cpu_used_top5[4].value = randomFloatFn(0, 100);

    state.data.card10.cloud_memory_used_top5[0].value = randomFloatFn(0, 100);
    state.data.card10.cloud_memory_used_top5[1].value = randomFloatFn(0, 100);
    state.data.card10.cloud_memory_used_top5[2].value = randomFloatFn(0, 100);
    state.data.card10.cloud_memory_used_top5[3].value = randomFloatFn(0, 100);
    state.data.card10.cloud_memory_used_top5[4].value = randomFloatFn(0, 100);

    state.data.card10.local_cpu_used_top5[0].value = randomFloatFn(0, 100);
    state.data.card10.local_cpu_used_top5[1].value = randomFloatFn(0, 100);
    state.data.card10.local_cpu_used_top5[2].value = randomFloatFn(0, 100);
    state.data.card10.local_cpu_used_top5[3].value = randomFloatFn(0, 100);
    state.data.card10.local_cpu_used_top5[4].value = randomFloatFn(0, 100);

    state.data.card10.local_memory_used_top5[0].value = randomFloatFn(0, 100);
    state.data.card10.local_memory_used_top5[1].value = randomFloatFn(0, 100);
    state.data.card10.local_memory_used_top5[2].value = randomFloatFn(0, 100);
    state.data.card10.local_memory_used_top5[3].value = randomFloatFn(0, 100);
    state.data.card10.local_memory_used_top5[4].value = randomFloatFn(0, 100);
  }, 900);
}, 10000);
</script>

<template>
  <div class="data-dashboard">
    <div class="data-dashboard-bg">
      <img
        style="width: 1920px; height: 1080px; filter: brightness(30%)"
        src="/src/assets/screen/bg.png"
        alt=""
      />
    </div>
    <section class="header"><Header title="算力云数据平台" /></section>
    <section class="card1">
      <BoxGroup title="算法总数">
        <template v-slot:content>
          <Pie1 :data="state.data.card1.data" />
        </template>
      </BoxGroup>
    </section>
    <section class="card2">
      <BoxGroup title="算法分布">
        <template v-slot:content>
          <RadarChart1 :data="state.data.card2.data" />
        </template>
      </BoxGroup>
    </section>
    <section class="card3">
      <BoxGroup title="用户使用时长">
        <template v-slot:content>
          <LineChart1 :data="state.data.card3.data" />
        </template>
      </BoxGroup>
    </section>
    <section class="card4">
      <BoxGroup title="已入驻企业(859)">
        <template v-slot:content>
          <NewCompany :data="state.data.card4.data" />
        </template>
      </BoxGroup>
    </section>
    <section class="card5">
      <BoxGroup title="5G数据用量(GB)" :is_date_select="true">
        <template v-slot:content="{ time_type }">
          <BarChart1
            :month_data="state.data.card5.data.month_data"
            :week_data="state.data.card5.data.week_data"
            :day_data="state.data.card5.data.day_data"
            :time_type="time_type"
          />
        </template>
      </BoxGroup>
    </section>
    <section class="card6">
      <BoxGroup title="带宽使用(Mbps)">
        <template v-slot:content>
          <LineChart2 :data="state.data.card6.data" />
        </template>
      </BoxGroup>
    </section>
    <section class="card7">
      <Pie3D :data="state.data.card7.data" />
    </section>
    <section class="card8">
      <BoxGroup title="用量统计">
        <template v-slot:content>
          <UsedStatus :data="state.data.card8.data" />
        </template>
      </BoxGroup>
    </section>
    <section class="card9">
      <BoxGroup title="节点GPU占用">
        <template v-slot:content>
          <BarChart2 :data="state.data.card9.data" />
        </template>
      </BoxGroup>
    </section>
    <section class="card10">
      <LongBoxGroup>
        <template v-slot:content>
          <div class="bottom_box">
            <LineChart3 :data="state.data.card10.cloud_cpu_used_top5" />
          </div>
          <div class="bottom_box">
            <LineChart3 :data="state.data.card10.cloud_memory_used_top5" />
          </div>
          <div class="bottom_box">
            <LineChart3 :data="state.data.card10.local_cpu_used_top5" />
          </div>
          <div class="bottom_box">
            <LineChart3 :data="state.data.card10.local_memory_used_top5" />
          </div>
        </template>
      </LongBoxGroup>
    </section>
  </div>
</template>

<style scoped>
/* 在这里引入外部的 style.css 文件 */
@import url("./style.css");

.bottom_box {
  width: 460px;
  height: 180px;
}
</style>