营收切片完成 数据接口联调

package-lock.json

@@ -2068,6 +2068,49 @@
         "webpack-merge": "^5.7.3",
         "webpack-virtual-modules": "^0.4.2",
         "whatwg-fetch": "^3.6.2"
+      },
+      "dependencies": {
+        "@vue/vue-loader-v15": {
+          "version": "npm:vue-loader@15.10.1",
+          "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-15.10.1.tgz",
+          "integrity": "sha512-SaPHK1A01VrNthlix6h1hq4uJu7S/z0kdLUb6klubo738NeQoLbS6V9/d8Pv19tU0XdQKju3D1HSKuI8wJ5wMA==",
+          "dev": true,
+          "requires": {
+            "@vue/component-compiler-utils": "^3.1.0",
+            "hash-sum": "^1.0.2",
+            "loader-utils": "^1.1.0",
+            "vue-hot-reload-api": "^2.3.0",
+            "vue-style-loader": "^4.1.0"
+          },
+          "dependencies": {
+            "hash-sum": {
+              "version": "1.0.2",
+              "resolved": "https://registry.npmmirror.com/hash-sum/-/hash-sum-1.0.2.tgz",
+              "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
+              "dev": true
+            }
+          }
+        },
+        "json5": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmmirror.com/json5/-/json5-1.0.2.tgz",
+          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.0"
+          }
+        },
+        "loader-utils": {
+          "version": "1.4.2",
+          "resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-1.4.2.tgz",
+          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^1.0.1"
+          }
+        }
       }
     },
     "@vue/cli-shared-utils": {
@@ -2232,47 +2275,6 @@
         }
       }
     },
-    "@vue/vue-loader-v15": {
-      "version": "npm:vue-loader@15.10.1",
-      "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-15.10.1.tgz",
-      "integrity": "sha512-SaPHK1A01VrNthlix6h1hq4uJu7S/z0kdLUb6klubo738NeQoLbS6V9/d8Pv19tU0XdQKju3D1HSKuI8wJ5wMA==",
-      "dev": true,
-      "requires": {
-        "@vue/component-compiler-utils": "^3.1.0",
-        "hash-sum": "^1.0.2",
-        "loader-utils": "^1.1.0",
-        "vue-hot-reload-api": "^2.3.0",
-        "vue-style-loader": "^4.1.0"
-      },
-      "dependencies": {
-        "hash-sum": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmmirror.com/hash-sum/-/hash-sum-1.0.2.tgz",
-          "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
-          "dev": true
-        },
-        "json5": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmmirror.com/json5/-/json5-1.0.2.tgz",
-          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
-          "dev": true,
-          "requires": {
-            "minimist": "^1.2.0"
-          }
-        },
-        "loader-utils": {
-          "version": "1.4.2",
-          "resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-1.4.2.tgz",
-          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
-          "dev": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^1.0.1"
-          }
-        }
-      }
-    },
     "@vue/web-component-wrapper": {
       "version": "1.3.0",
       "resolved": "https://registry.npmmirror.com/@vue/web-component-wrapper/-/web-component-wrapper-1.3.0.tgz",
@@ -10617,6 +10619,11 @@
         "csstype": "^3.1.0"
       }
     },
