BJ_web_developers / lzsandtable

Commit 633692cc22aa03ea869aeb6c6d5314a8cf6fb916

Authored by liuqimichale
1 parent ca985273

axios

Inline Side-by-side
Showing 12 changed files with 150 additions and 67 deletions
src/components/VBerth.vue
  View file @633692c
... ... @@ -2,7 +2,7 @@
2 2 <div class="theme-wrap">
3 3 <card-title> <span>泊位消息</span></card-title>
4 4 <div class="theme-body">
5   - <account-num>
  5 + <account-num :totalnum="total">
6 6 <span>总计</span>
7 7 </account-num>
8 8 <ul class="income-echart">
... ... @@ -10,8 +10,8 @@
10 10 <pie-echart :chart-data="pieChartData"></pie-echart>
11 11 </li>
12 12 <li class="berth-inf">
13   - <p><span class="free-berth">{{11834|filterTotal}}</span><span>空余</span></p>
14   - <p><span class="buss-berth">{{4496|filterTotal}}</span><span>占有</span></p>
  13 + <p><span class="free-berth">{{pieChartData.yData[0]|filterTotal}}</span><span>空余</span></p>
  14 + <p><span class="buss-berth">{{pieChartData.yData[1]|filterTotal}}</span><span>占有</span></p>
15 15 </li>
16 16 </ul>
17 17 </div>
... ... @@ -29,12 +29,13 @@ export default {
29 29 AccountNum,
30 30 PieEchart
31 31 },
  32 + props:['total','pieChartData'],
