xiaodou-ai-admin/src/pages/cvs/csys/index.vue

<template>
<a-card title="系统概览" >
  <a-row justify="space-between" >
    <a-col>
      <a-select style="width: 170px;" v-model:value="spaceId" >
        <a-select-option v-for="item in spaceList" :key="item.id" :value="item.spaceId" >{{item.spaceName}}</a-select-option>
      </a-select>
    </a-col>
    <a-col><a-button type="primary" @click="reload" >刷新</a-button></a-col>
  </a-row>
  <!-- 仪表盘 -->
  <a-spin :spinning="loading" >
    <div class="board">
      <a-row>
        <a-col :span="24" >今日数据</a-col>
        <a-col :span="24">
          <a-row align="middle" >
            <a-col :span="8" >
              <div id="pie" style="width: 200px;height: 300px;" ></div>
            </a-col>
            <a-col :span="16" >
              <a-row :gutter="[8, 8]" >
                <a-col :span="11" v-for="(item, index) in statisticList" :key="index" >
                  <a-statistic
                    :title="item.label"
                    :value="0"
                    :precision="2"
                    suffix="%"
                    :value-style="{ color: '#3f8600' }"
                    style="margin-right: 50px"
                  >
                    <template #prefix>
                      <arrow-up-outlined />
                    </template>
                  </a-statistic>
                </a-col>
              </a-row>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
    </div>
  </a-spin>
</a-card>
</template>
<script lang='ts' setup >
import { SpaceController } from '@/controller'
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'
import { pieOption } from './echartsJson'
import { ArrowUpOutlined } from '@ant-design/icons-vue'
import { useSchedulerOnce } from '@/hooks'

const spaceList = ref<CVS.space[]>([])

const spaceId = ref(null)

const loading = ref<boolean>(false)

const statisticList = [{ label: '上行带宽峰值' }, { label: '上行流量' }, { label: '下行带宽峰值' }, { label: '下行流量' }]

const initPie = () => {
  const chartDom = document.getElementById('pie')!
  const myChart = echarts.init(chartDom)
  myChart.setOption(pieOption)
}

const reload = () => {
  loading.value = true
  useSchedulerOnce(() => {
    console.log('????')

    loading.value = false
  }, 1000)
}

const getSpaceList = async () => {
  spaceList.value = await SpaceController.list()
  spaceId.value = spaceList.value[0].spaceId
}

onMounted(() => {
  getSpaceList()
  initPie()
  reload()
})

</script>
<style lang='less' scoped >

.board {
  width: 100%;
  margin-top: 10px;
  padding: 10px 20px 20px;
  border: 1px solid #ebebeb;
}
</style>
./echartsJson