feat: select the range of days for statistics

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,
         }
     }
 }