32 33 data() {
33 34 return {
34   - pieChartData: {
35   - yData: [1,1],
36   - legendData: ['空余','占有']
37   - },
  35 + // pieChartData: {
  36 + // yData: [1,1],
  37 + // legendData: ['空余','占有']
  38 + // },
38 39 }
39 40 },
40 41 mounted(){
... ...
src/components/VEquipment.vue
  View file @633692c
... ... @@ -8,7 +8,7 @@
8 8 <p>PDA在线率</p>
9 9 </div>
10 10 <div class="rotate-status back">
11   - <p class="text-blue">100/300</p>
  11 + <p class="text-blue">{{equipment.PDA}}/{{equipment.PDATotal}}</p>
12 12 <p>PDA/PDA在线</p>
13 13 </div>
14 14 </li>
... ... @@ -18,27 +18,27 @@
18 18 <p>地磁在线率</p>
19 19 </div>
20 20 <div class="rotate-status back">
21   - <p class="text-blue">100/300</p>
  21 + <p class="text-blue">{{equipment.berth}}/{{equipment.berthTotal}}</p>
22 22 <p>地磁/地磁</p>
23 23 </div>
24 24 </li>
25 25 <li class="equipment-section">
26 26 <div class="normal-status front">
27   - <p class="text-blue">23.4%</p>
  27 + <p class="text-orange">23.4%</p>
28 28 <p>道闸在线率</p>
29 29 </div>
30 30 <div class="rotate-status back">
31   - <p class="text-blue">100/300</p>
  31 + <p class="text-orange">{{equipment.daozha}}/{{equipment.daozhaTotal}}</p>
32 32 <p>道闸/道闸在线</p>
33 33 </div>
34 34 </li>
35 35 <li class="equipment-section">
36 36 <div class="normal-status front">
37   - <p class="text-blue">23.4%</p>
  37 + <p class="text-orange">23.4%</p>
38 38 <p>诱导屏在线率</p>
39 39 </div>
40 40 <div class="rotate-status back">
41   - <p class="text-blue">100/300</p>
  41 + <p class="text-orange">{{equipment.ydp}}/{{equipment.ydpTotal}}</p>
42 42 <p>诱导屏/诱导屏在线</p>
43 43 </div>
44 44 </li>
... ... @@ -54,6 +54,7 @@ export default {
54 54 components: {
55 55 CardTitle
56 56 },
  57 + props:['equipment'],
57 58 data() {
58 59 return {
59 60  
... ...
src/components/VIncome.vue
  View file @633692c
... ... @@ -2,11 +2,11 @@
2 2 <div class="theme-wrap">
3 3 <card-title> <span>收入消息</span></card-title>
4 4 <div class="theme-body">
5   - <account-num>
  5 + <account-num :totalnum="total">
6 6 <span>总计</span>
7 7 </account-num>
8 8 <div class="income-echart" id="income-echart">
9   - <bar-chart :chart-data="pieChartData"></bar-chart>
  9 + <bar-chart :chart-data="barChartData"></bar-chart>
10 10 </div>
11 11 </div>
12 12 </div>
... ... @@ -23,15 +23,17 @@ export default {
23 23 AccountNum,
24 24 barChart
25 25 },
  26 + props:['total','barChartData'],
26 27 data() {
27 28 return {
28   - pieChartData: {
29   - yData: [1,1],
30   - legendData: ['空余','占有']
31   - },
  29 + // pieChartData: {
  30 + // yData: [1,1],
  31 + // legendData: ['空余','占有']
  32 + // },
32 33 }
33 34 },
34 35 mounted(){
  36 +
35 37 //this.drawBar();
36 38 },
37 39 methods: {
... ...
src/components/VInout.vue
  View file @633692c
... ... @@ -3,7 +3,7 @@
3 3 <card-title> <span>进出场消息</span></card-title>
4 4 <div class="theme-body">
5 5 <div class="access-title">
6   - <p><span><span class="access-icon"></span>万达停车场 京A243547 进场</span> <span>07:20</span></p>
  6 + <p><span><span class="access-icon"></span>{{inoutmsg}} 进场</span> <span>{{inouttime}}</span></p>
7 7 </div>
8 8 <div class="access-img" :style="{backgroundImage:'url('+imgUrl+')'}"></div>
9 9 </div>
... ... @@ -19,11 +19,10 @@ export default {
19 19 CardTitle,
20 20 AccountNum
21 21 },
  22 + props:['inoutmsg','inouttime','imgUrl'],
22 23 data(){
23 24 return{
24   - sideNum: 23454,
25   - closeNum: 23454,
26   - 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'}
  25 + }
27 26 }
28 27 }
29 28 </script>
... ... @@ -47,6 +46,9 @@ export default {
47 46 line-height: 26px;
48 47 display: flex;
49 48 justify-content: space-between;
  49 + overflow: hidden;
  50 + white-space: nowrap;
  51 + text-overflow: ellipsis;
50 52 background: linear-gradient(to right, rgba(0, 45, 140, .1) , rgba(0, 45, 140, .7));
51 53  
52 54 }
... ...
src/components/VMap.vue
  View file @633692c
... ... @@ -9,18 +9,32 @@ import idleCar from &#39;../images/content/idle-status.png&#39;; //以import的方式导
9 9  
10 10 export default {
11 11 name: 'VMap',
  12 + props:['mapdata'],
  13 + data(){
  14 + return{
  15 + map:'',
  16 + //mapData:[]
  17 + }
  18 + },
12 19 mounted(){
13 20 this.drawMap()
14 21 },
15 22 methods:{
  23 + initMap(){
  24 +
  25 + },
16 26 drawMap(){
17   - let data = [
18   - {Name:'万达停车场1',lonId:'111.742579',latId:'40.818675',status:0,freeBrethNum:0,plBerthNum:1000,plName:'万达广场停车场1',plAddress:'北京万达广场1'},
19   - {Name:'万达停车场2',lonId:'111.622579',latId:'40.878675',status:1,freeBrethNum:100,plBerthNum:800,plName:'万达广场停车场2',plAddress:'北京万达广场2'},
20   - {Name:'万达停车场333333',lonId:'111.782579',latId:'40.778675',status:2,freeBrethNum:300,plBerthNum:500,plName:'万达广场停车场3',plAddress:'北京万达广场3'}
21   - ];
22   - var map = new BMap.Map('map', {enableMapClick: false})
23   - var point = new BMap.Point(data[0].lonId, data[0].latId)
  27 + let mapData = this.mapdata
  28 + let map = this.map
  29 + console.log(this.mapdata)
  30 + // let data = [
  31 + // {Name:'万达停车场1',lonId:'111.742579',latId:'40.818675',status:0,freeBrethNum:0,plBerthNum:1000,plName:'万达广场停车场1',plAddress:'北京万达广场1'},
  32 + // {Name:'万达停车场2',lonId:'111.622579',latId:'40.878675',status:1,freeBrethNum:100,plBerthNum:800,plName:'万达广场停车场2',plAddress:'北京万达广场2'},
  33 + // {Name:'万达停车场333333',lonId:'111.782579',latId:'40.778675',status:2,freeBrethNum:300,plBerthNum:500,plName:'万达广场停车场3',plAddress:'北京万达广场3'}
  34 + // ];
  35 + // let data = this.data
  36 + map = new BMap.Map('map', {enableMapClick: false})
  37 + var point = new BMap.Point(mapData[0].lonId, mapData[0].latId)
24 38 map.centerAndZoom(point, 15)
25 39 var mapStyle={ style : "midnight" }
26 40 map.enableScrollWheelZoom(false);
... ... @@ -31,20 +45,20 @@ export default {
31 45 map.clearOverlays();
32 46 var i = 0;
33 47 var points = [];
34   - for (var item in data) {
  48 + for (var item in mapData) {
35 49 (function (x) {
36 50 var itemthat = item;
37 51 //创建标注
38   - var pt = new BMap.Point(data[item].lonId, data[item].latId);
  52 + var pt = new BMap.Point(mapData[item].lonId, mapData[item].latId);
39 53 points[i] = pt;
40   - if(data[item].freeBrethNum/data[item].plBerthNum == 0){
  54 + if(mapData[item].freeBrethNum/mapData[item].plBerthNum == 0){
41 55 var myIcon = new BMap.Icon(idleCar,
42 56 new BMap.Size(29, 40), {
43 57 offset: new BMap.Size(10, 40),
44 58 textColor: '#fff'
45 59 });
46 60 var marker = new BMap.Marker(pt,{icon:myIcon});
47   - } else if(data[item].freeBrethNum/data[item].plBerthNum <= 0.3){
  61 + } else if(mapData[item].freeBrethNum/mapData[item].plBerthNum <= 0.3){
48 62 var myIcon = new BMap.Icon(normalCar,
49 63 new BMap.Size(29, 40), {
50 64 offset: new BMap.Size(10, 40),
... ... @@ -73,12 +87,12 @@ export default {
73 87 // map.removeOverlay(myLabel);
74 88 myLabel = new BMap.Label(
75 89 `<div class="dialog-wrap">
76   - <div class="dialog-header" title="${data[item].plAddress}">${data[item].plName}</div>
77   - <div class="dialog-address" title="${data[item].plAddress}">${data[item].plAddress}</div>
  90 + <div class="dialog-header" title="${mapData[item].plAddress}">${mapData[item].plName}</div>
  91 + <div class="dialog-address" title="${mapData[item].plAddress}">${mapData[item].plAddress}</div>
78 92 <ul class="dislog-body">
79   - <li><div>${data[item].freeBrethNum}</div><div>空闲</div></li>
  93 + <li><div>${mapData[item].freeBrethNum}</div><div>空闲</div></li>
80 94 <li></li>
81   - <li><div>${data[item].plBerthNum}</div><div>总数</div></li>
  95 + <li><div>${mapData[item].plBerthNum}</div><div>总数</div></li>
82 96 </ul>
83 97 <div class="dislog-footer">停车场收入:1293847.00元</div>
84 98 <div class="dislog-footer">停车场收入:1293847.00元</div>
... ...
src/components/VParking.vue
  View file @633692c
... ... @@ -2,16 +2,16 @@
2 2 <div class="theme-wrap">
3 3 <card-title> <span>停车场消息</span></card-title>
4 4 <div class="theme-body">
5   - <account-num>
  5 + <account-num :totalnum="total">
6 6 <span>总计</span>
7 7 </account-num>
8 8 <ul class="theme-container">
9 9 <li class="roadside">
10   - <p>{{sideNum|filterTotal}}</p>
  10 + <p>{{rodeside|filterTotal}}</p>
11 11 <p>路侧</p>
12 12 </li>
13 13 <li class="roadclose">
14   - <p>{{closeNum|filterTotal}}</p>
  14 + <p>{{rodeclose|filterTotal}}</p>
15 15 <p>封闭</p>
16 16 </li>
17 17 </ul>
... ... @@ -28,10 +28,9 @@ export default {
28 28 CardTitle,
29 29 AccountNum
30 30 },
  31 + props:['total','rodeside','rodeclose'],
31 32 data(){
32 33 return{
33   - sideNum: 23454,
34   - closeNum: 23454
35 34 }
36 35 }
37 36 }
... ...
src/components/VToll.vue
  View file @633692c
... ... @@ -2,16 +2,16 @@
2 2 <div class="theme-wrap">
3 3 <card-title> <span>收费员消息</span></card-title>
4 4 <div class="theme-body">
5   - <account-num>
  5 + <account-num :totalnum="total">
6 6 <span>应签到</span>
7 7 </account-num>
8 8 <ul class="theme-container">
9 9 <li class="roadside">
10   - <p>{{sideNum|filterTotal}}</p>
  10 + <p>{{tollsign|filterTotal}}</p>
11 11 <p>已签到</p>
12 12 </li>
13 13 <li class="roadclose">
14   - <p>{{closeNum|filterTotal}}</p>
  14 + <p>{{tollnosign|filterTotal}}</p>
15 15 <p>未签到</p>
16 16 </li>
17 17 </ul>
... ... @@ -28,10 +28,10 @@ export default {
28 28 CardTitle,
29 29 AccountNum
30 30 },
  31 + props:['total','tollsign','tollnosign'],
31 32 data(){
32 33 return{
33   - sideNum: 23454,
34   - closeNum: 23454
  34 +
35 35 }
36 36 }
37 37 }
... ...
src/components/base/AccountNum.vue
  View file @633692c
... ... @@ -2,7 +2,7 @@
2 2 <div class="total-wrap">
3 3 <slot></slot>
4 4 <div class="total-main" >
5   - <div v-for="item in total" :key="item" :class="item !==',' ? 'eleNumBg':'noeleNumBg'" >
  5 + <div v-for="(item,index) in total" :key="index+Math.random()" :class="item !==',' ? 'eleNumBg':'noeleNumBg'" >
6 6 {{item}}
7 7 </div>
8 8 </div>
... ... @@ -13,9 +13,10 @@
13 13 import { formaterTotal } from '../../utils/formate'
14 14 export default {
15 15 name: 'AccountNum',
  16 + props:['totalnum'],
16 17 data(){
17 18 return {
18   - total: formaterTotal(219706)
  19 + total: formaterTotal(this.totalnum)
19 20 }
20 21 }
21 22 }
... ...
src/components/base/PieEchart.vue
  View file @633692c
... ... @@ -68,6 +68,7 @@ export default {
68 68 },
69 69 methods: {
70 70 setOptions({yData} = {}) {
  71 + let per = ((yData[0]/(yData[0]+yData[1]))*100).toFixed(2)+'%'
71 72 this.chart.setOption(
72 73 {
73 74 tooltip: {
... ... @@ -135,7 +136,7 @@ export default {
135 136 value: 0,
136 137 label: {
137 138 normal: {
138   - formatter: '50.5%',//小数点后一位
  139 + formatter: per,//小数点后一位
139 140 textStyle: {
140 141 color: '#fe8b53',
141 142 fontSize: 18,
... ...
src/components/base/barChart.vue
  View file @633692c
... ... @@ -67,7 +67,8 @@ export default {
67 67 this.chart = null
68 68 },
69 69 methods: {
70   - setOptions({yData} = {}) {
  70 + setOptions({seriesData,total} = {}) {
  71 + console.log(seriesData)
71 72 this.chart.setOption(
72 73 {
73 74  
... ... @@ -122,19 +123,19 @@ export default {
122 123 inverse: true,
123 124 data: [
124 125 {
125   - value:1000,
  126 + value:seriesData[0],
126 127 textStyle:{
127 128 color:'#01AEFE'
128 129 }
129 130 },
130 131 {
131   - value:200,
  132 + value:seriesData[1],
132 133 textStyle:{
133 134 color:'#06C406'
134 135 }
135 136 },
136 137 {
137   - value:300,
  138 + value:seriesData[2],
138 139 textStyle:{
139 140 color:'#FFAB00'
140 141 }
... ... @@ -151,10 +152,10 @@ export default {
151 152 name: '条',
152 153 type: 'bar',
153 154 yAxisIndex: 0,
154   - data: [1000,200,300],
  155 + data: seriesData,
155 156 data:[
156 157 {
157   - value:1000,
  158 + value:seriesData[0],
158 159 itemStyle: {
159 160 normal: {
160 161 color: {
... ... @@ -173,7 +174,7 @@ export default {
173 174 }
174 175 },
175 176 {
176   - value:200,
  177 + value:seriesData[1],
177 178 itemStyle: {
178 179 normal: {
179 180 color: {
... ... @@ -192,7 +193,7 @@ export default {
192 193 }
193 194 },
194 195 {
195   - value:300,
  196 + value:seriesData[2],
196 197 itemStyle: {
197 198 normal: {
198 199 color: {
... ... @@ -223,7 +224,7 @@ export default {
223 224 type: 'bar',
224 225 yAxisIndex: 1,
225 226 barGap: '-100%',
226   - data: [1500,1500,1500],//百分比
  227 + data: [total,total,total],//百分比
227 228 barWidth: '40%',
228 229 itemStyle: {
229 230 normal: {
... ...
src/utils/formate.js
  View file @633692c
... ... @@ -20,6 +20,8 @@ function formateTime() {
20 20 }
21 21  
22 22 function formaterTotal(val) {
  23 + // console.log(val)
  24 + // console.log(typeof val)
23 25 let str = val.toString()
24 26 let newStr = ''
25 27 let count = 0
... ...
src/view/VHome.vue
  View file @633692c
... ... @@ -4,27 +4,27 @@
4 4 <ul class="main-wrap">
5 5 <li class="main-left">
6 6 <div class="frame-wrap">
7   - <v-parking></v-parking>
  7 + <v-parking :total="parkingTotal" :rodeside="rodeside" :rodeclose="rodeclose"></v-parking>
8 8 </div>
9 9 <div class="frame-wrap frame-wrap-center">
10   - <v-toll></v-toll>
  10 + <v-toll :total="tollTotal" :tollsign="tollsign" :tollnosign="tollnosign"></v-toll>
11 11 </div>
12 12 <div class="frame-wrap">
13   - <v-inout></v-inout>
  13 + <v-inout :inoutmsg="inoutmsg" :inouttime="inouttime" :imgUrl="imgUrl"></v-inout>
14 14 </div>
15 15 </li>
16 16 <li class="main-center">
17   - <v-map></v-map>
  17 + <v-map :mapdata="ditudata"></v-map>
18 18 </li>
19 19 <li class="main-right">
20 20 <div class="frame-wrap">
21   - <v-income></v-income>
  21 + <v-income :total="incometotal" :barChartData="barChartData"></v-income>
22 22 </div>
23 23 <div class="frame-wrap frame-wrap-center">
24   - <v-berth></v-berth>
  24 + <v-berth :total="bertotal" :pieChartData="pieChartData"></v-berth>
25 25 </div>
26 26 <div class="frame-wrap">
27   - <v-equipment></v-equipment>
  27 + <v-equipment :equipment="equipment"></v-equipment>
28 28 </div>
29 29 </li>
30 30 </ul>
... ... @@ -51,6 +51,65 @@ export default {
51 51 VIncome,
52 52 VBerth,
53 53 VEquipment
  54 + },
  55 + data(){
  56 + return {
  57 + parkingTotal: 319706,
  58 + rodeside: 2345,
  59 + rodeclose: 23,
  60 + tollTotal: 23454,
  61 + tollsign: 12309,
  62 + tollnosign: 2130,
  63 + inoutmsg: '万达广场停车场1 京A231231',
  64 + inouttime: '08:00',
  65 + 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',
  66 + incometotal:123213,
  67 + barChartData:{
  68 + seriesData:[2000,200,300],
  69 + total:2500
  70 + },
  71 + bertotal:28839,
  72 + pieChartData: {
  73 + yData: [21321,13311],
  74 + legendData: ['空余','占有']
  75 + },
  76 + equipment:{
  77 + PDA:150,
  78 + PDATotal:3000,
  79 + berth:150,
  80 + berthTotal:2300,
  81 + daozha:150,
  82 + daozhaTotal:1300,
  83 + ydp:150,
  84 + ydpTotal:300
  85 + },
  86 + ditudata:[
  87 + {Name:'万达停车场1',lonId:'111.742579',latId:'40.818675',status:0,freeBrethNum:0,plBerthNum:1000,plName:'万达广场停车场1',plAddress:'北京万达广场1'},
  88 + {Name:'万达停车场2',lonId:'111.622579',latId:'40.878675',status:1,freeBrethNum:100,plBerthNum:800,plName:'万达广场停车场2',plAddress:'北京万达广场2'},
  89 + {Name:'万达停车场333333',lonId:'111.782579',latId:'40.778675',status:2,freeBrethNum:300,plBerthNum:500,plName:'万达广场停车场3',plAddress:'北京万达广场3'}
  90 + ]
  91 +
  92 + }
  93 + },
  94 + mounted(){
  95 + // this.setmethod()
  96 + // this.$nextTick(function () {
  97 + // this.setmethod()
  98 + // })
  99 + var self = this
  100 + var t =setInterval(()=>{
  101 + self.parkingTotal ++
  102 + console.log(self.parkingTotal)
  103 + },1000)
  104 +
  105 + },
  106 + methods:{
  107 + setmethod(){
  108 + setInterval(()=>{
  109 + this.parkingTotal ++
  110 + console.log(this.parkingTotal)
  111 + },1000)
  112 + }
54 113 }
55 114 }
56 115 </script>
... ...