feat: select the range of days for statistics

server/api/dashboard.go

@@ -22,6 +22,11 @@ func NewDashboardApi() *DashboardApi {
 // 获取数据汇总
 func (d *DashboardApi) Summary(context *gin.Context) {
 	uid, _ := strconv.Atoi(context.Request.Header.Get("uid"))
-	sum := d.dashboardService.Summary(int64(uid))
+	days, _ := strconv.Atoi(context.Query("daysRange"))
+	if days < 7 || days > 30 {
+		response.Result(response.ErrCodeParamInvalid, nil, context)
+		return
+	}
+	sum := d.dashboardService.Summary(int64(uid), days)
 	response.Result(response.ErrCodeSuccess, sum, context)
-}
+}

server/models/dashboard.go

@@ -1,10 +1,10 @@
 package models
 
 type DashboardSum struct {
-	Customers      int        `json:"customers"`
-	Contracts      int        `json:"contracts"`
-	ContractAmount float64    `json:"contractAmount"`
-	Products       int        `json:"products"`
-	Date           [7]string  `json:"date"`
-	Amount         [7]float64 `json:"amount"`
+	Customers      int       `json:"customers"`
+	Contracts      int       `json:"contracts"`
+	ContractAmount float64   `json:"contractAmount"`
+	Products       int       `json:"products"`
+	Date           []string  `json:"date"`
+	Amount         []float64 `json:"amount"`
 }

server/service/dashboard.go

@@ -3,7 +3,6 @@ package service
 import (
 	"crm/global"
 	"crm/models"
-	"fmt"
 	"time"
 )
 
@@ -11,7 +10,7 @@ type DashboardService struct {
 }
 
 // 数据汇总
-func (d *DashboardService) Summary(uid int64) models.DashboardSum {
+func (d *DashboardService) Summary(uid int64, days int) models.DashboardSum {
 	var ds models.DashboardSum
 	global.Db.Raw("select count(*) from customer where creator = ?", uid).Scan(&ds.Customers)
 	global.Db.Raw("select count(*) from contract where creator = ?", uid).Scan(&ds.Contracts)
@@ -20,10 +19,11 @@ func (d *DashboardService) Summary(uid int64) models.DashboardSum {
 
 	now := time.Now().Unix()
 	con := "created > ? and created < ? and status = 1 and creator = ?"
-	for i, d := 0, 7; i < 7; i++ {
+	ds.Amount = make([]float64, days)
+	ds.Date = make([]string, days)
+	for i, d := 0, days; i < days; i++ {
 		day := now - (int64(d) * 24 * 60 * 60)
 		start, end := dayRange(day)
-		fmt.Println(start, end)
 		global.Db.Table(CONTRACT).Where(con, start, end, uid).Pluck("amount", &ds.Amount[i])
 		ds.Date[i] = time.Unix(day, 0).Format("01-02")
 		d--

web/src/views/Dashboard.vue

@@ -65,7 +65,23 @@
         <a-row :gutter="16">
             <a-col :span="24">
                 <a-card class="card">
-                    <div id="main" style="width: 100%; height: 400px"></div>
+                    <div style="display:flex;align-items: center;justify-content: space-between;">
+                        <div style="color: #606266;font-size: 16px;font-weight: 600;margin-left: 10px;">
+                            <span>合同金额完成情况</span>
+                            <a-tooltip placement="right">
+                                <template #title>
+                                    <span>实际完成金额，单位（元）</span>
+                                </template>
+                                <question-circle-two-tone style="margin-left: 5px" />
+                            </a-tooltip>
+                        </div>
+                        <a-radio-group v-model:value="daysRange" @change="initChart" style="margin-left: 20px;">
+                            <a-radio-button :value="7">最近7天</a-radio-button>
+                            <a-radio-button :value="14">最近14天</a-radio-button>
+                            <a-radio-button :value="30">最近30天</a-radio-button>
+                        </a-radio-group>
+                    </div>
+                    <div id="main" style="width: 100%; height: 360px;"></div>
                 </a-card>
             </a-col>
         </a-row>
@@ -75,7 +91,7 @@
 <script>
 import { QuestionCircleTwoTone } from '@ant-design/icons-vue'
 import * as echarts from "echarts";
-import { reactive, onMounted } from 'vue';
+import { reactive, ref, onMounted } from 'vue';
 import { getSummary } from "../api/dashboard";
 import { getUserInfo } from "../api/user";
 import { useRouter } from 'vue-router'
@@ -85,10 +101,8 @@ export default {
         QuestionCircleTwoTone
     },
     setup() {
-        onMounted(() => {
-            checkVersion();
-            initChart();
-        });
+
+        const daysRange = ref(7);
 
         const router = useRouter()
 
@@ -99,8 +113,16 @@ export default {
             products: 0,
         })
 
+        onMounted(() => {
+            checkVersion();
+            initChart();
+        });
+
         const initChart = () => {
-            getSummary().then((res) => {
+            let param = {
+                daysRange: daysRange.value
+            }
+            getSummary(param).then((res) => {
                 if (res.data.code == 0) {
                     data.customers = res.data.data.customers
                     data.contracts = res.data.data.contracts
@@ -109,23 +131,31 @@ export default {
                     echarts.init(document.getElementById("main")).setOption({
                         xAxis: {
                             type: 'category',
-                            data: res.data.data.date
+                            data: res.data.data.date,
                         },
                         tooltip: {
                             trigger: 'axis',
+                            axisPointer: {
+                                type: 'shadow'
+                            }
                         },
                         legend: {
-                            data: ['实际完成金额']
+                            data: ['实际完成金额'],
+                            orient: 'vertical',
+                            bottom: 10,
                         },
                         yAxis: {
-                            type: 'value'
+                            type: 'value',
                         },
                         series: [
                             {
                                 name: '实际完成金额',
                                 data: res.data.data.amount,
                                 type: 'line',
-                                smooth: true
+                                smooth: true,
+                                lineStyle: {
+                                    width: 3
+                                }
                             }
                         ]
                     })
@@ -141,10 +171,12 @@ export default {
                 }
             })
         }
+
         return {
             data,
+            daysRange,
             initChart,
-            checkVersion
+            checkVersion,
         }
     }
 }