hnyz_dcs/ui/src/views/configuratePage/m2OutMaterial/index.vue

<template>
    <div class="page">
        <HeaderComponent title="M2出料"></HeaderComponent>
        <div class="content_page">
            <M1Tank title="M2" :valveArr="valveArr_M2" :waterLevelValue="30" :pressureValue="0.444"
                :temperatureValue="110" :iconSize="400" :weightValue="100" class="m2Flow_m1Tank"></M1Tank>
            <S1Tank title="S1" :fanStatus="fanStatus" :valveArr="valveArr_S1" :pressureValue="0.444"
                :waterLevelValue="30" :temperatureValue="20" :iconSize="300" :weightValue="100" class="m2Flow_s1Tank">
            </S1Tank>
            <S1Tank title="S2" :fanStatus="fanStatus" :valveArr="valveArr_S2" :pressureValue="0.444"
                :waterLevelValue="30" :temperatureValue="20" :iconSize="300" :weightValue="100" class="m2Flow_s2Tank">
            </S1Tank>
            <S1Tank title="S3" :fanStatus="fanStatus" :valveArr="valveArr_S3" :pressureValue="0.444"
                :waterLevelValue="30" :temperatureValue="20" :iconSize="300" :weightValue="100" class="m2Flow_s3Tank">
            </S1Tank>
            <WaterTank title="P1" :tankType="3" class="m2Flow_p1Tank" :iconSize="300"></WaterTank>

            <!-- <J1Tank title="J2" :valveArr="valveArr_J2" :iconSize="300" class="m2Flow_j1Tank"></J1Tank> -->
            <div class="pumps">
                <!-- lb9 -->
                <div class="lb6_pos">
                    <Pump title="出料泵" :hz="5000" :pumpStatus="正转" :iconSize="100"></Pump>
                </div>
                <!-- <div class="lb7_pos">
                    <Pump title="换热进液泵" :hz="5000" :pumpStatus="正转" :iconSize="100"></Pump>
                </div> -->
            </div>
            <div class="icon_others">
                <div class="other1">
                    <div class="other_title"> 储气罐</div>
                    <i class="icon iconfont-colour icon-chuqiguan icon_cqg"></i>
                </div>
                <div class="other2">
                    <div class="other_title"> 喷淋塔</div>
                    <i class="icon iconfont-colour icon-penlinta"></i>
                </div>
                <div class="other3">
                    <div class="other_title"> 蒸汽发生器</div>
                    <i class="icon iconfont-colour icon-zhengqifashengqi"></i>
                </div>
            </div>
            <!-- 外部管道排布 -->
            <div class="outer_progress">
                <!-- m2进料 -->
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveAndStatus('N12', 'N22')" :striped-flow="getValveAndStatus('N12', 'N22')"
                    :duration="progressConfig.duration" class="progress_materials progress_pos1_1" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveAndStatus('N12') && getValveOrStatus('N22', 'N23')"
                    :striped-flow="getValveAndStatus('N12') && getValveOrStatus('N22', 'N23')"
                    :duration="progressConfig.duration" class="progress_materials progress_pos1_2" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveAndStatus('N12') && getValveOrStatus('N22', 'N23', 'N24')"
                    :striped-flow="getValveAndStatus('N12') && getValveOrStatus('N22', 'N23', 'N24')"
                    :duration="progressConfig.duration" class="progress_materials progress_pos1_3" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveAndStatus('N12') && getValveOrStatus('N22', 'N23', 'N24')"
                    :striped-flow="getValveAndStatus('N12') && getValveOrStatus('N22', 'N23', 'N24')"
                    :duration="progressConfig.duration" class="progress_materials progress_pos2 rotate_270" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveAndStatus('N12') && getValveOrStatus('N22', 'N23', 'N24')"
                    :striped-flow="getValveAndStatus('N12') && getValveOrStatus('N22', 'N23', 'N24')"
                    :duration="progressConfig.duration" class="progress_materials progress_pos2_2" />

                <!-- m2-换热进液泵-j2 -->
                <!-- <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                     :striped="getValveAndStatus('N15') && getValveOrStatus('N16', 'N17')"
                    :striped-flow="getValveAndStatus('N15') && getValveOrStatus('N16', 'N17')"
                    :duration="progressConfig.duration" class="progress_red progress_pos3" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                     :striped="getValveAndStatus('N15', 'D4') && getValveOrStatus('N16', 'N17')"
                    :striped-flow="getValveAndStatus('N15', 'D4') && getValveOrStatus('N16', 'N17')"
                    :duration="progressConfig.duration" class="progress_red progress_pos4 rotate_270" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                     :striped="getValveAndStatus('N15', 'D4') && getValveOrStatus('N16', 'N17')"
                    :striped-flow="getValveAndStatus('N15', 'D4') && getValveOrStatus('N16', 'N17')" :duration="20"
                    class="progress_red progress_pos5" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                     :striped="getValveAndStatus('N15', 'D4') && getValveOrStatus('N16', 'N17')"
                    :striped-flow="getValveAndStatus('N15', 'D4') && getValveOrStatus('N16', 'N17')" :duration="30"
                    class="progress_red progress_pos6 rotate_90" /> -->

                <!-- 喷淋塔相关管道 -->
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveOrStatus('D16')" :striped-flow="getValveOrStatus('D16')" :duration="20"
                    class="progress_stench progress_pos7_1" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveOrStatus('D16', 'D17')" :striped-flow="getValveOrStatus('D16', 'D17')"
                    :duration="50" class="progress_stench progress_pos7_2" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveOrStatus('D16', 'D17', 'N20')"
                    :striped-flow="getValveOrStatus('D16', 'D17', 'N20')" :duration="40"
                    class="progress_stench progress_pos7_3" />

                <!-- 蒸汽发生器相关管道 -->
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveOrStatus('D11')" :striped-flow="getValveOrStatus('D11')" :duration="20"
                    class="progress_steam progress_pos8_1" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveOrStatus('D11', 'D12')" :striped-flow="getValveOrStatus('D11', 'D12')"
                    :duration="20" class="progress_steam progress_pos8_2" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveOrStatus('D11', 'D12', 'D13')"
                    :striped-flow="getValveOrStatus('D11', 'D12', 'D13')" :duration="50"
                    class="progress_steam progress_pos8_3" />

                <!-- 储气罐相关管道 -->
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveAndStatus('D8')" :striped-flow="getValveAndStatus('D8')" :duration="20"
                    class="progress_compressed_air progress_pos9 rotate_90" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveAndStatus('D9')" :striped-flow="getValveAndStatus('D9')" :duration="20"
                    class="progress_compressed_air progress_pos10 rotate_90" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveAndStatus('D10')" :striped-flow="getValveAndStatus('D10')" :duration="20"
                    class="progress_compressed_air progress_pos11 rotate_90" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="pumpStatus_N18" :striped-flow="pumpStatus_N18" :duration="20"
                    class="progress_compressed_air progress_pos12 rotate_90" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveAndStatus('N14')" :striped-flow="getValveAndStatus('N14')" :duration="20"
                    class="progress_compressed_air progress_pos13 rotate_90" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveOrStatus('D9', 'D10', 'N14') || pumpStatus_N18"
                    :striped-flow="getValveOrStatus('D9', 'D10', 'N14') || pumpStatus_N18" :duration="20"
                    class="progress_compressed_air progress_pos14_1" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveOrStatus('D10', 'N14') || pumpStatus_N18"
                    :striped-flow="getValveOrStatus('D10', 'N14') || pumpStatus_N18" :duration="20"
                    class="progress_compressed_air progress_pos14_2" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveOrStatus('N14') || pumpStatus_N18"
                    :striped-flow="getValveOrStatus('N14') || pumpStatus_N18" :duration="20"
                    class="progress_compressed_air progress_pos14_3" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveOrStatus('N14')" :striped-flow="getValveOrStatus('N14')" :duration="20"
                    class="progress_compressed_air progress_pos14_4" />

                <!-- 通向m1流程页面的管道 -->
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveOrStatus('D6', 'D7')" :striped-flow="getValveOrStatus('D6', 'D7')"
                    :duration="progressConfig.duration" class="progress_materials progress_pos15_1" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveAndStatus('D7')" :striped-flow="getValveAndStatus('D7')"
                    :duration="progressConfig.duration" class="progress_materials progress_pos15_2" />
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveOrStatus('D5', 'D6', 'D7')" :striped-flow="getValveOrStatus('D5', 'D6', 'D7')"
                    :duration="progressConfig.duration" class="progress_materials progress_pos16 rotate_90" />

                <!-- 通向换热流程的管道 -->
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveOrStatus('D16', 'D17') && getValveAndStatus('N15')"
                    :striped-flow="getValveOrStatus('D16', 'D17') && getValveAndStatus('N15')"
                    :duration="progressConfig.duration" class="progress_materials progress_pos17 rotate_270" />
                <!-- 通向p1的管道 -->
                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                    :striped="getValveOrStatus('N13')" :striped-flow="getValveOrStatus('N13')" :duration="19.2"
                    class="progress_red progress_pos18" />
            </div>
            <!-- 大箭头指向 -->
            <div class="arrows">
                <div class="arrow_pos1">
                    <i class="icon iconfont icon-rightArrow arrow_icon" @click="router.push('/m1sj')"> </i>
                    <div class="arrow_text">M1流程</div>
                </div>

                <div class="arrow_pos2">
                    <i class="icon iconfont icon-rightArrow arrow_icon" @click="router.push('/hr')"> </i>
                    <div class="arrow_text">换热流程</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import M1Tank from '@/components/DCS/M1TankComponent.vue';
