<template>
    <div class="page">
        <div class="pipeline">
            <div class="pipeline_module">
                <!-- <div class="pipeline-module-header"> </div> -->
                <div class="pipeline_module_body">
                    <!-- 阀门 -->
                    <div class="valves">
                        <img :src="valveCloseImg" class="valve valve_pos1" />
                        <img :src="valveState ? valveOpenImg : valveCloseImg" class="valve valve_pos2"
                            @click="toggleValveState" />
                        <img :src="valveCloseImg" class="valve valve_pos3" />
                    </div>
                    <!-- <i class="el-icon-s-opportunity valve valve_pos1"></i> -->
                    <!-- 蓝色管道 -->
                    <div class="progress_blue">
                        <b-progress :value="100" variant="info" :striped="striped" :animated="animate"
                            class="progress rotate_270 progress_pos1"></b-progress>
                        <b-progress :value="100" variant="info" :striped="striped" :animated="animate"
                            class="progress  progress_pos2"></b-progress>
                        <b-progress :value="100" variant="info" :striped="striped" :animated="animate"
                            class="progress rotate_180 progress_pos3"></b-progress>
                        <b-progress :value="100" variant="info" :striped="striped" :animated="animate"
                            class="progress rotate_270 progress_pos4"></b-progress>
                        <b-progress :value="100" variant="info" :striped="striped" :animated="animate"
                            class="progress rotate_270 progress_pos5"></b-progress>
                        <b-progress :value="100" variant="info" :striped="striped" :animated="animate"
                            class="progress  progress_pos6"></b-progress>
                        <b-progress :value="100" variant="info" :striped="striped" :animated="animate"
                            class="progress rotate_270 progress_pos7"></b-progress>
                        <b-progress :value="100" variant="info" :striped="striped" :animated="animate"
                            class="progress rotate_180 progress_pos8"></b-progress>
                        <b-progress :value="100" variant="info" :striped="striped" :animated="animate"
                            class="progress rotate_270 progress_pos9"></b-progress>
                        <b-progress :value="100" variant="info" :striped="striped" :animated="animate"
                            class="progress rotate_270 progress_pos10"></b-progress>
                        <b-progress :value="100" variant="info" :striped="striped" :animated="animate"
                            class="progress rotate_270 progress_pos11"></b-progress>
                        <b-progress :value="100" variant="info" :striped="striped" :animated="animate"
                            class="progress rotate_270 progress_pos12"></b-progress>
                        <b-progress :value="100" variant="info" :striped="striped" :animated="animate"
                            class="progress rotate_180 progress_pos13"></b-progress>
                        <b-progress :value="100" variant="info" :striped="striped" :animated="animate"
                            class="progress rotate_270 progress_pos14"></b-progress>
                        <b-progress :value="100" variant="info" :striped="striped" :animated="animate"
                            class="progress rotate_270 progress_pos15"></b-progress>
                        <b-progress :value="100" variant="info" :striped="striped" :animated="animate"
                            class="progress rotate_270 progress_pos16"></b-progress>
                        <b-progress :value="100" variant="info" :striped="striped" :animated="animate"
                            class="progress  progress_pos17"></b-progress>
                        <b-progress :value="100" variant="info" :striped="striped" :animated="animate"
                            class="progress rotate_180 progress_pos18"></b-progress>
                        <b-progress :value="100" variant="info" :striped="striped" :animated="animate"
                            class="progress rotate_270 progress_pos19"></b-progress>
                    </div>

                    <!-- 黄色管道 -->
                    <div class="progress_yellow">
                        <b-progress :value="100" variant="warning" striped :animated="animate"
                            class="progress rotate_270 progress_pos20"></b-progress>
                        <b-progress :value="100" variant="warning" striped :animated="animate"
                            class="progress  progress_pos21"></b-progress>
                        <b-progress :value="100" variant="warning" striped :animated="animate"
                            class="progress rotate_180 progress_pos22"></b-progress>
                        <b-progress :value="100" variant="warning" striped :animated="animate"
                            class="progress rotate_180 progress_pos23"></b-progress>
                        <b-progress :value="100" variant="warning" striped :animated="animate"
                            class="progress rotate_270 progress_pos24"></b-progress>
                        <b-progress :value="100" variant="warning" striped :animated="animate"
                            class="progress rotate_270 progress_pos25"></b-progress>
                        <b-progress :value="100" variant="warning" striped :animated="animate"
                            class="progress rotate_270 progress_pos26"></b-progress>
                        <b-progress :value="100" variant="warning" striped :animated="animate"
                            class="progress rotate_270 progress_pos27"></b-progress>
                        <b-progress :value="100" variant="warning" striped :animated="animate"
                            class="progress rotate_270 progress_pos28"></b-progress>
                        <b-progress :value="100" variant="warning" striped :animated="animate"
                            class="progress progress_pos29"></b-progress>
                        <b-progress :value="100" variant="warning" striped :animated="animate"
                            class="progress  progress_pos30"></b-progress>
                        <b-progress :value="100" variant="warning" striped :animated="animate"
                            class="progress rotate_270 progress_pos31"></b-progress>
                        <b-progress :value="100" variant="warning" striped :animated="animate"
                            class="progress rotate_270 progress_pos32"></b-progress>
                        <b-progress :value="100" variant="warning" striped :animated="animate"
                            class="progress rotate_270 progress_pos33"></b-progress>
                        <b-progress :value="100" variant="warning" striped :animated="animate"
                            class="progress rotate_270 progress_pos34"></b-progress>
                        <b-progress :value="100" variant="warning" striped :animated="animate"
                            class="progress rotate_270 progress_pos35"></b-progress>
                        <b-progress :value="100" variant="warning" striped :animated="animate"
                            class="progress rotate_180 progress_pos36"></b-progress>
                        <b-progress :value="100" variant="warning" striped :animated="animate"
                            class="progress rotate_180 progress_pos37"></b-progress>
                        <b-progress :value="100" variant="warning" striped :animated="animate"
                            class="progress  progress_pos38"></b-progress>
                        <b-progress :value="100" variant="warning" striped :animated="animate"
                            class="progress rotate_270 progress_pos39"></b-progress>
                    </div>

                    <!-- 绿色管道 -->
                    <div class="progress_green">
                        <b-progress :value="100" variant="success" striped :animated="animate"
                            class="progress rotate_270 progress_pos40"></b-progress>
                        <b-progress :value="100" variant="success" striped :animated="animate"
                            class="progress rotate_270 progress_pos41"></b-progress>
                        <b-progress :value="100" variant="success" striped :animated="animate"
                            class="progress rotate_180 progress_pos42"></b-progress>
                        <b-progress :value="100" variant="success" striped :animated="animate"
                            class="progress  progress_pos43"></b-progress>
                        <b-progress :value="100" variant="success" striped :animated="animate"
                            class="progress rotate_270 progress_pos44"></b-progress>
                        <b-progress :value="100" variant="success" striped :animated="animate"
                            class="progress rotate_270 progress_pos45"></b-progress>
                        <b-progress :value="100" variant="success" striped :animated="animate"
                            class="progress rotate_270 progress_pos46"></b-progress>
                        <b-progress :value="100" variant="success" striped :animated="animate"
                            class="progress rotate_180 progress_pos47"></b-progress>
                        <b-progress :value="100" variant="success" striped :animated="animate"
                            class="progress  progress_pos48"></b-progress>
                        <b-progress :value="100" variant="success" striped :animated="animate"
                            class="progress rotate_180 progress_pos49"></b-progress>
                        <b-progress :value="100" variant="success" striped :animated="animate"
                            class="progress rotate_270 progress_pos50"></b-progress>
                    </div>

                    <div class="pipeline_module_body_top">
                        <div class="pipeline_bank">
                            <dv-percent-pond class="vertical-pond" :config="ponds[0]" style="width:80px;height:40px;" />
                        </div>
                        <div class="pipeline_bank">
                            <dv-percent-pond class="vertical-pond" :config="ponds[1]" style="width:80px;height:40px;" />
                        </div>
                    </div>
                    <div class="pipeline_module_body_middle">
                        <div class="pipeline_bank">
                            <dv-percent-pond class="vertical-pond" :config="ponds[2]" style="width:80px;height:40px;" />
                        </div>
                        <div class="pipeline_bank">
                            <dv-percent-pond class="vertical-pond" :config="ponds[3]" style="width:80px;height:40px;" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- <dv-percent-pond class="vertical-pond" :config="ponds[0]" style="width:80px;height:40px;" /> -->
        <b-progress :value="100" :striped="striped" :animated="animate" variant="success"
            class="progressTest"></b-progress>
    </div>

