diff --git a/src/assets/images/eleIcon.png b/src/assets/images/eleIcon.png
new file mode 100644
index 00000000..5a0c2e13
Binary files /dev/null and b/src/assets/images/eleIcon.png differ
diff --git a/src/assets/images/waterIcon.png b/src/assets/images/waterIcon.png
new file mode 100644
index 00000000..900a851d
Binary files /dev/null and b/src/assets/images/waterIcon.png differ
diff --git a/src/views/canteen/dish/dish/index.vue b/src/views/canteen/dish/dish/index.vue
index 3cab22f9..11c78388 100644
--- a/src/views/canteen/dish/dish/index.vue
+++ b/src/views/canteen/dish/dish/index.vue
@@ -1370,7 +1370,7 @@
       }, 
       /** 删除按钮操作 */
       handleDelete(row) {
-         if (Number(row.hasInventory) === 1) {
+        if (Number(row.hasInventory) === 1) {
           this.$modal.msgWarning("该物料仍有库存，无法删除！");
           return;
         }
diff --git a/src/views/canteen/dish/material/components/MaterialDialog.vue b/src/views/canteen/dish/material/components/MaterialDialog.vue
index 2bb6df6b..9631b985 100644
--- a/src/views/canteen/dish/material/components/MaterialDialog.vue
+++ b/src/views/canteen/dish/material/components/MaterialDialog.vue
@@ -347,6 +347,7 @@ export default {
     this.getAreaTreeData();//获取区域树
     this.getTypeTreeData();//获取原料类别树
     this.getDrpUnitList();//获取单位类型下拉 
+    this.getNutritionTypeList();//获取类型下拉 
   },
   methods: {
     //区域树
diff --git a/src/views/canteen/dish/material/index.vue b/src/views/canteen/dish/material/index.vue
index 12c27932..5bb47c42 100644
--- a/src/views/canteen/dish/material/index.vue
+++ b/src/views/canteen/dish/material/index.vue
@@ -605,23 +605,20 @@ export default {
 
     /** 删除按钮操作 */
     handleDelete(row) { 
-       if (Number(row.hasInventory) === 1) {
+        if (Number(row.hasInventory) === 1) {
           this.$modal.msgWarning("该物料仍有库存，无法删除！");
           return;
         }
-       this.$modal
+        this.$modal
         .confirm("是否确认删除数据项？")
-        .then(() => {
-          // 使用箭头函数保持 this 上下文
-          return removeMaterialApi({ materialId: row.materialId });
+        .then(function () {
+          return removeMaterialApi({materialId:row.materialId});
         })
         .then(() => {
           this.$modal.msgSuccess("删除成功");
           this.getList();
         })
-        .catch(() => {
-          // 用户取消或异常
-        });
+        .catch(() => {});
     }, 
     handleSelectionChange(selection){
       this.multipleSelection = selection
@@ -642,9 +639,9 @@ export default {
         return;
       }
       removeMaterialApi({"materialId":this.batchIds.join(",")}).then(response => {
-        this.$modal.msgSuccess("删除成功"); 
-        this.$refs.multipleTable.clearSelection()
         this.getList();
+        this.$refs.multipleTable.clearSelection()
+        this.$modal.msgSuccess("删除成功"); 
       });
     },
     //批量修改
diff --git a/src/views/canteen/dish/menu/detail.vue b/src/views/canteen/dish/menu/detail.vue
index c7f2aa3c..e90e3d30 100644
--- a/src/views/canteen/dish/menu/detail.vue
+++ b/src/views/canteen/dish/menu/detail.vue
@@ -200,14 +200,14 @@
                                 <el-input  v-model="scope.row.limitNum" placeholder="请输入" maxlength="10" clearable @input="(v)=>(scope.row.limitNum=v.replace(/[^\d]/g,''))"/>
                             </template>
                         </el-table-column>
-                        <el-table-column label="移动端推荐" align="center" prop="recommendFlag">
+                        <!-- <el-table-column label="移动端推荐" align="center" prop="recommendFlag">
                             <template slot-scope="scope">
                                 <el-switch v-model="scope.row.recommendFlag"
                                     active-text="是" inactive-text="否"
                                     :active-value="1" :inactive-value="2">
                                 </el-switch>
                             </template>
-                        </el-table-column>
+                        </el-table-column> -->
                         <el-table-column label="操作" align="center">
                             <template slot-scope="scope">
                                 <el-button size="mini" type="text" style="color: red;"
diff --git a/src/views/canteen/dish/menu/edit.vue b/src/views/canteen/dish/menu/edit.vue
index 22b61e31..517e60c6 100644
--- a/src/views/canteen/dish/menu/edit.vue
+++ b/src/views/canteen/dish/menu/edit.vue
@@ -200,14 +200,14 @@
                                 <el-input  v-model="scope.row.limitNum" placeholder="请输入" maxlength="10" clearable @input="(v)=>(scope.row.limitNum=v.replace(/[^\d]/g,''))"/>
                             </template>
                         </el-table-column>
-                        <el-table-column label="移动端推荐" align="center" prop="recommendFlag">
+                        <!-- <el-table-column label="移动端推荐" align="center" prop="recommendFlag">
                             <template slot-scope="scope">
                                 <el-switch v-model="scope.row.recommendFlag"
                                     active-text="是" inactive-text="否"
                                     :active-value="1" :inactive-value="2">
                                 </el-switch>
                             </template>
-                        </el-table-column>
+                        </el-table-column> -->
                         <el-table-column label="操作" align="center">
                             <template slot-scope="scope">
                                 <el-button size="mini" type="text" style="color: red;"
@@ -958,6 +958,7 @@ export default {
             let index = this.dateRangeList.findIndex(v=>v.applyDate==this.dateRangeRadio)
             this.dateRangeIndex = index
             this.detailList = this.dateRangeList[index].detailList;
+            this.dateRangeList[index].editStatus=true
             let hasDishes = false
             this.detailList.forEach(item=>{
                 if(item.dishesList.length>0){
@@ -1014,6 +1015,7 @@ export default {
         choseWeekDate(item,index){
             this.weekId = item.applyWeek;
             this.detailList = this.weekDateList[index].detailList;
+            this.weekDateList[index].editStatus=true
             let hasDishes2 = false
             this.detailList.forEach(item=>{
                 if(item.dishesList.length>0){
@@ -1157,9 +1159,9 @@ export default {
                 let index = type.dishesList.findIndex(v=>v.dishesId==dish.dishesId)
                 this.detailList.forEach(item=>{
                     if(item.mealtimeType==type.mealtimeType){
-                        item.dishesList.splice(index,1)
+                        item.dishesList.splice(index,1) 
                     }
-                })
+                }) 
             }).catch(() => {}); 
         },
         // 提交按钮
@@ -1168,13 +1170,17 @@ export default {
                 if (valid) {  
                     let param = this.baseInfo
                     if(this.baseInfo.recipeType==1){
-                        param.recipeDateList = []
+                        param.recipeDateList = [] 
                         this.dateRangeList.forEach(item=>{
                             let index = item.detailList.findIndex(subItem=>subItem.dishesList.length>0)
                             if(index>-1){
                                 param.recipeDateList.push(item)
-                            }
-                        })
+                            }else{
+                                if(item.editStatus){
+                                    param.recipeDateList.push(item)
+                                } 
+                            } 
+                         })
                     }
                     if(this.baseInfo.recipeType==2){ 
                         param.recipeDateList = [{
@@ -1188,7 +1194,12 @@ export default {
                             let index = item.detailList.findIndex(subItem=>subItem.dishesList.length>0)
                             if(index>-1){
                                 param.recipeDateList.push(item)
+                            }else{
+                                if(item.editStatus){
+                                    param.recipeDateList.push(item)
+                                } 
                             }
+                            
                         })
                     }
                     this.noDishes = true;
@@ -1792,7 +1803,7 @@ export default {
                         dishesList:[]
                     }
                 ];
-                this.detailList = this.dateRangeList[this.dateRangeIndex].detailList;
+                this.detailList = this.dateRangeList[this.dateRangeIndex].detailList; 
                 this.$modal.msgSuccess("清空成功");
             }).catch(() => {});
             
diff --git a/src/views/energySaving/components/count.vue b/src/views/energySaving/components/count.vue
new file mode 100644
index 00000000..31297e5e
--- /dev/null
+++ b/src/views/energySaving/components/count.vue
@@ -0,0 +1,25 @@
+<template>
+  <div>
+     
+  </div>
+</template>
+
+<script> 
+
+export default {
+  props: {
+    topData: {
+      type: Array,
+      default: []
+    }
+  },
+  methods: {
+
+
+    
+  }
+}
+</script>
+<style lang="scss" scoped>
+ 
+</style>
diff --git a/src/views/energySaving/dashboard/BarChart.vue b/src/views/energySaving/dashboard/BarChart.vue
new file mode 100644
index 00000000..88e7ef64
--- /dev/null
+++ b/src/views/energySaving/dashboard/BarChart.vue
@@ -0,0 +1,102 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import * as echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from './mixins/resize'
+
+const animationDuration = 6000
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '300px'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+
+      this.chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        grid: {
+          top: 10,
+          left: '2%',
+          right: '2%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [{
+          type: 'category',
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          axisTick: {
+            alignWithLabel: true
+          }
+        }],
+        yAxis: [{
+          type: 'value',
+          axisTick: {
+            show: false
+          }
+        }],
+        series: [{
+          name: 'pageA',
+          type: 'bar',
+          stack: 'vistors',
+          barWidth: '60%',
+          data: [79, 52, 200, 334, 390, 330, 220],
+          animationDuration
+        }, {
+          name: 'pageB',
+          type: 'bar',
+          stack: 'vistors',
+          barWidth: '60%',
+          data: [80, 52, 200, 334, 390, 330, 220],
+          animationDuration
+        }, {
+          name: 'pageC',
+          type: 'bar',
+          stack: 'vistors',
+          barWidth: '60%',
+          data: [30, 52, 200, 334, 390, 330, 220],
+          animationDuration
+        }]
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/energySaving/dashboard/LineChart.vue b/src/views/energySaving/dashboard/LineChart.vue
new file mode 100644
index 00000000..702ff73f
--- /dev/null
+++ b/src/views/energySaving/dashboard/LineChart.vue
@@ -0,0 +1,135 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import * as echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from './mixins/resize'
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '350px'
+    },
+    autoResize: {
+      type: Boolean,
+      default: true
+    },
+    chartData: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler(val) {
+        this.setOptions(val)
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+      this.setOptions(this.chartData)
+    },
+    setOptions({ expectedData, actualData } = {}) {
+      this.chart.setOption({
+        xAxis: {
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          boundaryGap: false,
+          axisTick: {
+            show: false
+          }
+        },
+        grid: {
+          left: 10,
+          right: 10,
+          bottom: 20,
+          top: 30,
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross'
+          },
+          padding: [5, 10]
+        },
+        yAxis: {
+          axisTick: {
+            show: false
+          }
+        },
+        legend: {
+          data: ['expected', 'actual']
+        },
+        series: [{
+          name: 'expected', itemStyle: {
+            normal: {
+              color: '#FF005A',
+              lineStyle: {
+                color: '#FF005A',
+                width: 2
+              }
+            }
+          },
+          smooth: true,
+          type: 'line',
+          data: expectedData,
+          animationDuration: 2800,
+          animationEasing: 'cubicInOut'
+        },
+        {
+          name: 'actual',
+          smooth: true,
+          type: 'line',
+          itemStyle: {
+            normal: {
+              color: '#3888fa',
+              lineStyle: {
+                color: '#3888fa',
+                width: 2
+              },
+              areaStyle: {
+                color: '#f3f8ff'
+              }
+            }
+          },
+          data: actualData,
+          animationDuration: 2800,
+          animationEasing: 'quadraticOut'
+        }]
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/energySaving/dashboard/PanelGroup.vue b/src/views/energySaving/dashboard/PanelGroup.vue
new file mode 100644
index 00000000..2b6a44d2
--- /dev/null
+++ b/src/views/energySaving/dashboard/PanelGroup.vue
@@ -0,0 +1,259 @@
+<template>
+  <el-row :gutter="36" class="panel-group">
+    <el-col :span="4" 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: 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: 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: 1rem;
+        margin-bottom: 15px;
+      }
+
+      .card-panel-num {
+        font-size: 1.5rem;
+        color: #000;
+      }
+    }
+
+
+
+
+  }
+} 
+</style>
diff --git a/src/views/energySaving/dashboard/PieChart.vue b/src/views/energySaving/dashboard/PieChart.vue
new file mode 100644
index 00000000..63f0d849
--- /dev/null
+++ b/src/views/energySaving/dashboard/PieChart.vue
@@ -0,0 +1,79 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import * as echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from './mixins/resize'
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '300px'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+
+      this.chart.setOption({
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b} : {c} ({d}%)'
+        },
+        legend: {
+          left: 'center',
+          bottom: '10',
+          data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
+        },
+        series: [
+          {
+            name: 'WEEKLY WRITE ARTICLES',
+            type: 'pie',
+            roseType: 'radius',
+            radius: [15, 95],
+            center: ['50%', '38%'],
+            data: [
+              { value: 320, name: 'Industries' },
+              { value: 240, name: 'Technology' },
+              { value: 149, name: 'Forex' },
+              { value: 100, name: 'Gold' },
+              { value: 59, name: 'Forecasts' }
+            ],
+            animationEasing: 'cubicInOut',
+            animationDuration: 2600
+          }
+        ]
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/energySaving/dashboard/RaddarChart.vue b/src/views/energySaving/dashboard/RaddarChart.vue
new file mode 100644
index 00000000..312e018a
--- /dev/null
+++ b/src/views/energySaving/dashboard/RaddarChart.vue
@@ -0,0 +1,116 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import * as echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from './mixins/resize'
+
+const animationDuration = 3000
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '300px'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+
+      this.chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        radar: {
+          radius: '66%',
+          center: ['50%', '42%'],
+          splitNumber: 8,
+          splitArea: {
+            areaStyle: {
+              color: 'rgba(127,95,132,.3)',
+              opacity: 1,
+              shadowBlur: 45,
+              shadowColor: 'rgba(0,0,0,.5)',
+              shadowOffsetX: 0,
+              shadowOffsetY: 15
+            }
+          },
+          indicator: [
+            { name: 'Sales', max: 10000 },
+            { name: 'Administration', max: 20000 },
+            { name: 'Information Techology', max: 20000 },
+            { name: 'Customer Support', max: 20000 },
+            { name: 'Development', max: 20000 },
+            { name: 'Marketing', max: 20000 }
+          ]
+        },
+        legend: {
+          left: 'center',
+          bottom: '10',
+          data: ['Allocated Budget', 'Expected Spending', 'Actual Spending']
+        },
+        series: [{
+          type: 'radar',
+          symbolSize: 0,
+          areaStyle: {
+            normal: {
+              shadowBlur: 13,
+              shadowColor: 'rgba(0,0,0,.2)',
+              shadowOffsetX: 0,
+              shadowOffsetY: 10,
+              opacity: 1
+            }
+          },
+          data: [
+            {
+              value: [5000, 7000, 12000, 11000, 15000, 14000],
+              name: 'Allocated Budget'
+            },
+            {
+              value: [4000, 9000, 15000, 15000, 13000, 11000],
+              name: 'Expected Spending'
+            },
+            {
+              value: [5500, 11000, 12000, 15000, 12000, 12000],
+              name: 'Actual Spending'
+            }
+          ],
+          animationDuration: animationDuration
+        }]
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/energySaving/dashboard/mixins/resize.js b/src/views/energySaving/dashboard/mixins/resize.js
new file mode 100644
index 00000000..b1e76e94
--- /dev/null
+++ b/src/views/energySaving/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/energySaving/index.vue b/src/views/energySaving/index.vue
new file mode 100644
index 00000000..3d9aa558
--- /dev/null
+++ b/src/views/energySaving/index.vue
@@ -0,0 +1,798 @@
+<template>
+  <div class="dashboard-editor-container">
+    <el-row>
+      <el-col :span="12">
+        <div style="background: #fff;padding: 10px;margin: 5px;margin-bottom: 10px;border-radius: 4px;">
+          <div style="display: flex;align-items: center;">
+            <img src="@/assets/images/waterIcon.png" style="width: 60px;height: 60px;">
+            <div style="font-size: 24px;font-weight: 600;">
+              智慧用水
+            </div>
+          </div>
+          <div style="width: 100%;display: flex;align-items: center;justify-content: space-between;padding:0 20px;">
+            <div style="width: 50%;display: flex;align-items: center;font-size: 18px;">
+              <div style="margin-right: 10px;">日用水量</div>
+              <count-to :start-val="0" :end-val="53" :duration="2000" class="card-panel-num" />
+              <div style="margin-left: 10px;">m³</div>
+            </div>
+            <div style="width: 50%;display: flex;align-items: center;">
+              <div style="margin-right: 10px;">累计用水量</div>
+              <count-to :start-val="0" :end-val="53" :duration="2000" class="card-panel-num" />
+              <div style="margin-left: 10px;">m³</div>
+            </div>
+          </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="lineChartOne" style="width: 100%;height: 200px;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: 200px;margin-bottom: 20px;"></div>  
+        </div>
+      </el-col>
+      <el-col :span="12">
+        <div style="background: #fff;padding: 10px;margin: 5px;margin-bottom: 10px;border-radius: 4px;">
+          <div style="display: flex;align-items: center;">
+            <img src="@/assets/images/waterIcon.png" style="width: 60px;height: 60px;">
+            <div style="font-size: 24px;font-weight: 600;">
+              智慧用水
+            </div>
+          </div>
+          <div style="width: 100%;display: flex;align-items: center;justify-content: space-between;padding:0 20px;">
+            <div style="width: 50%;display: flex;align-items: center;font-size: 18px;">
+              <div style="margin-right: 10px;">日用水量</div>
+              <count-to :start-val="0" :end-val="53" :duration="2000" class="card-panel-num" />
+              <div style="margin-left: 10px;">m³</div>
+            </div>
+            <div style="width: 50%;display: flex;align-items: center;">
+              <div style="margin-right: 10px;">累计用水量</div>
+              <count-to :start-val="0" :end-val="53" :duration="2000" class="card-panel-num" />
+              <div style="margin-left: 10px;">m³</div>
+            </div>
+          </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="lineChartOne" style="width: 100%;height: 200px;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: 200px;margin-bottom: 20px;"></div>  
+        </div>
+      </el-col>
+    </el-row> 
+
+
+  </div>
+</template>
+
+<script>
+import CountTo from 'vue-count-to'
+import * as echarts from 'echarts' 
+import {  getDataScreeningModelApi,
+          getCanteenOrdersAndSalesTrendsApi,
+          getSupermarketOrderAndSalesTrendApi,
+          getThisMonthSDishSalesRankingApi,
+          getProportionOfOrderTypesApi 
+        } from "@/api/index";  
+export default { 
+  name: 'Index',
+  components: {
+    CountTo
+  },
+  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"
+        }
+      ],
+      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.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: "5%",
+              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;
+                    value = value.length > 8 ? value.slice(0, 8) + '...' : value
+                    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: -20,
+                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;
+  }
+}
+.card-panel-num {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: #000;
+}
+@media (max-width:1024px) {
+  .chart-wrapper {
+    padding: 8px;
+  }
+}
+</style>
diff --git a/src/views/kitchen/foodSafety/sampleManage/index.vue b/src/views/kitchen/foodSafety/sampleManage/index.vue
index d6cecdef..59c5adf3 100644
--- a/src/views/kitchen/foodSafety/sampleManage/index.vue
+++ b/src/views/kitchen/foodSafety/sampleManage/index.vue
@@ -67,8 +67,7 @@
         </template>
       </el-table-column>
       <el-table-column label="日期" align="center" prop="sampleSaveTime" :show-overflow-tooltip="true"  width="150"/>
-      <el-table-column label="所属区域" align="center" prop="areaName" :show-overflow-tooltip="true"  />
-      <el-table-column label="关联食堂" align="center" prop="canteenName" :show-overflow-tooltip="true"  />
+      <el-table-column label="关联食堂" align="center" prop="canteenName" :show-overflow-tooltip="true"  width="150"/>
       <el-table-column label="档口名称" align="center" prop="stallName" :show-overflow-tooltip="true" />
       <el-table-column label="餐次" align="center" prop="mealtimeType" :show-overflow-tooltip="true">
         <template slot-scope="scope">
diff --git a/vue.config.js b/vue.config.js
index 3235d83b..ef8f33b1 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -36,9 +36,9 @@ module.exports = {
             // detail: https://cli.vuejs.org/config/#devserver-proxy
             [process.env.VUE_APP_BASE_API]: {
                 // target: `http://192.168.2.75:48380`,//旭
-                target: `http://192.168.0.34:48380`,//测试
+                target: `http://192.168.0.244:48380`,//测试
                 // target: `http://192.168.1.176:48380`,//测试
-                // target: `http://192.168.0.44:48380`,//测试
+                // target: `http://192.168.0.34:48380`,//测试
                 // target: `http://192.168.0.176:48380`,//
                 changeOrigin: true,
                 pathRewrite: {