hnyz_dcs/ui/src/views/hnyzConfiguratePage/Na2SO4_FY/index.vue

<template>
    <div class="preview">
        <div ref="pageRef" class="page">
            <HeaderComponent :title="title"></HeaderComponent>
            <div class="content_page">
                <PageDrawer :pages="pageItems_Na2SO4" class="page_drawer" />
                <PageSwitcher class="page_switcher" />
                <!-- 阀门 -->
                <div class="valves">
                    <component v-for="item in deviceConfigGroup.VALVES" :key="item.id"
                        :is="getComponentName(item.modelId)" :title="getEquipmentTitle(item.equipmentName)"
                        :valveStatusArr="getDataArrByCode(item.code)" :rotateAngle="item.rotate || 0"
                        :iconSize="item.size" :style="getComponentStyle(item)" />
                </div>

                <!-- 泵 -->
                <div class="pumps">
                    <component v-for="item in deviceConfigGroup.PUMPS" :key="item.id"
                        :is="getComponentName(item.modelId)" :title="getEquipmentTitle(item.title)"
                        :pumpDataArr="pumpHelper.getDataArrByCode(item.code)" :isReverse="item.isReverse"
                        :iconSize="item.size" :style="getComponentStyle(item)" />
                </div>

                <!-- 罐体 -->
                <div class="tanks">
                    <component v-for="item in deviceConfigGroup.TANKS" :key="item.id"
                        :is="getComponentName(item.modelId)" :title="getEquipmentTitle(item.title)"
                        :iconSize="item.size" :iconWidth="item.width" :iconHeight="item.height"
                        :style="getComponentStyle(item)" />
                </div>

                <!-- 传感器 -->
                <div class="sensors">
                    <component v-for="item in deviceConfigGroup.SENSORS" :key="item.id"
                        :is="getComponentName(item.modelId)" :title="getEquipmentTitle(item.equipmentName)"
                        :sensorSize="item.size" :sensorValue="sensorHelper.getDataArrByCode(item.code)"
                        :sensorWidth="item.width" :sensorHeight="item.height" :style="getComponentStyle(item)"
                        :specialCondition="JSON.parse(item.specialCondition)" />
                </div>

                <!-- 其他设备 -->
                <div class="icon_others">
                    <component v-for="item in deviceConfigGroup.ICONS" :key="item.id"
                        :is="getComponentName(item.modelId)" :iconSize="item.size"
                        :iconClass="getIconClass(item.modelId)" :style="getComponentStyle(item)"
                        :title="getEquipmentTitle(item.title)" />
                </div>

                <!-- 管道  -->
                <div class="pipelines">
                    <component v-for="item in pipeConfig" :key="item.id" :is="getComponentName(item.modelId)"
                        :pipeStatus="evaluateCondition(item.flowCondition, true)" :strokeWidth="item.pipeWidth"
                        :style="getPipelineStyle(item, evaluateCondition(item.reverseCondition))"
                        :class="getPipelineClass(item.pipeClass, getPipeType(item.dynamicPipelineCondition))" />
                </div>

                <!-- 大箭头指向 -->
                <div class="arrows">
                    <component v-for="item in deviceConfigGroup.ARROWS" :key="item.id"
                        :is="getComponentName(item.modelId)" :arrowText="getEquipmentTitle(item.equipmentName)"
                        :iconSize="item.size" :specialCondition="JSON.parse(item.specialCondition)"
                        :style="getComponentStyle(item)" />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import PageDrawer from '@/components/GeneralComponents/PageDrawerComponent.vue';
import { computed, onMounted, onBeforeUnmount, reactive } from 'vue';
import { useValveHelper } from '@/hooks/useValveHelper'
import { stompClient } from '@/utils/ws/stompClient';
import { useEquipmentLayout } from '@/hooks/useEquipmentLayout'
import { useComponentHelper } from '@/hooks/useComponentHelper'
import { updateZTPageConfig } from '@/api/dcs/configurePage';
import { pageItems_Na2SO4 } from "@/config"
import { useRoute } from 'vue-router'

import { usePageScale } from '@/utils/dcs/usePageScale'
const { pageRef } = usePageScale()

const route = useRoute()
const pageCode = route.name
const title = pageItems_Na2SO4.find(item => item.code === pageCode).label
// 获取设备布局 & 数据订阅
const {
    pipeConfig,//管道配置信息
    deviceConfigGroup,//设备配置分组
    modelMap,//设备模型映射
    pageParams,//页面参数
    fetchPageConfig,//获取页面配置
} = useEquipmentLayout(pageCode)

// 组件渲染辅助方法
const {
    getComponentName,
    getComponentStyle,
    getIconClass,
    getEquipmentTitle,
    getPipelineClass,
    getPipelineStyle,
} = useComponentHelper(modelMap)

onMounted(async () => {
    await fetchPageConfig(pageCode).then(res => {
        updatePageConfig()
    })
})

onBeforeUnmount(() => {
    // 页面销毁时取消订阅
    stompClient.unsubscribeFromPage(pageCode);
});

//阀门数据初始化
const valveArr = [
]
//传感器数据初始化
const sensorArr = [
]
//泵数据初始化
const pumpArr = [
]

//设备数据分组
const deviceDataGroup = reactive({
    VALVES: valveArr,
    PUMPS: pumpArr,
    SENSORS: sensorArr,
})

//更新页面配置
function updatePageConfig() {
    updateZTPageConfig(pageCode, pageParams.value)
        .then(res => {
            stompClient.subscribeToPage(pageCode, (data) => {
                deviceDataGroup.VALVES = Object.values(data.VALVES)
                deviceDataGroup.PUMPS = Object.values(data.PUMPS)
                deviceDataGroup.SENSORS = Object.values(data.SENSORS)
            });
        })
        .catch(err => {
            console.log('页面配置失败：', err);
        });
}
const pumpHelper = useValveHelper(computed(() => deviceDataGroup.PUMPS))
const { getDataArrByCode } = useValveHelper(computed(() => deviceDataGroup.VALVES))
const sensorHelper = useValveHelper(computed(() => deviceDataGroup.SENSORS))
const {
    evaluateCondition, getPipeType
} = useValveHelper(computed(() => [...deviceDataGroup.VALVES, ...deviceDataGroup.PUMPS]))
</script>

<style lang="scss" scoped>
@import '@/assets/styles/dcs/hnyzConfiguratePage.scss';

.page {
    width: 1920px;
    height: 1080px;
    background-color: #0b172c;

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

        .page_drawer {
            position: absolute;
            right: 2%;
            top: -1%;
        }
    }
}
</style>