提交一部分丰都大屏

components/layout/AiDvWrapper/AiDvWrapper.vue

@@ -11,7 +11,8 @@
         </div>
       </div>
     </dv-full-screen-container>
-    <ai-dialog :visible.sync="dialog" title="设置" @onConfirm="handleSetting" width="500px" class="settingDialog">
+    <ai-dialog :visible.sync="dialog" title="设置" @onConfirm="handleSetting" width="500px" class="settingDialog"
+               :modal="mask">
       <el-form size="mini">
         <el-form-item label="轮播频次">
           <el-input-number v-model="setting.splitViewTime" :min="0" controls-position="right"/>
@@ -48,7 +49,8 @@ export default {
      * 布局方案:black,classic,fengdu
      */
     type: {default: "black"},
-    background: {default: ""}
+    background: {default: ""},
+    mask: {default: true, type: Boolean}
   },
   computed: {
     active: {

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>

project/fengdu/AppBIBoard/components/fdCard.vue

@@ -0,0 +1,41 @@
+<template>
+  <section class="fdCard">
+    <div class="label flex">
+      <label class="fill" v-text="label"/>
+      <slot v-if="$slots.right" name="right"/>
+    </div>
+    <div class="content">
+      <slot/>
+    </div>
+  </section>
+</template>
+<script>
+export default {
+  name: "fdCard",
+  props: {
+    label: String
+  },
+}
+</script>
+<style scoped lang="scss">
+.fdCard {
+  backdrop-filter: blur(8px);
+
+  .label {
+    display: block;
+    color: white;
+    background-image: url("../assets/card-label-icon.png"), url("../assets/card-bottom.png");
+    background-repeat: no-repeat;
+    height: 50px;
+    font-weight: 500;
+    font-size: 22px;
+    padding-left: 54px;
+    padding-top: 10px;
+    background-position: left top, left bottom;
+    background-size: 54px 42px, 100% 31px;
+  }
+  .content{
+    padding: 0 18px;
+  }
+}
+</style>

project/fengdu/AppBIBoard/components/fengduHead.vue

@@ -1,7 +1,7 @@
 <template>
   <section class="fengduHead">
     <div class="content flex">
-      <ai-area class="fill" v-model="current" :mask="false">
+      <ai-area class="fill" v-model="current" :mask="false" :root="currentRoot">
         <template slot-scope="{areaname}">
           <el-input class="areaPicker" :value="areaname" readonly suffix-icon="el-icon-arrow-down"/>
         </template>
@@ -17,6 +17,8 @@
 </template>
 
 <script>
+import {mapState} from "vuex";
+
 export default {
   name: "fengduHead",
   model: {
@@ -30,9 +32,9 @@ export default {
     currentTime: {default: null}
   },
   computed: {
-    tabs: v => [
-      ...v.views,
-    ]
+    ...mapState(['user']),
+    currentRoot: v => v.user.info.areaId.substr(0, 6).padEnd(12, '0'),
+    tabs: v => [...v.views ]
   },
   data() {
     return {
@@ -57,6 +59,7 @@ export default {
     }
   },
   created() {
+    this.current = this.$copy(this.user.info.areaId)
     // this.getWeather()
   }
 }
@@ -77,7 +80,7 @@ export default {
   position: relative;
   background-repeat: no-repeat;
   background-image: url("../assets/bg-lighting.png");
-  background-position:top center;
+  background-position: top center;
 
   .content {
     height: 100%;

ui/packages/tools/AiEchart.vue

@@ -56,7 +56,7 @@ export default {
           colors = this.theme === '1' ? this.colors : (options.color || this.colors),
           legend = {textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14}},
           series = data?.[0] ? Array(Object.keys(data?.[0]).length - 1).fill(1)
-          .map((e, i) => ({type, ...(typeof style == 'object' ? style : style(colors[i]))})) : []
+              .map((e, i) => ({type, ...(typeof style == 'object' ? style : style(colors[i]))})) : []
       let ops = {
         tooltip: {},
         xAxis: {
@@ -141,8 +141,9 @@ export default {
     watchResize() {
       this.timer && clearInterval(this.timer)
       this.timer = setInterval(() => {
-        if (this.chart?.getHeight() != this.$refs.AiEchart?.clientHeight ||
-            this.chart?.getWidth() != this.$refs.AiEchart?.clientWidth) {
+        const {clientHeight, clientWidth} = this.$refs.AiEchart || {},
+            h = this.chart?.getHeight(), w = this.chart?.getWidth()
+        if (h != clientHeight || w != clientWidth) {
           this.chart?.resize()
         }
       }, 1000)