添加设备实时查看功能

src/api/cid.js

@@ -0,0 +1,65 @@
+import request from '@/utils/request.js'
+
+export const runCIDService = (data) => {
+    const params = new URLSearchParams();
+    for (let key in data) {
+        if(key == 'token') continue;
+        params.append(key, data[key])
+    }
+    return request.post('/cid/run', params, { "headers": { 'token': data.token } });
+}
+
+export const updateCIDService = (data) => {
+    const params = new URLSearchParams();
+    for (let key in data) {
+        if (key == 'token') continue;
+        params.append(key, data[key])
+    }
+    return request.post('/cid/update', params, { "headers": { 'token': data.token } });
+}
+
+export const deleteCIDService = (data) => {
+    const params = new URLSearchParams();
+    for (let key in data) {
+        params.append(key, data[key])
+    }
+    return request.post('/cid/delete', params, { "headers": { 'token': data.token } });
+}
+
+export const addCIDService = (data) => {
+    const params = new URLSearchParams();
+    for (let key in data) {
+        params.append(key, data[key])
+    }
+    return request.post('/cid/create', params, { "headers": { 'token': data.token },'Content-Type': 'application/json' });
+}
+
+export const getCIDListService = (data) => {
+    const params = new URLSearchParams();
+    for (let d in data) {
+        params.append(d, data[d]);
+    }
+    // request.headers["Content-Type"] = "application/json";
+    request.defaults.headers["token"] = data.token.value;
+    return request.post('/cid/list', params, {
+        headers: {
+            'token': data.token, // 将 token 替换为您的令牌值  
+        }
+    }
+    );
+}
+
+export const getCIDLogListService = (data) => {
+    const params = new URLSearchParams();
+    for (let d in data) {
+        params.append(d, data[d]);
+    }
+    // request.headers["Content-Type"] = "application/json";
+    request.defaults.headers["token"] = data.token.value;
+    return request.post('/cid/log', params, {
+        headers: {
+            'token': data.token, // 将 token 替换为您的令牌值  
+        }
+    }
+    );
+}

src/api/user.js

