数据大屏

src/views/bigScreen/index_photon.vue

@@ -125,15 +125,43 @@
                           <p>预制棒</p>
                           <p> <span class="numberFont">390</span><span class="numberUnit">件</span></p>
                       </div>
-                      <!-- <div>
-                          <p>总量</p>
-                          <p> <span class="numberFont">140</span><span class="numberUnit">件</span></p>
-                      </div> -->
                   </div>
               </div>
           </div>
 
       </div>
+      <div id="cilckInfoBlock" class="inforBlock clickBlock" v-show="clickVisible">
+          <div class="border_corner border_left_top"></div>
+          <div class="border_corner border_right_top"></div>
+          <div class="border_corner border_left_bottom"></div>
+          <div class="border_corner border_right_bottom"></div>
+          <p class="title">{{currentObj.deptName}}</p>
+          <div class="infoCantier">
+              <div class="leftBlock">
+                  <el-progress width="100" type="circle" color="rgba(54, 217, 187, 1)" :percentage="25"
+                      id="dashbordProcess" />
+                  <p style="text-align:center">完成进度</p>
+              </div>
+              <div class="rightBlock">
+                  <div>
+                      <p>昨日产量</p>
+                      <p> <span class="numberFont">390</span><span class="numberUnit">件</span></p>
+                  </div>
+                  <div class="countWrap">
+                      <div>
+                          <p>预制管</p>
+                          <p> <span class="numberFont">390</span><span class="numberUnit">件</span></p>
+                      </div>
+                      <div>
+                          <p>预制棒</p>
+                          <p> <span class="numberFont">390</span><span class="numberUnit">件</span></p>
+                      </div>
+                  </div>
+              </div>
+              <CircleClose  class="circleClose" @click="circleClose"/>
+          </div>
+
+      </div>
   </el-container>
 </template>
 <script>
