Browse Source

首页地图修改

1004749546@qq.com 4 years ago
parent
commit
6fc2739aa5
8 changed files with 224 additions and 76 deletions
  1. 13 0
      package-lock.json
  2. 1 0
      package.json
  3. BIN
      public/mark.jpg
  4. 9 0
      src/api/nodeMap.js
  5. 21 4
      src/components/Echarts/bar.vue
  6. 3 1
      src/main.js
  7. 176 70
      src/views/map/NodeMap.vue
  8. 1 1
      vue.config.js

+ 13 - 0
package-lock.json

@@ -4195,6 +4195,11 @@
         }
         }
       }
       }
     },
     },
+    "comutils": {
+      "version": "1.1.19",
+      "resolved": "https://registry.npmjs.org/comutils/-/comutils-1.1.19.tgz",
+      "integrity": "sha512-JxXB67juILiwhdLwOsYyjUqwWEhHdObI0EClOPk+JDtEuTbac59s0pxGpfCBnNNQ5JommifmcMGneW/4Cg7YWw=="
+    },
     "concat-map": {
     "concat-map": {
       "version": "0.0.1",
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -16780,6 +16785,14 @@
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.1.3.tgz",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.1.3.tgz",
       "integrity": "sha512-8iSa4mGNXBjyuSZFCCO4fiKfvzqk+mhL0lnKuGcQtO1eoj8nq3CmbEG8FwK5QqoqwDgsjsf1GDuisDX4cdb/aQ=="
       "integrity": "sha512-8iSa4mGNXBjyuSZFCCO4fiKfvzqk+mhL0lnKuGcQtO1eoj8nq3CmbEG8FwK5QqoqwDgsjsf1GDuisDX4cdb/aQ=="
     },
     },
+    "vue-seamless-scroll": {
+      "version": "1.1.23",
+      "resolved": "https://registry.npmjs.org/vue-seamless-scroll/-/vue-seamless-scroll-1.1.23.tgz",
+      "integrity": "sha512-HBjUub8WwsKJzbFCrwKPDrZn4e+SSbkKgwWtjKtfLwesiFGwSsVxP44/Z6d3kpXy94qIFOiflJH6l0/9pj7SGA==",
+      "requires": {
+        "comutils": "^1.1.9"
+      }
+    },
     "vue-style-loader": {
     "vue-style-loader": {
       "version": "4.1.2",
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",

+ 1 - 0
package.json

@@ -37,6 +37,7 @@
     "vue-ls": "^3.2.1",
     "vue-ls": "^3.2.1",
     "vue-quill-editor": "^3.0.6",
     "vue-quill-editor": "^3.0.6",
     "vue-router": "^3.1.2",
     "vue-router": "^3.1.2",
+    "vue-seamless-scroll": "^1.1.23",
     "vue-svg-component-runtime": "^1.0.1",
     "vue-svg-component-runtime": "^1.0.1",
     "vuex": "^3.1.1",
     "vuex": "^3.1.1",
     "wangeditor": "^3.1.1"
     "wangeditor": "^3.1.1"

BIN
public/mark.jpg


+ 9 - 0
src/api/nodeMap.js

@@ -27,6 +27,15 @@ export const getOfficialPartnerTotal = params => {
     method: 'POST'
     method: 'POST'
   })
   })
 }
 }
