Bläddra i källkod

大屏数据展示

lilei 4 år sedan
förälder
incheckning
5e1b885d66
5 ändrade filer med 512 tillägg och 178 borttagningar
  1. 0 1
      package.json
  2. 1 1
      public/index.html
  3. BIN
      public/ldt.png
  4. 20 3
      src/api/borard.js
  5. 491 173
      src/views/dataView/borard.vue

+ 0 - 1
package.json

@@ -15,7 +15,6 @@
   },
   "dependencies": {
     "@antv/data-set": "^0.10.2",
-    "@jiaminghi/charts": "^0.2.18",
     "@jiaminghi/data-view": "^2.10.0",
     "ant-design-vue": "^1.7.1",
     "axios": "^0.19.0",

+ 1 - 1
public/index.html

@@ -28,6 +28,6 @@
     <script type="text/javascript" src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
     <% } %>
     <!-- built files will be auto injected -->
-    <script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=EZHBZ-FWHWJ-MF4FO-K6DJF-4YNGQ-PJBYF"></script>
+    <script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=EZHBZ-FWHWJ-MF4FO-K6DJF-4YNGQ-PJBYF&libraries=visualization"></script>
   </body>
 </html>

BIN
public/ldt.png


+ 20 - 3
src/api/borard.js

@@ -1,7 +1,7 @@
 import { axios } from '@/utils/request'
 // 新用户注册量
 export const getNewRegister = params => {
-  const url = `/customer/getRegisterCustomerNumList`
+  const url = `/customer/queryRegisterCustomerNumList`
   return axios({
     url: url,
     data: params,
@@ -10,7 +10,7 @@ export const getNewRegister = params => {
 }
 // 分时投递记录
 export const getTimeSharingLog = params => {
-  const url = `/putInTimeShareing/timeSharingDeliveryLog`
+  const url = `/putInTimeShareing/queryDeliveryLogInfo`
   return axios({
     url: url,
     data: params,
@@ -19,10 +19,27 @@ export const getTimeSharingLog = params => {
 }
 // 投递量前五站站点
 export const getDeliveryTop = params => {
-  const url = `/deliveryLog/deliveryTop5Station`
+  const url = `/deliveryLog/deliveryStationInfo`
   return axios({
     url: url,
     data: params,
     method: 'POST'
   })
 }
+// 热力图
+export const getHeatMapData = params => {
+  const url = `/deliveryLog/queryStationInfoWithDeliveryTimes`
+  return axios({
+    url: url,
+    data: params,
+    method: 'POST'
+  })
+}
+// 获取当前地区经纬度
+export const getLocationCode = params => {
+  const url = `/station/queryLocationByLocationCode?keyword=${params.keyword}`
+  return axios({
+    url: url,
+    method: 'GET'
+  })
+}

+ 491 - 173
src/views/dataView/borard.vue

@@ -4,13 +4,20 @@
       <dv-border-box-5 :color="['rgba(115, 164, 255, 0.3)', 'rgba(0,125,255,0.2)']">
         智享亿家投递大数据
       </dv-border-box-5>
+      <dv-decoration-3 style="width:25%;height:30px;" />
       <dv-border-box-5 :color="['rgba(46, 77, 255, 0.2)', 'rgba(0,125,255,0.2)']" :reverse="true">
-        区域
-        <select>
-          <option>全部</option>
-          <option>西安</option>
-          <option>渭南</option>
-          <option>咸阳</option>
+        <div>区域</div>
+        <!-- <select v-model="queryParam.provinceCode" @change="getCityList" placeholder="省">
+          <option value="">省</option>
+          <option v-for="item in addrProvinceList" :value="item.id" :key="item.id + 'a'">{{ item.name }}</option>
+        </select> -->
+        <select v-model="queryParam.cityCode" @change="getAreaList" placeholder="市">
+          <option value="">选择市</option>
+          <option v-for="item in addrCityList" :value="item.id" :key="item.id + 'b'">{{ item.name }}</option>
+        </select>
+        <select v-model="queryParam.districtCode" @change="initChart" placeholder="区/县">
+          <option value="">选择区/县</option>
+          <option v-for="item in addrDistrictList" :value="item.id" :key="item.id + 'c'">{{ item.name }}</option>
         </select>
         <a-icon
           @click="isFullscreenMap"
@@ -33,12 +40,12 @@
       </div>
       <div class="b-middle">
         <div>
-          <dv-border-box-12 style="padding: 10px;">
+          <dv-border-box-8 style="padding: 10px;">
             <div id="map" :style="{height: '100%'}"></div>
-          </dv-border-box-12>
+          </dv-border-box-8>
         </div>
         <div>
-          <dv-border-box-8 title="dv-border-box-11">
+          <dv-border-box-12>
             <div class="total-block">
               <div>
                 <dv-digital-flop :config="userTotal" style="width:100%;height:50px;" />
@@ -49,7 +56,7 @@
                 <div class="total-label">设备总数</div>
               </div>
             </div>
-          </dv-border-box-8>
+          </dv-border-box-12>
         </div>
       </div>
       <div class="b-right">
@@ -69,9 +76,7 @@
 </template>
 
 <script>
-import Charts, {
-  changeDefaultConfig
-} from '@jiaminghi/charts'
+import echarts from 'echarts'
 import {
   getUserTotal,
   getDeviceTotal,
@@ -80,14 +85,53 @@ import {
 import {
   getNewRegister,
   getTimeSharingLog,
-  getDeliveryTop
+  getDeliveryTop,
+  getHeatMapData,
+  getLocationCode
 } from '@/api/borard.js'
+import { getProvince, getCityByPro, getDistrictByCity } from '@/api/station'
 import moment from 'moment'
 import getDate from '@/libs/getDate.js'
 export default {
   name: 'DataBoratd',
   data () {
     return {
+      queryParam: {
+        provinceCode: '610000', //  省
+        cityCode: '610100', // 市
+        districtCode: '' // 区
+      },
+      addrProvinceList: [{
+        code: '610000',
+        id: '610000',
+        isOpen: '0',
+        name: '陕西省',
+        parentId: '100000',
+        parentIds: '100000',
+        sort: 27,
+        type: '2'
+      }], //  省下拉
+      addrCityList: [
+        {
+          'id': '610100',
+          'sort': 1,
+          'parentId': '610000',
+          'parentIds': '100000,610000',
+          'isOpen': '0',
+          'name': '西安市',
+          'code': '610100'
+        },
+        {
+          'id': '610400',
+          'sort': 4,
+          'parentId': '610000',
+          'parentIds': '100000,610000',
+          'isOpen': '0',
+          'name': '咸阳市',
+          'code': '610400'
+        }
+      ], //  市下拉
+      addrDistrictList: [], //  区下拉
       chart1: null,
       chart2: null,
       chart3: null,
@@ -106,11 +150,60 @@ export default {
       map: null, // 地图对象
       markerLayer: null, // 地图点标记对象
       infoWindow: null, // 地图信息窗口对象
-	  beginDate: moment().subtract('days', 7).format('YYYY-MM-DD 00:00:00'), // 查询开始时间
-	  endDate: moment(moment().add(-1, 'days').endOf('day').valueOf()).format('YYYY-MM-DD 23:59:59') // 查询结束时间
+	    beginDate: moment().subtract('days', 7).format('YYYY-MM-DD 00:00:00'), // 查询开始时间
+	    endDate: moment(moment().add(-1, 'days').endOf('day').valueOf()).format('YYYY-MM-DD 23:59:59') // 查询结束时间
     }
   },
   methods: {
+    // 获取省列表'
+    getProvinceList () {
+      getProvince().then(res => {
+        if (res.status == 200) {
+          this.addrProvinceList = res.data || []
+        } else {
+          this.addrProvinceList = []
+        }
+      })
+    },
+    // 获取城市列表
+    getCityList (e) {
+      if (e.target.value == '') return
+      this.addrCityList = []
+      this.addrDistrictList = []
+      this.queryParam.cityCode = ''
+      this.queryParam.districtCode = ''
+      this.getCityListRequest(e.target.value)
+    },
+    getCityListRequest (val) {
+      getCityByPro({
+        id: val
+      }).then(res => {
+        if (res.status == 200) {
+          this.addrCityList = res.data || []
+        } else {
+          this.addrCityList = []
+        }
+      })
+    },
+    // 获取区县列表
+    getAreaList (e) {
+      if (e.target.value == '') return
+      this.addrDistrictList = []
+      this.queryParam.districtCode = ''
+      this.initChart()
+      this.getAreaListRequest(e.target.value)
+    },
+    getAreaListRequest (val) {
+      getDistrictByCity({
+        id: val
+      }).then(res => {
+        if (res.status == 200) {
+          this.addrDistrictList = res.data || []
+        } else {
+          this.addrDistrictList = []
+        }
+      })
+    },
     // 全屏
     fullScreen () {
       var element = document.documentElement
@@ -157,7 +250,11 @@ export default {
     },
     // 获取用户总数
     getUser () {
-      getUserTotal({}).then(res => {
+      getUserTotal({
+        'provinceCode': this.queryParam.provinceCode,
+        'cityCode': this.queryParam.cityCode,
+        'districtCode': this.queryParam.districtCode
+      }).then(res => {
         const data = res.data || 0
         const arr = []
         arr.push(data)
@@ -171,14 +268,18 @@ export default {
     },
     // 获取设备总数
     getDevice () {
-      getDeviceTotal({}).then(res => {
+      getDeviceTotal({
+        'provinceCode': this.queryParam.provinceCode,
+        'cityCode': this.queryParam.cityCode,
+        'districtCode': this.queryParam.districtCode
+      }).then(res => {
         const data = res.data || 0
         const arr = []
         arr.push(data)
         this.devTotal = {
-		  number: arr,
-		  content: '{nt}',
-		  formatter: this.formatter
+          number: arr,
+          content: '{nt}',
+          formatter: this.formatter
         }
       })
     },
@@ -186,34 +287,82 @@ export default {
     getNewRegister () {
       const params = {
         beginRegisterTime: this.beginDate,
-        endRegisterTime: this.endDate
+        endRegisterTime: this.endDate,
+        'provinceCode': this.queryParam.provinceCode,
+        'cityCode': this.queryParam.cityCode,
+        'districtCode': this.queryParam.districtCode
       }
-	  console.log(params, 'pppppp')
-	  getNewRegister(params).then(res => {
-		  console.log(res, 'rrrrrr')
-		  if (res.status == 200) {
-			  const xData = res.data.dateTime
-			  const yData = res.data.registerNum
-			  const arr = []
-			  yData.map(item => {
-				  arr.push(Number(item))
-				  console.log(item, 'iiiiiiii')
-			  })
-			  console.log(yData, arr, 'yData')
-			  this.initChart1(xData, arr)
-		  }
-	  })
+      getNewRegister(params).then(res => {
+        if (res.status == 200) {
+          const xData = res.data.dateTime
+          const yData = res.data.registerNum
+          const arr = []
+          yData.map(item => {
+            arr.push(Number(item))
+          })
+          this.initChart1(xData, arr)
+        }
+      })
+    },
+    // 获取分时投递
+    getTimeSharingLog () {
+      const params = {
+        'beginDeliveryDate': this.beginDate,
+        'endDeliveryDate': this.endDate,
+        'provinceCode': this.queryParam.provinceCode,
+        'cityCode': this.queryParam.cityCode,
+        'districtCode': this.queryParam.districtCode
+      }
+      getTimeSharingLog(params).then(res => {
+        console.log(res)
+        if (res.status == 200) {
+          this.initChart2(res.data)
+        }
+      })
+    },
+    // 排行榜
+    getDeliveryTop () {
+      const params = {
+        'beginDeliveryDate': this.beginDate,
+        'endDeliveryDate': this.endDate,
+        'provinceCode': this.queryParam.provinceCode,
+        'cityCode': this.queryParam.cityCode,
+        'districtCode': this.queryParam.districtCode
+      }
+      getDeliveryTop(params).then(res => {
+        console.log(res)
+        if (res.status == 200) {
+          this.initChart3(res.data)
+        }
+      })
+    },
+    getLocationCode () {
+      const cityCode = this.queryParam.cityCode
+      const districtCode = this.queryParam.districtCode
+      getLocationCode({
+        keyword: districtCode || cityCode
+      }).then(res => {
+        console.log(res)
+        if (res.status == 200) {
+          if (this.map) {
+            this.map.panTo(new TMap.LatLng(res.data.lat, res.data.lng))
+          } else {
+            this.initMap(res.data)
+          }
+        }
+      })
     },
     // 初始化地图
-    initMap () {
+    initMap (res) {
       // 定义地图中心点坐标 默认定位在陕西省咸阳市
-      var center = new TMap.LatLng(34.329828, 108.708344)
+      var center = new TMap.LatLng(res.lat, res.lng)
       // 定义map变量,调用 TMap.Map() 构造函数创建地图
       this.map = new TMap.Map(document.getElementById('map'), {
         center: center, // 设置地图中心点坐标
         mapStyleId: 'style3',
-        zoom: 17.2, // 设置地图缩放级别
-        pitch: 43.5, // 设置俯仰角
+        zoom: 13, // 设置地图缩放级别
+        pitch: 0, // 设置俯仰角
+        showControl: false,
         rotation: 45 // 设置地图旋转角度
       })
       // 创建并初始化MultiMarker 点标记
@@ -223,13 +372,13 @@ export default {
         styles: {
           // 创建一个styleId为"myStyle"的样式(styles的子属性名即为styleId)
           'myStyle': new TMap.MarkerStyle({
-            'width': 30, // 点标记样式宽度(像素)
-            'height': 30, // 点标记样式高度(像素)
-            'src': '../mark.png', // 图片路径
+            'width': 16, // 点标记样式宽度(像素)
+            'height': 20, // 点标记样式高度(像素)
+            'src': '../ldt.png', // 图片路径
             // 焦点在图片中的像素位置,一般大头针类似形式的图片以针尖位置做为焦点,圆形点以圆心位置为焦点
             'anchor': {
-              x: 16,
-              y: 32
+              x: 8,
+              y: 15
             }
           })
         },
@@ -250,9 +399,51 @@ export default {
       // 监听地图加载完成
       this.map.on('tilesloaded', this.getMapMark)
     },
+    // 获取热力图
+    getHeatMapData () {
+      // 初始化热力图并添加至map图层
+      const heat = new TMap.visualization.Heat({
+        max: 350, // 热力最强阈值
+        min: 0, // 热力最弱阈值
+        height: 0, // 峰值高度
+        gradientColor: { // 渐变颜色
+          0.6: '#673198',
+          0.8: '#e53390',
+          0.9: '#ffc95a'
+        },
+        radius: 30 // 最大辐射半径
+      }).addTo(this.map)
+      const params = {
+        'beginDeliveryDate': this.beginDate,
+        'endDeliveryDate': this.endDate,
+        'provinceCode': this.queryParam.provinceCode,
+        'cityCode': this.queryParam.cityCode,
+        'districtCode': this.queryParam.districtCode
+      }
+      getHeatMapData(params).then(res => {
+        if (res.status == 200) {
+          const ret = []
+          for (let i = 0; i < res.data.length; i++) {
+            if (res.data[i].lat <= 90) {
+              ret.push({
+                count: res.data[i].deliveryTimes,
+                lat: res.data[i].lat,
+                lng: res.data[i].lng
+              })
+            }
+          }
+          // console.log(ret)
+          heat.setData(ret)// 设置数据
+        }
+      })
+    },
     // 获取地图点坐标
     getMapMark () {
-      getMapStation({}).then(res => {
+      getMapStation({
+        'provinceCode': this.queryParam.provinceCode,
+        'cityCode': this.queryParam.cityCode,
+        'districtCode': this.queryParam.districtCode
+      }).then(res => {
         const list = res.data || []
         const data = []
         list.map((item, index) => {
@@ -272,6 +463,7 @@ export default {
         // 增加点标记
         this.markerLayer.add(data)
       })
+      this.getHeatMapData()
     },
     // 显示地图标记点名称
     showMarkTitle (evt) {
@@ -281,106 +473,67 @@ export default {
     },
     // 初始化图表
     initChart () {
-      // 图表配置
-      changeDefaultConfig('color', ['#00ffff'])
-      changeDefaultConfig('title', {
-        offset: [0, -40],
-        style: {
-          fill: '#a2ebff',
-          textAlign: 'center'
-        }
-      })
-      const xyOpts = {
-        nameTextStyle: {
-          fill: '#fff',
-          fontSize: 10
-        },
-        axisLabel: {
-          style: {
-            fill: '#fff'
-          }
-        },
-        axisLine: {
-          show: false
-        }
-      }
-      changeDefaultConfig('xAxis', xyOpts)
-      changeDefaultConfig('yAxis', xyOpts)
-      changeDefaultConfig('grid', {
-        right: 60,
-        bottom: 50,
-        top: 85,
-        left: 50
-      })
-      // 新用户注册量
-
-      // 分时投递量
-      const con2 = document.getElementById('con2')
-      const chart2 = new Charts(con2)
-      const option2 = {
-        title: {
-          text: '分时投递量'
-        },
-        legend: {
-          show: false
-        },
-        xAxis: {
-          name: '时间段',
-          data: ['08', '10', '12', '14', '16', '18', '20']
-        },
-        yAxis: {
-          name: 'kg',
-          data: 'value'
-        },
-        series: [{
-          name: '系列A',
-          data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
-          type: 'line',
-          stack: 'a',
-          smooth: true,
-          lineArea: {
-            show: true,
-            gradient: ['rgba(55, 162, 218, 0.5)', 'rgba(55, 162, 218, 0.9)']
-          }
-        },
-        {
-          name: '系列B',
-          data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
-          type: 'line',
-          stack: 'a',
-          smooth: true,
-          lineArea: {
-            show: true,
-            gradient: ['rgba(55, 162, 218, 0.5)', 'rgba(55, 162, 218, 0.9)']
-          }
-        },
-        {
-          name: '系列C',
-          data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
-          type: 'line',
-          stack: 'a',
-          smooth: true,
-          lineArea: {
-            show: true,
-            gradient: ['rgba(55, 162, 218, 0.5)', 'rgba(55, 162, 218, 0.9)']
-          }
-        }
-        ]
-      }
-      chart2.setOption(option2)
-      this.chart2 = chart2
+      // 用户总数
+      this.getUser()
+      // 设备总数
+      this.getDevice()
+      // 地图
+      this.getLocationCode()
+      // 新注册用户
+      this.getNewRegister()
+      // 分时投递
+      this.getTimeSharingLog()
       // 设备分布比例
       const con3 = document.getElementById('con3')
-      const chart3 = new Charts(con3)
+      const chart3 = echarts.init(con3)
       const option3 = {
         color: ['#10e7d5', '#06beff', '#f2bca1', '#8484fb'],
         title: {
-          text: '设备分布比例'
+          text: '设备分布比例',
+          top: 20,
+          left: 20,
+          textStyle: {
+            color: '#abd7ff'
+          },
+          textAlingn: 'left'
         },
+        tooltip: {},
         series: [{
           type: 'pie',
           radius: ['30%', '50%'],
           startAngle: -Math.PI / 8,
+          avoidLabelOverlap: true, // 在标签拥挤重叠的情况下会挪动各个标签的位置,防止标签间的重叠
+          label: {
+            normal: {
+              formatter: params => {
+                return (
+                  '{name|' + params.name + '}{value|' +
+                        params.value + '%' + '}'
+                )
+              },
+              padding: [0, -70, 25, -70],
+              rich: {
+                name: {
+                  fontSize: 12,
+                  padding: [0, 10, 0, 4],
+                  color: '#999'
+                },
+                value: {
+                  fontSize: 12,
+                  color: '#999'
+                }
+              }
+            }
+          },
+          labelLine: {
+            normal: {
+              length: 20,
+              length2: 60,
+              lineStyle: {
+                color: '#e6e6e6'
+              }
+            }
+          },
           data: [{
             name: '居民小区',
             value: 49
@@ -405,88 +558,253 @@ export default {
       }
       chart3.setOption(option3)
       this.chart3 = chart3
+      this.chart3.resize()
       // 网点投递量排名
+      this.getDeliveryTop()
+    },
+    // 排行榜
+    initChart3 (res) {
       const con4 = document.getElementById('con4')
-      const chart4 = new Charts(con4)
+      const chart4 = echarts.init(con4)
       const option4 = {
         title: {
-          text: '网点投递量排名'
+          text: '网点投递量排名',
+          top: 20,
+          left: 20,
+          textStyle: {
+            color: '#abd7ff'
+          },
+          textAlingn: 'left'
+        },
+        tooltip: {
+          formatter: '{b0}: {c0}kg'
+        },
+        grid: {
+          left: 15,
+          right: 15,
+          bottom: 20,
+          top: 85,
+          containLabel: true
         },
         xAxis: {
-          name: '网点',
-          data: ['科技路', '钟楼', '南门', '中登大厦', '海景国际', '十里锦绣', '绿地生态城']
+          data: res.stationName
         },
         yAxis: {
           name: 'kg',
-          data: 'value'
+          type: 'value'
         },
         series: [{
-          data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
+          data: res.deliveryWeight,
           type: 'bar',
-          gradient: {
-            color: ['#37a2da', '#67e0e3']
+          barWidth: 30,
+          label: {
+            normal: {
+              show: true,
+              position: 'top'
+            }
+          },
+          itemStyle: {
+            color: '#37a2da',
+            shadowColor: '#246d91',
+            shadowOffsetX: 10,
+            shadowOffsetY: -1
           }
         }]
       }
       chart4.setOption(option4)
       this.chart4 = chart4
+      this.chart4.resize()
+    },
+    // 分时投递记录
+    initChart2 (res) {
+      const con2 = document.getElementById('con2')
+      const chart2 = echarts.init(con2)
+      const series = []
+      const arr = res.dayKey.slice(res.dayKey.length - 3)
+      console.log(arr)
+      for (let i = 0; i < arr.length; i++) {
+        series.push({
+          name: arr[i],
+          data: res.value[arr[i]],
+          type: 'line',
+          stack: '投递量',
+          smooth: true,
+          barWidth: 10,
+          label: {
+            normal: {
+              show: true,
+              position: 'top'
+            }
+          }
+        })
+      }
+      const option2 = {
+        title: {
+          text: '分时投递量',
+          top: 20,
+          left: 20,
+          textStyle: {
+            color: '#abd7ff'
+          },
+          textAlingn: 'left'
+        },
+        tooltip: {
+          formatter: '{b0}时: {c0}kg'
+        },
+        grid: {
+          left: 20,
+          right: 40,
+          bottom: 20,
+          top: 85,
+          containLabel: true
+        },
+        legend: {
+          data: arr,
+          orient: 'vertical',
+          textStyle: {
+            fontSize: 10
+          },
+          top: 15,
+          left: 'right'
+        },
+        xAxis: {
+          name: '时',
+          type: 'category',
+          data: res.hourKey,
+          nameTextStyle: {
+            color: '#666'
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#666'
+            }
+          }
+        },
+        yAxis: {
+          name: 'kg',
+          type: 'value',
+          nameTextStyle: {
+            color: '#666'
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#666'
+            }
+          }
+        },
+        series: series
+      }
+      chart2.setOption(option2)
+      this.chart2 = chart2
+      this.chart2.resize()
     },
     // 初始化新用户注册量
     initChart1 (xData, yData) {
       const con1 = document.getElementById('con1')
-      const chart1 = new Charts(con1)
+      const chart1 = echarts.init(con1)
       const option1 = {
 		  title: {
-		    text: '新用户注册量'
+		      text: '新用户注册量',
+          top: 20,
+          left: 20,
+          textStyle: {
+            color: '#abd7ff'
+          },
+          textAlingn: 'left'
 		  },
+        tooltip: {
+          formatter: '{b0}日: {c0}人'
+        },
+        grid: {
+          left: 15,
+          right: 60,
+          bottom: 20,
+          top: 85,
+          containLabel: true
+        },
 		  xAxis: {
-		    name: '日期',
-		    data: xData
+		     name: '日期',
+		     data: xData,
+          type: 'category',
+          nameTextStyle: {
+            color: '#666'
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#666'
+            }
+          }
 		  },
 		  yAxis: {
-		    name: '用户',
-		    data: 'value'
+		     name: '用户',
+          type: 'value',
+          nameTextStyle: {
+            color: '#666'
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#666'
+            }
+          }
 		  },
 		  series: [{
 		    data: yData,
 		    type: 'line',
 		    smooth: true,
-		    lineArea: {
-		      show: true,
-		      gradient: ['rgba(55, 162, 218, 0.5)', 'rgba(55, 162, 218, 0.9)']
+          label: {
+            normal: {
+              show: true,
+              position: 'top'
+            }
+          },
+          lineStyle: {
+            color: 'rgba(55, 162, 218, 0.9)'
+          },
+		    areaStyle: {
+		      color: {
+		          type: 'linear',
+		          x: 0,
+		          y: 0,
+		          x2: 0,
+		          y2: 1,
+		          colorStops: [{
+		              offset: 0, color: 'rgba(55, 162, 218, 0.5)' // 0% 处的颜色
+		          }, {
+		              offset: 1, color: 'rgba(55, 162, 218, 0.9)' // 100% 处的颜色
+		          }]
+		      }
 		    }
 		  }]
       }
       chart1.setOption(option1)
       this.chart1 = chart1
+      this.chart1.resize()
     }
   },
   mounted () {
-    this.initMap()
     const that = this
     window.onresize = () => {
       return (() => {
-        // window.screenWidth = document.body.clientWidth
-        // that.screenWidth = window.screenWidth
-        this.chart1.resize()
-        this.chart2.resize()
-        this.chart3.resize()
-        this.chart4.resize()
+        that.chart1.resize()
+        that.chart2.resize()
+        that.chart3.resize()
+        that.chart4.resize()
       })()
     }
   },
   beforeRouteEnter (to, from, next) {
     next(vm => {
-      vm.getUser()
-      vm.getDevice()
-      vm.initChart()
-	  vm.getNewRegister()
+      setTimeout(() => {
+        vm.initChart()
+        vm.getAreaListRequest(vm.queryParam.cityCode)
+      }, 150)
     })
   },
   beforeRouterLeave (to, from, next) {
     next(vm => {
       // 销毁地图
       vm.map.destroy()
+      vm.map = null
     })
   }
 }
@@ -513,8 +831,8 @@ export default {
 
 				&:first-child {
 					width: 40%;
-					color: #79ccff;
-
+					color: #b3dcf5;
+          padding-right: 10%;
 					.border-box-content {
 						font-size: 30px;
 						text-align: center;
@@ -522,7 +840,7 @@ export default {
 				}
 
 				&:last-child {
-					width: 25%;
+					width: 35%;
 					color: #0ed3ff;
 
 					.border-box-content {
@@ -536,7 +854,7 @@ export default {
 						select {
 							background: #021931;
 							border: 1px solid #3e566d;
-							width: 35%;
+							min-width: 20%;
 							padding: 2px 10px;
 							margin: 0 10px;
 							box-shadow: inset 0 0 2px #69b2ff;
@@ -557,10 +875,10 @@ export default {
 				display: flex;
 				padding: 5px;
 				flex-direction: column;
-
-				>div {
-					height: 50%;
-				}
+        justify-content: space-around;
+        > div{
+          height: 400px;
+        }
 			}
 
 			.b-middle {