26730

packages/2.0.5/AppMonitoringObject/components/list.vue

@@ -7,11 +7,12 @@
         </template>
       </ai-title>
       <template #blank>
-        <el-row type="flex">
+        <div class="statistics-top">
-          <div class="dataPane" v-for="(op,i) in dataPanes" :key="i">
+          <div class="statistics-top__item" v-for="(item, index) in dataPanes" :key="index">
-            {{ [op.label, op.v].join(" ") }}
+            <span>{{ item.label }}</span>
+            <h2 style="color: #2266FF;">{{ item.v }}</h2>
+          </div>
         </div>
-        </el-row>
         <div class="mainPane">
           <ai-search-bar>
             <template #left>
@@ -141,7 +142,7 @@ export default {
       this.instance.post(`/app/apppreventionreturntopoverty/statistics-list`).then(res => {
         if (res?.data) {
           this.staData = res.data
-          this.staData.jcl = (this.staData.fxxcrs / this.staData.jths).toFixed(2) * 100 + '%'
+          this.staData.jcl = !this.staData.jths ? '0%' : ((this.staData.fxxcrs / this.staData.jths) * 100).toFixed(2) + '%'
         }
       })
     },
@@ -214,6 +215,37 @@ export default {
 <style lang="scss" scoped>
 .list {
   height: 100%;
+    .statistics-top {
+      display: flex;
+      align-items: center;
+      margin-bottom: 20px;
+
+      & > div {
+        flex: 1;
+        height: 96px;
+        line-height: 1;
+        margin-right: 20px;
+        padding: 16px 24px;
+        background: #FFFFFF;
+        box-shadow: 0px 4px 6px -2px rgba(15, 15, 21, 0.15);
+        border-radius: 4px;
+
+        &:last-child {
+          margin-right: 0;
+        }
+
+        h3 {
+          font-size: 24px;
+        }
+
+        span {
+          display: block;
+          margin-bottom: 16px;
+          color: #888888;
+          font-size: 16px;
+        }
+      }
+    }
 
   ::v-deep .dataPane {
     flex: 1;