From 28c3ea3a58b840279e11e7f72f6d843b701b1466 Mon Sep 17 00:00:00 2001
From: "[liang]" <[595996918@qq.com]>
Date: Thu, 4 Aug 2022 16:34:45 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AF=B9=E6=8E=A5=E6=8E=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/form.js                   |  37 +---
 src/api/request.js                |   2 +-
 src/components/seamless/index.vue |  76 +------
 src/views/Brand.vue               | 354 +++++++++++++++---------------
 4 files changed, 188 insertions(+), 281 deletions(-)

diff --git a/src/api/form.js b/src/api/form.js
index b40f7a2..02885dd 100644
--- a/src/api/form.js
+++ b/src/api/form.js
@@ -13,37 +13,22 @@ export const BiApi = {
     })
   },
 
-  // 广告位-id查询
-  getInfo: (id) => {
+  // 今日交易金额-笔数
+  getTodayTrade: (query) => {
     return request({
-      url: '/pk/ad/PkAdPosition/getInfo/' + id,
-      method: 'get'
+      url: '/pk/openup/OpenStatisticsController/todayTrade',
+      method: 'get',
+      params: query
     })
   },
-
-  // 新增广告位
-  addInfo: (data) => {
+  // 实时进出信息
+  getRealTimeInOutRecord: (query) => {
     return request({
-      url: '/pk/ad/PkAdPosition/add',
-      method: 'post',
-      data: data
-    })
-  },
-
-  // 编辑广告位
-  updateInfo: (data) => {
-    return request({
-      url: '/pk/ad/PkAdPosition/edit',
-      method: 'put',
-      data: data
+      url: '/pk/openup/OpenStatisticsController/realTimeInOutRecord',
+      method: 'get',
+      params: query
     })
   },
 
-  // 删除广告位
-  delInfo: (id) => {
-    return request({
-      url: '/pk/ad/PkAdPosition/remove/' + id,
-      method: 'delete'
-    })
-  }
+  
 }
diff --git a/src/api/request.js b/src/api/request.js
index 7020192..9061487 100644
--- a/src/api/request.js
+++ b/src/api/request.js
@@ -70,7 +70,7 @@ service.interceptors.response.use(res => {
     else if (message.includes("Request failed with status code")) {
       message = "系统接口" + message.substr(message.length - 3) + "异常";
     }
-    alert(message)
+    console.log(message)
     return Promise.reject(error)
   }
 )
diff --git a/src/components/seamless/index.vue b/src/components/seamless/index.vue
index 1e6cbe1..946269c 100644
--- a/src/components/seamless/index.vue
+++ b/src/components/seamless/index.vue
@@ -32,85 +32,13 @@ import vueSeamlessScroll from 'vue-seamless-scroll'
 
 export default {
 	name: "seamless",
+	props: ['listData'],
 	components: {
 		vueSeamlessScroll
 	},
 	data() {
 		return {
-			rowColor: '/',
-			listData: [{
-				"accessType": "出场",
-				"carType": "临时车",
-				"parkName": "深圳宝安体育馆停车场",
-				"createTime": "2022-08-03 18:01:59",
-				"plateNumber": "粤C3868Z",
-				"entranceChannel": "前岗入口",
-				"orderRealPaidAmout": 0
-			},
-			{
-				"accessType": "出场",
-				"carType": "临时车",
-				"parkName": "深圳宝安体育馆停车场",
-				"createTime": "2022-08-03 18:01:54",
-				"plateNumber": "粤C2R537",
-				"entranceChannel": "后岗入口",
-				"orderRealPaidAmout": 0
-			},
-			{
-				"accessType": "入场",
-				"carType": "临时车",
-				"parkName": "深圳宝安体育馆停车场",
-				"createTime": "2022-08-03 18:01:30",
-				"plateNumber": "粤C11R24",
-				"entranceChannel": "后岗入口",
-				"orderRealPaidAmout": 0.0
-			},
-			{
-				"accessType": "出场",
-				"carType": "临时车",
-				"parkName": "深圳宝安体育馆停车场",
-				"createTime": "2022-08-03 18:00:32",
-				"plateNumber": "粤CSP065",
-				"entranceChannel": "前岗入口",
-				"orderRealPaidAmout": 0
-			},
-			{
-				"accessType": "入场",
-				"carType": "临时车",
-				"parkName": "深圳宝安体育馆停车场",
-				"createTime": "2022-08-03 18:00:19",
-				"plateNumber": "浙G16N8Z",
-				"entranceChannel": "前岗入口",
-				"orderRealPaidAmout": 0.0
-			},
-			{
-				"accessType": "出场",
-				"carType": "临时车",
-				"parkName": "深圳宝安体育馆停车场",
-				"createTime": "2022-08-03 17:58:55",
-				"plateNumber": "粤CYG167",
-				"entranceChannel": "后岗入口",
-				"orderRealPaidAmout": 0
-			},
-			{
-				"accessType": "入场",
-				"carType": "临时车",
-				"parkName": "深圳宝安体育馆停车场",
-				"createTime": "2022-08-03 17:58:38",
-				"plateNumber": "粤CYG167",
-				"entranceChannel": "后岗入口",
-				"orderRealPaidAmout": 6.0
-			},
-			{
-				"accessType": "入场",
-				"carType": "免费车",
-				"parkName": "深圳宝安体育馆停车场",
-				"createTime": "2022-08-03 17:57:55",
-				"plateNumber": "粤C5N501",
-				"entranceChannel": "前岗入口",
-				"orderRealPaidAmout": 0.0
-			},
-			]
+			
 		}
 	},
 	computed: {
diff --git a/src/views/Brand.vue b/src/views/Brand.vue
index 18dcb3d..e83bc3d 100644
--- a/src/views/Brand.vue
+++ b/src/views/Brand.vue
@@ -10,10 +10,7 @@
           </span>
         </div>
         <h2>智慧云停车大数据平台</h2>
-        <div class="welcome">
-          欢迎使用本系统
-        </div>
-
+        <div class="welcome">欢迎使用本系统</div>
       </header>
 
       <section class="mainbox">
@@ -24,9 +21,7 @@
             <div class="panel-footer"></div>
           </div> -->
           <div class="left-top">
-            <div class="topBg">
-              今日收费TOP5
-            </div>
+            <div class="topBg">今日收费TOP5</div>
             <table class="table">
               <thead class="thead">
                 <td class="td">排行</td>
@@ -35,27 +30,27 @@
               </thead>
               <tbody class="tbody">
                 <tr class="tr">
-                  <td class="td"><img src="/img/img3.png" alt=""></td>
+                  <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"><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"><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"><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"><img src="/img/img4.png" alt="" /></td>
                   <td class="td">深圳宝安中心大厦</td>
                   <td class="td">6890.38元</td>
                 </tr>
@@ -63,35 +58,28 @@
             </table>
           </div>
 
-
           <div class="left-top">
-            <div class="topBg">
-              支付统计
-            </div>
+            <div class="topBg">支付统计</div>
             <talent />
             <div class="panel-footer"></div>
           </div>
 
-
           <div class="left-top">
-            <div class="topBg">
-              收费车辆统计
-            </div>
+            <div class="topBg">收费车辆统计</div>
             <business />
             <div class="panel-footer"></div>
           </div>
         </div>
 
         <div class="item center">
-
           <div class="resume">
             <div class="resume-hd">
               <span>今日交易笔数</span>
               <span>今日交易金额</span>
             </div>
             <div class="resume-bd">
-              <countTo :startVal='startVal' :endVal='8388888' :duration='1500' separator=""></countTo>
-              <countTo :startVal='startVal' :endVal='6488888' :duration='1500' separator=""></countTo>
+              <countTo :startVal="startNumber" :endVal="endNumber" :duration="1500" separator=""></countTo>
+              <countTo :startVal="startAmount" :endVal="endAmount" :duration="1500" separator=""></countTo>
             </div>
           </div>
 
@@ -103,23 +91,19 @@
           </div>
 
           <div class="parkInfo">
-            <seamless />
+            <seamless :listData="realTimeInOutRecord" />
           </div>
         </div>
 
         <div class="item right">
           <div class="left-top">
-            <div class="topBg2">
-              24小时车流统计
-            </div>
+            <div class="topBg2">24小时车流统计</div>
             <scrollArc />
             <div class="panel-footer"></div>
           </div>
 
           <div class="left-top">
-            <div class="topBg">
-              车辆使用统计
-            </div>
+            <div class="topBg">车辆使用统计</div>
             <div class="carFlex">
               <div class="let">
                 <div class="item">
@@ -148,128 +132,143 @@
           </div>
 
           <div class="left-top">
-            <div class="topBg">
-              24小时车位使用统计
-            </div>
+            <div class="topBg">24小时车位使用统计</div>
             <szBar />
             <div class="panel-footer"></div>
           </div>
         </div>
       </section>
-
     </div>
-
   </div>
 </template>
 
 <script>
 import { BiApi } from "@/api/form";
-import '@/assets/js/flexible'
-import '@/assets/js/china'
-import countTo from 'vue-count-to'
+import "@/assets/js/flexible";
+import "@/assets/js/china";
+import countTo from "vue-count-to";
 // console.log(window.location.href);
+const authCode = "712110694685872129";
 
 export default {
-  name: 'Brand',
+  name: "Brand",
   components: {
-    countTo
+    countTo,
   },
   data() {
     return {
-      nowTime: '',
-      week: '',
-      date: '',
+      nowTime: "",
+      week: "",
+      date: "",
       timer: null,
-      startVal: 0,
+      startNumber: 0,
+      startAmount: 0,
+      endNumber: 0,
+      endAmount: 0,
+      realTimeInOutRecord: [],//实时进出信息
+      heartTimes: 0, //心跳次数
       geoCoordMap: {},
       XAData: [
         [{ name: "长沙" }, { name: "北京", value: 100 }],
         [{ name: "长沙" }, { name: "上海", value: 100 }],
         [{ name: "长沙" }, { name: "广州", value: 100 }],
         [{ name: "长沙" }, { name: "深圳", value: 100 }],
-        [{ name: "长沙" }, { name: "西安", value: 100 }]
+        [{ name: "长沙" }, { name: "西安", value: 100 }],
       ],
       XNData: [
         [{ name: "长沙" }, { name: "西宁", value: 100 }],
         [{ name: "长沙" }, { name: "拉萨", value: 100 }],
         [{ name: "长沙" }, { name: "哈尔滨", value: 100 }],
         [{ name: "长沙" }, { name: "成都", value: 100 }],
-        [{ name: "长沙" }, { name: "重庆", value: 100 }]
+        [{ name: "长沙" }, { name: "重庆", value: 100 }],
       ],
       YCData: [
         [{ name: "北京" }, { name: "长沙", value: 100 }],
         [{ name: "北京" }, { name: "贵阳", value: 100 }],
-        [{ name: "北京" }, { name: "杭州", value: 100 }]
-      ]
-
-    }
-  },
-  computed: {
-
+        [{ name: "北京" }, { name: "杭州", value: 100 }],
+      ],
+    };
   },
+  computed: {},
   created() {
-    const authCode = '712110694681677824'
-    BiApi.getParkingRanking({authCode}).then((res)=>{
-      console.log(res);
-    })
+    // BiApi.getParkingRanking({ authCode }).then((res) => {
+    //   console.log(res);
+    // })
   },
   mounted() {
-    this.nowTimes();
+    this.heart();
     this.getEchart();
-    this.ajax2();
   },
   methods: {
-
-    ajax2() {
-    //jquery方式  get请求
-        $.ajax({
-            type:"GET",
-            url:"http://192.168.31.128:8866/pk/openup/OpenStatisticsController/parkingRanking",
-            data:{"authCode":"712110694681677824"},
-            async:true,
-            cache:true,
-            dataType:"text",
-            success:function (backdata,status,xmlHttpRequest) {
-                  console.log(backdata)
-            },
-            error:function (msg) {
-                console.log(msg)
-            }
-        });
-
-         //jquery方式  get请求
-        $.ajax({
-            type:"GET",
-            url:"http://192.168.31.128:8866/pk/openup/OpenStatisticsController/todayTrafficStatistics",
-            data:{"authCode":"712110694681677824"},
-            async:true,
-            cache:true,
-            dataType:"text",
-            success:function (backdata,status,xmlHttpRequest) {
-                  console.log(backdata)
-            },
-            error:function (msg) {
-                console.log(msg)
-            }
-        });
-},
-
-    nowTimes() {
+    /**
+     * 格式化时钟函数
+     */
+    formatNowTimes() {
+      let dayjs = this.dayjs();
+      let weeks = ["日", "一", "二", "三", "四", "五", "六"];
+      this.week = `星期${weeks[dayjs.day()]}`;
+      this.date = dayjs.format("YYYY-MM-DD");
+      this.nowTime = dayjs.format("HH:mm:ss");
+    },
+    /**
+     * 心跳回调函数,获取数据的函数可以放这里
+     */
+    heartCallBack() {
+      this.heartTimes += 1;
+      this.formatNowTimes(); //放外面就每一秒执行一次
+      if (this.heartTimes === 1 || this.heartTimes % 10 === 0) { // 首次加载和每10秒执行一次
+        this.getTodayTrade();
+        this.getRealTimeInOutRecord();
+      }
+    },
+    /**
+     * 心跳函数,每秒执行一次
+     */
+    heart() {
       this.clear();
-      let dayjs = this.dayjs()
-      let weeks = ['日', '一', '二', '三', '四', '五', '六'];
-      this.week = `星期${weeks[dayjs.day()]}`
-      this.date = dayjs.format('YYYY-MM-DD')
-      this.nowTime = dayjs.format('HH:mm:ss')
-      this.timer = setInterval(this.nowTimes, 1000);
-
+      this.heartCallBack() // 首次加载
+      this.timer = setInterval(this.heartCallBack, 1000);
     },
     clear() {
-      clearInterval(this.timer)
+      clearInterval(this.timer);
       this.timer = null;
+      this.heartTimes = 0;
     },
+    /**
+     * 今日交易金额-笔数数据
+     *  */
+    getTodayTrade() {
+      BiApi.getTodayTrade({ authCode }).then((res) => {
+        // console.log(res);
+        if (res.code === 200) {
+          const { totalAmount, totalNum } = res.data
+          this.startNumber = this.endNumber;
+          this.startAmount = this.endAmount;
+          this.endNumber = +totalNum;
+          this.endAmount = +totalAmount;
+        }
+
+      });
 
-    convertData(data) { // 地图数据转换
+    },
+    /**
+     * 实时进出信息
+     *  */
+    getRealTimeInOutRecord() {
+      const query = {
+        authCode,
+        pageNum: 1,
+        pageSize: 10,
+      }
+      BiApi.getRealTimeInOutRecord(query).then((res) => {
+        if (res.code === 200) {
+          this.realTimeInOutRecord = res.rows
+        }
+      });
+    },
+
+    convertData(data) {
+      // 地图数据转换
       let res = [];
       for (let i = 0; i < data.length; i++) {
         let dataItem = data[i];
@@ -280,15 +279,16 @@ export default {
             fromName: dataItem[0].name,
             toName: dataItem[1].name,
             coords: [fromCoord, toCoord],
-            value: dataItem[1].value
+            value: dataItem[1].value,
           });
         }
       }
       return res;
     },
-    getEchart() { // 初始化地图数据
+    getEchart() {
+      // 初始化地图数据
       // eslint-disable-next-line no-undef
-      let myChart = echarts.init(document.getElementById('chart_map'));
+      let myChart = echarts.init(document.getElementById("chart_map"));
 
       this.geoCoordMap = {
         上海: [121.4648, 31.2891],
@@ -404,18 +404,19 @@ export default {
         长治: [112.8625, 36.4746],
         阳泉: [113.4778, 38.0951],
         青岛: [120.4651, 36.3373],
-        韶关: [113.7964, 24.7028]
+        韶关: [113.7964, 24.7028],
       };
 
-      let planePath = "path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z";
+      let planePath =
+        "path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z";
 
       let color = ["#fff", "#fff", "#fff"]; //航线的颜色
       let series = [];
 
       [
         ["长沙", this.XAData],
-        ["长沙", this.XNData],
-        ["北京", this.YCData]
+        // ["长沙", this.XNData],
+        // ["北京", this.YCData],
       ].forEach((item, i) => {
         series.push(
           // {
@@ -467,32 +468,34 @@ export default {
             coordinateSystem: "geo",
             zlevel: 2,
             rippleEffect: {
-              brushType: "stroke"
+              brushType: "stroke",
             },
             label: {
               normal: {
                 show: true,
                 position: "right",
-                formatter: "{b}"
-              }
+                formatter: "{b}",
+              },
             },
             symbolSize: (val) => {
               return val[2] / 8;
             },
             itemStyle: {
               normal: {
-                color: color[i]
+                color: color[i],
               },
               emphasis: {
-                areaColor: "#2B91B7"
-              }
+                areaColor: "#2B91B7",
+              },
             },
             data: item[1].map((dataItem) => {
               return {
                 name: dataItem[1].name,
-                value: this.geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
+                value: this.geoCoordMap[dataItem[1].name].concat([
+                  dataItem[1].value,
+                ]),
               };
-            })
+            }),
           }
         );
       });
@@ -515,15 +518,15 @@ export default {
             } else {
               return params.name;
             }
-          }
+          },
         },
         geo: {
           map: "china",
           label: {
             emphasis: {
               show: true,
-              color: "#fff"
-            }
+              color: "#fff",
+            },
           },
           roam: false,
           //   放大我们的地图
