twin2025-mod/src/pages/components/Bottom.vue

<template>
    <div v-if="ClickTimeLong==0" class="bottom" style="z-index: 1000;">
        <div style="display: flex; justify-content: left; flex-flow: row;height: 100%;">
            <div :class="item.active?'btn active':'btn'" :title="ClickTimeLong>0?'正在努力加载模型，请稍候':''" v-for="item in navlist" :style="{backgroundImage: item.active?`url(${btnFrontBg})`:''}" @click="loadNavModel(item);">
                <img :src="item.active?item.img1:item.img" :key="item.code" :t='item.code' :class="item.active?'active':''">
                <div>{{ item.name }}</div>
            </div>
        </div>
    </div>
</template>
<script>
import { ref,onMounted,watch } from 'vue';
import api from "@/api/system";
export default {
    props:{
        facModelLoadState:{
            type:Boolean,
            required: true
        },
        userRole:{
            type:String
        }
    },
    setup(props,{emit}) {
        let clickTime = 0;
        const ClickTimeLong = ref(10);//导航间隔时长，单位：秒.为0表示不控制操作间隔
        let clickTimer = null;
        const showIndexData = ref('');
        let dataTimer = null;
        const btnFrontBg = require('@/assets/image/nav_btn_front.png');
        let navlist=ref([
            {"code":"FAC","name":"全厂","active":false,"img":require('@/assets/image/nav_ico_fac1.png'),"img1":require('@/assets/image/nav_ico_fac2.png')},
            {"code":"IN02","name":"经编","active":false,"img":require('@/assets/image/nav_ico_in021.png'),"img1":require('@/assets/image/nav_ico_in022.png')},
            //{"code":"IN04","name":"前整","active":false,"img":require('@/assets/image/nav_ico_in041.png'),"img1":require('@/assets/image/nav_ico_in042.png')},
            {"code":"IN03","name":"染整","active":false,"img":require('@/assets/image/nav_ico_in031.png'),"img1":require('@/assets/image/nav_ico_in032.png')},
            //{"code":"IN05","name":"后整","active":false,"img":require('@/assets/image/nav_ico_in051.png'),"img1":require('@/assets/image/nav_ico_in052.png')},
        ]);    
        
        watch(() => props.facModelLoadState, newVal=> {
            if(newVal){
                //模型加载完成
                console.log('全厂模型加载完成')
                if(window.CurrentTargetType==null||window.CurrentTargetType=='') window.CurrentTargetType='FAC';
                for(let i=0;i<navlist.value.length;i++){
                    if(navlist.value[i].code==window.CurrentTargetType){
                        navlist.value[i].active=true;
                    }else navlist.value[i].active=false;
                }
                ClickTimeLong.value = 0;//菜单可以操作了
                clickTimeCal();
            }
        },{deep:true,immediate:true})

        watch(() => props.userRole, newVal=> {
            showIndexData.value = newVal;
        },{deep:true,immediate:true})

        let DataFull={
            GetProductionLneInfo:function(){
                if(window.CurrentTargetType=='IN02'||window.CurrentTargetType=='FAC'){
                    clearTimeout(dataTimer);
                    return;
                }
                dataTimer = setTimeout(() => {
                    DataFull.GetProductionLneInfo();
                }, 2*60*1000);
                api.GetProductionLneInfo().then(res=>{
                    if(res==null || res.code!=0){
                        return;
                    }
                    window.IN345LINE = res.data;
                })
            }
        }
 
        //const emit = defineEmits(['call']);

        function clickTimeCal(){
            if(ClickTimeLong.value==0) return;
            clickTime = 0;
            window.clearInterval(clickTimer);
            clickTimer = setInterval(function(){
                clickTime++; //切换间隔时长计数器
                if(clickTime>10000) clickTime = ClickTimeLong.value;//达到一定时长时后，初始化为最大间隔时长
            },1000)
        }

        function loadNavModel(item){
            if(ClickTimeLong.value>0 && clickTime<ClickTimeLong.value){
                //切换间隔小于N秒时，不响应
                return;
            }
            for(let i=0;i<navlist.value.length;i++){
                if(navlist.value[i].code==item.code){
                    navlist.value[i].active=true;
                }else navlist.value[i].active=false;
            }
            window.CurrentTargetType=item.code;
            if(window.CurrentTargetType=='IN03' ||window.CurrentTargetType=='IN04' || window.CurrentTargetType=='IN05'){
                clearTimeout(dataTimer);
                DataFull.GetProductionLneInfo();
            }
            emit('loadNavModel',item);
            clickTimeCal();
        }

        onMounted(()=>{
            if(window.CurrentTargetType==null || window.CurrentTargetType=='') window.CurrentTargetType='FAC';
        })

        return{
            navlist,
            btnFrontBg,
            ClickTimeLong,
            loadNavModel
        }
    }
}
</script>