<template>
    <div class="page">
        <HeaderComponent title="硫酸钙流程2"></HeaderComponent>
        <div class="content_page">
            <!-- 罐体 -->
            <div class="tanks">
                <VTypeTankValves2 title="V7002" :waterLevelValue="30" :iconWidth="200" class="tank_V7002" />
                <VTypeTankValves2 title="V7004" :waterLevelValue="30" :iconWidth="300" class="tank_V7004" />
                <STypeTankValves title="S2002" :iconHeight="150" :fanStatus="true" class="tank_S2002" />
                <VTypeTankValves title="V2004" :waterLevelValue="30" :phValue="9" class="tank_V2004 zIndex15" />
                <VTypeTankValves title="V2007" :waterLevelValue="30" :phValue="9" :fanStatus="true"
                    class="tank_V2007" />
                <VTypeTankValves title="V2009" class="tank_V2009" />
                <STypeTankValves title="S2004" :iconHeight="150" :fanStatus="true" class="tank_S2004" />
                <VTypeTankValves2 title="V7003" :waterLevelValue="30" topPumpDir="R" class="tank_V7003" />
            </div>
            <!-- 外部管道排布 -->
            <div class="outer_progress">
                <!-- 上一流程-P2005 -->
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos1"></Pipe>

                <!-- P2007-ACV2026-HH2001管道混合器 -->
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos2_1"></Pipe>
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos2"></Pipe>

                <!-- HH2001管道混合器-ACV2032,ACV2033相关拓展管道 -->
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos3"></Pipe>
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos4 rotate_270"></Pipe>

                <!-- ACV2034-V2004落地罐拓展管道 -->
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos5 rotate_90"></Pipe>

                <!-- 母液-ACV2054相关拓展管道 -->
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos6 rotate_270"></Pipe>

                <!-- P2008-ACV2021相关拓展管道 -->
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos7 zIndex10"></Pipe>

                <!-- ACV2040-P2010相关拓展管道 -->
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos8 rotate_270"></Pipe>
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos9 rotate_180"></Pipe>

                <!-- P2006- HH2001管道混合器 -->
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos10"></Pipe>

                <!-- ACV2036-V2004罐体拓展管道 -->
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos11 rotate_90 zIndex10"></Pipe>

                <!-- P2009-ACV2039相关拓展管道 -->
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos12 rotate_270 zIndex15"></Pipe>
                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos13 zIndex10"></Pipe>


            </div>

            <!-- 其他图标 -->
            <div class="icon_others">
                <div class="icon_other pipelineMixer_pos">
                    <div class="icon_title">管道混合器HH2001</div>
                    <i class="icon iconfont-hnyz-colour icon-hnyz-colourpipelineMixer"></i>
                </div>
            </div>
            <!-- 外部组件 -->
            <div class="outer_components">
                <div class="outer_component component_pos1 rotate_90">
                    <ValveProgress :iconSize="valveIconSize" title="ACV2026" :rotateAngle="90" :pipeLength="873"
                        :pipeLeftOffset="-355" :valveStatusArr="initValveStatusArr" progressType="steam"
                        :pipeStatus="initPipeStatus" />
                </div>
                <div class="outer_component component_pos2 zIndex10">
                    <ValveProgress :iconSize="valveIconSize" title="ACV2043" :pipeLength="419" :pipeLeftOffset="-242"
                        :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus" />
                </div>
            </div>

            <!-- 大箭头指向 -->
            <div class="arrows">
                <Arrow flexDir="column" arrowDir="left" arrowText="上一流程" class="arrow_pos1" linkUrl="/CaSO4_1"></Arrow>
                <Arrow flexDir="column" arrowDir="down" arrowText="下一流程" class="arrow_pos2" linkUrl="/CaSO4_3"></Arrow>
                <Arrow flexDir="column" arrowDir="up" arrowText="母液" class="arrow_pos3"></Arrow>
                <Arrow arrowDir="down" arrowText="淡水" class="arrow_pos4"></Arrow>
                <Arrow arrowDir="down" arrowText="碳酸钠固体吨袋" class="arrow_pos5"></Arrow>
                <Arrow flexDir="column" :iconFirst="false" fontSize="20" arrowText="主项1-MVR" class="arrow_pos6"></Arrow>

            </div>
        </div>
    </div>
