3D建模引入

spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test62/test62.css

@@ -0,0 +1,20 @@
+.box62 * {
+  margin: 0;
+  padding: 0;
+}
+
+.box62 body {
+  margin: 0;
+  border: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.box62 #ThreeJS {
+  width: 100%;
+  height: 100%;
+  background: url("./images/bg.png") no-repeat;
+  background-size: 100% 100%;
+}

spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test62/test62.html

@@ -1,28 +1,39 @@
-<style type="text/css">
-    * {
-        margin: 0;
-        padding: 0;
-    }
-    
-    body {
-        margin: 0;
-        border: 0;
-        padding: 0;
-        width: 100%;
-        height: 100%;
-        overflow: hidden;
-    }
-    
-    #ThreeJS {
-        width: 100%;
-        height: 100%;
-        background: url("./images/bg.png") no-repeat;
-        background-size: 100% 100%;
-    }
-</style>
 
+<div class="box62 box" data-name="test61">
+    <div class="toolBox">
+        <span class="fit"></span>
+        <span class="close"></span>
+    </div>
+    <div class="test-box">
+        <div class="concent">
 <div id="ThreeJS"></div>
 
+        </div>
+    </div>
+    <div class="panel-footer"></div>
+</div>
+
+<!-- 工具弹框 -->
+<div class="tools" style="display: none">
+    <div class="containerTool test61Toll">
+        <ul>
+            <li>
+                <span>宽度：</span>
+                <input class="setWidth" type="text" />
+                <span id="validateAge" class="regValidate"></span>
+            </li>
+            <li>
+                <span>高度：</span>
+                <input class="setHeight" type="text" />
+            </li>
+        </ul>
+        <!-- 确定 -->
+        <button class="fixBtn toolBtn">确定</button>
+        <button class="offBtn toolBtn">取消</button>
+    </div>
+</div>
+
+
 <script src="js/three.js"></script>
 <script src="js/ThreeBSP.js"></script>
 <script src="js/GLTFLoader.js"></script>
@@ -35,45 +46,456 @@
 
 
 <script type="module">
