From 15606013a94376d70b1dee8407c0367c2b42f958 Mon Sep 17 00:00:00 2001
From: zzyuan <781948537@qq.com>
Date: Mon, 19 May 2025 14:07:22 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B7=A6=E4=BE=A7=E5=AF=BC=E8=88=AA=E8=83=8C?=
 =?UTF-8?q?=E6=99=AF=E8=89=B2=E4=BF=AE=E6=94=B9=E7=BB=BF=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles/variables.scss |  6 +--
 src/views/index_v1.vue           | 79 ++++++++++++++++++++++++--------
 2 files changed, 62 insertions(+), 23 deletions(-)

diff --git a/src/assets/styles/variables.scss b/src/assets/styles/variables.scss
index 72f4cb99..53c26e23 100644
--- a/src/assets/styles/variables.scss
+++ b/src/assets/styles/variables.scss
@@ -11,15 +11,15 @@ $panGreen: #30B08F;
 // 默认菜单主题风格
 $base-menu-color:#bfcbd9;
 $base-menu-color-active:#f4f4f5;
-$base-menu-background:#304156;
+$base-menu-background:#00594F;
 $base-logo-title-color: #ffffff;
 
 $base-menu-light-color:rgba(0,0,0,.70);
 $base-menu-light-background:#ffffff;
 $base-logo-light-title-color: #001529;
 