@@ -532,19 +535,18 @@ export default {
             normal: {
               areaColor: "rgba(43, 196, 243, 0.42)",
               borderColor: "rgba(43, 196, 243, 1)",
-              borderWidth: 1
+              borderWidth: 1,
             },
             emphasis: {
-              areaColor: "#2B91B7"
-            }
-          }
+              areaColor: "#2B91B7",
+            },
+          },
         },
-        series: series
-      }
+        series: series,
+      };
 
       myChart.setOption(option, true);
 
-      var that = this;
       var dataList = echarts.getMap("china").geoJson.features;
       // console.log("dataList:", dataList);
       // 鼠标事件
@@ -561,14 +563,12 @@ export default {
         myChart.resize();
       });
     },
-    clickGoNext() {
-  
-    },
+    clickGoNext() { },
   },
   beforeDestroy() {
     this.clear();
-  }
-}
+  },
+};
 </script>
 
 <style lang="scss" scoped>
@@ -587,40 +587,39 @@ export default {
     height: 1.3rem;
     background: url(/img/img12.png) no-repeat;
     background-size: contain;
-    margin-top: .3rem;
+    margin-top: 0.3rem;
 
     .p1 {
-      font-size: .2rem;
-      margin-bottom: .1rem;
+      font-size: 0.2rem;
+      margin-bottom: 0.1rem;
     }
 
     .p2 {
-      font-size: .3rem;
+      font-size: 0.3rem;
     }
   }