-    const boxcontanier = document.getElementById("ThreeJS"); let scene, camera, renderer, controls, stats; const SCREEN_WIDTH = window.innerWidth; const SCREEN_HEIGHT = window.innerHeight; //加载贴图模型 let textureLoader = new THREE.TextureLoader(); var mixer
-    = null; var clock = new THREE.Clock(); init(); animate(); function init() { // 场景 scene = new THREE.Scene(); // 相机 var VIEW_ANGLE = 60, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 2000; camera = new THREE.PerspectiveCamera(VIEW_ANGLE,
-    ASPECT, NEAR, FAR); scene.add(camera); camera.position.set(0, 200, 400); camera.lookAt(scene.position); // 渲染器 if (Detector.webgl) renderer = new THREE.WebGLRenderer({ antialias: true, //开启锯齿 alpha: true, precision: 'highp', }); else renderer = new
-    THREE.CanvasRenderer(); renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT); renderer.setClearAlpha(0.0); renderer.shadowMap.enabled = true; //当界面改变时重新渲染canvas尺寸 window.οnresize = function () { renderer.setPixelRatio(window.devicePixelRatio); //设备像素比，防止画布输出模糊
-    camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT); }; //renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色 boxcontanier.appendChild(renderer.domElement); // 鼠标控件 controls
-    = new THREE.OrbitControls(camera, renderer.domElement); controls.addEventListener('change', render); controls.maxPolarAngle = Math.PI / 2; // 性能插件 stats = new Stats(); stats.domElement.style.position = 'absolute'; stats.domElement.style.top = '0px';
-    stats.domElement.style.zIndex = 100; boxcontanier.appendChild(stats.domElement); //辅助线 // var axes = new THREE.AxesHelper(2000); // scene.add(axes); // 光源 var directionalLight = new THREE.PointLight(0xffffff, 1); // 光的颜色，光照强度 directionalLight.position.set(400,
-    300, 300); directionalLight.castShadow = true; scene.add(directionalLight); var directionalLight2 = new THREE.PointLight(0xffffff, 1); directionalLight2.position.set(-400, -300, -300); scene.add(directionalLight2); // var light=new THREE.PointLight(0x555555,1);
-    // light.shadow.camera.near = 1; // light.shadow.camera.far = 5000; // light.position.set(-400,400,50); // light.castShadow = true; // scene.add(light) // var point = new THREE.PointLight(0xffffff,0.4); // point.position.set(0, 200, 0); //点光源位置 //
-    scene.add(point); //点光源添加到场景中 var ambient = new THREE.AmbientLight(0xffffff, 0.6); ambient.position.set(0, 0, 0); scene.add(ambient); // 初始化模型 initModel(); } function initModel() { // 地板 createFloor(400, 160); // createWall(500, 6, 250,0,103,0,0,0,0,[{
-    // size: [496, 6, 246], // position: [0, 0, 0], // rotation: [0, 0, 0] // }]) // 玻璃墙 createGlassWall(400, 100, 160, 0, 50, 0, 0, 0, 0, [{ size: [396, 100, 156], position: [0, 0, 0], rotation: [0, 0, 0] }, { size: [66, 70, 6], position: [-160, -15,
-    77], rotation: [0, 0, 0] }, { size: [66, 70, 6], position: [160, -15, 77], rotation: [0, 0, 0] }], 0.4); // 推拉门 createDoor(-160, 35, 80); createDoor(160, 35, 78); // 创建机柜 createCabinet(30, 80, 30, 96, 40, -58, 0, 0, 0) createCabinet(30, 80, 30, 64,
-    40, -58, 0, 0, 0) createCabinet(30, 80, 30, 32, 40, -58, 0, 0, 0) createCabinet(30, 80, 30, 0, 40, -58, 0, 0, 0) createCabinet(30, 80, 30, -32, 40, -58, 0, 0, 0) createCabinet(30, 80, 30, -64, 40, -58, 0, 0, 0) createCabinet(30, 80, 30, -96, 40, -58,
-    0, 0, 0) createCabinet(30, 80, 30, -128, 40, -58, 0, 0, 0) createCabinet(30, 80, 30, -160, 40, -58, 0, 0, 0) // createCabinet(30, 80, 30, -192, 40, -58, 0, 0, 0) // createCabinet(30, 80, 30, 32, 40, 102, 0, Math.PI, 0); createCabinet(30, 80, 30, 0,
-    40, 58, 0, Math.PI, 0); createCabinet(30, 80, 30, -32, 40, 58, 0, Math.PI, 0); createCabinet(30, 80, 30, -64, 40, 58, 0, Math.PI, 0); createCabinet(30, 80, 30, -96, 40, 58, 0, Math.PI, 0); // 桌子 createComputerDesk(82, 0, 57, 0, Math.PI / 2, 0) //
-    椅子 createChair(90, 17, 32, 0, Math.PI, 0); // 电脑 createComputer(90, 65, 57, 0, Math.PI, 0); //精灵字体 // createMark() } // 创建地板 function createFloor(width, height) { var floorGeometry = new THREE.PlaneGeometry(width, height); var maps = textureLoader.load('./images/floor.png');
-    maps.wrapS = maps.wrapT = THREE.RepeatWrapping; maps.repeat.set(8, 6); maps.needsUpdate = true var material = new THREE.MeshBasicMaterial({ map: maps, side: THREE.DoubleSide }); var floor = new THREE.Mesh(floorGeometry, material); floor.rotation.x
-    = Math.PI / 2; scene.add(floor); return floor; } // 创建墙 function createWall(w, h, d, px, py, pz, rx, ry, rz, holes) { var geometry = new THREE.BoxGeometry(w, h, d); var meterials = new THREE.MeshStandardMaterial({ color: 0xA5A5A5, side: THREE.DoubleSide
-    }); var wall = new THREE.Mesh(geometry, meterials); if (holes) { for (var i = 0; i
-    < holes.length; i++) { var totalBSP=n ew ThreeBSP(wall); var hole=h oles[i]; var holeGeometry=n ew THREE.BoxGeometry(hole.size[0], hole.size[1], hole.size[2]);
-        var holeCube=n ew THREE.Mesh(holeGeometry); holeCube.position.x=h ole.position[0]; holeCube.position.y=h ole.position[1]; holeCube.position.z=h ole.position[2]; holeCube.rotation.x=h ole.rotation[0]; holeCube.rotation.y=h ole.rotation[1]; holeCube.rotation.z=h
-        ole.rotation[2]; var clipBSP=n ew ThreeBSP(holeCube); var resultBSP=t otalBSP.subtract(clipBSP); wall=r esultBSP.toMesh(); } wall.material=m eterials; } wall.position.x=p x; wall.position.y=p y; wall.position.z=p z; wall.rotation.x=r x; wall.rotation.y=r
-        y; wall.rotation.z=r z; scene.add(wall); return wall; } function createGlassWall(w, h, d, px, py, pz, rx, ry, rz, holes, opa) { var geometry=n ew THREE.BoxGeometry(w, h, d); var texture=n ew textureLoader.load( './images/jsk.png'); texture.wrapS=t
-        exture.wrapT=T HREE.RepeatWrapping; texture.repeat.set(1, 1); var meterials=n ew THREE.MeshStandardMaterial({ // color: 0xD6F2F2, color: 0xEFF8FC, // map: texture, opacity: opa, transparent: true, side: THREE.DoubleSide }); var glassW=n ew THREE.Mesh(geometry,
-        meterials); if (holes) { for (var i=0 ; i < holes.length; i++) { var totalBSP=n ew ThreeBSP(glassW); var hole=h oles[i]; var holeGeometry=n ew THREE.BoxGeometry(hole.size[0], hole.size[1], hole.size[2]); var holeCube=n ew THREE.Mesh(holeGeometry);
-        holeCube.position.x=h ole.position[0]; holeCube.position.y=h ole.position[1]; holeCube.position.z=h ole.position[2]; holeCube.rotation.y=h ole.rotation[1]; var clipBSP=n ew ThreeBSP(holeCube); var resultBSP=t otalBSP.subtract(clipBSP); glassW=r esultBSP.toMesh();
-        } glassW.material=m eterials; } glassW.position.x=p x; glassW.position.y=p y; glassW.position.z=p z; glassW.rotation.y=r y; scene.add(glassW); return glassW; } //加载门Fbx格式 function createDoor(px, py, pz) { const fbxloader=n ew THREE.FBXLoader(); fbxloader.load(
-        "./model/door.fbx", function (obj) { const item=o bj.children[0]; item.scale.set(0.03, 0.05, 0.03); item.position.set(px, py, pz); obj.castShadow=t rue; //尝试制作动画部分 // const children1=i tem.children[0]; // const children4=i tem.children[3]; // children1.rotation.z=M
-        ath.PI/2; // children1.position.set(-1100,500,0); // children4.rotation.z=M ath.PI/2; // children4.position.set(-1100,500,0); // mixer=n ew THREE.AnimationMixer(item); // var AnimationAction=mixer.clipAction(obj.animations[0]); // AnimationAction.timeScale=2
-        ; // AnimationAction.clampWhenFinished=true; // AnimationAction.play(); scene.add(obj) }); } //创建机柜 function createCabinet(w, h, d, px, py, pz, rx, ry, rz) { var texture=n ew THREE.ImageUtils.loadTexture( './images/rack_door_front.png'); texture.wrapS=t
-        exture.wrapT=T HREE.RepeatWrapping; texture.repeat.set(1, 1); var texture2=n ew THREE.ImageUtils.loadTexture( './images/rack_door_back.png'); texture2.wrapS=t exture2.wrapT=T HREE.RepeatWrapping; texture2.repeat.set(1, 1); var geometry=n ew THREE.BoxGeometry(w,
-        h, d); //var material=n ew THREE.MeshBasicMaterial( { map: texture } ); // Create an array of materials to be used in a cube, one for each side var materialArray=[ ]; // order to add materials: x+,x-,y+,y-,z+,z- materialArray.push(new THREE.MeshBasicMaterial({
-        map: texture2 })); materialArray.push(new THREE.MeshBasicMaterial({ map: texture2 })); materialArray.push(new THREE.MeshBasicMaterial({ map: texture2 })); materialArray.push(new THREE.MeshBasicMaterial({ map: texture2 })); materialArray.push(new THREE.MeshBasicMaterial({
-        map: texture })); materialArray.push(new THREE.MeshBasicMaterial({ map: texture2 })); var material=n ew THREE.MeshFaceMaterial(materialArray); var cabinet=n ew THREE.Mesh(geometry, material); cabinet.position.x=p x; cabinet.position.y=p y; cabinet.position.z=p
-        z; cabinet.rotation.y=r y; scene.add(cabinet); return cabinet; } // 创建桌子 function createComputerDesk(px, py, pz, rx, ry, rz) { // 加载 glTF 格式的模型 let loader=n ew THREE.GLTFLoader(); /*实例化加载器*/ var textureNormal=t extureLoader.load(
-        './images/ambient_occlusion.jpg'); loader.load( './model/dnz.gltf', function (obj) { console.log(obj); obj.scene.scale.set(5, 10, 5); obj.scene.position.x=p x; obj.scene.position.y=p y; obj.scene.position.z=p z; obj.scene.rotation.y=r y; obj.scene.traverse(function (gltf) { if
-        (gltf.type==='Mesh' ) { gltf.material=n ew THREE.MeshPhongMaterial({ color: 0xcccccc, map: textureNormal, normalScale: new THREE.Vector2(1, 1), }) } }) scene.add(obj.scene); }) } // 创建椅子 function createChair(px, py, pz, rx, ry, rz) { // 加载 glTF 格式的模型
-        let loader=n ew THREE.GLTFLoader(); /*实例化加载器*/ loader.load( './fourImages/chair.gltf', function (obj) { //console.log(obj.scene.children); obj.scene.scale.set(0.5, 0.5, 0.5); obj.scene.position.x=p x; obj.scene.position.y=p y; obj.scene.position.z=p
-        z; obj.scene.rotation.y=r y; scene.add(obj.scene); }) } // 创建电脑 function createComputer(px, py, pz, rx, ry, rz) { // 加载 glTF 格式的模型 let loader=n ew THREE.GLTFLoader(); /*实例化加载器*/ loader.load( './fourImages/computer.gltf', function (obj) { obj.scene.scale.set(0.5,
-        0.5, 0.5); obj.scene.position.x=p x; obj.scene.position.y=p y; obj.scene.position.z=p z; obj.scene.rotation.y=r y; scene.add(obj.scene); }) } //创建精灵字体 function createMark() { var texture=n ew THREE.TextureLoader().load( "./images/dakuang.png"); var
-        spriteMaterial=n ew THREE.SpriteMaterial({ color: 0xff00ff,//设置精灵矩形区域颜色 rotation: Math.PI / 4,//旋转精灵对象45度，弧度值 map: texture,//设置精灵纹理贴图 }); var sprite=n ew THREE.Sprite(spriteMaterial); sprite.scale.set(10, 10, 1); scene.add(sprite); return sprite;
-        } function animate() { requestAnimationFrame(animate); render(); update(); } // 更新插件 function update() { controls.update(); stats.update(); } function render() { renderer.render(scene, camera); } </script>
+  const boxcontanier = document.getElementById("ThreeJS");
+
+  let scene, camera, renderer, controls, stats;
+  const SCREEN_WIDTH = window.innerWidth;
+  const SCREEN_HEIGHT = window.innerHeight;
+
+  //加载贴图模型
+  let textureLoader = new THREE.TextureLoader();
+  var mixer=null;
+  var clock = new THREE.Clock();
+
+  init();
+  animate();
+
+  function init() {
+    // 场景
+    scene = new THREE.Scene();
+
+    // 相机
+    var VIEW_ANGLE = 60,
+      ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT,
+      NEAR = 0.1,
+      FAR = 2000;
+
+    camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
+    scene.add(camera);
+    camera.position.set(0, 200, 400);
+    camera.lookAt(scene.position);
+
+    // 渲染器
+    if (Detector.webgl)
+      renderer = new THREE.WebGLRenderer({
+        antialias: true, //开启锯齿
+        alpha: true,
+        precision: 'highp',
+      });
+    else
+      renderer = new THREE.CanvasRenderer();
+
+
+    renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
+    renderer.setClearAlpha(0.0);
+    renderer.shadowMap.enabled = true;
+    //当界面改变时重新渲染canvas尺寸
+    window.οnresize = function() {
+      renderer.setPixelRatio(window.devicePixelRatio); //设备像素比，防止画布输出模糊
+      camera.aspect = window.innerWidth / window.innerHeight;
+      camera.updateProjectionMatrix();
+      renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
+    };
+    //renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
+    boxcontanier.appendChild(renderer.domElement);
+
+    // 鼠标控件
+    controls = new THREE.OrbitControls(camera, renderer.domElement);
+    controls.addEventListener('change', render);
+    controls.maxPolarAngle = Math.PI / 2;
+
+    // 性能插件
+    stats = new Stats();
+    stats.domElement.style.position = 'absolute';
+    stats.domElement.style.top = '0px';
+    stats.domElement.style.zIndex = 100;
+    boxcontanier.appendChild(stats.domElement);
+
+    //辅助线
+    // var axes = new THREE.AxesHelper(2000);
+    // scene.add(axes);
+
+    // 光源
+
+
+    var directionalLight = new THREE.PointLight(0xffffff, 1); // 光的颜色，光照强度
+    directionalLight.position.set(400, 300, 300);
+    directionalLight.castShadow = true;
+    scene.add(directionalLight);
+
+    var directionalLight2 = new THREE.PointLight(0xffffff, 1);
+    directionalLight2.position.set(-400, -300, -300);
+    scene.add(directionalLight2);
+
+    // var light=new THREE.PointLight(0x555555,1);
+    // light.shadow.camera.near = 1;
+    // light.shadow.camera.far = 5000;
+    // light.position.set(-400,400,50);
+    // light.castShadow = true;
+    // scene.add(light)
+
+    // var point = new THREE.PointLight(0xffffff,0.4);
+    // point.position.set(0, 200, 0); //点光源位置
+    // scene.add(point); //点光源添加到场景中
+
+
+    var ambient = new THREE.AmbientLight(0xffffff,0.6);
+    ambient.position.set(0,0,0);
+    scene.add(ambient);
+
+
+    // 初始化模型
+    initModel();
+
+
+
+  }
+
+  function initModel() {
+    // 地板
+    createFloor(400, 160);
+
+    // createWall(500, 6, 250,0,103,0,0,0,0,[{
+    //   size: [496, 6, 246],
+    //   position: [0, 0, 0],
+    //   rotation: [0, 0, 0]
+    // }])
+
+    // 玻璃墙
+    createGlassWall(400, 100, 160, 0, 50, 0, 0, 0, 0,[{
+      size: [396, 100, 156],
+      position: [0, 0, 0],
+      rotation: [0, 0, 0]
+    },{
+      size: [66, 70, 6],
+      position: [-160, -15, 77],
+      rotation: [0, 0, 0]
+    },{
+      size: [66, 70, 6],
+      position: [160, -15, 77],
+      rotation: [0, 0, 0]
+    }],0.4);
+
+  //  推拉门
+    createDoor(-160, 35, 80);
+    createDoor(160, 35, 78);
+
+
+  //  创建机柜
+    createCabinet(30, 80, 30, 96, 40, -58, 0, 0, 0)
+    createCabinet(30, 80, 30, 64, 40, -58, 0, 0, 0)
+    createCabinet(30, 80, 30, 32, 40, -58, 0, 0, 0)
+    createCabinet(30, 80, 30, 0, 40, -58, 0, 0, 0)
+    createCabinet(30, 80, 30, -32, 40, -58, 0, 0, 0)
+    createCabinet(30, 80, 30, -64, 40, -58, 0, 0, 0)
+    createCabinet(30, 80, 30, -96, 40, -58, 0, 0, 0)
+    createCabinet(30, 80, 30, -128, 40, -58, 0, 0, 0)
+    createCabinet(30, 80, 30, -160, 40, -58, 0, 0, 0)
+    // createCabinet(30, 80, 30, -192, 40, -58, 0, 0, 0)
+
+    // createCabinet(30, 80, 30, 32, 40, 102, 0, Math.PI, 0);
+    createCabinet(30, 80, 30, 0, 40, 58, 0, Math.PI, 0);
+    createCabinet(30, 80, 30, -32, 40, 58, 0, Math.PI, 0);
+    createCabinet(30, 80, 30, -64, 40, 58, 0, Math.PI, 0);
+    createCabinet(30, 80, 30, -96, 40, 58, 0, Math.PI, 0);
+
+  //  桌子
+    createComputerDesk(82, 0, 57,0,Math.PI / 2,0)
+
+  //  椅子
+    createChair(90, 17, 32, 0, Math.PI, 0);
+
+  //  电脑
+    createComputer(90, 65, 57, 0, Math.PI, 0);
+
+  //精灵字体
+  //   createMark()
+  }
+
+  // 创建地板
+  function createFloor(width, height){
+    var floorGeometry = new THREE.PlaneGeometry(width, height);
+    var maps = textureLoader.load('./images/floor.png');
+    maps.wrapS = maps.wrapT = THREE.RepeatWrapping;
+    maps.repeat.set( 8, 6);
+    maps.needsUpdate = true
+
+    var material = new THREE.MeshBasicMaterial({
+      map: maps,
+      side: THREE.DoubleSide
+    });
+    var floor = new THREE.Mesh( floorGeometry, material );
+    floor.rotation.x = Math.PI / 2;
+    scene.add(floor);
+    return floor;
+
+  }
+
+
+  // 创建墙
+  function createWall(w, h, d, px, py, pz, rx, ry, rz, holes) {
+    var geometry = new THREE.BoxGeometry(w, h, d);
+    var meterials = new THREE.MeshStandardMaterial({
+      color: 0xA5A5A5,
+      side: THREE.DoubleSide
+    });
+    var wall = new THREE.Mesh(geometry, meterials);
+    if (holes) {
+      for (var i = 0; i < holes.length; i++) {
+        var totalBSP = new ThreeBSP(wall);
+        var hole = holes[i];
+        var holeGeometry = new THREE.BoxGeometry(hole.size[0], hole.size[1], hole.size[2]);
+        var holeCube = new THREE.Mesh(holeGeometry);
+        holeCube.position.x = hole.position[0];
+        holeCube.position.y = hole.position[1];
+        holeCube.position.z = hole.position[2];
+
+        holeCube.rotation.x = hole.rotation[0];
+        holeCube.rotation.y = hole.rotation[1];
+        holeCube.rotation.z = hole.rotation[2];
+
+        var clipBSP = new ThreeBSP(holeCube);
+
+        var resultBSP = totalBSP.subtract(clipBSP);
+
+        wall = resultBSP.toMesh();
+      }
+
+      wall.material = meterials;
+    }
+
+    wall.position.x = px;
+    wall.position.y = py;
+    wall.position.z = pz;
+
+    wall.rotation.x = rx;
+    wall.rotation.y = ry;
+    wall.rotation.z = rz;
+
+    scene.add(wall);
+    return wall;
+  }
+
+  function createGlassWall (w, h, d, px, py, pz, rx, ry, rz, holes,opa) {
+    var geometry = new THREE.BoxGeometry(w, h, d);
+    var texture = new textureLoader.load('./images/jsk.png');
+    texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
+    texture.repeat.set(1, 1);
+    var meterials = new THREE.MeshStandardMaterial({
+      // color: 0xD6F2F2,
+      color: 0xEFF8FC,
+      // map: texture,
+      opacity: opa,
+      transparent: true,
+      side: THREE.DoubleSide
+    });
+    var glassW = new THREE.Mesh(geometry, meterials);
+    if (holes) {
+      for (var i = 0; i < holes.length; i++) {
+        var totalBSP = new ThreeBSP(glassW);
+        var hole = holes[i];
+        var holeGeometry = new THREE.BoxGeometry(hole.size[0], hole.size[1], hole.size[2]);
+        var holeCube = new THREE.Mesh(holeGeometry);
+        holeCube.position.x = hole.position[0];
+        holeCube.position.y = hole.position[1];
+        holeCube.position.z = hole.position[2];
+
+        holeCube.rotation.y = hole.rotation[1];
+
+        var clipBSP = new ThreeBSP(holeCube);
+
+        var resultBSP = totalBSP.subtract(clipBSP);
+
+        glassW = resultBSP.toMesh();
+      }
+
+      glassW.material = meterials;
+    }
+
+    glassW.position.x = px;
+    glassW.position.y = py;
+    glassW.position.z = pz;
+
+    glassW.rotation.y = ry;
+
+    scene.add(glassW);
+
+    return glassW;
+  }
+
+  //加载门Fbx格式
+  function createDoor (px,py,pz) {
+    const fbxloader = new THREE.FBXLoader();
+    fbxloader.load("./model/door.fbx",function (obj) {
+      const item = obj.children[0];
+      item.scale.set(0.03, 0.05, 0.03);
+      item.position.set(px,py,pz);
+      obj.castShadow = true;
+      //尝试制作动画部分
+      // const children1 = item.children[0];
+      // const children4 = item.children[3];
+      // children1.rotation.z = Math.PI/2;
+      // children1.position.set(-1100,500,0);
+      // children4.rotation.z = Math.PI/2;
+      // children4.position.set(-1100,500,0);
+      // mixer = new THREE.AnimationMixer(item);
+      // var AnimationAction=mixer.clipAction(obj.animations[0]);
+      // AnimationAction.timeScale = 2;
+      // AnimationAction.clampWhenFinished=true;
+      // AnimationAction.play();
+      scene.add(obj)
+    });
+  }
+
+  //创建机柜
+  function createCabinet(w, h, d, px, py, pz, rx, ry, rz) {
+    var texture = new THREE.ImageUtils.loadTexture('./images/rack_door_front.png');
+    texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
+    texture.repeat.set(1, 1);
+
+    var texture2 = new THREE.ImageUtils.loadTexture('./images/rack_door_back.png');
+    texture2.wrapS = texture2.wrapT = THREE.RepeatWrapping;
+    texture2.repeat.set(1, 1);
+
+    var geometry = new THREE.BoxGeometry(w, h, d);
+    //var material = new THREE.MeshBasicMaterial( { map: texture } );
+    // Create an array of materials to be used in a cube, one for each side
+    var materialArray = [];
+    // order to add materials: x+,x-,y+,y-,z+,z-
+    materialArray.push(new THREE.MeshBasicMaterial({
+      map: texture2
+    }));
+    materialArray.push(new THREE.MeshBasicMaterial({
+      map: texture2
+    }));
+    materialArray.push(new THREE.MeshBasicMaterial({
+      map: texture2
+    }));
+    materialArray.push(new THREE.MeshBasicMaterial({
+      map: texture2
+    }));
+    materialArray.push(new THREE.MeshBasicMaterial({
+      map: texture
+    }));
+    materialArray.push(new THREE.MeshBasicMaterial({
+      map: texture2
+    }));
+    var material = new THREE.MeshFaceMaterial(materialArray);
+
+    var cabinet = new THREE.Mesh(geometry, material);
+
+    cabinet.position.x = px;
+    cabinet.position.y = py;
+    cabinet.position.z = pz;
+
+    cabinet.rotation.y = ry;
+
+    scene.add(cabinet);
+
+
+    return cabinet;
+  }
+
+  // 创建桌子
+  function createComputerDesk(px, py, pz, rx, ry, rz) {
+    // 加载 glTF 格式的模型
+    let loader = new THREE.GLTFLoader(); /*实例化加载器*/
+    var textureNormal = textureLoader.load('./images/ambient_occlusion.jpg');
+    loader.load('./model/dnz.gltf', function(obj) {
+      console.log(obj);
+      obj.scene.scale.set(5, 10, 5);
+      obj.scene.position.x = px;
+      obj.scene.position.y = py;
+      obj.scene.position.z = pz;
+
+      obj.scene.rotation.y = ry;
+
+      obj.scene.traverse(function (gltf) {
+        if(gltf.type === 'Mesh'){
+          gltf.material = new THREE.MeshPhongMaterial({
+            color: 0xcccccc,
+            map:textureNormal,
+            normalScale: new THREE.Vector2(1, 1),
+          })
+        }
+
+      })
+
+      scene.add(obj.scene);
+    })
+
+
+
+  }
+
+  // 创建椅子
+  function createChair(px, py, pz, rx, ry, rz) {
+
+    // 加载 glTF 格式的模型
+    let loader = new THREE.GLTFLoader(); /*实例化加载器*/
+
+    loader.load('./fourImages/chair.gltf', function(obj) {
+      //console.log(obj.scene.children);
+      obj.scene.scale.set(0.5, 0.5, 0.5);
+      obj.scene.position.x = px;
+      obj.scene.position.y = py;
+      obj.scene.position.z = pz;
+
+      obj.scene.rotation.y = ry;
+      scene.add(obj.scene);
+
+    })
+
+  }
+
+  // 创建电脑
+  function createComputer(px, py, pz, rx, ry, rz) {
+    // 加载 glTF 格式的模型
+    let loader = new THREE.GLTFLoader(); /*实例化加载器*/
+    loader.load('./fourImages/computer.gltf', function(obj) {
+      obj.scene.scale.set(0.5, 0.5, 0.5);
+      obj.scene.position.x = px;
+      obj.scene.position.y = py;
+      obj.scene.position.z = pz;
+      obj.scene.rotation.y = ry;
+      scene.add(obj.scene);
+    })
+
+  }
+
+  //创建精灵字体
+  function createMark () {
+    var texture = new THREE.TextureLoader().load("./images/dakuang.png");
+    var spriteMaterial = new THREE.SpriteMaterial({
+      color:0xff00ff,//设置精灵矩形区域颜色
+      rotation:Math.PI/4,//旋转精灵对象45度，弧度值
+      map: texture,//设置精灵纹理贴图
+    });
+    var sprite = new THREE.Sprite(spriteMaterial);
+    sprite.scale.set(10, 10, 1);
+    scene.add(sprite);
+    return sprite;
+  }
+
+  function animate() {
+    requestAnimationFrame(animate);
+    render();
+    update();
+  }
+
+  // 更新插件
+  function update() {
+    controls.update();
+    stats.update();
+  }
+
+
+  function render() {
+    renderer.render(scene, camera);
+
+  }
+</script>
+
+
+</body>
+</html>

spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test62/test62.js

@@ -0,0 +1,305 @@
+const test62 = (function() {
+    function test62(id, domTitle) {
+        if (domTitle) {
+            $(".test62 .title h2").text(domTitle);
+        }
+        $(".test62 .box").css("z-index", ++zIndex);
+        $(".test62 .box").attr("data-id", id);
+        move3(".test62 .test-box");
+        move2(".test62 .containerTool");
+
+        let timer = null;
+
+        $(".test62 .close").click(function() {
+            $(".test62 .box").remove();
+            $(".test62 .containerTool").css("display", "none");
+            $(".test62 .setWidth").val("");
+            $(".test62 .setHeight").val("");
+            moduleIdRemove.push(id);
+        });
+
+        eventClick(".test62");
+
+        const dists = document.querySelectorAll(".test62 .floor-dist");
+        const testDoms = document.querySelectorAll(".test62 .box");
+        for (let i = 0; i < dists.length; i++) {
+            const dom = dists[i];
+            setCharts(dom, testDoms[i]);
+        }
+
+        // 局本级
+        $('.bg-center-img-one').click(function() {
+            $('.sf1').slideDown();
+            $('.sf3').slideUp();
+            $('.sf4').slideUp();
+        })
+
+        // 浪潮
+        $('.bg-center-img-three').click(function() {
+            $('.sf4').slideDown();
+            $('.sf1').slideUp();
+            $('.sf3').slideUp();
+        })
+
+        // 华为
+        $('.bg-center-img-four').click(function() {
+            $('.sf3').slideDown();
+            $('.sf1').slideUp();
+            $('.sf4').slideUp();
+        })
+
+
+
+        window.addEventListener("resize", function() {
+            if (timer) {
+                clearTimeout(timer);
+                timer = null;
+            }
+            timer = setTimeout(() => {
+                move3(".test62 .test-box");
+
+                myChart.resize();
+            }, 500);
+        });
+    }
+
+    function setCharts(echartDom, testDom) {
+        var myChart = echarts.init(echartDom);
+        // 地图背景颜色
+        var highlight = "#03b7c9";
+
+        var demoData = [{
+                name: "平均温度",
+                value: 22,
+                unit: "°",
+                pos: ["25%", "40%"],
+                range: [-40, 100],
+                YS: [
+                    [0.4, "#119eff"],
+                    [0.5, "#30da74"],
+                    [1, "#f3390d"],
+                ],
+            },
+            {
+                name: "平均温度",
+                value: 90,
+                unit: "°",
+                pos: ["75%", "40%"],
+                range: [0, 100],
+                splitNum: 10,
+                YS: [
+                    [0.3, "#f3390d"],
+                    [0.8, "#30da74"],
+                    [1, "#119eff"],
+                ],
+            },
+        ];
+
+        option = {
+            series: (function() {
+                var result = [];
+
+                demoData.forEach(function(item) {
+                    result.push(
+                        // 外围刻度
+                        {
+                            type: "gauge",
+                            center: item.pos,
+                            radius: "50%", // 1行2个
+                            splitNumber: item.splitNum || 10,
+                            min: item.range[0],
+                            max: item.range[1],
+                            startAngle: 225,
+                            endAngle: -45,
+                            axisLine: {
+                                show: true,
+                                lineStyle: {
+                                    width: 2,
+                                    shadowBlur: 0,
+                                    color: [
+                                        [1, highlight]
+                                    ],
+                                },
+                            },
+                            axisTick: {
+                                show: true,
+                                lineStyle: {
+                                    color: highlight,
+                                    width: 1,
+                                },
+                                length: -5,
+                                splitNumber: 10,
+                            },
+                            splitLine: {
+                                show: true,
+                                length: -10,
+                                lineStyle: {
+                                    color: highlight,
+                                },
+                            },
+                            axisLabel: {
+                                distance: -18,
+                                textStyle: {
+                                    color: highlight,
+                                    fontSize: "10",
+                                },
+                            },
+                            pointer: {
+                                show: 0,
+                            },
+                            detail: {
+                                show: 0,
+                            },
+                        }, {
+                            name: "速度",
+                            type: "gauge",
+                            center: item.pos,
+                            splitNumber: item.splitNum || 10,
+                            min: item.range[0],
+                            max: item.range[1],
+                            radius: "45%",
+                            axisLine: {
+                                // 坐标轴线
+                                show: false,
+                                lineStyle: {
+                                    // 属性lineStyle控制线条样式
+                                    color: item.YS,
+                                    shadowColor: "#ccc",
+                                    shadowBlur: 25,
+                                    width: 0,
+                                },
+                            },
+                            axisLabel: {
+                                show: false,
+                            },
+                            axisTick: {
+                                // 坐标轴小标记
+                                // show: false,
+                                length: 20, // 属性length控制线长
+                                lineStyle: {
+                                    // 属性lineStyle控制线条样式
+                                    color: "auto",
+                                    width: 2,
+                                },
+                            },
+                            splitLine: {
+                                // 分隔线
+                                show: false,
+                                length: 20, // 属性length控制线长
+                                lineStyle: {
+                                    // 属性lineStyle（详见lineStyle）控制线条样式
+                                    color: "auto",
+                                },
+                            },
+                            title: {
+                                textStyle: {
+                                    // 其余属性默认使用全局文本样式，详见TEXTSTYLE
+                                    fontWeight: "bolder",
+                                    fontSize: 20,
+                                    fontStyle: "italic",
+                                },
+                            },
+                            detail: {
+                                show: true,
+                                offsetCenter: [0, "100%"],
+                                textStyle: {
+                                    fontSize: 25,
+                                },
+                                formatter: [
+                                    "{value} " + (item.unit || ""),
+                                    "{name|" + item.name + "}",
+                                ].join("\n"),
+                                rich: {
+                                    name: {
+                                        fontSize: 16,
+                                        lineHeight: 30,
+                                        color: "#4be4de",
+                                    },
+                                },
+                            },
+                            data: [{
+                                value: item.value,
+                            }, ],
+                            pointer: {
+                                width: 5,
+                            },
+                        },
+                        // 内侧指针、数值显示
+                        {
+                            name: item.name,
+                            type: "gauge",
+                            center: item.pos,
+                            radius: "40%",
+                            startAngle: 225,
+                            endAngle: -45,
+                            min: item.range[0],
+                            max: item.range[1],
+                            axisLine: {
+                                show: true,
+                                lineStyle: {
+                                    width: 16,
+                                    color: [
+                                        [1, "rgba(75,228,255,.1)"]
+                                    ],
+                                },
+                            },
+                            axisTick: {
+                                show: 0,
+                            },
+                            splitLine: {
+                                show: 0,
+                            },
+                            axisLabel: {
+                                show: 0,
+                            },
+                            pointer: {
+                                show: true,
+                                length: "90%",
+                                width: 3,
+                            },
+                            itemStyle: {
+                                //表盘指针的颜色
+                                color: "rgba(255, 153, 0, 0.31)",
+                                borderColor: "#ff9900",
+                                borderWidth: 1,
+                            },
+                            detail: {
+                                show: false,
+                                offsetCenter: [0, "100%"],
+                                textStyle: {
+                                    fontSize: 20,
+                                    color: "#00eff2",
+                                },
+                                formatter: [
+                                    "{value} " + (item.unit || ""),
+                                    "{name|" + item.name + "}",
+                                ].join("\n"),
+                                rich: {
+                                    name: {
+                                        fontSize: 14,
+                                        lineHeight: 30,
+                                        color: "#00eff2",
+                                    },
+                                },
+                            },
+
+                            data: [{
+                                value: item.value,
+                            }, ],
+                        }
+                    );
+                });
+                return result;
+            })(),
+        };
+        if (option) {
+            myChart.setOption(option);
+        }
+
+        if (!testDom) {
+            testDom = document.querySelectorAll(".test62 .box");
+        }
+        obsDom(testDom, myChart);
+    }
+    return test62;
+})();

spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test63/test63.css

@@ -0,0 +1,20 @@
+.box63 * {
+  margin: 0;
+  padding: 0;
+}
+
+.box63 body {
+  margin: 0;
+  border: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.box63 #ThreeJS {
+  width: 100%;
+  height: 100%;
+  background: url("./images/bg.png") no-repeat;
+  background-size: 100% 100%;
+}

spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test63/test63.js

@@ -0,0 +1,305 @@
+const test63 = (function() {
+    function test63(id, domTitle) {
+        if (domTitle) {
+            $(".test63 .title h2").text(domTitle);
+        }
+        $(".test63 .box").css("z-index", ++zIndex);
+        $(".test63 .box").attr("data-id", id);
+        move3(".test63 .test-box");
+        move2(".test63 .containerTool");
+
+        let timer = null;
+
+        $(".test63 .close").click(function() {
+            $(".test63 .box").remove();
+            $(".test63 .containerTool").css("display", "none");
+            $(".test63 .setWidth").val("");
+            $(".test63 .setHeight").val("");
+            moduleIdRemove.push(id);
+        });
+
+        eventClick(".test63");
+
+        const dists = document.querySelectorAll(".test63 .floor-dist");
+        const testDoms = document.querySelectorAll(".test63 .box");
+        for (let i = 0; i < dists.length; i++) {
+            const dom = dists[i];
+            setCharts(dom, testDoms[i]);
+        }
+
+        // 局本级
+        $('.bg-center-img-one').click(function() {
+            $('.sf1').slideDown();
+            $('.sf3').slideUp();
+            $('.sf4').slideUp();
+        })
+
+        // 浪潮
+        $('.bg-center-img-three').click(function() {
+            $('.sf4').slideDown();
+            $('.sf1').slideUp();
+            $('.sf3').slideUp();
+        })
+
+        // 华为
+        $('.bg-center-img-four').click(function() {
+            $('.sf3').slideDown();
+            $('.sf1').slideUp();
+            $('.sf4').slideUp();
+        })
+
+
+
+        window.addEventListener("resize", function() {
+            if (timer) {
+                clearTimeout(timer);
+                timer = null;
+            }
+            timer = setTimeout(() => {
+                move3(".test63 .test-box");
+
+                myChart.resize();
+            }, 500);
+        });
+    }
+
+    function setCharts(echartDom, testDom) {
+        var myChart = echarts.init(echartDom);
+        // 地图背景颜色
+        var highlight = "#03b7c9";
+
+        var demoData = [{
+                name: "平均温度",
+                value: 22,
+                unit: "°",
+                pos: ["25%", "40%"],
+                range: [-40, 100],
+                YS: [
+                    [0.4, "#119eff"],
+                    [0.5, "#30da74"],
+                    [1, "#f3390d"],
+                ],
+            },
+            {
+                name: "平均温度",
+                value: 90,
+                unit: "°",
+                pos: ["75%", "40%"],
+                range: [0, 100],
+                splitNum: 10,
+                YS: [
+                    [0.3, "#f3390d"],
+                    [0.8, "#30da74"],
+                    [1, "#119eff"],
+                ],
+            },
+        ];
+
+        option = {
+            series: (function() {
+                var result = [];
+
+                demoData.forEach(function(item) {
+                    result.push(
+                        // 外围刻度
+                        {
+                            type: "gauge",
+                            center: item.pos,
+                            radius: "50%", // 1行2个
+                            splitNumber: item.splitNum || 10,
+                            min: item.range[0],
+                            max: item.range[1],
+                            startAngle: 225,
+                            endAngle: -45,
+                            axisLine: {
+                                show: true,
+                                lineStyle: {
+                                    width: 2,
+                                    shadowBlur: 0,
+                                    color: [
+                                        [1, highlight]
+                                    ],
+                                },
+                            },
+                            axisTick: {
+                                show: true,
+                                lineStyle: {
+                                    color: highlight,
+                                    width: 1,
+                                },
+                                length: -5,
+                                splitNumber: 10,
+                            },
+                            splitLine: {
+                                show: true,
+                                length: -10,
+                                lineStyle: {
+                                    color: highlight,
+                                },
+                            },
+                            axisLabel: {
+                                distance: -18,
+                                textStyle: {
+                                    color: highlight,
+                                    fontSize: "10",
+                                },
+                            },
+                            pointer: {
+                                show: 0,
+                            },
+                            detail: {
+                                show: 0,
+                            },
+                        }, {
+                            name: "速度",
+                            type: "gauge",
+                            center: item.pos,
+                            splitNumber: item.splitNum || 10,
+                            min: item.range[0],
+                            max: item.range[1],
+                            radius: "45%",
+                            axisLine: {
+                                // 坐标轴线
+                                show: false,
+                                lineStyle: {
+                                    // 属性lineStyle控制线条样式
+                                    color: item.YS,
+                                    shadowColor: "#ccc",
+                                    shadowBlur: 25,
+                                    width: 0,
+                                },
+                            },
+                            axisLabel: {
+                                show: false,
+                            },
+                            axisTick: {
+                                // 坐标轴小标记
+                                // show: false,
+                                length: 20, // 属性length控制线长
+                                lineStyle: {
+                                    // 属性lineStyle控制线条样式
+                                    color: "auto",
+                                    width: 2,
+                                },
+                            },
+                            splitLine: {
+                                // 分隔线
+                                show: false,
+                                length: 20, // 属性length控制线长
+                                lineStyle: {
+                                    // 属性lineStyle（详见lineStyle）控制线条样式
+                                    color: "auto",
+                                },
+                            },
+                            title: {
+                                textStyle: {
+                                    // 其余属性默认使用全局文本样式，详见TEXTSTYLE
+                                    fontWeight: "bolder",
+                                    fontSize: 20,
+                                    fontStyle: "italic",
+                                },
+                            },
+                            detail: {
+                                show: true,
+                                offsetCenter: [0, "100%"],
+                                textStyle: {
+                                    fontSize: 25,
+                                },
+                                formatter: [
+                                    "{value} " + (item.unit || ""),
+                                    "{name|" + item.name + "}",
+                                ].join("\n"),
+                                rich: {
+                                    name: {
+                                        fontSize: 16,
+                                        lineHeight: 30,
+                                        color: "#4be4de",
+                                    },
+                                },
+                            },
+                            data: [{
+                                value: item.value,
+                            }, ],
+                            pointer: {
+                                width: 5,
+                            },
+                        },
+                        // 内侧指针、数值显示
+                        {
+                            name: item.name,
+                            type: "gauge",
+                            center: item.pos,
+                            radius: "40%",
+                            startAngle: 225,
+                            endAngle: -45,
+                            min: item.range[0],
+                            max: item.range[1],
+                            axisLine: {
+                                show: true,
+                                lineStyle: {
+                                    width: 16,
+                                    color: [
+                                        [1, "rgba(75,228,255,.1)"]
+                                    ],
+                                },
+                            },
+                            axisTick: {
+                                show: 0,
+                            },
+                            splitLine: {
+                                show: 0,
+                            },
+                            axisLabel: {
+                                show: 0,
+                            },
+                            pointer: {
+                                show: true,
+                                length: "90%",
+                                width: 3,
+                            },
+                            itemStyle: {
+                                //表盘指针的颜色
+                                color: "rgba(255, 153, 0, 0.31)",
+                                borderColor: "#ff9900",
+                                borderWidth: 1,
+                            },
+                            detail: {
+                                show: false,
+                                offsetCenter: [0, "100%"],
+                                textStyle: {
+                                    fontSize: 20,
+                                    color: "#00eff2",
+                                },
+                                formatter: [
+                                    "{value} " + (item.unit || ""),
+                                    "{name|" + item.name + "}",
+                                ].join("\n"),
+                                rich: {
+                                    name: {
+                                        fontSize: 14,
+                                        lineHeight: 30,
+                                        color: "#00eff2",
+                                    },
+                                },
+                            },
+
+                            data: [{
+                                value: item.value,
+                            }, ],
+                        }
+                    );
+                });
+                return result;
+            })(),
+        };
+        if (option) {
+            myChart.setOption(option);
+        }
+
+        if (!testDom) {
+            testDom = document.querySelectorAll(".test63 .box");
+        }
+        obsDom(testDom, myChart);
+    }
+    return test63;
+})();

spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test64/test64.css

@@ -0,0 +1,20 @@
+.box64 * {
+  margin: 0;
+  padding: 0;
+}
+
+.box64 body {
+  margin: 0;
+  border: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.box64 #ThreeJS {
+  width: 100%;
+  height: 100%;
+  background: url("./images/bg.png") no-repeat;
+  background-size: 100% 100%;
+}

spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test64/test64.html

@@ -0,0 +1,609 @@
+<div class="box64 box" data-name="test61">
+  <div class="toolBox">
+    <span class="fit"></span>
+    <span class="close"></span>
+  </div>
+  <div class="test-box">
+    <div class="concent">
+      <div id="ThreeJS"></div>
+    </div>
+  </div>
+  <div class="panel-footer"></div>
+</div>
+
+<!-- 工具弹框 -->
+<div class="tools" style="display: none">
+  <div class="containerTool test61Toll">
+    <ul>
+      <li>
+        <span>宽度：</span>
+        <input class="setWidth" type="text" />
+        <span id="validateAge" class="regValidate"></span>
+      </li>
+      <li>
+        <span>高度：</span>
+        <input class="setHeight" type="text" />
+      </li>
+    </ul>
+    <!-- 确定 -->
+    <button class="fixBtn toolBtn">确定</button>
+    <button class="offBtn toolBtn">取消</button>
+  </div>
+</div>
+
+<script src="js/three.js"></script>
+<script src="js/GLTFLoader.js"></script>
+<script src="js/FBXLoader.js"></script>
+<script src="js/inflate.min.js"></script>
+<script src="js/OrbitControls.js"></script>
+<script src="js/Stats.js"></script>
+<script src="js/Detector.js"></script>
+<script src="js/ThreeBSP.js"></script>
+
+<script type="module">
+  const boxcontanier = document.getElementById("ThreeJS");
+
+  let scene, camera, renderer, controls, stats;
+  const SCREEN_WIDTH = window.innerWidth;
+  const SCREEN_HEIGHT = window.innerHeight;
+
+  //加载贴图模型
+  let textureLoader = new THREE.TextureLoader();
+  var mixer = null;
+  var clock = new THREE.Clock();
+
+  init();
+  animate();
+
+  function init() {
+    // 场景
+    scene = new THREE.Scene();
+
+    // 相机
+    var VIEW_ANGLE = 30,
+      ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT,
+      NEAR = 0.1,
+      FAR = 2000;
+
+    camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
+    scene.add(camera);
+    camera.position.set(0, 450, 250);
+    camera.lookAt(scene.position);
+
+    // 渲染器
+    if (Detector.webgl)
+      renderer = new THREE.WebGLRenderer({
+        antialias: true, //开启锯齿
+        alpha: true,
+        precision: "highp",
+      });
+    else renderer = new THREE.CanvasRenderer();
+
+    renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
+    renderer.setClearAlpha(0.0);
+    renderer.shadowMap.enabled = true;
+    //当界面改变时重新渲染canvas尺寸
+    window.οnresize = function () {
+      renderer.setPixelRatio(window.devicePixelRatio); //设备像素比，防止画布输出模糊
+      camera.aspect = window.innerWidth / window.innerHeight;
+      camera.updateProjectionMatrix();
+      renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
+    };
+    //renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
+    boxcontanier.appendChild(renderer.domElement);
+
+    // 鼠标控件
+    controls = new THREE.OrbitControls(camera, renderer.domElement);
+    controls.addEventListener("change", render);
+    //controls.listenToKeyEvents( window );
+    // controls.enableDamping = true;
+    // controls.dampingFactor = 0.15;
+    // controls.screenSpacePanning = false;
+    controls.maxPolarAngle = Math.PI / 2;
+    //var clock = new THREE.Clock();
+
+    // 性能插件
+    stats = new Stats();
+    stats.domElement.style.position = "absolute";
+    stats.domElement.style.top = "0px";
+    stats.domElement.style.zIndex = 100;
+    boxcontanier.appendChild(stats.domElement);
+
+    // 光源
+    // var light = new THREE.PointLight(0x00ff00);
+    // light.position.set(0, 100, 0);
+    // scene.add(light);
+    // console.log(light);
+
+    var directionalLight = new THREE.DirectionalLight(0xffffff, 0.6); // 光的颜色，光照强度
+    directionalLight.position.set(400, 200, 300);
+    scene.add(directionalLight);
+
+    var directionalLight2 = new THREE.DirectionalLight(0xffffff, 0.6);
+    directionalLight2.position.set(-400, -200, -300);
+    scene.add(directionalLight2);
+
+    var ambient = new THREE.AmbientLight(0xffffff, 0.6);
+    scene.add(ambient);
+
+    // 初始化模型
+    initModel();
+  }
+
+  function initModel() {
+    // 地板
+    createFloor(350, 150);
+
+    // 玻璃墙
+    createGlassWall(
+      350,
+      100,
+      150,
+      0,
+      50,
+      0,
+      0,
+      0,
+      0,
+      [
+        {
+          size: [344, 100, 144],
+          position: [0, 0, 0],
+          rotation: [0, 0, 0],
+        },
+        {
+          size: [66, 70, 6],
+          position: [172, -15, 0],
+          rotation: [0, Math.PI / 2, 0],
+        },
+      ],
+      0.4
+    );
+    // 门
+    createDoor(174, 35, 0);
+
+    //机柜
+    createCabinet(30, 80, 30, 96, 40, 58, 0, Math.PI, 0);
+    createCabinet(30, 80, 30, 66, 40, 58, 0, Math.PI, 0);
+    createCabinet(30, 80, 30, 36, 40, 58, 0, Math.PI, 0);
+    createCabinet(30, 80, 30, 6, 40, 58, 0, Math.PI, 0);
+    createCabinet(30, 80, 30, -24, 40, 58, 0, Math.PI, 0);
+    createCabinet(30, 80, 30, -54, 40, 58, 0, Math.PI, 0);
+    createCabinet(30, 80, 30, -84, 40, 58, 0, Math.PI, 0);
+    createCabinet(30, 80, 30, -114, 40, 58, 0, Math.PI, 0);
+
+    // 空调
+    createStandAir(30, 80, 20, -50, 40, -60, 0, 0, 0);
+
+    //	桌子
+    createComputerDesk(80, 3, -50, 0, -Math.PI / 2, 0);
+  }
+
+  // 创建地板
+  function createFloor(width, height) {
+    var floorGeometry = new THREE.PlaneGeometry(width, height);
+    var maps = textureLoader.load("./images/floor.png");
+    maps.wrapS = maps.wrapT = THREE.RepeatWrapping;
+    maps.repeat.set(8, 6);
+    maps.needsUpdate = true;
+
+    var material = new THREE.MeshBasicMaterial({
+      map: maps,
+      side: THREE.DoubleSide,
+    });
+    var floor = new THREE.Mesh(floorGeometry, material);
+    floor.rotation.x = Math.PI / 2;
+    scene.add(floor);
+    return floor;
+  }
+
+  // 创建玻璃墙
+  function createGlassWall(w, h, d, px, py, pz, rx, ry, rz, holes, opa) {
+    var geometry = new THREE.BoxGeometry(w, h, d);
+    var texture = new textureLoader.load("./images/jsk.png");
+    texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
+    texture.repeat.set(1, 1);
+    var meterials = new THREE.MeshStandardMaterial({
+      // color: 0xD6F2F2,
+      color: 0xeff8fc,
+      // map: texture,
+      opacity: opa,
+      transparent: true,
+      side: THREE.DoubleSide,
+    });
+    var glassW = new THREE.Mesh(geometry, meterials);
+    if (holes) {
+      for (var i = 0; i < holes.length; i++) {
+        var totalBSP = new ThreeBSP(glassW);
+        var hole = holes[i];
+        var holeGeometry = new THREE.BoxGeometry(
+          hole.size[0],
+          hole.size[1],
+          hole.size[2]
+        );
+        var holeCube = new THREE.Mesh(holeGeometry);
+        holeCube.position.x = hole.position[0];
+        holeCube.position.y = hole.position[1];
+        holeCube.position.z = hole.position[2];
+
+        holeCube.rotation.y = hole.rotation[1];
+
+        var clipBSP = new ThreeBSP(holeCube);
+
+        var resultBSP = totalBSP.subtract(clipBSP);
+
+        glassW = resultBSP.toMesh();
+      }
+
+      glassW.material = meterials;
+    }
+
+    glassW.position.x = px;
+    glassW.position.y = py;
+    glassW.position.z = pz;
+
+    glassW.rotation.y = ry;
+
+    scene.add(glassW);
+
+    return glassW;
+  }
+
+  // 创建空调
+  function createStandAir(w, h, d, px, py, pz, rx, ry, rz) {
+    var texture = new THREE.ImageUtils.loadTexture("./fourImages/kongtiao.png");
+    //var texture = new THREE.ImageUtils.loadTexture('img/airCondition.png');
+    texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
+    texture.repeat.set(1, 1);
+
+    var geometry = new THREE.BoxGeometry(w, h, d);
+
+    var materialArray = [];
+    materialArray.push(
+      new THREE.MeshBasicMaterial({
+        color: 0x979697,
+      })
+    );
+    materialArray.push(
+      new THREE.MeshBasicMaterial({
+        color: 0x979697,
+      })
+    );
+    materialArray.push(
+      new THREE.MeshBasicMaterial({
+        color: 0x979697,
+      })
+    );
+    materialArray.push(
+      new THREE.MeshBasicMaterial({
+        color: 0x979697,
+      })
+    );
+    materialArray.push(
+      new THREE.MeshBasicMaterial({
+        map: texture,
+      })
+    );
+    materialArray.push(
+      new THREE.MeshBasicMaterial({
+        color: 0x979697,
+      })
+    );
+    var material = new THREE.MeshFaceMaterial(materialArray);
+
+    var air = new THREE.Mesh(geometry, material);
+
+    air.position.x = px;
+    air.position.y = py;
+    air.position.z = pz;
+
+    air.rotation.x = rx;
+    air.rotation.y = ry;
+    air.rotation.z = rz;
+
+    scene.add(air);
+
+    return air;
+  }
+
+  // 创建小空调
+  function createSmallAir(w, h, d, px, py, pz, rx, ry, rz) {
+    var texture = new THREE.ImageUtils.loadTexture("./images/kongg.png");
+    //var texture = new THREE.ImageUtils.loadTexture('img/airCondition.png');
+    texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
+    texture.repeat.set(1, 1);
+
+    var geometry = new THREE.BoxGeometry(w, h, d);
+
+    var materialArray = [];
+    materialArray.push(
+      new THREE.MeshBasicMaterial({
+        color: 0x979697,
+      })
+    );
+    materialArray.push(
+      new THREE.MeshBasicMaterial({
+        color: 0x979697,
+      })
+    );
+    materialArray.push(
+      new THREE.MeshBasicMaterial({
+        color: 0x979697,
+      })
+    );
+    materialArray.push(
+      new THREE.MeshBasicMaterial({
+        color: 0x979697,
+      })
+    );
+    materialArray.push(
+      new THREE.MeshBasicMaterial({
+        map: texture,
+      })
+    );
+    materialArray.push(
+      new THREE.MeshBasicMaterial({
+        color: 0x979697,
+      })
+    );
+    var material = new THREE.MeshFaceMaterial(materialArray);
+
+    var smallair = new THREE.Mesh(geometry, material);
+
+    smallair.position.x = px;
+    smallair.position.y = py;
+    smallair.position.z = pz;
+
+    smallair.rotation.x = rx;
+    smallair.rotation.y = ry;
+    smallair.rotation.z = rz;
+
+    scene.add(smallair);
+
+    return smallair;
+  }
+
+  // 创建门
+  function createDoor(px, py, pz) {
+    const fbxloader = new THREE.FBXLoader();
+    fbxloader.load("./model/door.fbx", function (obj) {
+      const item = obj.children[0];
+      item.scale.set(0.03, 0.05, 0.03);
+      item.position.set(px, py, pz);
+      item.rotation.y = Math.PI / 2;
+      obj.castShadow = true;
+      scene.add(obj);
+    });
+  }
+
+  // 创建桌子
+  function createComputerDesk(px, py, pz, rx, ry, rz) {
+    // 加载 glTF 格式的模型
+    let loader = new THREE.GLTFLoader(); /*实例化加载器*/
+    var textureNormal = textureLoader.load("./images/ambient_occlusion.jpg");
+    loader.load("./model/dnz.gltf", function (obj) {
+      console.log(obj);
+      obj.scene.scale.set(5, 10, 6);
+      obj.scene.position.x = px;
+      obj.scene.position.y = py;
+      obj.scene.position.z = pz;
+
+      obj.scene.rotation.y = ry;
+
+      obj.scene.traverse(function (gltf) {
+        if (gltf.type === "Mesh") {
+          gltf.material = new THREE.MeshPhongMaterial({
+            color: 0xcccccc,
+            map: textureNormal,
+            normalScale: new THREE.Vector2(1, 1),
+          });
+        }
+      });
+
+      scene.add(obj.scene);
+    });
+  }
+
+  // 创建强电箱
+  function createStrlight(w, h, d, px, py, pz, rx, ry, rz) {
+    // var texture = new THREE.ImageUtils.loadTexture('./fourImages/airfiretop.png');
+    // texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
+    // texture.repeat.set(1, 1);
+
+    var texture2 = new THREE.ImageUtils.loadTexture("./images/pdg.png");
+    texture2.wrapS = texture2.wrapT = THREE.RepeatWrapping;
+    texture2.repeat.set(1, 1);
+
+    var geometry = new THREE.BoxGeometry(w, h, d);
+    //var material = new THREE.MeshBasicMaterial( { map: texture } );
+    // Create an array of materials to be used in a cube, one for each side
+    var materialArray = [];
+    // order to add materials: x+,x-,y+,y-,z+,z-
+    materialArray.push(
+      new THREE.MeshBasicMaterial({
+        color: 0x969d7a, //后面
+      })
+    );
+    materialArray.push(
+      new THREE.MeshBasicMaterial({
+        color: 0x969d7a, //前面
+      })
+    );
+    materialArray.push(
+      new THREE.MeshBasicMaterial({
+        color: 0x969d7a, //上
+      })
+    );
+    materialArray.push(
+      new THREE.MeshBasicMaterial({
+        color: 0x969d7a, //下
+      })
+    );
+    materialArray.push(
+      new THREE.MeshBasicMaterial({
+        map: texture2, // 左
+      })
+    );
+    materialArray.push(
+      new THREE.MeshBasicMaterial({
+        color: 0x969d7a, //右
+      })
+    );
+    var material = new THREE.MeshFaceMaterial(materialArray);
+
+    var strlight = new THREE.Mesh(geometry, material);
+
+    strlight.position.x = px;
+    strlight.position.y = py;
+    strlight.position.z = pz;
+
+    strlight.rotation.x = rx;
+    strlight.rotation.y = ry;
+    strlight.rotation.z = rz;
+
+    scene.add(strlight);
+
+    return strlight;
+  }
+
+  // 创建档案柜
+  function createFileCabniet(w, h, d, px, py, pz, rx, ry, rz) {
+    // var texture = new THREE.ImageUtils.loadTexture('./fourImages/airfiretop.png');
+    // texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
+    // texture.repeat.set(1, 1);
+
+    var texture2 = new THREE.ImageUtils.loadTexture("./images/filecabniet.png");
+    texture2.wrapS = texture2.wrapT = THREE.RepeatWrapping;
+    texture2.repeat.set(1, 1);
+
+    var geometry = new THREE.BoxGeometry(w, h, d);
+    //var material = new THREE.MeshBasicMaterial( { map: texture } );
+    // Create an array of materials to be used in a cube, one for each side
+    var materialArray = [];
+    // order to add materials: x+,x-,y+,y-,z+,z-
+    materialArray.push(
+      new THREE.MeshBasicMaterial({
+        color: 0x979697, //后面
+      })
+    );
+    materialArray.push(
+      new THREE.MeshBasicMaterial({
+        color: 0x979697, //前面
+      })
+    );
+    materialArray.push(
+      new THREE.MeshBasicMaterial({
+        color: 0x979697, //上
+      })
+    );
+    materialArray.push(
+      new THREE.MeshBasicMaterial({
+        color: 0x979697, //下
+      })
+    );
+    materialArray.push(
+      new THREE.MeshBasicMaterial({
+        map: texture2, // 左
+      })
+    );
+    materialArray.push(
+      new THREE.MeshBasicMaterial({
+        color: 0x979697, //右
+      })
+    );
+    var material = new THREE.MeshFaceMaterial(materialArray);
+
+    var filecabniet = new THREE.Mesh(geometry, material);
+
+    filecabniet.position.x = px;
+    filecabniet.position.y = py;
+    filecabniet.position.z = pz;
+
+    filecabniet.rotation.x = rx;
+    filecabniet.rotation.y = ry;
+    filecabniet.rotation.z = rz;
+    scene.add(filecabniet);
+
+    return filecabniet;
+  }
+
+  //创建机柜
+  function createCabinet(w, h, d, px, py, pz, rx, ry, rz) {
+    var texture = new THREE.ImageUtils.loadTexture(
+      "./images/rack_door_front.png"
+    );
+    texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
+    texture.repeat.set(1, 1);
+
+    var texture2 = new THREE.ImageUtils.loadTexture(
+      "./images/rack_door_back.png"
+    );
+    texture2.wrapS = texture2.wrapT = THREE.RepeatWrapping;
+    texture2.repeat.set(1, 1);
+
+    var geometry = new THREE.BoxGeometry(w, h, d);
+    //var material = new THREE.MeshBasicMaterial( { map: texture } );
+    // Create an array of materials to be used in a cube, one for each side
+    var materialArray = [];
+    // order to add materials: x+,x-,y+,y-,z+,z-
+    materialArray.push(
+      new THREE.MeshBasicMaterial({
+        map: texture2,
+      })
+    );
+    materialArray.push(
+      new THREE.MeshBasicMaterial({
+        map: texture2,
+      })
+    );
+    materialArray.push(
+      new THREE.MeshBasicMaterial({
+        map: texture2,
+      })
+    );
+    materialArray.push(
+      new THREE.MeshBasicMaterial({
+        map: texture2,
+      })
+    );
+    materialArray.push(
+      new THREE.MeshBasicMaterial({
+        map: texture,
+      })
+    );
+    materialArray.push(
+      new THREE.MeshBasicMaterial({
+        map: texture2,
+      })
+    );
+    var material = new THREE.MeshFaceMaterial(materialArray);
+
+    var cabinet = new THREE.Mesh(geometry, material);
+
+    cabinet.position.x = px;
+    cabinet.position.y = py;
+    cabinet.position.z = pz;
+
+    cabinet.rotation.y = ry;
+
+    scene.add(cabinet);
+
+    return cabinet;
+  }
+
+  function animate() {
+    requestAnimationFrame(animate);
+    render();
+    update();
+  }
+
+  // 更新插件
+  function update() {
+    controls.update();
+    stats.update();
+  }
+
+  function render() {
+    renderer.render(scene, camera);
+  }
+</script>

spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test64/test64.js

@@ -0,0 +1,305 @@
+const test64 = (function() {
+    function test64(id, domTitle) {
+        if (domTitle) {
+            $(".test64 .title h2").text(domTitle);
+        }
+        $(".test64 .box").css("z-index", ++zIndex);
+        $(".test64 .box").attr("data-id", id);
+        move3(".test64 .test-box");
+        move2(".test64 .containerTool");
+
+        let timer = null;
+
+        $(".test64 .close").click(function() {
+            $(".test64 .box").remove();
+            $(".test64 .containerTool").css("display", "none");
+            $(".test64 .setWidth").val("");
+            $(".test64 .setHeight").val("");
+            moduleIdRemove.push(id);
+        });
+
+        eventClick(".test64");
+
+        const dists = document.querySelectorAll(".test64 .floor-dist");
+        const testDoms = document.querySelectorAll(".test64 .box");
+        for (let i = 0; i < dists.length; i++) {
+            const dom = dists[i];
+            setCharts(dom, testDoms[i]);
+        }
+
+        // 局本级
+        $('.bg-center-img-one').click(function() {
+            $('.sf1').slideDown();
+            $('.sf3').slideUp();
+            $('.sf4').slideUp();
+        })
+
+        // 浪潮
+        $('.bg-center-img-three').click(function() {
+            $('.sf4').slideDown();
+            $('.sf1').slideUp();
+            $('.sf3').slideUp();
+        })
+
+        // 华为
+        $('.bg-center-img-four').click(function() {
+            $('.sf3').slideDown();
+            $('.sf1').slideUp();
+            $('.sf4').slideUp();
+        })
+
+
+
+        window.addEventListener("resize", function() {
+            if (timer) {
+                clearTimeout(timer);
+                timer = null;
+            }
+            timer = setTimeout(() => {
+                move3(".test64 .test-box");
+
+                myChart.resize();
+            }, 500);
+        });
+    }
+
+    function setCharts(echartDom, testDom) {
+        var myChart = echarts.init(echartDom);
+        // 地图背景颜色
+        var highlight = "#03b7c9";
+
+        var demoData = [{
+                name: "平均温度",
+                value: 22,
+                unit: "°",
+                pos: ["25%", "40%"],
+                range: [-40, 100],
+                YS: [
+                    [0.4, "#119eff"],
+                    [0.5, "#30da74"],
+                    [1, "#f3390d"],
+                ],
+            },
+            {
+                name: "平均温度",
+                value: 90,
+                unit: "°",
+                pos: ["75%", "40%"],
+                range: [0, 100],
+                splitNum: 10,
+                YS: [
+                    [0.3, "#f3390d"],
+                    [0.8, "#30da74"],
+                    [1, "#119eff"],
+                ],
+            },
+        ];
+
+        option = {
+            series: (function() {
+                var result = [];
+
+                demoData.forEach(function(item) {
+                    result.push(
+                        // 外围刻度
+                        {
+                            type: "gauge",
+                            center: item.pos,
+                            radius: "50%", // 1行2个
+                            splitNumber: item.splitNum || 10,
+                            min: item.range[0],
+                            max: item.range[1],
+                            startAngle: 225,
+                            endAngle: -45,
+                            axisLine: {
+                                show: true,
+                                lineStyle: {
+                                    width: 2,
+                                    shadowBlur: 0,
+                                    color: [
+                                        [1, highlight]
+                                    ],
+                                },
+                            },
+                            axisTick: {
+                                show: true,
+                                lineStyle: {
+                                    color: highlight,
+                                    width: 1,
+                                },
+                                length: -5,
+                                splitNumber: 10,
+                            },
+                            splitLine: {
+                                show: true,
+                                length: -10,
+                                lineStyle: {
+                                    color: highlight,
+                                },
+                            },
+                            axisLabel: {
+                                distance: -18,
+                                textStyle: {
+                                    color: highlight,
+                                    fontSize: "10",
+                                },
+                            },
+                            pointer: {
+                                show: 0,
+                            },
+                            detail: {
+                                show: 0,
+                            },
+                        }, {
+                            name: "速度",
+                            type: "gauge",
+                            center: item.pos,
+                            splitNumber: item.splitNum || 10,
+                            min: item.range[0],
+                            max: item.range[1],
+                            radius: "45%",
+                            axisLine: {
+                                // 坐标轴线
+                                show: false,
+                                lineStyle: {
+                                    // 属性lineStyle控制线条样式
+                                    color: item.YS,
+                                    shadowColor: "#ccc",
+                                    shadowBlur: 25,
+                                    width: 0,
+                                },
+                            },
+                            axisLabel: {
+                                show: false,
+                            },
+                            axisTick: {
+                                // 坐标轴小标记
+                                // show: false,
+                                length: 20, // 属性length控制线长
+                                lineStyle: {
+                                    // 属性lineStyle控制线条样式
+                                    color: "auto",
+                                    width: 2,
+                                },
+                            },
+                            splitLine: {
+                                // 分隔线
+                                show: false,
+                                length: 20, // 属性length控制线长
+                                lineStyle: {
+                                    // 属性lineStyle（详见lineStyle）控制线条样式
+                                    color: "auto",
+                                },
+                            },
+                            title: {
+                                textStyle: {
+                                    // 其余属性默认使用全局文本样式，详见TEXTSTYLE
+                                    fontWeight: "bolder",
+                                    fontSize: 20,
+                                    fontStyle: "italic",
+                                },
+                            },
+                            detail: {
+                                show: true,
+                                offsetCenter: [0, "100%"],
+                                textStyle: {
+                                    fontSize: 25,
+                                },
+                                formatter: [
+                                    "{value} " + (item.unit || ""),
+                                    "{name|" + item.name + "}",
+                                ].join("\n"),
+                                rich: {
+                                    name: {
+                                        fontSize: 16,
+                                        lineHeight: 30,
+                                        color: "#4be4de",
+                                    },
+                                },
+                            },
+                            data: [{
+                                value: item.value,
+                            }, ],
+                            pointer: {
+                                width: 5,
+                            },
+                        },
+                        // 内侧指针、数值显示
+                        {
+                            name: item.name,
+                            type: "gauge",
+                            center: item.pos,
+                            radius: "40%",
+                            startAngle: 225,
+                            endAngle: -45,
+                            min: item.range[0],
+                            max: item.range[1],
+                            axisLine: {
+                                show: true,
+                                lineStyle: {
+                                    width: 16,
+                                    color: [
+                                        [1, "rgba(75,228,255,.1)"]
+                                    ],
+                                },
+                            },
+                            axisTick: {
+                                show: 0,
+                            },
+                            splitLine: {
+                                show: 0,
+                            },
+                            axisLabel: {
+                                show: 0,
+                            },
+                            pointer: {
+                                show: true,
+                                length: "90%",
+                                width: 3,
+                            },
+                            itemStyle: {
+                                //表盘指针的颜色
+                                color: "rgba(255, 153, 0, 0.31)",
+                                borderColor: "#ff9900",
+                                borderWidth: 1,
+                            },
+                            detail: {
+                                show: false,
+                                offsetCenter: [0, "100%"],
+                                textStyle: {
+                                    fontSize: 20,
+                                    color: "#00eff2",
+                                },
+                                formatter: [
+                                    "{value} " + (item.unit || ""),
+                                    "{name|" + item.name + "}",
+                                ].join("\n"),
+                                rich: {
+                                    name: {
+                                        fontSize: 14,
+                                        lineHeight: 30,
+                                        color: "#00eff2",
+                                    },
+                                },
+                            },
+
+                            data: [{
+                                value: item.value,
+                            }, ],
+                        }
+                    );
+                });
+                return result;
+            })(),
+        };
+        if (option) {
+            myChart.setOption(option);
+        }
+
+        if (!testDom) {
+            testDom = document.querySelectorAll(".test64 .box");
+        }
+        obsDom(testDom, myChart);
+    }
+    return test64;
+})();

spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test65/test65.css

@@ -0,0 +1,20 @@
+.box65 * {
+  margin: 0;
+  padding: 0;
+}
+
+.box65 body {
+  margin: 0;
+  border: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.box65 #ThreeJS {
+  width: 100%;
+  height: 100%;
+  background: url("./images/bg.png") no-repeat;
+  background-size: 100% 100%;
+}

spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test65/test65.html

@@ -0,0 +1,465 @@
+<div class="box65 box" data-name="test61">
+  <div class="toolBox">
+    <span class="fit"></span>
+    <span class="close"></span>
+  </div>
+  <div class="test-box">
+    <div class="concent">
+      <div id="ThreeJS"></div>
+    </div>
+  </div>
+  <div class="panel-footer"></div>
+</div>
+
+<!-- 工具弹框 -->
+<div class="tools" style="display: none">
+  <div class="containerTool test61Toll">
+    <ul>
+      <li>
+        <span>宽度：</span>
+        <input class="setWidth" type="text" />
+        <span id="validateAge" class="regValidate"></span>
+      </li>
+      <li>
+        <span>高度：</span>
+        <input class="setHeight" type="text" />
+      </li>
+    </ul>
+    <!-- 确定 -->
+    <button class="fixBtn toolBtn">确定</button>
+    <button class="offBtn toolBtn">取消</button>
+  </div>
+</div>
+
+<script src="js/three.js"></script>
+<script src="js/GLTFLoader.js"></script>
+<script src="js/FBXLoader.js"></script>
+<script src="js/inflate.min.js"></script>
+<script src="js/OrbitControls.js"></script>
+<script src="js/Stats.js"></script>
+<script src="js/Detector.js"></script>
+<script src="js/ThreeBSP.js"></script>
+
+<script type="module">
+  const boxcontanier = document.getElementById("ThreeJS");
+
+  let scene, camera, renderer, controls, stats, sprite;
+  const SCREEN_WIDTH = window.innerWidth;
+  const SCREEN_HEIGHT = window.innerHeight;
+
+  //加载贴图模型
+  let textureLoader = new THREE.TextureLoader();
+  var mixer = null;
+  var clock = new THREE.Clock();
+
+  init();
+  animate();
+
+  function init() {
+    // 场景
+    scene = new THREE.Scene();
+
+    // 相机
+    var VIEW_ANGLE = 30,
+      ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT,
+      NEAR = 0.1,
+      FAR = 2000;
+
+    camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
+    scene.add(camera);
+    camera.position.set(0, 450, 250);
+    camera.lookAt(scene.position);
+
+    // 渲染器
+    if (Detector.webgl)
+      renderer = new THREE.WebGLRenderer({
+        antialias: true, //开启锯齿
+        alpha: true,
+        precision: "highp",
+      });
+    else renderer = new THREE.CanvasRenderer();
+
+    renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
+    renderer.setClearAlpha(0.0);
+    //当界面改变时重新渲染canvas尺寸
+    window.οnresize = function () {
+      renderer.setPixelRatio(window.devicePixelRatio); //设备像素比，防止画布输出模糊
+      camera.aspect = window.innerWidth / window.innerHeight;
+      camera.updateProjectionMatrix();
+      renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
+    };
+    //renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
+    boxcontanier.appendChild(renderer.domElement);
+
+    // 鼠标控件
+    controls = new THREE.OrbitControls(camera, renderer.domElement);
+    controls.addEventListener("change", render);
+    //controls.listenToKeyEvents( window );
+    // controls.enableDamping = true;
+    // controls.dampingFactor = 0.15;
+    // controls.screenSpacePanning = false;
+    controls.maxPolarAngle = Math.PI / 2;
+    //var clock = new THREE.Clock();
+
+    // 性能插件
+    stats = new Stats();
+    stats.domElement.style.position = "absolute";
+    stats.domElement.style.top = "0px";
+    stats.domElement.style.zIndex = 100;
+    boxcontanier.appendChild(stats.domElement);
+
+    //辅助线
+    // var axes = new THREE.AxesHelper(2000);
+    // scene.add(axes);
+
+    // 光源
+    // var light = new THREE.PointLight(0x00ff00);
+    // light.position.set(0, 100, 0);
+    // scene.add(light);
+    // console.log(light);
+
+    var directionalLight = new THREE.DirectionalLight(0xffffff, 0.6); // 光的颜色，光照强度
+    directionalLight.position.set(400, 200, 300);
+    scene.add(directionalLight);
+
+    var directionalLight2 = new THREE.DirectionalLight(0xffffff, 0.6);
+    directionalLight2.position.set(-400, -200, -300);
+    scene.add(directionalLight2);
+
+    var ambient = new THREE.AmbientLight(0xffffff, 0.6);
+    scene.add(ambient);
+
+    // 初始化模型
+    initModel();
+  }
+
+  function initModel() {
+    // 地板
+    createFloor(250, 150);
+
+    // 玻璃墙
+    createGlassWall(
+      250,
+      100,
+      150,
+      0,
+      50,
+      0,
+      0,
+      0,
+      0,
+      [
+        {
+          size: [244, 100, 144],
+          position: [0, 0, 0],
+          rotation: [0, 0, 0],
+        },
+        {
+          size: [66, 70, 6],
+          position: [80, -15, 75],
+          rotation: [0, 0, 0],
+        },
+      ],
+      0.4
+    );
+
+    // 门
+    createDoor(80, 35, 74);
+    // 机柜
+    createCabinet(30, 70, 30, -100, 35, -55, 0, 0, 0);
+    createCabinet(30, 70, 30, -50, 35, -55, 0, 0, 0);
+    createCabinet(30, 70, 30, 0, 35, -55, 0, 0, 0);
+
+    // 空调
+    createStandAir(25, 60, 15, 80, 30, -50, 0, -Math.PI / 4, 0);
+
+    //
+
+    console.log(sprite);
+  }
+
+  // 创建地板
+  function createFloor(width, height) {
+    var floorGeometry = new THREE.PlaneGeometry(width, height);
+    var maps = textureLoader.load("./images/floor.png");
+    maps.wrapS = maps.wrapT = THREE.RepeatWrapping;
+    maps.repeat.set(8, 6);
+    maps.needsUpdate = true;
+
+    var material = new THREE.MeshBasicMaterial({
+      map: maps,
+      side: THREE.DoubleSide,
+    });
+    var floor = new THREE.Mesh(floorGeometry, material);
+    floor.rotation.x = Math.PI / 2;
+    scene.add(floor);
+    return floor;
+  }
+
+  //加载门Fbx格式
+  function createDoor(px, py, pz) {
+    const fbxloader = new THREE.FBXLoader();
+    fbxloader.load("./model/door.fbx", function (obj) {
+      const item = obj.children[0];
+      item.scale.set(0.03, 0.05, 0.03);
+      item.position.set(px, py, pz);
+      obj.castShadow = true;
+      scene.add(obj);
+    });
+  }
+
+  // 创建玻璃墙
+  function createGlassWall(w, h, d, px, py, pz, rx, ry, rz, holes, opa) {
+    var geometry = new THREE.BoxGeometry(w, h, d);
+    var texture = new textureLoader.load("./images/jsk.png");
+    texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
+    texture.repeat.set(1, 1);
+    var meterials = new THREE.MeshStandardMaterial({
+      // color: 0xD6F2F2,
+      color: 0xeff8fc,
+      // map: texture,
+      opacity: opa,
+      transparent: true,
+      side: THREE.DoubleSide,
+    });
+    var glassW = new THREE.Mesh(geometry, meterials);
+    if (holes) {
+      for (var i = 0; i < holes.length; i++) {
+        var totalBSP = new ThreeBSP(glassW);
+        var hole = holes[i];
+        var holeGeometry = new THREE.BoxGeometry(
+          hole.size[0],
+          hole.size[1],
+          hole.size[2]
+        );
+        var holeCube = new THREE.Mesh(holeGeometry);
+        holeCube.position.x = hole.position[0];
+        holeCube.position.y = hole.position[1];
+        holeCube.position.z = hole.position[2];
+
+        holeCube.rotation.y = hole.rotation[1];
+
+        var clipBSP = new ThreeBSP(holeCube);
+
+        var resultBSP = totalBSP.subtract(clipBSP);
+
+        glassW = resultBSP.toMesh();
+      }
+
+      glassW.material = meterials;
+    }
+
+    glassW.position.x = px;
+    glassW.position.y = py;
+    glassW.position.z = pz;
+
+    glassW.rotation.y = ry;
+
+    scene.add(glassW);
+
+    return glassW;
+  }
+
+  // 创建机柜
+  function createCabinet(w, h, d, px, py, pz, rx, ry, rz) {
+    var texture = new THREE.ImageUtils.loadTexture(
+      "./images/rack_door_front.png"
+    );
+    texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
+    texture.repeat.set(1, 1);
+
+    var texture2 = new THREE.ImageUtils.loadTexture(
+      "./images/rack_door_back.png"
+    );
+    texture2.wrapS = texture2.wrapT = THREE.RepeatWrapping;
+    texture2.repeat.set(1, 1);
+
+    var geometry = new THREE.BoxGeometry(w, h, d);
+    //var material = new THREE.MeshBasicMaterial( { map: texture } );
+    // Create an array of materials to be used in a cube, one for each side
+    var materialArray = [];
+    // order to add materials: x+,x-,y+,y-,z+,z-
+    materialArray.push(
+      new THREE.MeshBasicMaterial({
+        map: texture2,
+      })
+    );
+    materialArray.push(
+      new THREE.MeshBasicMaterial({
+        map: texture2,
+      })
+    );
+    materialArray.push(
+      new THREE.MeshBasicMaterial({
+        map: texture2,
+      })
+    );
+    materialArray.push(
+      new THREE.MeshBasicMaterial({
+        map: texture2,
+      })
+    );
+    materialArray.push(
+      new THREE.MeshBasicMaterial({
+        map: texture,
+      })
+    );
+    materialArray.push(
+      new THREE.MeshBasicMaterial({
+        map: texture2,
+      })
+    );
+    var material = new THREE.MeshFaceMaterial(materialArray);
+
+    var cabinet = new THREE.Mesh(geometry, material);
+
+    cabinet.position.x = px;
+    cabinet.position.y = py;
+    cabinet.position.z = pz;
+
+    cabinet.rotation.y = ry;
+
+    scene.add(cabinet);
+
+    return cabinet;
+  }
+
+  // 创建空调
+  function createStandAir(w, h, d, px, py, pz, rx, ry, rz) {
+    var texture = new THREE.ImageUtils.loadTexture("./fourImages/kongtiao.png");
+    //var texture = new THREE.ImageUtils.loadTexture('img/airCondition.png');
+    texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
+    texture.repeat.set(1, 1);
+
+    var geometry = new THREE.BoxGeometry(w, h, d);
+
+    var materialArray = [];
+    materialArray.push(
+      new THREE.MeshBasicMaterial({
+        color: 0x979697,
+      })
+    );
+    materialArray.push(
+      new THREE.MeshBasicMaterial({
+        color: 0x979697,
+      })
+    );
+    materialArray.push(
+      new THREE.MeshBasicMaterial({
+        color: 0x979697,
+      })
+    );
+    materialArray.push(
+      new THREE.MeshBasicMaterial({
+        color: 0x979697,
+      })
+    );
+    materialArray.push(
+      new THREE.MeshBasicMaterial({
+        map: texture,
+      })
+    );
+    materialArray.push(
+      new THREE.MeshBasicMaterial({
+        color: 0x979697,
+      })
+    );
+    var material = new THREE.MeshFaceMaterial(materialArray);
+
+    var air = new THREE.Mesh(geometry, material);
+
+    air.position.x = px;
+    air.position.y = py;
+    air.position.z = pz;
+
+    air.rotation.x = rx;
+    air.rotation.y = ry;
+    air.rotation.z = rz;
+
+    scene.add(air);
+
+    return air;
+  }
+
+  function drawSprite(text2d, scale, color, x, y, z) {
+    var texture = canvasMultilineText(
+      text2d,
+      {
+        backgroundColor: color,
+      },
+      "rgba(155, 187, 89, 1)"
+    );
+    var spriteMaterial = new THREE.SpriteMaterial({
+      map: texture,
+      opacity: 0.9,
+    });
+    var sprite = new THREE.Sprite(spriteMaterial);
+    sprite.position.set(x, y, z);
+
+    sprite.scale.set(scale * texture.image.width, scale * texture.image.height);
+
+    return sprite;
+  }
+
+  function canvasMultilineText(textArray, parameters, rgba) {
+    parameters = parameters || {};
+    var width = 0;
+    var canvas = document.createElement("canvas");
+    var context = canvas.getContext("2d");
+    var len = textArray.length;
+
+    if (typeof textArray === "string") textArray = [textArray];
+
+    context.font = parameters.font ? parameters.font : "48px sans-serif";
+
+    for (var i = 0; i < len; i++) {
+      width =
+        context.measureText(textArray[i]).width > width
+          ? context.measureText(textArray[i]).width
+          : width;
+    }
+
+    canvas.width = width + 20; // 480
+    canvas.height = textArray.length * 60;
+
+    context.fillStyle = rgba;
+    context.fillRect(0, 0, canvas.width, canvas.height);
+
+    context.font = parameters.font ? parameters.font : "48px sans-serif";
+
+    for (var j = 0; j < len; j++) {
+      context.fillStyle = "#1920E6";
+      context.fillText(textArray[j], 10, 48 + j * 60);
+    }
+
+    var texture = new THREE.Texture(canvas);
+    texture.minFilter = texture.magFilter = THREE.NearestFilter;
+    texture.needsUpdate = true;
+
+    return texture;
+  }
+
+  function animate() {
+    requestAnimationFrame(animate);
+    render();
+    update();
+  }
+
+  // 更新插件
+  function update() {
+    controls.update();
+    stats.update();
+  }
+
+  function render() {
+    // if (sprite != undefined) {
+    // 	scene.remove(sprite)
+    // }
+    // var myDate = new Date();
+    // sprite = drawSprite('档案室测试' + myDate.getSeconds(), 0.1, 120, 0, 120, 0);
+    // sprite.material.needsUpdate = true;
+    // scene.add(sprite);
+
+    renderer.render(scene, camera);
+  }
+</script>

spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test65/test65.js

@@ -0,0 +1,305 @@
+const test65 = (function() {
+    function test65(id, domTitle) {
+        if (domTitle) {
+            $(".test65 .title h2").text(domTitle);
+        }
+        $(".test65 .box").css("z-index", ++zIndex);
+        $(".test65 .box").attr("data-id", id);
+        move3(".test65 .test-box");
+        move2(".test65 .containerTool");
+
+        let timer = null;
+
+        $(".test65 .close").click(function() {
+            $(".test65 .box").remove();
+            $(".test65 .containerTool").css("display", "none");
+            $(".test65 .setWidth").val("");
+            $(".test65 .setHeight").val("");
+            moduleIdRemove.push(id);
+        });
+
+        eventClick(".test65");
+
+        const dists = document.querySelectorAll(".test65 .floor-dist");
+        const testDoms = document.querySelectorAll(".test65 .box");
+        for (let i = 0; i < dists.length; i++) {
+            const dom = dists[i];
+            setCharts(dom, testDoms[i]);
+        }
+
+        // 局本级
+        $('.bg-center-img-one').click(function() {
+            $('.sf1').slideDown();
+            $('.sf3').slideUp();
+            $('.sf4').slideUp();
+        })
+
+        // 浪潮
+        $('.bg-center-img-three').click(function() {
+            $('.sf4').slideDown();
+            $('.sf1').slideUp();
+            $('.sf3').slideUp();
+        })
+
+        // 华为
+        $('.bg-center-img-four').click(function() {
+            $('.sf3').slideDown();
+            $('.sf1').slideUp();
+            $('.sf4').slideUp();
+        })
+
+
+
+        window.addEventListener("resize", function() {
+            if (timer) {
+                clearTimeout(timer);
+                timer = null;
+            }
+            timer = setTimeout(() => {
+                move3(".test65 .test-box");
+
+                myChart.resize();
+            }, 500);
+        });
+    }
+
+    function setCharts(echartDom, testDom) {
+        var myChart = echarts.init(echartDom);
+        // 地图背景颜色
+        var highlight = "#03b7c9";
+
+        var demoData = [{
+                name: "平均温度",
+                value: 22,
+                unit: "°",
+                pos: ["25%", "40%"],
+                range: [-40, 100],
+                YS: [
+                    [0.4, "#119eff"],
+                    [0.5, "#30da74"],
+                    [1, "#f3390d"],
+                ],
+            },
+            {
+                name: "平均温度",
+                value: 90,
+                unit: "°",
+                pos: ["75%", "40%"],
+                range: [0, 100],
+                splitNum: 10,
+                YS: [
+                    [0.3, "#f3390d"],
+                    [0.8, "#30da74"],
+                    [1, "#119eff"],
+                ],
+            },
+        ];
+
+        option = {
+            series: (function() {
+                var result = [];
+
+                demoData.forEach(function(item) {
+                    result.push(
+                        // 外围刻度
+                        {
+                            type: "gauge",
+                            center: item.pos,
+                            radius: "50%", // 1行2个
+                            splitNumber: item.splitNum || 10,
+                            min: item.range[0],
+                            max: item.range[1],
+                            startAngle: 225,
+                            endAngle: -45,
+                            axisLine: {
+                                show: true,
+                                lineStyle: {
+                                    width: 2,
+                                    shadowBlur: 0,
+                                    color: [
+                                        [1, highlight]
+                                    ],
+                                },
+                            },
+                            axisTick: {
+                                show: true,
+                                lineStyle: {
+                                    color: highlight,
+                                    width: 1,
+                                },
+                                length: -5,
+                                splitNumber: 10,
+                            },
+                            splitLine: {
+                                show: true,
+                                length: -10,
+                                lineStyle: {
+                                    color: highlight,
+                                },
+                            },
+                            axisLabel: {
+                                distance: -18,
+                                textStyle: {
+                                    color: highlight,
+                                    fontSize: "10",
+                                },
+                            },
+                            pointer: {
+                                show: 0,
+                            },
+                            detail: {
+                                show: 0,
+                            },
+                        }, {
+                            name: "速度",
+                            type: "gauge",
+                            center: item.pos,
+                            splitNumber: item.splitNum || 10,
+                            min: item.range[0],
+                            max: item.range[1],
+                            radius: "45%",
+                            axisLine: {
+                                // 坐标轴线
+                                show: false,
+                                lineStyle: {
+                                    // 属性lineStyle控制线条样式
+                                    color: item.YS,
+                                    shadowColor: "#ccc",
+                                    shadowBlur: 25,
+                                    width: 0,
+                                },
+                            },
+                            axisLabel: {
+                                show: false,
+                            },
+                            axisTick: {
+                                // 坐标轴小标记
+                                // show: false,
+                                length: 20, // 属性length控制线长
+                                lineStyle: {
+                                    // 属性lineStyle控制线条样式
+                                    color: "auto",
+                                    width: 2,
+                                },
+                            },
+                            splitLine: {
+                                // 分隔线
+                                show: false,
+                                length: 20, // 属性length控制线长
+                                lineStyle: {
+                                    // 属性lineStyle（详见lineStyle）控制线条样式
+                                    color: "auto",
+                                },
+                            },
+                            title: {
+                                textStyle: {
+                                    // 其余属性默认使用全局文本样式，详见TEXTSTYLE
+                                    fontWeight: "bolder",
+                                    fontSize: 20,
+                                    fontStyle: "italic",
+                                },
+                            },
+                            detail: {
+                                show: true,
+                                offsetCenter: [0, "100%"],
+                                textStyle: {
+                                    fontSize: 25,
+                                },
+                                formatter: [
+                                    "{value} " + (item.unit || ""),
+                                    "{name|" + item.name + "}",
+                                ].join("\n"),
+                                rich: {
+                                    name: {
+                                        fontSize: 16,
+                                        lineHeight: 30,
+                                        color: "#4be4de",
+                                    },
+                                },
+                            },
+                            data: [{
+                                value: item.value,
+                            }, ],
+                            pointer: {
+                                width: 5,
+                            },
+                        },
+                        // 内侧指针、数值显示
+                        {
+                            name: item.name,
+                            type: "gauge",
+                            center: item.pos,
+                            radius: "40%",
+                            startAngle: 225,
+                            endAngle: -45,
+                            min: item.range[0],
+                            max: item.range[1],
+                            axisLine: {
+                                show: true,
+                                lineStyle: {
+                                    width: 16,
+                                    color: [
+                                        [1, "rgba(75,228,255,.1)"]
+                                    ],
+                                },
+                            },
+                            axisTick: {
+                                show: 0,
+                            },
+                            splitLine: {
+                                show: 0,
+                            },
+                            axisLabel: {
+                                show: 0,
+                            },
+                            pointer: {
+                                show: true,
+                                length: "90%",
+                                width: 3,
+                            },
+                            itemStyle: {
+                                //表盘指针的颜色
+                                color: "rgba(255, 153, 0, 0.31)",
+                                borderColor: "#ff9900",
+                                borderWidth: 1,
+                            },
+                            detail: {
+                                show: false,
+                                offsetCenter: [0, "100%"],
+                                textStyle: {
+                                    fontSize: 20,
+                                    color: "#00eff2",
+                                },
+                                formatter: [
+                                    "{value} " + (item.unit || ""),
+                                    "{name|" + item.name + "}",
+                                ].join("\n"),
+                                rich: {
+                                    name: {
+                                        fontSize: 14,
+                                        lineHeight: 30,
+                                        color: "#00eff2",
+                                    },
+                                },
+                            },
+
+                            data: [{
+                                value: item.value,
+                            }, ],
+                        }
+                    );
+                });
+                return result;
+            })(),
+        };
+        if (option) {
+            myChart.setOption(option);
+        }
+
+        if (!testDom) {
+            testDom = document.querySelectorAll(".test65 .box");
+        }
+        obsDom(testDom, myChart);
+    }
+    return test65;
+})();

spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test66/test66.css

@@ -0,0 +1,20 @@
+.box66 * {
+  margin: 0;
+  padding: 0;
+}
+
+.box66 body {
+  margin: 0;
+  border: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.box66 #ThreeJS {
+  width: 100%;
+  height: 100%;
+  background: url("./images/bg.png") no-repeat;
+  background-size: 100% 100%;
+}

spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test66/test66.html

@@ -0,0 +1,631 @@
+<div class="box66 box" data-name="test61">
+  <div class="toolBox">
+    <span class="fit"></span>
+    <span class="close"></span>
+  </div>
+  <div class="test-box">
+    <div class="concent">
+      <div id="ThreeJS"></div>
+    </div>
+  </div>
+  <div class="panel-footer"></div>
+</div>
+
+<!-- 工具弹框 -->
+<div class="tools" style="display: none">
+  <div class="containerTool test61Toll">
+    <ul>
+      <li>
+        <span>宽度：</span>
+        <input class="setWidth" type="text" />
+        <span id="validateAge" class="regValidate"></span>
+      </li>
+      <li>
+        <span>高度：</span>
+        <input class="setHeight" type="text" />
+      </li>
+    </ul>
+    <!-- 确定 -->
+    <button class="fixBtn toolBtn">确定</button>
+    <button class="offBtn toolBtn">取消</button>
+  </div>
+</div>
+
+<script src="js/three.js"></script>
+<script src="js/GLTFLoader.js"></script>
+<script src="js/FBXLoader.js"></script>
+<script src="js/inflate.min.js"></script>
+<script src="js/OrbitControls.js"></script>
+<script src="js/Stats.js"></script>
+<script src="js/Detector.js"></script>
+<script src="js/ThreeBSP.js"></script>
+
+<script type="module">
+  const boxcontanier = document.getElementById("ThreeJS");
+
+  let scene, camera, renderer, controls, stats;
+  const SCREEN_WIDTH = window.innerWidth;
+  const SCREEN_HEIGHT = window.innerHeight;
+
+  //加载贴图模型
+  let textureLoader = new THREE.TextureLoader();
+  var mixer = null;
+  var clock = new THREE.Clock();
+
+  init();
+  animate();
+
+  function init() {
+    // 场景
+    scene = new THREE.Scene();
+
+    // 相机
+    var VIEW_ANGLE = 30,
+      ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT,
+      NEAR = 0.1,
+      FAR = 2000;
+
+    camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
+    scene.add(camera);
+    camera.position.set(0, 450, 250);
+    camera.lookAt(scene.position);
+
+    // 渲染器
+    if (Detector.webgl)
+      renderer = new THREE.WebGLRenderer({
+        antialias: true, //开启锯齿
+        alpha: true,
+        precision: "highp",
+      });
+    else renderer = new THREE.CanvasRenderer();
+
+    renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
+    renderer.setClearAlpha(0.0);
+    renderer.shadowMap.enabled = true;
+    //当界面改变时重新渲染canvas尺寸
+    window.οnresize = function () {
+      renderer.setPixelRatio(window.devicePixelRatio); //设备像素比，防止画布输出模糊
+      camera.aspect = window.innerWidth / window.innerHeight;
+      camera.updateProjectionMatrix();
+      renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
+    };
+    //renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
+    boxcontanier.appendChild(renderer.domElement);
+
+    // 鼠标控件
+    controls = new THREE.OrbitControls(camera, renderer.domElement);
+    controls.addEventListener("change", render);
+    //controls.listenToKeyEvents( window );
+    // controls.enableDamping = true;
+    // controls.dampingFactor = 0.15;
+    // controls.screenSpacePanning = false;
+    controls.maxPolarAngle = Math.PI / 2;
+    //var clock = new THREE.Clock();
+
+    // 性能插件
+    stats = new Stats();
+    stats.domElement.style.position = "absolute";
+    stats.domElement.style.top = "0px";
+    stats.domElement.style.zIndex = 100;
+    boxcontanier.appendChild(stats.domElement);
+
+    // 光源
+    // var light = new THREE.PointLight(0x00ff00);
+    // light.position.set(0, 100, 0);
+    // scene.add(light);
+    // console.log(light);
+
+    var directionalLight = new THREE.DirectionalLight(0xffffff, 0.6); // 光的颜色，光照强度
+    directionalLight.position.set(400, 200, 300);
+    scene.add(directionalLight);
+
+    var directionalLight2 = new THREE.DirectionalLight(0xffffff, 0.6);
+    directionalLight2.position.set(-400, -200, -300);
+    scene.add(directionalLight2);
+
+    var ambient = new THREE.AmbientLight(0xffffff, 0.6);
+    scene.add(ambient);
+
+    // 初始化模型
+    initModel();
+  }
+
+  function initModel() {
+    // 地板
+    createFloor(250, 150);
+
+    // 玻璃墙
+    createGlassWall(
+      250,
+      100,
+      150,
+      0,
+      50,
+      0,
+      0,
+      0,
+      0,
+      [
+        {
+          size: [244, 100, 144],
+          position: [0, 0, 0],
+          rotation: [0, 0, 0],
+        },
+        {
+          size: [66, 70, 6],
+          position: [122, -15, 0],
+          rotation: [0, Math.PI / 2, 0],
+        },
+      ],
+      0.4
+    );
+    // 门
+    createDoor(124, 35, 0);
+    // createGlassWall(250, 80, 0, 40, -75, 0, 0, 0); //后墙
+    // createGlassWall(150, 80, 125, 40, 0, 0, Math.PI/2, 0, [{
+    // 	size: [50, 60, 5],
+    // 	position: [0, -10, 0],
+    // 	rotation: [0, 0, 0]
+    // }]); //右墙
+    // createGlassWall(250, 80, 0, 40, 75, 0, 0, 0); //前墙
+    // createGlassWall(150, 80, -125, 40, 0, 0, Math.PI/2, 0); //右墙
+
+    // 空调
+    createStandAir(30, 60, 20, -100, 30, -60, 0, 0, 0);
+    createStandAir(30, 60, 20, -50, 30, -60, 0, 0, 0);
+
+    // 配电柜
+    createSmallAir(20, 40, 20, -20, 20, -60, 0, 0, 0);
+
+    // 强电箱
+    // createStrlight(25, 30, 10, 90, 55, -67, 0, 0, 0);
+    // createStrlight(25, 30, 10, 60, 55, -67, 0, 0, 0);
+
+    // 档案柜
+    createFileCabniet(35, 50, 20, -90, 25, 55, 0, Math.PI / 2, 0);
+    createFileCabniet(35, 50, 20, -65, 25, 55, 0, Math.PI / 2, 0);
+  }
+
+  // 创建地板
+  function createFloor(width, height) {
+    var floorGeometry = new THREE.PlaneGeometry(width, height);
+    var maps = textureLoader.load("./images/floor.png");
+    maps.wrapS = maps.wrapT = THREE.RepeatWrapping;
+    maps.repeat.set(8, 6);
+    maps.needsUpdate = true;
+
+    var material = new THREE.MeshBasicMaterial({
+      map: maps,
+      side: THREE.DoubleSide,
+    });
+    var floor = new THREE.Mesh(floorGeometry, material);
+    floor.rotation.x = Math.PI / 2;
+    scene.add(floor);
+    return floor;
+  }
+
+  // 创建玻璃墙
+  function createGlassWall(w, h, d, px, py, pz, rx, ry, rz, holes, opa) {
+    var geometry = new THREE.BoxGeometry(w, h, d);
+    var texture = new textureLoader.load("./images/jsk.png");
+    texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
+    texture.repeat.set(1, 1);
+    var meterials = new THREE.MeshStandardMaterial({
+      // color: 0xD6F2F2,
+      color: 0xeff8fc,
+      // map: texture,
+      opacity: opa,
+      transparent: true,
+      side: THREE.DoubleSide,
+    });
+    var glassW = new THREE.Mesh(geometry, meterials);
+    if (holes) {
+      for (var i = 0; i < holes.length; i++) {
+        var totalBSP = new ThreeBSP(glassW);
+        var hole = holes[i];
+        var holeGeometry = new THREE.BoxGeometry(
+          hole.size[0],
+          hole.size[1],
+          hole.size[2]
+        );
+        var holeCube = new THREE.Mesh(holeGeometry);
+        holeCube.position.x = hole.position[0];
+        holeCube.position.y = hole.position[1];
+        holeCube.position.z = hole.position[2];
+
+        holeCube.rotation.y = hole.rotation[1];
+
+        var clipBSP = new ThreeBSP(holeCube);
+
+        var resultBSP = totalBSP.subtract(clipBSP);
+
+        glassW = resultBSP.toMesh();
+      }
+
+      glassW.material = meterials;
+    }
+
+    glassW.position.x = px;
+    glassW.position.y = py;
+    glassW.position.z = pz;
+
+    glassW.rotation.y = ry;
+
+    scene.add(glassW);
+
+    return glassW;
+  }
+
+  // 创建空调
+  function createStandAir(w, h, d, px, py, pz, rx, ry, rz) {
+    var texture = new THREE.ImageUtils.loadTexture("./fourImages/kongtiao.png");
+    //var texture = new THREE.ImageUtils.loadTexture('img/airCondition.png');
+    texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
+    texture.repeat.set(1, 1);
+
+    var geometry = new THREE.BoxGeometry(w, h, d);
+
+    var materialArray = [];
+    materialArray.push(
+      new THREE.MeshBasicMaterial({
+        color: 0x979697,
+      })
+    );
+    materialArray.push(
+      new THREE.MeshBasicMaterial({
+        color: 0x979697,
+      })
+    );
+    materialArray.push(
+      new THREE.MeshBasicMaterial({
+        color: 0x979697,
+      })
+    );
+    materialArray.push(
+      new THREE.MeshBasicMaterial({
+        color: 0x979697,
+      })
+    );
+    materialArray.push(
+      new THREE.MeshBasicMaterial({
+        map: texture,
+      })
+    );
+    materialArray.push(
+      new THREE.MeshBasicMaterial({
+        color: 0x979697,
+      })
+    );
+    var material = new THREE.MeshFaceMaterial(materialArray);
+
+    var air = new THREE.Mesh(geometry, material);
+
+    air.position.x = px;
+    air.position.y = py;
+    air.position.z = pz;
+
+    air.rotation.x = rx;
+    air.rotation.y = ry;
+    air.rotation.z = rz;
+
+    scene.add(air);
+
+    return air;
+  }
+
+  // 创建小空调
+  function createSmallAir(w, h, d, px, py, pz, rx, ry, rz) {
+    var texture = new THREE.ImageUtils.loadTexture("./images/kongg.png");
+    //var texture = new THREE.ImageUtils.loadTexture('img/airCondition.png');
+    texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
+    texture.repeat.set(1, 1);
+
+    var geometry = new THREE.BoxGeometry(w, h, d);
+
+    var materialArray = [];
+    materialArray.push(
+      new THREE.MeshBasicMaterial({
+        color: 0x979697,
+      })
+    );
+    materialArray.push(
+      new THREE.MeshBasicMaterial({
+        color: 0x979697,
+      })
+    );
+    materialArray.push(
+      new THREE.MeshBasicMaterial({
+        color: 0x979697,
+      })
+    );
+    materialArray.push(
+      new THREE.MeshBasicMaterial({
+        color: 0x979697,
+      })
+    );
+    materialArray.push(
+      new THREE.MeshBasicMaterial({
+        map: texture,
+      })
+    );
+    materialArray.push(
+      new THREE.MeshBasicMaterial({
+        color: 0x979697,
+      })
+    );
+    var material = new THREE.MeshFaceMaterial(materialArray);
+
+    var smallair = new THREE.Mesh(geometry, material);
+
+    smallair.position.x = px;
+    smallair.position.y = py;
+    smallair.position.z = pz;
+
+    smallair.rotation.x = rx;
+    smallair.rotation.y = ry;
+    smallair.rotation.z = rz;
+
+    scene.add(smallair);
+
+    return smallair;
+  }
+
+  // 创建门
+  function createDoor(px, py, pz) {
+    const fbxloader = new THREE.FBXLoader();
+    fbxloader.load("./model/door.fbx", function (obj) {
+      const item = obj.children[0];
+      item.scale.set(0.03, 0.05, 0.03);
+      item.position.set(px, py, pz);
+      item.rotation.y = Math.PI / 2;
+      obj.castShadow = true;
+      scene.add(obj);
+    });
+  }
+  // function createDoor(w, h, px, py, pz, rx, ry, rz) {
+  // 	var geometry = new THREE.BoxGeometry(w, h, 5);
+  // 	var texture = new THREE.ImageUtils.loadTexture('images/rightdoor.png');
+  // 	texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
+  // 	texture.repeat.set(1, 1);
+  //
+  // 	var texture2 = new THREE.ImageUtils.loadTexture('images/rightdoor_reverse.png');
+  // 	texture2.wrapS = texture2.wrapT = THREE.RepeatWrapping;
+  // 	texture2.repeat.set(1, 1);
+  //
+  // 	var materialArray = [];
+  // 	// order to add materials: x+,x-,y+,y-,z+,z-
+  // 	materialArray.push(new THREE.MeshBasicMaterial({
+  // 		color: 0x6C4843
+  // 	}));
+  // 	materialArray.push(new THREE.MeshBasicMaterial({
+  // 		color: 0x6C4843
+  // 	}));
+  // 	materialArray.push(new THREE.MeshBasicMaterial({
+  // 		color: 0x6C4843
+  // 	}));
+  // 	materialArray.push(new THREE.MeshBasicMaterial({
+  // 		color: 0x6C4843
+  // 	}));
+  // 	materialArray.push(new THREE.MeshBasicMaterial({
+  // 		map: texture
+  // 	}));
+  // 	materialArray.push(new THREE.MeshBasicMaterial({
+  // 		map: texture2
+  // 	}));
+  // 	var material = new THREE.MeshFaceMaterial(materialArray);
+  //
+  // 	var door = new THREE.Mesh(geometry, material);
+  //
+  // 	door.position.x = px;
+  // 	door.position.y = py;
+  // 	door.position.z = pz;
+  //
+  // 	door.rotation.y = ry;
+  //
+  // 	scene.add(door);
+  //
+  // 	return door;
+  // }
+
+  // 创建强电箱
+  function createStrlight(w, h, d, px, py, pz, rx, ry, rz) {
+    // var texture = new THREE.ImageUtils.loadTexture('./fourImages/airfiretop.png');
+    // texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
+    // texture.repeat.set(1, 1);
+
+    var texture2 = new THREE.ImageUtils.loadTexture("./images/pdg.png");
+    texture2.wrapS = texture2.wrapT = THREE.RepeatWrapping;
+    texture2.repeat.set(1, 1);
+
+    var geometry = new THREE.BoxGeometry(w, h, d);
+    //var material = new THREE.MeshBasicMaterial( { map: texture } );
+    // Create an array of materials to be used in a cube, one for each side
+    var materialArray = [];
+    // order to add materials: x+,x-,y+,y-,z+,z-
+    materialArray.push(
+      new THREE.MeshBasicMaterial({
+        color: 0x969d7a, //后面
+      })
+    );
+    materialArray.push(
+      new THREE.MeshBasicMaterial({
+        color: 0x969d7a, //前面
+      })
+    );
+    materialArray.push(
+      new THREE.MeshBasicMaterial({
+        color: 0x969d7a, //上
+      })
+    );
+    materialArray.push(
+      new THREE.MeshBasicMaterial({
+        color: 0x969d7a, //下
+      })
+    );
+    materialArray.push(
+      new THREE.MeshBasicMaterial({
+        map: texture2, // 左
+      })
+    );
+    materialArray.push(
+      new THREE.MeshBasicMaterial({
+        color: 0x969d7a, //右
+      })
+    );
+    var material = new THREE.MeshFaceMaterial(materialArray);
+
+    var strlight = new THREE.Mesh(geometry, material);
+
+    strlight.position.x = px;
+    strlight.position.y = py;
+    strlight.position.z = pz;
+
+    strlight.rotation.x = rx;
+    strlight.rotation.y = ry;
+    strlight.rotation.z = rz;
+
+    scene.add(strlight);
+
+    return strlight;
+  }
+
+  // 创建档案柜
+  function createFileCabniet(w, h, d, px, py, pz, rx, ry, rz) {
+    // var texture = new THREE.ImageUtils.loadTexture('./fourImages/airfiretop.png');
+    // texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
+    // texture.repeat.set(1, 1);
+
+    var texture2 = new THREE.ImageUtils.loadTexture("./images/filecabniet.png");
+    texture2.wrapS = texture2.wrapT = THREE.RepeatWrapping;
+    texture2.repeat.set(1, 1);
+
+    var geometry = new THREE.BoxGeometry(w, h, d);
+    //var material = new THREE.MeshBasicMaterial( { map: texture } );
+    // Create an array of materials to be used in a cube, one for each side
+    var materialArray = [];
+    // order to add materials: x+,x-,y+,y-,z+,z-
+    materialArray.push(
+      new THREE.MeshBasicMaterial({
+        color: 0x979697, //后面
+      })
+    );
+    materialArray.push(
+      new THREE.MeshBasicMaterial({
+        color: 0x979697, //前面
+      })
+    );
+    materialArray.push(
+      new THREE.MeshBasicMaterial({
+        color: 0x979697, //上
+      })
+    );
+    materialArray.push(
+      new THREE.MeshBasicMaterial({
+        color: 0x979697, //下
+      })
+    );
+    materialArray.push(
+      new THREE.MeshBasicMaterial({
+        map: texture2, // 左
+      })
+    );
+    materialArray.push(
+      new THREE.MeshBasicMaterial({
+        color: 0x979697, //右
+      })
+    );
+    var material = new THREE.MeshFaceMaterial(materialArray);
+
+    var filecabniet = new THREE.Mesh(geometry, material);
+
+    filecabniet.position.x = px;
+    filecabniet.position.y = py;
+    filecabniet.position.z = pz;
+
+    filecabniet.rotation.x = rx;
+    filecabniet.rotation.y = ry;
+    filecabniet.rotation.z = rz;
+    scene.add(filecabniet);
+
+    return filecabniet;
+  }
+
+  // function drawSprite(text2d, scale, color, x, y, z) {
+  // 	var texture = canvasMultilineText(text2d, {
+  // 		backgroundColor: color
+  // 	}, 'rgba(155, 187, 89, 1)');
+  // 	var spriteMaterial = new THREE.SpriteMaterial({
+  // 		map: texture,
+  // 		opacity: 0.9
+  // 	});
+  // 	var sprite = new THREE.Sprite(spriteMaterial);
+  // 	sprite.position.set(x, y, z);
+
+  // 	sprite.scale.set(scale * texture.image.width, scale * texture.image.height);
+
+  // 	return sprite;
+  // }
+
+  // function canvasMultilineText(textArray, parameters, rgba) {
+  // 	parameters = parameters || {};
+  // 	var width = 0;
+  // 	var canvas = document.createElement('canvas');
+  // 	var context = canvas.getContext('2d');
+  // 	var len = textArray.length;
+
+  // 	if (typeof textArray === 'string') textArray = [textArray];
+
+  // 	context.font = parameters.font ? parameters.font : '48px sans-serif';
+
+  // 	for (var i = 0; i < len; i++) {
+
+  // 		width = context.measureText(textArray[i]).width > width ? context.measureText(textArray[i]).width : width;
+
+  // 	}
+
+  // 	canvas.width = width + 20; // 480
+  // 	canvas.height = textArray.length * 60;
+
+  // 	context.fillStyle = rgba;
+  // 	context.fillRect(0, 0, canvas.width, canvas.height);
+
+  // 	context.font = parameters.font ? parameters.font : '48px sans-serif';
+
+  // 	for (var j = 0; j < len; j++) {
+  // 		context.fillStyle = '#1920E6';
+  // 		context.fillText(textArray[j], 10, 48 + j * 60);
+  // 	}
+
+  // 	var texture = new THREE.Texture(canvas);
+  // 	texture.minFilter = texture.magFilter = THREE.NearestFilter;
+  // 	texture.needsUpdate = true;
+
+  // 	return texture;
+
+  // }
+
+  function animate() {
+    requestAnimationFrame(animate);
+    render();
+    update();
+  }
+
+  // 更新插件
+  function update() {
+    controls.update();
+    stats.update();
+  }
+
+  function render() {
+    // let sprite;
+    // if (sprite != undefined) {
+    // 	scene.remove(sprite)
+    // }
+    // var myDate = new Date();
+    // sprite = drawSprite('Hello, world!' + myDate.getSeconds(), 0.5, 120, 6, 100, 0);
+    // sprite.material.needsUpdate = true;
+    // scene.add(sprite);
+    //console.log(sprite);
+    renderer.render(scene, camera);
+  }
+</script>

spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test66/test66.js

@@ -0,0 +1,305 @@
+const test66 = (function() {
+    function test66(id, domTitle) {
+        if (domTitle) {
+            $(".test66 .title h2").text(domTitle);
+        }
+        $(".test66 .box").css("z-index", ++zIndex);
+        $(".test66 .box").attr("data-id", id);
+        move3(".test66 .test-box");
+        move2(".test66 .containerTool");
+
+        let timer = null;
+
+        $(".test66 .close").click(function() {
+            $(".test66 .box").remove();
+            $(".test66 .containerTool").css("display", "none");
+            $(".test66 .setWidth").val("");
+            $(".test66 .setHeight").val("");
+            moduleIdRemove.push(id);
+        });
+
+        eventClick(".test66");
+
+        const dists = document.querySelectorAll(".test66 .floor-dist");
+        const testDoms = document.querySelectorAll(".test66 .box");
+        for (let i = 0; i < dists.length; i++) {
+            const dom = dists[i];
+            setCharts(dom, testDoms[i]);
+        }
+
+        // 局本级
+        $('.bg-center-img-one').click(function() {
+            $('.sf1').slideDown();
+            $('.sf3').slideUp();
+            $('.sf4').slideUp();
+        })
+
+        // 浪潮
+        $('.bg-center-img-three').click(function() {
+            $('.sf4').slideDown();
+            $('.sf1').slideUp();
+            $('.sf3').slideUp();
+        })
+
+        // 华为
+        $('.bg-center-img-four').click(function() {
+            $('.sf3').slideDown();
+            $('.sf1').slideUp();
+            $('.sf4').slideUp();
+        })
+
+
+
+        window.addEventListener("resize", function() {
+            if (timer) {
+                clearTimeout(timer);
+                timer = null;
+            }
+            timer = setTimeout(() => {
+                move3(".test66 .test-box");
+
+                myChart.resize();
+            }, 500);
+        });
+    }
+
+    function setCharts(echartDom, testDom) {
+        var myChart = echarts.init(echartDom);
+        // 地图背景颜色
+        var highlight = "#03b7c9";
+
+        var demoData = [{
+                name: "平均温度",
+                value: 22,
+                unit: "°",
+                pos: ["25%", "40%"],
+                range: [-40, 100],
+                YS: [
+                    [0.4, "#119eff"],
+                    [0.5, "#30da74"],
+                    [1, "#f3390d"],
+                ],
+            },
+            {
+                name: "平均温度",
+                value: 90,
+                unit: "°",
+                pos: ["75%", "40%"],
+                range: [0, 100],
+                splitNum: 10,
+                YS: [
+                    [0.3, "#f3390d"],
+                    [0.8, "#30da74"],
+                    [1, "#119eff"],
+                ],
+            },
+        ];
+
+        option = {
+            series: (function() {
+                var result = [];
+
+                demoData.forEach(function(item) {
+                    result.push(
+                        // 外围刻度
+                        {
+                            type: "gauge",
+                            center: item.pos,
+                            radius: "50%", // 1行2个
+                            splitNumber: item.splitNum || 10,
+                            min: item.range[0],
+                            max: item.range[1],
+                            startAngle: 225,
+                            endAngle: -45,
+                            axisLine: {
+                                show: true,
+                                lineStyle: {
+                                    width: 2,
+                                    shadowBlur: 0,
+                                    color: [
+                                        [1, highlight]
+                                    ],
+                                },
+                            },
+                            axisTick: {
+                                show: true,
+                                lineStyle: {
+                                    color: highlight,
+                                    width: 1,
+                                },
+                                length: -5,
+                                splitNumber: 10,
+                            },
+                            splitLine: {
+                                show: true,
+                                length: -10,
+                                lineStyle: {
+                                    color: highlight,
+                                },
+                            },
+                            axisLabel: {
+                                distance: -18,
+                                textStyle: {
+                                    color: highlight,
+                                    fontSize: "10",
+                                },
+                            },
+                            pointer: {
+                                show: 0,
+                            },
+                            detail: {
+                                show: 0,
+                            },
+                        }, {
+                            name: "速度",
+                            type: "gauge",
+                            center: item.pos,
+                            splitNumber: item.splitNum || 10,
+                            min: item.range[0],
+                            max: item.range[1],
+                            radius: "45%",
+                            axisLine: {
+                                // 坐标轴线
+                                show: false,
+                                lineStyle: {
+                                    // 属性lineStyle控制线条样式
+                                    color: item.YS,
+                                    shadowColor: "#ccc",
+                                    shadowBlur: 25,
+                                    width: 0,
+                                },
+                            },
+                            axisLabel: {
+                                show: false,
+                            },
+                            axisTick: {
+                                // 坐标轴小标记
+                                // show: false,
+                                length: 20, // 属性length控制线长
+                                lineStyle: {
+                                    // 属性lineStyle控制线条样式
+                                    color: "auto",
+                                    width: 2,
+                                },
+                            },
+                            splitLine: {
+                                // 分隔线
+                                show: false,
+                                length: 20, // 属性length控制线长
+                                lineStyle: {
+                                    // 属性lineStyle（详见lineStyle）控制线条样式
+                                    color: "auto",
+                                },
+                            },
+                            title: {
+                                textStyle: {
+                                    // 其余属性默认使用全局文本样式，详见TEXTSTYLE
+                                    fontWeight: "bolder",
+                                    fontSize: 20,
+                                    fontStyle: "italic",
+                                },
+                            },
+                            detail: {
+                                show: true,
+                                offsetCenter: [0, "100%"],
+                                textStyle: {
+                                    fontSize: 25,
+                                },
+                                formatter: [
+                                    "{value} " + (item.unit || ""),
+                                    "{name|" + item.name + "}",
+                                ].join("\n"),
+                                rich: {
+                                    name: {
+                                        fontSize: 16,
+                                        lineHeight: 30,
+                                        color: "#4be4de",
+                                    },
+                                },
+                            },
+                            data: [{
+                                value: item.value,
+                            }, ],
+                            pointer: {
+                                width: 5,
+                            },
+                        },
+                        // 内侧指针、数值显示
+                        {
+                            name: item.name,
+                            type: "gauge",
+                            center: item.pos,
+                            radius: "40%",
+                            startAngle: 225,
+                            endAngle: -45,
+                            min: item.range[0],
+                            max: item.range[1],
+                            axisLine: {
+                                show: true,
+                                lineStyle: {
+                                    width: 16,
+                                    color: [
+                                        [1, "rgba(75,228,255,.1)"]
+                                    ],
+                                },
+                            },
+                            axisTick: {
+                                show: 0,
+                            },
+                            splitLine: {
+                                show: 0,
+                            },
+                            axisLabel: {
+                                show: 0,
+                            },
+                            pointer: {
+                                show: true,
+                                length: "90%",
+                                width: 3,
+                            },
+                            itemStyle: {
+                                //表盘指针的颜色
+                                color: "rgba(255, 153, 0, 0.31)",
+                                borderColor: "#ff9900",
+                                borderWidth: 1,
+                            },
+                            detail: {
+                                show: false,
+                                offsetCenter: [0, "100%"],
+                                textStyle: {
+                                    fontSize: 20,
+                                    color: "#00eff2",
+                                },
+                                formatter: [
+                                    "{value} " + (item.unit || ""),
+                                    "{name|" + item.name + "}",
+                                ].join("\n"),
+                                rich: {
+                                    name: {
+                                        fontSize: 14,
+                                        lineHeight: 30,
+                                        color: "#00eff2",
+                                    },
+                                },
+                            },
+
+                            data: [{
+                                value: item.value,
+                            }, ],
+                        }
+                    );
+                });
+                return result;
+            })(),
+        };
+        if (option) {
+            myChart.setOption(option);
+        }
+
+        if (!testDom) {
+            testDom = document.querySelectorAll(".test66 .box");
+        }
+        obsDom(testDom, myChart);
+    }
+    return test66;
+})();

spring-cloud/server-page/src/main/resources/static/testEcharts/test/main/js/common.js

@@ -7,188 +7,193 @@ const bgs = []; // 背景图片
 let themeStore = [];
 
 const themeSubmit = {
-    themeName: "",
-    pageWidthHeight: "",
-    backgroundPath: "",
+  themeName: "",
+  pageWidthHeight: "",
+  backgroundPath: "",
 };
 // 各个模块
 const objFn = {
-    test1: test1,
-    test2: test2,
-    test3: test3,
-    test4: test4,
-    test5: test5,
-    test6: test6,
-    test7: test7,
-    test8: test8,
-    test9: test9,
-    test10: test10,
-    test11: test11,
-    test12: test12,
-    test13: test13,
-    test14: test14,
-    test15: test15,
-    test16: test16,
-    test17: test17,
-    test18: test18,
-    test19: test19,
-    test20: test20,
-    test21: test21,
-    test22: test22,
-    test23: test23,
-    test24: test24,
-    test25: test25,
-    test26: test26,
-    test27: test27,
-    test28: test28,
-    test29: test29,
-    test30: test30,
-    test31: test31,
-    test32: test32,
-    test33: test33,
-    test34: test34,
-    test35: test35,
-    test36: test36,
-    test37: test37,
-    test38: test38,
-    test39: test39,
-    test40: test40,
-    test41: test41,
-    test42: test42,
-    test43: test43,
-    test44: test44,
-    test45: test45,
-    test46: test46,
-    test47: test47,
-    test48: test48,
-    test49: test49,
-    test50: test50,
-    test51: test51,
-    test52: test52,
-    test53: test53,
-    test54: test54,
-    test55: test55,
-    test56: test56,
-    test57: test57,
-    test58: test58,
-    test59: test59,
-    test60: test60,
-    test61: test61,
-};
+  test1: test1,
+  test2: test2,
+  test3: test3,
+  test4: test4,
+  test5: test5,
+  test6: test6,
+  test7: test7,
+  test8: test8,
+  test9: test9,
+  test10: test10,
+  test11: test11,
+  test12: test12,
+  test13: test13,
+  test14: test14,
+  test15: test15,
+  test16: test16,
+  test17: test17,
+  test18: test18,
+  test19: test19,
+  test20: test20,
+  test21: test21,
+  test22: test22,
+  test23: test23,
+  test24: test24,
+  test25: test25,
+  test26: test26,
+  test27: test27,
+  test28: test28,
+  test29: test29,
+  test30: test30,
+  test31: test31,
+  test32: test32,
+  test33: test33,
+  test34: test34,
+  test35: test35,
+  test36: test36,
+  test37: test37,
+  test38: test38,
+  test39: test39,
+  test40: test40,
+  test41: test41,
+  test42: test42,
+  test43: test43,
+  test44: test44,
+  test45: test45,
+  test46: test46,
+  test47: test47,
+  test48: test48,
+  test49: test49,
+  test50: test50,
+  test51: test51,
+  test52: test52,
+  test53: test53,
+  test54: test54,
+  test55: test55,
+  test56: test56,
+  test57: test57,
+  test58: test58,
+  test59: test59,
+  test60: test60,
+  test61: test61,
+  test62: test62,
+  test63: test63,
+  test64: test64,
+  test65: test65,
+  test66: test66,
+s};
 
 // 保存接口
 function savk(modusData, themeName) {
-    localStorage.setItem(themeName, $(".centerBox").html());
-    $.ajax({
-        url: basicUrl + `/moduleInfo/saveModuleInfo`,
-        data: {
-            moduleInfos: JSON.stringify(modusData),
-        },
-        type: "POST",
-        dataType: "JSON",
-        success: function(data) {
-            if (!data.result) {
-                return alert("保存失败");
-            }
-            // 保存提示
-            $(".holdToos").fadeIn("slow", function() {
-                // 淡入显示动画结束了
-            });
+  localStorage.setItem(themeName, $(".centerBox").html());
+  $.ajax({
+    url: basicUrl + `/moduleInfo/saveModuleInfo`,
+    data: {
+      moduleInfos: JSON.stringify(modusData),
+    },
+    type: "POST",
+    dataType: "JSON",
+    success: function (data) {
+      if (!data.result) {
+        return alert("保存失败");
+      }
+      // 保存提示
+      $(".holdToos").fadeIn("slow", function () {
+        // 淡入显示动画结束了
+      });
 
-            setTimeout(() => {
-                $(".holdToos").fadeOut("slow", function() {
-                    // 淡出隐藏动画结束了
-                });
-            }, 500);
-        },
-        timeout: 6000,
-        error: function(err) {
-            // 保存提示
-            $(".holdToosLose").fadeIn("slow", function() {
-                // 淡入显示动画结束了
-            });
+      setTimeout(() => {
+        $(".holdToos").fadeOut("slow", function () {
+          // 淡出隐藏动画结束了
+        });
+      }, 500);
+    },
+    timeout: 6000,
+    error: function (err) {
+      // 保存提示
+      $(".holdToosLose").fadeIn("slow", function () {
+        // 淡入显示动画结束了
+      });
 
-            setTimeout(() => {
-                $(".holdToosLose").fadeOut("slow", function() {
-                    // 淡出隐藏动画结束了
-                });
-            }, 500);
-            console.log("保存接口请求超时");
-        },
-    });
+      setTimeout(() => {
+        $(".holdToosLose").fadeOut("slow", function () {
+          // 淡出隐藏动画结束了
+        });
+      }, 500);
+      console.log("保存接口请求超时");
+    },
+  });
 }
 
 // 添加监听
 function eventDomClick() {
-    // 添加监听
-    $(".addBtn").click(addModule);
+  // 添加监听
+  $(".addBtn").click(addModule);
 
-    function addModule() {
-        // console.log($(this).index()); // 全0
-        const dom = $(this);
-        const btnId = dom.attr("data-id");
-        const domTitle = dom.attr("data-title");
-        const name = dom.attr("data-name");
-        deleModule(moduleIdRemove);
-        console.log("点击添加后的数据", themeStore);
+  function addModule() {
+    // console.log($(this).index()); // 全0
+    const dom = $(this);
+    const btnId = dom.attr("data-id");
+    const domTitle = dom.attr("data-title");
+    const name = dom.attr("data-name");
+    deleModule(moduleIdRemove);
+    console.log("点击添加后的数据", themeStore);
 
-        const stoObj = themeStore.find(function(sto) {
-            return sto.dom_name === name || +sto.init_module_id === +btnId;
-        });
-        const cDom = $(`.${name} .box`);
-        if (stoObj || cDom.length) {
-            let name =
-                stoObj &&
-                $("." + stoObj.dom_name)
-                .find("h2")
-                .text();
-            if (!name) {
-                name = cDom.find("h2").text();
-            }
-            console.log(name + "模块已经存在！");
-            alert(name + "   模块已经存在！");
-            return;
-        }
+    const stoObj = themeStore.find(function (sto) {
+      return sto.dom_name === name || +sto.init_module_id === +btnId;
+    });
+    const cDom = $(`.${name} .box`);
+    if (stoObj || cDom.length) {
+      let name =
+        stoObj &&
+        $("." + stoObj.dom_name)
+          .find("h2")
+          .text();
+      if (!name) {
+        name = cDom.find("h2").text();
+      }
+      console.log(name + "模块已经存在！");
+      alert(name + "   模块已经存在！");
+      return;
+    }
 
-        themeStore.push({
-            init_module_id: btnId,
-            dom_name: name,
-            page_path: `../components/${name}/${name}.html`,
-        });
+    themeStore.push({
+      init_module_id: btnId,
+      dom_name: name,
+      page_path: `../components/${name}/${name}.html`,
+    });
 
-        dom.find("i").css("color", "red");
+    dom.find("i").css("color", "red");
 
-        window.localStorage.setItem("themeStore", JSON.stringify(themeStore));
+    window.localStorage.setItem("themeStore", JSON.stringify(themeStore));
 
-        $(`.${name}`).load(`../components/${name}/${name}.html`, function() {
-            objFn[name](btnId, domTitle);
-        });
-    }
+    $(`.${name}`).load(`../components/${name}/${name}.html`, function () {
+      objFn[name](btnId, domTitle);
+    });
+  }
 }
 
 // 通过模块id删除相应的模块
 function deleModule(moduleIdRemove) {
-    let arr = [];
-    for (let i = 0; i < moduleIdRemove.length; i++) {
-        const moduleId = moduleIdRemove[i];
-        for (let j = 0; j < themeStore.length; j++) {
-            const element = themeStore[j];
-            if (+element.init_module_id === +moduleId) {
-                arr.push(...themeStore.splice(j, 1));
-                i--;
-            }
-        }
+  let arr = [];
+  for (let i = 0; i < moduleIdRemove.length; i++) {
+    const moduleId = moduleIdRemove[i];
+    for (let j = 0; j < themeStore.length; j++) {
+      const element = themeStore[j];
+      if (+element.init_module_id === +moduleId) {
+        arr.push(...themeStore.splice(j, 1));
+        i--;
+      }
     }
-    return arr;
+  }
+  return arr;
 }
 
 // 防抖
 function debounce(func, delay = 50) {
-    let timer = null;
-    return function(...args) {
-        if (timer) clearInterval(timer);
-        timer = setTimeout(() => {
-            func.apply(this, ...args);
-        }, delay);
-    };
-}
+  let timer = null;
+  return function (...args) {
+    if (timer) clearInterval(timer);
+    timer = setTimeout(() => {
+      func.apply(this, ...args);
+    }, delay);
+  };
+}

spring-cloud/server-page/src/main/resources/static/testEcharts/test/main/main.html

@@ -342,7 +342,7 @@
     <script src="../js/common.js"></script>
 
     <script>
-        for (let i = 1; i <= 61; i++) {
+        for (let i = 1; i <= 66; i++) {
             const link = $(
                 `<link rel="stylesheet" href="../components/test${i}/test${i}.css">`
             );