更新

src/main.js

@@ -6,7 +6,7 @@ import App from './App'
 import router from './router'
 import common from './util/common'
 import api from './util/api'
-import {Button, Collapse, Panel, Modal, Table, Drawer, Tabs, TabPane} from 'view-design'
+import {Button, Collapse, Panel, Modal, Table, Drawer, Tabs, TabPane, Spin} from 'view-design'
 import 'view-design/dist/styles/iview.css'
 
 Vue.config.productionTip = false
@@ -20,6 +20,7 @@ Vue.component('Table', Table)
 Vue.component('Drawer', Drawer)
 Vue.component('Tabs', Tabs)
 Vue.component('TabPane', TabPane)
+Vue.component('Spin', Spin)
 /* eslint-disable no-new */
 new Vue({
   el: '#app',

src/util/common.js

@@ -30,11 +30,10 @@ export default{
     if (color.indexOf('黄') >= 0) return {'background-color': 'gold'}
     if (color.indexOf('红') >= 0) return {'background-color': 'red'}
   },
-  switchStarNum(intention) {
-    if (!intention) return 0
-    if (intention.indexOf('一') >= 0) return 1
-    if (intention.indexOf('二') >= 0 || intention.indexOf('两') >= 0) return 2
-    if (intention.indexOf('三') >= 0) return 3
+  switchStarNum(val) {
+    if (!+val) return 0
+    if (+val > 3) return 3
+    return +val
   },
   switchStatus(status) {
     status = Number(status)

src/views/main.vue

@@ -61,7 +61,7 @@
         <div>
           <p class="title">居民意愿度</p>
           <!-- <p class="title">加装可能性</p> -->
-          <img v-for="i in $com.switchStarNum(detailDrawerData.intention)" :key="i" class="star" src="@/assets/images/star1.png"/>
+          <img v-for="i in $com.switchStarNum(detailDrawerData.intentionStar)" :key="i" class="star" src="@/assets/images/star1.png"/>
         </div>
         <div v-show="detailDrawerData.totUnit || detailDrawerData.ratio">
           <p class="title">加装意愿收集</p>
@@ -79,6 +79,7 @@
     <Modal v-model="detailModal" width="90%" :footer-hide="true">
       <Table v-if="detailModal" :columns="columns" :data="detailData" size="small" :max-height="tableHeight"/>
     </Modal>
+    <Spin size="large" fix v-show="spinShow" style="z-index:9999;"/>
   </div>
 </template>
 
@@ -90,6 +91,7 @@ export default {
   data() {
     return {
       map: null,
+      spinShow: false,
       detailDrawer: false,
       detailDrawerData: {},
       mapConfig: {
@@ -219,12 +221,12 @@ export default {
           minWidth: 100,
           align: 'center',
         },
-        {
-          title: '居民意愿',
-          key: 'intention',
-          minWidth: 100,
-          align: 'center',
-        },
+        // {
+        //   title: '居民意愿',
+        //   key: 'intention',
+        //   minWidth: 100,
+        //   align: 'center',
+        // },
       ],
       detailData: [],
       streetDic: {
@@ -341,11 +343,15 @@ export default {
       this.map.add([polygon])
     },
     handleDetail({name}) {
-      this.detailData = this.buildingData.building.filter(item => {
-        const buildingName = item.name && (item.name + '').replace('(补)', '').replace('（补）', '')
-        return buildingName.indexOf(name) >= 0 || (item.buildingNo + '').indexOf(name) >= 0
-      })
-      this.detailModal = true
+      this.spinShow = true
+      setTimeout(() => {
+        this.detailData = this.buildingData.building.filter(item => {
+          const buildingName = item.name && (item.name + '').replace('(补)', '').replace('（补）', '')
+          return buildingName.indexOf(name) >= 0 || (item.buildingNo + '').indexOf(name) >= 0
+        })
+        this.detailModal = true
+        this.spinShow = false
+      }, 0)
     },
     initLayers() { // 配置地图图层信息
       if (!this.curStreetData.name) return
@@ -428,10 +434,10 @@ export default {
             extData: {
               community: cur.name,
               buildingNo: cur.buildingNo,
-              intention: cur.intention,
               lon: cur.lon,
               lat: cur.lat,
               color: cur.color,
+              intentionStar: 2, // 意愿度为：两颗星
               ...item
             },
           }).on('click', e => {
@@ -455,14 +461,15 @@ export default {
         const communityName = item.community && (item.community + '').replace('(补)', '').replace('（补）', '')
         item.building.match(/([1-9]*)号/)
         item.unitNo = RegExp.$1
-        const datasource = this.eleDataSource.filter(e => (e.sectName && e.sectName.indexOf(communityName) >= 0) || communityName.indexOf(e.sectName) >= 0) // 筛选出返回数据中的相关小区数据
-        const curObj = datasource.find(e => this.isSameUnit(e.unitNo, item.unitNo)) // 查找出返回数据中的同一幢楼栋数据
+        /** 2021-04-28 已公告图标点击不用出侧边栏情况 */
+        // const datasource = this.eleDataSource.filter(e => (e.sectName && e.sectName.indexOf(communityName) >= 0) || communityName.indexOf(e.sectName) >= 0) // 筛选出返回数据中的相关小区数据
+        // const curObj = datasource.find(e => this.isSameUnit(e.unitNo, item.unitNo)) // 查找出返回数据中的同一幢楼栋数据
         const cur = this.buildingData.building.find(e => {
           const name = e.name && (e.name + '').replace('(补)', '').replace('（补）', '')
           return (communityName.indexOf(name) >= 0 || name.indexOf(communityName) >= 0) && this.isSameUnit(e.buildingNo, item.unitNo) && (e.lon && e.lat)
         }) // 查找出返回数据中的同一幢楼栋数据
         if (!cur) return
-        const curInfo = this.announceSource.find(e => e.address === item.building)
+        // const curInfo = this.announceSource.find(e => e.address === item.building)
         const marker = new AMap.Marker({
           position: [cur.lon, cur.lat],
           offset: new AMap.Pixel(-10, -65),
@@ -470,22 +477,23 @@ export default {
             size: [20, 30],
             image: require('@/assets/images/notice.gif'),
           }),
-          extData: {
-            community: cur.name,
-            buildingNo: cur.buildingNo,
-            intention: cur.intention,
-            lon: cur.lon,
-            lat: cur.lat,
-            color: cur.color,
-            ...curObj,
-            status: (curInfo && curInfo.status) || 1,
-          },
-        }).on('click', e => {
-          this.detailDrawer = true
-          this.detailDrawerData = marker.getExtData()
-          const {lon, lat} = this.detailDrawerData
-          this.showInfoTips(e, [e.lnglat.getLng(), e.lnglat.getLat()], marker.getExtData(), this.addPrism(lon, lat))
+          // extData: {
+          //   community: cur.name,
+          //   buildingNo: cur.buildingNo,
+          //   intention: cur.intention,
+          //   lon: cur.lon,
+          //   lat: cur.lat,
+          //   color: cur.color,
+          //   ...curObj,
+          //   status: (curInfo && curInfo.status) || 1,
+          // },
         })
+        // .on('click', e => {
+        //   this.detailDrawer = true
+        //   this.detailDrawerData = marker.getExtData()
+        //   const {lon, lat} = this.detailDrawerData
+        //   this.showInfoTips(e, [e.lnglat.getLng(), e.lnglat.getLat()], marker.getExtData(), this.addPrism(lon, lat))
+        // })
         markers.push(marker)
       })
       this.map.add(markers)
@@ -512,10 +520,10 @@ export default {
             extData: {
               community: item.name,
               buildingNo: item.buildingNo,
-              intention: item.intention,
               lon: item.lon,
               lat: item.lat,
               color: item.color,
+              intentionStar: 1, // 意愿度为：一颗星
               ...curObj
             },
           }).on('click', e => {
@@ -712,6 +720,8 @@ export default {
   top .1rem
   left calc(18% + 0.2rem)
   z-index 100
+  backdrop-filter blur(.01rem)
+  -webkit-backdrop-filter blur(.01rem)
   p
     display flex
     align-items center