From 633692cc22aa03ea869aeb6c6d5314a8cf6fb916 Mon Sep 17 00:00:00 2001 From: liuqimichale <123456lq> Date: Fri, 15 Mar 2019 10:42:38 +0800 Subject: [PATCH] axios --- src/components/VBerth.vue | 15 ++++++++------- src/components/VEquipment.vue | 13 +++++++------ src/components/VIncome.vue | 14 ++++++++------ src/components/VInout.vue | 10 ++++++---- src/components/VMap.vue | 44 +++++++++++++++++++++++++++++--------------- src/components/VParking.vue | 9 ++++----- src/components/VToll.vue | 10 +++++----- src/components/base/AccountNum.vue | 5 +++-- src/components/base/PieEchart.vue | 3 ++- src/components/base/barChart.vue | 19 ++++++++++--------- src/utils/formate.js | 2 ++ src/view/VHome.vue | 73 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------- 12 files changed, 150 insertions(+), 67 deletions(-) diff --git a/src/components/VBerth.vue b/src/components/VBerth.vue index 9fd58ec..9e539f7 100644 --- a/src/components/VBerth.vue +++ b/src/components/VBerth.vue @@ -2,7 +2,7 @@
泊位消息
- + 总计
    @@ -10,8 +10,8 @@
  • -

    {{11834|filterTotal}}空余

    -

    {{4496|filterTotal}}占有

    +

    {{pieChartData.yData[0]|filterTotal}}空余

    +

    {{pieChartData.yData[1]|filterTotal}}占有

