فهرست منبع

地图接口对接

1004749546@qq.com 4 سال پیش
والد
کامیت
bdc93672ae
2فایلهای تغییر یافته به همراه283 افزوده شده و 105 حذف شده
  1. 56 0
      src/api/nodeMap.js
  2. 227 105
      src/views/map/NodeMap.vue

+ 56 - 0
src/api/nodeMap.js

@@ -0,0 +1,56 @@
+import { axios } from '@/utils/request'
+
+// 获取用户总数
+export const getUserTotal = params => {
+  const url = `/customer/getCustomerTotal`
+  return axios({
+    url: url,
+    data: params,
+    method: 'POST'
+  })
+}
+// 获取设备总数
+export const getDeviceTotal = params => {
+  const url = `/device/getDeviceTotal`
+  return axios({
+    url: url,
+    data: params,
+    method: 'POST'
+  })
+}
+// 获取兑换亭总数
+export const getOfficialPartnerTotal = params => {
+  const url = `/seller/getOfficialPartnerTotal`
+  return axios({
+    url: url,
+    data: params,
+    method: 'POST'
+  })
+}
+// 获取最新投递轮播
+export const getDeliveryCarousel = params => {
+  const url = `/deliveryLog/getDeliveryCarousel`
+  return axios({
+    url: url,
+    data: params,
+    method: 'POST'
+  })
+}
+// 获取最新用户轮播
+export const getCustomerCarousel = params => {
+  const url = `/customer/getCustomerCarousel`
+  return axios({
+    url: url,
+    data: params,
+    method: 'POST'
+  })
+}
+// 获取地图网点(含经纬度)
+export const getMapStation = params => {
+  const url = `/station/queryList`
+  return axios({
+    url: url,
+    data: params,
+    method: 'POST'
+  })
+}

+ 227 - 105
src/views/map/NodeMap.vue

@@ -8,116 +8,158 @@
       </a-row>
       <a-row id="container" :getter="24">
       </a-row>
-      <a-row class="map-footer" :getter="24" type="flex" align="middle" justify="space-between">
-        <a-col class="map-data" :xs="24" :sm="12" :md="8" :lg="6">
-          <a-icon type="team" :style="{color:'#83ace1',fontSize:'20px',padding:'5px',backgroundColor:'#FFF',borderRadius:'8px'}" />
-          <span>&nbsp;&nbsp;用户总数 144660 个</span>
-        </a-col>
-        <a-col class="map-data" :xs="24" :sm="12" :md="8" :lg="6">
-          <a-icon type="rest" :style="{color:'#83ace1',fontSize:'20px',padding:'5px',backgroundColor:'#FFF',borderRadius:'8px'}" />
-          <span>&nbsp;&nbsp;智能收集箱 144660 台</span>
-        </a-col>
-        <a-col class="map-data" :xs="24" :sm="12" :md="8" :lg="6">
-          <a-icon type="shop" :style="{color:'#83ace1',fontSize:'20px',padding:'5px',backgroundColor:'#FFF',borderRadius:'8px'}" />
-          <span>&nbsp;&nbsp;智能兑换亭 144660 台</span>
-        </a-col>
-        <a-col class="map-data" :xs="24" :sm="12" :md="8" :lg="6">
-          <a-icon type="hdd" :style="{color:'#83ace1',fontSize:'20px',padding:'5px',backgroundColor:'#FFF',borderRadius:'8px'}" />
-          <span>&nbsp;&nbsp;智能兑换机 144660 台</span>
-        </a-col>
-      </a-row>
+      <div class="map-footer">
+        <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'}" />
+              <span>&nbsp;&nbsp;用户总数 {{ userTotal }} 个</span>
+            </div>
+          </a-col>
+          <a-col :xs="24" :sm="12" :md="8" :lg="6">
+            <div class="map-data">
+              <a-icon type="rest" :style="{color:'#83ace1',fontSize:'20px',padding:'5px',backgroundColor:'#FFF',borderRadius:'8px'}" />
+              <span>&nbsp;&nbsp;智能收集箱 {{ deviceTotal }} 台</span>
+            </div>
+          </a-col>
+          <a-col :xs="24" :sm="12" :md="8" :lg="6">
+            <div class="map-data">
+              <a-icon type="shop" :style="{color:'#83ace1',fontSize:'20px',padding:'5px',backgroundColor:'#FFF',borderRadius:'8px'}" />
+              <span>&nbsp;&nbsp;智能兑换亭 {{ sellerTotal }} 台</span>
+            </div>
+          </a-col>
+          <a-col :xs="24" :sm="12" :md="8" :lg="6">
+            <div class="map-data">
+              <a-icon type="hdd" :style="{color:'#83ace1',fontSize:'20px',padding:'5px',backgroundColor:'#FFF',borderRadius:'8px'}" />
+              <span>&nbsp;&nbsp;智能兑换机 144660 台</span>
+            </div>
+          </a-col>
+        </a-row>
+      </div>
     </div>
 
     <div v-show="true" class="data-cont">
       <!-- 实时轮播数据 -->
