数据统计布局flex适应

src/layout/components/Navbar.vue

@@ -8,7 +8,7 @@
     <div class="right-menu">
       <template v-if="device!=='mobile'">
         <search id="header-search" class="right-menu-item" />
-        
+
         <el-tooltip content="源码地址" effect="dark" placement="bottom">
           <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
         </el-tooltip>

src/views/mes/statisticians/LockerChange.vue

@@ -152,14 +152,14 @@ export default {
             }
           }
         },
-        toolbox: {
-          feature: {
-            dataView: { show: true, readOnly: false },
-            magicType: { show: true, type: ['line', 'bar'] },
-            restore: { show: true },
-            saveAsImage: { show: true }
-          }
-        },
+        // toolbox: {
+        //   feature: {
+        //     dataView: { show: true, readOnly: false },
+        //     magicType: { show: true, type: ['line', 'bar'] },
+        //     restore: { show: true },
+        //     saveAsImage: { show: true }
+        //   }
+        // },
         legend: {
           data: ['正常更换次数','过期更换次数','损坏更换次数'],
           top: '5%',  // 调整图例距离顶部的距离，确保图例在标题下方

src/views/mes/statisticians/LockerCollection.vue

@@ -151,14 +151,14 @@ export default {
             }
           }
         },
-        toolbox: {
-          feature: {
-            dataView: { show: true, readOnly: false },
-            magicType: { show: true, type: ['line', 'bar'] },
-            restore: { show: true },
-            saveAsImage: { show: true }
-          }
-        },
+        // toolbox: {
+        //   feature: {
+        //     dataView: { show: true, readOnly: false },
+        //     magicType: { show: true, type: ['line', 'bar'] },
+        //     restore: { show: true },
+        //     saveAsImage: { show: true }
+        //   }
+        // },
         legend: {
           data: ['累计领取次数'],
           top: '5%',  // 调整图例距离顶部的距离，确保图例在标题下方

src/views/mes/statisticians/LockerDaily.vue

@@ -160,14 +160,14 @@ export default {
             }
           }
         },
-        toolbox: {
-          feature: {
-            dataView: { show: true, readOnly: false },
-            magicType: { show: true, type: ['line', 'bar'] }, // 保留切换功能
-            restore: { show: true },
-            saveAsImage: { show: true }
-          }
-        },
+        // toolbox: {
+        //   feature: {
+        //     dataView: { show: true, readOnly: false },
+        //     magicType: { show: true, type: ['line', 'bar'] }, // 保留切换功能
+        //     restore: { show: true },
+        //     saveAsImage: { show: true }
+        //   }
+        // },
         legend: {
           data: ['累计领取次数', '累计正常归还次数', '累计超时归还次数'],
           top: '5%',  // 调整图例距离顶部的距离，确保图例在标题下方

src/views/mes/statisticians/LockerLending.vue

@@ -155,14 +155,14 @@ export default {
             }
           }
         },
