提交一部分丰都大屏

project/fengdu/AppBIBoard/AppBIBoard.vue

@@ -1,11 +1,44 @@
 <template>
   <section class="AppBIBoard" :class="{fullscreen}">
     <ai-fit-view>
-      <ai-dv-wrapper ref="fddv" title="丰收号-家庭互助" :instance="instance">
+      <ai-dv-wrapper ref="fddv" title="丰收号-家庭互助" :instance="instance" :mask="false">
         <template v-slot:head="head">
           <fengdu-head v-bind="head" @fullscreen="handleFullScreen" @setting="handleSetting"/>
         </template>
-        <ai-dv-viewer v-bind="$props"/>
+        <div class="left">
+          <fd-card label="社群动态概况">
+            <div class="grid c-2 pad-t14 pad-b20">
+              <div class="staPanel" v-for="(v,k) in sta" :key="k">
+                <div v-text="k"/>
+                <b v-text="v"/>
+              </div>
+              <div class="chart">
+                <div class="title">群活跃率（7日）</div>
+                <ai-echart :ops="chart" :data="chartData"/>
+              </div>
+              <div class="chart">
+                <div class="title">人员活跃（7日）</div>
+                <ai-echart :ops="chart" :data="chartData"/>
+              </div>
+            </div>
+          </fd-card>
+          <fd-card class="mar-t14" label="志愿者">
+
+          </fd-card>
+        </div>
+        <div class="center fill">
+          <fd-card label="实时动态">
+
+          </fd-card>
+        </div>
+        <div class="right">
+          <fd-card label="功德银行">
+
+          </fd-card>
+          <fd-card label="门户应用统计">
+
+          </fd-card>
+        </div>
       </ai-dv-wrapper>
     </ai-fit-view>
   </section>
@@ -13,18 +46,47 @@
 <script>
 import AiFitView from "dui/packages/layout/AiFitView.vue";
 import FengduHead from "./components/fengduHead.vue";
+import FdCard from "./components/fdCard.vue";
+import AiEchart from "dui/packages/tools/AiEchart.vue";
+import AiHighlight from "dui/packages/layout/AiHighlight.vue";
 
 export default {
   name: "AppBIBoard",
   label: "丰都指挥舱",
-  components: {FengduHead, AiFitView},
+  components: {AiHighlight, AiEchart, FdCard, FengduHead, AiFitView},
   props: {
     instance: Function,
     dict: Object
   },
   data() {
     return {
-      fullscreen: false
+      fullscreen: false,
+      sta: {
+        群总数: 5118,
+        群主人数: 956,
+        '活跃群成员(30天)': '214,098',
+        '群消息(30天)': '1,214,098',
+      },
+      chart: {
+        series: {
+          type: 'gauge',
+          startAngle: 90,
+          endAngle: -270,
+          center: ['50%', 74],
+          radius: 50,
+          progress: {
+            overlap: false,
+            roundCap: true,
+            clip: false,
+          },
+          splitLine: false,
+          axisTick: false,
+          axisLine: {
+            lineStyle: {width: 6}
+          }
+        }
+      },
+      chartData: []
     }
   },
   methods: {
@@ -39,6 +101,9 @@ export default {
 </script>
 <style scoped lang="scss">
 .AppBIBoard {
+  color: #CDDBEA;
+  font-size: 14px;
+
   &.fullscreen {
     position: fixed;
     z-index: 202310111819;
@@ -50,6 +115,55 @@ export default {
 
   :deep(.viewPanel) {
     background-image: url("./assets/img_bg.png");
+
+    & > .fill {
+      display: flex;
+      gap: 20px;
+      padding: 12px 24px 0;
+    }
+  }
+
+  .left, .right {
+    width: 480px;
+    flex-shrink: 0;
+  }
+
+  .grid {
+    display: grid;
+    gap: 14px;
+
+    &.c-2 {
+      grid-template-columns:1fr 1fr
+    }
+  }
+
+  .staPanel {
+    text-align: center;
+    font-size: 15px;
+    line-height: 20px;
+    background-size: 100% 100%;
+    background: url("./assets/staPanel-bg.png") no-repeat;
+    height: 80px;
+    padding-top: 14px;
+
+
+    & > b {
+      font-family: DINAlternate-Bold;
+      font-size: 22px;
+      color: #02FEFF;
+      letter-spacing: 0;
+      line-height: 36px;
+    }
+  }
+
+  .chart {
+    height: 200px;
+
+    .title {
+      padding-left: 10px;
+      line-height: 30px;
+      background-image: linear-gradient(270deg, #1f436600 0%, #245a7570 99%);
+    }
   }
 }
 </style>