+// 获取兑换机总数
+export const getExchangeMachineTotal = params => {
+  const url = `/exchangeMachine/getExchangeMachineTotal`
+  return axios({
+    url: url,
+    data: params,
+    method: 'POST'
+  })
+}
 // 获取最新投递轮播
 // 获取最新投递轮播
 export const getDeliveryCarousel = params => {
 export const getDeliveryCarousel = params => {
   const url = `/deliveryLog/getDeliveryCarousel`
   const url = `/deliveryLog/getDeliveryCarousel`

+ 21 - 4
src/components/Echarts/bar.vue

@@ -14,7 +14,13 @@ echarts.registerTheme('tdTheme', tdTheme)
 export default {
 export default {
   name: 'ChartBar',
   name: 'ChartBar',
   props: {
   props: {
-    value: Object, // 单列柱状图,key为x轴,value为y轴
+    // 单列柱状图,列name为x轴,value为y轴
+    value: {
+      type: Array,
+      default: function () {
+		  return []
+      }
+    },
     text: String,
     text: String,
     subtext: String,
     subtext: String,
     color: String,
     color: String,
@@ -90,6 +96,15 @@ export default {
       },
       },
       deep: true,
       deep: true,
       immediate: true
       immediate: true
+    },
+    value: {
+      handler (nVal, oVal) {
+		  if (nVal) {
+		    this.pageInit()
+		  }
+      },
+      deep: true,
+      immediate: true
     }
     }
   },
   },
   data () {
   data () {
@@ -106,8 +121,10 @@ export default {
     pageInit () {
     pageInit () {
       const legend = this.seriesData.map(_ => _.name)
       const legend = this.seriesData.map(_ => _.name)
       this.$nextTick(() => {
       this.$nextTick(() => {
-        const xAxisData = this.value ? Object.keys(this.value) : this.xAxisData
-        const seriesData = this.value ? Object.values(this.value) : this.seriesData
+		  const keys = this.value.map(item => item = item.name)
+		  const values = this.value.map(item => item = item.value)
+        const xAxisData = this.value.length ? keys : this.xAxisData
+        const seriesData = this.value.length ? values : this.seriesData
         const option = {
         const option = {
           color: [this.color],
           color: [this.color],
           title: {
           title: {
@@ -169,7 +186,7 @@ export default {
             }
             }
           }]
           }]
         } else {
         } else {
-          // console.log(this.seriesData, '111111111')
+          console.log(this.seriesData, '111111111')
           option.series = this.seriesData
           option.series = this.seriesData
         }
         }
         // console.log(option.series, 'ppppppp')
         // console.log(option.series, 'ppppppp')

+ 3 - 1
src/main.js

@@ -18,7 +18,9 @@ import './permission' // permission control
 import './utils/filter'
 import './utils/filter'
 
 
 import VueCookies from 'vue-cookies' // global filter
 import VueCookies from 'vue-cookies' // global filter
-
+// 无缝滚动
+import scroll from 'vue-seamless-scroll'
+Vue.use(scroll)
 Vue.config.productionTip = false
 Vue.config.productionTip = false
 
 
 // mount axios Vue.$http and this.$http
 // mount axios Vue.$http and this.$http

+ 176 - 70
src/views/map/NodeMap.vue

@@ -4,10 +4,11 @@
     <div class="map-cont">
     <div class="map-cont">
       <a-row class="map-title" :getter="24">
       <a-row class="map-title" :getter="24">
         <span>智享亿家生活垃圾分类网点地图</span>
         <span>智享亿家生活垃圾分类网点地图</span>
-        <a-icon :style="{fontSize:'30px',padding: '7px',float: 'right', cursor: 'pointer'}" type="fullscreen" />
-      </a-row>
-      <a-row id="container" :getter="24">
+        <a-icon @click="isFullscreenMap" :style="{fontSize:'30px',padding: '7px',float: 'right', cursor: 'pointer'}" :type="isMapFull ?'fullscreen-exit':'fullscreen'" />
       </a-row>
       </a-row>
+      <!-- 地图容器 -->
+      <div id="container" :style="{height: mapHeight}">
+      </div>
       <div class="map-footer">
       <div class="map-footer">
         <a-row :getter="[24,24]" >
         <a-row :getter="[24,24]" >
           <a-col :xs="24" :sm="12" :md="8" :lg="6">
           <a-col :xs="24" :sm="12" :md="8" :lg="6">
@@ -31,14 +32,14 @@
           <a-col :xs="24" :sm="12" :md="8" :lg="6">
           <a-col :xs="24" :sm="12" :md="8" :lg="6">
             <div class="map-data">
             <div class="map-data">
               <a-icon type="hdd" :style="{color:'#83ace1',fontSize:'20px',padding:'5px',backgroundColor:'#FFF',borderRadius:'8px'}" />
               <a-icon type="hdd" :style="{color:'#83ace1',fontSize:'20px',padding:'5px',backgroundColor:'#FFF',borderRadius:'8px'}" />
-              <span>&nbsp;&nbsp;智能兑换机 144660 台</span>
+              <span>&nbsp;&nbsp;智能兑换机 {{ machineTotal }} 台</span>
             </div>
             </div>
           </a-col>
           </a-col>
         </a-row>
         </a-row>
       </div>
       </div>
     </div>
     </div>
 
 
-    <div v-show="true" class="data-cont">
+    <div v-show="!isMapFull" class="data-cont">
       <!-- 实时轮播数据 -->
       <!-- 实时轮播数据 -->
       <a-row :gutter="[24,24]">
       <a-row :gutter="[24,24]">
         <a-col
         <a-col
@@ -46,37 +47,40 @@
           :sm="24"
           :sm="24"
           :md="24"
           :md="24"
           :lg="24"
           :lg="24"
-          :xl="16"
+          :xl="24"
           :xxl="16">
           :xxl="16">
           <div class="switper-cont">
           <div class="switper-cont">
             <div class="data-title">实时投递数据</div>
             <div class="data-title">实时投递数据</div>
             <div class="chart-box data-form">
             <div class="chart-box data-form">
               <div class="swipter-title">
               <div class="swipter-title">
                 <a-row :gutter="0">
                 <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="6">投递时间</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="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="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-col style="padding: 0px 2px;text-align: center;" :span="5">投递分类</a-col>
+                  <a-col style="padding: 0px 2px;text-align: center;" :span="3">投递重量(g)</a-col>
                 </a-row>
                 </a-row>
               </div>
               </div>
+              <vue-seamless-scroll :data="deliveryLogData" :class-option="classOption" class="seamless-warp">
+                <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>
+                    <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="5">{{ item.rubbishTypeDictValue }}</a-col>
+                    <a-col style="padding: 0px 2px;text-align: center;" :span="3">{{ item.rubbishWeight }}</a-col>
+                  </a-row>
+                </div>
+              </vue-seamless-scroll>
             </div>
             </div>
           </div>
           </div>
         </a-col>
         </a-col>
@@ -85,7 +89,7 @@
           :sm="24"
           :sm="24"
           :md="24"
           :md="24"
           :lg="24"
           :lg="24"
-          :xl="8"
+          :xl="24"
           :xxl="8">
           :xxl="8">
           <div class="switper-cont">
           <div class="switper-cont">
             <div class="data-title">实时新增用户</div>
             <div class="data-title">实时新增用户</div>
@@ -96,13 +100,16 @@
                   <a-col style="padding: 0px 2px;text-align: center;" :span="8">用户手机</a-col>
                   <a-col style="padding: 0px 2px;text-align: center;" :span="8">用户手机</a-col>
                 </a-row>
                 </a-row>
               </div>
               </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>
+              <vue-seamless-scroll :data="userLogData" :class-option="classOption" class="seamless-warp">
+                <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>
           </div>
         </a-col>
         </a-col>
       </a-row>
       </a-row>
@@ -144,6 +151,7 @@
               :yMax="1000"
               :yMax="1000"
               yUnit="台"
               yUnit="台"
               :value="equipmentBarData"
               :value="equipmentBarData"
+              :seriesData="equipmentBarSeriesData"
               text="" />
               text="" />
           </div>
           </div>
         </a-col>
         </a-col>
@@ -158,7 +166,7 @@
             <div class="data-title">项目介绍</div>
             <div class="data-title">项目介绍</div>
             <div class="chart-box textCount">
             <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个, 设置智能分类箱
               全市共有党政机关、企事业单位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吨。
+              <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>
           </div>
           </div>
         </a-col>
         </a-col>
@@ -166,31 +174,41 @@
     </div>
     </div>
 
 
   </div>
   </div>
-</template>
+  </div></template>
 <script>
 <script>
 import {
 import {
   ChartPie,
   ChartPie,
   ChartBar
   ChartBar
 } from '@/components/Echarts'
 } from '@/components/Echarts'
+import vueSeamlessScroll from 'vue-seamless-scroll'
 import {
 import {
   getUserTotal,
   getUserTotal,
   getDeviceTotal,
   getDeviceTotal,
   getOfficialPartnerTotal,
   getOfficialPartnerTotal,
   getDeliveryCarousel,
   getDeliveryCarousel,
   getCustomerCarousel,
   getCustomerCarousel,
+  getExchangeMachineTotal,
   getMapStation
   getMapStation
 } from '@/api/nodeMap.js'
 } from '@/api/nodeMap.js'
 export default {
 export default {
   name: 'NodeMap',
   name: 'NodeMap',
   components: {
   components: {
     ChartPie,
     ChartPie,
-    ChartBar
+    ChartBar,
+    vueSeamlessScroll
   },
   },
   data () {
   data () {
     return {
     return {
+      map: null, // 地图对象
+	  markerLayer: null, // 地图点标记对象
+	  infoWindow: null, // 地图信息窗口对象
+      isMapFull: false, // 地图是否全屏
       userTotal: 0, // 用户总数
       userTotal: 0, // 用户总数
       deviceTotal: 0, // 设备总数
       deviceTotal: 0, // 设备总数
       sellerTotal: 0, // 兑换亭总数
       sellerTotal: 0, // 兑换亭总数
+	  machineTotal: 0, // 兑换机总数
+      deliverySpinning: true, // 实时投递数据loading
+	  userLogSpinning: true, // 实时用户数据loading
       deliveryLogData: [], // 实时投递数据
       deliveryLogData: [], // 实时投递数据
       userLogData: [], // 实时用户数据
       userLogData: [], // 实时用户数据
       screenWidth: document.body.clientWidth, // 这里是给到了一个默认值
       screenWidth: document.body.clientWidth, // 这里是给到了一个默认值
@@ -215,11 +233,21 @@ export default {
       ],
       ],
       equipmentPieColor: ['#ffaa00', '#00ff00', '#00aaff', '#ff55ff', '#1dc5d4', '#8465c7', '#00ffff'],
       equipmentPieColor: ['#ffaa00', '#00ff00', '#00aaff', '#ff55ff', '#1dc5d4', '#8465c7', '#00ffff'],
 	  // 设备数量统计对比图数据
 	  // 设备数量统计对比图数据
-	  equipmentBarData: {
-		  '智能分类箱': 0,
-		  '积分兑换亭': 0,
-		  '无人兑换机': 0
-	  }
+	  equipmentBarData: [
+		  {
+			  name: '智能分类箱',
+			  value: 0
+		  },
+		  {
+			  name: '积分兑换亭',
+			  value: 0
+		  },
+		  {
+			  name: '无人兑换机',
+			  value: 0
+		  }
+		 ],
+	  equipmentBarSeriesData: ['0', '0', '0']
     }
     }
   },
   },
   computed: {
   computed: {
@@ -230,6 +258,21 @@ export default {
       } else {
       } else {
         return 0
         return 0
       }
       }
+    },
+    mapHeight () {
+      return this.isMapFull ? '80vh' : '30vh'
+    },
+    classOption () {
+      return {
+        step: 0.4, // 数值越大速度滚动越快
+        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 1, // 0向下 1向上 2向左 3向右
+        openWatch: true, // 开启数据实时监控刷新dom
+        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
+      }
     }
     }
   },
   },
   watch: {
   watch: {
@@ -253,71 +296,116 @@ export default {
       // 定义地图中心点坐标 默认定位在陕西省咸阳市
       // 定义地图中心点坐标 默认定位在陕西省咸阳市
       var center = new TMap.LatLng(34.329828, 108.708344)
       var center = new TMap.LatLng(34.329828, 108.708344)
       // 定义map变量,调用 TMap.Map() 构造函数创建地图
       // 定义map变量,调用 TMap.Map() 构造函数创建地图
-      var map = new TMap.Map(document.getElementById('container'), {
+      this.map = new TMap.Map(document.getElementById('container'), {
         center: center, // 设置地图中心点坐标
         center: center, // 设置地图中心点坐标
         zoom: 17.2, // 设置地图缩放级别
         zoom: 17.2, // 设置地图缩放级别
         pitch: 43.5, // 设置俯仰角
         pitch: 43.5, // 设置俯仰角
         rotation: 45 // 设置地图旋转角度
         rotation: 45 // 设置地图旋转角度
       })
       })
-	  // 创建并初始化MultiMarker
-	  var markerLayer = new TMap.MultiMarker({
-	      map: map, // 指定地图容器
+	  // 创建并初始化MultiMarker 点标记
+	  this.markerLayer = new TMap.MultiMarker({
+	      map: this.map, // 指定地图容器
 	      // 样式定义
 	      // 样式定义
 	      styles: {
 	      styles: {
 	          // 创建一个styleId为"myStyle"的样式(styles的子属性名即为styleId)
 	          // 创建一个styleId为"myStyle"的样式(styles的子属性名即为styleId)
 	          'myStyle': new TMap.MarkerStyle({
 	          'myStyle': new TMap.MarkerStyle({
 	              'width': 25, // 点标记样式宽度(像素)
 	              'width': 25, // 点标记样式宽度(像素)
-	              'height': 35, // 点标记样式高度(像素)
-	              'src': '../logo.png', // 图片路径
+	              'height': 25, // 点标记样式高度(像素)
+	              'src': '../mark.jpg', // 图片路径
 	              // 焦点在图片中的像素位置,一般大头针类似形式的图片以针尖位置做为焦点,圆形点以圆心位置为焦点
 	              // 焦点在图片中的像素位置,一般大头针类似形式的图片以针尖位置做为焦点,圆形点以圆心位置为焦点
 	              'anchor': { x: 16, y: 32 }
 	              'anchor': { x: 16, y: 32 }
 	          })
 	          })
 	      },
 	      },
 	      // 点标记数据数组
 	      // 点标记数据数组
-	      geometries: [{
-	          'id': '1', // 点标记唯一标识,后续如果有删除、修改位置等操作,都需要此id
-	          'styleId': 'myStyle', // 指定样式id
-	          'position': new TMap.LatLng(34.329828, 108.708344), // 点标记坐标位置
-	          'properties': {// 自定义属性
-	              'title': '册书和幅度是'
-	          }
-	      }
-	      ]
+	      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)
+    },
+    // 获取地图点坐标
+    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': {// 自定义属性
+                '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)// 设置信息窗内容
     },
     },
     // 获取用户总数
     // 获取用户总数
     getUser () {
     getUser () {
-      getUserTotal({}).then(res => {
-        this.userTotal = res.data || 0
-      })
+	  getUserTotal({}).then(res => {
+	    this.userTotal = res.data || 0
+	  })
     },
     },
     // 获取设备总数
     // 获取设备总数
     getDevice () {
     getDevice () {
 	  getDeviceTotal({}).then(res => {
 	  getDeviceTotal({}).then(res => {
 	    this.deviceTotal = res.data || 0
 	    this.deviceTotal = res.data || 0
+        this.equipmentBarData[0].value = this.deviceTotal
+        console.log(this.equipmentBarData, 'this.equipmentBarData')
 	  })
 	  })
     },
     },
     // 获取兑换亭总数
     // 获取兑换亭总数
     getSeller () {
     getSeller () {
 	  getOfficialPartnerTotal({}).then(res => {
 	  getOfficialPartnerTotal({}).then(res => {
 	    this.sellerTotal = res.data || 0
 	    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
 	  })
 	  })
     },
     },
     // 获取实时投递数据
     // 获取实时投递数据
     getDeliveryLog () {
     getDeliveryLog () {
 	  getDeliveryCarousel({}).then(res => {
 	  getDeliveryCarousel({}).then(res => {
-	    this.deliveryLogData = res.data || []
+	    this.deliveryLogData = res.data.list || []
+        // this.deliverySpinning = false
 	  })
 	  })
     },
     },
     // 获取实时用户数据
     // 获取实时用户数据
     getUserLog () {
     getUserLog () {
-	  getCustomerCarousel({}).then(res => {
-	    this.userLogData = res.data || 0
-	  })
+      getCustomerCarousel({}).then(res => {
+		  this.userLogData = res.data.list || []
+		  // this.userLogSpinning = false
+      })
+    },
+    // 地图是否全屏展示
+    isFullscreenMap () {
+      this.isMapFull = !this.isMapFull
     }
     }
   },
   },
   mounted () {
   mounted () {
-    this.initMap()
     const that = this
     const that = this
     window.onresize = () => {
     window.onresize = () => {
       return (() => {
       return (() => {
@@ -328,11 +416,23 @@ export default {
   },
   },
   beforeRouteEnter (to, from, next) {
   beforeRouteEnter (to, from, next) {
     next(vm => {
     next(vm => {
+      vm.initMap()
+	 vm.deliverySpinning = true
+	 vm.userLogSpinning = true
+	 setTimeout(() => {
+        vm.deliverySpinning = false
+        vm.userLogSpinning = false
+	 }, 1000)
+      vm.getMapMark()
       vm.getUser()
       vm.getUser()
       vm.getDevice()
       vm.getDevice()
       vm.getSeller()
       vm.getSeller()
+	  vm.getMachine()
       vm.getDeliveryLog()
       vm.getDeliveryLog()
       vm.getUserLog()
       vm.getUserLog()
+	  // 5分钟轮播
+	  setInterval(() => vm.getDeliveryLog(), 1000 * 60 * 5)
+	  setInterval(() => vm.getUserLog(), 1000 * 60 * 5)
     })
     })
   }
   }
 }
 }
@@ -343,11 +443,7 @@ export default {
 		width: 100%;
 		width: 100%;
 		.map-cont {
 		.map-cont {
 			width: 100%;
 			width: 100%;
-			// text-align: center;
 			margin-bottom: 20px;
 			margin-bottom: 20px;
-			#container {
-				height: 30vh;
-			}
 
 
 			.map-title {
 			.map-title {
 				background-color: #5c9eff;
 				background-color: #5c9eff;
@@ -379,8 +475,18 @@ export default {
 			border-radius: 10px;
 			border-radius: 10px;
 			padding: 10px;
 			padding: 10px;
 			overflow: hidden;
 			overflow: hidden;
+			display: flex;
+			flex-direction: column;
+			.seamless-warp{
+				flex: 1;
+				overflow: hidden;
+			}
 			.swipter-data{
 			.swipter-data{
-				padding: 5px 0px;
+				height: 40px;
+				line-height: 40px;
+			}
+			.loading{
+				margin-top: 50px;
 			}
 			}
 			.network-name{
 			.network-name{
 				white-space: nowrap;
 				white-space: nowrap;

+ 1 - 1
vue.config.js

@@ -108,7 +108,7 @@ const vueConfig = {
     // If you want to turn on the proxy, please remove the mockjs /src/main.jsL11
     // If you want to turn on the proxy, please remove the mockjs /src/main.jsL11
     proxy: {
     proxy: {
       '/api': {
       '/api': {
-        target: 'http://192.168.16.153:8301/gc-admin/',
+        target: 'http://192.168.16.149:8301/gc-admin/',
         // target: 'https://lese.test.sxzxyj.net/gc-admin/',
         // target: 'https://lese.test.sxzxyj.net/gc-admin/',
         ws: false,
         ws: false,
         changeOrigin: true,
         changeOrigin: true,