8 月之前 · 095acea331
--- a/index.html
+++ b/index.html
@@ -1,14 +1,33 @@
 
				 <!DOCTYPE html>
			
 
				 <html lang="en">
			
 
				-  <head>
			
 
				-    <meta charset="UTF-8" />
			
 
				-    <link rel="icon" href="/favicon.ico" />
			
 
				-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
			
 
				-    <title>IofTV-Screen-Vue3</title>
			
 
				-  </head>
			
 
				-  <body>
			
 
				-    <div id="app"></div>
			
 
				-    <script type="module" src="/src/main.ts"></script>
			
 
				-  </body>
			
 
				-  <script type="text/javascript" src="/public/jessibuca/jessibuca.js"></script>
			
 
				-</html>
			
 
				+
			
 
				+<head>
			
 
				+  <meta charset="UTF-8" />
			
 
				+  <link rel="icon" href="/favicon.ico" />
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
			
 
				+  <script type="importmap">
			
 
				+    {
			
 
				+      "imports": {
			
 
				+        "three": "https://vdata.baozhida.cn/3d1v/static/js/three.module.js",
			
 
				+        "three/addons/": "https://vdata.baozhida.cn/3d1v/static/js/jsm/"
			
 
				+      }
			
 
				+    }
			
 
				+   </script>
			
 
				+  <title>IofTV-Screen-Vue3</title>
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+  <div id="app">
			
 
				+    
			
 
				+  </div>
			
 
				+  <script type="module" src="/src/main.ts"></script>
			
 
				+  <!-- 3D 1v -->
			
 
				+  <script async src="https://vdata.baozhida.cn/3d1v/static/js/es-module-shims.js"></script>
			
 
				+  <script src="https://vdata.baozhida.cn/3d1v/static/js/jquery.min.js"></script>
			
 
				+
			
 
				+  <link rel="stylesheet" href="https://vdata.baozhida.cn/3d1v/static/js/libs/loading/load.css" media="all">
			
 
				+  <script async src="https://vdata.baozhida.cn/3d1v/static/js/libs/loading/load.js" charset="utf-8"></script>
			
 
				+  <!-- 3D 1v -->
			
 
				+</body>
			
 
				+<script type="text/javascript" src="/public/jessibuca/jessibuca.js"></script>
			
 
				+</html>
			
