add:首页视频调整、人员定位时间筛选（筛选仅限7天）、视频播放返回按钮

src/views/index.vue

 <template>
   <div class="app-container">
     <div v-if="videoData">
-      <video width="500" controls name="media">
+      <video width="1400" controls name="media">
         <source :src="videoData" type="video/mp4" />
       </video>
     </div>
@@ -53,7 +53,7 @@
         </div>
       </el-upload> -->
     </div>
-    <el-button @click="videoPlayer">测试视频流</el-button>
+    <!-- <el-button @click="videoPlayer">测试视频流</el-button> -->
     <video width="500" class="player" id="player"></video>
   </div>
 </template>

src/views/personPos/perHis/index.vue

 <template>
   <div class="app-container">
-    
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      size="small"
+      :inline="true"
+      v-show="showSearch"
+      label-width="68px"
+    >
       <el-form-item label="" prop="perName">
         <el-input
           v-model="queryParams.perName"
@@ -11,7 +17,11 @@
         />
       </el-form-item>
       <el-form-item label="" prop="cardNumber">
-        <el-select v-model="queryParams.cardNumber" placeholder="请选择卡号" clearable>
+        <el-select
+          v-model="queryParams.cardNumber"
+          placeholder="请选择卡号"
+          clearable
+        >
           <el-option
             v-for="dict in cardNoList"
             :key="dict.value"
@@ -20,9 +30,13 @@
           />
         </el-select>
       </el-form-item>
-     
+
       <el-form-item label="" prop="departId">
-        <el-select v-model="queryParams.departId" placeholder="请选择部门" clearable>
+        <el-select
+          v-model="queryParams.departId"
+          placeholder="请选择部门"
+          clearable
+        >
           <el-option
             v-for="dict in DepartmentList"
             :key="dict.value"
@@ -53,46 +67,65 @@
         
       </el-form-item> -->
       <el-form-item label="日期查询">
-        <el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
+        <el-date-picker
+          v-model="dateRange"
+          style="width: 240px"
+          value-format="yyyy-MM-dd"
+          type="daterange"
+          range-separator="-"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :picker-options="pickerOptions"
+        ></el-date-picker>
       </el-form-item>
-   
+
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
+          @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+          >重置</el-button
+        >
       </el-form-item>
     </el-form>
-    <el-table v-loading="loading" :data="perHisList" >
+    <el-table v-loading="loading" :data="perHisList">
       <el-table-column label="姓名" align="center" prop="perName" />
       <el-table-column label="卡号" align="center" prop="cardNumber" />
       <el-table-column label="部门" align="center" prop="departName" />
       <el-table-column label="分站名称" align="center" prop="stationName" />
       <el-table-column label="分站位置" align="center" prop="location" />
       <el-table-column label="所属区域" align="center" prop="areaName" />
-      <el-table-column label="时间" align="center" prop="time" >
+      <el-table-column label="时间" align="center" prop="time">
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.time) }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="分站距离（m）" align="center" prop="distance"/>
-     
-      
+      <el-table-column label="分站距离（m）" align="center" prop="distance" />
     </el-table>
     <pagination
-      v-show="total>0"
+      v-show="total > 0"
       :total="total"
       :page.sync="queryParams.pageNum"
       :limit.sync="queryParams.pageSize"
       @pagination="getList"
     />
-
-
-    
   </div>
 </template>
 
 <script>
 import { perHistory } from "@/api/tyler/perHis";
