From a9de1683abe35abc3f60fb025567a28d47f7d2db Mon Sep 17 00:00:00 2001
From: zzyuan <781948537@qq.com>
Date: Fri, 20 Jun 2025 10:33:10 +0800
Subject: [PATCH] =?UTF-8?q?=E9=97=AE=E9=A2=98=E4=BF=AE=E6=94=B9=EF=BC=8C?=
 =?UTF-8?q?=E5=8E=A8=E6=88=BF=E6=95=B0=E6=8D=AE=E6=80=BB=E8=A7=88=E8=8D=89?=
 =?UTF-8?q?=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../canteen/base/canteenStall/area/index.vue  |   6 +-
 src/views/canteen/dish/dish/index.vue         |   6 +-
 src/views/canteen/dish/dish/indexOld.vue      |   6 +-
 src/views/canteen/dish/material/index.vue     |   6 +-
 .../canteen/dish/nutritionInfo/index.vue      |   8 +-
 .../canteen/superstore/shopMaterial/index.vue |   6 +-
 src/views/canteen/superstore/super/index.vue  |   6 +-
 src/views/dashboard/PanelGroup.vue            |   4 +-
 src/views/index_v1.vue                        |  23 +-
 src/views/kitchen/dashboard/PanelGroup.vue    |  95 +++
 src/views/kitchen/dashboard/SubGroup.vue      | 110 +++
 src/views/kitchen/dashboard/mixins/resize.js  |  56 ++
 .../devicesManage/deviesRecord/index.vue      |   2 +-
 src/views/kitchen/index.vue                   | 794 ++++++++++++++++++
 14 files changed, 1084 insertions(+), 44 deletions(-)
 create mode 100644 src/views/kitchen/dashboard/PanelGroup.vue
 create mode 100644 src/views/kitchen/dashboard/SubGroup.vue
 create mode 100644 src/views/kitchen/dashboard/mixins/resize.js
 create mode 100644 src/views/kitchen/index.vue

diff --git a/src/views/canteen/base/canteenStall/area/index.vue b/src/views/canteen/base/canteenStall/area/index.vue
index 462f1911..6969949e 100644
--- a/src/views/canteen/base/canteenStall/area/index.vue
+++ b/src/views/canteen/base/canteenStall/area/index.vue
@@ -15,7 +15,7 @@
               style="margin-bottom: 20px"
             />
           </div>
-          <div class="head-container" style>
+          <div class="head-container" >
             <el-tree
               style="height: 700px; overflow: scroll"
               :data="treeOptions"
@@ -34,8 +34,8 @@
                 @mousemove="onMousemove(data)"
                 @mouseleave="onMouseleave()"
               >
