perf: 优化数据看板样式

src/utils/ruoyi.js

@@ -365,30 +365,38 @@ export function toFixedWithOutRounded(num, s) {
  * @return {string | number}
  */
 export const amountFormat = (o) => {
-  if (o.amount === undefined || o.amount === null) {
-    return o.amount;
-  }
-  let amount = o.amount;
-  // 如果 amount 是字符串, 则转换为数字
-  if (typeof amount === 'string') {
-    amount = parseFloat(amount);
-  }
-  let precision = o.precision || 100;
-  let thousand = o.thousand === undefined ? true : o.thousand;
-  let decimal = o.decimal === undefined ? true : o.decimal;
-  let decimalLength = o.decimalLength || 2;
-  let decimalSeparator = o.decimalSeparator || '.';
-  let thousandSeparator = o.thousandSeparator || ',';
-  amount = amount / precision;
-  amount = toFixedWithOutRounded(amount, decimalLength);
-  if (thousand) {
-    amount = amount.replace(/(\d)(?=(\d{3})+\.)/g, '$1' + thousandSeparator);
+  // 默认参数值
+  const {
+    amount,
+    precision = 100,
+    thousand = true,
+    decimal = true,
+    decimalLength = 2,
+    decimalSeparator = '.',
+    thousandSeparator = ','
+  } = o;
+
+  // 将金额转换为数字类型
+  const numAmount = typeof amount === 'string' ? parseFloat(amount) : amount;
+  if (isNaN(numAmount)) {
+    return '';
   }
-  if (decimal) {
-    amount = amount.replace('.', decimalSeparator);
+
+  // 根据精度对金额进行四舍五入
+  const roundedAmount = numAmount / precision;
+
+  // 格式化小数部分
+  let formattedAmount = decimal ? roundedAmount.toFixed(decimalLength) : Math.floor(roundedAmount).toString();
+
+  // 添加千分位分隔符
+  if (thousand) {
+    const parts = formattedAmount.split('.');
+    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, thousandSeparator);
+    formattedAmount = parts.join(decimalSeparator);
   }
-  return amount;
-}
+
+  return formattedAmount;
+};
 
 /**
  * 格式化金额, 自动进万, 百万

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

@@ -161,15 +161,15 @@ export default {
   height: 100%;
 
   .left-table {
-    width: 23.5%;
+    width: 32.5%;
   }
 
   .middle {
-    width: 50%;
+    width: 32.5%;
   }
 
   .right-table {
-    width: 23.5%;
+    width: 32.5%;
 
   }
 }

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

@@ -4,6 +4,7 @@
       <div
         class="data-view-table"
         :class="['data-view-table' + '--' + size]"
+        ref="table"
       >
         <div
           class="data-view-table-header"
@@ -24,7 +25,7 @@
             </th>
           </tr>
           </thead>
-          <tbody ref="tbody" @mouseout="mouseleave" @mouseover="mouseenter">
+          <tbody ref="tbody">
           <tr
             v-for="(item, index) in data"
             :key="index"
@@ -39,7 +40,9 @@
               :key="column.key"
               :style="{width: columnSizes[index] + '%'}"
             >
+              <slot :name="column.key" :row="item">
                 {{ item[column.key] }}
+              </slot>
             </td>
           </tr>
           </tbody>
@@ -50,10 +53,8 @@
 </template>
 
 <script>
-import DataViewTableHeaderBGLarge from '@/assets/images/data-view-table-header-bg-large.png'
-import DataViewTableHeaderBGMiddle from '@/assets/images/data-view-table-header-bg-middle.png'
-import DataViewTableHeaderBGPartA from '@/assets/images/data-view-table-header-parta.png'
-import DataViewTableHeaderBGPartB from '@/assets/images/data-view-table-header-partb.png'
+import DataViewTableHeaderBG from '@/assets/images/data-view-table-header-bg.png'
+import { debounce } from '@/utils'
 
 export default {
   components: {},
@@ -74,55 +75,33 @@ export default {
   },
   data() {
     return {
-      DataViewTableHeaderBGLarge,
-      DataViewTableHeaderBGMiddle,
-      DataViewTableHeaderBGPartA,
-      DataViewTableHeaderBGPartB,
-      timer: null,
-    }
-  },
-  computed: {
-    DataViewTableHeaderBG() {
-      if (this.size === 'large') {
-        return DataViewTableHeaderBGLarge
-      } else if (this.size === 'middle') {
-        return DataViewTableHeaderBGMiddle
-      }
+      DataViewTableHeaderBG,
     }
   },
   watch: {
     data: {
-      handler(newValue, oldValue) {
+      handler() {
         this.$nextTick(() => {
-          this.scroll()
+          this.$refs.tbody.style.height = `${this.getHeight()}px`
         })
       },
-      immediate: true
+      deep: true
     }
   },
-  methods: {
-    scrollReset() {
-      // this.$refs.tbody.scroll({top: 0, behavior: "smooth"})
-    },
-    mouseleave() {
-      this.scroll()
+  mounted() {
+    console.log(this.getHeight())
+    window.addEventListener('resize', debounce(() => {
+      this.$refs.tbody.style.height = `${this.getHeight()}px`
+    }))
+    this.$refs.tbody.style.height = `${this.getHeight()}px`
   },
-    mouseenter() {
-      clearTimeout(this.timer)
+  methods: {
+    getHeight() {
+      // 父级高度 - 51(表格头 的高度) - 58(表头 的高度)
+      return this.$refs.table.clientHeight - 58 - 51
     },
-    scroll() {
-      // const tbody = this.$refs.tbody
-      // if ((tbody.clientHeight + tbody.scrollTop) < tbody.scrollHeight) {
-      //   clearInterval(this.timer)
-      //   this.timer = setInterval(() => {
-      //     const remainScrollTop = tbody.scrollHeight - (tbody.clientHeight + tbody.scrollTop)
-      //     tbody.scrollTop += 1
-      //     if (tbody.scrollTop >= remainScrollTop) {
-      //       tbody.scrollTop = 0;
-      //     }
-      //   }, 50)
-      //
-      // }
+    scrollReset() {
+      this.$refs.tbody.scrollTop = 0
     }
   }
 }
@@ -166,7 +145,6 @@ export default {
     -ms-overflow-style: none; /* IE 10+ */
     overflow-x: hidden;
     overflow-y: scroll;
-    height: 48vh;
   }
 
   .data-view-table-body {
@@ -234,19 +212,6 @@ export default {
   background-repeat: no-repeat;
   background-size: 100% 100%;
 
-  .data-view-table-header-parta {
-    width: 350px;
-    height: 100%;
-    background-size: cover;
-    background-repeat: no-repeat;
-  }
-  .data-view-table-header-partb {
-    width: 100%;
-    height: 100%;
-    background-size: cover;
-    background-repeat: no-repeat;
-  }
-
   .header-title {
     font-size: 22px;
     /* identical to box height */

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

@@ -32,25 +32,6 @@
     </template>
 
     <template #middle-table>
-      <data-view-table
-        title="在线卡数据"
-        :columnSizes="[12, 12, 12, 12, 20, 20, 12]"
-        :columns="[
-            {label: '银行名称/卡号', key: 'bankName'},
-            {label: '收款人名称', key: 'cardHolder'},
-            {label: '卡商名称', key: 'username'},
-            {label: '已收款', key: 'todayIncomeReceived'},
-            {label: '剩余收款额度', key: 'todayRemainingAmount'},
-            {label: '出款笔数/金额', key: 'todayOutNumber'},
-            {label: '剩余卡余额', key: 'remainingAmount'},
-          ]"
-        :data="data2"
-        size="large"
-        ref="table2"
-      />
-    </template>
-
-    <template #right-table>
       <data-view-table
         title="在线卡商数据"
         :columnSizes="[25, 25, 25, 25]"
@@ -63,6 +44,31 @@
         :data="data3"
         size="middle"
         ref="table3"
+      >
+        <template #dayMargin="{row}">
+          <div class="day-margin-row">
+            <span>{{ row.dayMargin }}/</span>
+            <span>{{ row.margin }}</span>
+          </div>
+        </template>
+      </data-view-table>
+    </template>
+
+    <template #right-table>
+      <data-view-table
+        title="在线卡数据"
+        :columnSizes="[16.5, 16.5, 16.5, 16.5, 16.5, 16.5]"
+        :columns="[
+            {label: '收款人名称', key: 'cardHolder'},
+            {label: '卡商名称', key: 'username'},
+            {label: '已收款', key: 'todayIncomeReceived'},
+            {label: '剩余收款额度', key: 'todayRemainingAmount'},
+            {label: '剩余卡余额', key: 'remainingAmount'},
+            {label: '通道', key: 'channel'},
+          ]"
+        :data="data2"
+        size="large"
+        ref="table2"
       />
     </template>
   </data-view-layout>
@@ -236,19 +242,21 @@ export default {
         this.chart4.totalLabel = '总金额：' + chart4Total.display
 
         const pushMerchant = JSON.parse(data.value.pushMerchant)
+        const f = (v) => amountFormat({ amount: v, decimal: false, decimalLength: 0 })
+
         // 商户数据
         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',
+            balance: f(i.balance) || '0',
+            residueBalance: f(i.residueBalance) || '0',
+            collectionSuccessPrice: f(i.collectionSuccessPrice) || '0',
             percentage: (i.percentage * 100).toFixed(2) + '%',
             balanceWarning: i.balanceWarning
           }
         })
         this.data1 = sortBy(this.data1, 'balanceWarning')
