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

<template>
    <!--这是印花模块的模块展示内容-->
    <div for="IN03"  id="top" class="top top03"  @click="switchIndex">
        <div title="返回主视图"
            style="cursor: pointer;position: absolute;right: 40px;top: 32px;height: 38px;width: 38px;text-align: center;"
            @click.stop="backMasterViewByFac"><img src="../../assets/image/view.png"></div>
    </div>
    <div class="bg20"></div>
    <template v-if="showIndexData=='index'">
        <div class="abs" style="left:50%;top:10%;width: 210px;margin-left:-105px;text-align: center;">
            <div>请选择要查看的产线</div>
            <div class="cx">
                <span @click="switchCX(item.index)" :class="item.active?'btn active':'btn'" v-for="item in cxList" :style="{backgroundImage: item.active?`url(${btnFrontBg})`:''}">{{ item.name }}</span>
                <div  @click="switchCX(0)" :class="currentCXNo==0?'btn active':'btn'" :style="{width:'94%', backgroundImage: currentCXNo==0 ?`url(${btnFrontBg})`:''}">全部</div>
            </div>            
        </div>
        <div class="abs title_row" style="left: 3%;top:6%;font-weight: normal;">
            <div class="title_left_line"></div><span>产线状态</span><span style="color:#27e6ff">（今日）</span>
        </div>
        <div class="abs data_row" style="left: 3%;top:8%;font-weight: normal;">
            <div style="margin-left: 10px;"><table cellspacing="0">
                <tbody>
                    <tr style="background-color:transparent">
                        <td style="border:0">
                            <div class="littleFont">产线<span style="color:#27e6ff">（开动）</span></div>
                            <div style="font-size: 32px;">{{ deviceStatData.status.openProd||'-' }}<span style="font-size: 12px;">条</span></div>
                        </td>
                        <td style="border:0;padding-left: 40px;">
                            <div class="littleFont">设备<span style="color:#27e6ff">（开机）</span></div>
                            <div style="font-size:24px;height: 38px;line-height: 48px;color: #27e6ff;">{{ deviceStatData.status.open||'-' }}<span style="font-size: 12px;"> 台</span></div>
                        </td>
                        <td style="border:0;padding-left: 40px;">
                            <div class="littleFont">设备<span style="color:#27e6ff">（总数）</span></div>
                            <div style="font-size:24px;height: 38px;line-height: 48px;color: #27e6ff;">{{ deviceStatData.status.total||'-' }}<span style="font-size: 12px;"> 台</span></div>
                        </td>
                    </tr>
                </tbody>
            </table></div>
        </div>
        <div class="abs title_row" style="left: auto;top:6%;font-weight: normal;right: 14%;"><div class="title_left_line"></div><span>生产情况</span><span style="color:#27e6ff">（今日）</span></div>
        <div class="abs data_row" style="left: auto;top:8%;font-weight: normal;right: 3%;">
            <div style="margin-left: 10px;"><table cellspacing="0">
                <tbody>
                    <tr style="background-color:transparent">
                        <td style="border:0">
                            <div class="littleFont">白坯<span style="color:#27e6ff">（投放量）</span></div>
                            <div style="font-size: 32px;">{{ deviceStatData.status.baiPei||'-' }}<span style="font-size: 12px;">米</span></div>
                        </td>
                        <td style="border:0;padding-left: 40px;">
                            <div class="littleFont">产量<span style="color:#27e6ff">（米数）</span></div>
                            <div style="font-size:24px;height: 38px;line-height: 48px;color: #27e6ff;">{{ deviceStatData.status.length||'-' }}<span style="font-size: 12px;"> 米</span></div>
                        </td>
                        <td style="border:0;padding-left: 40px;">
                            <div class="littleFont">产量<span style="color:#27e6ff">（重量）</span></div>
                            <div style="font-size:24px;height: 38px;line-height: 48px;color: #27e6ff;">{{  deviceStatData.status.weight||'-' }}<span style="font-size: 12px;"> 吨</span></div>
                        </td>
                    </tr>
                </tbody>
            </table></div>
        </div>
        <div class="abs bottompanel">
            <div style="width: 15%;height:calc(184px*var(--hRate));display: flex;">
                <div style="width: 70%;height: 100%;border-right: 1px solid #1a7c90;">
                    <div class="title_row" style="font-weight: normal;margin-top: 10px;"><span style="font-size: 48px;letter-spacing: 5px;margin-right: 20%;">{{currentCXNo==0?'全部':currentCXNo+'号'}}</span><span style="color:#fff;line-height: 48px;">产线</span></div>
                    <div style="padding-left: 5px;color: #27e6ff;margin-top: calc(52px*var(--hRate));width: 88%;">
                        <div style="color: #fff;"><span>开机数</span><span style="float: right;">总数</span></div>
                        <div style="font-size: 22px;margin-top: calc(16px*var(--hRate));"><span>{{ effInfo.open }}<span class="littleFont">台</span></span>
                            <span style="float: right;">{{ effInfo.total }}<span class="littleFont">台</span></span>
                        </div>
                        <div style="position: relative;margin-top: calc(16px*var(--hRate));">
                            <div class="abs fac_progress_value" :style="{width:(effInfo.open/effInfo.total*100)+'%'}"></div>
                            <div class="abs fac_progress" style="background-color: #5f686e;"></div>
                        </div>
                    </div>
                </div>
                <div style="width: 30%;height: 100%;margin-left: 4%;">
                    <div style="color: #fff;"><span>单位能耗</span></div>
                    <div style="font-size: 22px;margin-top: calc(16px*var(--hRate));;color: red;">
                        <span>{{ effInfo.energy }}<span class="littleFont">元/米</span></span>
                    </div>
                    <div style="color: #fff;margin-top: calc(26px*var(--hRate));"><span>开机率</span></div>
                    <div style="font-size: 22px;margin-top: calc(16px*var(--hRate));color:#27e6ff ;">
                        <span>{{ effInfo.ratio }}<span class="littleFont">%</span></span>
                    </div>
                </div>
            </div>
            <div :style="{width: '26%',marginLeft:'1%',marginRight: isFullScreen?'2%':'0'}">
                <div class="title_row" style="font-weight: normal;line-height: 30px;"><div class="title_left_line" style="margin-top: 7px;"></div><span>生产效率</span><span style="color:#27e6ff">（今日）</span></div>
                    <div class="data_row scxl_block">
                        <div :style="{padding: '10px',width: isFullScreen?'96%':'89%'}"><table cellspacing="0" style="width: 100%;font-size: 14px;text-align: center;">
                            <thead>
                                <tr style="font-weight:normal;color: #1fc1d7;background-color: #2dbcd436;">
                                    <td style="border:0">班组</td>
                                    <td style="border:0">生产时间(H)</td>
                                    <td style="border:0">已生产数(米)</td>
                                    <td style="border:0">总重量(吨)</td>
                                    <td style="border:0">稼动率(%)</td>
                                </tr>
                            </thead>
                            <tbody>
                                <tr style="font-weight:normal;background-color:transparent;color: #ffffff;font-size: 14px;">
                                    <td style="border:0">A班</td>
                                    <td style="border:0">{{ effInfo.timeA ||'-' }}</td>
                                    <td style="border:0">{{ effInfo.lengthA ||'-' }}</td>
                                    <td style="border:0">{{ effInfo.weightA ||'-' }}</td>
                                    <td style="border:0">{{ (effInfo.effA*100).toFixed(0) ||'-' }}%</td>
                                </tr>
                                <tr style="font-weight:normal;background-color:transparent;color: #ffffff;background-color: #2dbcd436;font-size: 14px;">
                                    <td style="border:0">B班</td>
                                    <td style="border:0">{{ effInfo.timeB ||'-' }}</td>
                                    <td style="border:0">{{ effInfo.lengthB ||'-' }}</td>
                                    <td style="border:0">{{ effInfo.weightB ||'-' }}</td>
                                    <td style="border:0">{{ (effInfo.effB*100).toFixed(0) ||'-' }}%</td>
                                </tr>
                            </tbody>
                        </table>
                        <div style="width: 100%;display: flex;margin-top: calc(42px*var(--hRate));font-size: 14px;justify-content: center;text-align: center;" >
                            <div style="width: 50%;">
                                <div style="color: #fff;"><span>米数</span></div>
                                <div style="font-size: 22px;color:#27e6ff">
                                    <span>{{ effInfo.length }}<span class="littleFont">米</span></span>
                                </div>                            
                            </div>
                            <div style="width: 50%;">
                                <div style="color: #fff;"><span>重量</span></div>
                                <div style="font-size: 22px;color:#27e6ff">
                                    <span>{{ effInfo.weight }}<span class="littleFont">吨</span></span>
                                </div>                            
                            </div>
                        </div>
                    </div>
                    </div>
            </div>
            <div style="width: 26%;margin-right: 2%;">
                <div class="title_row" style="line-height: 30px;"><div class="title_left_line" style="margin-top: 7px;"></div>
                    <span>生产趋势</span><span style="color:#27e6ff">（30天）</span>
                    <span style="margin-left: auto !important;">
                        <span :class="buttonCode1=='Length'?'fac_btn active':'fac_btn'" @click="LoadSCLine('Length')">米数</span>
                        <span :class="buttonCode1=='Weight'?'fac_btn active':'fac_btn'" @click="LoadSCLine('Weight')">重量</span>
                    </span>
                </div>
                <div :class="isFullScreen?'data_row sc_qushi_block_full':'data_row sc_qushi_block'" ref="echarts_sc_qushi"></div>
            </div>
            <div style="width: 26%;">
                <div class="title_row" style="line-height: 30px;"><div class="title_left_line" style="margin-top: 7px;"></div>
                    <span>能耗趋势</span><span style="color:#27e6ff">（30天）</span>
                    <span style="margin-left: auto !important;">
                        <span :class="buttonCode2=='price'?'fac_btn active':'fac_btn'" @click="LoadUsedLine('price')">折算</span>
                        <span :class="buttonCode2=='electricity'?'fac_btn active':'fac_btn'" @click="LoadUsedLine('electricity')">电</span>
                        <span :class="buttonCode2=='steam'?'fac_btn active':'fac_btn'" @click="LoadUsedLine('steam')">气</span>
                        <span :class="buttonCode2=='water'?'fac_btn active':'fac_btn'" @click="LoadUsedLine('water')">水</span>
                    </span>
                </div>
                <div :class="isFullScreen?'data_row used_qushi_block_full':'data_row used_qushi_block'" ref="echarts_used_qushi"></div>
            </div>
        </div>
    </template>
