大屏完结

package-lock.json

@@ -9384,6 +9384,11 @@
         "ajv-keywords": "^3.5.2"
       }
     },
+    "screenfull": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmmirror.com/screenfull/-/screenfull-6.0.2.tgz",
+      "integrity": "sha512-AQdy8s4WhNvUZ6P8F6PB21tSPIYKniic+Ogx0AacBMjKP1GUHN2E9URxQHtCusiwxudnCKkdy4GrHXPPJSkCCw=="
+    },
     "script-ext-html-webpack-plugin": {
       "version": "2.1.5",
       "resolved": "https://registry.npmmirror.com/script-ext-html-webpack-plugin/-/script-ext-html-webpack-plugin-2.1.5.tgz",

package.json

@@ -19,6 +19,7 @@
     "element-ui": "^2.15.12",
     "extract-text-webpack-plugin": "^3.0.2",
     "glob-all": "^3.3.1",
+    "screenfull": "^6.0.2",
     "script-ext-html-webpack-plugin": "^2.1.5",
     "v-scale-screen": "^1.0.2",
     "vue": "^2.6.14",

src/api/http.js

@@ -3,7 +3,7 @@
  * @Author: wangcc
  * @Date: 2023-01-09 15:07:51
  * @LastEditors: wangcc
- * @LastEditTime: 2023-01-29 17:40:14
+ * @LastEditTime: 2023-01-30 11:09:31
  * @FilePath: \parking_LargeScreen\src\api\http.js
  * @Copyright: Copyright (c) 2016~2023 by wangcc, All Rights Reserved. 
  */
@@ -82,4 +82,22 @@ export function vehicleData(data) {
     method: 'get',
     params:data
   })
+}
+
+// 路段停车位情况
+export function roadSpace(data) {
+  return request({
+    url: '/admin/screen/roadPark/roadSpace',
+    method: 'get',
+    params:data
+  })
+}
+
+// 停车场停车位情况
+export function parkSpace(data) {
+  return request({
+    url: '/admin/screen/roadPark/parkSpace',
+    method: 'get',
+    params:data
+  })
 }

src/components/ParkingRate/index.vue

@@ -3,7 +3,7 @@
  * @Author: wangcc
  * @Date: 2023-01-09 11:22:53
  * @LastEditors: wangcc
- * @LastEditTime: 2023-01-29 17:59:41
+ * @LastEditTime: 2023-01-30 14:55:59
  * @FilePath: \parking_LargeScreen\src\components\ParkingRate\index.vue
  * @Copyright: Copyright (c) 2016~2023 by wangcc, All Rights Reserved. 
 -->
@@ -98,32 +98,86 @@
     </div>
     <div class="vehicle-circumstance">
       <div class="rankTitle">
-          <h3>路段停车位情况</h3>
-        </div>
-        
+        <h3>路段停车位情况</h3>
+      </div>
+      <div class="selectTime">
+        <span>时间</span>
+        <el-select
+          v-model="roadValue"
+          style="width:88px;height:24px"
+          @change="selectChangeRoad"
+          :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 class="chart-box">
+        <road-charts :option="roadData" v-if="hackReset"></road-charts>
+      </div>
+    </div>
+    <div class="vehicle-circumstance">
+      <div class="rankTitle">
+        <h3>停车场车位情况</h3>
+      </div>
+      <div class="selectTime">
+        <span>时间</span>
+        <el-select
+          v-model="parkValue"
+          style="width:88px;height:24px"
+          @change="selectChangePark"
+          :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 class="chart-box">
+        <park-charts :option="parkData" v-if="parkHackReset"></park-charts>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 import CountTo from 'vue-count-to';
-import { vehicleData } from '@/api/http';
+import { vehicleData,roadSpace,parkSpace } from '@/api/http';
+import roadCharts from '@/components/charts/roadCharts.vue'
+import parkCharts from '@/components/charts/parkCharts.vue'
 export default {
   name: '',
-  components: { CountTo },
+  components: { CountTo,roadCharts,parkCharts },
   data() {
     return {
+      hackReset:false,
+      parkHackReset: false,
       value: '',
       cur: 0,
       parkCur: 0,
       playerRoadUrl: '',
       playerUrl: '',
       startVal: 0,
+      parkValue:'0',
+      roadValue: '0',
       videoPlayerOnePark: null,
       videoPlayerOneRoad: null,
       rankOptions: [],
       parkOptions: [],
-      totalData: {}
+      totalData: {},
+      options: [
+        {
+          type: '0',
+          name: '近7日'
+        },
+        {
+          type: '1',
+          name: '近30天'
+        }
+      ],
+      roadData:[],
+      parkData:[]
     };
   },
   mounted() {
@@ -131,7 +185,9 @@ export default {
     this.videoPlayerRoad();
   },
   created() {
-    this.getVehicleData()
+    this.getVehicleData();
+    this.getRoadSpace();
+    this.getParkSpace();
   },
   destroyed() {
     // 页面销毁，同时也销毁 TcPlayer
@@ -180,7 +236,34 @@ export default {
         remember: 1,
         controls: 'none'
       });
-    }
+    },
+    selectChangeRoad(e) {
+      this.roadValue = e
+      this.getRoadSpace()
+    },
+    selectChangePark(e) {
+      this.parkValue = e
+      this.getParkSpace()
+    },
+    // 获取路段情况
+    async getRoadSpace() {
+      this.hackReset = false;
+      let {code,data} = await roadSpace({timeType:this.roadValue});
+      if (code == 200) {
+        this.hackReset = true;
+        this.roadData = data;
+      }
+    },
+    
+    // 获取路段情况
+    async getParkSpace() {
+      this.parkHackReset = false;
+      let {code,data} = await parkSpace({timeType:this.parkValue});
+      if (code == 200) {
+        this.parkHackReset = true;
+        this.parkData = data;
+      }
+    },
   }
 };
 </script>
