地图网格功能暂存

.gitignore

@@ -2,7 +2,7 @@
 # Logs
 logs
 *.log
-*.DS_Stores
+*.DS_Store
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*

index.html

@@ -18,8 +18,11 @@
   <!-- built files will be auto injected -->
 </body>
 <script src="./static/hls.js"></script>
+<!-- 下面是开发用 -->
 <script src="./static/SMap.min.js"></script>
+<!-- 下面是生产用 -->
 <!-- <script src="./static/esm/SMap.min.js"></script> -->
 <script src="./static/Plugins.min.js"></script>
+<script src="./static/GeoTask.min.js"></script>
 
 </html>

src/components/MonitorComponents/MonitorMap/monitor-map.vue

@@ -3,12 +3,13 @@
 </template>
 
 <script>
-const {SMap, Plugins} = window
+const {SMap, Plugins, GeoTask} = window
 export default {
   name: 'MonitorMap',
   data() {
     return {
       map: null,
+      identifytask: null,
     }
   },
   mounted() {
@@ -31,6 +32,7 @@ export default {
         // this.map.hideXQ_Poly()
         this.map.hideXQ_Point()
         this.map.hideMPZ()
+        this.addGridListener()
         this.addListener()
         this.$emit('complete')
       })
@@ -44,9 +46,66 @@ export default {
             this.$emit('event', res.results[0].graphic.attributes)
           }
         })
+        const param = {
+          layerUniqueId: 'aaa',
+          url: 'http://10.81.71.243:23456/hmfmstest/gisshare/C/rest/services/YPZRWG/MapServer',
+          displayed: false, //查询接口是否在地图上显示
+          tolerance: 5,
+          geometry: eventParamter.mapPoint
+        }
+        this.identifytask.MapService(param).then(res => {
+          if (res.results && res.results.length > 0) {
+            this.$emit('grid', res.results[0].feature.attributes)
+          }
+        })
       })
     },
