DCS-ruoyi/ruoyi-ui/src/views/dcs/eqHome/eq4.vue

<template>
    <div class="page">
        <div class="pipeline">
            <div class="pipeline_module">
                <div class="tanks">
                    <dv-percent-pond class="vertical_pond pond_pos1" :config="{ value: pondValue, lineDash }"
                        style="width:270px;height:100px;" />
                    <dv-percent-pond class="vertical_pond pond_pos2" :config="{ value: pondValue, lineDash }"
                        style="width:270px;height:100px;" />
                    <dv-percent-pond class="vertical_pond pond_pos3" :config="{ value: pondValue, lineDash }"
                        style="width:270px;height:100px;" />
                    <dv-percent-pond class="vertical_pond pond_pos4" :config="{ value: pondValue, lineDash }"
                        style="width:270px;height:100px;" />
                </div>
                <!-- 蓝色管道 -->
                <div class="progress_blue">
                    <b-progress :value="100" striped :animated="upInWaterState"
                        class=" rotate_270 progress progress_pos1"></b-progress>
                    <b-progress :value="100" striped :animated="upInWaterState"
                        class=" rotate_270 progress progress_pos2"></b-progress>
                    <b-progress :value="100" striped :animated="upInWaterState"
                        class=" rotate_270 progress progress_pos3"></b-progress>
                    <b-progress :value="100" striped :animated="upInWaterState"
                        class=" rotate_270 progress progress_pos4"></b-progress>
                    <b-progress :value="100" striped :animated="upInWaterState"
                        class=" rotate_180 progress progress_pos5"></b-progress>
                    <b-progress :value="100" striped :animated="upInWaterState || downInWaterState"
                        class=" rotate_270 progress progress_pos6"></b-progress>
                    <b-progress :value="100" striped :animated="upInWaterState"
                        class=" rotate_270 progress progress_pos7"></b-progress>
                    <b-progress :value="100" striped :animated="upInWaterState || outWaterState"
                        class=" rotate_90 progress progress_pos8"
                        :class="{ 'rotate_270': outWaterState, 'progress_green': outWaterState }"></b-progress>
                    <b-progress :value="100" striped :animated="upInWaterState || outWaterState"
                        class=" rotate_90 progress progress_pos9"
                        :class="{ 'rotate_270': outWaterState, 'progress_green': outWaterState }"></b-progress>
                    <b-progress :value="100" striped :animated="upInWaterState || outWaterState"
                        class=" rotate_90 progress progress_pos10"
                        :class="{ 'rotate_270': outWaterState, 'progress_green': outWaterState }"></b-progress>
                    <b-progress :value="100" striped :animated="upInWaterState || outWaterState"
                        class=" rotate_90 progress progress_pos11"
                        :class="{ 'rotate_270': outWaterState, 'progress_green': outWaterState }"></b-progress>
                    <b-progress :value="100" striped :animated="upInWaterState"
                        class=" rotate_180 progress progress_pos12"></b-progress>
                    <b-progress :value="100" striped :animated="upInWaterState || downInWaterState"
                        class=" rotate_180 progress progress_pos34"></b-progress>

                </div>
                <!-- 黄色管道（气管） -->
                <div class="progress_yellow">
                    <b-progress :value="100" striped :animated="upInGasState"
                        class=" rotate_270 progress progress_pos13"></b-progress>
                    <b-progress :value="100" striped :animated="upInGasState"
                        class=" rotate_270 progress progress_pos14"></b-progress>
                    <b-progress :value="100" striped :animated="upInGasState"
                        class=" rotate_270 progress progress_pos15"></b-progress>
                    <b-progress :value="100" striped :animated="upInGasState"
                        class=" rotate_270 progress progress_pos16"></b-progress>
                    <b-progress :value="100" striped :animated="upInGasState"
                        class="  progress progress_pos17"></b-progress>
                    <b-progress :value="100" striped :animated="downInGasState"
                        class=" rotate_270 progress progress_pos18"></b-progress>
                    <b-progress :value="100" striped :animated="downInGasState"
                        class=" rotate_90 progress progress_pos19"></b-progress>
                    <b-progress :value="100" striped :animated="downInGasState"
                        class=" rotate_90 progress progress_pos20"></b-progress>
                    <b-progress :value="100" striped :animated="downInGasState"
                        class=" rotate_90 progress progress_pos21"></b-progress>
                    <b-progress :value="100" striped :animated="downInGasState"
                        class=" rotate_90 progress progress_pos22"></b-progress>
                    <b-progress :value="100" striped :animated="downInGasState"
                        class="  progress progress_pos23"></b-progress>
                    <b-progress :value="100" striped :animated="upInGasState || downInGasState"
                        class=" progress progress_pos35"></b-progress>


                </div>
                <!-- 淡蓝色管道（上排水） -->
                <div class="progress_blue_light">
                    <b-progress :value="100" striped :animated="upInWaterState || downInWaterState"
                        class=" rotate_90 progress progress_pos24"></b-progress>
                    <b-progress :value="100" striped :animated="upInWaterState || downInWaterState"
                        class=" rotate_90 progress progress_pos25"></b-progress>
                    <b-progress :value="100" striped :animated="upInWaterState || downInWaterState"
                        class=" rotate_90 progress progress_pos26"></b-progress>
                    <b-progress :value="100" striped :animated="upInWaterState || downInWaterState"
                        class=" rotate_90 progress progress_pos27"></b-progress>
                    <b-progress :value="100" striped :animated="upInWaterState || downInWaterState"
                        class="  progress progress_pos28"></b-progress>

                </div>
                <!-- 绿色管道（下排水） -->
                <div class="progress_green">
                    <b-progress :value="100" striped :animated="outWaterState"
                        class=" rotate_270 progress progress_pos29"></b-progress>
                    <b-progress :value="100" striped :animated="outWaterState"
                        class=" rotate_270 progress progress_pos30"></b-progress>
                    <b-progress :value="100" striped :animated="outWaterState"
                        class=" rotate_270 progress progress_pos31"></b-progress>
                    <b-progress :value="100" striped :animated="outWaterState"
                        class=" rotate_270 progress progress_pos32"></b-progress>
                    <b-progress :value="100" striped :animated="outWaterState"
                        class=" rotate_180 progress progress_pos33"></b-progress>

                </div>
                <!-- 阀门 -->
                <div class="valves">

                </div>

            </div>
        </div>
    </div>

