axios

liuqimichale
1 parent ca985273
Showing 12 changed files with 150 additions and 67 deletions
src/components/VBerth.vue
src/components/VEquipment.vue
src/components/VIncome.vue
src/components/VInout.vue
src/components/VMap.vue
src/components/VParking.vue
src/components/VToll.vue
src/components/base/AccountNum.vue
src/components/base/PieEchart.vue
src/components/base/barChart.vue
src/utils/formate.js
src/view/VHome.vue
@@ -2,7 +2,7 @@
     <div class="theme-wrap">
         <card-title> <span>泊位消息</span></card-title>
         <div class="theme-body">
-            <account-num>
+            <account-num :totalnum="total">
                 <span>总计</span>
             </account-num>
             <ul class="income-echart">
@@ -10,8 +10,8 @@
                    <pie-echart :chart-data="pieChartData"></pie-echart>
                </li>
                <li class="berth-inf">
-                   <p><span class="free-berth">{{11834|filterTotal}}</span><span>空余</span></p>
-                   <p><span class="buss-berth">{{4496|filterTotal}}</span><span>占有</span></p>
+                   <p><span class="free-berth">{{pieChartData.yData[0]|filterTotal}}</span><span>空余</span></p>
+                   <p><span class="buss-berth">{{pieChartData.yData[1]|filterTotal}}</span><span>占有</span></p>
                </li>
             </ul>
         </div>
@@ -29,12 +29,13 @@ export default {
     AccountNum,
     PieEchart
   },
+  props:['total','pieChartData'],
   data() {
     return {
-      pieChartData: {
-        yData: [1,1],
-        legendData: ['空余','占有']
-      },
+      // pieChartData: {
+      //   yData: [1,1],
+      //   legendData: ['空余','占有']
+      // },
     }
   },
   mounted(){
@@ -8,7 +8,7 @@
                     <p>PDA在线率</p>
                 </div>
                 <div class="rotate-status back">
-                    <p class="text-blue">100/300</p>
+                    <p class="text-blue">{{equipment.PDA}}/{{equipment.PDATotal}}</p>
                     <p>PDA/PDA在线</p>
                 </div>
             </li>
@@ -18,27 +18,27 @@
                     <p>地磁在线率</p>
                 </div>
                 <div class="rotate-status back">
-                    <p class="text-blue">100/300</p>
+                    <p class="text-blue">{{equipment.berth}}/{{equipment.berthTotal}}</p>
                     <p>地磁/地磁</p>
                 </div>
             </li>
             <li class="equipment-section">
                 <div class="normal-status front">
-                    <p class="text-blue">23.4%</p>
+                    <p class="text-orange">23.4%</p>
                     <p>道闸在线率</p>
                 </div>
                 <div class="rotate-status back">
-                    <p class="text-blue">100/300</p>
+                    <p class="text-orange">{{equipment.daozha}}/{{equipment.daozhaTotal}}</p>
                     <p>道闸/道闸在线</p>
                 </div>
             </li>
             <li class="equipment-section">
                 <div class="normal-status front">
-                    <p class="text-blue">23.4%</p>
+                    <p class="text-orange">23.4%</p>
                     <p>诱导屏在线率</p>
                 </div>
                 <div class="rotate-status back">
-                    <p class="text-blue">100/300</p>
+                    <p class="text-orange">{{equipment.ydp}}/{{equipment.ydpTotal}}</p>
                     <p>诱导屏/诱导屏在线</p>
                 </div>
             </li>
@@ -54,6 +54,7 @@ export default {
   components: {
     CardTitle
   },
+  props:['equipment'],
   data() {
     return {
@@ -2,11 +2,11 @@
     <div class="theme-wrap">
         <card-title> <span>收入消息</span></card-title>
         <div class="theme-body">
-            <account-num>
+            <account-num :totalnum="total">
                 <span>总计</span>
             </account-num>
             <div class="income-echart" id="income-echart">
-                <bar-chart :chart-data="pieChartData"></bar-chart>
+                <bar-chart :chart-data="barChartData"></bar-chart>
             </div>
         </div>
     </div>
@@ -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: {
@@ -3,7 +3,7 @@
         <card-title> <span>进出场消息</span></card-title>
         <div class="theme-body">
             <div class="access-title">
-                <p><span><span class="access-icon"></span>万达停车场  京A243547 进场</span> <span>07:20</span></p>
+                <p><span><span class="access-icon"></span>{{inoutmsg}} 进场</span> <span>{{inouttime}}</span></p>
             </div>
             <div class="access-img" :style="{backgroundImage:'url('+imgUrl+')'}"></div>
         </div>
@@ -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'}
+    }
   }
 }
 </script>
@@ -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));
         }
