丰都图标样式基本完成

project/fengdu/AppBIBoard/AppBIBoard.vue

@@ -3,7 +3,7 @@
     <ai-fit-view @scale="v=>scale=v">
       <ai-dv-wrapper ref="fddv" title="丰收号-家庭互助" :instance="instance" :mask="false">
         <template v-slot:head="head">
-          <fengdu-head v-bind="head" @fullscreen="handleFullScreen" @setting="handleSetting"/>
+          <fengdu-head v-model="areaId" v-bind="head" @fullscreen="handleFullScreen" @setting="handleSetting"/>
         </template>
         <div class="left">
           <fd-card label="社群动态概况">
@@ -52,17 +52,51 @@
             </div>
           </fd-card>
         </div>
-        <div class="center fill">
-          <fd-card label="实时动态">
-
+        <div class="center fill relative">
+          <div ref="map" class="w100 h100"/>
+          <fd-card class="centerBottom pad-b8" label="实时动态">
+            <dv-scroll-board class="mar-t14" :config="realtimeEvents" style="height: 228px"/>
           </fd-card>
         </div>
         <div class="right">
           <fd-card label="功德银行">
-
+            <template #right>
+              <div class="shortcut" v-for="(v,k) in shortcuts" :key="k" @click="shortcut=k"
+                   :class="{active:shortcut==k}" v-text="v"/>
+            </template>
+            <div class="boxSta flex">
+              <div class="flex text">
+                <div>获取总积分</div>
+                <p v-text="12000"/>
+              </div>
+            </div>
+            <div class="staPanel simple right flex mar-t14">
+              <div class="fill" v-for="(v,k) in volunteers" :key="k">
+                <div v-text="k"/>
+                <b v-text="v"/>
+              </div>
+            </div>
+            <div class="boxSta flex">
+              <div class="flex text">
+                <div>兑换总积分</div>
+                <p v-text="9500"/>
+              </div>
+            </div>
+            <div class="staPanel simple right flex mar-t14">
+              <div class="fill" v-for="(v,k) in volunteers" :key="k">
+                <div v-text="k"/>
+                <b v-text="v"/>
+              </div>
+            </div>
+            <div class="grid c-3 pad-t14 pad-b20">
+              <div class="staPanel" v-for="(v,k) in volunteers">
+                <div v-text="k"/>
+                <b v-text="v"/>
+              </div>
+            </div>
           </fd-card>
-          <fd-card label="门户应用统计">
-
+          <fd-card label="门户应用统计" class="mar-t14 pad-b20">
+            <dv-scroll-board class="mar-t14" :config="appSta" style="height: 304px"/>
           </fd-card>
         </div>
       </ai-dv-wrapper>
