Home Explore Help
Register Sign In
huangyan
/
bigdatascreen
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

解决3d可视化引入导致全屏失败

huangyan 9 months ago
parent
96ee366ac3
commit
095acea331
14 changed files with 595 additions and 222 deletions
Split View Show Diff Stats
  1. 31 12
      index.html
  2. 1 0
      public/jquery-1.12.4.min.js
  3. 0 0
      public/jsencrypt.min.js
  4. 121 84
      src/assets/css/main.scss
  5. 2 2
      src/config/UtilVar.ts
  6. 2 2
      src/main.ts
  7. 2 1
      src/views/HomeView.vue
  8. 14 2
      src/views/LoginView.vue
  9. 268 0
      src/views/index/haikan.vue
  10. 90 24
      src/views/index/index.vue
  11. 26 0
      src/views/index/iot3d.vue
  12. 4 4
      src/views/index/monitoring.vue
  13. 33 91
      src/views/index/right-center.vue
  14. 1 0
      src/views/index/user.vue

+ 31 - 12
index.html
View File 

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

File diff suppressed because it is too large
+ 1 - 0
public/jquery-1.12.4.min.js


File diff suppressed because it is too large
+ 0 - 0
public/jsencrypt.min.js


+ 121 - 84
src/assets/css/main.scss
View File 

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

+ 2 - 2
src/config/UtilVar.ts
View File 

@@ -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:()=>{

+ 2 - 2
src/main.ts
View File 

@@ -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]
 
   })

+ 2 - 1
src/views/HomeView.vue
View File 

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

+ 14 - 2
src/views/LoginView.vue
View File 

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

+ 268 - 0
src/views/index/haikan.vue
View File 

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

+ 90 - 24
src/views/index/index.vue
View File 

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

+ 26 - 0
src/views/index/iot3d.vue
View File 

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

+ 4 - 4
src/views/index/monitoring.vue
View File 

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

+ 33 - 91
src/views/index/right-center.vue
View File 

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

+ 1 - 0
src/views/index/user.vue
View File 

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

Some files were not shown because too many files changed in this diff