<template>
    <el-container class="container">
        <el-header class="pageHeader">
            <span class="top-line top-line-left"></span>
            光子科技生产管理系统
            <span class="top-line top-line-right"></span>
        </el-header>
        <el-main style="padding:0;overflow: hidden;" id="mainBlock">
            <el-row style="height:100%">
                <div style="position: absolute;left: 0;width:20%;z-index:10">
                    <div style="display:flex;flex-direction: column;height:100%;padding:0 10px">
                        <div class="flexItem" style="flex:1">
                            <div class="blockTitle">
                                <div class="blockTitleIcon"></div>
                                <div>本周交付数</div>
                            </div>
                            <div id="line1"
                                style="width:100%;height:92%;background:rgba(9,31,43,.5);border-radius: 20px;margin-top: 5px;">
                            </div>
                        </div>
                        <div class="flexItem" style="flex:1">
                            <div class="blockTitle">
                                <div class="blockTitleIcon"></div>
                                <div>本周合格数</div>
                            </div>
                            <div id="bar1"
                                style="width:100%;height:92%;background:rgba(9,31,43,.5);border-radius: 20px;margin-top: 5px;">
                            </div>
                        </div>
                        <div class="flexItem" style="flex:1">
                            <div class="blockTitle">
                                <div class="blockTitleIcon"></div>
                                <div>本周合格率</div>
                            </div>
                            <div id="line2"
                                style="width:100%;height:92%;background:rgba(9,31,43,.5);border-radius: 20px;margin-top: 5px;">
                            </div>
                        </div>
                    </div>
                </div>
                <el-col :span="24">
                    <div class="model">
                        <div style="position: absolute;width: 100%;text-align: center;">
                            <div style="margin:5px 0 50px 0;color: #fff;font-size: 12px;font-weight: bold;">
                                <img src="img/photon_top_line.png">
                                <span>枣庄</span>
                                {{ currentDay }}{{ currentWeek }}{{ currentTime }}
                                <img src="img/photon_top_line.png" style="transform: rotateY(180deg);">
                            </div>
                            <div class="totalNumContnier">
                                <div class="totalNumWrap totalNum_orange">
                                    <img class="" src="img/number_bg_orange.png">
                                    <span class="totalNumText">AVG合格数</span>
                                    <div class="totalNumber">36520</div>
                                </div>
                                <div class="totalNumWrap totalNumWrap_green">
                                    <img src="img/number_bg_green.png">
                                    <span class="totalNumText">预制棒合格数</span>
                                    <div class="totalNumber">36520</div>
                                </div>
                                <div class="totalNumWrap totalNum_blue">
                                    <img src="img/number_bg_blue.png">
                                    <span class="totalNumText">预制管合格数</span>
                                    <div class="totalNumber">36520</div>
                                </div>
                            </div>

                        </div>
                        <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>
                <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>
                            </div>
                            <div id="pie"
                                style="width:100%;height:92%;background:rgba(9,31,43,.5);border-radius: 20px;margin-top: 5px;">
                            </div>
                        </div>
                        <div class="flexItem" style="flex:1">
                            <div class="blockTitle">
                                <div class="blockTitleIcon"></div>
                                <div>本周计划完成度</div>
                            </div>
                            <div id="line3"
                                style="width:100%;height:92%;background:rgba(9,31,43,.5);border-radius: 20px;margin-top: 5px;">
                            </div>
                        </div>
                        <div class="flexItem" style="flex:1">
                            <div class="blockTitle">
                                <div class="blockTitleIcon"></div>
                                <div>库存情况</div>
                            </div>
                            <dv-scroll-board id="scrollTable" :config="taskBoard"
                                :style="{ 'width': '100%', 'height': blockTableHeight, 'margin-top': '5px' }" />
                        </div>
                    </div>
                </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">{{ dialogData.deptName }}</p>
            <div class="infoCantier">
                <div class="leftBlock">
                    <el-progress width="70" type="circle" color="rgba(54, 217, 187, 1)" :percentage="25"
                        id="dashbordProcess">
                        <template #default="{ percentage }">
                            <span class="percentage-value" style="font-size: 16px">{{ percentage }}%</span>
                        </template>
                    </el-progress>
                    <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">390</span><span class="numberUnit">件</span></p>
                        </div>
                        <div>
                            <p>预制棒</p>
                            <p> <span class="numberFont">390</span><span class="numberUnit">件</span></p>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div id="cilckInfoBlock" class="inforBlock clickBlock" v-show="clickVisible">
            <div class="border_corner border_left_top"></div>
            <div class="border_corner border_right_top"></div>
            <div class="border_corner border_left_bottom"></div>
            <div class="border_corner border_right_bottom"></div>
            <p class="title">{{ currentObj.deptName }}</p>
            <div class="infoCantier">
                <div class="leftBlock">
                    <el-progress width="100" type="circle" color="rgba(54, 217, 187, 1)" :percentage="25"
                        id="dashbordProcess">
                        <template #default="{ percentage }">
                            <span class="percentage-value">{{ percentage }}%</span>
                        </template>
                    </el-progress>
                    <p style="text-align:center">完成进度</p>
                </div>
                <div class="rightBlock">
                    <div>
                        <p>昨日产量</p>
                        <p> <span class="numberFont">390</span><span class="numberUnit">件</span></p>
                    </div>
                    <div class="countWrap">
                        <div>
                            <p>预制管</p>
                            <p> <span class="numberFont">390</span><span class="numberUnit">件</span></p>
                        </div>
                        <div>
                            <p>预制棒</p>
                            <p> <span class="numberFont">390</span><span class="numberUnit">件</span></p>
                        </div>
                    </div>
                </div>
                <CircleClose class="circleClose" @click="circleClose" />
            </div>

        </div>
    </el-container>