-
 }
 
 .topBg {
-  height: .7rem;
+  height: 0.7rem;
   background: url(/img/img1.png) no-repeat;
   background-size: contain;
   display: flex;
   align-items: center;
-  padding-left: .5rem;
-  color: #AECEFF;
-  font-size: .21rem;
+  padding-left: 0.5rem;
+  color: #aeceff;
+  font-size: 0.21rem;
 }
 
 .topBg2 {
-  height: .7rem;
+  height: 0.7rem;
   background: url(/img/img11.png) no-repeat;
   background-size: contain;
   display: flex;
   align-items: center;
-  padding-left: .5rem;
-  color: #AECEFF;
-  font-size: .21rem;
+  padding-left: 0.5rem;
+  color: #aeceff;
+  font-size: 0.21rem;
 }
 
 .left-top {
@@ -628,11 +627,11 @@ export default {
   position: relative;
   background: url(/img/img2.png) no-repeat;
   background-size: cover;
-  margin-bottom: .5rem;
+  margin-bottom: 0.5rem;
 }
 
 .tbody .tr:nth-child(odd) {
-  background: #06184B;
+  background: #06184b;
 }
 
 //奇数行
@@ -645,15 +644,15 @@ export default {
   .thead {
     background: #061131;
     width: 100%;
-    height: .575rem;
-    line-height: .575rem;
-    font-size: .2rem;
+    height: 0.575rem;
+    line-height: 0.575rem;
+    font-size: 0.2rem;
 
     .td {
-      color: #6FA8FF;
+      color: #6fa8ff;
       text-align: center;
       border: none;
-      font-size: .2rem;
+      font-size: 0.2rem;
     }
   }
 
@@ -662,19 +661,19 @@ export default {
       color: #fff;
       text-align: center;
       border: none;
-      font-size: .14rem;
+      font-size: 0.14rem;
 
       img {
-        width: .4rem;
+        width: 0.4rem;
         display: block;
         margin: 0 auto;
-        height: .4rem;
+        height: 0.4rem;
       }
     }
 
     .tr {
-      height: .5rem;
-      line-height: .5rem;
+      height: 0.5rem;
+      line-height: 0.5rem;
     }
   }
 }
