1004749546@qq.com %!s(int64=4) %!d(string=hai) anos
pai
achega
0b52f10d5a
Modificáronse 4 ficheiros con 328 adicións e 186 borrados
  1. 28 0
      src/api/borard.js
  2. 4 0
      src/libs/getDate.js
  3. 294 184
      src/views/dataView/borard.vue
  4. 2 2
      vue.config.js

+ 28 - 0
src/api/borard.js

@@ -0,0 +1,28 @@
+import { axios } from '@/utils/request'
+// 新用户注册量
+export const getNewRegister = params => {
+  const url = `/customer/getRegisterCustomerNumList`
+  return axios({
+    url: url,
+    data: params,
+    method: 'POST'
+  })
+}
+// 分时投递记录
+export const getTimeSharingLog = params => {
+  const url = `/putInTimeShareing/timeSharingDeliveryLog`
+  return axios({
+    url: url,
+    data: params,
+    method: 'POST'
+  })
+}
+// 投递量前五站站点
+export const getDeliveryTop = params => {
+  const url = `/deliveryLog/deliveryTop5Station`
+  return axios({
+    url: url,
+    data: params,
+    method: 'POST'
+  })
+}

+ 4 - 0
src/libs/getDate.js

@@ -1,5 +1,9 @@
 // 引入 moment 时间插件
 import moment from 'moment'
