调整优化

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

@@ -8,18 +8,14 @@ import SMap from './esm/SMap'
 export default {
   name: 'MonitorMap',
   props: {
-    mapUrl: {
-      type: String,
-      default: 'http://www.962121.net/gis_system/smimap/index.html#/',
-    },
     iconUrl: {
       type: String,
       default: 'http://www.962121.net/hmfmstest/shanghaiwuye/web/dataV/propertyinspector/static/icons/',
     },
-    mapJs: {
+    mode: {
       type: String,
-      default: 'http://www.962121.net/gis_system/smimap/mapdebug/ShsmiGis.Bridge.js',
-    },
+      default: '3D',
+    }
   },
   data() {
     return {
@@ -27,59 +23,41 @@ export default {
     }
   },
   mounted() {
-    // this.inject().then(this.initMap)
     this.map = new SMap.Map('map', {
-      viewMode: '2D',
+      viewMode: this.mode,
       center: [0, 0],
       zoom: 5,
+      pitch: 60,
       zooms: [1, 12],
-      // mapStyle: 'smap://styles/dark'
+      mapStyle: 'smap://styles/dark'
+    }).on(SMap.MapEvent.maploaded, () => {
+      this.$emit('complete', this.map)
+      this.addEventListener()
     })
   },
   computed: {
     sizeRate() {
-      return Math.floor(screen.height * 1.48 / 100 / 11)
+      return Number((screen.height / 800).toFixed(1))
     },
   },
   methods: {
-    inject() {
-      return new Promise(resolve => {
-        if (document.getElementById('_mapjs')) {
-          resolve()
-          return
-        }
-        const mapjs = document.createElement('script')
-        mapjs.type = 'text/javascript'
-        mapjs.src = this.mapJs
-        mapjs.setAttribute('id', '_mapjs')
-        document.head.appendChild(mapjs)
-        window.onload = () => resolve()
+    addEventListener() {
+      this.map.on(SMap.MapEvent.click, (view, param) => {
+        console.log('地图点击----', view, param)
+        view.hitTest(param).then(async res => {
+          console.log('地图点击 回调---', res)
         })
-    },
-    initMap() {
-      const {ShsmiGis} = window
-      this.map = new ShsmiGis.Bridge({
-        id: 'map',
-        url: this.mapUrl,
-        onReady: () => {
-          // console.log('地图创建完成')
-          this.addListener()
-          this.$emit('complete')
-        }
       })
-    },
-
-    addListener() {
-      this.map.addEventListener(arg => {
-        switch (arg.action.toLowerCase()) {
-        case 'selectfeatures':
-          if (!arg.layername) return
-          this.$emit('event', arg)
-          break
-        default:
-          break
-        }
-      }, this)
+      // this.map.addEventListener(arg => {
+      //   switch (arg.action.toLowerCase()) {
+      //   case 'selectfeatures':
+      //     if (!arg.layername) return
+      //     this.$emit('event', arg)
+      //     break
+      //   default:
+      //     break
+      //   }
+      // }, this)
     },
 
     /**
@@ -94,14 +72,17 @@ export default {
      */
     addPoint({name, mode = 'add', key, data, labelKey = null, icon = 'test.png', size = 20, color}) {
       if (!this.map) return
-      this.removePoint(name)
-      const params = this.getMapParams({data, key, labelKey, icon, size, color})
-      params.name = name
-      params.mode = mode
-      this.map.Invoke({
-        ActionName: 'displayJsonData',
-        Parameters: JSON.stringify(params),
-      })
+      // this.removePoint(name)
+      // const params = this.getMapParams({data, key, labelKey, icon, size, color})
+      // params.name = name
+      // params.mode = mode
+      // this.map.Invoke({
+      //   ActionName: 'displayJsonData',
+      //   Parameters: JSON.stringify(params),
+      // })
+      const markerGroup = new SMap.OverlayGroup(this.getMapParams({data, key, labelKey, icon, size, color}))
+      this.map.add(markerGroup)
+      return markerGroup
     },
 
     /**
@@ -110,13 +91,14 @@ export default {
      */
     removePoint(name) {
       if (!this.map) return
-      this.map.Invoke({
-        ActionName: 'displayJsonData',
-        Parameters: JSON.stringify({
-          name,
-          mode: 'delete',
-        })
-      })
+      // this.map.Invoke({
+      //   ActionName: 'displayJsonData',
+      //   Parameters: JSON.stringify({
+      //     name,
+      //     mode: 'delete',
+      //   })
+      // })
+      this.map.remove(name)
     },
 
     /**
@@ -129,76 +111,100 @@ export default {
      * @param {String} color [可选 - 标签颜色（默认'#47B3FF'）]
      */
     getMapParams({data = [], key, labelKey, icon, size, color = '#47B3FF'}) {
-      const dataArray = []
-      const uniqueValueInfos = []
-      const fieldJsonArray = []
-      for (const e in data[0]) {
-        fieldJsonArray.push({
-          name: e,
-          alias: e,
-          type: 'string'
-        })
-      }
-      fieldJsonArray.push({
-        name: 'name',
-        alias: '标签',
-        type: 'string',
-      })
-      data.forEach(item => {
-        const array = {
-          codX: item.X || item.x,
-          codY: item.Y || item.y,
-          codZ: 0,
-          attrs: {
-            ...item,
-          },
-        }
-        if (labelKey) {
-          array.attrs.name = item[labelKey]
-        } else {
-          array.attrs.name = ''
-        }
-        dataArray.push(array)
-        uniqueValueInfos.push({
-          value: item[key],
-          label: (item[labelKey] || item[key]) + '',
-          symbol: {
-            type: 'point-3d',
-            symbolLayers: [
-              {
-                type: 'icon',
+      if (data.length === 0) return []
+      return data.map(item => {
+        return new SMap.Marker({
+          icon: new SMap.Icon({
+            size: new SMap.size(size * this.sizeRate, size * this.sizeRate),
+            // image: this.iconUrl + (item.icon || icon)
+            image: require(`@/assets/images/${item.icon || icon}`)
+          }),
+          attributes: {...item},
+          label: labelKey ? (new SMap.Label({
+            text: item[labelKey],
             size: size * this.sizeRate,
-                resource: {
-                  href: this.iconUrl + (item.icon || icon),
-                },
-              },
-            ]
-          }
+            color,
+            xoffset: 0.1,
+            yoffset: 0.1,
+            // zoffset: 10,
+            horizontalAlignment: 'left',
+            verticalAlignment: 'top',
+          })) : null,
+          position: [item.X || item.x, item.Y || item.y, 0],
         })
       })
-      return {
-        dataArray,
-        popupEnabled: false, // 是否打开弹出框
-        legendVisible: false, // 图例是否可见
-        type: 'point',
-        fieldJsonArray,
-        renderer: {
-          type: 'unique-value',
-          field: key,
-          defaultLabel: '无数据',
-          uniqueValueInfos,
-        },
-        labelsymbol: {
-          symbol: {
-            type: 'text',
-            color: color,
-            // color: '#00f2ff',
-            haloSize: 0,
-            haloColor: 'white',
-          },
-          labelPlacement: 'center-right',
-        }
-      }
+
+
+      // const dataArray = []
+      // const uniqueValueInfos = []
+      // const fieldJsonArray = []
+      // for (const e in data[0]) {
+      //   fieldJsonArray.push({
+      //     name: e,
+      //     alias: e,
+      //     type: 'string'
+      //   })
+      // }
+      // fieldJsonArray.push({
+      //   name: 'name',
+      //   alias: '标签',
+      //   type: 'string',
+      // })
+      // data.forEach(item => {
+      //   const array = {
+      //     codX: item.X || item.x,
+      //     codY: item.Y || item.y,
+      //     codZ: 0,
+      //     attrs: {
+      //       ...item,
+      //     },
+      //   }
+      //   if (labelKey) {
+      //     array.attrs.name = item[labelKey]
+      //   } else {
+      //     array.attrs.name = ''
+      //   }
+      //   dataArray.push(array)
+      //   uniqueValueInfos.push({
+      //     value: item[key],
+      //     label: (item[labelKey] || item[key]) + '',
+      //     symbol: {
+      //       type: 'point-3d',
+      //       symbolLayers: [
+      //         {
+      //           type: 'icon',
+      //           size: size * this.sizeRate,
+      //           resource: {
+      //             href: this.iconUrl + (item.icon || icon),
+      //           },
+      //         },
+      //       ]
+      //     }
+      //   })
+      // })
+      // return {
+      //   dataArray,
+      //   popupEnabled: false, // 是否打开弹出框
+      //   legendVisible: false, // 图例是否可见
+      //   type: 'point',
+      //   fieldJsonArray,
+      //   renderer: {
+      //     type: 'unique-value',
+      //     field: key,
+      //     defaultLabel: '无数据',
+      //     uniqueValueInfos,
+      //   },
+      //   labelsymbol: {
+      //     symbol: {
+      //       type: 'text',
+      //       color: color,
+      //       // color: '#00f2ff',
+      //       haloSize: 0,
+      //       haloColor: 'white',
+      //     },
+      //     labelPlacement: 'center-right',
+      //   }
+      // }
     },
 
     /**
@@ -258,39 +264,42 @@ export default {
         console.error('传入的坐标点不能为空')
         return
       }
-      const params = {
-        codX: x,
-        codY: y,
-        zoomlevel: zoom,
-      }
-      this.map.Invoke({
-        ActionName: 'goToPosition',
-        Parameters: JSON.stringify(params),
-      })
+      // const params = {
+      //   codX: x,
+      //   codY: y,
+      //   zoomlevel: zoom,
+      // }
+      // this.map.Invoke({
+      //   ActionName: 'goToPosition',
+      //   Parameters: JSON.stringify(params),
+      // })
+      this.map.setZoomAndCenter(zoom, this.mode === '3D' ? [x, y, 0] : [x, y])
     },
 
     /**
      * ------  放大 -------
      */
     zoomIn() {
-      this.map.Invoke({
-        ActionName: 'mapzoom',
-        Parameters: {
-          'zoommode': 'zoomin',
-        }
-      })
+      // this.map.Invoke({
+      //   ActionName: 'mapzoom',
+      //   Parameters: {
+      //     'zoommode': 'zoomin',
+      //   }
+      // })
+      this.map.setZoom(+this.map.getZoom() + .5)
     },
 
     /**
      * ------  缩小 -------
      */
     zoomOut() {
-      this.map.Invoke({
-        ActionName: 'mapzoom',
-        Parameters: {
-          'zoommode': 'zoomout',
-        }
-      })
+      // this.map.Invoke({
+      //   ActionName: 'mapzoom',
+      //   Parameters: {
+      //     'zoommode': 'zoomout',
+      //   }
+      // })
+      this.map.setZoom(+this.map.getZoom() - .5)
     },
   },
 }

src/views/community-summary.vue

@@ -2,14 +2,14 @@
   <div class="community-summary">
     <template v-if="list.length > 0">
     <div>
-      <div v-for="item in list.slice(0, 8)" :key="item.name">
+      <div v-for="item in list.slice(0, Math.round(list.length / 2))" :key="item.name">
         <img src="@/assets/images/location.png"/>
         <p>{{item.name}}</p>
         <b><m-count :value="item.value" :decimal="0" style="font-size:1.2rem"/></b>
       </div>
     </div>
     <div>
-      <div v-for="item in list.slice(8)" :key="item.name">
+      <div v-for="item in list.slice(Math.round(list.length / 2))" :key="item.name">
         <img src="@/assets/images/location.png"/>
         <p>{{item.name}}</p>
         <b><m-count :value="item.value" :decimal="0" style="font-size:1.2rem"/></b>
@@ -45,7 +45,7 @@ export default {
       display flex
       align-items center
       padding 0 .5rem
-      line-height 1.7
+      line-height 1.75
       &:nth-child(2n+1)
         background $black
       p

src/views/community-type.vue

 <template>
-  <div class="community-type">
+  <div class="community-type" v-if="data.length > 0">
     <m-chart :config="config" :data="data"/>
     <div class="legend">
       <div v-for="(item, i) in data" :key="item.name">
@@ -19,10 +19,6 @@ export default {
       config: {
         colors: ['#0091ff', '#583eff', '#f7b500', '#6dd401'],
         legend: {hide: true},
-        // legend: {
-        //   align: 'right',
-        //   orient: 'vertical',
-        // },
         shape: [
           {type: 'pie', startAngle: -30, radius: [0, 50 * Number((screen.height / 800).toFixed(1))], center: ['30%', '50%']}
         ],

src/views/disaster.vue

@@ -105,6 +105,5 @@ export default {
     span
       margin-right .5rem
   .chart-wrapper
-    // height 75%
     flex 1
 </style>

src/views/hotline.vue

@@ -20,9 +20,9 @@
         <p>{{item.title}}</p>
         <div>
           <template v-if="Array.isArray(item.count)">
-            <m-count :value="item.count[0]" :decimal="0"/> / <m-count :value="item.count[1]" :decimal="0"/>
+            <b><m-count :value="item.count[0]" :decimal="0"/> / <m-count :value="item.count[1]" :decimal="0"/></b>
           </template>
-          <m-count v-else :value="item.count" :decimal="0"/>
+          <b v-else><m-count :value="item.count" :decimal="0"/></b>
         </div>
       </div>
     </div>
@@ -83,9 +83,7 @@ export default {
           text-align center
         *
           font-size 1.2rem !important
-          font-weight bold !important
         p
           font-size 1rem !important
-          font-weight normal !important
           line-height 2.5rem
 </style>

src/views/intelligence.vue

 <template>
   <div class="intelligence">
+    <template v-if="list.length > 0">
       <div>
-      <div v-for="item in list.slice(0, 5)" :key="item.title">
+        <div v-for="item in list.slice(0, Math.round(list.length / 2))" :key="item.title">
           <p>{{item.title}}</p>
           <p>
             <b>
@@ -11,7 +12,7 @@
         </div>
       </div>
       <div>
-      <div v-for="item in list.slice(5)" :key="item.title">
+        <div v-for="item in list.slice(Math.round(list.length / 2))" :key="item.title">
           <p>{{item.title}}</p>
           <p>
             <b>
@@ -20,6 +21,7 @@
           </p>
         </div>
       </div>
+    </template>
   </div>
 </template>
 
@@ -29,6 +31,7 @@ export default {
   computed: {
     list() {
       const {smartInfo} = this.$store.state
+      if (smartInfo.length === 0) return []
       return smartInfo.map(item => {
         return {
           title: item.TYPE_NAME,

src/views/thematic-map.vue

@@ -50,6 +50,7 @@ export default {
   font-weight bold
   overflow hidden
   >div
+    margin-bottom .5rem
     >p
       color $light-blue
       margin-bottom .3rem
@@ -61,6 +62,7 @@ export default {
       .button
         position relative
         width 30%
+        overflow hidden
         p
           width 100%
           height 100%
@@ -91,13 +93,13 @@ export default {
           transition transform .1s ease
           &.bottom,
           &.top
-            height 1px
+            height .1rem
             left 0
             right 0
             transform scaleX(0)
           &.left,
           &.right
-            width 1px
+            width .1rem
             top 0
             bottom 0
             transform scaleY(0)