<template>
    <div class="page">
        <div class="pipeline">
            <div class="pipeline_module">
                <div class="tanks">
                    <!-- 罐体 -->
                     <div v-for="(index) in 10" :key="index"  @click="handleClickTank" > 
                        <dv-percent-pond  class="vertical_pond"
                        :config="{ value: pondValue, lineDash }" style="width:120px;height:60px;"
                        ></dv-percent-pond>
                     </div>
                </div>
                <!-- 蓝色管道 -->
                <div class="progress_blue">
                    <b-progress :value="100" striped :animated="upInWaterState"
                        class=" rotate_180 progress progress_pos1"></b-progress>
                    <b-progress :value="100" striped :animated="upInWaterState"
                        class=" rotate_90 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_270 progress progress_pos5"></b-progress>
                    <b-progress :value="100" striped :animated="upInWaterState"
                        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"
                        class=" rotate_270 progress progress_pos8"></b-progress>
                    <b-progress :value="100" striped :animated="upInWaterState"
                        class=" rotate_180 progress progress_pos9"></b-progress>
                    <b-progress :value="100" striped :animated="upInWaterState"
                        class=" rotate_270 progress progress_pos10"></b-progress>
                    <b-progress :value="100" striped :animated="upInWaterState"
                        class=" rotate_270 progress progress_pos11"></b-progress>
                    <b-progress :value="100" striped :animated="upInWaterState"
                        class=" rotate_270 progress progress_pos12"></b-progress>
                    <b-progress :value="100" striped :animated="upInWaterState"
                        class=" rotate_270 progress progress_pos13"></b-progress>
                    <b-progress :value="100" striped :animated="upInWaterState"
                        class=" rotate_270 progress progress_pos14"></b-progress>
                    <b-progress :value="100" striped :animated="upInWaterState || downInWaterState"
                        class=" rotate_180 progress progress_pos15"></b-progress>
                    <b-progress :value="100" striped :animated="downInWaterState"
                        class=" rotate_270 progress progress_pos16"></b-progress>
                    <b-progress :value="100" striped :animated="downInWaterState"
                        class=" rotate_180 progress progress_pos17"></b-progress>
                    <b-progress :value="100" striped :animated="downInWaterState || outWaterState"
                        class=" rotate_90 progress progress_pos18"
                        :class="{ 'rotate_270': outWaterState, 'progress_green': outWaterState }"></b-progress>
                    <b-progress :value="100" striped :animated="downInWaterState || outWaterState"
                        class=" rotate_90 progress progress_pos19"
                        :class="{ 'rotate_270': outWaterState, 'progress_green': outWaterState }"></b-progress>
                    <b-progress :value="100" striped :animated="downInWaterState || outWaterState"
                        class=" rotate_90 progress progress_pos20"
                        :class="{ 'rotate_270': outWaterState, 'progress_green': outWaterState }"></b-progress>
                    <b-progress :value="100" striped :animated="downInWaterState || outWaterState"
                        class=" rotate_90 progress progress_pos21"
                        :class="{ 'rotate_270': outWaterState, 'progress_green': outWaterState }"></b-progress>
                    <b-progress :value="100" striped :animated="downInWaterState || outWaterState"
                        class=" rotate_90 progress progress_pos22"
                        :class="{ 'rotate_270': outWaterState, 'progress_green': outWaterState }"></b-progress>
                    <b-progress :value="100" striped :animated="downInWaterState"
                        class=" rotate_90 progress progress_pos23"></b-progress>
                    <b-progress :value="100" striped :animated="downInWaterState"
                        class="  progress progress_pos24"></b-progress>
                    <b-progress :value="100" striped :animated="downInWaterState || outWaterState"
                        class=" rotate_90 progress progress_pos25"
                        :class="{ 'rotate_270': outWaterState, 'progress_green': outWaterState }"></b-progress>
                    <b-progress :value="100" striped :animated="downInWaterState || outWaterState"
                        class=" rotate_90 progress progress_pos26"
                        :class="{ 'rotate_270': outWaterState, 'progress_green': outWaterState }"></b-progress>
                    <b-progress :value="100" striped :animated="downInWaterState || outWaterState"
                        class=" rotate_90 progress progress_pos27"
                        :class="{ 'rotate_270': outWaterState, 'progress_green': outWaterState }"></b-progress>
                    <b-progress :value="100" striped :animated="downInWaterState || outWaterState"
                        class=" rotate_90 progress progress_pos28"
                        :class="{ 'rotate_270': outWaterState, 'progress_green': outWaterState }"></b-progress>
                    <b-progress :value="100" striped :animated="downInWaterState || outWaterState"
                        class=" rotate_90 progress progress_pos29"
                        :class="{ 'rotate_270': outWaterState, 'progress_green': outWaterState }"></b-progress>
                    <b-progress :value="100" striped :animated="upInWaterState || downInWaterState"
                        class="rotate_180 progress progress_pos91"></b-progress>
                    <b-progress :value="100" striped :animated="upInWaterState || downInWaterState"
                        class="rotate_180 progress progress_pos92"></b-progress>
                    <b-progress :value="100" striped :animated="upInWaterState || downInWaterState"
                        class="rotate_180 progress progress_pos93"></b-progress>
                    <b-progress :value="100" striped :animated="upInWaterState || downInWaterState"
                        class="rotate_180 progress progress_pos94"></b-progress>
                    <b-progress :value="100" striped :animated="upInWaterState || downInWaterState"
                        class="rotate_180 progress progress_pos95"></b-progress>
                    <b-progress :value="100" striped :animated="upInWaterState || downInWaterState"
                        class="rotate_270 progress progress_pos96"></b-progress>
                    <b-progress :value="100" striped :animated="upInWaterState || downInWaterState"
                        class="rotate_90 progress progress_pos97"></b-progress>

                </div>
                <!-- 黄色管道（气管） -->
                <div class="progress_yellow">
                    <b-progress :value="100" striped :animated="upInGasState"
                        class=" progress progress_pos30"></b-progress>
                    <b-progress :value="100" striped :animated="upInGasState"
                        class=" rotate_270 progress progress_pos31"></b-progress>
                    <b-progress :value="100" striped :animated="upInGasState"
                        class=" rotate_270 progress progress_pos32"></b-progress>
                    <b-progress :value="100" striped :animated="upInGasState"
                        class=" rotate_270 progress progress_pos33"></b-progress>
                    <b-progress :value="100" striped :animated="upInGasState"
                        class=" rotate_270 progress progress_pos34"></b-progress>
                    <b-progress :value="100" striped :animated="upInGasState"
                        class=" rotate_270 progress progress_pos35"></b-progress>
                    <b-progress :value="100" striped :animated="upInGasState"
                        class=" rotate_270 progress progress_pos36"></b-progress>
                    <b-progress :value="100" striped :animated="downInGasState"
                        class=" rotate_270 progress progress_pos37"></b-progress>
                    <b-progress :value="100" striped :animated="upInGasState"
                        class=" progress progress_pos38"></b-progress>
                    <b-progress :value="100" striped :animated="upInGasState"
                        class=" rotate_270 progress progress_pos39"></b-progress>
                    <b-progress :value="100" striped :animated="upInGasState"
                        class=" rotate_270 progress progress_pos40"></b-progress>
                    <b-progress :value="100" striped :animated="upInGasState"
                        class=" rotate_270 progress progress_pos41"></b-progress>
                    <b-progress :value="100" striped :animated="upInGasState"
                        class=" rotate_270 progress progress_pos42"></b-progress>
                    <b-progress :value="100" striped :animated="upInGasState"
                        class=" rotate_270 progress progress_pos43"></b-progress>
                    <b-progress :value="100" striped :animated="downInGasState"
                        class=" progress progress_pos44"></b-progress>
                    <b-progress :value="100" striped :animated="downInGasState"
                        class=" rotate_90 progress progress_pos45"></b-progress>
                    <b-progress :value="100" striped :animated="downInGasState"
                        class=" rotate_90 progress progress_pos46"></b-progress>
                    <b-progress :value="100" striped :animated="downInGasState"
                        class=" rotate_90 progress progress_pos47"></b-progress>
                    <b-progress :value="100" striped :animated="downInGasState"
                        class=" rotate_90 progress progress_pos48"></b-progress>
                    <b-progress :value="100" striped :animated="downInGasState"
                        class=" rotate_90 progress progress_pos49"></b-progress>
                    <b-progress :value="100" striped :animated="downInGasState"
                        class=" rotate_90 progress progress_pos50"></b-progress>
                    <b-progress :value="100" striped :animated="downInGasState"
                        class=" rotate_180 progress progress_pos51"></b-progress>
                    <b-progress :value="100" striped :animated="downInGasState"
                        class=" rotate_90 progress progress_pos52"></b-progress>
                    <b-progress :value="100" striped :animated="downInGasState"
                        class=" rotate_90 progress progress_pos53"></b-progress>
                    <b-progress :value="100" striped :animated="downInGasState"
                        class=" rotate_90 progress progress_pos54"></b-progress>
                    <b-progress :value="100" striped :animated="downInGasState"
                        class=" rotate_90 progress progress_pos55"></b-progress>
                    <b-progress :value="100" striped :animated="downInGasState"
                        class=" rotate_90 progress progress_pos56"></b-progress>
                    <b-progress :value="100" striped :animated="upInGasState || downInGasState"
                        class=" progress progress_pos98"></b-progress>
                </div>
                <!-- 淡蓝色管道（上排水） -->
                <div class="progress_blue_light">
                    <b-progress :value="100" striped :animated="upInWaterState || downInWaterState"
                        class=" progress rotate_90 progress_pos57"></b-progress>
                    <b-progress :value="100" striped :animated="upInWaterState || downInWaterState"
                        class=" rotate_90 progress progress_pos58"></b-progress>
                    <b-progress :value="100" striped :animated="upInWaterState || downInWaterState"
                        class=" rotate_90 progress progress_pos59"></b-progress>
                    <b-progress :value="100" striped :animated="upInWaterState || downInWaterState"
                        class=" rotate_90 progress progress_pos60"></b-progress>
                    <b-progress :value="100" striped :animated="upInWaterState || downInWaterState"
                        class=" rotate_90 progress progress_pos61"></b-progress>
                    <b-progress :value="100" striped :animated="upInWaterState || downInWaterState"
                        class="  progress progress_pos62"></b-progress>
                    <b-progress :value="100" striped :animated="upInWaterState || downInWaterState"
                        class=" rotate_270 progress progress_pos63"></b-progress>
                    <b-progress :value="100" striped :animated="upInWaterState || downInWaterState"
                        class="  progress progress_pos64"></b-progress>
                    <b-progress :value="100" striped :animated="upInWaterState || downInWaterState"
                        class=" progress progress_pos65"></b-progress>
                    <b-progress :value="100" striped :animated="upInWaterState || downInWaterState"
                        class=" rotate_90 progress progress_pos66"></b-progress>
                    <b-progress :value="100" striped :animated="upInWaterState || downInWaterState"
                        class=" rotate_90 progress progress_pos67"></b-progress>
                    <b-progress :value="100" striped :animated="upInWaterState || downInWaterState"
                        class=" rotate_90 progress progress_pos68"></b-progress>
                    <b-progress :value="100" striped :animated="upInWaterState || downInWaterState"
                        class=" rotate_90 progress progress_pos69"></b-progress>
                    <b-progress :value="100" striped :animated="upInWaterState || downInWaterState"
                        class=" rotate_90 progress progress_pos70"></b-progress>
                </div>
                <!-- 绿色管道（下排水） -->
                <div class="progress_green">
                    <b-progress :value="100" striped :animated="outWaterState"
                        class="rotate_270 progress progress_pos71"></b-progress>
                    <b-progress :value="100" striped :animated="outWaterState"
                        class=" rotate_270 progress progress_pos72"></b-progress>
                    <b-progress :value="100" striped :animated="outWaterState"
                        class=" rotate_270 progress progress_pos73"></b-progress>
                    <b-progress :value="100" striped :animated="outWaterState"
                        class=" rotate_270 progress progress_pos74"></b-progress>
                    <b-progress :value="100" striped :animated="outWaterState"
                        class=" rotate_270 progress progress_pos75"></b-progress>
                    <b-progress :value="100" striped :animated="outWaterState"
                        class=" rotate_180 progress progress_pos76"></b-progress>
                    <b-progress :value="100" striped :animated="outWaterState"
                        class=" rotate_270 progress progress_pos77"></b-progress>
                    <b-progress :value="100" striped :animated="outWaterState"
                        class=" rotate_180 progress progress_pos78"></b-progress>
                    <b-progress :value="100" striped :animated="outWaterState"
                        class=" progress rotate_270 progress_pos79"></b-progress>
                    <b-progress :value="100" striped :animated="outWaterState"
                        class=" rotate_270 progress progress_pos80"></b-progress>
                    <b-progress :value="100" striped :animated="outWaterState"
                        class=" rotate_270 progress progress_pos81"></b-progress>
                    <b-progress :value="100" striped :animated="outWaterState"
                        class=" rotate_270 progress progress_pos82"></b-progress>
                    <b-progress :value="100" striped :animated="outWaterState"
                        class=" rotate_270 progress progress_pos83"></b-progress>
                    <b-progress :value="100" striped :animated="outWaterState"
                        class=" rotate_90 progress progress_pos84"></b-progress>
                    <b-progress :value="100" striped :animated="outWaterState"
                        class=" rotate_180 progress progress_pos85"></b-progress>
                    <b-progress :value="100" striped :animated="outWaterState"
                        class=" rotate_180 progress progress_pos86"></b-progress>
                    <b-progress :value="100" striped :animated="outWaterState"
                        class=" rotate_180 progress progress_pos87"></b-progress>
                    <b-progress :value="100" striped :animated="outWaterState"
                        class=" rotate_180 progress progress_pos88"></b-progress>
                    <b-progress :value="100" striped :animated="outWaterState"
                        class=" rotate_180 progress progress_pos89"></b-progress>
                    <b-progress :value="100" striped :animated="outWaterState"
                        class=" rotate_180 progress progress_pos90"></b-progress>

                </div>
                <!-- 阀门 -->
                <div class="valves">
                    <!-- 水阀门 -->
                    <!-- <i v-for="(item, index) in 16" :key="index" :class="['iconfont', index < 2 ? 'icon-waterValve rotate_270' : 'icon-waterValve',
                        `valve valve_pos${index + 1}`, { 'color_green': valveStateArr[index] }]"
                        @click="handleClick(index)"></i> -->
                    <!-- 上进水阀门 -->
                    <i class="iconfont icon-waterValve rotate_270 valve valve_pos1"
                        :class="{ 'color_green': upInWaterState }" @click="handleClickWaterValve(1)"></i>
                    <!-- 下进水阀门 -->
                    <i class="iconfont icon-waterValve rotate_270 valve valve_pos2"
                        :class="{ 'color_green': downInWaterState }" @click="handleClickWaterValve(2)"></i>
                    <!-- 出水阀门 -->
                    <i class="iconfont icon-waterValve valve valve_pos10" :class="{ 'color_green': outWaterState }"
                        @click="handleClickWaterValve(0)"></i>
                    <!-- 左6个水阀门 -->
                    <i v-for="(item, index) in 6" :key="index + 2" class="iconfont icon-waterValve valve" :class="[
                        `valve_pos${index + 3}`, { 'color_green': valveStateArr[index + 2] }]"
                        @click="handleClick(index + 2)"></i>
                    <!-- 上排水阀门 -->
                    <i class="iconfont icon-waterValve valve valve_pos9" :class="{ 'color_green': valveStateArr[8] }"
                        @click="handleClick(8)"></i>
                    <!-- 右6个水阀门 -->
                    <i v-for="(item, index) in 6" :key="index + 10" :class="['iconfont', 'icon-waterValve',
                        `valve valve_pos${index + 11}`, { 'color_green': valveStateArr[index + 10] }]"
                        @click="handleClick(index + 10)"></i>
                    <!-- 气阀门 -->
                    <i v-for="(item, index) in 2" :key="index + 16"
                        :class="['iconfont', index === 0 ? 'icon-gasValve' : 'icon-gasValve rotate_90',
                            `valve valve_pos${index + 17}`, { 'color_green': index === 0 ? upInGasState : downInGasState }]"
                        @click="handleClickGasValve(index)"></i>
                </div>
                <div class="meters">
                    <!-- 流量计 -->
                    <i class="iconfont icon-flowmeter meter meter_pos1"></i>
                </div>
            </div>
        </div>
    </div>

