fix:样式修复

ui/src/views/model/home/index copy.vue

@@ -0,0 +1,1067 @@
+<template>
+    <div class="visualization">
+    
+        <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="block3">
+                        <img src="../../../assets/images/furnace.png" alt="">
+                    </div>
+                    <div class="line1">
+                        循环进料
+                    </div>
+                    <el-popover placement="top-start" title="标题" width="200" trigger="hover" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
+                        <img slot="reference" src="../../../assets/images/lx.png" @click="lxClick" alt="" height="24" class="lx1">
+                    </el-popover>
+                    <img src="../../../assets/images/arrow-right.png" alt="" height="20" class="arrow1">
+                    <div class="line2">高压给水</div>
+                    <el-popover placement="top-start" title="标题" width="200" trigger="hover" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
+                        <img slot="reference" src="../../../assets/images/lx.png" @click="lxClick" alt="" height="24" class="lx2">
+                    </el-popover>
+                    <img src="../../../assets/images/arrow-right.png" alt="" height="20" class="arrow2">
+                    <img src="../../../assets/images/arrow-right.png" alt="" height="20" class="arrow21">
+                    <img src="../../../assets/images/arrow-bottom.png" alt="" height="20" class="arrow22">
+                    <img src="../../../assets/images/arrow-right.png" alt="" height="20" class="arrow23">
+                    <div class="line21"></div>
+                    <div class="line22"></div>
+                    <div class="line3">高压蒸汽</div>
+                    <el-popover placement="top-start" title="标题" width="200" trigger="hover" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
+                        <img slot="reference" src="../../../assets/images/lx.png" @click="lxClick" alt="" height="24" class="lx3">
+                    </el-popover>
+                    <img src="../../../assets/images/arrow-right.png" alt="" height="20" class="arrow3">
+                    <div class="line4">缓解气</div>
+                    <el-popover placement="top-start" title="标题" width="200" trigger="hover" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
+                        <img slot="reference" src="../../../assets/images/lx.png" @click="lxClick" alt="" height="24" class="lx4">
+                    </el-popover>
+                    <el-popover placement="top-start" title="标题" width="200" trigger="hover" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
+                        <img slot="reference" src="../../../assets/images/lx.png" @click="lxClick" alt="" height="24" class="lx41">
+                    </el-popover>
+                    <img src="../../../assets/images/arrow-left.png" alt="" height="20" class="arrow4">
+                    <img src="../../../assets/images/arrow-bottom.png" alt="" height="20" class="arrow41">
+                    <img src="../../../assets/images/arrow-top.png" alt="" height="20" class="arrow42">
+                    <img src="../../../assets/images/arrow-top.png" alt="" height="20" class="arrow43">
+                    <img src="../../../assets/images/arrow-top.png" alt="" height="20" class="arrow44">
+                    <div class="line41"></div>
+                    <div class="line42"></div>
+                    <div class="line43"></div>
+                    <div class="line44"></div>
+                    <div class="line45"></div>
+    
+                    <div class="line5">蒸汽</div>
+                    <el-popover placement="top-start" title="标题" width="200" trigger="hover" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
+                        <img slot="reference" src="../../../assets/images/lx.png" @click="lxClick" alt="" height="24" class="lx5">
+                    </el-popover>
+                    <img src="../../../assets/images/arrow-left.png" alt="" height="20" class="arrow5">
+                    <img src="../../../assets/images/arrow-bottom.png" alt="" height="20" class="arrow51">
+                    <img src="../../../assets/images/arrow-right.png" alt="" height="20" class="arrow52">
+                    <div class="line51"></div>
+                    <div class="line52"></div>
+                    <div class="line6"></div>
+                    <div class="line61"></div>
+                    <div class="line62"></div>
+                    <div class="line63"></div>
+                    <div class="line64"></div>
+                    <div class="line65"></div>
+                    <div class="line66"></div>
+                    <div class="line67"></div>
+                    <div class="line68"></div>
+                    <div class="line69"></div>
+                    <div class="line70"></div>
+                    <img src="../../../assets/images/arrow-top.png" alt="" height="20" class="arrow6">
+                    <img src="../../../assets/images/arrow-right.png" alt="" height="20" class="arrow61">
+                    <img src="../../../assets/images/arrow-bottom.png" alt="" height="20" class="arrow62">
+                    <img src="../../../assets/images/arrow-right.png" alt="" height="20" class="arrow63">
+                    <img src="../../../assets/images/arrow-left.png" alt="" height="20" class="arrow64">
+                    <img src="../../../assets/images/arrow-bottom.png" alt="" height="20" class="arrow65">
+                    <img src="../../../assets/images/arrow-right.png" alt="" height="20" class="arrow66">
+                    <img src="../../../assets/images/arrow-left.png" alt="" height="20" class="arrow67">
+                    <img src="../../../assets/images/arrow-top.png" alt="" height="20" class="arrow68">
+                </div>
+            </el-col>
+            <!-- 右侧 -->
+            <el-col :span="5">
+            </el-col>
+        </el-row>
+        <el-dialog 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() {
+        clearTimeout(this.timeout);
+    },
+    methods: {
+        lxClick() {
+
+        }
+    },
+};
+</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/bgimg.jpg) 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;
+    }
+    .right-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;
+    }
+    .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;
+        .block1-tips {
+            position: absolute;
+            bottom: 120px;
+            right: 2px;
+            width: 40px;
+            height: 110px;
+            font-size: 22px;
+            color: #fff;
+            line-height: 28px;
+            padding-top: 11px;
+            text-align: center;
+            background-color: #6ea7d3;
+        }
+        .block1 {
+            position: absolute;
+            bottom: 100px;
+            right: 50px;
+            width: 50px;
+            height: 362px;
+            border: 1px #ccc dotted;
+            border-radius: 3px; // display: flex;
+            // align-items: flex-end;
+            overflow: hidden;
+            .block1-capsule {
+                display: inline-block;
+                width: 20px;
+                height: 96px;
+                border-radius: 10px;
+                background-color: #61ddb1;
+                margin: 10px 15px;
+            }
+        }
+        .block2-tips {
+            position: absolute;
+            bottom: 246px;
+            right: 244px;
+            width: 110px;
+            height: 40px;
+            font-size: 22px;
+            color: #fff;
+            letter-spacing: 2px;
+            padding-top: 2px;
+            text-align: center;
+            background-color: #6ea7d3;
+        }
+        .block2 {
+            position: absolute;
+            bottom: 240px;
+            right: 130px;
+            width: 350px;
+            height: 220px;
+            border: 1px #ccc dotted;
+            border-radius: 3px;
+            padding: 50px 0 0 12px;
+            .block2-capsule {
+                display: inline-block;
+                width: 20px;
+                height: 100px;
+                border-radius: 10px;
+                background-color: #61ddb1;
+                margin: 10px 8px;
+            }
+        }
+        .block3-tips {
+            position: absolute;
+            top: 160px;
+            left: 780px;
+            width: 40px;
+            height: 110px;
+            font-size: 22px;
+            color: #fff;
+            line-height: 28px;
+            padding-top: 11px;
+            text-align: center;
+            background-color: #6ea7d3;
+        }
+        .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%;
+            img {
+                height: 900px;
+                margin-top: -210px;
+                margin-left: -59px;
+                width: 180px;
+            }
+            .block3-capsule {
+                display: inline-block;
+                width: 80px;
+                height: 24px;
+                border-radius: 10px;
+                background-color: #61ddb1;
+                margin: 10px 15px;
+            }
+        }
+        .line1 {
+            position: absolute;
+            top: 190px;
+            left: -140px;
+            width: 780px;
+            height: 1px;
+            background-color: #5183f5;
+            color: #fff;
+            text-align: left;
+            line-height: 24px;
+        }
+        .lx1 {
+            cursor: pointer;
+            position: absolute;
+            top: 178px;
+            left: 19px;
+        }
+        .arrow1 {
+            position: absolute;
+            top: 180px;
+            left: 633px;
+        }
+        .line2 {
+            position: absolute;
+            top: 225px;
+            left: -140px;
+            width: 780px;
+            height: 1px;
+            background-color: #5183f5;
+            color: #fff;
+            text-align: left;
+            line-height: 24px;
+        }
+        .lx2 {
+            cursor: pointer;
+            position: absolute;
+            top: 213px;
+            left: 19px;
+        }
+        .arrow2 {
+            position: absolute;
+            top: 215px;
+            left: 633px;
+        }
+        .arrow21 {
+            position: absolute;
+            top: 215px;
+            left: 433px;
+        }
+        .arrow22 {
+            position: absolute;
+            top: 369px;
+            left: 440px;
+        }
+        .arrow23 {
+            position: absolute;
+            top: 375px;
+            left: 634px;
+        }
+        .line21 {
+            position: absolute;
+            top: 226px;
+            left: 450px;
+            width: 1px;
+            height: 160px;
+            background-color: #5183f5;
+        }
+        .line22 {
+            position: absolute;
+            top: 385px;
+            left: 451px;
+            width: 198px;
+            height: 1px;
+            background-color: #5183f5;
+        }
+        .line3 {
+            position: absolute;
+            top: 420px;
+            left: -140px;
+            width: 780px;
+            height: 1px;
+            background-color: #5183f5;
+            color: #fff;
+            text-align: left;
+            line-height: 24px;
+        }
+        .lx3 {
+            cursor: pointer;
+            position: absolute;
+            top: 408px;
+            left: 19px;
+        }
+        .arrow3 {
+            position: absolute;
+            top: 410px;
+            left: 633px;
+        }
+        .line4 {
+            position: absolute;
+            top: 455px;
+            left: -140px;
+            width: 681px;
+            height: 1px;
+            background-color: #5183f5;
+            color: #fff;
+            text-align: left;
+            line-height: 24px;
+        }
+        .lx4 {
+            cursor: pointer;
+            position: absolute;
+            top: 444px;
+            left: 19px;
+        }
+        .lx41 {
+            cursor: pointer;
+            position: absolute;
+            top: 444px;
+            left: 440px;
+        }
+        .arrow4 {
+            position: absolute;
+            top: 445px;
+            left: 318px;
+        }
+        .arrow41 {
+            position: absolute;
+            top: 670px;
+            left: 311px;
+        }
+        .arrow42 {
+            position: absolute;
+            top: 636px;
+            left: 696px;
+        }
+        .arrow43 {
+            position: absolute;
+            top: 574px;
+            left: 531px;
+        }
+        .arrow44 {
+            position: absolute;
+            top: 451px;
+            left: 531px;
+        }
+        .line41 {
+            position: absolute;
+            top: 456px;
+            left: 541px;
+            width: 1px;
+            height: 160px;
+            background-color: #5183f5;
+        }
+        .line42 {
+            position: absolute;
+            top: 616px;
+            left: 541px;
+            width: 90px;
+            height: 1px;
+            background-color: #5183f5;
+        }
+        .line43 {
+            position: absolute;
+            top: 456px;
+            left: 320px;
+            width: 1px;
+            height: 230px;
+            background-color: #5183f5;
+        }
+        .line44 {
+            position: absolute;
+            top: 685px;
+            left: 320px;
+            width: 387px;
+            height: 1px;
+            background-color: #5183f5;
+        }
+        .line45 {
+            position: absolute;
+            top: 641px;
+            left: 706px;
+            width: 1px;
+            height: 44px;
+            background-color: #5183f5;
+        }
+        .line5 {
+            position: absolute;
+            top: 93px;
+            top: -6px;
+            left: 580px;
+            width: 652px;
+            height: 1px;
+            background-color: #5183f5;
+            color: #fff;
+            text-align: right;
+            line-height: 24px;
+        }
+        .lx5 {
+            cursor: pointer;
+            position: absolute;
+            top: -17px;
+            left: 1048px;
+        }
+        .arrow5 {
+            position: absolute;
+            top: -15px;
+            left: 575px;
+        }
+        .arrow51 {
+            position: absolute;
+            top: 239px;
+            left: 571px;
+        }
+        .arrow52 {
+            position: absolute;
+            top: 245px;
+            left: 634px;
+        }
+        .line51 {
+            position: absolute;
+            top: -5px;
+            left: 580px;
+            width: 1px;
+            height: 256px;
+            background-color: #5183f5;
+        }
+        .line52 {
+            position: absolute;
+            top: 255px;
+            left: 580px;
+            width: 69px;
+            height: 1px;
+            background-color: #5183f5;
+        }
+        .line6 {
+            position: absolute;
+            top: 287px;
+            left: 259px;
+            width: 130px;
+            height: 40px;
+            background-image: url(../../../assets/images/pot1.png);
+            background-size: 100% 100%;
+        }
+        .arrow6 {
+            position: absolute;
+            top: 262px;
+            left: 366px;
+        }
+        .arrow61 {
+            position: absolute;
+            top: 257px;
+            left: 514px;
+        }
+        .arrow62 {
+            position: absolute;
+            top: 333px;
+            left: 520px;
+        }
+        .arrow63 {
+            position: absolute;
+            top: 338px;
+            left: 634px;
+        }
+        .arrow64 {
+            position: absolute;
+            top: 297px;
+            left: 386px;
+        }
+        .arrow65 {
+            position: absolute;
+            top: 539px;
+            left: 337px;
+        }
+        .arrow66 {
+            position: absolute;
+            top: 544px;
+            left: 514px;
+        }
+        .arrow67 {
+            position: absolute;
+            top: 505px;
+            left: 373px;
+        }
+        .arrow68 {
+            position: absolute;
+            top: 319px;
+            left: 367px;
+        }
+        .line61 {
+            position: absolute;
+            top: 267px;
+            left: 376px;
+            width: 1px;
+            height: 20px;
+            background-color: #5183f5;
+        }
+        .line62 {
+            position: absolute;
+            top: 266px;
+            left: 375px;
+            width: 156px;
+            height: 1px;
+            background-color: #5183f5;
+        }
+        .line63 {
+            position: absolute;
+            top: 267px;
+            left: 530px;
+            width: 1px;
+            height: 75px;
+            background-color: #5183f5;
+        }
+        .line64 {
+            position: absolute;
+            top: 348px;
+            left: 530px;
+            width: 119px;
+            height: 1px;
+            background-color: #5183f5;
+        }
+        .line65 {
+            position: absolute;
+            top: 307px;
+            left: 399px;
+            width: 251px;
+            height: 1px;
+            background-color: #5183f5;
+        }
+        .line66 {
+            position: absolute;
+            top: 321px;
+            left: 377px;
+            width: 1px;
+            height: 194px;
+            background-color: #5183f5;
+        }
+        .line67 {
+            position: absolute;
+            top: 514px;
+            left: 377px;
+            width: 154px;
+            height: 1px;
+            background-color: #5183f5;
+        }
+        .line68 {
+            position: absolute;
+            top: 327px;
+            left: 346px;
+            width: 1px;
+            height: 227px;
+            background-color: #5183f5;
+        }
+        .line69 {
+            position: absolute;
+            top: 554px;
+            left: 348px;
+            width: 181px;
+            height: 1px;
+            background-color: #5183f5;
+        }
+        .line70 {
+            position: absolute;
+            top: 491px;
+            left: 530px;
+            width: 20px;
+            height: 87px;
+            border: 1px solid #fff;
+        }
+        .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;
+            // 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;
+        }
+    }
+    .copyright {
+        height: 30px;
+        line-height: 25px;
+        text-align: center;
+        font-size: 14px;
+        color: #6ea7d3;
+        position: absolute;
+        bottom: 0px;
+        width: 100%;
+        transition: all 1s;
+    }
+}
+</style>

