Merge branch 'master' of http://git.weirui0755.com/jack/parkBigScreen2

src/api/form.js

@@ -21,6 +21,16 @@ export const BiApi = {
       params: query
     })
   },
+  
+  // 开放统计-支付统计
+  paymentStatistics: (query) => {
+    return request({
+      url: '/pk/openup/OpenStatisticsController/paymentStatistics',
+      method: 'get',
+      params: query
+    })
+  },
+
   // 实时进出信息
   getRealTimeInOutRecord: (query) => {
     return request({
@@ -30,5 +40,38 @@ export const BiApi = {
     })
   },
 
+  // 开放统计-收费车辆统计
+  amountCartStatistics: (query) => {
+    return request({
+      url: '/pk/openup/OpenStatisticsController/amountCartStatistics',
+      method: 'get',
+      params: query
+    })
+  },
+
+  // 开放统计-24小时车流统计
+  todayTrafficStatistics: (query) => {
+    return request({
+      url: '/pk/openup/OpenStatisticsController/todayTrafficStatistics',
+      method: 'get',
+      params: query
+    })
+  },
 
+  // 开放统计-24小时车辆使用统计
+  todayCarUseStatistics: (query) => {
+    return request({
+      url: '/pk/openup/OpenStatisticsController/todayCarUseStatistics',
+      method: 'get',
+      params: query
+    })
+  },
+  // 开放统计-车辆使用统计
+  useCarStatistics: (query) => {
+    return request({
+      url: '/pk/openup/OpenStatisticsController/useCarStatistics',
+      method: 'get',
+      params: query
+    })
+  },
 }

src/components/companySummary/business.vue

