<template>
    <!-- <div                                                                                                                             > -->
    <div class="visualization">
        <div style="height: 50px;"></div>
        <el-row>
            <!-- 左侧 -->
            <el-col :span="4">
                <div style="color: #0d1528;">
                    12
                </div>
            </el-col>
            <!-- 中间 -->
            <el-col :span="14">
                <div class="center-top1">
                </div>
                <div class="center-top">
                    <div class="line2">R-510</div>
                    <img src="../../../assets/images/arrow-right.png" alt="" height="20" class="arrow2">
                    <img src="../../../assets/images/arrow-right.png" alt="" height="20" class="arrow23">
                    <div class="line23"></div>
                    <div class="line24"></div>

                    <div class="line41"></div>
                    <div class="line42">
                    </div>
                    <div class="line43"></div>
                    <div class="line44">
                    </div>
                    <div class="line45">C4产品</div>
                    <img src="../../../assets/images/arrow-left.png" alt="" height="20" class="arrow42">
                    <img src="../../../assets/images/arrow-top.png" alt="" height="20" class="arrow43">

                    <img src="../../../assets/images/arrow-bottom.png" alt="" height="20" class="arrow52">
                    <div class="line51"></div>
                    <div class="line6"></div>
                    <div class="line61"></div>
                    <div class="line62"></div>
                    <div class="line63"></div>
                    <div class="line64"></div>
                    <div class="line66"></div>
                    <div class="line67"></div>
                    <div class="line68"></div>
                    <div class="line69"></div>
                    <div class="line70"></div>
                    <div class="line71">RPG产品</div>

                    <img src="../../../assets/images/arrow-bottom.png" alt="" height="20" class="arrow6">
                    <img src="../../../assets/images/arrow-right.png" alt="" height="20" class="arrow61">
                    <img src="../../../assets/images/arrow-left.png" alt="" height="20" class="arrow63">
                    <img src="../../../assets/images/arrow-right.png" alt="" height="20" class="arrow67">

                    <div class="entity">
                        <!-- <img src="../../../assets/images/pot.png" alt=""> -->
                    </div>
                    <div class="entity1">

                    </div>
                    <div class="entity2">

                    </div>
                    <div class="entity3">

                    </div>
                    <div class="entity4">

                    </div>

                </div>
            </el-col>
            <!-- 右侧 -->
            <el-col :span="5">
            </el-col>
        </el-row>
        <el-dialog  :close-on-click-modal="false" title="详情" center :visible.sync="dialogVisible" :append-to-body="true" width="40%">
            <div>
                测试
            </div>
            <span slot="footer" class="dialog-footer">
                                                                                                              <el-button
                                                                                                                type="primary" size="mini" @click="dialogVisible = false">确 认</el-button>
                                                                                                         </span>
        </el-dialog>
        <!-- 最底边栏控件 -->
        <!-- <div class="copyright">技术支持：某某股份有限公司</div> -->
    </div>
    <!-- </div> -->
</template>

<script>
export default {
    data() {
        return {
            dialogVisible: false,
        };
    },
    computed: {},
    components: {},
    //在vue自定义指令中添加该指令
    directives: {},
    created() {},
    mounted() {
        function fixStyles() {
            // 渲染完毕后，修改菜单的高度占满屏幕高度
            let bodyHeight = document.documentElement.clientHeight; // 去除topbar的高度
            document.querySelector(".visualization").style.height = bodyHeight + "px";
        }
        fixStyles();
        var _scaleBody = true;
        var _innerWidth = _scaleBody ? 1920 : window.innerWidth;
        var _innerHeight = _scaleBody ? 1080 : window.innerHeight;
        // 页面动态缩放适应屏幕尺寸
        window.onresize = function() {
            fixStyles();
            let BodyStyle = document.querySelector(".visualization").style;
            BodyStyle["margin"] = "0px";
            BodyStyle["width"] = _innerWidth + "px";
            BodyStyle["height"] = _innerHeight + "px";
            BodyStyle["transform-origin"] = "left top 0px";
            BodyStyle["transform"] =
                "translateZ(0) scale(" +
                window.innerWidth / _innerWidth +
                "," +
                window.innerHeight / _innerHeight +
                ")";
            BodyStyle["overflow"] = "hidden";
            document.getElementsByTagName("body")[0].style["overflow"] = "hidden";
        };
        window.onresize();
    },
    beforeDestroy() {},
    methods: {

    },
};
</script>

<style>
/* 全局样式 */

.anchorBL {
    display: none;
}

