请求m3u8视频版本

package-lock.json

@@ -17,6 +17,7 @@
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^4.6.2",
+        "sass": "^1.69.7",
         "vite": "^5.0.10"
       }
     },
@@ -926,6 +927,19 @@
         "npm": ">=5"
       }
     },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/async-validator": {
       "version": "4.2.5",
       "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.2.5.tgz",
@@ -946,6 +960,54 @@
         "proxy-from-env": "^1.1.0"
       }
     },
+    "node_modules/binary-extensions": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "dev": true,
+      "dependencies": {
+        "fill-range": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/chokidar": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
+      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://paulmillr.com/funding/"
+        }
+      ],
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -1064,6 +1126,18 @@
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
     },
+    "node_modules/fill-range": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "dev": true,
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/follow-redirects": {
       "version": "1.15.4",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.4.tgz",
@@ -1110,6 +1184,18 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/global": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
@@ -1119,16 +1205,64 @@
         "process": "^0.11.10"
       }
     },
+    "node_modules/immutable": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz",
+      "integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==",
+      "dev": true
+    },
     "node_modules/individual": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/individual/-/individual-2.0.0.tgz",
       "integrity": "sha512-pWt8hBCqJsUWI/HtcfWod7+N9SgAqyPEaF7JQjwzjn5vGrpg6aQ5qeAFQ7dx//UH4J1O+7xqew+gCeeFt6xN/g=="
     },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/is-function": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.2.tgz",
       "integrity": "sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ=="
     },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
     "node_modules/keycode": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz",
@@ -1268,6 +1402,15 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/normalize-wheel-es": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz",
@@ -1278,6 +1421,18 @@
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
       "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
     },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/pkcs7": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/pkcs7/-/pkcs7-1.0.4.tgz",
@@ -1329,6 +1484,18 @@
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
       "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
     },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
     "node_modules/regenerator-runtime": {
       "version": "0.14.1",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
@@ -1382,6 +1549,23 @@
         "rust-result": "^1.0.0"
       }
     },
+    "node_modules/sass": {
+      "version": "1.69.7",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.69.7.tgz",
+      "integrity": "sha512-rzj2soDeZ8wtE2egyLXgOOHQvaC2iosZrkF6v3EUG+tBwEvhqUCzm0VP3k9gHF9LXbSrRhT5SksoI56Iw8NPnQ==",
+      "dev": true,
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
@@ -1390,6 +1574,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
     "node_modules/url-toolkit": {
       "version": "2.2.5",
       "resolved": "https://registry.npmjs.org/url-toolkit/-/url-toolkit-2.2.5.tgz",

package.json

@@ -18,6 +18,7 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.6.2",
+    "sass": "^1.69.7",
     "vite": "^5.0.10"
   }
 }

src/api/video.js

