<template>
    <div class="page">
        <HeaderComponent title="铁合金PID"></HeaderComponent>
        <div class="content_page">
            <!-- 铁合金PID 页面 -->
            <div class="tanks">
                <VTypeTankValves4 title="V1001" :waterLevelValue="30" :iconSize="120" class="tank_V1001" />
                <VTypeTankValves4 title="V1002" :waterLevelValue="30" :iconSize="120" class="tank_V1002" />
                <VTypeTankValves4 title="V1003" :waterLevelValue="30" :iconSize="120" class="tank_V1003" />
                <VTypeTankValves4 title="V1004" :waterLevelValue="30" :iconSize="120" class="tank_V1004" />
                <VTypeTankValves4 title="V1005" :waterLevelValue="30" :iconSize="120" class="tank_V1005" />
                <VTypeTankValves4 title="V1006" :waterLevelValue="30" :iconSize="120" class="tank_V1006" />

                <SeparatorTowerValves2 title="F1001" :waterLevelValue="30" :iconSize="150" class="tank_F1001" />
                <GorXTypeTanksValves tankType="G" :iconHeight="150" :iconSize="80" class="tank_GType" />

                <GorXTypeTanksValves tankType="X" :iconHeight="150" :iconSize="80" class="tank_XType" />
                <VTypeTank2 title="Q1001" :iconHeight="200" :iconSize="150" :waterLevelValue="30"
                    class="tank_Q1001 zIndex10" />

            </div>
            <!-- 外部管道排布 -->
            <div class="outer_progress">
                <!-- 降水井-P1008泵相关拓展管道 -->
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
                    class="progress_steam progress_pos1 rotate_90" />
                <!-- P1001泵-QQF1001管道  -->
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
                    class="progress_steam progress_pos2 rotate_270" />
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_steam progress_pos3" />
                <!-- QQF1002-混合器RH1001管道 -->
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
                    class="progress_steam progress_pos4 rotate_90" />
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_steam progress_pos5" />
                <!-- 混合器RH1001-V1003相关管道 -->
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_steam progress_pos6" />
                <!-- P1009泵-QQF1017相关管道 -->
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_steam progress_pos7" />
                <!-- 配方人工加药-V1002管道 -->
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
                    class="progress_steam progress_pos8 rotate_90" />
                <!-- V1003罐-V1004罐 管道 -->
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_steam progress_pos9" />
                <!-- P1004泵-QQF1004管道 -->
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_steam progress_pos10" />
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
                    class="progress_steam rotate_270 progress_pos10_1" />
                <!-- QQF10123(分离塔)-V1003罐 管道 -->
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
                    class="progress_steam progress_pos11 rotate_180" />
                <!-- P1003泵-QQF1015管道 -->
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_steam progress_pos12" />
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
                    class="progress_steam progress_pos13 rotate_90" />
                <!-- Q1001-F1001 管道 -->
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_steam progress_pos14" />
                <!-- 空压机KY1001-Q1001 管道 -->
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_steam progress_pos15" />
                <!-- Q1001-接至喷淋室 -->
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
                    class="progress_steam progress_pos16 rotate_90" />

            </div>

            <!-- 其他图标 -->
            <div class="icon_others">
                <div class="icon_other pipelineMixer_pos">
                    <i class="icon iconfont-hnyz-colour icon-hnyz-colourpipelineMixer"></i>
                    <div class="icon_title">混合器RH1001</div>
                </div>
                <div class="icon_other dryingMachine_pos">
                    <i class="icon iconfont-hnyz-colour icon-hnyz-colourdryingMachine"></i>
                    <div class="icon_title">空压机KY1001</div>
                </div>
            </div>
            <!-- 外部组件 -->
            <div class="outer_components">
                <ValveProgress :iconSize="30" title="QQF1003" :rotateAngle="0" :pipeLength="850" :pipeLeftOffset="-193"
                    :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus"
                    class="component_pos1" />
                <ValveProgress :iconSize="30" title="QQF1002" :rotateAngle="0" :pipeLength="322" :pipeLeftOffset="-167"
                    :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus"
                    class="component_pos2" />
            </div>

            <!-- 大箭头指向 -->
            <div class="arrows">
                <Arrow flexDir="row" arrowDir="down" arrowText="引自n个降水井" :iconSize="65" :fontSize="12"
                    class="arrow_pos1" />
                <Arrow flexDir="column" arrowDir="down" :iconFirst="false" arrowText="配方人工加药" :iconSize="65"
                    :fontSize="12" class="arrow_pos2" />
                <Arrow flexDir="column" arrowDir="down" arrowText="接至喷淋室" :iconSize="65" :fontSize="12"
                    class="arrow_pos3" />

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