import S1Tank from '@/components/DCS/S1TankComponent.vue';
import WaterTank from '@/components/DCS/WaterTankComponent.vue';
import J1Tank from '@/components/DCS/J1TankComponent.vue';
import Pump from '@/components/DCS/PumpComponent.vue';
import { useValveHelper } from '@/hooks/useValveHelper'
import { useRouter } from 'vue-router'
import { computed } from 'vue';

const router = useRouter()
//M1罐阀门状态
const valveArr_M2 = [
    {
        code: 'N12',
        value: [true],
    },
    {
        code: 'N14',
        value: [false],
    },
    {
        code: 'N15',
        value: [false],
    },
    {
        code: 'N16',
        value: [true],
    },
    {
        code: 'N17',
        value: [true],
    },
    {
        code: 'N20',
        value: [true],
    },
    {
        code: 'N13',
        value: [true],
    },
    {
        code: 'N18',
        value: [true],
    },
    // {
    //     code: 'N19',
    //     value: [true],
    // },
]

//S1罐阀门状态
const valveArr_S1 = [
    {
        code: 'N10',
        value: [true],
    },
    {
        code: 'D5',
        value: [true, false, false],
    },
    {
        code: 'D11',
        value: [true, false, false],
    },
    {
        code: 'N22',
        value: [true]
    },
    {
        code: 'D16',
        value: [true, false, true],
    },
    {
        code: 'D8',
        value: [true, false, false],
    },

]
//S2罐阀门状态
const valveArr_S2 = [
    {
        code: 'D6',
        value: [true, false, false],
    },
    {
        code: 'D9',
        value: [true, false, false],
    },
    {
        code: 'D17',
        value: [true, false, false],
    },
    {
        code: 'D12',
        value: [true, false, false],
    },
    {
        code: 'N23',
        value: [true],
    },

]
//S3罐阀门状态
const valveArr_S3 = [
    {
        code: 'D7',
        value: [false, true, false],
    },
    {
        code: 'D10',
        value: [true, false, false],
    },
    {
        code: 'D13',
        value: [true, false, false],
    },
    {
        code: 'N24',
        value: [true],
    },

]

