欢迎页面

src/views/dashboard/components/components/st-count.vue

@@ -1,67 +1,65 @@
 <template>
   <div class="w-full mx-auto">
-    <a-grid :cols="{ xs: 1, sm: 12, md: 24 }" :row-gap="16" class="panel ma-content-block mt-3 p-4">
-      <a-grid-item class="panel-col" :span="6">
-        <a-space>
-          <a-avatar :size="54" class="col-avatar" style="padding: 10px">
-            <img alt="avatar" src="@/assets/image/user.svg" />
-          </a-avatar>
-          <a-statistic title="用户统计" :value="data.user" :value-from="0" animation show-group-separator>
-            <template #suffix><span class="unit">个</span> </template>
-          </a-statistic>
-        </a-space>
-      </a-grid-item>
-      <a-grid-item class="panel-col" :span="6">
-        <a-space>
-          <a-avatar :size="54" class="col-avatar" style="padding: 10px">
-            <img alt="avatar" src="@/assets/image/attach.svg" />
-          </a-avatar>
-          <a-statistic title="附件统计" :value="data.attach" :value-from="0" animation show-group-separator>
-            <template #suffix><span class="unit">个</span> </template>
-          </a-statistic>
-        </a-space>
-      </a-grid-item>
-      <a-grid-item class="panel-col" :span="6">
-        <a-space>
-          <a-avatar :size="54" class="col-avatar" style="padding: 10px">
-            <img alt="avatar" src="@/assets/image/login.svg" />
-          </a-avatar>
-          <a-statistic title="登录统计" :value="data.login" :value-from="0" animation show-group-separator>
-            <template #suffix><span class="unit">次</span> </template>
-          </a-statistic>
-        </a-space>
-      </a-grid-item>
-      <a-grid-item class="panel-col" :span="6">
-        <a-space>
-          <a-avatar :size="54" class="col-avatar" style="padding: 10px">
-            <img alt="avatar" src="@/assets/image/action.svg" />
-          </a-avatar>
-          <a-statistic title="操作统计" :value="data.operate" :value-from="0" animation show-group-separator>
-            <template #suffix><span class="unit">次</span> </template>
-          </a-statistic>
-        </a-space>
-      </a-grid-item>
-    </a-grid>
+    <a-row :gutter="20" :row-gap="16" class="pb-2 pl-0 pr-0" v-for="(item, index) in data" :key="index">
+      <a-col :span="6">
+        <a-card size="small" :bordered="false" :style="{ width: '100%' }">
+          <div class="flex justify-between items-center">
+            <span>{{ item.name }}</span>
+            <a-tag color="blue">今天</a-tag>
+          </div>
+          <a-statistic :value="item.tday | 0" :value-from="0" animation show-group-separator />
+        </a-card>
+      </a-col>
+      <a-col :span="6">
+        <a-card size="small" :bordered="false" :style="{ width: '100%' }">
+          <div class="flex justify-between items-center">
+            <span>{{ item.name }}</span>
+            <a-tag color="black">昨天</a-tag>
+          </div>
+          <a-statistic :value="item.lday | 0" :value-from="0" animation show-group-separator />
+        </a-card>
+      </a-col>
+      <a-col :span="6">
+        <a-card size="small" :bordered="false" :style="{ width: '100%' }">
+          <div class="flex justify-between items-center">
+            <span>{{ item.name }}</span>
+            <a-tag color="orange">本月</a-tag>
+          </div>
+          <a-statistic :value="item.tmon | 0" :value-from="0" animation show-group-separator />
+        </a-card>
+      </a-col>
+      <a-col :span="6">
+        <a-card size="small" :bordered="false" :style="{ width: '100%' }">
+          <div class="flex justify-between items-center">
+            <span>{{ item.name }}</span>
+            <a-tag color="green">上月</a-tag>
+          </div>
+          <a-statistic :value="item.lmon | 0" :value-from="0" animation show-group-separator />
+        </a-card>
+      </a-col>
+    </a-row>
   </div>
 </template>
 
 <script setup>
-import { ref, reactive } from 'vue'
-import api from '@/api/common'
+import { ref, reactive, onMounted } from 'vue'
+import welcome from '@/views/v1/api/welcome'
 
 const data = ref({
   user: 0,
   attach: 0,
   login: 0,
-  operate: 0
+  operate: 0,
 })
 
-const getData = async () => {
-  const res = await api.getStatistics()
-  data.value = res.data
+const getWelcomeData = async () => {
+  const res = await welcome.indexApi()
+  data.value = res.data.data
 }
 
-getData()
+onMounted(() => {
+  getWelcomeData()
+})
 </script>
 
 <style scoped lang="less">

src/views/dashboard/components/components/st-loginChart.vue

@@ -7,8 +7,8 @@
       :body-style="{
         paddingTop: '20px',
       }"
-      title="登录统计">
-      <sa-chart height="300px" :option="loginChartOptions" />
+      title="一周数据">
+      <sa-chart height="300px" :option="chartOptions" />
     </a-card>
   </div>
 </template>
