diff --git a/.gitignore b/.gitignore
index 78a752d..0f632d7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,7 @@
 .DS_Store
 node_modules/
 dist/
+archives/
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
diff --git a/package.json b/package.json
index fe9bcfa..08416de 100644
--- a/package.json
+++ b/package.json
@@ -87,7 +87,8 @@
     "sass-loader": "10.1.1",
     "script-ext-html-webpack-plugin": "2.1.5",
     "svg-sprite-loader": "5.1.1",
-    "vue-template-compiler": "2.6.12"
+    "vue-template-compiler": "2.6.12",
+    "filemanager-webpack-plugin": "3.1.1"
   },
   "engines": {
     "node": ">=8.9",
diff --git a/public/alarm.mp3 b/public/alarm.mp3
index 595d3b5..253cf24 100644
Binary files a/public/alarm.mp3 and b/public/alarm.mp3 differ
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 93e38b2..329cd6c 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -9,8 +9,11 @@
     <div class="right-menu">
       <template v-if="device !== 'mobile'">
 
+<!--        <el-button type="primary" icon="" size="small" style="margin-right:24px"-->
+<!--          @click="dialogVisible = true">码商押金</el-button>-->
+
         <el-button type="primary" icon="" size="small" style="margin-right:24px"
-          @click="dialogVisible = true">码商押金</el-button>
+          @click="goDataView">数据看板</el-button>
 
         <el-switch :value="autoRefresh" :inactive-text="autoRefresh ? `自动刷新: (${autoRefreshCountdown}S)` : '自动刷新: '"
           @change="onAutoRefreshChanged" style="margin-right: 14px;" />
@@ -140,6 +143,15 @@ export default {
     this.secondMethod()
   },
   methods: {
+    goDataView() {
+      const href = this.$router.resolve({
+        path: '/data-view',
+        params: {
+          fullscreen: true,
+        }
+      })
+      window.open(href.href, '_blank')
+    },
     secondMethod() {
       this.timer = setInterval(() => {
         this.getList();
diff --git a/src/router/index.js b/src/router/index.js
index 85ad1ae..04a4142 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -6,6 +6,7 @@ Vue.use(Router)
 /* Layout */
 import Layout from '@/layout'
 import ParentView from '@/components/ParentView';
+import DataView from '@/views/data-view/data-view.vue';
 
 /**
  * Note: 路由配置项
@@ -124,6 +125,11 @@ export const constantRoutes = [
         meta: { title: '修改生成配置' }
       }
     ]
+  },
+  {
+    path: '/data-view',
+    component: DataView,
+    hidden: true
   }
 ]
 
diff --git a/src/utils/ruoyi.js b/src/utils/ruoyi.js
index 4d6434a..1ca2f91 100644
--- a/src/utils/ruoyi.js
+++ b/src/utils/ruoyi.js
@@ -413,13 +413,13 @@ export function amountFriendlyFormat(amount, unit) {
     }
   }
   // 百
-  if (amount >= 100 || unit === '百') {
-    return {
-      unit: '百',
-      amount: amount / 100,
-      display: `${amount / 100}百`
-    }
-  }
+  // if (amount >= 100 || unit === '百') {
+  //   return {
+  //     unit: '百',
+  //     amount: amount / 100,
+  //     display: `${amount / 100}百`
+  //   }
+  // }
   return {
     unit: '',
     amount: amount,
diff --git a/src/views/data-view/components/data-view-echart.vue b/src/views/data-view/components/data-view-echart.vue
index e78128d..5f06121 100644
--- a/src/views/data-view/components/data-view-echart.vue
+++ b/src/views/data-view/components/data-view-echart.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     ref="charts"
-    style="min-width: 12vw;max-height:220px;height:220px;"
+    style="width: 18vw;height:23vh;"
   />
 </template>
 
@@ -9,6 +9,24 @@
 import * as echarts from 'echarts'
 import { debounce } from '@/utils'
 
+function fontSize(res){
+  let clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = 100 * (clientWidth / 1920);
+  return res*fontSize;
+}
+
+function fontSize2(res){
+  let height = document.documentElement.clientHeight
+  if (!height) return;
+  let fontSize = 100 * (height / 1080);
+  return res*fontSize;
+}
+
+function max(v1, v2) {
+  return v1 > v2 ? v2 : v1
+}
+
 export default {
   props: {
     config: Object
@@ -26,19 +44,43 @@ export default {
   },
   data() {
     return {
-      chart: null
+      chart: null,
     }
   },
-  computed: {
-    option() {
+  mounted() {
+    window.addEventListener('resize', debounce(() => {
+      this.chart?.resize()
+      setTimeout(() => {
+        this.chart?.setOption(this.getOption())
+      }, 200)
+    }, 200))
+  },
+  methods: {
+    getOption() {
+      console.log("reseize")
       let percent = 0
       if (this.config.total === 0) {
         percent = 0
       } else {
         percent = ((this.config.value / this.config.total) * 100).toFixed(2)
+        percent = percent > 100 ? 100 : percent
       }
-      const center = ['50%', '55%']
+      const center = ['50%', '45%']
       const self = this
+      // 外圈文字大小
+      const outSideFontSize = max(fontSize2(0.22), 16)
+      // 外圈文字高度
+      const outSideTextHeight = max(fontSize2(0.3), 26)
+
+      // 内圈小文字
+      const insideFontSize = max(fontSize2(0.18), 18)
+      // 内圈小文字高度
+      const insideTextHeight = 0
+      // 内圈大文字
+      const insideBigFontSize = max(fontSize2(0.38), 40)
+      // 内圈大文字高度
+      const insideBigTextHeight = max(fontSize2(0.70), 70)
+
       return {
         grid: {
           left: '0',
@@ -70,7 +112,7 @@ export default {
         //圆环位置和大小
         polar: {
           center: center,
-          radius: '100%'
+          radius: '145%'
         },
 
         series: [
@@ -80,7 +122,7 @@ export default {
             name: '内部透明起始结束的圆边',
             type: 'gauge',
             center: center,
-            radius: '80%',
+            radius: '90%',
             splitNumber: 10,
             axisLine: {
               lineStyle: {
@@ -141,15 +183,15 @@ export default {
               rich: {
                 t1: {
                   fontFamily: 'PingFang TC',
-                  fontSize: '5%',
+                  fontSize: outSideFontSize,
                   color: '#C6CEEC',
-                  lineHeight: 18
+                  lineHeight: outSideTextHeight
                 },
                 t2: {
                   fontFamily: 'PingFang TC',
-                  fontSize: '10%',
+                  fontSize: outSideFontSize,
                   color: '#FFFFFF',
-                  lineHeight: 18
+                  lineHeight: outSideTextHeight
                 }
               }
             },
@@ -172,156 +214,156 @@ export default {
           },
 
           // 带有阴影的边框
-          {
-            name: 'border',
-            type: 'pie',
-            clockWise: false,
-            radius: '70%',
-            center: center,
-            animation: false,
-            z: 0,
-            data: [{
-              value: 0,
-              color: 'transparent',
-              label: {
-                show: false
-              },
-              labelLine: {
-                show: false
-              },
-              emphasis: {
-                disabled: true
-              },
-              select: {
-                disabled: true
-              },
-              tooltip: {
-                show: false
-              },
-              itemStyle: {
-                color: '#071422',
-                shadowColor: this.config.shadowColor,
-                shadowBlur: 25,
-                shadowOffsetX: 0,
-                shadowOffsetY: -15
-              }
-            }]
-          },
+          // {
+          //   name: 'border',
+          //   type: 'pie',
+          //   clockWise: false,
+          //   radius: '70%',
+          //   center: center,
+          //   animation: false,
+          //   z: 0,
+          //   data: [{
+          //     value: 0,
+          //     color: 'transparent',
+          //     label: {
+          //       show: false
+          //     },
+          //     labelLine: {
+          //       show: false
+          //     },
+          //     emphasis: {
+          //       disabled: true
+          //     },
+          //     select: {
+          //       disabled: true
+          //     },
+          //     tooltip: {
+          //       show: false
+          //     },
+          //     itemStyle: {
+          //       color: '#071422',
+          //       shadowColor: this.config.shadowColor,
+          //       shadowBlur: 25,
+          //       shadowOffsetX: 0,
+          //       shadowOffsetY: -15
+          //     }
+          //   }]
+          // },
           // 阴影的边框(中间)
-          {
-            name: '阴影的边框(中间)',
-            type: 'gauge',
-            center: center,
-            radius: '70%',
-            axisLine: {
-              lineStyle: {
-                color: [
-                  // 右/下/左/上
-                  [
-                    0.6,
-                    new echarts.graphic.LinearGradient(
-                      0, 0, 1, 0,
-                      [
-                        {
-                          offset: 0.2,
-                          color: this.config.opacityBorder[0]
-                        },
-                        {
-                          offset: 0.7,
-                          color: this.config.opacityBorder[1]
-                        },
-                        {
-                          offset: 1,
-                          color: this.config.opacityBorder[0]
-                        }
-                      ]
-                    )
-                  ]
-                ],
-                width: 2
-              }
-            },
-            z: 4,
-            axisLabel: {
-              show: false
-            },
-            axisTick: {
-              show: false
-            },
-            splitLine: {
-              show: false
-            },
-            detail: {
-              show: false
-            },
-            label: {
-              show: false
-            },
-            pointer: {
-              show: false
-            },
-            title: {
-              //标题
-              show: false
-            },
-            data: [
-              {
-                name: percent + '%',
-                value: percent
-              }
-            ]
-          },
+          // {
+          //   name: '阴影的边框(中间)',
+          //   type: 'gauge',
+          //   center: center,
+          //   radius: '70%',
+          //   axisLine: {
+          //     lineStyle: {
+          //       color: [
+          //         // 右/下/左/上
+          //         [
+          //           0.6,
+          //           new echarts.graphic.LinearGradient(
+          //             0, 0, 1, 0,
+          //             [
+          //               {
+          //                 offset: 0.2,
+          //                 color: this.config.opacityBorder[0]
+          //               },
+          //               {
+          //                 offset: 0.7,
+          //                 color: this.config.opacityBorder[1]
+          //               },
+          //               {
+          //                 offset: 1,
+          //                 color: this.config.opacityBorder[0]
+          //               }
+          //             ]
+          //           )
+          //         ]
+          //       ],
+          //       width: 2
+          //     }
+          //   },
+          //   z: 4,
+          //   axisLabel: {
+          //     show: false
+          //   },
+          //   axisTick: {
+          //     show: false
+          //   },
+          //   splitLine: {
+          //     show: false
+          //   },
+          //   detail: {
+          //     show: false
+          //   },
+          //   label: {
+          //     show: false
+          //   },
+          //   pointer: {
+          //     show: false
+          //   },
+          //   title: {
+          //     //标题
+          //     show: false
+          //   },
+          //   data: [
+          //     {
+          //       name: percent + '%',
+          //       value: percent
+          //     }
+          //   ]
+          // },
 
           // 刻度
-          {
-            name: '外部刻度',
-            type: 'gauge',
-            center: center,
-            radius: '75%',
-            min: 0, //最小刻度
-            max: 100, //最大刻度
-            splitNumber: 10, //刻度数量
-            startAngle: 225,
-            endAngle: -45,
-            axisLine: {
-              show: false,
-              lineStyle: {
-                width: 1,
-                color: [
-                  [1, 'rgba(0,0,0,0)']
-                ]
-              }
-            },
-            //仪表盘轴线
-            axisLabel: {
-              show: false
-            }, //刻度标签。
-            axisTick: {
-              show: true,
-              splitNumber: 4,
-              lineStyle: {
-                //用颜色渐变函数不起作用
-                color: '#6DCBFF',
-                width: 1
-              },
-              length: 1
-            },
-            //刻度样式
-            splitLine: {
-              show: true,
-              length: 2,
-              lineStyle: {
-                //用颜色渐变函数不起作用
-                color: '#6DCBFF'
-              }
-            }, //分隔线样式
-            detail: {
-              show: false
-            },
-            pointer: {
-              show: false
-            }
-          },
+          // {
+          //   name: '外部刻度',
+          //   type: 'gauge',
+          //   center: center,
+          //   radius: '75%',
+          //   min: 0, //最小刻度
+          //   max: 100, //最大刻度
+          //   splitNumber: 10, //刻度数量
+          //   startAngle: 225,
+          //   endAngle: -45,
+          //   axisLine: {
+          //     show: false,
+          //     lineStyle: {
+          //       width: 1,
+          //       color: [
+          //         [1, 'rgba(0,0,0,0)']
+          //       ]
+          //     }
+          //   },
+          //   //仪表盘轴线
+          //   axisLabel: {
+          //     show: false
+          //   }, //刻度标签。
+          //   axisTick: {
+          //     show: true,
+          //     splitNumber: 4,
+          //     lineStyle: {
+          //       //用颜色渐变函数不起作用
+          //       color: '#6DCBFF',
+          //       width: 1
+          //     },
+          //     length: 1
+          //   },
+          //   //刻度样式
+          //   splitLine: {
+          //     show: true,
+          //     length: 2,
+          //     lineStyle: {
+          //       //用颜色渐变函数不起作用
+          //       color: '#6DCBFF'
+          //     }
+          //   }, //分隔线样式
+          //   detail: {
+          //     show: false
+          //   },
+          //   pointer: {
+          //     show: false
+          //   }
+          // },
 
           // 最宽的圆环，上层, 显示彩色的进度条
           {
@@ -373,89 +415,89 @@ export default {
             z: 1
           },
 
-          {
-            name: '内部透明起始结束的圆边',
-            type: 'gauge',
-            center: center,
-            radius: '40%',
-            splitNumber: 10,
-            axisLine: {
-              lineStyle: {
-                color: [
-                  [0, new echarts.graphic.LinearGradient(
-                    0, 1, 0, 0,
-                    [{
-                      offset: 0,
-                      color: this.config.circle2Color[0]
-                    }, {
-                      offset: 1,
-                      color: this.config.circle2Color[1]
-                    }]
-                  )],
-                  [0.2, new echarts.graphic.LinearGradient(
-                    0, 1, 0, 0,
-                    [{
-                      offset: 0,
-                      color: this.config.circle2Color[0]
-                    }, {
-                      offset: 1,
-                      color: this.config.circle2Color[1]
-                    }]
-                  )],
-                  [0.8, new echarts.graphic.LinearGradient(
-                    0, 0, 1, 0,
-                    [{
-                      offset: 0,
-                      color: this.config.circle2Color[1]
-                    }, {
-                      offset: 1,
-                      color: this.config.circle2Color[1]
-                    }]
-                  )],
-                  [1, new echarts.graphic.LinearGradient(
-                    0, 0, 0, 1,
-                    [{
-                      offset: 0,
-                      color: this.config.circle2Color[1]
-                    }, {
-                      offset: 1,
-                      color: this.config.circle2Color[0]
-                    }]
-                  )]
-                ],
-                width: 1
-              }
-            },
-            z: 4,
-            axisLabel: {
-              show: false
-            },
-            axisTick: {
-              show: false
-            },
-            splitLine: {
-              show: false
-            },
-            detail: {
-              show: false
-            },
-            label: {
-              show: false
-            },
-            pointer: {
-              show: false
-            },
-            title: {
-              //标题
-              show: false
-            },
-            data: [
-              {
-                name: percent + '%',
-                value: percent
-              }
-            ]
-          },
+          // {
+          //   name: '内部透明起始结束的圆边',
+          //   type: 'gauge',
+          //   center: center,
+          //   radius: '40%',
+          //   splitNumber: 10,
+          //   axisLine: {
+          //     lineStyle: {
+          //       color: [
+          //         [0, new echarts.graphic.LinearGradient(
+          //           0, 1, 0, 0,
+          //           [{
+          //             offset: 0,
+          //             color: this.config.circle2Color[0]
+          //           }, {
+          //             offset: 1,
+          //             color: this.config.circle2Color[1]
+          //           }]
+          //         )],
+          //         [0.2, new echarts.graphic.LinearGradient(
+          //           0, 1, 0, 0,
+          //           [{
+          //             offset: 0,
+          //             color: this.config.circle2Color[0]
+          //           }, {
+          //             offset: 1,
+          //             color: this.config.circle2Color[1]
+          //           }]
+          //         )],
+          //         [0.8, new echarts.graphic.LinearGradient(
+          //           0, 0, 1, 0,
+          //           [{
+          //             offset: 0,
+          //             color: this.config.circle2Color[1]
+          //           }, {
+          //             offset: 1,
+          //             color: this.config.circle2Color[1]
+          //           }]
+          //         )],
+          //         [1, new echarts.graphic.LinearGradient(
+          //           0, 0, 0, 1,
+          //           [{
+          //             offset: 0,
+          //             color: this.config.circle2Color[1]
+          //           }, {
+          //             offset: 1,
+          //             color: this.config.circle2Color[0]
+          //           }]
+          //         )]
+          //       ],
+          //       width: 1
+          //     }
+          //   },
+          //   z: 4,
+          //   axisLabel: {
+          //     show: false
+          //   },
+          //   axisTick: {
+          //     show: false
+          //   },
+          //   splitLine: {
+          //     show: false
+          //   },
+          //   detail: {
+          //     show: false
+          //   },
+          //   label: {
+          //     show: false
+          //   },
+          //   pointer: {
+          //     show: false
+          //   },
+          //   title: {
+          //     //标题
+          //     show: false
+          //   },
+          //   data: [
+          //     {
+          //       name: percent + '%',
+          //       value: percent
+          //     }
+          //   ]
+          // },
 
           // 内圆的边框
           {
@@ -463,7 +505,7 @@ export default {
             type: 'pie',
             clockWise: false,
             hoverAnimation: false,
-            radius: ['35%', '35%'],//边框大小
+            radius: ['55%', '55%'],//边框大小
             center: center,//边框位置
             tooltip: {
               show: false
@@ -487,7 +529,7 @@ export default {
           // 内圆
           {
             type: 'pie',
-            radius: '35%',
+            radius: '55%',
             center: center,
             z: 1,
             itemStyle: {
@@ -522,26 +564,26 @@ export default {
                 show: true,
                 position: 'center',
                 color: '#4c4a4a',
-                formatter: `{t1|${percent}%}\n{t2|${this.config.value}}\n{t3|${this.config.unit}}`,
+                formatter: `{t1| ${percent}%}\n{t2|${this.config.value}}\n{t3|${this.config.unit}}`,
                 rich: {
                   t1: {
                     fontFamily: 'PingFang TC',
-                    fontSize: '5%',
+                    fontSize: insideFontSize,
                     color: '#C6CEEC',
-                    lineHeight: 14
+                    lineHeight: insideTextHeight
                   },
                   t2: {
                     fontFamily: 'PingFang TC',
-                    fontSize: '10%',
+                    fontSize: insideBigFontSize,
                     color: '#FFFFFF',
-                    lineHeight: 14,
+                    lineHeight: insideBigTextHeight,
                     fontWeight: 600
                   },
                   t3: {
                     fontFamily: 'PingFang TC',
-                    fontSize: '5%',
+                    fontSize: insideFontSize,
                     color: '#C6CEEC',
-                    lineHeight: 14
+                    lineHeight: insideTextHeight
                   }
                 }
               },
@@ -556,20 +598,12 @@ export default {
           }
         ]
       }
-    }
-  },
-  mounted() {
-    window.addEventListener('resize', debounce(() => {
-      this.chart?.resize()
-    }, 200))
-
-  },
-  methods: {
+    },
     init() {
       if (!this.chart) {
         this.chart = echarts.init(this.$refs.charts)
       }
-      this.chart.setOption(this.option)
+      this.chart.setOption(this.getOption())
     }
   }
 }
diff --git a/src/views/data-view/components/data-view-layout.vue b/src/views/data-view/components/data-view-layout.vue
index 583d884..679601a 100644
--- a/src/views/data-view/components/data-view-layout.vue
+++ b/src/views/data-view/components/data-view-layout.vue
@@ -10,18 +10,25 @@
     >
       <div class="identifier data-view-header-item">
         <img style="width: 23px; height: 23px;" :src="icon" alt="">
-        <span style="padding-left: 10px;">{{identifier}}</span>
+        <span style="padding-left: 10px;">{{ identifier }}</span>
       </div>
-      <h1 class="YouSheBiaoTiHei data-view-header-title data-view-header-item" style="text-align: center;">{{ title }}</h1>
+      <h1 class="YouSheBiaoTiHei data-view-header-title data-view-header-item" style="text-align: center;">{{
+          title
+        }}</h1>
       <div class="data-view-header-time data-view-header-item">
         <img @click="$emit('leave')" style="width: 26px; height: 26px; cursor: pointer;" :src="ICUNFullscreen" alt="">
         <div style="width: 26px;"/>
-        <span>{{date}}</span>
+        <span>{{ date }}</span>
       </div>
     </div>
 
+    <!-- 中间的图表       -->
+    <div class="data-view-charts-body">
+      <slot name="charts"></slot>
+    </div>
+
     <!-- 内容  -->
-    <div class="data-view-body">
+    <div class="data-view-tables-body">
       <!-- 左边的表格     -->
       <div class="left-table">
         <slot name="left-table"/>
@@ -29,14 +36,8 @@
 
       <!-- 中间的内容     -->
       <div class="middle">
-        <!-- 中间的图表       -->
-        <div class="middle-charts">
-          <slot name="middle-charts"></slot>
-        </div>
         <!-- 中间的表格      -->
-        <div class="middle-table">
-          <slot name="middle-table"/>
-        </div>
+        <slot name="middle-table"/>
       </div>
 
       <!-- 右边的表格     -->
@@ -54,9 +55,8 @@ import DataViewHeaderBg from '@/assets/images/data-view-header-bg.png'
 import ICUNFullscreen from '@/assets/images/ic_unfullscreen.png'
 import { getWeek, parseTime } from '@/utils/ruoyi'
 
-
 export default {
-  components: {  },
+  components: {},
   props: {
     // 左上角的标识
     identifier: {
@@ -76,13 +76,13 @@ export default {
       ICUNFullscreen,
       DataViewBG,
       DataViewHeaderBg,
-      date: parseTime(new Date(), `{y}-{m}-{d} {h}:{i}:{s}`) + " " + getWeek()
+      date: parseTime(new Date(), `{y}-{m}-{d} {h}:{i}:{s}`) + ' ' + getWeek()
     }
   },
   mounted() {
     // 每秒更新一次时间
     setInterval(() => {
-      this.date = parseTime(new Date(), `{y}-{m}-{d} {h}:{i}:{s}`) + " " + getWeek()
+      this.date = parseTime(new Date(), `{y}-{m}-{d} {h}:{i}:{s}`) + ' ' + getWeek()
     }, 1000)
   }
 }
@@ -142,37 +142,36 @@ export default {
 
 }
 
-.data-view-body {
+.data-view-charts-body {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  margin-top: 40px;
-  padding: 0 20px 0 20px;
+  margin-top: 10px;
+  width: 75vw;
+  align-self: center;
 }
 
-.left-table {
-  width: 23.5%;
-}
-
-.middle {
-  width: 50%;
+.data-view-tables-body {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-top: 30px;
+  padding: 0 20px 20px 20px;
+  overflow: hidden;
+  height: 100%;
 
-  .middle-charts {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
+  .left-table {
+    width: 23.5%;
   }
 
-  .middle-table {
-    margin-top: max(0.5vh, 25px);
+  .middle {
+    width: 50%;
   }
 
-}
-
-
-.right-table {
-  width: 23.5%;
+  .right-table {
+    width: 23.5%;
 
+  }
 }
 
 </style>
diff --git a/src/views/data-view/components/data-view-table.vue b/src/views/data-view/components/data-view-table.vue
index 9ff6002..db1882b 100644
--- a/src/views/data-view/components/data-view-table.vue
+++ b/src/views/data-view/components/data-view-table.vue
@@ -1,47 +1,51 @@
 <template>
-  <div
-    class="data-view-table"
-    :class="['data-view-table' + '--' + size]"
-  >
-    <div
-      class="data-view-table-header"
-      :style="{ backgroundImage: `url(${DataViewTableHeaderBG})` }"
-    >
-      <span class="YouSheBiaoTiHei header-title">{{ title }}</span>
-    </div>
-    <table class="data-view-table-body">
-      <thead>
-      <tr class="data-view-table-body-header">
-        <th
-          class="data-view-table-body-header-item"
-          v-for="(column, index) of columns"
-          :key="column.key"
-          :style="{width: columnSizes[index] + '%'}"
+  <div class="outside">
+    <div class="backdrop">
+      <div
+        class="data-view-table"
+        :class="['data-view-table' + '--' + size]"
+      >
+        <div
+          class="data-view-table-header"
+          :style="{ backgroundImage: `url(${DataViewTableHeaderBG})` }"
         >
-          {{ column.label }}
-        </th>
-      </tr>
-      </thead>
-      <tbody ref="tbody" @mouseout="mouseleave" @mouseover="mouseenter">
-      <tr
-        v-for="(item, index) in data"
-        :key="index"
-        class="data-view-table-body-item"
-        :class="[
+          <span class="YouSheBiaoTiHei header-title">{{ title }}</span>
+        </div>
+        <table class="data-view-table-body">
+          <thead>
+          <tr class="data-view-table-body-header">
+            <th
+              class="data-view-table-body-header-item"
+              v-for="(column, index) of columns"
+              :key="column.key"
+              :style="{width: columnSizes[index] + '%'}"
+            >
+              {{ column.label }}
+            </th>
+          </tr>
+          </thead>
+          <tbody ref="tbody" @mouseout="mouseleave" @mouseover="mouseenter">
+          <tr
+            v-for="(item, index) in data"
+            :key="index"
+            class="data-view-table-body-item"
+            :class="[
           index % 2 === 0 ? 'data-view-table-body-item--odd' : 'data-view-table-body-item--even',
           item.balanceWarning === 1 && 'data-view-table-body-item--warning'
           ]"
-      >
-        <td
-          v-for="(column, index) in columns"
-          :key="column.key"
-          :style="{width: columnSizes[index] + '%'}"
-        >
-          {{ item[column.key] }}
-        </td>
-      </tr>
-      </tbody>
-    </table>
+          >
+            <td
+              v-for="(column, index) in columns"
+              :key="column.key"
+              :style="{width: columnSizes[index] + '%'}"
+            >
+              {{ item[column.key] }}
+            </td>
+          </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -125,8 +129,25 @@ export default {
 </script>
 <style scoped lang="scss">
 
-.data-view-table {
 
+.outside {
+  height: 100%;
+}
+.backdrop {
+  width: 100%;
+  height: 100%;
+  /* 创建渐变色背景 */
+  background-image: linear-gradient(10.29deg, rgba(40, 85, 216, 0.8) 7.69%, rgba(17, 48, 128, 0) 63.53%);;
+  padding-left: 1px;
+  padding-right: 1px;
+  padding-bottom: 1px;
+}
+
+.data-view-table {
+  background-color: #081a2c;
+  height: 100%;
+  overflow: hidden;
+  background-image: linear-gradient(10.29deg, rgb(56 87 174 / 12%) 7.69%, rgba(17, 48, 128, 0) 63.53%);;
 
   table {
     /*设置相邻单元格的边框间的距离*/
@@ -136,20 +157,16 @@ export default {
     text-align: center;
   }
 
-  table tbody {
-    display: block;
-    overflow-y: scroll;
-  }
-
   table tbody::-webkit-scrollbar {
     display: none; /* Chrome Safari */
   }
 
-  table tbody {
+  table > tbody {
     scrollbar-width: none; /* firefox */
     -ms-overflow-style: none; /* IE 10+ */
     overflow-x: hidden;
-    overflow-y: auto;
+    overflow-y: scroll;
+    height: 48vh;
   }
 
   .data-view-table-body {
@@ -239,21 +256,6 @@ export default {
 
 }
 
-.data-view-table--large {
-
-  table tbody {
-    height: 40vh;
-  }
-
-}
-
-.data-view-table--middle {
-
-  table tbody {
-    height: 65vh;
-  }
-
-}
 
 .data-view-table-body-header {
 
diff --git a/src/views/data-view/data-view.vue b/src/views/data-view/data-view.vue
index bf25d59..d3ff050 100644
--- a/src/views/data-view/data-view.vue
+++ b/src/views/data-view/data-view.vue
@@ -6,6 +6,14 @@
     @leave="handleLeave"
     ref="layout"
   >
+
+    <template #charts>
+      <data-view-echart :config="chart1"/>
+      <data-view-echart :config="chart2"/>
+      <data-view-echart :config="chart3"/>
+      <data-view-echart :config="chart4"/>
+    </template>
+
     <template #left-table>
       <data-view-table
         title="商户数据"
@@ -23,13 +31,6 @@
       />
     </template>
 
-    <template #middle-charts>
-      <data-view-echart :config="chart1"/>
-      <data-view-echart :config="chart2"/>
-      <data-view-echart :config="chart3"/>
-      <data-view-echart :config="chart4"/>
-    </template>
-
     <template #middle-table>
       <data-view-table
         title="在线卡数据"
@@ -74,7 +75,7 @@ import DataViewLayout from './components/data-view-layout.vue'
 import icon from '@/assets/logo/plain.png'
 import DataViewTable from './components/data-view-table.vue'
 import { amountFormat, amountFriendlyFormat, sortBy } from '@/utils/ruoyi'
-import screenfull from 'screenfull';
+import screenfull from 'screenfull'
 
 export default {
   components: { DataViewTable, DataViewLayout, DataViewEchart },
@@ -92,9 +93,9 @@ export default {
       chart1: {
         value: 0,
         total: 0,
-        unit: "单",
+        unit: '单',
         // 进度条主色(渐变色), 由左到右
-        progressBar: ["#4494FF", '#B04BFF'],
+        progressBar: ['#4494FF', '#B04BFF'],
         // 进度条背景色
         progressBarBG: '#091560',
         // 两边透明的圆边颜色, 第一个浅色, 第二个深色
@@ -110,13 +111,13 @@ export default {
         // 数值文字
         valueLabel: '代收成功单数',
         // 总数值文字
-        totalLabel: '总订单：0',
+        totalLabel: '总订单：0'
       },
       chart2: {
         value: 0,
         total: 0,
-        unit: "元",
-        progressBar: ["#4494FF", '#B04BFF'],
+        unit: '元',
+        progressBar: ['#4494FF', '#B04BFF'],
         progressBarBG: '#091560',
         circle2Color: ['#168FFF00', '#168FFF'],
         innerCircle: ['#082863', '#082863', '#8000FF68'],
@@ -124,13 +125,13 @@ export default {
         shadowColor: '#2d68ffc4',
         scaleColor: '#6DCBFF',
         valueLabel: '代收成功金额',
-        totalLabel: '总金额：0',
+        totalLabel: '总金额：0'
       },
       chart3: {
         value: 0,
         total: 0,
-        unit: "单",
-        progressBar: ["#4494FF", '#EFA83E'],
+        unit: '单',
+        progressBar: ['#42EA9A', '#EFA83E'],
         progressBarBG: '#0A2F28',
         circle2Color: ['#30BE7900', '#30BE79'],
         innerCircle: ['#2EB87642', '#2EB87642', '#2AA56C'],
@@ -138,13 +139,13 @@ export default {
         shadowColor: '#30C17Bc4',
         scaleColor: '#6DCBFF',
         valueLabel: '代付成功单数',
-        totalLabel: '总金额：0',
+        totalLabel: '总金额：0'
       },
       chart4: {
         value: 0,
         total: 0,
-        unit: "元",
-        progressBar: ["#4494FF", '#EFA83E'],
+        unit: '元',
+        progressBar: ['#42EA9A', '#EFA83E'],
         progressBarBG: '#0A2F28',
         circle2Color: ['#30BE7900', '#30BE79'],
         innerCircle: ['#2EB87642', '#2EB87642', '#2AA56C'],
@@ -152,13 +153,21 @@ export default {
         shadowColor: '#30C17Bc4',
         scaleColor: '#6DCBFF',
         valueLabel: '代付成功金额',
-        totalLabel: '总金额：0',
+        totalLabel: '总金额：0'
       },
       ws: null,
-      isScreenFull: false,
+      isScreenFull: false
     }
   },
   mounted() {
+    if (this.$route.query.fullscreen) {
+      this.isScreenFull = true
+      setTimeout(() => {
+        this.$nextTick(() => {
+          screenfull.request()
+        })
+      })
+    }
     this.connectWS()
   },
   methods: {
@@ -196,7 +205,7 @@ export default {
         const chart1Total = amountFriendlyFormat(statisticsPush.payTotalQty)
         const chart1Value = amountFriendlyFormat(statisticsPush.paySuccessQty, chart1Total.unit)
         this.chart1.value = chart1Value.amount
-        this.chart1.unit = chart1Value.unit + "单"
+        this.chart1.unit = chart1Value.unit + '单'
         this.chart1.total = chart1Total.amount
         this.chart1.totalLabel = '总订单：' + chart1Total.display
 
@@ -205,25 +214,24 @@ export default {
         const chart2Total = amountFriendlyFormat(payTotalAmount)
         const chart2Value = amountFriendlyFormat(paySuccessAmount, chart2Total.unit)
         this.chart2.value = chart2Value.amount
-        this.chart2.unit = chart2Value.unit + "元"
+        this.chart2.unit = chart2Value.unit + '元'
         this.chart2.total = chart2Total.amount
         this.chart2.totalLabel = '总金额：' + chart2Total.display
 
-
-        const chart3Total = amountFriendlyFormat(statisticsPush.transferSuccessQty)
-        const chart3Value = amountFriendlyFormat(statisticsPush.transferTotalQty, chart3Total.unit)
+        const chart3Total = amountFriendlyFormat(statisticsPush.transferTotalQty)
+        const chart3Value = amountFriendlyFormat(statisticsPush.transferSuccessQty, chart3Total.unit)
         this.chart3.value = chart3Value.amount
-        this.chart3.unit = chart3Value.unit + "单"
+        this.chart3.unit = chart3Value.unit + '单'
         this.chart3.total = chart3Total.amount
         this.chart3.totalLabel = '总订单：' + chart3Total.display
 
-
         const transferSuccessAmount = statisticsPush.transferSuccessAmount
         const transferTotalAmount = statisticsPush.transferTotalAmount
         const chart4Total = amountFriendlyFormat(transferTotalAmount)
         const chart4Value = amountFriendlyFormat(transferSuccessAmount, chart4Total.unit)
+
         this.chart4.value = chart4Value.amount
-        this.chart4.unit = chart4Value.unit + "元"
+        this.chart4.unit = chart4Value.unit + '元'
         this.chart4.total = chart4Total.amount
         this.chart4.totalLabel = '总金额：' + chart4Total.display
 
@@ -232,11 +240,11 @@ export default {
         this.data1 = pushMerchant.map(i => {
           return {
             username: i.username,
-            balance: amountFormat({ amount: i.balance }) || "0",
-            residueBalance: amountFormat({ amount: i.residueBalance }) || "0",
-            collectionSuccessPrice: amountFormat({ amount: i.collectionSuccessPrice }) || "0",
-            percentage: (i.percentage * 100).toFixed(2) + "%",
-            balanceWarning: i.balanceWarning,
+            balance: amountFormat({ amount: i.balance }) || '0',
+            residueBalance: amountFormat({ amount: i.residueBalance }) || '0',
+            collectionSuccessPrice: amountFormat({ amount: i.collectionSuccessPrice }) || '0',
+            percentage: (i.percentage * 100).toFixed(2) + '%',
+            balanceWarning: i.balanceWarning
           }
         })
         this.data1 = sortBy(this.data1, 'balanceWarning')
@@ -245,14 +253,14 @@ export default {
         // 在线卡数据
         this.data2 = card.map(i => {
           return {
-            bankName: i.bankName + '/' + "**** " + i.cardNumber.slice(-4),
+            bankName: i.bankName + '/' + '**** ' + i.cardNumber.slice(-4),
             cardHolder: i.cardHolder,
             username: i.username,
-            todayIncomeReceived: amountFormat({ amount: i.todayIncomeReceived }) || "0",
-            todayRemainingAmount: amountFormat({ amount: i.todayRemainingAmount }) || "0",
-            todayOutNumber: i.todayOutNumber + '/' + amountFormat({ amount: i.todayOutReceived }) || "0",
-            remainingAmount: amountFormat({ amount: i.remainingAmount }) || "0",
-            balanceWarning: i.balanceWarning,
+            todayIncomeReceived: amountFormat({ amount: i.todayIncomeReceived }) || '0',
+            todayRemainingAmount: amountFormat({ amount: i.todayRemainingAmount }) || '0',
+            todayOutNumber: i.todayOutNumber + '/' + amountFormat({ amount: i.todayOutReceived }) || '0',
+            remainingAmount: amountFormat({ amount: i.remainingAmount }) || '0',
+            balanceWarning: i.balanceWarning
           }
         })
         this.data2 = sortBy(this.data2, 'balanceWarning')
@@ -261,18 +269,24 @@ export default {
         this.data3 = carddealer.map(i => {
           return {
             username: i.username,
-            dayMargin: (amountFormat({ amount: i.dayMargin }) || "0") + (amountFormat({ amount: i.margin }) || "0"),
-            toDayTotal: amountFormat({ amount: i.toDayTotal }) || "0",
-            turnoverRate: (i.turnoverRate * 100).toFixed(2) + "%",
-            balanceWarning: i.balanceWarning,
+            dayMargin: (amountFormat({ amount: i.dayMargin }) || '0') + '/' + (amountFormat({ amount: i.margin }) || '0'),
+            toDayTotal: amountFormat({ amount: i.toDayTotal }) || '0',
+            turnoverRate: (i.turnoverRate * 100).toFixed(2) + '%',
+            balanceWarning: i.balanceWarning
           }
         })
         this.data3 = sortBy(this.data3, 'balanceWarning')
         this.data3 = this.data3.slice(0, 10)
 
-        this.$refs.table1.scrollReset();
-        this.$refs.table2.scrollReset();
-        this.$refs.table3.scrollReset();
+        this.$refs.table1.scrollReset()
+        this.$refs.table2.scrollReset()
+        this.$refs.table3.scrollReset()
+
+        const audio = new Audio('/alarm.mp3')
+        const hasBalanceWarning = this.data1.some(i => i.balanceWarning) || this.data2.some(i => i.balanceWarning) || this.data3.some(i => i.balanceWarning)
+        if (hasBalanceWarning) {
+          audio.play()
+        }
       }
     },
     /**
@@ -284,7 +298,7 @@ export default {
       } else {
         screenfull.request(this.$refs.layout.$el)
       }
-      this.isScreenFull = !this.isScreenFull;
+      this.isScreenFull = !this.isScreenFull
     },
     disconnect() {
       this.ws?.send({ 'type': 'del_push' })
diff --git a/vue.config.js b/vue.config.js
index 48ad6c0..ca7e242 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,5 +1,6 @@
 'use strict'
 const path = require('path')
+const FileManagerPlugin = require('filemanager-webpack-plugin')
 
 function resolve(dir) {
   return path.join(__dirname, dir)
@@ -166,6 +167,36 @@ module.exports = {
             from: path.resolve(__dirname, './public/robots.txt'), //防爬虫文件
             to: './' //到根目录下
           }
+          config.plugin('fileManager')
+            .use(FileManagerPlugin)
+            .tap(args => {
+              let env = process.env["ENV"];
+              const fileName = env === 'production' ? '生产环境' : '开发环境'
+              const disDir = 'dist'
+
+              // 获取当前时间的可读
+              const date = new Date()
+              const year = date.getFullYear()
+              const month = date.getMonth() + 1
+              const day = date.getDate()
+              const hour = date.getHours()
+              const minute = date.getMinutes()
+              const second = date.getSeconds()
+              const zipFileName = `卡卡管理后台-${fileName}-${year}-${month}-${day}-${hour}-${minute}-${second}`
+
+              return [
+                {
+                  events: {
+                    onEnd: {
+                      archive: [ // 选择文件夹将之打包成xxx.zip并放在根目录
+                        {source: `./${disDir}`, destination: `./archives/${zipFileName}.zip`}
+                      ]
+                    }
+                  }
+                }
+              ]
+            })
+
         }
       )
   }