@@ -12,6 +12,12 @@
 
 <script>
 export default {
+    props: {
+    chartData: {
+      type: Object,
+      required: true,
+    },
+  },
   name: "business",
   data() {
     return {
@@ -19,15 +25,18 @@ export default {
     }
   },
   mounted() {
+       setTimeout(() => {
+      // console.log(this.chartData)
         this.getEchartLeft1();
+    }, 500);
   },
   methods: {
     getEchartLeft1() {
       // 实例化对象
       let myChart = echarts.init(document.getElementById('chart_left1'));
       let charts = { // 按顺序排列从大到小
-        cityList: ['金融行业', '电子政务', '文创版权', '教育行业', '智慧停车'],
+        cityList: ['临时车', '月卡车', '免费车', '绿牌车'],
-        cityData: [1200, 900, 600, 400, 300, 100]
+        cityData: [this.chartData.temporaryCarNum, this.chartData.yueZuCheNum, this.chartData.freeCarNum, this.chartData.greenCarNum]
       }
 
       let top10CityList = charts.cityList;
@@ -162,7 +171,7 @@ export default {
                 formatter: function (params) {
                   // console.log(params)
                     // return params.data.realValue;
-                    var percent = Number((params.value / 1200) * 100).toFixed(2) + '%';
+                    var percent = Number((params.value / 100) * 100).toFixed(2) + '%';
                     return percent;
                 },
                 color: '#fff',

src/components/companySummary/talent.vue

@@ -7,37 +7,84 @@
 <template>
   <div class="talent-container">
     <div class="chart" id="chart_left2"></div>
+    <div class="dataText">
+      <div class="item">
+        <span class="p1 blue">{{ chartData.alipayPayAmount }}元</span>
+        <span class="p1 blue">{{ GetPercent(chartData.alipayPayAmount,0.1) }}%</span>
+      </div>
+      <div class="item">
+        <span class="p1 green">{{ chartData.weixinPayAmount }}元</span>
+        <span class="p1 green">{{ GetPercent(chartData.weixinPayAmount,0.1) }}%</span>
+      </div>
+      <div class="item">
+        <span class="p1 y">{{ chartData.casePayAmount }}元</span>
+        <span class="p1 y">{{ GetPercent(chartData.casePayAmount,0.1) }}%</span>
+      </div>
+      <div class="item">
+        <span class="p1 r">{{ chartData.robotPayAmount }}元</span>
+        <span class="p1 r">{{ GetPercent(chartData.robotPayAmount,0.1) }}%</span>
+      </div>
+      <div class="item">
+        <span class="p1 b">{{ chartData.unionPayAmount }}元</span>
+        <span class="p1 b">{{ GetPercent(chartData.unionPayAmount,0.1) }}%</span>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
+  props: {
+    chartData: {
+      type: Object,
+      required: true,
+    },
+  },
   name: "talent",
   data() {
     return {
 
     }
+  },
+  created() {
+
   },
   mounted() {
+    setTimeout(() => {
+      // console.log(this.chartData)
       this.getEchartLeft2();
+    }, 500);
+ 
   },
   methods: {
+    GetPercent(num, total) {
+      num = parseFloat(num);
+      total = parseFloat(total);
+      if (isNaN(num) || isNaN(total)) {
+        return "-";
+      }
+      return total <= 0 ? "0%" : (Math.round(num / total * 100) / 100.00);
+    },
     getEchartLeft2() {
       let myChart = echarts.init(document.getElementById('chart_left2'));
-      
       let scaleData = [{
-        name: '博士',
+        name: '支付宝支付',
-        value: 100
+        value: this.chartData.alipayPayAmount
       }, {
-        name: '硕士',
+        name: '微信支付',
-        value: 100
+        value: this.chartData.weixinPayAmount
       }, {
-        name: '本科',
+        name: '现金支付',
-        value: 100
+        value: this.chartData.casePayAmount
       }, {
-        name: '专科',
+        name: '机器人支付',
-        value: 100
+        value: this.chartData.robotPayAmount
-      },];
+      },
+      {
+        name: '银联支付',
+        value: this.chartData.unionPayAmount
+      },
+      ];
       let rich = {
         white: {
           color: '#ddd',
@@ -72,10 +119,11 @@ export default {
         });
         legendData.push(scaleData[i].name);
       }
+      // console.log(legendData)
 
       let option = {
         title: {
-          text: "总金额：69838.69元",
+          text: "总金额：" + this.chartData.totalAmount + " 元",
           top: 20,
           left: 200,
           textStyle: {
@@ -161,9 +209,51 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.p1:first-child {
+  margin-right: .6rem;
+}
+
+.blue {
+  color: #4786FF;
+}
+
+.green {
+  color: #91CC75;
+}
+
+.y {
+  color: #FAC858;
+}
+
+.r {
+  color: #EE6666;
+}
+
+.b {
+  color: #73C0DE;
+}
+
 .talent-container {
+  position: relative;
+
   .chart {
     height: 3rem;
   }
+
+  .dataText {
+    position: absolute;
+    right: 0.45rem;
+    top: 0.75rem;
+
+    .item {
+      margin-bottom: .03rem;
+
+      .p1 {
+        font-size: .12rem;
+      }
+    }
+
+  }
+
 }
 </style>

src/components/ringPie/index.vue

@@ -32,22 +32,34 @@
 
 <script>
 export default {
+        props: {
+    chartData: {
+      required: true,
+    },
+  },
   name: "ringPie",
   data() {
     return {
-      option: null
+      option: null,
-
+      dataRate:0,
+      // 剩余的百分数
+      shenRate:0,
     }
   },
   mounted() {
+       setTimeout(() => {
+        this.dataRate=this.chartData.parkingPlaceUseNums/this.chartData.parkingPlaceTotalNums
+        this.dataRate=Math.round(this.dataRate*100)
+        this.shenRate=100-this.dataRate
         this.getEchart();
+    }, 500);
   },
   methods: {
     getEchart() {
       let myChart = echarts.init(document.getElementById('chart_rp'));
       this.option = {
         title: {
-          text: '50%',
+          text: this.dataRate+"%",
           // 副标题
           subtext: "车位已使用",
           // 主副标题间距
@@ -98,8 +110,8 @@ export default {
             show: false
           },
           data: [{
-            value: 6,
+            value: this.dataRate,
-            name: '区块链',
+            name: '车位已使用',
             itemStyle: {
               normal: {
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
@@ -119,8 +131,8 @@ export default {
             }
           },
           {
-            value: 4,
+            value: this.shenRate,
-            name: '大数据',
+            name: '车位未使用',
             itemStyle: {
               normal: {
                 color: '#3B4257',

src/components/scrollArc/index.vue

@@ -22,18 +22,36 @@
 
 <script>
 export default {
+      props: {
+    chartData: {
+      type: Object,
+      required: true,
+    },
+  },
   name: "scrollArc",
   data() {
     return {
       option: null,
       number: 0, // 播放所在下标
       timer: null,
-      xData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+      // 时间
-      data: [54, 86, 46, 77, 96, 89, 88, 23, 38, 3, 66, 98]
+      xData: [],
+      dataIn: [],
+      dataOut: [],
     }
   },
   mounted() {
+         setTimeout(() => {
+      // console.log(this.chartData)
+       for(var i= 0;i<this.chartData.inStatistics.length;i++){
+            this.xData.push(this.chartData.inStatistics[i].timeUnit)
+            this.dataIn.push(this.chartData.inStatistics[i].num)
+       }
+          for(var i= 0;i<this.chartData.outStatistics.length;i++){
+            this.dataOut.push(this.chartData.outStatistics[i].num)
+       }
         this.getEchart();
+    }, 500);
   },
   methods: {
     getEchart() {
@@ -78,7 +96,7 @@ export default {
             show: false
           }, 
           axisLabel: {
-            formatter: '{value} 月'
+            formatter: '{value}'
           },
           axisLine: {
             lineStyle: {
@@ -99,7 +117,7 @@ export default {
           {
           name: '入场车流',
           type: 'line',
-          data: this.data,
+          data: this.dataIn,
           symbolSize: 10,
           itemStyle: {
             opacity: 0,
@@ -134,7 +152,7 @@ export default {
             {
           name: '出场车流',
           type: 'line',
-          data: [5,10,20,30,40,50,60,70,80,90,100],
+          data: this.dataOut,
           symbolSize: 10,
           itemStyle: {
             opacity: 0,

src/components/szBar/index.vue

@@ -22,17 +22,28 @@
 
 <script>
 export default {
+       props: {
+    chartData: {
+      required: true,
+    },
+  },
   name: "szBar",
   data() {
     return {
       option: null,
-      xAxisData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+      xAxisData: [],
-      yData1: [9, 12, 15, 18, 15, 12, 9, 12, 15, 18, 15, 12],
+      yData1: [],
-      yData2: [-9, -12, -15, -18, -15, -12, -9, -12, -15, -18, -15, -12],
     }
   },
   mounted() {
+      setTimeout(() => {
+      // console.log(this.chartData)
+             for(var i= 0;i<this.chartData.inStatistics.length;i++){
+            this.xAxisData.push(this.chartData.inStatistics[i].timeUnit)
+            this.yData1.push(this.chartData.inStatistics[i].num)
+       }
         this.getEchart();
+    }, 500);
   },
   methods: {
     getEchart() {
@@ -72,7 +83,7 @@ export default {
           data: this.xAxisData,
           axisLabel: {
             color: '#999',
-            formatter: '{value} 月'
+            formatter: '{value}'
           },
           axisTick: {
             show: false
@@ -126,7 +137,7 @@ export default {
         },
         series: [
           {
-            name: '正值柱状图',
+            name: '车位使用',
             type: 'bar',
             stack: 'one',
             itemStyle: {

src/views/Brand.vue

@@ -29,44 +29,32 @@
                 <td class="td">收费金额</td>
               </thead>
               <tbody class="tbody">
-                <tr class="tr">
+                <tr class="tr" v-for="item, index in rankData" :key="index">
-                  <td class="td"><img src="/img/img3.png" alt="" /></td>
+                  <td class="td" v-if="index == 0"><img src="/img/img3.png" alt=""></td>
-                  <td class="td">深圳宝安中心大厦</td>
+                  <td class="td" v-if="index == 1"><img src="/img/img4.png" alt=""></td>
-                  <td class="td">6890.38元</td>
+                  <td class="td" v-if="index == 2"><img src="/img/img5.png" alt=""></td>
-                </tr>
+                  <td class="td" v-if="index == 3"><img src="/img/img6.png" alt=""></td>
-                <tr class="tr">
+                  <td class="td" v-if="index == 4"><img src="/img/img7.png" alt=""></td>
-                  <td class="td"><img src="/img/img4.png" alt="" /></td>
+                  <td class="td">{{ item.parkingInfoName }}</td>
-                  <td class="td">深圳宝安中心大厦</td>
+                  <td class="td">{{ item.totalAmount }} 元</td>
-                  <td class="td">6890.38元</td>
-                </tr>
-                <tr class="tr">
-                  <td class="td"><img src="/img/img4.png" alt="" /></td>
-                  <td class="td">深圳宝安中心大厦</td>
-                  <td class="td">6890.38元</td>
-                </tr>
-                <tr class="tr">
-                  <td class="td"><img src="/img/img4.png" alt="" /></td>
-                  <td class="td">深圳宝安中心大厦</td>
-                  <td class="td">6890.38元</td>
-                </tr>
-                <tr class="tr">
-                  <td class="td"><img src="/img/img4.png" alt="" /></td>
-                  <td class="td">深圳宝安中心大厦</td>
-                  <td class="td">6890.38元</td>
                 </tr>
               </tbody>
             </table>
           </div>
 
           <div class="left-top">
-            <div class="topBg">支付统计</div>
+            <div class="topBg">
-            <talent />
+              支付统计
+            </div>
+            <talent :chart-data="payData" />
             <div class="panel-footer"></div>
           </div>
 
           <div class="left-top">
-            <div class="topBg">收费车辆统计</div>
+            <div class="topBg">
-            <business />
+              收费车辆统计
+            </div>
+            <business :chart-data="payDataCar" />
             <div class="panel-footer"></div>
           </div>
         </div>
@@ -97,8 +85,10 @@
 
         <div class="item right">
           <div class="left-top">
-            <div class="topBg2">24小时车流统计</div>
+            <div class="topBg2">
-            <scrollArc />
+              24小时车流统计
+            </div>
+            <scrollArc :chart-data="todayTraffic" />
             <div class="panel-footer"></div>
           </div>
 
@@ -107,23 +97,23 @@
             <div class="carFlex">
               <div class="let">
                 <div class="item">
-                  <p class="p1">总车位</p>
+                  <p class="p1">总车位（个）</p>
-                  <p class="p2">6666</p>
+                  <p class="p2">{{ useCarCon.parkingPlaceTotalNums }}</p>
                 </div>
                 <div class="item">
                   <p class="p1">周转率</p>
-                  <p class="p2">66%</p>
+                  <p class="p2">{{ parseInt(useCarCon.parkingPlaceTurnover * 100) }}%</p>
                 </div>
               </div>
-              <ringPie />
+              <ringPie :chart-data="useCarCon" />
               <div class="rig">
                 <div class="item">
-                  <p class="p1">已使用车位</p>
+                  <p class="p1">已使用车位（个）</p>
-                  <p class="p2">6666</p>
+                  <p class="p2">{{ useCarCon.parkingPlaceUseNums }}</p>
                 </div>
                 <div class="item">
-                  <p class="p1">剩余车位</p>
+                  <p class="p1">剩余车位（个）</p>
-                  <p class="p2">6666</p>
+                  <p class="p2">{{ useCarCon.parkingPlaceSurplusNums }}</p>
                 </div>
               </div>
             </div>
@@ -132,8 +122,10 @@
           </div>
 
           <div class="left-top">
-            <div class="topBg">24小时车位使用统计</div>
+            <div class="topBg">
-            <szBar />
+              24小时车位使用统计
+            </div>
+            <szBar :chart-data="todayCarUse" />
             <div class="panel-footer"></div>
           </div>
         </div>
@@ -157,9 +149,22 @@ export default {
   },
   data() {
     return {
-      nowTime: "",
+      // 车场排行数据
-      week: "",
+      rankData: [],
-      date: "",
+      // 支付统计数据
+      payData: {},
+      // 收费车辆统计
+      payDataCar: {},
+      // 开放统计-24小时车流统计
+      todayTraffic: {},
+      // 开放统计-24小时车辆使用统计
+      todayCarUse: [],
+      // 开放统计-车辆使用统计
+      useCarCon: {},
+      authCode: '',
+      nowTime: '',
+      week: '',
+      date: '',
       timer: null,
       startNumber: 0,
       startAmount: 0,
@@ -191,9 +196,9 @@ export default {
   },
   computed: {},
   created() {
-    // BiApi.getParkingRanking({ authCode }).then((res) => {
+    this.authCode = '712110694681677824'
-    //   console.log(res);
+    this.getData();
-    // })
+
   },
   mounted() {
     this.heart();
@@ -221,6 +226,32 @@ export default {
         this.getRealTimeInOutRecord();
       }
     },
+    getData() {
+      // 开放统计-车场排行
+      BiApi.getParkingRanking({ authCode: this.authCode }).then((res) => {
+        this.rankData = res.data
+      })
+      // 开放统计-支付统计
+      BiApi.paymentStatistics({ authCode: this.authCode }).then((res) => {
+        this.payData = res.data
+      })
+      // 开放统计-收费车辆统计
+      BiApi.amountCartStatistics({ authCode: this.authCode }).then((res) => {
+        this.payDataCar = res.data
+      })
+      // 开放统计-24小时车流统计
+      BiApi.todayTrafficStatistics({ authCode: this.authCode }).then((res) => {
+        this.todayTraffic = res.data
+      })
+      //  开放统计-24小时车辆使用统计
+      BiApi.todayCarUseStatistics({ authCode: this.authCode }).then((res) => {
+        this.todayCarUse = res.data
+      })
+      BiApi.useCarStatistics({ authCode: this.authCode }).then((res) => {
+        this.useCarCon = res.data
+      })
+
+    },
     /**
      * 心跳函数,每秒执行一次
      */
@@ -546,7 +577,6 @@ export default {
       };
 
       myChart.setOption(option, true);
-
       var dataList = echarts.getMap("china").geoJson.features;
       // console.log("dataList:", dataList);
       // 鼠标事件
@@ -563,7 +593,9 @@ export default {
         myChart.resize();
       });
     },
-    clickGoNext() { },
+    clickGoNext() {
+
+    },
   },
   beforeDestroy() {
     this.clear();