From 155a4c7b7e004b9cf7f1fa899ecb96c051107a89 Mon Sep 17 00:00:00 2001
From: shijing <sj_mzw@163.com>
Date: Fri, 10 Nov 2023 08:29:49 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=85=89=E5=AD=90=E5=A4=A7=E5=B1=8F?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/bigScreen/textIndex.vue | 1591 +++++++++++++++++++----------
 1 file changed, 1057 insertions(+), 534 deletions(-)

diff --git a/src/views/bigScreen/textIndex.vue b/src/views/bigScreen/textIndex.vue
index 1adaff9f..8271892a 100644
--- a/src/views/bigScreen/textIndex.vue
+++ b/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>
-            <el-col :span="6">
+            <!-- <div style="position: absolute;right: 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="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,215 +149,662 @@ export default {
         let height = document.getElementById('mainBlock').clientHeight;
         let height0 = height/3-50;
         this.blockHeight = height0+'px'
-        //左1
-        let chartDom = document.getElementById('line1');
-        chartDom.style.height = height0+'px';
-        let myChart = echarts.init(chartDom);
-        let option = {
-            tooltip: {
-                trigger: 'axis',
-                axisPointer: {
-                type: 'cross',
-                label: {
-                    backgroundColor: '#6a7985'
+        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();
                 }
-            },
-            legend: {
-                icon: "stack",
-                right:0,
-                data: [{
-                    backgroundColor:'rgb(1,235,239)',
-                    name:'Line 1',
-                    itemStyle:{
-                        // color:'rgb(1,235,239)',
+                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 = this.blockHeight;
+            let myChart = echarts.init(chartDom);
+            let option = {
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                    type: 'cross',
+                    label: {
+                        backgroundColor: '#6a7985'
+                    }
+                    }
+                },
+                legend: {
+                    icon: "stack",
+                    right:0,
+                    data: [{
+                        backgroundColor:'rgb(1,235,239)',
+                        name:'Line 1',
+                        itemStyle:{
+                            // color:'rgb(1,235,239)',
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                            {
+                                offset: 0,
+                                color: 'rgb(1,235,239)'
+                            },
+                            {
+                                offset: 1,
+                                color: 'rgb(5, 158, 163)'
+                            }])
+                        },
+                        textStyle:{
+                            color:'#fff'
+                        }
+                    }, {
+                        name:'Line 2',
+                        textStyle:{
+                            color:'#fff'
+                        }}],
+                        itemStyle:{
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                            offset: 0,
+                            color: 'rgb(250,205,0)'
+                        },
+                        {
+                            offset: 1,
+                            color: 'rgb(254,129,0)'
+                        }
+                        ])
+                    }
+                },
+                toolbox: {
+                    feature: {
+                    // saveAsImage: {}
+                    }
+                },
+                grid: {
+                    left: '5%',
+                    right: '5%',
+                    bottom: '3%',
+                    containLabel: true
+                },
+                xAxis: [
+                    {
+                    type: 'category',
+                    boundaryGap: false,
+                    data: ['2日', '3日', '四日', '5日', '6日', '7日', '8日'],
+                    nameTextStyle: {
+                            color:'#ffffff'
+                        },
+                        axisLabel: {  
+                            color:'#ffffff'
+                        },  
+                    }
+                ],
+                yAxis: [
+                    {
+                        name: "合格率(%)",
+                        type: 'value',
+                        nameTextStyle: {
+                            color:'#ffffff'
+                        },
+                        axisLabel: {  
+                            color:'#ffffff'
+                        }, 
+                        splitLine: {
+                            show: false,
+                        },
+                        splitLine: {
+                            show: true,
+                            lineStyle: {
+                                type: 'dashed', //y轴分割线类型
+                                color: 'rgba(102,102,102,0.9)',
+                                width: 1,
+                            },
+                        }, 
+                    }
+                ],
+                series: [
+                    {
+                    name: 'Line 1',
+                    type: 'line',
+                    stack: 'Total',
+                    smooth: true,
+                    lineStyle: {
+                        width: 1,color:'rgb(1,235,239)'
+                    },
+                    
+                    showSymbol: false,
+                    areaStyle: {
+                        opacity: 0.8,
                         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                         {
                             offset: 0,
-                            color: 'rgb(1,235,239)'
+                            color: 'rgba(1,235,239)'
                         },
                         {
                             offset: 1,
                             color: 'rgb(5, 158, 163)'
-                        }])
+                        }
+                        ])
                     },
