ljydlv
/
video_ca
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
junleea 2024-07-02 15:34:15 +08:00
parent 43915ff365
commit 1dcb5c0265
5 changed files with 122 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
package-lock.json generated
View File

@ -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",

1
package.json
View File

@ -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",

8
src/api/device.js
View File

@ -5,7 +5,7 @@ export const restartDeviceService = (data) => {
for (let key in data) {
params.append(key, data[key])
}
return request.post('/device/restart', params, { "headers":{'token': data.token }});
return request.post('/device/restart', params, { "headers": { 'token': data.token } });
}
export const updateDeviceService = (data) => {
@ -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,12 +21,12 @@ 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) => {
const params = new URLSearchParams();
for(let d in data) {
for (let d in data) {
params.append(d, data[d]);
}
// request.headers["Content-Type"] = "application/json";

91
src/views/DeviceList.vue
View File

@ -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"-->

43
src/views/Im.vue
View File

@ -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>