<template>
    <div class="page">
        <HeaderComponent title="换热PID"></HeaderComponent>
        <div class="content_page">
            <!-- 罐体 -->
            <div class="tanks">
                <ETypeTankValves3 title="E6002" :iconSize="200" :tempValue="70" :fanStatus="true" class="tank_E6002" />
                <ETypeTankValves3 title="E6003" :iconSize="200" :tempValue="70" :fanStatus="true" class="tank_E6003" />
                <ETypeTankValves3 title="E6004" :iconSize="200" :tempValue="70" class="tank_E6004" />
                <ETypeTankValves3 title="E6005" :iconSize="200" :tempValue="70" class="tank_E6005" />
                <ETypeTankValves3 title="E6006" :iconSize="200" :tempValue="70" class="tank_E6006" />
                <ETypeTankValves3 title="E6007" :iconSize="200" :tempValue="70" class="tank_E6007" />
                <ETypeTankValves3 title="E6008" :iconSize="150" class="tank_E6008" />

                <HeatExchangeWaterTankValves title="V6102" :iconSize="100" class="tank_V6102" />
                <HeatExchangeWaterTankValves title="V6103" :iconSize="100" class="tank_V6103" />
                <HeatExchangeWaterTankValves title="V6106" :iconSize="100" class="tank_V6106" />

                <VTypeTankValves3 title="V6104" :iconSize="150" class="tank_V6104" />
                <VTypeTankValves3 title="V6105" :iconSize="150" class="tank_V6105" />
                <VTypeTankValves3 title="V6107" :iconSize="150" class="tank_V6107" />
                <VTypeTankValves3 title="V6108" :iconSize="150" class="tank_V6108" />
                <VTypeTankValves title="V6109" :fanStatus="true" :iconSize="150" class="tank_V6109" />

                <Separator title="F6001" :iconSize="150" class="separator_F6001 zIndex10" />

            </div>
            <!-- 外部管道排布 -->
            <div class="outer_progress">
                <!-- P6112-ACV6139相关拓展管道 -->
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
                    class="progress_steam progress_pos1 rotate_270" />

                <!-- P6116-引至G1 相关拓展管道 -->
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
                    class="progress_steam progress_pos2 rotate_270" />

                <!-- P6104-ACV6114相关拓展管道 -->
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
                    class="progress_steam progress_pos3 rotate_270" />
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
                    class="progress_steam progress_pos4 rotate_180" />
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
                    class="progress_steam progress_pos5 rotate_90" />

                <!-- P6117-ACV6113相关拓展管道 -->
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
                    class="progress_steam progress_pos6 rotate_270" />
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
                    class="progress_steam progress_pos7 zIndex10" />

                <!-- 引自低位槽-ACV6101相关拓展管道 -->
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
                    class="progress_steam progress_pos8 zIndex10" />

                <!-- ACV6120,ACV6129,ACV6138-分离器F6001管道 -->
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_steam progress_pos9" />
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_steam progress_pos10" />
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
                    class="progress_steam progress_pos11 rotate_90" />

                <!-- 分离器F6001-ACV6145,ACV6147,ACV6149,ACV6151 相关拓展管道 -->
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
                    class="progress_steam progress_pos12_1 rotate_180" />
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
                    class="progress_steam progress_pos12_2 rotate_180" />
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
                    class="progress_steam progress_pos12_3 rotate_180" />
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
                    class="progress_steam progress_pos12_4 rotate_180" />

                <!-- F6001-V6109相关拓展管道 -->
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
                    class="progress_steam progress_pos13 rotate_90" />

                <!-- P6116-ACV6153相关拓展管道 -->
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
                    class="progress_steam progress_pos14 rotate_90" />
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
                    class="progress_steam progress_pos15 rotate_180" />

                <!-- P6121泵流出 -->
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_steam progress_pos16" />

            </div>

            <!-- 其他图标 -->
            <div class="icon_others">

            </div>
            <!-- 外部组件 -->
            <div class="outer_components">

            </div>

            <!-- 大箭头指向 -->
            <div class="arrows">
                <Arrow flexDir="column" arrowDir="up" :iconFirst="false" arrowText="引至G1" :fontSize="18"
                    class="arrow_pos1" />
                <Arrow flexDir="column" arrowDir="right" :iconFirst="false" arrowText="引自分离塔M12母液低位槽" :fontSize="16"
                    class="arrow_pos2" />
                <Arrow flexDir="column" arrowDir="right" :iconFirst="false" arrowText="DN150" :fontSize="18"
                    class="arrow_pos3" />
            </div>
        </div>
    </div>
</template>