-                    textStyle:{
-                        color:'#fff'
-                    }
-                }, {
-                    name:'Line 2',
-                    textStyle:{
-                        color:'#fff'
-                    }}],
-                    itemStyle:{
+                    emphasis: {
+                        focus: 'series'
+                    },
+                    data: [140, 232, 101, 264, 90, 340, 250]
+                    },
+                    {
+                    name: 'Line 2',
+                    type: 'line',
+                    stack: 'Total',
+                    smooth: true,
+                    lineStyle: {
+                        width: 1,color:'rgb(250,205,0)'
+                    },
+                    showSymbol: false,
+                    areaStyle: {
+                        opacity: 0.8,
                         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                    {
-                        offset: 0,
-                        color: 'rgb(250,205,0)'
+                        {
+                            offset: 0,
+                            color: 'rgb(254,129,0)'
+                        },
+                        {
+                            offset: 1,
+                            color: 'rgb(250,205,0)'
+                        }
+                        ])
                     },
-                    {
-                        offset: 1,
-                        color: 'rgb(254,129,0)'
+                    emphasis: {
+                        focus: 'series'
+                    },
+                    data: [120, 282, 111, 234, 220, 340, 310]
+                    },
+                ]
+            };
+            myChart.setOption(option);
+            //左边2
+            let bar1 = document.getElementById('bar1');
+            bar1.style.height = this.blockHeight;
+            let bar1Chart = echarts.init(bar1);
+            let bar1option = {
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                    type: 'shadow'
                     }