</template>

<script>


export default {
    data() {
        return {
            //水库容量
            pondValue: 20,
            lineDash: [100, 0],//罐内水位线条样式
            interval: null,//定时器
            // animate: true,//是否动画
            //阀门状态数组
            upInWaterState: false,//上进水阀门状态
            downInWaterState: false,//下进水阀门状态
            outWaterState: false,//出水阀门状态
            upInGasState: false,//上进气阀门状态
            downInGasState: false,//下进气阀门状态
        };
    },
    mounted() {
        this.getValveState();
    },
    methods: {
        //获取阀门状态
        getValveState() {
            this.upInWaterState = this.$route.query.upInWaterState;
            this.downInWaterState = this.$route.query.downInWaterState;
            this.outWaterState = this.$route.query.outWaterState;
            this.upInGasState = this.$route.query.upInGasState;
            this.downInGasState = this.$route.query.downInGasState;
            if (this.upInWaterState || this.downInWaterState) {
                this.addWater();
            }
            if (this.outWaterState) {
                this.reduceWater();
            }
        },
        //水量增加
        addWater() {
            this.clearWaterInterval();
            this.interval = setInterval(() => {
                if (this.pondValue < 100) {
                    this.pondValue += 1;
                } else {
                    this.pondValue = 0;
                }
            }, 100);
        },
        //水量减少
        reduceWater() {
            this.clearWaterInterval();
            this.interval = setInterval(() => {
                if (this.pondValue > 0) {
                    this.pondValue -= 1;
                } else {
                    this.pondValue = 100;
                }
            }, 100);
        },
        //清除定时器
        clearWaterInterval() {
            clearInterval(this.interval);
            this.interval = null;
        },

    },
};
</script>