-      <a-row :gutter="24" class="swipter" type="flex" justify="space-between">
+      <a-row :gutter="[24,24]">
         <a-col
-          class="switper-cont"
           :xs="24"
           :sm="24"
-          :md="23"
-          :lg="23"
-          :xl="23"
-          :xxl="12">
-          <div class="data-title">实时投递数据</div>
-          <div class="chart-box data-form">
-            <a-row :gutter="0">
-              <a-col style="padding: 10px;text-align: center;" :span="6">投递时间</a-col>
-              <a-col style="padding: 10px;text-align: center;" :span="4">投递用户</a-col>
-              <a-col style="padding: 10px;text-align: center;" :span="6">投递网点</a-col>
-              <a-col style="padding: 10px;text-align: center;" :span="4">投递分类</a-col>
-              <a-col style="padding: 10px;text-align: center;" :span="4">投递重量(g)</a-col>
-            </a-row>
-            <a-row :gutter="0">
-              <a-col style="padding: 3px;text-align: center;" :span="6">2020-12-26 12:10:00</a-col>
-              <a-col style="padding: 3px;text-align: center;" :span="4">187****1236</a-col>
-              <a-col style="padding: 3px;text-align: center;" :span="6">咸阳市会觉得很舒服很多时间回复</a-col>
-              <a-col style="padding: 3px;text-align: center;" :span="4">废旧衣物</a-col>
-              <a-col style="padding: 3px;text-align: center;" :span="4">1526</a-col>
-            </a-row>
+          :md="24"
+          :lg="24"
+          :xl="16"
+          :xxl="16">
+          <div class="switper-cont">
+            <div class="data-title">实时投递数据</div>
+            <div class="chart-box data-form">
+              <div class="swipter-title">
+                <a-row :gutter="0">
+                  <a-col style="padding: 0px 2px;text-align: center;" :span="7">投递时间</a-col>
+                  <a-col style="padding: 0px 2px;text-align: center;" :span="4">投递用户</a-col>
+                  <a-col style="padding: 0px 2px;text-align: center;" :span="6">投递网点</a-col>
+                  <a-col style="padding: 0px 2px;text-align: center;" :span="3">投递分类</a-col>
+                  <a-col style="padding: 0px 2px;text-align: center;" :span="4">投递重量(g)</a-col>
+                </a-row>
+              </div>
+              <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="7">{{ item.deliveryTime }}</a-col>
+                  <a-col style="padding: 0px 2px;text-align: center;" :span="4">{{ item.customerMobile }}</a-col>
+                  <a-col
+                    :title="item.stationName"
+                    style="padding: 0px 2px;text-align: center;white-space: nowrap;
+				  					text-overflow: ellipsis;
+				  					overflow: hidden;
+				  					word-break: break-all;"
+                    :span="6">
+                    {{ item.stationName }}
+                  </a-col>
+                  <a-col style="padding: 0px 2px;text-align: center;" :span="3">{{ item.rubbishTypeDictValue }}</a-col>
+                  <a-col style="padding: 0px 2px;text-align: center;" :span="4">{{ item.rubbishWeight }}</a-col>
+                </a-row>
+              </div>
+            </div>
           </div>
         </a-col>
         <a-col
-          class="switper-cont"
           :xs="24"
           :sm="24"
-          :md="23"
-          :lg="23"
-          :xl="23"
-          :xxl="12">
-          <div class="data-title">实时新增用户</div>
+          :md="24"
+          :lg="24"
+          :xl="8"
+          :xxl="8">
+          <div class="switper-cont">
+            <div class="data-title">实时新增用户</div>
+            <div class="chart-box data-form">
+              <div class="swipter-title">
+                <a-row :gutter="0">
+                  <a-col style="padding: 0px 2px;text-align: center;" :span="16">注册时间</a-col>
+                  <a-col style="padding: 0px 2px;text-align: center;" :span="8">用户手机</a-col>
+                </a-row>
+              </div>
+              <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>
+            </div>
+          </div>
         </a-col>
       </a-row>
       <!-- 图表数据 -->
-      <a-row :gutter="48" type="flex" justify="space-between">
+      <a-row :gutter="[24,24]" type="flex" justify="space-between">
         <a-col
