Merge pull request 'master' (#41) from master into dev

Reviewed-on: http://git.feashow.cn/clay/tunnel-cloud-web/pulls/41

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.1",
+    "autofit.js": "^3.0.4",
     "axios": "^1.4.0",
     "echarts": "^5.4.2",
     "element-plus": "^2.3.5",

src/App.vue

@@ -1,7 +1,31 @@
 <template>
-  <RouterView />
+  <RouterView/>
 </template>
 
 <script setup>
+import autofit from 'autofit.js';
 
+onMounted(() => {
+  autofit.init({
+    dh: 2160,
+    dw: 3840,
+    el: "#app",
+    resize: true,
+    ignore: [
+      {
+        el: "#tunnel-box", //必填
+        height: "100vh", //可选，需注明单位
+        width: "100vw", //可选，需注明单位
+      }, {
+        el: "#login-box", //必填
+        height: "100vh", //可选，需注明单位
+        width: "100vw", //可选，需注明单位
+      },{
+        el: "#chat-box", //必填
+        height: "100vh", //可选，需注明单位
+        width: "100vw", //可选，需注明单位
+      }
+    ],
+  });
+});
 </script>

src/components/content/tunnelScene/TunnelScene.vue

@@ -48,13 +48,13 @@ async function handleMounted() {
 
   try {
     const deviceList = [];
-    let result = await loadModel("../../../../public/devicesModel/Camera.obj");
+    let result = await loadModel("/devicesModel/Camera.obj");
     deviceList.push(result);
-    result = await loadModel("../../../../public/devicesModel/box_device.obj");
+    result = await loadModel("/devicesModel/box_device.obj");
     deviceList.push(result);
-    result = await loadModel("../../../../public/devicesModel/dev2.obj");
+    result = await loadModel("/devicesModel/dev2.obj");
     deviceList.push(result);
-    result = await loadModel("../../../../public/devicesModel/dev3.obj");
+    result = await loadModel("/devicesModel/dev3.obj");
     deviceList.push(result);
   } catch (e) {}
   // demo.initDevicesModel();

src/components/content/tunnelScene/childComp/EditDev.vue

@@ -37,7 +37,7 @@ function initDevicesModel() {
 
 const devItem = {
   devName: "传感器",
-  devImgUrl: "../../../../../public/images/camera.jpg",
+  devImgUrl: "/images/camera.jpg",
 };
 const list = [devItem, devItem, devItem, devItem];
 
@@ -45,7 +45,7 @@ const devicesList = reactive(list);
 const checkIndex = ref(0);
 //选择设备
 function checkDev(key) {
-  checkIndex = key;
+  checkIndex.value = key;
   emit("checkDev", key); //携带参数发射事件
 }
 // 添加设备

src/components/content/tunnelScene/sceneClass/demo.js

@@ -126,7 +126,7 @@ export default class Demo {
     return new Promise((resolve, reject) => {
       this.gltfloader = new GLTFLoader();
       this.gltfloader.load(
-        "../../../../../public/tunnelModel/chanel.glb",
+        "/tunnelModel/chanel.glb",
         (gltf) => {
           gltf.scene.traverse((child) => {
             this._forModels(child);
@@ -418,19 +418,19 @@ export default class Demo {
   loadeOBJModel() {
     this.devMap = new Map();
     this.OBJLoader.load(
-      "../../../../../public/devicesModel/Camera.obj",
+      "/devicesModel/Camera.obj",
       callBack.bind(this, "dev_1")
     );
     this.OBJLoader.load(
-      "../../../../../public/devicesModel/Camera.obj",
+      "/devicesModel/Camera.obj",
       callBack.bind(this, "dev_2")
     );
     this.OBJLoader.load(
-      "../../../../../public/devicesModel/Camera.obj",
+      "/devicesModel/Camera.obj",
       callBack.bind(this, "dev_3")
     );
     this.OBJLoader.load(
-      "../../../../../public/devicesModel/Camera.obj",
+      "/devicesModel/Camera.obj",
       callBack.bind(this, "camera")
     );
     function callBack(param, model) {

src/views/home/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div id="chat-box">
     <div class="chat-box">
       <div>
         <span>请输入序列号: </span>
@@ -127,4 +127,4 @@ const handleClear = () => {
   top: 0;
   right: 0;
 }
-</style>
+</style>

src/views/login/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="login-box">
+  <div class="login-box" id="login-box">
     <el-form
         :model="loginForm"
         ref="formInstance"

src/views/tunnel/index.vue

@@ -1,9 +1,13 @@
 <template>
-  <tunnel-scene />
+  <div>
+    <tunnel-scene id="tunnel-box"/>
+  </div>
 </template>
 
 <script setup>
 import TunnelScene from "@/components/content/tunnelScene/TunnelScene.vue";
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+
+</style>