</template>
<script>
import { ref ,watch,onUnmounted,onMounted} from 'vue';
import {useRouter} from 'vue-router';
import api from "@/api/system";
import * as echarts from 'echarts';
export default {
    props:{
        clickEvent:{
            type:Object,
            required: true,
            default:{}
        },
        in03ModelLoadState:{
            type:Boolean
        },
        userTimeout:{
            type:Boolean
        },
        userRole:{
            type:String
        }
    },
    setup(props,{emit}) {
        const router = useRouter();
        let lines={};
        let oldLineState={};
        let deviceStatData=ref({'status':{},'eff':[]});
        const effInfo = ref({});
        const dataTypeUnit={
            'Length':'米',
            'Weight':'吨',
            'price':'元/米',
            'electricity':'kwh',
            'steam':'GJ',
            'water':'m³',
        };
        let updateLineStateTimer = null;
        const showIndexData=ref('');
        const currentCXNo = ref(0);
        const buttonCode1=ref('');
        const buttonCode2 = ref('');
        const echarts_sc_qushi = ref(null);
        const echarts_used_qushi = ref(null);
        let echartsEleIns_1=null;
        let echartsEleIns_0=null;
        const isFullScreen = ref(false); //是否全屏模式
        let getDataTimer = null;
        const cxList=ref([
            {"name":1,active:false,index:1},
            {"name":2,active:false,index:2},
            {"name":3,active:false,index:3},
            {"name":4,active:false,index:4},
            {"name":5,active:false,index:5},
            {"name":6,active:false,index:6},
            {"name":7,active:false,index:7},
            {"name":8,active:false,index:8},
        ])
        const btnFrontBg = require('@/assets/image/nav_btn_front.png');
        watch(() => props.clickEvent, newVal=> {
            if(newVal==null){
                return;
            }
            //console.log('印花模型点击：',newVal)
        },{deep:true,immediate:true})
        watch(() => props.in03ModelLoadState, newVal=> {
            if(newVal){
                console.log('印花模型加载状态：',newVal)
                clearTimeout(getDataTimer);
                setTimeout(() => {  
                    DataFull.GetData();                  
                    init();
                }, 1000);                
            }
        },{deep:true,immediate:true})
        watch(() => props.userTimeout, newVal=> {
            console.log('userTimeout value:',newVal)
            if(newVal){
                //if (!AutoPlayer.value && window.CurrentTargetType=='IN02') switchAutoPlayer(); //开启自动漫游               
            }
        },{deep:true,immediate:true}) 

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

        let DataFull={
            GetData:function(){
                getDataTimer = setTimeout(function () {
                    //每1分钟主动查询一次数据
                    DataFull.GetData();
                }, 60*1000);
                api.Get03Data().then((res)=>{
                    if(window.CurrentTargetType!='IN03') return;
                    if (res == null || player.Native==null) {
                        return
                    }
                    if(res.code!=200){
                        return;
                    }
                    deviceStatData.value = res.data;
                    effInfo.value = res.data.eff[currentCXNo.value]; //产线信息
                    LoadSCLine('Length');
                    LoadUsedLine('price');
                });
            }
        }

        async function init(){
            backMasterViewByFac();
            if(window.LINELIST==null){
                var rootItem = await player.Native.ModelTree.getRootItems();
                var rootObj=null;
                for (var i = 0; i < rootItem.length; i++) {
                    if(rootItem[i].name=="T_03"){
                        rootObj = rootItem[i]
                        break;
                    }
                }
                if(rootObj==null){
                    console.log('未找到该模型的根节点')
                    window.location.reload();
                    return;
                }
                var items = await player.Native.ModelTree.getSubItems(rootObj.item)
                if(items.length==1 && items[0].name=='RootNode') rootObj = items[0];
                //获取产线列表
                items =  await player.Native.ModelTree.getSubItems(rootObj.item);
                items.forEach(ele=>{
                    if(ele.name.indexOf('#线')>-1) lines[ele.name] = ele.item;
                })
                window.LINELIST = lines;
            }
            updateLineState();
            if(window.IN03Markers==null){
                window.IN03Markers = [];
                //初始化产线名称标记
                var rootItem = await player.Native.ModelTree.getRootItems();
                var rootObj=null;
                for (var i = 0; i < rootItem.length; i++) {
                        if(rootItem[i].name=="T_03"){
                            rootObj = rootItem[i]
                            break;
                        }
                }
                if(rootObj==null){
                    console.log('未找到该模型的根节点')
                    return;
                }      
                return;
                let t1 = new Date().getTime();          
                var items = await player.Native.ModelTree.getSubItems(rootObj.item)
                if(items.length==1 && items[0].name=='RootNode') rootObj = items[0];
                //获取产线列表
                items =  await player.Native.ModelTree.getSubItems(rootObj.item);
                let markersDef = IN345MARKERS['IN03'];
                for(let i=0; i<items.length; i++){
                    if(items[i].name.indexOf('#线')==-1) continue;
                    let curLineDef = markersDef[items[i].name];
                    if(curLineDef==null ||curLineDef.length==0) continue;
                    var findName = curLineDef[curLineDef.length-1];
                    let object = await player.Native.ModelTree.findItemByName(findName, items[i].item,true,3);                        
                    if( object!=null ){
                            var xyz = await player.Native.ModelTree.getItemShapeInfo(object.item);
                            var xyz2 = [(xyz.aabb[0][0]) , (xyz.aabb[0][1] ) , (xyz.aabb[0][2]) ];
                            // 创建设备编号标记                        
                            var options = {
                                "text": items[i].name,
                                "visible": true,
                                //"maxLod": 110,
                                //"minLod": 0.1,
                                "textFontSize": 15,
                                "textColor": parseInt("0x000fffff"),
                                "userData":"IN03"
                            };
                            options.pos = [xyz2[0]-7, xyz2[1]+2, 15]
                            var markPtr = await player.Native.GisMarker.create(options);
                            player.Native.GisMarker.update(markPtr, options);
                            window.IN03Markers.push(markPtr);
                    }                        
                }
                console.log('--------创建标记总耗时:',new Date().getTime()-t1)
            }
        }
        //更新产线状态颜色
        async function updateLineState(){
            updateLineStateTimer = setTimeout(() => {
                updateLineState();
            }, 1000*60);
            if(window.LINELIST==null || player==null || player.Native==null) return;
            for(let name in window.LINELIST){
                if(oldLineState[name]==window.IN345LINE[name]) continue;
                if(!window.IN345LINE[name]){
                    //产线未开
                    await player.Native.ModelTree.setItemColor(window.LINELIST[name], parseInt("0x666666ff"), true)
                }else{
                    //await player.Native.ModelTree.restoreItemColor(window.LINELIST[name]);//这句有BUG，会导致API调用失败，重而导致ws断开国家利益.暂时不用
                }
            }
            oldLineState = JSON.parse(JSON.stringify(window.IN345LINE));
        }
        function switchIndex(){
            if(showIndexData.value=='index'){
                router.push('/datamain');
            }else{
                router.push('/main');
            }
        }
        function switchCX(ind){
            currentCXNo.value = ind;
            let tmp=cxList.value;
            for (let index = 0; index < tmp.length; index++) {
                const element = tmp[index];
                if(element.index==ind) tmp[index].active = true;
                else tmp[index].active = false;                
            }
            cxList.value = tmp;
            if(ind==0){
                emit('OpenIframeWin',{class:'newwin in03Win',src:'/in03-all-data',title:'染整段(产线数据)'});
            }
            effInfo.value = deviceStatData.value.eff[ind]; //产线信息
            LoadSCLine(buttonCode1.value);
            LoadUsedLine(buttonCode2.value);
        }
        function LoadSCLine(dataType) {
            buttonCode1.value = dataType;
            let data = deviceStatData.value.prodTrade;
            //生产趋势
            //获取数据中weight、aweight、bweight
            var t = echarts_sc_qushi.value;            
            var dataLine = [];
            var times = [];
            var v_series = [];
            for (var i = 0; i < data.length; i++) {                
                var tv = data[i]['date'];
                times.push([tv,data[i].tips]);
                let line = data[i].line[currentCXNo.value];
                if(dataType=='Length'){
                    dataLine.push({value:line['length'],type:'Length'});
                }else{
                    dataLine.push({value:line['weight'],type:'Weight'});
                }
            }
            if (dataLine.length == 0) {
                return
            }
            v_series.push({
                name: currentCXNo.value==0?"全部产线":currentCXNo.value+'号产线', type: 'line',  //symbol: 'none',
                data: dataLine, 
                itemStyle: {
                    normal: {
                        color: '#fbc16b', // 这里设置折线的颜色
                        lineStyle: {
                            color: '#fbc16b' // 这里同时设置线头的颜色
                        }
                    }
                }                
            });
            var opt = {
                title: {
                    show: false, //不显示标题
                    text: '',
                    textStyle: {
                        color: "rgb(89, 151, 229)",
                        fontWeight: "bold"
                    },
                    top: "0px",
                    left: "30px"
                },
                legend: {
                    show: true, //不显示图例
                    inactiveColor: "#04417A",
                    data: "",
                    icon:"circle",
                    textStyle: {color: "#fff"},
                    top: "5",
                    left: "10px",
                },
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: '#fff',
                    textStyle: {
                        color: '#5c6c7c'
                    },
                    padding: [10, 10],
                    extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)',
                    formatter: function (params) {
                        let xv='';
                        let result = '';
                        params.forEach(function (item) {
                            xv=`${item.name}`;
                            xv = xv.split(',')[1]+'<br>';
                            result += ` ${item.marker} ${item.seriesName}:  ${item.value}（`+dataTypeUnit[item.data.type]+`）<br/>`;
                        });
                        return xv+result;
                    }
                },
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '0',
                    top: '15%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: true,
                    axisLabel: {
                        rotate: 45,
                        color: "#26e2fb",
                        formatter:function(v){
                            return v.split(',')[0]
                        }
                    },
                    axisTick:{
                        show:false
                    },
                    data: times
                },
                yAxis: {
                    type: 'value',
                    nameTextStyle: {
                        color: "#26e2fb"
                    },
                    axisLine:{
                        show:true
                    },
                    axisLabel: {
                        color: "#26e2fb"
                    },
                    splitLine: {
                        lineStyle: {
                            color: "#7DA7CD",
                            type: "dashed",
                            width: 1
                        }
                    }
                },
                series: v_series
            };
            if(echartsEleIns_1!=null){
                echartsEleIns_1.dispose();

            }
            echartsEleIns_1 = echarts.init(t);
            echartsEleIns_1.setOption(opt);
        }
        function LoadUsedLine(dataType){
            buttonCode2.value = dataType;
            let data = deviceStatData.value.energyTrade;
            //能耗趋势
            var t = echarts_used_qushi.value;
            var times = [];
            var v_series = [];
            var week_aefficiency = [];
            for (var i = 0; i < data.length; i++) {
                times.push([data[i]['date'],data[i].tips]);
                let line = data[i].line[currentCXNo.value];
                if(line[dataType]!=null) week_aefficiency.push({value:line[dataType],type:dataType});
            }
            if (week_aefficiency.length> 0) {
                v_series.push({
                    name: currentCXNo.value==0?"全部产线":currentCXNo.value+'号产线', type: 'line', //symbol: 'none',
                    data: week_aefficiency, 
                    symbol: 'circle', // 使用圆作为折点标记
                    symbolSize: 6,
                    itemStyle: {
                        normal: {
                            color: '#fbc16b', // 这里设置折线的颜色
                            lineStyle: {
                                color: '#fbc16b' // 这里同时设置线头的颜色
                            }
                        }
                    },
                });
            }
            var opt = {
                title: {
                    show: false, //不显示标题
                    text: '',
                    textStyle: {
                        color: "rgb(89, 151, 229)",
                        fontWeight: "bold"
                    },
                    top: "0px",
                    left: "30px"
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: function (params) {
                        let xv='';
                        let result = '';
                        params.forEach(function (item) {
                            xv=`${item.name}`;
                            xv = xv.split(',')[1]+'<br>';
                            result += ` ${item.marker} ${item.seriesName}:  ${item.value}（`+dataTypeUnit[item.data.type]+`）<br/>`;
                        });
                        return xv+result;
                    }
                },
                legend: {
                    show: true, //不显示图例
                    inactiveColor: "#04417A",
                    data: "",
                    textStyle: {color: "#fff"},
                    top: "5",
                    left:"10px",
                    icon:"circle",
                },
                grid: {
                    left: '3%',
                    right: '1%',
                    bottom: '0',
                    top: '15%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    axisLabel: {
                        rotate: 45,
                        color: "#26e2fb",
                        formatter:function(v){
                            return v.split(',')[0]
                        }
                    },
                    axisLine:{
                        show:true
                    },
                    axisTick:{
                        show:false,
                    },
                    data: times
                },
                yAxis: {
                    type: 'value',
                    nameTextStyle: {
                        color: "#26e2fb"
                    },
                    axisLine:{
                        show:true
                    },
                    axisTick:{
                        show:false,
                    },
                    axisLabel: {
                        color: "#26e2fb"
                    },
                    splitLine: {
                        lineStyle: {
                            color: "#7DA7CD",
                            type: "dashed",
                            width: 1
                        }
                    }
                },
                series: v_series
            };
            if(echartsEleIns_0!=null){
                echartsEleIns_0.dispose();
            }
            echartsEleIns_0 = echarts.init(t);            
            echartsEleIns_0.setOption(opt);
        }
        function backMasterViewByFac(){
            if(player==null || player.Native==null) return;
            if(BODY_H_RATE>0.9){
                //全屏模式下的视角
                player.Native.Camera.moveTo([-91.64839019242504, -186.23753805841608, 166.78946395819892], 
            [-90.82528929434541, 136.7362546068112, -54.52457853422797], 
            [0.0014405644117746175, 0.5652582237894268, 0.8249127621831281], 1);
            }else{
                //非全屏模式下的视角
                player.Native.Camera.moveTo([-90.4534875451608, -201.60779996809177, 156.1529830648182], 
            [-89.63620356422999, 119.08351214395233, -52.22443982968761], 
            [0.001388561848385436, 0.544853112866498, 0.838530355619688], 1);
            }
            // 使用异步函数
            (async () => {
                setTimeout(function() {
                    player.Native.Camera.setAnchorPos([-80.69618225097656,21.59876251220703,11.815500259399414]);
                }, 3000);
            })();
        }
        onMounted(()=>{
            if(BODY_H_RATE>0.9) isFullScreen.value=true;
            else isFullScreen.value=false;
            oldLineState = window.IN345LINE;//初始化产线初始状态
        })
        onUnmounted(()=>{
            clearTimeout(getDataTimer);
            clearTimeout(updateLineStateTimer);
            if(player!=null && player.Native!=null && window.IN03Markers!=null){
                window.IN03Markers.forEach(async ele=>{
                    await player.Native.GisMarker.destroy(ele);
                })
            }
            window.IN03Markers=null;
        })
        return{
            switchIndex,
            echarts_sc_qushi,
            echarts_used_qushi,
            showIndexData,
            deviceStatData,
            effInfo,
            btnFrontBg,
            cxList,
            currentCXNo,
            switchCX,
            buttonCode1,
            buttonCode2,
            isFullScreen,
            LoadUsedLine,
            LoadSCLine,
            backMasterViewByFac,
        }
    }
}
</script>
<style scope="IN03">
.bg20{
    z-index: 1; pointer-events: none;position: absolute;
    top: calc(22px * var(--hRate));
    left: 0;
    width: 1877.54px;
    height: 96%;
    margin-left: 19px;
    border: 2px solid #17666e;
    border-top: 0px;
    background:url('../../assets/image/bg.png');
    -webkit-mask-image: linear-gradient(to top, #0b313de5 10%, transparent 20%,transparent 50%, #0b313de5 100%);
    mask-image: linear-gradient(to top, #0b313de5 10%,transparent 20%,transparent 50%, #0b313de5 100%);
    /*
    
    background:url('../../assets/image/000.png');
    -webkit-mask-image:radial-gradient(circle, transparent 26%, #95afc5 54%);
    
    background: 
    repeating-linear-gradient(
      45deg,
      #ccc 0, #ccc 10px,
      transparent 10px, transparent 20px
    ),
    repeating-linear-gradient(
      -45deg,
      #ccc 0, #ccc 10px,
      transparent 10px, transparent 20px
    );
    background-size: 20px 20px;
   */
}
.bottompanel{
    display: flex;
    left: 3% !important;
    top: calc(728px * var(--hRate)) !important;
    width: 96%;
    height: calc(360px * var(--hRate));
}

.cx{
    width: 100%;
    margin-top: 20px;
    height: 110px;
    color: #27e6ff;
    font-size: 16px;
}

.cx .btn{
    width: 40px;
    height: 40px;
    border: 1px solid #008899;
    line-height: 40px;
    text-align: center;
    display: inline-block;
    float: left;
    margin: 5px;
    border-radius: 5px;
    cursor: pointer;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.cx .btn:hover,.cx .btn.active{
    color: #ffffff;
    border-color: #0cd7f0 !important;
}
.scxl_block{
    font-weight: normal;
    background-image: url('../../assets/image/t03_sc_bg.png');
    height: calc(250px*var(--hRate));
    width: auto;
    background-size: contain;
    background-repeat: no-repeat;
    font-weight: normal !important;
}
.used_qushi_block,.sc_qushi_block{
    height: calc(250px*var(--hRate));
    width: 100%;
    border: 1px solid #008899;
    background: rgb(0 85 102 / 40%);
}

.used_qushi_block_full,.sc_qushi_block_full{
    height: calc(230px*var(--hRate));
    width: 100%;
    border: 1px solid #008899;
    background: rgb(0 85 102 / 40%);
}
</style>