文字描述

src/utils/util.ts

@@ -399,3 +399,27 @@ export const downloadFile = ({ data, headers }: any, fName: string = '') => {
   a.dispatchEvent(new MouseEvent("click"));
   (window.URL || window.webkitURL).revokeObjectURL(url);
 }
+
+/**
+ *
+ * @param val 处理的数值
+ * @param unit  单位，默认空字符
+ * @param digits  小数，默认1
+ */
+export const formatNumberUnit = (val, unit = '', digits = 1) => {
+  let num = ''
+  let str = ''
+  if (String(val).length < 5) {
+    num = val
+    str = unit
+  } else if (String(val).length < 9) {
+    num = Number((Number(val) / 10000).toFixed(digits)) / 1 + ''
+    str = '万' + unit
+  } else if (String(val).length < 13) {
+    num = Number((Number(val) / 10000 / 10000).toFixed(digits)) / 1 + ''
+    str = '亿' + unit
+  }
+  return {
+    num: num, unit: str
+  }
+}

src/views/staging/zby/left/clue-com.vue

@@ -9,7 +9,29 @@
           {label: '按月', value: '3'},
       ]" padding="3px 12px" v-model:active="dateType"/>
     <div class="statistic">
-      sadasdsd
+      <div class="statistic-item">
+        <div class="num">
+          {{ $util.formatNumberUnit(statisticData.jrxs, '条').num }}
+          <div class="unit">{{ $util.formatNumberUnit(statisticData.jrxs, '条').unit }}</div>
+        </div>
+        <div class="label">今日线索</div>
+      </div>
+      <div class="statistic-item">
+        <div class="num">{{ $util.formatNumberUnit(statisticData.ycz, '条').num }}<div class="unit">{{ $util.formatNumberUnit(statisticData.ycz, '条').unit }}</div></div>
+        <div class="label">已处置</div>
+      </div>
+      <div class="statistic-item">
+        <div class="num">{{ $util.formatNumberUnit(statisticData.wcz, '条').num }}<div class="unit">{{ $util.formatNumberUnit(statisticData.wcz, '条').unit }}</div></div>
+        <div class="label">未处置</div>
+      </div>
+      <div class="statistic-item">
+        <div class="num">{{ $util.formatNumberUnit(statisticData.yff, '条').num }}<div class="unit">{{ $util.formatNumberUnit(statisticData.yff, '条').unit }}</div></div>
+        <div class="label">已分发</div>
+      </div>
+      <div class="statistic-item">
+        <div class="num">{{ $util.formatNumberUnit(statisticData.ypbg, '条').num }}<div class="unit">{{ $util.formatNumberUnit(statisticData.ypbg, '条').unit }}</div></div>
+        <div class="label">研判报告</div>
+      </div>
     </div>
     <div class="list">
       <template v-for="item in list">
@@ -64,10 +86,17 @@ export default defineComponent({
         {type: 2, title: '系统新版本升级V1.1通知', time: '2023-11-01 13:22:33'},
         {type: 1, title: '系统新版本升级V1.1通知', time: '2023-11-01 13:22:33'},
       ],
-      dateType: '1'
+      dateType: '1',
+      statisticData: {
+        jrxs: 1234,
+        ycz: 123400,
+        wcz: 12340000,
+        yff: 123400000,
+        ypbg: 12340000000,
+      }
     })
     return {
-      ...toRefs(state)
+      ...toRefs(state),
     }
   },
 })
@@ -90,6 +119,45 @@ $statisticHeight: 70px;
 .statistic {
   width: 100%;
   height: $statisticHeight;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .statistic-item {
+    width: 65px;
+    height: 55px;
+    background-image: url("@/assets/images/business/clue-bg.png");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .num {
+      position: absolute;
+      top: -5px;
+      font-size: 22px;
+      font-family: cursive;
+      font-weight: bold;
+      color: #10E4E5;
+      display: flex;
+      align-items: flex-end;
+      .unit {
+        font-size: 12px;
+        font-family: Adobe Heiti Std;
+        font-weight: normal;
+        margin-bottom: 3px;
+        margin-left: 6px;
+        word-break: keep-all;
+      }
+    }
+    .label {
+      position: absolute;
+      font-size: 12px;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      color: #FFFFFF;
+    }
+  }
 }
 .list {
   width: 100%;