增加选择车场页面,增加全屏按钮

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "vueDatav",
+  "name": "parkBigScreen2",
   "version": "0.1.0",
   "lockfileVersion": 1,
   "requires": true,
@@ -7370,6 +7370,15 @@
         }
       }
     },
+    "loading-view-vue": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/loading-view-vue/-/loading-view-vue-1.0.3.tgz",
+      "integrity": "sha512-77pOrRRX5+2rJZNaQlwMb9B+3oIQ4DNR7J8q8MLHosHU9ZkrzNqnPHslYoJnp9C2Yi/LTjD1w6LGRLRnQ5LHjQ==",
+      "requires": {
+        "core-js": "^3.6.5",
+        "vue": "^2.6.11"
+      }
+    },
     "locate-path": {
       "version": "2.0.0",
       "resolved": "https://registry.npm.taobao.org/locate-path/download/locate-path-2.0.0.tgz",
@@ -10352,6 +10361,11 @@
         "ajv-keywords": "^3.4.1"
       }
     },
+    "screenfull": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmmirror.com/screenfull/-/screenfull-5.0.2.tgz",
+      "integrity": "sha512-cCF2b+L/mnEiORLN5xSAz6H3t18i2oHh9BA8+CQlAh5DRw2+NFAGQJOSYbcGw8B2k04g/lVvFcfZ83b3ysH5UQ=="
+    },
     "scss-tokenizer": {
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz",

package.json

@@ -13,6 +13,8 @@
     "core-js": "^3.6.4",
     "dayjs": "^1.11.4",
     "echarts": "^5.3.3",
+    "loading-view-vue": "^1.0.3",
+    "screenfull": "^5.0.2",
     "vue": "^2.6.11",
     "vue-router": "^3.1.6",
     "vue-seamless-scroll": "^1.1.21",

src/api/form.js

@@ -82,5 +82,13 @@ export const BiApi = {
       params: query
     })
   },
+  // 授权码获取车场信息
+  getPkParkingInfo: (query) => {
+    return request({
+      url: '/pk/parking/PkParkingInfo/getPkParkingInfoIdByAuthCode',
+      method: 'get',
+      params: query
+    })
+  },
   
 }

src/api/request.js

