From b1fc8ac2b1b9a98b0a063e66a077bf7901bf16da Mon Sep 17 00:00:00 2001
From: j1ack <1209452658@qq.com>
Date: Mon, 13 Nov 2023 14:05:48 +0800
Subject: [PATCH] first commit

---
 src/api/request.js                   |   3 +-
 src/components/dynamicList/index.vue |   8 +-
 src/components/ringPie/index.vue     |  46 ++--
 src/components/seamless/index.vue    |   4 +-
 src/components/szBar/index.vue       | 334 ++++++++++++++++++---------
 src/views/Brand.vue                  |  73 ++++--
 6 files changed, 316 insertions(+), 152 deletions(-)

diff --git a/src/api/request.js b/src/api/request.js
index c3caf5f..8a358f0 100644
--- a/src/api/request.js
+++ b/src/api/request.js
@@ -8,11 +8,10 @@ axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
 const service = axios.create({
   // axios中请求配置有baseURL选项，表示请求URL公共部分
   // baseURL: 'http://192.168.31.128:8866',
-  baseURL: 'http://parkingadmin.lepa580.com/prod-api',
+  baseURL: 'http://parking.weirui0755.com/prod-api',
   // 超时
   timeout: 30000
 })
-
 // request拦截器
 service.interceptors.request.use(config => {
   // get请求映射params参数
diff --git a/src/components/dynamicList/index.vue b/src/components/dynamicList/index.vue
index bbbdfe6..ea8e22d 100644
--- a/src/components/dynamicList/index.vue
+++ b/src/components/dynamicList/index.vue
@@ -18,7 +18,7 @@
               <div class="y-number-bg animated infinite rotate"></div>
               <div class="y-number-icon"></div>
               <div class="y-number-text">
-                <span>临时车</span>
+                <span>临时车（辆）</span>
                 <span id="number1" class="odometer odometer-theme-digital">
                   <div class="odometer-inside">
                     <span class="odometer-digit">
@@ -43,7 +43,7 @@
               <div class="y-number-bg animated infinite rotateF"></div>
               <div class="y-number-icon"></div>
               <div class="y-number-text">
-                <span>月卡车</span>
+                <span>月卡车（辆）</span>
                 <span id="number2" class="odometer odometer-theme-digital">
                   <div class="odometer-inside">
                     <span class="odometer-digit">
@@ -68,7 +68,7 @@
               <div class="y-number-bg animated infinite rotateF"></div>
               <div class="y-number-icon"></div>
               <div class="y-number-text">
-                <span>免费车</span>
+                <span>免费车（辆）</span>
                 <span id="number3" class="odometer odometer-theme-digital">
                   <div class="odometer-inside">
                     <span class="odometer-digit">
@@ -93,7 +93,7 @@
               <div class="y-number-bg animated infinite rotate"></div>
               <div class="y-number-icon"></div>
               <div class="y-number-text">
-                <span>绿牌车</span>
+                <span>绿牌车（辆）</span>
                 <span id="number4" class="odometer odometer-theme-digital">
                   <div class="odometer-inside">
                     <span class="odometer-digit">
diff --git a/src/components/ringPie/index.vue b/src/components/ringPie/index.vue
index 826251e..f4bfcd5 100644
--- a/src/components/ringPie/index.vue
+++ b/src/components/ringPie/index.vue
@@ -28,7 +28,7 @@
 
 <script>
 export default {
-        props: {
+  props: {
     chartData: {
       required: true,
     },
@@ -37,33 +37,37 @@ export default {
   data() {
     return {
       option: null,
-      dataRate:0,
+      dataRate: 0,
       // 剩余的百分数
-      shenRate:0,
+      shenRate: 0,
     }
   },
   mounted() {
-       setTimeout(() => {
-             if(!this.chartData.parkingPlaceUseNums){
-              this.chartData.parkingPlaceUseNums=0
-           this.chartData.parkingPlaceTotalNums=1
-        }
-        if(!this.chartData.parkingPlaceTurnover){
-         this.chartData.parkingPlaceTurnover=0
-        }
-        // this.dataRate=this.chartData.parkingPlaceUseNums/this.chartData.parkingPlaceTotalNums
-        // this.dataRate=Math.round(this.dataRate*100)
-        this.dataRate=this.chartData.parkingPlaceTurnover
-        this.shenRate=100-this.dataRate
-        this.getEchart();
+    setTimeout(() => {
+      if (!this.chartData.parkingPlaceUseNums) {
+        this.chartData.parkingPlaceUseNums = 0
+        this.chartData.parkingPlaceTotalNums = 1
+      }
+      if (!this.chartData.parkingPlaceTurnover) {
+        this.chartData.parkingPlaceTurnover = 0
+      }
+      this.dataRate = this.chartData.parkingPlaceUseNums / this.chartData.parkingPlaceTotalNums
+      // this.dataRate=Math.round(this.dataRate*100)
+      // this.dataRate=this.chartData.parkingPlaceTurnover
+      this.dataRate = this.dataRate * 100
+      this.dataRate = parseInt(this.dataRate.toPrecision(10))
+      this.shenRate = 100 - this.dataRate
+      this.getEchart();
     }, 800);
   },
-    watch: {
+  watch: {
     chartData: {
       deep: true,
       handler: function () {
-            this.dataRate=this.chartData.parkingPlaceTurnover
-        this.shenRate=100-this.dataRate
+        this.dataRate = this.chartData.parkingPlaceUseNums / this.chartData.parkingPlaceTotalNums
+        this.dataRate = this.dataRate * 100
+        this.dataRate = parseInt(this.dataRate.toPrecision(10))
+        this.shenRate = 100 - this.dataRate
         this.getEchart()
       }
     }
@@ -73,7 +77,7 @@ export default {
       let myChart = echarts.init(document.getElementById('chart_rp'));
       this.option = {
         title: {
-          text: this.dataRate+"%",
+          text: this.dataRate + "%",
           // 副标题
           subtext: "车位已使用",
           // 主副标题间距
@@ -304,8 +308,10 @@ export default {
   }
 
   .chart {
+    display: table;
     width: 3rem;
     height: 3rem;
+    margin: 0 auto !important;
   }
 }
 </style>
diff --git a/src/components/seamless/index.vue b/src/components/seamless/index.vue
index 26f8ac6..4ce5de2 100644
--- a/src/components/seamless/index.vue
+++ b/src/components/seamless/index.vue
@@ -83,8 +83,8 @@ export default {
 	display: block;
 	width: 9.8rem;
 	height: 3.55rem;
-	left: 6.6rem;
-	top: 9.5375rem;
+	left: 7rem;
+	top: 9.8rem;
 	// top: 3.5375rem;
 
 	.sn-title {
diff --git a/src/components/szBar/index.vue b/src/components/szBar/index.vue
index 197aa2f..460f7e6 100644
--- a/src/components/szBar/index.vue
+++ b/src/components/szBar/index.vue
@@ -16,6 +16,8 @@
 </template>
 
 <script>
+import img from '../../assets/img/brand/green.png'
+import img2 from '../../assets/img/brand/org.png'
 export default {
   props: {
     chartData: {
@@ -26,8 +28,11 @@ export default {
   data() {
     return {
       option: null,
+      // in
       xAxisData: [],
       yData1: [],
+      // out
+      yData1Out: [],
     }
   },
   watch: {
@@ -41,67 +46,53 @@ export default {
   mounted() {
     setTimeout(() => {
       // console.log(this.chartData)
-
       this.getEchart();
     }, 800);
   },
 
   methods: {
     getEchart() {
-      this.xAxisData=[];
-      this.yData1=[];
+      this.xAxisData = [];
+      this.yData1Out = [];
+      this.yData1 = [];
       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.yData1Out.push(this.chartData.outStatistics[i].num)
       }
+      // for (var i = 0; i < this.chartData.outStatistics.length; i++) {
+      //   this.yData1Out.push(this.chartData.outStatistics[i].num)
+      // }
       // eslint-disable-next-line no-undef
       let myChart = echarts.init(document.getElementById('chart_bar'));
       let barWidth = '15%';
-      let dataCoord = [
-        { coord: [0, 9] },
-        { coord: [1, 12] },
-        { coord: [2, 15] },
-        { coord: [3, 18] },
-        { coord: [4, 15] },
-        { coord: [5, 12] },
-        { coord: [6, 9] },
-        { coord: [7, 12] },
-        { coord: [8, 15] },
-        { coord: [9, 18] },
-        { coord: [10, 15] },
-        { coord: [11, 12] },
-      ];
-      let dataCoord2 = [
-        { coord: [0, -9] },
-        { coord: [1, -12] },
-        { coord: [2, -15] },
-        { coord: [3, -18] },
-        { coord: [4, -15] },
-        { coord: [5, -12] },
-        { coord: [6, -9] },
-        { coord: [7, -12] },
-        { coord: [8, -15] },
-        { coord: [9, -18] },
-        { coord: [10, -15] },
-        { coord: [11, -12] },
-      ];
-
       this.option = {
+        // xAxis: {
+        //   data: this.xAxisData,
+        //   axisLabel: {
+        //     color: '#999',
+        //     formatter: '{value}'
+        //   },
+        //   axisTick: {
+        //     show: false
+        //   },
+        //   axisLine: {
+        //     show: true,
+        //     lineStyle: {
+        //       color: 'rgba(40, 103, 168, 0.3)',
+        //     }
+        //   },
+        // },
         xAxis: {
+          type: 'category',
+          boundaryGap: false,
           data: this.xAxisData,
+        },
+        yAxis: {
+          type: 'value',
           axisLabel: {
-            color: '#999',
-            formatter: '{value}'
-          },
-          axisTick: {
-            show: false
-          },
-          axisLine: {
-            show: true,
-            lineStyle: {
-              color: 'rgba(40, 103, 168, 0.3)',
-            }
-          },
+            formatter: '{value} 辆'
+          }
         },
         tooltip: {
           trigger: 'axis',
@@ -119,23 +110,23 @@ export default {
             }
           },
         },
-        yAxis: {
-          axisLabel: {
-            color: '#999'
-          },
-          axisTick: {
-            show: false
-          },
-          splitLine: {
-            show: false
-          },
-          axisLine: {
-            show: true,
-            lineStyle: {
-              color: 'rgba(40, 103, 168, 0.3)'
-            }
-          },
-        },
+        // yAxis: {
+        //   axisLabel: {
+        //     color: '#999'
+        //   },
+        //   axisTick: {
+        //     show: false
+        //   },
+        //   splitLine: {
+        //     show: false
+        //   },
+        //   axisLine: {
+        //     show: true,
+        //     lineStyle: {
+        //       color: 'rgba(40, 103, 168, 0.3)'
+        //     }
+        //   },
+        // },
         grid: {
           top: 20,
           left: 20,
@@ -143,51 +134,188 @@ export default {
           bottom: 20,
           containLabel: true
         },
-        series: [
-          {
-            name: '车位使用',
-            type: 'bar',
-            stack: 'one',
-            itemStyle: {
-              normal: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                  offset: 1,
-                  color: 'rgba(0, 0, 0, 0)'
-                }, {
-                  offset: 0.6,
-                  color: '#466e71'
-                }, {
-                  offset: 0,
-                  color: '#43FFFF'
-                }]),
-                label: {
-                  position: "top",
-                  show: true, //开启显示
-                  textStyle: { //数值样式
-                    color: '#fff',
-                    fontSize: 10
-                  }
+            legend: {
+          itemWidth: 30,
+          itemHeight: 30,
+          top: '-3%', //调整位置
+          right: '5%',//调整位置
+          data: [
+            {
+              name: '入场量',
+              textStyle: {
+                fontSize: 12,
+                fontWeight: 'bolder',
+                color: '#fff'
+              },
+              icon: `image://${img}`,
+            },
+            {
+              name: '出场量',
+              textStyle: {
+                fontSize: 12,
+                fontWeight: 'bolder',
+                color: '#fff',
+              },
+              icon: `image://${img2}`,
+            }
+          ],
+          // textStyle:{
+          //       fontSize: 14,//字体大小
+          //       color: '#ffffff'//字体颜色
+          //  },
+        },
+        // series: [
+        //   {
+        //     name: '入场量',
+        //     type: 'bar',
+        //     // stack: 'one',
+        //     barGap: "100%", // 柱图间距
+        //     itemStyle: {
+        //       normal: {
+        //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+        //           offset: 1,
+        //           color: 'rgba(0, 0, 0, 0)'
+        //         }, {
+        //           offset: 0.6,
+        //           color: '#466e71'
+        //         }, {
+        //           offset: 0,
+        //           color: '#43FFFF'
+        //         }]),
+        //         label: {
+        //           position: "top",
+        //           show: true, //开启显示
+        //           textStyle: { //数值样式
+        //             color: '#fff',
+        //             fontSize: 10
+        //           }
+        //         },
+        //       }
+        //     },
+        //     barWidth: barWidth,
+        //     // markPoint: {
+        //     //   symbol: 'circle',
+        //     //   itemStyle: {
+        //     //     normal: {
+        //     //       color: '#43FFFF',
+        //     //       shadowColor: '#43FFFF',
+        //     //       shadowBlur: 20
+        //     //     }
+        //     //   },
+        //     //   symbolSize: [5, 5], // 容器大小
+        //     //   symbolOffset: [0, 0], // 位置偏移
+        //     //   data: dataCoord,
+        //     // },
+        //     data: this.yData1
+        //   },
+
+        //   {
+        //     name: '出场量',
+        //     type: 'bar',
+        //     // stack: 'one',
+        //     barGap: "100%", // 柱图间距
+        //     itemStyle: {
+        //       normal: {
+        //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+        //           offset: 1,
+        //           color: 'rgba(0, 0, 0, 0)'
+        //         }, {
+        //           offset: 0.6,
+        //           color: '#91CC75'
+        //         }, {
+        //           offset: 0,
+        //           color: '#91CC75'
+        //         }]),
+        //         label: {
+        //           position: "top",
+        //           show: true, //开启显示
+        //           textStyle: { //数值样式
+        //             color: '#fff',
+        //             fontSize: 10
+        //           }
+        //         },
+
+        //       }
+        //     },
+        //     barWidth: barWidth,
+        //     data: this.yData1Out
+        //   },
+
+        // ]
+
+  series: [
+    {
+      name: '入场量',
+      type: 'line',
+       data: this.yData1,
+              symbolSize:8,  //设置折线上圆点大小
+            itemStyle:{
+              normal:{
+                label : {
+                show: true, // 在折线拐点上显示数据
+                color:"#fff"
+                },
+                lineStyle:{                 
+                  width:3,  // 设置虚线宽度
+                  color:'#1BDB7F'
                 }
               }
-            },
-            barWidth: barWidth,
-            // markPoint: {
-            //   symbol: 'circle',
-            //   itemStyle: {
-            //     normal: {
-            //       color: '#43FFFF',
-            //       shadowColor: '#43FFFF',
-            //       shadowBlur: 20
-            //     }
-            //   },
-            //   symbolSize: [5, 5], // 容器大小
-            //   symbolOffset: [0, 0], // 位置偏移
-            //   data: dataCoord,
-            // },
-            data: this.yData1
-          },
+                 }
+      // markPoint: {
+      //   data: [
+      //     { type: 'max', name: 'Max' },
+      //     { type: 'min', name: 'Min' }
+      //   ]
+      // },
+      // markLine: {
+      //   data: [{ type: 'average', name: 'Avg' }]
+      // }
+    },
+    {
+      name: '出场量',
+      type: 'line',
+       data: this.yData1Out,
+            symbolSize:8,  //设置折线上圆点大小
+            itemStyle:{
+              normal:{
+                label : {
+                show: true, // 在折线拐点上显示数据
+                position: 'bottom',
+                color:"#fff"
+                },
+                lineStyle:{                 
+                  width:3,  // 设置虚线宽度
+                  color:'#EF8C62'
+                }
+              }
+                 }
+      // markPoint: {
+      //   data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
+      // },
+      // markLine: {
+      //   data: [
+      //     { type: 'average', name: 'Avg' },
+      //     [
+      //       {
+      //         symbol: 'none',
+      //         x: '90%',
+      //         yAxis: 'max'
+      //       },
+      //       {
+      //         symbol: 'circle',
+      //         label: {
+      //           position: 'start',
+      //           formatter: 'Max'
+      //         },
+      //         type: 'max',
+      //         name: '最高点'
+      //       }
+      //     ]
+      //   ]
+      // }
+    }
+  ]
 
-        ]
       };
       myChart.setOption(this.option, true);
 
diff --git a/src/views/Brand.vue b/src/views/Brand.vue
index 30e585c..ccc965e 100644
--- a/src/views/Brand.vue
+++ b/src/views/Brand.vue
@@ -95,9 +95,9 @@
             <div class="panel-footer"></div>
           </div>
 
-          <div class="left-top">
+          <div class="left-top" style="margin-top:0.8rem">
             <div class="topBg">
-              收费车辆统计
+              场内车辆实时统计
             </div>
             <!-- <business :chart-data="payDataCar" /> -->
             <DynamicList :chart-data="payDataCar" />
@@ -133,7 +133,7 @@
         </div>
 
         <div class="item right">
-          <div class="left-top">
+          <div class="left-top left-top2">
             <div class="topBg2">
               24小时车流统计
             </div>
@@ -141,26 +141,40 @@
             <div class="panel-footer"></div>
           </div>
 
-          <div class="left-top">
-            <div class="topBg">车辆使用统计</div>
+          <div class="left-top left-top2">
+            <div class="topBg">车位使用统计</div>
             <div class="carFlex">
               <div class="let">
-                <div class="item">
-                  <p class="p1">总车位（个）</p>
-                  <p class="p2">{{ useCarCon.parkingPlaceTotalNums }}</p>
+                <div class="item" style="height: 1.5rem;width: 2rem;margin-top:0.3rem">
+                  <p class="p1">日均周转率</p>
+                  <p class="p2"> <span v-if="useCarCon.dailyAverageTurnover">
+                      {{
+                          getNum(useCarCon.dailyAverageTurnover)
+                          
+                      }}%</span>
+                    <span v-else>0%</span>
+                  </p>
                 </div>
-                <div class="item">
-                  <p class="p1">周转率</p>
-                  <p class="p2"> <span v-if="useCarCon.parkingPlaceTurnover">
+                      <!-- <div class="item" style="background:none">
+               
+                </div> -->
+                   <div class="item" style="height: 1.5rem;width: 2rem;margin-top:0.3rem">
+                  <p class="p1">日均占用率</p>
+                  <p class="p2"> <span v-if="useCarCon.dailyAverageOccupy">
                       {{
-                          useCarCon.parkingPlaceTurnover
+                          getNum(useCarCon.dailyAverageOccupy)
                       }}%</span>
                     <span v-else>0%</span>
                   </p>
                 </div>
+             
               </div>
               <ringPie :chart-data="useCarCon" />
               <div class="rig">
+                    <div class="item">
+                  <p class="p1">总车位（个）</p>
+                  <p class="p2">{{ useCarCon.parkingPlaceTotalNums }}</p>
+                </div>
                 <div class="item">
                   <p class="p1">已使用车位（个）</p>
                   <p class="p2">{{ useCarCon.parkingPlaceUseNums }}</p>
@@ -177,7 +191,7 @@
 
           <div class="left-top">
             <div class="topBg">
-              24小时车位使用统计
+              月度车辆通勤量实时统计
             </div>
             <szBar :chart-data="todayCarUse" />
             <div class="panel-footer"></div>
@@ -310,6 +324,16 @@ export default {
     }
   },
   methods: {
+    getNum(s){
+      var i;
+      i=s*100
+      /* 
+      js 数字精度问题
+      */
+      i=parseFloat(i.toPrecision(10))
+      i = String(i)
+        return i.substring(0,i.indexOf(".")+3);
+    },
     meetfunction(val) {
       this.parkingInfoId = val
       this.showFlag = true;
@@ -920,25 +944,30 @@ export default {
   color: #fff;
   justify-content: center;
   align-items: center;
-
+.let,.rig{
+  // display: flex;
+  // align-items: center;
+  // color: #fff;
+  // justify-content: space-between;
+}
   .item {
     display: flex;
     flex-direction: column;
     justify-content: center;
-    width: 2rem;
+    width: 1.6rem;
     text-align: center;
-    height: 1.3rem;
+    height: 1rem;
     background: url(/img/img12.png) no-repeat;
     background-size: contain;
-    margin-top: 0.3rem;
+    margin-top: 0.1rem;
 
     .p1 {
-      font-size: 0.2rem;
+      font-size: 0.18rem;
       margin-bottom: 0.1rem;
     }
 
     .p2 {
-      font-size: 0.3rem;
+      font-size: 0.25rem;
     }
   }
 }
@@ -966,13 +995,15 @@ export default {
 }
 
 .left-top {
-  height: 3.5rem;
+  // height: 3.5rem;
   position: relative;
   background: url(/img/img2.png) no-repeat;
   background-size: cover;
   margin-bottom: 0.5rem;
 }
-
+.left-top2{
+  margin-bottom: 0.36rem !important;
+}
 .tbody .tr:nth-child(odd) {
   background: #06184b;
 }