<script setup>
import SeparatorTowerValves2 from '@/components/HnyzDcs/SeparatorTowerValves2Component.vue';
import GorXTypeTanksValves from '@/components/HnyzDcs/GorXTypeTanksValvesComponent.vue';
import VTypeTank2 from '@/components/HnyzDcs/VTypeTank2Component.vue';
import VTypeTankValves4 from '@/components/HnyzDcs/VTypeTankValves4Component.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]
//初始管道宽度
const pipeWidth = 4.8

</script>

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

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

        //罐体
        .tanks {
            .tank_V1001 {
                position: absolute;
                top: 40%;
                left: 10.6%;
                transform: translate(-50%, -50%);
            }

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

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

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

            .tank_V1005 {
                position: absolute;
                top: 14.8%;
                left: 24.9%;
                transform: translate(-50%, -50%);
            }

            .tank_V1006 {
                position: absolute;
                top: 25%;
                left: 35%;
                transform: translate(-50%, -50%);
            }

            .tank_F1001 {
                position: absolute;
                top: 70%;
                left: 55%;
                transform: translate(-50%, -50%);
            }

            .tank_GType {
                position: absolute;
                top: 27%;
                left: 68.8%;
                transform: translate(-50%, -50%);
            }

            .tank_XType {
                position: absolute;
                top: 27%;
                left: 85%;
                transform: translate(-50%, -50%);
            }

            .tank_Q1001 {
                position: absolute;
                top: 65%;
                left: 35%;
                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: 12px;
                    color: aliceblue;
                }
            }

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

                .iconfont-hnyz-colour {
                    font-size: 100px;
                }
            }
            //空压机
            .dryingMachine_pos {
                flex-direction: column;
                position: absolute;
                top: 60%;
                left: 22%;
            }
        }

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

            .component_pos2 {
                position: absolute;
                top: 25.4%;
                left: 24%;
            }
        }

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

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

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

        }

        //外部管道排布
        .outer_progress {
            .progress_pos1 {
                position: absolute;
                top: 25%;
                left: 2%;
                width: 16%;
            }

            .progress_pos2 {
                position: absolute;
                top: 28.3%;
                left: 14.1%;
                width: 11.8%;
            }

            .progress_pos3 {
                position: absolute;
                top: 16.9%;
                left: 14%;
                width: 3.2%;
            }

            .progress_pos4 {
                position: absolute;
                top: 32%;
                left: 26.3%;
                width: 5%;
            }

            .progress_pos5 {
                position: absolute;
                top: 36.4%;
                left: 26.2%;
                width: 2%;
            }


            .progress_pos6 {
                position: absolute;
                top: 38%;
                left: 31.5%;
                width: 3%;
            }

            .progress_pos7 {
                position: absolute;
                top: 13.9%;
                left: 28.4%;
                width: 5.7%;
            }

            .progress_pos8 {
                position: absolute;
                top: 20%;
                left: 19%;
                width: 4%;
            }

            .progress_pos9 {
                position: absolute;
                top: 40%;
                left: 37.3%;
                width: 3%;
            }

            .progress_pos10 {
                position: absolute;
                top: 16.9%;
                left: 44.5%;
                width: 14.7%;
            }

            .progress_pos10_1 {
                position: absolute;
                top: 28.2%;
                left: 44.5%;
                width: 11.7%;
            }

            .progress_pos11 {
                position: absolute;
                top: 36%;
                left: 37%;
                width: 25%;
            }

            .progress_pos12 {
                position: absolute;
                top: 43.1%;
                left: 44.5%;
                width: 4.5%;
            }

            .progress_pos13 {
                position: absolute;
                top: 59%;
                left: 48.9%;
                width: 16.4%;
            }

            .progress_pos14 {
                position: absolute;
                top: 63%;
                left: 37%;
                width: 12.8%;
            }

            .progress_pos15 {
                position: absolute;
                top: 64%;
                left: 25%;
                width: 8%;
            }

            .progress_pos16 {
                position: absolute;
                top: 67.3%;
                left: 43%;
                width: 4.3%;
            }

        }

    }
}
</style>