<template>
    <div class="page">
        <HeaderComponent title="硫酸钙流程1"></HeaderComponent>
        <div class="content_page">
            <!-- 罐体 -->
            <div class="tanks">
                <VTypeTankValves title="V5001" :waterLevelValue="30" class="tank_V5001" />
                <RTypeTankValves title="R2001" :iconSize="200" :iconWidth="200" :tempValue="35" :fanStatus="true"
                    class="tank_R2001" />
                <RTypeTankValves title="R2002" :tempValue="35" :fanStatus="true" class="tank_R2002" />
                <VTypeTankValves title="V2002" :waterLevelValue="30" :fanStatus="true" :phValue="9"
                    class="tank_V2002" />
                <VTypeTankValves title="V2001" :waterLevelValue="30" :fanStatus="true" :phValue="9"
                    class="tank_V2001" />
                <BK30Separator title="S2001" class="tank_S2001" />
                <VTypeTankValves title="V2003" :waterLevelValue="30" class="tank_V2003" />
            </div>
            <!-- 外部管道排布 -->
            <div class="outer_progress">
                <!-- 料仓LC2001-PD2001相关管道 -->
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos21 rotate_90"></Pipe>
                <!-- 三通阀相关管道 -->
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos1"></Pipe>
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos2 rotate_90"></Pipe>
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos3 zIndex10"></Pipe>

                <!-- 泵P5001-ACV2003拓展管道 -->
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos4 zIndex10"></Pipe>
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos5 zIndex10 rotate_90"></Pipe>

                <!-- 洗气塔相关管道 -->
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos6_1 rotate_270"></Pipe>
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos6_2 rotate_270"></Pipe>

                <!-- P2001-ACV2004拓展管道 -->
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos7_1"></Pipe>
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos7 rotate_180"></Pipe>
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos8 rotate_90"></Pipe>

                <!-- P2002-ACV2009拓展管道 -->
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos9 zIndex10"></Pipe>

                <!-- 落地罐V2002-ACV2010拓展管道 -->
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos10 rotate_90 zIndex10"></Pipe>

                <!-- P2003-分离器S2001拓展管道 -->
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos11 rotate_270 zIndex10"></Pipe>

                <!-- 泵P2004-ACV2023拓展管道 -->
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos12 zIndex10 rotate_90"></Pipe>
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos13  rotate_180"></Pipe>
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos14_1  rotate_270"></Pipe>
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos14_2  rotate_270"></Pipe>
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos14_3  rotate_270"></Pipe>
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos15 zIndex10"></Pipe>

                <!-- ACV2018,ACV2019-V2003拓展管道 -->
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos16 rotate_180 zIndex10"></Pipe>
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos17 rotate_270"></Pipe>
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos18"></Pipe>

                <!-- ACV2016,ACV2017-通向下一流程的管道 -->
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos19 rotate_90"></Pipe>
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos20"></Pipe>

            </div>

            <!-- 其他图标 -->
            <div class="icon_others">
                <div class="icon_other stock_bin_pos">
                    <i class="icon iconfont-hnyz-colour icon-hnyz-colourstockBin"></i>
                    <div class="icon_title">料仓LC2001</div>
                </div>
                <div class="icon_other threeWayValve_pos">
                    <div class="icon_title">三通阀ACV2037</div>
                    <i class="icon iconfont-hnyz-colour icon-hnyz-colourthreeWayValve"></i>
                </div>
                <div class="icon_other scrubberTower_pos">
                    <div class="icon_title">洗气塔XQ3001</div>
                    <i class="icon iconfont-hnyz-colour icon-hnyz-colourscrubberTower"></i>
                </div>
                <div class="icon_other dosingMachine_pos">
                    <i class="icon iconfont-hnyz-colour icon-hnyz-colourdosingMachine"></i>
                    <div class="icon_title">加药机V2016</div>
                </div>
            </div>
            <!-- 外部组件 -->
            <div class="outer_components">
                <div class="outer_component1">
                    <!-- 传送带  -->
                    <Conveyor title="PD2001" iconSize="60" />
                </div>
            </div>

            <!-- 大箭头指向 -->
            <div class="arrows">
                <Arrow flexDir="row" arrowDir="down" arrowText="淡水" class="arrow_pos1"></Arrow>
                <Arrow flexDir="row" arrowText="压缩空气" :iconFirst="false" class="arrow_pos2"></Arrow>
                <Arrow flexDir="column" arrowText="下一流程" linkUrl="/CaSO4_2" class="arrow_pos3"></Arrow>
                <Arrow flexDir="column" arrowText="压缩空气" class="arrow_pos4"></Arrow>
            </div>
        </div>
    </div>
</template>