@@ -221,7 +304,7 @@ export default {
   background: linear-gradient(90deg, #293446 0%, rgba(41, 52, 70, 0.2) 100%);
   backdrop-filter: blur(10px);
   width: 890px;
-  height: 520px;
+  height: 500px;
   float: left;
   overflow: hidden;
   padding: 20px;
@@ -301,4 +384,81 @@ export default {
   justify-content: center;
   align-items: center;
 }
+.vehicle-circumstance {
+  background: linear-gradient(90deg, #293446 0%, rgba(41, 52, 70, 0.2) 100%);
+  backdrop-filter: blur(10px);
+  width: 890px;
+  height: 317px;
+  float: left;
+  overflow: hidden;
+  padding: 20px;
+  margin-top: 10px;
+  margin-left: 10px;
+  .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;
+  }
+  .selectTime{
+    height: 34px;
+    display: flex;
+    align-items: center;
+    span{
+      margin-right: 16px;
+      font-size: 18px;
+    }
+  }
+  .chart-box{
+    height: 250px;
+    width: 100%;
+  }
+  ::v-deep .el-input__inner {
+    background-color: transparent;
+    border-radius:unset;
+  }
+
+  ::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;
+  }
+  ::v-deep .el-input--mini .el-input__inner{
+    height: 24px;
+    line-height: 24px;
+  }
+}
 </style>

src/components/charts/barCharts.vue

@@ -3,7 +3,7 @@
  * @Author: wangcc
  * @Date: 2023-01-11 15:39:49
  * @LastEditors: wangcc
- * @LastEditTime: 2023-01-28 14:39:02
+ * @LastEditTime: 2023-01-30 14:02:14
  * @FilePath: \parking_LargeScreen\src\components\charts\barCharts.vue
  * @Copyright: Copyright (c) 2016~2023 by wangcc, All Rights Reserved. 
 -->

src/components/charts/parkCharts.vue

@@ -0,0 +1,176 @@
+<!--
+ * @Description: 
+ * @Author: wangcc
+ * @Date: 2023-01-30 11:03:40
+ * @LastEditors: wangcc
+ * @LastEditTime: 2023-01-30 15:00:56
+ * @FilePath: \parking_LargeScreen\src\components\charts\parkCharts.vue
+ * @Copyright: Copyright (c) 2016~2023 by wangcc, All Rights Reserved. 
+-->
+<template>
+  <div id="myBarChart" ref="parkTypeChart" class="typeChart"></div>
+</template>
+
+<script>
+export default {
+  name: '',
+  props: ['option'],
+  data() {
+    return {};
+  },
+  mounted() {
+    this.barChart();
+  },
+  methods: {
+    barChart() {
+      // let scale = document.documentElement.clientWidth / 3840;
+      // prettier-ignore
+      let typeChart = this.$echarts.init(this.$refs.parkTypeChart);
+      let dataAxis = this.option.map(item =>{
+        return item.createTime
+      });
+      let data = this.option.map(item =>{
+        return item.countVehicle
+      });
+      let lineData = this.option.map(item =>{
+        return item.spaceRat
+      });
+
+      let scale = document.documentElement.clientWidth / 3840;
+      let optionType = {
+        grid: {
+          top: 100 * scale,
+          right: 100 * scale,
+          left: 120 * scale,
+          bottom: 50 * scale
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            // 坐标轴指示器，坐标轴触发有效
+            type: 'cross', // 默认为直线，可选为：'line' | 'shadow' 'cross'
+            lable: {}
+          },
+          formatter: function (params) {
+            let dataStr =
+              '<div>' +
+              params[0].name +
+              '<br>' +
+              params[0].marker +
+              params[0].seriesName +
+              ':' +
+              '<span style="color: #00B83F;">' +
+              params[0].value +
+              '</span>次' +
+              '<br />' +
+              params[1].marker +
+              params[1].seriesName +
+              ':' +
+              '<span style="color: #00B83F;">' +
+              params[1].value +
+              '</span>%' +
+              '</div>';
+            return dataStr;
+          }
+        },
+        xAxis: {
+          data: dataAxis,
+          axisLabel: {
+            padding: [0, 0, 0, 0]
+          },
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            show: false
+          },
+          z: 10
+        },
+        yAxis: [
+          {
+            type: 'value',
+            name: '单位(个)',
+            axisLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            axisLabel: {
+              color: '#999'
+            },
+            splitLine: {
+              //网格线
+              lineStyle: {
+                type: 'dashed' //设置网格线类型 dotted：虚线   solid:实线
+              },
+              show: true //隐藏或显示
+            }
+          },
+          {
+            type: 'value',
+            name: '单位(%)',
+            min: 0,
+            max: 100,
+            axisLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            axisLabel: {
+              color: '#999'
+            },
+            splitLine: {
+              //网格线
+              lineStyle: {
+                type: 'dashed' //设置网格线类型 dotted：虚线   solid:实线
+              },
+              show: true //隐藏或显示
+            }
+          }
+        ],
+        series: [
+          {
+            name: '停车次数',
+            type: 'bar',
+            showBackground: true,
+            // barWidth: 14 * scale,
+            backgroundStyle: {
+              color: 'rgba(180, 180, 180, 0.2)'
+            },
+            itemStyle: {
+              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 0.4, [
+                // { offset: 0, color: '#00FFFF' },
+                { offset: 1, color: '#00BCFF' }
+              ])
+            },
+            data: data
+          },
+          {
+            name: '停车使用率',
+            type: 'line',
+            yAxisIndex: 1,
+            itemStyle: {
+              normal: {
+                color: '#979797',
+                borderColor: '#fff',
+                borderWidth: 2
+              }
+            },
+            data: lineData
+          }
+        ]
+      };
+      typeChart.setOption(optionType, true);
+    }
+  }
+};
+</script>
+
+<style  lang='scss' scoped>
+.typeChart {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/components/charts/roadCharts.vue

@@ -0,0 +1,177 @@
+<!--
+ * @Description: 
+ * @Author: wangcc
+ * @Date: 2023-01-30 11:03:24
+ * @LastEditors: wangcc
+ * @LastEditTime: 2023-01-30 14:59:54
+ * @FilePath: \parking_LargeScreen\src\components\charts\roadCharts.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: '',
+  props: ['option'],
+  data() {
+    return {};
+  },
+  mounted() {
+    this.barChart();
+  },
+  methods: {
+    barChart() {
+      // let scale = document.documentElement.clientWidth / 3840;
+      // prettier-ignore
+      let typeChart = this.$echarts.init(this.$refs.typeChart);
+      let dataAxis = this.option.map(item =>{
+        return item.createTime
+      });
+      let data = this.option.map(item =>{
+        return item.countVehicle
+      });
+      let lineData = this.option.map(item =>{
+        return item.spaceRat
+      });
+
+      let scale = document.documentElement.clientWidth / 3840;
+      let optionType = {
+        grid: {
+          top: 100 * scale,
+          right: 100 * scale,
+          left: 120 * scale,
+          bottom: 50 * scale
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            // 坐标轴指示器，坐标轴触发有效
+            type: 'cross', // 默认为直线，可选为：'line' | 'shadow' 'cross'
+            lable: {}
+          },
+          formatter: function (params) {
+            let dataStr =
+              '<div>' +
+              params[0].name +
+              '<br>' +
+              params[0].marker +
+              params[0].seriesName +
+              ':' +
+              '<span style="color: #00B83F;">' +
+              params[0].value +
+              '</span>次' +
+              '<br />' +
+              params[1].marker +
+              params[1].seriesName +
+              ':' +
+              '<span style="color: #00B83F;">' +
+              params[1].value +
+              '</span>%' +
+              '</div>';
+            return dataStr;
+          }
+        },
+        xAxis: {
+          data: dataAxis,
+          axisLabel: {
+            padding: [0, 0, 0, 0]
+          },
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            show: false
+          },
+          z: 10
+        },
+        yAxis: [
+          {
+            type: 'value',
+            name: '单位(个)',
+            axisLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            axisLabel: {
+              color: '#999'
+            },
+            splitLine: {
+              //网格线
+              lineStyle: {
+                type: 'dashed' //设置网格线类型 dotted：虚线   solid:实线
+              },
+              show: true //隐藏或显示
+            }
+          },
+          {
+            type: 'value',
+            name: '单位(%)',
+            min: 0,
+            max: 100,
+            axisLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            axisLabel: {
+              color: '#999'
+            },
+            splitLine: {
+              //网格线
+              lineStyle: {
+                type: 'dashed' //设置网格线类型 dotted：虚线   solid:实线
+              },
+              show: false //隐藏或显示
+            }
+          }
+        ],
+        series: [
+          {
+            name: '停车次数',
+            type: 'bar',
+            showBackground: true,
+            // barWidth: 80 * scale,
+            backgroundStyle: {
+              color: 'rgba(180, 180, 180, 0.2)'
+            },
+            itemStyle: {
+              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 0.4, [
+                // { offset: 0, color: '#00FFFF' },
+                // { offset: 0.5, color: '#1DD4FF' },
+                { offset: 1, color: '#00BCFF' }
+              ])
+            },
+            data: data
+          },
+          {
+            name: '停车使用率',
+            type: 'line',
+            yAxisIndex: 1,
+            itemStyle: {
+              normal: {
+                color: '#979797',
+                borderColor: '#fff',
+                borderWidth: 2
+              }
+            },
+            data: lineData
+          }
+        ]
+      };
+      typeChart.setOption(optionType, true);
+    }
+  }
+};
+</script>
+
+<style  lang='scss' scoped>
+.typeChart {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/components/topNav.vue

@@ -3,7 +3,7 @@
  * @Author: wangcc
  * @Date: 2023-01-09 11:20:03
  * @LastEditors: wangcc
- * @LastEditTime: 2023-01-29 15:44:29
+ * @LastEditTime: 2023-01-30 15:16:51
  * @FilePath: \parking_LargeScreen\src\components\topNav.vue
  * @Copyright: Copyright (c) 2016~2023 by wangcc, All Rights Reserved. 
 -->
@@ -29,6 +29,8 @@
         <div class="weather-box">
           <div id="he-plugin-simple"></div>
         </div>
+        <div class="fuillBox" v-if="acShow" @click="fullScreen"></div>
+        <div class="fuillBoxAct" v-if="btnshow" @click="exitFullScreen"></div>
       </div>
     </div>
   </div>
@@ -36,6 +38,7 @@
 
 <script>
 import timeFormat from '@/utils/timeFormat';
+import screenfull from 'screenfull';
 const weekArr = [
   '星期日',
   '星期一',
@@ -49,7 +52,8 @@ export default {
   name: 'topNav',
   data() {
     return {
-      
+      btnshow:false,
+      acShow:true,
       nowTime: '',
       yearNow: '',
       weekNow: '',
@@ -104,16 +108,30 @@ export default {
     document.getElementsByTagName('head')[0].appendChild(script);
   },
   methods: {
-    tabLink(e,item) {
+    tabLink(e, item) {
       // console.log(item);
       this.cur = e;
-      this.$emit('tabCheck',item)
+      this.$emit('tabCheck', item);
     },
     classFunc(index) {
       if (this.cur == index) {
         return `navActive navActive${index}`;
       }
     },
+    fullScreen() {
+      if (screenfull.isEnabled && !screenfull.isFullscreen) {
+        screenfull.request();
+        this.btnshow = true;
+        this.acShow = false;
+      }
+    },
+    exitFullScreen() {
+      if (screenfull.isEnabled && screenfull.isFullscreen) {
+        screenfull.exit();
+        this.btnshow = false;
+        this.acShow = true;
+      }
+    }
   }
 };
 </script>
@@ -188,6 +206,20 @@ export default {
           border-right: unset;
         }
       }
+      .fuillBox {
+        cursor: pointer;
+        background-image: url('@/assets/images/plus.png');
+        width: 28px;
+        height: 28px;
+        background-size: 100% 100%;
+      }
+      .fuillBoxAct {
+        cursor: pointer;
+        background-image: url('@/assets/images/soll.png');
+        width: 28px;
+        height: 28px;
+        background-size: 100% 100%;
+      }
     }
   }
 }