-$base-sub-menu-background:#1f2d3d;
-$base-sub-menu-hover:#001528;
+$base-sub-menu-background:#02423b;
+$base-sub-menu-hover:#0a302c;
 
 // 自定义暗色菜单风格
 /**
diff --git a/src/views/index_v1.vue b/src/views/index_v1.vue
index 27146a1e..2d116e84 100644
--- a/src/views/index_v1.vue
+++ b/src/views/index_v1.vue
@@ -5,21 +5,37 @@
     <el-row>
       <el-col :span="16">
         <div style="background: #fff;padding: 10px;margin: 5px;margin-bottom: 10px;">
-          <div>食堂订单及销量趋势</div>
+          <div style="display: flex;justify-content: space-between;align-items: center;">
+            <div style="border-left: 4px solid #00594F;padding-left: 10px;font-weight: 600;">食堂订单及销量趋势</div>
+            <div>
+              <el-radio-group v-model="type1" @change="changType1">
+                <el-radio-button :label="1">近7日</el-radio-button>
+                <el-radio-button :label="2">近30日</el-radio-button> 
+              </el-radio-group>
+            </div>
+          </div>
           <div id="lineChartOne" style="width: 100%;height: 300px;margin-bottom: 20px;"></div>  
         </div>
-        <div style="background: #fff;padding: 10px;margin: 5px;margin-bottom: 10px;">
-          <div>商超订单及销量趋势</div>
+        <div style="background: #fff;padding: 10px;margin: 5px;margin-bottom: 10px;"> 
+          <div style="display: flex;justify-content: space-between;align-items: center;">
+            <div style="border-left: 4px solid #00594F;padding-left: 10px;font-weight: 600;">商超订单及销量趋势</div>
+            <div>
+              <el-radio-group v-model="type2" @change="changType2">
+                <el-radio-button :label="1">近7日</el-radio-button>
+                <el-radio-button :label="2">近30日</el-radio-button> 
+              </el-radio-group>
+            </div>
+          </div>
           <div id="lineChartTwo" style="width: 100%;height: 300px;margin-bottom: 20px;"></div>  
         </div>
       </el-col>
       <el-col :span="8">
         <div style="background: #fff;padding: 10px;margin: 5px;margin-bottom: 10px;">
-          <div>本月菜品销量排名</div>
-          <div id="lineChartThree" style="width: 100%;height: 380px;margin-bottom: 20px;"></div>  
+          <div style="border-left: 4px solid #00594F;padding-left: 10px;font-weight: 600">本月菜品销量排名</div>
+          <div id="lineChartThree" style="width: 100%;height: 410px;margin-bottom: 20px;"></div>  
         </div>
         <div style="background: #fff;padding: 10px;margin: 5px;margin-bottom: 10px;">
-          <div>订单类型占比</div>
+          <div style="border-left: 4px solid #00594F;padding-left: 10px;font-weight: 600">订单类型占比</div>
           <div id="barChartFour" style="width: 100%;height: 220px;margin-bottom: 20px;"></div>  
         </div>
 
@@ -105,24 +121,24 @@ export default {
     return {
       topAreaOptions:[
         {
-          "num": 27,
-          "rate": "92.86",
+          "num": 0,
+          "rate": "0.00",
           "name": "今日食堂营业额（元）",
           "lastDate": "2025-05-15"
         },{
-          "num": 3,
-          "rate": "50.00",
+          "num": 0,
+          "rate": "0.00",
           "name": "今日食堂订单量（个）",
           "lastDate": "2025-05-15"
         },
         {
-          "num": 1,
+          "num": 0,
           "rate": "0.00",
           "name": "今日就餐人数（个）",
           "lastDate": "2025-05-15"
         },
         {
-          "num": 6,
+          "num": 0,
           "rate": "0.00",
           "name": "今日菜品数量（个）",
           "lastDate": "2025-05-15"
@@ -140,6 +156,8 @@ export default {
           "lastDate": "2025-05-15"
         }
       ],
+      type1:1,
+      type2:1,
       lineChartData: lineChartData.newVisitis
     }
   },
@@ -156,19 +174,29 @@ export default {
           this.topAreaOptions = response.data.data; 
       }); 
     },
+    changType1(e){
+      console.log(this.type1)
+      this.InitEChartsOne()
+    },
     InitEChartsOne() {
       let chartData=[]
       let weekDate=["周一","周二","周三","周四","周五","周六","周日"]
       let monthDate = []
+      let xDate = []
       let salesData = []
       let orderData = []
-      getCanteenOrdersAndSalesTrendsApi({type:"1"}).then((response) => {
+      getCanteenOrdersAndSalesTrendsApi({type:this.type1}).then((response) => {
           chartData = response.data;
           chartData.forEach((item,index)=>{
             monthDate.push(item.orderDate)
             salesData.push(item.salesValue)
             orderData.push(item.orderValue) 
-          })  
+          })
+          if(this.type1==1){
+            xDate= weekDate
+          }else{
+            xDate = monthDate
+          }
           var option = {
             // title: {
             //   text: "食品经营情况", 
@@ -178,6 +206,7 @@ export default {
             },
             legend: {
               data: ["销售额", "订单量"],
+              icon:"rect",
               bottom: "0%",
             },
             grid: {
@@ -193,7 +222,7 @@ export default {
               {
                 type: "category",
                 boundaryGap: false,
-                data: weekDate,
+                data: xDate,
               },
             ],
             yAxis: {
@@ -271,19 +300,29 @@ export default {
           });
       }); 
     },
+    changType2(e){
+      console.log(this.type2)
+      this.InitEChartsTwo()
+    },
     InitEChartsTwo() {
       let chartData=[]
       let weekDate=["周一","周二","周三","周四","周五","周六","周日"]
       let monthDate = []
+      let xDate = []
       let salesData = []
       let orderData = []
-      getSupermarketOrderAndSalesTrendApi({type:"1"}).then((response) => {
+      getSupermarketOrderAndSalesTrendApi({type:this.type2}).then((response) => {
           chartData = response.data;
           chartData.forEach((item,index)=>{
             monthDate.push(item.orderDate)
             salesData.push(item.salesValue)
             orderData.push(item.orderValue) 
-          })  
+          })
+          if(this.type2==1){
+            xDate= weekDate
+          }else{
+            xDate = monthDate
+          }
           var option = {
             // title: {
             //   text: "食品经营情况", 
@@ -293,6 +332,7 @@ export default {
             },
             legend: {
               data: ["销售额", "订单量"],
+              icon:"rect",
               bottom: "0%",
             },
             grid: {
@@ -308,7 +348,7 @@ export default {
               {
                 type: "category",
                 boundaryGap: false,
-                data: weekDate,
+                data: xDate,
               },
             ],
             yAxis: {
@@ -428,8 +468,7 @@ export default {
               {
                 type: "category",
                 inverse: true,
-                offset: 100,
-
+                offset: 100, 
                 axisLabel: {
                   show: true,
                   align: "left",