feat: 光子大屏页面调整

src/views/bigScreen/textIndex.vue

@@ -7,45 +7,98 @@
     </el-header>
       <el-main style="padding:0" id="mainBlock">
         <el-row style="height:100%">
-            <el-col :span="6">
+            <!-- <div style="position: absolute;left: 0;width:20%;z-index:10">
                 <div style="display:flex;flex-direction: column;height:100%;padding:20px">
                     <div class="flexItem" style="flex:1">
                         <div class="blockTitle"><div class="blockTitleIcon"></div>模块一</div>
-                        <div id="line1" style="width:100%;height:92%"></div>
+                        <div id="line1" style="width:100%;height:92%;background:rgba(50,144,118,.1)"></div>
                     </div>
                     <div class="flexItem" style="flex:1">
                         <div class="blockTitle"><div class="blockTitleIcon"></div>模块二</div>
-                        <div id="bar1" style="width:100%;height:92%"></div>
+                        <div id="bar1" style="width:100%;height:92%;background:rgba(50,144,118,.1)"></div>
                     </div>
                     <div class="flexItem" style="flex:1">
                         <div class="blockTitle"><div class="blockTitleIcon"></div>模块三</div>
-                        <div id="line2" style="width:100%;height:92%"></div>
+                        <div id="line2" style="width:100%;height:92%;background:rgba(50,144,118,.1)"></div>
                     </div>
                 </div>
+            </div> -->
+            <el-col :span="24">
+                <div class="model">
+                    <div id="loadingScreen">
+                        <el-progress type="circle" :percentage="loadedPercent" :width=220 status="warning">
+                        <template #default="{ percentage }">
+                            <div style="font-size: 30px; color: white; font-weight: bold">{{ percentage }}%</div>
+                            <div style="font-size: 18px; color: white; margin-top: 10px">工厂模型加载中</div>
+                        </template>
+                        </el-progress>
+                    </div>
+                    <canvas id="renderCanvas"></canvas>
+                </div>
             </el-col>
-            <el-col :span="12"></el-col>
+            <!-- <div style="position: absolute;right: 0;width:20%;z-index:10">
-            <el-col :span="6">
                 <div style="display:flex;flex-direction: column;height:100%;padding:20px">
                     <div class="flexItem" style="flex:1">
                         <div class="blockTitle"><div class="blockTitleIcon"></div>模块四</div>
-                        <div id="pie" style="width:100%;height:92%"></div>
+                        <div id="pie" style="width:100%;height:92%;background:rgba(50,144,118,.1)"></div>
                     </div>
                     <div class="flexItem" style="flex:1">
                         <div class="blockTitle"><div class="blockTitleIcon"></div>模块五</div>
-                        <div id="line3" style="width:100%;height:92%"></div>
+                        <div id="line3" style="width:100%;height:92%;background:rgba(50,144,118,.1)"></div>
                     </div>
                     <div class="flexItem" style="flex:1">
                         <div class="blockTitle"><div class="blockTitleIcon"></div>模块六</div>
                         <dv-scroll-board id="scrollTable" :config="taskBoard"  :style="{'width':'100%','height':blockHeight}"/>
                     </div>
                 </div>
-            </el-col>
+            </div> -->
         </el-row>
       </el-main>
+      <div id="inforBlock" class="inforBlock" v-show="infoVisibel">
+        <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">10车间</p>
+        <div class="infoCantier">
+            <div class="leftBlock">
+                <el-progress width="50" type="circle" color="rgba(54, 217, 187, 1)" :percentage="25" id="dashbordProcess"/>
+                <span>完成进度</span>
+            </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">120</span><span class="numberUnit">件</span></p>
+                    </div>
+                    <div>
+                        <p>总量</p>
+                        <p> <span class="numberFont">130</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>
     </el-container>
 </template>
 <script>
 import * as echarts from 'echarts';