</template>

<script setup>
import VTypeTankValves from '@/components/HnyzDcs/VTypeTankValvesComponent.vue';
import VTypeTankValves2 from '@/components/HnyzDcs/VTypeTankValves2Component.vue';
import STypeTankValves from '@/components/HnyzDcs/STypeTankValvesComponent.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_V7002 {
                position: absolute;
                top: 15%;
                left: 6%;
                transform: translate(-50%, -50%);
            }

            .tank_V7004 {
                position: absolute;
                top: 60%;
                left: 17%;
                transform: translate(-50%, -50%);
            }

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

            .tank_V2004 {
                position: absolute;
                top: 65%;
                left: 60%;
                transform: translate(-50%, -50%);
            }

            .tank_V2007 {
                position: absolute;
                top: 29.6%;
                left: 62%;
                transform: translate(-50%, -50%);
            }

            .tank_V2009 {
                position: absolute;
                top: 26.6%;
                left: 37%;
                transform: translate(-50%, -50%);
            }

            .tank_S2004 {
                position: absolute;
                top: 62%;
                left: 77.6%;
                transform: translate(-50%, -50%);
            }

            .tank_V7003 {
                position: absolute;
                top: 40.7%;
                left: 72%;
                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;
                }
            }

            //管道混合器
            .pipelineMixer_pos {
                flex-direction: column;
                position: absolute;
                top: 48%;
                left: 32%;

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

        }

        //外部组件
        .outer_components {
            .outer_component {
                width: 50px;
                height: 50px;
            }

            .component_pos1 {
                position: absolute;
                top: 33%;
                left: 23.5%;
            }

            .component_pos2 {
                position: absolute;
                top: 35.6%;
                left: 87.5%;
            }
        }

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

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

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

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

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

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

        //外部管道排布
        .outer_progress {
            .progress_pos1 {
                position: absolute;
                top: 46.7%;
                left: 6.3%;
                width: 3.2%;
            }

            .progress_pos2_1 {
                position: absolute;
                top: 12.7%;
                left: 15.2%;
                width: 8%;
            }

            .progress_pos2 {
                position: absolute;
                top: 55.7%;
                left: 22.85%;
                width: 9.7%;
            }

            .progress_pos3 {
                position: absolute;
                top: 56.9%;
                left: 38%;
                width: 5.2%;
            }


            .progress_pos4 {
                position: absolute;
                top: 52.7%;
                left: 41.7%;
                width: 5%;
            }

            .progress_pos5 {
                position: absolute;
                top: 53%;
                left: 58%;
                width: 5.2%;
            }

            .progress_pos6 {
                position: absolute;
                top: 66.6%;
                left: 52.8%;
                width: 7%;
            }

            .progress_pos7 {
                position: absolute;
                top: 24.5%;
                left: 45.2%;
                width: 11.1%;
            }

            .progress_pos8 {
                position: absolute;
                top: 44.1%;
                left: 86.7%;
                width: 17.2%;
            }

            .progress_pos9 {
                position: absolute;
                top: 27.5%;
                left: 79.6%;
                width: 7.3%;
            }

            .progress_pos10 {
                position: absolute;
                top: 57.9%;
                left: 28%;
                width: 5.5%;
            }

            .progress_pos11 {
                position: absolute;
                top: 51.6%;
                left: 61.94%;
                width: 7%;
            }

            .progress_pos12 {
                position: absolute;
                top: 63.3%;
                left: 68.36%;
                width: 3.3%;
            }

            .progress_pos13 {
                position: absolute;
                top: 59.86%;
                left: 68.15%;
                width: 3.1%;
            }

        }

    }
}
</style>