-                    ])
-                }
-            },
-            toolbox: {
-                feature: {
-                // saveAsImage: {}
-                }
-            },
-            grid: {
-                left: '5%',
-                right: '5%',
-                bottom: '3%',
-                containLabel: true
-            },
-            xAxis: [
-                {
-                type: 'category',
-                boundaryGap: false,
-                data: ['2日', '3日', '四日', '5日', '6日', '7日', '8日'],
-                nameTextStyle: {
-                        color:'#ffffff'
-                    },
-                    axisLabel: {  
-                        color:'#ffffff'
-                    },  
-                }
-            ],
-            yAxis: [
-                {
-                    name: "合格率(%)",
+                },
+                legend: {
+                    right:0,
+                    data:[
+                    {
+                        name:'棒',
+                        textStyle:{
+                            color:'#fff'
+                        },
+                        itemStyle:{
+                            // color:'rgb(1,235,239)',
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                            {
+                                offset: 0,
+                                color: 'rgb(1,235,239)'
+                            },
+                            {
+                                offset: 1,
+                                color: 'rgb(5, 158, 163)'
+                            }])
+                        },
+                    }, {
+                        name:'管',
+                        textStyle:{
+                            color:'#fff'
+                        },
+                        itemStyle:{
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                            offset: 0,
+                            color: 'rgb(250,205,0)'
+                        },
+                        {
+                            offset: 1,
+                            color: 'rgb(254,129,0)'
+                        }
+                        ])
+                        }
+                    }
+                    ]
+                },
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '3%',
+                    containLabel: true
+                },
+                xAxis: [
+                    {
+                    type: 'category',
+                    data: ['1月', '2月', '3月', '4月', '5月', '6月'],
+                    nameTextStyle: {
+                            color:'#ffffff'
+                        },
+                        axisLabel: {  
+                            color:'#ffffff'
+                        },  
+                    }
+                ],
+                yAxis: [
+                    {
+                        name: "数量(个)",
                     type: 'value',
                     nameTextStyle: {
                         color:'#ffffff'
                     },
                     axisLabel: {  
                         color:'#ffffff'
-                    }, 
+                    },  
                     splitLine: {
-                        show: false,
+                            show: true,
+                            lineStyle: {
+                                type: 'dashed', //y轴分割线类型
+                                color: 'rgba(102,102,102,0.9)',
+                                width: 1,
+                            },
+                        }, 
+                    }
+                ],
+                series: [
+                    {
+                    name: '棒',
+                    type: 'bar',
+                    stack: 'Ad',
+                    emphasis: {
+                        focus: 'series'
                     },
-                    splitLine: {
-                        show: true,
-                        lineStyle: {
-                            type: 'dashed', //y轴分割线类型
-                            color: 'rgba(102,102,102,0.9)',
-                            width: 1,
+                    itemStyle:{
+                            // color:'rgb(1,235,239)',
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                            {
+                                offset: 0,
+                                color: 'rgb(1,235,239)'
+                            },
+                            {
+                                offset: 1,
+                                color: 'rgb(5, 158, 163)'
+                            }])
                         },
-                    }, 
-                }
-            ],
-            series: [
-                {
-                name: 'Line 1',
-                type: 'line',
-                stack: 'Total',
-                smooth: true,
-                lineStyle: {
-                    width: 1,color:'rgb(1,235,239)'
-                },
-                
-                showSymbol: false,
-                areaStyle: {
-                    opacity: 0.8,
-                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                    {
-                        offset: 0,
-                        color: 'rgba(1,235,239)'
+                    barWidth:15,
+                    data: [120, 132, 101, 134, 90, 230]
                     },
                     {
-                        offset: 1,
-                        color: 'rgb(5, 158, 163)'
-                    }
-                    ])
-                },
-                emphasis: {
-                    focus: 'series'
-                },
-                data: [140, 232, 101, 264, 90, 340, 250]
-                },
-                {
-                name: 'Line 2',
-                type: 'line',
-                stack: 'Total',
-                smooth: true,
-                lineStyle: {
-                    width: 1,color:'rgb(250,205,0)'
-                },
-                showSymbol: false,
-                areaStyle: {
-                    opacity: 0.8,
-                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                    {
-                        offset: 0,
-                        color: 'rgb(254,129,0)'
+                    name: '管',
+                    type: 'bar',
+                    stack: 'Ad',
+                    barWidth:20,
+                    emphasis: {
+                        focus: 'series'
                     },
-                    {
-                        offset: 1,
-                        color: 'rgb(250,205,0)'
+                    itemStyle:{
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                            offset: 0,
+                            color: 'rgb(250,205,0)'
+                        },
+                        {
+                            offset: 1,
+                            color: 'rgb(254,129,0)'
+                        }
+                        ])
+                        },
+                    data: [220, 182, 191, 234, 290, 330]
                     }