-        this.data1 = this.data1.slice(0, 10)
+        // this.data1 = this.data1.slice(0, 10)
 
         // 在线卡数据
         this.data2 = card.map(i => {
@@ -256,21 +264,24 @@ export default {
             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: f(i.todayIncomeReceived) || '0',
+            todayRemainingAmount: f(i.todayRemainingAmount) || '0',
+            todayOutNumber: i.todayOutNumber + '/' + f(i.todayOutReceived) || '0',
+            remainingAmount: f(i.remainingAmount) || '0',
+            balanceWarning: i.balanceWarning,
+            channel: i.channelNames.join(',')
           }
         })
         this.data2 = sortBy(this.data2, 'balanceWarning')
         this.data2 = this.data2.slice(0, 10)
+
         // 在线卡商数据
         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',
+            dayMargin: f(i.dayMargin) || '0',
+            margin: f(i.margin) || '0',
+            toDayTotal: f(i.toDayTotal) || '0',
             turnoverRate: (i.turnoverRate * 100).toFixed(2) + '%',
             balanceWarning: i.balanceWarning
           }
@@ -309,7 +320,7 @@ export default {
   }
 }
 </script>
-<style>
+<style lang="scss">
 @font-face {
   font-family: "YouSheBiaoTiHei";
   src: url('../../assets/fonts/YouSheBiaoTiHei.ttf');
@@ -323,4 +334,14 @@ export default {
   font-weight: 400;
 }
 
+.day-margin-row {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+
+  span {
+    white-space: normal;
+  }
+}
+
 </style>