-        toolbox: {
-          feature: {
-            dataView: { show: true, readOnly: false },
-            magicType: { show: true, type: ['line', 'bar'] },
-            restore: { show: true },
-            saveAsImage: { show: true }
-          }
-        },
+        // toolbox: {
+        //   feature: {
+        //     dataView: { show: true, readOnly: false },
+        //     magicType: { show: true, type: ['line', 'bar'] },
+        //     restore: { show: true },
+        //     saveAsImage: { show: true }
+        //   }
+        // },
         legend: {
           data: ['平均借出时长(小时)'],
           top: '5%',  // 调整图例距离顶部的距离，确保图例在标题下方

src/views/mes/statisticians/LockerMistake.vue

@@ -1,6 +1,6 @@
 <template>
 
-  <div class="charts-container">
+  <div class="charts-container" >
 <!--   <div style="width: 100%;">-->
 <!--     <span style="margin: 10px;">统计区间：</span>-->
 <!--     <el-date-picker-->
@@ -15,6 +15,7 @@
 <!--       :picker-options="pickerOptions" >-->
 <!--     </el-date-picker>-->
 <!--   </div>-->
+    <span style="position: absolute;justify-content: center;font-size: 18px;font-weight: bolder">物资柜异常统计</span>
     <!-- 使用 v-for 动态渲染饼图 -->
     <div class="pie-chart" v-for="(cabinet, index) in cabinetData" :key="index">
       <div :id="'pieChart' + cabinet.cabinetId" style="width: 300px; height: 150px;"></div>
@@ -147,7 +148,6 @@ export default {
           const options = {
             title: {
               text: cabinet.cabinetName,  // 添加饼图标题
-              subTitle:'物资柜异常统计',
               left: 'center',
               top: 'center',
               textStyle: {
@@ -156,12 +156,16 @@ export default {
               },
             },
             legend: {
-              data: ['物资错放','超时未关' ],
+              data: [
+                { name: '物资错放', icon: 'circle', textStyle: { color: '#5470c6' }, itemStyle: { color: '#5470c6' } }, // 固定图例颜色
+                { name: '超时未关', icon: 'circle', textStyle: { color: '#91cc75' }, itemStyle: { color: '#91cc75' } }, // 固定图例颜色
+              ],
               bottom: '5%',
               left: 'center',
               textStyle: {
                 fontSize: 14,  // 设置图例的字体大小
-              }
+                color: '#333', // 保持图例文字颜色不变
+              },
             },
             tooltip: {
               trigger: 'item',
@@ -180,7 +184,7 @@ export default {
                 itemStyle: {
                   color: (params) => {
                     if (params.value === 0) {
-                      return '#dcdfe6'; // 数据为0时，渲染为灰色
+                      return '#dcdfe6'; // 数据为0时，饼图部分渲染为灰色
                     } else if (params.name === '超时未关') {
                       return '#91cc75'; // 超时未关用绿色
                     } else {
@@ -208,6 +212,7 @@ export default {
         }
       })
     }
+
   },
   beforeDestroy() {
     // 销毁每个图表实例，避免内存泄漏

src/views/mes/statisticians/LockerOne.vue

@@ -1,35 +1,42 @@
 <template>
   <div>
-       <div style="width: 100%;">
-         <span style="margin: 10px;">统计区间：</span>
-         <el-date-picker
-           style="margin: 10px"
-           v-model="value2"
-           type="datetimerange"
-           align="right"
-           unlink-panels
-           range-separator="至"
-           start-placeholder="开始日期"
-           end-placeholder="结束日期"
-           :picker-options="pickerOptions" >
-         </el-date-picker>
-       </div>
-    <el-row>
-      <el-col :span="12" >
-        <LockerOpen  :startTime="this.queryParams.startTime" :endTime="this.queryParams.endTime"></LockerOpen>
-      </el-col>
-      <el-col :span="12">
-        <LockerMistake :startTime="this.queryParams.startTime" :endTime="this.queryParams.endTime"></LockerMistake>
-      </el-col>
-    </el-row>
-    <el-row>
-      <el-col :span="12">
-        <LockerSpeciality :startTime="this.queryParams.startTime" :endTime="this.queryParams.endTime"></LockerSpeciality>
-      </el-col>
-      <el-col :span="12">
-        <LockerChange :startTime="this.queryParams.startTime" :endTime="this.queryParams.endTime"></LockerChange>
-      </el-col>
-    </el-row>
+    <div style="width: 100%;">
+      <span style="margin: 10px;">统计区间：</span>
+      <el-date-picker
+        style="margin: 10px"
+        v-model="value2"
+        type="datetimerange"
+        align="right"
+        unlink-panels
+        range-separator="至"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+        :picker-options="pickerOptions"
+      >
+      </el-date-picker>
+    </div>
+    <div style="display: flex; flex-wrap: wrap; gap: 10px;">
+      <div style="flex: 1 1 45%; min-width: 620px;"> <!-- Adjust width and allow flexibility -->
+        <div style="border: 1px solid black; width:100%; height: 400px;">
+          <LockerOpen :startTime="this.queryParams.startTime" :endTime="this.queryParams.endTime"></LockerOpen>
+        </div>
+      </div>
+      <div style="flex: 1 1 45%; min-width: 620px;">
+        <div style="border: 1px solid black; width: 100%; height: 400px;">
+          <LockerMistake :startTime="this.queryParams.startTime" :endTime="this.queryParams.endTime"></LockerMistake>
+        </div>
+      </div>
+      <div style="flex: 1 1 45%; min-width: 620px;">
+        <div style="border: 1px solid black; width: 100%; height: 400px;">
+          <LockerSpeciality :startTime="this.queryParams.startTime" :endTime="this.queryParams.endTime"></LockerSpeciality>
+        </div>
+      </div>
+      <div style="flex: 1 1 45%; min-width: 620px;">
+        <div style="border: 1px solid black; width: 100%; height: 400px;">
+          <LockerChange :startTime="this.queryParams.startTime" :endTime="this.queryParams.endTime"></LockerChange>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 <script>
@@ -37,6 +44,7 @@ import LockerOpen from '@/views/mes/statisticians/LockerOpen.vue'
 import LockerMistake from '@/views/mes/statisticians/LockerMistake.vue'
 import LockerSpeciality from '@/views/mes/statisticians/LockerSpeciality.vue'
 import LockerChange from '@/views/mes/statisticians/LockerChange.vue'
+
 export default {
   name: 'LockerOne',
   components: {
@@ -48,43 +56,43 @@ export default {
   data() {
     return {
       value2: this.getDefaultDateRange(),
-      queryParams:{
+      queryParams: {
         startTime: null,
-        endTime: null,
+        endTime: null
       },
       pickerOptions: {
         shortcuts: [{
           text: '最近一周',
           onClick(picker) {
-            const end = new Date();
-            const start = new Date();
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
-            picker.$emit('pick', [start, end]);
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
           }
         }, {
           text: '最近一个月',
           onClick(picker) {
-            const end = new Date();
-            const start = new Date();
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
-            picker.$emit('pick', [start, end]);
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
           }
         }, {
           text: '最近三个月',
           onClick(picker) {
-            const end = new Date();
-            const start = new Date();
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
-            picker.$emit('pick', [start, end]);
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
           }
         }]
-      },
+      }
     }
   },
   watch: {
     value2(val) {
-      if(val){
-        console.log(val,'父组件拿到的时间内容')
+      if (val) {
+        console.log(val, '父组件拿到的时间内容')
         this.getList()
 
       }
@@ -95,28 +103,28 @@ export default {
   },
   methods: {
     getDefaultDateRange() {
-      const today = new Date();
-      const oneMonthAgo = new Date(today.getFullYear(), today.getMonth() - 1, today.getDate());
-      return [oneMonthAgo, today];
+      const today = new Date()
+      const oneMonthAgo = new Date(today.getFullYear(), today.getMonth() - 1, today.getDate())
+      return [oneMonthAgo, today]
     },
     formatDate(date) {
-      const year = date.getFullYear().toString().padStart(2, "0");
-      const month = (date.getMonth() + 1).toString().padStart(2, "0");
-      const day = date.getDate().toString().padStart(2, "0");
-      const hours = date.getHours().toString().padStart(2, "0");
-      const minutes = date.getMinutes().toString().padStart(2, "0");
-      const seconds = date.getSeconds().toString().padStart(2, "0");
+      const year = date.getFullYear().toString().padStart(2, '0')
+      const month = (date.getMonth() + 1).toString().padStart(2, '0')
+      const day = date.getDate().toString().padStart(2, '0')
+      const hours = date.getHours().toString().padStart(2, '0')
+      const minutes = date.getMinutes().toString().padStart(2, '0')
+      const seconds = date.getSeconds().toString().padStart(2, '0')
 
-      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
     },
-    getList(){
+    getList() {
       if (Array.isArray(this.value2) && this.value2.length === 2) {
         this.queryParams.startTime = this.formatDate(this.value2[0])
         this.queryParams.endTime = this.formatDate(this.value2[1])
 
       }
     }
-  },
+  }
 }
 </script>
 <style scoped lang="scss">

src/views/mes/statisticians/LockerOpen.vue

@@ -152,14 +152,14 @@ export default {
             }
           }
         },
-        toolbox: {
-          feature: {
-            dataView: { show: true, readOnly: false },
-            magicType: { show: true, type: ['line', 'bar'] },
-            restore: { show: true },
-            saveAsImage: { show: true }
-          }
-        },
+        // toolbox: {
+        //   feature: {
+        //     dataView: { show: true, readOnly: false },
+        //     magicType: { show: true, type: ['line', 'bar'] },
+        //     restore: { show: true },
+        //     saveAsImage: { show: true }
+        //   }
+        // },
         legend: {
           data: ['开关次数'],
           top: '5%',  // 调整图例距离顶部的距离，确保图例在标题下方

src/views/mes/statisticians/LockerReturn.vue

@@ -152,14 +152,14 @@ export default {
             }
           }
         },
-        toolbox: {
-          feature: {
-            dataView: { show: true, readOnly: false },
-            magicType: { show: true, type: ['line', 'bar'] },
-            restore: { show: true },
-            saveAsImage: { show: true }
-          }
-        },
+        // toolbox: {
+        //   feature: {
+        //     dataView: { show: true, readOnly: false },
+        //     magicType: { show: true, type: ['line', 'bar'] },
+        //     restore: { show: true },
+        //     saveAsImage: { show: true }
+        //   }
+        // },
         legend: {
           data: ['正常归还次数','超时归还次数'],
           top: '5%',  // 调整图例距离顶部的距离，确保图例在标题下方

src/views/mes/statisticians/LockerSpeciality.vue

@@ -156,14 +156,14 @@ export default {
             }
           }
         },
-        toolbox: {
-          feature: {
-            dataView: { show: true, readOnly: false },
-            magicType: { show: true, type: ['line', 'bar'] },
-            restore: { show: true },
-            saveAsImage: { show: true }
-          }
-        },
+        // toolbox: {
+        //   feature: {
+        //     dataView: { show: true, readOnly: false },
+        //     magicType: { show: true, type: ['line', 'bar'] },
+        //     restore: { show: true },
+        //     saveAsImage: { show: true }
+        //   }
+        // },
         legend: {
           data: ['即将过期','已过期','损坏数'],
           top: '5%',  // 调整图例距离顶部的距离，确保图例在标题下方

src/views/mes/statisticians/LockerTwo.vue

@@ -14,22 +14,28 @@
         :picker-options="pickerOptions" >
       </el-date-picker>
     </div>
-    <el-row>
-      <el-col :span="12">
-        <LockerDaily :startTime="this.queryParams.startTime" :endTime="this.queryParams.endTime"></LockerDaily>
-      </el-col>
-      <el-col :span="12">
-        <LockerLending :startTime="this.queryParams.startTime" :endTime="this.queryParams.endTime"></LockerLending>
-      </el-col>
-    </el-row>
-    <el-row>
-      <el-col :span="12">
-        <LockerCollection :startTime="this.queryParams.startTime" :endTime="this.queryParams.endTime"></LockerCollection>
-      </el-col>
-      <el-col :span="12">
-        <LockerReturn :startTime="this.queryParams.startTime" :endTime="this.queryParams.endTime"></LockerReturn>
-      </el-col>
-    </el-row>
+    <div style="display: flex; flex-wrap: wrap; gap: 10px;">
+      <div style="flex: 1 1 45%; min-width: 620px;"> <!-- Adjust width and allow flexibility -->
+        <div style="border: 1px solid black; width: 100%; height: 400px;">
+          <LockerDaily :startTime="this.queryParams.startTime" :endTime="this.queryParams.endTime"></LockerDaily>
+        </div>
+      </div>
+      <div style="flex: 1 1 45%; min-width: 620px;">
+        <div style="border: 1px solid black; width: 100%; height: 400px;">
+          <LockerLending :startTime="this.queryParams.startTime" :endTime="this.queryParams.endTime"></LockerLending>
+        </div>
+      </div>
+      <div style="flex: 1 1 45%; min-width: 620px;">
+        <div style="border: 1px solid black; width: 100%; height: 400px;">
+          <LockerCollection :startTime="this.queryParams.startTime" :endTime="this.queryParams.endTime"></LockerCollection>
+        </div>
+      </div>
+      <div style="flex: 1 1 45%; min-width: 620px;">
+        <div style="border: 1px solid black; width: 100%; height: 400px;">
+          <LockerReturn :startTime="this.queryParams.startTime" :endTime="this.queryParams.endTime"></LockerReturn>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 <script>
@@ -38,9 +44,13 @@ import LockerReturn from '@/views/mes/statisticians/LockerReturn.vue'
 import LockerLending from '@/views/mes/statisticians/LockerLending.vue'
 import LockerDaily from '@/views/mes/statisticians/LockerDaily.vue'
 import LockerOpen from '@/views/mes/statisticians/LockerOpen.vue'
+import LockerSpeciality from '@/views/mes/statisticians/LockerSpeciality.vue'
+import LockerMistake from '@/views/mes/statisticians/LockerMistake.vue'
+import LockerChange from '@/views/mes/statisticians/LockerChange.vue'
 export default {
   name: 'LockerTwo',
   components: {
+    LockerChange, LockerMistake, LockerSpeciality,
     LockerOpen,
     LockerCollection,
     LockerReturn,