<script setup>
import VTypeTankValves from '@/components/HnyzDcs/VTypeTankValvesComponent.vue';
import RTypeTankValves from '@/components/HnyzDcs/RTypeTankValvesComponent.vue';
import BK30Separator from '@/components/HnyzDcs/BK30SeparatorComponent.vue';
import Conveyor from '@/components/HnyzDcs/ConveyorComponent.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
</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;


        //罐体
        .tanks {
            .tank_V5001 {
                position: absolute;
                top: 8%;
                left: 5%;
                transform: translate(-50%, -50%);
            }

            .tank_R2001 {
                position: absolute;
                top: 39%;
                left: 26.3%;
                transform: translate(-50%, -50%);
            }

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

            .tank_S2001 {
                position: absolute;
                top: 32%;
                left: 72%;
                transform: translate(-50%, -50%);
            }

            .tank_V2002 {
                position: absolute;
                top: 87%;
                left: 49.2%;
                transform: translate(-50%, -50%);
            }

            .tank_V2001 {
                position: absolute;
                top: 41%;
                left: 47.98%;
                transform: translate(-50%, -50%);
            }

            .tank_V2003 {
                position: absolute;
                top: 87%;
                left: 67%;
                transform: translate(-50%, -50%);
            }

        }

        //其他图标
        .icon_others {
            .icon_other {
                display: flex;
                align-items: center;
                z-index: 100;

                .iconfont-hnyz-colour {
                    font-size: 75px;
                }

                .icon_title {
                    font-size: 16px;
                    color: aliceblue;
                }
            }

            //料仓
            .stock_bin_pos {
                position: absolute;
                top: 22%;
                left: 3%;
            }

            //三通阀
            .threeWayValve_pos {
                position: absolute;
                top: 30.7%;
                left: 14%;
                flex-direction: column;
            }

            //洗气塔
            .scrubberTower_pos {
                position: absolute;
                top: 4.7%;
                left: 33.5%;

                .iconfont-hnyz-colour {
                    font-size: 140px;
                }
            }

            //加药机
            .dosingMachine_pos {
                position: absolute;
                top: 60%;
                left: 48.5%;

                .iconfont-hnyz-colour {
                    font-size: 100px;
                }
            }
        }

        //外部组件
        .outer_components {
            .outer_component1 {
                width: 60px;
                height: 60px;
                position: absolute;
                top: 35%;
                left: 5.8%;
                transform: translate(-50%, -50%);
            }
        }

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

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

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

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

        //外部管道排布
        .outer_progress {
            .progress_pos1 {
                position: absolute;
                top: 35.3%;
                left: 10.3%;
                width: 6%;
            }

            .progress_pos2 {
                position: absolute;
                top: 57.3%;
                left: 17.05%;
                width: 21.6%;
            }

            .progress_pos3 {
                position: absolute;
                top: 77.3%;
                left: 17%;
                width: 3%;
            }

            .progress_pos4 {
                position: absolute;
                top: 5.8%;
                left: 13.2%;
                width: 14.9%;
            }

            .progress_pos5 {
                position: absolute;
                top: 12.5%;
                left: 27.9%;
                width: 7%;
            }

            .progress_pos6_1 {
                position: absolute;
                top: 26.5%;
                left: 42.9%;
                width: 10%;
            }

            .progress_pos6_2 {
                position: absolute;
                top: 57%;
                left: 42.9%;
                width: 22%;
            }

            .progress_pos7 {
                position: absolute;
                top: 58.4%;
                left: 27.7%;
                width: 14.4%;
            }

            .progress_pos7_1 {
                position: absolute;
                top: 40%;
                left: 36.15%;
                width: 6%;
            }

            .progress_pos8 {
                position: absolute;
                top: 49.6%;
                left: 41.95%;
                width: 10%;
            }

            .progress_pos9 {
                position: absolute;
                top: 81.9%;
                left: 36.2%;
                width: 7.3%;
            }

            .progress_pos10 {
                position: absolute;
                top: 67.3%;
                left: 47.94%;
                width: 11.5%;
            }

            .progress_pos11 {
                position: absolute;
                top: 57.6%;
                left: 57.55%;
                width: 32%;
            }

            .progress_pos12 {
                position: absolute;
                top: 13.9%;
                left: 50%;
                width: 11.8%;
            }

            .progress_pos13 {
                position: absolute;
                top: 2.5%;
                left: 49.85%;
                width: 37.75%;
            }

            .progress_pos14_1 {
                position: absolute;
                top: 9.8%;
                left: 87.4%;
                width: 7.3%;
            }

            .progress_pos14_2 {
                position: absolute;
                top: 18.8%;
                left: 87.4%;
                width: 2.5%;
            }

            .progress_pos14_3 {
                position: absolute;
                top: 53.5%;
                left: 87.4%;
                width: 33.5%;
            }

            .progress_pos15 {
                position: absolute;
                top: 84.9%;
                left: 75.2%;
                width: 12.4%;
            }

            .progress_pos16 {
                position: absolute;
                top: 6.8%;
                left: 74.2%;
                width: 12.4%;
            }

            .progress_pos17 {
                position: absolute;
                top: 44.6%;
                left: 86.4%;
                width: 39.4%;
            }

            .progress_pos18 {
                position: absolute;
                top: 82%;
                left: 69.5%;
                width: 17.1%;
            }

            .progress_pos19 {
                position: absolute;
                top: 29.3%;
                left: 83.35%;
                width: 3.8%;
            }

            .progress_pos20 {
                position: absolute;
                top: 32.3%;
                left: 83.2%;
                width: 7.4%;
            }

            .progress_pos21 {
                position: absolute;
                top: 32.3%;
                left: 5%;
                width: 3.2%;
            }

        }

    }
}
</style>