@@ -5,12 +5,21 @@ export const playVideoService = (data) => {
     for (let key in data) {
         params.append(key, data[key])
     }
-    return request.post('/video/m3u8', params, Headers = { 'Accept': 'application/vnd.apple.mpegurl', Authorization: data.Authorization });
+    return request.post('/video', params, Headers = { 'Accept': 'application/vnd.apple.mpegurl', Authorization: data.Authorization });
 }
 
 export const getVideoListService = (data) => {
     const params = new URLSearchParams();
     for (let key in data) {
+        if(key === 'entrydate' && data[key].length > 0){
+            console.log(data[key]);
+            let begin=data[key][0].toISOString().slice(0,10)+" 00:00:00";
+            console.log("begin="+begin.toString());
+            params.append("begin", begin);
+            let end=data[key][0].toISOString().slice(0,10)+" 23:59:59";
+            params.append("end", end);
+            continue;
+        }
         params.append(key, data[key])
     }
     // request.headers["Content-Type"] = "application/json";

src/router/index.js

@@ -13,12 +13,6 @@ const routes = [
     {
         path: '/video',
         name: 'Video',
-        meta:{
-            name:'',
-            id:0,
-            userid:0,
-            token:"",
-        },
         component: VideoVue
     },
     {

src/utils/request.js

@@ -1,5 +1,5 @@
 import axios from "axios";
-import router from "@/router";
+import router from "@/router/index.js";
 const baseURL = "/api";
 const request = axios.create({
   baseURL: baseURL,
@@ -7,13 +7,14 @@ const request = axios.create({
 
 request.interceptors.response.use(
     result => {
-        if(result.status!==200){
+        if(result.status!==200 ){
             router.push("/login")
         }
         if(result.data.code===0){
             return result.data;
         }else{
             alert(result.data.message ? result.data.message : "请求失败，请稍后重试！");
+            
             return Promise.reject(result.data.message);
         }
     },

src/views/Login.vue

@@ -88,15 +88,16 @@
 </template>
 
 <script setup>
-import { ref,inject } from "vue";
+import { ref, inject } from "vue";
 import axios from "axios";
 import { loginService, registerService } from "@/api/user.js";
 import router from "@/router/index.js";
 const isLogin = ref(true);
+if (localStorage.getItem("token") !== null) {
+  router.push("/videoList");
+}
 
-
+const globalData = inject("globalData");
-
-const globalData=inject('globalData');
 
 const loginData = ref({
   username: "",
@@ -154,11 +155,10 @@ const login = async () => {
   //       console.error(error);
   //     });
   let result = await loginService(loginData.value);
-  alert(result.message);
   globalData.token = result.data;
-  localStorage.setItem('token',result.data.token)
+  localStorage.setItem("token", result.data.token);
-  localStorage.setItem('userId',result.data.id)
+  localStorage.setItem("userId", result.data.id);
-  localStorage.setItem('username',result.data.username)
+  localStorage.setItem("username", result.data.username);
   //token.value= result.data;
   router.push("/videoList");
 };

src/views/Video.vue

@@ -1,39 +1,102 @@
+
 <template>
-  <div>
+  <div class="video_wrap">
-    <video-player :options="videoOptions" />
+    <div class="backIndex">
+      <span @click="router.push({ path: '/videoList' })"
+        ><left-outlined
+      /></span>
+    </div>
+    <video width="800" height="600" ref="videoPlayer" muted="muted" class="video-js video"></video>
   </div>
 </template>
-
+<script setup>
-<script>
+import { onUnmounted, ref, nextTick } from "vue";
-import VideoPlayer from "@/views/VideoPlayer.vue";
+import { useRoute, useRouter } from "vue-router";
-import router from "@/router/index.js";
+import videojs from "video.js";
-
+import "video.js/dist/video-js.css";
-export default {
+const videoPlayer = ref(null);
-  name: "VideoExample",
+const myPlayer = ref(null);
-  components: {
+const route = useRoute();
-    VideoPlayer,
+const router = useRouter();
-  },
+if(localStorage.getItem('token')===null) {
-  data() {
+      router.push("/login");
-    return {
+    }
-      videoOptions: {
+let token = route.query.token;
-        autoplay: true,
+nextTick(() => {
-        controls: true,
+  myPlayer.value = videojs(videoPlayer.value, {
-        sources: [
+    // poster: "//vjs.zencdn.net/v/oceans.png",//视频封面照片
-          {
+    controls: true, //视频控件
-            src:
+    autoplay: true, //自动播放
-              "/path/to/video.m3u8?filename=" +
+    sources: [
-              router.meta.name +
+      {
-              "&id=" +
+        src:
-              router.meta.id +
+          "/api/video/m3u8?filename=" +
-              "&userid=" +
+          localStorage.getItem("video_name") +
-              router.meta.userid +
+          "&id=" +
-              "&token=" +
+          localStorage.getItem("video_id") +
-              router.meta.token,
+          "&userId=" +
-            type: "video/m3u8",
+          localStorage.getItem("userId") +
-          },
+          "&token=" +
-        ],
+          localStorage.getItem("token"), //视频地址
+        type: "application/vnd.apple.mpegurl",
       },
-    };
+    ],
-  },
+    controlBar: {
-};
+      remainingTimeDisplay: {
+        displayNegative: false,
+      },
+    },
+    playbackRates: [0.5, 1, 1.5, 2], //设置播放速度
+  });
+});
+
+onUnmounted(() => {
+  if (myPlayer.value) {
+    myPlayer.value.dispose();
+  }
+});
 </script>
+<style lang="scss" scoped>
+.video_wrap {
+  width: 100vw;
+  height: 100vh;
+  position: relative;
+
+  .backIndex {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 50px;
+    width: 100%;
+    line-height: 50px;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 99;
+    padding-left: 10px;
+    font-size: 20px;
+    font-weight: 400;
+    opacity: 0;
+    transition: all 0.3s;
+    color: white;
+
+    &:hover {
+      opacity: 1;
+    }
+    span {
+      cursor: pointer;
+    }
+  }
+
+  .video {
+    height: 100%;
+    width: 100%;
+  }
+
+  ::v-deep(.vjs-big-play-button) {
+    margin-left: 45%;
+    margin-top: 20%;
+  }
+}
+</style>
+
+
+

src/views/VideoList.vue

@@ -19,6 +19,12 @@ export default {
         token: localStorage.getItem("token"),
         userId: localStorage.getItem("userId"),
         username: localStorage.getItem("username"),
+        hour: 0,
+        entrydate: [],
+      },
+      searchForm: {
+        hour: 0,
+        entrydate: [],
       },
     };
   },
@@ -47,24 +53,21 @@ export default {
       alert("页码发生变化" + val);
     },
     playVideo(index) {
-      var id=this.tableData[index].id;
+      var id = this.tableData[index].id;
-      var name=this.tableData[index].name;
+      var name = this.tableData[index].name;
+      localStorage.setItem("video_id", id);
+      localStorage.setItem("video_name", name);
       alert("id=" + id + " name=" + name);
-      router.push(
+      router.push("/video");
-        "/video",
-        {
-          name: name,
-          userid: this.tokenData.userId,
-          token: this.tokenData.token,
-          id: id,
-        }
-      );
     },
   },
 
   // 生命周期钩子会在组件生命周期的各个不同阶段被调用
   // 例如这个函数就会在组件挂载完成后被调用
   mounted() {
+    if (localStorage.getItem("token") === null) {
+      router.push("/login");
+    }
     console.log("mounted");
     this.getVideoList();
   },
@@ -80,22 +83,10 @@ export default {
       <el-container>
         <el-main>
           <!-- 表单 -->
-          <!-- <el-form :inline="true" :model="searchForm" class="demo-form-inline">
+          <el-form :inline="true" :model="tokenData" class="demo-form-inline">
-            <el-form-item label="姓名">
-              <el-input v-model="searchForm.name" placeholder="姓名"></el-input>
-            </el-form-item>
-
-            <el-form-item label="性别">
-              <el-select v-model="searchForm.gender" placeholder="性别">
-                <el-option label="男" value="1"></el-option>
-                <el-option label="女" value="2"></el-option>
-              </el-select>
-            </el-form-item>
-
             <el-form-item label="视频日期">
-
               <el-date-picker
-                v-model="searchForm.entrydate"
+                v-model="tokenData.entrydate"
                 type="daterange"
                 range-separator="至"
                 start-placeholder="开始日期"
@@ -104,10 +95,37 @@ export default {
               </el-date-picker>
             </el-form-item>
           
+            <el-select v-model="tokenData.hour">
+              <el-option label="0点" value="24"></el-option>
+              <el-option label="1点" value="1"></el-option>
+              <el-option label="2点" value="2"></el-option>
+              <el-option label="3点" value="3"></el-option>
+              <el-option label="4点" value="4"></el-option>
+              <el-option label="5点" value="5"></el-option>
+              <el-option label="6点" value="6"></el-option>
+              <el-option label="7点" value="7"></el-option>
+              <el-option label="8点" value="8"></el-option>
+              <el-option label="9点" value="9"></el-option>
+              <el-option label="10点" value="10"></el-option>
+              <el-option label="11点" value="11"></el-option>
+              <el-option label="12点" value="12"></el-option>
+              <el-option label="13点" value="13"></el-option>
+              <el-option label="14点" value="14"></el-option>
+              <el-option label="15点" value="15"></el-option>
+              <el-option label="16点" value="16"></el-option>
+              <el-option label="17点" value="17"></el-option>
+              <el-option label="18点" value="18"></el-option>
+              <el-option label="19点" value="19"></el-option>
+              <el-option label="20点" value="20"></el-option>
+              <el-option label="21点" value="21"></el-option>
+              <el-option label="22点" value="22"></el-option>
+              <el-option label="23点" value="23"></el-option>
+            </el-select>
+
             <el-form-item>
-              <el-button type="primary" @click="onSubmit">查询</el-button>
+              <el-button type="primary" @click="getVideoList()">查询</el-button>
             </el-form-item>
-          </el-form> -->
+          </el-form>
 
           <!-- 表格 -->
           <el-table :data="tableData" border>
@@ -118,9 +136,9 @@ export default {
               width="250"
             ></el-table-column>
             <el-table-column label="是否有人" width="50" prop="human">
-              <!-- <template human="human">
+              <template #default="scope">
-                {{ human.row.human == 1 ? "有" : "无" }}
+                {{ scope.row.human == 1 ? "有" : "无" }}
-              </template> -->
+              </template>
             </el-table-column>
             <el-table-column
               prop="create_time"
@@ -132,7 +150,7 @@ export default {
               label="预期删除时间"
               width="250"
             ></el-table-column>
-            <el-table-column label="操作">
+            <el-table-column label="操作" width="250">
               <template #default="scope">
                 <el-button
                   type="primary"
@@ -149,15 +167,18 @@ export default {
 
           <!-- 分页条 -->
           <!-- Pagination 分页 -->
-          <el-pagination
+          <!-- <el-pagination
             background
             layout="total,sizes, prev, pager, next, jumper"
             @size-change="handleSizeChange"
             @current-change="handleCurrentChange"
             :total="1000"
-          ></el-pagination>
+          ></el-pagination> -->
         </el-main>
       </el-container>
     </el-container>
+    <div>
+      {{ tokenData.entrydate }},{{ tokenData.hour }}
+    </div>
   </div>
 </template>