hnyz_dcs/ui/src/hooks/useComponentHelper.js

//组件相关渲染逻辑 提供 getComponentName、getComponentStyle、getIconClass 等组件渲染逻辑
//组件使用映射
import { defineAsyncComponent } from 'vue'
import LoadingComponent from '@/components/GeneralComponents/LoadingComponent.vue'

function lazyComponent(loader) {
    return defineAsyncComponent({
        loader,
        loadingComponent: LoadingComponent,
        delay: 100,
        timeout: 5000,
    });
}
const componentMap = {
    Valve: lazyComponent(() => import('@/components/GeneralComponents/ValveComponent.vue')),
    Pump: lazyComponent(() => import('@/components/GeneralComponents/PumpComponent.vue')),
    MTypeHollowTank: lazyComponent(() => import('@/components/GeneralComponents/MTypeHollowTankComponent.vue')),
    MTypeTank: lazyComponent(() => import('@/components/GeneralComponents/MTypeTankComponent.vue')),
    STypeHollowTank: lazyComponent(() => import('@/components/GeneralComponents/STypeHollowTankComponent.vue')),
    STypeTank: lazyComponent(() => import('@/components/GeneralComponents/STypeTankComponent.vue')),
    JTypeTank: lazyComponent(() => import('@/components/GeneralComponents/JTypeTankComponent.vue')),
    TempSlider: lazyComponent(() => import('@/components/GeneralComponents/TempSliderComponent.vue')),
    WaterLevelMap: lazyComponent(() => import('@/components/GeneralComponents/WaterLevelMapComponent.vue')),
    PressureGauge: lazyComponent(() => import('@/components/GeneralComponents/PressureGaugeComponent.vue')),
    Mixer: lazyComponent(() => import('@/components/GeneralComponents/MixerComponent.vue')),
    PageIconSH: lazyComponent(() => import('@/components/GeneralComponents/PageIconSHComponent.vue')),
    Pipe: lazyComponent(() => import('@/components/GeneralComponents/PipelineComponent.vue')),
    Arrow : lazyComponent(() => import('@/components/GeneralComponents/ArrowComponent.vue')),
    PageIconHN: lazyComponent(() => import('@/components/GeneralComponents/PageIconHNComponent.vue')),
    RTypeHollowTank: lazyComponent(() => import('@/components/GeneralComponents/RTypeHollowTankComponent.vue')),
    FlowMeter: lazyComponent(() => import('@/components/GeneralComponents/FlowMeterComponent.vue')),
    Conveyor: lazyComponent(() => import('@/components/GeneralComponents/ConveyorComponent.vue')),
    PhSlider: lazyComponent(() => import('@/components/GeneralComponents/PhSliderComponent.vue')),
    Separator: lazyComponent(() => import('@/components/GeneralComponents/SeparatorComponent.vue')),
    VTypeHollowTank: lazyComponent(() => import('@/components/GeneralComponents/VTypeHollowTankComponent.vue')),
    VTypeTank: lazyComponent(() => import('@/components/GeneralComponents/VTypeTankComponent.vue')),
    HeatExchangeWaterTank: lazyComponent(() => import('@/components/GeneralComponents/HeatExchangeWaterTankComponent.vue')),
    ButterflyValve: lazyComponent(() => import('@/components/GeneralComponents/ButterflyValveComponent.vue')),//蝶阀
    BeltFilter: lazyComponent(() => import('@/components/GeneralComponents/BeltFilterComponent.vue')),//平真空带式过滤器
    Arrow2 : lazyComponent(() => import('@/components/GeneralComponents/Arrow2Component.vue')),//箭头2
};

export function useComponentHelper(modelMapRef) {

    //获取组件名称，用于组件渲染
    const getComponentName = (modelId) => {
        const model = modelMapRef.value[modelId];
        if (!model) {
            console.warn(`模型 ${modelId} 未找到`);
            return 'div';
        }
        if (model.componentType === 'icon') return 'i';

        const comp = componentMap[model.componentName];
        if (!comp) {
            console.warn(`组件未注册: ${model.componentName}`);
            return 'div';
        }
        return comp;
    };


    //获取组件样式，用于组件位置渲染
    const getComponentStyle = (item) => {
        const model = modelMapRef.value[item.modelId];
        return {
            position: 'absolute',
            left: item.x + '%',
            top: item.y + '%',
            transform: `translate(-50%, -50%) rotate(${item.rotate || 0}deg)`,
            zIndex: model?.zIndex || 1,
        };
    };

    //获取图标类名，用于图标渲染
    const getIconClass = (modelId) => {
        const model = modelMapRef.value[modelId];
        return model?.iconClass || '';
    };

    //获取设备名称
    const getEquipmentTitle = (name) => name || '设备';

    //获取管道class(defaultType:默认类型，realType:变化的管道类型)
    const getPipelineClass = (defaultType , realType = null) => {
        // console.log(defaultType, realType)
        return `progress_${realType || defaultType}`
    };

    //获取管道style
    const getPipelineStyle = (item, isReverse = false) => {
        const model = modelMapRef.value[item.modelId];
        const baseRotate = item.rotate || 0;
        const finalRotate = isReverse ? baseRotate + 180 : baseRotate;//管道旋转角度

        return {
            position: 'absolute',
            left: item.x + '%',
            top: item.y + '%',
            transform: `translate(-50%, -50%) rotate(${finalRotate}deg)`,
            zIndex: model?.zIndex || 1,
            width: item.pipeLength + '%',
        };
    };


    return {
        getComponentName,
        getComponentStyle,
        getIconClass,
        getEquipmentTitle,
        getPipelineClass,
        getPipelineStyle
    }
}