const valveArr_J2 = [
    // {
    //     code: 'D3',
    //     value: [true, false, true],
    // },
    {
        code: 'D4',
        value: [true, false, true],
    }
]
//所有阀门状态
const valveArr = [...new Set([
    ...valveArr_M2,
    ...valveArr_S1,
    ...valveArr_S2,
    ...valveArr_S3,
    ...valveArr_J2
])];

const { getValveAndStatus, getValveOrStatus } = useValveHelper(valveArr)

//搅拌电机运行状态
const fanStatus = true;

//进度条配置
const progressConfig = {
    strokeWidth: 8,//进度条宽度
    percentage: 100,//进度条百分比
    duration: 10,//进度条流速
    showText: false,//是否显示文字
}

//N18处管道流通状态(多次用到，所以单独抽出来)
const pumpStatus_N18 = computed(() => {
    return getValveAndStatus('N18') && getValveOrStatus('N16', 'N17')
})

</script>

<style lang="scss" scoped>
.page {
    // width: 100%;
    // height: 100%;
    width: 1920px;
    height: 1080px;
    background-color: #0b172c;

    .content_page {
        position: relative;
        width: 100%;
        height: 1000px;

        .m2Flow_m1Tank {
            position: absolute;
            top: 40%;
            left: 59%;
            transform: translate(-50%, -50%);
        }

        .m2Flow_s1Tank {
            position: absolute;
            top: 40%;
            left: 3%;
            transform: translate(-50%, -50%);
        }

        .m2Flow_s2Tank {
            position: absolute;
            top: 40%;
            left: 18%;
            transform: translate(-50%, -50%);
        }

        .m2Flow_s3Tank {
            position: absolute;
            top: 40%;
            left: 33%;
            transform: translate(-50%, -50%);
        }

        .m2Flow_p1Tank {
            z-index: 10;
            position: absolute;
            top: 62%;
            left: 90%;
            transform: translate(-50%, -50%);
        }

        .pumps {

            .lb6_pos,
            .lb7_pos {
                z-index: 15;
            }

            .lb6_pos {
                position: absolute;
                top: 81%;
                left: 53.2%;
                transform: translate(-50%, -50%);
            }

            .lb7_pos {
                position: absolute;
                top: 23%;
                left: 69.6%;
                transform: translate(-50%, -50%);
            }

        }

        //其他图标
        .icon_others {
            i {
                font-size: 150px;
            }

            .other_title {
                text-align: center;
                color: aliceblue;
            }

            //储气罐
            .other1 {
                position: absolute;
                left: -6.7%;
                top: 10%;


                .icon_cqg {
                    font-size: 200px;
                }
            }

            //喷淋塔
            .other2 {
                position: absolute;
                right: 0%;
            }

            //蒸汽发生器
            .other3 {
                position: absolute;
                top: 18%;
                right: 0%;
            }

            .other1,
            .other2,
            .other3 {
                z-index: 10;
            }
        }

        //箭头指向
        .arrows {

            .arrow_pos1,
            .arrow_pos2 {
                position: absolute;
                z-index: 15;
                top: 6%;
                left: 14.3%;
                transform: translate(-50%, -50%);
                display: flex;
                //竖直居中
                align-items: center;

                .arrow_icon {
                    transform: rotate(270deg);
                    font-size: 100px;
                    color: #fff;
                }

                .arrow_text {
                    font-size: 30px;
                    color: #fff;
                }
            }

            .arrow_pos2 {
                left: 68.3%;
                top: 9%;
            }
        }

        //外部管道排布
        .outer_progress {
            .progress_pos1_1 {
                position: absolute;
                top: 81.1%;
                left: 13.4%;
                width: 15.3%;
            }

            .progress_pos1_2 {
                position: absolute;
                top: 81.1%;
                left: 28.4%;
                width: 15.3%;
            }

            .progress_pos1_3 {
                position: absolute;
                top: 81.1%;
                left: 43.4%;
                width: 15.3%;
            }

            .progress_pos2 {
                position: absolute;
                top: 76.4%;
                left: 52.7%;
                width: 8.3%;
            }

            .progress_pos2_2 {
                position: absolute;
                top: 68.4%;
                left: 52.6%;
                width: 7.3%;
            }

            .progress_pos3 {
                position: absolute;
                top: 23.1%;
                left: 58%;
                width: 11.3%;
            }

            .progress_pos4 {
                position: absolute;
                top: 18.1%;
                left: 66.5%;
                width: 5.3%;
            }

            .progress_pos5 {
                position: absolute;
                top: 13.1%;
                left: 69%;
                width: 18.9%;
            }

            .progress_pos6 {
                position: absolute;
                top: 40%;
                left: 73.6%;
                width: 28.3%;
            }

            //喷淋塔相关管道
            .progress_pos7_1 {
                position: absolute;
                top: 11%;
                left: 16.5%;
                width: 15.3%;
            }

            .progress_pos7_2 {
                position: absolute;
                top: 11%;
                left: 31.5%;
                width: 41.8%;
            }

            .progress_pos7_3 {
                position: absolute;
                top: 11%;
                left: 73%;
                width: 20.8%;
            }

            //蒸汽发生器相关管道
            .progress_pos8_1 {
                position: absolute;
                top: 25.3%;
                left: 14.2%;
                width: 15.3%;
            }

            .progress_pos8_2 {
                position: absolute;
                top: 25.3%;
                left: 29.2%;
                width: 15.3%;
            }

            .progress_pos8_3 {
                position: absolute;
                top: 25.3%;
                left: 44.2%;
                width: 52.3%;
            }

            //储气罐相关管道
            .progress_pos9 {
                position: absolute;
                top: 42.7%;
                left: 4.6%;
                width: 28.3%;
            }

            .progress_pos10 {

                position: absolute;
                top: 42.4%;
                left: 19.7%;
                width: 28.3%;
            }

            .progress_pos11 {
                position: absolute;
                top: 42.4%;
                left: 34.7%;
                width: 28.3%;
            }

            .progress_pos12 {
                position: absolute;
                top: 30.4%;
                left: 53.4%;
                width: 16.3%;
            }

            .progress_pos13 {
                position: absolute;
                top: 30%;
                left: 80.7%;
                width: 16%;
            }

            .progress_pos14_1 {
                position: absolute;
                top: 14.6%;
                left: 6.6%;
                width: 13.3%;
            }

            .progress_pos14_2 {
                position: absolute;
                top: 14.6%;
                left: 19.6%;
                width: 15.3%;
            }

            .progress_pos14_3 {
                position: absolute;
                top: 14.6%;
                left: 34.6%;
                width: 18.8%;
            }

            .progress_pos14_4 {
                position: absolute;
                top: 14.6%;
                left: 53.2%;
                width: 27.7%;
            }

            // 通向m1流程页面的管道
            .progress_pos15_1 {
                position: absolute;
                top: 30.6%;
                left: 11.6%;
                width: 15.3%;
            }

            .progress_pos15_2 {
                position: absolute;
                top: 30.6%;
                left: 26.6%;
                width: 15.3%;
            }

            .progress_pos16 {
                position: absolute;
                top: 20.2%;
                left: 11.7%;
                width: 11%;
            }

            .progress_pos17 {
                position: absolute;
                top: 17.7%;
                left: 65.2%;
                width: 6%;
            }

            .progress_pos18 {
                position: absolute;
                top: 54%;
                left: 80%;
                width: 10%;
            }

        }

    }
}
</style>