</template>

<script>


export default {
    data() {
        return {
            valveCloseImg: require('@/assets/dcs/pipeline/valveClose.svg'),
            valveOpenImg: require('@/assets/dcs/pipeline/valveOpen.svg'),
            ponds: [{ value: 20 }, { value: 30 }, { value: 50 }, { value: 0 }],
            striped: true,//是否显示条纹
            animate: true,//是否动画
            valveState: false,
        };
    },
    mounted() {
        // this.addWater(0);
    },
    methods: {
        //水量增加
        addWater(index) {
            //定时器用setTimeout
            setTimeout(() => {
                if (this.ponds[index].value < 100) {
                    this.$set(this.ponds, index, { value: this.ponds[index].value + 1 });
                    this.addWater(index);
                }
            }, 100);
        },
        //水量减少
        reduceWater(index) {
            //定时器用setTimeout
            setTimeout(() => {
                if (this.ponds[index].value > 0) {
                    this.$set(this.ponds, index, { value: this.ponds[index].value - 1 });
                    this.reduceWater(index);
                }
            }, 100);
        },
        //阀门状态切换
        toggleValveState() {
            this.valveState = !this.valveState;
        },
    },
};
</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 {
        width: 165px;
        height: 439px;

        .pipeline_module_body {
            position: relative;
            margin-top: 100px;
            width: 165px;
            height: 385px;
            background-color: #14406f;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly; //垂直居中
            z-index: 1;

            // 阀门
            .valves {
                .valve {
                    // color: red;
                    z-index: 100;
                    width: 18px;
                }

                //位置定位
                .valve_pos1 {
                    position: absolute;
                    top: -26px;
                    left: 104px;
                }

                .valve_pos2 {
                    position: absolute;
                    top: 35px;
                    left: 124px;
                }

                .valve_pos3 {
                    position: absolute;
                    top: 326px;
                    left: 123px;
                }
            }

            .pipeline_module_body_top,
            .pipeline_module_body_middle {
                height: 180px;
                display: flex;
                flex-direction: row;
                justify-content: center; //水平居中
                align-items: center; //垂直居中

                .pipeline_bank {
                    margin: 50px -5px;
                    z-index: 110;
                }

            }

            .pipeline_module_body_top {
                margin-top: -40px;
            }

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

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

            // 黄色管道
            ::v-deep .progress_yellow {
                .progress-bar-striped {
                    background-image: linear-gradient(45deg,
                            rgba(255, 255, 0, 0.5) 25%,
                            transparent 25%,
                            transparent 50%,
                            rgba(255, 255, 0, 0.5) 50%,
                            rgba(255, 255, 0, 0.5) 75%,
                            transparent 75%,
                            transparent) !important;
                    background-size: 1rem 1rem !important;
                }

                .progress-bar {
                    background-color: #FFA500 !important;
                    /* 橙色 */
                }
            }

            // 绿色管道
            ::v-deep .progress_green {
                .progress-bar-striped {
                    background-image: linear-gradient(45deg,
                            rgba(255, 255, 0, 0.5) 25%,
                            transparent 25%,
                            transparent 50%,
                            rgba(255, 255, 0, 0.5) 50%,
                            rgba(255, 255, 0, 0.5) 75%,
                            transparent 75%,
                            transparent) !important;
                    background-size: 1rem 1rem !important;
                }

            }

            .progress_pos1 {
                position: absolute;
                width: 70px;
                top: -8px;
                left: 73px;
            }

            .progress_pos2 {
                position: absolute;
                width: 50px;
                top: 28px;
                left: 57px;
            }

            .progress_pos3 {
                position: absolute;
                width: 24px;
                top: 28px;
                left: 106px;
            }

            .progress_pos4 {
                position: absolute;
                width: 29px;
                top: 42px;
                left: 44px;
            }

            .progress_pos5 {
                position: absolute;
                width: 29px;
                top: 42px;
                left: 114px;
            }

            .progress_pos6 {
                position: absolute;
                width: 92px;
                top: 15px;
                left: 18px;
            }

            .progress_pos7 {
                position: absolute;
                width: 200px;
                top: 116px;
                left: -81px;
            }

            .progress_pos8 {
                position: absolute;
                width: 105px;
                top: 214px;
                left: 20px;
            }

            .progress_pos9 {
                position: absolute;
                width: 29px;
                top: 230px;
                left: 43px;
            }

            .progress_pos10 {
                position: absolute;
                width: 35px;
                top: 230px;
                left: 108px;
            }

            .progress_pos11 {
                position: absolute;
                width: 29px;
                top: 148px;
                left: 44px;
            }

            .progress_pos12 {
                position: absolute;
                width: 29px;
                top: 148px;
                left: 114px;
            }

            .progress_pos13 {
                position: absolute;
                width: 85px;
                top: 161px;
                left: 58px;
            }

            .progress_pos14 {
                position: absolute;
                width: 184px;
                top: 252px;
                left: 51px;
            }

            .progress_pos15 {
                position: absolute;
                width: 24px;
                top: 334px;
                left: 47px;
            }

            .progress_pos16 {
                position: absolute;
                width: 21px;
                top: 333px;
                left: 117px;
            }

            .progress_pos17 {
                position: absolute;
                width: 48px;
                top: 345px;
                left: 60px;
            }

            .progress_pos18 {
                position: absolute;
                width: 37px;
                top: 345px;
                left: 108px;
            }

            .progress_pos19 {
                position: absolute;
                width: 70px;
                top: 379px;
                left: 73px;
            }

            // 黄色管道
            .progress_pos20 {
                position: absolute;
                width: 77px;
                top: -16px;
                left: 37px;
            }

            .progress_pos21 {
                position: absolute;
                width: 38px;
                top: 22px;
                left: 39px;
            }

            .progress_pos22 {
                position: absolute;
                width: 45px;
                top: 22px;
                left: 74px;
            }

            .progress_pos23 {
                position: absolute;
                width: 83px;
                top: 8px;
                left: 74px;
            }

            .progress_pos24 {
                position: absolute;
                width: 35px;
                top: 39px;
                left: 23px;
            }

            .progress_pos25 {
                position: absolute;
                width: 35px;
                top: 39px;
                left: 100px;
            }

            .progress_pos26 {
                position: absolute;
                width: 198px;
                top: 107px;
                left: 56px;
            }

            .progress_pos27 {
                position: absolute;
                width: 38px;
                top: 155px;
                left: 23px;
            }

            .progress_pos28 {
                position: absolute;
                width: 38px;
                top: 155px;
                left: 93px;
            }

            .progress_pos29 {
                position: absolute;
                width: 104px;
                top: 173px;
                left: 9px;
            }

            .progress_pos30 {
                position: absolute;
                width: 115px;
                top: 205px;
                left: 41px;
            }

            .progress_pos31 {
                position: absolute;
                width: 43px;
                top: 226px;
                left: 20px;
            }

            .progress_pos32 {
                position: absolute;
                width: 43px;
                top: 226px;
                left: 87px;
            }

            .progress_pos33 {
                position: absolute;
                width: 200px;
                top: 272px;
                left: -90px;
            }

            .progress_pos34 {
                position: absolute;
                width: 43px;
                top: 344px;
                left: 20px;
            }

            .progress_pos35 {
                position: absolute;
                width: 43px;
                top: 344px;
                left: 94px;
            }

            .progress_pos36 {
                position: absolute;
                width: 18px;
                top: 364px;
                left: 41px;
            }

            .progress_pos37 {
                position: absolute;
                width: 50px;
                top: 371px;
                left: 9px;
            }

            .progress_pos38 {
                position: absolute;
                width: 58px;
                top: 364px;
                left: 57px;
            }

            .progress_pos39 {
                position: absolute;
                width: 77px;
                top: 402px;
                left: 21px;
            }

            // 绿色管道
            .progress_pos40 {
                position: absolute;
                width: 29px;
                top: 175px;
                left: 44px;
            }

            .progress_pos41 {
                position: absolute;
                width: 29px;
                top: 175px;
                left: 114px;
            }

            .progress_pos42 {
                position: absolute;
                width: 27px;
                top: 189px;
                left: 57px;
            }

            .progress_pos43 {
                position: absolute;
                width: 46px;
                top: 189px;
                left: 84px;
            }

            .progress_pos44 {
                position: absolute;
                width: 189px;
                top: 282px;
                left: -10px;
            }

            .progress_pos45 {
                position: absolute;
                width: 12px;
                top: 351px;
                left: 53px;
            }

            .progress_pos46 {
                position: absolute;
                width: 12px;
                top: 351px;
                left: 121px;
            }

            .progress_pos47 {
                position: absolute;
                width: 27px;
                top: 357px;
                left: 57px;
            }

            .progress_pos48 {
                position: absolute;
                width: 45px;
                top: 357px;
                left: 84px;
            }

            .progress_pos49 {
                position: absolute;
                width: 26px;
                top: 375px;
                left: 84px;
            }

            .progress_pos50 {
                position: absolute;
                width: 45px;
                top: 395px;
                left: 86px;
            }


        }
    }

}

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

}

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



//进度条（管道）
.progress {
    height: 3px;
    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 .progressTest .progress-bar-striped {
    background-image: linear-gradient(45deg,
            rgba(255, 255, 0, 0.5) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 0, 0.5) 50%,
            rgba(255, 255, 0, 0.5) 75%,
            transparent 75%,
            transparent) !important;
    background-size: 1rem 1rem !important;
}
</style>