ui/src/views/model/home/index.vue

@@ -1,11 +1,46 @@
 <template>
     <div class="visualization">
-    
+        <div style="position:relative;
+                    height: 60px;
+                    color: #0a3460; 
+                    text-align: center;
+                    font-size: 36px;
+                    line-height:40px;
+                    font-weight: bold;
+                    padding-top: 20px;">
+        </div>
+        <div style="position:fixed;
+                    width: 400px;
+                    color: #0a3460; 
+                    text-align: center;
+                    font-size: 36px;
+                    font-weight: bold;
+                    left: 50%;
+                    margin-top: -10px;
+                    margin-left: -200px;
+                    ">
+            工艺流程图
+        </div>
+        <div style="position:fixed;
+                    width: 120px;
+                    height: 40px;
+                    line-height: 40px;
+                    border: 1px #022261 solid;
+                    text-align: center;
+                    border-radius: 20px;
+                    color: #0a3460; 
+                    text-align: center;
+                    font-size: 16px;
+                    left: 80px;
+                    margin-top: 10px;
+                    ">
+            <img src="../../../assets/images/goBack.png"  />返回上级
+        </div>
         <el-row>
             <!-- 左侧 -->
             <el-col :span="4">
-                <div style="color: #0d1528;">
-                    12
+                <div style="color: #d3d9e5;">
+                    .
                 </div>
             </el-col>
             <!-- 中间 -->
