Merge branch 'master' of http://git.weirui0755.com/jack/kakapay

src/utils/ruoyi.js

@@ -390,6 +390,43 @@ export const amountFormat = (o) => {
   return amount;
 }
 
+/**
+ * 格式化金额, 自动进万, 百万
+ * @param amount
+ * @param unit
+ */
+export function amountFriendlyFormat(amount, unit) {
+  // 百万
+  if (amount >= 1000000 || unit === '百万') {
+    return {
+      unit: '百万',
+      amount: amount / 1000000,
+      display: `${amount / 1000000}百万`
+    }
+  }
+  // 万
+  if (amount >= 10000 || unit === '万') {
+    return {
+      unit: '万',
+      amount: amount / 10000,
+      display: `${amount / 10000}万`
+    }
+  }
+  // 百
+  if (amount >= 100 || unit === '百') {
+    return {
+      unit: '百',
+      amount: amount / 100,
+      display: `${amount / 100}百`
+    }
+  }
+  return {
+    unit: '',
+    amount: amount,
+    display: amount
+  };
+}
+
 /**
  * sortBy
  */

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

@@ -21,7 +21,7 @@ export default {
         })
       },
       immediate: true,
-      deep: true,
+      deep: true
     }
   },
   data() {
@@ -31,7 +31,7 @@ export default {
   },
   computed: {
     option() {
-      let percent = 0;
+      let percent = 0
       if (this.config.total === 0) {
         percent = 0
       } else {
@@ -203,13 +203,13 @@ export default {
                 shadowColor: this.config.shadowColor,
                 shadowBlur: 25,
                 shadowOffsetX: 0,
-                shadowOffsetY: -25
+                shadowOffsetY: -15
               }
             }]
           },
           // 阴影的边框(中间)
           {
-            name: '内部透明起始结束的圆边',
+            name: '阴影的边框(中间)',
             type: 'gauge',
             center: center,
             radius: '70%',
@@ -217,26 +217,26 @@ export default {
               lineStyle: {
                 color: [
                   // 右/下/左/上
-                  [0.4, new echarts.graphic.LinearGradient(
+                  [
-                    1, 0, 0, 0,
+                    0.6,
-                    [{
+                    new echarts.graphic.LinearGradient(
-                      offset: 0,
+                      0, 0, 1, 0,
-                      color: this.config.opacityBorder[0]
+                      [
-                    }, {
+                        {
-                      offset: 1,
+                          offset: 0.2,
-                      color: this.config.opacityBorder[1]
+                          color: this.config.opacityBorder[0]
-                    }]
+                        },
-                  )],
+                        {
-                  [0.6, new echarts.graphic.LinearGradient(
+                          offset: 0.7,
-                    1, 0, 0, 0,
+                          color: this.config.opacityBorder[1]
-                    [{
+                        },
-                      offset: 0,
+                        {
-                      color: this.config.opacityBorder[0]
+                          offset: 1,
-                    }, {
+                          color: this.config.opacityBorder[0]
-                      offset: 1,
+                        }
-                      color: this.config.opacityBorder[0]
+                      ]
-                    }]
+                    )
-                  )]
+                  ]
                 ],
                 width: 2
               }

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

@@ -87,7 +87,7 @@ export default {
   }
 }
 </script>
-<style scoped>
+<style scoped lang="scss">
 .data-view {
   height: 100vh;
   width: 100vw;
@@ -96,83 +96,83 @@ export default {
   display: flex;
   flex-direction: column;
 
-  .data-view-header {
+}
-    display: flex;
-    justify-content: space-between;
-    background-size: contain;
-    background-repeat: no-repeat;
-    height: 6vw;
-    padding: 0 20px 0 20px;
-
-    .data-view-header-item {
-      width: 33%;
-    }
-
-    .identifier {
-      font-family: 'PingFang SC';
-      font-style: normal;
-      font-weight: 500;
-      font-size: 24px;
-      line-height: 25px;
-      color: #FFFFFF;
-      display: flex;
-      flex-direction: row;
-      margin-top: 14px;
-    }
-
-    .data-view-header-time {
-      font-family: 'PingFang SC';
-      font-style: normal;
-      font-weight: 500;
-      font-size: 18px;
-      line-height: 25px;
-      color: #FFFFFF;
-      display: flex;
-      flex-direction: row;
-      margin-top: 14px;
-      justify-content: flex-end;
-    }
 
-    .data-view-header-title {
+.data-view-header {
-      color: #D4DCFF;
+  display: flex;
-      font-size: 2.5vw;
+  justify-content: space-between;
-    }
+  background-size: contain;
+  background-repeat: no-repeat;
+  height: 6vw;
+  padding: 0 20px 0 20px;
 
+  .data-view-header-item {
+    width: 33%;
   }
 
-  .data-view-body {
+  .identifier {
+    font-family: 'PingFang SC';
+    font-style: normal;
+    font-weight: 500;
+    font-size: 24px;
+    line-height: 25px;
+    color: #FFFFFF;
     display: flex;
     flex-direction: row;
-    justify-content: space-between;
+    margin-top: 14px;
-    margin-top: 40px;
-    padding: 0 20px 0 20px;
   }
 
-  .left-table {
+  .data-view-header-time {
-    width: 23.5%;
+    font-family: 'PingFang SC';
+    font-style: normal;
+    font-weight: 500;
+    font-size: 18px;
+    line-height: 25px;
+    color: #FFFFFF;
+    display: flex;
+    flex-direction: row;
+    margin-top: 14px;
+    justify-content: flex-end;
   }
 
-  .middle {
+  .data-view-header-title {
-    width: 50%;
+    color: #D4DCFF;
+    font-size: 2.5vw;
+  }
 
-    .middle-charts {
+}
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-    }
 
-    .middle-table {
+.data-view-body {
-      margin-top: 0.5vh;
+  display: flex;
-    }
+  flex-direction: row;
+  justify-content: space-between;
+  margin-top: 40px;
+  padding: 0 20px 0 20px;
+}
 
-  }
+.left-table {
+  width: 23.5%;
+}
 
+.middle {
+  width: 50%;
 
-  .right-table {
+  .middle-charts {
-    width: 23.5%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
 
+  .middle-table {
+    margin-top: max(0.5vh, 25px);
   }
+
 }
 
 
+.right-table {
+  width: 23.5%;
+
+}
+
 </style>

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

@@ -98,7 +98,7 @@ export default {
   },
   methods: {
     scrollReset() {
-      this.$refs.tbody.scroll({top: 0, behavior: "smooth"})
+      // this.$refs.tbody.scroll({top: 0, behavior: "smooth"})
     },
     mouseleave() {
       this.scroll()
@@ -107,18 +107,18 @@ export default {
       clearTimeout(this.timer)
     },
     scroll() {
-      const tbody = this.$refs.tbody
+      // const tbody = this.$refs.tbody
-      if ((tbody.clientHeight + tbody.scrollTop) < tbody.scrollHeight) {
+      // if ((tbody.clientHeight + tbody.scrollTop) < tbody.scrollHeight) {
-        clearInterval(this.timer)
+      //   clearInterval(this.timer)
-        this.timer = setInterval(() => {
+      //   this.timer = setInterval(() => {
-          const remainScrollTop = tbody.scrollHeight - (tbody.clientHeight + tbody.scrollTop)
+      //     const remainScrollTop = tbody.scrollHeight - (tbody.clientHeight + tbody.scrollTop)
-          tbody.scrollTop += 1
+      //     tbody.scrollTop += 1
-          if (tbody.scrollTop >= remainScrollTop) {
+      //     if (tbody.scrollTop >= remainScrollTop) {
-            tbody.scrollTop = 0;
+      //       tbody.scrollTop = 0;
-          }
+      //     }
-        }, 50)
+      //   }, 50)
-
+      //
-      }
+      // }
     }
   }
 }
@@ -127,36 +127,6 @@ export default {
 
 .data-view-table {
 
-  .data-view-table-header {
-    height: 51px;
-    align-items: center;
-    padding-left: 28px;
-    display: flex;
-    flex-direction: row;
-    background-size: cover;
-    background-repeat: no-repeat;
-
-    .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 */
-      text-transform: uppercase;
-      color: #FFFFFF;
-    }
-
-  }
 
   table {
     /*设置相邻单元格的边框间的距离*/
@@ -237,6 +207,38 @@ export default {
   }
 }
 
+
+.data-view-table-header {
+  height: 51px;
+  align-items: center;
+  padding-left: 28px;
+  display: flex;
+  flex-direction: row;
+  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 */
+    text-transform: uppercase;
+    color: #FFFFFF;
+  }
+
+}
+
 .data-view-table--large {
 
   table tbody {

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

@@ -73,7 +73,7 @@ import DataViewEchart from './components/data-view-echart.vue'
 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, sortBy } from '@/utils/ruoyi'
+import { amountFormat, amountFriendlyFormat, sortBy } from '@/utils/ruoyi'
 import screenfull from 'screenfull';
 
 export default {
@@ -104,7 +104,7 @@ export default {
         // 透明边框的颜色, 数组第一个为浅色, 第二个为深色
         opacityBorder: ['rgba(0, 0, 0, 0)', 'rgba(45, 103, 252, 1)'],
         // 投影颜色
-        shadowColor: '#2D68FF',
+        shadowColor: '#2d68ffc4',
         // 刻度颜色
         scaleColor: '#6DCBFF',
         // 数值文字
@@ -121,7 +121,7 @@ export default {
         circle2Color: ['#168FFF00', '#168FFF'],
         innerCircle: ['#082863', '#082863', '#8000FF68'],
         opacityBorder: ['rgba(0, 0, 0, 0)', 'rgba(45, 103, 252, 1)'],
-        shadowColor: '#2D68FF',
+        shadowColor: '#2d68ffc4',
         scaleColor: '#6DCBFF',
         valueLabel: '代收成功金额',
         totalLabel: '总金额：0',
@@ -135,7 +135,7 @@ export default {
         circle2Color: ['#30BE7900', '#30BE79'],
         innerCircle: ['#2EB87642', '#2EB87642', '#2AA56C'],
         opacityBorder: ['rgba(0, 0, 0, 0)', '#30C17B'],
-        shadowColor: '#30C17B',
+        shadowColor: '#30C17Bc4',
         scaleColor: '#6DCBFF',
         valueLabel: '代付成功单数',
         totalLabel: '总金额：0',
@@ -149,7 +149,7 @@ export default {
         circle2Color: ['#30BE7900', '#30BE79'],
         innerCircle: ['#2EB87642', '#2EB87642', '#2AA56C'],
         opacityBorder: ['rgba(0, 0, 0, 0)', '#30C17B'],
-        shadowColor: '#30C17B',
+        shadowColor: '#30C17Bc4',
         scaleColor: '#6DCBFF',
         valueLabel: '代付成功金额',
         totalLabel: '总金额：0',
@@ -192,23 +192,40 @@ export default {
         // transferSuccessQty	代付成功订单数
         // transferSuccessAmount	代付成功金额
         // transferTotalAmount	代付总金额
-        console.log("statisticsPush", statisticsPush)
 
-        this.chart1.value = statisticsPush.paySuccessQty
+        const chart1Total = amountFriendlyFormat(statisticsPush.payTotalQty)
-        this.chart1.total = statisticsPush.payTotalQty
+        const chart1Value = amountFriendlyFormat(statisticsPush.paySuccessQty, chart1Total.unit)
-        this.chart1.totalLabel = '总订单：' + statisticsPush.payTotalQty
+        this.chart1.value = chart1Value.amount
+        this.chart1.unit = chart1Value.unit + "单"
+        this.chart1.total = chart1Total.amount
+        this.chart1.totalLabel = '总订单：' + chart1Total.display
 
-        this.chart2.value = this.NumberDiv(statisticsPush.paySuccessAmount, 100)
+        const payTotalAmount = this.NumberDiv(statisticsPush.payTotalAmount, 100)
-        this.chart2.total = this.NumberDiv(statisticsPush.payTotalAmount, 100)
+        const paySuccessAmount = this.NumberDiv(statisticsPush.paySuccessAmount, 100)
-        this.chart2.totalLabel = '总金额：' + this.NumberDiv(statisticsPush.payTotalAmount, 100)
+        const chart2Total = amountFriendlyFormat(payTotalAmount)
+        const chart2Value = amountFriendlyFormat(paySuccessAmount, chart2Total.unit)
+        this.chart2.value = chart2Value.amount
+        this.chart2.unit = chart2Value.unit + "元"
+        this.chart2.total = chart2Total.amount
+        this.chart2.totalLabel = '总金额：' + chart2Total.display
 
-        this.chart3.value = statisticsPush.transferSuccessQty
-        this.chart3.total = statisticsPush.transferTotalQty
-        this.chart3.totalLabel = '总订单：' + statisticsPush.transferTotalQty
 
-        this.chart4.value = this.NumberDiv(statisticsPush.transferSuccessAmount, 100)
+        const chart3Total = amountFriendlyFormat(statisticsPush.transferSuccessQty)
-        this.chart4.total = this.NumberDiv(statisticsPush.transferTotalAmount, 100)
+        const chart3Value = amountFriendlyFormat(statisticsPush.transferTotalQty, chart3Total.unit)
-        this.chart4.totalLabel = '总金额：' + this.NumberDiv(statisticsPush.transferTotalAmount, 100)
+        this.chart3.value = chart3Value.amount
+        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.total = chart4Total.amount
+        this.chart4.totalLabel = '总金额：' + chart4Total.display
 
         const pushMerchant = JSON.parse(data.value.pushMerchant)
         // 商户数据
@@ -223,6 +240,8 @@ export default {
           }
         })
         this.data1 = sortBy(this.data1, 'balanceWarning')
+        this.data1 = this.data1.slice(0, 10)
+
         // 在线卡数据
         this.data2 = card.map(i => {
           return {
@@ -237,6 +256,7 @@ export default {
           }
         })
         this.data2 = sortBy(this.data2, 'balanceWarning')
+        this.data2 = this.data2.slice(0, 10)
         // 在线卡商数据
         this.data3 = carddealer.map(i => {
           return {
@@ -248,6 +268,7 @@ export default {
           }
         })
         this.data3 = sortBy(this.data3, 'balanceWarning')
+        this.data3 = this.data3.slice(0, 10)
 
         this.$refs.table1.scrollReset();
         this.$refs.table2.scrollReset();