加密算法异常，使用新的加密和解密算法

package.json

@@ -12,7 +12,7 @@
   "dependencies": {
     "@stomp/stompjs": "^7.0.0",
     "axios": "^1.3.3",
-    "crypto-js": "4.2.0",
+    "crypto-js": "^4.2.0",
     "echarts": "^5.4.1",
     "element-plus": "2.3.1",
     "js-cookie": "^3.0.5",

src/router/index.ts

@@ -1,13 +1,18 @@
-import { createRouter, createWebHistory } from 'vue-router'
-import { useLoginStore } from '@/stores/user-info-store'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import { constantRoute } from './routes'
+import {createRouter, createWebHistory} from 'vue-router'
+import {useLoginStore} from '@/stores/user-info-store'
+import {ElMessage} from 'element-plus'
+import {constantRoute} from './routes'
+import {decrypt, decryption, encrypt, encryption, isBase64} from "@/utils/other";
 
 const router = createRouter({
 	history: createWebHistory(import.meta.env.BASE_URL),
 	routes: constantRoute,
+	stringifyQuery: stringifyQuery,
+	parseQuery: parseQuery,
 })
 
+const kk = "raxipnenttlewe";
+
 router.beforeEach((to, from, next) => {
 	const loginInfo = useLoginStore().getlogin()
 //    const isLogin = loginInfo.isLogin
@@ -68,15 +73,28 @@ router.beforeEach((to, from, next) => {
           }*/
 		return release
 	}
-    if(to.fullPath ==='/login') {
+	if (to.fullPath === '/login') {
 		next()
 		return
 	}
 	/*if (!isLogin) next('/login') // 重定向登录页
-    else */if(!isViewRoute()) {
+  else */
+	if (!isViewRoute()) {
 		ElMessage.error('无权访问！')
 		next(from.fullPath)
-    }else next()
+	} else next()
 });
 
+function stringifyQuery(query: any) {
+	return btoa(encrypt(JSON.stringify(query), kk));
+}
+
+function parseQuery(query: any) {
+	if (isBase64(query)) {
+		return JSON.parse(decrypt(atob(query), kk));
+	} else {
+		return query;
+	}
+}
+
 export default router

src/utils/other.ts

@@ -7,7 +7,7 @@ import * as CryptoJS from 'crypto-js';
 export function encryption(src: string, keyWord: string) {
 	const key = CryptoJS.enc.Utf8.parse(keyWord);
 	// 加密
-    let encrypted = CryptoJS.AES.encrypt(src, key, {
+	const encrypted = CryptoJS.AES.encrypt(src, key, {
 		iv: key,
 		mode: CryptoJS.mode.CBC,
 		padding: CryptoJS.pad.Pkcs7,
@@ -17,13 +17,14 @@ export function encryption(src: string, keyWord: string) {
 
 /**
  *  解密
- * @param {*} params 参数列表
  * @returns 明文
+ * @param src
+ * @param keyWord
  */
 export function decryption(src: string, keyWord: string) {
-    const key = CryptoJS.enc.Utf8.parse(keyWord);
+	const key = keyWord;
 	// 解密逻辑
-    let decryptd = CryptoJS.AES.decrypt(src, key, {
+	const decryptd = CryptoJS.AES.decrypt(src, key, {
 		iv: key,
 		mode: CryptoJS.mode.CBC,
 		padding: CryptoJS.pad.Pkcs7,
@@ -31,3 +32,20 @@ export function decryption(src: string, keyWord: string) {
 
 	return decryptd.toString(CryptoJS.enc.Utf8);
 }
+
+export function encrypt(src: string, key: string) {
+	return CryptoJS.AES.encrypt(src, key).toString()
+}
+
+export function decrypt(src: string, key: string) {
+	return CryptoJS.AES.decrypt(src, key).toString(CryptoJS.enc.Utf8)
+}
+
+export function isBase64(s: string) {
+	if (s == "" || s.trim() == "") return false;
+	try {
+		return window.btoa(window.atob(s)) == s;
+	} catch (e) {
+		return false;
+	}
+}

src/views/remote-manage/part/remote-part.vue

@@ -158,6 +158,7 @@ function initData() {
 function getData() {
 	remoteWsStore.unsubscribeVital(remoteItem.value.patient, remoteItem.value.patientId, remoteItem.value.date);
 	remoteWsStore.subscribeVital(remoteItem.value.patient, remoteItem.value.patientId, remoteItem.value.date, (res: any) => {
+		if (res && res.data) {
 			const data = JSON.parse(res.data);
 			if (data.vitalSignsList && data.vitalSignsList.length > 0) {
 				Object.assign(patientInfo.value, data.vitalSignsList[0]);
@@ -166,6 +167,7 @@ function getData() {
 				setLog(patientInfo.value)
 				emit('addLogAfter')
 			}
+		}
 	})
 }
 
@@ -210,18 +212,21 @@ const breakRemote = () => {
 		font-weight: 600;
 		color: white;
 		background: $main-color;
+
 		.break-btn {
 			position: absolute;
 			top: 4px;
 			right: 20px;
 		}
 	}
+
 	.content {
 		width: 100%;
 		height: calc(100% - 40px);
 		padding: 20px 50px;
 		display: flex;
 		justify-content: space-between;
+
 		.common-box {
 			width: 30%;
 			height: 100%;
@@ -230,6 +235,7 @@ const breakRemote = () => {
 			justify-content: space-evenly;
 			align-items: center;
 		}
+
 		.left-box {
 			@extend .common-box;
 
@@ -237,23 +243,29 @@ const breakRemote = () => {
 				background: $main-color;
 			}
 		}
+
 		.center-box {
 			@extend .common-box;
+
 			img {
 				max-width: 100%;
 				max-height: 100%;
 			}
 		}
+
 		.right-box {
 			@extend .common-box;
+
 			.label {
 				background: $main-color;
 			}
 		}
+
 		.row-item {
 			width: 100%;
 			display: flex;
 			justify-content: space-between;
+
 			.label {
 				flex-shrink: 0;
 				width: 100%;
@@ -265,16 +277,20 @@ const breakRemote = () => {
 				border-radius: 5px;
 			}
 		}
+
 		.info-box, .row-item .value {
 			display: none;
 		}
+
 		&.is-total {
 			.info-box, .row-item .value {
 				display: block;
 			}
+
 			.label {
 				width: calc(50% - 10px);
 			}
+
 			.value {
 				width: 50%;
 				height: 40px;
@@ -287,31 +303,38 @@ const breakRemote = () => {
 				font-size: 22px;
 				line-height: 40px;
 				font-weight: 600;
+
 				.unit {
 					font-size: 16px;
 					font-family: 400;
 				}
 			}
+
 			.right-box .value {
 				color: $main-color;
 				border-color: $main-color;
 			}
+
 			.row-item.alarm {
 				.label {
 					background: red !important;
 				}
+
 				.value {
 					color: red !important;
 					border-color: red !important;
 				}
 			}
+
 			.info-box {
 				width: 100%;
+
 				.row-item {
 					padding: 10px 0;
 					height: 40px;
 					justify-content: flex-start;
 					align-items: center;
+
 					.label {
 						width: 70px;
 						height: 20px;
@@ -322,6 +345,7 @@ const breakRemote = () => {
 						font-weight: 600;
 						text-align: left;
 					}
+
 					.input-value {
 						width: 100%;
 						height: 21px;
@@ -330,6 +354,7 @@ const breakRemote = () => {
 						color: $main-color;
 						border-bottom: 1px solid $border2-color;
 					}
+
 					.tag-value {
 						margin-left: 30px;
 						padding: 0 20px;
@@ -340,9 +365,11 @@ const breakRemote = () => {
 						font-weight: 600;
 						background: $border2-color;
 						border-radius: 8px;
+
 						&.normal {
 							background: $main-color;
 						}
+
 						&.alarm {
 							background: red;
 						}
@@ -350,26 +377,32 @@ const breakRemote = () => {
 				}
 			}
 		}
+
 		&.mini {
 			padding: 20px;
+
 			.left-box {
 				width: 240px;
 			}
+
 			.center-box {
 				width: calc(100% - 250px);
 			}
+
 			&.is-total {
 				.left-box {
 					.info-box {
 						display: block;
 						flex-shrink: 0;
 					}
+
 					.row-item.yellow {
 						.label {
 							background: $main-color;
 						}
+
 						.value {
-                            color:$main-color;
+							color: $main-color;
 							border-color: $main-color;
 						}
 					}

src/views/remote-manage/remote-control.vue

@@ -481,7 +481,7 @@ const viewPatientInfo = () => {
 	}, 0)
 }
 const backRemote = () => {
-	router.back()
+	router.back();
 }
 const playPause = () => {
 	if (liveVideo.value.paused) {

src/views/remote-manage/remote-manage.vue

@@ -46,11 +46,14 @@ onMounted(() => {
 
 function initRemoteTask() {
 	remoteTask.value = remoteWsStore.initRemoteTask()
+	remotePartRef.value.showData(remoteWsStore.currentTaskIndex);
 }
 
 const viewThumbnail = () => {
 	router.push({
-		path: '/remote-manage/remote-thumbnail'
+		path: '/remote-manage/remote-thumbnail',
+		query: {
+		}
 	})
 }
 // 打开任务连接弹窗

src/views/remote-manage/remote-thumbnail.vue

@@ -39,12 +39,11 @@ const remoteTask = ref([] as any);
 const remoteWsStore = useRemoteWsStore();
 
 onMounted(() => {
-	console.log("remoteThumbnail", remoteWsStore.remoteTasks)
 	remoteTask.value = remoteWsStore.remoteTasks;
 })
 
 const openRemote = (params: any) => {
-	router.push('/remote-manage/remote-manage')
+	router.push('/remote-manage/remote-manage');
 }
 const addLogAfter = (index: number) => {
 	messageItemPartRef.value[index].scrollToBottom()