1004749546@qq.com 4 лет назад
Родитель
Сommit
c7a30737ee
1 измененных файлов с 126 добавлено и 106 удалено
  1. 126 106
      src/views/map/NodeMap.vue

+ 126 - 106
src/views/map/NodeMap.vue

@@ -10,7 +10,7 @@
       <div id="container" :style="{height: mapHeight}">
       </div>
       <div class="map-footer">
-        <a-row :getter="[24,24]" >
+        <a-row :getter="[24,24]">
           <a-col :xs="24" :sm="12" :md="8" :lg="6">
             <div class="map-data">
               <a-icon type="team" :style="{color:'#83ace1',fontSize:'20px',padding:'5px',backgroundColor:'#FFF',borderRadius:'8px'}" />
@@ -62,7 +62,7 @@
                 </a-row>
               </div>
               <vue-seamless-scroll :data="deliveryLogData" :class-option="classOption" class="seamless-warp">
-                <a-spin class="loading" :spinning="deliverySpinning" tip="Loading..."/>
+                <a-spin class="loading" :spinning="deliverySpinning" tip="Loading..." />
                 <div class="swipter-data" v-for="item in deliveryLogData" :key="item.id">
                   <a-row :gutter="0">
                     <a-col style="padding: 0px 2px;text-align: center;" :span="6">{{ item.deliveryTime }}</a-col>
@@ -101,14 +101,15 @@
                 </a-row>
               </div>
               <vue-seamless-scroll :data="userLogData" :class-option="classOption" class="seamless-warp">
-                <a-spin class="loading" :spinning="userLogSpinning" tip="Loading..."/>
+                <a-spin class="loading" :spinning="userLogSpinning" tip="Loading..." />
                 <div class="swipter-data" v-for="item in userLogData" :key="item.id">
                   <a-row :gutter="0">
                     <a-col style="padding: 0px 2px;text-align: center;" :span="16">{{ item.registerTime }}</a-col>
                     <a-col style="padding: 0px 2px;text-align: center;" :span="8">{{ item.mobile }}</a-col>
                   </a-row>
                 </div>
-              </vue-seamless-scroll></div>
+              </vue-seamless-scroll>
+            </div>
             </vue-seamless-scroll>
           </div>
         </a-col>
@@ -165,8 +166,13 @@
           <div class="chart-cont">
             <div class="data-title">项目介绍</div>
             <div class="chart-box textCount">
-              全市共有党政机关、企事业单位827个,职工人数16655人。其中,市级单位334个,秦都区297个,渭城区196个;居民小区1010个(两区居民小区994个,保障房小区16个), 物业管理小区770个(两区754个,保障房小区16个)。其中,市本级保障房小区12个,物业管理小区12个。秦都区654个(含保障房小区3个),物业管理小区584个。渭城区 344个(含保障房小区1个),物业管理174个(含保障房小区1个);学校(中小学、幼儿园)200所,其中,秦都区139所(中小学53所、幼儿园86所)。渭城区61所(中小 学27所、幼儿园34所)。截止目前,城区已建成试点单位67个, 设置智能分类箱
-              <span class="blue">{{ deviceTotal }}</span>组, 积分兑换亭<span class="blue">{{ sellerTotal }}</span>个, 无人兑换机<span class="blue">{{ machineTotal }}</span>个, 覆盖28处办公场所的177个机关事业单位,居民小区29个,企业2个,学校8个。 软件注册人数<span class="blue">{{ userTotal }}</span>人, 周回收有害垃圾5.646公斤、 可回收物9.26吨, 日处理厨余垃圾106吨。
+              全市共有党政机关、企事业单位827个,职工人数16655人。其中,市级单位334个,秦都区297个,渭城区196个;居民小区1010个(两区居民小区994个,保障房小区16个),
+              物业管理小区770个(两区754个,保障房小区16个)。其中,市本级保障房小区12个,物业管理小区12个。秦都区654个(含保障房小区3个),物业管理小区584个。渭城区
+              344个(含保障房小区1个),物业管理174个(含保障房小区1个);学校(中小学、幼儿园)200所,其中,秦都区139所(中小学53所、幼儿园86所)。渭城区61所(中小
+              学27所、幼儿园34所)。截止目前,城区已建成试点单位67个, 设置智能分类箱
+              <span class="blue">{{ deviceTotal }}</span>组, 积分兑换亭<span class="blue">{{ sellerTotal }}</span>个, 无人兑换机<span
+                class="blue">{{ machineTotal }}</span>个, 覆盖28处办公场所的177个机关事业单位,居民小区29个,企业2个,学校8个。 软件注册人数<span class="blue">{{ userTotal }}</span>人,
+              周回收有害垃圾5.646公斤、 可回收物9.26吨, 日处理厨余垃圾106吨。
             </div>
           </div>
         </a-col>
