feat: 视联网系统假数据

src/pages/cvs/csys/echartsJson.ts

@@ -0,0 +1,35 @@
+export const pieOption = {
+  legend: {
+    top: 'bottom'
+  },
+  toolbox: {
+    show: true,
+    feature: {
+      mark: { show: true },
+      dataView: { show: true, readOnly: false },
+      restore: { show: true },
+      saveAsImage: { show: true }
+    }
+  },
+  series: [
+    {
+      name: 'Nightingale Chart',
+      type: 'pie',
+      radius: [30, 100],
+      center: ['50%', '50%'],
+      roseType: 'area',
+      itemStyle: {
+        borderRadius: 8
+      },
+      label: {
+        show: false
+      },
+      data: [
+        { value: 0, name: '在线 0' },
+        { value: 0, name: '拉流中 0' },
+        { value: 0, name: '已禁止拉流 0' },
+        { value: 0, name: '异常 0' }
+      ]
+    }
+  ]
+}

src/pages/cvs/csys/index.vue

@@ -1,9 +1,98 @@
 <template>
-<a-card>
-  sys
+<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