+moment.updateLocale('en', { week: {
+  dow: 1, // 星期的第一天是星期一
+  doy: 7 // 年份的第一周必须包含1月1日 (7 + 1 - 1)
+} })
 // 获取今日/昨日/本周/上周/本月/上月 时间
 export default {
   // 获取今日的开始结束时间

+ 294 - 184
src/views/dataView/borard.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="dataView-content">
     <div class="data-header">
-      <dv-border-box-5 :color="['rgba(115, 164, 255, 0.3)', 'rgba(0,125,255,0.2)']" >
+      <dv-border-box-5 :color="['rgba(115, 164, 255, 0.3)', 'rgba(0,125,255,0.2)']">
         智享亿家投递大数据
       </dv-border-box-5>
       <dv-border-box-5 :color="['rgba(46, 77, 255, 0.2)', 'rgba(0,125,255,0.2)']" :reverse="true">
@@ -12,7 +12,10 @@
           <option>渭南</option>
           <option>咸阳</option>
         </select>
-        <a-icon @click="isFullscreenMap" :style="{fontSize:'30px',padding: '7px',float: 'right', cursor: 'pointer'}" :type="isMapFull ?'fullscreen-exit':'fullscreen'" />
+        <a-icon
+          @click="isFullscreenMap"
+          :style="{fontSize:'30px',padding: '7px',float: 'right', cursor: 'pointer'}"
+          :type="isMapFull ?'fullscreen-exit':'fullscreen'" />
       </dv-border-box-5>
     </div>
     <div class="data-body">
@@ -38,15 +41,11 @@
           <dv-border-box-8 title="dv-border-box-11">
             <div class="total-block">
               <div>
-                <dv-digital-flop
-                  :config="userTotal"
-                  style="width:100%;height:50px;" />
+                <dv-digital-flop :config="userTotal" style="width:100%;height:50px;" />
                 <div class="total-label">用户总数</div>
               </div>
               <div>
-                <dv-digital-flop
-                  :config="devTotal"
-                  style="width:100%;height:50px;" />
+                <dv-digital-flop :config="devTotal" style="width:100%;height:50px;" />
                 <div class="total-label">设备总数</div>
               </div>
             </div>
@@ -70,12 +69,21 @@
 </template>
 
 <script>
-import Charts, { changeDefaultConfig } from '@jiaminghi/charts'
+import Charts, {
+  changeDefaultConfig
+} from '@jiaminghi/charts'
 import {
   getUserTotal,
   getDeviceTotal,
   getMapStation
 } from '@/api/nodeMap.js'
+import {
+  getNewRegister,
+  getTimeSharingLog,
+  getDeliveryTop
+} from '@/api/borard.js'
+import moment from 'moment'
+import getDate from '@/libs/getDate.js'
 export default {
   name: 'DataBoratd',
   data () {
@@ -85,19 +93,21 @@ export default {
       chart3: null,
       chart4: null,
       userTotal: {
-        number: [253461],
+        number: [],
         content: '{nt}',
         formatter: this.formatter
       },
       devTotal: {
-        number: [1250],
+        number: [],
         content: '{nt}',
         formatter: this.formatter
       },
       isMapFull: false,
       map: null, // 地图对象
       markerLayer: null, // 地图点标记对象
-      infoWindow: 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') // 查询结束时间
     }
   },
   methods: {
@@ -145,6 +155,55 @@ export default {
       while (numbers.length) segs.push(numbers.splice(0, 3).join(''))
       return segs.join(',').split('').reverse().join('')
     },
+    // 获取用户总数
+    getUser () {
+      getUserTotal({}).then(res => {
+        const data = res.data || 0
+        const arr = []
+        arr.push(data)
+        this.userTotal = {
+          number: arr,
+          content: '{nt}',
+          formatter: this.formatter
+        }
+        console.log(this.userTotal, data, '获取用户总数')
+      })
+    },
+    // 获取设备总数
+    getDevice () {
+      getDeviceTotal({}).then(res => {
+        const data = res.data || 0
+        const arr = []
+        arr.push(data)
+        this.devTotal = {
+		  number: arr,
+		  content: '{nt}',
+		  formatter: this.formatter
+        }
+      })
+    },
+    // 获取新用户注册量
+    getNewRegister () {
+      const params = {
+        beginRegisterTime: this.beginDate,
+        endRegisterTime: this.endDate
+      }
+	  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)
+		  }
+	  })
+    },
     // 初始化地图
     initMap () {
       // 定义地图中心点坐标 默认定位在陕西省咸阳市
@@ -201,7 +260,8 @@ export default {
             const p = {
               'id': item.id, // 点标记唯一标识,后续如果有删除、修改位置等操作,都需要此id
               'styleId': 'myStyle', // 指定样式id
-              'position': new TMap.LatLng(Number(item.lat), Number(item.lng)), // 点标记坐标位置
+              'position': new TMap.LatLng(Number(item.lat), Number(item
+                .lng)), // 点标记坐标位置
               'properties': { // 自定义属性
                 'title': item.name
               }
@@ -253,34 +313,7 @@ export default {
         left: 50
       })
       // 新用户注册量
-      const con1 = document.getElementById('con1')
-      const chart1 = new Charts(con1)
-      const option1 = {
-        title: {
-          text: '新用户注册量'
-        },
-        xAxis: {
-          name: '日期',
-          data: ['03-25', '03-26', '03-27', '03-28', '03-29', '03-30', '03-31']
-        },
-        yAxis: {
-          name: '用户',
-          data: 'value'
-        },
-        series: [
-          {
-            data: [120, 98, 100, 125, 110, 87, 160],
-            type: 'line',
-            smooth: true,
-            lineArea: {
-              show: true,
-              gradient: ['rgba(55, 162, 218, 0.5)', 'rgba(55, 162, 218, 0.9)']
-            }
-          }
-        ]
-      }
-      chart1.setOption(option1)
-      this.chart1 = chart1
+
       // 分时投递量
       const con2 = document.getElementById('con2')
       const chart2 = new Charts(con2)
@@ -299,40 +332,39 @@ export default {
           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)']
-            }
+        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)
@@ -341,25 +373,35 @@ export default {
       const con3 = document.getElementById('con3')
       const chart3 = new Charts(con3)
       const option3 = {
+        color: ['#10e7d5', '#06beff', '#f2bca1', '#8484fb'],
         title: {
           text: '设备分布比例'
         },
-        series: [
+        series: [{
+          type: 'pie',
+          radius: ['30%', '50%'],
+          startAngle: -Math.PI / 8,
+          data: [{
+            name: '居民小区',
+            value: 49
+          },
           {
-            type: 'pie',
-            radius: '40%',
-            startAngle: -Math.PI / 8,
-            data: [
-              { name: '企业', value: 5 },
-              { name: '学校', value: 14 },
-              { name: '公共机构', value: 32 },
-              { name: '居民小区', value: 49 }
-            ],
-            insideLabel: {
-              show: true
-            }
+            name: '公共机构',
+            value: 32
+          },
+          {
+            name: '学校',
+            value: 14
+          },
+          {
+            name: '企业',
+            value: 5
           }
-        ]
+          ],
+          insideLabel: {
+            show: true
+          }
+        }]
       }
       chart3.setOption(option3)
       this.chart3 = chart3
@@ -378,113 +420,181 @@ export default {
           name: 'kg',
           data: 'value'
         },
-        series: [
-          {
-            data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
-            type: 'bar',
-            gradient: {
-              color: ['#37a2da', '#67e0e3']
-            }
+        series: [{
+          data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
+          type: 'bar',
+          gradient: {
+            color: ['#37a2da', '#67e0e3']
           }
-        ]
+        }]
       }
       chart4.setOption(option4)
       this.chart4 = chart4
+    },
+    // 初始化新用户注册量
+    initChart1 (xData, yData) {
+      const con1 = document.getElementById('con1')
+      const chart1 = new Charts(con1)
+      const option1 = {
+		  title: {
+		    text: '新用户注册量'
+		  },
+		  xAxis: {
+		    name: '日期',
+		    data: xData
+		  },
+		  yAxis: {
+		    name: '用户',
+		    data: 'value'
+		  },
+		  series: [{
+		    data: yData,
+		    type: 'line',
+		    smooth: true,
+		    lineArea: {
+		      show: true,
+		      gradient: ['rgba(55, 162, 218, 0.5)', 'rgba(55, 162, 218, 0.9)']
+		    }
+		  }]
+      }
+      chart1.setOption(option1)
+      this.chart1 = chart1
     }
   },
   mounted () {
-    this.initChart()
     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()
+      })()
+    }
+  },
+  beforeRouteEnter (to, from, next) {
+    next(vm => {
+      vm.getUser()
+      vm.getDevice()
+      vm.initChart()
+	  vm.getNewRegister()
+    })
+  },
+  beforeRouterLeave (to, from, next) {
+    next(vm => {
+      // 销毁地图
+      vm.map.destroy()
+    })
   }
 }
 </script>
 
 <style lang="less">
