<template>
    <div class="page">
        <HeaderComponent title="硫酸钙流程4"></HeaderComponent>
        <div class="content_page">
            <!-- 罐体 -->
            <div class="tanks">
                <VTypeTankValves title="V2014" :fanStatus="true" :iconSize="150" class="tank_V2014" />
                <ETypeTankValves1 title="E2001A" :fanStatus="true" :iconSize="150" :tempValue="60"
                    class="tank_E2001A" />
                <ETypeTankValves1 title="E2001B" :fanStatus="true" :iconSize="150" :tempValue="60"
                    class="tank_E2001B" />
                <ETypeTankValves2 title="E2003" :iconSize="150" class="tank_E2003" />
                <VTypeTankValves title="V2006" :fanStatus="true" :waterLevelValue="30" :iconSize="150"
                    class="tank_V2006" />
                <D40Separator title="S2006" :iconSize="150" class="tank_S2006" />
                <VTypeTankValves title="V2008" :waterLevelValue="30" :iconSize="150" class="tank_V2008" />
                <VTypeTankValves title="V2010" :waterLevelValue="30" :fanStatus="true" :iconSize="150"
                    class="tank_V2010" />
                <D40Separator title="S2007" :iconSize="150" class="tank_S2007" />
                <VTypeTankValves title="V2011" :iconSize="150" class="tank_V2011" />
                <VTypeTankValves title="V2012" :waterLevelValue="30" :iconSize="150" class="tank_V2012" />
                <VTypeTankValves title="V2013" :waterLevelValue="30" :iconSize="150" class="tank_V2013" />
                <VTypeTankValves title="S2008" :iconSize="150" class="tank_S2008" />
                <VTypeTankValves title="V2015" :waterLevelValue="30" :iconSize="150" class="tank_V2015" />
                <VTypeTankValves title="V2017" :waterLevelValue="30" :iconSize="150" class="tank_V2017" />

                <!-- <FTypeTank title="F6001" :iconSize="150" :tempValue="60" :waterLevelValue="30" class="tank_F2001" /> -->
                <!-- <FTypeTankValves title="F6001" :iconSize="150" :tempValue="60" :waterLevelValue="30" class="tank_F2001" /> -->

            </div>
            <!-- 外部管道排布 -->
            <div class="outer_progress">
                <!-- 上一流程-V2014 -->
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
                    class="progress_steam progress_pos1 rotate_90" />

                <!-- P2014-ACV2056 相关拓展管道 -->
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
                    class="progress_steam progress_pos2_1 rotate_270" />
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
                    class="progress_steam progress_pos2_2 rotate_270 zIndex10" />

                <!-- ACV2066-ACV2057,ACV2068 相关拓展管道 -->
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
                    class="progress_steam progress_pos3_1 rotate_90" />
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
                    class="progress_steam progress_pos3_2 rotate_90 zIndex10" />
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_steam progress_pos11" />
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
                    class="progress_steam progress_pos12 rotate_90 zIndex10" />

                <!-- P2016-ACV2059，V2014罐相关·拓展管道 -->
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
                    class="progress_steam progress_pos4_1 rotate_270 zIndex10" />
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
                    class="progress_steam progress_pos4_2 rotate_270 " />
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
                    class="progress_steam progress_pos9 rotate_180 zIndex10" />
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
                    class="progress_steam progress_pos10 rotate_270 " />

                <!-- ACV2058-P2015相关拓展管道 -->
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
                    class="progress_steam progress_pos5 rotate_270" />
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_steam progress_pos6" />

                <!-- ACV2060-V2006罐相关拓展管道 -->
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
                    class="progress_steam progress_pos7_1 rotate_90" />
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
                    class="progress_steam progress_pos7_2 rotate_90" />
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_steam progress_pos8" />

                <!-- S2007罐-ACV2071,ACV2072相关拓展管道 -->
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
                    class="progress_steam progress_pos13_1 rotate_90" />
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
                    class="progress_steam progress_pos13_2 rotate_90 zIndex10" />
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
                    class="progress_steam progress_pos15 zIndex10" />

                <!-- P2017-ACV2080相关拓展管道 -->
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
                    class="progress_steam progress_pos14 rotate_270 zIndex10" />

                <!-- ACV2063-V2010罐相关拓展管道 -->
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
                    class="progress_steam progress_pos16 rotate_90" />

                <!-- P2019-ACV2073,ACV2076相关拓展管道 -->
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
                    class="progress_steam progress_pos17 rotate_270" />
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
                    class="progress_steam progress_pos18 rotate_180" />
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_steam progress_pos19" />

                <!-- P2018-ACV2075相关拓展管道 -->
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
                    class="progress_steam progress_pos20 rotate_270" />

                <!-- S2007分离器-ACV2078,ACV2079相关拓展管道 -->
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
                    class="progress_steam progress_pos21 rotate_90" />
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_steam progress_pos22" />

                <!-- P2020-ACV2083-S2008罐相关拓展管道 -->
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_steam progress_pos23" />
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
                    class="progress_steam progress_pos24 rotate_90" />

                <!-- S2008罐-V2015罐 -->
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
                    class="progress_steam progress_pos25 rotate_180" />
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
                    class="progress_steam progress_pos26 rotate_90" />

                <!-- P2021-ACV2085等相关拓展管道 -->
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_steam progress_pos27" />
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_steam progress_pos28" />
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_steam progress_pos29" />
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
                    class="progress_steam progress_pos30 rotate_270 zIndex10" />

                <!-- S2007-PD2006-LH2001-BZ2001  -->
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_steam progress_pos31" />

                <!-- S2008罐-V2017罐 -->
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_steam progress_pos32" />

                <!-- P2023-ACV2087相关拓展管道 -->
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
                    class="progress_steam progress_pos33 rotate_270 zIndex10" />
                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
                    class="progress_steam progress_pos34 rotate_180" />
            </div>

            <!-- 其他图标 -->
            <div class="icon_others">
                <PageIcon title="蒸汽发生器B2001" iconClass="coloursteamGenerator" class="icon_other_pos1 zIndex15" />
                <PageIcon :iconSize="75" title="流化床干燥机LH2001" iconClass="colourdryingMachine" class="icon_other_pos2" />
                <PageIcon :iconSize="75" title="包装机BZ2001" iconClass="colourpackingMachine" class="icon_other_pos3" />
            </div>
            <!-- 外部组件 -->
            <div class="outer_components">
                <!-- 蒸汽发生器B2001-ACV2066  -->
                <div class="component_pos1 zIndex10">
                    <ValveProgress :iconSize="37.5" title="ACV2066" :pipeLength="278" :pipeLeftOffset="-70"
                        :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus" />
                </div>
                <!-- P2020-ACV2083-S2008罐 -->
                <div class="component_pos2">
                    <ValveProgress :iconSize="37.5" title="ACV2083" :pipeLength="250" :pipeLeftOffset="-70"
                        :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus"
                        :pipeReverse="true" />
                </div>
                <!-- P2021-ACV2085  -->
                <div class="component_pos3">
                    <ValveProgress :iconSize="37.5" title="ACV2085" :pipeLength="290" :pipeLeftOffset="-90"
                        :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus" />
                </div>

                <div class="component_pos4">
                    <Conveyor :iconSize="50" title="PD2006" />
                </div>
            </div>

            <!-- 大箭头指向 -->
            <div class="arrows">
                <Arrow flexDir="column" arrowDir="up" :iconFirst="false" arrowText="上一流程" :fontSize="18"
                    linkUrl="/CaSO4_3" class="arrow_pos1"></Arrow>
                <Arrow flexDir="row" arrowText="去溶硫酸钠" :fontSize="18" class="arrow_pos2"></Arrow>
                <Arrow flexDir="row" arrowText="去G1溶晶" :fontSize="18" class="arrow_pos3"></Arrow>
                <Arrow flexDir="row" arrowText="引至V7400" :fontSize="18" class="arrow_pos4"></Arrow>
            </div>
        </div>
    </div>