@@ -183,14 +211,16 @@ export default {
           loadedPercent: 0,
           currentLightMesh: null,
           infoVisibel: false,
+          clickVisible:false,
           updateTime: '2023-08-17 16:00:00',
           nodesLists: {
-              '单身宿舍.004_primitive3': { total: '0', elec: '0', name: '办公楼' },
+              '单身宿舍.004_primitive3': '办公楼',
-              '立方体.024_primitive1': { total: '0', elec: '0', name: '成型10车间' },
+              '立方体.024_primitive1':'成型10车间',
-              '立方体.034_primitive1': { total: '0', elec: '0', name: '配料8车间' },
+              '立方体.034_primitive1': '配料8车间',
-              '立方体.026_primitive1': { total: '0', elec: '0', name: '成型7车间' },
+              '立方体.026_primitive1': '成型7车间',
-              '立方体.025_primitive1': { total: '0', elec: '0', name: '加工6车间' },
+              '立方体.025_primitive1': '加工6车间',
           },
+          objs:{ total: '0', elec: '0' },
           currentTime:'',
           currentWeek:'',
           currentDay:'',
@@ -198,8 +228,12 @@ export default {
           start_date:'',
           end_date:'',
           dialogData:{
-              deptName:'办公楼'
+              deptName:''
           },
+          currentObj:{
+              deptName:''
+          },
+          heightTimer:null,
       }
   },
   mounted() {
@@ -230,8 +264,6 @@ export default {
       let last = new Date(new Date(cDate.getTime() + (weekLast * ondDayTime)));//本周周日
       this.start_date = first.getFullYear()+'-'+(first.getMonth()+1)+'-'+first.getDate();
       this.end_date = last.getFullYear()+'-'+(last.getMonth()+1)+'-'+last.getDate();
-      console.log(this.start_date)
-      console.log(this.end_date);
       this.getsaleOut();
   },
   methods: {
@@ -241,8 +273,8 @@ export default {
               query: {start_date:this.start_date,end_date:this.end_date,dept_name: "6车间"},
           };
           that.$API.bi.dataset.exec.req('3448456854219546624', obj).then((res) => {
-              console.log(res);
+            //   console.log(res);
-              debugger;
+            //   debugger;
           });
       },
       showTime() {
@@ -310,7 +342,7 @@ export default {
               camera.upperRadiusLimit = 6;
               // 灯光
               const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));
-              light.intensity = 0.8;
+              light.intensity = 3;
               // 全屏GUI
               const advancedTexture = BABYLON_GUI.AdvancedDynamicTexture.CreateFullscreenUI("myUI");
               that.myui = advancedTexture;
@@ -329,7 +361,7 @@ export default {
               button_main.color = "white";
               button_main.cornerRadius = 20;
               button_main.background = "green";
-              button_main.top='80px';
+              button_main.top='100px';
               button_main.left='0px';
               control_main.addControl(button_main)
               button_main.onPointerClickObservable.add(() => {
@@ -358,47 +390,59 @@ export default {
               mesh_name.color = 'white';
               mesh_name.fontSize = '14px';
               mesh_rect.addControl(mesh_name);
+              
+              var remoteGlbUrl = process.env.VUE_APP_BASEURL + "/media/model/photon4.glb";
+              BABYLON.SceneLoader.Append(remoteGlbUrl, "", scene, function (scene) {
               // var remoteGlbUrl = process.env.VUE_APP_BASEURL + "/media/model/photon3.glb";
-              BABYLON.SceneLoader.Append('glb/', "photon4.glb", scene, function (scene) {
+            //   BABYLON.SceneLoader.Append('glb/', "photon4.glb", scene, function (scene) {
-                  console.log(scene)
+                //   console.log(scene)
                   //关闭灯光
                   // scene.lights[1].setEnabled(false); 
                   engine.hideLoadingUI()
+                //   let arrKey = [];
                 //   for (let key in that.nodesLists) {
-                  //     // const value = that.nodesLists[key];
+                //     arrKey.push(key);
-                  //     const mesh = scene.getMeshByName(key);
+                //   }
-                  //     if (mesh) {
+                //   let heightI = 0;
-                  //         console.log('000000000000');
+                //   that.heightTimer = setInterval(() => {
-                  //         console.log(mesh);
+                //     let heightKey = arrKey[heightI];
+                //     const meshTimer = scene.getMeshByName(heightKey);
+                //     const hl1Timer = new BABYLON.HighlightLayer("hl1Timer", scene);
                     
-                  //         mesh.actionManager.registerAction(
+                //     if (meshTimer) {
-                  //             // new BABYLON.ExecuteCodeAction(trigger, func, condition)
+                //         if (that.nodesLists[heightKey]) {
-                  //         )
+                //             hl1Timer.removeAllMeshes();
-                  //         mesh.onPointerDownObservable.add(() => {
+                //             if (highlightLayer) { 
-                  //             console.log('111111111111');
+                //                 highlightLayer.removeAllMeshes();
-                  //             console.log(camera.target);
-                  //             console.log(mesh.position);
-                  //             debugger;
-                  //             if (camera.target != mesh.position) {
-                  //             // console.log('fly to')
-                  //             // 计算新的相机位置
-                  //             let position = mesh._parentNode._position
-                  //             if(mesh._parentNode.id=='__root__'){
-                  //                 position = mesh.position
                 //             }
-                  //             const cameraPosition = new BABYLON.Vector3(
+                //           that.getDeptDetail(that.nodesLists[heightKey])
-                  //                 mesh.position.x + 9 * Math.sin(camera.beta) * Math.cos(Math.PI),
+                //           // 在选中的 meshTimer 上添加高亮效果
-                  //                 mesh.position.y + 9 * Math.cos(camera.beta),
+                //           highlightLayer.addMesh(meshTimer, new BABYLON.Color3(0.1, 0.9, 0.9));
-                  //                 mesh.position.z + 9 * Math.sin(camera.beta) * Math.sin(Math.PI)
+                //           that.currentLightMesh = meshTimer;
-                  //             );
+                //           mesh_rect.linkWithMesh(meshTimer);
-                  //             var ease = new BABYLON.CubicEase();
+                //           let name = meshTimer.name.split('_')[0];
-                  //             ease.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT);
+                //           mesh_name.text = name;
-                  //             BABYLON.Animation.CreateAndStartAnimation('at5', camera, 'position', 45, 200, camera.position, cameraPosition, 0, ease);
+                //           that.infoVisibel = true;
-                  //             BABYLON.Animation.CreateAndStartAnimation('at51', camera, 'target', 45, 200, camera.target, position, 0, ease);
+                //           hl1Timer.addMesh(meshTimer, new BABYLON.Color3(12 / 255, 250 / 255, 252 / 255), true);
+                //           hl1Timer.blurVerticalSize = 5;
+                //           hl1Timer.blurHorizontalSize = 5;
+                //           function worldToScreen(point, camera, scene, engine) {
+                //               return BABYLON.Vector3.Project(point,
+                //                   BABYLON.Matrix.Identity(),
+                //                   scene.getTransformMatrix(),
+                //                   camera.viewport.toGlobal(engine.getRenderWidth(), engine.getRenderHeight()));
                 //           }
-                  //         })
+                //           var pos = worldToScreen(meshTimer.absolutePosition, camera, scene, engine);
+                //           let infoBlock = document.getElementById('inforBlock');
+                //           infoBlock.style.left = (Math.floor(pos.x)) + 'px';
+                //           infoBlock.style.top = (Math.floor(pos.y) - 250) + 'px';
                 //       }
                 //     }
+                //     heightI+=1;
+                //     // if(heightI>4){
+                //     //     heightI=0
+                //     // }
+                //   }, 1000);
               },
               //进度条
               function (evt) {
@@ -418,7 +462,7 @@ export default {
               checkbox.isChecked = false;
               checkbox.marginLeft = '16px'
               checkbox.color = "green";
-              checkbox.top='80px';
+              checkbox.top='100px';
               checkbox.onIsCheckedChangedObservable.add(function (value) {
                   if (value) {
                       camera.useAutoRotationBehavior = true;
@@ -432,10 +476,11 @@ export default {
               header.width = "80px";
               header.textHorizontalAlignment = BABYLON_GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
               header.color = "white";
-              header.top='80px';
+              header.top='100px';
               control_main.addControl(header);
               // 添加抓取事件
               const hl1 = new BABYLON.HighlightLayer("hl1", scene);
+              const hl1Click = new BABYLON.HighlightLayer("hl1Click", scene);
               canvas.addEventListener('mousemove', (event) => {
                   // 使用 scene.pick 检测鼠标拾取
                   const pickResult = scene.pick(scene.pointerX, scene.pointerY);
@@ -447,27 +492,12 @@ export default {
                   }
                   if (pickResult.hit) {
                       const mesh = pickResult.pickedMesh;
-                      // if (camera.target != mesh.position) {
-                      //     // console.log('fly to')
-                      //     // 计算新的相机位置
-                      //     let position = mesh._parentNode._position
-                      //     if(mesh._parentNode.id=='__root__'){
-                      //         position = mesh.position
-                      //     }
-                      //     const cameraPosition = new BABYLON.Vector3(
-                      //         mesh.position.x + 9 * Math.sin(camera.beta) * Math.cos(Math.PI),
-                      //         mesh.position.y + 9 * Math.cos(camera.beta),
-                      //         mesh.position.z + 9 * Math.sin(camera.beta) * Math.sin(Math.PI)
-                      //     );
-                      //     var ease = new BABYLON.CubicEase();
-                      //     ease.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT);
-                      //     BABYLON.Animation.CreateAndStartAnimation('at5', camera, 'position', 45, 200, camera.position, cameraPosition, 0, ease);
-                      //     BABYLON.Animation.CreateAndStartAnimation('at51', camera, 'target', 45, 200, camera.target, position, 0, ease);
-                      // }
                       highlightLayer.removeAllMeshes();
                       let key = mesh.name;
                       if (that.nodesLists[key]) {
-                          that.getDeptDetail(that.nodesLists[key].name)
+                        hl1.removeAllMeshes();
+                            highlightLayer.removeAllMeshes();
+                          that.getDeptDetail(that.nodesLists[key])
                           //单身宿舍.003_primitive3
                           // 在选中的 mesh 上添加高亮效果
                           highlightLayer.addMesh(mesh, new BABYLON.Color3(0.1, 0.9, 0.9));
@@ -476,7 +506,7 @@ export default {
                           let name = mesh.name.split('_')[0];
                           mesh_name.text = name;
                           // mesh_rect.isVisible = true;
-                          that.infoVisibel = true;
+                          
                           hl1.addMesh(mesh, new BABYLON.Color3(12 / 255, 250 / 255, 252 / 255), true);
                           hl1.blurVerticalSize = 5;
                           hl1.blurHorizontalSize = 5;
@@ -500,17 +530,27 @@ export default {
                   const pickResult = scene.pick(scene.pointerX, scene.pointerY);
                   if (pickResult.hit) {
                       const mesh = pickResult.pickedMesh;
+                      console.log('mesh',mesh)
+                      if(that.nodesLists[mesh.name]){
+                        hl1Click.removeAllMeshes();
+                        highlightLayer.removeAllMeshes();
+                        
+                        highlightLayer.addMesh(mesh, new BABYLON.Color3(0.1, 0.9, 0.9));
+                        hl1Click.addMesh(mesh, new BABYLON.Color3(12 / 255, 250 / 255, 252 / 255), true);
+                        hl1Click.blurVerticalSize = 5;
+                        hl1Click.blurHorizontalSize = 5;
+                        that.currentObj.deptName = that.nodesLists[mesh.name]; 
                         if (camera.target != mesh.position) {
-                          console.log('fly to')
+                            that.clickVisible = true;
                             // 计算新的相机位置
                             let position = mesh._parentNode._position
                             if (mesh._parentNode.id == '__root__') {
                                 position = mesh.position
                             }
                             const cameraPosition = new BABYLON.Vector3(
-                              mesh.position.x + 2.5 * Math.sin(camera.beta) * Math.cos(1.8*Math.PI),
+                                position.x + 1.8 * Math.sin(camera.beta),
-                              mesh.position.y + 2.5 * Math.cos(camera.beta),
+                                position.y + 4 * Math.cos(camera.beta),
-                              mesh.position.z + 2.5 * Math.sin(camera.beta) * Math.sin(1.8*Math.PI)
+                                position.z - 0.2 * Math.sin(camera.beta)
                             );
                             var ease = new BABYLON.CubicEase();
                             ease.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT);
@@ -518,6 +558,7 @@ export default {
                             BABYLON.Animation.CreateAndStartAnimation('at51', camera, 'target', 45, 200, camera.target, position, 0, ease);
                         }
                       }
+                  }
               });
               return scene;
           };
@@ -528,13 +569,18 @@ export default {
           });
           this.engine = engine;
           this.scene = scene;
-          console.log('scene:',scene)
+        //   console.log('scene:',scene)
           window.addEventListener("resize", function () {
               engine.resize();
           });
       },
       getDeptDetail(name){
+        if(this.currentObj.deptName==name&&this.clickVisible){
             this.dialogData.deptName = name;
+        }else{
+            this.infoVisibel = true;
+            this.dialogData.deptName = name;
+        } 
       },
       initChart() {
           //左1
@@ -621,7 +667,7 @@ export default {
               ],
               yAxis: [
                   {
-                      name: "交付数",
+                      name: "交付数(个)",
                       type: 'value',
                       nameTextStyle: {
                           color: '#ffffff'
@@ -793,7 +839,7 @@ export default {
               ],
               yAxis: [
                   {
-                      name: "数量(个)",
+                      name: "合格数(个)",
                       type: 'value',
                       nameTextStyle: {
                           color: '#ffffff'
@@ -943,7 +989,7 @@ export default {
 
               },
               yAxis: {
-                  name: '温度',
+                  name: '合格率(%)',
                   type: 'value',
                   nameTextStyle: {
                       color: '#ffffff'
@@ -1229,7 +1275,6 @@ export default {
                       },
                       labelLine: {
                           lineStyle: {
-                              // type: [6]
                           },
                           length: 2,
                           length2: 5
@@ -1259,6 +1304,10 @@ export default {
           };
           pieChart.setOption(pieoption);
       },
+      circleClose(){
+        this.clickVisible = false;
+        this.currentObj.deptName = '';
+      },
   },
   beforeDestoryed() {
       clearInterval(timerTime); 
@@ -1268,12 +1317,6 @@ export default {
 }
 </script>
 <style scoped>
-/* @font-face {
-font-family: 'youShe';
-src: url('./youShe.ttf') format('truetype');
-font-weight: normal;
-font-style: normal;
-} */
     @font-face {
         font-family: 'myfont'; /* 字体名称 */
         src: url('../../style/youShe.ttf'); /* 字体文件相对路径 */
@@ -1284,7 +1327,6 @@ font-style: normal;
     }
 
     .pageHeader {
-  /* height: 70px; */
         font-size: 32px;
         background: none;
         border-bottom: none;
@@ -1367,7 +1409,6 @@ font-style: normal;
     .row-item {
         height: 40px !important;
         line-height: 40px !important;
-  /* background-color:rgb(10,63,68)!important; */
     }
 
     #scrollTable>.hader {
@@ -1397,95 +1438,6 @@ font-style: normal;
         font-size: 30px;
     }
 
-.inforBlock {
-  left: 60%;
-  top: 30%;
-  width: 420px;
-  height: 150px;
-  position: absolute;
-  font-weight: 500;
-  color: #fff;
-  padding: 20px;
-  font-size: 14px;
-  box-sizing: border-box;
-  background: linear-gradient(to bottom left, rgba(25, 154, 118, .5), rgba(31, 44, 50, .5));
-
-  /* border:1px solid rgba(1,235,239,.2); */
-  .border_corner {
-      z-index: 2500;
-      position: absolute;
-      width: 10px;
-      height: 10px;
-      background: rgba(0, 0, 0, 0);
-      border: 2px solid rgba(54, 217, 187, 1);
-  }
-
-  .border_left_top {
-      top: 0;
-      left: 0;
-      border-right: none;
-      border-bottom: none;
-  }
-
-  .border_right_top {
-      top: 0;
-      right: 0;
-      border-left: none;
-      border-bottom: none;
-  }
-
-  .border_left_bottom {
-      bottom: 0;
-      left: 0;
-      border-right: none;
-      border-top: none;
-  }
-
-  .border_right_bottom {
-      bottom: 0;
-      right: 0;
-      border-left: none;
-      border-top: none;
-  }
-
-  .title {
-      font-size: 20px;
-      font-weight: 600;
-      position: absolute;
-      top: -45px;
-      text-align: center;
-      width: 100%;
-      left: 0;
-      /* margin-bottom:20px;
-      display: inline-block;
-      border-bottom: 3px solid green;
-      padding: 0 5px 5px; */
-  }
-
-  .infoCantier {
-      display: flex;
-
-      .leftBlock {
-          width: 100px;
-          margin-right: 30px;
-      }
-
-      .rightBlock {
-          display: flex;
-          flex-direction: column;
-          justify-content: space-between;
-
-          .countWrap {
-              display: flex;
-              justify-content: space-between;
-              width: 280px;
-              margin-top: 10px
-          }
-      }
-  }
-
-}
-
     .numberFont {
         font-size: 22px;
         font-weight: bold;
@@ -1515,25 +1467,19 @@ font-style: normal;
     .totalNumWrap{
         margin: 0 10px;
         position: relative;
-  img{
+    }
+    .totalNumWrap>img{
         width: 10vw;
     }
-}
+    .totalNumWrap_green>.totalNumber{
-.totalNumWrap_green{
-  .totalNumber{
         color: rgb(5,245,2);
     }
-}
+    .totalNum_orange>.totalNumber{
-.totalNum_orange{
-  .totalNumber{
         color: orange;
     }
-}
+    .totalNum_blue>.totalNumber{
-.totalNum_blue{
-  .totalNumber{
         color: rgb(2,245,242);
     }
-}
     .totalNumber{
         font-size: 25px;
         font-weight: bold;
@@ -1545,11 +1491,110 @@ font-style: normal;
     .totalNumText{
         color: #fff;
         font-weight: bold;
-  font-size: 16px;
+        font-size: 0.7vw;
         position: absolute;
         top: -6px;
         left: 50%;
         transform: translateX(-50%);
     }
 
+    .inforBlock {
+        left: 60%;
+        top: 30%;
+        width: 420px;
+        height: 150px;
+        position: absolute;
+        font-weight: 500;
+        color: #fff;
+        padding: 20px;
+        font-size: 14px;
+        box-sizing: border-box;
+        background: linear-gradient(to bottom left, rgba(25, 154, 118, .5), rgba(31, 44, 50, .5));
+    }
+    .inforBlock.clickBlock{
+        left: 50%;
+        width: 630px;
+        height: 225px;
+        padding:40px;
+        font-size:16px;
+        transform:translateX(-50%)
+    }
+    .inforBlock>.border_corner {
+        z-index: 2500;
+        position: absolute;
+        width: 10px;
+        height: 10px;
+        background: rgba(0, 0, 0, 0);
+        border: 2px solid rgba(54, 217, 187, 1);
+    }
+
+    .inforBlock>.border_left_top {
+        top: 0;
+        left: 0;
+        border-right: none;
+        border-bottom: none;
+    }
+
+    .inforBlock>.border_right_top {
+        top: 0;
+        right: 0;
+        border-left: none;
+        border-bottom: none;
+    }
+
+    .inforBlock>.border_left_bottom {
+        bottom: 0;
+        left: 0;
+        border-right: none;
+        border-top: none;
+    }
+
+    .inforBlock>.border_right_bottom {
+        bottom: 0;
+        right: 0;
+        border-left: none;
+        border-top: none;
+    }
+
+    .inforBlock>.title {
+        font-size: 20px;
+        font-weight: 600;
+        position: absolute;
+        top: -45px;
+        text-align: center;
+        width: 100%;
+        left: 0;
+    }
+
+    .inforBlock>.infoCantier {
+        display: flex;
+
+    }
+    .infoCantier>.leftBlock {
+        width: 100px;
+        display: flex;
+        flex-direction: column;
+        margin-right: 30px;
+    }
+    .infoCantier>.rightBlock {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+    }
+    .infoCantier>.rightBlock>.countWrap {
+        display: flex;
+        justify-content: space-between;
+        width: 280px;
+        margin-top: 10px
+    }
+    /* .clickBlock{
+        position:relative;
+    } */
+    .circleClose{
+        position: absolute;
+    right: 10px;
+    top: 10px;
+    width: 30px;
+    height: 30px;
+    }
 </style>