-          class="chart-cont"
           :xs="24"
           :sm="20"
-          :md="11"
-          :lg="11"
-          :xl="11"
-          :xxl="7">
-          <div class="data-title">设备分布统计图</div>
-          <chart-pie
-            ref="chartPie"
-            class="chart-box"
-            :value="equipmentPieData"
-            title=""
-            unit="%"
-            :color="equipmentPieColor"
-            :xAxisRotate="resize"
-            text="" />
+          :md="12"
+          :lg="12"
+          :xl="12"
+          :xxl="8">
+          <div class="chart-cont">
+            <div class="data-title">设备分布统计图</div>
+            <chart-pie
+              ref="chartPie"
+              class="chart-box"
+              :value="equipmentPieData"
+              title=""
+              unit="%"
+              :color="equipmentPieColor"
+              :xAxisRotate="resize"
+              text="" />
+          </div>
         </a-col>
         <a-col
-          class="chart-cont"
           xs="24"
           :sm="20"
-          :md="11"
-          :lg="11"
-          :xl="11"
-          :xxl="7">
-          <div class="data-title">设备数量统计对比图</div>
-          <chart-bar
-            ref="ChartBar"
-            class="chart-box"
-            color="#0000fe"
-            :yMax="1000"
-            yUnit="台"
-            :value="equipmentBarData"
-            text="" />
+          :md="12"
+          :lg="12"
+          :xl="12"
+          :xxl="8">
+          <div class="chart-cont">
+            <div class="data-title">设备数量统计对比图</div>
+            <chart-bar
+              ref="ChartBar"
+              class="chart-box"
+              color="#0000fe"
+              :yMax="1000"
+              yUnit="台"
+              :value="equipmentBarData"
+              text="" />
+          </div>
         </a-col>
         <a-col
-          class="chart-cont"
           xs="24"
           :sm="20"
           :md="16"
-          :lg="11"
-          :xl="11"
-          :xxl="7">
-          <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个, 设置智能分类箱669组, 积分兑换亭25个, 无人兑换机8个, 覆盖28处办公场所的177个机关事业单位,居民小区29个,企业2个,学校8个。 软件注册人数145609人, 周回收有害垃圾5.646公斤、 可回收物9.26吨, 日处理厨余垃圾106吨。
+          :lg="12"
+          :xl="12"
+          :xxl="8">
+          <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">8</span>个, 覆盖28处办公场所的177个机关事业单位,居民小区29个,企业2个,学校8个。 软件注册人数<span class="blue">{{ userTotal }}</span>人, 周回收有害垃圾5.646公斤、 可回收物9.26吨, 日处理厨余垃圾106吨。
+            </div>
           </div>
         </a-col>
       </a-row>
@@ -128,13 +170,29 @@
 <script>
 import {
   ChartPie,
-  ChartBar,
-  ChartLine
+  ChartBar
 } from '@/components/Echarts'