@@ -9,7 +9,7 @@ const service = axios.create({
   // axios中请求配置有baseURL选项，表示请求URL公共部分
   baseURL: 'http://192.168.31.128:8866',
   // 超时
-  timeout: 30000
+  timeout: 15000
 })
 // request拦截器
 service.interceptors.request.use(config => {

src/components/index.js

@@ -32,6 +32,8 @@ import income from './companySummary/income' // 营业收入
 import distribution from './companySummary/distribution' // 客户分布
 // import history from './companySummary/history' // 发展历程
 
+import screenfull from './screenfull' // 全屏按钮
+
 const components = {
   bgAnimation,
   modal,
@@ -65,7 +67,7 @@ const components = {
   // wordCloud,
   distribution,
   // history,
-  
+  screenfull,
 };
 
 const install = (Vue = {}) => {

src/components/screenfull/index.vue

@@ -0,0 +1,62 @@
+<template>
+  <div :class="isFullscreen ? 'exitFullscreen' : 'fullscreen'" @click="click"></div>
+</template>
+
+<script>
+import screenfull from "screenfull/dist/screenfull";
+
+export default {
+  name: "Screenfull",
+  data() {
+    return {
+      isFullscreen: false,
+    };
+  },
+  mounted() {
+    this.init();
+  },
+  beforeDestroy() {
+    this.destroy();
+  },
+  methods: {
+    click() {
+      if (!screenfull.isEnabled) {
+        this.$Toast({ message: "你的浏览器不支持全屏", type: "warning" });
+        return false;
+      }
+      // this.$sidebar.$emit("sidebar", "cureenfull");
+      // this.$sidebar.$emit("sidebar");
+      screenfull.toggle();
+    },
+    change() {
+      this.isFullscreen = screenfull.isFullscreen;
+    },
+    init() {
+      if (screenfull.isEnabled) {
+        screenfull.on("change", this.change);
+      }
+    },
+    destroy() {
+      if (screenfull.isEnabled) {
+        screenfull.off("change", this.change);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.exitFullscreen {
+  width: 0.25rem;
+  height: 0.25rem;
+  background: url(../../assets/img/fullscreen/exit-fullscreen.png);
+  background-size: 0.25rem;
+}
+
+.fullscreen {
+  width: 0.25rem;
+  height: 0.25rem;
+  background: url(../../assets/img/fullscreen/fullscreen.png);
+  background-size: 0.25rem;
+}
+</style>

src/views/Brand.vue

@@ -1,6 +1,19 @@
 <template>
   <div class="brand-container">
-    <div class="wrap">
+    <div class="dialog" v-if="!showFlag">
+      <div class="dialog-header">
+        <div class="text">选择显示车场</div>
+        <div class="allBtn" @mouseenter="parkingInfoId = null" @mouseleave="parkingInfoId = ''"
+          @click="parkingInfoId = ''; showBi()">查看全部</div>
+      </div>
+      <div class="dialog-body">
+        <div class="dialog-item" :class="parkingInfoId === null ? 'select' : ''" v-for="(item, index) in PkParkingInfo"
+          :key="index" @click="parkingInfoId = item.value; showBi()">
+          <span>{{ item.label }}</span>
+        </div>
+      </div>
+    </div>
+    <div class="wrap" v-else>
       <header>
         <div class="showTime">
           <span class="time">{{ nowTime }}</span>
@@ -10,6 +23,9 @@
           </span>
         </div>
         <h2>智慧云停车大数据平台</h2>
+        <div class="screenFull">
+          <screenfull />
+        </div>
         <div class="welcome">欢迎使用本系统</div>
       </header>
 
@@ -104,8 +120,10 @@
                 </div>
                 <div class="item">
                   <p class="p1">周转率</p>
-                  <p class="p2"> <span v-if="useCarCon.parkingPlaceTurnover">{{ parseInt(useCarCon.parkingPlaceTurnover * 100)}}%</span>
+                  <p class="p2"> <span v-if="useCarCon.parkingPlaceTurnover">{{ parseInt(useCarCon.parkingPlaceTurnover
-                  <span v-else>0%</span>
+                      * 100)
+                  }}%</span>
+                    <span v-else>0%</span>
                   </p>
                 </div>
               </div>
@@ -157,6 +175,12 @@ export default {
   },
   data() {
     return {
+      // 是否显示大数据页面
+      showFlag: false,
+      // 所有车场列表
+      PkParkingInfo: [],
+      // 选中车场id
+      parkingInfoId: '',
       // 车场排行数据
       rankData: [],
       // 支付统计数据
@@ -204,15 +228,15 @@ export default {
   },
   mounted() {
     if (authCode && typeof +authCode === 'number') {
-      // this.$showLoading();
+      BiApi.getPkParkingInfo({ authCode }).then((res) => {
-      this.heart();
+        if (res.length > 0) {
-      setTimeout(() => {
+          this.PkParkingInfo = res
-        this.getEchart();
+        } else {
-      }, 800);
+          this.showFlag = true
-      // loading
+          this.showBi();
-      //       setTimeout(() => {
+        }
-      //   this.$hideLoading();
+      })
-      // }, 900);
+
     } else {
       // console.log('授权码为空', authCode);
       alert('授权码为空,请从系统调用页面!')
@@ -223,6 +247,21 @@ export default {
     }
   },
   methods: {
+    /**
+     * 显示大数据画面
+     */
+    showBi() {
+      // this.$showLoading();
+      this.showFlag = true;
+      this.heart();
+      setTimeout(() => {
+        this.getEchart();
+      }, 800);
+      // loading
+      //       setTimeout(() => {
+      //   this.$hideLoading();
+      // }, 900);
+    },
     /**
      * 格式化时钟函数
      */
@@ -243,10 +282,25 @@ export default {
         this.getData();
       }
     },
+    /**
+     * 心跳函数,每秒执行一次
+     */
+    heart() {
+      this.clear();
+      this.heartCallBack() // 首次加载
+      this.timer = setInterval(this.heartCallBack, 1000);
+    },
+    clear() {
+      clearInterval(this.timer);
+      this.timer = null;
+      this.heartTimes = 0;
+    },
 
     getData() {
+      //公共请求参数
+      const publicObj = this.parkingInfoId ? { authCode, parkingInfoId: this.parkingInfoId } : { authCode };
       // 今日交易金额-笔数数据
-      BiApi.getTodayTrade({ authCode }).then((res) => {
+      BiApi.getTodayTrade(publicObj).then((res) => {
         // console.log(res);
         if (res && res.code === 200) {
           const { totalAmount, totalNum } = res.data
@@ -259,35 +313,35 @@ export default {
         }
       });
       // 实时进出信息
-      BiApi.getRealTimeInOutRecord({ authCode, pageNum: 1, pageSize: 10 }).then((res) => {
+      BiApi.getRealTimeInOutRecord({ authCode, pageNum: 1, pageSize: 10, parkingInfoId: this.parkingInfoId }).then((res) => {
         if (res && res.code === 200) {
           this.realTimeInOutRecord = res.rows
         }
       });
       // 开放统计-车场排行
-      BiApi.getParkingRanking({ authCode }).then((res) => {
+      BiApi.getParkingRanking(publicObj).then((res) => {
         if (res && res.code === 200) this.rankData = res.data
       })
       // 开放统计-支付统计
-      BiApi.paymentStatistics({ authCode }).then((res) => {
+      BiApi.paymentStatistics(publicObj).then((res) => {
         if (res && res.code === 200) this.payData = res.data
       })
       // 开放统计-收费车辆统计
-      BiApi.amountCartStatistics({ authCode }).then((res) => {
+      BiApi.amountCartStatistics(publicObj).then((res) => {
         if (res && res.code === 200) this.payDataCar = res.data
       })
       // 开放统计-24小时车流统计
-      BiApi.todayTrafficStatistics({ authCode }).then((res) => {
+      BiApi.todayTrafficStatistics(publicObj).then((res) => {
         if (res && res.code === 200) this.todayTraffic = res.data
       })
       //  开放统计-24小时车辆使用统计
-      BiApi.todayCarUseStatistics({ authCode }).then((res) => {
+      BiApi.todayCarUseStatistics(publicObj).then((res) => {
         if (res && res.code === 200) this.todayCarUse = res.data
       })
-      BiApi.useCarStatistics({ authCode }).then((res) => {
+      BiApi.useCarStatistics(publicObj).then((res) => {
         if (res && res.code === 200) this.useCarCon = res.data
       })
-      BiApi.parkingCarNum({ authCode }).then((res) => {
+      BiApi.parkingCarNum(publicObj).then((res) => {
         this.geoCoordMap = {
           上海: [121.4648, 31.2891],
           东莞: [113.8953, 22.901],
@@ -417,19 +471,7 @@ export default {
       })
 
     },
-    /**
+
-     * 心跳函数,每秒执行一次
-     */
-    heart() {
-      this.clear();
-      this.heartCallBack() // 首次加载
-      this.timer = setInterval(this.heartCallBack, 1000);
-    },
-    clear() {
-      clearInterval(this.timer);
-      this.timer = null;
-      this.heartTimes = 0;
-    },
 
     convertData(data) {
       // 地图数据转换
@@ -734,6 +776,85 @@ export default {
   height: 100%;
   background: #000;
 
+  .dialog {
+    width: 100%;
+    height: 100%;
+    background: #fff;
+
+
+
+    .dialog-header {
+      position: relative;
+      width: 15rem;
+      color: #0d1c28;
+      line-height: 1;
+      margin: 0 auto;
+      padding: 0.6rem 0 0.2rem;
+      border-bottom: 0.06rem solid #0d1c28;
+      font-size: 0.3rem;
+
+
+
+      .allBtn {
+        position: absolute;
+        top: 0.6rem;
+        right: 0.34rem;
+        width: 1.4rem;
+        height: 0.45rem;
+        line-height: 0.45rem;
+        border-radius: 0.04rem;
+        font-size: 0.24rem;
+        text-align: center;
+        font-weight: 600;
+        background: #f1f2f3;
+
+        &:hover {
+          background: #409eff;
+          color: #f1f2f3;
+        }
+
+        &.select {
+          background: #409eff;
+          color: #f1f2f3;
+        }
+      }
+    }
+
+    .dialog-body {
+      position: relative;
+      width: 15rem;
+      margin: 0 auto;
+      display: flex;
+      flex-wrap: wrap;
+
+      .dialog-item {
+        display: block;
+        width: 4.75rem;
+        height: 1rem;
+        line-height: 1rem;
+        box-sizing: border-box;
+        margin: 0.2rem 0.2rem 0.2rem 0;
+        padding: 0 0.2rem;
+        font-size: 0.225rem;
+        background: #f1f2f3;
+        font-weight: 600;
+        border-radius: 0.08rem;
+
+        &:hover {
+          background: #409eff;
+          color: #f1f2f3;
+        }
+
+        &.select {
+          background: #409eff;
+          color: #f1f2f3;
+        }
+      }
+
+
+    }
+  }
+
   .wrap {
     background: url(../assets/img/brand/bg.png) no-repeat #000;
     background-size: cover;
@@ -779,6 +900,15 @@ export default {
         }
       }
 
+      .screenFull {
+        position: absolute;
+        right: 2.6rem;
+        top: 0.5rem;
+        width: 0.25rem;
+        height: 0.25rem;
+        cursor: pointer;
+      }
+
       .welcome {
         position: absolute;
         right: 0.625rem;