package-lock.json

@@ -12,7 +12,6 @@
         "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",
@@ -1464,14 +1463,6 @@
       "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

@@ -13,7 +13,6 @@
     "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/device.js

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

src/views/DeviceList.vue

@@ -3,9 +3,6 @@ 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 {
@@ -19,33 +16,10 @@ 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"),
-      },
     };
   },
 
@@ -101,67 +75,6 @@ export default {
         console.log(e);
       }
     },
-    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,
@@ -237,10 +150,7 @@ export default {
       @click.prevent="handleMenuSelect('/device')"
       >设备管理</el-button
     >
-    <el-button
+    <el-button type="primary" size="mini" @click.prevent="handleMenuSelect('/User')"
-      type="primary"
-      size="mini"
-      @click.prevent="handleMenuSelect('/User')"
       >用户</el-button
     >
     <el-container style="height: 700px; border: 1px solid #eee">
@@ -259,121 +169,19 @@ 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"-->
@@ -418,18 +226,6 @@ 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="danger" size="mini">删除</el-button> -->
               </template>
             </el-table-column>

src/views/Im.vue

@@ -18,9 +18,7 @@
       @click.prevent="handleMenuSelect('/User')"
       >用户</el-button
     >
-    <el-row
+    <el-row>
-     v-loading="loading"
-     element-loading-text="正在连接....">
       <el-col :span="16">
         <div
           style="
@@ -32,7 +30,7 @@
           "
         >
           <div style="text-align: center; line-height: 50px">
-            （{{ chatUser }}）
+            Web聊天室（{{ chatUser }}）
           </div>
           <div
             style="height: 350px; overflow: auto; border-top: 1px solid #ccc"
@@ -68,8 +66,6 @@ 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 {
@@ -82,7 +78,6 @@ export default {
       text: "",
       messages: [],
       session: "",
-      loading: ref(true),
       imKey: "testimkey",
       socket: null,
       content: "",
@@ -124,7 +119,11 @@ export default {
           //     this.imKey,
           //     this.session
           //   );
-          var aesEnc = await this.aesEncrypt(this.text, this.imKey, this.imKey);
+          var aesEnc = await this.aesEncrypt(
+            this.text,
+            this.imKey,
+            this.imKey
+          );
           let data =
             '{"type":"msg","data":"' +
             aesEnc +
@@ -181,6 +180,7 @@ export default {
           // 读取到了新的消息
           this.imKey = data.im_key;
           this.session = data.im_session;
+          console.log("imKey:",this.imKey)
           localStorage.setItem("imkey_" + this.to_user_id, this.imKey);
           //记录过期时间
           localStorage.setItem(
@@ -196,7 +196,7 @@ export default {
           if (this.cnt > 30) {
             //暂停定时器
             this.stopInterval();
-            confirm("连接失败，请重试！");
+            alert("连接失败，请重试！");
             router.push("/user");
           }
         }
@@ -285,6 +285,7 @@ export default {
 
         // 将解密后的 WordArray 转换为 UTF-8 字符串
         const decryptedText = decrypted.toString(CryptoJS.enc.Utf8);
+        console.log("decryptedText: " + decryptedText,secretKey, iv,encryptedData);
         return decryptedText;
       } catch (error) {
         // 捕获并处理异常
@@ -305,7 +306,7 @@ export default {
           "&token=" +
           this.tokenData.token;
 
-        // console.log("socketUrl:", socketUrl);
+        console.log("socketUrl:", socketUrl);
         if (this.socket != null) {
           this.socket.close();
           this.socket = null;
@@ -314,29 +315,19 @@ export default {
         this.socket = new WebSocket(socketUrl);
         //打开事件
         this.socket.onopen = function () {
-          confirm("连接成功");
+          alert("websocket已打开");
-          this.loading = false;
         };
         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);
+          console.log("收到数据====" + msg.data);
           let data = JSON.parse(msg.data); // 对收到的json数据进行解析， 类似这样的：
           // 如果服务器端发送过来的json数据 不包含 users 这个key，那么发送过来的就是聊天文本json数据
-          data.data = await _this.decryptAES(
+          data.data=await _this.decryptAES(data.data, _this.imKey, _this.imKey)
-            data.data,
-            _this.imKey,
-            _this.imKey
-          );
           _this.messages.push(data);
-          //console.log("收到数据====" + msg.data);
+          console.log("收到数据====" + msg.data);
           // 构建消息内容
           _this.createContent(_this.to_user_name, null, data.data);
         };
@@ -345,6 +336,7 @@ export default {
   },
   // 生命周期钩子,在组件挂载完成后被调用
   mounted() {
+    console.log("chatUser:", this.chatUser);
     this.to_user_id = localStorage.getItem("to_user_id");
     this.to_user_name = localStorage.getItem("to_user_name");
     this.chatUser = this.to_user_name;
@@ -353,10 +345,9 @@ export default {
     //this.connectWebSocket();
   },
   // 生命周期钩子,在组件卸载之前被调用
-  onUnmounted() {
+  beforeDestroy() {
     this.stopInterval();
     this.socket.close();
-    this.loading = false;
   },
 };
 </script>

src/views/UserList.vue

@@ -57,10 +57,6 @@ export default {
       //     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");