From 35fa2f5eb81d1926c3485a922526c00845934bc2 Mon Sep 17 00:00:00 2001
From: zzyuan <781948537@qq.com>
Date: Mon, 21 Jul 2025 13:09:22 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BE=9B=E5=BA=94=E9=93=BE=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E6=80=BB=E8=A7=88=E9=A1=B5=E9=9D=A2=E7=BB=98=E5=88=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/foodManage/dashboard/PanelGroup.vue |  259 ++++
 src/views/foodManage/index.vue                | 1144 +++++++++++++++++
 2 files changed, 1403 insertions(+)
 create mode 100644 src/views/foodManage/dashboard/PanelGroup.vue
 create mode 100644 src/views/foodManage/index.vue

diff --git a/src/views/foodManage/dashboard/PanelGroup.vue b/src/views/foodManage/dashboard/PanelGroup.vue
new file mode 100644
index 00000000..84b34b38
--- /dev/null
+++ b/src/views/foodManage/dashboard/PanelGroup.vue
@@ -0,0 +1,259 @@
+<template>
+  <el-row :gutter="36" class="panel-group">
+    <el-col :span="3" class="card-panel-col" v-for="(item,index) in topData" :key="index">
+      <div class="card-panel"> 
+        <div class="card-panel-description">
+          <div class="card-panel-text">
+            {{item.name}}
+          </div>
+          <count-to :start-val="0" :end-val="item.num" :duration="2000" class="card-panel-num" />
+        </div>
+        <div>
+          <div style="display: flex;justify-content: space-between;width: 70%;" v-if="Number(item.rate)>=0">
+            <div style="font-size: 0.75rem;color: #07B78A;">
+              同比昨日  +{{item.rate}}％
+            </div>
+            <div>
+              <img src="@/assets/images/up.png" style="width: 18px;height: 18px;">
+            </div>
+          </div>
+          <div style="display: flex;justify-content: space-between;width: 70%;" v-if="Number(item.rate)<0">
+            <div style="font-size: 0.75rem;color: #d81e06;">
+              同比昨日  {{item.rate}}％
+            </div>
+            <div>
+              <img src="@/assets/images/down.png" style="width: 18px;height: 18px;">
+            </div>
+          </div>
+        </div>
+        
+      </div>
+    </el-col>
+    <!-- <el-col :span="4" class="card-panel-col">
+      <div class="card-panel"> 
+        <div class="card-panel-description">
+          <div class="card-panel-text">
+            今日食堂订单量（个）
+          </div>
+          <count-to :start-val="0" :end-val="360" :duration="2000" class="card-panel-num" />
+        </div>
+        <div>
+          <div style="display: flex;justify-content: space-between;width: 70%;">
+            <div style="font-size: 12px;color: #07B78A;">
+              同比昨日  +1.6％
+            </div>
+            <div>
+              <img src="@/assets/images/up.png" style="width: 18px;height: 18px;">
+            </div>
+          </div>
+          <div style="display: flex;justify-content: space-between;width: 70%;">
+            <div style="font-size: 12px;color: #d81e06;">
+              同比昨日  -05％
+            </div>
+            <div>
+              <img src="@/assets/images/down.png" style="width: 18px;height: 18px;">
+            </div>
+          </div>
+        </div>
+        
+      </div>
+    </el-col>
+    <el-col :span="4" class="card-panel-col">
+      <div class="card-panel"> 
+        <div class="card-panel-description">
+          <div class="card-panel-text">
+            今日就餐人数（人）
+          </div>
+          <count-to :start-val="0" :end-val="211" :duration="2000" class="card-panel-num" />
+        </div>
+        <div>
+          <div style="display: flex;justify-content: space-between;width: 70%;">
+            <div style="font-size: 12px;color: #07B78A;">
+              同比昨日  +1.6％
+            </div>
+            <div>
+              <img src="@/assets/images/up.png" style="width: 18px;height: 18px;">
+            </div>
+          </div>
+          <div style="display: flex;justify-content: space-between;width: 70%;">
+            <div style="font-size: 12px;color: #d81e06;">
+              同比昨日  -05％
+            </div>
+            <div>
+              <img src="@/assets/images/down.png" style="width: 18px;height: 18px;">
+            </div>
+          </div>
+        </div>
+        
+      </div>
+    </el-col>
+    <el-col :span="4" class="card-panel-col">
+      <div class="card-panel"> 
+        <div class="card-panel-description">
+          <div class="card-panel-text">
+            今日菜品数量（个）
+          </div>
+          <count-to :start-val="0" :end-val="14" :duration="2000" class="card-panel-num" />
+        </div>
+        <div>
+          <div style="display: flex;justify-content: space-between;width: 70%;">
+            <div style="font-size: 12px;color: #07B78A;">
+              同比昨日  +1.6％
+            </div>
+            <div>
+              <img src="@/assets/images/up.png" style="width: 18px;height: 18px;">
+            </div>
+          </div>
+          <div style="display: flex;justify-content: space-between;width: 70%;">
+            <div style="font-size: 12px;color: #d81e06;">
+              同比昨日  -05％
+            </div>
+            <div>
+              <img src="@/assets/images/down.png" style="width: 18px;height: 18px;">
+            </div>
+          </div>
+        </div>
+        
+      </div>
+    </el-col>
+    <el-col :span="4" class="card-panel-col">
+      <div class="card-panel"> 
+        <div class="card-panel-description">
+          <div class="card-panel-text">
+            今日商超营业额（元）
+          </div>
+          <count-to :start-val="0" :end-val="5200" :duration="2000" class="card-panel-num" />
+        </div>
+        <div>
+          <div style="display: flex;justify-content: space-between;width: 70%;">
+            <div style="font-size: 12px;color: #07B78A;">
+              同比昨日  +1.6％
+            </div>
+            <div>
+              <img src="@/assets/images/up.png" style="width: 18px;height: 18px;">
+            </div>
+          </div>
+          <div style="display: flex;justify-content: space-between;width: 70%;">
+            <div style="font-size: 12px;color: #d81e06;">
+              同比昨日  -05％
+            </div>
+            <div>
+              <img src="@/assets/images/down.png" style="width: 18px;height: 18px;">
+            </div>
+          </div>
+        </div>
+        
+      </div>
+    </el-col>
+    <el-col :span="4" class="card-panel-col">
+      <div class="card-panel"> 
+        <div class="card-panel-description">
+          <div class="card-panel-text">
+            今日商超订单
+          </div>
+          <count-to :start-val="0" :end-val="435" :duration="2000" class="card-panel-num" />
+        </div>
+        <div>
+          <div style="display: flex;justify-content: space-between;width: 70%;">
+            <div style="font-size: 12px;color: #07B78A;">
+              同比昨日  +1.6％
+            </div>
+            <div>
+              <img src="@/assets/images/up.png" style="width: 18px;height: 18px;">
+            </div>
+          </div>
+          <div style="display: flex;justify-content: space-between;width: 70%;">
+            <div style="font-size: 12px;color: #d81e06;">
+              同比昨日  -05％
+            </div>
+            <div>
+              <img src="@/assets/images/down.png" style="width: 18px;height: 18px;">
+            </div>
+          </div>
+        </div>
+        
+      </div>
+    </el-col> -->
+     
+  </el-row>
+</template>
+
+<script>
+import CountTo from 'vue-count-to'
+
+export default {
+  components: {
+    CountTo
+  },
+  props: {
+    topData: {
+      type: Array,
+      default: []
+    }
+  },
+  methods: {
+    
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.panel-group {
+  // margin-top: 5px;
+  padding-left: 10px;
+  padding-right: 10px;
+
+  .card-panel-col {
+    margin-bottom: 10px;
+    padding-left: 6px!important;
+    padding-right: 6px!important;
+  }
+
+  .card-panel {
+    height: 120px;
+    // cursor: pointer;
+    font-size: 0.75rem;
+    position: relative;
+    overflow: hidden;
+    color: #666;
+    background: #fff;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+    padding: 15px;
+    border-radius: 4px;
+
+    // &:hover {  
+    //   .icon-message {
+    //     background: #36a3f7;
+    //   } 
+    // } 
+
+    // .icon-message {
+    //   color: #36a3f7;
+    // }   
+    .card-panel-description {
+      font-weight: bold;
+      margin: 0px;
+      margin-left: 0px;
+      margin-bottom: 10px;
+
+      .card-panel-text {
+        line-height: 18px;
+        // color: rgba(0, 0, 0, 0.5);
+        font-weight: normal;
+        font-size: 0.75rem;
+        margin-bottom: 15px;
+      }
+
+      .card-panel-num {
+        font-size: 1.5rem;
+        color: #000;
+      }
+    }
+
+
+
+
+  }
+} 
+</style>
diff --git a/src/views/foodManage/index.vue b/src/views/foodManage/index.vue
new file mode 100644
index 00000000..21b190b1
--- /dev/null
+++ b/src/views/foodManage/index.vue
@@ -0,0 +1,1144 @@
+<template>
+  <div class="dashboard-editor-container">
+    <h3 style="font-weight: 600;">数据总览11</h3>
+    <panel-group :topData="topAreaOptions"/>
+    <el-row>
+      <el-col :span="12">
+        <div style="background: #fff;padding: 10px;margin: 5px;margin-bottom: 10px;border-radius: 4px;">
+          <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>
+          <div id="lineChartOne" style="width: 100%;height: 300px;margin-bottom: 20px;"></div>  
+        </div>
+        <div style="background: #fff;padding: 10px;margin: 5px;margin-bottom: 10px;border-radius: 4px;"> 
+          <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>
+          <div id="lineChartTwo" style="width: 100%;height: 300px;margin-bottom: 20px;"></div>  
+        </div>
+      </el-col>
+      <el-col :span="6">
+        <div style="background: #fff;padding: 10px;margin: 5px;margin-bottom: 10px;border-radius: 4px;"> 
+          <div style="display: flex;justify-content: space-between;align-items: center;height: 32px;">
+            <div style="border-left: 4px solid #00594F;padding-left: 10px;font-weight: 600">货品出/入库排名</div> 
+            <div>
+              <el-radio-group v-model="type3" @change="changType3" size="mini">
+                <el-radio-button :label="1">出库</el-radio-button>
+                <el-radio-button :label="2">入库</el-radio-button> 
+              </el-radio-group>
+            </div>
+          </div>
+          <div id="lineChartThree" style="width: 100%;height: 350px;margin-bottom: 20px;"></div>  
+        </div>
+        <div style="background: #fff;padding: 10px;margin: 5px;margin-bottom: 10px;border-radius: 4px;">
+          <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>  
+          <div id="barChartFour" style="width: 100%;height: 235px;margin-bottom: 20px;"></div>  
+        </div> 
+      </el-col>
+      <el-col :span="6">
+        <div style="background: #fff;padding: 10px;margin: 5px;margin-bottom: 10px;border-radius: 4px;"> 
+          <div style="display: flex;justify-content: space-between;align-items: center;height: 32px;">
+            <div style="border-left: 4px solid #00594F;padding-left: 10px;font-weight: 600;">供应商评分排名</div>
+          </div>
+          <div id="lineChartFive" style="width: 100%;height: 350px;margin-bottom: 20px;"></div>  
+        </div>
+        <div style="background: #fff;padding: 10px;margin: 5px;margin-bottom: 10px;border-radius: 4px;">
+          <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>  
+          <div id="barChartSix" style="width: 100%;height: 235px;margin-bottom: 20px;"></div>  
+        </div> 
+      </el-col>
+    </el-row> 
+
+
+  </div>
+</template>
+
+<script>
+import PanelGroup from './dashboard/PanelGroup'
+import * as echarts from 'echarts' 
+import {  getDataScreeningModelApi,
+          getCanteenOrdersAndSalesTrendsApi,
+          getSupermarketOrderAndSalesTrendApi,
+          getThisMonthSDishSalesRankingApi,
+          getProportionOfOrderTypesApi 
+        } from "@/api/index";  
+export default { 
+  name: 'Index',
+  components: {
+    PanelGroup
+  },
+  data() {
+    return {
+      topAreaOptions:[
+        {
+          "num": 0,
+          "rate": "0.00",
+          "name": "采购订单总额（元）",
+          "lastDate": "2025-05-15"
+        },{
+          "num": 0,
+          "rate": "0.00",
+          "name": "采购订单数量（个）",
+          "lastDate": "2025-05-15"
+        },
+        {
+          "num": 0,
+          "rate": "0.00",
+          "name": "未验收完成采购订单数（个）",
+          "lastDate": "2025-05-15"
+        },
+        {
+          "num": 0,
+          "rate": "0.00",
+          "name": "采购订单货品总数",
+          "lastDate": "2025-05-15"
+        },
+        {
+          "num": 0,
+          "rate": "0.0",
+          "name": "入库货品数量",
+          "lastDate": "2025-05-15"
+        },
+        {
+          "num": 0,
+          "rate": "0.0",
+          "name": "出库货品数量",
+          "lastDate": "2025-05-15"
+        },
+        {
+          "num": 0,
+          "rate": "0.0",
+          "name": "入库总金额（元）",
+          "lastDate": "2025-05-15"
+        },
+        {
+          "num": 0,
+          "rate": "0.0",
+          "name": "出库总金额（元）",
+          "lastDate": "2025-05-15"
+        }
+      ],
+      type1:1,
+      type2:1,
+      type3:1,
+      myCharts1:null,
+      myCharts2:null,
+      myCharts3:null,
+      myCharts4:null,
+      myCharts5:null,
+      myCharts6:null,
+    }
+  },
+  mounted(){
+    // this.getTopData()
+    this.InitEChartsOne()
+    this.InitEChartsTwo()
+    this.InitEChartsThree()
+    this.InitEChartsFour()
+    this.InitEChartsFive()
+    this.InitEChartsSix()
+    window.addEventListener('transitionend', this.$_sidebarResizeHandler) 
+  },
+  methods: {
+    $_sidebarResizeHandler(e) {
+      if (e.propertyName === 'width') {
+        console.log(e)
+        setTimeout(() => {
+          this.myCharts1.resize();
+          this.myCharts2.resize();
+          this.myCharts3.resize();
+          this.myCharts4.resize();
+          this.myCharts5.resize();
+          this.myCharts6.resize();
+        }, 500);
+      }
+    },
+    getTopData(){ 
+      getDataScreeningModelApi({}).then((response) => {
+          this.topAreaOptions = response.data.data; 
+      }); 
+    },
+    changType1(e){
+      console.log(this.type1)
+      this.InitEChartsOne()
+      this.myCharts1.resize();
+    },
+    InitEChartsOne() {
+      let chartData=[]
+      // let weekDate=["周一","周二","周三","周四","周五","周六","周日"]
+      let weekDate=[]
+      let monthDate = []
+      let xDate = []
+      let salesData = []
+      let orderData = []
+      getCanteenOrdersAndSalesTrendsApi({type:this.type1}).then((response) => {
+          chartData = response.data;
+          chartData.forEach((item,index)=>{
+            weekDate.push(item.weekday)
+            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: "食品经营情况", 
+            // },
+            tooltip: {
+              trigger: "axis",
+            },
+            legend: {
+              data: ["销售额", "订单量"],
+              icon:"rect",
+              bottom: "0%",
+            },
+            grid: {
+              left: "5%",
+              right: "5%",
+              top: "20%",
+              bottom: "10%",
+              containLabel: true,
+            },
+            color: ["#4FA7FF", "#58F5CE"], 
+            calculable: true,
+            xAxis: [
+              {
+                type: "category",
+                boundaryGap: false,
+                data: xDate,
+              },
+            ],
+            yAxis: {
+              name: "销售额/订单量",
+              type: "value",
+            },
+            series: [
+              {
+                name: "销售额",
+                type: "line",
+                areaStyle: {
+                  normal: {
+                    type: "default",
+                    color: new echarts.graphic.LinearGradient(
+                      0,
+                      0,
+                      0,
+                      1,
+                      [
+                        {
+                          offset: 0,
+                          color: "rgba(79, 167, 255, 1)",
+                        },
+                        {
+                          offset: 1,
+                          color: "rgba(79, 167, 255, 1)",
+                        },
+                      ],
+                      false
+                    ),
+                  },
+                },
+                smooth: true,
+                itemStyle: {
+                  normal: { areaStyle: { type: "default" } },
+                },
+                data: salesData,
+              },
+              {
+                name: "订单量",
+                type: "line",
+                areaStyle: {
+                  normal: {
+                    type: "default",
+                    color: new echarts.graphic.LinearGradient(
+                      0,
+                      0,
+                      0,
+                      1,
+                      [
+                        {
+                          offset: 0,
+                          color: "rgba(92, 255, 214, 1)",
+                        },
+                        {
+                          offset: 1,
+                          color: "rgba(92, 255, 214, 1)",
+                        },
+                      ],
+                      false
+                    ),
+                  },
+                },
+                smooth: true,
+                itemStyle: { normal: { areaStyle: { type: "default" } } },
+                data: orderData,
+              },
+            ],
+          };
+          this.myCharts1 = echarts.init(document.querySelector('#lineChartOne'));
+          this.myCharts1.setOption(option)   
+      }); 
+    },
+    changType2(e){
+      console.log(this.type2)
+      this.InitEChartsTwo()
+      this.myCharts2.resize();
+    },
+    InitEChartsTwo() {
+      let chartData=[]
+      // let weekDate=["周一","周二","周三","周四","周五","周六","周日"]
+      let weekDate=[]
+      let monthDate = []
+      let xDate = []
+      let salesData = []
+      let orderData = []
+      getSupermarketOrderAndSalesTrendApi({type:this.type2}).then((response) => {
+          chartData = response.data;
+          chartData.forEach((item,index)=>{
+            weekDate.push(item.weekday)
+            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: "食品经营情况", 
+            // },
+            tooltip: {
+              trigger: "axis",
+            },
+            legend: {
+              data: ["销售额", "订单量"],
+              icon:"rect",
+              bottom: "0%",
+            },
+            grid: {
+              left: "5%",
+              right: "5%",
+              top: "20%",
+              bottom: "10%",
+              containLabel: true,
+            },
+            color: ["#4FA7FF", "#58F5CE"], 
+            calculable: true,
+            xAxis: [
+              {
+                type: "category",
+                boundaryGap: false,
+                data: xDate,
+              },
+            ],
+            yAxis: {
+              name: "销售额/订单量",
+              type: "value",
+            },
+            series: [
+              {
+                name: "销售额",
+                type: "line",
+                areaStyle: {
+                  normal: {
+                    type: "default",
+                    color: new echarts.graphic.LinearGradient(
+                      0,
+                      0,
+                      0,
+                      1,
+                      [
+                        {
+                          offset: 0,
+                          color: "rgba(79, 167, 255, 1)",
+                        },
+                        {
+                          offset: 1,
+                          color: "rgba(79, 167, 255, 1)",
+                        },
+                      ],
+                      false
+                    ),
+                  },
+                },
+                smooth: true,
+                itemStyle: {
+                  normal: { areaStyle: { type: "default" } },
+                },
+                data: salesData,
+              },
+              {
+                name: "订单量",
+                type: "line",
+                areaStyle: {
+                  normal: {
+                    type: "default",
+                    color: new echarts.graphic.LinearGradient(
+                      0,
+                      0,
+                      0,
+                      1,
+                      [
+                        {
+                          offset: 0,
+                          color: "rgba(92, 255, 214, 1)",
+                        },
+                        {
+                          offset: 1,
+                          color: "rgba(92, 255, 214, 1)",
+                        },
+                      ],
+                      false
+                    ),
+                  },
+                },
+                smooth: true,
+                itemStyle: { normal: { areaStyle: { type: "default" } } },
+                data: orderData,
+              },
+            ],
+          };
+          this.myCharts2 = echarts.init(document.querySelector('#lineChartTwo'));
+          this.myCharts2.setOption(option)  
+      }); 
+    },
+    InitEChartsThree() { 
+      var getName = [];
+      var getValue = [];
+      var chartData=[]
+      getThisMonthSDishSalesRankingApi().then((response) => {
+          chartData = response.data.slice(0, 10);
+          chartData.forEach((item,index)=>{
+            getName.push(item.name)
+            getValue.push(item.num) 
+          })  
+          var max = Math.max.apply(null, getValue);
+          var getMax = [];
+          for (var i = 0; i < getName.length; i++) {
+            getMax.push(max+20);
+          } 
+          var option = {
+            backgroundColor: "#fff",
+            grid: {
+              left: "10%",
+              right: "2%",
+              bottom: "2%",
+              top: "10%",
+              containLabel: true,
+            },
+            tooltip: {
+              trigger: "axis",
+              axisPointer: {
+                type: "none",
+              },
+              formatter: function (params) {
+                return params[0].name + " : " + params[0].value;
+              },
+            },
+            xAxis: {
+              show: false,
+              type: "value",
+            },
+            yAxis: [
+              {
+                type: "category",
+                inverse: true,
+                offset: 100, 
+                axisLabel: {
+                  show: true,
+                  align: "left",
+                  textStyle: {
+                    color: "#66cc00",
+                  },
+                  formatter: function (value, index) {
+                    var num = "";
+                    var str = "";
+                    var no = "NO.";
+                    num = index + 1;
+                    if (index === 0) {
+                      str = " {num1|" + num + "} {title1|" + value + "}";
+                    } else if (index === 1) {
+                      str = " {num2|" + num + "} {title2|" + value + "}";
+                    } else if (index === 2) {
+                      str = " {num3|" + num + "} {title3|" + value + "}";
+                    } else {
+                      str = " {num|" + num + "} {title|" + value + "}";
+                    }
+                    return str;
+                  },
+                  rich: {
+                    no: {
+                      color: "#333",
+                      fontSize: 14,
+                    },
+                    no1: {
+                      color: "#333",
+                      fontSize: 14,
+                    },
+                    no2: {
+                      color: "#333",
+                      fontSize: 14,
+                    },
+                    no3: {
+                      color: "#333",
+                      fontSize: 14,
+                    },
+                    num: {
+                      color: "#fff",
+                      backgroundColor: "#5281F8",
+                      width: 20,
+                      height: 20,
+                      fontSize: 14,
+                      align: "center",
+                      borderRadius: 100,
+                    },
+                    num1: {
+                      color: "#fff",
+                      backgroundColor: "#EDA54F",
+                      width: 20,
+                      height: 20,
+                      fontSize: 14,
+                      align: "center",
+                      borderRadius: 100,
+                    },
+                    num2: {
+                      color: "#fff",
+                      backgroundColor: "#EDA54F",
+                      width: 20,
+                      height: 20,
+                      fontSize: 14,
+                      align: "center",
+                      borderRadius: 100,
+                    },
+                    num3: {
+                      color: "#fff",
+                      backgroundColor: "#EDA54F",
+                      width: 20,
+                      height: 20,
+                      fontSize: 14,
+                      align: "center",
+                      borderRadius: 100,
+                    },
+                    title: {
+                      color: "#333333",
+                    },
+                    title1: {
+                      color: "#333333",
+                    },
+                    title2: {
+                      color: "#333333",
+                    },
+                    title3: {
+                      color: "#333333",
+                    },
+                  },
+                },
+                splitLine: {
+                  show: false,
+                },
+                axisTick: {
+                  show: false,
+                },
+                axisLine: {
+                  show: false,
+                },
+                data: getName,
+              },
+              {
+                type: "category",
+                inverse: true,
+                offset: -50,
+                axisTick: "none",
+                axisLine: "none",
+                show: true,
+                axisLabel: {
+                  interval: 0,
+                  color: "#666",
+                  align: "left",
+                  margin: 20,
+                  fontSize: 13,
+                  formatter: function (value, index) {
+                    return (
+                      getValue[index]
+                    );
+                  },
+                },
+                data: getValue,
+              },
+            ],
+            series: [
+              {
+                name: "值",
+                type: "bar",
+                zlevel: 1,
+                itemStyle: {
+                  normal: {
+                    barBorderRadius: 30,
+                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                      {
+                        offset: 0,
+                        color: "rgb(0, 111, 104, 1)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgb(0, 111, 104, 1)",
+                      },
+                    ]),
+                  },
+                },
+                barWidth: 14,
+                data: getValue,
+              },
+              {
+                name: "背景",
+                type: "bar",
+                barWidth: 14,
+                barGap: "-100%",
+                data: getMax,
+                itemStyle: {
+                  normal: {
+                    color: "rgba(224, 233, 255, 1)",
+                    barBorderRadius: 30,
+                  },
+                },
+              },
+            ],
+          }; 
+          this.myCharts3 = echarts.init(document.querySelector('#lineChartThree'));
+          this.myCharts3.setOption(option)  
+          // // 根据页面大小自动响应图表大小
+          // window.addEventListener("resize3", function () {
+          //     myCharts3.resize();
+          // });
+      }); 
+    },
+    changType3(e){
+      console.log(this.type3)
+      this.InitEChartsFour()
+      this.myCharts4.resize();
+    },
+    InitEChartsFour() {
+      var chartData=[]
+      getProportionOfOrderTypesApi({type:this.type3}).then((response) => {
+          chartData = response.data;
+          var m2R2Data = []
+          var sumNum = 0
+          chartData.forEach((item,index)=>{
+            let obj = {}
+            sumNum=sumNum+item.num
+            if(index==0){
+              obj = {
+                value: item.num,
+                legendname: item.name,
+                name: item.name+' '+  item.num,
+                itemStyle: { color: "#5085f2" },
+              }
+            }
+            if(index==1){
+              obj = {
+                value: item.num,
+                legendname: item.name,
+                name: item.name+' '+  item.num,
+                itemStyle: { color: "#f2719a" },
+              }
+            }
+            if(index==2){
+              obj = {
+                value: item.num,
+                legendname: item.name,
+                name: item.name+' '+  item.num,
+                itemStyle: { color: "#fdb301" },
+              }
+            }
+            m2R2Data.push(obj)
+          }) 
+
+          // var m2R2Data = [
+          //   {
+          //     value: 310,
+          //     legendname: "种类02",
+          //     name: "种类02  310",
+          //     itemStyle: { color: "#5085f2" },
+          //   }, 
+          //   {
+          //     value: 335,
+          //     legendname: "种类05",
+          //     name: "种类05  335",
+          //     itemStyle: { color: "#f2719a" },
+          //   }, 
+          //   {
+          //     value: 335,
+          //     legendname: "种类08",
+          //     name: "种类08  335",
+          //     itemStyle: { color: "#fdb301" },
+          //   }
+          // ];
+
+          var option = {
+            title: [
+              {
+                text: "订单总数",
+                subtext: sumNum + "个",
+                textStyle: {
+                  fontSize: 20,
+                  color: "black",
+                },
+                subtextStyle: {
+                  fontSize: 20,
+                  color: "black",
+                },
+                textAlign: "center",
+                x: "34.5%",
+                y: "44%",
+              },
+            ],
+            tooltip: {
+              trigger: "item",
+              formatter: function (parms) {
+                var str =
+                  parms.seriesName +
+                  "</br>" +
+                  parms.marker +
+                  "" +
+                  parms.data.legendname +
+                  "</br>" +
+                  "数量：" +
+                  parms.data.value +
+                  "</br>" +
+                  "占比：" +
+                  parms.percent +
+                  "%";
+                return str;
+              },
+            },
+            legend: {
+              type: "scroll",
+              orient: "vertical",
+              left: "70%",
+              align: "left",
+              top: "middle",
+              textStyle: {
+                color: "#8C8C8C",
+              },
+              height: 250,
+            },
+            series: [
+              {
+                name: "标题",
+                type: "pie",
+                center: ["35%", "50%"],
+                radius: ["65%", "90%"],
+                clockwise: false, //饼图的扇区是否是顺时针排布
+                avoidLabelOverlap: false,
+                label: {
+                  normal: {
+                    show: false,
+                    position: "outter",
+                    formatter: function (parms) {
+                      return parms.data.legendname;
+                    },
+                  },
+                },
+                labelLine: {
+                  normal: {
+                    length: 5,
+                    length2: 3,
+                    smooth: true,
+                  },
+                },
+                data: m2R2Data,
+              },
+            ],
+          }; 
+          this.myCharts4 = echarts.init(document.querySelector('#barChartFour'));
+          this.myCharts4.setOption(option)  
+          // 根据页面大小自动响应图表大小
+          // window.addEventListener("resize4", function () {
+          //     myCharts4.resize();
+          // });
+      });
+    },
+    InitEChartsFive() { 
+      var getName = [];
+      var getValue = [];
+      var chartData=[]
+      getThisMonthSDishSalesRankingApi().then((response) => {
+          chartData = response.data.slice(0, 10);
+          chartData.forEach((item,index)=>{
+            getName.push(item.name)
+            getValue.push(item.num) 
+          })  
+          var max = Math.max.apply(null, getValue);
+          var getMax = [];
+          for (var i = 0; i < getName.length; i++) {
+            getMax.push(max+20);
+          } 
+          var option = {
+            backgroundColor: "#fff",
+            grid: {
+              left: "10%",
+              right: "2%",
+              bottom: "2%",
+              top: "10%",
+              containLabel: true,
+            },
+            tooltip: {
+              trigger: "axis",
+              axisPointer: {
+                type: "none",
+              },
+              formatter: function (params) {
+                return params[0].name + " : " + params[0].value;
+              },
+            },
+            xAxis: {
+              show: false,
+              type: "value",
+            },
+            yAxis: [
+              {
+                type: "category",
+                inverse: true,
+                offset: 100, 
+                axisLabel: {
+                  show: true,
+                  align: "left",
+                  textStyle: {
+                    color: "#66cc00",
+                  },
+                  formatter: function (value, index) {
+                    var num = "";
+                    var str = "";
+                    var no = "NO.";
+                    num = index + 1;
+                    if (index === 0) {
+                      str = " {num1|" + num + "} {title1|" + value + "}";
+                    } else if (index === 1) {
+                      str = " {num2|" + num + "} {title2|" + value + "}";
+                    } else if (index === 2) {
+                      str = " {num3|" + num + "} {title3|" + value + "}";
+                    } else {
+                      str = " {num|" + num + "} {title|" + value + "}";
+                    }
+                    return str;
+                  },
+                  rich: {
+                    no: {
+                      color: "#333",
+                      fontSize: 14,
+                    },
+                    no1: {
+                      color: "#333",
+                      fontSize: 14,
+                    },
+                    no2: {
+                      color: "#333",
+                      fontSize: 14,
+                    },
+                    no3: {
+                      color: "#333",
+                      fontSize: 14,
+                    },
+                    num: {
+                      color: "#fff",
+                      backgroundColor: "#5281F8",
+                      width: 20,
+                      height: 20,
+                      fontSize: 14,
+                      align: "center",
+                      borderRadius: 100,
+                    },
+                    num1: {
+                      color: "#fff",
+                      backgroundColor: "#EDA54F",
+                      width: 20,
+                      height: 20,
+                      fontSize: 14,
+                      align: "center",
+                      borderRadius: 100,
+                    },
+                    num2: {
+                      color: "#fff",
+                      backgroundColor: "#EDA54F",
+                      width: 20,
+                      height: 20,
+                      fontSize: 14,
+                      align: "center",
+                      borderRadius: 100,
+                    },
+                    num3: {
+                      color: "#fff",
+                      backgroundColor: "#EDA54F",
+                      width: 20,
+                      height: 20,
+                      fontSize: 14,
+                      align: "center",
+                      borderRadius: 100,
+                    },
+                    title: {
+                      color: "#333333",
+                    },
+                    title1: {
+                      color: "#333333",
+                    },
+                    title2: {
+                      color: "#333333",
+                    },
+                    title3: {
+                      color: "#333333",
+                    },
+                  },
+                },
+                splitLine: {
+                  show: false,
+                },
+                axisTick: {
+                  show: false,
+                },
+                axisLine: {
+                  show: false,
+                },
+                data: getName,
+              },
+              {
+                type: "category",
+                inverse: true,
+                offset: -50,
+                axisTick: "none",
+                axisLine: "none",
+                show: true,
+                axisLabel: {
+                  interval: 0,
+                  color: "#666",
+                  align: "left",
+                  margin: 20,
+                  fontSize: 13,
+                  formatter: function (value, index) {
+                    return (
+                      getValue[index]
+                    );
+                  },
+                },
+                data: getValue,
+              },
+            ],
+            series: [
+              {
+                name: "值",
+                type: "bar",
+                zlevel: 1,
+                itemStyle: {
+                  normal: {
+                    barBorderRadius: 30,
+                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                      {
+                        offset: 0,
+                        color: "rgb(0, 111, 104, 1)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgb(0, 111, 104, 1)",
+                      },
+                    ]),
+                  },
+                },
+                barWidth: 14,
+                data: getValue,
+              },
+              {
+                name: "背景",
+                type: "bar",
+                barWidth: 14,
+                barGap: "-100%",
+                data: getMax,
+                itemStyle: {
+                  normal: {
+                    color: "rgba(224, 233, 255, 1)",
+                    barBorderRadius: 30,
+                  },
+                },
+              },
+            ],
+          }; 
+          this.myCharts5 = echarts.init(document.querySelector('#lineChartFive'));
+          this.myCharts5.setOption(option)  
+          // // 根据页面大小自动响应图表大小
+          // window.addEventListener("resize3", function () {
+          //     myCharts3.resize();
+          // });
+      }); 
+    }, 
+    InitEChartsSix() {
+      var chartData=[]
+      getProportionOfOrderTypesApi({type:this.type3}).then((response) => {
+          chartData = response.data;
+          var m2R2Data = []
+          var sumNum = 0
+          chartData.forEach((item,index)=>{
+            let obj = {}
+            sumNum=sumNum+item.num
+            if(index==0){
+              obj = {
+                value: item.num,
+                legendname: item.name,
+                name: item.name+' '+  item.num,
+                itemStyle: { color: "#5085f2" },
+              }
+            }
+            if(index==1){
+              obj = {
+                value: item.num,
+                legendname: item.name,
+                name: item.name+' '+  item.num,
+                itemStyle: { color: "#f2719a" },
+              }
+            }
+            if(index==2){
+              obj = {
+                value: item.num,
+                legendname: item.name,
+                name: item.name+' '+  item.num,
+                itemStyle: { color: "#fdb301" },
+              }
+            }
+            m2R2Data.push(obj)
+          }) 
+
+          // var m2R2Data = [
+          //   {
+          //     value: 310,
+          //     legendname: "种类02",
+          //     name: "种类02  310",
+          //     itemStyle: { color: "#5085f2" },
+          //   }, 
+          //   {
+          //     value: 335,
+          //     legendname: "种类05",
+          //     name: "种类05  335",
+          //     itemStyle: { color: "#f2719a" },
+          //   }, 
+          //   {
+          //     value: 335,
+          //     legendname: "种类08",
+          //     name: "种类08  335",
+          //     itemStyle: { color: "#fdb301" },
+          //   }
+          // ];
+
+          var option = {
+            title: [
+              {
+                text: "订单总数",
+                subtext: sumNum + "个",
+                textStyle: {
+                  fontSize: 20,
+                  color: "black",
+                },
+                subtextStyle: {
+                  fontSize: 20,
+                  color: "black",
+                },
+                textAlign: "center",
+                x: "34.5%",
+                y: "44%",
+              },
+            ],
+            tooltip: {
+              trigger: "item",
+              formatter: function (parms) {
+                var str =
+                  parms.seriesName +
+                  "</br>" +
+                  parms.marker +
+                  "" +
+                  parms.data.legendname +
+                  "</br>" +
+                  "数量：" +
+                  parms.data.value +
+                  "</br>" +
+                  "占比：" +
+                  parms.percent +
+                  "%";
+                return str;
+              },
+            },
+            legend: {
+              type: "scroll",
+              orient: "vertical",
+              left: "70%",
+              align: "left",
+              top: "middle",
+              textStyle: {
+                color: "#8C8C8C",
+              },
+              height: 250,
+            },
+            series: [
+              {
+                name: "标题",
+                type: "pie",
+                center: ["35%", "50%"],
+                radius: ["65%", "90%"],
+                clockwise: false, //饼图的扇区是否是顺时针排布
+                avoidLabelOverlap: false,
+                label: {
+                  normal: {
+                    show: false,
+                    position: "outter",
+                    formatter: function (parms) {
+                      return parms.data.legendname;
+                    },
+                  },
+                },
+                labelLine: {
+                  normal: {
+                    length: 5,
+                    length2: 3,
+                    smooth: true,
+                  },
+                },
+                data: m2R2Data,
+              },
+            ],
+          }; 
+          this.myCharts6 = echarts.init(document.querySelector('#barChartSix'));
+          this.myCharts6.setOption(option)  
+          // 根据页面大小自动响应图表大小
+          // window.addEventListener("resize4", function () {
+          //     myCharts4.resize();
+          // });
+      });
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.dashboard-editor-container {
+  padding: 15px;
+  background-color: rgb(240, 242, 245);
+  position: relative;
+
+  .chart-wrapper {
+    background: #fff;
+    padding: 16px 16px 0;
+    margin-bottom: 32px;
+  }
+}
+
+@media (max-width:1024px) {
+  .chart-wrapper {
+    padding: 8px;
+  }
+}
+</style>