@@ -16,7 +16,7 @@
 <script setup>
 import { nextTick, onMounted, ref } from 'vue'
 import { graphic } from 'echarts'
-import api from '@/api/common'
+import welcome from '@/views/v1/api/welcome'
 
 function graphicFactory(side) {
   return {
@@ -36,14 +36,17 @@ const xAxis = ref([])
 const chartsData = ref([])
 const graphicElements = ref([graphicFactory({ left: '2.6%' }), graphicFactory({ right: 0 })])
 
-const loginChartOptions = ref({})
+const chartOptions = ref({})
 
 const getData = async () => {
-  const res = await api.loginChart()
-  xAxis.value = res.data.login_date
-  chartsData.value = res.data.login_count
+  const res = await welcome.chartDataApi()
+  xAxis.value = res.data.days
+  // chartsData.value = res.data.data.login_count
 
-  loginChartOptions.value = {
+  chartOptions.value = {
+    legend: {
+      data: ['注册', '登录', '消耗', '充值'],
+    },
     grid: {
       left: '2.6%',
       right: '0',
@@ -109,65 +112,51 @@ const getData = async () => {
     },
     tooltip: {
       trigger: 'axis',
-      formatter(params) {
-        return `<div class="login-chart">
-          <p class="tooltip-title">${params[0].axisValueLabel}</p>
-          <div class="content-panel"><span>登录次数</span><span class="tooltip-value">${Number(params[0].value).toLocaleString()}</span></div>
-        </div>`
-      },
+      // formatter(params) {
+      //   return `<div class="login-chart">
+      //     <p class="tooltip-title">${params[0].axisValueLabel}</p>
+      //     <div class="content-panel"><span>登录次数</span><span class="tooltip-value">${Number(
+      //       params[0].value
+      //     ).toLocaleString()}</span></div>
+      //   </div>`
+      // },
     },
+
     graphic: {
       elements: graphicElements.value,
     },
     series: [
       {
-        data: chartsData.value,
+        name: '注册',
         type: 'line',
-        smooth: true,
-        symbolSize: 12,
-        emphasis: {
-          focus: 'series',
-          itemStyle: {
-            borderWidth: 2,
-          },
-        },
-        lineStyle: {
-          width: 3,
-          color: new graphic.LinearGradient(0, 0, 1, 0, [
-            {
-              offset: 0,
-              color: 'rgba(30, 231, 255, 1)',
-            },
-            {
-              offset: 0.5,
-              color: 'rgba(36, 154, 255, 1)',
-            },
-            {
-              offset: 1,
-              color: 'rgba(111, 66, 251, 1)',
-            },
-          ]),
-        },
-        showSymbol: false,
-        areaStyle: {
-          opacity: 0.8,
-          color: new graphic.LinearGradient(0, 0, 0, 1, [
-            {
-              offset: 0,
-              color: 'rgba(17, 126, 255, 0.16)',
-            },
-            {
-              offset: 1,
-              color: 'rgba(17, 128, 255, 0)',
-            },
-          ]),
-        },
+        stack: '总数',
+        data: res.data.reg,
+      },
+      {
+        name: '登录',
+        type: 'line',
+        stack: '总数',
+        data: res.data.login,
+      },
+      {
+        name: '消耗',
+        type: 'line',
+        stack: '金额',
+        data: res.data.cost,
+      },
+      {
+        name: '充值',
+        type: 'line',
+        stack: '金额',
+        data: res.data.pay,
       },
     ],
   }
 }
 
-getData()
+onMounted(() => {
+  getData()
+})
 </script>
 
 <style lang="less" scoped>

src/views/dashboard/components/statistics.vue

@@ -1,18 +1,13 @@
 <template>
-  <st-welcome />
+  <!-- <st-welcome /> -->
   <st-count />
   <st-login-chart />
-
-  <div class="block lg:flex">
-    <!-- <st-announced /> -->
-    <!-- <st-saiadmin /> -->
-  </div>
 </template>
 
 <script setup>
-import StCount from "./components/st-count.vue";
-import StWelcome from "./components/st-welcome.vue";
-import StLoginChart from "./components/st-loginChart.vue";
-import StSaiadmin from "./components/st-saiadmin.vue";
-import StAnnounced from "./components/st-announced.vue";
+import StCount from './components/st-count.vue'
+import StWelcome from './components/st-welcome.vue'
+import StLoginChart from './components/st-loginChart.vue'
+import StSaiadmin from './components/st-saiadmin.vue'
+import StAnnounced from './components/st-announced.vue'
 </script>

src/views/v1/api/welcome.js

@@ -0,0 +1,30 @@
+import { request } from '@/utils/request.js'
+
+/**
+ * welcome API接口
+ */
+export default {
+  /**
+   * index
+   * @returns
+   */
+  indexApi(params = {}) {
+    return request({
+      url: '/v1/welcome/index',
+      method: 'get',
+      params
+    })
+  },
+
+  /**
+   * chartData
+   * @returns
+   */
+  chartDataApi(params = {}) {
+    return request({
+      url: '/v1/welcome/chartData',
+      method: 'get',
+      params
+    })
+  }
+}