@@ -174,7 +180,8 @@
     </div>
 
   </div>
-  </div></template>
+  </div>
+</template>
 <script>
 import {
   ChartPie,
@@ -200,20 +207,20 @@ export default {
   data () {
     return {
       map: null, // 地图对象
-	  markerLayer: null, // 地图点标记对象
-	  infoWindow: null, // 地图信息窗口对象
+      markerLayer: null, // 地图点标记对象
+      infoWindow: null, // 地图信息窗口对象
       isMapFull: false, // 地图是否全屏
       userTotal: 0, // 用户总数
       deviceTotal: 0, // 设备总数
       sellerTotal: 0, // 兑换亭总数
-	  machineTotal: 0, // 兑换机总数
+      machineTotal: 0, // 兑换机总数
       deliverySpinning: true, // 实时投递数据loading
-	  userLogSpinning: true, // 实时用户数据loading
+      userLogSpinning: true, // 实时用户数据loading
       deliveryLogData: [], // 实时投递数据
       userLogData: [], // 实时用户数据
       screenWidth: document.body.clientWidth, // 这里是给到了一个默认值
       timer: false,
-	  // 设备分布统计图
+      // 设备分布统计图
       equipmentPieData: [{
         name: '学校',
         value: '14'
@@ -232,22 +239,21 @@ export default {
       }
       ],
       equipmentPieColor: ['#ffaa00', '#00ff00', '#00aaff', '#ff55ff', '#1dc5d4', '#8465c7', '#00ffff'],
-	  // 设备数量统计对比图数据
-	  equipmentBarData: [
-		  {
-			  name: '智能分类箱',
-			  value: 0
-		  },
-		  {
-			  name: '积分兑换亭',
-			  value: 0
-		  },
-		  {
-			  name: '无人兑换机',
-			  value: 0
-		  }
-		 ],
-	  equipmentBarSeriesData: ['0', '0', '0']
+      // 设备数量统计对比图数据
+      equipmentBarData: [{
+        name: '智能分类箱',
+        value: 0
+      },
+      {
+        name: '积分兑换亭',
+        value: 0
+      },
+      {
+        name: '无人兑换机',
+        value: 0
+      }
+      ],
+      equipmentBarSeriesData: ['0', '0', '0']
     }
   },
   computed: {
@@ -291,7 +297,7 @@ export default {
     }
   },
   methods: {
-	  // 初始化地图
+    // 初始化地图
     initMap () {
       // 定义地图中心点坐标 默认定位在陕西省咸阳市
       var center = new TMap.LatLng(34.329828, 108.708344)
@@ -302,102 +308,106 @@ export default {
         pitch: 43.5, // 设置俯仰角
         rotation: 45 // 设置地图旋转角度
       })
-	  // 创建并初始化MultiMarker 点标记
-	  this.markerLayer = new TMap.MultiMarker({
-	      map: this.map, // 指定地图容器
-	      // 样式定义
-	      styles: {
-	          // 创建一个styleId为"myStyle"的样式(styles的子属性名即为styleId)
-	          'myStyle': new TMap.MarkerStyle({
-	              'width': 25, // 点标记样式宽度(像素)
-	              'height': 25, // 点标记样式高度(像素)
-	              'src': '../mark.png', // 图片路径
-	              // 焦点在图片中的像素位置,一般大头针类似形式的图片以针尖位置做为焦点,圆形点以圆心位置为焦点
-	              'anchor': { x: 16, y: 32 }
-	          })
-	      },
-	      // 点标记数据数组
-	      geometries: []
-	  })
-	  // 初始化infoWindow
-	  this.infoWindow = new TMap.InfoWindow({
-		  map: this.map,
-		  position: new TMap.LatLng(39.984104, 116.307503),
-		  offset: { x: 0, y: -32 } // 设置信息窗相对position偏移像素
-	  })
-	  this.infoWindow.close()// 初始关闭信息窗关闭
-	  this.markerLayer.on('mousemove', this.showMarkTitle)
-	  // 监听地图加载完成
-	  this.map.on('tilesloaded', this.getMapMark)
+      // 创建并初始化MultiMarker 点标记
+      this.markerLayer = new TMap.MultiMarker({
+        map: this.map, // 指定地图容器
+        // 样式定义
+        styles: {
+          // 创建一个styleId为"myStyle"的样式(styles的子属性名即为styleId)
+          'myStyle': new TMap.MarkerStyle({
+            'width': 25, // 点标记样式宽度(像素)
+            'height': 25, // 点标记样式高度(像素)
+            'src': '../mark.png', // 图片路径
+            // 焦点在图片中的像素位置,一般大头针类似形式的图片以针尖位置做为焦点,圆形点以圆心位置为焦点
+            'anchor': {
+              x: 16,
+              y: 32
+            }
+          })
+        },
+        // 点标记数据数组
+        geometries: []
+      })
+      // 初始化infoWindow
+      this.infoWindow = new TMap.InfoWindow({
+        map: this.map,
+        position: new TMap.LatLng(39.984104, 116.307503),
+        offset: {
+          x: 0,
+          y: -32
+        } // 设置信息窗相对position偏移像素
+      })
+      this.infoWindow.close() // 初始关闭信息窗关闭
+      this.markerLayer.on('mousemove', this.showMarkTitle)
+      // 监听地图加载完成
+      this.map.on('tilesloaded', this.getMapMark)
     },
     // 获取地图点坐标
     getMapMark () {
       getMapStation({}).then(res => {
         const list = res.data || []
-        console.log(list, 'lllllll')
         const data = []
         list.map((item, index) => {
           if (item.lat <= 85.051128 && item.lat >= -85.051128) {
             const p = {
-			  'id': item.id, // 点标记唯一标识,后续如果有删除、修改位置等操作,都需要此id
-			  'styleId': 'myStyle', // 指定样式id
-			  'position': new TMap.LatLng(Number(item.lat), Number(item.lng)), // 点标记坐标位置
-			  'properties': {// 自定义属性
+              'id': item.id, // 点标记唯一标识,后续如果有删除、修改位置等操作,都需要此id
+              'styleId': 'myStyle', // 指定样式id
+              'position': new TMap.LatLng(Number(item.lat), Number(item.lng)), // 点标记坐标位置
+              'properties': { // 自定义属性
                 'title': item.name
-			  }
+              }
             }
             data.push(p)
           }
         })
-        console.log(data, 'lllllll222222')
         // 增加点标记
         this.markerLayer.add(data)
       })
     },
     // 显示地图标记点名称
     showMarkTitle (evt) {
-	  this.infoWindow.open() // 打开信息窗
-      this.infoWindow.setPosition(evt.geometry.position)// 设置信息窗位置
-      this.infoWindow.setContent(evt.geometry.properties.title)// 设置信息窗内容
+      this.infoWindow.open() // 打开信息窗
+      this.infoWindow.setPosition(evt.geometry.position) // 设置信息窗位置
+      this.infoWindow.setContent(evt.geometry.properties.title) // 设置信息窗内容
     },
     // 获取用户总数
     getUser () {
-	  getUserTotal({}).then(res => {
-	    this.userTotal = res.data || 0
-	  })
+      getUserTotal({}).then(res => {
+        this.userTotal = res.data || 0
+      })
     },
     // 获取设备总数
     getDevice () {
-	  getDeviceTotal({}).then(res => {
-	    this.deviceTotal = res.data || 0
+      getDeviceTotal({}).then(res => {
+        this.deviceTotal = res.data || 0
         this.equipmentBarData[0].value = this.deviceTotal
         console.log(this.equipmentBarData, 'this.equipmentBarData')
-	  })
+      })
     },
     // 获取兑换亭总数
     getSeller () {
-	  getOfficialPartnerTotal({}).then(res => {
-	    this.sellerTotal = res.data || 0
+      getOfficialPartnerTotal({}).then(res => {
+        this.sellerTotal = res.data || 0
         this.equipmentBarData[1].value = this.sellerTotal
-	  })
+      })
     },
     // 获取兑换机总数
     getMachine () {
-	  getExchangeMachineTotal({}).then(res => {
-	    this.machineTotal = res.data || 0
-	    this.equipmentBarData[2].value = this.machineTotal
-	  })
+      getExchangeMachineTotal({}).then(res => {
+        this.machineTotal = res.data || 0
+        this.equipmentBarData[2].value = this.machineTotal
+      })
     },
     // 获取实时投递数据
     getDeliveryLog () {
-	  getDeliveryCarousel({}).then(res => {
-	    this.deliveryLogData = res.data.list || []
-	  })
+      getDeliveryCarousel({}).then(res => {
+        this.deliveryLogData = res.data.list || []
+      })
     },
     // 获取实时用户数据
     getUserLog () {
       getCustomerCarousel({}).then(res => {
-		  this.userLogData = res.data.list || []
+        this.userLogData = res.data.list || []
       })
     },
     // 地图是否全屏展示
@@ -417,22 +427,21 @@ export default {
   beforeRouteEnter (to, from, next) {
     next(vm => {
       vm.initMap()
-	 vm.deliverySpinning = true
-	 vm.userLogSpinning = true
-	 setTimeout(() => {
+      vm.deliverySpinning = true
+      vm.userLogSpinning = true
+      setTimeout(() => {
         vm.deliverySpinning = false
         vm.userLogSpinning = false
-	 }, 1000)
-
+      }, 2000)
       vm.getUser()
       vm.getDevice()
       vm.getSeller()
-	  vm.getMachine()
+      vm.getMachine()
       vm.getDeliveryLog()
       vm.getUserLog()
-	  // 5分钟轮播
-	  setInterval(() => vm.getDeliveryLog(), 1000 * 60 * 5)
-	  setInterval(() => vm.getUserLog(), 1000 * 60 * 5)
+      // 5分钟轮播
+      setInterval(() => vm.getDeliveryLog(), 1000 * 60 * 5)
+      setInterval(() => vm.getUserLog(), 1000 * 60 * 5)
     })
   }
 }
@@ -441,6 +450,7 @@ export default {
 <style lang="less" scoped="scoped">
 	.nodeMap-contenter {
 		width: 100%;
+
 		.map-cont {
 			width: 100%;
 			margin-bottom: 20px;
@@ -459,6 +469,7 @@ export default {
 				padding: 5px;
 				color: #fff;
 				font-size: 16px;
+
 				.map-data {
 					padding: 3px;
 				}
@@ -468,7 +479,8 @@ export default {
 		.data-cont {
 			width: 100%;
 		}
-		.data-form{
+
+		.data-form {
 			text-align: center;
 			width: 100%;
 			border: 1px solid #d6d6d6;
@@ -477,18 +489,22 @@ export default {
 			overflow: hidden;
 			display: flex;
 			flex-direction: column;
-			.seamless-warp{
+
+			.seamless-warp {
 				flex: 1;
 				overflow: hidden;
 			}
-			.swipter-data{
+
+			.swipter-data {
 				height: 40px;
 				line-height: 40px;
 			}
-			.loading{
+
+			.loading {
 				margin-top: 50px;
 			}
-			.network-name{
+
+			.network-name {
 				white-space: nowrap;
 				text-overflow: ellipsis;
 				overflow: hidden;
@@ -515,11 +531,13 @@ export default {
 			border: 2px solid #5c9eff;
 			margin-right: 20px;
 		}
-		.chart-box{
+
+		.chart-box {
 			flex: 1;
 			width: 100%;
 			margin-top: 10px;
-		  }
+		}
+
 		.chart-cont {
 			padding: 20px;
 			height: 400px;
@@ -528,13 +546,15 @@ export default {
 			box-shadow: 5px 5px 8px #888888;
 			display: flex;
 			flex-direction: column;
-			  .textCount{
-				  text-indent: 2em;
-				  .blue{
-					  color: #5c9eff;
-					  padding: 0px 2px;
-				  }
-			  }
+
+			.textCount {
+				text-indent: 2em;
+
+				.blue {
+					color: #5c9eff;
+					padding: 0px 2px;
+				}
+			}
 		}
 	}
 </style>