Merge branch 'build' of http://git.sinoecare.com/sinoecare/digital_village_v2/dvcp_v2_webapp into build

project/fengdu/AppBIBoard/AppBIBoard.vue

@@ -1,6 +1,6 @@
 <template>
   <section class="AppBIBoard" :class="{fullscreen}">
-    <ai-fit-view @scale="v=>scale=v">
+    <ai-fit-view>
       <ai-dv-wrapper ref="fddv" title="丰收号-家庭互助" :instance="instance" :mask="false">
         <template v-slot:head="head">
           <fengdu-head v-model="areaId" v-bind="head" @fullscreen="handleFullScreen" @setting="handleSetting"/>
@@ -32,24 +32,31 @@
               </div>
             </div>
           </fd-card>
-          <fd-card class="mar-t14" label="志愿者">
+          <fd-card class="mar-t14" :label="leftBottom">
-            <div class="jumpBtn" slot="right" @click="handleJump">前往志愿者平台
+            <div v-if="leftBottom=='志愿者'" class="jumpBtn" slot="right" @click="handleJump">前往志愿者平台
               <div class="el-icon-position"/>
             </div>
-            <div class="staPanel simple flex mar-t10">
+            <el-carousel arrow="never" class="mar-t8" @change="v=>leftBottom=['志愿者','互助会'][v]" :interval="6000">
-              <div class="fill" v-for="(v,k) in volunteers" :key="k">
+              <el-carousel-item name="志愿者">
-                <div v-text="k"/>
+                <div class="staPanel simple flex mar-t10">
-                <b v-text="v"/>
+                  <div class="fill" v-for="(v,k) in volunteers" :key="k">
-              </div>
+                    <div v-text="k"/>
-            </div>
+                    <b v-text="v"/>
-            <div class="flex mar-v12">
+                  </div>
-              <b class="fill title">志愿者名单</b>
+                </div>
-              <ai-select class="areaPicker" placeholder="团队选择"/>
+                <div class="flex mar-v12">
-            </div>
+                  <b class="fill title">志愿者名单</b>
-            <dv-scroll-board ref="volunteerTable" :config="volunteerConfig"/>
+                  <ai-select v-model="fraternity" class="areaPicker" placeholder="团队选择" :select-list="fraternities"
-            <div class="dots flex center">
+                             :prop="{label:'fraternity_name',value:'fraternity_name'}"
-              <div class="dot" v-for="i in tablePages" :key="i" :class="{current:current==i}"/>
+                             @select="getVolunteerData(areaId)"/>
-            </div>
+                </div>
+                <dv-scroll-board :config="volunteerConfig"/>
+              </el-carousel-item>
+              <el-carousel-item name="互助会">
+                <dv-scroll-board class="origin" :config="fraternityTypeConfig" @click="getFraternityData"
+                                 style="height:360px"/>
+              </el-carousel-item>
+            </el-carousel>
           </fd-card>
         </div>
         <div class="center fill relative">
@@ -101,7 +108,8 @@
           </fd-card>
         </div>
       </ai-dv-wrapper>
-      <fd-dialog v-model="dialog" :title="detail.eventType">
+      <fd-dialog v-model="dialog" :title="detail.eventType" :extra-dialog.sync="fraternityExtra"
+                 :extra-title="detail.extraTitle">
         <template v-if="detail.mapType=='store'">
           <b class="title mar-t8 mar-b16">店铺商品</b>
           <carousel autoplay :perPage="3" autoplayHoverPause navigationEnabled :paginationEnabled="false"
@@ -115,6 +123,22 @@
           <b class="title mar-t14 mar-b12">订单列表</b>
           <dv-scroll-board :config="goodsConfig" style="height: 152px"/>
         </template>
+        <template v-else-if="detail.mapType=='fraternitySta'">
+          <el-input placeholder="请输入互助会名称..." class="areaPicker mar-b20" size="small"
+                    v-model="fraternityFilter"/>
+          <dv-scroll-board v-loading="fraternityLoading" :config="fraternityConfig" style="height: 380px"
+                           element-loading-background="rgba(0, 0, 0, 0.2)" @click="handleFraternityTableClick"/>
+          <div slot="extra">
+            <dv-scroll-board class="mar-t10" :config="fraternityExtraConfig" style="height: 380px"
+                             :class="{origin:fraternityExtraConfig.header.length==0}"/>
+          </div>
+        </template>
+        <template v-else-if="detail.mapType=='fraternity'">
+          <div class="flex normal">
+            <el-image class="fraternityImg" :src="detail.cover_url"/>
+            <div class="mar-l16 fill" v-html="detail.introduction"/>
+          </div>
+        </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>
@@ -163,11 +187,39 @@ import {Carousel, Slide} from "vue-carousel"
 
 const tableConfigs = {
   headerBGC: 'rgba(33, 180, 253, 0.1)',
+  headerHeight: 38,
   oddRowBGC: 'rgba(112, 112, 112, 0)',
   evenRowBGC: 'rgba(112, 112, 112, 0)',
-  headerHeight: 38,
   rowNum: 3,
 }