</template>
<script>
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 {
            blockHeight: null,
            taskBoard: {
                header: ['名称', '规格', '数量'],
                headerBGC: 'rgb(10,63,68)',
                // waitTime: 1000,
                columnWidth: [1, 1, 1],
                data: [
                    ['ZB2-1', '500*30', '<span style="color:green;">30000</span>'],
                    ['ZB2-2', '500*30', '<span style="color:green;">40000</span>'],
                    ['ZB2-3', '500*30', '<span style="color:green;">50000</span>'],
                    ['ZJ2-1', '500*30', '<span style="color:green;">35000</span>'],
                    ['ZJ2-2', '500*30', '<span style="color:green;">30000</span>'],
                    ['ZJ2-3', '500*30', '<span style="color:red;">100</span>'],
                    ['ZT2-1', '500*30', '<span style="color:red;">100</span>'],
                    ['ZT2-2', '500*30', '<span style="color:red;">100</span>'],
                    ['ZT2-3', '500*30', '<span style="color:red;">100</span>'],
                ],
                index: true,
                columnWidth: [50],
                align: ['center'],
                loadedPercent: 0,
                percentage: 0,
                percentage: 0
            },
            initialAlpha: -Math.PI / 4.5,
            initialBeta: Math.PI / 2,
            initialRadius: 2.5,
            initialTarget: null,
            scene: null,
            myui: null,
            resizeTimeout: null,
            engine: null,
            loadedPercent: 0,
            currentLightMesh: null,
            infoVisibel: false,
            clickVisible: false,
            updateTime: '2023-08-17 16:00:00',
            nodesLists: {
                '单身宿舍.004_primitive3': '办公楼',
                '立方体.024_primitive1': '成型10车间',
                '立方体.034_primitive1': '配料8车间',
                '立方体.026_primitive1': '成型7车间',
                '立方体.025_primitive1': '加工6车间',
            },
            objs: { total: '0', elec: '0' },
            currentTime: '',
            currentWeek: '',
            currentDay: '',
            timerTime: null,
            start_date: '',
            end_date: '',
            dialogData: {
                deptName: ''
            },
            currentObj: {
                deptName: ''
            },
            heightTimer: null,
        }
    },
    mounted() {
        let that = this;
        let height = document.getElementById('mainBlock').clientHeight;
        let height0 = height / 3 - 55;
        let height1 = height0 - 20;
        this.blockHeight = height0 + 'px';
        this.blockTableHeight = height1 + 'px';
        document.getElementById('scrollTable').style.height = height1 + 'px'
        this.showTime();
        this.$nextTick(() => {
            that.initChart();
            that.initDomStyle();
            that.initFactory();
            that.timerTime = setInterval(() => {
                that.showTime();
            }, 1000);
        })
        //一天的毫秒数
        const ondDayTime = 86400000
        let cDate = new Date();
        let week = cDate.getDay();//当前时间的week数
        // let time = ' 星期' + '日一二三四五六'.charAt(week);//当前时间周几
        let weekFirst = week - 1;//第一天对应的天数
        let weekLast = 7 - week;//最后一天对应的天数
        let first = new Date(new Date(cDate.getTime() - (weekFirst * ondDayTime)));//本周周一
        let last = new Date(new Date(cDate.getTime() + (weekLast * ondDayTime)));//本周周日
        this.start_date = first.getFullYear() + '-' + (first.getMonth() + 1) + '-' + first.getDate();
        this.end_date = last.getFullYear() + '-' + (last.getMonth() + 1) + '-' + last.getDate();
        this.getsaleOut();
    },
    methods: {
        getsaleOut() {
            let that = this;
            let obj = {
                query: { start_date: this.start_date, end_date: this.end_date, dept_name: "6车间" },
            };
            that.$API.bi.dataset.exec.req('3448456854219546624', obj).then((res) => {
                //   console.log(res);
                //   debugger;
            });
        },
        showTime() {
            this.currentTime = this.$TOOL.dateFormat(new Date(), 'hh:mm:ss');
            this.currentWeek = this.$TOOL.dateFormat(new Date(), 'week');
            this.currentDay = this.$TOOL.dateFormat(new Date(), 'yyyy年MM月dd日')
        },
        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 - 70) + '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); 
                // 创建材质
                // var material = new BABYLON.PBRMaterial("groundMaterial", scene);
                // material.metallic = 1; // 材质金属度
                // const ground = BABYLON.MeshBuilder.CreateGround("ground", { width: 10, height: 10 });
                // const groundMaterial = new BABYLON_GRID.GridMaterial("groundMaterial", scene);
                // groundMaterial.majorUnitFrequency = 60;
                // groundMaterial.minorUnitVisibility = 0.1;
                // groundMaterial.gridRatio = 0.1;
                // ground.material = groundMaterial;
                // ground.position.y = -0.01

                // 加载背景图片
                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.1, 0.3));
                that.initialTarget = camera.getTarget();
                camera.lowerBetaLimit = Math.PI / 2.6;
                camera.upperBetaLimit = Math.PI / 2.6; //无法移动到地面以下
                camera.attachControl(canvas, true);
                camera.maxZ = 700; // 调整适当的值
                camera.wheelDeltaPercentage = 0.02;
                // 相机限制
                camera.lowerRadiusLimit = 2;
                camera.upperRadiusLimit = 6;
                // 灯光
                const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));
                light.intensity = 3;
                // 全屏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";
                button_main.top = '100px';
                button_main.left = '0px';
                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/photon4.glb";
                BABYLON.SceneLoader.Append(remoteGlbUrl, "", scene, function (scene) {
                    // var remoteGlbUrl = process.env.VUE_APP_BASEURL + "/media/model/photon3.glb";
                    //   BABYLON.SceneLoader.Append('glb/', "photon4.glb", scene, function (scene) {
                    //   console.log(scene)
                    //关闭灯光
                    // scene.lights[1].setEnabled(false); 
                    engine.hideLoadingUI()
                    //   let arrKey = [];
                    //   for (let key in that.nodesLists) {
                    //     arrKey.push(key);
                    //   }
                    //   let heightI = 0;
                    //   that.heightTimer = setInterval(() => {
                    //     let heightKey = arrKey[heightI];
                    //     const meshTimer = scene.getMeshByName(heightKey);
                    //     const hl1Timer = new BABYLON.HighlightLayer("hl1Timer", scene);

                    //     if (meshTimer) {
                    //         if (that.nodesLists[heightKey]) {
                    //             hl1Timer.removeAllMeshes();
                    //             if (highlightLayer) { 
                    //                 highlightLayer.removeAllMeshes();
                    //             }
                    //           that.getDeptDetail(that.nodesLists[heightKey])
                    //           // 在选中的 meshTimer 上添加高亮效果
                    //           highlightLayer.addMesh(meshTimer, new BABYLON.Color3(0.1, 0.9, 0.9));
                    //           that.currentLightMesh = meshTimer;
                    //           mesh_rect.linkWithMesh(meshTimer);
                    //           let name = meshTimer.name.split('_')[0];
                    //           mesh_name.text = name;
                    //           that.infoVisibel = true;
                    //           hl1Timer.addMesh(meshTimer, new BABYLON.Color3(12 / 255, 250 / 255, 252 / 255), true);
                    //           hl1Timer.blurVerticalSize = 5;
                    //           hl1Timer.blurHorizontalSize = 5;
                    //           function worldToScreen(point, camera, scene, engine) {
                    //               return BABYLON.Vector3.Project(point,
                    //                   BABYLON.Matrix.Identity(),
                    //                   scene.getTransformMatrix(),
                    //                   camera.viewport.toGlobal(engine.getRenderWidth(), engine.getRenderHeight()));
                    //           }
                    //           var pos = worldToScreen(meshTimer.absolutePosition, camera, scene, engine);
                    //           let infoBlock = document.getElementById('inforBlock');
                    //           infoBlock.style.left = (Math.floor(pos.x)) + 'px';
                    //           infoBlock.style.top = (Math.floor(pos.y) - 250) + 'px';
                    //       }
                    //     }
                    //     heightI+=1;
                    //     // if(heightI>4){
                    //     //     heightI=0
                    //     // }
                    //   }, 1000);
                },
                    //进度条
                    function (evt) {
                        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.top = '100px';
                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";
                header.top = '100px';
                control_main.addControl(header);
                // 添加抓取事件
                const hl1 = new BABYLON.HighlightLayer("hl1", scene);
                const hl1Click = new BABYLON.HighlightLayer("hl1Click", scene);
                canvas.addEventListener('mousemove', (event) => {
                    // 使用 scene.pick 检测鼠标拾取
                    const pickResult = scene.pick(scene.pointerX, scene.pointerY);
                    if (that.currentLightMesh) {
                        that.infoVisibel = false;
                        mesh_rect.isVisible = false;
                        hl1.removeAllMeshes();
                        highlightLayer.removeAllMeshes();
                    }
                    if (pickResult.hit) {
                        const mesh = pickResult.pickedMesh;
                        highlightLayer.removeAllMeshes();
                        let key = mesh.name;
                        if (that.nodesLists[key]) {
                            hl1.removeAllMeshes();
                            highlightLayer.removeAllMeshes();
                            that.getDeptDetail(that.nodesLists[key])
                            //单身宿舍.003_primitive3
                            // 在选中的 mesh 上添加高亮效果
                            highlightLayer.addMesh(mesh, new BABYLON.Color3(0.1, 0.9, 0.9));
                            that.currentLightMesh = mesh;
                            mesh_rect.linkWithMesh(mesh);
                            let name = mesh.name.split('_')[0];
                            mesh_name.text = name;
                            // mesh_rect.isVisible = 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)) + 'px';
                            infoBlock.style.top = (Math.floor(pos.y) - 250) + 'px';
                        }
                    } else {
                        that.infoVisibel = false;
                    }
                });
                canvas.addEventListener('click', (event) => {
                    // 使用 scene.pick 检测鼠标拾取
                    const pickResult = scene.pick(scene.pointerX, scene.pointerY);
                    if (pickResult.hit) {
                        const mesh = pickResult.pickedMesh;
                        console.log('mesh', mesh)
                        if (that.nodesLists[mesh.name]) {
                            hl1Click.removeAllMeshes();
                            highlightLayer.removeAllMeshes();

                            highlightLayer.addMesh(mesh, new BABYLON.Color3(0.1, 0.9, 0.9));
                            hl1Click.addMesh(mesh, new BABYLON.Color3(12 / 255, 250 / 255, 252 / 255), true);
                            hl1Click.blurVerticalSize = 5;
                            hl1Click.blurHorizontalSize = 5;
                            that.currentObj.deptName = that.nodesLists[mesh.name];
                            if (camera.target != mesh.position) {
                                that.clickVisible = true;
                                // 计算新的相机位置
                                let position = mesh._parentNode._position
                                if (mesh._parentNode.id == '__root__') {
                                    position = mesh.position
                                }
                                const cameraPosition = new BABYLON.Vector3(
                                    position.x + 1.8 * Math.sin(camera.beta),
                                    position.y + 4 * Math.cos(camera.beta),
                                    position.z - 0.2 * Math.sin(camera.beta)
                                );
                                var ease = new BABYLON.CubicEase();
                                ease.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT);
                                BABYLON.Animation.CreateAndStartAnimation('meshclick', camera, 'position', 45, 200, camera.position, cameraPosition, 0, ease);
                                BABYLON.Animation.CreateAndStartAnimation('at51', camera, 'target', 45, 200, camera.target, position, 0, ease);
                            }
                        }
                    }
                });
                return scene;
            };
            const scene = createScene(); //Call the createScene function
            // scene.debugLayer.show()
            engine.runRenderLoop(function () {
                scene.render();
            });
            this.engine = engine;
            this.scene = scene;
            //   console.log('scene:',scene)
            window.addEventListener("resize", function () {
                engine.resize();
            });
        },
        getDeptDetail(name) {
            if (this.currentObj.deptName == name && this.clickVisible) {
                this.dialogData.deptName = name;
            } else {
                this.infoVisibel = true;
                this.dialogData.deptName = name;
            }
        },
        initChart() {
            //左1
            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",
                    top: 5,
                    right: 5,
                    data: [
                        {
                            backgroundColor: 'rgb(1,235,239)',
                            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)'
                                    }
                                ])
                            }
                        }, {
                            name: 'AVG',
                            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)'
                                    }])
                            },
                        }],

                },
                toolbox: {
                    feature: {
                        // saveAsImage: {}
                    }
                },
                grid: {
                    left: '2%',
                    right: '4%',
                    bottom: '5%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                        nameTextStyle: {
                            color: '#ffffff'
                        },
                        axisLabel: {
                            color: '#ffffff'
                        },
                    }
                ],
                yAxis: [
                    {
                        name: "交付数(个)",
                        type: 'value',
                        nameTextStyle: {
                            color: '#ffffff'
                        },
                        axisLabel: {
                            color: '#ffffff'
                        },
                        splitLine: {
                            show: false,
                        },
                        splitLine: {
                            show: false,
                            lineStyle: {
                                type: 'dashed', //y轴分割线类型
                                color: 'rgba(102,102,102,0.9)',
                                width: 1,
                            },
                        },
                    }
                ],
                series: [
                    {
                        name: '预制棒管',
                        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)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgb(5, 158, 163)'
                                }
                            ])
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: [140, 232, 101, 264, 90, 340, 250]
                    },
                    {
                        name: 'AVG',
                        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)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgb(250,205,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'
                    }
                },
                legend: {
                    top: 5,
                    right: 5,
                    data: [
                        {
                            name: 'AVG',
                            textStyle: {
                                color: '#fff'
                            },
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: 'rgb(5,245,2)'
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgb(7,137,43)'
                                    }
                                ])
                            }
                        },

                        {
                            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)'
                                    }
                                ])
                            }
                        },
                        {
                            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)'
                                    }])
                            },
                        },
                    ]
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '5%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                        nameTextStyle: {
                            color: '#ffffff'
                        },
                        axisLabel: {
                            color: '#ffffff'
                        },
                    }
                ],
                yAxis: [
                    {
                        name: "合格数(个)",
                        type: 'value',
                        nameTextStyle: {
                            color: '#ffffff'
                        },
                        axisLabel: {
                            color: '#ffffff'
                        },
                        splitLine: {
                            show: false
                        },
                    }
                ],
                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, 300]
                    },
                    {
                        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, 200]
                    },
                    {
                        name: 'AVG',
                        type: 'bar',
                        stack: 'Ad',
                        barWidth: 20,
                        emphasis: {
                            focus: 'series'
                        },
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: 'rgb(5,245,2)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgb(7,137,43)'
                                }
                            ])
                        },
                        data: [220, 182, 191, 234, 290, 330, 150]
                    }
                ]
            };
            bar1Chart.setOption(bar1option);
            //左3
            let line2Dom = document.getElementById('line2');
            line2Dom.style.height = this.blockHeight;
            let line2Chart = echarts.init(line2Dom);
            let line2option = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    top: 5,
                    right: 5,
                    data: [
                        {
                            name: '预制棒',
                            textStyle: {
                                color: '#fff'
                            },
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: 'orange'
                                    },
                                    {
                                        offset: 1,
                                        color: 'yellow'
                                    }])
                            },
                        },
                        {
                            name: '预制管',
                            textStyle: {
                                color: '#fff'
                            },
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: 'rgb(1,235,239)'
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgb(5, 158, 163)'
                                    }])
                            },
                        },
                    ],
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '5%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                    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: [75, 60, 80, 78, 66, 71, 81],
                        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
                            }
                        },
                    },
                    {
                        name: '预制管',
                        type: 'line',
                        stack: 'Total',
                        symbolSize: 8,  //设置折线上圆点大小
                        symbol: 'circle',
                        itemStyle: {
                            // 设置symbol的颜色
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: 'rgb(1,235,239)'
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgb(5, 158, 163)'
                                    }])
                            }
                        },
                        smooth: 0.5, // 设置折线弧度
                        data: [65, 50, 70, 68, 55, 60, 69],
                        lineStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 0,
                                colorStops: [{
                                    offset: 0, color: 'rgb(1,235,239)' // 0% 处的颜色
                                }, {
                                    offset: 1, color: 'rgb(5, 158, 163)' // 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: {
                    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: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                        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: false,
                        },
                    },
                    {
                        type: 'value',
                        name: '合格率',
                        min: 0,
                        max: 100,
                        interval: 20,
                        axisLabel: {
                            formatter: '{value} %',
                            color: '#ffffff'
                        },
                        nameTextStyle: {
                            color: '#ffffff'
                        },
                        splitLine: {
                            show: false,
                        },
                    }
                ],
                series: [
                    {
                        name: '数量',
                        type: 'bar',
                        tooltip: {
                            valueFormatter: function (value) {
                                return value;
                            }
                        },
                        barWidth: 15,
                        data: [220, 250, 280, 290, 250, 300, 210],
                        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: [63, 80, 71, 82, 60, 70, 85],
                    }
                ]
            };
            line3Chart.setOption(line3option);
            //饼状图
            let pieDom = document.getElementById('pie');
            pieDom.style.height = this.blockHeight;
            let pieChart = echarts.init(pieDom);
            let pieoption = {
                color: ['rgb(3,195,198)', 'rgb(155,248,249)', 'rgb(110,181,249)', 'rgb(205,248,248)', 'rgb(248,189,118)'],
                legend: {
                    bottom: 10,
                    // top: 'bottom',
                    textStyle: {
                        color: '#fff'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    show: true,
                },
                series: [
                    {
                        name: '不合格占比',
                        type: 'pie',
                        radius: [30, 60],
                        center: ['50%', '45%'],
                        // roseType: 'area',
                        itemStyle: {
                            borderRadius: 2
                        },
                        // label: {
                        //     fontSize: 12,
                        //     alignTo: 'edge',
                        //     formatter: '{b}\n',
                        //     edgeDistance: 10,
                        //     lineHeight: 20,
                        //     rich: {
                        //         title: {
                        //             fontSize: 12,
                        //             color: '#999',
                        //             lineHeight: 50,
                        //         },
                        //     }
                        // },
                        // labelLayout: function (params) {
                        //     var isLeft = params.labelRect.x < myChart.getWidth() / 2;
                        //     var points = params.labelLinePoints;
                        //     points[2][0] = isLeft? params.labelRect.x: params.labelRect.x + params.labelRect.width;
                        //     return {
                        //         labelLinePoints: points
                        //     };
                        // },

                        label: {
                            minMargin: 10,
                            edgeDistance: 10,
                            fontSize: '12px'
                        },
                        labelLine: {
                            lineStyle: {
                            },
                            length: 2,
                            length2: 5
                        },
                        labelLayout: function (params) {
                            var isLeft = params.labelRect.x < myChart.getWidth() / 2
                            var points = params.labelLinePoints;
                            points[2][0] = isLeft ? params.labelRect.x : params.labelRect.x + params.labelRect.width
                            return {
                                labelLinePoints: points,
                                dy: -10,
                                dx: 0
                            }
                        },

                        data: [
                            { value: 250, name: '合格' },
                            { value: 8, name: '椭圆弯曲' },
                            { value: 0, name: '大小头' },
                            { value: 2, name: '偏壁' },
                            { value: 6, name: '结石气线' },


                        ]
                    }
                ]
            };
            pieChart.setOption(pieoption);
        },
        circleClose() {
            this.clickVisible = false;
            this.currentObj.deptName = '';
        },
    },
    beforeDestoryed() {
        clearInterval(timerTime);
        this.timerTime = null;
    },

}
</script>
<style scoped>
@font-face {
    font-family: 'myfont';
    /* 字体名称 */
    src: url('../../utils/youShe.ttf');
    /* 字体文件相对路径 */
}