@@ -29,12 +29,13 @@ export default { AccountNum, PieEchart }, + props:['total','pieChartData'], data() { return { - pieChartData: { - yData: [1,1], - legendData: ['空余','占有'] - }, + // pieChartData: { + // yData: [1,1], + // legendData: ['空余','占有'] + // }, } }, mounted(){ diff --git a/src/components/VEquipment.vue b/src/components/VEquipment.vue index 680b0e3..9fb5524 100644 --- a/src/components/VEquipment.vue +++ b/src/components/VEquipment.vue @@ -8,7 +8,7 @@

PDA在线率

-

100/300

+

{{equipment.PDA}}/{{equipment.PDATotal}}

PDA/PDA在线

@@ -18,27 +18,27 @@

地磁在线率

-

100/300

+

{{equipment.berth}}/{{equipment.berthTotal}}

地磁/地磁

  • -

    23.4%

    +

    23.4%

    道闸在线率

    -

    100/300

    +

    {{equipment.daozha}}/{{equipment.daozhaTotal}}

    道闸/道闸在线

  • -

    23.4%

    +

    23.4%

    诱导屏在线率

    -

    100/300

    +

    {{equipment.ydp}}/{{equipment.ydpTotal}}

    诱导屏/诱导屏在线

    • @@ -54,6 +54,7 @@ export default { components: { CardTitle }, + props:['equipment'], data() { return { diff --git a/src/components/VIncome.vue b/src/components/VIncome.vue index 8d3aa91..ef17b66 100644 --- a/src/components/VIncome.vue +++ b/src/components/VIncome.vue @@ -2,11 +2,11 @@
    收入消息
    - + 总计
    - +
    @@ -23,15 +23,17 @@ export default { AccountNum, barChart }, + props:['total','barChartData'], data() { return { - pieChartData: { - yData: [1,1], - legendData: ['空余','占有'] - }, + // pieChartData: { + // yData: [1,1], + // legendData: ['空余','占有'] + // }, } }, mounted(){ + //this.drawBar(); }, methods: { diff --git a/src/components/VInout.vue b/src/components/VInout.vue index 10f99d5..c3c2332 100644 --- a/src/components/VInout.vue +++ b/src/components/VInout.vue @@ -3,7 +3,7 @@ 进出场消息
    -

    万达停车场 京A243547 进场 07:20

    +

    {{inoutmsg}} 进场 {{inouttime}}

    @@ -19,11 +19,10 @@ export default { CardTitle, AccountNum }, + props:['inoutmsg','inouttime','imgUrl'], data(){ return{ - sideNum: 23454, - closeNum: 23454, - imgUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1552297151876&di=fcc094f43d6caaf4b9526dabbefd1243&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20190124%2F1fc9d7e14be54986b9e2e055a2b5ccc1.jpeg'} + } } } @@ -47,6 +46,9 @@ export default { line-height: 26px; display: flex; justify-content: space-between; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; background: linear-gradient(to right, rgba(0, 45, 140, .1) , rgba(0, 45, 140, .7)); } diff --git a/src/components/VMap.vue b/src/components/VMap.vue index 1bd7517..768c16e 100644 --- a/src/components/VMap.vue +++ b/src/components/VMap.vue @@ -9,18 +9,32 @@ import idleCar from '../images/content/idle-status.png'; //以import的方式导 export default { name: 'VMap', + props:['mapdata'], + data(){ + return{ + map:'', + //mapData:[] + } + }, mounted(){ this.drawMap() }, methods:{ + initMap(){ + + }, drawMap(){ - let data = [ - {Name:'万达停车场1',lonId:'111.742579',latId:'40.818675',status:0,freeBrethNum:0,plBerthNum:1000,plName:'万达广场停车场1',plAddress:'北京万达广场1'}, - {Name:'万达停车场2',lonId:'111.622579',latId:'40.878675',status:1,freeBrethNum:100,plBerthNum:800,plName:'万达广场停车场2',plAddress:'北京万达广场2'}, - {Name:'万达停车场333333',lonId:'111.782579',latId:'40.778675',status:2,freeBrethNum:300,plBerthNum:500,plName:'万达广场停车场3',plAddress:'北京万达广场3'} - ]; - var map = new BMap.Map('map', {enableMapClick: false}) - var point = new BMap.Point(data[0].lonId, data[0].latId) + let mapData = this.mapdata + let map = this.map + console.log(this.mapdata) + // let data = [ + // {Name:'万达停车场1',lonId:'111.742579',latId:'40.818675',status:0,freeBrethNum:0,plBerthNum:1000,plName:'万达广场停车场1',plAddress:'北京万达广场1'}, + // {Name:'万达停车场2',lonId:'111.622579',latId:'40.878675',status:1,freeBrethNum:100,plBerthNum:800,plName:'万达广场停车场2',plAddress:'北京万达广场2'}, + // {Name:'万达停车场333333',lonId:'111.782579',latId:'40.778675',status:2,freeBrethNum:300,plBerthNum:500,plName:'万达广场停车场3',plAddress:'北京万达广场3'} + // ]; + // let data = this.data + map = new BMap.Map('map', {enableMapClick: false}) + var point = new BMap.Point(mapData[0].lonId, mapData[0].latId) map.centerAndZoom(point, 15) var mapStyle={ style : "midnight" } map.enableScrollWheelZoom(false); @@ -31,20 +45,20 @@ export default { map.clearOverlays(); var i = 0; var points = []; - for (var item in data) { + for (var item in mapData) { (function (x) { var itemthat = item; //创建标注 - var pt = new BMap.Point(data[item].lonId, data[item].latId); + var pt = new BMap.Point(mapData[item].lonId, mapData[item].latId); points[i] = pt; - if(data[item].freeBrethNum/data[item].plBerthNum == 0){ + if(mapData[item].freeBrethNum/mapData[item].plBerthNum == 0){ var myIcon = new BMap.Icon(idleCar, new BMap.Size(29, 40), { offset: new BMap.Size(10, 40), textColor: '#fff' }); var marker = new BMap.Marker(pt,{icon:myIcon}); - } else if(data[item].freeBrethNum/data[item].plBerthNum <= 0.3){ + } else if(mapData[item].freeBrethNum/mapData[item].plBerthNum <= 0.3){ var myIcon = new BMap.Icon(normalCar, new BMap.Size(29, 40), { offset: new BMap.Size(10, 40), @@ -73,12 +87,12 @@ export default { // map.removeOverlay(myLabel); myLabel = new BMap.Label( `
    -
    ${data[item].plName}
    -
    ${data[item].plAddress}
    +
    ${mapData[item].plName}
    +
    ${mapData[item].plAddress}
    停车场收入:1293847.00元
    停车场收入:1293847.00元
    diff --git a/src/components/VParking.vue b/src/components/VParking.vue index e0df19c..b6f89ce 100644 --- a/src/components/VParking.vue +++ b/src/components/VParking.vue @@ -2,16 +2,16 @@
    停车场消息
    - + 总计
    • -

      {{sideNum|filterTotal}}

      +

      {{rodeside|filterTotal}}

      路侧

    • -

      {{closeNum|filterTotal}}

      +

      {{rodeclose|filterTotal}}

      封闭

    @@ -28,10 +28,9 @@ export default { CardTitle, AccountNum }, + props:['total','rodeside','rodeclose'], data(){ return{ - sideNum: 23454, - closeNum: 23454 } } } diff --git a/src/components/VToll.vue b/src/components/VToll.vue index 8df7d82..f82fdf1 100644 --- a/src/components/VToll.vue +++ b/src/components/VToll.vue @@ -2,16 +2,16 @@
    收费员消息
    - + 应签到
    • -

      {{sideNum|filterTotal}}

      +

      {{tollsign|filterTotal}}

      已签到

    • -

      {{closeNum|filterTotal}}

      +

      {{tollnosign|filterTotal}}

      未签到

    @@ -28,10 +28,10 @@ export default { CardTitle, AccountNum }, + props:['total','tollsign','tollnosign'], data(){ return{ - sideNum: 23454, - closeNum: 23454 + } } } diff --git a/src/components/base/AccountNum.vue b/src/components/base/AccountNum.vue index c94013d..ed3460b 100644 --- a/src/components/base/AccountNum.vue +++ b/src/components/base/AccountNum.vue @@ -2,7 +2,7 @@
    -
    +
    {{item}}
    @@ -13,9 +13,10 @@ import { formaterTotal } from '../../utils/formate' export default { name: 'AccountNum', + props:['totalnum'], data(){ return { - total: formaterTotal(219706) + total: formaterTotal(this.totalnum) } } } diff --git a/src/components/base/PieEchart.vue b/src/components/base/PieEchart.vue index 6d522f5..956485d 100644 --- a/src/components/base/PieEchart.vue +++ b/src/components/base/PieEchart.vue @@ -68,6 +68,7 @@ export default { }, methods: { setOptions({yData} = {}) { + let per = ((yData[0]/(yData[0]+yData[1]))*100).toFixed(2)+'%' this.chart.setOption( { tooltip: { @@ -135,7 +136,7 @@ export default { value: 0, label: { normal: { - formatter: '50.5%',//小数点后一位 + formatter: per,//小数点后一位 textStyle: { color: '#fe8b53', fontSize: 18, diff --git a/src/components/base/barChart.vue b/src/components/base/barChart.vue index 0526f66..ea6009a 100644 --- a/src/components/base/barChart.vue +++ b/src/components/base/barChart.vue @@ -67,7 +67,8 @@ export default { this.chart = null }, methods: { - setOptions({yData} = {}) { + setOptions({seriesData,total} = {}) { + console.log(seriesData) this.chart.setOption( { @@ -122,19 +123,19 @@ export default { inverse: true, data: [ { - value:1000, + value:seriesData[0], textStyle:{ color:'#01AEFE' } }, { - value:200, + value:seriesData[1], textStyle:{ color:'#06C406' } }, { - value:300, + value:seriesData[2], textStyle:{ color:'#FFAB00' } @@ -151,10 +152,10 @@ export default { name: '条', type: 'bar', yAxisIndex: 0, - data: [1000,200,300], + data: seriesData, data:[ { - value:1000, + value:seriesData[0], itemStyle: { normal: { color: { @@ -173,7 +174,7 @@ export default { } }, { - value:200, + value:seriesData[1], itemStyle: { normal: { color: { @@ -192,7 +193,7 @@ export default { } }, { - value:300, + value:seriesData[2], itemStyle: { normal: { color: { @@ -223,7 +224,7 @@ export default { type: 'bar', yAxisIndex: 1, barGap: '-100%', - data: [1500,1500,1500],//百分比 + data: [total,total,total],//百分比 barWidth: '40%', itemStyle: { normal: { diff --git a/src/utils/formate.js b/src/utils/formate.js index 3eed038..5d71e04 100644 --- a/src/utils/formate.js +++ b/src/utils/formate.js @@ -20,6 +20,8 @@ function formateTime() { } function formaterTotal(val) { + // console.log(val) + // console.log(typeof val) let str = val.toString() let newStr = '' let count = 0 diff --git a/src/view/VHome.vue b/src/view/VHome.vue index 93bec17..5e6609b 100644 --- a/src/view/VHome.vue +++ b/src/view/VHome.vue @@ -4,27 +4,27 @@
    • - +
      - +
      - +
    • - +
    • - +
      - +
      - +
    @@ -51,6 +51,65 @@ export default { VIncome, VBerth, VEquipment + }, + data(){ + return { + parkingTotal: 319706, + rodeside: 2345, + rodeclose: 23, + tollTotal: 23454, + tollsign: 12309, + tollnosign: 2130, + inoutmsg: '万达广场停车场1 京A231231', + inouttime: '08:00', + imgUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1552297151876&di=fcc094f43d6caaf4b9526dabbefd1243&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20190124%2F1fc9d7e14be54986b9e2e055a2b5ccc1.jpeg', + incometotal:123213, + barChartData:{ + seriesData:[2000,200,300], + total:2500 + }, + bertotal:28839, + pieChartData: { + yData: [21321,13311], + legendData: ['空余','占有'] + }, + equipment:{ + PDA:150, + PDATotal:3000, + berth:150, + berthTotal:2300, + daozha:150, + daozhaTotal:1300, + ydp:150, + ydpTotal:300 + }, + ditudata:[ + {Name:'万达停车场1',lonId:'111.742579',latId:'40.818675',status:0,freeBrethNum:0,plBerthNum:1000,plName:'万达广场停车场1',plAddress:'北京万达广场1'}, + {Name:'万达停车场2',lonId:'111.622579',latId:'40.878675',status:1,freeBrethNum:100,plBerthNum:800,plName:'万达广场停车场2',plAddress:'北京万达广场2'}, + {Name:'万达停车场333333',lonId:'111.782579',latId:'40.778675',status:2,freeBrethNum:300,plBerthNum:500,plName:'万达广场停车场3',plAddress:'北京万达广场3'} + ] + + } + }, + mounted(){ + // this.setmethod() + // this.$nextTick(function () { + // this.setmethod() + // }) + var self = this + var t =setInterval(()=>{ + self.parkingTotal ++ + console.log(self.parkingTotal) + },1000) + + }, + methods:{ + setmethod(){ + setInterval(()=>{ + this.parkingTotal ++ + console.log(this.parkingTotal) + },1000) + } } } -- libgit2 0.21.4