左右两边接口接上

src/api/form.js

@@ -13,37 +13,46 @@ export const BiApi = {
     })
   },
 
-  // 广告位-id查询
-  getInfo: (id) => {
+  // 开放统计-支付统计
+  paymentStatistics: (query) => {
     return request({
-      url: '/pk/ad/PkAdPosition/getInfo/' + id,
-      method: 'get'
+      url: '/pk/openup/OpenStatisticsController/paymentStatistics',
+      method: 'get',
+      params: query
     })
   },
-
-  // 新增广告位
-  addInfo: (data) => {
+  // 开放统计-收费车辆统计
+  amountCartStatistics: (query) => {
     return request({
-      url: '/pk/ad/PkAdPosition/add',
-      method: 'post',
-      data: data
+      url: '/pk/openup/OpenStatisticsController/amountCartStatistics',
+      method: 'get',
+      params: query
     })
   },
 
-  // 编辑广告位
-  updateInfo: (data) => {
+  // 开放统计-24小时车流统计
+  todayTrafficStatistics: (query) => {
     return request({
-      url: '/pk/ad/PkAdPosition/edit',
-      method: 'put',
-      data: data
+      url: '/pk/openup/OpenStatisticsController/todayTrafficStatistics',
+      method: 'get',
+      params: query
     })
   },
 
-  // 删除广告位
-  delInfo: (id) => {
+  // 开放统计-24小时车辆使用统计
+  todayCarUseStatistics: (query) => {
+    return request({
+      url: '/pk/openup/OpenStatisticsController/todayCarUseStatistics',
+      method: 'get',
+      params: query
+    })
+  },
+  // 开放统计-车辆使用统计
+  useCarStatistics: (query) => {
     return request({
-      url: '/pk/ad/PkAdPosition/remove/' + id,
-      method: 'delete'
+      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: ['金融行业', '电子政务', '文创版权', '教育行业', '智慧停车'],
-        cityData: [1200, 900, 600, 400, 300, 100]
+        cityList: ['临时车', '月卡车', '免费车', '绿牌车'],
+        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: '博士',
-        value: 100
+        name: '支付宝支付',
+        value: this.chartData.alipayPayAmount
       }, {
-        name: '硕士',
-        value: 100
+        name: '微信支付',
+        value: this.chartData.weixinPayAmount
       }, {
-        name: '本科',
-        value: 100
+        name: '现金支付',
+        value: this.chartData.casePayAmount
       }, {
-        name: '专科',
-        value: 100
-      },];
+        name: '机器人支付',
+        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,
-            name: '区块链',
+            value: this.dataRate,
+            name: '车位已使用',
             itemStyle: {
               normal: {
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
@@ -119,8 +131,8 @@ export default {
             }
           },
           {
-            value: 4,
-            name: '大数据',
+            value: this.shenRate,
+            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],
-      yData1: [9, 12, 15, 18, 15, 12, 9, 12, 15, 18, 15, 12],
-      yData2: [-9, -12, -15, -18, -15, -12, -9, -12, -15, -18, -15, -12],
+      xAxisData: [],
+      yData1: [],
     }
   },
   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

@@ -34,30 +34,14 @@
                 <td class="td">收费金额</td>
               </thead>
               <tbody class="tbody">
-                <tr class="tr">
-                  <td class="td"><img src="/img/img3.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>
-                <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 class="tr" v-for="item, index in rankData" :key="index">
+                  <td class="td" v-if="index == 0"><img src="/img/img3.png" alt=""></td>
+                  <td class="td" v-if="index == 1"><img src="/img/img4.png" alt=""></td>
+                  <td class="td" v-if="index == 2"><img src="/img/img5.png" alt=""></td>
+                  <td class="td" v-if="index == 3"><img src="/img/img6.png" alt=""></td>
+                  <td class="td" v-if="index == 4"><img src="/img/img7.png" alt=""></td>
+                  <td class="td">{{ item.parkingInfoName }}</td>
+                  <td class="td">{{ item.totalAmount }} 元</td>
                 </tr>
               </tbody>
             </table>
@@ -68,7 +52,7 @@
             <div class="topBg">
               支付统计
             </div>
-            <talent />
+            <talent :chart-data="payData" />
             <div class="panel-footer"></div>
           </div>
 
@@ -77,7 +61,7 @@
             <div class="topBg">
               收费车辆统计
             </div>
-            <business />
+            <business :chart-data="payDataCar"/>
             <div class="panel-footer"></div>
           </div>
         </div>
@@ -112,7 +96,7 @@
             <div class="topBg2">
               24小时车流统计
             </div>
-            <scrollArc />
+            <scrollArc :chart-data="todayTraffic"/>
             <div class="panel-footer"></div>
           </div>
 
@@ -123,23 +107,23 @@
             <div class="carFlex">
               <div class="let">
                 <div class="item">
-                  <p class="p1">总车位</p>
-                  <p class="p2">6666</p>
+                  <p class="p1">总车位（个）</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="p2">6666</p>
+                  <p class="p1">已使用车位（个）</p>
+                  <p class="p2">{{useCarCon.parkingPlaceUseNums}}</p>
                 </div>
                 <div class="item">
-                  <p class="p1">剩余车位</p>
-                  <p class="p2">6666</p>
+                  <p class="p1">剩余车位（个）</p>
+                  <p class="p2">{{useCarCon.parkingPlaceSurplusNums}}</p>
                 </div>
               </div>
             </div>
@@ -151,7 +135,7 @@
             <div class="topBg">
               24小时车位使用统计
             </div>
-            <szBar />
+            <szBar :chart-data="todayCarUse"/>
             <div class="panel-footer"></div>
           </div>
         </div>
@@ -176,6 +160,19 @@ export default {
   },
   data() {
     return {
+      // 车场排行数据
+      rankData: [],
+      // 支付统计数据
+      payData: {},
+      // 收费车辆统计
+      payDataCar:{},
+      // 开放统计-24小时车流统计
+      todayTraffic:{},
+      // 开放统计-24小时车辆使用统计
+      todayCarUse:[],
+      // 开放统计-车辆使用统计
+      useCarCon:{},
+      authCode: '',
       nowTime: '',
       week: '',
       date: '',
@@ -208,16 +205,41 @@ export default {
 
   },
   created() {
-    const authCode = '712110694681677824'
-    BiApi.getParkingRanking({authCode}).then((res)=>{
-      console.log(res);
-    })
+    this.authCode = '712110694681677824'
+    this.getData();
+
   },
   mounted() {
     this.nowTimes();
     this.getEchart();
   },
   methods: {
+    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
+      })
+      
+    },
     nowTimes() {
       this.clear();
       let dayjs = this.dayjs()
@@ -507,8 +529,6 @@ export default {
       }
 
       myChart.setOption(option, true);
-
-      var that = this;
       var dataList = echarts.getMap("china").geoJson.features;
       // console.log("dataList:", dataList);
       // 鼠标事件