.container {
    background: url('/public/img/photon_bg.png') no-repeat;
    background-size: cover;
}

.pageHeader {
    font-size: 32px;
    background: none;
    border-bottom: none;
    position: relative;
    display: block;
    text-align: center;
    color: #ffffff;
    padding: 1px;
    font-family: "myfont";
    background: url('/public/img/photon_header.png') no-repeat;
    background-size: 100% 100%;
}

.top-line {
    height: 1px;
    width: 3%;
    position: absolute;
    bottom: 5px;
    background: rgba(54, 217, 187, 1);
}

.top-line-left {
    left: 24%;
}

.top-line-right {
    right: 24%;
}

.flexItem {
    margin-bottom: 10px;
}

.blockTitle {
    color: #fff;
    height: 40px;
    padding-left: 10px;
    font-size: 16px;
    line-height: 40px;
    font-weight: bold;
    background: url('/public/img/photon_title.png');
    background-size: 100% 100%;
    display: flex;
}

.blockTitleIcon {
    width: 20px;
    height: 20px;
    margin-top: 10px;
    margin-right: 5px;
    display: inline-block;
    animation: rotate 3s infinite;
    transform-origin: center center;
    background: url('/public/img/photon_title_icon.png');
    background-size: 100% 100%;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(90deg);
    }

    50% {
        transform: rotate(180deg);
    }

    75% {
        transform: rotate(270deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.row-item {
    height: 40px !important;
    line-height: 40px !important;
}

#scrollTable>.hader {
    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;
}

.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;
}