-  .dataView-content{
-    width: 100%;
-    height: 100%;
-    min-height: 600px;
-    background-image: url(../../assets/dataViewBg.png);
-    background-size: 100% 100%;
-    display: flex;
-    flex-direction: column;
-    .data-header{
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      > div{
-        height: 80px;
-        line-height: 80px;
-        &:first-child{
-          width: 40%;
-          color: #79ccff;
-          .border-box-content{
-            font-size: 30px;
-            text-align: center;
-          }
-        }
-        &:last-child{
-          width: 25%;
-          color: #0ed3ff;
-          .border-box-content{
-            font-size: 18px;
-            text-align: center;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding-left: 50px;
-            select{
-              background: #021931;
-              border: 1px solid #3e566d;
-              width: 35%;
-              padding: 2px 10px;
-              margin: 0 10px;
-              box-shadow: inset 0 0 2px #69b2ff;
-              border-radius: 6px;
-            }
-          }
-        }
-      }
-    }
-    .data-body{
-      flex-grow: 1;
-      display: flex;
-      .b-left,.b-right{
-        width: 25%;
-        display: flex;
-        padding: 5px;
-        flex-direction: column;
-        >div{
-          height: 50%;
-        }
-      }
-      .b-middle{
-        width: 50%;
-        padding: 5px;
-        display: flex;
-        flex-direction: column;
-        >div{
-          &:first-child{
-            height: 80%;
-          }
-          &:last-child{
-            height: 20%;
-            .total-block{
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              height: 100%;
-              > div{
-                width: 40%;
-              }
-              .total-label{
-                color: #fff;
-                text-align: center;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
+	.dataView-content {
+		width: 100%;
+		height: 100%;
+		min-height: 600px;
+		background-image: url(../../assets/dataViewBg.png);
+		background-size: 100% 100%;
+		display: flex;
+		flex-direction: column;
+
+		.data-header {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+
+			>div {
+				height: 80px;
+				line-height: 80px;
+
+				&:first-child {
+					width: 40%;
+					color: #79ccff;
+
+					.border-box-content {
+						font-size: 30px;
+						text-align: center;
+					}
+				}
+
+				&:last-child {
+					width: 25%;
+					color: #0ed3ff;
+
+					.border-box-content {
+						font-size: 18px;
+						text-align: center;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						padding-left: 50px;
+
+						select {
+							background: #021931;
+							border: 1px solid #3e566d;
+							width: 35%;
+							padding: 2px 10px;
+							margin: 0 10px;
+							box-shadow: inset 0 0 2px #69b2ff;
+							border-radius: 6px;
+						}
+					}
+				}
+			}
+		}
+
+		.data-body {
+			flex-grow: 1;
+			display: flex;
+
+			.b-left,
+			.b-right {
+				width: 25%;
+				display: flex;
+				padding: 5px;
+				flex-direction: column;
+
+				>div {
+					height: 50%;
+				}
+			}
+
+			.b-middle {
+				width: 50%;
+				padding: 5px;
+				display: flex;
+				flex-direction: column;
+
+				>div {
+					&:first-child {
+						height: 80%;
+					}
+
+					&:last-child {
+						height: 20%;
+
+						.total-block {
+							display: flex;
+							align-items: center;
+							justify-content: center;
+							height: 100%;
+
+							>div {
+								width: 40%;
+							}
+
+							.total-label {
+								color: #fff;
+								text-align: center;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
 </style>

+ 2 - 2
vue.config.js

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