chore: 优化样式

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();

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
   }
 ]
 

src/views/data-view/data-view.vue

@@ -75,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 },
@@ -93,9 +93,9 @@ export default {
       chart1: {
         value: 0,
         total: 0,
-        unit: "单",
+        unit: '单',
         // 进度条主色(渐变色), 由左到右
-        progressBar: ["#4494FF", '#B04BFF'],
+        progressBar: ['#4494FF', '#B04BFF'],
         // 进度条背景色
         progressBarBG: '#091560',
         // 两边透明的圆边颜色, 第一个浅色, 第二个深色
@@ -111,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'],
@@ -125,13 +125,13 @@ export default {
         shadowColor: '#2d68ffc4',
         scaleColor: '#6DCBFF',
         valueLabel: '代收成功金额',
-        totalLabel: '总金额：0',
+        totalLabel: '总金额：0'
       },
       chart3: {
         value: 0,
         total: 0,
-        unit: "单",
-        progressBar: ["#42EA9A", '#EFA83E'],
+        unit: '单',
+        progressBar: ['#42EA9A', '#EFA83E'],
         progressBarBG: '#0A2F28',
         circle2Color: ['#30BE7900', '#30BE79'],
         innerCircle: ['#2EB87642', '#2EB87642', '#2AA56C'],
@@ -139,13 +139,13 @@ export default {
         shadowColor: '#30C17Bc4',
         scaleColor: '#6DCBFF',
         valueLabel: '代付成功单数',
-        totalLabel: '总金额：0',
+        totalLabel: '总金额：0'
       },
       chart4: {
         value: 0,
         total: 0,
-        unit: "元",
-        progressBar: ["#42EA9A", '#EFA83E'],
+        unit: '元',
+        progressBar: ['#42EA9A', '#EFA83E'],
         progressBarBG: '#0A2F28',
         circle2Color: ['#30BE7900', '#30BE79'],
         innerCircle: ['#2EB87642', '#2EB87642', '#2AA56C'],
@@ -153,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: {
@@ -197,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
 
@@ -206,15 +214,14 @@ 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.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
 
@@ -224,7 +231,7 @@ export default {
         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
 
@@ -233,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')
@@ -246,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')
@@ -262,23 +269,23 @@ 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 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();
+        if (hasBalanceWarning) {
+          audio.play()
         }
       }
     },
@@ -291,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' })