+const genderDict = {
+  1: '男', 2: '女', 3: '未知', 0: '未知'
+}
+const getCluster = (points, options = {big: {}, normal: {}}, num = 10) => {
+  const big = [], {distance = 0.03} = options
+  const pointInsideCircle = (point, circle, r) => {
+    if (r === 0) return false
+    const dx = circle[0] - point[0]
+    const dy = circle[1] - point[1]
+    return dx * dx + dy * dy <= r * r
+  }
+  return points.map(e => {
+    e.coord = e.coord.map(c => Number(c))
+    if (big.length == 0 ||
+        !big.find(b => pointInsideCircle(e.coord, b, distance)) && big.length < num && e.introduction) {
+      big.push(e.coord)
+      return {
+        ...e,
+        ...options.big,
+      }
+    } else {
+      return {
+        ...e,
+        ...options.normal
+      }
+    }
+  })
+}
 
 export default {
   name: "AppBIBoard",
@@ -183,7 +235,7 @@ export default {
   data() {
     return {
       areaId: '',
-      scale: 1,
+      fraternity: '',
       fullscreen: false,
       sta: {},
       chart: {
@@ -241,31 +293,27 @@ export default {
         // {name: "全部居民群", value: 5118},
       ],
       chartData2: [],
-      volunteers: {
+      volunteers: {},
-        团队数量: 125,
-        志愿者数量: 13,
-        服务学员数量: 5
-      },
       volunteerConfig: {
         ...tableConfigs,
         header: ['所属团队', '姓名', '性别', '年龄'],
         rowNum: 4,
-        columnWidth: [250],
+        columnWidth: [250, 80],
         align: ['left', 'left', 'left', 'center'],
         carousel: 'page',
         data: [
-          ['三合街道丁庄社区互助会', '张珊珊', '女', 32],
+          // ['三合街道丁庄社区互助会', '张珊珊', '女', 32],
-          ['三合街道丁庄社区互助会', '王富贵', '女', 32],
+          // ['三合街道丁庄社区互助会', '王富贵', '女', 32],
-          ['三合街道丁庄社区互助会', '阿萨德', '男', 23],
+          // ['三合街道丁庄社区互助会', '阿萨德', '男', 23],
-          ['三合街道丁庄社区互助会', '阿连德', '男', 54],
+          // ['三合街道丁庄社区互助会', '阿连德', '男', 54],
-          ['三合街道丁庄社区互助会', '王柏柏', '女', 66],
+          // ['三合街道丁庄社区互助会', '王柏柏', '女', 66],
-          ['三合街道丁庄社区互助会', '赵二狗', '男', 41],
+          // ['三合街道丁庄社区互助会', '赵二狗', '男', 41],
-          ['三合街道丁庄社区互助会', '唯一键', '女', 13],
+          // ['三合街道丁庄社区互助会', '唯一键', '女', 13],
-          ['三合街道丁庄社区互助会', '卡萨丁', '男', 32],
+          // ['三合街道丁庄社区互助会', '卡萨丁', '男', 32],
-          ['三合街道丁庄社区互助会', '卡萨丁', '男', 32],
+          // ['三合街道丁庄社区互助会', '卡萨丁', '男', 32],
-          ['三合街道丁庄社区互助会', '卡萨丁', '男', 32],
+          // ['三合街道丁庄社区互助会', '卡萨丁', '男', 32],
-          ['三合街道丁庄社区互助会', '张珊珊', '女', 32],
+          // ['三合街道丁庄社区互助会', '张珊珊', '女', 32],
-          ['三合街道丁庄社区互助会', '张珊珊', '女', 32],
+          // ['三合街道丁庄社区互助会', '张珊珊', '女', 32],
         ]
       },
       appSta: {
@@ -284,7 +332,6 @@ export default {
           // ['居民上报', 178, 266],
         ]
       },
-      current: 1,
       realtimeEvents: {
         ...tableConfigs,
         columnWidth: [226],
@@ -306,11 +353,16 @@ export default {
       map: null,
       dialog: false,
       detail: {},
-      areaStaType: 'grid'
+      areaStaType: 'grid',
+      fraternities: [],
+      fraternityTypes: [],
+      fraternityFilter: '',
+      fraternityLoading: false,
+      fraternityExtra: false,
+      leftBottom: '志愿者'
     }
   },
   computed: {
-    tablePages: v => Math.ceil(v.volunteerConfig.data.length / v.volunteerConfig.rowNum) || 0,
     shortcuts: () => [
       {k: '3', v: '昨日'},
       {k: '0', v: '近七天'},
@@ -344,12 +396,41 @@ export default {
           data: v.detail.groupList?.map(e => [e.name, e.ownerName, e.memberCount])
         },
         volunteer: {
-          header: ['互助会名称', '会长', '会员数'],
+          header: ['互助会类型', '互助会数量', '会员数'],
-          align: ['left', 'left', 'right'],
+          align: ['left', 'right', 'right'],
           columnWidth: [250],
-          data: v.detail.volunteers?.map(e => [e.name, e.ownerName, e.memberCount])
+          data: v.detail.fraternities?.map(e => [e.type, e.number, e.member_number])
         }
       }[v.areaStaType]
+    }),
+    fraternityConfig: v => ({
+      ...tableConfigs,
+      header: ['互助会', '家长数量', '学生数量', '活动数量'],
+      columnWidth: [280],
+      align: ['left', 'right', 'right', 'right'],
+      rowNum: 9,
+      data: v.detail.list.filter(e => !v.fraternityFilter || e.fraternity_name.indexOf(v.fraternityFilter) > -1)
+          .map(e => [e.fraternity_name, e.par_num, e.stu_num, e.act_num])
+    }),
+    fraternityExtraConfig: v => ({
+      ...tableConfigs, rowNum: 10,
+      header: ['姓名', '性别', '年龄'],
+      align: ['left', 'center', 'right'],
+      data: v.detail.extra,
+      ...v.detail.others
+    }),
+    fraternityTypeConfig: v => ({
+      oddRowBGC: 'rgba(112, 112, 112, 0)',
+      evenRowBGC: 'rgba(112, 112, 112, 0)',
+      rowNum: 3,
+      data: v.fraternityTypes.map(e => [`
+      <div class="title mar-t10">${e.type}</div>
+      <div class="staPanel simple right flex mar-t10" >
+      <div class="fill"><div>互助会</div><b>${e.number || 0}</b></div>
+      <div class="fill"><div>会员数量</div><b>${e.member_number || 0}</b></div>
+      <div class="fill"><div>活动数量</div><b>${e.activity_number || 0}</b></div>
+</div>
+      `])
     })
   },
   watch: {
@@ -374,24 +455,22 @@ export default {
       const value = data.length > 0 ? (data[0].value / data.at(-1).value * 100 || 0).toFixed(0) : 0
       return [{value}]
     },
-    watchTablePageChange(c = 0) {
-      if (this.$refs.volunteerTable) {
-        this.$refs.volunteerTable.$watch('animationIndex', i => {
-          this.current = Math.floor(i / 4) + 1
-        })
-      } else if (c < 5) {
-        setTimeout(() => this.watchTablePageChange(++c), 500)
-      }
-    },
     getData(c = 0) {
       const {areaId} = this.$data
       if (areaId) {
-        this.getMiniAppInfo()
+        const loading = this.$loading({
-        this.getRealTimeDynamic(areaId)
+          text: "正在加载数据...",
-        this.getWxGroupOverview(areaId)
+          background: 'rgba(0,0,0,.91)',
-        this.getGdyh(areaId)
+        })
-        this.getMapData(areaId)
+        Promise.all([
-        this.getVolunteerData(areaId)
+          this.getMiniAppInfo(),
+          this.getRealTimeDynamic(areaId),
+          this.getWxGroupOverview(areaId),
+          this.getGdyh(areaId),
+          this.getFraternitySta(this.transferAreaCode(areaId)),
+          this.getFraternityTypes(areaId).then(data => this.fraternityTypes = data),
+          this.getFraternities(this.transferAreaCode(areaId)).then(() => this.getMapData(areaId))
+        ]).finally(() => loading.close())
       } else if (c < 10) setTimeout(() => this.getData(++c), 500)
       else console.error(`尝试${c}次加载数据,无法过去数据`)
     },
@@ -467,7 +546,7 @@ export default {
     getMapData(visibleId) {
       const initMap = new Promise(resolve => {
         const load = (c = 0) => {
-          if (this.map) {
+          if (this.map && this.$refs.map) {
             resolve()
           } else if (c < 10) setTimeout(() => load(++c), 500)
         }
@@ -478,11 +557,15 @@ export default {
           initMap.then(() => {
             this.map.clear()
             this.$refs.map.init()
-            const {records} = res.data
+            const {records} = res.data,
+                fraternities = this.fraternities.filter(e => !!e.longtitude)
             this.map.on('click', e => {
-              console.log(e)
               if (e.data?.marker == 'store') {//点击店铺
                 this.getMapStore(e.data)
+              } else if (e.data?.marker == 'fraternity') {//点击互助会
+                this.dialog = true
+                const {fraternity_name, marker: mapType} = e.data
+                this.detail = {eventType: fraternity_name, mapType, ...e.data}
               } else if (e.data?.unique_id) {//点击地区
                 this.getMapArea(e.data)
               }
@@ -495,16 +578,40 @@ export default {
                     show: true,
                     position: 'right',
                     formatter: '{b}',
-                    distance: 2
+                    distance: 2,
                   },
-                  data: records.map(e => ({
+                  data: [
-                    ...e,
+                    ...getCluster(records.filter(e => !!e.lng).map(e => ({
-                    marker: 'store',
+                      ...e,
-                    coord: [e.lng, e.lat],
+                      marker: 'store',
-                    name: e.title,
+                      coord: [e.lng, e.lat],
-                    label: {color: "#FECA86"},
+                      name: e.title,
-                    symbol: "image://https://cdn.cunwuyun.cn/fengdu/fdStoreIcon.png",
+                      label: {color: "#FECA86"},
-                  }))
+                    })), {
+                      big: {symbol: "image://https://cdn.cunwuyun.cn/fengdu/fdStoreIcon.png"},
+                      normal: {
+                        itemStyle: {color: "#FECA86"},
+                        label: {show: false, emphasis: {show: true, color: "#FECA86"}},
+                        symbol: 'circle',
+                        symbolSize: 6
+                      }
+                    }),
+                    ...getCluster(fraternities.map(e => ({
+                      ...e,
+                      marker: 'fraternity',
+                      coord: [e.longtitude, e.latitude],
+                      name: e.fraternity_name,
+                      label: {color: "#70FF8A"},
+                    })), {
+                      big: {symbol: "image://https://cdn.cunwuyun.cn/fengdu/fdFraternitIcon.png"},
+                      normal: {
+                        itemStyle: {color: "#70FF8A"},
+                        label: {show: false, emphasis: {show: true, color: "#70FF8A"}},
+                        symbol: 'circle',
+                        symbolSize: 6
+                      }
+                    })
+                  ],
                 }
               }
             })
@@ -521,17 +628,32 @@ export default {
       })
     },
     getMapArea(area) {
-      this.instance.post("/app/fdDiy/mapAreaInfo", null, {params: {areaId: area.unique_id.padEnd(12, '0')}}).then(res => {
+      let info = {}, fraternity = {}
-        if (res?.data) {
+      Promise.all([
-          this.dialog = true
+        this.instance.post("/app/fdDiy/mapAreaInfo", null, {params: {areaId: area.unique_id.padEnd(12, '0')}}).then(res => {
-          const {村社区数量, 居民群数量, 居民数, 网格数, 群成员数量, 户数, 互助会 = 0, 会员数量 = 0} = res.data
+          if (res?.data) {
-          this.detail = {
+            return info = res.data
-            eventType: area.name,
-            mapType: 'area', ...res.data,
-            sta: {村社区数量, 居民群数量, 居民数, 网格数, 群成员数量, 户数, 互助会, 会员数量}
           }
+        }),
+        this.getFraternityTypes(area.unique_id).then(list => {
+          let 互助会 = 0, 会员数量 = 0
+          list.forEach(e => {
+            互助会 += e.number
+            会员数量 += e.member_number
+          })
+          return fraternity = {互助会, 会员数量, list}
+        })
+      ]).then(() => {
+        this.dialog = true
+        const {村社区数量, 居民群数量, 居民数, 网格数, 群成员数量, 户数} = info,
+            {互助会 = 0, 会员数量 = 0} = fraternity
+        this.detail = {
+          eventType: area.name,
+          mapType: 'area', ...info, fraternities: fraternity.list,
+          sta: {村社区数量, 居民群数量, 居民数, 网格数, 群成员数量, 户数, 互助会, 会员数量}
         }
       })
+
     },
     handleRealtimeEventDialog({rowIndex}) {
       const row = this.realtimeEvents.meta[rowIndex]
@@ -612,19 +734,105 @@ export default {
     handleJump() {
       window.open("http://datas.fdxjtjyhzzyfw.cn/")
     },
-    getVolunteerData(area_code){
+    getVolunteerData(area_code) {
-      // fetch("https://datas.fdxjtjyhzzyfw.cn/find-fraternity-detail?page=1&page_size=999").then(res=>res.json()).then(res=>{
+      area_code = this.transferAreaCode(area_code)
-      //   console.log(res)
+      return this.instance.get("/hzh/find-volunteer-list-detail", {
-      // })
+        params: {
+          page_size: 40,
+          area_code,
+          team_name: this.fraternity
+        }
+      }).then(res => {
+        if (res?.data) {
+          this.volunteerConfig = {
+            ...this.volunteerConfig,
+            data: res.data.map(e => [e.team_name, e.vol_name, genderDict[e.vol_gender], e.vol_age])
+          }
+        }
+      })
+    },
+    getFraternities(area_code) {
+      return this.instance.get("/hzh/find-fraternity-detail", {params: {page_size: 999, area_code}}).then(res => {
+        if (res?.data) {
+          this.fraternity = res.data[0]?.fraternity_name
+          return this.fraternities = res.data || []
+        }
+      })
+    },
+    getFraternitySta(area_code) {
+      return this.instance.get("/hzh/count-vol-team", {params: {page_size: 999, area_code}}).then(res => {
+        if (res?.data) {
+          let 团队数量 = 0, 志愿者数量 = 0, 服务学员数量 = 0
+          res.data.forEach(e => {
+            团队数量++
+            志愿者数量 += e.vol_num
+            服务学员数量 += e.stu_num
+          })
+          this.volunteers = {团队数量, 志愿者数量, 服务学员数量}
+        }
+      })
+    },
+    transferAreaCode(code) {//与互助会地区编码互通
+      const format = str => Number(str).toString().padStart(3, '0'),
+          last = /0{6}$/.test(code) ? '' : format(code.substring(6, 9))
+      return code.substring(0, 6) + last
+    },
+    getFraternityData(args) {
+      const row = this.fraternityTypes[args.rowIndex]
+      this.dialog = true
+      this.detail = {eventType: row.type, mapType: 'fraternitySta', list: []}
+      const area_code = this.transferAreaCode(this.areaId)
+      this.fraternityLoading = true
+      this.instance.get("/hzh/find-fraternity-member-detail", {params: {area_code}}).then(res => {
+        if (res?.data) {
+          this.detail = {...this.detail, list: res.data}
+        }
+      }).finally(() => this.fraternityLoading = false)
+    },
+    handleFraternityTableClick(args) {
+      const {columnIndex: type, rowIndex} = args
+      if (type > 0) {
+        const current = this.detail.list[rowIndex]
+        console.log(current)
+        this.fraternityExtra = true
+        this.$set(this.detail, 'extraType', type)
+
+        this.$set(this.detail, 'extraTitle', {
+          1: '家长名单', 2: '学生名单', 3: '活动情况'
+        }[type])
+        if (type == 3) {
+          this.$set(this.detail, 'others', {header: [], rowNum: 3})
+          this.instance.get("/hzh/find-fraternity-activity-detail", {params: {area_code: this.transferAreaCode(this.areaId)}}).then(res => {
+            if (res?.data) {
+              this.$set(this.detail, 'extra', res.data.map(e => [`
+              <div class="staPanel activity flex mar-t10" >
+              <img class="actImg" src="${e.icon_url}"/>
+              <div class="fill mar-l14">
+              <b>${e.activity_name}</b>
+              <div class="flex mar-b8 mar-t16 el-icon-time">&nbsp;&nbsp;${e.start_time + "-" + e.end_time}</div>
+              <div class="flex el-icon-location">&nbsp;&nbsp;${e.activity_address}</div></div></div>`]))
+            }
+          })
+        } else {
+          this.$set(this.detail, 'extra', current[{
+            1: 'parent', 2: 'student'
+          }[type]]?.map(e => [e.name, genderDict[e.gender], e.age]) || [])
+        }
+      }
+    },
+    getFraternityTypes(area_code) {
+      area_code = this.transferAreaCode(area_code)
+      return this.instance.get("/hzh/count-fraternity", {params: {area_code}}).then(res => {
+        if (res?.data) {
+          return res.data
+        }
+      })
     }
   },
   created() {
     Vue.use(scrollBoard)
     this.dict.load('appIntegralApplyEventStatus', 'yesOrNo', 'integralSGOStatus')
   },
-  mounted() {
-    this.watchTablePageChange()
-  }
 }
 </script>
 <style scoped lang="scss">
@@ -641,6 +849,14 @@ export default {
       border-radius: 2.2px;
       color: #B3DDE5;
       cursor: pointer;
+
+      &::placeholder {
+        color: inherit;
+      }
+    }
+
+    .el-input__icon {
+      color: #B3DDE5;
     }
 
     .el-input__suffix {
@@ -689,7 +905,7 @@ export default {
     }
   }
 
-  .staPanel {
+  :deep(.staPanel) {
     text-align: center;
     font-size: 15px;
     line-height: 20px;
@@ -739,6 +955,23 @@ export default {
         }
       }
     }
+
+    &.activity {
+      background: #ffffff0a;
+      padding: 14px;
+      height: 108px;
+      text-align: left;
+
+      b {
+        color: #FFFFFF;
+      }
+
+      .actImg {
+        width: 80px;
+        height: 80px;
+        flex-shrink: 0;
+      }
+    }
   }
 
   .chart {
@@ -754,7 +987,7 @@ export default {
     }
   }
 
-  .title {
+  :deep(.title ) {
     padding-left: 10px;
     line-height: 30px;
     background-image: linear-gradient(270deg, #1f436600 0%, #245a7570 99%);
@@ -777,6 +1010,18 @@ export default {
   :deep(.dv-scroll-board) {
     height: 200px;
 
+    &.origin {
+      .row-item {
+        border: none;
+        height: unset;
+        line-height: normal;
+      }
+
+      .ceil {
+        padding: 0;
+      }
+    }
+
     .header-item {
       color: #02FEFF;
     }
@@ -806,28 +1051,6 @@ export default {
     }
   }
 
-  .dots {
-    height: 36px;
-    padding-top: 22px;
-    padding-bottom: 8px;
-
-    .dot {
-      width: 6px;
-      height: 6px;
-      border-radius: 50%;
-      background: #679a9a80;
-      margin-right: 8px;
-
-      &.current {
-        background: #02FEFF;
-      }
-
-      &:last-of-type {
-        margin-right: 0;
-      }
-    }
-  }
-
   .centerBottom {
     position: absolute;
     bottom: 0;
@@ -875,7 +1098,8 @@ export default {
         color: #02FEFF;
       }
     }
-    &.box2{
+
+    &.box2 {
       background-image: url("./assets/box2.png");
     }
   }
@@ -941,5 +1165,32 @@ export default {
     }
   }
 
+  .fraternityImg {
+    width: 244px;
+    height: 268px;
+    flex-shrink: 0;
+  }
+
+  :deep(.el-carousel) {
+    .el-carousel__container {
+      height: 372px;
+    }
+
+    .el-carousel__indicators {
+      .el-carousel__indicator {
+        .el-carousel__button {
+          width: 6px;
+          height: 6px;
+          border-radius: 50%;
+          background: #679a9a80;
+          flex-shrink: 0;
+        }
+
+        &.is-active > .el-carousel__button {
+          background: #02FEFF;
+        }
+      }
+    }
+  }
 }
 </style>

project/fengdu/AppBIBoard/components/fdDialog.vue

@@ -7,6 +7,13 @@
         <slot/>
       </div>
     </div>
+    <div class="dialog mar-l16" v-if="$slots.extra&&extraDialog">
+      <div class="header mar-b8" v-text="extraTitle"/>
+      <div class="closeIcon" @click="$emit('update:extraDialog',false)"/>
+      <div class="content">
+        <slot name="extra"/>
+      </div>
+    </div>
   </section>
 </template>
 <script>
@@ -18,10 +25,9 @@ export default {
   },
   props: {
     visible: Boolean,
-    title: {default: "弹窗标题"}
+    title: {default: "弹窗标题"},
-  },
+    extraTitle:{default:"额外内容标题"},
-  data() {
+    extraDialog: Boolean
-    return {}
   },
   methods: {},
 }
@@ -33,6 +39,7 @@ export default {
   top: 50%;
   transform: translate(-50%, -50%);
   z-index: 202310231147;
+  display: flex;
 
   .dialog {
     position: relative;