.totalNumContnier {
    display: flex;
    width: fit-content;
    margin: auto;
}

.totalNumWrap {
    margin: 0 10px;
    position: relative;
}

.totalNumWrap>img {
    width: 10vw;
}

.totalNumWrap_green>.totalNumber {
    color: rgb(5, 245, 2);
}

.totalNum_orange>.totalNumber {
    color: orange;
}

.totalNum_blue>.totalNumber {
    color: rgb(2, 245, 242);
}

.totalNumber {
    font-size: 25px;
    font-weight: bold;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.totalNumText {
    color: #fff;
    font-weight: bold;
    font-size: 0.7vw;
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
}

.inforBlock {
    left: 60%;
    top: 30%;
    width: 420px;
    height: 150px;
    position: absolute;
    font-weight: 500;
    color: #fff;
    padding: 20px;
    font-size: 14px;
    box-sizing: border-box;
    background: linear-gradient(to bottom left, rgba(25, 154, 118, .5), rgba(31, 44, 50, .5));
}

.inforBlock.clickBlock {
    left: 50%;
    width: 630px;
    height: 225px;
    padding: 40px;
    font-size: 16px;
    transform: translateX(-50%)
}

.inforBlock>.border_corner {
    z-index: 2500;
    position: absolute;
    width: 10px;
    height: 10px;
    background: rgba(0, 0, 0, 0);
    border: 2px solid rgba(54, 217, 187, 1);
}

.inforBlock>.border_left_top {
    top: 0;
    left: 0;
    border-right: none;
    border-bottom: none;
}

.inforBlock>.border_right_top {
    top: 0;
    right: 0;
    border-left: none;
    border-bottom: none;
}

.inforBlock>.border_left_bottom {
    bottom: 0;
    left: 0;
    border-right: none;
    border-top: none;
}

.inforBlock>.border_right_bottom {
    bottom: 0;
    right: 0;
    border-left: none;
    border-top: none;
}

.inforBlock>.title {
    font-size: 20px;
    font-weight: 600;
    position: absolute;
    top: -45px;
    text-align: center;
    width: 100%;
    left: 0;
}

.inforBlock>.infoCantier {
    display: flex;

}

.infoCantier>.leftBlock {
    width: 100px;
    display: flex;
    flex-direction: column;
    margin-right: 30px;
}

.infoCantier>.rightBlock {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.infoCantier>.rightBlock>.countWrap {
    display: flex;
    justify-content: space-between;
    width: 280px;
    margin-top: 10px
}

/* .clickBlock{
        position:relative;
    } */
.circleClose {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 30px;
    height: 30px;
}

.percentage-value {
    display: block;
    margin-top: 6px;
    font-size: 28px;
    color: white;
}
</style>