--- a/public/jquery-1.12.4.min.js
+++ b/public/jquery-1.12.4.min.js
--- a/public/jsencrypt.min.js
+++ b/public/jsencrypt.min.js
--- a/src/assets/css/main.scss
+++ b/src/assets/css/main.scss
@@ -1,101 +1,138 @@
 
				-html,body{
			
 
				-    height: 100%;
			
 
				-    width: 100%;
			
 
				+html,
			
 
				+body {
			
 
				+  height: 100%;
			
 
				+  width: 100%;
			
 
				 }
			
 
				-#app{
			
 
				-    .content_wrap{
			
 
				-        color: #d3d6dd;
			
 
				-    }
			
 
				+
			
 
				+#app {
			
 
				+  .content_wrap {
			
 
				+    color: #d3d6dd;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+.contetn_center {
			
 
				+  position: relative;
			
 
				+  width: 1000px;
			
 
				+  height: 600px;
			
 
				+  overflow: hidden;
			
 
				+  display: flex;
			
 
				+  justify-content: center;
			
 
				+  align-items: center;
			
 
				+  margin: 0 auto;
			
 
				+  z-index: 1;
			
 
				+}
			
 
				+
			
 
				+#iot3d {
			
 
				+  position: absolute;
			
 
				+  top: 0;
			
 
				+  left: 0;
			
 
				+  transform: translate(0, 0);
			
 
				+  // border: 5px solid rgba(0, 247, 132, 0.5);
			
 
				+  margin-top: 5vh; 
			
 
				+  width: 100%; 
			
 
				+  height: 60vh; 
			
 
				+}
			
 
				+
			
 
				+#iot3d > div,
			
 
				+#iot3d > canvas {
			
 
				+  position: absolute;
			
 
				+  top: 0;
			
 
				+  left: 25%;
			
 
				+  width: 50% !important; /* 使用百分比宽度 */
			
 
				+  height: 100% !important; /* 使用百分比高度 */
			
 
				+  // border: 5px solid rgba(212, 0, 255, 0.5);
			
 
				 }
			
 
				 
			
 
				 html .el-message {
			
 
				-    --yh-bg-color-container:#242424;
			
 
				-    --yh-shadow-3: 0 16px 24px rgba(0, 0, 0, .14), 0 6px 30px rgba(0, 0, 0, 12%), 0 8px 10px rgba(0, 0, 0, 20%);
			
 
				-    --yh-shadow-inset-top: inset 0 .5px 0 #5e5e5e;
			
 
				-    --yh-shadow-inset-right: inset .5px 0 0 #5e5e5e;
			
 
				-    --yh-shadow-inset-bottom: inset 0 -.5px 0 #5e5e5e;
			
 
				-    --yh-shadow-inset-left: inset -.5px 0 0 #5e5e5e;
			
 
				-    --yh-text-color-primary:rgba(255, 255, 255, .9);
			
 
				-    --yh-brand-color: #0052d9;
			
 
				-    --yh-success-color: #059465;
			
 
				-    --yh-error-color: #c64751;
			
 
				-    --yh-warning-color: #cf6e2d;
			
 
				-
			
 
				-    background-color: var(--yh-bg-color-container) ;
			
 
				-    box-shadow: var(--yh-shadow-3), var(--yh-shadow-inset-top),
			
 
				-      var(--yh-shadow-inset-right), var(--yh-shadow-inset-bottom),
			
 
				-      var(--yh-shadow-inset-left);
			
 
				-    border: none ;
			
 
				-    color: var(--yh-text-color-primary) ;
			
 
				-    margin-top: 90px;
			
 
				-    .el-message__icon {
			
 
				-      font-size: 20px;
			
 
				-    }
			
 
				-  
			
 
				-    &.el-message--info .el-message__icon {
			
 
				-      color: var(--yh-brand-color);
			
 
				-    }
			
 
				-  
			
 
				-    &.el-message--success .el-message__icon {
			
 
				-      color: var(--yh-success-color);
			
 
				-    }
			
 
				-  
			
 
				-    &.el-message--warning .el-message__icon {
			
 
				-      color: var(--yh-warning-color);
			
 
				-    }
			
 
				-  
			
 
				-    &.el-message--error .el-message__icon {
			
 
				-      color: var(--yh-error-color);
			
 
				-    }
			
 
				-  
			
 
				-    .el-message__content {
			
 
				-      color: var(--yh-text-color-primary);
			
 
				-    }
			
 
				+  --yh-bg-color-container: #242424;
			
 
				+  --yh-shadow-3: 0 16px 24px rgba(0, 0, 0, .14), 0 6px 30px rgba(0, 0, 0, 12%), 0 8px 10px rgba(0, 0, 0, 20%);
			
 
				+  --yh-shadow-inset-top: inset 0 .5px 0 #5e5e5e;
			
 
				+  --yh-shadow-inset-right: inset .5px 0 0 #5e5e5e;
			
 
				+  --yh-shadow-inset-bottom: inset 0 -.5px 0 #5e5e5e;
			
 
				+  --yh-shadow-inset-left: inset -.5px 0 0 #5e5e5e;
			
 
				+  --yh-text-color-primary: rgba(255, 255, 255, .9);
			
 
				+  --yh-brand-color: #0052d9;
			
 
				+  --yh-success-color: #059465;
			
 
				+  --yh-error-color: #c64751;
			
 
				+  --yh-warning-color: #cf6e2d;
			
 
				+
			
 
				+  background-color: var(--yh-bg-color-container);
			
 
				+  box-shadow: var(--yh-shadow-3), var(--yh-shadow-inset-top),
			
 
				+    var(--yh-shadow-inset-right), var(--yh-shadow-inset-bottom),
			
 
				+    var(--yh-shadow-inset-left);
			
 
				+  border: none;
			
 
				+  color: var(--yh-text-color-primary);
			
 
				+  margin-top: 90px;
			
 
				+
			
 
				+  .el-message__icon {
			
 
				+    font-size: 20px;
			
 
				+  }
			
 
				+
			
 
				+  &.el-message--info .el-message__icon {
			
 
				+    color: var(--yh-brand-color);
			
 
				+  }
			
 
				+
			
 
				+  &.el-message--success .el-message__icon {
			
 
				+    color: var(--yh-success-color);
			
 
				+  }
			
 
				+
			
 
				+  &.el-message--warning .el-message__icon {
			
 
				+    color: var(--yh-warning-color);
			
 
				   }
			
 
				 
			
 
				-  .beautify-scroll-def {
			
 
				-    overflow-y: auto;
			
 
				-  
			
 
				+  &.el-message--error .el-message__icon {
			
 
				+    color: var(--yh-error-color);
			
 
				+  }
			
 
				+
			
 
				+  .el-message__content {
			
 
				+    color: var(--yh-text-color-primary);
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+.beautify-scroll-def {
			
 
				+  overflow-y: auto;
			
 
				+
			
 
				+  &::-webkit-scrollbar-thumb {
			
 
				+    //滚动条的设置
			
 
				+    background-color: rgba(14, 59, 150, 0);
			
 
				+    background-clip: padding-box;
			
 
				+    border-radius: 4px;
			
 
				+  }
			
 
				+
			
 
				+  &:hover {
			
 
				     &::-webkit-scrollbar-thumb {
			
 
				       //滚动条的设置
			
 
				-      background-color: rgba(14, 59, 150, 0);
			
 
				+      background-color: rgba(14, 59, 150, 0.5);
			
 
				       background-clip: padding-box;
			
 
				       border-radius: 4px;
			
 
				     }
			
 
				-  
			
 
				-    &:hover {
			
 
				-      &::-webkit-scrollbar-thumb {
			
 
				-        //滚动条的设置
			
 
				-        background-color: rgba(14, 59, 150, 0.5);
			
 
				-        background-clip: padding-box;
			
 
				-        border-radius: 4px;
			
 
				-      }
			
 
				-    }
			
 
				-  
			
 
				-    &::-webkit-scrollbar-track-piece {
			
 
				-      //滚动条凹槽的颜色，还可以设置边框属性
			
 
				-      background-color: transparent;
			
 
				-    }
			
 
				-  
			
 
				-    &::-webkit-scrollbar {
			
 
				-      //滚动条的宽度
			
 
				-      width: 8px;
			
 
				-      height: 8px;
			
 
				-    }
			
 
				-  
			
 
				-  
			
 
				-  
			
 
				-    &::-webkit-scrollbar-thumb:hover {
			
 
				-      background-color: rgba(14, 59, 150, .8);
			
 
				-    }
			
 
				   }
			
 
				 
			
 
				-  .text-content {
			
 
				-    width: 100%;
			
 
				-    display: flex;
			
 
				-    min-height: calc(100% - 60px);
			
 
				-    justify-content: space-between;
			
 
				+  &::-webkit-scrollbar-track-piece {
			
 
				+    //滚动条凹槽的颜色，还可以设置边框属性
			
 
				+    background-color: transparent;
			
 
				+  }
			
 
				+
			
 
				+  &::-webkit-scrollbar {
			
 
				+    //滚动条的宽度
			
 
				+    width: 8px;
			
 
				+    height: 8px;
			
 
				   }
			
 
				+
			
 
				+
			
 
				+
			
 
				+  &::-webkit-scrollbar-thumb:hover {
			
 
				+    background-color: rgba(14, 59, 150, .8);
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+.text-content {
			
 
				+  width: 100%;
			
 
				+  display: flex;
			
 
				+  min-height: calc(100% - 60px);
			
 
				+  justify-content: space-between;
			
 
				+}
			
 
				+
			
 
				 .naiveui-table-wrapper {
			
 
				   background-color: transparent !important;
			
 
				 }
			
--- a/src/config/UtilVar.ts
+++ b/src/config/UtilVar.ts
@@ -15,11 +15,11 @@ const UtilVar:UtilVarType = {
 
				 const runtimeType:any = {
			
 
				 
			
 
				     production: () => {
			
 
				-
			
 
				+       
			
 
				     },
			
 
				     //开发环境
			
 
				     development: () => {
			
 
				-        // UtilVar.baseUrl= `http://www.xihuanmantou.cn:19527`
			
 
				+        UtilVar.baseUrl= `http://localhost:8080/api`
			
 
				 
			
 
				     },
			
 
				     hash:()=>{
			
--- a/src/main.ts
+++ b/src/main.ts
@@ -15,9 +15,9 @@ import { registerEcharts } from "@/plugins/echarts"
 
				 import  ElementPlus   from 'element-plus'
			
 
				 
			
 
				 // 不使用mock，请注释掉
			
 
				-import { mockXHR } from "@/mock/index";
			
 
				+// import { mockXHR } from "@/mock/index";
			
 
				 
			
 
				-mockXHR()
			
 
				+// mockXHR()
			
 
				 const naive = create({
			
 
				     components: [NButton]
			
 
				   })
			
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -40,7 +40,8 @@ const wrapperStyle = {};
 
				   height: 100%;
			
 
				   padding: 16px 16px 16px 16px;
			
 
				   box-sizing: border-box;
			
 
				-  background-image: url("@/assets/img/pageBg.png");
			
 
				+  // background-image: url("@/assets/img/pageBg.png");
			
 
				+  // background-color: #0037ff;
			
 
				   background-size: cover;
			
 
				   background-position: center center;
			
 
				 }
			
--- a/src/views/LoginView.vue
+++ b/src/views/LoginView.vue
@@ -19,7 +19,7 @@
 
				             </el-form-item>
			
 
				 
			
 
				             <el-form-item>
			
 
				-                <el-button type="primary" native-type="submit">登录</el-button>
			
 
				+                <el-button type="primary" :class="{ 'grayed-out': !isLoginFormValid }" :disabled="!isLoginFormValid" native-type="submit">登录</el-button>
			
 
				             </el-form-item>
			
 
				           </ItemWrap>
			
 
				 
			
@@ -28,7 +28,7 @@
 
				 </template>
			
 
				 
			
 
				 <script setup>
			
 
				-import { reactive, onMounted, ref } from 'vue';
			
 
				+import { reactive, onMounted, ref,computed  } from 'vue';
			
 
				 import { ElMessage } from 'element-plus';
			
 
				 import router from '@/router';
			
 
				 
			
@@ -40,6 +40,10 @@ const form = reactive({
 
				 
			
 
				 const captchaAnswerFromServer = ref('');
			
 
				 
			
 
				+const isLoginFormValid = computed(() => {
			
 
				+    return Boolean(form.username && form.password && form.captchaAnswer);
			
 
				+});
			
 
				+
			
 
				 const rules = reactive({
			
 
				     username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
			
 
				     password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
			
@@ -128,6 +132,11 @@ onMounted(() => {
 
				     border: 1px solid #ccc;
			
 
				     border-radius: 5px;
			
 
				 }
			
 
				+.contetn_lr-item{
			
 
				+  font-size: 30px;
			
 
				+  width: 500px;
			
 
				+  height: auto;
			
 
				+}
			
 
				 .login-container {
			
 
				   width: 500px;
			
 
				   margin: 300px auto;
			
@@ -190,4 +199,7 @@ label {
 
				 .contetn_lr-item {
			
 
				   height: 310px;
			
 
				 }
			
 
				+.grayed-out {
			
 
				+    background-color: gray !important;
			
 
				+}
			
 
				 </style>
			
--- a/src/views/index/haikan.vue
+++ b/src/views/index/haikan.vue
@@ -0,0 +1,268 @@
 
				+<!-- 视频播放组件 -->
			
 
				+<template>
			
 
				+    <div class="main" ref="playWndBox">
			
 
				+      <div
			
 
				+        id="playWnd"
			
 
				+        class="playWnd"
			
 
				+        :style="{
			
 
				+          height: playWndHeight + 'px',
			
 
				+          width: playWndWidth + 'px',
			
 
				+        }"
			
 
				+      ></div>
			
 
				+    </div>
			
 
				+  </template>
			
 
				+   
			
 
				+  <script setup>
			
 
				+  import { ref, onMounted, onBeforeUnmount, getCurrentInstance, nextTick } from 'vue'
			
 
				+   
			
 
				+  const playWndBox = ref(null)
			
 
				+  let playWndHeight = ref('')
			
 
				+  let playWndWidth = ref('')
			
 
				+  let pubKey = ref('')
			
 
				+  let oWebControl = ref(null)
			
 
				+  let objData = ref({
			
 
				+    appkey: "",                 //海康提供的appkey
			
 
				+    ip: "",                     //海康提供的ip   
			
 
				+    secret: "",                 //海康提供的secret
			
 
				+    port: 443,
			
 
				+    playMode: 0,        // 0 预览 1回放
			
 
				+    layout: "1x1",      //页面展示的模块数【16】
			
 
				+  })
			
 
				+   
			
 
				+  onMounted(() => {
			
 
				+   
			
 
				+    // 获取页面的实例对象
			
 
				+    const pageInstance = getCurrentInstance();
			
 
				+    // 获取dom节点对象
			
 
				+    const tagDomObj = pageInstance.refs.playWndBox;
			
 
				+    playWndHeight.value = tagDomObj.clientHeight;
			
 
				+    playWndWidth.value = tagDomObj.clientWidth;
			
 
				+   
			
 
				+    // 监听scroll事件，使插件窗口尺寸跟随DIV窗口变化
			
 
				+    window.addEventListener("scroll", () => {
			
 
				+      console.log(5);
			
 
				+   
			
 
				+      // return
			
 
				+      if (oWebControl.value != null) {
			
 
				+        oWebControl.JS_Resize(
			
 
				+          tagDomObj.clientWidth,
			
 
				+          tagDomObj.clientHeight
			
 
				+        );
			
 
				+        this.setWndCover();
			
 
				+      }
			
 
				+    });
			
 
				+   
			
 
				+    // 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
			
 
				+    window.addEventListener("resize", (e) => {
			
 
				+      console.log(0);
			
 
				+   
			
 
				+      if (oWebControl.value != null) {
			
 
				+        oWebControl.JS_Resize(
			
 
				+          tagDomObj.clientWidth,
			
 
				+          tagDomObj.clientHeight
			
 
				+        );
			
 
				+        this.setWndCover();
			
 
				+      }
			
 
				+    });
			
 
				+   
			
 
				+    // 初始化播放器插件
			
 
				+    nextTick(() => {
			
 
				+      initPlugin();
			
 
				+    })
			
 
				+  })
			
 
				+   
			
 
				+  onBeforeUnmount(() => {
			
 
				+    if (oWebControl.value != null) {
			
 
				+      // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
			
 
				+      oWebControl.JS_HideWnd();
			
 
				+      // 销毁当前播放的视频
			
 
				+      oWebControl.JS_RequestInterface({ funcName: "destroyWnd" });
			
 
				+      // 断开与插件服务连接
			
 
				+      oWebControl.JS_Disconnect();
			
 
				+    }
			
 
				+  })
			
 
				+   
			
 
				+   
			
 
				+   
			
 
				+  const initPlugin = () => {
			
 
				+    oWebControl = new WebControl({
			
 
				+      szPluginContainer: "playWnd", // 指定容器id
			
 
				+      iServicePortStart: 15900, // 指定起止端口号，建议使用该值
			
 
				+      iServicePortEnd: 15900,
			
 
				+      szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
			
 
				+      cbConnectSuccess: () => {
			
 
				+        // 创建WebControl实例成功
			
 
				+        oWebControl
			
 
				+          .JS_StartService("window", {
			
 
				+            // WebControl实例创建成功后需要启动服务
			
 
				+            // 值"./VideoPluginConnect.dll"写死
			
 
				+            dllPath: "./VideoPluginConnect.dll",
			
 
				+          })
			
 
				+          .then(
			
 
				+            function () {
			
 
				+              // 设置消息回调
			
 
				+              oWebControl.JS_SetWindowControlCallback({
			
 
				+                // cbIntegrationCallBack: cbIntegrationCallBack,
			
 
				+              });
			
 
				+              //JS_CreateWnd创建视频播放窗口，宽高可设定
			
 
				+              oWebControl
			
 
				+                .JS_CreateWnd("playWnd", 1152, 581, { bEmbed: true })//这一部分很重要，两个参数为你盒子的宽高，这样是写死是防止组件加载之前出现白屏；bEmbed: true 防止窗口闪烁
			
 
				+                .then(function () {
			
 
				+                  // 创建播放实例成功后初始化
			
 
				+                  init();
			
 
				+                });
			
 
				+            },
			
 
				+            function () {
			
 
				+              // 启动插件服务失败
			
 
				+            }
			
 
				+          );
			
 
				+      },
			
 
				+      // 创建WebControl实例失败
			
 
				+      cbConnectError: function () {
			
 
				+        // 这里写创建WebControl实例失败时的处理步骤,下面的代码仅做参看，具体实现步骤根据个人需求进行编写！！！！！！！！
			
 
				+   
			
 
				+   
			
 
				+        // console.log(0);
			
 
				+        // oWebControl.value = null;
			
 
				+        // // 程序未启动时执行error函数，采用wakeup来启动程序
			
 
				+        // window.WebControl.JS_WakeUp("VideoWebPlugin://");
			
 
				+        // initCount++;
			
 
				+        // if (initCount < 3) {
			
 
				+        //   setTimeout(function () {
			
 
				+        //     initPlugin();
			
 
				+        //   }, 3000);
			
 
				+        // } else {
			
 
				+        //   setTimeout(function () {
			
 
				+        //     setTimeout(function () {
			
 
				+        //       $router.push('/home/PlugDown')
			
 
				+        //     }, 4000)
			
 
				+        //   }, 4000)
			
 
				+        // }
			
 
				+      },
			
 
				+      cbConnectClose: () => {
			
 
				+        // 异常断开：bNormalClose = false
			
 
				+        // JS_Disconnect正常断开：bNormalClose = true
			
 
				+        // console.log("cbConnectClose");
			
 
				+        oWebControl.value = null;
			
 
				+      },
			
 
				+    });
			
 
				+    // oWebControl.JS_CuttingPartWindow(500, 500, 500, 500);
			
 
				+   
			
 
				+  }
			
 
				+   
			
 
				+   
			
 
				+   
			
 
				+   
			
 
				+  // 初始化
			
 
				+  const init = (callback) => {
			
 
				+    getPubKey(() => {
			
 
				+      let appkey = objData.value.appkey;                   //综合安防管理平台提供的appkey，必填
			
 
				+      let secret = setEncrypt(objData.value.secret); //综合安防管理平台提供的secret，必填
			
 
				+      let ip = objData.value.ip;                           //综合安防管理平台IP地址，必填
			
 
				+      let playMode = objData.value.playMode;                //初始播放模式：0-预览，1-回放
			
 
				+      let port = objData.value.port;                        //综合安防管理平台端口，若启用HTTPS协议，默认443
			
 
				+      let snapDir = "D:\\SnapDir";                        //抓图存储路径
			
 
				+      let videoDir = "D:\\VideoDir";                      //紧急录像或录像剪辑存储路径
			
 
				+      let layout = objData.value.layout;                   //playMode指定模式的布局
			
 
				+      let enableHTTPS = 1;                                //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
			
 
				+      let encryptedFields = "secret";                     //加密字段，默认加密领域为secret
			
 
				+      let showToolbar = 1;                                //是否显示工具栏，0-不显示，非0-显示
			
 
				+      let showSmart = 0;                                  //是否显示移动框线框，0-不显示，非0-显示
			
 
				+      let buttonIDs =
			
 
				+        "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮
			
 
				+      // var toolBarButtonIDs = "2049,2304" // 工具栏上自定义按钮
			
 
				+      oWebControl
			
 
				+        .JS_RequestInterface({
			
 
				+          funcName: "init",
			
 
				+          argument: JSON.stringify({
			
 
				+            appkey: appkey,         //API网关提供的appkey
			
 
				+            secret: secret,         //API网关提供的secret
			
 
				+            ip: ip,                 //API网关IP地址
			
 
				+            playMode: playMode,      //播放模式（决定显示预览还是回放界面）
			
 
				+            port: port,             //端口
			
 
				+            snapDir: snapDir,       //抓图存储路径
			
 
				+            videoDir: videoDir,     //紧急录像或录像剪辑存储路径
			
 
				+            layout: layout,         //布局
			
 
				+            enableHTTPS: enableHTTPS,   //是否启用HTTPS协议
			
 
				+            encryptedFields: encryptedFields, //加密字段
			
 
				+            showToolbar: showToolbar, //是否显示工具栏
			
 
				+            showSmart: showSmart,   //是否显示智能信息
			
 
				+            buttonIDs,              //自定义工具条按钮
			
 
				+          }),
			
 
				+        })
			
 
				+        .then(function (oData) {
			
 
				+          oWebControl.JS_Resize(playWndWidth.value, playWndHeight.value); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
			
 
				+          if (callback) {
			
 
				+            callback();
			
 
				+          }
			
 
				+          // 隐藏
			
 
				+          // oWebControl.JS_HideWnd()
			
 
				+        });
			
 
				+    });
			
 
				+  }
			
 
				+   
			
 
				+  // RSA 加密
			
 
				+  let setEncrypt = (value) => {
			
 
				+    let encrypt = new window.JSEncrypt();
			
 
				+    encrypt.setPublicKey(pubKey);
			
 
				+    return encrypt.encrypt(value);
			
 
				+  }
			
 
				+  // 获取公钥
			
 
				+  const getPubKey = (callback) => {
			
 
				+    oWebControl
			
 
				+      .JS_RequestInterface({
			
 
				+        funcName: "getRSAPubKey",
			
 
				+        argument: JSON.stringify({
			
 
				+          keyLength: 1024,
			
 
				+        }),
			
 
				+      })
			
 
				+      .then(function (oData) {
			
 
				+        if (oData.responseMsg.data) {
			
 
				+          pubKey = oData.responseMsg.data;
			
 
				+          callback();
			
 
				+        }
			
 
				+      });
			
 
				+  }
			
 
				+   
			
 
				+   
			
 
				+   
			
 
				+  // 调用这个函数可进行视频播放
			
 
				+  // 视频预览功能
			
 
				+  const previewVideo = (data) => {
			
 
				+    let cameraIndexCode = data;  // 获取输入的监控点编号值，必填
			
 
				+    let streamMode = 0;          // 主子码流标识：0-主码流，1-子码流
			
 
				+    let transMode = 1;           // 传输协议：0-UDP，1-TCP
			
 
				+    let gpuMode = 0;             // 是否启用GPU硬解，0-不启用，1-启用
			
 
				+    let wndId = -1;              // 播放窗口序号（在2x2以上布局下可指定播放窗口）
			
 
				+   
			
 
				+    oWebControl.JS_RequestInterface({
			
 
				+      funcName: "startPreview",
			
 
				+      argument: JSON.stringify({
			
 
				+        cameraIndexCode: cameraIndexCode, // 监控点编号
			
 
				+        streamMode: streamMode,                 // 主子码流标识
			
 
				+        transMode: transMode,                   // 传输协议
			
 
				+        gpuMode: gpuMode,                       // 是否开启GPU硬解
			
 
				+        wndId: wndId,                           // 可指定播放窗口
			
 
				+      }),
			
 
				+    })
			
 
				+      .then(function () {
			
 
				+        oWebControl.JS_SetWindowControlCallback({
			
 
				+   
			
 
				+        });
			
 
				+      });
			
 
				+  }
			
 
				+   
			
 
				+  </script>
			
 
				+   
			
 
				+  <style lang="scss" scoped>
			
 
				+  .main {
			
 
				+    position: fixed;
			
 
				+    top: 50%;
			
 
				+    left: 20%;
			
 
				+    transform: translateY(-50%);
			
 
				+    width: 60vw;
			
 
				+    height: 60vh;
			
 
				+    margin: auto;
			
 
				+    background-color: #ccc;
			
 
				+  }
			
 
				+  </style>
			
--- a/src/views/index/index.vue
+++ b/src/views/index/index.vue
@@ -15,14 +15,15 @@
 
				         <LeftBottom />
			
 
				       </ItemWrap>
			
 
				     </div>
			
 
				-    <div class="contetn_center">
			
 
				-      <!-- <CenterMap class="contetn_center_top" title="设备分布图" />
			
 
				-      <ItemWrap class="contetn_center-bottom" title="安装计划">
			
 
				-        <CenterBottom />
			
 
				-      </ItemWrap> -->
			
 
				-
			
 
				+    <div @mousedown="mousedownFn" @mouseup="mouseupFn" @mouseleave="mouseleaveFn" class="contetn_center" id="contetn_center">
			
 
				+      <Iot3d v-if="shouldShowComponent" :style="{ 'z-index': ifIndex ? 200 : 1 }"  />
			
 
				+    </div>
			
 
				+    <div class="contetn_centerbottom">
			
 
				+      <ItemWrap class="contetn_center-bottom contetn_lr-item" title="视频监控">
			
 
				+        <!-- <CenterBottom /> -->
			
 
				+      </ItemWrap>
			
 
				     </div>
			
 
				-    <div class="contetn_bottom">
			
 
				+    <div class="contetn_bottom" id="contetn_bottom">
			
 
				       <n-button strong secondary type="info" class="tech-button" @click="$router.push('/message')">
			
 
				         <template #icon>
			
 
				           <n-icon size="20">
			
@@ -144,6 +145,7 @@
 
				   </div>
			
 
				 </template>
			
 
				 <script setup lang="ts">
			
 
				+import { ref } from 'vue'
			
 
				 import ItemWrap from "@/components/item-wrap";
			
 
				 import LeftTop from "./left-top.vue";
			
 
				 import LeftCenter from "./left-center.vue";
			
@@ -155,57 +157,101 @@ 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';
			
 
				+const shouldShowComponent = ref(true);
			
 
				+const ifIndex = ref(false)
			
 
				+const mousedownFn = () => {
			
 
				+  console.log('1')
			
 
				+  ifIndex.value = true
			
 
				+}
			
 
				+const mouseupFn = () => {
			
 
				+  console.log('2')
			
 
				+  ifIndex.value = false
			
 
				+}
			
 
				+const mouseleaveFn = () => {
			
 
				+  console.log('3');
			
 
				+  console.log(ifIndex.value);
			
 
				+  // ifIndex.value = false;
			
 
				+};
			
 
				+onBeforeRouteLeave((to, from, next) => {
			
 
				+  shouldShowComponent.value = false;
			
 
				+  // 执行任何必要的清理工作
			
 
				+  next();
			
 
				+});
			
 
				 </script>
			
 
				 
			
 
				 
			
 
				 <style scoped lang="scss">
			
 
				 .index-box {
			
 
				   width: 100%;
			
 
				-  display: flex;
			
 
				+  position: relative;
			
 
				+  /* 添加相对定位，作为参考容器 */
			
 
				   min-height: calc(100% - 64px);
			
 
				+  display: flex;
			
 
				   justify-content: space-between;
			
 
				   align-items: stretch;
			
 
				 }
			
 
				 
			
 
				-//左边 右边 结构一样
			
 
				-.contetn_left,
			
 
				-.contetn_right {
			
 
				+.contetn_left {
			
 
				   display: flex;
			
 
				   flex-direction: column;
			
 
				   justify-content: space-around;
			
 
				-  position: relative;
			
 
				+  position: absolute;
			
 
				+  left: 0;
			
 
				   width: 440px;
			
 
				-  box-sizing: border-box;
			
 
				-  flex-shrink: 0;
			
 
				-  margin: 0 -20px;
			
 
				+  // box-sizing: border-box;
			
 
				+  // flex-shrink: 0;
			
 
				+  // margin: 0 -20px;
			
 
				+  // z-index: 100;
			
 
				+  // transform: translateX(10px);
			
 
				+  /* 向左“浮动” */
			
 
				+  // transition: transform 0.3s ease;
			
 
				+  /* 添加过渡效果 */
			
 
				 }
			
 
				 
			
 
				-.contetn_center {
			
 
				-  flex: 1;
			
 
				-  margin: 0 54px;
			
 
				+.contetn_right {
			
 
				   display: flex;
			
 
				   flex-direction: column;
			
 
				   justify-content: space-around;
			
 
				+  position: absolute;
			
 
				+  right: 0;
			
 
				+  width: 440px;
			
 
				+  // box-sizing: border-box;
			
 
				+  // flex-shrink: 0;
			
 
				+  // margin: 0 -20px;
			
 
				+  // z-index: 100;
			
 
				+  // transform: translateX(335%);
			
 
				+  // /* 向右“浮动” */
			
 
				+  // transition: transform 0.3s ease;
			
 
				+  /* 添加过渡效果 */
			
 
				+}
			
 
				+
			
 
				 
			
 
				-  .contetn_center-bottom {
			
 
				-    height: 315px;
			
 
				-  }
			
 
				+.contetn_center {
			
 
				+  display: flex;
			
 
				+  align-items: center;
			
 
				+  justify-content: center;
			
 
				 }
			
 
				 
			
 
				 .contetn_lr-item {
			
 
				   height: 310px;
			
 
				+  font-size: large;
			
 
				 }
			
 
				 
			
 
				 .contetn_bottom {
			
 
				   width: 100%;
			
 
				-  /* 占据整个宽度 */
			
 
				   margin-top: auto;
			
 
				-  /* 使用margin-top:auto来将内容推到最底部 */
			
 
				   position: absolute;
			
 
				+  /* 添加绝对定位 */
			
 
				   bottom: 0;
			
 
				   display: flex;
			
 
				   justify-content: center;
			
 
				+  transform: translateY(-10px);
			
 
				+  /* 向上“浮动”10px */
			
 
				+  transition: transform 0.3s ease;
			
 
				+  /* 添加过渡效果 */
			
 
				 }
			
 
				 
			
 
				 .tech-button {
			
@@ -215,4 +261,24 @@ import { NIcon } from "naive-ui";
 
				   min-height: 48px;
			
 
				   font-size: large;
			
 
				 }
			
 
				+
			
 
				+.contetn_centerbottom {
			
 
				+  position: absolute;
			
 
				+  bottom: 0;
			
 
				+  width: 100%;
			
 
				+  height: 320px;
			
 
				+  margin-left: 25px;
			
 
				+}
			
 
				+
			
 
				+.contetn_center-bottom {
			
 
				+  display: flex;
			
 
				+  align-items: center;
			
 
				+  justify-content: center;
			
 
				+  /* 根据需要设置宽度 */
			
 
				+  width: calc(50% - 10px);
			
 
				+  /* 假设每个元素之间有20px的间距 */
			
 
				+  margin-left: 450px;
			
 
				+  margin-top: -55px;
			
 
				+  font-size: large;
			
 
				+}
			
 
				 </style>
			
--- a/src/views/index/iot3d.vue
+++ b/src/views/index/iot3d.vue
@@ -0,0 +1,26 @@
 
				+<template>
			
 
				+  <div id="iot3d"></div>
			
 
				+</template>
			
 
				+
			
 
				+<script setup>
			
 
				+import { ref,onMounted } from 'vue';
			
 
				+import { IOT3D } from 'https://vdata.baozhida.cn/3d1v/static/js/version/IOT3Dv2.2.js';
			
 
				+const canvasRef = ref()
			
 
				+onMounted(()=>{
			
 
				+  const iot3d = new IOT3D('iot3d', false);
			
 
				+  iot3d.loadProject('W2N495VQH1UPGIFJKSZEMOY0C637AT8R', true, () => {
			
 
				+    iot3d.GetRenderer().setClearColor(0x000000, 0);
			
 
				+    iot3d.GetRenderer().setSize(window.innerWidth, window.innerHeight);
			
 
				+    iot3d.GetRenderer().setPixelRatio(window.devicePixelRatio);
			
 
				+  });
			
 
				+})
			
 
				+
			
 
				+
			
 
				+</script>
			
 
				+<!-- <style lang="scss">
			
 
				+  #iot3d{
			
 
				+    display: flex;
			
 
				+    justify-content: center;
			
 
				+    align-items: center;
			
 
				+  }
			
 
				+</style> -->
			
--- a/src/views/index/monitoring.vue
+++ b/src/views/index/monitoring.vue
@@ -35,10 +35,10 @@ import { ref, reactive } from "vue";
 
				 const selectedLineType = ref('sixteen'); // 默认为十六路
			
 
				 
			
 
				 const videoUrls = ref([
			
 
				-  "https://www.adwest.cn/public/uploads/image/20240227/125244_735.mp4",
			
 
				-  "http://192.168.1.102:800/live/test1.flv",
			
 
				-  "http://192.168.1.102:800/live/test2.flv",
			
 
				-  "http://192.168.1.102:800/live/test.flv",
			
 
				+  "rtmp://ns8.indexforce.com/home/mystream",
			
 
				+  "https://cph-p2p-msl.akamaized.net/hls/live/2000341/test/master.m3u8",
			
 
				+  "https://devstreaming-cdn.apple.com/videos/streaming/examples/img_bipbop_adv_example_fmp4/master.m3u8",
			
 
				+  "https://demo.unified-streaming.com/k8s/features/stable/video/tears-of-steel/tears-of-steel.ism/.m3u8",
			
 
				   "http://192.168.1.102:800/live/test.flv",
			
 
				   "http://192.168.1.102:800/live/test.flv",
			
 
				   "http://192.168.1.102:800/live/test.flv",
			
--- a/src/views/index/right-center.vue
+++ b/src/views/index/right-center.vue
@@ -1,3 +1,23 @@
 
				+<template>
			
 
				+  <ul class="user_Overview flex">
			
 
				+    <li class="user_Overview-item" style="color: #f0e728">
			
 
				+      <img src="@/assets/img/co2.png" class="user_Overview_image">
			
 
				+      <p>20</p>
			
 
				+    </li>
			
 
				+    <li class="user_Overview-item" style="color: #c11f6f">
			
 
				+      <img src="@/assets/img/hcho.png" style="width: 90%;margin-top: 60px;" class="user_Overview_image">
			
 
				+      <p>20</p>
			
 
				+    </li>
			
 
				+    <li class="user_Overview-item" style="color: #1196dd">
			
 
				+      <img src="@/assets/img/pm2.5.png" style="width: 80%;margin-top: 70px;" class="user_Overview_image">
			
 
				+      <p>10</p>
			
 
				+    </li>
			
 
				+    <li class="user_Overview-item" style="color: #24bb01">
			
 
				+      <img src="@/assets/img/tvoc.png" style="width: 80%; margin-top: 70px;" class="user_Overview_image">
			
 
				+      <p>20</p>
			
 
				+    </li>
			
 
				+  </ul>
			
 
				+</template>
			
 
				 <script setup lang="ts">
			
 
				 import { ref, reactive } from "vue";
			
 
				 import CapsuleChart from "@/components/datav/capsule-chart";
			
@@ -28,99 +48,21 @@ const getData = () => {
 
				 };
			
 
				 getData();
			
 
				 </script>
			
 
				-
			
 
				-<template>
			
 
				-  <ul class="user_Overview flex">
			
 
				-    <li class="user_Overview-item" style="color: #f0e728">
			
 
				-      <div class="user_Overview_nums allnum">
			
 
				-      </div>
			
 
				-      <p>20</p>
			
 
				-    </li>
			
 
				-    <li class="user_Overview-item" style="color: #c11f6f">
			
 
				-      <div class="user_Overview_nums online">
			
 
				-      </div>
			
 
				-      <p>20</p>
			
 
				-    </li>
			
 
				-    <li class="user_Overview-item" style="color: #1196dd">
			
 
				-      <div class="user_Overview_nums offline">
			
 
				-      </div>
			
 
				-      <p>10</p>
			
 
				-    </li>
			
 
				-    <li class="user_Overview-item" style="color: #24bb01">
			
 
				-      <div class="user_Overview_nums laramnum">
			
 
				-      </div>
			
 
				-      <p>20</p>
			
 
				-    </li>
			
 
				-  </ul>
			
 
				-</template>
			
 
				-
			
 
				 <style scoped lang="scss">
			
 
				-.right_bottom {
			
 
				-  box-sizing: border-box;
			
 
				-  padding: 0 16px;
			
 
				+.user_Overview_image {
			
 
				+  width: 100%;
			
 
				+  /* 或者指定具体的宽度 */
			
 
				+  height: auto;
			
 
				+  /* 自动调整高度 */
			
 
				+  display: block;
			
 
				+  /* 防止文本环绕图片 */
			
 
				+  margin: 50px auto 30px;
			
 
				+  /* 保持原有的外边距 */
			
 
				 }
			
 
				-.user_Overview {
			
 
				-  li {
			
 
				-    flex: 1;
			
 
				-
			
 
				-    p {
			
 
				-      text-align: center;
			
 
				-      height: 16px;
			
 
				-      font-size: 30px;
			
 
				-    }
			
 
				 
			
 
				-    .user_Overview_nums {
			
 
				-      width: 100px;
			
 
				-      height: 100px;
			
 
				-      text-align: center;
			
 
				-      line-height: 100px;
			
 
				-      font-size: 18px;
			
 
				-      margin: 50px auto 30px;
			
 
				-      background-size: cover;
			
 
				-      background-position: center center;
			
 
				-      position: relative;
			
 
				-
			
 
				-      &::before {
			
 
				-        content: "";
			
 
				-        position: absolute;
			
 
				-        width: 100%;
			
 
				-        height: 100%;
			
 
				-        top: 0;
			
 
				-        left: 0;
			
 
				-      }
			
 
				-
			
 
				-      &.bgdonghua::before {
			
 
				-        animation: rotating 14s linear infinite;
			
 
				-      }
			
 
				-    }
			
 
				-
			
 
				-    .allnum {
			
 
				-      &::before {
			
 
				-        background-image: url("@/assets/img/co2.png");
			
 
				-        background-size: cover;
			
 
				-      }
			
 
				-    }
			
 
				-
			
 
				-    .online {
			
 
				-      &::before {
			
 
				-        background-image: url("@/assets/img/hcho.png");
			
 
				-        background-size: cover;
			
 
				-      }
			
 
				-    }
			
 
				-
			
 
				-    .offline {
			
 
				-      &::before {
			
 
				-        background-image: url("@/assets/img/pm2.5.png");
			
 
				-        background-size: cover;
			
 
				-      }
			
 
				-    }
			
 
				-    
			
 
				-    .laramnum {
			
 
				-      &::before {
			
 
				-        background-image: url("@/assets/img/tvoc.png");
			
 
				-        background-size: cover;
			
 
				-      }
			
 
				-    }
			
 
				-  }
			
 
				+p {
			
 
				+  text-align: center;
			
 
				+  height: 16px;
			
 
				+  font-size: 30px;
			
 
				 }
			
 
				 </style>
			
--- a/src/views/index/user.vue
+++ b/src/views/index/user.vue
@@ -28,6 +28,7 @@
 
				             <td>
			
 
				               <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="handleDelete(index)">启用</n-button>
			
 
				               <n-button strong secondary type="warning" class="edtbtn" size="large" @click="handleDelete(index)">禁用</n-button>
			
 
				               <n-button strong secondary type="error" class="edtbtn" size="large" @click="handleDelete(index)">删除</n-button>
			
 
				             </td>