.mymap>div {
    background-color: #081734 !important;
}

@keyframes myrotate {
    0% {
        transform: rotateZ(0deg);
    }
    50% {
        transform: rotateZ(360deg);
    }
    100% {
        transform: rotateZ(360deg);
    }
}

@keyframes myrotateCenter {
    0% {
        transform: rotateZ(0deg);
    }
    80% {
        transform: rotateZ(360deg);
    }
    100% {
        transform: rotateZ(360deg);
    }
}
</style>

<style lang="scss" rel="stylesheet/scss" scoped>
.fa-container {
    // width: 100%;
    //   height: calc(100vh - 135px);
    // overflow: hidden;
    background-color: #101129;
    overflow: hidden;
}

.visualization {
    height: calc(100vh - 84px); // background-color: #101129;
    background-color: #0d1528;
    margin: 0;
    width: 1920px;
    height: 1080px; //   transform-origin: left top 0px;
    box-sizing: border-box; // overflow: hidden;
    // background: url(../../../assets/images/bg.png) 0% 0% / 100% 100% repeat scroll rgb(0, 0, 0);
    // background: linear-gradient(
    //   180deg,
    //   rgba(7, 28, 55, 1) 0%,
    //   rgba(7, 28, 55, 1) 0%,
    //   rgba(7, 28, 55, 1) 65%,
    //   rgba(0, 0, 0, 1) 100%,
    //   rgba(0, 0, 0, 1) 100%
    // );
    perspective: 1200px;
    .htmleaf-header {
        // position: absolute;
        // top: 0.4%;
        // left: 49%;
        // -webkit-transform: translateX(-50%);
        // transform: translateX(-50%);
        width: 100%;
        height: 90px;
        line-height: 60px; // background-image: url(../../../assets/screen/title.png);
        background-size: 100% 100%;
        #main-title {
            box-sizing: border-box;
            margin: 0 auto;
            height: 70px;
            width: 700px;
            line-height: 70px;
            text-align: center;
            font-family: Arial, Microsoft YaHei, \\9ed1\4f53, \\5b8b\4f53;
            font-weight: 300; // color: #e3d772;
            color: #1eaed2;
            letter-spacing: 1px;
            font-size: 2.4em;
            font-weight: bolder;
            span {
                width: auto;
                height: 70px;
                line-height: 77px;
                display: inline-block;
                vertical-align: middle;
            }
        }
        .scale-out {
            -webkit-animation: 0.5s ease-out;
            animation: 0.5s ease-out;
            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
        }
        .float-right {
            float: right;
            width: 50px;
            height: 50px;
            margin: 12px 0 6px 0;
            color: #fff;
            cursor: pointer;
            svg {
                cursor: pointer;
                height: 20px;
            }
            img {
                height: 30px;
            }
        }
    }
    .data-filters {
        position: absolute;
        top: 7.5%;
        width: 15%;
        height: 3%;
        left: 9%;
        z-index: 501;
        .select-wrap {
            color: #fff;
            width: 100%;
            height: 30px;
        }
    }
    .navigation {
        position: absolute;
        top: 4.8%;
        width: 20%;
        height: 4%;
        right: 1.14%;
        z-index: 503;
        .container {
            width: 100%;
            height: 45px;
            padding-bottom: 10px;
            .time {
                position: relative;
                float: right;
                margin-right: 34px;
                height: 100%;
                width: 75%;
                #currentTime {
                    position: absolute;
                    bottom: 0;
                    font-family: Microsoft Yahei;
                    font-size: 1em;
                    letter-spacing: 1px;
                    color: #b2e1ea;
                    white-space: nowrap;
                    text-shadow: 0 0 5px rgba(20, 135, 243, 0.8);
                }
            }
        }
    }
    .top-title {
        font-size: 20px;
        text-align: left;
        color: #06cfe8; // height: 30px;
        // line-height: 30px;
        padding-left: 20px;
        position: relative;
        .top-icon {
            display: inline-block;
            position: absolute;
            right: 20px;
            top: 0px;
            img {
                vertical-align: middle;
            }
        }
    }
    .inner {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: -2.125rem;
        right: -1.583rem;
        bottom: -0.875rem;
        left: -5.5rem; // border: 1px solid red;
        padding: 0.5rem 0 1rem;
    }
    .person-status {
        text-align: center;
        color: #ffffff;
        background-color: #101b46; // background-image: url(../../../assets/screen/rect.png);
        // background-size: 100% 100%;
        margin: 10px 15px;
    }
    .circle-container {
        // background-image: url(../../../assets/screen/circle1.png);
        background-size: cover;
        width: 90px;
        height: 90px;
        margin: 10px;
        text-align: center;
        display: inline-block;
    }
    .plan-tips {
        text-align: left;
        padding-top: 26px;
        color: #8294a5;
    }
    .plan-num {
        text-align: left;
        background: linear-gradient(0deg, #5183f5, #5183f5, #61ddb1, #61ddb1);
        font-style: normal;
        background-size: cover;
        font-family: electronicFont;
        font-size: 36px;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        text-fill-color: transparent;
    }
    .circle1 {
        margin-top: 15px;
        height: 55px;
        width: 55px;
        animation: animation-rotate 4s linear infinite;
    }
    .circle2 {
        height: 100px;
        animation: animation-rotate 4s linear infinite;
    }
    .left-top {
        height: 258px; // background-image: url(../../../assets/screen/border.png);
        // background-size: 100% 100%;
        border: 2px solid red; // border-image: url(../../../assets/screen/border.png) 51 38 21 132;
        border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
        margin: 20px;
        margin-top: 10px;
        padding: 0 8px;
        position: relative;
    }
    .left-center {
        height: 258px;
        border: 2px solid red; // border-image: url(../../../assets/screen/border.png) 51 38 21 132;
        border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
        margin: 20px;
        padding: 0 8px;
        position: relative;
    }
    .left-bottom {
        height: 258px;
        border: 2px solid red; // border-image: url(../../../assets/screen/border.png) 51 38 21 132;
        border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
        margin: 20px;
        padding: 0 8px;
        position: relative;
        .goods-container {
            height: 130px; // background-image: url(../../../assets/screen/bg02.png);
            background-size: 100% 100%;
            margin: 10px 10px; // padding: 15px;
            // border: 2px solid red;
            // border-image: url(../../../assets/screen/bg02.png) 30 30 30 30;
            // border-width: 50px 50px 50px 50px;
        }
        .goods-tips {
            font-size: 20px;
            color: #06cfe8;
            text-align: center;
            padding-top: 30px;
        }
        .goods-num {
            font-size: 36px;
            font-family: electronicFont;
            text-align: center;
            color: #ffffff;
        }
    }
    .right-top {
        height: 258px;
        border: 2px solid red; // border-image: url(../../../assets/screen/border.png) 51 38 21 132;
        border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
        margin: 20px;
        padding: 0 8px;
        position: relative;
        margin-top: 10px;
    }
    .right-center {
        height: 258px;
        border: 2px solid red; // border-image: url(../../../assets/screen/border.png) 51 38 21 132;
        border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
        margin: 20px;
        padding: 0 8px;
        position: relative;
    }
    .center-top1 {
        height: 100px;
        position: relative; // background-color: #080a20;
    }
    .center-top2 {
        height: 100px;
        position: relative; // background-color: #080a20;
    }
    .center-top {
        height: 860px;
        position: relative; // background-color: #080a20;
        .entity {
            // border: 1px greenyellow solid;
            height: 300px;
            width: 55px;
            position: absolute;
            top: 0;
            left: 353px;
            background-image: url(../../../assets/images/WechatIMG36.png);
            background-size: 100% 100%;
            img {
                width: 60px;
                height: 100%;
                margin-left: -6px;
            }
        }
        .entity1 {
            // border: 1px greenyellow solid;
            height: 40px;
            width: 120px;
            position: absolute;
            top: -49px;
            left: 553px;
            background-image: url(../../../assets/images/WechatIMG34.png);
            background-size: 100% 100%;
        }
        .entity2 {
            // border: 1px greenyellow solid;
            height: 50px;
            width: 100px;
            position: absolute;
            top: 46px;
            left: 562px;
            background-image: url(../../../assets/images/WechatIMG33.png);
            background-size: 100% 100%;
        }
        .entity3 {
            // border: 1px greenyellow solid;
            height: 300px;
            width: 55px;
            position: absolute;
            top: 400px;
            left: 553px;
            background-image: url(../../../assets/images/WechatIMG36.png);
            background-size: 100% 100%;
        }
        .entity4 {
            // border: 1px greenyellow solid;
            height: 300px;
            width: 55px;
            position: absolute;
            top: 50px;
            left: 751px;
            background-image: url(../../../assets/images/WechatIMG36.png);
            background-size: 100% 100%;
        }
        .block3 {
            position: absolute;
            top: 140px;
            left: 650px;
            width: 110px;
            height: 500px; // border: 1px #ccc dotted;
            border-radius: 3px; // background-image: url(../../../assets/images/furnace.png);
            // background-size: 100% 100%;
            .block3-capsule {
                display: inline-block;
                width: 80px;
                height: 24px;
                border-radius: 10px;
                background-color: #61ddb1;
                margin: 10px 15px;
            }
        }
        .line1 {
            position: absolute;
            top: 90px;
            left: -100px;
            width: 442px;
            height: 1px;
            background-color: #5183f5;
            text-align: left;
            color: #fff;
            line-height: 24px;
        }
        .lx1 {
            cursor: pointer;
            position: absolute;
            top: 78px;
            left: 19px;
        }
        .arrow1 {
            position: absolute;
            top: 80px;
            left: 337px;
        }
        .line2 {
            position: absolute;
            top: 130px;
            left: 166px;
            width: 182px;
            height: 1px;
            background-color: #5183f5;
            text-align: left;
            color: #fff;
            line-height: 24px;
        }
        .lx2 {
            cursor: pointer;
            position: absolute;
            top: 118px;
            left: 19px;
        }
        .arrow2 {
            position: absolute;
            top: 120px;
            left: 337px;
        }
        .arrow21 {
            position: absolute;
            top: 215px;
            left: 433px;
        }
        .arrow22 {
            position: absolute;
            top: 369px;
            left: 440px;
        }
        .arrow23 {
            position: absolute;
            top: -45px;
            left: 538px;
        }
        .line23 {
            position: absolute;
            top: -36px;
            left: 379px;
            width: 1px;
            height: 36px;
            background-color: #5183f5;
        }
        .line24 {
            position: absolute;
            top: -36px;
            left: 379px;
            width: 167px;
            height: 1px;
            background-color: #5183f5;
        }
        .line41 {
            position: absolute;
            top: 63px;
            left: 778px;
            width: 1px;
            height: 37px;
            background-color: #5183f5;
        }
        .line42 {
            position: absolute;
            top: 63px;
            left: 403px;
            width: 220px;
            height: 1px;
            background-color: #5183f5;
            text-align: right;
            color: #fff;
            line-height: 24px;
        }
        .line43 {
            position: absolute;
            top: 171px;
            left: 778px;
            width: 1px;
            height: 37px;
            background-color: #5183f5;
        }
        .line44 {
            position: absolute;
            top: -31px;
            left: 776px;
            width: 1px;
            height: 80px;
            background-color: #5183f5;
            text-align: right;
            color: #fff;
            line-height: 24px;
        }
        .line45 {
            position: absolute;
            top: -54px;
            left: 750px;
            color: #fff;
        }
        .arrow42 {
            position: absolute;
            top: 53px;
            left: 396px;
        }
        .arrow43 {
            position: absolute;
            top: -39px;
            left: 766px;
        }
        .line5 {
            position: absolute;
            top: 110px;
            left: 600px;
            width: 55px;
            height: 1px;
            background-color: #5183f5;
            color: #5183f5;
            text-align: right;
            font-size: 13px;
        }
        .arrow52 {
            position: absolute;
            position: absolute;
            top: 29px;
            left: 607px;
        }
        .line51 {
            position: absolute;
            top: -17px;
            left: 616px;
            width: 1px;
            height: 60px;
            background-color: #5183f5;
        }
        .line52 {
            position: absolute;
            top: 140px;
            left: 655px;
            width: 96px;
            height: 1px;
            background-color: #5183f5;
        }
        .line6 {
            position: absolute;
            top: 287px;
            left: 259px;
            width: 130px;
            height: 40px; // background-image: url(../../../assets/images/pot.png);
            // background-size: 100% 100%;
        }
        .arrow6 {
            position: absolute;
            top: 600px;
            left: 767px;
        }
        .arrow61 {
            position: absolute;
            top: 214px;
            left: 740px;
        }
        .arrow63 {
            position: absolute;
            top: 215px;
            left: 394px;
        }
        .arrow64 {
            position: absolute;
            top: 297px;
            left: 386px;
        }
        .arrow66 {
            position: absolute;
            top: 723px;
            left: 870px;
        }
        .arrow67 {
            position: absolute;
            top: 487px;
            left: 538px;
        }
        .arrow68 {
            position: absolute;
            top: 319px;
            left: 367px;
        }
        .line61 {
            position: absolute;
            top: 224px;
            left: 579px;
            width: 1px;
            height: 176px;
            background-color: #5183f5;
        }
        .line62 {
            position: absolute;
            top: 224px;
            left: 406px;
            width: 174px;
            height: 1px;
            background-color: #5183f5;
        }
        .line63 {
            position: absolute;
            top: 224px;
            left: 657px;
            width: 1px;
            height: 509px;
            background-color: #5183f5;
        }
        .line64 {
            position: absolute;
            top: 224px;
            left: 657px;
            width: 97px;
            height: 1px;
            background-color: #5183f5;
        }
        .line66 {
            position: absolute;
            top: 302px;
            left: 377px;
            width: 1px;
            height: 194px;
            background-color: #5183f5;
        }
        .line67 {
            position: absolute;
            top: 496px;
            left: 377px;
            width: 174px;
            height: 1px;
            background-color: #5183f5;
        }
        .line68 {
            position: absolute;
            top: 702px;
            left: 578px;
            width: 1px;
            height: 30px;
            background-color: #5183f5;
        }
        .line69 {
            position: absolute;
            top: 732px;
            left: 578px;
            width: 80px;
            height: 1px;
            background-color: #5183f5;
            text-align: right;
            color: #fff;
            line-height: 24px;
        }
        .line70 {
            position: absolute;
            top: 352px;
            left: 777px;
            width: 1px;
            height: 255px;
            background-color: #5183f5;
        }
        .line71 {
            position: absolute;
            top: 621px;
            left: 750px;
            width: 100px;
            color: #fff;
        }
        .line72 {
            position: absolute;
            top: 590px;
            left: 777px;
            width: 170px;
            height: 1px;
            background-color: #5183f5;
            text-align: right;
            color: #fff;
            line-height: 24px;
        }
        .block4-tips {
            position: absolute;
            top: 342px;
            left: 360px;
            width: 40px;
            height: 110px;
            font-size: 22px;
            color: #fff;
            line-height: 28px;
            padding-top: 11px;
            text-align: center;
            background-color: #6ea7d3;
        }
        .block4 {
            position: absolute;
            top: 140px;
            left: 200px;
            width: 370px;
            height: 500px;
            border: 1px #ccc dotted;
            border-radius: 3px;
            padding-top: 60px;
            .block4-capsule {
                display: inline-block;
                width: 80px;
                height: 24px;
                border-radius: 10px;
                background-color: #61ddb1;
                margin: 18px 50px;
            }
        }
        .green-status {
            background-color: #61ddb1 !important;
        }
        .red-status {
            background-color: #f89588 !important;
        }
        .grey-status {
            background-color: #9192ab !important;
        }
        .btm-tips {
            position: absolute;
            bottom: 0;
            height: 40px;
            width: 100%; // border: 1px red solid;
            font-size: 18px;
            color: #06cfe8;
            text-align: center;
            .green-block {
                display: inline-block;
                height: 20px;
                width: 40px;
                margin: 0 10px;
                border-radius: 10px;
                vertical-align: middle;
                background-color: #61ddb1;
            }
            .yellow-block {
                display: inline-block;
                height: 20px;
                width: 40px;
                margin: 0 10px;
                border-radius: 10px;
                vertical-align: middle;
                background-color: #ffd102;
            }
            .red-block {
                display: inline-block;
                height: 20px;
                width: 40px;
                margin: 0 10px;
                border-radius: 10px;
                vertical-align: middle;
                background-color: #f89588;
            }
            .grey-block {
                display: inline-block;
                height: 20px;
                width: 40px;
                margin: 0 10px;
                border-radius: 10px;
                vertical-align: middle;
                background-color: #9192ab;
            }
        }
    }
    .center-bottom {
        height: 258px; // border: 2px solid red;
        // border-image: url(../../../assets/screen/border.png) 51 38 21 132;
        // border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
        margin-top: 20px;
        padding: 0 8px;
        position: relative;
        .goods-container {
            height: 130px; // background-image: url(../../../assets/screen/bg02.png);
            background-size: 100% 100%;
            margin: 10px 50px; // padding: 15px;
        }
        .goods-tips {
            font-size: 20px;
            color: #06cfe8;
            text-align: center;
            padding-top: 30px;
        }
        .goods-num {
            font-size: 36px;
            font-family: electronicFont;
            text-align: center;
            color: #ffffff;
        }
    }
    .copyright {
        height: 30px;
        line-height: 25px;
        text-align: center;
        font-size: 14px;
        color: #6ea7d3;
        position: absolute;
        bottom: 0px;
        width: 100%;
        transition: all 1s;
    }
}
</style>
