<template>
    <div class="page">
        <HeaderComponent title="硫酸钙流程3"></HeaderComponent>
        <div class="content_page">
            <!-- 罐体 -->
            <div class="tanks">
                <BK200Separator title="S2003A" class="tank_S2003A" :showExpandPipe="true" />
                <BK200Separator title="S2003B" class="tank_S2003B" :showExpandPipe="true" />
                <BK200Separator title="S2003C" class="tank_S2003C" :showExpandPipe="true" />
            </div>
            <!-- 外部管道排布 -->
            <div class="outer_progress">
                <!-- 上一流程-P2012 -->
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos1 rotate_90"></Pipe>
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos2"></Pipe>
                <!-- ACV2049,ACV2050-ACV2043 -->
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos4_1"></Pipe>
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos4_2"></Pipe>
                <!-- P2012-ACV2045 -->
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos5_3"></Pipe>
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos5_1"></Pipe>
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos5_2"></Pipe>
                <!-- 淡水-ACV2047,ACV2048 -->
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos6_1"></Pipe>
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos6_2"></Pipe>
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos6_3"></Pipe>
                <!-- 压缩空气-ACV2046 -->
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos7_1 rotate_180"></Pipe>
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos7_2 rotate_180"></Pipe>
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos8 rotate_270"></Pipe>
                <!-- ACV2051-压缩空气 -->
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos9_1"></Pipe>
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos9_2"></Pipe>
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos9_3"></Pipe>
                <!-- PD2003-下一流程 -->
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos10_1"></Pipe>
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos10_2"></Pipe>
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos11 rotate_90"></Pipe>
            </div>

            <!-- 其他图标 -->
            <div class="icon_others">
            </div>
            <!-- 外部组件 -->
            <div class="outer_components">
                <!-- 左上泵 -->
                <PumpProgress title="P2012" :pumpDataArr="[1, 10]" :iconSize="80" :showPipe="true"
                    class="component_pos1" />

                <!-- 右上阀门+泵 -->
                <ValveProgress title="ACV2043" :pipeLeftOffset="-53" :valveStatusArr="initValveStatusArr"
                    progressType="steam" :pipeStatus="initPipeStatus" class="component_pos2" />
                <PumpProgress title="P2013" :pumpDataArr="[1, 10]" :iconSize="80" :showPipe="true"
                    class="component_pos3" />

            </div>

            <!-- 大箭头指向 -->
            <div class="arrows">
                <Arrow flexDir="row" arrowDir="up" arrowText="上一流程" linkUrl="/CaSO4_2" class="arrow_pos1"></Arrow>
                <Arrow flexDir="row" arrowDir="up" arrowText="母液" class="arrow_pos2"></Arrow>
                <Arrow flexDir="column" arrowText="淡水" class="arrow_pos3"></Arrow>
                <Arrow flexDir="column" arrowDir="up" arrowText="压缩空气" class="arrow_pos4"></Arrow>
                <Arrow flexDir="column" arrowText="压缩空气" class="arrow_pos5"></Arrow>
                <Arrow arrowDir="down" arrowText="下一流程" linkUrl="/CaSO4_4" class="arrow_pos6"></Arrow>
            </div>
        </div>
    </div>
</template>

<script setup>
import BK200Separator from '@/components/HnyzDcs/BK200SeparatorComponent.vue';
import PumpProgress from '@/components/DCS/PumpComponent.vue';
import ValveProgress from '@/components/DCS/ValveProgressComponent.vue';
import Pipe from '@/components/HnyzDcs/PipeComponent.vue';
import Arrow from '@/components/HnyzDcs/ArrowComponent.vue';
import { useValveHelper } from '@/hooks/useValveHelper'
import { computed, onMounted, onBeforeUnmount } from 'vue';

import { stompClient } from '@/utils/ws/stompClient';
import { updateZTPageConfig } from '@/api/dcs/configurePage';

