首页添加日期筛选

src/views/index_v1.vue

@@ -1,6 +1,13 @@
 <template>
   <div class="dashboard-editor-container">
+    <div style="width: 99%;display: flex;justify-content: space-between;margin: 0 auto;align-items: center;">
         <h3 style="font-weight: 600;">数据总览</h3>
+        <el-date-picker
+          v-model="chosenDate"
+          type="date" :picker-options="pickerOptions" value-format="yyyy-MM-dd"
+          placeholder="选择日期" @change="changeDate">
+        </el-date-picker>
+    </div> 
     <panel-group :topData="topAreaOptions"/>
     <el-row>
       <el-col :span="16">
@@ -116,6 +123,14 @@ export default {
       myCharts2:null,
       myCharts3:null,
       myCharts4:null,
+      chosenDate:this.formatDate(new Date()),
+      pickerOptions:{
+          //禁用当前日期之前的日期
+          disabledDate(time) {
+          //Date.now()是javascript中的内置函数，它返回自1970年1月1日00:00:00 UTC以来经过的毫秒数。
+              return time.getTime() > Date.now()
+          }
+      },
     }
   },
   mounted(){
@@ -138,8 +153,19 @@ export default {
         }, 500);
       }
     },
+    changeDate(){
+      console.log(this.chosenDate)
+      this.getTopData()
+      this.InitEChartsOne()
+      this.InitEChartsTwo()
+      this.InitEChartsThree()
+      this.InitEChartsFour()
+    },
     getTopData(){ 
-      getDataScreeningModelApi({}).then((response) => {
+      let params = {
+        chosenDate:this.chosenDate
+      }
+      getDataScreeningModelApi(params).then((response) => {
           this.topAreaOptions = response.data.data; 
       }); 
     },
@@ -156,7 +182,7 @@ export default {
       let xDate = []
       let salesData = []
       let orderData = []
-      getCanteenOrdersAndSalesTrendsApi({type:this.type1}).then((response) => {
+      getCanteenOrdersAndSalesTrendsApi({type:this.type1,chosenDate:this.chosenDate}).then((response) => {
           chartData = response.data;
           chartData.forEach((item,index)=>{
             weekDate.push(item.weekday)
@@ -281,7 +307,7 @@ export default {
       let xDate = []
       let salesData = []
       let orderData = []
-      getSupermarketOrderAndSalesTrendApi({type:this.type2}).then((response) => {
+      getSupermarketOrderAndSalesTrendApi({type:this.type2,chosenDate:this.chosenDate}).then((response) => {
           chartData = response.data;
           chartData.forEach((item,index)=>{
             weekDate.push(item.weekday)
@@ -397,7 +423,7 @@ export default {
       var getName = [];
       var getValue = [];
       var chartData=[]
-      getThisMonthSDishSalesRankingApi().then((response) => {
+      getThisMonthSDishSalesRankingApi({chosenDate:this.chosenDate}).then((response) => {
           chartData = response.data.slice(0, 10);
           chartData.forEach((item,index)=>{
             getName.push(item.name)
@@ -434,7 +460,7 @@ export default {
               {
                 type: "category",
                 inverse: true,
-                offset: 100, 
+                offset: 80, 
                 axisLabel: {
                   show: true,
                   align: "left",
@@ -611,7 +637,7 @@ export default {
     },
     InitEChartsFour() {
       var chartData=[]
-      getProportionOfOrderTypesApi({type:this.type3}).then((response) => {
+      getProportionOfOrderTypesApi({type:this.type3,chosenDate:this.chosenDate}).then((response) => {
           chartData = response.data;
           var m2R2Data = []
           var sumNum = 0
@@ -749,7 +775,14 @@ export default {
           //     myCharts4.resize();
           // });
       });
-    }
+    },
+    formatDate(date) {
+        // 格式化为 YYYY-MM-DD
+        const year = date.getFullYear();
+        const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始
+        const day = String(date.getDate()).padStart(2, '0');
+        return `${year}-${month}-${day}`;
+    },
   }
 }
 </script>