大屏地图接口联调

src/api/http.js

@@ -43,4 +43,34 @@
     method: 'get',
     params:data
   })
+}
+
+//查询支付方式占比
+
+export function paysource(data) {
+  return request({
+    url: '/admin/screen/roadPark/paysource',
+    method: 'get',
+    params:data
+  })
+}
+
+// 近30日实收分析
+
+export function income(data) {
+  return request({
+    url: '/admin/screen/roadPark/income',
+    method: 'get',
+    params:data
+  })
+}
+
+// 查询路段停车场详情
+
+export function detail(data) {
+  return request({
+    url: '/admin/screen/roadPark/detail',
+    method: 'get',
+    params:data
+  })
 }

src/components/Receivables/PercenTage.vue

@@ -3,7 +3,7 @@
  * @Author: wangcc
  * @Date: 2023-01-11 14:19:56
  * @LastEditors: wangcc
- * @LastEditTime: 2023-01-11 15:34:37
+ * @LastEditTime: 2023-01-28 17:33:30
  * @FilePath: \parking_LargeScreen\src\components\Receivables\PercenTage.vue
  * @Copyright: Copyright (c) 2016~2023 by wangcc, All Rights Reserved. 
 -->
@@ -14,7 +14,7 @@
         <h3>支付方式占比分析</h3>
       </div>
       <div class="pieChart-box">
-        <pie-charts :option="echartsData.pieData"></pie-charts>
+        <pie-charts :option="echartsData.pieData" v-if="hackReset"></pie-charts>
       </div>
     </div>
   </div>
@@ -22,6 +22,7 @@
 
 <script>
 import pieCharts from '@/components/charts/PieCharts.vue';