@@ -14,16 +49,59 @@
                 </div>
                 <div class="center-top">
                     <div class="block3">
-                        <img src="../../../assets/images/furnace.png" alt="">
+                        <img src="../../../assets/images/img01.png" alt="">
+                        <span style="position: absolute;
+                                                height: 30px;
+                                                width: 70px;
+                                                line-height: 30px;
+                                                color: #022261;
+                                                background-color: #e9eef3;
+                                                text-align: center;
+                                                border: 1px solid #022261;;
+                                                text-align: center;
+                                                border-radius: 4px;
+                                                left: 150px;
+                                                top: 185px;
+                                            ">裂解炉</span>
                     </div>
                     <div class="line1">
-                        循环进料
+                        <div style="position: relative;">
+                            <span style="position: absolute;
+                                                height: 30px;
+                                                width: 90px;
+                                                line-height: 30px;
+                                                color: #022261;
+                                                font-weight: bold;
+                                                background-color: #d8e4fe;
+                                                text-align: center;
+                                                border: 1px solid #ccc;
+                                                border-radius: 4px;
+                                                left: -90px;
+                                                top: -15px;
+                                            ">循环进料</span>
+                        </div>
                     </div>
                     <el-popover placement="top-start" title="标题" width="200" trigger="hover" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
                         <img slot="reference" src="../../../assets/images/lx.png" @click="lxClick" alt="" height="24" class="lx1">
                     </el-popover>
                     <img src="../../../assets/images/arrow-right.png" alt="" height="20" class="arrow1">