<script setup>
import ETypeTankValves3 from '@/components/HnyzDcs/ETypeTankValves3Component.vue';
import HeatExchangeWaterTankValves from '@/components/HnyzDcs/HeatExchangeWaterTankValvesComponent.vue';
import VTypeTankValves3 from '@/components/HnyzDcs/VTypeTankValves3Component.vue';
import VTypeTankValves from '@/components/HnyzDcs/VTypeTankValvesComponent.vue';
import Separator from '@/components/HnyzDcs/SeparatorComponent.vue';

import ETypeTank from '@/components/HnyzDcs/ETypeTankComponent.vue';
import WaterSinkValvesComponent from '@/components/HnyzDcs/WaterSinkValvesComponent.vue';
import SeparatorTowerValves from '@/components/HnyzDcs/SeparatorTowerValvesComponent.vue';
import FTypeTankValves from '@/components/HnyzDcs/FTypeTankValvesComponent.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';
import SeparatorTowerValvesComponent from '../../../components/HnyzDcs/SeparatorTowerValvesComponent.vue';
import { FALSE } from 'sass';

const initPipeStatus = true
const initValveStatusArr = [true]
//初始管道宽度
const pipeWidth = 6
//模拟温度变化，每秒变化一次
// const ttValue = ref(0)
// onMounted(() => {
//     //定时器模拟数据变化
//     setInterval(() => {
//         ttValue.value = Math.floor(Math.random() * 100)
//         // console.log(ttValue.value)
//     }, 1000)
// })

</script>

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

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

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

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

            .tank_E6003 {
                position: absolute;
                top: 15%;
                left: 56.5%;
                transform: translate(-50%, -50%);
            }

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

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

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

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

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



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

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

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

            .tank_V6104 {
                position: absolute;
                top: 89%;
                left: 11%;
                transform: translate(-50%, -50%);
            }

            .tank_V6105 {
                position: absolute;
                top: 89%;
                left: 24.5%;
                transform: translate(-50%, -50%);
            }

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

            .tank_V6108 {
                position: absolute;
                top: 89%;
                left: 63.5%;
                transform: translate(-50%, -50%);
            }

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

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

        }

        //其他图标
        // .icon_others {}

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

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

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

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

        //外部管道排布
        .outer_progress {
            .progress_pos1 {
                position: absolute;
                top: 22%;
                left: 72%;
                width: 10.6%;
            }

            .progress_pos2 {
                position: absolute;
                top: 18%;
                left: 97%;
                width: 5.6%;
            }

            .progress_pos3 {
                position: absolute;
                top: 6%;
                left: 64.95%;
                width: 3%;
            }

            .progress_pos4 {
                position: absolute;
                top: 3%;
                left: 13.3%;
                width: 51.8%;
            }

            .progress_pos5 {
                position: absolute;
                top: 17.6%;
                left: 13.4%;
                width: 15.2%;
            }


            .progress_pos6 {
                position: absolute;
                top: 66.3%;
                left: 4.9%;
                width: 26%;
            }

            .progress_pos7 {
                position: absolute;
                top: 41.3%;
                left: 4.75%;
                width: 14.7%;
            }

            .progress_pos8 {
                position: absolute;
                top: 7.8%;
                left: 10%;
                width: 22%;
            }

            .progress_pos9 {
                position: absolute;
                top: 57%;
                left: 38.1%;
                width: 19.8%;
            }

            .progress_pos10 {
                position: absolute;
                top: 57%;
                left: 57.6%;
                width: 19.8%;
            }

            .progress_pos11 {
                position: absolute;
                top: 64%;
                left: 77.24%;
                width: 7%;
            }

            .progress_pos12_1 {
                position: absolute;
                top: 75.2%;
                left: 12.4%;
                width: 13.7%;
            }

            .progress_pos12_2 {
                position: absolute;
                top: 75.2%;
                left: 25.9%;
                width: 19.7%;
            }

            .progress_pos12_3 {
                position: absolute;
                top: 75.2%;
                left: 45.4%;
                width: 19.7%;
            }

            .progress_pos12_4 {
                position: absolute;
                top: 75.2%;
                left: 64.9%;
                width: 11%;
            }

            .progress_pos13 {
                position: absolute;
                top: 78%;
                left: 82%;
                width: 5%;
            }

            .progress_pos14 {
                position: absolute;
                top: 49.4%;
                left: 97%;
                width: 27.5%;
            }

            .progress_pos15 {
                position: absolute;
                top: 75.2%;
                left: 84.4%;
                width: 12.75%;
            }

            .progress_pos16 {
                position: absolute;
                top: 87.45%;
                left: 89.1%;
                width: 4%;
            }

        }
    }
}
</style>