+    "vue-count-to": {
+      "version": "1.0.13",
+      "resolved": "https://registry.npmmirror.com/vue-count-to/-/vue-count-to-1.0.13.tgz",
+      "integrity": "sha512-6R4OVBVNtQTlcbXu6SJ8ENR35M2/CdWt3Jmv57jOUM+1ojiFmjVGvZPH8DfHpMDSA+ITs+EW5V6qthADxeyYOQ=="
+    },
     "vue-eslint-parser": {
       "version": "8.3.0",
       "resolved": "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz",

package.json

@@ -22,6 +22,7 @@
     "script-ext-html-webpack-plugin": "^2.1.5",
     "v-scale-screen": "^1.0.2",
     "vue": "^2.6.14",
+    "vue-count-to": "^1.0.13",
     "vue-router": "^3.5.1",
     "vuex": "^3.6.2",
     "webpack": "^5.75.0"

src/api/http.js

@@ -3,16 +3,44 @@
  * @Author: wangcc
  * @Date: 2023-01-09 15:07:51
  * @LastEditors: wangcc
- * @LastEditTime: 2023-01-10 11:16:24
+ * @LastEditTime: 2023-01-11 17:55:28
  * @FilePath: \parking_LargeScreen\src\api\http.js
  * @Copyright: Copyright (c) 2016~2023 by wangcc, All Rights Reserved. 
  */
  import request from '@/utils/request'
 
-  export function rightScrollData() {
+ // 查询路段停车场列表
+  export function rightScrollData(data) {
     return request({
       url: '/admin/screen/roadPark/list',
-      method: 'get'
+      method: 'get',
+      params:data
     })
   }
 
+ // 查询数据概况
+ export function totalData(data) {
+  return request({
+    url: '/admin/screen/roadPark/data',
+    method: 'get',
+    params:data
+  })
+}
+
+ // 查询今日完成订单
+ export function amtVehicle(data) {
+  return request({
+    url: '/admin/screen/roadPark/amtVehicle',
+    method: 'get',
+    params:data
+  })
+}
+
+ // 查询收费排行榜
+ export function amtTop(data) {
+  return request({
+    url: '/admin/screen/roadPark/amtTop',
+    method: 'get',
+    params:data
+  })
+}

src/assets/css/base.scss

@@ -15,4 +15,4 @@ button, input, select, textarea { font-size:100%; }
 table { border-collapse:collapse; border-spacing:0; }
 body{
   overflow: hidden;
-}
+}

src/components/CountFlop/countFlop.vue

@@ -0,0 +1,214 @@
+<template>
+  <div class="count-flop" :key="compKey">
+    <div
+      :class="item!='.'?'count-flop-box':'count-flop-point'"
+      v-for="(item, index) in value"
+      :key="index"
+    >
+      <div v-if="item!='.'" class="count-flop-content" :class="['rolling_' + item]">
+        <div v-for="(item2,index2) in numberList" :key="index2" class="count-flop-num">{{item2}}</div>
+      </div>
+      <div v-else class="count-flop-content">.</div>
+    </div>
+    <div v-if="suffix" class="count-flop-unit">{{suffix}}</div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      value: [],
+      numberList: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
+      compKey: 0
+    };
+  },
+  props: ['val', 'suffix'],
+  watch: {
+    val() {
+      this.value = this.val.toString().split('');
+      this.compKey += 1;
+    }
+  },
+  created() {
+    this.value = this.val.toString().split('');
+  }
+};
+</script>
+<style scoped>
+.count-flop {
+  display: inline-block;
+  font-size: 0;
+  /* 可更改 */
+  height: 50px;
+  line-height: 50px;
+  font-size: 45px;
+  color: #FFAA00;
+}
+
+.count-flop > div {
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+  height: 100%;
+}
+
+.count-flop-box {
+  /* 可更改 */
+  margin-right: 5px;
+  width: 36px;
+  /* border: 1px solid rgba(72, 152, 241, 0.3); */
+
+  background-image: url('@/assets/images/num-bac.png');
+  background-size: 100% 100%;
+  height: 48px;
+  line-height: 48px;
+  border-radius: 6px;
+  position: relative;
+}
+
+.count-flop-point {
+  /* 可更改 */
+  margin-right: 5px;
+  width: 10px;
+}
+
+.count-flop-content {
+  font-family: MicrosoftYaHei-Bold;
+  text-align: center;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  animation-fill-mode: forwards !important;
+}
+
+.rolling_0 {
+  animation: rolling_0 2.1s ease;
+}
+
+@keyframes rolling_0 {
+  from {
+    transform: translateY(-90%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+.rolling_1 {
+  animation: rolling_1 3s ease;
+}
+
+@keyframes rolling_1 {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(-10%);
+  }
+}
+
+.rolling_2 {
+  animation: rolling_2 2.1s ease;
+}
+
+@keyframes rolling_2 {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(-20%);
+  }
+}
+
+.rolling_3 {
+  animation: rolling_3 3s ease;
+}
+
+@keyframes rolling_3 {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(-30%);
+  }
+}
+
+.rolling_4 {
+  animation: rolling_4 2.1s ease;
+}
+
+@keyframes rolling_4 {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(-40%);
+  }
+}
+
+.rolling_5 {
+  animation: rolling_5 3s ease;
+}
+
+@keyframes rolling_5 {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(-50%);
+  }
+}
+
+.rolling_6 {
+  animation: rolling_6 2.1s ease;
+}
+
+@keyframes rolling_6 {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(-60%);
+  }
+}
+
+.rolling_7 {
+  animation: rolling_7 3.1s ease;
+}
+
+@keyframes rolling_7 {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(-70%);
+  }
+}
+
+.rolling_8 {
+  animation: rolling_8 2.1s ease;
+}
+
+@keyframes rolling_8 {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(-80%);
+  }
+}
+
+.rolling_9 {
+  animation: rolling_9 3.6s ease;
+}
+
+@keyframes rolling_9 {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(-90%);
+  }
+}
+</style>

src/components/ParkingRate/index.vue

@@ -3,23 +3,12 @@
  * @Author: wangcc
  * @Date: 2023-01-09 11:22:53
  * @LastEditors: wangcc
- * @LastEditTime: 2023-01-10 17:29:58
+ * @LastEditTime: 2023-01-11 09:27:47
  * @FilePath: \parking_LargeScreen\src\components\ParkingRate\index.vue
  * @Copyright: Copyright (c) 2016~2023 by wangcc, All Rights Reserved. 
 -->
 <template>
   <div class="center">
-    <div class="typeBox">
-      类型：
-      <el-select v-model="value" placeholder="请选择">
-        <el-option
-          v-for="item in options"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value"
-        ></el-option>
-      </el-select>
-    </div>
   </div>
 </template>
 