@@ -22,9 +22,11 @@ export const loginService = (loginData) => {
 
 export const registerService = (registerData) => {
     const params = new URLSearchParams();
-    for (let key in loginData) {
+    registerData = registerData._value;
+    for (let key in registerData) {
         params.append(key, registerData[key])
     }
+    console.log("registerdata:",registerData)
     return request.post('/user/register', params)
 }
 

src/router/index.js

@@ -6,6 +6,9 @@ import VideoListVue from "@/views/VideoList.vue";
 import DeviceListVue from "@/views/DeviceList.vue";
 import UserListVue from "@/views/UserList.vue";
 import ImVue from "@/views/Im.vue";
+import CIDListVue from "@/views/CIDList.vue";
+import CIDLog from "@/views/CIDLog.vue";
+import DeviceRealVP from "@/views/DeviceRealVP.vue";
 
 const routes = [
     {
@@ -28,6 +31,11 @@ const routes = [
         name: 'Device',
         component: DeviceListVue
     },
+    {
+        path: '/deviceRealVP',
+        name: 'DeviceRealVP',
+        component: DeviceRealVP
+    },
     {
         path: '/im',
         name: 'Im',
@@ -38,6 +46,16 @@ const routes = [
         name: 'User',
         component: UserListVue
     },
+    {
+        path: '/cid',
+        name: 'CID',
+        component: CIDListVue
+    },
+    {
+        path: '/cidlog',
+        name: 'CIDLog',
+        component: CIDLog
+    },
     {
         path: '/',
         redirect: '/login'

src/utils/request.js

@@ -1,6 +1,6 @@
 import axios from "axios";
 import router from "@/router/index.js";
-const baseURL = "https://gep.ljsea.top/";
+const baseURL = "https://gep.ljsea.xyz/";
 //const baseURL= "http://localhost:8082";
 const request = axios.create({
   baseURL: baseURL,
@@ -17,6 +17,11 @@ request.interceptors.response.use(
             router.push("/login")
             return
         }
+        if(result.data.code == 7){
+            alert("该用户已存在，请重新输入！");
+            return null
+        }
+
         if(result.data.code == 1){
             alert("请求失败，请稍后重试！");
         }else{

src/views/CIDList.vue

@@ -0,0 +1,406 @@
+<script>
+import axios from "axios";
+import { inject } from "vue";
+import { getCIDListService } from "@/api/cid.js";
+import { runCIDService } from "@/api/cid.js";
+import { addCIDService } from "@/api/cid.js";
+import { deleteCIDService } from "@/api/cid.js";
+import { updateCIDService } from "@/api/cid.js";
+import router from "@/router/index.js";
+
+export default {
+  data() {
+    return {
+      ip: "",
+      tableData: [],
+      tokenData: {
+        token: localStorage.getItem("token"),
+        ip: localStorage.getItem("ip"),
+        userId: localStorage.getItem("userId"),
+        username: localStorage.getItem("username"),
+      },
+      addDialogVisible: false,
+      updateDialogVisible: false,
+      searchForm: {
+        hour: 0,
+        entrydate: [],
+      },
+      addForm: {
+        name: "",
+        url: "",
+        script: "",
+        token: localStorage.getItem("token"),
+      },
+      updateForm: {
+        id:0,
+        cidtoken:"",
+        name: "",
+        url: "",
+        script: "",
+        auth_id: -1,
+        token: localStorage.getItem("token"),
+      },
+    };
+  },
+
+  // methods 是一些用来更改状态与触发更新的函数
+  // 它们可以在模板中作为事件处理器绑定
+  methods: {
+    async getDeviceList() {
+      let result = {};
+      try {
+        result = await getCIDListService(this.tokenData);
+      } catch (e) {
+        console.log(e);
+      }
+      let data = result.data;
+
+
+      this.tableData = data;
+    },
+    onSubmit() {
+      getDeviceList({ token: token });
+    },
+    handleSizeChange() {
+      alert("每页记录数变化" + val);
+    },
+    handleCurrentChange() {
+      alert("页码发生变化" + val);
+    },
+
+    //设置项目执行构建部署
+    async runCID(index) {
+      var id = this.tableData[index].ID;
+      var run_data = {
+        id: id,
+        ip: this.ip,
+        userId: this.tokenData.userId,
+        token: this.tokenData.token,
+      };
+      try {
+        var d_re = await runCIDService(run_data);
+        if (d_re.code == 0) {
+          alert("操作成功");
+        } else {
+          alert("操作失败");
+        }
+      } catch (e) {
+        console.log(e);
+      }
+    },
+    toRunCIDLog(index) {
+      var id = this.tableData[index].ID;
+      localStorage.setItem("cid_id", id);
+      router.push("/cidlog");
+    },
+    async deleteCID(index) {
+      var id = this.tableData[index].ID;
+      var delete_data = {
+        id: id,
+        userId: this.tokenData.userId,
+        token: this.tokenData.token,
+      };
+      try {
+        var d_re = await deleteCIDService(delete_data);
+        if (d_re.code == 0) {
+          alert("删除成功");
+          //刷新页面
+          this.getDeviceList();
+        } else {
+          alert("操作失败");
+        }
+      } catch (e) {
+        console.log(e);
+      }
+    },
+    async updateButtonCID(index) {
+      var id = this.tableData[index].ID;
+      this.updateForm.name = this.tableData[index].Name;
+      this.updateForm.url = this.tableData[index].Url;
+      this.updateForm.script = this.tableData[index].Script;
+        this.updateForm.cidtoken = this.tableData[index].Token;
+      this.updateForm.id = id;
+      this.updateDialogVisible= true;
+    },
+    async addCID() {
+      this.addDialogVisible = false;
+      let result = {};
+      try {
+        result = await addCIDService(this.addForm);
+        if (result.code == 0) {
+          alert("添加成功");
+        } else {
+          alert("添加失败");
+        }
+      } catch (e) {
+        console.log(e);
+      }
+    },
+    async updateCID() {
+      this.updateDialogVisible = false;
+      let result = {};
+      try {
+        result = await updateCIDService(this.updateForm);
+        if (result.code == 0) {
+          alert("修改成功");
+          this.getDeviceList()
+        } 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);
+      }
+    },
+    handleMenuSelect(val) {
+      router.push(val);
+    },
+    toVideoList() {
+      router.push("/videoList");
+    },
+    // 修改条纹颜色
+    tableRowClassName({ row, rowIndex }) {
+      if (row.human === 1) {
+        return {
+          background: "#488aff",
+        };
+      } else {
+        return "";
+      }
+    },
+  },
+
+  // 生命周期钩子会在组件生命周期的各个不同阶段被调用
+  // 例如这个函数就会在组件挂载完成后被调用
+  async mounted() {
+    let now = new Date();
+    if (localStorage.getItem("token") === null) {
+      router.push("/login");
+    }
+    // console.log("mounted");
+    await this.getIpClient();
+    this.getDeviceList();
+  },
+};
+</script>
+
+<template>
+  <div>
+    <el-button
+      type="primary"
+      size="mini"
+      @click.prevent="handleMenuSelect('/videoList')"
+      >视频列表</el-button
+    >
+    <el-button
+      type="primary"
+      size="mini"
+      @click.prevent="handleMenuSelect('/device')"
+      >设备管理</el-button
+    >
+    <el-button
+      type="primary"
+      size="mini"
+      @click.prevent="handleMenuSelect('/User')"
+      >用户</el-button
+    >
+    <el-button
+      type="primary"
+      size="mini"
+      @click.prevent="handleMenuSelect('/cid')"
+      >集成部署</el-button
+    >
+    <el-container style="height: 700px; border: 1px solid #eee">
+      <el-header style="font-size: 40px; background-color: rgb(238, 241, 246)"
+        >集成部署项目</el-header
+      >
+      <el-container>
+        <el-main>
+          <!-- 表单 -->
+          <el-form :inline="true" :model="tokenData" class="demo-form-inline">
+            <el-form-item>
+              <el-button
+                class="el-button--danger"
+                type="primary"
+                @click="getDeviceList()"
+                >查询</el-button
+              >
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="addDialogVisible = true"
+                >添加集成项目</el-button
+              >
+            </el-form-item>
+            <el-form-item>
+              <el-dialog
+                v-model="addDialogVisible"
+                title="添加集成项目"
+                width="50%"
+                :before-close="handleClose"
+              >
+                <!-- 内容主体区域 -->
+                <el-form
+                  ref="addFormRef"
+                  :model="addForm"
+                  :rules="addFormRules"
+                  label-width="70px"
+                >
+                  <el-form-item label="项目名称" prop="device_name">
+                    <el-input
+                      v-model="addForm.name"
+                      autocomplete="on"
+                      style="width: 600px" 
+                    ></el-input>
+                  </el-form-item>
+                  <el-form-item label="仓库地址" prop="device_ip">
+                    <el-input v-model="addForm.url"  style="width: 600px" autocomplete="on"></el-input>
+                  </el-form-item>
+                  <el-form-item label="脚本内容" prop="device_status">
+                    <el-input type="textarea" v-model="addForm.script" style="width: 600px" :autosize="{ minRows: 4, maxRows: 8 }" />
+                  </el-form-item>
+                </el-form>
+                <!-- 底部区域 -->
+                <template #footer>
+                  <span class="dialog-footer">
+                    <el-button @click="addDialogVisible = false"
+                      >取消</el-button
+                    >
+                    <el-button type="primary" @click="addCID()"
+                      >确定</el-button
+                    >
+                  </span>
+                </template>
+              </el-dialog>
+            </el-form-item>
+
+            <el-form-item>
+              <el-dialog
+                v-model="updateDialogVisible"
+                title="修改集成项目"
+                width="50%"
+                :before-close="handleClose"
+              >
+                <!-- 内容主体区域 -->
+                <el-form
+                  ref="addFormRef"
+                  :model="updateForm"
+                  :rules="updateFormRules"
+                  label-width="70px"
+                >
+                  <el-form-item label="项目名称" prop="device_name">
+                    <el-input
+                      v-model="updateForm.name"
+                      autocomplete="on"
+                      style="width: 600px" 
+                    ></el-input>
+                  </el-form-item>
+                  <el-form-item label="仓库地址" prop="device_ip">
+                    <el-input v-model="updateForm.url"  style="width: 600px" autocomplete="on"></el-input>
+                  </el-form-item>
+                  <el-form-item label="脚本内容" prop="device_status">
+                    <el-input type="textarea" v-model="updateForm.script" style="width: 600px" :autosize="{ minRows: 4, maxRows: 8 }" />
+                  </el-form-item>
+                  <el-form-item label="外部回调Token" prop="device_status">
+                    <el-input v-model="updateForm.cidtoken" style="width: 600px" />
+                    回调地址：https://gep.ljsea.xyz/cid/callback?token={{updateForm.cidtoken}}&id={{updateForm.id}}
+                  </el-form-item>
+                </el-form>
+                <!-- 底部区域 -->
+                <template #footer>
+                  <span class="dialog-footer">
+                    <el-button @click="updateDialogVisible = false"
+                      >取消</el-button
+                    >
+                    <el-button type="primary" @click="updateCID()"
+                      >确定</el-button
+                    >
+                  </span>
+                </template>
+              </el-dialog>
+            </el-form-item>
+          </el-form>
+
+          <!-- 表格  :row-style="this.tableRowClassName"-->
+          <el-table :data="tableData" width="100%" border>
+            :row-style="this.tableRowClassName"
+            <el-table-column prop="ID" label="id" width="80"></el-table-column>
+            <el-table-column
+              prop="Name"
+              label="名称"
+              width="100"
+            ></el-table-column>
+            <el-table-column
+              prop="Url"
+              label="仓库地址"
+              width="180"
+            ></el-table-column>
+            <el-table-column
+              prop="Script"
+              label="脚本消息"
+              width="250"
+            ></el-table-column>
+            <el-table-column
+              prop="Token"
+              label="回调Token"
+              width="100"
+            ></el-table-column>
+            <el-table-column label="操作" width="350">
+              <template #default="scope">
+                <el-button
+                  type="primary"
+                  size="mini"
+                  @click.prevent="runCID(scope.$index)"
+                  >运行</el-button
+                >
+                <el-button
+                  type="primary"
+                  size="mini"
+                  @click.prevent="updateButtonCID(scope.$index)"
+                  >修改</el-button
+                >
+                <el-button
+                  type="primary"
+                  size="mini"
+                  @click.prevent="deleteCID(scope.$index)"
+                  >删除</el-button
+                >
+                <el-button
+                  type="primary"
+                  size="mini"
+                  @click.prevent="toRunCIDLog(scope.$index)"
+                  >运行日志</el-button
+                >
+                <!-- <el-button type="danger" size="mini">删除</el-button> -->
+              </template>
+            </el-table-column>
+          </el-table>
+          <br />
+
+          <!-- 分页条 -->
+          <!-- Pagination 分页 -->
+          <!-- <el-pagination
+            background
+            layout="total,sizes, prev, pager, next, jumper"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :total="1000"
+          ></el-pagination> -->
+        </el-main>
+      </el-container>
+    </el-container>
+  </div>
+</template>
+<style>
+.blueRowbg {
+  background: "#488aff";
+}
+</style>

src/views/CIDLog.vue

@@ -0,0 +1,291 @@
+<script>
+import axios from "axios";
+import { inject } from "vue";
+import { getCIDLogListService } from "@/api/cid.js";
+import { runCIDService } from "@/api/cid.js";
+import { addCIDService } from "@/api/cid.js";
+import { deleteCIDService } from "@/api/cid.js";
+import { updateCIDService } from "@/api/cid.js";
+import router from "@/router/index.js";
+
+export default {
+  data() {
+    return {
+      ip: "",
+      tableData: [],
+      tokenData: {
+        token: localStorage.getItem("token"),
+        ip: localStorage.getItem("ip"),
+        id:localStorage.getItem("cid_id"),
+        userId: localStorage.getItem("userId"),
+        username: localStorage.getItem("username"),
+      },
+      addDialogVisible: false,
+      updateDialogVisible: false,
+      updateForm: {
+        create_time: "",
+        script: "",
+        end: "",
+        error: "",
+      },
+    };
+  },
+
+  // methods 是一些用来更改状态与触发更新的函数
+  // 它们可以在模板中作为事件处理器绑定
+  methods: {
+    async getCIDLogList() {
+      let result = {};
+      try {
+        result = await getCIDLogListService(this.tokenData);
+      } catch (e) {
+        console.log(e);
+      }
+      let data = result.data;
+
+
+      this.tableData = data;
+    },
+    onSubmit() {
+      getDeviceList({ token: token });
+    },
+    handleSizeChange() {
+      alert("每页记录数变化" + val);
+    },
+    handleCurrentChange() {
+      alert("页码发生变化" + val);
+    },
+
+    //设置项目执行构建部署
+    async runCID(index) {
+      var id = this.tableData[index].ID;
+      var run_data = {
+        id: id,
+        ip: this.ip,
+        userId: this.tokenData.userId,
+        token: this.tokenData.token,
+      };
+      try {
+        var d_re = await runCIDService(run_data);
+        if (d_re.code == 0) {
+          alert("操作成功");
+        } else {
+          alert("操作失败");
+        }
+      } catch (e) {
+        console.log(e);
+      }
+    },
+    async deleteCID(index) {
+      var id = this.tableData[index].ID;
+      var delete_data = {
+        id: id,
+        userId: this.tokenData.userId,
+        token: this.tokenData.token,
+      };
+      try {
+        var d_re = await deleteCIDService(delete_data);
+        if (d_re.code == 0) {
+          alert("删除成功");
+          //刷新页面
+          this.getDeviceList();
+        } else {
+          alert("操作失败");
+        }
+      } catch (e) {
+        console.log(e);
+      }
+    },
+    async updateButtonLogCID(index) {
+      this.updateDialogVisible = true;
+      var id = this.tableData[index].ID;
+      this.updateForm.create_time = this.tableData[index].CreatedAt;
+      this.updateForm.script = this.tableData[index].Script;
+      this.updateForm.end = this.tableData[index].Log;
+      this.updateForm.error = this.tableData[index].Error;
+    },
+    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);
+      }
+    },
+    handleMenuSelect(val) {
+      router.push(val);
+    },
+    toVideoList() {
+      router.push("/videoList");
+    },
+    // 修改条纹颜色
+    tableRowClassName({ row, rowIndex }) {
+      if (row.human === 1) {
+        return {
+          background: "#488aff",
+        };
+      } else {
+        return "";
+      }
+    },
+  },
+
+  // 生命周期钩子会在组件生命周期的各个不同阶段被调用
+  // 例如这个函数就会在组件挂载完成后被调用
+  async mounted() {
+    let now = new Date();
+    if (localStorage.getItem("token") === null) {
+      router.push("/login");
+    }
+    // console.log("mounted");
+    await this.getIpClient();
+    this.getCIDLogList();
+  },
+};
+</script>
+
+<template>
+  <div>
+    <el-button
+      type="primary"
+      size="mini"
+      @click.prevent="handleMenuSelect('/videoList')"
+      >视频列表</el-button
+    >
+    <el-button
+      type="primary"
+      size="mini"
+      @click.prevent="handleMenuSelect('/device')"
+      >设备管理</el-button
+    >
+    <el-button
+      type="primary"
+      size="mini"
+      @click.prevent="handleMenuSelect('/User')"
+      >用户</el-button
+    >
+    <el-button
+      type="primary"
+      size="mini"
+      @click.prevent="handleMenuSelect('/cid')"
+      >集成部署</el-button
+    >
+    <el-container style="height: 700px; border: 1px solid #eee">
+      <el-header style="font-size: 40px; background-color: rgb(238, 241, 246)"
+        >集成部署项目日志{{ tokenData.id }}</el-header
+      >
+      <el-container>
+        <el-main>
+          <!-- 表单 -->
+          <el-form :inline="true" :model="tokenData" class="demo-form-inline">
+            <el-form-item>
+              <el-button
+                class="el-button--danger"
+                type="primary"
+                @click="getCIDLogList()"
+                >刷新</el-button
+              >
+            </el-form-item>
+
+            <el-form-item>
+              <el-dialog
+                v-model="updateDialogVisible"
+                title="查看集成项目日志"
+                width="50%"
+                :before-close="handleClose"
+              >
+                <!-- 内容主体区域 -->
+                <el-form
+                  ref="addFormRef"
+                  :model="updateForm"
+                  :rules="updateFormRules"
+                  label-width="70px"
+                >
+                  <el-form-item label="创建时间" prop="create_time">
+                    <el-input
+                      v-model="updateForm.create_time"
+                      autocomplete="on"
+                      style="width: 600px" 
+                    ></el-input>
+                  </el-form-item>
+                  <el-form-item label="脚本内容" prop="script">
+                    <el-input type="textarea" v-model="updateForm.script" style="width: 600px" :autosize="{ minRows: 4, maxRows: 8 }" />
+                  </el-form-item>
+                  <el-form-item label="执行结果" prop="end">
+                    <el-input type="textarea" v-model="updateForm.end" style="width: 600px" :autosize="{ minRows: 4, maxRows: 8 }" />
+                  </el-form-item>
+                  <el-form-item label="错误内容" prop="error">
+                    <el-input type="textarea" v-model="updateForm.error" style="width: 600px" :autosize="{ minRows: 4, maxRows: 8 }" />
+                  </el-form-item>
+                </el-form>
+                <!-- 底部区域 -->
+                <template #footer>
+                  <span class="dialog-footer">
+                    <el-button @click="updateDialogVisible = false"
+                      >关闭</el-button
+                    >
+                  </span>
+                </template>
+              </el-dialog>
+            </el-form-item>
+          </el-form>
+
+          <!-- 表格  :row-style="this.tableRowClassName"-->
+          <el-table :data="tableData" width="100%" border>
+            :row-style="this.tableRowClassName"
+            <el-table-column prop="ID" label="id" width="80"></el-table-column>
+            <el-table-column
+              prop="CreatedAt"
+              label="创建时间"
+              width="100"
+            ></el-table-column>
+            <el-table-column
+              prop="Script"
+              label="执行脚本"
+              width="180"
+            ></el-table-column>
+            <el-table-column
+              prop="Log"
+              label="运行日志"
+              width="180"
+            ></el-table-column>
+            <el-table-column
+              prop="Error"
+              label="错误信息"
+              width="250"
+            ></el-table-column>
+            <el-table-column label="操作" width="350">
+              <template #default="scope">
+                <el-button
+                  type="primary"
+                  size="mini"
+                  @click.prevent="updateButtonLogCID(scope.$index)"
+                  >详情</el-button
+                >
+                <!-- <el-button type="danger" size="mini">删除</el-button> -->
+              </template>
+            </el-table-column>
+          </el-table>
+          <br />
+
+          <!-- 分页条 -->
+          <!-- Pagination 分页 -->
+          <!-- <el-pagination
+            background
+            layout="total,sizes, prev, pager, next, jumper"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :total="1000"
+          ></el-pagination> -->
+        </el-main>
+      </el-container>
+    </el-container>
+  </div>
+</template>
+<style>
+.blueRowbg {
+  background: "#488aff";
+}
+</style>

src/views/DeviceList.vue

@@ -101,6 +101,11 @@ export default {
         console.log(e);
       }
     },
+    playRealVp(index) {
+      var id = this.tableData[index].ID;
+      localStorage.setItem("realvp_device_id", id);
+      router.push("/deviceRealVP");
+    },
     async deleteDevice(index) {
       var id = this.tableData[index].ID;
       var delete_data = {
@@ -243,6 +248,12 @@ export default {
       @click.prevent="handleMenuSelect('/User')"
       >用户</el-button
     >
+    <el-button
+      type="primary"
+      size="mini"
+      @click.prevent="handleMenuSelect('/cid')"
+      >集成部署</el-button
+    >
     <el-container style="height: 700px; border: 1px solid #eee">
       <el-header style="font-size: 40px; background-color: rgb(238, 241, 246)"
         >监控设备列表</el-header
@@ -410,7 +421,7 @@ export default {
               label="设备信息"
               width="150"
             ></el-table-column>
-            <el-table-column label="操作" width="300">
+            <el-table-column label="操作" width="350">
               <template #default="scope">
                 <el-button
                   type="primary"
@@ -430,6 +441,12 @@ export default {
                   @click.prevent="deleteDevice(scope.$index)"
                   >删除</el-button
                 >
+                <el-button
+                  type="primary"
+                  size="mini"
+                  @click.prevent="playRealVp(scope.$index)"
+                  >播放实时</el-button
+                >
                 <!-- <el-button type="danger" size="mini">删除</el-button> -->
               </template>
             </el-table-column>

src/views/DeviceRealVP.vue

@@ -0,0 +1,121 @@
+<template>
+    <el-button
+      type="primary"
+      size="mini"
+      @click.prevent="handleMenuSelect('/device')"
+      >设备</el-button
+    >
+  <div>
+    <!-- 使用:src绑定base64图片 -->
+    <img :src="base64Image" alt="Base64 Image" />
+  </div>
+</template>
+  <script>
+import { ref, onMounted, inject, onUnmounted } from "vue";
+import router from "@/router/index.js";
+export default {
+  data() {
+    return {
+      circleUrl:
+        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
+      device_id: -1,
+      base64Image:"",
+      cnt: 0,
+      intervalId: null,
+      tokenData: {
+        token: localStorage.getItem("token"),
+        ip: localStorage.getItem("ip"),
+        userId: localStorage.getItem("userId"),
+        username: localStorage.getItem("username"),
+        to_user_id: this.to_user_id,
+      },
+      intervalId: ref(null),
+      timerId: null, // 用于存储定时器的ID
+    };
+  },
+  methods: {
+    handleMenuSelect(val) {
+      router.push(val);
+    },
+    connectWebSocket() {
+      // 连接WebSocket
+      let _this = this;
+      if (typeof WebSocket == "undefined") {
+        console.log("浏览器不支持WebSocket");
+      } else {
+        console.log("浏览器支持WebSocket");
+        let socketUrl =
+          "wss://gep.ljsea.xyz/device/get_real_time_image?device_id=" +
+          this.device_id +
+          "&token=" +
+          this.tokenData.token;
+
+        // console.log("socketUrl:", socketUrl);
+        if (this.socket != null) {
+          this.socket.close();
+          this.socket = null;
+        }
+        // 开启一个websocket服务
+        this.socket = new WebSocket(socketUrl);
+        //打开事件
+        this.socket.onopen = function () {
+          this.loading = false;
+          alert("连接成功");
+        };
+        this.socket.onerror = (error) => {
+          console.error("WebSocket Error:", error);
+        };
+        //关闭事件
+        this.socket.onclose = function () {
+          alert("连接已关闭!");
+          router.push("/user");
+        };
+        //  浏览器端收消息，获得从服务端发送过来的文本消息
+        this.socket.onmessage = async function (msg) {
+          //console.log("收到数据====" + msg.data);
+          let data = JSON.parse(msg.data); // 对收到的json数据进行解析， 类似这样的：
+          console.log("收到数据====" + data);
+          // 如果服务器端发送过来的json数据
+          if (data.type == "img") {
+            _this.base64Image = 'data:image/png;base64,'+data.data
+
+//            console.log("收到数据====" + msg.data);
+          } else if (data.type == "offline") {
+            alert("对方已下线");
+            _this.socket.close();
+            router.push("/user");
+          }
+        };
+      }
+    },
+  },
+  // 生命周期钩子,在组件挂载完成后被调用
+  mounted() {
+    this.device_id = localStorage.getItem("realvp_device_id");
+    this.connectWebSocket();
+  },
+  // 生命周期钩子,在组件卸载之前被调用
+  onUnmounted() {
+    this.socket.close();
+  },
+};
+</script>
+    <style>
+.tip {
+  color: white;
+  text-align: center;
+  border-radius: 10px;
+  font-family: sans-serif;
+  padding: 10px;
+  width: auto;
+  display: inline-block !important;
+  display: inline;
+}
+.right {
+  background-color: deepskyblue;
+}
+.left {
+  background-color: forestgreen;
+}
+</style>
+    

src/views/Im.vue

@@ -1,26 +1,12 @@
 <template>
   <div style="padding: 10px; margin-bottom: 50px">
-    <el-button
-      type="primary"
-      size="mini"
-      @click.prevent="handleMenuSelect('/videoList')"
-      >视频列表</el-button
-    >
-    <el-button
-      type="primary"
-      size="mini"
-      @click.prevent="handleMenuSelect('/device')"
-      >设备管理</el-button
-    >
     <el-button
       type="primary"
       size="mini"
       @click.prevent="handleMenuSelect('/User')"
       >用户</el-button
     >
-    <el-row
+    <el-row v-loading="loading" element-loading-text="正在连接....">
-     v-loading="loading"
-     element-loading-text="正在连接....">
       <el-col :span="16">
         <div
           style="
@@ -69,7 +55,7 @@ import router from "@/router/index.js";
 import * as crypto from "crypto";
 import CryptoJS from "crypto-js";
 import { ElLoading } from "element-plus";
-import Cookies from 'js-cookie';
+import Cookies from "js-cookie";
 export default {
   data() {
     return {
@@ -109,21 +95,6 @@ export default {
         if (typeof WebSocket == "undefined") {
           console.log("您的浏览器不支持WebSocket");
         } else {
-          // 组装待发送的消息 json
-          // {"type":"msg","data":"hello","to_user_id":1,"from_user_id":2002,"session":"11917957"}
-          //   let message = {
-          //     type: "msg",
-          //     data: "hello",
-          //     to_user_id: this.to_user_id,
-          //     from_user_id: this.tokenData.userId,
-          //     session: this.session,
-          //   };
-          //   let json=JSON.stringify(message)
-          //   var aesEnc = await this.aesEncrypt(
-          //     this.text,
-          //     this.imKey,
-          //     this.session
-          //   );
           var aesEnc = await this.aesEncrypt(this.text, this.imKey, this.imKey);
           let data =
             '{"type":"msg","data":"' +
@@ -188,6 +159,7 @@ export default {
             data.expire
           );
           this.session = data.im_session;
+          this.loading=false
           //暂停定时器
           this.stopInterval();
           this.connectWebSocket();
@@ -296,11 +268,11 @@ export default {
       // 连接WebSocket
       let _this = this;
       if (typeof WebSocket == "undefined") {
-        console.log("您的浏览器不支持WebSocket");
+        console.log("浏览器不支持WebSocket");
       } else {
-        console.log("您的浏览器支持WebSocket");
+        console.log("浏览器支持WebSocket");
         let socketUrl =
-          "wss://gep.ljsea.top/im/ws?to_user_id=" +
+          "wss://gep.ljsea.xyz/im/ws?to_user_id=" +
           this.to_user_id +
           "&token=" +
           this.tokenData.token;
@@ -314,8 +286,8 @@ export default {
         this.socket = new WebSocket(socketUrl);
         //打开事件
         this.socket.onopen = function () {
-          confirm("连接成功");
+          this.loading=false
-          this.loading = false;
+          alert("连接成功");
         };
         this.socket.onerror = (error) => {
           console.error("WebSocket Error:", error);
@@ -329,16 +301,23 @@ export default {
         this.socket.onmessage = async function (msg) {
           //console.log("收到数据====" + msg.data);
           let data = JSON.parse(msg.data); // 对收到的json数据进行解析， 类似这样的：
-          // 如果服务器端发送过来的json数据 不包含 users 这个key，那么发送过来的就是聊天文本json数据
+          console.log("收到数据====" + data);
-          data.data = await _this.decryptAES(
+          // 如果服务器端发送过来的json数据
-            data.data,
+          if (data.type == "msg") {  // 如果是消息类型，解密消息内容
-            _this.imKey,
+            data.data = await _this.decryptAES(
-            _this.imKey
+              data.data,
-          );
+              _this.imKey,
-          _this.messages.push(data);
+              _this.imKey
-          //console.log("收到数据====" + msg.data);
+            );
-          // 构建消息内容
+            _this.messages.push(data);
-          _this.createContent(_this.to_user_name, null, data.data);
+            //console.log("收到数据====" + msg.data);
+            // 构建消息内容
+            _this.createContent(_this.to_user_name, null, data.data);
+          }else if (data.type == "offline"){
+            alert("对方已下线");
+            _this.socket.close();
+            router.push("/user");
+          }
         };
       }
     },
@@ -350,7 +329,10 @@ export default {
     this.chatUser = this.to_user_name;
     //console.log("to_user_id:", this.to_user_id, this.to_user_name);
     this.startInterval();
-    //this.connectWebSocket();
+
+    //setTimeout(() => this.loading=false, 3000);
+
+       //this.connectWebSocket();
   },
   // 生命周期钩子,在组件卸载之前被调用
   onUnmounted() {

src/views/Login.vue

@@ -78,7 +78,9 @@
         ></el-input>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" auto-insert-space>注册</el-button>
+        <el-button type="primary" @click="onRegister" auto-insert-space
+          >注册</el-button
+        >
       </el-form-item>
       <el-form-item class="flex">
         <el-link @click="isLogin = true"> 返回 </el-link>
@@ -86,13 +88,13 @@
     </el-form>
   </el-row>
   <div>
-    <div>二维码状态: {{qr_status}} </div>
+    <div>二维码状态: {{ qr_status }}</div>
     <canvas ref="qrCodeCanvas"></canvas>
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted, inject,onUnmounted } from "vue";
+import { ref, onMounted, inject, onUnmounted } from "vue";
 import axios from "axios";
 import {
   getQRService,
@@ -108,7 +110,7 @@ const isLogin = ref(true);
 const qrCodeCanvas = ref(null);
 const globalData = inject("globalData");
 
-// 创建一个响应式引用来存储定时器ID  
+// 创建一个响应式引用来存储定时器ID
 const intervalId = ref(null);
 var uuid = "";
 
@@ -164,22 +166,22 @@ onUnmounted(() => {
   stopInterval();
 });
 
-// 开启定时器  
+// 开启定时器
-const startInterval = () => {  
+const startInterval = () => {
-  if (intervalId.value) {  
+  if (intervalId.value) {
-    // 如果定时器已经开启，则不执行任何操作  
+    // 如果定时器已经开启，则不执行任何操作
-    return;  
+    return;
-  }  
+  }
-  intervalId.value = setInterval(getQRStatus, 2000);  
+  intervalId.value = setInterval(getQRStatus, 2000);
 };
 
-// 关闭定时器  
+// 关闭定时器
-const stopInterval = () => {  
+const stopInterval = () => {
-  if (intervalId.value) {  
+  if (intervalId.value) {
-    clearInterval(intervalId.value);  
+    clearInterval(intervalId.value);
-    intervalId.value = null; // 清除引用中的定时器ID  
+    intervalId.value = null; // 清除引用中的定时器ID
-  }  
+  }
-};  
+};
 
 const creatQrCode = async () => {
   console.log("creatQrCode:", uuid);
@@ -206,6 +208,34 @@ const login = async () => {
   router.push("/videoList");
 };
 
+//注册接口调用
+const onRegister = async () => {
+  //校验密码是否一致
+  if (registerData.value.password !== registerData.value.repassword) {
+    alert("两次密码不一致");
+    return;
+  }
+  //校验邮箱是否合法
+  let email = registerData.value.email;
+  let reg = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
+  if (!reg.test(email)) {
+    alert("邮箱格式不正确");
+    return;
+  }
+
+  let result = await registerService(registerData);
+  if (result !== null) {
+    globalData.token = result.data;
+    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 generateQRCode = () => {
   // 假设我们有一个数据字符串要转换为二维码
   const data = uuid;
@@ -240,7 +270,11 @@ const generateQRCode = () => {
 
 const getUUID = async () => {
   try {
-    const response = await getUUIDService({ device: "windows" ,"address": localStorage.getItem("address"),"ip": localStorage.getItem("ip")});
+    const response = await getUUIDService({
+      device: "windows",
+      address: localStorage.getItem("address"),
+      ip: localStorage.getItem("ip"),
+    });
     uuid = response.data.toString();
     let uid = uuid.toString();
     //await creatQrCode(uid);
@@ -255,7 +289,7 @@ const getQRStatus = async () => {
   if (result.code === 0) {
     if (result.data === "0") {
     } else if (result.data === "1") {
-      qr_status.value="等待确认";
+      qr_status.value = "等待确认";
     } else {
       globalData.token = result.data;
       localStorage.setItem("token", result.data.token);

src/views/UserList.vue

@@ -2,12 +2,14 @@
 import axios from "axios";
 import { SearchUserService } from "@/api/user.js";
 import router from "@/router/index.js";
-
+import Cookies from "js-cookie";
 export default {
   data() {
     return {
       ip: "",
       tableData: [],
+      search_id: 2002,
+      keyword: "",
       tokenData: {
         token: localStorage.getItem("token"),
         ip: localStorage.getItem("ip"),
@@ -25,17 +27,15 @@ export default {
     async getUserList() {
       let result = {};
       try {
+        this.tokenData.id = this.search_id;
+        this.tokenData.keyword = this.keyword;
+        Cookies.set("search_id", this.search_id);
+        Cookies.set("keyword", this.keyword);
         result = await SearchUserService(this.tokenData);
       } catch (e) {
         console.log(e);
       }
       let data = result.data;
-
-      //   for(let d in data){
-      //     let res = JSON.parse(d);
-      //     console.log("res=",res);
-      //     this.tableData.push(res);
-      //   }
       this.tableData = data;
     },
     onSubmit() {
@@ -91,6 +91,8 @@ export default {
     if (localStorage.getItem("token") === null) {
       router.push("/login");
     }
+    this.search_id = Cookies.get("search_id")?Cookies.get("search_id"):2002;
+    this.keyword = Cookies.get("keyword")?Cookies.get("keyword"):"";
   },
 };
 </script>
@@ -115,6 +117,12 @@ export default {
       @click.prevent="handleMenuSelect('/User')"
       >用户</el-button
     >
+    <el-button
+      type="primary"
+      size="mini"
+      @click.prevent="handleMenuSelect('/cid')"
+      >集成部署</el-button
+    >
     <el-container style="height: 700px; border: 1px solid #eee">
       <el-header style="font-size: 40px; background-color: rgb(238, 241, 246)"
         >用户搜索列表</el-header
@@ -125,14 +133,14 @@ export default {
             <!-- 搜索与添加区域 -->
             <el-input
               placeholder="请输入ID"
-              v-model="tokenData.id"
+              v-model="search_id"
               clearable
               @clear="getUserList"
             >
             </el-input>
             <el-input
               placeholder="请输入关键字"
-              v-model="tokenData.keyword"
+              v-model="keyword"
               clearable
               @clear="getUserList"
             >

src/views/VideoList.vue

@@ -3,15 +3,9 @@ import axios from "axios";
 import { getVideoListService, quashVideoService } from "@/api/video.js";
 import { delayVideoService } from "@/api/video.js";
 import router from "@/router/index.js";
+import Cookies from "js-cookie";
 
 export default {
-  // data() 返回的属性将会成为响应式的状态
-  // 并且暴露在 `this` 上
-  // setup: function() {
-  //   const globalData = inject("globalData");
-  //   const token = globalData.token;
-  //   return { token };
-  // },
   data() {
     return {
       ip: "",
@@ -38,12 +32,18 @@ export default {
     async getVideoList() {
       let result = {};
       try {
+        // console.log("this entrydate:", this.tokenData.entrydate[0]);
+        // console.log("type time:",typeof this.tokenData.entrydate[0])
+        // if(this.tokenData.entrydate.length > 0) {
+        //   // get the date from the date picker
+        //   Cookies.set("entrydate", [this.tokenData.entrydate[0], this.tokenData.entrydate[1]]);
+        // }
         result = await getVideoListService(this.tokenData);
       } catch (e) {
         console.log(e);
       }
       let data = result.data;
-      let len = data.length;
+      let len = data?data.length:0;
 
       for (let i = 0; i < len; i++) {
         //this.file_sum_size += parseFloat(data[i].file_size);
@@ -93,7 +93,7 @@ export default {
       var id = this.tableData[index].ID;
       var name = this.tableData[index].VideoName;
       var vurl =
-        "https://gep.ljsea.top/video/mp4?filename=" +
+        "https://gep.ljsea.xyz/video/mp4?filename=" +
         name +
         "&id=" +
         id +
@@ -212,6 +212,11 @@ export default {
     }
     // console.log("mounted");
     await this.getIpClient();
+    // if( Cookies.get("entrydate")){
+    //   console.log("entrydate:",Cookies.get("entrydate"));
+    //   this.tokenData.entrydate = [Object(Cookies.get("entrydate")[0]),Object(Cookies.get("entrydate")[1])];
+    // }
+
     this.getVideoList();
   },
 };
@@ -228,6 +233,12 @@ export default {
     <el-button type="primary" size="mini" @click.prevent="handleMenuSelect('/User')"
       >用户</el-button
     >
+    <el-button
+      type="primary"
+      size="mini"
+      @click.prevent="handleMenuSelect('/cid')"
+      >集成部署</el-button
+    >
     <el-container style="height: 700px; border: 1px solid #eee">
       <el-header style="font-size: 40px; background-color: rgb(238, 241, 246)"
         >监控视频列表</el-header