除了第三方数据均已开发完成

project/fengdu/AppBIBoard/AppBIBoard.vue

@@ -53,9 +53,9 @@
           </fd-card>
         </div>
         <div class="center fill relative">
-          <fd-map class="w100 h100" v-model="map"/>
+          <fd-map class="w100" v-model="map" style="height: calc(100% - 114px)"/>
           <fd-card class="centerBottom pad-b8" label="实时动态">
-            <dv-scroll-board class="mar-t14" :config="realtimeEvents" style="height: 228px"
+            <dv-scroll-board class="mar-t14" :config="realtimeEvents" style="height: 114px"
                              @click="handleRealtimeEventDialog"/>
           </fd-card>
         </div>
@@ -104,7 +104,26 @@
       <fd-dialog v-model="dialog" :title="detail.eventType">
         <template v-if="detail.mapType=='store'">
           <b class="title mar-t8 mar-b16">店铺商品</b>
+          <carousel autoplay :perPage="3" autoplayHoverPause navigationEnabled :paginationEnabled="false"
+                    class="mar-h32"
+                    navigationNextLabel=" " navigationPrevLabel="">
+            <slide class="goods" v-for="good in detail.goods" :key="good.id">
+              <img :src="good.goods.picUrl"/>
+              <div class="mar-t8" v-text="good.goods.title"/>
+            </slide>
+          </carousel>
           <b class="title mar-t14 mar-b12">订单列表</b>
+          <dv-scroll-board :config="goodsConfig" style="height: 152px"/>
+        </template>
+        <template v-else-if="detail.mapType=='area'">
+          <div class="staPanel area right mar-t12 mar-b24 grid c-4">
+            <fd-item v-for="(v,k) in detail.sta" :key="k" :label="k"><b v-text="v"/></fd-item>
+          </div>
+          <div class="flex mar-b14">
+            <div class="shortcut" v-for="cut in areaStaTypes" :key="cut.k" @click="areaStaType=cut.k"
+                 :class="{active:areaStaType==cut.k}" v-text="cut.v"/>
+          </div>
+          <dv-scroll-board :config="areaTableConfig" style="height: 152px"/>
         </template>
         <template v-else>
           <div v-if="detail.header" class="contentHead" v-html="detail.header"/>
@@ -140,12 +159,21 @@ import FdMap from "./components/fdMap.vue";
 import FdDialog from "./components/fdDialog.vue";
 import FdItem from "./components/fdItem.vue";
 import FdScrollbar from "./components/fdScrollbar.vue";