+import * as BABYLON from "babylonjs";
+import * as BABYLON_GUI from "babylonjs-gui";
+import * as BABYLON_GRID from "@/utils/gridMaterial";
+import * as BABYLON_MATERIAL from "@/utils/babylonMaterial";
+
+import 'babylonjs-loaders';
+import 'animate.css';
 export default {
     data() {
         return {
@@ -67,6 +120,28 @@ export default {
                 index: true,
                 columnWidth: [50],
                 align: ['center'],
+                loadedPercent:0,
+                percentage:0,
+                percentage:0
+            },
+            initialAlpha: -Math.PI / 1.2,
+            initialBeta: Math.PI / 2.5,
+            initialRadius: 15,
+            initialTarget: null,
+            scene: null,
+            myui: null,
+            resizeTimeout: null,
+            engine: null,
+            loadedPercent: 0,
+            currentLightMesh: null,
+            infoVisibel:false,
+            updateTime: '2023-08-17 16:00:00',
+            nodesLists:{
+                '单身宿舍.005_primitive3':{total:'0',elec:'0',name:'办公楼'},
+                '立方体.015_primitive1':{total:'0',elec:'0',name:'加工车间'},
+                '立方体.004_primitive1':{total:'0',elec:'0',name:'配料车间'},
+                '立方体.003_primitive1':{total:'0',elec:'0',name:'成型车间'},
+                '立立方体.002_primitive1':{total:'0',elec:'0',name:'成型车间'},
             },
         }
     },
@@ -74,9 +149,340 @@ export default {
         let height = document.getElementById('mainBlock').clientHeight;
         let height0 = height/3-50;
         this.blockHeight = height0+'px'
+        this.$nextTick(() => {
+            // this.initChart();
+            this.initDomStyle();
+            this.initFactory();
+        })
+    },
+    methods:{
+        initDomStyle() {
+            // 获取窗口的总高度
+            var windowHeight = window.innerHeight;
+            var windowWidth = window.innerWidth;
+            var dashboard = document.getElementsByClassName('container')[0];
+            var model = document.getElementsByClassName('model')[0];
+            if (windowWidth > 960) {
+                dashboard.style.overflow = 'hidden';
+                model.style.position = 'absolute';
+                model.style.height = (windowHeight - 3) + 'px';
+                model.style.top = 0
+            }else {
+                dashboard.style.overflow = 'auto';
+                var chartHeight = windowWidth * 0.6;
+                model.style.position = 'relative';
+                model.style.height = chartHeight;
+            }
+            if (this.engine != null) {
+                this.engine.resize();
+            }
+     
+        },
+        initFactory() {
+        var that = this;
+        const canvas = document.getElementById("renderCanvas"); // Get the canvas element
+        const engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine
+        BABYLON.DefaultLoadingScreen.prototype.displayLoadingUI = function () {
+        }
+        BABYLON.DefaultLoadingScreen.prototype.hideLoadingUI = function () {
+            document.getElementById("loadingScreen").style.display = "none";
+        }
+
+        engine.displayLoadingUI();
+        const createScene = function () {
+            const scene = new BABYLON.Scene(engine);
+            scene.clearColor = BABYLON.Color3.Black(); //BABYLON.Color3(1, 0, 1); 
+            const ground = BABYLON.MeshBuilder.CreateGround("ground", { width: 10, height: 10 });
+            const groundMaterial = new BABYLON_GRID.GridMaterial("groundMaterial", scene);
+            groundMaterial.majorUnitFrequency = 5;
+            groundMaterial.minorUnitVisibility = 0.1;
+            groundMaterial.gridRatio = 0.1;
+            ground.material = groundMaterial;
+            ground.position.y = -0.1
+
+            // 加载背景图片
+            const backgroundImage = new BABYLON.Layer('', 'img/photon_bg.png', scene, true);
+            const camera = new BABYLON.ArcRotateCamera("camera", that.initialAlpha, that.initialBeta, that.initialRadius, new BABYLON.Vector3(0, 0.5, 0.2));
+            that.initialTarget = camera.getTarget();
+            // camera.lowerBetaLimit = Math.PI / 2.6; 
+            camera.upperBetaLimit = Math.PI / 2.3; //无法移动到地面以下
+            camera.attachControl(canvas, true);
+            camera.maxZ = 1000; // 调整适当的值
+            // 相机限制
+            camera.lowerRadiusLimit = 3;
+            camera.upperRadiusLimit = 3;
+            // 灯光
+            const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));
+            light.intensity =0.1;
+            // 全屏GUI
+            const advancedTexture = BABYLON_GUI.AdvancedDynamicTexture.CreateFullscreenUI("myUI");
+            that.myui = advancedTexture;
+            // 创建一个高亮层
+            const highlightLayer = new BABYLON.HighlightLayer('highlightLayer', scene);
+            // 主控制区
+            var control_main = new BABYLON_GUI.StackPanel();
+            control_main.isVertical = false
+            control_main.top = '-40%';
+            control_main.left = '-20%';
+            advancedTexture.addControl(control_main);
+        
+            var button_main = BABYLON_GUI.Button.CreateSimpleButton("button_main", "主视角");
+            button_main.width = "80px"
+            button_main.height = "30px";
+            button_main.color = "white";
+            button_main.cornerRadius = 20;
+            button_main.background = "green";
+            control_main.addControl(button_main)
+            button_main.onPointerClickObservable.add(() => {
+            if (camera.alpha != that.initialAlpha || camera.beta != that.initialBeta || camera.radius != that.initialRadius) {
+                var cameraPosition = new BABYLON.Vector3(
+                0 + that.initialRadius * Math.sin(that.initialBeta) * Math.cos(that.initialAlpha),
+                0 + that.initialRadius * Math.cos(that.initialBeta),
+                0 + that.initialRadius * Math.sin(that.initialBeta) * Math.sin(that.initialAlpha)
+                );
+                var ease = new BABYLON.CubicEase();
+                ease.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT);
+                BABYLON.Animation.CreateAndStartAnimation('at6', camera, 'position', 45, 200, camera.position, cameraPosition, 0, ease);
+                BABYLON.Animation.CreateAndStartAnimation('at61', camera, 'target', 45, 200, camera.target, that.initialTarget, 0, ease);
+            }
+            })
+            
+            // 高亮显示mesh名
+            const mesh_rect = new BABYLON_GUI.Rectangle('mesh_rect');
+            mesh_rect.width = "200px";
+            mesh_rect.height = "45px";
+            mesh_rect.background = 'rgb(75,240,234)';
+            mesh_rect.alpha = 0.6;
+            mesh_rect.isVisible = false;
+            advancedTexture.addControl(mesh_rect);
+
+            var mesh_name = new BABYLON_GUI.TextBlock('mesh_name');
+            mesh_name.text = "";
+            mesh_name.color = 'white';
+            mesh_name.fontSize = '14px';
+            mesh_rect.addControl(mesh_name);
+            var remoteGlbUrl = process.env.VUE_APP_BASEURL + "/media/model/photon3.glb";
+            BABYLON.SceneLoader.Append(remoteGlbUrl, "", scene, function (scene) {
+                //关闭灯光
+                // scene.lights[1].setEnabled(false); 
+                // setEnable
+                engine.hideLoadingUI()
+                // for (let key in that.nodesLists) {
+                //     // const value = that.nodesLists[key];
+                //     const mesh = scene.getMeshByName(key);
+                //     if (mesh) {
+                //         console.log('000000000000');
+                //         console.log(mesh);
+                        
+                //         mesh.actionManager.registerAction(
+                //             // new BABYLON.ExecuteCodeAction(trigger, func, condition)
+                //         )
+                //         mesh.onPointerDownObservable.add(() => {
+                //             console.log('111111111111');
+                //             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(
+                //                 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);
+                //             }
+                //         })
+                //     }
+                // }
+            }, 
+            //进度条
+            function (evt) {
+                var loadedPercent = 0;
+                if (evt.lengthComputable) {
+                    loadedPercent = parseInt(evt.loaded * 100 / evt.total);
+                } else {
+                    var dlCount = evt.loaded / (1024 * 1024);
+                    loadedPercent = Math.floor(dlCount * 100.0) / 100.0;
+                }
+                that.loadedPercent = loadedPercent;
+            })
+
+            // 自动旋转checkbox
+            var checkbox = new BABYLON_GUI.Checkbox();
+            checkbox.width = "20px";
+            checkbox.height = "20px";
+            checkbox.isChecked = false;
+            checkbox.marginLeft = '16px'
+            checkbox.color = "green";
+            checkbox.onIsCheckedChangedObservable.add(function (value) {
+            if (value) {
+                camera.useAutoRotationBehavior = true;
+            } else {
+                camera.useAutoRotationBehavior = false;
+            }
+            });
+            control_main.addControl(checkbox);
+            var header = new BABYLON_GUI.TextBlock();
+            header.text = "自动旋转";
+            header.width = "80px";
+            header.textHorizontalAlignment = BABYLON_GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
+            header.color = "white";
+            control_main.addControl(header);
+            // 添加抓取事件
+            const hl1 = new BABYLON.HighlightLayer("hl1", scene);
+            canvas.addEventListener('mousemove', (event) => {
+                // 使用 scene.pick 检测鼠标拾取
+                const pickResult = scene.pick(scene.pointerX, scene.pointerY);
+                if (that.currentLightMesh) {
+                    that.infoVisibel = false;
+                    mesh_rect.isVisible = false;
+                    hl1.removeAllMeshes();
+                    highlightLayer.removeAllMeshes();
+                }
+                if (pickResult.hit) {
+                    // console.log('pickResult',pickResult);
+                    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();
+                    // if(/.*[\u4e00-\u9fa5]+.*$/.test(mesh.name)&&mesh.name!=='地面1'&&mesh.name!=='绿地'&&mesh.name!=='停车场') {
+                    //     // 在选中的 mesh 上添加高亮效果
+                    //     highlightLayer.addMesh(mesh, new BABYLON.Color3(1, 1, 0.5));
+                    //     that.currentLightMesh = mesh;
+                    //     mesh_rect.linkWithMesh(mesh);
+                    //     let name = mesh.name.split('_')[0];
+                    //     mesh_name.text = name;
+                    //     mesh_rect.isVisible = true;
+                    //     that.infoVisibel = true;
+                    // }
+                    if(mesh.name=='单身宿舍.005_primitive3') {
+                        //单身宿舍.003_primitive3
+                        // 在选中的 mesh 上添加高亮效果
+                        highlightLayer.addMesh(mesh, new BABYLON.Color3(1, 1, 0.5));
+                        that.currentLightMesh = mesh;
+                        mesh_rect.linkWithMesh(mesh);
+                        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;
+                        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(mesh.absolutePosition,camera,scene,engine);
+                        let infoBlock = document.getElementById('inforBlock');
+                        infoBlock.style.left = (Math.floor(pos.x)+250)+'px';
+                        infoBlock.style.top = (Math.floor(pos.y)-250)+'px';
+                    }
+                }else{
+                    that.infoVisibel = false;
+                }
+            });
+            canvas.addEventListener('mousedown', (event) => {
+                debugger;
+                // 使用 scene.pick 检测鼠标拾取
+                const pickResult = scene.pick(scene.pointerX, scene.pointerY);
+                if (pickResult.hit) {
+                    console.log('000000000000');
+                    console.log('pickResult',pickResult);
+                    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);
+                    }
+                }
+            });
+            
+            // checkbox.isChecked = true; //默认开启自动旋转
+            return scene;
+        };
+        
+        const scene = createScene(); //Call the createScene function
+        scene.debugLayer.show()
+        engine.runRenderLoop(function () {
+            scene.render();
+            scene.onPointerObservable.add((pointerInfo) => {
+            switch (pointerInfo.type) {
+                case BABYLON.PointerEventTypes.POINTERDOWN:
+                    console.log(scene.pointerX, scene.pointerY);
+                    const pickResult = scene.pick(scene.pointerX, scene.pointerY);
+                    if (pickResult.hit) {
+                    console.log('000000000000');
+                    console.log('pickResult',pickResult);
+                    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);
+                    }
+                }
+            }
+        })
+        });
+        this.engine = engine;
+        this.scene = scene;
+        window.addEventListener("resize", function () {
+            engine.resize();
+        });
+        },
+        initChart(){
             //左1
             let chartDom = document.getElementById('line1');
-        chartDom.style.height = height0+'px';
+            chartDom.style.height = this.blockHeight;
             let myChart = echarts.init(chartDom);
             let option = {
                 tooltip: {
@@ -235,7 +641,7 @@ export default {
             myChart.setOption(option);
             //左边2
             let bar1 = document.getElementById('bar1');
-        bar1.style.height = height0+'px';
+            bar1.style.height = this.blockHeight;
             let bar1Chart = echarts.init(bar1);
             let bar1option = {
                 tooltip: {
@@ -372,7 +778,7 @@ export default {
             bar1Chart.setOption(bar1option);
             //左3
             let line2Dom = document.getElementById('line2');
-        line2Dom.style.height = height0+'px';
+            line2Dom.style.height = this.blockHeight;
             let line2Chart = echarts.init(line2Dom);
             let line2option =  {
             tooltip: {
@@ -484,7 +890,7 @@ export default {
             line2Chart.setOption(line2option);
             //柱状图折线
             let line3Dom = document.getElementById('line3');
-        line3Dom.style.height = height0+'px';
+            line3Dom.style.height = this.blockHeight;
             let line3Chart = echarts.init(line3Dom);
             let line3option =  {
                 tooltip: {
@@ -620,7 +1026,7 @@ export default {
             line3Chart.setOption(line3option);
             //饼状图
             let pieDom = document.getElementById('pie');
-        pieDom.style.height = height0+'px';
+            pieDom.style.height = this.blockHeight;
             let pieChart = echarts.init(pieDom);
             let pieoption =   {
                 color:['rgb(155,248,249)','rgb(248,189,118)','rgb(110,181,249)'],
@@ -665,7 +1071,7 @@ export default {
             };
             pieChart.setOption(pieoption);
         },
-    methods:{},
+    },
 }
 </script>
 <style>
@@ -737,4 +1143,121 @@ export default {
     background:rgb(10,63,68)!important;
     background-color:#0a3f44!important;
 }
+
+.model {
+  top: 0;
+  width: 100%;
+  height:100%;
+}
+#renderCanvas {
+  width: 100%;
+  height: 100%
+}
+
+#loadingScreen {
+  position: absolute;
+  width: 100%;
+  top: 260px;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  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:80px;
+            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;
+}
+.numberUnit{
+    font-size:12px;
+}
+#dashbordProcess .el-progress-circle{
+    height: 60px!important;
+    width: 60px!important;
+}
+.el-progress--circle .el-progress__text {
+    display: block;
+    margin-top: 1px;
+    color:#fff;
+    font-size: 20px!important;
+    font-weight: bold!important;
+    }
 </style>