-                    <div class="line2">高压给水</div>
+                    <div class="line2">
+                        <div style="position: relative;">
+                            <span style="position: absolute;
+                                                height: 30px;
+                                                width: 90px;
+                                                line-height: 30px;
+                                                color: #022261;
+                                                font-weight: bold;
+                                                background-color: #d8e4fe;
+                                                text-align: center;
+                                                border: 1px solid #ccc;
+                                                border-radius: 4px;
+                                                left: -90px;
+                                                top: -15px;
+                                            ">高压给水</span>
+                        </div>
+                    </div>
                     <el-popover placement="top-start" title="标题" width="200" trigger="hover" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
                         <img slot="reference" src="../../../assets/images/lx.png" @click="lxClick" alt="" height="24" class="lx2">
                     </el-popover>
@@ -33,12 +111,40 @@
                     <img src="../../../assets/images/arrow-right.png" alt="" height="20" class="arrow23">
                     <div class="line21"></div>
                     <div class="line22"></div>
-                    <div class="line3">高压蒸汽</div>
+                    <div class="line3">
+                        <span style="position: absolute;
+                                                height: 30px;
+                                                width: 90px;
+                                                line-height: 30px;
+                                                color: #022261;
+                                                font-weight: bold;
+                                                background-color: #d8e4fe;
+                                                text-align: center;
+                                                border: 1px solid #ccc;
+                                                border-radius: 4px;
+                                                left: -90px;
+                                                top: -15px;
+                                            ">高压蒸汽</span>
+                    </div>
                     <el-popover placement="top-start" title="标题" width="200" trigger="hover" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
                         <img slot="reference" src="../../../assets/images/lx.png" @click="lxClick" alt="" height="24" class="lx3">
                     </el-popover>
                     <img src="../../../assets/images/arrow-right.png" alt="" height="20" class="arrow3">
