添加获取本机ip并发送到服务器

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "axios": "^1.6.5",
+        "cors": "^2.8.5",
         "element-plus": "^2.4.4",
         "video.js": "^8.9.0",
         "vue": "^3.3.11",
@@ -1019,6 +1020,18 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/cors": {
+      "version": "2.8.5",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
+      "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
+      "dependencies": {
+        "object-assign": "^4",
+        "vary": "^1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
@@ -1416,6 +1429,14 @@
       "resolved": "https://registry.npmjs.org/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz",
       "integrity": "sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw=="
     },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@@ -1591,6 +1612,14 @@
       "resolved": "https://registry.npmjs.org/url-toolkit/-/url-toolkit-2.2.5.tgz",
       "integrity": "sha512-mtN6xk+Nac+oyJ/PrI7tzfmomRVNFIWKUbG8jdYFt52hxbiReFAXIjYskvu64/dvuW71IcB7lV8l0HvZMac6Jg=="
     },
+    "node_modules/vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/video.js": {
       "version": "8.9.0",
       "resolved": "https://registry.npmjs.org/video.js/-/video.js-8.9.0.tgz",

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "axios": "^1.6.5",
+    "cors": "^2.8.5",
     "element-plus": "^2.4.4",
     "video.js": "^8.9.0",
     "vue": "^3.3.11",

src/api/user.js

@@ -5,7 +5,7 @@ export const loginService = (loginData) => {
     for (let key in loginData) {
         params.append(key, loginData[key])
     }
-    return request.post('/user/login', params,)
+    return request.post('/user/login', params)
 }
 
 export const registerService = (registerData) => {

src/api/video.js

@@ -7,19 +7,33 @@ export const playVideoService = (data) => {
     }
     return request.post('/video', params, Headers = { 'Accept': 'application/vnd.apple.mpegurl', Authorization: data.Authorization });
 }
+export const delayVideoService = (data) => {
+    const params = new URLSearchParams();
+    for (let key in data) {
+        params.append(key, data[key])
+    }
+    return request.post('/video/delay_video', params, Headers = {Authorization: data.Authorization });
+}
 
 export const getVideoListService = (data) => {
     const params = new URLSearchParams();
+    let hour = data['hour'];
     for (let key in data) {
-        if(key === 'entrydate' && data[key].length > 0){
+        if (key === 'entrydate' && data[key].length > 0) {
-            console.log(data[key]);
+            if (hour === "33") {
-            let begin=data[key][0].toLocaleString().slice(0,10)+" 00:00:00";
+                let begin = data[key][0].toLocaleString().slice(0, 10) + " 00:00:00"; //begin=data[key][0].toLocaleString().slice(0,10)+hour+":00:00";
-            console.log("begin="+begin.toString());
+                params.append("begin", begin);
-            params.append("begin", begin);
+                let end = data[key][1].toLocaleString().slice(0, 10) + " 23:59:59";
-            let end=data[key][1].toLocaleString().slice(0,10)+" 23:59:59";
+                params.append("end", end);
-            console.log("end="+end.toString());
+                continue;
-            params.append("end", end);
+            } else {
-            continue;
+                let begin = data[key][0].toLocaleString().slice(0, 10) + hour + ":00:00"; //begin=data[key][0].toLocaleString().slice(0,10)+hour+":00:00";
+                params.append("begin", begin);
+                let end = data[key][1].toLocaleString().slice(0, 10) + hour + ":59:59";
+                params.append("end", end);
+                continue;
+            }
+
         }
         params.append(key, data[key])
     }

src/main.js

@@ -7,7 +7,7 @@ import App from './App.vue'
 import router from '@/router'
 import globalData  from '@/utils/global.js'
 
-
 const app=createApp(App);
 app.provide('globalData',globalData);
+
 app.use(router).use(ElementPlus).mount('#app');

src/utils/request.js

@@ -1,6 +1,6 @@
 import axios from "axios";
 import router from "@/router/index.js";
-const baseURL = "/api";
+const baseURL = "https://jp.ljsea.top/";
 const request = axios.create({
   baseURL: baseURL,
 });

src/views/Login.vue

@@ -99,10 +99,11 @@ if (localStorage.getItem("token") !== null) {
 
 const globalData = inject("globalData");
 
-const loginData = ref({
+var loginData = ref({
   username: "",
   email: "lijun.lj@foxmail.com",
   password: "",
+  ip:"",
 });
 const registerData = ref({
   username: "",
@@ -159,9 +160,25 @@ const login = async () => {
   localStorage.setItem("token", result.data.token);
   localStorage.setItem("userId", result.data.id);
   localStorage.setItem("username", result.data.username);
+  let now=new Date();
+  localStorage.setItem("end_time", now.setDate(now.getHours() + 12));//过期时间
   //token.value= result.data;
   router.push("/videoList");
 };
+const  getIpClient= async() => {
+      try {
+        const response = await axios.get("https://ipinfo.io/json");
+        loginData.value.ip =response.data.ip;
+        // console.log("ip:",response.data.ip);
+        // console.log("login ip:",loginData.ip);
+        // console.log(response.data);
+        // console.log(loginData);
+      } catch (error) {
+        console.error(error);
+      }
+    };
+
+getIpClient();
 const register = async () => {
   let result = registerService(registerData.value);
   if (result.code === 0) {

src/views/Video.vue

@@ -30,10 +30,12 @@ nextTick(() => {
     sources: [
       {
         src:
-          "/api/video/m3u8?filename=" +
+          "https://jp.ljsea.top/video/m3u8?filename=" +
           localStorage.getItem("video_name") +
           "&id=" +
           localStorage.getItem("video_id") +
+          "&ip=" +
+          localStorage.getItem("ip")+
           "&userId=" +
           localStorage.getItem("userId") +
           "&token=" +

src/views/VideoList.vue

@@ -2,6 +2,7 @@
 import axios from "axios";
 import { inject } from "vue";
 import { getVideoListService } from "@/api/video.js";
+import { delayVideoService } from "@/api/video.js";
 import router from "@/router/index.js";
 
 export default {
@@ -14,9 +15,12 @@ export default {
   // },
   data() {
     return {
+      ip: "",
       tableData: [],
+      file_sum_size: 0,
       tokenData: {
         token: localStorage.getItem("token"),
+        ip: localStorage.getItem("ip"),
         userId: localStorage.getItem("userId"),
         username: localStorage.getItem("username"),
         hour: 0,
@@ -33,15 +37,23 @@ export default {
   // 它们可以在模板中作为事件处理器绑定
   methods: {
     async getVideoList() {
-      console.log(this.tokenData.token);
       let result = {};
       try {
         result = await getVideoListService(this.tokenData);
       } catch (e) {
         console.log(e);
       }
-      this.tableData = JSON.parse(result.data);
+      let data = result.data;
-      console.log(this.tableData[0]);
+      let len = data.length;
+
+      for (let i = 0; i < len; i++) {
+        //this.file_sum_size += parseFloat(data[i].file_size);
+        data[i].file_size = parseFloat(data[i].file_size / 1024 / 1024).toFixed(
+          2
+        );
+      }
+      console.log("file_size", this.file_sum_size, "len=", len);
+      this.tableData = data;
     },
     onSubmit() {
       getVideoList({ token: token });
@@ -60,6 +72,84 @@ export default {
       //alert("id=" + id + " name=" + name);
       router.push("/video");
     },
+    async downloadVideo(index) {
+      var id = this.tableData[index].id;
+      var name = this.tableData[index].video_name;
+      var vurl =
+        "https://jp.ljsea.top/video/m3u8?filename=" +
+        name +
+        "&id=" +
+        id +
+        "&userId=" +
+        localStorage.getItem("userId") +
+        "&ip=" +
+        this.ip +
+        "&token=" +
+        localStorage.getItem("token"); //视频地址
+      //下载文件
+      try {
+        // 发送请求到后端获取视频文件
+        const response = await axios({
+          url: vurl,
+          method: "GET",
+          responseType: "blob", // 告诉axios我们期望的响应是一个blob
+          headers: {
+            // 如果有必要，设置其他请求头
+            "Content-Type": "video/mp4",
+          },
+        });
+
+        // 创建Blob对象
+        const videoBlob = new Blob([response.data], { type: "video/mp4" });
+
+        // 创建一个指向Blob对象的URL
+        const videoUrl = URL.createObjectURL(videoBlob);
+
+        // 使用a标签下载文件
+        const link = document.createElement("a");
+        link.href = videoUrl;
+        link.download = name; // 设置下载文件的名称
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        // 释放URL对象
+        URL.revokeObjectURL(videoUrl);
+      } catch (error) {
+        console.error("下载视频时发生错误:", error);
+      }
+    },
+    async delayVideo(index) {
+      var id = this.tableData[index].id;
+      var days = 10;
+      var delay_data = {
+        id: id,
+        ip:this.ip,
+        delay: days,
+        userId: this.tokenData.userId,
+        token: this.tokenData.token,
+      };
+      try {
+        var d_re = await delayVideoService(delay_data);
+        if (d_re.code == 0) {
+          alert("延迟成功");
+        } else {
+          alert("操作失败");
+        }
+      } catch (e) {
+        console.log(e);
+      }
+    },
+    async getIpClient() {
+      try {
+        const response = await axios.get("https://ipinfo.io/json");
+        this.ip=response.data.ip;
+        localStorage.setItem("ip", this.ip);
+        //console.log(response);
+      } catch (error) {
+        console.error(error);
+      }
+    },
+
     // 修改条纹颜色
     tableRowClassName({ row, rowIndex }) {
       if (row.human === 1) {
@@ -74,11 +164,13 @@ export default {
 
   // 生命周期钩子会在组件生命周期的各个不同阶段被调用
   // 例如这个函数就会在组件挂载完成后被调用
-  mounted() {
+  async mounted() {
-    if (localStorage.getItem("token") === null) {
+    let now=new Date();
+    if (localStorage.getItem("token") === null ) {
       router.push("/login");
     }
-    console.log("mounted");
+    // console.log("mounted");
+    await this.getIpClient();
     this.getVideoList();
   },
 };
@@ -105,17 +197,18 @@ export default {
               </el-date-picker>
             </el-form-item>
 
-            <!-- <el-select v-model="tokenData.hour">
+            <el-select v-model="tokenData.hour">
-              <el-option label="0点" value="24"></el-option>
+              <el-option label="不选" value="33"></el-option>
-              <el-option label="1点" value="1"></el-option>
+              <el-option label="0点" value="00"></el-option>
-              <el-option label="2点" value="2"></el-option>
+              <el-option label="1点" value="01"></el-option>
-              <el-option label="3点" value="3"></el-option>
+              <el-option label="2点" value="02"></el-option>
-              <el-option label="4点" value="4"></el-option>
+              <el-option label="3点" value="03"></el-option>
-              <el-option label="5点" value="5"></el-option>
+              <el-option label="4点" value="04"></el-option>
-              <el-option label="6点" value="6"></el-option>
+              <el-option label="5点" value="05"></el-option>
-              <el-option label="7点" value="7"></el-option>
+              <el-option label="6点" value="06"></el-option>
-              <el-option label="8点" value="8"></el-option>
+              <el-option label="7点" value="07"></el-option>
-              <el-option label="9点" value="9"></el-option>
+              <el-option label="8点" value="08"></el-option>
+              <el-option label="9点" value="09"></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>
@@ -130,41 +223,56 @@ export default {
               <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-select>
 
             <el-form-item>
               <el-button type="primary" @click="getVideoList()">查询</el-button>
             </el-form-item>
+            <!-- <el-form-item>
+            所有文件大小：  {{ parseFloat(this.file_sum_size/1024/1024).toFixed(2) }} GB
+            </el-form-item> -->
           </el-form>
 
-          <!-- 表格 -->
+          <!-- 表格  :row-style="this.tableRowClassName"-->
-          <el-table
+          <el-table :data="tableData" width="100%" border>
-            :data="tableData"
             :row-style="this.tableRowClassName"
-            border
+            <el-table-column prop="id" label="id" width="80"></el-table-column>
-          >
-            <el-table-column prop="id" label="id" width="50"></el-table-column>
             <el-table-column
               prop="video_name"
               label="视频名称"
               width="250"
             ></el-table-column>
-            <el-table-column label="是否有人" width="50" prop="human">
+            <el-table-column label="是否有人" width="30" prop="human">
               <template #default="scope">
                 {{ scope.row.human == 1 ? "有" : "无" }}
               </template>
             </el-table-column>
             <el-table-column
               prop="create_time"
-              label="创建时间"
+              label="开始时间"
-              width="250"
+              width="180"
+            ></el-table-column>
+            <el-table-column
+              prop="end_time"
+              label="结束时间"
+              width="180"
             ></el-table-column>
             <el-table-column
               prop="delete_time"
               label="预期删除时间"
-              width="250"
+              width="180"
             ></el-table-column>
-            <el-table-column label="操作" width="250">
+            <el-table-column
+              prop="file_size"
+              label="文件大小(MB)"
+              width="80"
+            ></el-table-column>
+            <el-table-column
+              prop="camera_id"
+              label="摄像头"
+              width="50"
+            ></el-table-column>
+            <el-table-column label="操作" width="300">
               <template #default="scope">
                 <el-button
                   type="primary"
@@ -172,6 +280,18 @@ export default {
                   @click.prevent="playVideo(scope.$index)"
                   >播放</el-button
                 >
+                <el-button
+                  type="primary"
+                  size="mini"
+                  @click.prevent="delayVideo(scope.$index)"
+                  >延迟删除</el-button
+                >
+                <el-button
+                  type="primary"
+                  size="mini"
+                  @click.prevent="downloadVideo(scope.$index)"
+                  >下载</el-button
+                >
 
                 <!-- <el-button type="danger" size="mini">删除</el-button> -->
               </template>

vite.config.js

@@ -13,13 +13,13 @@ export default defineConfig({
       '@': fileURLToPath(new URL('./src', import.meta.url))
     }
   },
-    server : {
+    // server : {
-      proxy: {
+    //   proxy: {
-        '/api': {
+    //     '/api': {
-          target: 'https://jp.ljsea.top',
+    //       target: 'https://jp.ljsea.top',
-          changeOrigin: true,
+    //       changeOrigin: true,
-          rewrite: path => path.replace(/^\/api/, '')
+    //       rewrite: path => path.replace(/^\/api/, '')
-        }
+    //     }
-      }
+    //   }
-    }
+    // }
 })