-                <span v-if="isMousemoveId === data.id && node.label.length > 10">{{
-                  node.label.slice(0, 10) + "..."
+                <span v-if="isMousemoveId === data.id && node.label.length > 5">{{
+                  node.label.slice(0, 5) + "..."
                 }}</span>
                 <span v-else>{{ node.label }}</span>
   
diff --git a/src/views/canteen/dish/dish/index.vue b/src/views/canteen/dish/dish/index.vue
index a8c5f7af..e4ee3adb 100644
--- a/src/views/canteen/dish/dish/index.vue
+++ b/src/views/canteen/dish/dish/index.vue
@@ -20,7 +20,7 @@
             />
           </div>
   
-          <div class="head-container" style>
+          <div class="head-container">
             <el-tree style="height: 700px; overflow: scroll"
               :data="treeOptions" :props="defaultProps"
               :show-checkbox="true" :default-expand-all="true"
@@ -28,8 +28,8 @@
               ref="typeTree" node-key="dishesTypeId" highlight-current @node-click="handleNodeClick" @check-change="handleCheckChange"
             >
                 <span class="custom-tree-node" slot-scope="{ node, data }" @mousemove="onMousemove(data)" @mouseleave="onMouseleave()">
-                  <span v-if="isMousemoveId === data.dishesTypeId && node.label.length > 10">{{
-                      node.label.slice(0, 10) + "..."
+                  <span v-if="isMousemoveId === data.dishesTypeId && node.label.length > 5">{{
+                      node.label.slice(0, 5) + "..."
                     }}</span>
                   <span v-else>{{ node.label }}</span>
   
diff --git a/src/views/canteen/dish/dish/indexOld.vue b/src/views/canteen/dish/dish/indexOld.vue
index 79786f8c..a5d4b52a 100644
--- a/src/views/canteen/dish/dish/indexOld.vue
+++ b/src/views/canteen/dish/dish/indexOld.vue
@@ -20,7 +20,7 @@
             />
           </div>
   
-          <div class="head-container" style>
+          <div class="head-container">
             <el-tree style="height: 700px; overflow: scroll"
               :data="treeOptions" :props="defaultProps"
               :show-checkbox="true" :default-expand-all="false"
@@ -28,8 +28,8 @@
               ref="typeTree" node-key="typeId" highlight-current @node-click="handleNodeClick" @check-change="handleCheckChange"
             >
                 <span class="custom-tree-node" slot-scope="{ node, data }" @mousemove="onMousemove(data)" @mouseleave="onMouseleave()">
-                  <span v-if="isMousemoveId === data.typeId && node.label.length > 10">{{
-                      node.label.slice(0, 10) + "..."
+                  <span v-if="isMousemoveId === data.typeId && node.label.length > 5">{{
+                      node.label.slice(0, 5) + "..."
                     }}</span>
                   <span v-else>{{ node.label }}</span>
   
diff --git a/src/views/canteen/dish/material/index.vue b/src/views/canteen/dish/material/index.vue
index 43769343..5061d224 100644
--- a/src/views/canteen/dish/material/index.vue
+++ b/src/views/canteen/dish/material/index.vue
@@ -17,7 +17,7 @@
           />
         </div>
 
-        <div class="head-container" style>
+        <div class="head-container">
           <el-tree
             style="height: 700px; overflow: scroll"
             :data="treeOptions"
@@ -33,8 +33,8 @@
             @check-change="handleCheckChange"
           >
               <span class="custom-tree-node" slot-scope="{ node, data }" @mousemove="onMousemove(data)" @mouseleave="onMouseleave()">
-                <span v-if="isMousemoveId === data.id && node.label.length > 10">{{
-                    node.label.slice(0, 10) + "..."
+                <span v-if="isMousemoveId === data.id && node.label.length > 5">{{
+                    node.label.slice(0, 5) + "..."
                   }}</span>
                 <span v-else>{{ node.label }}</span>
 
diff --git a/src/views/canteen/dish/nutritionInfo/index.vue b/src/views/canteen/dish/nutritionInfo/index.vue
index 78344d1e..00035a08 100644
--- a/src/views/canteen/dish/nutritionInfo/index.vue
+++ b/src/views/canteen/dish/nutritionInfo/index.vue
@@ -19,16 +19,16 @@
           />
         </div>
 
-        <div class="head-container" style>
-          <el-tree style="height: 700px; overflow: scroll"
+        <div class="head-container">
+          <el-tree style="height: 700px;overflow: scroll;"
             :data="cascaderOptions" :props="defaultProps"
             :show-checkbox="true" :default-expand-all="true"
             :expand-on-click-node="false" :filter-node-method="filterNode"
             ref="nutritionTypeTree" node-key="id" highlight-current @node-click="handleNodeClick" @check-change="handleCheckChange"
           >
               <span class="custom-tree-node" slot-scope="{ node, data }" @mousemove="onMousemove(data)" @mouseleave="onMouseleave()">
-                <span v-if="isMousemoveId === data.id && node.label.length > 10">{{
-                    node.label.slice(0, 10) + "..."
+                <span v-if="isMousemoveId === data.id && node.label.length > 5">{{
+                    node.label.slice(0, 5) + "..."
                   }}</span>
                 <span v-else>{{ node.label }}</span>
 
diff --git a/src/views/canteen/superstore/shopMaterial/index.vue b/src/views/canteen/superstore/shopMaterial/index.vue
index 1bd42789..175a4a91 100644
--- a/src/views/canteen/superstore/shopMaterial/index.vue
+++ b/src/views/canteen/superstore/shopMaterial/index.vue
@@ -17,7 +17,7 @@
           />
         </div>
 
-        <div class="head-container" style>
+        <div class="head-container">
           <el-tree
             style="height: 700px; overflow: scroll"
             :data="treeOptions"
@@ -33,8 +33,8 @@
             @check-change="handleCheckChange"
           >
               <span class="custom-tree-node" slot-scope="{ node, data }" @mousemove="onMousemove(data)" @mouseleave="onMouseleave()">
-                <span v-if="isMousemoveId === data.id && node.label.length > 10">{{
-                    node.label.slice(0, 10) + "..."
+                <span v-if="isMousemoveId === data.id && node.label.length > 5">{{
+                    node.label.slice(0, 5) + "..."
                   }}</span>
                 <span v-else>{{ node.label }}</span>
 
diff --git a/src/views/canteen/superstore/super/index.vue b/src/views/canteen/superstore/super/index.vue
index d5d75d5b..68f31d70 100644
--- a/src/views/canteen/superstore/super/index.vue
+++ b/src/views/canteen/superstore/super/index.vue
@@ -308,7 +308,7 @@
                   style="margin-bottom: 20px"
                 />
               </div>
-              <div class="head-container" style>
+              <div class="head-container">
                 <el-tree
                   style="height: 700px; overflow: scroll"
                   :data="treeShopOptions"
@@ -324,8 +324,8 @@
                   @check-change="handleCheckChange"
                 >
                     <span class="custom-tree-node" slot-scope="{ node, data }" @mousemove="onMousemove(data)" @mouseleave="onMouseleave()">
-                      <span v-if="isMousemoveId === data.id && node.label.length > 10">{{
-                          node.label.slice(0, 10) + "..."
+                      <span v-if="isMousemoveId === data.id && node.label.length > 5">{{
+                          node.label.slice(0, 5) + "..."
                         }}</span>
                       <span v-else>{{ node.label }}</span>
                       <span class="btn-items" v-if="isMousemoveId === data.id">
diff --git a/src/views/dashboard/PanelGroup.vue b/src/views/dashboard/PanelGroup.vue
index 19dd66f1..1cf68061 100644
--- a/src/views/dashboard/PanelGroup.vue
+++ b/src/views/dashboard/PanelGroup.vue
@@ -199,12 +199,12 @@ export default {
 
 <style lang="scss" scoped>
 .panel-group {
-  margin-top: 18px;
+  // margin-top: 5px;
   padding-left: 15px;
   padding-right: 15px;
 
   .card-panel-col {
-    margin-bottom: 20px;
+    margin-bottom: 10px;
     padding-left: 8px!important;
     padding-right: 8px!important;
   }
diff --git a/src/views/index_v1.vue b/src/views/index_v1.vue
index 5d62da5f..ebed76ed 100644
--- a/src/views/index_v1.vue
+++ b/src/views/index_v1.vue
@@ -58,32 +58,17 @@
 
 <script>
 import PanelGroup from './dashboard/PanelGroup'
-import * as echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
-import resize from './dashboard/mixins/resize'
+import * as echarts from 'echarts' 
 import {  getDataScreeningModelApi,
           getCanteenOrdersAndSalesTrendsApi,
           getSupermarketOrderAndSalesTrendApi,
           getThisMonthSDishSalesRankingApi,
           getProportionOfOrderTypesApi 
-        } from "@/api/index";
-
-
-
-import LineChart from './dashboard/LineChart'
-import RaddarChart from './dashboard/RaddarChart'
-import PieChart from './dashboard/PieChart'
-import BarChart from './dashboard/BarChart' 
-
-export default {
-  mixins: [resize],
+        } from "@/api/index";  
+export default { 
   name: 'Index',
   components: {
-    PanelGroup,
-    LineChart,
-    RaddarChart,
-    PieChart,
-    BarChart
+    PanelGroup
   },
   data() {
     return {
diff --git a/src/views/kitchen/dashboard/PanelGroup.vue b/src/views/kitchen/dashboard/PanelGroup.vue
new file mode 100644
index 00000000..31983f1b
--- /dev/null
+++ b/src/views/kitchen/dashboard/PanelGroup.vue
@@ -0,0 +1,95 @@
+<template>
+  <el-row :gutter="36" class="panel-group">
+    <el-col :span="6" 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>
+    </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: 18px;
+  padding-left: 15px;
+  padding-right: 15px;
+
+  .card-panel-col {
+    margin-bottom: 10px;
+    padding-left: 8px!important;
+    padding-right: 8px!important;
+  }
+
+  .card-panel {
+    height: 100px;
+    // cursor: pointer;
+    font-size: 12px;
+    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: 20px;
+    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: 16px;
+        margin-bottom: 15px;
+      }
+
+      .card-panel-num {
+        font-size: 28px;
+        color: #000;
+      }
+    }
+
+
+
+
+  }
+} 
+</style>
diff --git a/src/views/kitchen/dashboard/SubGroup.vue b/src/views/kitchen/dashboard/SubGroup.vue
new file mode 100644
index 00000000..f38517ca
--- /dev/null
+++ b/src/views/kitchen/dashboard/SubGroup.vue
@@ -0,0 +1,110 @@
+<template>
+  <el-row :gutter="36" class="panel-group">
+    <el-col :span="12" 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>
+          <div style="width: 100%;height: 80px;display: flex;">
+            <div>
+              <div style="font-weight: normal;">正常</div>
+              <div>{{item.num1}}</div>
+            </div>
+            <div>
+              <div style="font-weight: normal;">缺失</div>
+              <div>{{item.num2}}</div>
+            </div>
+            <div>
+              <div style="font-weight: normal;">临期</div>
+              <div>{{item.num3}}</div>
+            </div>
+            <div>
+              <div style="font-weight: normal;">过期</div>
+              <div>{{item.num4}}</div>
+            </div> 
+          </div> 
+          <!-- <count-to :start-val="0" :end-val="item.num" :duration="2000" class="card-panel-num" /> -->
+        </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: 18px;
+  padding-left: 15px;
+  padding-right: 15px;
+
+  .card-panel-col {
+    margin-bottom: 10px;
+    padding-left: 8px!important;
+    padding-right: 8px!important;
+  }
+
+  .card-panel {
+    height: 140px;
+    // cursor: pointer;
+    font-size: 12px;
+    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: 20px;
+    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: bold;
+        font-size: 16px;
+        margin-bottom: 15px;
+      }
+
+      .card-panel-num {
+        font-size: 28px;
+        color: #000;
+      }
+    }
+
+
+
+
+  }
+} 
+</style>
diff --git a/src/views/kitchen/dashboard/mixins/resize.js b/src/views/kitchen/dashboard/mixins/resize.js
new file mode 100644
index 00000000..b1e76e94
--- /dev/null
+++ b/src/views/kitchen/dashboard/mixins/resize.js
@@ -0,0 +1,56 @@
+import { debounce } from '@/utils'
+
+export default {
+  data() {
+    return {
+      $_sidebarElm: null,
+      $_resizeHandler: null
+    }
+  },
+  mounted() {
+    this.initListener()
+  },
+  activated() {
+    if (!this.$_resizeHandler) {
+      // avoid duplication init
+      this.initListener()
+    }
+
+    // when keep-alive chart activated, auto resize
+    this.resize()
+  },
+  beforeDestroy() {
+    this.destroyListener()
+  },
+  deactivated() {
+    this.destroyListener()
+  },
+  methods: {
+    // use $_ for mixins properties
+    // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
+    $_sidebarResizeHandler(e) {
+      if (e.propertyName === 'width') {
+        this.$_resizeHandler()
+      }
+    },
+    initListener() {
+      this.$_resizeHandler = debounce(() => {
+        this.resize()
+      }, 100)
+      window.addEventListener('resize', this.$_resizeHandler)
+
+      this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
+      this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
+    },
+    destroyListener() {
+      window.removeEventListener('resize', this.$_resizeHandler)
+      this.$_resizeHandler = null
+
+      this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
+    },
+    resize() {
+      const { chart } = this
+      chart && chart.resize()
+    }
+  }
+}
diff --git a/src/views/kitchen/devicesManage/deviesRecord/index.vue b/src/views/kitchen/devicesManage/deviesRecord/index.vue
index 0acc24f1..5ca3664d 100644
--- a/src/views/kitchen/devicesManage/deviesRecord/index.vue
+++ b/src/views/kitchen/devicesManage/deviesRecord/index.vue
@@ -31,7 +31,7 @@
         </template>
       </el-table-column>
       <el-table-column label="设备名称" align="center" prop="deviceName" :show-overflow-tooltip="true"/>
-      <el-table-column label="设备类型" align="center" prop="deviceType" :show-overflow-tooltip="true"/>
+      <el-table-column label="设备类型" align="center" prop="deviceTypeName" :show-overflow-tooltip="true"/>
       <el-table-column label="所属食堂" align="center" prop="canteenName" :show-overflow-tooltip="true" />
       <el-table-column label="位置" align="center" prop="subPlace" :show-overflow-tooltip="true" />
       <el-table-column label="工作状态" align="center" prop="workState" :show-overflow-tooltip="true">
diff --git a/src/views/kitchen/index.vue b/src/views/kitchen/index.vue
new file mode 100644
index 00000000..e12ea910
--- /dev/null
+++ b/src/views/kitchen/index.vue
@@ -0,0 +1,794 @@
+<template>
+  <div class="dashboard-editor-container"> 
+    <panel-group :topData="topAreaOptions"/>
+    <el-row>
+        <el-col :span="18">
+            <sub-group :topData="subTopAreaOptions"/>
+            <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>
+                    <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>
+        </el-col>
+        <el-col :span="6">
+
+        </el-col>
+    </el-row>
+    <!-- <el-row>
+      <el-col :span="16">
+        <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>
+              <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;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>
+              <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;border-radius: 4px;"> 
+          <div style="border-left: 4px solid #00594F;padding-left: 10px;font-weight: 600">近30天菜品销量排名</div> 
+          <div id="lineChartThree" style="width: 100%;height: 380px;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>
+              <el-radio-group v-model="type3" @change="changType3">
+                <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="barChartFour" style="width: 100%;height: 235px;margin-bottom: 20px;"></div>  
+        </div>
+      </el-col>
+    </el-row>  -->
+
+
+  </div>
+</template>
+
+<script>
+import PanelGroup from './dashboard/PanelGroup'
+import SubGroup from './dashboard/SubGroup'
+import * as echarts from 'echarts' 
+import {  getDataScreeningModelApi,
+          getCanteenOrdersAndSalesTrendsApi,
+          getSupermarketOrderAndSalesTrendApi,
+          getThisMonthSDishSalesRankingApi,
+          getProportionOfOrderTypesApi 
+        } from "@/api/index";
+export default { 
+  name: 'Index',
+  components: {
+    PanelGroup,
+    SubGroup
+  },
+  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"
+        }
+      ],
+      subTopAreaOptions:[
+        { 
+          "name": "健康证管理",
+          "num1": 1, 
+          "num2": 2, 
+          "num3": 3, 
+          "num4": 4, 
+        },{
+          "name": "报警记录", 
+          "num1": 1, 
+          "num2": 2, 
+          "num3": 3, 
+        }
+      ],
+      type1:1,
+      type2:1,
+      type3:1,
+      myCharts1:null,
+      myCharts2:null,
+      myCharts3:null,
+      myCharts4:null,
+    }
+  },
+  mounted(){
+    this.getTopData()
+    this.InitEChartsOne()
+    this.InitEChartsTwo()
+    this.InitEChartsThree()
+    this.InitEChartsFour()
+    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();
+        }, 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;
+          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();
+          // });
+      });
+    }
+  }
+}
+</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>