</template>

<script>


export default {
    data() {
        return {
            //水库容量
            pondValue: 20,
            lineDash: [100, 0],//罐内水位线条样式
            interval: null,//定时器
            // animate: true,//是否动画
            //阀门状态数组
            valveStateArr: Array(18).fill(false),
            upInWaterState: false,//上进水阀门状态
            downInWaterState: false,//下进水阀门状态
            outWaterState: false,//出水阀门状态
            upInGasState: false,//上进气阀门状态
            downInGasState: false,//下进气阀门状态
        };
    },
    mounted() {
        // this.addWater();
    },
    methods: {
        //点击罐体事件
        handleClickTank() {
            // console.log('点击罐体');
            //跳转到四罐体页面，携带当前页面的阀门状态
            this.$router.push({ name: 'eq4', query: { upInWaterState: this.upInWaterState, downInWaterState: this.downInWaterState, outWaterState: this.outWaterState, upInGasState: this.upInGasState, downInGasState: this.downInGasState } });
        },
        //水量增加
        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;
        },
        //阀门点击事件（暂时无用）
        handleClick(index) {
            this.$set(this.valveStateArr, index, !this.valveStateArr[index]);
            // console.log(index);
            // switch (index) {
            //     //上进水，下进水和出水阀门
            //     case 0:
            //     case 1:
            //     case 9:
            //         if (!this.valveStateArr[index]) {//开阀门
            //             // 关闭所有上进水、下进水和出水阀门，然后开启当前选择的阀门
            //             [0, 1, 9].forEach(i => this.valveStateArr[i] = i === index);
            //             break;
            //         }
            //     //上进气，下进气阀门
            //     case 16:
            //     case 17:
            //         if (!this.valveStateArr[index]) {
            //             [16, 17].forEach(i => this.valveStateArr[i] = i === index);
            //             console.log(this.valveStateArr[index]);
            //             break;
            //         }
            //     default:
            //         console.log(index);
            //         this.valveStateArr[index] = !this.valveStateArr[index];
            //         console.log(this.valveStateArr[index]);
            //         break;
            // }
            // if (this.valveStateArr[0] || this.valveStateArr[1]) {
            //     this.addWater(0);
            // }
            // if (this.valveStateArr[9]) {
            //     this.reduceWater(0);
            // }

        },
        //水阀门点击事件
        handleClickWaterValve(index) {
            switch (index) {
                case 0://出水阀门
                    if (!this.outWaterState && (this.upInWaterState || this.downInWaterState)) {
                        break
                    }
                    this.outWaterState = !this.outWaterState;
                    this.reduceWater();
                    break;
                case 1://上进水阀门
                    if (!this.upInWaterState && (this.downInWaterState || this.outWaterState)) {
                        break
                    }
                    this.upInWaterState = !this.upInWaterState;
                    this.addWater();
                    break;
                case 2://下进水阀门
                    if (!this.downInWaterState && (this.upInWaterState || this.outWaterState)) {
                        break
                    }
                    this.addWater();
                    this.downInWaterState = !this.downInWaterState;
                    break;
            }
            if (!this.outWaterState && !this.upInWaterState && !this.downInWaterState) {
                this.clearWaterInterval();
            }

        },
        //气阀门点击事件
        handleClickGasValve(index) {
            switch (index) {
                case 0://上进气阀门
                    if (!this.upInGasState && this.downInGasState) {
                        return
                    }
                    this.upInGasState = !this.upInGasState;
                    break;
                case 1://下进气阀门
                    if (!this.downInGasState && this.upInGasState) {
                        return
                    }
                    this.downInGasState = !this.downInGasState;
                    break;
            }
        },


    },
};
</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: 630px;
        height: 420px;
        position: relative;

        .tanks {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            // margin-top: 100px;


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

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

        //进度条（管道）
        .progress {
            height: 5px;
            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,
        //                 rgba(255, 255, 0, 0.8) 25%,
        //                 transparent 25%,
        //                 transparent 50%,
        //                 rgba(255, 255, 0, 0.8) 50%,
        //                 rgba(255, 255, 0, 0.8) 75%,
        //                 transparent 75%,
        //                 transparent) !important;
        //         background-size: 1rem 1rem !important;
        //     }

        //     .progress-bar {
        //         // background-color: #00bfff !important;
        //         background-color: #0088ff !important;
        //         /* 蓝色 */
        //     }
        // }
        ::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: 8px;
                // 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,
            //             rgba(255, 255, 0, 0.8) 25%,
            //             transparent 25%,
            //             transparent 50%,
            //             rgba(255, 255, 0, 0.8) 50%,
            //             rgba(255, 255, 0, 0.8) 75%,
            //             transparent 75%,
            //             transparent) !important;
            //     background-size: 1rem 1rem !important;
            // }

            // .progress-bar {
            //     background-color: #FFA500 !important;
            //     /* 橙色 */
            // }
            .progress-bar-striped {
                background-image: linear-gradient(-45deg, transparent 50%, #FFA500 50%),
                    linear-gradient(-135deg, transparent 50%, #FFA500 50%);
                background-size: 8px;
                // 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,
            //             rgba(255, 0, 0, 1) 25%,
            //             transparent 25%,
            //             transparent 50%,
            //             rgba(255, 0, 0, 1) 50%,
            //             rgba(255, 0, 0, 1) 75%,
            //             transparent 75%,
            //             transparent) !important;
            //     background-size: 1rem 1rem !important;
            // }

            // .progress-bar {
            //     background-color: #1ffe0b !important;
            // }
            .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;
            }

            // 阀门定位
            .valve_pos1 {
                position: absolute;
                top: 140px;
                left: -32px;
            }

            .valve_pos2 {
                position: absolute;
                top: 315px;
                left: -33px;
            }

            .valve_pos3 {
                position: absolute;
                top: 95px;
                left: -91px;
            }

            .valve_pos4 {
                position: absolute;
                top: 135px;
                left: -91px;
            }

            .valve_pos5 {
                position: absolute;
                top: 175px;
                left: -91px;
            }

            .valve_pos6 {
                position: absolute;
                top: 215px;
                left: -91px;
            }

            .valve_pos7 {
                position: absolute;
                top: 253px;
                left: -91px;
            }

            .valve_pos8 {
                position: absolute;
                top: 295px;
                left: -91px;
            }

            .valve_pos9 {
                position: absolute;
                top: 387px;
                left: -63px;
            }

            .valve_pos10 {
                position: absolute;
                top: 525px;
                left: 697px;
            }

            .valve_pos11 {
                position: absolute;
                top: 494px;
                left: 735px;
            }

            .valve_pos12 {
                position: absolute;
                top: 434px;
                left: 735px;
            }

            .valve_pos13 {
                position: absolute;
                top: 374px;
                left: 735px;
            }

            .valve_pos14 {
                position: absolute;
                top: 314px;
                left: 735px;
            }

            .valve_pos15 {
                position: absolute;
                top: 254px;
                left: 735px;
            }

            .valve_pos16 {
                position: absolute;
                top: 194px;
                left: 735px;
            }



            // 气阀门
            .valve_pos17 {
                position: absolute;
                top: 44px;
                left: 634px;
            }

            .valve_pos18 {
                position: absolute;
                top: 123px;
                left: 668px;
            }
        }

        //流量计
        .meters {
            .meter {
                z-index: 110;
                color: #0d99de;
            }

            // 流量计定位
            .meter_pos1 {
                position: absolute;
                top: 526px;
                left: 670px;
            }
        }

        //管道定位
        // 蓝色管道定位
        .progress_blue {
            .rotate_90 {
                z-index: 11 !important; //管道层级
            }

            .progress_pos1 {
                position: absolute;
                top: 76px;
                left: -20px;
                width: 610px;
            }

            .progress_pos2 {
                position: absolute;
                top: 172px;
                left: -116px;
                width: 194px;
            }

            .progress_pos3 {
                position: absolute;
                top: 198px;
                left: -106px;
                width: 241px;
            }

            .progress_pos4 {
                position: absolute;
                top: 96px;
                left: 55px;
                width: 44px;
            }

            .progress_pos5 {
                position: absolute;
                top: 96px;
                left: 183px;
                width: 44px;
            }

            .progress_pos6 {
                position: absolute;
                top: 96px;
                left: 311px;
                width: 44px;
            }

            .progress_pos7 {
                position: absolute;
                top: 96px;
                left: 440px;
                width: 44px;
            }

            .progress_pos8 {
                position: absolute;
                top: 96px;
                left: 566px;
                width: 44px;
            }

            .progress_pos9 {

                position: absolute;
                top: 320px;
                left: 12px;
                width: 580px;

            }

            .progress_pos10 {
                position: absolute;
                top: 345px;
                left: 55px;
                width: 50px;
            }

            .progress_pos11 {
                position: absolute;
                top: 345px;
                left: 183px;
                width: 48px;
            }

            .progress_pos12 {
                position: absolute;
                top: 345px;
                left: 306px;
                width: 48px;
            }

            .progress_pos13 {
                position: absolute;
                top: 345px;
                left: 434px;
                width: 48px;
            }

            .progress_pos14 {
                position: absolute;
                top: 344px;
                left: 565px;
                width: 48px;
            }

            .progress_pos15 {
                position: absolute;
                top: 269px;
                left: -104px;
                width: 88px;
            }

            .progress_pos16 {
                position: absolute;
                top: 392px;
                left: -141px;
                width: 244px;
            }

            .progress_pos17 {
                position: absolute;
                top: 513px;
                left: -20px;
                width: 658px;
            }

            .progress_pos18 {
                position: absolute;
                top: 502px;
                left: 53px;
                width: 32px;
            }

            .progress_pos19 {
                position: absolute;
                top: 502px;
                left: 184px;
                width: 32px;
            }

            .progress_pos20 {
                position: absolute;
                top: 502px;
                left: 312px;
                width: 32px;

            }

            .progress_pos21 {
                position: absolute;
                top: 502px;
                left: 440px;
                width: 32px;
            }

            .progress_pos22 {
                position: absolute;
                top: 502px;
                left: 567px;
                width: 32px;
            }

            .progress_pos23 {
                position: absolute;
                top: 393px;
                left: 516px;
                width: 243px;
            }

            .progress_pos24 {
                position: absolute;
                top: 273px;
                left: 70px;
                width: 569px;
            }

            .progress_pos25 {
                position: absolute;
                top: 254px;
                left: 53px;
                width: 40px;
            }

            .progress_pos26 {
                position: absolute;
                top: 254px;
                left: 183px;
                width: 40px;
            }

            .progress_pos27 {
                position: absolute;
                top: 256px;
                left: 309px;
                width: 40px;
            }

            .progress_pos28 {
                position: absolute;
                top: 256px;
                left: 437px;
                width: 40px;

            }

            .progress_pos29 {
                position: absolute;
                top: 256px;
                left: 565px;
                width: 40px;
            }

            .progress_pos91 {
                position: absolute;
                top: 310px;
                left: -102px;
                width: 50px;
            }

            .progress_pos92 {
                position: absolute;
                top: 230px;
                left: -102px;
                width: 50px;
            }

            .progress_pos93 {
                position: absolute;
                top: 190px;
                left: -102px;
                width: 50px;
            }

            .progress_pos94 {
                position: absolute;
                top: 150px;
                left: -102px;
                width: 50px;
            }

            .progress_pos95 {
                position: absolute;
                top: 110px;
                left: -102px;
                width: 50px;
            }

            .progress_pos96 {
                position: absolute;
                top: 189px;
                left: -132px;
                width: 161px;
            }

            .progress_pos97 {
                position: absolute;
                top: 291px;
                left: -72px;
                width: 40px;
            }

        }

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

            .progress_pos30 {
                position: absolute;
                top: 61px;
                left: 62px;
                width: 615px;
            }

            .progress_pos31 {
                position: absolute;
                top: 90px;
                left: 33px;
                width: 61px;
            }

            .progress_pos32 {
                position: absolute;
                top: 90px;
                left: 160px;
                width: 61px;
            }

            .progress_pos33 {
                position: absolute;
                top: 90px;
                left: 288px;
                width: 61px;
            }

            .progress_pos34 {
                position: absolute;
                top: 90px;
                left: 416px;
                width: 61px;
            }

            .progress_pos35 {
                position: absolute;
                top: 90px;
                left: 542px;
                width: 61px;
            }

            .progress_pos36 {
                position: absolute;
                top: 196px;
                left: 483px;
                width: 271px;
            }

            .progress_pos37 {
                position: absolute;
                top: 280px;
                left: 455px;
                width: 439px;
            }

            .progress_pos38 {
                position: absolute;
                top: 333px;
                left: 57px;
                width: 564px;
            }

            .progress_pos39 {
                position: absolute;
                top: 351px;
                left: 42px;
                width: 35px;
            }

            .progress_pos40 {
                position: absolute;
                top: 351px;
                left: 174px;
                width: 35px;
            }

            .progress_pos41 {
                position: absolute;
                top: 351px;
                left: 298px;
                width: 35px;
            }

            .progress_pos42 {
                position: absolute;
                top: 351px;
                left: 424px;
                width: 35px;
            }

            .progress_pos43 {
                position: absolute;
                top: 351px;
                left: 552px;
                width: 35px;
            }

            .progress_pos44 {
                position: absolute;
                top: 498px;
                left: 22px;
                width: 654px;

            }

            .progress_pos45 {
                position: absolute;
                top: 493px;
                left: 554px;
                width: 15px;

            }

            .progress_pos46 {
                position: absolute;
                top: 493px;
                left: 427px;
                width: 15px;
            }

            .progress_pos47 {
                position: absolute;
                top: 493px;
                left: 299px;
                width: 15px;
            }

            .progress_pos48 {
                position: absolute;
                top: 493px;
                left: 171px;
                width: 15px;
            }

            .progress_pos49 {
                position: absolute;
                top: 493px;
                left: 42px;
                width: 15px;
            }

            .progress_pos50 {
                position: absolute;
                top: 377px;
                left: -96px;
                width: 241px;
            }

            .progress_pos51 {
                position: absolute;
                top: 257px;
                left: 22px;
                width: 535px;
            }

            .progress_pos52 {
                position: absolute;
                top: 245px;
                left: 38px;
                width: 21px;
            }

            .progress_pos53 {
                position: absolute;
                top: 245px;
                left: 168px;
                width: 21px;
            }

            .progress_pos54 {
                position: absolute;
                top: 245px;
                left: 292px;
                width: 21px;
            }

            .progress_pos55 {
                position: absolute;
                top: 245px;
                left: 423px;
                width: 21px;
            }

            .progress_pos56 {
                position: absolute;
                top: 245px;
                left: 544px;
                width: 21px;
            }

            .progress_pos98 {
                position: absolute;
                top: 61px;
                left: 672px;
                width: 65px;
            }
        }

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

            .progress_pos57 {
                position: absolute;
                top: 108px;
                left: 34px;
                width: 22px;
            }

            .progress_pos58 {
                position: absolute;
                top: 108px;
                left: 161px;
                width: 22px;
            }

            .progress_pos59 {
                position: absolute;
                top: 108px;
                left: 289px;
                width: 22px;
            }

            .progress_pos60 {
                position: absolute;
                top: 108px;
                left: 417px;
                width: 22px;
            }

            .progress_pos61 {
                position: absolute;
                top: 108px;
                left: 544px;
                width: 22px;
            }

            .progress_pos62 {
                position: absolute;
                top: 96px;
                left: 0px;
                width: 557px;
            }

            .progress_pos63 {
                position: absolute;
                top: 250px;
                left: -157px;
                width: 313px;
            }

            .progress_pos64 {
                position: absolute;
                top: 404px;
                left: -91px;
                width: 91px;
            }

            .progress_pos65 {
                position: absolute;
                top: 346px;
                left: 0px;
                width: 552px;
            }

            .progress_pos66 {
                position: absolute;
                top: 358px;
                left: 31px;
                width: 21px;
            }

            .progress_pos67 {
                position: absolute;
                top: 358px;
                left: 164px;
                width: 21px;
            }

            .progress_pos68 {
                position: absolute;
                top: 358px;
                left: 290px;
                width: 21px;
            }

            .progress_pos69 {
                position: absolute;
                top: 358px;
                left: 414px;
                width: 21px;
            }

            .progress_pos70 {
                position: absolute;
                top: 358px;
                left: 538px;
                width: 23px;
            }
        }

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

            .progress_pos71 {
                position: absolute;
                top: 287px;
                left: 62px;
                width: 22px;
            }

            .progress_pos72 {
                position: absolute;
                top: 287px;
                left: 192px;
                width: 22px;
            }

            .progress_pos73 {
                position: absolute;
                top: 287px;
                left: 318px;
                width: 22px;
            }

            .progress_pos74 {
                position: absolute;
                top: 287px;
                left: 446px;
                width: 22px;
            }

            .progress_pos75 {
                position: absolute;
                top: 287px;
                left: 574px;
                width: 22px;
            }

            .progress_pos76 {
                position: absolute;
                top: 295px;
                left: 71px;
                width: 586px;
            }

            .progress_pos77 {
                position: absolute;
                top: 418px;
                left: 531px;
                width: 250px;
            }

            .progress_pos78 {
                position: absolute;
                top: 541px;
                left: 67px;
                width: 661px;
            }

            .progress_pos79 {
                position: absolute;
                top: 529px;
                left: 55px;
                width: 28px;
            }

            .progress_pos80 {
                position: absolute;
                top: 529px;
                left: 186px;
                width: 28px;
            }

            .progress_pos81 {
                position: absolute;
                top: 529px;
                left: 314px;
                width: 28px;
            }

            .progress_pos82 {
                position: absolute;
                top: 529px;
                left: 442px;
                width: 28px;
            }

            .progress_pos83 {
                position: absolute;
                top: 529px;
                left: 569px;
                width: 28px;
            }

            .progress_pos84 {
                position: absolute;
                top: 377px;
                left: 560px;
                width: 334px;
            }

            .progress_pos85 {
                position: absolute;
                top: 210px;
                left: 725px;
                width: 36px;
            }

            .progress_pos86 {
                position: absolute;
                top: 270px;
                left: 725px;
                width: 36px;
            }

            .progress_pos87 {
                position: absolute;
                top: 330px;
                left: 725px;
                width: 36px;
            }

            .progress_pos88 {
                position: absolute;
                top: 390px;
                left: 725px;
                width: 36px;
            }

            .progress_pos89 {
                position: absolute;
                top: 450px;
                left: 725px;
                width: 36px;
            }

            .progress_pos90 {
                position: absolute;
                top: 510px;
                left: 725px;
                width: 36px;
            }

        }

    }

}
</style>