+import { paysource } from '@/api/http';
 export default {
   name: 'PercenTage',
   components: {
@@ -29,6 +30,7 @@ export default {
   },
   data() {
     return {
+      hackReset: false,
       echartsData: {
         pieData: [
           { value: 40, name: '微信支付' },
@@ -37,8 +39,45 @@ export default {
           { value: 30, name: '快捷支付' },
           { value: 30, name: '无感支付' }
         ]
+      },
+      payData:{
+        0:'现金支付',
+        1:'微信支付', 
+        3:'快捷支付', 
+        4:'聚合支付', 
+        6:'无感支付', 
+        99:'其他'
+      },
+      searchFrom: {
+        isRoad: '1'
       }
     };
+  },
+  created() {
+    this.getPaySource();
+  },
+  watch: {
+    '$store.state.addr.isRoad': {
+      handler(val) {
+        this.searchFrom.isRoad = val;
+        this.getPaySource();
+      }
+    }
+  },
+  methods: {
+    async getPaySource() {
+      this.hackReset = false;
+      let { code, data } = await paysource(this.searchFrom);
+      if (code == 200) {
+        this.hackReset = true;
+        this.echartsData.pieData = data.itemList.map(item =>{
+          let pieData = {};
+          pieData.value = item.amt;
+          pieData.name = this.payData[item.paySource]
+          return pieData
+        })
+      }
+    }
   }
 };
 </script>

src/components/Receivables/Receivables.vue

@@ -3,7 +3,7 @@
  * @Author: wangcc
  * @Date: 2023-01-09 11:20:54
  * @LastEditors: wangcc
- * @LastEditTime: 2023-01-11 17:52:38
+ * @LastEditTime: 2023-01-28 13:40:30
  * @FilePath: \parking_LargeScreen\src\components\Receivables\Receivables.vue
  * @Copyright: Copyright (c) 2016~2023 by wangcc, All Rights Reserved. 
 -->
@@ -16,7 +16,7 @@
         </div>
         <div class="total-num-box">
           <span class="total-title">{{countName}}</span>
-          <span class="total-num">{{totalData.roadTotal}}</span>
+          <span class="total-num"><Count-to :startVal='startVal' :endVal='totalData.roadTotal' :duration='4000'></Count-to></span>
         </div>
       </div>
       <div class="item-list">
@@ -25,7 +25,7 @@
         </div>
         <div class="total-num-box">
           <span class="total-title">车位数（个）</span>
-          <span class="total-num">{{totalData.spaceTotal}}</span>
+          <span class="total-num"><Count-to :startVal='startVal' :endVal='totalData.spaceTotal' :duration='4000'></Count-to></span>
         </div>
       </div>
       <div class="item-list">
@@ -34,7 +34,7 @@
         </div>
         <div class="total-num-box">
           <span class="total-title">累计实收（元）</span>
-          <span class="total-num">{{totalData.realAmount}}</span>
+          <span class="total-num"><Count-to :startVal='startVal' :endVal='totalData.realAmount' :duration='4000'></Count-to></span>
         </div>
       </div>
       <div class="item-list">
@@ -43,7 +43,7 @@
         </div>
         <div class="total-num-box">
           <span class="total-title">累计停车次数（次）</span>
-          <span class="total-num">{{totalData.countVehicle}}</span>
+          <span class="total-num"><Count-to :startVal='startVal' :endVal='totalData.countVehicle' :duration='4000'></Count-to></span>
         </div>
       </div>
     </div>
@@ -61,13 +61,14 @@
 </template>
 
 <script>
-// import CountFlop from 'vue-count-to';
+import CountTo from 'vue-count-to';
 import CountFlop from '@/components/CountFlop/countFlop.vue';
 import { totalData, amtVehicle } from '@/api/http';
 export default {
   name: 'Receivables',
   components: {
-    CountFlop
+    CountFlop,
+    CountTo
   },
   data() {
     return {
@@ -75,6 +76,7 @@ export default {
         countVehicle: '',
         realAmount:''
       },
+      startVal: 0,
       totalData: {},
       countName: '路段数量（个）',
       searchFrom: {
@@ -89,7 +91,6 @@ export default {
   watch: {
     '$store.state.addr.isRoad': {
       handler(val) {
-        console.log(val);
         if (val == 0) {
           this.countName = '停车场数量（个）';
         } else {
@@ -169,6 +170,7 @@ export default {
       margin-bottom: 28px;
     }
   }
+  
   .toDay-total {
     background: RGBA(24, 33, 52, 0.3);
     backdrop-filter: blur(10px);
@@ -196,4 +198,5 @@ export default {
     }
   }
 }
+
 </style>

src/components/Receivables/analyse.vue

@@ -3,7 +3,7 @@
  * @Author: wangcc
  * @Date: 2023-01-11 15:28:30
  * @LastEditors: wangcc
- * @LastEditTime: 2023-01-11 15:59:20
+ * @LastEditTime: 2023-01-28 14:38:21
  * @FilePath: \parking_LargeScreen\src\components\Receivables\analyse.vue
  * @Copyright: Copyright (c) 2016~2023 by wangcc, All Rights Reserved. 
 -->
@@ -15,7 +15,7 @@
         <h3>近30日实收分析</h3>
       </div>
       <div class="pieChart-box">
-        <bar-charts :option="echartsData"></bar-charts>
+        <bar-charts :option="echartsData" v-if="hackReset"></bar-charts>
       </div>
     </div>
   </div>
@@ -23,6 +23,7 @@
 
 <script>
 import barCharts from '@/components/charts/barCharts.vue';
+import { income } from '@/api/http';
 export default {
   name: 'analyse',
   components: {
@@ -31,36 +32,56 @@ export default {
   data() {
     return {
       echartsData: {
-        barRData: [
-          { num: 10, time: '02' },
-          { num: 14, time: '04' },
-          { num: 17, time: '06' },
-          { num: 9, time: '08' },
-          { num: 20, time: '10' },
-          { num: 25, time: '12' },
-          { num: 15, time: '14' },
-          { num: 11, time: '16' },
-          { num: 12, time: '18' },
-          { num: 2, time: '20' },
-          { num: 18, time: '22' },
-          { num: 13, time: '24' }
-        ],
+        barRData: [],
         xData: [],
         yData: []
+      },
+      hackReset:false,
+      searchFrom: {
+        isRoad: '1'
       }
     };
   },
   created() {
-    this.getTimeAnalysis()
+    this.getIncome();
   },
-  methods:{
-    getTimeAnalysis() { 
-      this.echartsData.xData = this.echartsData.barRData.map(item => {
-        return item.time
-      })
-      this.echartsData.yData = this.echartsData.barRData.map(item => {
-        return item.num
-      })
+  watch: {
+    '$store.state.addr.isRoad': {
+      handler(val) {
+        this.searchFrom.isRoad = val;
+        this.getIncome();
+      },
+
+    }
+  },
+  methods: {
+    getTimeAnalysis() {
+      this.echartsData.xData = this.echartsData.barRData.map((item) => {
+        return item.time;
+      });
+      this.echartsData.yData = this.echartsData.barRData.map((item) => {
+        return item.num;
+      });
+    },
+    getIncome() {
+      this.hackReset = false;
+      income(this.searchFrom).then((res) => {
+        if (res.code == 200) {
+          this.hackReset = true;
+          this.echartsData.barRData = res.data.map(item =>{
+            let data = {}
+            data.time = item.payTime;
+            data.num = item.realAmount;
+            return data;
+          });
+          this.echartsData.xData = this.echartsData.barRData.map((item) => {
+            return item.time;
+          });
+          this.echartsData.yData = this.echartsData.barRData.map((item) => {
+            return item.num;
+          });
+        }
+      });
     }
   }
 };

src/components/Receivables/ranking.vue

@@ -47,7 +47,6 @@ export default {
   watch: {
     '$store.state.addr.isRoad': {
       handler(val) {
-        console.log(val);
         if (val == 0) {
           this.countName = '停车场名称';
         } else {
@@ -150,6 +149,13 @@ export default {
       td.el-table__cell {
       background-color: rgba(255, 255, 255, 0.2);
     }
+    ::v-deep .el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar {
+    width: 10px;
+}
+::v-deep .el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-thumb {
+    background: #293446; // 滑块颜色
+    border-radius: 5px; // 滑块圆角
+}
   }
 }
 </style>

src/components/charts/PieCharts.vue

@@ -3,7 +3,7 @@
  * @Author: wangcc
  * @Date: 2023-01-11 14:51:13
  * @LastEditors: wangcc
- * @LastEditTime: 2023-01-11 15:26:11
+ * @LastEditTime: 2023-01-28 14:52:12
  * @FilePath: \parking_LargeScreen\src\components\charts\PieCharts.vue
  * @Copyright: Copyright (c) 2016~2023 by wangcc, All Rights Reserved. 
 -->
@@ -43,7 +43,7 @@ export default {
                 fontFamily: 'AlibabaLight'
             }
         };
-        let colorArr = ['#51DBB6', '#5AD7DE', '#D6A748', '#4D75C2', '#E0E0E2'];
+        let colorArr = ['#51DBB6', '#5AD7DE', '#D6A748', '#4D75C2', '#E0E0E2','#c0c0c0'];
         colorArr.map((item, index) => {
             legendRich['percent' + index] = {
                 color: item,
@@ -56,7 +56,7 @@ export default {
                 fontSize: 35 * scale,
                 width: 35 * scale,
                 fontFamily: 'BarlowBold',
-                // padding: [5, 0, 0, 0],
+                padding: [0, 0, 0, 12],
             };
         })
         let options = {
@@ -82,7 +82,7 @@ export default {
                 right: 0,
                 top: 0,
                 align: 'left',
-                itemGap: 40 * scale,
+                itemGap: 20 * scale,
                 show: true,
                 formatter: function (name) {
                     let target, percent;

src/components/charts/barCharts.vue

@@ -3,7 +3,7 @@
  * @Author: wangcc
  * @Date: 2023-01-11 15:39:49
  * @LastEditors: wangcc
- * @LastEditTime: 2023-01-11 16:18:12
+ * @LastEditTime: 2023-01-28 14:39:02
  * @FilePath: \parking_LargeScreen\src\components\charts\barCharts.vue
  * @Copyright: Copyright (c) 2016~2023 by wangcc, All Rights Reserved. 
 -->
@@ -16,165 +16,169 @@ export default {
   name: 'BarCharts.vue',
   props: ['option'],
   mounted() {
-    let scale = document.documentElement.clientWidth / 3840;
-    //let scale = 1;
-    let xData = this.option.xData;
-    let yData = this.option.yData;
-    let typeChart = this.$echarts.init(this.$refs.typeChart);
-    let optionType = {
-      backgroundColor: 'rgba(29, 35, 40, 0)',
-      grid: {
-        top: 60 * scale,
-        right: 40 * scale,
-        left: 120 * scale,
-        bottom: 40 * scale
-      },
-      legend: {
-        show: false
-      },
-      tooltip:{
-        trigger:'axis',
-      },
-      xAxis: [
-        {
-          type: 'category',
-          data: xData,
-          name: '(日)',
-          nameTextStyle: {
-            color: '#d5d6d7',
-            padding: [10, 30, 0, 10],
-            align: 'center',
-            fontSize: 20 * scale,
-            verticalAlign: 'top',
-            fontFamily: 'AlibabaLight'
-          },
-          axisLine: {
-            lineStyle: {
-              color: '#4f6162',
-              width: 2
-            }
-          },
-          axisLabel: {
-            margin: 10,
-            color: '#fff',
-            fontFamily: 'AlibabaLight',
-            textStyle: {
-              fontSize: 20 * scale
+    this.barChart();
+  },
+  methods: {
+    barChart() {
+      let scale = document.documentElement.clientWidth / 3840;
+      //let scale = 1;
+      let xData = this.option.xData;
+      let yData = this.option.yData;
+      let typeChart = this.$echarts.init(this.$refs.typeChart);
+      let optionType = {
+        backgroundColor: 'rgba(29, 35, 40, 0)',
+        grid: {
+          top: 60 * scale,
+          right: 40 * scale,
+          left: 120 * scale,
+          bottom: 50 * scale
+        },
+        legend: {
+          show: false
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: xData,
+            name: '(日)',
+            nameTextStyle: {
+              color: '#d5d6d7',
+              padding: [10, 30, 0, 10],
+              align: 'center',
+              fontSize: 20 * scale,
+              verticalAlign: 'top',
+              fontFamily: 'AlibabaLight'
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#4f6162',
+                width: 2
+              }
+            },
+            axisLabel: {
+              margin: 10,
+              color: '#fff',
+              fontFamily: 'AlibabaLight',
+              textStyle: {
+                fontSize: 20 * scale
+              }
+            },
+            axisTick: {
+              show: false
             }
-          },
-          axisTick: {
-            show: false
           }
-        }
-      ],
-      yAxis: [
-        {
-          name: '单位(元)',
-          nameTextStyle: {
-            //y轴上方单位的颜色
-            color: '#fff',
-            padding: [0, 16, 0, 5],
-            align: 'center',
-            verticalAlign: 'bottom',
-            fontFamily: 'AlibabaRegular',
-            fontSize: 18 * scale
-          },
-          axisLabel: {
-            formatter: '{value}',
-            color: '#fff',
-            fontFamily: 'AlibabaLight',
-            fontSize: 18 * scale
-          },
-          axisTick: {
-            show: false
-          },
-          axisLine: {
-            show: false,
-            lineStyle: {
-              color: 'rgba(0,186,255,.6)'
-            }
-          },
-          splitLine: {
-            lineStyle: {
-              color: 'rgba(255,255,255,0.12)',
-              type: 'dotted'
+        ],
+        yAxis: [
+          {
+            name: '单位(元)',
+            nameTextStyle: {
+              //y轴上方单位的颜色
+              color: '#fff',
+              padding: [0, 16, 0, 5],
+              align: 'center',
+              verticalAlign: 'bottom',
+              fontFamily: 'AlibabaRegular',
+              fontSize: 18 * scale
+            },
+            axisLabel: {
+              formatter: '{value}',
+              color: '#fff',
+              fontFamily: 'AlibabaLight',
+              fontSize: 18 * scale
+            },
+            axisTick: {
+              show: false
+            },
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: 'rgba(0,186,255,.6)'
+              }
+            },
+            splitLine: {
+              lineStyle: {
+                color: 'rgba(255,255,255,0.12)',
+                type: 'dotted'
+              }
             }
           }
-        }
-      ],
-      series: [
-        // {
-        //   type: 'bar',
-        //   data: yData,
-        //   barWidth: 14 * scale,
-        //   itemStyle: {
-        //     normal: {
-        //       color: new this.$echarts.graphic.LinearGradient(
-        //         0,
-        //         0,
-        //         0,
-        //         1,
-        //         [
-        //           {
-        //             offset: 0,
-        //             color: '#009FCF' // 0% 处的颜色
-        //           },
-        //           {
-        //             offset: 1,
-        //             color: '#00C4FF' // 100% 处的颜色
-        //           }
-        //         ],
-        //         false
-        //       ),
-        //       opacity: 1,
-        //       shadowColor: 'rgba(0, 196, 255,0.7)',
-        //       shadowBlur: 4
-        //     },
-        //     emphasis: {
-        //       color: new this.$echarts.graphic.LinearGradient(
-        //         0,
-        //         0,
-        //         0,
-        //         1,
-        //         [
-        //           {
-        //             offset: 0,
-        //             color: '#FFFFFF' // 0% 处的颜色
-        //           },
-        //           {
-        //             offset: 1,
-        //             color: '#FFFFFF' // 100% 处的颜色
-        //           }
-        //         ],
-        //         false
-        //       ),
-        //       opacity: 1,
-        //       shadowBlur: 8,
-        //       barWidth: 10
-        //     }
-        //   }
-        // },
-        {
-          name: '近30日实收分析',
-          type: 'line',
-          data: yData,
-          itemStyle: {
-            normal: {
-              label: {
-                show: true
-              },
-              color: '#FFF', //改变折线点的颜色
-              lineStyle: {
-                color: '#00C4FF' //改变折线颜色
+        ],
+        series: [
+          // {
+          //   type: 'bar',
+          //   data: yData,
+          //   barWidth: 14 * scale,
+          //   itemStyle: {
+          //     normal: {
+          //       color: new this.$echarts.graphic.LinearGradient(
+          //         0,
+          //         0,
+          //         0,
+          //         1,
+          //         [
+          //           {
+          //             offset: 0,
+          //             color: '#009FCF' // 0% 处的颜色
+          //           },
+          //           {
+          //             offset: 1,
+          //             color: '#00C4FF' // 100% 处的颜色
+          //           }
+          //         ],
+          //         false
+          //       ),
+          //       opacity: 1,
+          //       shadowColor: 'rgba(0, 196, 255,0.7)',
+          //       shadowBlur: 4
+          //     },
+          //     emphasis: {
+          //       color: new this.$echarts.graphic.LinearGradient(
+          //         0,
+          //         0,
+          //         0,
+          //         1,
+          //         [
+          //           {
+          //             offset: 0,
+          //             color: '#FFFFFF' // 0% 处的颜色
+          //           },
+          //           {
+          //             offset: 1,
+          //             color: '#FFFFFF' // 100% 处的颜色
+          //           }
+          //         ],
+          //         false
+          //       ),
+          //       opacity: 1,
+          //       shadowBlur: 8,
+          //       barWidth: 10
+          //     }
+          //   }
+          // },
+          {
+            name: '近30日实收分析',
+            type: 'line',
+            data: yData,
+            itemStyle: {
+              normal: {
+                label: {
+                  show: true
+                },
+                color: '#FFF', //改变折线点的颜色
+                lineStyle: {
+                  color: '#00C4FF' //改变折线颜色
+                }
               }
             }
           }
-        }
-      ]
-    };
-    typeChart.setOption(optionType);
-  },
-  methods: {}
+        ]
+      };
+      typeChart.setOption(optionType,true);
+    }
+  }
 };
 </script>
 <style scoped lang="scss">

src/components/map.vue

@@ -3,7 +3,7 @@
  * @Author: wangcc
  * @Date: 2023-01-09 11:19:36
  * @LastEditors: wangcc
- * @LastEditTime: 2023-01-11 17:35:00
+ * @LastEditTime: 2023-01-28 18:01:02
  * @FilePath: \parking_LargeScreen\src\components\map.vue
  * @Copyright: Copyright (c) 2016~2023 by wangcc, All Rights Reserved. 
 -->
@@ -15,7 +15,7 @@
 </template>
 
 <script>
-import { rightScrollData } from '@/api/http';
+import { rightScrollData, detail } from '@/api/http';
 export default {
   name: '',
   data() {
@@ -23,7 +23,9 @@ export default {
       AMap: null,
       map: null,
       zoom: 18,
-      searchFrom:{
+      show: true,
+      infoWindow: null,
+      searchFrom: {
         isRoad: '1'
       }
     };
@@ -37,9 +39,9 @@ export default {
   watch: {
     '$store.state.addr.isRoad': {
       handler(val) {
-        console.log(val);
-        this.searchFrom.isRoad = val
-        this.getRoadParkList()
+        this.searchFrom.isRoad = val;
+        this.markerData.setMap(null);
+        this.getRoadParkList();
       }
     }
   },
@@ -54,14 +56,89 @@ export default {
         mapStyleId: 'style1',
         viewMode: '2D',
         disableDefaultUI: true
+        // baseMap: [
+        //   { type: 'vector' }, //设置矢量底图
+        //   {
+        //     type: 'traffic',
+        //     features: ['base'], //路况图类型，目前支持路况线网
+        //     opacity: 0.9 //路况线网图的透明度
+        //   }
+        // ]
       });
       this.map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM);
       this.map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.SCALE);
       this.map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ROTATION);
     },
     async getRoadParkList() {
+      let _this = this;
+      var bounds = new TMap.LatLngBounds();
       let { code, rows } = await rightScrollData(this.searchFrom);
-      console.log(rows);
+      if (code == 200) {
+        rows.forEach((item) => {
+          if (item.latitude != null) {
+            item.position = new TMap.LatLng(item.latitude, item.longitude);
+            if (this.searchFrom.isRoad == '1') {
+              item.styleId = 'roadMarker';
+            } else {
+              item.styleId = 'parkingMarker';
+            }
+          }
+        });
+        let markerArr = [];
+        markerArr = rows.filter((ele) => ele.latitude != null);
+        this.markerData = new TMap.MultiMarker({
+          id: 'marker-layer',
+          map: this.map,
+          styles: {
+            roadMarker: new TMap.MarkerStyle({
+              width: 35,
+              height: 42,
+              anchor: { x: 16, y: 32 },
+              src: require('@/assets/images/mark_road_ico.png')
+            }),
+            parkingMarker: new TMap.MarkerStyle({
+              width: 43,
+              height: 46,
+              anchor: { x: 16, y: 32 },
+              src: require('@/assets/images/mark_parking.png')
+            })
+          },
+          geometries: markerArr
+        });
+        //判断标注点是否在范围内
+        markerArr.forEach(function (item) {
+          //若坐标点不在范围内，扩大bounds范围
+          if (bounds.isEmpty() || !bounds.contains(item.position)) {
+            bounds.extend(item.position);
+          }
+        });
+        //设置地图可视范围
+        this.map.fitBounds(bounds, {
+          padding: 100 // 自适应边距
+        });
+        //初始化infoWindow
+        _this.infoWindow = new TMap.InfoWindow({
+          map: this.map,
+          position: new TMap.LatLng(39.984104, 116.307503),
+          offset: { x: 0, y: -60 } //设置信息窗相对position偏移像素
+        });
+        _this.infoWindow.close();
+        this.markerData.on('click', function (evt) {
+          //设置infoWindow
+          infoWindow.open(); //打开信息窗
+          infoWindow.setPosition(evt.geometry.position); //设置信息窗位置
+          console.log(evt.geometry.roadNo);
+          _this.getDetail(evt.geometry.roadNo);
+          // infoWindow.setContent(evt.toString()); //设置信息窗内容
+        });
+      }
+    },
+    getDetail(roadNo) {
+      detail({ roadNo: roadNo }).then((res) => {
+        if (res.code == 200) {
+          console.log(res);
+        }
+      });
     }
   }
 };

src/components/selectLabel.vue

@@ -49,7 +49,6 @@ export default {
       'changeSelectIsRoad',
     ]),
     selectChange(e) {
-      console.log(e);
       this.changeSelectIsRoad(e)
     }
   }