-import { baseInfoDepartment, baseInfoArea, baseInfoStation, baseInfoWorkType, baseInfoPosition, baseInfoCardNumber } from "@/api/tyler/common";
+import {
+  baseInfoDepartment,
+  baseInfoArea,
+  baseInfoStation,
+  baseInfoWorkType,
+  baseInfoPosition,
+  baseInfoCardNumber,
+} from "@/api/tyler/common";
 
 export default {
   name: "perHis",
@@ -112,7 +145,7 @@ export default {
       showSearch: true,
       // 总条数
       total: 0,
-      
+
       // 考勤管理数据表格数据
       perHisList: [],
       // 弹出层标题
@@ -123,7 +156,7 @@ export default {
       queryParams: {
         pageNum: 1,
         pageSize: 10,
-        perName:null,
+        perName: null,
         cardNumber: null,
         departId: null,
         positionId: null,
@@ -146,53 +179,84 @@ export default {
       InfoPositionList: [],
       //工种列表
       WorkTypeList: [],
-     
+      pickerOptions: {
+        disabledDate: (time) => {
+          const oneDay = 24 * 3600 * 1000;
+          const maxRange = 7 * oneDay;
+          if (this.pickerState.minDate) {
+            const minTime = new Date(this.pickerState.minDate).getTime();
+            return (
+              time.getTime() > Date.now() ||
+              time.getTime() < minTime - maxRange ||
+              time.getTime() > minTime + maxRange
+            );
+          }
+          return time.getTime() > Date.now();
+        },
+        onPick: ({ maxDate, minDate }) => {
+          this.pickerState = { minDate, maxDate };
+        },
+      },
+      pickerState: {},
     };
   },
   created() {
+    // 设置默认日期范围为最近7天
+    const end = new Date();
+    const start = new Date();
+    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+    //转化为yyyy-MM-dd格式
+    const formatDate = (date) => {
+      const year = date.getFullYear();
+      const month = String(date.getMonth() + 1).padStart(2, "0");
+      const day = String(date.getDate()).padStart(2, "0");
+      return `${year}-${month}-${day}`;
+    };
+    this.dateRange = [formatDate(start), formatDate(end)];
     this.getCommon();
     this.getList();
-  
   },
   methods: {
     // common
-    
-    getCommon(){
+
+    getCommon() {
       //卡号
-      baseInfoCardNumber().then(res=>{
+      baseInfoCardNumber().then((res) => {
         this.cardNoList = res.data;
-      })
+      });
       //部门
-      baseInfoDepartment().then(res=>{
+      baseInfoDepartment().then((res) => {
         this.DepartmentList = res.data;
-      })
+      });
       //分站
-      baseInfoStation().then(res=>{
+      baseInfoStation().then((res) => {
         this.StationList = res.data;
-      })
+      });
       //区域
-      baseInfoArea().then(res=>{
+      baseInfoArea().then((res) => {
         this.AreaList = res.data;
-      })
+      });
       //职务
-      baseInfoPosition().then(res=>{
+      baseInfoPosition().then((res) => {
         this.InfoPositionList = res.data;
-      })
-      
+      });
+
       //工种
-      baseInfoWorkType().then(res=>{
+      baseInfoWorkType().then((res) => {
         this.WorkTypeList = res.data;
-      })
+      });
     },
     /** 查询人员定位实时数据列表 */
     getList() {
       this.loading = true;
-      perHistory(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
-        this.perHisList = response.rows;
-        this.leaderList = response.remark;
-        this.total = response.total;
-        this.loading = false;
-      });
+      perHistory(this.addDateRange(this.queryParams, this.dateRange)).then(
+        (response) => {
+          this.perHisList = response.rows;
+          this.leaderList = response.remark;
+          this.total = response.total;
+          this.loading = false;
+        }
+      );
     },
     // 取消按钮
     cancel() {
@@ -212,7 +276,6 @@ export default {
     },
     /** 搜索按钮操作 */
     handleQuery() {
-      
       this.queryParams.pageNum = 1;
       this.getList();
     },
@@ -222,22 +285,23 @@ export default {
       this.resetForm("queryForm");
       this.handleQuery();
     },
- 
 
     /** 导出按钮操作 */
     handleExport() {
-      this.download('business/per/export', {
-        ...this.queryParams
-      }, `per_${new Date().getTime()}.xlsx`)
-    }
+      this.download(
+        "business/per/export",
+        {
+          ...this.queryParams,
+        },
+        `per_${new Date().getTime()}.xlsx`
+      );
+    },
   },
-
-
 };
 </script>
 <style lang="scss" scoped>
-.now-leader{
+.now-leader {
   display: flex;
   justify-content: space-between;
 }
-</style>
\ No newline at end of file
+</style>

src/views/videoPlay/index.vue

 <template>
   <div class="">
+    <div>
+      <el-button @click="goBack">返回</el-button>
+    </div>
     <video
       :src="videoUrl"
       :poster="posterUrl"
@@ -31,6 +34,9 @@ export default {
   mounted() {},
   methods: {
     handleLoadedMetadata() {},
+    goBack() {
+      this.$router.go(-1);
+    },
   },
 };
 </script>