@@ -36,8 +25,4 @@ export default {
 </script>
 
 <style  lang='scss' scoped>
-.center {
-  width: 100%;
-  height: 100%;
-}
 </style>

src/components/Receivables/PercenTage.vue

@@ -0,0 +1,85 @@
+<!--
+ * @Description: 支付方式占比分析
+ * @Author: wangcc
+ * @Date: 2023-01-11 14:19:56
+ * @LastEditors: wangcc
+ * @LastEditTime: 2023-01-11 15:34:37
+ * @FilePath: \parking_LargeScreen\src\components\Receivables\PercenTage.vue
+ * @Copyright: Copyright (c) 2016~2023 by wangcc, All Rights Reserved. 
+-->
+<template>
+  <div class="PercenTage-box">
+    <div class="PieChart">
+      <div class="rankTitle">
+        <h3>支付方式占比分析</h3>
+      </div>
+      <div class="pieChart-box">
+        <pie-charts :option="echartsData.pieData"></pie-charts>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import pieCharts from '@/components/charts/PieCharts.vue';
+export default {
+  name: 'PercenTage',
+  components: {
+    pieCharts
+  },
+  data() {
+    return {
+      echartsData: {
+        pieData: [
+          { value: 40, name: '微信支付' },
+          { value: 30, name: '现金支付' },
+          { value: 30, name: '聚合支付' },
+          { value: 30, name: '快捷支付' },
+          { value: 30, name: '无感支付' }
+        ]
+      }
+    };
+  }
+};
+</script>
+
+<style  lang='scss' scoped>
+.PercenTage-box {
+  position: absolute;
+  left: 21px;
+  top: 558px;
+  overflow: hidden;
+  z-index: 1001;
+  .PieChart {
+    width: 460px;
+    background: linear-gradient(90deg, #293446 0%, rgba(41, 52, 70, 0.2) 100%);
+    backdrop-filter: blur(10px);
+    overflow: hidden;
+    padding: 18px 0;
+    .rankTitle {
+      text-align: left;
+      padding-left: 20px;
+      font-size: 16px;
+      color: #ffffff;
+      /* line-height: 22px; */
+      margin-bottom: 12px;
+      display: flex;
+      height: 22px;
+      align-items: center;
+    }
+    .rankTitle::before {
+      content: '';
+      width: 16px;
+      height: 15px;
+      display: inline-block;
+      background-image: url('@/assets/images/check.png');
+      background-size: 100% 100%;
+      margin-right: 10px;
+    }
+    .pieChart-box {
+      padding: 0 20px;
+      height: 188px;
+    }
+  }
+}
+</style>

src/components/Receivables/Receivables.vue

@@ -3,7 +3,197 @@
  * @Author: wangcc
  * @Date: 2023-01-09 11:20:54
  * @LastEditors: wangcc
- * @LastEditTime: 2023-01-09 11:22:05
+ * @LastEditTime: 2023-01-11 17:52:38
  * @FilePath: \parking_LargeScreen\src\components\Receivables\Receivables.vue
  * @Copyright: Copyright (c) 2016~2023 by wangcc, All Rights Reserved. 
 -->
+<template>
+  <div class="receivables-box">
+    <div class="total-box">
+      <div class="item-list">
+        <div class="list-img">
+          <img src="@/assets/images/park_ico.png" alt />
+        </div>
+        <div class="total-num-box">
+          <span class="total-title">{{countName}}</span>
+          <span class="total-num">{{totalData.roadTotal}}</span>
+        </div>
+      </div>
+      <div class="item-list">
+        <div class="list-img">
+          <img src="@/assets/images/car_ico.png" alt />
+        </div>
+        <div class="total-num-box">
+          <span class="total-title">车位数（个）</span>
+          <span class="total-num">{{totalData.spaceTotal}}</span>
+        </div>
+      </div>
+      <div class="item-list">
+        <div class="list-img">
+          <img src="@/assets/images/total_money_ico.png" alt />
+        </div>
+        <div class="total-num-box">
+          <span class="total-title">累计实收（元）</span>
+          <span class="total-num">{{totalData.realAmount}}</span>
+        </div>
+      </div>
+      <div class="item-list">
+        <div class="list-img">
+          <img src="@/assets/images/total_parking_ico.png" alt />
+        </div>
+        <div class="total-num-box">
+          <span class="total-title">累计停车次数（次）</span>
+          <span class="total-num">{{totalData.countVehicle}}</span>
+        </div>
+      </div>
+    </div>
+    <div class="toDay-total">
+      <div class="orders-num">
+        <h4>今日累计完成订单数（笔）</h4>
+        <CountFlop :val="amountData.countVehicle" />
+      </div>
+      <div class="orders-num">
+        <h4>今日累计完成交易金额（元）</h4>
+        <CountFlop :val="amountData.realAmount" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// import CountFlop from 'vue-count-to';
+import CountFlop from '@/components/CountFlop/countFlop.vue';
+import { totalData, amtVehicle } from '@/api/http';
+export default {
+  name: 'Receivables',
+  components: {
+    CountFlop
+  },
+  data() {
+    return {
+      amountData: {
+        countVehicle: '',
+        realAmount:''
+      },
+      totalData: {},
+      countName: '路段数量（个）',
+      searchFrom: {
+        isRoad: '1'
+      }
+    };
+  },
+  created() {
+    this.getTotalData();
+    this.getAmtVehicle()
+  },
+  watch: {
+    '$store.state.addr.isRoad': {
+      handler(val) {
+        console.log(val);
+        if (val == 0) {
+          this.countName = '停车场数量（个）';
+        } else {
+          this.countName = '路段数量（个）';
+        }
+        this.searchFrom.isRoad = val;
+        this.getTotalData();
+        this.getAmtVehicle()
+      }
+    }
+  },
+  methods: {
+    async getTotalData() {
+      let { code, data } = await totalData(this.searchFrom);
+      if (code == 200) {
+        this.totalData = data;
+      }
+    },
+    async getAmtVehicle() {
+      let { code, data } = await amtVehicle(this.searchFrom);
+      if (code == 200) {
+        data.countVehicle = data.countVehicle.toString()
+        data.realAmount = data.realAmount.toString()
+        this.amountData = data;
+      }
+    }
+  }
+};
+</script>
+
+<style  lang='scss' scoped>
+.receivables-box {
+  position: absolute;
+  left: 21px;
+  top: 118px;
+  overflow: hidden;
+  z-index: 1001;
+  .total-box {
+    background: linear-gradient(90deg, #293446 0%, rgba(41, 52, 70, 0.2) 100%);
+    backdrop-filter: blur(10px);
+    width: 420px;
+    overflow: hidden;
+    padding: 20px;
+    float: left;
+    .item-list {
+      display: inline-block;
+      width: 210px;
+      text-align: left;
+
+      .list-img {
+        width: 53px;
+        height: 53px;
+        float: left;
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+      .total-num-box {
+        margin-left: 15px;
+        display: inline-flex;
+        flex-direction: column;
+        text-align: left;
+        .total-title {
+          font-size: 14px;
+          color: #d1d3d7;
+        }
+        .total-num {
+          font-size: 26px;
+          color: #fff;
+          line-height: 34px;
+        }
+      }
+    }
+    .item-list:first-child,
+    .item-list:nth-child(2) {
+      margin-bottom: 28px;
+    }
+  }
+  .toDay-total {
+    background: RGBA(24, 33, 52, 0.3);
+    backdrop-filter: blur(10px);
+    display: inline-flex;
+    margin-left: 12px;
+    height: 82px;
+    // align-items: center;
+    padding: 20px;
+    .orders-num {
+      // display: inline-flex;
+      // flex-direction: column;
+      text-align: left;
+      h4 {
+        font-size: 14px;
+        font-weight: 400;
+        color: #d1d3d7;
+        line-height: 21px;
+        margin-bottom: 10px;
+      }
+      .count-number {
+      }
+    }
+    .orders-num:first-child {
+      margin-right: 30px;
+    }
+  }
+}
+</style>

src/components/Receivables/analyse.vue

@@ -0,0 +1,109 @@
+<!--
+ * @Description: 近30日实收分析
+ * @Author: wangcc
+ * @Date: 2023-01-11 15:28:30
+ * @LastEditors: wangcc
+ * @LastEditTime: 2023-01-11 15:59:20
+ * @FilePath: \parking_LargeScreen\src\components\Receivables\analyse.vue
+ * @Copyright: Copyright (c) 2016~2023 by wangcc, All Rights Reserved. 
+-->
+
+<template>
+  <div class="PercenTage-box">
+    <div class="PieChart">
+      <div class="rankTitle">
+        <h3>近30日实收分析</h3>
+      </div>
+      <div class="pieChart-box">
+        <bar-charts :option="echartsData"></bar-charts>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import barCharts from '@/components/charts/barCharts.vue';
+export default {
+  name: 'analyse',
+  components: {
+    barCharts
+  },
+  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' }
+        ],
+        xData: [],
+        yData: []
+      }
+    };
+  },
+  created() {
+    this.getTimeAnalysis()
+  },
+  methods:{
+    getTimeAnalysis() { 
+      this.echartsData.xData = this.echartsData.barRData.map(item => {
+        return item.time
+      })
+      this.echartsData.yData = this.echartsData.barRData.map(item => {
+        return item.num
+      })
+    }
+  }
+};
+</script>
+
+<style  lang='scss' scoped>
+.PercenTage-box {
+  position: absolute;
+  left: 21px;
+  right: 21px;
+  bottom: 20px;
+  overflow: hidden;
+  z-index: 1001;
+  .PieChart {
+    width: 100%;
+    background: linear-gradient(90deg, #293446 0%, rgba(41, 52, 70, 0.2) 100%);
+    backdrop-filter: blur(10px);
+    overflow: hidden;
+    padding: 18px 0;
+    .rankTitle {
+      text-align: left;
+      padding-left: 20px;
+      font-size: 16px;
+      color: #ffffff;
+      /* line-height: 22px; */
+      margin-bottom: 12px;
+      display: flex;
+      height: 22px;
+      align-items: center;
+    }
+    .rankTitle::before {
+      content: '';
+      width: 16px;
+      height: 15px;
+      display: inline-block;
+      background-image: url('@/assets/images/check.png');
+      background-size: 100% 100%;
+      margin-right: 10px;
+    }
+    .pieChart-box {
+      padding: 0 20px;
+      height: 165px;
+    }
+  }
+}
+</style>

src/components/Receivables/ranking.vue

@@ -0,0 +1,155 @@
+<!--
+ * @Description: 实时收费排行榜
+ * @Author: wangcc
+ * @Date: 2023-01-11 12:08:30
+ * @LastEditors: wangcc
+ * @LastEditTime: 2023-01-11 17:58:18
+ * @FilePath: \parking_LargeScreen\src\components\Receivables\ranking.vue
+ * @Copyright: Copyright (c) 2016~2023 by wangcc, All Rights Reserved. 
+-->
+<template>
+  <div class="ranking-box">
+    <div class="table-box">
+      <div class="rankTitle">
+        <h3>实时收费排行</h3>
+      </div>
+      <div class="table-center">
+        <el-table :data="tableData" style="width: 100%" stripe height="180px">
+          <el-table-column type="index" label="序号" align="center"></el-table-column>
+          <el-table-column prop="roadName" :label="countName" align="center"></el-table-column>
+          <el-table-column prop="address" label="实收金额" align="center">
+            <template slot-scope="{row}">
+              <span>￥{{row.amt}}</span>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { amtTop } from '@/api/http';
+export default {
+  name: 'ranking',
+  data() {
+    return {
+      countName: '路段名称',
+      tableData: [],
+      searchFrom: {
+        isRoad: '1'
+      }
+    };
+  },
+  created() {
+    this.getAmtTop();
+  },
+  watch: {
+    '$store.state.addr.isRoad': {
+      handler(val) {
+        console.log(val);
+        if (val == 0) {
+          this.countName = '停车场名称';
+        } else {
+          this.countName = '路段名称';
+        }
+        this.searchFrom.isRoad = val;
+        this.getAmtTop();
+      }
+    }
+  },
+  methods: {
+    async getAmtTop(){
+      let {code,rows} = await amtTop(this.searchFrom);
+      if (code == 200) {
+        this.tableData = rows
+      }
+    }
+  }
+};
+</script>
+
+<style  lang='scss' scoped>
+.ranking-box {
+  position: absolute;
+  left: 21px;
+  top: 300px;
+  overflow: hidden;
+  z-index: 1001;
+  .table-box {
+    width: 460px;
+    background: linear-gradient(90deg, #293446 0%, rgba(41, 52, 70, 0.2) 100%);
+    backdrop-filter: blur(10px);
+    overflow: hidden;
+    padding: 18px 0;
+    .rankTitle {
+      text-align: left;
+      padding-left: 20px;
+      font-size: 16px;
+      color: #ffffff;
+      /* line-height: 22px; */
+      margin-bottom: 12px;
+      display: flex;
+      height: 22px;
+      align-items: center;
+    }
+    .rankTitle::before {
+      content: '';
+      width: 16px;
+      height: 15px;
+      display: inline-block;
+      background-image: url('@/assets/images/check.png');
+      background-size: 100% 100%;
+      margin-right: 10px;
+    }
+    .table-center {
+      background: transparent;
+    }
+    ::v-deep .el-table {
+      color: #fff;
+    }
+    ::v-deep .el-table,
+    .el-table__expanded-cell {
+      background-color: transparent;
+    }
+    ::v-deep .el-table--border::after,
+    .el-table--group::after,
+    .el-table::before {
+      content: '';
+      position: absolute;
+      background-color: transparent;
+      z-index: 1;
+    }
+    // ::v-deep .el-table th.el-table__cell.is-leaf {
+    //   border-bottom: unset;
+    // }
+    ::v-deep .el-table td.el-table__cell,
+    ::v-deep .el-table th.el-table__cell.is-leaf {
+      border-bottom: unset;
+    }
+    ::v-deep .el-table tbody tr:hover > td {
+      background-color: transparent;
+    }
+
+    ::v-deep .el-table .el-table__cell {
+      padding: 3px 0;
+    }
+    ::v-deep .el-table tr {
+      background-color: transparent;
+    }
+    ::v-deep .el-table th.el-table__cell {
+      background-color: rgba(255, 255, 255, 0.2);
+    }
+    ::v-deep .el-table thead {
+      color: #fff;
+    }
+    ::v-deep
+      .el-table--striped
+      .el-table__body
+      tr.el-table__row--striped
+      td.el-table__cell {
+      background-color: rgba(255, 255, 255, 0.2);
+    }
+  }
+}
+</style>

src/components/charts/PieCharts.vue

@@ -0,0 +1,168 @@
+<!--
+ * @Description: 饼图
+ * @Author: wangcc
+ * @Date: 2023-01-11 14:51:13
+ * @LastEditors: wangcc
+ * @LastEditTime: 2023-01-11 15:26:11
+ * @FilePath: \parking_LargeScreen\src\components\charts\PieCharts.vue
+ * @Copyright: Copyright (c) 2016~2023 by wangcc, All Rights Reserved. 
+-->
+
+<template>
+    <div ref="myChart" class="ratioChart"></div>
+</template>
+
+<script>
+import circleIcon from '@/assets/images/circle_zhuangshi.png';
+export default {
+    name: "PieCharts.vue",
+    props: ["option"],
+    mounted() {
+        let scale = document.documentElement.clientWidth / 3840
+        //let scale = 1;
+        let myChart = this.$echarts.init(this.$refs.myChart)
+        const echartData = this.option;
+        let legendRich = {
+            checkName: {
+                fontSize: 26 * scale,
+                color: '#fff',
+                width: 200 * scale,
+                fontFamily: 'AlibabaMedium'
+            },
+            target: {
+                fontSize: 30 * scale,
+                color: '#FEFFFE',
+                fontFamily: 'BarlowBold',
+                width: 60 * scale,
+                textAlign:'right'
+            },
+            unit: {
+                fontSize: 30 * scale,
+                color: '#fff',
+                padding: [5, 0, 0, 0],
+                fontFamily: 'AlibabaLight'
+            }
+        };
+        let colorArr = ['#51DBB6', '#5AD7DE', '#D6A748', '#4D75C2', '#E0E0E2'];
+        colorArr.map((item, index) => {
+            legendRich['percent' + index] = {
+                color: item,
+                fontSize: 35 * scale,
+                fontFamily: 'BarlowBold',
+                width: 35 * scale
+            };
+            legendRich['unit' + index] = {
+                color: item,
+                fontSize: 35 * scale,
+                width: 35 * scale,
+                fontFamily: 'BarlowBold',
+                // padding: [5, 0, 0, 0],
+            };
+        })
+        let options = {
+            color: colorArr,
+            graphic: {
+                elements: [{
+                    type: "image",
+                    z: 3,
+                    style: {
+                        image: circleIcon,
+                        width: 420 * scale,
+                        height: 420 * scale,
+                    },
+                    position: [-10,  -10]
+                }]
+            },
+            legend: {
+                type: 'scroll',
+                icon: "circle",
+                orient: 'vertical',
+                itemWidth: 12,
+                itemHeight: 12,
+                right: 0,
+                top: 0,
+                align: 'left',
+                itemGap: 40 * scale,
+                show: true,
+                formatter: function (name) {
+                    let target, percent;
+                    let str = ``;
+                    let sumNum = 0;
+                    echartData.forEach(item => {
+                        sumNum += item.value
+                    })
+                    for (let i = 0; i < echartData.length; i++) {
+                        if (echartData[i].name === name) {
+                            target = echartData[i].value;
+                            percent = Math.ceil((echartData[i].value / sumNum) * 100);
+                            str = ` {checkName|${name} } {${'percent' + i}|${percent}} {${'unit' + i}|%}`
+                        }
+                    }
+                    return str
+                },
+                textStyle: {
+                    rich: legendRich
+                }
+            },
+            series: [{
+                width: 600 * scale,
+                height: 600 * scale,
+                hoverAnimation: true,
+                zlevel: 100,
+                hoverOffset: 1,
+                name: "checkName",
+                type: "pie",
+                radius: ['46%', '56%'],
+                center: [190 * scale, 190 * scale],
+                label: {
+                    normal: {
+                        position: 'center',
+                        show: false,
+                        formatter: '{num|{c}}\n{label|{b}}',
+                        rich: {
+                            num: {
+                                padding: 5,
+                                align: 'center',
+                                verticalAlign: 'middle',
+                                fontSize: 50 * scale,
+                                color: '#b9fcff',
+                                fontFamily: 'BarlowBold'
+                            },
+                            label: {
+                                align: 'center',
+                                verticalAlign: 'middle',
+                                fontSize: 20 * scale,
+                                color: '#fff',
+                                fontFamily: 'AlibabaRegular'
+                            },
+                        },
+                    },
+                    emphasis: {
+                        show: true
+                    },
+                },
+                itemStyle: {
+                    normal: {
+                        borderWidth: 5,
+                        borderColor: 'rgb(29, 35, 40)',
+                    },
+                    emphasis: {
+                        borderWidth: 0
+                    }
+                },
+                tooltip: {
+                    show: true
+                },
+                data: echartData
+            }]
+        };
+        myChart.setOption(options);
+     }
+}
+</script>
+<style lang="scss" scoped>
+.ratioChart {
+    width: 100%;
+    height: 100%;
+}
+</style>

src/components/charts/barCharts.vue

@@ -0,0 +1,185 @@
+<!--
+ * @Description: 条形折线图
+ * @Author: wangcc
+ * @Date: 2023-01-11 15:39:49
+ * @LastEditors: wangcc
+ * @LastEditTime: 2023-01-11 16:18:12
+ * @FilePath: \parking_LargeScreen\src\components\charts\barCharts.vue
+ * @Copyright: Copyright (c) 2016~2023 by wangcc, All Rights Reserved. 
+-->
+<template>
+  <div id="myBarChart" ref="typeChart" class="typeChart"></div>
+</template>
+
+<script>
+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
+            }
+          },
+          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'
+            }
+          }
+        }
+      ],
+      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: {}
+};
+</script>
+<style scoped lang="scss">
+.typeChart {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/components/map.vue

@@ -3,7 +3,7 @@
  * @Author: wangcc
  * @Date: 2023-01-09 11:19:36
  * @LastEditors: wangcc
- * @LastEditTime: 2023-01-10 17:56:00
+ * @LastEditTime: 2023-01-11 17:35:00
  * @FilePath: \parking_LargeScreen\src\components\map.vue
  * @Copyright: Copyright (c) 2016~2023 by wangcc, All Rights Reserved. 
 -->
@@ -15,18 +15,34 @@
 </template>
 
 <script>
+import { rightScrollData } from '@/api/http';
 export default {
   name: '',
   data() {
     return {
       AMap: null,
       map: null,
-      zoom: 18
+      zoom: 18,
+      searchFrom:{
+        isRoad: '1'
+      }
     };
   },
+  created() {
+    this.getRoadParkList();
+  },
   mounted() {
     this.initMap();
   },
+  watch: {
+    '$store.state.addr.isRoad': {
+      handler(val) {
+        console.log(val);
+        this.searchFrom.isRoad = val
+        this.getRoadParkList()
+      }
+    }
+  },
   methods: {
     initMap() {
       let _this = this;
@@ -42,6 +58,10 @@ export default {
       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 { code, rows } = await rightScrollData(this.searchFrom);
+      console.log(rows);
     }
   }
 };

src/components/selectLabel.vue

@@ -0,0 +1,99 @@
+<!--
+ * @Description: 
+ * @Author: wangcc
+ * @Date: 2023-01-11 09:26:51
+ * @LastEditors: wangcc
+ * @LastEditTime: 2023-01-11 17:32:43
+ * @FilePath: \parking_LargeScreen\src\components\selectLabel.vue
+ * @Copyright: Copyright (c) 2016~2023 by wangcc, All Rights Reserved. 
+-->
+<template>
+  <div class="select-box">
+    <div class="typeBox">
+      类型：
+      <el-select
+        v-model="value"
+        style="width:88px;height:24px"
+        @change="selectChange"
+        :popper-append-to-body="false"
+        size="mini"
+        placeholder="请选择"
+      >
+        <el-option v-for="item in options" :key="item.type" :label="item.name" :value="item.type"></el-option>
+      </el-select>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapMutations, mapState, mapGetters } from 'vuex';
+export default {
+  name: 'selectLabel',
+  data() {
+    return {
+      value: '1',
+      options: [
+        {
+          type: '0',
+          name: '停车场'
+        },
+        {
+          type: '1',
+          name: '路段'
+        }
+      ]
+    };
+  },
+  methods: {
+    ...mapMutations([
+      'changeSelectIsRoad',
+    ]),
+    selectChange(e) {
+      console.log(e);
+      this.changeSelectIsRoad(e)
+    }
+  }
+};
+</script>
+
+<style  lang='scss' scoped>
+.select-box {
+  position: absolute;
+  top: 82px;
+  left: 21px;
+  z-index: 1005;
+  font-size: 16px;
+  height: 24px;
+  line-height: 24px;
+  color: #fff;
+
+  ::v-deep .el-input__inner {
+    background-color: transparent;
+  }
+
+  ::v-deep .el-select-dropdown__item {
+    color: #fff;
+  }
+
+  ::v-deep .el-scrollbar,
+  ::v-deep .el-select-dropdown {
+    background-color: transparent !important;
+    color: #fff !important;
+  }
+
+  ::v-deep .el-scrollbar__wrap,
+  ::v-deep .el-select-dropdown__list {
+    background-color: #0b1a37;
+    color: #fff !important;
+  }
+
+  ::v-deep .el-select-dropdown__item.hover,
+  .el-select-dropdown__item:hover {
+    background-color: rgba(0, 0, 0, 0.3);
+    color: #fff;
+  }
+  ::v-deep .el-select-dropdown__empty {
+    color: #fff !important;
+  }
+}
+</style>

src/components/topNav.vue

@@ -3,7 +3,7 @@
  * @Author: wangcc
  * @Date: 2023-01-09 11:20:03
  * @LastEditors: wangcc
- * @LastEditTime: 2023-01-10 17:33:00
+ * @LastEditTime: 2023-01-11 16:49:06
  * @FilePath: \parking_LargeScreen\src\components\topNav.vue
  * @Copyright: Copyright (c) 2016~2023 by wangcc, All Rights Reserved. 
 -->
@@ -15,7 +15,7 @@
         <div
           class="nav-list"
           :class="classFunc(index)"
-          @click="tabLink(index)"
+          @click="tabLink(index,item)"
           v-for="(item, index) in tabData"
           :key="index"
         >{{item.name}}</div>
@@ -49,6 +49,7 @@ export default {
   name: 'topNav',
   data() {
     return {
+      
       nowTime: '',
       yearNow: '',
       weekNow: '',
@@ -103,8 +104,10 @@ export default {
     document.getElementsByTagName('head')[0].appendChild(script);
   },
   methods: {
-    tabLink(e) {
+    tabLink(e,item) {
+      // console.log(item);
       this.cur = e;
+      this.$emit('tabCheck',item)
     },
     classFunc(index) {
       if (this.cur == index) {
@@ -169,7 +172,7 @@ export default {
       }
     }
     .right-timeWeather {
-      width: 420px;
+      width: 450px;
       margin-right: 20px;
       display: flex;
       align-items: center;

src/main.js

@@ -7,6 +7,7 @@ import '@/assets/css/base.scss';
 import 'element-ui/lib/theme-chalk/index.css';
 import { Select, Option, Input, Table, TableColumn,Dialog } from 'element-ui';
 import VScaleScreen from 'v-scale-screen'
+import * as echarts from 'echarts';
 
 
 Vue.use(VScaleScreen)
@@ -17,6 +18,7 @@ Vue.use(Table);
 Vue.use(TableColumn);
 Vue.use(Dialog);
 Vue.config.productionTip = false
+Vue.prototype.$echarts = echarts;
 
 new Vue({
   router,

src/store/addr/index.js

@@ -0,0 +1,17 @@
+/*
+ * @LastEditors: gcz
+ */
+const addr = {
+  state: {
+    isRoad: "1",
+  },
+  mutations: {
+    // 选择的项目
+    changeSelectIsRoad(state, isRoad) {
+      state.isRoad = isRoad;
+    },
+  },
+  actions: {
+  }
+};
+export default addr;

src/store/getters.js

@@ -0,0 +1,8 @@
+/*
+ * @LastEditors: gcz
+ */
+const getters = {
+    isRoad: state => state.addr.isRoad,
+}
+
+export default getters

src/store/index.js

@@ -1,17 +1,14 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 
+import addr from './addr'
+import getters from './getters'
+
 Vue.use(Vuex)
 
 export default new Vuex.Store({
-  state: {
-  },
-  getters: {
-  },
-  mutations: {
-  },
-  actions: {
-  },
   modules: {
-  }
+    addr
+  },
+  getters
 })

src/utils/request.js

@@ -1,5 +1,5 @@
 import axios from 'axios';
-import {tansParams} from './base'
+import { tansParams } from './base';
 // create an axios instance
 const service = axios.create({
   // baseURL: 'http://chenyp.top:8008', // url = base url + request url
@@ -8,7 +8,7 @@ const service = axios.create({
   timeout: 5000, // request timeout
   transformResponse: [
     function (data) {
-      data = JSON.parse(data)
+      data = JSON.parse(data);
       return data;
     }
   ]
@@ -17,8 +17,24 @@ const service = axios.create({
 // request interceptor
 service.interceptors.request.use(
   (config) => {
+    // get请求映射params参数
     if (config.method === 'get' && config.params) {
-      let url = config.url + '&' + tansParams(config.params);
+      let url = config.url + '?';
+      for (const propName of Object.keys(config.params)) {
+        const value = config.params[propName];
+        var part = encodeURIComponent(propName) + '=';
+        if (value !== null && typeof value !== 'undefined') {
+          if (typeof value === 'object') {
+            for (const key of Object.keys(value)) {
+              let params = propName + '[' + key + ']';
+              var subPart = encodeURIComponent(params) + '=';
+              url += subPart + encodeURIComponent(value[key]) + '&';
+            }
+          } else {
+            url += part + encodeURIComponent(value) + '&';
+          }
+        }
+      }
       url = url.slice(0, -1);
       config.params = {};
       config.url = url;
@@ -26,7 +42,8 @@ service.interceptors.request.use(
     return config;
   },
   function (error) {
-    return Promise.reject(error);
+    console.log(error)
+    Promise.reject(error)
   }
 );
 //添加响应拦截器

src/views/screenIndex/index.vue

@@ -3,7 +3,7 @@
  * @Author: wangcc
  * @Date: 2023-01-09 11:18:33
  * @LastEditors: wangcc
- * @LastEditTime: 2023-01-10 17:58:50
+ * @LastEditTime: 2023-01-11 17:17:10
  * @FilePath: \parking_LargeScreen\src\views\screenIndex\index.vue
  * @Copyright: Copyright (c) 2016~2023 by wangcc, All Rights Reserved. 
 -->
@@ -11,41 +11,50 @@
   <div>
     <v-scale-screen>
       <map-view></map-view>
-      <top-nav></top-nav>
-      <parking></parking>
+      <top-nav @tabCheck="tabCheck"></top-nav>
+        <tab-label v-if="tabType == 1"></tab-label>
+        <Receivables v-if="tabType == 1"></Receivables>
+        <ranking v-if="tabType == 1"></ranking>
+        <percen-tage v-if="tabType == 1"></percen-tage>
+        <analyse v-if="tabType == 1"></analyse>
     </v-scale-screen>
   </div>
 </template>
 
 <script>
-import { rightScrollData } from '@/api/http';
+
 import mapView from '@/components/map.vue';
 import topNav from '@/components/topNav.vue';
-import parking from '@/components/ParkingRate/index.vue'
+import tabLabel from '@/components/selectLabel.vue';
+import Receivables from '@/components/Receivables/Receivables.vue';
+import ranking from '@/components/Receivables/ranking.vue';
+import PercenTage from '@/components/Receivables/PercenTage.vue';
+import analyse from '@/components/Receivables/analyse';
 export default {
   name: '',
   components: {
     mapView,
     topNav,
-    parking
+    tabLabel,
+    Receivables,
+    ranking,
+    PercenTage,
+    analyse
   },
   data() {
     return {
-      AMap: null,
-      map: null,
-      lngLat: [106.628201, 26.646694]
+      tabType: '1'
     };
   },
   created() {
-    this.getRoadParkList();
+    
   },
   mounted() {},
   watch: {},
   methods: {
-    async getRoadParkList() {
-      let { code, rows } = await rightScrollData();
-      console.log(rows);
-    }
+    tabCheck(item) {
+      this.tabType = item.id;
+    },
   }
 };
 </script>