-                    ])
-                },
-                emphasis: {
-                    focus: 'series'
-                },
-                data: [120, 282, 111, 234, 220, 340, 310]
-                },
-            ]
-        };
-        myChart.setOption(option);
-        //左边2
-        let bar1 = document.getElementById('bar1');
-        bar1.style.height = height0+'px';
-        let bar1Chart = echarts.init(bar1);
-        let bar1option = {
+                ]
+            };
+            bar1Chart.setOption(bar1option);
+            //左3
+            let line2Dom = document.getElementById('line2');
+            line2Dom.style.height = this.blockHeight;
+            let line2Chart = echarts.init(line2Dom);
+            let line2option =  {
             tooltip: {
-                trigger: 'axis',
-                axisPointer: {
-                type: 'shadow'
-                }
+                trigger: 'axis'
             },
             legend: {
                 right:0,
-                data:[
-                {
-                    name:'棒',
+            
+                data: [{
+                    name:'温度',
                     textStyle:{
-                        color:'#fff'
-                    },
+                            color:'#fff'
+                        },
                     itemStyle:{
                         // color:'rgb(1,235,239)',
                         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                         {
                             offset: 0,
-                            color: 'rgb(1,235,239)'
+                            color: 'orange'
                         },
                         {
                             offset: 1,
-                            color: 'rgb(5, 158, 163)'
+                            color: 'yellow'
                         }])
                     },
-                }, {
-                    name:'管',
-                    textStyle:{
-                        color:'#fff'
-                    },
-                    itemStyle:{
-                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                    {
-                        offset: 0,
-                        color: 'rgb(250,205,0)'
-                    },
-                    {
-                        offset: 1,
-                        color: 'rgb(254,129,0)'
-                    }
-                    ])
-                    }
-                }
-                ]
+                }],
             },
             grid: {
                 left: '3%',
@@ -290,21 +812,25 @@ export default {
                 bottom: '3%',
                 containLabel: true
             },
-            xAxis: [
-                {
-                type: 'category',
-                data: ['1月', '2月', '3月', '4月', '5月', '6月'],
-                nameTextStyle: {
-                        color:'#ffffff'
-                    },
-                    axisLabel: {  
-                        color:'#ffffff'
-                    },  
+            toolbox: {
+                feature: {
+                // saveAsImage: {}
                 }
-            ],
-            yAxis: [
-                {
-                    name: "数量(个)",
+            },
+            xAxis: {
+                type: 'category',
+                boundaryGap: false,
+                data: ['1', '2', '3', '4', '5', '6','7','8','9','10'],
+                nameTextStyle: {
+                    color:'#ffffff'
+                },
+                axisLabel: {  
+                    color:'#ffffff'
+                }, 
+                
+            },
+            yAxis: {
+                name:'温度',
                 type: 'value',
                 nameTextStyle: {
                     color:'#ffffff'
@@ -313,359 +839,239 @@ export default {
                     color:'#ffffff'
                 },  
                 splitLine: {
-                        show: true,
-                        lineStyle: {
-                            type: 'dashed', //y轴分割线类型
-                            color: 'rgba(102,102,102,0.9)',
-                            width: 1,
+                            show: true,
+                            lineStyle: {
+                                type: 'dashed', //y轴分割线类型
+                                color: 'rgba(102,102,102,0.9)',
+                                width: 1,
+                            },
                         },
-                    }, 
-                }
-            ],
-            series: [
-                {
-                name: '棒',
-                type: 'bar',
-                stack: 'Ad',
-                emphasis: {
-                    focus: 'series'
-                },
-                itemStyle:{
-                        // color:'rgb(1,235,239)',
-                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                        {
-                            offset: 0,
-                            color: 'rgb(1,235,239)'
-                        },
-                        {
-                            offset: 1,
-                            color: 'rgb(5, 158, 163)'
-                        }])
-                    },
-                barWidth:15,
-                data: [120, 132, 101, 134, 90, 230]
-                },
-                {
-                name: '管',
-                type: 'bar',
-                stack: 'Ad',
-                barWidth:20,
-                emphasis: {
-                    focus: 'series'
-                },
-                itemStyle:{
-                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                    {
-                        offset: 0,
-                        color: 'rgb(250,205,0)'
-                    },
-                    {
-                        offset: 1,
-                        color: 'rgb(254,129,0)'
-                    }
-                    ])
-                    },
-                data: [220, 182, 191, 234, 290, 330]
-                }
-            ]
-        };
-        bar1Chart.setOption(bar1option);
-        //左3
-        let line2Dom = document.getElementById('line2');
-        line2Dom.style.height = height0+'px';
-        let line2Chart = echarts.init(line2Dom);
-        let line2option =  {
-        tooltip: {
-            trigger: 'axis'
-        },
-        legend: {
-            right:0,
-        
-            data: [{
-                name:'温度',
-                textStyle:{
-                        color:'#fff'
-                    },
-                itemStyle:{
-                    // color:'rgb(1,235,239)',
-                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                    {
-                        offset: 0,
-                        color: 'orange'
-                    },
-                    {
-                        offset: 1,
-                        color: 'yellow'
-                    }])
-                },
-            }],
-        },
-        grid: {
-            left: '3%',
-            right: '4%',
-            bottom: '3%',
-            containLabel: true
-        },
-        toolbox: {
-            feature: {
-            // saveAsImage: {}
-            }
-        },
-        xAxis: {
-            type: 'category',
-            boundaryGap: false,
-            data: ['1', '2', '3', '4', '5', '6','7','8','9','10'],
-            nameTextStyle: {
-                color:'#ffffff'
             },
-            axisLabel: {  
-                color:'#ffffff'
-            }, 
-             
-        },
-        yAxis: {
-            name:'温度',
-            type: 'value',
-            nameTextStyle: {
-                color:'#ffffff'
-            },
-            axisLabel: {  
-                color:'#ffffff'
-            },  
-            splitLine: {
-                        show: true,
-                        lineStyle: {
-                            type: 'dashed', //y轴分割线类型
-                            color: 'rgba(102,102,102,0.9)',
-                            width: 1,
-                        },
-                    },
-        },
-        
-        series: {
-            name: '温度',
-            type: 'line',
-            stack: 'Total',
-            symbolSize:8,  //设置折线上圆点大小
-            symbol:'circle', 
-            itemStyle: {
-            // 设置symbol的颜色
-            normal: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                    {
-                        offset: 0,
-                        color: 'orange'
-                    },
-                    {
-                        offset: 1,
-                        color: 'yellow'
-                    }])
-            }
-            },
-            smooth: 0.5, // 设置折线弧度
-            data: [10, 10, 0, 0, -10, -8, 0,10, 10, 0, 0, -10, -8, 0],
-            lineStyle: {
-                color: {
-                    type: 'linear',
-                    x: 0,
-                    y: 0,
-                    x2: 1,
-                    y2: 0,
-                    colorStops: [{
-                        offset: 0, color: 'orange' // 0% 处的颜色
-                    }, {
-                        offset: 1, color: 'yellow' // 100% 处的颜色
-                    }],
-                    globalCoord: false // 缺省为 false
-                }
-            },
-            }
-        };
-        line2Chart.setOption(line2option);
-        //柱状图折线
-        let line3Dom = document.getElementById('line3');
-        line3Dom.style.height = height0+'px';
-        let line3Chart = echarts.init(line3Dom);
-        let line3option =  {
-            tooltip: {
-                trigger: 'axis',
-                axisPointer: {
-                type: 'cross',
-                crossStyle: {
-                    color: '#999'
-                }
-                }
-            },
-            grid: {
-                left: '3%',
-                right: '4%',
-                bottom: '3%',
-                containLabel: true
-            },
-            legend: {
-                right:0,
-                data: ['数量', '合格率'],
-                textStyle:{
-                        color:'#fff'
-                    }
-            },
-            xAxis: [
-                {
-                type: 'category',
-                data: ['1', '2', '3', '4', '5', '6'],
-                axisPointer: {
-                    type: 'shadow'
-                },
-                nameTextStyle: {
-                        color:'#ffffff'
-                    },
-                    axisLabel: {  
-                        color:'#ffffff'
-                    },  
-                }
-            ],
-            yAxis: [
-                {
-                type: 'value',
-                name: '数量',
-                min: 0,
-                interval: 50,
-                nameTextStyle: {
-                        color:'#ffffff'
-                    },
-                    axisLabel: {  
-                        color:'#ffffff'
-                    }, 
-                    splitLine: {
-                        show: true,
-                        lineStyle: {
-                            type: 'dashed', //y轴分割线类型
-                            color: 'rgba(102,102,102,0.9)',
-                            width: 1,
-                        },
-                    }, 
-                },
-                {
-                type: 'value',
-                name: '合格率',
-                min: 0,
-                max: 100,
-                interval: 20,
-                axisLabel: {
-                    formatter: '{value} %',
-                    color:'#ffffff'
-                },
-                nameTextStyle: {
-                        color:'#ffffff'
-                    },
-                    splitLine: {
-                        show: true,
-                        lineStyle: {
-                            type: 'dashed', //y轴分割线类型
-                            color: 'rgba(102,102,102,0.9)',
-                            width: 1,
-                        },
-                    },
-                }
-            ],
-            series: [
-                {
-                name: '数量',
-                type: 'bar',
-                tooltip: {
-                    valueFormatter: function (value) {
-                    return value;
-                    }
-                },
-                barWidth:15,
-                data: [120, 132, 101, 134, 90, 230],
-                itemStyle:{
-                    borderRadius: [5, 5, 0, 0],
-                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                        {
-                            offset: 0,
-                            color: 'rgb(13,176,176)'
-                        },
-                        {
-                            offset: 1,
-                            color: 'rgb(246,163,58)'
-                        }])
-                    },
-                },
-                {
-                name: '合格率',
+            
+            series: {
+                name: '温度',
                 type: 'line',
-                yAxisIndex: 1,
-                // 255,120,0
+                stack: 'Total',
+                symbolSize:8,  //设置折线上圆点大小
+                symbol:'circle', 
+                itemStyle: {
+                // 设置symbol的颜色
+                normal: {
+                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                            offset: 0,
+                            color: 'orange'
+                        },
+                        {
+                            offset: 1,
+                            color: 'yellow'
+                        }])
+                }
+                },
+                smooth: 0.5, // 设置折线弧度
+                data: [10, 10, 0, 0, -10, -8, 0,10, 10, 0, 0, -10, -8, 0],
+                lineStyle: {
+                    color: {
+                        type: 'linear',
+                        x: 0,
+                        y: 0,
+                        x2: 1,
+                        y2: 0,
+                        colorStops: [{
+                            offset: 0, color: 'orange' // 0% 处的颜色
+                        }, {
+                            offset: 1, color: 'yellow' // 100% 处的颜色
+                        }],
+                        globalCoord: false // 缺省为 false
+                    }
+                },
+                }
+            };
+            line2Chart.setOption(line2option);
+            //柱状图折线
+            let line3Dom = document.getElementById('line3');
+            line3Dom.style.height = this.blockHeight;
+            let line3Chart = echarts.init(line3Dom);
+            let line3option =  {
                 tooltip: {
-                    valueFormatter: function (value) {
-                    return value ;
+                    trigger: 'axis',
+                    axisPointer: {
+                    type: 'cross',
+                    crossStyle: {
+                        color: '#999'
+                    }
                     }
                 },
-                symbol:'circle',
-                symbolSize:8, 
-                itemStyle: {
-                    // 设置symbol的颜色
-                    normal: {
-                     color:'rgb(255,120,0)'
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '3%',
+                    containLabel: true
+                },
+                legend: {
+                    right:0,
+                    data: ['数量', '合格率'],
+                    textStyle:{
+                            color:'#fff'
+                        }
+                },
+                xAxis: [
+                    {
+                    type: 'category',
+                    data: ['1', '2', '3', '4', '5', '6'],
+                    axisPointer: {
+                        type: 'shadow'
+                    },
+                    nameTextStyle: {
+                            color:'#ffffff'
+                        },
+                        axisLabel: {  
+                            color:'#ffffff'
+                        },  
                     }
-                },
-                lineStyle:{
-                    color:'rgb(255,120,0)'
-                },
-                data:[50, 55, 40, 60, 38, 95]
-                }
-            ]
-        };
-        line3Chart.setOption(line3option);
-        //饼状图
-        let pieDom = document.getElementById('pie');
-        pieDom.style.height = height0+'px';
-        let pieChart = echarts.init(pieDom);
-        let pieoption =   {
-            color:['rgb(155,248,249)','rgb(248,189,118)','rgb(110,181,249)'],
-            legend: {
-                top: 'bottom',
-                textStyle:{
-                        color:'#fff'
+                ],
+                yAxis: [
+                    {
+                    type: 'value',
+                    name: '数量',
+                    min: 0,
+                    interval: 50,
+                    nameTextStyle: {
+                            color:'#ffffff'
+                        },
+                        axisLabel: {  
+                            color:'#ffffff'
+                        }, 
+                        splitLine: {
+                            show: true,
+                            lineStyle: {
+                                type: 'dashed', //y轴分割线类型
+                                color: 'rgba(102,102,102,0.9)',
+                                width: 1,
+                            },
+                        }, 
+                    },
+                    {
+                    type: 'value',
+                    name: '合格率',
+                    min: 0,
+                    max: 100,
+                    interval: 20,
+                    axisLabel: {
+                        formatter: '{value} %',
+                        color:'#ffffff'
+                    },
+                    nameTextStyle: {
+                            color:'#ffffff'
+                        },
+                        splitLine: {
+                            show: true,
+                            lineStyle: {
+                                type: 'dashed', //y轴分割线类型
+                                color: 'rgba(102,102,102,0.9)',
+                                width: 1,
+                            },
+                        },
+                    }
+                ],
+                series: [
+                    {
+                    name: '数量',
+                    type: 'bar',
+                    tooltip: {
+                        valueFormatter: function (value) {
+                        return value;
+                        }
+                    },
+                    barWidth:15,
+                    data: [120, 132, 101, 134, 90, 230],
+                    itemStyle:{
+                        borderRadius: [5, 5, 0, 0],
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                            {
+                                offset: 0,
+                                color: 'rgb(13,176,176)'
+                            },
+                            {
+                                offset: 1,
+                                color: 'rgb(246,163,58)'
+                            }])
+                        },
+                    },
+                    {
+                    name: '合格率',
+                    type: 'line',
+                    yAxisIndex: 1,
+                    // 255,120,0
+                    tooltip: {
+                        valueFormatter: function (value) {
+                        return value ;
+                        }
+                    },
+                    symbol:'circle',
+                    symbolSize:8, 
+                    itemStyle: {
+                        // 设置symbol的颜色
+                        normal: {
+                        color:'rgb(255,120,0)'
+                        }
+                    },
+                    lineStyle:{
+                        color:'rgb(255,120,0)'
+                    },
+                    data:[50, 55, 40, 60, 38, 95]
                     }
-            },
-            grid: {
-                left: '3%',
-                right: '4%',
-                bottom: '3%',
-                containLabel: true
-            },
-            toolbox: {
-                show: true,
-                // feature: {
-                // mark: { show: true },
-                // dataView: { show: true, readOnly: false },
-                // restore: { show: true },
-                // saveAsImage: { show: true }
-                // }
-            },
-            series: [
-                {
-                name: '完成率',
-                type: 'pie',
-                radius: [20, 60],
-                center: ['50%', '50%'],
-                roseType: 'area',
-                itemStyle: {
-                    borderRadius:2
-                },
-                data: [
-                    { value: 40, name: '棒' },
-                    { value: 20, name: '管' },
-                    { value: 10, name: 'AVG' },
                 ]
-                }
-            ]
-        };
-        pieChart.setOption(pieoption);
+            };
+            line3Chart.setOption(line3option);
+            //饼状图
+            let pieDom = document.getElementById('pie');
+            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)'],
+                legend: {
+                    top: 'bottom',
+                    textStyle:{
+                            color:'#fff'
+                        }
+                },
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '3%',
+                    containLabel: true
+                },
+                toolbox: {
+                    show: true,
+                    // feature: {
+                    // mark: { show: true },
+                    // dataView: { show: true, readOnly: false },
+                    // restore: { show: true },
+                    // saveAsImage: { show: true }
+                    // }
+                },
+                series: [
+                    {
+                    name: '完成率',
+                    type: 'pie',
+                    radius: [20, 60],
+                    center: ['50%', '50%'],
+                    roseType: 'area',
+                    itemStyle: {
+                        borderRadius:2
+                    },
+                    data: [
+                        { value: 40, name: '棒' },
+                        { value: 20, name: '管' },
+                        { value: 10, name: 'AVG' },
+                    ]
+                    }
+                ]
+            };
+            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>
\ No newline at end of file