<style scoped lang="scss">
// .page {
//     width: 1920px;
//     height: 1080px;
// }

.pipeline {
    width: 1000px;
    height: 571px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;

    .pipeline_module {
        margin-top: 100px;
        width: 700px;
        height: 400px;
        position: relative;

        .tanks {

            .vertical_pond {
                z-index: 110;
                transform: rotate(-90deg);
                /* 逆时针旋转90度 */
                transform-origin: 50% 50%;
                /* 设置旋转中心点 */
            }

            ::v-deep .dv-percent-pond text {
                display: none; //隐藏文字
            }

            .pond_pos1 {
                left: -50px;
                top: 155px;
            }

            .pond_pos2 {
                left: 120px;
                top: 55px;
            }

            .pond_pos3 {
                left: 290px;
                top: -45px;
            }

            .pond_pos4 {
                left: 460px;
                top: -145px;
            }


        }

        //进度条（管道）
        .progress {
            height: 8px;
            z-index: 10;
        }

        //旋转角度
        .rotate_90 {
            transform: rotate(90deg); //顺时针旋转90度
            transform-origin: 50% 50%;
        }

        .rotate_180 {
            transform: rotate(180deg); //顺时针旋转180度
            transform-origin: 50% 50%;
        }

        .rotate_270 {
            transform: rotate(-90deg); //顺时针旋转270度
            transform-origin: 50% 50%;
        }

        // 蓝色管道
        ::v-deep .progress_blue {
            .progress-bar-striped {
                background-image: linear-gradient(-45deg, transparent 50%, #0088ff 50%),
                    linear-gradient(-135deg, transparent 50%, #0088ff 50%);
                background-size: 15px;
                // background-position: 0 0, 0.5rem 0.5rem;
            }

            .progress-bar {
                background-color: #edeef0;
            }
        }


        // 黄色管道
        ::v-deep .progress_yellow {
            .progress-bar-striped {
                background-image: linear-gradient(-45deg, transparent 50%, #FFA500 50%),
                    linear-gradient(-135deg, transparent 50%, #FFA500 50%);
                background-size: 15px;
                // background-position: 0 0, 0.5rem 0.5rem;
            }

            .progress-bar {
                background-color: #edeef0 !important;
            }
        }

        //淡蓝色管道
        ::v-deep .progress_blue_light {
            .progress-bar-striped {
                background-image: linear-gradient(45deg,
                        rgba(254, 254, 248, 1) 25%,
                        transparent 25%,
                        transparent 50%,
                        rgba(254, 254, 248, 1) 50%,
                        rgba(254, 254, 248, 1) 75%,
                        transparent 75%,
                        transparent) !important;
                background-size: 1rem 1rem !important;
            }

            .progress-bar {
                background-color: #60ccf0 !important;
                /* 蓝色 */
            }
        }


        // 绿色管道
        ::v-deep .progress_green {
            .progress-bar-striped {
                background-image: linear-gradient(-45deg, transparent 50%, #3ea934 50%),
                    linear-gradient(-135deg, transparent 50%, #3ea934 50%) !important;
                background-size: 8px;
                // background-position: 0 0, 0.5rem 0.5rem;
            }

            .progress-bar {
                background-color: #edeef0 !important;
            }

        }

        .valves {
            .color_green {
                color: greenyellow !important;
            }

            .valve {
                color: #c4c6cc;
                z-index: 110;
            }

            // 阀门定位

        }


        //管道定位
        // 蓝色管道定位
        .progress_blue {
            .progress {
                z-index: 20; //管道层级
            }

            .rotate_90 {
                z-index: 21 !important; //管道层级
            }

            .progress_pos1 {
                position: absolute;
                left: 63px;
                top: 42px;
                width: 50px;
            }

            .progress_pos2 {
                position: absolute;
                left: 234px;
                top: 42px;
                width: 50px;
            }

            .progress_pos3 {
                position: absolute;
                left: 402px;
                top: 42px;
                width: 50px;
            }

            .progress_pos4 {
                position: absolute;
                left: 572px;
                top: 42px;
                width: 50px;
            }

            .progress_pos5 {
                position: absolute;
                left: 10px;
                top: 20px;
                width: 591px;
            }

            .progress_pos6 {
                position: absolute;
                left: -61px;
                top: -1px;
                width: 50px;
            }

            .progress_pos7 {
                position: absolute;
                left: -170px;
                top: 200px;
                width: 368px;
            }

            .progress_pos8 {
                position: absolute;
                left: 61px;
                top: 362px;
                width: 52px;
            }

            .progress_pos9 {
                position: absolute;
                left: 231px;
                top: 362px;
                width: 52px;
            }

            .progress_pos10 {
                position: absolute;
                left: 401px;
                top: 362px;
                width: 52px;
            }

            .progress_pos11 {
                position: absolute;
                left: 571px;
                top: 362px;
                width: 52px;
            }

            .progress_pos12 {
                position: absolute;
                left: 10px;
                top: 383px;
                width: 591px;
            }

            .progress_pos34 {
                position: absolute;
                left: -40px;
                top: 20px;
                width: 60px;
            }





        }

        // 黄色管道定位
        .progress_yellow {
            .progress {
                z-index: 10; //管道层级
            }

            .progress_pos13 {
                position: absolute;
                left: 82px;
                top: 33px;
                width: 70px;
            }

            .progress_pos14 {
                position: absolute;
                left: 252px;
                top: 33px;
                width: 70px;
            }

            .progress_pos15 {
                position: absolute;
                left: 422px;
                top: 33px;
                width: 70px;
            }

            .progress_pos16 {
                position: absolute;
                left: 592px;
                top: 33px;
                width: 70px;
            }

            .progress_pos17 {
                position: absolute;
                left: 113px;
                top: 1px;
                width: 565px;
            }

            .progress_pos18 {
                position: absolute;
                left: 468px;
                top: 204px;
                width: 410px;
            }

            .progress_pos19 {
                position: absolute;
                left: 529px;
                top: 371px;
                width: 74px;
            }

            .progress_pos20 {
                position: absolute;
                left: 363px;
                top: 371px;
                width: 74px;
            }

            .progress_pos21 {
                position: absolute;
                left: 192px;
                top: 371px;
                width: 74px;
            }

            .progress_pos22 {
                position: absolute;
                left: 24px;
                top: 371px;
                width: 74px;
            }

            .progress_pos23 {
                position: absolute;
                left: 58px;
                top: 405px;
                width: 618px;
            }

            .progress_pos35 {
                position: absolute;
                left: 670px;
                top: 1px;
                width: 100px;
            }



        }

        //淡蓝色管道定位
        .progress_blue_light {
            .progress {
                z-index: 30; //管道层级
            }

            .progress_pos24 {
                position: absolute;
                left: 13px;
                top: 23px;
                width: 90px;
            }

            .progress_pos25 {
                position: absolute;
                left: 184px;
                top: 23px;
                width: 90px;
            }

            .progress_pos26 {
                position: absolute;
                left: 354px;
                top: 23px;
                width: 90px;
            }

            .progress_pos27 {
                position: absolute;
                left: 524px;
                top: 23px;
                width: 90px;
            }

            .progress_pos28 {
                position: absolute;
                left: -3px;
                top: -18px;
                width: 576px;
            }



        }

        .progress_green {
            .progress {
                z-index: 40; //管道层级
            }

            .progress_pos29 {
                position: absolute;
                left: 62px;
                top: 411px;
                width: 50px;
            }

            .progress_pos30 {
                position: absolute;
                left: 232px;
                top: 411px;
                width: 50px;
            }

            .progress_pos31 {
                position: absolute;
                left: 402px;
                top: 411px;
                width: 50px;
            }

            .progress_pos32 {
                position: absolute;
                left: 572px;
                top: 411px;
                width: 50px;
            }

            .progress_pos33 {
                position: absolute;
                left: 84px;
                top: 433px;
                width: 688px;
            }


        }

    }

}
</style>