-
+    addGridListener() {
+      this.identifytask = new GeoTask.Identify(this.map.view)
+      // this.identifytask.on(SMap.MapEvent.pointermove, (result, geometry) => {
+      //   console.log('----', result, geometry)
+      //   if (geometry) {
+      //     this.map.view.popup.defaultPopupTemplateEnabled = true
+      //     this.map.view.popup.autoOpenEnabled = false
+      //     this.map.view.popup.open({
+      //       location: geometry,
+      //       title: result.attributes.name,
+      //       content: createContentpopup(result.attributes),
+      //     })
+      //   }
+      // })
+    },
+    addGrid(name) {
+      return SMap.load([
+        'esri/Map',
+        'esri/layers/FeatureLayer',
+        'esri/renderers/SimpleRenderer',
+        'esri/symbols/SimpleMarkerSymbol'
+      ]).then(([, FeatureLayer]) => {
+        const gridLayer = new FeatureLayer({
+          url: 'http://10.81.71.243:23456/hmfmstest/gisshare/C/rest/services/YPZRWG/MapServer/0',
+          renderer: {
+            type: 'simple',
+            symbol: {
+              type: 'simple-fill',
+              color: 'rgba(255,235,59,.3)',
+              outline: {
+                // color: [128, 128, 128, 0.5],
+                color: [0, 0, 0, 1],
+                width: 2
+              }
+            }
+          },
+          definitionExpression: `所属街 = '${name}'`,
+          id: 'grid'
+        })
+        this.map.view.map.add(gridLayer)
+        return gridLayer
+      })
+    },
+    removeGrid() {
+      this.map.removeLayer('grid')
+    },
     // 添加点
     addPoint({key, data, labelKey = null, icon = 'test.png', size = 14, color}) {
       if (!this.map) return

src/server/api.js

 let BASE_URL = ''
 let DATA_URL = ''
+let VIDEO_URL = ''
 switch (process.env.NODE_ENV) {
 case 'production':
   // BASE_URL = 'http://10.89.4.164:18080/api'
-  // VIDEO_URL = 'http://10.89.4.179:27343/api/v1/camera'
+  // VIDEO_URL = 'http://10.89.4.179:27343'
   BASE_URL = 'http://yangpu.hm.omniview.pro/api'
   VIDEO_URL = 'http://10.89.1.208:7000/hawkeye'
   DATA_URL = 'http://10.89.1.208:10005'
   break
 default:
   BASE_URL = 'http://yangpu.hm.omniview.pro/api'
+  VIDEO_URL = 'http://10.89.1.208:7000/hawkeye'
   DATA_URL = 'http://10.89.1.208:10005'
 }
 export default {
@@ -41,7 +43,7 @@ export default {
   GET_COMPRESS_COUNT: '/dc/countCompressStationsByStreet', // 街道小型压缩站数目
   GET_GARBAGE_COUNT: '/dc/countPointsByStreet', // 街道垃圾收集点数目
   GET_TOILET_COUNT: '/dc/countToiletsByStreet', // 街道环卫公厕数目
-  GET_STREET_BASIC: '/dc/getStreetGridPowerByStreetGridId', // 街道基数
-  GET_VIDEO_URL: VIDEO_URL+'/api/v1/camera/', // 后面接id获取视频地址
+  GET_GRID_PERSON: '/dc/getStreetGridPowerByStreetGridId', // 网格人员信息
+  GET_VIDEO_URL: VIDEO_URL + '/api/v1/camera/', // 后面接id获取视频地址
   GET_HEALTH_INFO: '/service-documents-ddd/public/property/health/degree', // 物业健康度
 }

src/store/actions.js

@@ -26,7 +26,6 @@ export default {
     dispatch('getDoneList')
     dispatch('getHealthInfo')
     // dispatch('getInspection')
-    // dispatch('getStreetBasic')
   },
   async getGreenInfo({commit}) {
     const result = [
@@ -187,10 +186,4 @@ export default {
   //     console.log('res --', res)
   //   })
   // }
-  // getStreetBasic({commit}) { // 街道基数
-  //   ajax.get({url: api.DATA_URL + api.GET_STREET_BASIC, params: {street: '五角场街道', gridId: 10027}}).then(res => {
-  //     console.log('basic', com.confirm(res, 'data.content', {}))
-  //     // commit('SET_STREET_BASIC', com.confirm(res, 'data.content', {}))
-  //   })
-  // },
 }

src/views/components/application.vue

 <template>
   <div class="application">
-    <div v-for="item in list" :key="item.name" @click.prevent="handleClick(item.key)">
-      <div v-if="'all'==item.type">
-        <img :src="require(`@/assets/images/${item.icon}`)" />
-        <p>{{item.name}}</p>
-      </div>
-      <div v-if="$store.state.currentStreetInfo.id==item.type">
+    <template v-for="item in list">
+      <div
+        v-if="'all' == item.type || currentStreetInfo.name.indexOf(item.type) >= 0"
+        :key="item.name"
+        @click.prevent="handleClick(item.key, item.url)"
+      >
         <img :src="require(`@/assets/images/${item.icon}`)" />
         <p>{{item.name}}</p>
       </div>
-    </div>
+    </template>
   </div>
 </template>
 
@@ -23,20 +23,25 @@ export default {
         {name: '派单系统', icon: 'app2.png', type: 'all'},
         {name: '气象系统', icon: 'app3.png', type: 'all'},
         {name: '网格系统', icon: 'app4.png', key: 'jumpGridPage', type: 'all'},
-        {name: '五角场商圈', icon: 'app5.png', type: '310110019000', key: 'jumpSpecicalPage'},
+        {name: '五角场商圈', icon: 'app5.png', type: '五角场', key: 'jumpSpecicalPage', url: 'https://test.chanchuang.jdcloud.com/shsq/index'},
+        {name: '一铺一档', icon: 'app5.png', type: '控江', key: 'jumpSpecicalPage', url: 'http://10.216.71.157/ypyd/#/MxbDataShow'},
       ]
     }
   },
+  computed: {
+    currentStreetInfo() {
+      return this.$store.state.currentStreetInfo
+    }
+  },
   methods: {
-    handleClick(key) {
-      key && this[key]()
+    handleClick(key, url = '') {
+      key && this[key](url)
     },
-    jumpSpecicalPage(){
-      const {specialUrl} = this.$store.state.currentStreetInfo
-      window.open(specialUrl)
+    jumpSpecicalPage(url){
+      url && window.open(url)
     },
     jumpGridPage() {
-      const {url} = this.$store.state.currentStreetInfo
+      const {url} = this.currentStreetInfo
       window.open(url)
     },
   }
@@ -47,11 +52,10 @@ export default {
 .application
   display flex
   align-items center
-  justify-content space-around
   >div
+    flex 1
     text-align center
     cursor pointer
-    padding 0 .05rem
     &:hover
       box-shadow 0 .3rem 0.1rem 0.05rem rgba(0,0,0,0.2)
     img

src/views/main.vue

@@ -9,7 +9,7 @@
     gap="0.05rem"
     :complete="complete"
   >
-    <m-map ref="map" @complete="mapComplete" @event="handleMapClick"/>
+    <m-map ref="map" @complete="mapComplete" @event="handleMapClick" @grid="handleGridClick" />
     <m-title area="title" :bgImg="require('@/assets/images/title-bg.png')">{{currentStreetInfo.name}}城市运行平台</m-title>
     <m-animate enter="fadeInLeft" leave="fadeOutLeft">
       <LeftComponent v-show="!fullView" area="left"/>
@@ -143,6 +143,7 @@ export default {
       ],
       doneModal: false,
       doneData: {},
+      gridLayer: null,
     }
   },
   computed: {
@@ -203,12 +204,14 @@ export default {
       this.initMapFocus()
       map.addPolygon({paths: this.$store.state.streetPaths[id], fillColor: 'rgba(51,145,255,.3)'})
       map.addBoundary({name: name})
+      this.gridLayer = map.addGrid(this.currentStreetInfo.name)
     },
     initMapFocus() {
       const {center} = this.currentStreetInfo
       this.$refs.map.focus(...center, 5.5)
     },
     handleMapClick(data) {
+      if (!data) return
       if (data.key === 'camera') {
         const {deviceGbcode, deviceName} = data
         this.$ajax.get({
@@ -220,12 +223,23 @@ export default {
       } else if (data.key === 'patrol') {
         this.patrolData = data
         this.patrolModal = true
-      } else {
+      } else if (data.key === 'smart') {
         this.detailData = data
         this.detailModal = true
       }
       // this.$refs.map.focus(data.x || data.gpsx, data.y || data.gpsy, 8)
     },
+    handleGridClick(data) {
+      console.log('grid-click', data)
+      this.$refs.map.removeGrid()
+      // this.$ajax.get({
+      //   url: this.$api.DATA_URL + this.$api.GET_GRID_PERSON,
+      //   params: {street: this.currentStreetInfo.name, gridId: data['网格编']}
+      // }).then(res => {
+      //   this.gridPersonList = this.$com.confirm(res, 'data.content', [])
+      //   this.gridPersonModal = true
+      // })
+    },
     handleListClick(data) {
       if (this.handleCurTab === '处置中') {
         this.detailData = data