+import {Carousel, Slide} from "vue-carousel"
+
+const tableConfigs = {
+  headerBGC: 'rgba(33, 180, 253, 0.1)',
+  oddRowBGC: 'rgba(112, 112, 112, 0)',
+  evenRowBGC: 'rgba(112, 112, 112, 0)',
+  headerHeight: 38,
+  rowNum: 3,
+}
 
 export default {
   name: "AppBIBoard",
   label: "丰都指挥舱",
   components: {
-    FdScrollbar,
+    FdScrollbar, Carousel, Slide,
     FdItem, FdDialog, FdMap, AiWrapper, AiInfoItem, AiHighlight, AiEchart, FdCard, FengduHead, AiFitView
   },
   props: {
@@ -219,12 +247,9 @@ export default {
         服务学员数量: 5
       },
       volunteerConfig: {
+        ...tableConfigs,
         header: ['所属团队', '姓名', '性别', '年龄'],
-        headerBGC: 'rgba(33, 180, 253, 0.1)',
-        oddRowBGC: 'rgba(112, 112, 112, 0)',
-        evenRowBGC: 'rgba(112, 112, 112, 0)',
         rowNum: 4,
-        headerHeight: 38,
         columnWidth: [250],
         align: ['left', 'left', 'left', 'center'],
         carousel: 'page',
@@ -244,12 +269,9 @@ export default {
         ]
       },
       appSta: {
+        ...tableConfigs,
         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: [
@@ -264,9 +286,7 @@ export default {
       },
       current: 1,
       realtimeEvents: {
-        rowNum: 6,
-        oddRowBGC: 'rgba(112, 112, 112, 0)',
-        evenRowBGC: 'rgba(112, 112, 112, 0)',
+        ...tableConfigs,
         columnWidth: [226],
         align: ['center', 'left'],
         data: [
@@ -285,7 +305,8 @@ export default {
       GongdeBank: {},
       map: null,
       dialog: false,
-      detail: {}
+      detail: {},
+      areaStaType: 'grid'
     }
   },
   computed: {
@@ -295,7 +316,34 @@ export default {
       {k: '0', v: '近七天'},
       {k: '1', v: '近30天'},
       {k: '2', v: '近一年'},
-    ]
+    ],
+    areaStaTypes: () => [
+      {k: 'grid', v: '网格'},
+      {k: 'resident', v: '居民群'},
+      {k: 'volunteer', v: '互助会'},
+    ],
+    goodsConfig: v => ({
+      ...tableConfigs,
+      header: ['兑换人', '兑换商品', '数量', '积分', '状态'],
+      data: v.detail.orders?.map(e => [e.integralUserName, e.goodsTitle, e.quantity, e.goodsIntegralPrice,
+        `<div class="statusTag ${e.status > 0 ? 'success' : ''}">${v.dict.getLabel('integralSGOStatus', e.status)}</div>`]),
+      align: ['left', 'left', 'right', 'right', 'center'],
+    }),
+    areaTableConfig: v => ({
+      ...tableConfigs,
+      ...{
+        grid: {
+          header: ['村/社区', '网格名称', '网格员人数'],
+          align: ['left', 'left', 'right'],
+          data: v.detail.girdList?.map(e => [e.parentGirdName, e.girdName, e.girdMemberCount])
+        },
+        resident: {
+          header: ['群名称', '群主', '群人数'],
+          align: ['left', 'left', 'right'],
+          data: v.detail.groupList?.map(e => [e.name, e.ownerName, e.memberCount])
+        }
+      }[v.areaStaType]
+    })
   },
   watch: {
     shortcut() {
@@ -419,8 +467,11 @@ export default {
           initMap.then(() => {
             const {records} = res.data
             this.map.on('click', e => {
-              if (e.data?.marker == 'store') {
+              console.log(e)
+              if (e.data?.marker == 'store') {//点击店铺
                 this.getMapStore(e.data)
+              } else if (e.data?.unique_id) {//点击地区
+                this.getMapArea(e.data)
               }
             })
             this.map.setOption({
@@ -456,6 +507,19 @@ export default {
         }
       })
     },
+    getMapArea(area) {
+      this.instance.post("/app/fdDiy/mapAreaInfo", null, {params: {areaId: area.unique_id.padEnd(12, '0')}}).then(res => {
+        if (res?.data) {
+          this.dialog = true
+          const {村社区数量, 居民群数量, 居民数, 网格数, 群成员数量, 户数} = res.data
+          this.detail = {
+            eventType: area.name,
+            mapType: 'area', ...res.data,
+            sta: {村社区数量, 居民群数量, 居民数, 网格数, 群成员数量, 户数}
+          }
+        }
+      })
+    },
     handleRealtimeEventDialog({rowIndex}) {
       const row = this.realtimeEvents.meta[rowIndex]
       if (row.bizId) {
@@ -539,7 +603,7 @@ export default {
   created() {
     Vue.use(scrollBoard)
     this.getData()
-    this.dict.load('appIntegralApplyEventStatus', 'yesOrNo')
+    this.dict.load('appIntegralApplyEventStatus', 'yesOrNo', 'integralSGOStatus')
   },
   mounted() {
     this.watchTablePageChange()
@@ -602,6 +666,10 @@ export default {
     &.c-3 {
       grid-template-columns:1fr 1fr 1fr;
     }
+
+    &.c-4 {
+      grid-template-columns:1fr 1fr 1fr 1fr;
+    }
   }
 
   .staPanel {
@@ -634,6 +702,26 @@ export default {
         }
       }
     }
+
+    &.area {
+      background: #ffffff0a;
+      padding: 16px 8px;
+      gap: 14px;
+
+      b {
+        font-size: 16px;
+        color: #FFFFFF;
+        line-height: 16px;
+      }
+
+      :deep(.fdItem) {
+        margin-bottom: 0;
+
+        & > label {
+          color: #9BB7D4;
+        }
+      }
+    }
   }
 
   .chart {
@@ -694,6 +782,11 @@ export default {
       color: #02FEFF;
       cursor: pointer;
     }
+
+    .ceil > .statusTag {
+      margin-top: 19px;
+      transform: translateY(-50%);
+    }
   }
 
   .dots {
@@ -768,9 +861,12 @@ export default {
   }
 
   :deep(.statusTag ) {
-    padding: 2px 8px;
+    height: 20px;
+    line-height: 20px;
+    padding: 0 8px;
     color: #FFB300;
     background: #ffcb5224;
+    width: fit-content;
 
     &.success {
       color: #07B794;
@@ -793,5 +889,37 @@ export default {
       letter-spacing: 0;
     }
   }
+
+  :deep(.VueCarousel) {
+    .goods {
+      font-size: 16px;
+      color: #02FEFF;
+      text-align: center;
+
+      & > img {
+        background: url("./assets/goodBg.png");
+        padding: 10px;
+        width: 130px;
+        height: 138px;
+      }
+    }
+
+    .VueCarousel-navigation-button {
+      width: 32px;
+      height: 32px;
+      background: url("./assets/carousel-nav-btn.png") no-repeat;
+      outline: none;
+      border-color: transparent;
+
+      &.VueCarousel-navigation-next {
+        transform: translate(100%, -50%) rotate(180deg);
+      }
+
+      &:active {
+        opacity: .8;
+      }
+    }
+  }
+
 }
 </style>

project/fengdu/AppBIBoard/components/fdMap.vue

@@ -57,7 +57,7 @@ export default {
                 show: true,
                 color: '#02FEFF',
                 fontSize: 16,
-                fontFamily: 'PingFang-SC'
+                fontFamily: 'PingFang-SC',
               },
               emphasis: {
                 disabled: true,
@@ -66,7 +66,8 @@ export default {
                 itemStyle: {areaColor: '#02bcff29',},
                 label: {fontSize: 16, fontWeight: 'bold', color: '#02FEFF'}
               },
-              zoom: 1.2
+              zoom: 1.2,
+              data: geoJSON.features.map(e => e.properties)
             },
           ]
         })