const initPipeStatus = true
const initValveStatusArr = [true]
</script>

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

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

        //罐体
        .tanks {
            .tank_S2003A {
                position: absolute;
                top: 45%;
                left: 24%;
                transform: translate(-50%, -50%);
            }


            .tank_S2003B {
                position: absolute;
                top: 45%;
                left: 50%;
                transform: translate(-50%, -50%);
            }


            .tank_S2003C {
                position: absolute;
                top: 45%;
                left: 76%;
                transform: translate(-50%, -50%);
            }
        }

        //外部组件
        .outer_components {
            .component_pos1 {
                position: absolute;
                top: 14.9%;
                left: 6.2%;
            }

            .component_pos2 {
                position: absolute;
                top: 14.8%;
                left: 88.5%;
            }

            .component_pos3 {
                position: absolute;
                top: 14%;
                left: 91.9%;
            }
        }

        //箭头指向
        .arrows {
            .arrow_pos1 {
                position: absolute;
                top: 3.5%;
                left: 6.4%;
                transform: translate(-50%, -50%);
            }

            .arrow_pos2 {
                position: absolute;
                top: 5%;
                left: 94.3%;
                transform: translate(-50%, -50%);
            }

            .arrow_pos3 {
                position: absolute;
                top: 28.4%;
                left: 4.8%;
                transform: translate(-50%, -50%);
            }

            .arrow_pos4 {
                position: absolute;
                top: 81.5%;
                left: 10.8%;
                transform: translate(-50%, -50%);
            }

            .arrow_pos5 {
                position: absolute;
                top: 74%;
                left: 92.5%;
                transform: translate(-50%, -50%);
            }

            .arrow_pos6 {
                position: absolute;
                top: 91.9%;
                left: 86.6%;
                transform: translate(-50%, -50%);
            }
        }

        //外部管道排布
        .outer_progress {
            .progress_pos1 {
                position: absolute;
                top: 14.2%;
                left: 3.3%;
                width: 5.5%;
            }

            .progress_pos2 {
                position: absolute;
                top: 18.7%;
                left: 3.08%;
                width: 4.7%;
            }

            // .progress_pos3 {
            //     position: absolute;
            //     top: 12.3%;
            //     left: 97.45%;
            //     width: 4%;
            // }

            .progress_pos4_1 {
                position: absolute;
                top: 17.7%;
                left: 35.15%;
                width: 26.4%;
            }

            .progress_pos4_2 {
                position: absolute;
                top: 17.7%;
                left: 61.15%;
                width: 26.4%;
            }

            .progress_pos5_1 {
                position: absolute;
                top: 11.4%;
                left: 13.8%;
                width: 26.4%;
            }

            .progress_pos5_3 {
                position: absolute;
                top: 11.4%;
                left: 7.7%;
                width: 6.5%;
            }

            .progress_pos5_2 {
                position: absolute;
                top: 11.4%;
                left: 39.8%;
                width: 26.4%;
            }

            .progress_pos6_1 {
                position: absolute;
                top: 26.1%;
                left: 52.25%;
                width: 26.4%;
            }

            .progress_pos6_2 {
                position: absolute;
                top: 26.1%;
                left: 26.25%;
                width: 26.4%;
            }

            .progress_pos6_3 {
                position: absolute;
                top: 26.1%;
                left: 7.25%;
                width: 19.4%;
            }

            .progress_pos7_1 {
                position: absolute;
                top: 65.45%;
                left: 10.7%;
                width: 26.3%;
            }

            .progress_pos7_2 {
                position: absolute;
                top: 65.45%;
                left: 36.7%;
                width: 26.3%;
            }

            .progress_pos8 {
                position: absolute;
                top: 69.45%;
                left: 10.9%;
                width: 4.3%;
            }

            .progress_pos9_1 {
                position: absolute;
                top: 71.8%;
                left: 33.1%;
                width: 26.3%;
            }

            .progress_pos9_2 {
                position: absolute;
                top: 71.8%;
                left: 59.1%;
                width: 26.3%;
            }

            .progress_pos9_3 {
                position: absolute;
                top: 71.8%;
                left: 85.1%;
                width: 5%;
            }

            .progress_pos10_1 {
                position: absolute;
                top: 79%;
                left: 31.3%;
                width: 26.3%;
            }

            .progress_pos10_2 {
                position: absolute;
                top: 79%;
                left: 57.3%;
                width: 26.3%;
            }

            .progress_pos11 {
                position: absolute;
                top: 83.1%;
                left: 83.5%;
                width: 4.3%;
            }

        }

    }
}
</style>