perf: 优化数据看板样式

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

@@ -16,6 +16,10 @@
           title
         }}</h1>
       <div class="data-view-header-time data-view-header-item">
+        <img @click="$emit('audioStatus')"
+             style="width: 26px; height: 26px; margin-right: 10px;cursor: pointer;"
+             :src="audioIc" alt=""
+        >
         <img @click="$emit('leave')" style="width: 26px; height: 26px; cursor: pointer;" :src="ICUNFullscreen" alt="">
         <div style="width: 26px;"/>
         <span>{{ date }}</span>
@@ -53,6 +57,8 @@
 import DataViewBG from '@/assets/images/data-view-bg.png'
 import DataViewHeaderBg from '@/assets/images/data-view-header-bg.png'
 import ICUNFullscreen from '@/assets/images/ic_unfullscreen.png'
+import icUnMuted from '@/assets/images/un_muted.png'
+import icMuted from '@/assets/images/muted.png'
 import { getWeek, parseTime } from '@/utils/ruoyi'
 
 export default {
@@ -69,6 +75,10 @@ export default {
     // 大标题
     title: {
       type: String
+    },
+    // 大标题
+    isMute: {
+      type: Boolean
     }
   },
   data() {
@@ -79,6 +89,15 @@ export default {
       date: parseTime(new Date(), `{y}-{m}-{d} {h}:{i}:{s}`) + ' ' + getWeek()
     }
   },
+  computed: {
+    audioIc() {
+      if (this.isMute) {
+        return icUnMuted
+      } else {
+        return icMuted
+      }
+    }
+  },
   mounted() {
     // 每秒更新一次时间
     setInterval(() => {
@@ -161,15 +180,15 @@ export default {
   height: 100%;
 
   .left-table {
-    width: 32.5%;
+    width: 32%;
   }
 
   .middle {
-    width: 32.5%;
+    width: 24%;
   }
 
   .right-table {
-    width: 32.5%;
+    width: 41%;
 
   }
 }

src/views/data-view/components/horizontal-scroll-pane.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="horizontal-scroll-pane-container">
+    <div class="horizontal-scroll-pane" ref="flavoursContainer">
+      <slot/>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  components: {},
+  data() {
+    return {}
+  },
+  mounted() {
+    const flavoursContainer = this.$refs.flavoursContainer
+    const flavoursScrollWidth = flavoursContainer.scrollWidth
+
+    // setInterval(() => {
+    //   if (flavoursContainer.scrollLeft < flavoursScrollWidth + flavoursContainer.clientWidth) {
+    //     console.log("flavoursContainer.scrollLeft", flavoursContainer.scrollLeft)
+    //     flavoursContainer.scrollTo(flavoursContainer.scrollLeft + 1, 0)
+    //   } else {
+    //     flavoursContainer.scrollTo(0, 0)
+    //   }
+    // }, 30)
+  }
+}
+</script>
+<style scoped lang="scss">
+.horizontal-scroll-pane-container {
+  width: 100%;
+  overflow: hidden;
+}
+
+.horizontal-scroll-pane {
+  width: 100%;
+  overflow-x: scroll;
+  white-space: nowrap;
+  animation: slide 20s linear infinite;
+  position: relative;
+  padding-right: 20px;
+}
+
+@keyframes slide {
+  0% {
+    left: 0;
+  }
+  25% {
+    left: -100%; /* The image width */
+  }
+  50% {
+    left: 100%; /* The image width */
+  }
+  75% {
+    left: -100%; /* The image width */
+  }
+  100% {
+    left: 0%; /* The image width */
+  }
+}
+
+.horizontal-scroll-pane::-webkit-scrollbar {
+  display: none; /* Chrome Safari */
+}
+
+.horizontal-scroll-pane {
+  scrollbar-width: none; /* firefox */
+  -ms-overflow-style: none; /* IE 10+ */
+  overflow-x: scroll;
+  overflow-y: hidden;
+}
+
+
+</style>

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

@@ -4,6 +4,8 @@
     identifier="KK- MANAGE"
     :icon="icon"
     @leave="handleLeave"
+    @audioStatus="toggleMute"
+    :isMute="isMute"
     ref="layout"
   >
 
@@ -34,12 +36,11 @@
     <template #middle-table>
       <data-view-table
         title="在线卡商数据"
-        :columnSizes="[25, 25, 25, 25]"
+        :columnSizes="[33, 33, 33]"
         :columns="[
             {label: '卡商名称', key: 'username'},
             {label: '押金/剩余额度', key: 'dayMargin'},
             {label: '日总跑量', key: 'toDayTotal'},
-            {label: '押金周转率', key: 'turnoverRate'},
           ]"
         :data="data3"
         size="middle"
@@ -57,19 +58,28 @@
     <template #right-table>
       <data-view-table
         title="在线卡数据"
-        :columnSizes="[16.5, 16.5, 16.5, 16.5, 16.5, 16.5]"
+        :columnSizes="[14.2,14.2,14.2,14.2,14.2,14.2,14.2,]"
         :columns="[
+            {label: '银行名称', key: 'bankName'},
             {label: '收款人名称', key: 'cardHolder'},
             {label: '卡商名称', key: 'username'},
             {label: '已收款', key: 'todayIncomeReceived'},
             {label: '剩余收款额度', key: 'todayRemainingAmount'},
             {label: '剩余卡余额', key: 'remainingAmount'},
-            {label: '通道', key: 'channel'},
+            {label: '通道', key: 'channels'},
           ]"
         :data="data2"
         size="large"
         ref="table2"
-      />
+      >
+        <template #channels="{row}">
+          <horizontal-scroll-pane>
+            <span v-for="channelName of row.channels" :key="channelName">
+              {{ channelName }}
+            </span>
+          </horizontal-scroll-pane>
+        </template>
+      </data-view-table>
     </template>
   </data-view-layout>
 </template>
@@ -82,9 +92,10 @@ 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 HorizontalScrollPane from './components/horizontal-scroll-pane.vue'
 
 export default {
-  components: { DataViewTable, DataViewLayout, DataViewEchart },
+  components: { HorizontalScrollPane, DataViewTable, DataViewLayout, DataViewEchart },
   data() {
     return {
       DataViewBG,
@@ -162,7 +173,9 @@ export default {
         totalLabel: '总金额：0'
       },
       ws: null,
-      isScreenFull: false
+      isScreenFull: false,
+      // 是否静音
+      isMute: localStorage.getItem('isMute') === 'true'
     }
   },
   mounted() {
@@ -177,6 +190,11 @@ export default {
     this.connectWS()
   },
   methods: {
+    // 切换静音状态
+    toggleMute() {
+      this.isMute = !this.isMute
+      localStorage.setItem('isMute', this.isMute)
+    },
     connectWS() {
       this.ws = new WebSocket(`ws://kaka-qws.weirui0755.com/websocket`)
       this.ws.onopen = () => {
@@ -251,7 +269,7 @@ export default {
             balance: f(i.balance) || '0',
             residueBalance: f(i.residueBalance) || '0',
             collectionSuccessPrice: f(i.collectionSuccessPrice) || '0',
-            percentage: (i.percentage * 100).toFixed(2) + '%',
+            percentage: Number.parseInt(i.percentage * 100) + '%',
             balanceWarning: i.balanceWarning
           }
         })
@@ -261,7 +279,7 @@ export default {
         // 在线卡数据
         this.data2 = card.map(i => {
           return {
-            bankName: i.bankName + '/' + '**** ' + i.cardNumber.slice(-4),
+            bankName: i.bankName,
             cardHolder: i.cardHolder,
             username: i.username,
             todayIncomeReceived: f(i.todayIncomeReceived) || '0',
@@ -269,7 +287,7 @@ export default {
             todayOutNumber: i.todayOutNumber + '/' + f(i.todayOutReceived) || '0',
             remainingAmount: f(i.remainingAmount) || '0',
             balanceWarning: i.balanceWarning,
-            channel: i.channelNames.join(',')
+            channels: i.channelNames
           }
         })
         this.data2 = sortBy(this.data2, 'balanceWarning')
@@ -293,12 +311,14 @@ export default {
         this.$refs.table2.scrollReset()
         this.$refs.table3.scrollReset()
 
+        if (this.isMute) {
           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()
           }
         }
+      }
     },
     /**
      * 退出全屏