-                    <div class="line4">缓解气</div>
+                    <div class="line4">
+                        <span style="position: absolute;
+                                                height: 30px;
+                                                width: 70px;
+                                                line-height: 30px;
+                                                color: #022261;
+                                                font-weight: bold;
+                                                background-color: #d8e4fe;
+                                                text-align: center;
+                                                border: 1px solid #ccc;
+                                                border-radius: 4px;
+                                                left: -70px;
+                                                top: -15px;
+                                            ">缓解气</span>
+                    </div>
                     <el-popover placement="top-start" title="标题" width="200" trigger="hover" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
                         <img slot="reference" src="../../../assets/images/lx.png" @click="lxClick" alt="" height="24" class="lx4">
                     </el-popover>
@@ -56,7 +162,21 @@
                     <div class="line44"></div>
                     <div class="line45"></div>
     
-                    <div class="line5">蒸汽</div>
+                    <div class="line5">
+                        <span style="position: absolute;
+                                                height: 30px;
+                                                width: 90px;
+                                                line-height: 30px;
+                                                color: #022261;
+                                                font-weight: bold;
+                                                background-color: #d8e4fe;
+                                                text-align: center;
+                                                border: 1px solid #ccc;
+                                                border-radius: 4px;
+                                                right: -90px;
+                                                top: -15px;
+                                            ">蒸汽</span>
+                    </div>
                     <el-popover placement="top-start" title="标题" width="200" trigger="hover" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
                         <img slot="reference" src="../../../assets/images/lx.png" @click="lxClick" alt="" height="24" class="lx5">
                     </el-popover>