+import {
+  getUserTotal,
+  getDeviceTotal,
+  getOfficialPartnerTotal,
+  getDeliveryCarousel,
+  getCustomerCarousel,
+  getMapStation
+} from '@/api/nodeMap.js'
 export default {
   name: 'NodeMap',
+  components: {
+    ChartPie,
+    ChartBar
+  },
   data () {
     return {
+      userTotal: 0, // 用户总数
+      deviceTotal: 0, // 设备总数
+      sellerTotal: 0, // 兑换亭总数
+      deliveryLogData: [], // 实时投递数据
+      userLogData: [], // 实时用户数据
       screenWidth: document.body.clientWidth, // 这里是给到了一个默认值
       timer: false,
 	  // 设备分布统计图
@@ -158,17 +216,12 @@ export default {
       equipmentPieColor: ['#ffaa00', '#00ff00', '#00aaff', '#ff55ff', '#1dc5d4', '#8465c7', '#00ffff'],
 	  // 设备数量统计对比图数据
 	  equipmentBarData: {
-		  '智能分类箱': 600,
-		  '积分兑换亭': 400,
-		  '无人兑换机': 200
+		  '智能分类箱': 0,
+		  '积分兑换亭': 0,
+		  '无人兑换机': 0
 	  }
     }
   },
-  components: {
-    ChartPie,
-    ChartBar,
-    ChartLine
-  },
   computed: {
     resize () {
       console.log(this.screenWidth, 'this.screenWidth')
@@ -195,6 +248,7 @@ export default {
     }
   },
   methods: {
+	  // 初始化地图
     initMap () {
       // 定义地图中心点坐标 默认定位在陕西省咸阳市
       var center = new TMap.LatLng(34.329828, 108.708344)
@@ -205,6 +259,61 @@ export default {
         pitch: 43.5, // 设置俯仰角
         rotation: 45 // 设置地图旋转角度
       })
+	  // 创建并初始化MultiMarker
+	  var markerLayer = new TMap.MultiMarker({
+	      map: map, // 指定地图容器
+	      // 样式定义
+	      styles: {
+	          // 创建一个styleId为"myStyle"的样式(styles的子属性名即为styleId)
+	          'myStyle': new TMap.MarkerStyle({
+	              'width': 25, // 点标记样式宽度(像素)
+	              'height': 35, // 点标记样式高度(像素)
+	              'src': '../logo.png', // 图片路径
+	              // 焦点在图片中的像素位置,一般大头针类似形式的图片以针尖位置做为焦点,圆形点以圆心位置为焦点
+	              'anchor': { x: 16, y: 32 }
+	          })
+	      },
+	      // 点标记数据数组
+	      geometries: [{
+	          'id': '1', // 点标记唯一标识,后续如果有删除、修改位置等操作,都需要此id
+	          'styleId': 'myStyle', // 指定样式id
+	          'position': new TMap.LatLng(34.329828, 108.708344), // 点标记坐标位置
+	          'properties': {// 自定义属性
+	              'title': '册书和幅度是'
+	          }
+	      }
+	      ]
+	  })
+    },
+    // 获取用户总数
+    getUser () {
+      getUserTotal({}).then(res => {
+        this.userTotal = res.data || 0
+      })
+    },
+    // 获取设备总数
+    getDevice () {
+	  getDeviceTotal({}).then(res => {
+	    this.deviceTotal = res.data || 0
+	  })
+    },
+    // 获取兑换亭总数
+    getSeller () {
+	  getOfficialPartnerTotal({}).then(res => {
+	    this.sellerTotal = res.data || 0
+	  })
+    },
+    // 获取实时投递数据
+    getDeliveryLog () {
+	  getDeliveryCarousel({}).then(res => {
+	    this.deliveryLogData = res.data || []
+	  })
+    },
+    // 获取实时用户数据
+    getUserLog () {
+	  getCustomerCarousel({}).then(res => {
+	    this.userLogData = res.data || 0
+	  })
     }
   },
   mounted () {
@@ -218,7 +327,13 @@ export default {
     }
   },
   beforeRouteEnter (to, from, next) {
-    next(vm => {})
+    next(vm => {
+      vm.getUser()
+      vm.getDevice()
+      vm.getSeller()
+      vm.getDeliveryLog()
+      vm.getUserLog()
+    })
   }
 }
 </script>
@@ -226,10 +341,10 @@ export default {
 <style lang="less" scoped="scoped">
 	.nodeMap-contenter {
 		width: 100%;
-
 		.map-cont {
 			width: 100%;
-			text-align: center;
+			// text-align: center;
+			margin-bottom: 20px;
 			#container {
 				height: 30vh;
 			}
@@ -248,17 +363,12 @@ export default {
 				padding: 5px;
 				color: #fff;
 				font-size: 16px;
-
 				.map-data {
 					padding: 3px;
 				}
 			}
 		}
 
-		.swipter {
-			margin: 15px 0px;
-		}
-
 		.data-cont {
 			width: 100%;
 		}
@@ -268,12 +378,21 @@ export default {
 			border: 1px solid #d6d6d6;
 			border-radius: 10px;
 			padding: 10px;
+			overflow: hidden;
+			.swipter-data{
+				padding: 5px 0px;
+			}
+			.network-name{
+				white-space: nowrap;
+				text-overflow: ellipsis;
+				overflow: hidden;
+				word-break: break-all;
+			}
 		}
 
 		.switper-cont {
 			height: 300px;
-			// margin: 10px;
-			padding: 10px;
+			padding: 20px;
 			background-color: #fff;
 			border-radius: 10px;
 			box-shadow: 5px 5px 8px #888888;
@@ -296,9 +415,8 @@ export default {
 			margin-top: 10px;
 		  }
 		.chart-cont {
-			padding: 10px;
+			padding: 20px;
 			height: 400px;
-			margin: 10px;
 			background-color: #fff;
 			border-radius: 20px;
 			box-shadow: 5px 5px 8px #888888;
@@ -306,6 +424,10 @@ export default {
 			flex-direction: column;
 			  .textCount{
 				  text-indent: 2em;
+				  .blue{
+					  color: #5c9eff;
+					  padding: 0px 2px;
+				  }
 			  }
 		}
 	}