@@ -715,8 +714,8 @@ export default {
 
         .time {
           top: 0.45rem;
-          font-size: .4rem;
-          margin-right: .18rem;
+          font-size: 0.4rem;
+          margin-right: 0.18rem;
         }
 
         .date {
@@ -724,7 +723,7 @@ export default {
 
           span {
             line-height: 0.45rem;
-            font-size: .2rem;
+            font-size: 0.2rem;
             padding-right: 0.1rem;
           }
         }
@@ -734,11 +733,11 @@ export default {
         position: absolute;
         right: 0.625rem;
         top: 0.45rem;
-        height: .35rem;
+        height: 0.35rem;
         color: #fff;
         font-size: 0.25rem;
         text-align: center;
-        line-height: .35rem;
+        line-height: 0.35rem;
       }
     }
 
@@ -756,7 +755,6 @@ export default {
           overflow: hidden;
 
           .resume {
-
             .resume-hd {
               display: flex;
               justify-content: space-around;
@@ -771,9 +769,8 @@ export default {
                 text-align: left;
                 font-size: 0.1625rem;
                 color: rgba(255, 255, 255, 0.9);
-                padding-left: .3rem;
+                padding-left: 0.3rem;
               }
-
             }
 
             .resume-bd {
@@ -781,22 +778,22 @@ export default {
               justify-content: space-around;
 
               span {
-                margin-top: .25rem;
-                box-shadow: 0rem .02rem .08rem rgba(38, 228, 245, 0.7);
+                margin-top: 0.25rem;
+                box-shadow: 0rem 0.02rem 0.08rem rgba(38, 228, 245, 0.7);
                 width: 3.535rem;
                 text-align: center;
                 height: 0.725rem;
                 line-height: 0.725rem;
                 font-size: 0.45rem;
                 color: #fff;
-                font-family: 'LCD';
+                font-family: "LCD";
                 letter-spacing: 0.1rem;
-                text-shadow: .02rem .02rem .04rem #000;
-                background: linear-gradient(180deg, rgba(101, 172, 255, 0) 0%, rgba(29, 104, 190, 0.78) 100%);
+                text-shadow: 0.02rem 0.02rem 0.04rem #000;
+                background: linear-gradient(180deg,
+                    rgba(101, 172, 255, 0) 0%,
+                    rgba(29, 104, 190, 0.78) 100%);
               }
             }
-
-
           }
         }
 
@@ -814,14 +811,14 @@ export default {
 
         .map {
           position: relative;
-          height: 8.4rem;
+          height: 8rem;
 
           .chart {
             position: absolute;
-            top: 0;
+            top: -0.5rem;
             left: 0;
             z-index: 5;
-            height: 8.4rem;
+            height: 8rem;
             width: 100%;
           }
 
@@ -929,11 +926,8 @@ export default {
           }
         }
       }
-
     }
-
   }
-
 }
 
 @-webkit-keyframes rotate {