@@ -65,7 +185,20 @@
                     <img src="../../../assets/images/arrow-right.png" alt="" height="20" class="arrow52">
                     <div class="line51"></div>
                     <div class="line52"></div>
-                    <div class="line6"></div>
+                    <div class="line6">
+                        <span style="position: absolute;
+                                                height: 30px;
+                                                width: 70px;
+                                                line-height: 30px;
+                                                color: #022261;
+                                                background-color: #e9eef3;
+                                                text-align: center;
+                                                border: 1px solid #022261;
+                                                border-radius: 4px;
+                                                left: -100px;
+                                                top: 5px;
+                                            ">储罐</span>
+                    </div>
                     <div class="line61"></div>
                     <div class="line62"></div>
                     <div class="line63"></div>
@@ -96,12 +229,12 @@
                 测试
             </div>
             <span slot="footer" class="dialog-footer">
-                        <el-button
-                          type="primary"
-                          size="mini"
-                          @click="dialogVisible = false"
-                        >确 认</el-button>
-                      </span>
+                                                                    <el-button
+                                                                      type="primary"
+                                                                      size="mini"
+                                                                      @click="dialogVisible = false"
+                                                                    >确 认</el-button>
+                                                                  </span>
         </el-dialog>
         <!-- 最底边栏控件 -->
         <!-- <div class="copyright">技术支持：某某股份有限公司</div> -->
