优化 实时地图及uwb优化、井下总人员数查询优化

package-lock.json

@@ -30,7 +30,7 @@
         "openlayers": "^4.6.4",
         "papaparse": "^4.3.6",
         "socket.io-client": "^2.0.4",
-        "three": "^0.127.0",
+        "three": "^0.128.0",
         "three-obj-loader": "^1.1.3",
         "three-stdlib": "^2.30.3",
         "vue": "^2.6.14",
@@ -13336,9 +13336,9 @@
       }
     },
     "node_modules/three": {
-      "version": "0.127.0",
-      "resolved": "https://registry.npmmirror.com/three/-/three-0.127.0.tgz",
-      "integrity": "sha512-wtgrn+mhYUbobxT7QN3GPdu3SRpSBQvwY6uOzLChWS7QE//f7paDU/+wlzbg+ngeIvBBqjBHSRuywTh8A99Jng=="
+      "version": "0.128.0",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.128.0.tgz",
+      "integrity": "sha512-i0ap/E+OaSfzw7bD1TtYnPo3VEplkl70WX5fZqZnfZsE3k3aSFudqrrC9ldFZfYFkn1zwDmBcdGfiIm/hnbyZA=="
     },
     "node_modules/three-obj-loader": {
       "version": "1.1.3",
@@ -24916,9 +24916,9 @@
       }
     },
     "three": {
-      "version": "0.127.0",
-      "resolved": "https://registry.npmmirror.com/three/-/three-0.127.0.tgz",
-      "integrity": "sha512-wtgrn+mhYUbobxT7QN3GPdu3SRpSBQvwY6uOzLChWS7QE//f7paDU/+wlzbg+ngeIvBBqjBHSRuywTh8A99Jng=="
+      "version": "0.128.0",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.128.0.tgz",
+      "integrity": "sha512-i0ap/E+OaSfzw7bD1TtYnPo3VEplkl70WX5fZqZnfZsE3k3aSFudqrrC9ldFZfYFkn1zwDmBcdGfiIm/hnbyZA=="
     },
     "three-obj-loader": {
       "version": "1.1.3",

package.json

@@ -30,7 +30,7 @@
     "openlayers": "^4.6.4",
     "papaparse": "^4.3.6",
     "socket.io-client": "^2.0.4",
-    "three": "^0.127.0",
+    "three": "^0.128.0",
     "three-obj-loader": "^1.1.3",
     "three-stdlib": "^2.30.3",
     "vue": "^2.6.14",

src/main.js

@@ -83,9 +83,9 @@ Vue.use(vuescroll, {
 
 Vue.config.productionTip = false;
 
-var strIp = "121.42.8.157:19702";
+// var strIp = "121.42.8.157:19702";
 // var strIp = "192.168.1.100:19700";
-// var strIp = "192.168.1.213:19703"; // 江东
+var strIp = "192.168.10.100:19703"; // 江东
 
 
 Vue.use(

src/model/Area.js

@@ -1,5 +1,5 @@
 import * as THREE from 'three'
-import { Face3, Geometry } from 'three/examples/jsm/deprecated/Geometry';
+// import { Face3, Geometry } from 'three/examples/jsm/deprecated/Geometry';
 const textureLoader = new THREE.TextureLoader();
 textureLoader.setCrossOrigin('anonymous');
 const greenTower = textureLoader.load('../images/reader_w.png');

src/uwb-sample.js

@@ -10,10 +10,11 @@ import * as THREE from 'three'
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
 // import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
-import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'
+// import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'
 // import * as objlibrary from 'three-obj-loader'
 // import { MTLLoader } from 'three/examples/js/loaders/MTLLoader.js';
 // import { OBJLoader } from 'three/examples/js/loaders/OBJLoader.js';
+// import { STLLoader } from 'three/examples/jsm/loaders/STLLoader.js';
 
 // import mineModel from './assets/models/mine.glb';
 // import minerModel from './assets/models/miner.glb';
@@ -45,11 +46,13 @@ let axesHelper
 let hesLight, dirLight, sportLight
 let controls, controlsAll
 let diffWidth = ((window.innerWidth * 0.0828) - 40) / 2;
+let diffHeight = window.innerHeight;
 let globalMesh = null;
 let meshList = [];
 let normalShader = null;
 let hoverShader = null;
 
+const scale = 0.2;
 const clock = new THREE.Clock();
 
 let positionInterval = null;
@@ -86,51 +89,52 @@ let moveY = 0;
 let moveZ = 0;
 let moveFlag = false;
 
-let minerMap = {};
-let cardList = [];
+let minerMap = {}
+let cardList = []
 
-let flagList = [];
-let staffList = [];
+let flagList = []
+let staffList = []
 let towerList = []
 let warnList = []
 let locationList = []
 let cameraList = []
 let areaList = []
 
-flagList.push({
-  index: 0,
-  x: 0,
-  y: 0.5,
-  z: -187
-})
-
-flagList.push({
-  index: 1,
-  x: 0.5,
-  y: 2.5,
-  z: -185
-})
 
-flagList.push({
-  index: 2,
-  x: -0.5,
-  y: 2.3,
-  z: -182
-})
-
-flagList.push({
-  index: 3,
-  x: 0.5,
-  y: 2.3,
-  z: -170
-})
+function getFalg() {
+  let flag1 = {
+    index: 0,
+    x: 0,
+    y: 0.5,
+    z: -187
+  }
+  let flag2 = {
+    index: 1,
+    x: 0.5,
+    y: 2.5,
+    z: -185
+  }
+  let flag3 = {
+    index: 2,
+    x: -0.5,
+    y: 2.3,
+    z: -182
+  }
+  let flag4 = {
+    index: 3,
+    x: 0.5,
+    y: 2.3,
+    z: -170
+  }
+  let flag5 = {
+    index: 4,
+    x: 0,
+    y: 2.3,
+    z: -160
+  }
 
-flagList.push({
-  index: 4,
-  x: 0,
-  y: 2.3,
-  z: -160
-})
+  flagList.push(flag1, flag2, flag3, flag4, flag5)
+}
 
 function getCardPos() {
   var sqlstr = `SELECT
@@ -373,42 +377,42 @@ function initLight() {
   // sportLight.position.set(0, 10, 10)
   // scene.add(sportLight)
 }
+
+function refreshStaff() {
+  getCardPos()
+  setTimeout(refreshStaff, 1000);
+}
 function initMesh() {
+  getFalg()
+  refreshStaff()
   // getCardPos()
   getTowerPos()
   getWarn()
   getLandMark()
   getCamera()
   getArea()
-
-  refreshStaff()
-}
-
-function refreshStaff() {
-  getCardPos()
-  setTimeout(refreshStaff, 1000);
 }
 
 function initCamera() {
-  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100)
-  camera.near = 0.0000001;
+  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.000000001, 10000)
+  // camera.near = 0.000000001;
   // camera.position.set(0, 2, -191)
   // camera.lookAt(new THREE.Vector3(0, 10, 180));
   // camera.position.set(0, 300, 0)
-  camera.position.set(0, 100, 0)
-  camera.lookAt(scene.position)
+  // camera.lookAt(scene.position)
+  camera.position.set(100, 100, 0)
 
-  // // 获取当前相机的欧拉角（Euler angles）
-  // var euler = new THREE.Euler();
-  // euler.setFromQuaternion(camera.quaternion);
+  // 获取当前相机的欧拉角（Euler angles）
+  var euler = new THREE.Euler();
+  euler.setFromQuaternion(camera.quaternion);
 
-  // // 根据需求调整欧拉角
-  // euler.y = 0; // 按Y轴正方向旋转90°
-  // euler.x = 0;
-  // euler.z = 0;
+  // 根据需求调整欧拉角
+  euler.y = 0; // 按Y轴正方向旋转90°
+  euler.x = 0;
+  euler.z = 0;
 
-  // // 更新相机的四元数表示形式
-  // camera.quaternion.setFromEuler(euler);
+  // 更新相机的四元数表示形式
+  camera.quaternion.setFromEuler(euler);
 
   // cameraAll = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100)
   // cameraAll.position.set(20, 50, -50)
@@ -426,15 +430,15 @@ function initCamera() {
   // // 更新相机的四元数表示形式
   // cameraAll.quaternion.setFromEuler(euler);
 
-  // hesLight = new THREE.HemisphereLight(0xff00ff, 0x444444)
-  // hesLight.intensity = 0.3
-  // camera.add(hesLight)
-  // dirLight = new THREE.DirectionalLight(0x00ff00)
-  // dirLight.position.set(0, 0, 5)
-  // camera.add(dirLight)
-  // sportLight = new THREE.SpotLight(0xffff00)
-  // sportLight.position.set(0, 0, 10)
-  // camera.add(sportLight)
+  hesLight = new THREE.HemisphereLight(0xff00ff, 0x444444)
+  hesLight.intensity = 0.3
+  camera.add(hesLight)
+  dirLight = new THREE.DirectionalLight(0x00ff00)
+  dirLight.position.set(0, 0, 5)
+  camera.add(dirLight)
+  sportLight = new THREE.SpotLight(0xffff00)
+  sportLight.position.set(0, 0, 10)
+  camera.add(sportLight)
 }
 function initRenderer() {
   let playerRT = document.getElementById('playerRT')
@@ -460,19 +464,19 @@ window.resize3D = () => {
 }
 
 function animate() {
-  // requestAnimationFrame(animate)
   if (moveFlag) {
     moveFlag = false
     // 移动相机
     var position = new THREE.Vector3();
     var target = new THREE.Vector3();
     var tween = new TWEEN.Tween(camera.position)
-      .to({ x: moveX, y: moveY + 0.5, z: moveZ - 3 }, 500)
+      // .to({ x: moveX, y: moveY + 0.5, z: moveZ - 3 }, 500)
+      .to({ x: moveX, y: moveY, z: moveZ }, 500)
       .onUpdate(() => {
         if (all360ButtonClicked) {
-          camera.lookAt(0, 100, 0)
+          camera.lookAt(0, 0, 0)
         } else {
-          camera.lookAt(moveX, moveY, moveZ)
+          camera.lookAt(0, 0, 0)
         }
 
       })
@@ -487,7 +491,7 @@ function animate() {
     setTimeout(() => { going = false }, 500)
 
     // 创建一个新的Vector3对象作为旋转中心的位置
-    var newCenter = all360ButtonClicked ? new THREE.Vector3(0, 0, -100) : new THREE.Vector3(moveX, moveY, moveZ); // 这里的值根据需求进行调整
+    var newCenter = all360ButtonClicked ? new THREE.Vector3(0, 0, 0) : new THREE.Vector3(0, 0, 0); // 这里的值根据需求进行调整
 
     // 计算当前场景的所有物体与旧旋转中心之间的距离向量
     var offset = scene.position.clone().sub(newCenter).multiplyScalar(-1);
@@ -592,29 +596,23 @@ function animate() {
       // m.translateZ(- 10);
     })
 
-    if (autoWalkButtonClicked) {
-      renderer.properties.remove(autoWalkButton.material)
-      autoWalkButton.material.vertexShader = clickedAutoWalkShader.vertexShader
-      autoWalkButton.material.fragmentShader = clickedAutoWalkShader.fragmentShader
-    } else {
-
-    }
-
-    if (selfWalkButtonClicked) {
-      renderer.properties.remove(selfWalkButton.material)
-      selfWalkButton.material.vertexShader = clickedSelfWalkShader.vertexShader
-      selfWalkButton.material.fragmentShader = clickedSelfWalkShader.fragmentShader
-    } else {
-
-    }
-
-    if (all360ButtonClicked) {
-      renderer.properties.remove(all360Button.material)
-      all360Button.material.vertexShader = clicked360Shader.vertexShader
-      all360Button.material.fragmentShader = clicked360Shader.fragmentShader
-    } else {
-
-    }
+    // if (autoWalkButtonClicked) {
+    //   renderer.properties.remove(autoWalkButton.material)
+    //   autoWalkButton.material.vertexShader = clickedAutoWalkShader.vertexShader
+    //   autoWalkButton.material.fragmentShader = clickedAutoWalkShader.fragmentShader
+    // } else {}
+
+    // if (selfWalkButtonClicked) {
+    //   renderer.properties.remove(selfWalkButton.material)
+    //   selfWalkButton.material.vertexShader = clickedSelfWalkShader.vertexShader
+    //   selfWalkButton.material.fragmentShader = clickedSelfWalkShader.fragmentShader
+    // } else {}
+
+    // if (all360ButtonClicked) {
+    //   renderer.properties.remove(all360Button.material)
+    //   all360Button.material.vertexShader = clicked360Shader.vertexShader
+    //   all360Button.material.fragmentShader = clicked360Shader.fragmentShader
+    // } else {}
   }
 
   {
@@ -677,33 +675,19 @@ function animate() {
 
   TWEEN.update()
 
-  if (all360ButtonClicked) {
-    // camera.lookAt(0, 0, -100)
-  } else {
+  // if (all360ButtonClicked) {
+  //   // camera.lookAt(0, 0, 100)
+  // } else {
 
-  }
+  // }
 
   window.resize3D()
 
-
-  // renderer.setClearColor(0xffffff, 1);
-  // rendererRealtime.setClearColor(0xffffff, 1);
-
   renderer && scene && camera && renderer.render(scene, camera)
-  // rendererRealtime.render(sceneRealtime, cameraRealtime);
   controls && controls.update()
 
   requestAnimationFrame(animate)
 }
-// const renderer = new THREE.WebGLRenderer();
-// const rendererRealtime = new THREE.WebGLRenderer();
-
-// var mapDiv = null;
-// var mapDivRealtime = null;
-// var objInited = false;
-// var controlsRealtime = null;
-// var warningSign = null;
-// var warningSignText = null;
 
 function setFlag(data) {
   // 定义贴图路径
@@ -1255,8 +1239,10 @@ function addMoveEvent() {
     let mouse = new THREE.Vector2();
     let raycaster = new THREE.Raycaster();
 
-    mouse.x = ((event.clientX - (diffWidth + 5)) / parseFloat(canvas.style.width)) * 2 - 1;
-    mouse.y = -((event.clientY - (window.innerHeight * 0.13 + 63)) / parseFloat(canvas.style.height)) * 2 + 1;
+    // mouse.x = ((event.clientX - (diffWidth + 5)) / parseFloat(canvas.style.width)) * 2 - 1;
+    // mouse.y = -((event.clientY - (window.innerHeight * 0.13 + 63)) / parseFloat(canvas.style.height)) * 2 + 1;
+    mouse.x = ((event.clientX - 30) / window.innerWidth) * 2 - 1;
+    mouse.y = -((event.clientY - 10) / window.innerHeight) * 2 + 1;
 
     raycaster.setFromCamera(mouse, camera);
     let intersects = raycaster.intersectObjects(scene.children, true);
@@ -1334,38 +1320,49 @@ function addMoveEvent() {
             break;
           } else if (m && m.object && (m.object.userData.type == 'autoWalk')) {
             autoWalkButtonClicked = !autoWalkButtonClicked;
+            if (autoWalkButtonClicked) {
+              autoWalkButton.material.fragmentShader = clickedAutoWalkShader.fragmentShader
+            } else {
+              autoWalkButton.material.fragmentShader = normalAutoWalkShader.fragmentShader
+            }
             break;
           } else if (m && m.object && (m.object.userData.type == 'selfWalk')) {
             selfWalkButtonClicked = !selfWalkButtonClicked;
+            renderer.properties.remove(m.object.material)
+            if (selfWalkButtonClicked) {
+              selfWalkButton.material.fragmentShader = clickedSelfWalkShader.fragmentShader
+            } else {
+              selfWalkButton.material.fragmentShader = normalSelfWalkShader.fragmentShader
+            }
             break;
           } else if (m && m.object && (m.object.userData.type == '360')) {
             all360ButtonClicked = !all360ButtonClicked;
+            renderer.properties.remove(m.object.material)
             if (all360ButtonClicked) {
+              m.object.material.fragmentShader = clicked360Shader.fragmentShader
               // moveX = 30;
               // moveY = 40;
               // moveZ = -70;
-              moveX = 20;
-              moveY = 50;
-              moveZ = -20;
+              moveX = 100;
+              moveY = 100;
+              moveZ = 0;
               moveFlag = true;
             } else {
+              m.object.material.fragmentShader = normal360Shader.fragmentShader
               // moveX = flagList[0].x;
               // moveY = flagList[0].y;
               // moveZ = flagList[0].z;
-              moveX = 0;
+              moveX = 100;
               moveY = 100;
               moveZ = 0;
               moveFlag = true;
             }
-
             break;
           }
           // else if (m && m.object && (m.object.userData.type == 'staff')) {
-          //   console.log(111);
           //   const firstIntersectedObject = intersects[0].object;
           //   showPopupInformation(firstIntersectedObject);
           // }else if (m && m.object && (m.object.userData.type == 'tower')) {
-          //   console.log(1112);
           // }
         }
         bool = false;
@@ -1379,8 +1376,10 @@ function addMoveEvent() {
     let mouse = new THREE.Vector2();
     let raycaster = new THREE.Raycaster();
 
-    mouse.x = ((event.clientX - (diffWidth + 5)) / parseFloat(canvas.style.width)) * 2 - 1;
-    mouse.y = -((event.clientY - (window.innerHeight * 0.13 + 63)) / parseFloat(canvas.style.height)) * 2 + 1;
+    // mouse.x = ((event.clientX - (diffWidth + 5)) / parseFloat(canvas.style.width)) * 2 - 1;
+    // mouse.y = -((event.clientY - (window.innerHeight * 0.13 + 63)) / parseFloat(canvas.style.height)) * 2 + 1;
+    mouse.x = ((event.clientX - 30) / window.innerWidth) * 2 - 1;
+    mouse.y = -((event.clientY - 10) / window.innerHeight) * 2 + 1;
 
     raycaster.setFromCamera(mouse, camera);
     let intersects = raycaster.intersectObjects(scene.children);
@@ -1416,16 +1415,17 @@ function addMoveEvent() {
           m.object.material.fragmentShader = hover360Shader.fragmentShader
           break;
         } else {
-          globalMesh && renderer.properties.remove(globalMesh.material)
-          globalMesh && (globalMesh.material.vertexShader = normalShader.vertexShader)
-          globalMesh && (globalMesh.material.fragmentShader = normalShader.fragmentShader)
-
-          autoWalkButton && renderer.properties.remove(autoWalkButton.material)
-          selfWalkButton && renderer.properties.remove(selfWalkButton.material)
-          all360Button && renderer.properties.remove(all360Button.material)
-          autoWalkButton && (autoWalkButton.material.fragmentShader = normalAutoWalkShader.fragmentShader)
-          selfWalkButton && (selfWalkButton.material.fragmentShader = normalSelfWalkShader.fragmentShader)
-          all360Button && (all360Button.material.fragmentShader = normal360Shader.fragmentShader)
+          console.log("333")
+          // globalMesh && renderer.properties.remove(globalMesh.material)
+          // globalMesh && (globalMesh.material.vertexShader = normalShader.vertexShader)
+          // globalMesh && (globalMesh.material.fragmentShader = normalShader.fragmentShader)
+
+          // autoWalkButton && renderer.properties.remove(autoWalkButton.material)
+          // selfWalkButton && renderer.properties.remove(selfWalkButton.material)
+          // all360Button && renderer.properties.remove(all360Button.material)
+          // autoWalkButton && (autoWalkButton.material.fragmentShader = normalAutoWalkShader.fragmentShader)
+          // selfWalkButton && (selfWalkButton.material.fragmentShader = normalSelfWalkShader.fragmentShader)
+          // all360Button && (all360Button.material.fragmentShader = normal360Shader.fragmentShader)
         }
       }
       bool = false;
@@ -1436,14 +1436,31 @@ function addMoveEvent() {
       globalMesh && (globalMesh.material.fragmentShader = normalShader.fragmentShader)
 
       autoWalkButton && renderer.properties.remove(autoWalkButton.material)
+      if (all360ButtonClicked) {
+        autoWalkButton && (autoWalkButton.material.fragmentShader = clickedAutoWalkShader.fragmentShader)
+      } else {
+        autoWalkButton && (autoWalkButton.material.fragmentShader = normalAutoWalkShader.fragmentShader)
+      }
+
       selfWalkButton && renderer.properties.remove(selfWalkButton.material)
+      if (all360ButtonClicked) {
+        selfWalkButton && (selfWalkButton.material.fragmentShader = clickedSelfWalkShader.fragmentShader)
+      } else {
+        selfWalkButton && (selfWalkButton.material.fragmentShader = normalSelfWalkShader.fragmentShader)
+      }
+
       all360Button && renderer.properties.remove(all360Button.material)
-      autoWalkButton && (autoWalkButton.material.fragmentShader = normalAutoWalkShader.fragmentShader)
-      selfWalkButton && (selfWalkButton.material.fragmentShader = normalSelfWalkShader.fragmentShader)
-      all360Button && (all360Button.material.fragmentShader = normal360Shader.fragmentShader)
+      if (all360ButtonClicked) {
+        all360Button && (all360Button.material.fragmentShader = clicked360Shader.fragmentShader)
+      } else {
+        all360Button && (all360Button.material.fragmentShader = normal360Shader.fragmentShader)
+      }
     }
   }
 }
+
+
+
 // function showPopupInformation(object) {
 //   // MessageBox.alert('这是一段内容', '标题名称', {
 //   //   confirmButtonText: '确定',
@@ -1467,8 +1484,6 @@ function addMoveEvent() {
 //     // 可以进一步添加样式、动画等
 // }
 // }
-
-
 function SetMinerPos(x, y, z) {
   mesh3.position.set(x, y, z);
 }
@@ -1514,7 +1529,6 @@ function getsceneData() {
 
   });
 }
-
 function getXYZ() {
   let canvas = document.getElementsByTagName('canvas')[0]
   canvas.onclick = (event) => {
@@ -1540,16 +1554,6 @@ function getXYZ() {
   }
 }
 
-// const scene = new THREE.Scene();
-// const sceneRealtime = new THREE.Scene();
-// console.log(sceneRealtime);
-// // const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
-// const cameraRealtime = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
-// window.mapMineTabShow = false;
-// window.sceneRealtime = sceneRealtime;
-
-// window.flagRealtime = false;
-
 
 export function uwbMain(domId, modelWidth, modelHeight, finalMode, callback) {
 
@@ -1572,7 +1576,6 @@ export function uwbMain(domId, modelWidth, modelHeight, finalMode, callback) {
 
   addMoveEvent()
 
-  // getXYZ()
 
   const loader = new GLTFLoader()
 
@@ -1584,12 +1587,14 @@ export function uwbMain(domId, modelWidth, modelHeight, finalMode, callback) {
   loader.load('../models/mine.glb', function (gltf) {
     // console.log("gltf", gltf);
 
-    //解决加载gltf格式模型纹理贴图和原图不一样问题
+    // var mat = new THREE.MeshLambertMaterial({ color: 'red' });//{ color: 0x00ffff }
+    // var meshMine = new THREE.Mesh(geometry, mat);
+
+    // 解决加载gltf格式模型纹理贴图和原图不一样问题
     // renderer.outputEncoding = THREE.sRGBEncoding;
 
     let meshMine = gltf.scene
     meshMine.traverse(child => {
-      // console.log(child)
       if (child.isMesh) {
         // child.material.side = THREE.DoubleSide // 模型双面渲染
         // child.material.side = THREE.BackSide;
@@ -1608,11 +1613,11 @@ export function uwbMain(domId, modelWidth, modelHeight, finalMode, callback) {
       }
     })
 
-    meshMine.scale.set(0.2, 0.2, 0.2)
-    meshMine.position.set(-240, 0, 40);
+    let scale = 0.2
+    meshMine.scale.set(scale, scale, scale)
+    // meshMine.position.set(-240, 0, 40);
+    meshMine.position.set(-200, 0, 60);
 
-    // meshMine.scale.set(0.5, 0.5, 0.5)
-    // meshMine.position.set(-600, 0, 100);
     scene.add(meshMine)
 
     // flagList.forEach(m => setFlag(m))
@@ -1621,41 +1626,37 @@ export function uwbMain(domId, modelWidth, modelHeight, finalMode, callback) {
 
     // setSelfWalkButton({ x: -7, y: 1.5, z: -5, width: 0.4, height: 0.4 })
 
-    // set360Button({ x: -7, y: 0.5, z: -5, width: 0.4, height: 0.4 })
+    set360Button({ x: -7, y: 0.5, z: -5, width: 0.4, height: 0.4 })
 
     window.store.dispatch('common/setIsShowLoading', false)
 
     console.log("loaded over")
     // clearInterval(loadingInterval)
 
-  },
-    // called while loading is progressing
-    function (xhr) {
-      // console.log(xhr)
-      // console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
-      if (xhr.lengthComputable) {
-        window.store.dispatch('common/setIsShowLoading', true)
-        let percent = (xhr.loaded / xhr.total) * 100;
-        window.store.dispatch('common/setLoadingPercent', percent);
-        if (percent >= 100) {
-          window.store.dispatch('common/setIsShowLoading', false)
-        }
-      } else {
-        window.store.dispatch('common/setIsShowLoading', true)
-        let random = (Math.random() * 10) + 5;
-        percent += random;
-        window.store.dispatch('common/setLoadingPercent', percent.toFixed(2));
-        // console.log('loaded' + percent)
-        // loadingInterval = setInterval(() => {
-        //   let random = (Math.random() * 10) + 5;
-        //   percent += random;
-        //   window.store.dispatch('common/setLoadingPercent', percent.toFixed(2));
-        //   console.log('loaded' + percent)
-        // }, 800)
+  }, function (xhr) {
+    // console.log(xhr)
+    // console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
+    if (xhr.lengthComputable) {
+      window.store.dispatch('common/setIsShowLoading', true)
+      let percent = (xhr.loaded / xhr.total) * 100;
+      window.store.dispatch('common/setLoadingPercent', percent);
+      if (percent >= 100) {
+        window.store.dispatch('common/setIsShowLoading', false)
       }
-    },
-    // called when loading has errors
-    function (error) {
-      console.log('An error happened');
-    })
+    } else {
+      window.store.dispatch('common/setIsShowLoading', true)
+      let random = (Math.random() * 10) + 5;
+      percent += random;
+      window.store.dispatch('common/setLoadingPercent', percent.toFixed(2));
+      // console.log('loaded' + percent)
+      // loadingInterval = setInterval(() => {
+      //   let random = (Math.random() * 10) + 5;
+      //   percent += random;
+      //   window.store.dispatch('common/setLoadingPercent', percent.toFixed(2));
+      //   console.log('loaded' + percent)
+      // }, 800)
+    }
+  }, function (error) {
+    console.error(error);
+  })
 }

src/views/ordinaryPage/index.vue

@@ -807,12 +807,35 @@ export default {
   },
   created() {},
   async mounted() {
-    // this.$xbus.trigger("demo");
+    sessionStorage.setItem("3dMode", 0);
+    // document.documentElement.style.setProperty("--3dViewWidth", "93vw");
+    uwbMain();
 
+    this.queryStaffCount();
+    this.refreshCount();
+
+    // this.$xbus.trigger("demo");
+    // 监听websocket 求救信号
     this.$xbus.on("HELPME-REQ", (data) => {
       this.$refs.helpMeReq.openHelpDialog(data);
     });
 
+    // 监听websocket 呼叫/撤离请求的返回
+    this.$xbus.on("CALL-CARD-LIST", (data) => {
+      this.$message({
+        message: "信号发送成功！",
+        type: "success",
+      });
+    });
+
+    // 监听websocket 井下人员数量
+    this.$xbus.on("TOTAL_NUM", (data) => {
+      console.log("TOTAL_NUM", data);
+      // localStorage.setItem("staffCount", data.total_num);
+      this.queryStaffCount();
+      // this.staffCount = data.total_num;
+    });
+
     // 监听websocket 数据库增删改请求的返回
     this.$xbus.on("META-UPDATE-DB-RES", (res) => {
       if (res.data.op === "DELETE") {
@@ -831,19 +854,20 @@ export default {
       }
     });
 
-    sessionStorage.setItem("3dMode", 0);
-    // document.documentElement.style.setProperty("--3dViewWidth", "93vw");
-    uwbMain();
-
-    // 监听websocket 呼叫/撤离请求的返回
-    this.$xbus.on("CALL-CARD-LIST", (data) => {
-      this.$message({
-        message: "信号发送成功！",
-        type: "success",
-      });
-    });
+    // document.addEventListener("visibilitychange", () => {
+    //   var isHidden = document.hidden;
+    //   if (isHidden) {
+    //     // 页面隐藏
+    //     clearInterval(this.statusTimer);
+    //   } else {
+    //     // 页面聚焦
+    //     this.statusTimer = setInterval(() => {
+    //       this.refreshCount();
+    //     }, 10000);
+    //   }
+    // });
 
-    // 监听区域绘制
+    // 区域绘制
     this.$xbus.on("switchAreaTabs", (data) => {
       this.mainTabIndex = data.mainTab;
       this.mainTabName = this.tabs[data.mainTab].name;
@@ -856,28 +880,6 @@ export default {
       });
     });
 
-    // 监听websocket 井下人员数量
-    this.$xbus.on("TOTAL_NUM", (data) => {
-      console.log("TOTAL_NUM", data);
-      // localStorage.setItem("staffCount", data.total_num);
-      // this.queryStaffCount();
-      this.staffCount = data.total_num;
-    });
-
-    this.refreshCount();
-
-    // document.addEventListener("visibilitychange", () => {
-    //   var isHidden = document.hidden;
-    //   if (isHidden) {
-    //     // 页面隐藏
-    //     clearInterval(this.statusTimer);
-    //   } else {
-    //     // 页面聚焦
-    //     this.statusTimer = setInterval(() => {
-    //       this.refreshCount();
-    //     }, 10000);
-    //   }
-    // });
   },
   methods: {
     // 标签页切换
@@ -1154,7 +1156,7 @@ export default {
 
     //table组件交互
     addRow() {
-      console.log("新增table某行");
+      console.log("新增table行");
       this.modelData = {};
       this.addNewDept = true;
       this.addnewDevice = true;
@@ -1235,13 +1237,14 @@ export default {
       // }
     },
     queryStaffCount() {
-      let sql = `SELECT
-          * 
-        FROM
-          kjdba.rt_location 
-        WHERE
-          card_id IN ( SELECT card_id FROM kjdba.dat_card WHERE card_type_id = 1 AND state_id = 0 ) 
-          AND TIMESTAMPDIFF( MINUTE, cur_time, NOW() ) < 1;`;
+      // let sql = `SELECT
+      //     * 
+      //   FROM
+      //     kjdba.rt_location 
+      //   WHERE
+      //     card_id IN ( SELECT card_id FROM kjdba.dat_card WHERE card_type_id = 1 AND state_id = 0 ) 
+      //     AND TIMESTAMPDIFF( MINUTE, cur_time, NOW() ) < 1;`;
+      let sql = `SELECT * FROM kjdba.rt_location_area WHERE leave_time IS NULL;`
       let msg = {
         cmd: "query", // server端要进行判断的
         data: {