@@ -9,18 +9,32 @@ import idleCar from &#39;../images/content/idle-status.png&#39;; //以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(
             `<div class="dialog-wrap">
-                  <div class="dialog-header" title="${data[item].plAddress}">${data[item].plName}</div>
-                  <div class="dialog-address" title="${data[item].plAddress}">${data[item].plAddress}</div>
+                  <div class="dialog-header" title="${mapData[item].plAddress}">${mapData[item].plName}</div>
+                  <div class="dialog-address" title="${mapData[item].plAddress}">${mapData[item].plAddress}</div>
                   <ul class="dislog-body">
-                    <li><div>${data[item].freeBrethNum}</div><div>空闲</div></li>
+                    <li><div>${mapData[item].freeBrethNum}</div><div>空闲</div></li>
                     <li></li>
-                    <li><div>${data[item].plBerthNum}</div><div>总数</div></li>
+                    <li><div>${mapData[item].plBerthNum}</div><div>总数</div></li>
                   </ul>
                   <div class="dislog-footer">停车场收入:1293847.00元</div>
                   <div class="dislog-footer">停车场收入:1293847.00元</div>
@@ -2,16 +2,16 @@
     <div class="theme-wrap">
         <card-title> <span>停车场消息</span></card-title>
         <div class="theme-body">
-            <account-num>
+            <account-num :totalnum="total">
                 <span>总计</span>
             </account-num>
             <ul class="theme-container">
                 <li class="roadside">
-                    <p>{{sideNum|filterTotal}}</p>
+                    <p>{{rodeside|filterTotal}}</p>
                     <p>路侧</p>
                 </li>
                 <li class="roadclose">
-                    <p>{{closeNum|filterTotal}}</p>
+                    <p>{{rodeclose|filterTotal}}</p>
                     <p>封闭</p>
                 </li>
             </ul>
@@ -28,10 +28,9 @@ export default {
     CardTitle,
     AccountNum
   },
+  props:['total','rodeside','rodeclose'],
   data(){
     return{
-      sideNum: 23454,
-      closeNum: 23454
     }
   }
 }
@@ -2,16 +2,16 @@
     <div class="theme-wrap">
         <card-title> <span>收费员消息</span></card-title>
         <div class="theme-body">
-            <account-num>
+            <account-num :totalnum="total">
                 <span>应签到</span>
             </account-num>
             <ul class="theme-container">
                 <li class="roadside">
-                    <p>{{sideNum|filterTotal}}</p>
+                    <p>{{tollsign|filterTotal}}</p>
                     <p>已签到</p>
                 </li>
                 <li class="roadclose">
-                    <p>{{closeNum|filterTotal}}</p>
+                    <p>{{tollnosign|filterTotal}}</p>
                     <p>未签到</p>
                 </li>
             </ul>
@@ -28,10 +28,10 @@ export default {
     CardTitle,
     AccountNum
   },
+  props:['total','tollsign','tollnosign'],
   data(){
     return{
-      sideNum: 23454,
-      closeNum: 23454
+
     }
   }
 }
@@ -2,7 +2,7 @@
     <div class="total-wrap">
         <slot></slot>
         <div class="total-main" >
-            <div  v-for="item in total" :key="item" :class="item !==',' ? 'eleNumBg':'noeleNumBg'" >
+            <div  v-for="(item,index) in total" :key="index+Math.random()" :class="item !==',' ? 'eleNumBg':'noeleNumBg'" >
                 {{item}}
             </div>
         </div>
@@ -13,9 +13,10 @@
 import { formaterTotal } from '../../utils/formate'
 export default {
   name: 'AccountNum',
+  props:['totalnum'],
   data(){
     return {
-      total: formaterTotal(219706)
+      total: formaterTotal(this.totalnum)
     }
   }
 }
@@ -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,
@@ -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: {
@@ -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
@@ -4,27 +4,27 @@
     <ul class="main-wrap">
       <li class="main-left">
         <div class="frame-wrap">
-          <v-parking></v-parking>
+          <v-parking :total="parkingTotal" :rodeside="rodeside" :rodeclose="rodeclose"></v-parking>
         </div>
         <div class="frame-wrap frame-wrap-center">
-          <v-toll></v-toll>
+          <v-toll :total="tollTotal" :tollsign="tollsign" :tollnosign="tollnosign"></v-toll>
         </div>
         <div class="frame-wrap">
-          <v-inout></v-inout>
+          <v-inout :inoutmsg="inoutmsg" :inouttime="inouttime" :imgUrl="imgUrl"></v-inout>
         </div>
       </li>
       <li class="main-center">
-        <v-map></v-map>
+        <v-map :mapdata="ditudata"></v-map>
       </li>
       <li class="main-right">
         <div class="frame-wrap">
-          <v-income></v-income>
+          <v-income :total="incometotal" :barChartData="barChartData"></v-income>
         </div>
         <div class="frame-wrap frame-wrap-center">
-          <v-berth></v-berth>
+          <v-berth :total="bertotal" :pieChartData="pieChartData"></v-berth>
         </div>
         <div class="frame-wrap">
-          <v-equipment></v-equipment>
+          <v-equipment :equipment="equipment"></v-equipment>
         </div>
       </li>
     </ul>
@@ -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)
+    }
   }
 }
 </script>