</template>

<script setup>
import VTypeTankValves from '@/components/HnyzDcs/VTypeTankValvesComponent.vue';
import ETypeTankValves1 from '@/components/HnyzDcs/ETypeTankValves1Component.vue';
import ETypeTankValves2 from '@/components/HnyzDcs/ETypeTankValves2Component.vue';
import D40Separator from '@/components/HnyzDcs/D40SeparatorComponent.vue';
import Conveyor from '@/components/HnyzDcs/ConveyorComponent.vue';
import PageIcon from '@/components/HnyzDcs/PageIconComponent.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 = 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_V2014 {
                position: absolute;
                top: 42%;
                left: 4%;
                transform: translate(-50%, -50%);
            }

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

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

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

            .tank_V2006 {
                position: absolute;
                top: 71%;
                left: 28.65%;
                transform: translate(-50%, -50%);
            }

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

            .tank_V2008 {
                position: absolute;
                top: 71.5%;
                left: 42%;
                transform: translate(-50%, -50%);
            }

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

            .tank_S2007 {
                position: absolute;
                top: 18.1%;
                left: 63.6%;
                transform: translate(-50%, -50%);
            }

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

            .tank_V2012 {
                position: absolute;
                top: 59.3%;
                left: 61.75%;
                transform: translate(-50%, -50%);
            }

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

            .tank_S2008 {
                position: absolute;
                top: 71.44%;
                left: 76.7%;
                transform: translate(-50%, -50%);
            }

            .tank_V2015 {
                position: absolute;
                top: 86.3%;
                left: 59.5%;
                transform: translate(-50%, -50%);
            }

            .tank_V2017 {
                position: absolute;
                top: 71%;
                left: 87.5%;
                transform: translate(-50%, -50%);
            }

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

        //其他图标
        .icon_others {

            //蒸汽发生器
            .icon_other_pos1 {
                position: absolute;
                top: 6%;
                left: 3%;
            }

            //流化床干燥机
            .icon_other_pos2 {
                position: absolute;
                top: 14%;
                left: 77%;
            }

            //包装机
            .icon_other_pos3 {
                position: absolute;
                top: 14%;
                left: 85%;
            }


        }

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

            .component_pos2 {
                position: absolute;
                top: 65.6%;
                left: 79.5%;
            }

            .component_pos3 {
                position: absolute;
                top: 82.5%;
                left: 77.5%;
            }

            .component_pos4 {
                position: absolute;
                top: 16%;
                left: 69%;
            }
        }

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

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

            }

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

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

        //外部管道排布
        .outer_progress {
            .progress_pos1 {
                position: absolute;
                top: 23.7%;
                left: 2.5%;
                width: 13.2%;
            }

            .progress_pos2_1 {
                position: absolute;
                top: 22.5%;
                left: 10.25%;
                width: 10.4%;
            }

            .progress_pos2_2 {
                position: absolute;
                top: 37.5%;
                left: 10.25%;
                width: 5.75%;
            }

            .progress_pos3_1 {
                position: absolute;
                top: 13.9%;
                left: 11.4%;
                width: 4.9%;
            }

            .progress_pos3_2 {
                position: absolute;
                top: 28.2%;
                left: 11.4%;
                width: 10.5%;
            }


            .progress_pos4_1 {
                position: absolute;
                top: 41.8%;
                left: 28.2%;
                width: 10%;
            }

            .progress_pos4_2 {
                position: absolute;
                top: 22.4%;
                left: 28.2%;
                width: 10.4%;
            }

            .progress_pos5 {
                position: absolute;
                top: 34%;
                left: 25.5%;
                width: 10.4%;
            }

            .progress_pos6 {
                position: absolute;
                top: 23.69%;
                left: 25.5%;
                width: 4%;
            }

            .progress_pos7_1 {
                position: absolute;
                top: 28.3%;
                left: 24%;
                width: 10.4%;
            }

            .progress_pos7_2 {
                position: absolute;
                top: 56%;
                left: 24%;
                width: 18.4%;
            }

            .progress_pos8 {
                position: absolute;
                top: 73.1%;
                left: 23.9%;
                width: 3%;
            }

            .progress_pos9 {
                position: absolute;
                top: 51%;
                left: 3.9%;
                width: 24.5%;
            }

            .progress_pos10 {
                position: absolute;
                top: 48.9%;
                left: 4%;
                width: 2.5%;
            }

            .progress_pos11 {
                position: absolute;
                top: 9.2%;
                left: 11.2%;
                width: 23.8%;
            }

            .progress_pos12 {
                position: absolute;
                top: 27.2%;
                left: 34.9%;
                width: 18.8%;
            }

            .progress_pos13_1 {
                position: absolute;
                top: 30.4%;
                left: 43.5%;
                width: 6.1%;
            }

            .progress_pos13_2 {
                position: absolute;
                top: 48%;
                left: 43.5%;
                width: 12.5%;
            }

            .progress_pos14 {
                position: absolute;
                top: 64.5%;
                left: 48.3%;
                width: 8.3%;
            }

            .progress_pos15 {
                position: absolute;
                top: 35.9%;
                left: 43.35%;
                width: 2.4%;
            }

            .progress_pos16 {
                position: absolute;
                top: 27%;
                left: 49.9%;
                width: 8.4%;
            }

            .progress_pos17 {
                position: absolute;
                top: 42.2%;
                left: 68%;
                width: 17%;
            }

            .progress_pos18 {
                position: absolute;
                top: 25.9%;
                left: 51.4%;
                width: 16.7%;
            }

            .progress_pos19 {
                position: absolute;
                top: 57.6%;
                left: 67.9%;
                width: 10.4%;
            }

            .progress_pos20 {
                position: absolute;
                top: 29.2%;
                left: 56.3%;
                width: 12%;
            }

            .progress_pos21 {
                position: absolute;
                top: 26%;
                left: 64.5%;
                width: 3.4%;
            }

            .progress_pos22 {
                position: absolute;
                top: 28.7%;
                left: 64.5%;
                width: 8.15%;
            }

            .progress_pos23 {
                position: absolute;
                top: 40.9%;
                left: 77.2%;
                width: 5.8%;
            }

            .progress_pos24 {
                position: absolute;
                top: 54.65%;
                left: 82.9%;
                width: 14.3%;
            }

            .progress_pos25 {
                position: absolute;
                top: 72%;
                left: 60.2%;
                width: 15.4%;
            }

            .progress_pos26 {
                position: absolute;
                top: 76%;
                left: 60.3%;
                width: 4.2%;
            }

            .progress_pos27 {
                position: absolute;
                top: 84.7%;
                left: 65.6%;
                width: 10.4%;
            }

            .progress_pos28 {
                position: absolute;
                top: 94.9%;
                left: 75.8%;
                width: 13%;
            }

            .progress_pos29 {
                position: absolute;
                top: 90%;
                left: 75.8%;
                width: 9%;
            }

            .progress_pos30 {
                position: absolute;
                top: 90.1%;
                left: 75.9%;
                width: 5.6%;
            }

            .progress_pos31 {
                position: absolute;
                top: 18.3%;
                left: 66.5%;
                width: 20%;
            }

            .progress_pos32 {
                position: absolute;
                top: 74.5%;
                left: 78.5%;
                width: 7.4%;
            }

            .progress_pos33 {
                position: absolute;
                top: 38.6%;
                left: 93.8%;
                width: 34.6%;
            }

            .progress_pos34 {
                position: absolute;
                top: 5.4%;
                left: 63.1%;
                width: 30.8%;
            }


        }

    }
}
</style>