第一排样式完成

project/biaopin/dv/weiyang/AppDvWeiyang.vue

@@ -1,10 +1,13 @@
 <script>
 import {mapState} from "vuex"
 import SubHeader from "./comps/subHeader.vue";
+import IconStaPanel from "./comps/iconStaPanel.vue";
+import IconSmallPanel from "./comps/iconSmallPanel.vue";
+import ValueUnit from "./comps/valueUnit.vue";
 
 export default {
   name: "AppDvWeiyang",
-  components: {SubHeader},
+  components: {ValueUnit, IconSmallPanel, IconStaPanel, SubHeader},
   label: "未央最新定制大屏",
   props: {
     instance: Function,
@@ -19,10 +22,30 @@ export default {
   computed: {
     ...mapState(["user"]),
     currentAreaId: v => v.areaId || v.user.info.areaId,
-    isLastAreaLevel: v => !/0{3}$/.test(v.currentAreaId)
+    isLastAreaLevel: v => !/0{3}$/.test(v.currentAreaId),
+    areaSta: v => [
+      {label: "社区数", icon: "https://cdn.sinoecare.com/i/2024/09/04/66d80346ec1ea.png", value: 0, unit: "个"},
+      {label: "小区数", icon: "https://cdn.sinoecare.com/i/2024/09/04/66d7fd4c0445d.png", value: 0, unit: "个"},
+      {label: "村数", icon: "https://cdn.sinoecare.com/i/2024/09/04/66d7fd4d28f1b.png", value: 0, unit: "个"},
+    ],
+    workorderSta: v => [
+      {label: "已处理", value: 0, unit: "个"},
+      {label: "办理中", value: 0, unit: "个"},
+      {label: "待受理", value: 0, unit: "个"},
+      {label: "延期", value: 0, unit: "个", isRed: !0},
+    ]
   },
-  mounted() {
+  methods: {
+    getData() {
 
+    },
+    getLabel(key) {
+      return this.dict.getLabel("wyBasicCount", key) || key
+    }
+  },
+  created() {
+    this.dict.load("wyBasicCount")
+    this.getData()
   }
 }
 </script>
@@ -30,7 +53,7 @@ export default {
 <template>
   <section class="AppDvWeiyang" :class="{isLastAreaLevel}">
     <template v-if="isLastAreaLevel">
-      <div class="a"></div>
+      <icon-sta-panel class="a" :label="getLabel('党组织数')" :value="0" unit="人" icon=""/>
       <div class="a1"></div>
       <div class="b"></div>
       <div class="bb grid">
@@ -49,15 +72,26 @@ export default {
       <div class="j"></div>
     </template>
     <template v-else>
-      <div class="a"></div>
-      <div class="a1"></div>
-      <div class="b"></div>
-      <div class="b1"></div>
+      <icon-sta-panel class="a pad-24" :label="getLabel('党组织数')" :value="0" unit="人" icon="https://cdn.sinoecare.com/i/2024/09/04/66d7cd06f269b.png"/>
+      <icon-sta-panel class="a1 pad-24" :label="getLabel('党员人数')" :value="0" unit="人" icon="https://cdn.sinoecare.com/i/2024/09/04/66d7cd0560bea.png"/>
+      <div class="b pad-l16 pad-r12 pad-v6">
+        <icon-small-panel v-for="(e,i) in areaSta" :key="i" v-bind="e"/>
+      </div>
+      <div class="b1 pad-v10 pad-h20">
+        <icon-sta-panel :label="getLabel('居民人数')" :value="0" unit="人" icon="https://cdn.sinoecare.com/i/2024/09/04/66d7cd083a9b0.png"/>
+        <div class="flex staPercent">
+          <div class="flex fill">月环比<p v-text="0"/></div>
+          <div class="flex fill">年同比<p class="minus" v-text="0"/></div>
+        </div>
+      </div>
       <div class="b2"></div>
       <div class="c"></div>
       <div class="c1 grid">
-        <div class="item row"></div>
-        <div class="item" v-for="(e,i) in Array(4)" :key="i"></div>
+        <icon-small-panel class="item row pad-h16" :label="getLabel('工单总数')" :value="0" unit="个"/>
+        <div class="item pad-v12 flex column center" v-for="(e,i) in workorderSta" :key="i" :class="{isRed:e.isRed}">
+          <div v-text="e.label"/>
+          <value-unit :value="e.value" :unit="e.unit" size="mini"/>
+        </div>
       </div>
       <div class="d"></div>
       <div class="e">
@@ -90,6 +124,8 @@ export default {
 </style>
 <style scoped lang="scss">
 .AppDvWeiyang {
+  font-size: 14px;
+  color: #fff;
   display: grid;
   gap: 10px;
   grid-template-columns: repeat(8, 1fr);
@@ -153,5 +189,48 @@ export default {
     font-size: 12px;
     color: #BDCCDB;
   }
+
+  .staPercent {
+    margin-top: 9px;
+    line-height: 40px;
+    font-size: 12px;
+
+    p {
+
+      font-size: 16px;
+      color: #26FF9A;
+      display: flex;
+      align-items: center;
+      font-family: DINAlternate;
+
+      &:before {
+        margin-left: 8px;
+        margin-right: 2px;
+        font-size: 10px;
+        content: "▲";
+      }
+
+      &:after {
+        content: "%";
+      }
+
+      &.minus {
+        color: #FF2727;
+
+        &:before {
+          content: "▼";
+        }
+      }
+    }
+  }
+
+  .isRed {
+    background: #fa35351a;
+    border: 1px solid #f76e6e52;
+
+    :deep(.valueUnit) {
+      color: #FF2727;
+    }
+  }
 }
 </style>