@@ -208,13 +341,12 @@ export default {
 
 .visualization {
     height: calc(100vh - 84px); // background-color: #101129;
-    background-color: #0d1528;
+    // 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(
+    background: url(../../../assets/images/bgimg.jpg) 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%,
@@ -369,7 +501,7 @@ export default {
     }
     .plan-num {
         text-align: left;
-        background: linear-gradient(0deg, #5183f5, #5183f5, #61ddb1, #61ddb1);
+        background: linear-gradient(0deg, #273e68, #273e68, #61ddb1, #61ddb1);
         font-style: normal;
         background-size: cover;
         font-family: electronicFont;
@@ -556,7 +688,7 @@ export default {
             border-radius: 3px; // background-image: url(../../../assets/images/furnace.png);
             // background-size: 100% 100%;
             img {
-                height: 900px;
+                height: 860px;
                 margin-top: -210px;
                 margin-left: -59px;
                 width: 180px;
@@ -576,7 +708,7 @@ export default {
             left: -140px;
             width: 780px;
             height: 1px;
-            background-color: #5183f5;
+            background-color: #273e68;
             color: #fff;
             text-align: left;
             line-height: 24px;
@@ -598,7 +730,7 @@ export default {
             left: -140px;
             width: 780px;
             height: 1px;
-            background-color: #5183f5;
+            background-color: #273e68;
             color: #fff;
             text-align: left;
             line-height: 24px;
@@ -635,7 +767,7 @@ export default {
             left: 450px;
             width: 1px;
             height: 160px;
-            background-color: #5183f5;
+            background-color: #273e68;
         }
         .line22 {
             position: absolute;
@@ -643,7 +775,7 @@ export default {
             left: 451px;
             width: 198px;
             height: 1px;
-            background-color: #5183f5;
+            background-color: #273e68;
         }
         .line3 {
             position: absolute;
@@ -651,7 +783,7 @@ export default {
             left: -140px;
             width: 780px;
             height: 1px;
-            background-color: #5183f5;
+            background-color: #273e68;
             color: #fff;
             text-align: left;
             line-height: 24px;
@@ -670,10 +802,10 @@ export default {
         .line4 {
             position: absolute;
             top: 455px;
-            left: -140px;
-            width: 681px;
+            left: -160px;
+            width: 702px;
             height: 1px;
-            background-color: #5183f5;
+            background-color: #273e68;
             color: #fff;
             text-align: left;
             line-height: 24px;
@@ -721,7 +853,7 @@ export default {
             left: 541px;
             width: 1px;
             height: 160px;
-            background-color: #5183f5;
+            background-color: #273e68;
         }
         .line42 {
             position: absolute;
@@ -729,7 +861,7 @@ export default {
             left: 541px;
             width: 90px;
             height: 1px;
-            background-color: #5183f5;
+            background-color: #273e68;
         }
         .line43 {
             position: absolute;
@@ -737,7 +869,7 @@ export default {
             left: 320px;
             width: 1px;
             height: 230px;
-            background-color: #5183f5;
+            background-color: #273e68;
         }
         .line44 {
             position: absolute;
@@ -745,7 +877,7 @@ export default {
             left: 320px;
             width: 387px;
             height: 1px;
-            background-color: #5183f5;
+            background-color: #273e68;
         }
         .line45 {
             position: absolute;
@@ -753,7 +885,7 @@ export default {
             left: 706px;
             width: 1px;
             height: 44px;
-            background-color: #5183f5;
+            background-color: #273e68;
         }
         .line5 {
             position: absolute;
@@ -762,7 +894,7 @@ export default {
             left: 580px;
             width: 652px;
             height: 1px;
-            background-color: #5183f5;
+            background-color: #273e68;
             color: #fff;
             text-align: right;
             line-height: 24px;
@@ -794,7 +926,7 @@ export default {
             left: 580px;
             width: 1px;
             height: 256px;
-            background-color: #5183f5;
+            background-color: #273e68;
         }
         .line52 {
             position: absolute;
@@ -802,7 +934,7 @@ export default {
             left: 580px;
             width: 69px;
             height: 1px;
-            background-color: #5183f5;
+            background-color: #273e68;
         }
         .line6 {
             position: absolute;
@@ -810,7 +942,7 @@ export default {
             left: 259px;
             width: 130px;
             height: 40px;
-            background-image: url(../../../assets/images/pot1.png);
+            background-image: url(../../../assets/images/img02.png);
             background-size: 100% 100%;
         }
         .arrow6 {
@@ -855,7 +987,7 @@ export default {
         }
         .arrow68 {
             position: absolute;
-            top: 319px;
+            top: 317px;
             left: 367px;
         }
         .line61 {
@@ -864,7 +996,7 @@ export default {
             left: 376px;
             width: 1px;
             height: 20px;
-            background-color: #5183f5;
+            background-color: #273e68;
         }
         .line62 {
             position: absolute;
@@ -872,7 +1004,7 @@ export default {
             left: 375px;
             width: 156px;
             height: 1px;
-            background-color: #5183f5;
+            background-color: #273e68;
         }
         .line63 {
             position: absolute;
@@ -880,7 +1012,7 @@ export default {
             left: 530px;
             width: 1px;
             height: 75px;
-            background-color: #5183f5;
+            background-color: #273e68;
         }
         .line64 {
             position: absolute;
@@ -888,7 +1020,7 @@ export default {
             left: 530px;
             width: 119px;
             height: 1px;
-            background-color: #5183f5;
+            background-color: #273e68;
         }
         .line65 {
             position: absolute;
@@ -896,7 +1028,7 @@ export default {
             left: 399px;
             width: 251px;
             height: 1px;
-            background-color: #5183f5;
+            background-color: #273e68;
         }
         .line66 {
             position: absolute;
@@ -904,7 +1036,7 @@ export default {
             left: 377px;
             width: 1px;
             height: 194px;
-            background-color: #5183f5;
+            background-color: #273e68;
         }
         .line67 {
             position: absolute;
@@ -912,7 +1044,7 @@ export default {
             left: 377px;
             width: 154px;
             height: 1px;
-            background-color: #5183f5;
+            background-color: #273e68;
         }
         .line68 {
             position: absolute;
@@ -920,7 +1052,7 @@ export default {
             left: 346px;
             width: 1px;
             height: 227px;
-            background-color: #5183f5;
+            background-color: #273e68;
         }
         .line69 {
             position: absolute;
@@ -928,15 +1060,16 @@ export default {
             left: 348px;
             width: 181px;
             height: 1px;
-            background-color: #5183f5;
+            background-color: #273e68;
         }
         .line70 {
             position: absolute;
             top: 491px;
             left: 530px;
-            width: 20px;
+            width: 22px;
             height: 87px;
-            border: 1px solid #fff;
+            border: 2px solid #fff;
+            background-color: #b0c7d8;
         }
         .block4-tips {
             position: absolute;