添加设备实时查看功能

package-lock.json

@@ -10,7 +10,9 @@
       "dependencies": {
         "axios": "^1.6.5",
         "cors": "^2.8.5",
+        "crypto-js": "^4.2.0",
         "element-plus": "^2.4.4",
+        "js-cookie": "^3.0.5",
         "js-md5": "^0.8.3",
         "qrcode": "^1.5.3",
         "video.js": "^8.9.0",
@@ -1104,6 +1106,11 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/crypto-js": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.2.0.tgz",
+      "integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q=="
+    },
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
@@ -1457,6 +1464,14 @@
       "resolved": "https://registry.npmjs.org/js-binary-schema-parser/-/js-binary-schema-parser-2.0.3.tgz",
       "integrity": "sha512-xezGJmOb4lk/M1ZZLTR/jaBHQ4gG/lqQnJqdIv4721DMggsa1bDVlHXNeHYogaIEHD9vCRv0fcL4hMA+Coarkg=="
     },
+    "node_modules/js-cookie": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
+      "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/js-md5": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/js-md5/-/js-md5-0.8.3.tgz",

package.json

@@ -11,7 +11,9 @@
   "dependencies": {
     "axios": "^1.6.5",
     "cors": "^2.8.5",
+    "crypto-js": "^4.2.0",
     "element-plus": "^2.4.4",
+    "js-cookie": "^3.0.5",
     "js-md5": "^0.8.3",
     "qrcode": "^1.5.3",
     "video.js": "^8.9.0",

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/device.js

@@ -13,7 +13,15 @@ export const updateDeviceService = (data) => {
     for (let key in data) {
         params.append(key, data[key])
     }
-    return request.post('/device/update', params,{ "headers":{'token': data.token }});
+    return request.post('/device/update_device', params, { "headers": { 'token': data.token } });
+}
+
+export const deleteDeviceService = (data) => {
+    const params = new URLSearchParams();
+    for (let key in data) {
+        params.append(key, data[key])
+    }
+    return request.post('/device/delete_device', params, { "headers": { 'token': data.token } });
 }
 
 export const addDeviceService = (data) => {
@@ -21,7 +29,7 @@ export const addDeviceService = (data) => {
     for (let key in data) {
         params.append(key, data[key])
     }
-    return request.post('/device/add', params,{ "headers":{'token': data.token }});
+    return request.post('/device/add_device', params, { "headers": { 'token': data.token },'Content-Type': 'application/json' });
 }
 
 export const getDeviceListService = (data) => {

src/api/im.js

@@ -0,0 +1,13 @@
+import request from '@/utils/request.js'
+
+export const getImKeyService = (Data) => {
+    const params = new URLSearchParams();
+    for (let key in Data) {
+        params.append(key, Data[key])
+    }
+    return request.post('/im/get_imKey', 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)
 }
 
@@ -38,6 +40,19 @@ export const getUUIDService = (registerData) => {
     return request.post('/user/uuid', params)
 }
 
+export const SearchUserService = (Data) => {
+    const params = new URLSearchParams();
+    for (let key in Data) {
+        params.append(key, Data[key])
+    }
+    return request.post('/user/search', params,{
+        headers: {
+            'token': Data.token, // 将 token 替换为您的令牌值  
+        }
+    })
+}
+
+
 export const getQRService = (qrData) => {
     const params = new URLSearchParams();
     //console.log("qrdata=",qrData);

src/router/index.js

@@ -4,6 +4,11 @@ import LoginVue from "@/views/Login.vue";
 import VideoVue from "@/views/Video.vue";
 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 = [
     {
@@ -26,6 +31,31 @@ const routes = [
         name: 'Device',
         component: DeviceListVue
     },
+    {
+        path: '/deviceRealVP',
+        name: 'DeviceRealVP',
+        component: DeviceRealVP
+    },
+    {
+        path: '/im',
+        name: 'Im',
+        component: ImVue
+    },
+    {
+        path: '/user',
+        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

@@ -3,6 +3,9 @@ import axios from "axios";
 import { inject } from "vue";
 import { getDeviceListService } from "@/api/device.js";
 import { restartDeviceService } from "@/api/device.js";
+import { addDeviceService } from "@/api/device.js";
+import { deleteDeviceService } from "@/api/device.js";
+import { updateDeviceService } from "@/api/device.js";
 import router from "@/router/index.js";
 
 export default {
@@ -16,10 +19,33 @@ export default {
         userId: localStorage.getItem("userId"),
         username: localStorage.getItem("username"),
       },
+      addDialogVisible: false,
+      updateDialogVisible: false,
       searchForm: {
         hour: 0,
         entrydate: [],
       },
+      addForm: {
+        device_name: "",
+        device_ip: "",
+        device_status: "",
+        device_info: "",
+        device_location: "",
+        device_type: "",
+        auth_id: -1,
+        token: localStorage.getItem("token"),
+      },
+      updateForm: {
+        id:0,
+        device_name: "",
+        device_ip: "",
+        device_status: "",
+        device_info: "",
+        device_location: "",
+        device_type: "",
+        auth_id: -1,
+        token: localStorage.getItem("token"),
+      },
     };
   },
 
@@ -75,6 +101,72 @@ 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 = {
+        id: id,
+        userId: this.tokenData.userId,
+        token: this.tokenData.token,
+      };
+      try {
+        var d_re = await deleteDeviceService(delete_data);
+        if (d_re.code == 0) {
+          alert("删除成功");
+          //刷新页面
+          this.getDeviceList();
+        } else {
+          alert("操作失败");
+        }
+      } catch (e) {
+        console.log(e);
+      }
+    },
+    async updateButtonDevice(index) {
+      var id = this.tableData[index].ID;
+      this.updateForm.device_name = this.tableData[index].DeviceName;
+      this.updateForm.device_ip = this.tableData[index].DeviceIP;
+      this.updateForm.device_status = this.tableData[index].DeviceStatus;
+      this.updateForm.device_info = this.tableData[index].DeviceInfo;
+      this.updateForm.device_location = this.tableData[index].DeviceLocation;
+      this.updateForm.device_type = this.tableData[index].DeviceType;
+      this.updateForm.auth_id = this.tableData[index].AuthID;
+      this.updateForm.id = id;
+      this.updateDialogVisible= true;
+    },
+    async addDevice() {
+      this.addDialogVisible = false;
+      let result = {};
+      try {
+        result = await addDeviceService(this.addForm);
+        if (result.code == 0) {
+          alert("添加成功");
+        } else {
+          alert("添加失败");
+        }
+      } catch (e) {
+        console.log(e);
+      }
+    },
+    async updateDevice() {
+      this.updateDialogVisible = false;
+      let result = {};
+      try {
+        result = await updateDeviceService(this.updateForm);
+        if (result.code == 0) {
+          alert("修改成功");
+          this.getDeviceList()
+        } else {
+          alert("修改失败");
+        }
+      } catch (e) {
+        console.log(e);
+      }
+    },
     async restartAllDevice() {
       var restart_data = {
         id: id,
@@ -150,6 +242,18 @@ export default {
       @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
@@ -166,19 +270,121 @@ export default {
                 >查询</el-button
               >
             </el-form-item>
-            <el-form-item>
-              <el-button type="primary" @click="logout()">退出登录</el-button>
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" @click="toVideoList()"
-                >返回监控视频</el-button
-              >
-            </el-form-item>
             <el-form-item>
               <el-button type="primary" @click="restartAllDevice('all')"
                 >重启全部设备</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.device_name"
+                      autocomplete="on"
+                    ></el-input>
+                  </el-form-item>
+                  <el-form-item label="设备IP" prop="device_ip">
+                    <el-input v-model="addForm.device_ip"></el-input>
+                  </el-form-item>
+                  <el-form-item label="设备状态" prop="device_status">
+                    <el-select v-model="addForm.device_status">
+                      <el-option label="在线" value="在线"></el-option>
+                      <el-option label="离线" value="离线"></el-option>
+                    </el-select>
+                  </el-form-item>
+                  <el-form-item label="设备类型" prop="device_type">
+                    <el-input v-model="addForm.device_type"></el-input>
+                  </el-form-item>
+                  <el-form-item label="设备位置" prop="device_location">
+                    <el-input v-model="addForm.device_location"></el-input>
+                  </el-form-item>
+                  <el-form-item label="设备信息" prop="device_info">
+                    <el-input v-model="addForm.device_info"></el-input>
+                  </el-form-item>
+                </el-form>
+                <!-- 底部区域 -->
+                <template #footer>
+                  <span class="dialog-footer">
+                    <el-button @click="addDialogVisible = false"
+                      >取消</el-button
+                    >
+                    <el-button type="primary" @click="addDevice()"
+                      >确定</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="updateFormRef"
+                  :model="updateForm"
+                  :rules="updateFormRules"
+                  label-width="70px"
+                >
+                  <el-form-item label="设备名称" prop="device_name">
+                    <el-input
+                      v-model="updateForm.device_name"
+                      autocomplete="on"
+                    ></el-input>
+                  </el-form-item>
+                  <el-form-item label="设备IP" prop="device_ip">
+                    <el-input v-model="updateForm.device_ip"></el-input>
+                  </el-form-item>
+                  <el-form-item label="设备状态" prop="device_status">
+                    <el-select v-model="updateForm.device_status">
+                      <el-option label="在线" value="在线"></el-option>
+                      <el-option label="离线" value="离线"></el-option>
+                    </el-select>
+                  </el-form-item>
+                  <el-form-item label="设备类型" prop="device_type">
+                    <el-input v-model="updateForm.device_type"></el-input>
+                  </el-form-item>
+                  <el-form-item label="设备位置" prop="device_location">
+                    <el-input v-model="updateForm.device_location"></el-input>
+                  </el-form-item>
+                  <el-form-item label="设备信息" prop="device_info">
+                    <el-input v-model="updateForm.device_info"></el-input>
+                  </el-form-item>
+                </el-form>
+                <!-- 底部区域 -->
+                <template #footer>
+                  <span class="dialog-footer">
+                    <el-button @click="updateDialogVisible = false"
+                      >取消</el-button
+                    >
+                    <el-button type="primary" @click="updateDevice()"
+                      >确定</el-button
+                    >
+                  </span>
+                </template>
+              </el-dialog>
+            </el-form-item>
           </el-form>
 
           <!-- 表格  :row-style="this.tableRowClassName"-->
@@ -215,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"
@@ -223,6 +429,24 @@ export default {
                   @click.prevent="restartDevice(scope.$index)"
                   >重启</el-button
                 >
+                <el-button
+                  type="primary"
+                  size="mini"
+                  @click.prevent="updateButtonDevice(scope.$index)"
+                  >修改</el-button
+                >
+                <el-button
+                  type="primary"
+                  size="mini"
+                  @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

@@ -0,0 +1,363 @@
+<template>
+  <div style="padding: 10px; margin-bottom: 50px">
+    <el-button
+      type="primary"
+      size="mini"
+      @click.prevent="handleMenuSelect('/User')"
+      >用户</el-button
+    >
+    <el-row v-loading="loading" element-loading-text="正在连接....">
+      <el-col :span="16">
+        <div
+          style="
+            width: 800px;
+            margin: 0 auto;
+            background-color: white;
+            border-radius: 5px;
+            box-shadow: 0 0 10px #ccc;
+          "
+        >
+          <div style="text-align: center; line-height: 50px">
+            （{{ chatUser }}）
+          </div>
+          <div
+            style="height: 350px; overflow: auto; border-top: 1px solid #ccc"
+            v-html="content"
+          ></div>
+          <div style="height: 200px">
+            <textarea
+              v-model="text"
+              style="
+                height: 160px;
+                width: 100%;
+                padding: 20px;
+                border: none;
+                border-top: 1px solid #ccc;
+                border-bottom: 1px solid #ccc;
+                outline: none;
+              "
+            ></textarea>
+            <div style="text-align: right; padding-right: 10px">
+              <el-button type="primary" size="mini" @click="send"
+                >发送</el-button
+              >
+            </div>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<script>
+import { ref, onMounted, inject, onUnmounted } from "vue";
+import { getImKeyService } from "@/api/im.js";
+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";
+export default {
+  data() {
+    return {
+      circleUrl:
+        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
+      user: {},
+      isCollapse: false,
+      users: [{ username: "admin" }, { username: "zhang" }],
+      chatUser: "2002",
+      text: "",
+      messages: [],
+      session: "",
+      loading: ref(true),
+      imKey: "testimkey",
+      socket: null,
+      content: "",
+      to_user_id: 0,
+      to_user_name: "",
+      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: {
+    async send() {
+      if (!this.text) {
+        this.$message({ type: "warning", message: "请输入内容" });
+      } else {
+        if (typeof WebSocket == "undefined") {
+          console.log("您的浏览器不支持WebSocket");
+        } else {
+          var aesEnc = await this.aesEncrypt(this.text, this.imKey, this.imKey);
+          let data =
+            '{"type":"msg","data":"' +
+            aesEnc +
+            '","to_user_id":' +
+            this.to_user_id +
+            ',"from_user_id":' +
+            this.tokenData.userId +
+            ',"session":"' +
+            this.session +
+            '"}';
+          this.socket.send(data); // 将组装好的json发送给服务端，由服务端进行转发
+          this.messages.push(JSON.parse(data));
+          // 构建消息内容，本人消息
+          this.createContent(null, this.tokenData.username, this.text);
+          this.text = "";
+        }
+      }
+    },
+    startInterval() {
+      this.timerId = setInterval(() => {
+        this.getIMKey();
+      }, 1000); // 每秒（1000毫秒）执行一次
+    },
+    handleMenuSelect(val) {
+      router.push(val);
+    },
+    stopInterval() {
+      clearInterval(this.timerId);
+    },
+    async getIMKey() {
+      let result = {};
+      try {
+        let req = {
+          to_user_id: this.to_user_id,
+          token: this.tokenData.token,
+        };
+        result = await getImKeyService(req);
+      } catch (e) {
+        console.log(e);
+      }
+      let data = result.data;
+      if (result.code != 0) {
+        this.cnt++;
+        if (this.cnt > 10) {
+          //暂停定时器
+          this.stopInterval();
+          alert("连接失败，请重试！");
+          router.push("/user");
+        }
+        return;
+      }
+      try {
+        if (data.is_read == 1) {
+          // 读取到了新的消息
+          this.imKey = data.im_key;
+          this.session = data.im_session;
+          localStorage.setItem("imkey_" + this.to_user_id, this.imKey);
+          //记录过期时间
+          localStorage.setItem(
+            "imkey_" + this.to_user_id + "_expire",
+            data.expire
+          );
+          this.session = data.im_session;
+          this.loading=false
+          //暂停定时器
+          this.stopInterval();
+          this.connectWebSocket();
+        } else {
+          this.cnt++;
+          if (this.cnt > 30) {
+            //暂停定时器
+            this.stopInterval();
+            confirm("连接失败，请重试！");
+            router.push("/user");
+          }
+        }
+      } catch (e) {
+        console.log(e);
+      }
+    },
+    createContent(remoteUser, nowUser, text) {
+      // 这个方法是用来将 json的聊天消息数据转换成 html的。
+      var html;
+      // 当前用户消息
+      if (nowUser) {
+        // nowUser 表示是否显示当前用户发送的聊天消息，绿色气泡
+        html =
+          '<div class="el-row" style="padding: 5px 0">\n' +
+          '  <div class="el-col el-col-22" style="text-align: right; padding-right: 10px">\n' +
+          '    <div class="tip left">' +
+          text +
+          "</div>\n" +
+          "  </div>\n" +
+          '  <div class="el-col el-col-2">\n' +
+          '  <span class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;">\n' +
+          '    <img src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" style="object-fit: cover;">\n' +
+          "  </span>\n" +
+          "  </div>\n" +
+          "</div>";
+      } else if (remoteUser) {
+        // remoteUser表示远程用户聊天消息，蓝色的气泡
+        html =
+          '<div class="el-row" style="padding: 5px 0">\n' +
+          '  <div class="el-col el-col-2" style="text-align: right">\n' +
+          '  <span class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;">\n' +
+          '    <img src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" style="object-fit: cover;">\n' +
+          "  </span>\n" +
+          "  </div>\n" +
+          '  <div class="el-col el-col-22" style="text-align: left; padding-left: 10px">\n' +
+          '    <div class="tip right">' +
+          text +
+          "</div>\n" +
+          "  </div>\n" +
+          "</div>";
+      }
+      this.content += html;
+    },
+    aesEncrypt(text, password, iv) {
+      // CryptoJS使用WordArray而不是Buffer，所以我们需要将密码和IV转换为WordArray
+      const passwordWordArray = CryptoJS.enc.Utf8.parse(password);
+      const ivWordArray = CryptoJS.enc.Utf8.parse(iv);
+
+      // 使用CryptoJS创建AES加密实例
+      const cipher = CryptoJS.AES.encrypt(
+        CryptoJS.enc.Utf8.parse(text), // 加密的数据
+        passwordWordArray, // 密钥
+        {
+          iv: ivWordArray, // 初始化向量
+          mode: CryptoJS.mode.CBC, // 加密模式
+          padding: CryptoJS.pad.Pkcs7, // 填充方式
+        }
+      );
+
+      // CryptoJS默认返回的是CipherParams对象，我们需要将其转换为Base64字符串
+      const encrypted = cipher.toString();
+
+      return encrypted;
+    },
+    decryptAES(encryptedData, secretKey, iv) {
+      // 确保密钥和偏移量（IV）是WordArray对象
+      const key = CryptoJS.enc.Utf8.parse(secretKey);
+      const ivData = CryptoJS.enc.Utf8.parse(iv);
+
+      // Base64 解码加密数据
+      // 注意：CryptoJS.enc.Base64.parse 实际上是用于将WordArray转换为Base64字符串的，
+      // 对于从Base64字符串解码，应该使用 CryptoJS.enc.Base64.parse(CryptoJS.enc.Base64.stringify(someWordArray))，
+      // 但在这里我们直接使用字符串作为输入，因为encryptedData已经是Base64编码的字符串。
+      try {
+        const decrypted = CryptoJS.AES.decrypt(encryptedData, key, {
+          iv: ivData,
+          mode: CryptoJS.mode.CBC,
+          padding: CryptoJS.pad.Pkcs7,
+        });
+
+        // 检查解密是否成功
+        if (decrypted.sigBytes === 0) {
+          throw new Error("Decryption failed. Invalid data or password.");
+        }
+
+        // 将解密后的 WordArray 转换为 UTF-8 字符串
+        const decryptedText = decrypted.toString(CryptoJS.enc.Utf8);
+        return decryptedText;
+      } catch (error) {
+        // 捕获并处理异常
+        console.error("Decryption error:", error);
+        throw error; // 或者返回一个错误消息或空字符串等
+      }
+    },
+    connectWebSocket() {
+      // 连接WebSocket
+      let _this = this;
+      if (typeof WebSocket == "undefined") {
+        console.log("浏览器不支持WebSocket");
+      } else {
+        console.log("浏览器支持WebSocket");
+        let socketUrl =
+          "wss://gep.ljsea.xyz/im/ws?to_user_id=" +
+          this.to_user_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 == "msg") {  // 如果是消息类型，解密消息内容
+            data.data = await _this.decryptAES(
+              data.data,
+              _this.imKey,
+              _this.imKey
+            );
+            _this.messages.push(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");
+          }
+        };
+      }
+    },
+  },
+  // 生命周期钩子,在组件挂载完成后被调用
+  mounted() {
+    this.to_user_id = localStorage.getItem("to_user_id");
+    this.to_user_name = localStorage.getItem("to_user_name");
+    this.chatUser = this.to_user_name;
+    //console.log("to_user_id:", this.to_user_id, this.to_user_name);
+    this.startInterval();
+
+    //setTimeout(() => this.loading=false, 3000);
+
+       //this.connectWebSocket();
+  },
+  // 生命周期钩子,在组件卸载之前被调用
+  onUnmounted() {
+    this.stopInterval();
+    this.socket.close();
+    this.loading = false;
+  },
+};
+</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/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>
@@ -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);

src/views/UserList.vue

@@ -0,0 +1,222 @@
+<script>
+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"),
+        userId: localStorage.getItem("userId"),
+        username: localStorage.getItem("username"),
+        id: 2002,
+        keyword: "",
+      },
+    };
+  },
+
+  // methods 是一些用来更改状态与触发更新的函数
+  // 它们可以在模板中作为事件处理器绑定
+  methods: {
+    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;
+      this.tableData = data;
+    },
+    onSubmit() {
+      getUserList({ token: token });
+    },
+    handleSizeChange() {
+      alert("每页记录数变化" + val);
+    },
+    handleCurrentChange() {
+      alert("页码发生变化" + val);
+    },
+
+    //设置设备重启
+    async startChat(index) {
+      var id = this.tableData[index].ID;
+      var name = this.tableData[index].Name;
+      //   var user_data = {
+      //     to_user_id: id,
+      //     to_user_name: this.tableData[index].Name,
+      //   };
+      //转到聊天页面
+      if(id == localStorage.getItem("userId")){
+        alert("不能和自己聊天");
+        return;
+      }
+      localStorage.setItem("to_user_id", id);
+      localStorage.setItem("to_user_name", name);
+      router.push("/im");
+    },
+
+    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");
+    }
+    this.search_id = Cookies.get("search_id")?Cookies.get("search_id"):2002;
+    this.keyword = Cookies.get("keyword")?Cookies.get("keyword"):"";
+  },
+};
+</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-col :span="8">
+            <!-- 搜索与添加区域 -->
+            <el-input
+              placeholder="请输入ID"
+              v-model="search_id"
+              clearable
+              @clear="getUserList"
+            >
+            </el-input>
+            <el-input
+              placeholder="请输入关键字"
+              v-model="keyword"
+              clearable
+              @clear="getUserList"
+            >
+            </el-input>
+            <template #append>
+              <el-button @click="getUserList"
+                ><el-icon><search /></el-icon
+              ></el-button>
+            </template>
+          </el-col>
+          <!-- 表单 -->
+          <el-form :inline="true" :model="tokenData" class="demo-form-inline">
+            <el-form-item>
+              <el-button
+                class="el-button--danger"
+                type="primary"
+                @click="getUserList()"
+                >查询</el-button
+              >
+            </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="Email"
+              label="用户邮箱"
+              width="180"
+            ></el-table-column>
+            <el-table-column
+              prop="Age"
+              label="用户Age"
+              width="120"
+            ></el-table-column>
+            <el-table-column
+              prop="Gender"
+              label="用户性别"
+              width="80"
+            ></el-table-column>
+            <el-table-column label="操作" width="300">
+              <template #default="scope">
+                <el-button
+                  type="primary"
+                  size="mini"
+                  @click.prevent="startChat(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/VideoList.vue

@@ -1,18 +1,11 @@
 <script>
 import axios from "axios";
-import { inject } from "vue";
 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: "",
@@ -39,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);
@@ -94,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 +
@@ -213,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();
   },
 };
@@ -226,6 +230,15 @@ export default {
     <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