测试添加gif图标

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} from 'view-design'
+import {Button, Collapse, Panel, Modal, Table, Drawer, Tabs, TabPane} from 'view-design'
 import 'view-design/dist/styles/iview.css'
 
 Vue.config.productionTip = false
@@ -18,6 +18,8 @@ Vue.component('Panel', Panel)
 Vue.component('Modal', Modal)
 Vue.component('Table', Table)
 Vue.component('Drawer', Drawer)
+Vue.component('Tabs', Tabs)
+Vue.component('TabPane', TabPane)
 /* eslint-disable no-new */
 new Vue({
   el: '#app',

src/util/api.js

 let BASE_URL = ''
+let STATIC_URL = ''
 switch (process.env.NODE_ENV) {
 case 'production':
-  BASE_URL = 'http://211.136.105.193/elev/static/'
+  BASE_URL = ''
+  STATIC_URL = 'http://211.136.105.193/elev/static/'
   break
 default:
-  BASE_URL = 'http://localhost:8080/static/'
+  BASE_URL = ''
+  STATIC_URL = 'http://localhost:8080/static/'
 };
 export default {
   BASE_URL,
+  STATIC_URL,
 }
 

src/views/main.vue

@@ -18,6 +18,12 @@
         </div>
       </Panel>
     </Collapse>
+    <Tabs @on-click="handleTabSelect" v-model="curTab" class="tab-menu">
+      <TabPane label="全部" name="all"/>
+      <TabPane label="已签约" name="1"/>
+      <TabPane label="已完工" name="3"/>
+      <TabPane label="同意>50%" name="4"/>
+    </Tabs>
     </template>
     <Drawer :closable="false" width="24%" v-model="detailDrawer">
       <div slot="header">
@@ -61,6 +67,7 @@ export default {
   data() {
     return {
       map: null,
+      curTab: 'all',
       detailDrawer: false,
       detailDrawerData: {},
       mapConfig: {
@@ -240,6 +247,7 @@ export default {
         community: [],
         building: [],
       },
+      eleDataSource: [],
     }
   },
   mounted() {
@@ -261,10 +269,14 @@ export default {
         }
       }))
     },
-    initMenu() { // 初始化列表菜单
+    async initMenu() { // 初始化列表菜单
       const streets = Object.keys(this.streetDic)
       if (this.$route.query && this.$route.query.name) { // 判断路由有街镇则显示该街镇列表
         const streetName = this.$route.query.name
+        /** ----请求电梯加装数据----- */
+        const {data} = await axios.get(`http://211.136.105.193/apiv2/service-report/public/elv/consentRate?strName=${streetName}`)
+        this.eleDataSource = data && data.data && data.data.content // 请求
+        /** ---------------------- */
         const result = streets.find(key => streetName.indexOf(this.streetDic[key]) >= 0) // 取得相符的街镇数据
         this.streetList = [result]
         this.$nextTick(() => { // 为了展开默认街镇小区列表
@@ -345,35 +357,71 @@ export default {
       this.addMarker(name)
       this.showInfoTips(null, location, {title: name, content: address})
     },
-    async addMarker(name) { // 点击小区后展示各楼栋的marker
+    addMarker(name) { // 点击小区后展示各楼栋的marker
       this.map.remove(this.markerCollection) // 移除之前的marker
       const markerCollection = []
-      const {data} = await axios.get('http://yapi.omniview.pro/mock/279/public/elv/consentRate')
-      const mock = [{
-        'unitNo': '20号',
-        'streetId': '12345',
-        'streetName': '街道',
-        'sectId': '123123',
-        'sectName': '浦东龙阳花苑',
-        'unitId': '112',
-        'unitAddr': '门牌地址',
-        'totUnit': 33,//应投
-        'ratio': 0.15233445,//同意率
-        'agree': 10,//统一
-        'disagree': 10, //不同意
-        'status' : '2'
-      }]
+      // const {data} = await axios.get('http://yapi.omniview.pro/mock/279/public/elv/consentRate')
+      // const mock = [{
+      //   'unitNo': '20号',
+      //   'streetId': '12345',
+      //   'streetName': '街道',
+      //   'sectId': '123123',
+      //   'sectName': '浦东龙阳花苑',
+      //   'unitId': '112',
+      //   'unitAddr': '门牌地址',
+      //   'totUnit': 33,//应投
+      //   'ratio': 0.15233445,//同意率
+      //   'agree': 10,//同意
+      //   'disagree': 10, //不同意
+      //   'status' : '2'
+      // }]
       const communityName = name && (name + '').replace('(补)', '').replace('（补）', '')
-      const datasource = mock.filter(e => e.sectName.indexOf(communityName) >= 0 || communityName.indexOf(e.sectName) >= 0) // 筛选出返回数据中的相关小区数据
+      const datasource = this.eleDataSource.filter(e => e.sectName.indexOf(communityName) >= 0 || communityName.indexOf(e.sectName) >= 0) // 筛选出返回数据中的相关小区数据
       this.markerCollection = this.initMarker(name, datasource)
       this.map.add(this.markerCollection)
     },
+    addSpecialMarker() { // 添加地图中特殊的标志点（已公告、同意率>50%等）
+      const markers = []
+      this.eleDataSource.forEach(item => {
+        if (item.ratio > 0) { // TODO 应该是同意率>50
+          const communityName = item.sectName && (item.sectName + '').replace('(补)', '').replace('（补）', '')
+          const cur = this.buildingData.building.find(e => {
+            const name = e.name && (e.name + '').replace('(补)', '').replace('（补）', '')
+            return (communityName.indexOf(name) >= 0 || name.indexOf(communityName) >= 0) && (e.buildingNo.indexOf(item.unitNo) >= 0 || item.unitNo.indexOf(e.buildingNo) >= 0) && (e.lon && e.lat)
+          }) // 查找出返回数据中的同一幢楼栋数据
+          const marker = new AMap.Marker({
+            position: [cur.lon, cur.lat],
+            offset: new AMap.Pixel(-10, -65),
+            icon: new AMap.Icon({
+              size: [30, 45],
+              image: require('@/assets/images/than500.gif'),
+            }),
+            extData: {
+              community: cur.name,
+              buildingNo: cur.buildingNo,
+              intention: cur.intention,
+              lon: cur.lon,
+              lat: cur.lat,
+              color: cur.color,
+              ...item
+            },
+          }).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)
+    },
     initMarker(name, buildingDatas) { // 初始化添加楼栋图标，返回图标集合
       const markerCollection = []
       const configMarker = item => {
         const buildingName = item.name && (item.name + '').replace('(补)', '').replace('（补）', '')
         if (buildingName.indexOf(name) < 0 && (item.buildingNo + '').indexOf(name) < 0) return // （筛选出点击的小区的楼栋）楼栋的小区名和name一致则往下走
-        const curObj = buildingDatas.find(e => e.unitNo.indexOf(item.buildingNo) >= 0 || item.buildingNo.indexOf(e.unitNo) >= 0) // 查找出返回数据中的同一幢楼栋数据
+        const curObj = buildingDatas.find(e => e.unitAddr.indexOf(item.buildingNo) >= 0 || item.buildingNo.indexOf(e.unitAddr) >= 0) // 查找出返回数据中的同一幢楼栋数据
         if (!curObj) return
         if(item.lon && item.lat && item.intention) {
           const marker = new AMap.Marker({
@@ -453,6 +501,9 @@ export default {
       object3d.add(prism)
       return object3d
     },
+    handleTabSelect(name) {
+      console.log('tab--', name)
+    },
   },
   computed: {
     tableHeight() {
@@ -462,12 +513,13 @@ export default {
   watch: {
     async curStreet(cur) { // 监控转换后的路由街镇名来获取匹配数据
       if (!cur) return
-      const {data} = await axios.get(`${this.$api.BASE_URL}/mock/${cur}-building.json`)
+      const {data} = await axios.get(`${this.$api.STATIC_URL}/mock/${cur}-building.json`)
       this.buildingData = data || {
         community: [],
         building: [],
       }
       this.initLayers()
+      this.addSpecialMarker() // TODO 是否先清除之前的？
     }
   }
 }
@@ -494,6 +546,12 @@ export default {
           display block
           min-width 5rem
           text-align right
+  .tab-menu
+    position absolute
+    top 1rem
+    left calc(18% + 2rem)
+    z-index 100
+    background #fff
 .drawer-content
   >div
     margin-bottom 2rem
@@ -549,4 +607,11 @@ export default {
       button
         text-align left
         font-size 1rem
+.tab-menu
+  .ivu-tabs-bar
+    margin-bottom 0
+  .ivu-tabs-nav
+    .ivu-tabs-tab
+      &:last-child
+        margin-right 0
 </style>