当日数据

src/views/HomeView.vue

@@ -1,15 +1,24 @@
 <template>
-    <div class="hello" v-if="isAdmin">
-        <div id="myChart" :style="{width: '100%', height: '800px'}"></div>
+    <div class="myTable" :style="{width:'100%'}">
+        <ElTable :data="tableData">
+            <ElTableColumn label="今日数据" align="center">
+                <ElTableColumn prop="sent" label="已发送" />
+                <ElTableColumn prop="success" label="发送成功" />
+                <ElTableColumn prop="total" label="总数" />
+                <ElTableColumn prop="code" label="取码量" v-if="isAdmin" />
+            </ElTableColumn>
+        </ElTable>
     </div>
+    <div id="myChart" :style="{width: '100%', height: '1000px',top: '40px'}"></div>
 </template>
 
 <script setup>
 import * as echarts from 'echarts'
-import { inject, onMounted } from 'vue'
+import { inject, onMounted, ref } from 'vue'
 import { http } from '@/plugins/http'
 
 const isAdmin = inject('isAdmin')
+const tableData = ref(null)
 
 onMounted(() => {
     drawBar()
@@ -22,13 +31,22 @@ async function drawBar() {
     let successData = res.successData
     let totalData = res.totalData
 
+    if (res.totalData.length > 0) {
+        tableData.value = [{
+            sent: res.todayData[1],
+            success: res.todayData[2],
+            total: res.todayData[3],
+            code: res.todayData[0]
+        }]
+    }
+
     let myChart = echarts.init(document.getElementById('myChart'))
     let app = {}
     app.config = {
         rotate: 0,
         align: 'center',
         verticalAlign: 'middle',
-        position: 'insideBottom',
+        position: 'top',
         distance: 15
     }
     const labelOption = {
@@ -38,16 +56,20 @@ async function drawBar() {
         align: app.config.align,
         verticalAlign: app.config.verticalAlign,
         rotate: app.config.rotate,
-        formatter: '{c}\n\{name|{a}}\n',
+        formatter: '{c}',
         fontSize: 16,
         rich: {
             name: {}
         }
     }
     let option = {
-        title: {
-            text: '近七天任务数量统计'
-        },
+        title: [
+            {
+                text: '近七天任务数量统计',
+                left: '10%',
+                textAlign: 'center'
+            }
+        ],
         tooltip: {
             trigger: 'axis',
             axisPointer: {
@@ -117,4 +139,5 @@ async function drawBar() {
     // 绘制图表
     myChart.setOption(option)
 }
-</script>
+
+</script>