修改，添加用户，内嵌网页

auto-imports.d.ts

@@ -5,5 +5,5 @@
 // Generated by unplugin-auto-import
 export {}
 declare global {
-
+  const ElMessage: typeof import('element-plus/es')['ElMessage']
 }

src/api/api.ts

@@ -5,6 +5,7 @@ import { getLocalStorage } from "@/utils";
 
 import UtilVar from "../config/UtilVar";
 import { ElMessage } from "element-plus";
+import router from "@/router";
 let baseUrl = UtilVar.baseUrl;
 const CancelToken = axios.CancelToken;
 
@@ -55,7 +56,8 @@ axios.interceptors.response.use(
      * @code 登录过期 token验证失败 根据后端调
      */
     if (response.data.code == UtilVar.code) {
-      // router.push("/login")
+      ElMessage.error("登录过期，请重新登录");
+      router.push("/login");
       return Promise.resolve(response);
     }
     return Promise.resolve(response);

src/api/modules/system.ts

@@ -0,0 +1,15 @@
+import { GET, POST, PUT } from "../api";
+
+// 定义登录URLs
+const systemUrl = {
+    'system': '/setting', 
+};
+
+
+export const GetSystem = (param: any = {}) => {
+    return GET(systemUrl.system,param);
+};
+export const UpDateSystem = (param: any = {}) => {
+    return PUT(systemUrl.system,param);
+};
+export { systemUrl };

src/api/modules/user.ts

@@ -1,15 +1,16 @@
 import {GET,POST,FILE,FILEPOST,PUT,GETNOBASE, DELETE} from "../api";
 const userUrl=  {
-    'user':'/user',//左上
-    'userlist':'/userlist',//左中
-    'updateuser':'/user',//左中
-    'deleteuser':'/user',//左中
+    'user':'/user',
+    'userlist':'/userlist',
+    'updateuser':'/user',
+    'deleteuser':'/user',
+    'Getuser':'/getuser',
 }
 
 export  {userUrl}
 
 /**添加用户 */
-export const User=(param:any={})=>{
+export const AddUser=(param:any={})=>{
     return POST(userUrl.user,param)
 }
 
@@ -25,3 +26,7 @@ export const UpdateUser=(param:any={})=>{
 export const DeleteUser=(param:any={})=>{
     return DELETE(userUrl.deleteuser,param)
 }
+// 获取用户
+export const GetUserByID=(param:any={})=>{
+    return GET(userUrl.Getuser,param)
+}

src/assets/css/main.scss

@@ -33,7 +33,6 @@ body {
   height: 80vh;
 }
 
-
 #iot3d>div,
 #iot3d>canvas {
   position: absolute;

src/config/UtilVar.ts

@@ -7,7 +7,7 @@ interface UtilVarType {
 
 const UtilVar:UtilVarType = {
     baseUrl:"",
-    code:401, //登陆过期
+    code:1002 | 1001, //登陆过期
     noContentCode:204, //请求成功但没有内容
     ENC:false,
 
@@ -19,7 +19,7 @@ const runtimeType:any = {
     },
     //开发环境
     development: () => {
-        UtilVar.baseUrl= `http://localhost:8080/api`
+        UtilVar.baseUrl= "http://localhost:8080/api"
 
     },
     hash:()=>{

src/router/index.ts

@@ -50,6 +50,18 @@ const routes: Array<RouteRecordRaw> = [
         meta: { requiresAuth: true },
       },
       {
+        path: '/system',
+        name: 'system',
+        component: () => import('@/views/index/system.vue'),
+        meta: { requiresAuth: true },
+      },
+      {
+        path: '/archives',
+        name: 'archives',
+        component: () => import('@/views/index/archives.vue'),
+        meta: { requiresAuth: true },
+      },
+      {
         path: '/login',
         name: 'login',
         component: Login,

src/utils/External_interfaces.ts

@@ -0,0 +1,23 @@
+
+import axios from 'axios';
+import { ElMessage } from "element-plus";
+
+const statistics = () => {
+    const appId = '1686846386279535435';
+    const secret = 'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDDvv8hgUuIzp7WdTS5zHQPt9bOytMNRY+s1MBCbLp6C2sz9kg+agQ/cMqztYgwjlYqETyUTiu/uuF0y71VHtfazip6eYI++EHqBCNgmgGBkdyV5EyiSBC+RsJ0tX+oCFFtIIlYzIwgserkZyVKrSF61OieQj+C2rqbJBZq5svXlwIDAQAB';
+    
+    return axios.post('http://45.251.93.106:8082/api/statistics', { appId, secret })
+      .then((response) => {
+        if (response.data.code === 200) {
+            // console.log("测试：",response.data.result);
+            return response.data.result;
+        } else {
+          ElMessage.error(response.data.message);
+        }
+      })
+      .catch((error) => {
+        ElMessage.error(error);
+      });
+      
+};
+export default statistics;

src/utils/random.js

@@ -0,0 +1,9 @@
+/**
+ * 生成随机len位数字
+ */
+export const randomLenNum = (len, date) => {
+    let random = '';
+    random = Math.ceil(Math.random() * 100000000000000).toString().substr(0, len ? len : 4);
+    if (date) random = random + Date.now();
+    return random;
+  };

src/views/LoginView.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="login-container">
     <el-form @submit.prevent="handleSubmit" :model="form" status-icon :rules="rules" ref="loginFormRef">
-      <!-- <h2>登录</h2> -->
       <ItemWrap class="contetn_lr-item" title="登录">
         <el-form-item prop="username">
           <el-input v-model="form.account" placeholder="请输入用户名"></el-input>
@@ -9,7 +8,6 @@
         <el-form-item prop="password">
           <el-input v-model="form.password" type="password" placeholder="请输入密码"></el-input>
         </el-form-item>
-
         <el-form-item prop="captcha">
           <div class="captcha-container">
             <canvas ref="captchaCanvas" width="150" height="40"></canvas>
@@ -17,13 +15,11 @@
           </div>
           <el-input v-model="form.captchaAnswer" type="text" placeholder="请输入验证码"></el-input>
         </el-form-item>
-
         <el-form-item>
           <el-button type="primary" :class="{ 'grayed-out': !isLoginFormValid }" :disabled="!isLoginFormValid"
             native-type="submit">登录</el-button>
         </el-form-item>
       </ItemWrap>
-
     </el-form>
   </div>
 </template>

src/views/header.vue

@@ -3,6 +3,8 @@ import { reactive,ref } from "vue";
 import dayjs from 'dayjs';
 import type {DateDataType} from "./index.d"
 import {useSettingStore} from "@/stores/index"
+import { GetSystem } from '@/api/modules/system'
+import { ElMessage } from "element-plus";
 
 const dateData = reactive<DateDataType>({
   dateDay: "",
@@ -11,7 +13,6 @@ const dateData = reactive<DateDataType>({
   timing:null
 });
 let titletext = ref("")
-titletext.value = "智慧档案管理一体化可视平台"
 
 const { setSettingShow} =useSettingStore()
 const weekday= ["周日", "周一", "周二", "周三", "周四", "周五", "周六"]
@@ -22,6 +23,19 @@ const timeFn = () => {
   }, 1000);
 };
 timeFn()
+
+function getSystem() {
+    GetSystem().then(res => {
+        console.log(res)
+    if (res.code === 200) {
+        ElMessage.success(res.message)
+        titletext.value = res.data.title
+    } else {
+        ElMessage.error(res.message)
+    }
+    })
+}
+getSystem()
 </script>
 
 <template>

src/views/index/adduser.vue

@@ -1,82 +1,42 @@
 <template>
     <ItemWrap class="adduser-items" title="添加用户">
-        <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" status-icon :rules="rules"
+        <el-form ref="ruleFormRef" style="max-width: 600px" :model="tableData" status-icon
             label-width="auto" class="demo-ruleForm">
-            <el-form-item label="用户名" prop="pass">
-                <el-input v-model="ruleForm.pass" type="text" autocomplete="off" />
+            <el-form-item label="用户名" prop="account">
+                <el-input v-model="tableData.account" type="text" autocomplete="off" />
             </el-form-item>
-            <el-form-item label="密码" prop="checkPass">
-                <el-input v-model="ruleForm.checkPass" type="password" autocomplete="off" />
+            <el-form-item label="密码" prop="password">
+                <el-input v-model="tableData.password" type="text" autocomplete="off" />
             </el-form-item>
-            <el-form-item label="菜单权限" prop="age">
-                <el-input v-model.number="ruleForm.age" />
+            <el-form-item label="菜单权限" prop="menu">
+                <el-input v-model.number="tableData.menu" disabled />
             </el-form-item>
             <el-form-item class="button-group">
-                <el-button type="primary" @click="submitForm(ruleFormRef)" class="btn">
+                <el-button type="primary" @click="AddUsers" class="btn">
                     提交
                 </el-button>
                 <el-button @click="resetForm(ruleFormRef)" class="btn">重置</el-button>
             </el-form-item>
         </el-form>
     </ItemWrap>
-    <!-- <el-button @click="$emit('close')">关闭</el-button> -->
 </template>
 
 <script lang="ts" setup>
-import { reactive, ref } from 'vue'
-import type { FormInstance, FormRules } from 'element-plus'
-
+import { reactive, ref,onMounted,defineComponent,defineProps,watch  } from 'vue'
+import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
+import { Userlist, UpdateUser, DeleteUser,GetUserByID,AddUser} from "@/api/modules/user";
+const props =defineProps({
+    editUserId:Number,
+});
 const ruleFormRef = ref<FormInstance>()
-
-const checkAge = (rule: any, value: any, callback: any) => {
-    if (!value) {
-        return callback(new Error('请检查年龄'))
-    }
-    setTimeout(() => {
-        if (!Number.isInteger(value)) {
-            callback(new Error('Please input digits'))
-        } else {
-            if (value < 18) {
-                callback(new Error('Age must be greater than 18'))
-            } else {
-                callback()
-            }
-        }
-    }, 1000)
-}
-
-const validatePass = (rule: any, value: any, callback: any) => {
-    if (value === '') {
-        callback(new Error('请检查密码'))
-    } else {
-        if (ruleForm.checkPass !== '') {
-            if (!ruleFormRef.value) return
-            ruleFormRef.value.validateField('checkPass')
-        }
-        callback()
-    }
-}
-const validatePass2 = (rule: any, value: any, callback: any) => {
-    if (value === '') {
-        callback(new Error('Please input the password again'))
-    } else if (value !== ruleForm.pass) {
-        callback(new Error("Two inputs don't match!"))
-    } else {
-        callback()
-    }
-}
-
-const ruleForm = reactive({
-    pass: '',
-    checkPass: '',
-    age: '',
-})
-
-const rules = reactive<FormRules<typeof ruleForm>>({
-    pass: [{ validator: validatePass, trigger: 'blur' }],
-    checkPass: [{ validator: validatePass2, trigger: 'blur' }],
-    age: [{ validator: checkAge, trigger: 'blur' }],
-})
+let tableData = ref({
+  id: "",
+  CreatedAt: "",
+  account: "",
+  password: "",
+  state: "",
+  menu: [],
+});
 
 const submitForm = (formEl: FormInstance | undefined) => {
     if (!formEl) return
@@ -88,11 +48,26 @@ const submitForm = (formEl: FormInstance | undefined) => {
         }
     })
 }
-
+function AddUsers(){
+    AddUser({
+        account:tableData.value.account,
+        password:tableData.value.password,
+    }).then((res)=>{
+        if (res.code == 200){
+            ElMessage.success("添加成功")
+            tableData.value.account = ""
+            tableData.value.password = ""
+        }else{
+            ElMessage.error("添加失败")
+        }
+    })
+}
+// 重置表单
 const resetForm = (formEl: FormInstance | undefined) => {
     if (!formEl) return
     formEl.resetFields()
 }
+
 </script>
 <style scoped>
 ::v-deep .el-form * {

src/views/index/archives.vue

@@ -0,0 +1,33 @@
+<template>
+      <n-button strong secondary type="info" size="large" @click="$router.push('/')" class="back-home-btn">返回首页</n-button>
+    <ItemWrap class="adduser-items" title="档案管理">
+        <iframe src="http://45.251.93.106:8082/index.html" id="mobsf"></iframe>
+    </ItemWrap>
+</template>
+ 
+ 
+<script setup lang="ts">
+import ItemWrap from '@/components/item-wrap/item-wrap.vue';
+
+   
+</script>
+<style scoped>
+    .adduser-items {
+        height: 1000px; 
+        font-size: 25px;
+    }
+    #mobsf {
+        width: 100%; 
+        height: 99%; 
+        position: relative; 
+        margin: 0; 
+        top: 0;
+        left: 0;
+    }
+    .back-home-btn {
+        position: absolute;
+        margin-top: 30px;
+        top: 10px;
+        left: 10px;
+}
+</style>

src/views/index/edituser.vue

@@ -1,15 +1,15 @@
 <template>
     <ItemWrap class="adduser-items" title="编辑用户">
-        <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" status-icon
+        <el-form ref="ruleFormRef" style="max-width: 600px" :model="tableData" status-icon
             label-width="auto" class="demo-ruleForm">
-            <el-form-item label="用户名" prop="pass">
-                <el-input v-model="ruleForm.pass" type="text" autocomplete="off" />
+            <el-form-item label="用户名" prop="account">
+                <el-input v-model="tableData.account" type="text" autocomplete="off" />
             </el-form-item>
-            <el-form-item label="密码" prop="checkPass">
-                <el-input v-model="ruleForm.checkPass" type="text" autocomplete="off" />
+            <el-form-item label="密码" prop="password">
+                <el-input v-model="tableData.password" type="text" autocomplete="off" />
             </el-form-item>
-            <el-form-item label="菜单权限" prop="age">
-                <el-input v-model.number="ruleForm.age" />
+            <el-form-item label="菜单权限" prop="state">
+                <el-input v-model.number="tableData.state" disabled />
             </el-form-item>
             <el-form-item class="button-group">
                 <el-button type="primary" @click="submitForm(ruleFormRef)" class="btn">
@@ -22,16 +22,20 @@
 </template>
 
 <script lang="ts" setup>
-import { reactive, ref } from 'vue'
+import { ref,defineProps,watch  } from 'vue'
 import type { FormInstance, FormRules } from 'element-plus'
-
+import { Userlist, UpdateUser, DeleteUser,GetUserByID } from "@/api/modules/user";
+const props =defineProps({
+    editUserId:Number,
+});
 const ruleFormRef = ref<FormInstance>()
-const ruleForm = reactive({
-    pass: '',
-    checkPass: '',
-    age: '',
-})
-
+let tableData = ref({
+  id: "",
+  CreatedAt: "",
+  account: "",
+  password: "",
+  state: "",
+});
 
 const submitForm = (formEl: FormInstance | undefined) => {
     if (!formEl) return
@@ -43,11 +47,18 @@ const submitForm = (formEl: FormInstance | undefined) => {
         }
     })
 }
-
+// 重置表单
 const resetForm = (formEl: FormInstance | undefined) => {
     if (!formEl) return
     formEl.resetFields()
 }
+// 获取用户信息实时监听数据变换
+watch(() => props.editUserId, (newVal) => {
+    GetUserByID({ id: newVal }).then((res) => {
+        console.log(res.data)
+        tableData.value = res.data;
+    });
+});
 </script>
 <style scoped>
 ::v-deep .el-form * {

src/views/index/h5play.vue

@@ -0,0 +1,130 @@
+<template>
+    <div class="player-container">
+      <div v-for="(item, index) in layout" :key="index" class="screen" :class="{ 'active': item.active }">
+        <div ref="screenRefs" :id="'player' + index" class="video-screen"></div>
+      </div>
+  
+      <button @click="toggleLayout">Toggle Layout</button>
+    </div>
+  </template>
+  
+  <script setup>
+  import { ref, onMounted, reactive, computed } from 'vue';
+  
+  const screenRefs = ref([]);
+  
+  // 创建播放器实例
+  const players = ref([]);
+  
+  // 布局管理
+  const layout = reactive([
+    { active: true, index: 0 },
+    { active: true, index: 1 },
+    { active: true, index: 2 },
+    { active: true, index: 3 }
+  ]);
+  
+  // 切换布局
+  function toggleLayout() {
+    switch (layout.length) {
+      case 1:
+        layout.push({ active: true, index: 1 });
+        layout.push({ active: true, index: 2 });
+        layout.push({ active: true, index: 3 });
+        break;
+      case 4:
+        layout.splice(1, 3); // 移除多余的元素
+        break;
+      default:
+        layout.push({ active: true, index: layout.length });
+        break;
+    }
+  
+    // 重新创建播放器实例
+    createPlayers();
+  }
+  
+  // 创建播放器实例
+  function createPlayers() {
+    players.value.forEach(p => p.JS_Stop()); // 停止所有播放器
+    players.value = [];
+  
+    layout.forEach((item, index) => {
+      const player = new JSPlugin({
+        szBasePath: './dist/',
+        windowEventClick: function (index) {
+          console.log('Clicked on window index:', index);
+        },
+        windowEventOver: function (index) {
+          console.log('Mouse over on window index:', index);
+        },
+        windowEventOut: function (index) {
+          console.log('Mouse out on window index:', index);
+        },
+        windowEventUp: function (index) {
+          console.log('Mouse up on window index:', index);
+        },
+        windowFullCreenChange: function (bFull) {
+          console.log('Fullscreen change to:', bFull);
+        },
+        firstFrameDisplay: function (index, iWidth, iHeight) {
+          console.log('First frame displayed on window index:', index);
+        },
+        performanceLack: function () {
+          console.log('Performance lack detected');
+        },
+        StreamEnd: function (index) {
+          console.log('Stream end for window index:', index);
+        },
+        InterruptStream: function (iWndIndex, interruptTime) {
+          console.log('Interrupt stream for window index:', iWndIndex, 'with time:', interruptTime);
+        },
+        talkPluginErrorHandler: (iErrorCode, oError) => {
+          console.log('Talk plugin error:', iErrorCode);
+        }
+      });
+  
+      player.JS_SetWindowControl(screenRefs.value[index]);
+      players.value.push(player);
+  
+      // 播放视频
+      const url = 'your_stream_url_here';
+      const startTime = '2023-05-16T00:00:00Z'; // 如果是回放则需要填写
+      const endTime = '2023-05-16T01:00:00Z'; // 如果是回放则需要填写
+      player.JS_Play(url, {}, item.index, startTime, endTime)
+        .then(() => console.log('JS_Play success for window index:', item.index))
+        .catch(err => console.error('JS_Play failed for window index:', item.index, err));
+    });
+  }
+  
+  onMounted(() => {
+    createPlayers(); // 初始化播放器
+  });
+  
+  </script>
+  
+  <style scoped>
+  .player-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
+  
+  .screen {
+    width: calc(100% / 2);
+    height: calc(100% / 2);
+    border: 1px solid #ccc;
+    margin-bottom: 10px;
+    margin-right: 10px;
+  }
+  
+  .video-screen {
+    width: 100%;
+    height: 100%;
+  }
+  
+  .active {
+    display: block;
+  }
+  
+  </style>

src/views/index/index.vue

@@ -21,6 +21,7 @@
     <div class="contetn_centerbottom">
       <ItemWrap class="contetn_center-bottom contetn_lr-item" title="视频监控">
         <!-- <CenterBottom /> -->
+         <Monitor></Monitor>
       </ItemWrap>
     </div>
     <div class="contetn_bottom" id="contetn_bottom">
@@ -42,7 +43,7 @@
         消息中心
       </n-button>
       <!-- <n-button strong secondary type="info" @click="$router.push('/')" class="tech-button">数据中心</n-button> -->
-      <n-button strong secondary type="info" class="tech-button" tag="a" href="http://45.251.93.106:8082/index.html">档案管理 
+      <n-button strong secondary type="info" class="tech-button" tag="a" @click="$router.push('/archives')">档案管理 
         <template #icon>
           <n-icon size="20">
             <svg t="1721376312457" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
@@ -119,7 +120,7 @@
             </svg></n-icon>
         </template>
       </n-button>
-      <n-button strong secondary type="info" class="tech-button">系统设置
+      <n-button strong secondary type="info" class="tech-button" @click="$router.push('/system')">系统设置
         <template #icon>
           <n-icon size="20">
             <svg t="1721376596928" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
@@ -150,23 +151,17 @@ import ItemWrap from "@/components/item-wrap";
 import LeftTop from "./left-top.vue";
 import LeftCenter from "./left-center.vue";
 import LeftBottom from "./left-bottom.vue";
-import CenterMap from "./center-map.vue";
-import CenterBottom from "./center-bottom.vue";
 import RightTop from "./right-top.vue";
 import RightCenter from "./right-center.vue";
 import RightBottom from "./right-bottom.vue";
-import User from "./user.vue";
 import { NIcon } from "naive-ui";
 import Iot3d from "./iot3d.vue";
-import Monitoring from "./monitoring.vue";
 import { onBeforeRouteLeave } from 'vue-router';
-import loading from 'naive-ui/es/_internal/loading';
-import Loading from 'vue-loading-overlay'
 import WebH5 from './webH5.vue';
+import Monitor from './monitor.vue';
 const shouldShowComponent = ref(true);
 
 
-
 onBeforeRouteLeave((to, from, next) => {
   shouldShowComponent.value = false;
   next();

src/views/index/iot3d.vue

@@ -5,23 +5,13 @@
 <script setup>
 import { ref,onMounted } from 'vue';
 import { IOT3D } from 'https://vdata.baozhida.cn/3d1v/static/js/version/IOT3Dv2.2.js';
+let htmltemplate = ref(null);
+
 onMounted(()=>{
   const iot3d = new IOT3D('iot3d', false);
   iot3d.loadProject('W2N495VQH1UPGIFJKSZEMOY0C637AT8R', true, () => {
     iot3d.GetRenderer().setClearColor(0x000000, 0);
-	// var route = [
-	// 		[0,0,0], // 第一个视角
-	// 		[0,0,0], // 正对
-	// 		[0,0,0], // 聚焦
-	// 	]
-	// 	// ------------- 路径移动
-	// 	iot3d.startMove(route,2)
-
-	// 	// 中心的
-	// 	iot3d.startFocusMotion([0, -2.815, 0],route,30);
-	iot3d.setSize(window.innerWidth, window.innerHeight)
-	
-	console.log("iot3d:",iot3d.GetModelByUuid("c4a9f2e1-b1b6-4267-b5f2-4dddd4ed6d50"))
+	iot3d.setSize(window.innerWidth, window.innerHeight)	
   });
 
 	var Model_onDblclick_Model = null
@@ -37,38 +27,68 @@ onMounted(()=>{
 		console.log("Mouse_onClick:",Model)
 		if(Model == null) {
 			console.log("您点击了空处！")
+			
 		} else {
 			console.log("您点击了模型！")
+			console.log("Model:",Model.name)
+			
+			
 		}
 	})
-	let lenght = 0
-	// 鼠标在 模型内按下
-	iot3d.Model_onMousedown(function (Model,event) {
-		console.log("Mouse_onMousedown:",Model,event)
-		var btnNum = event.button;
-		if(btnNum == 2) {
-			console.log("您点击了鼠标右键！")
-			if(Model == null) if(Model_onDblclick_Model != null) iot3d.Model_Selected_Del(Model_onDblclick_Model)  // 删除 选中
-		} else if(btnNum == 0) {
-			console.log("您点击了鼠标左键！")
-			console.log(Model)
-			if (Model.parent.name==='总密集架'){
-				console.log("您点击了密集架！")
-				console.log("Model:",Model.parent.children.length)
-				
-			}
-			// for (let i = 0; i < Model.parent.children.length; i++) {
-			// 	const element = Model.parent.children[i];
-			// 	if(element.type == "Object3D") {
-			// 		lenght++
-			// 	}
-			// }
-			// console.log("lenght:",lenght)
-		} else if(btnNum == 1) {
-			console.log("您点击了鼠标中键！");
+// 定义全局变量来记录当前选中的模型
+let selectedModel = null;
 
-		}
+// 提取公共方法
+function handleModelClick(modelName, uuid) {
+  console.log(`您点击了 ${modelName}`);
+  const htmlContent = `<div style='border: 2px solid rgb(0, 170, 255); width: 100px; height: 100px;'>
+                         <p style='text-align: center; font-size: 20px;margin-top: -5px; color: wheat;'>${modelName}</p>
+                       </div>`;
+  htmltemplate.value = htmlContent;
+  iot3d.GetModelByUuid(uuid).Up_Html(htmltemplate.value);
+  iot3d.Render();
+  // 更新当前选中的模型
+  selectedModel = { name: modelName, uuid: uuid };
+}
 
-	})
+// 使用对象映射
+const modelMapping = {
+  '灭火柜1': '9d1be1e6-4a2a-417c-8e6e-51bd37946ddd',
+  '灭火柜2': '7c52c53c-4cd4-443d-a73b-42b51b6b3b05',
+  '恒湿净化一体机组': '3c9e6dbe-aa3c-4d2c-991f-e27e7eeed96d',
+  '空调组': '3c070789-0372-42cd-a2f6-cb5511f7f810',
+  '监控1': '0ddcabf0-196e-4d95-8e02-ed22be399268',
+  '人脸识别': 'f7497088-adaf-4014-8327-203e5aa25507',
+  '冰柜': '26cbf923-7e9c-4119-9b07-d49762fecabf'
+};
+
+// 修改后的鼠标按下事件处理
+iot3d.Model_onMousedown(function (Model, event) {
+  console.log("Mouse_onMousedown:", Model, event);
+  const btnNum = event.button;
+
+  if (btnNum === 2) {
+    console.log("您点击了鼠标右键！");
+    // 清除当前选中模型的边框和弹窗
+    if (selectedModel) {
+      iot3d.GetModelByUuid(selectedModel.uuid).Up_Html("");
+      iot3d.Render();
+      selectedModel = null; // 清空当前选中的模型
+    }
+  } else if (btnNum === 0) {
+    if (modelMapping[Model.name]) {
+      // 清除当前选中模型的边框和弹窗
+      if (selectedModel) {
+        iot3d.GetModelByUuid(selectedModel.uuid).Up_Html("");
+        iot3d.Render();
+      }
+      handleModelClick(Model.name, modelMapping[Model.name]);
+    } else if (Model.name === '红外1') {
+      console.log("您点击了红外1");
+    }
+  } else if (btnNum === 1) {
+    console.log("您点击了鼠标中键！");
+  }
+});
 })
 </script>

src/views/index/left-center.vue

@@ -4,7 +4,7 @@ import { graphic } from "echarts/core";
 import { countUserNum } from "@/api";
 import { ElMessage } from "element-plus"
 import axios from 'axios';
-
+import statistics from "@/utils/External_interfaces";
 let colors = ["#0BFC7F", "#A0A0A0", "#F48C02", "#F4023C"];
 const option = ref({});
 const state = reactive({
@@ -51,32 +51,18 @@ const getData = () => {
 };
 // getData();
 
-const statistics = () => {
-  const appId = '1686846386279535435';
-  const secret = 'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDDvv8hgUuIzp7WdTS5zHQPt9bOytMNRY+s1MBCbLp6C2sz9kg+agQ/cMqztYgwjlYqETyUTiu/uuF0y71VHtfazip6eYI++EHqBCNgmgGBkdyV5EyiSBC+RsJ0tX+oCFFtIIlYzIwgserkZyVKrSF61OieQj+C2rqbJBZq5svXlwIDAQAB';
-  axios.post('http://45.251.93.106:8082/api/statistics', { appId, secret })
-    .then((response) => {
-      console.log('左中--设备总览', response.data);
-      if (response.data.code === 200) {
-        console.log('左中--设备总览', response.data.result);
-        states.qzCount = response.data.result.qzCount;
-        states.qsCount = response.data.result.qsCount;
-        states.jsCount = response.data.result.jsCount;
-        states.dzdaCount = response.data.result.dzdaCount;
-        states.yjCount = response.data.result.yjCount;
-        states.cqqsCount = response.data.result.cqqsCount;
-        states.cqjsCount = response.data.result.cqjsCount;
-        states.queryCount = response.data.result.queryCount;
-        states.fileCount = response.data.result.fileCount;
-      }else{
-        ElMessage.error(response.data.message);
-      }
-    })
-    .catch((error) => {
-      ElMessage.error(error);
-    });
-};
-statistics()
+statistics().then(res => {
+  console.log('左中--设备总览', res);
+    states.qzCount = res.data.result.qzCount;
+    states.qsCount = res.data.result.qsCount;
+    states.jsCount = res.data.result.jsCount;
+    states.dzdaCount = res.data.result.dzdaCount;
+    states.yjCount = res.data.result.yjCount;
+    states.cqqsCount = res.data.result.cqqsCount;
+    states.cqjsCount = res.data.result.cqjsCount;
+    states.queryCount = res.data.result.queryCount;
+    states.fileCount = res.data.result.fileCount;
+})
 
 const setOption = () => {
   option.value = {

src/views/index/left-top.vue

@@ -4,6 +4,7 @@ import { countDeviceNum } from "@/api";
 import CountUp from "@/components/count-up";
 import {ElMessage} from "element-plus"
 import axios from 'axios';
+import statistics from "@/utils/External_interfaces";
 
 const duration = ref(2);
 const state = reactive({
@@ -14,39 +15,31 @@ const state = reactive({
 });
 
 
-const getData = () => {
-  countDeviceNum().then((res) => {
-    console.log("左上--设备总览",res);
-    if (res.success) {
-      state.alarmNum = res.data.alarmNum;
-      state.offlineNum = res.data.offlineNum;
-      state.onlineNum = res.data.onlineNum;
-      state.totalNum = res.data.totalNum;
-    }else{
-      ElMessage.error(res.msg)
-    }
-  }).catch(err=>{
-    ElMessage.error(err)
-  });;
-};
-getData();
+// const getData = () => {
+//   countDeviceNum().then((res) => {
+//     console.log("左上--设备总览",res);
+//     if (res.success) {
+//       state.alarmNum = res.data.alarmNum;
+//       state.offlineNum = res.data.offlineNum;
+//       state.onlineNum = res.data.onlineNum;
+//       state.totalNum = res.data.totalNum;
+//     }else{
+//       ElMessage.error(res.msg)
+//     }
+//   }).catch(err=>{
+//     ElMessage.error(err)
+//   });;
+// };
+// getData();
 
+statistics().then(res => {
+    console.log('左上--设备总览', res);
+    state.alarmNum = res.ckNum;
+    state.offlineNum = res.ckNum;
+    state.onlineNum = res.drkNum;
+    state.totalNum = res.dckNum;
+})
 
-const statistics = () => {
-  const appId = '1686846386279535435';
-  const secret = 'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDDvv8hgUuIzp7WdTS5zHQPt9bOytMNRY+s1MBCbLp6C2sz9kg+agQ/cMqztYgwjlYqETyUTiu/uuF0y71VHtfazip6eYI++EHqBCNgmgGBkdyV5EyiSBC+RsJ0tX+oCFFtIIlYzIwgserkZyVKrSF61OieQj+C2rqbJBZq5svXlwIDAQAB';
-  axios.post('http://45.251.93.106:8082/api/statistics', { appId, secret })
-  .then((response) => {
-    console.log('左上--设备总览', response.data);
-    if (response.data.code===200) {
-      console.log('左上--设备总览', response.data.result);
-    }
-  })
-  .catch((error) => {
-    ElMessage.error(error);
-  });
-};
-statistics()
 </script>
 
 <template>

src/views/index/monitor.vue

@@ -1,127 +1,111 @@
 <template>
-    <div>
-      <div :id="preId" style="width: 400px; height: 200px"></div>
-    </div>
-  </template>
-  <script>
-  export default {
-    name: "h5HkVideo",
-    props: {
-      preUrl: {
-        type: String,
-      },
-      preId: {
-        type: String,
-      }
+  <div>
+    <div :id="preId" ref="playerContainer"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, nextTick } from 'vue';
+
+const props = defineProps({
+  preUrl: {
+    type: String,
+    required: true,
+  },
+  preId: {
+    type: String,
+    required: true,
+  },
+});
+
+const playerContainer = ref(null);
+const player = ref(null);
+
+onMounted(() => {
+  nextTick(() => {
+    initPlayer();
+  });
+});
+
+/**
+ * 初始化播放器
+ */
+const initPlayer = () => {
+  player.value = new window.JSPlugin({
+    // 需要英文字母开头 必填
+    szId: props.preId,
+    // 必填,引用H5player.min.js的js相对路径
+    szBasePath: './dist/h5player.min.js', // 路径需要根据实际情况调整
+    // 分屏播放，默认最大分屏4*4
+    iMaxSplit: 4,
+    iCurrentSplit: 1,
+  });
+
+  initPlugin();
+};
+
+/**
+ * 事件初始化
+ */
+const initPlugin = () => {
+  player.value.JS_SetWindowControl(playerContainer.value);
+
+  player.value.JS_SetWindowControlCallback({
+    windowEventSelect(iWindIndex) {
+      // 插件选中窗口回调
+      console.log('windowSelect callback: ', iWindIndex);
     },
-    data() {
-      return {
-        // 播放器对象
-        player: null,
-      };
+    pluginErrorHandler(iWindIndex, iErrorCode, oError) {
+      // 插件错误回调
+      console.error(`window-${iWindIndex}, errorCode: ${iErrorCode}`, oError);
     },
-    mounted() {
-      this.$nextTick(() => {
-        this.initPlayer();
-      });
+    windowEventOver(iWindIndex) {
+      // 鼠标移过回调
+      console.log('鼠标移过回调', iWindIndex);
     },
-    methods: {
-      /**
-       * 初始化播放器
-       */
-      initPlayer() {
-        this.player = new window.JSPlugin({
-          // 需要英文字母开头 必填
-          szId: this.preId,
-          // 必填,引用H5player.min.js的js相对路径
-          szBasePath: "/h5player",
-   
-          // // 当容器div#play_window有固定宽高时，可不传iWidth和iHeight，窗口大小将自适应容器宽高
-        //   iWidth: 600,
-        //   iHeight: 400,
-   
-          // 分屏播放，默认最大分屏4*4
-          iMaxSplit: 4,
-          iCurrentSplit: 1,
-   
-        //   // 样式
-        //   oStyle: {
-        //     border: '#343434',
-        //     borderSelect: '#FFCC00',
-        //     background: '#000'
-        //   }
-        });
-        this.initPlugin();
-      },
-      /**
-       * 事件初始化
-       */
-      initPlugin() {
-        this.player.JS_SetWindowControlCallback({
-          windowEventSelect(iWindIndex) {
-            // 插件选中窗口回调
-            console.log("windowSelect callback: ", iWindIndex);
-          },
-          pluginErrorHandler(iWindIndex, iErrorCode, oError) {
-            // 插件错误回调
-            console.error(
-              `window-${iWindIndex}, errorCode: ${iErrorCode}`,
-              oError
-            );
-          },
-          windowEventOver(iWindIndex) {
-            // 鼠标移过回调
-            // console.log("鼠标移过回调", iWindIndex);
-          },
-          windowEventOut(iWindIndex) {
-            // 鼠标移出回调
-            // console.log("鼠标移出回调", iWindIndex);
-          },
-          windowFullCcreenChange(bFull) {
-            // 全屏切换回调
-            console.log("全屏切换回调", bFull);
-          },
-          firstFrameDisplay(iWndIndex, iWidth, iHeight) {
-            // 首帧显示回调
-            console.log("首帧显示回调", iWndIndex, iWidth, iHeight);
-          },
-          performanceLack(iWndIndex) {
-            // 性能不足回调
-            console.log("性能不足回调", iWndIndex);
-          },
-        });
-   
-        // this.play();
-      },
-      /**
-       * 播放
-       */
-      play(data) {
-        let preUrl;
-        if (data != undefined) {
-          preUrl = data; // 播放地址
-        } else {
-          preUrl = this.preUrl; // 播放地址
-        }
-        const param = {
-          playURL: preUrl,
-          // 1：高级模式  0：普通模式，高级模式支持所有
-          mode: 1,
-        };
-        // 当前播放窗口下标
-        let index = 0;
-        // console.log(this.playerArr);
-        this.player.JS_Play(preUrl, param, index).then(
-          () => {
-            // 播放成功回调
-            console.log("播放成功");
-          },
-          (err) => {
-            console.log("播放失败");
-            console.info("JS_Play failed:", err);
-          }
-        );
-      },
+    windowEventOut(iWindIndex) {
+      // 鼠标移出回调
+      console.log('鼠标移出回调', iWindIndex);
     },
+    windowFullCreenChange(bFull) {
+      // 全屏切换回调
+      console.log('全屏切换回调', bFull);
+    },
+    firstFrameDisplay(iWndIndex, iWidth, iHeight) {
+      // 首帧显示回调
+      console.log('首帧显示回调', iWndIndex, iWidth, iHeight);
+    },
+    performanceLack(iWndIndex) {
+      // 性能不足回调
+      console.log('性能不足回调', iWndIndex);
+    },
+  });
+
+  play();
+};
+
+/**
+ * 播放
+ */
+const play = () => {
+  const preUrl = props.preUrl; // 播放地址
+  const param = {
+    playURL: preUrl,
+    // 1：高级模式  0：普通模式，高级模式支持所有
+    mode: 1,
   };
-  </script>
+
+  // 当前播放窗口下标
+  let index = 0;
+
+  player.value.JS_Play(preUrl, param, index, null, null)
+    .then(() => {
+      // 播放成功回调
+      console.log('播放成功');
+    })
+    .catch((err) => {
+      console.log('播放失败');
+      console.info('JS_Play failed:', err);
+    });
+};
+</script>

src/views/index/system.vue

@@ -1,18 +1,86 @@
 <template>
+    <n-button strong secondary type="info" size="large" @click="$router.push('/')" class="back-home-btn">返回首页</n-button>
     <ItemWrap title="系统设置" class="contetn_lr-item">
-        
+        <div class="contetn_lr">
+        <el-input v-model="form.name" placeholder="请输入用户名" class="el-input" />
+        <n-button strong secondary type="info" size="large" @click="updateSystem">提交</n-button>
+    </div>
     </ItemWrap>
 </template>
 <script setup lang="ts">
 import ItemWrap from '@/components/item-wrap/item-wrap.vue';
+import { reactive, ref } from 'vue'
+import { GetSystem,UpDateSystem } from '@/api/modules/system'
+import { ElMessage } from 'element-plus';
+const form = reactive({
+    name: ''
+})
+// 获取系统信息
+function getSystem() {
+    GetSystem().then(res => {
+        console.log(res)
+    if (res.code === 200) {
+        ElMessage.success(res.message)
+        form.name = res.data.title
+    } else {
+        ElMessage.error(res.message)
+    }
+    })
+}
+//修改系统信息
+function updateSystem() {
+    UpDateSystem({
+        id: 1,
+        title: form.name
+    }).then(res => {
+        if (res.code === 200) {
+            ElMessage.success(res.message)
+        } else {
+            ElMessage.error(res.message)
+        }
+    })
+}
+getSystem()
 
 </script>
-<style scoped lang="scss">
+<style lang="scss">
 .contetn_lr-item {
     width: 100%;
-    height: 100%;
+    height: 1000px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 25px;
+}
+.back-home-btn {
+  position: absolute;
+  margin-top: 30px;
+  top: 10px;
+  left: 10px;
+}
+.el-input {
+    width: 300px;
+    height: 50px;
+    font-size: large;
+}
+.n-button{
+    margin-left: 3px;
+    height: 50px;
+}
+.contetn_lr{
+    margin-top: 20%;
     display: flex;
     justify-content: center;
     align-items: center;
 }
-</style>
+::v-deep input::-webkit-input-placeholder {
+  color: #17a1e5;
+  font-size: 15px;
+}
+
+// 改变input框背景颜色
+::v-deep.el-input__inner {
+  background-color: transparent !important;
+  border: 1px solid #1296db;
+}
+</style>   

src/views/index/user.vue

@@ -6,95 +6,106 @@
       <Adduser @close="isAddUserVisible = false"></Adduser>
     </el-dialog>
     <el-dialog v-model="isshowEdit">
-      <Edituser @close="isshowEdit = false"></Edituser>
+      <Edituser @close="isshowEdit = false" :editUserId="editUserId"></Edituser>
     </el-dialog>
     <div class="user_skills" style="margin-top:50px;">
-    <el-table :data="tableData" height="650" style="width: 100%; margin: auto;" class="eltables">
-    <el-table-column prop="CreatedAt" label="创建时间"  />
-    <el-table-column prop="account" label="账号" />
-    <el-table-column prop="state" label="状态" :formatter="formatState"/>
-    <el-table-column label="操作"  >
-      <template #default="{ row }">
-      <n-button strong secondary type="info" size="large" @click="showEdit"
-                style="margin-right: 5px;" class="edtbtn">编辑</n-button>
-              <n-button strong secondary type="success" class="edtbtn" size="large" @click="updateUser(row.id,1)">启用</n-button>
-              <n-button strong secondary type="warning" class="edtbtn" size="large" @click="updateUser(row.id,2)">禁用</n-button>
-              <n-button strong secondary type="error" class="edtbtn" size="large" @click="deleteUser(row.id)">删除</n-button>
-      </template>
-    </el-table-column>
-    </el-table>
-      <el-pagination class="pagination"
-      background layout="prev, pager, next"
-      :total="page_count" 
-      :page-size="userform.size"
-      :page-sizes="[10, 20, 30, 50]"
-      :current-page="userform.page"
-      @size-change="handleSizeChange"
-      @current-change="handlePageChange"/>
-    </div> 
+      <el-table :data="tableData" height="650" style="width: 100%; margin: auto;" class="eltables">
+        <el-table-column prop="CreatedAt" label="创建时间" />
+        <el-table-column prop="account" label="账号" />
+        <el-table-column prop="state" label="状态" :formatter="formatState" />
+        <el-table-column label="操作">
+          <template #default="{ row }">
+            <n-button strong secondary type="info" size="large" @click="showEdit(row)" style="margin-right: 5px;" class="edtbtn">编辑</n-button>
+            <n-button strong secondary type="success" class="edtbtn" size="large" @click="updateUser(row.id, 1)">启用</n-button>
+            <n-button strong secondary type="warning" class="edtbtn" size="large" @click="updateUser(row.id, 2)">禁用</n-button>
+            <n-button strong secondary type="error" class="edtbtn" size="large" @click="deleteUser(row.id)">删除</n-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        class="pagination"
+        background
+        layout="prev, pager, next"
+        :total="page_count"
+        :page-size="userform.size"
+        :current-page="userform.page"
+        @size-change="handleSizeChange"
+        @current-change="handlePageChange"
+      />
+    </div>
   </ItemWrap>
 </template>
+
 <script setup>
-import { ref, reactive, onMounted,watch  } from "vue";
-import { ElMessage,ElMessageBox } from "element-plus";
+import { ref, reactive, onMounted, watch } from "vue";
+import { ElMessage, ElMessageBox } from "element-plus";
 import Adduser from "./adduser.vue";
 import Edituser from "./edituser.vue";
-import {Userlist,UpdateUser,DeleteUser} from "@/api/modules/user";
+import { Userlist, UpdateUser, DeleteUser } from "@/api/modules/user";
+const editUserId = ref(null);
 const isAddUserVisible = ref(false);
 const isshowEdit = ref(false);
-let userform = reactive({
+const isLoading = ref(false);
+var userform = reactive({
   "page": 1,
   "size": 10,
-  "query":"",
-  "desc":""
+  "query": "",
+  "desc": ""
 });
 let page_count = ref(0);
-let tableData = reactive([{
+let tableData = ref([{
   id: "",
   CreatedAt: "",
   account: "",
   password: "",
   state: "",
 }]);
+
 const showAddUser = () => {
   isAddUserVisible.value = true;
 };
-const showEdit = () => {
+
+const showEdit = (row) => {
+  editUserId.value = row.id;
   isshowEdit.value = true;
 };
-function getStateText(state) {
-  return state === 1 ? '启用' : '禁用';
+
+function formatState(row, column, cellValue, index) {
+  switch (cellValue) {
+    case 1:
+      return "启用";
+    case 2:
+      return "禁用";
+    default:
+      return "未知";
+  }
 }
+
 const handlePageChange = (newPage) => {
   userform.page = newPage;
-  userlist(); // 调用数据获取方法
+  userlist();
 };
+
 const handleSizeChange = (size) => {
   userform.size = size;
   userlist();
 };
-// 获取用户列表
-function userlist(){
-  Userlist(userform).then((res)=>{
+
+
+function userlist() {
+  isLoading.value = true; 
+  Userlist(userform).then((res) => {
     if (res.code === 200) {
-      tableData=res.data.result;
-      page_count.value=res.data.total;
-      console.log(res,page_count.value)
-    }else{
+      tableData.value = res.data.result;
+      page_count.value = res.data.total;
+      isLoading.value = false;
+    } else {
       ElMessage.error(res.message);
+      isLoading.value = false; 
     }
-  })
+  });
 }
-const formatState = (row, column, cellValue, index) => {
-  switch (cellValue) {
-    case 1:
-      return "启用";
-    case 2:
-      return "禁用";
-    default:
-      return "未知";
-  }
-};
+
 const updateUser = (id, state) => {
   UpdateUser({ id, state }).then((res) => {
     if (res.code === 200) {
@@ -105,38 +116,34 @@ const updateUser = (id, state) => {
     }
   });
 };
-//删除用户
-function deleteUser(index){
-  // 弹出确认框询问用户是否真的要删除
+
+function deleteUser(id) {
   ElMessageBox.confirm('此操作将永久删除该用户, 是否继续?', '提示', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
     type: 'warning'
   }).then(() => {
-    // 如果用户点击确定，则进行删除操作
-    DeleteUser({
-      id: index,
-    }).then((res) => {
+    DeleteUser({ id }).then((res) => {
       if (res.code === 200) {
         ElMessage.success("删除成功");
-        userlist();
+        userlist(); // 刷新数据
       } else {
         ElMessage.error(res.message);
       }
-    })
+    });
   }).catch(() => {
-    // 如果用户点击取消，给出提示
     ElMessage({
       type: 'info',
       message: '已取消删除'
-    });          
+    });
   });
 }
+
 onMounted(() => {
   userlist();
 });
-
 </script>
+
 <style scoped>
 .contetn_lr-item {
   font-size: 30px;

src/views/index/videoPlayer.vue

@@ -0,0 +1,508 @@
+<template>
+  <!-- <el-container>
+    <el-row>
+      <el-input v-model="code" placeholder="输入监控点编码" @change="onChangeCode"></el-input>
+      <el-button @click="onSubmit">默认预览</el-button>
+      <el-button @click="onTwoSubmit(2)">4分屏</el-button>
+      <el-button @click="onTwoSubmit(4)">16分屏</el-button>
+      <el-button @click="onTwoSubmit(8)">64分屏</el-button>
+    </el-row>
+    <el-row>
+      <div id="player" style="width: 800px;height: 800px;"></div>
+    </el-row>
+  </el-container> -->
+  <div :id="`player${option.id}`"></div>
+</template>
+
+<script>
+ export default {
+   name:"VideoPlayer",
+   props:{
+     option: {
+       id: {
+         type: String,
+         default: ""
+       },
+       url:{
+         type: String,
+         default: ''
+       },
+       beginTime:{
+         type: String,
+         default: ''
+       },
+       endTime:{
+         type: String,
+         default: ''
+       },
+       width:{
+         type: String,
+         default: '784px'
+       },
+       height:{
+         type: String,
+         default: '440px'
+       },
+       split:{
+         type:Number,
+         default:1
+       },
+       index:{
+         type:Number,
+         default:0
+       },
+     },
+     playback: {
+       startTime:{
+         type: String,
+         default: ''
+       },
+       endTime:{
+         type: String,
+         default: ''
+       },
+       seekStart:{
+         type: String,
+         default: ''
+       },
+       rate: {
+         type: String,
+         default: ''
+       }
+     }
+   },
+   data() {
+     return {
+       player: null,
+       count: 0
+     }
+   },
+   mounted() {
+     this.$nextTick(() => {
+       this.$el.style.setProperty('display', 'block');
+       this.$el.style.setProperty('width', this.option.width||"784px");
+       this.$el.style.setProperty('height', this.option.height||"440px");
+       // this.initPlayer(this.option);
+       // this.play(this.option);
+     });
+   },
+   // watch:{
+   //   option(){
+   //     if(this.option){
+   //       this.play(this.option);
+   //     }
+   //   }
+   // },
+   methods: {
+     initPlayer(option) {
+       // 设置播放容器的宽高并监听窗口大小变化
+       window.addEventListener('resize', () => {
+         this.player.JS_Resize()
+       })
+       this.player = new window.JSPlugin({
+         // 需要英文字母开头 必填,
+         szId: 'player'+option.id,
+         // 必填,引用H5player.min.js的js相对路径
+         szBasePath: '/src/H5player/bin/h5player.min.js',
+         // 当容器div#play_window有固定宽高时，可不传iWidth和iHeight，窗口大小将自适应容器宽高
+         // iWidth: 600,
+         // iHeight: 400,
+         // 分屏播放，默认最大分屏4*4
+         iMaxSplit: 4,
+         iCurrentSplit: option.split,
+         openDebug:false,
+         // 样式
+         oStyle: {
+           border: '#343434',
+           borderSelect: '#FFCC00',
+           background: '#000'
+         }
+       });
+     },
+     play(option,callback) {
+       return new Promise((resolve) => {
+         const param = {
+           playURL: option.url,
+           mode: 1
+         }
+         let index = option.index;
+         if(option.beginTime&&option.endTime) {
+           this.player.JS_Play(option.url, param, index,option.beginTime,option.endTime).then(() => {
+             // 播放成功回调
+             resolve(true);
+           },
+           (err) => {
+             resolve(false);
+             console.log('播放失败')
+           });
+         } else {
+           this.player.JS_Play(option.url,param,index).then(() => {
+             resolve(true);
+           },(err) => {
+             resolve(false);
+             console.log("play fail");
+           })
+         }
+       })
+       /* console.log(option);
+       const _this = this;
+       const param = { playURL: option.url,mode: 1};
+       var index=option.index||0;
+       // if (!index) {
+       //   index = 0
+       // }
+       if(option.beginTime&&option.endTime){
+         _this.player.JS_Play(option.url, param, index,option.beginTime,option.endTime).then(() => {
+             // 播放成功回调
+         },
+         (err) => {
+           console.log('播放失败')
+         });
+       }else{
+         _this.player.JS_Play(option.url, param, index).then(() => {
+             // 播放成功回调
+         },
+         (err) => {
+           console.log('播放失败')
+         });
+       } */
+
+     },
+     init() {
+       // 设置播放容器的宽高并监听窗口大小变化
+       window.addEventListener('resize', () => {
+         setTimeout(()=>{
+           this.player.JS_Resize()
+         },50)
+       })
+     },
+     reSize(){
+       this.player.JS_Resize()
+     },
+     /* getTraceId(curIndex){
+       return new Promise((resolve) => {
+         this.player.JS_GetTraceId(curIndex).then((traceId) => {
+           console.log(this.player,traceId,"185");
+           resolve(traceId);
+         },(err) => {
+           console.log(err);
+         })
+       })
+     }, */
+     createPlayer(option) {
+       this.player = new window.JSPlugin({
+         szId: 'player'+option.id,
+         szBasePath: '../../../../lib/js',
+         iMaxSplit: 4,
+         iCurrentSplit: option.split,
+         openDebug: false,
+         oStyle: {
+           border: '#343434',
+           borderSelect: '#FFCC00',
+           background: '#000'
+         }
+       });
+       // 事件回调绑定
+       this.player.JS_SetWindowControlCallback({
+         windowEventSelect: async (iWndIndex)=> {  //插件选中窗口回调
+           console.log(iWndIndex);
+           // let traceId = await this.getTraceId(iWndIndex);
+           // console.log(traceId,"traceId");
+           this.$emit("getCurrentIndex", iWndIndex);
+         },
+         pluginErrorHandler: (iWndIndex, iErrorCode, oError)=> {  //插件错误回调
+             console.log('pluginError callback: ', iWndIndex, iErrorCode, oError);
+             if(iErrorCode == "0x12f910012" || iErrorCode == "0x01900050" || iErrorCode == "0x01b01307") {
+               this.$message.warning("窗口取流失败，详情根据错误码在运管后台进行查询.")
+             } else if(iErrorCode == "0x12f910011") {
+               this.$message.warning("流中断，电脑配置过低，程序卡主线程都可能导致流中断")
+             } else if(iErrorCode == "0x12f910010") {
+               this.$message.warnng("取流失败")
+             }
+         },
+         windowEventOver: (iWndIndex)=> {  //鼠标移过回调
+             //console.log(iWndIndex);
+         },
+         windowEventOut: (iWndIndex)=> {  //鼠标移出回调
+             //console.log(iWndIndex);
+         },
+         windowEventUp: (iWndIndex)=> {  //鼠标mouseup事件回调
+             //console.log(iWndIndex);
+         },
+         windowFullCcreenChange: (bFull)=> {  //全屏切换回调
+             console.log('fullScreen callback: ', bFull);
+         },
+         firstFrameDisplay: (iWndIndex, iWidth, iHeight)=> {  //首帧显示回调
+             console.log('firstFrame loaded callback: ', iWndIndex, iWidth, iHeight);
+         },
+         performanceLack: ()=> {  //性能不足回调
+             console.log('performanceLack callback: ');
+         },
+         StreamEnd: (index)=> { //回放结束回调,返回对应测窗口id
+           this.option.index=index;
+           this.play(this.option);
+         }
+       });
+     },
+     /* 分屏 */
+     arrangeWindow(splitNum) {
+       // let splitNum = this.splitNum 1
+       this.player.JS_ArrangeWindow(splitNum).then(
+         () => {
+           console.log(`arrangeWindow to ${splitNum}x${splitNum} success`)
+         },
+         e => { console.error(e) }
+       );
+     },
+     selectWindow(index){
+       this.player.JS_SelectWnd(index).then(
+         () => { },
+         e => { console.error(e) }
+       );
+     },
+     /* 整体全屏 */
+     wholeFullScreen(boolean) {
+       this.init();
+       this.player.JS_FullScreenDisplay(boolean).then(
+         () => { console.log(`wholeFullScreen success`) },
+         e => { console.error(e) }
+       );
+     },
+      /* 单窗口全屏 */
+     singleFullScreen(index) {
+       this.player.JS_FullScreenSingle(index).then(
+         () => {
+         console.info('JS_FullScreenSingle success');
+         // do you want...
+         },
+         (err) => {
+         console.info(err);
+         // do you want...
+         }
+         );
+     },
+     /* 预览&对讲 */
+     realplay() {
+       let { player, mode, urls } = this,
+       index = player.currentWindowIndex,
+       playURL = urls.realplay;
+       player.JS_Play(playURL, { playURL, mode }, index).then(
+         () => { console.log('realplay success') },
+         e => { console.error(e) }
+       );
+     },
+     /* 停止播放 */
+     stopPlay(index) {
+       console.log("当前选中要暂停的视频是：" + index );
+       this.player.JS_Stop(index).then(
+         () => { this.playback.rate = 0; console.log('stop realplay success') },
+         e => { console.error(e) }
+       );
+     },
+     /* 开始对讲 */
+     talkStart(url) {
+       console.log(url);
+       // let url = this.urls.talk
+       this.player.JS_SetConnectTimeOut(0, 1000);
+       this.player.JS_StartTalk(url).then(
+         () => { console.log('talkStart success') },
+         e => { console.error(e) }
+       );
+     },
+     /* 停止对讲 */
+     talkStop() {
+       this.player.JS_StopTalk().then(
+         () => { console.log('talkStop success') },
+         e => { console.error(e) }
+       );
+     },
+     /* 停止所有播放 */
+     stopAllPlay() {
+       this.player.JS_StopRealPlayAll().then(
+         () => {  this.playback.rate = 0; console.log('stopAllPlay success') },
+         e => { console.error(e) }
+       );
+     },
+     /* 回放 */
+     playbackStart() {
+       let { player, mode, urls, playback } = this,
+         index = player.currentWindowIndex,
+         playURL = urls.playback,
+         { startTime, endTime } = playback
+         startTime += 'Z'
+         endTime += 'Z'
+       player.JS_Play(playURL, { playURL, mode }, index, startTime, endTime).then(
+         () => {
+           console.log('playbackStart success')
+           this.playback.rate = 1
+         },
+         e => { console.error(e) }
+       );
+     },
+     /* 暂停回放 */
+     playbackPause() {
+       this.player.JS_Pause().then(
+         () => { console.log('playbackPause success') },
+         e => { console.error(e) }
+       )
+     },
+     /* 恢复回放 */
+     playbackResume() {
+       this.player.JS_Resume().then(
+         () => { console.log('playbackResume success') },
+         e => { console.error(e) }
+       )
+     },
+     /* 回放定位 */
+     seekTo() {
+       let { seekStart, endTime } = this.playback
+       seekStart += 'Z'
+       endTime += 'Z'
+       this.player.JS_Seek(this.player.currentWindowIndex, seekStart, endTime).then(
+         () => { console.log('seekTo success') },
+         e => { console.error(e) }
+       )
+     },
+     /* 回放慢放 */
+     playbackSlow() {
+       this.player.JS_Slow().then(
+         rate => {
+           this.playback.rate = rate
+         },
+         e => { console.error(e) }
+       )
+     },
+     /* 回放快放 */
+     playbackFast() {
+       this.player.JS_Fast().then(
+         rate => {
+           this.playback.rate = rate
+         },
+         e => { console.error(e) }
+       )
+     },
+     /* 回放单帧进（高级模式功能） */
+     frameForward() {
+       this.player.JS_FrameForward(this.player.currentWindowIndex).then(
+         () => { this.playback.rate = 1; console.log('frameForward success') },
+         e => { console.error(e) }
+       )
+     },
+     /* 开启声音 */
+     openSound(index) {
+       this.player.JS_OpenSound(index).then(
+         () => {
+           console.log('openSound success')
+           this.muted = false
+         },
+         e => { console.error(e) }
+       )
+     },
+     /* 关闭声音 */
+     closeSound(index) {
+       this.player.JS_CloseSound(index).then(
+         () => {
+           console.log('closeSound success')
+           this.muted = true
+         },
+         e => { console.error(e) }
+       )
+     },
+     /* 设置音量 */
+     setVolume(value) {
+       let player = this.player,
+         index = player.currentWindowIndex
+       this.player.JS_SetVolume(index, value).then(
+         () => {
+           console.log('setVolume success', value)
+         },
+         e => { console.error(e) }
+       )
+     },
+     /* 抓图 */
+     capture(imageType) {
+       let player = this.player,
+         index = player.currentWindowIndex
+
+       player.JS_CapturePicture(index, 'img', imageType).then(
+         () => { console.log('capture success', imageType) },
+         e => { console.error(e) }
+       )
+     },
+     /* 录像 */
+     // recordStart(type) {
+     //   const codeMap = { MP4: 5, PS: 2 }
+     //   let player = this.player,
+     //     index = player.currentWindowIndex,
+     //     fileName = `${moment().format('YYYYMMDDHHmm')}.mp4`
+     //     typeCode = codeMap[type]
+     //
+     //   player.JS_StartSaveEx(index, fileName, typeCode).then(
+     //     () => { console.log('record start ...') },
+     //     e => { console.error(e) }
+     //   )
+     // },
+     // /* 停止录像并保存文件 */
+     // recordStop() {
+     //   let player = this.player
+     //     index = player.currentWindowIndex
+     //
+     //   player.JS_StopSave(index).then(
+     //     () => { console.log('record stoped, saving ...') },
+     //     e => { console.error(e) }
+     //   )
+     // },
+     // /* 电子放大、智能信息 */
+     // enlarge() {
+     //   let player = this.player,
+     //     index = player.currentWindowIndex
+     //
+     //   player.JS_EnableZoom(index).then(
+     //     () => { console.log('enlarge start..., select range...') },
+     //     e => { console.error(e) }
+     //   )
+     // },
+     // enlargeClose() {
+     //   let player = this.player,
+     //     index = player.currentWindowIndex
+     //
+     //   player.JS_DisableZoom(index).then(
+     //     () => { console.log('enlargeClose success') },
+     //     e => { console.error(e) }
+     //   )
+     // },
+     // /* 开启/关闭智能信息展示（高级模式功能） */
+     // intellectTrigger(openFlag) {
+     //   let player = this.player,
+     //     index = player.currentWindowIndex
+     //
+     //   let result = player.JS_RenderALLPrivateData(index,openFlag)
+     //   console.log(`${openFlag ? 'open' : 'close'} intellect ${result === 1 ? 'success': 'failed'}`)
+     // },
+     // /* 获取音视频信息 */
+     // getvideoInfo() {
+     //   let player = this.player,
+     //     index = player.currentWindowIndex
+     //
+     //   player.JS_GetVideoInfo(index).then(function (videoInfo) {
+     //     console.log("videoInfo:", videoInfo);
+     //   });
+     // },
+     // /* 获取OSD时间 */
+     // getOSDTime() {
+     //   let player = this.player,
+     //     index = player.currentWindowIndex
+     //
+     //   player.JS_GetOSDTime(index).then(function(time) {
+     //     console.log("osdTime:", new Date(time));
+     //   });
+     // },
+     getCurrentIndex(){
+       return this.player.currentWindowIndex;
+     }
+   },
+ }
+</script>
+
+<style>
+</style>

src/views/index/webH5.vue

@@ -11,7 +11,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { ref ,onMounted} from 'vue';
 import TestWebH5 from './monitor.vue';
 import ItemWrap from '@/components/item-wrap/item-wrap.vue';
 
@@ -22,12 +22,13 @@ const h5Player1 = ref(null);
 const h5Player2 = ref(null);
 
 function handlePlay(val: string) {
-  if (val === '1') {
-    (h5Player1.value as any).play("ws://视频一地址");
-  } else {
+    (h5Player1.value as any).play("https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4");
     (h5Player2.value as any).play("ws://视频二地址");
-  }
 }
+onMounted(()=>{
+  console.log(h5Player1.value);
+  
+})
 </script>
 
 <style scoped lang="scss">