添加设备添加，聊天窗口添加正在连接加载

2024-07-02 15:34:15 +08:00 · 2024-07-02 15:34:15 +08:00 · 1dcb5c0265
parent 43915ff365
commit 1dcb5c0265
5 changed files with 122 additions and 30 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -12,6 +12,7 @@
        "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",
@ -1463,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",
--- a/package.json
+++ b/package.json
@ -13,6 +13,7 @@
    "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",
--- a/src/api/device.js
+++ b/src/api/device.js
@ -13,7 +13,7 @@ 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 addDeviceService = (data) => {
@ -21,7 +21,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 } });
 }

 export const getDeviceListService = (data) => {
--- a/src/views/DeviceList.vue
+++ b/src/views/DeviceList.vue
@ -3,6 +3,7 @@ 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 router from "@/router/index.js";

 export default {
@ -16,10 +17,21 @@ export default {
        userId: localStorage.getItem("userId"),
        username: localStorage.getItem("username"),
      },
+      addDialogVisible: 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"),
+      },
    };
  },

@ -75,6 +87,20 @@ export default {
        console.log(e);
      }
    },
+    async addDevice() {
+      this.addDialogVisible = true;
+      let result ={}
+      try{
+        result = await addDeviceService(this.addForm);
+        if(result.code == 0){
+          alert("添加成功");
+        } else {
+          alert("添加失败");
+        }
+      }catch (e) {
+        console.log(e)
+      }
+    },
    async restartAllDevice() {
      var restart_data = {
        id: id,
@ -150,7 +176,10 @@ export default {
      @click.prevent="handleMenuSelect('/device')"
      >设备管理</el-button
    >
-    <el-button type="primary" size="mini" @click.prevent="handleMenuSelect('/User')"
+    <el-button
+      type="primary"
+      size="mini"
+      @click.prevent="handleMenuSelect('/User')"
      >用户</el-button
    >
    <el-container style="height: 700px; border: 1px solid #eee">
@ -169,19 +198,63 @@ 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>

          <!-- 表格  :row-style="this.tableRowClassName"-->
--- a/src/views/Im.vue
+++ b/src/views/Im.vue
@ -18,7 +18,9 @@
      @click.prevent="handleMenuSelect('/User')"
      >用户</el-button
    >
-    <el-row>
+    <el-row
+     v-loading="loading"
+     element-loading-text="正在连接....">
      <el-col :span="16">
        <div
          style="
@ -30,7 +32,7 @@
          "
        >
          <div style="text-align: center; line-height: 50px">
-            Web聊天室（{{ chatUser }}）
+            （{{ chatUser }}）
          </div>
          <div
            style="height: 350px; overflow: auto; border-top: 1px solid #ccc"
@ -66,6 +68,8 @@ 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 {
@ -78,6 +82,7 @@ export default {
      text: "",
      messages: [],
      session: "",
+      loading: ref(true),
      imKey: "testimkey",
      socket: null,
      content: "",
@ -119,11 +124,7 @@ 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 +
@ -180,7 +181,6 @@ 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();
-            alert("连接失败，请重试！");
+            confirm("连接失败，请重试！");
            router.push("/user");
          }
        }
@ -285,7 +285,6 @@ export default {

        // 将解密后的 WordArray 转换为 UTF-8 字符串
        const decryptedText = decrypted.toString(CryptoJS.enc.Utf8);
-        console.log("decryptedText: " + decryptedText,secretKey, iv,encryptedData);
        return decryptedText;
      } catch (error) {
        // 捕获并处理异常
@ -306,7 +305,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;
@ -315,19 +314,29 @@ export default {
        this.socket = new WebSocket(socketUrl);
        //打开事件
        this.socket.onopen = function () {
-          alert("websocket已打开");
+          confirm("连接成功");
+          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, _this.imKey, _this.imKey)
+          data.data = await _this.decryptAES(
+            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);
        };
@ -336,7 +345,6 @@ 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;
@ -345,9 +353,10 @@ export default {
    //this.connectWebSocket();
  },
  // 生命周期钩子,在组件卸载之前被调用
-  beforeDestroy() {
+  onUnmounted() {
    this.stopInterval();
    this.socket.close();
+    this.loading = false;
  },
 };
 </script>