@@ -90,6 +124,7 @@ export default {
   },
   data() {
     return {
+      areaId: '',
       scale: 1,
       fullscreen: false,
       sta: {
@@ -138,7 +173,7 @@ export default {
             fontSize: 24,
             formatter: '{value}%',
             color: "#02FEFF",
-            fontFamily: "DINAlternate-Bold",
+            fontFamily: "DIN",
             width: 50,
             lineHeight: 50,
             padding: 12,
@@ -182,11 +217,50 @@ export default {
           ['三合街道丁庄社区互助会', '张珊珊', '女', 32],
         ]
       },
-      current: 1
+      appSta: {
+        header: ['应用名称', '本日点击', '累计点击'],
+        headerBGC: 'rgba(33, 180, 253, 0.1)',
+        oddRowBGC: 'rgba(112, 112, 112, 0)',
+        evenRowBGC: 'rgba(112, 112, 112, 0)',
+        rowNum: 7,
+        headerHeight: 38,
+        columnWidth: [250],
+        align: ['left', 'right', 'right'],
+        data: [
+          ['渝快办', 178, 266],
+          ['公交乘车码', 178, 266],
+          ['警快办', 178, 266],
+          ['医保电子凭证', 178, 266],
+          ['居民上报', 178, 266],
+          ['医保电子凭证', 178, 266],
+          ['居民上报', 178, 266],
+        ]
+      },
+      current: 1,
+      realtimeEvents: {
+        rowNum: 6,
+        oddRowBGC: 'rgba(112, 112, 112, 0)',
+        evenRowBGC: 'rgba(112, 112, 112, 0)',
+        columnWidth: [226],
+        align: ['center', 'left'],
+        data: [
+          ['<div class="timeRow">2023-10-19 14:55:32</div>', '汇南社区-张三 创建了新的居民群'],
+          ['<div class="timeRow">2023-10-19 14:55:32</div>', '汇南社区-张三 邀请居民"蓝天白云"加入居民群“书院社区2群”'],
+          ['<div class="timeRow">2023-10-19 14:55:32</div>', '汇南社区-张三 将居民"蓝天白云"踢出居民群 “书院社区2群”'],
+          ['<div class="timeRow">2023-10-19 14:55:32</div>', '滨江东路社区居民-陈思宇在丰收号小程序中进行了打卡签到'],
+          ['<div class="timeRow">2023-10-19 14:55:32</div>', '滨江东路社区居民-陈思宇在丰收号小程序中进行了积分申请'],
+          ['<div class="timeRow">2023-10-19 14:55:32</div>', '滨滨江东路社区居民-陈思宇在丰收号小程序中进行了物品兑换'],
+          ['<div class="timeRow">2023-10-18 14:55:32</div>', '三角路社区居民-陈思宇在丰收号小程序中进行了物品兑换'],
+          ['<div class="timeRow">2023-10-18 14:55:32</div>', '三角路社区居民-陈思宇在丰收号小程序中进行了物品兑换'],
+          ['<div class="timeRow">2023-10-18 14:55:32</div>', '三角路社区居民-陈思宇在丰收号小程序中进行了物品兑换'],
+        ]
+      },
+      shortcut: 0
     }
   },
   computed: {
-    tablePages: v => Math.ceil(v.volunteerConfig.data.length / v.volunteerConfig.rowNum) || 0
+    tablePages: v => Math.ceil(v.volunteerConfig.data.length / v.volunteerConfig.rowNum) || 0,
+    shortcuts: () => Object.assign({0: '昨日', 1: '近七天', 2: '近30天', 3: '近一年'})
   },
   methods: {
     handleFullScreen() {
@@ -207,10 +281,19 @@ export default {
       } else if (c < 5) {
         setTimeout(() => this.watchTablePageChange(++c), 500)
       }
+    },
+    getData() {
+      const {areaId} = this.$data
+      this.instance.post("/app/fdDiy/realTimeDynamic", null, {params: {areaId}}).then(res => {
+        if (res?.data) {
+
+        }
+      })
     }
   },
   created() {
     Vue.use(scrollBoard)
+    this.getData()
   },
   mounted() {
     this.watchTablePageChange()
@@ -267,7 +350,11 @@ export default {
     gap: 14px;
 
     &.c-2 {
-      grid-template-columns:1fr 1fr
+      grid-template-columns:1fr 1fr;
+    }
+
+    &.c-3 {
+      grid-template-columns:1fr 1fr 1fr;
     }
   }
 
@@ -275,35 +362,45 @@ export default {
     text-align: center;
     font-size: 15px;
     line-height: 20px;
-    background-size: 100% 100%;
     background: url("./assets/staPanel-bg.png") no-repeat;
+    background-size: 100% 100%;
     height: 80px;
     padding-top: 14px;
-
-    &.simple {
-      background: #ffffff0a;
-      padding-top: 0;
-    }
-
+    width: 100%;
 
     b {
-      font-family: DINAlternate-Bold;
+      font-family: DIN;
       font-size: 22px;
       color: #02FEFF;
       letter-spacing: 0;
       line-height: 36px;
     }
+
+    &.simple {
+      background: #ffffff0a;
+      padding-top: 0;
+
+      &.right {
+        color: #9BB7D4;
+
+        b {
+          color: #FFFFFF;
+        }
+      }
+    }
   }
 
   .chart {
-    height: 200px;
-
     .legend {
       position: absolute;
       left: 0;
       right: 0;
       bottom: 0;
     }
+
+    .AiEchart {
+      height: 204px;
+    }
   }
 
   .title {
@@ -334,7 +431,17 @@ export default {
     }
 
     .row-item {
+      height: 38px;
       line-height: 38px;
+      border-bottom: 1px solid #154270;
+      margin-top: -1px;
+    }
+
+    .timeRow {
+      background-image: url("./assets/realtimeIcon.png");
+      background-repeat: no-repeat;
+      background-position: 20px center;
+      text-indent: 24px;
     }
   }
 
@@ -359,5 +466,54 @@ export default {
       }
     }
   }
+
+  .centerBottom {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+
+  .shortcut {
+    background: #1f9ecc29;
+    padding: 4px 13px;
+    color: #1FBECC;
+    font-size: 13px;
+    margin-left: 4px;
+    margin-top: -7px;
+    border: 1px solid transparent;
+    cursor: pointer;
+    height: fit-content;
+
+    &:first-of-type {
+      margin-left: 0;
+    }
+
+    &.active {
+      border-color: #20B4C5;
+      color: #4ED8E4;
+    }
+  }
+
+  .boxSta {
+    margin-top: 16px;
+    padding-right: 70px;
+    justify-content: flex-end;
+    background: url("./assets/box.png") no-repeat 80px center;
+    height: 82px;
+    font-size: 16px;
+
+    .text {
+      color: #FFFFFF;
+      width: 156px;
+      justify-content: space-between;
+
+      & > p {
+        font-family: DIN;
+        font-size: 26px;
+        color: #02FEFF;
+      }
+    }
+  }
 }
 </style>

project/fengdu/AppBIBoard/components/fengduHead.vue

@@ -34,7 +34,7 @@ export default {
   computed: {
     ...mapState(['user']),
     currentRoot: v => v.user.info.areaId.substr(0, 6).padEnd(12, '0'),
-    tabs: v => [...v.views ]
+    tabs: v => [...v.views]
   },
   data() {
     return {
@@ -47,20 +47,13 @@ export default {
       handler(v) {
         if (v != this.current) this.current = this.$copy(this.active)
       }
-    }
-  },
-  methods: {
-    getWeather() {
-      this.$request.post("/app/weather/queryWeather").then(res => {
-        if (res?.data) {
-
-        }
-      })
+    },
+    current(v) {
+      this.$emit("change", v)
     }
   },
   created() {
     this.current = this.$copy(this.user.info.areaId)
-    // this.getWeather()
   }
 }
 </script>