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

<template>
    <div  @click="HideWindow">
        <!--这是印花模块的模块展示内容-->
        <div for="IN03"  id="top" class="top top03" style="padding: 32px 0 0px 0;" @click="switchIndex">
                <div title="进入数据消费平台"
                    style="cursor: pointer;height: 38px;width: 38px;text-align: center;float: right;margin: 0px 49px 0px 10px;"
                    @click.stop="toAdmin"><img src="../../assets/image/toAdmin.png">
                </div>
                <div title="返回主视图"
                    style="cursor: pointer;height: 38px;width: 38px;text-align: center;float: right;margin: 0 10px;"
                    @click.stop="backMasterViewByFac"><img src="../../assets/image/view.png">
                </div>
                <div title="AI分析" ref="icon_btn_ai"
                    style="cursor: pointer;height: 38px;width: 38px;float: right;margin: 0 10px;" @click.stop="OpenAI">
                    <img src="../../assets/image/icon-ai1.png">
                </div>
        </div>
        <div class="bg20"></div>
        <div v-if="isShowAI" class="abs aiPanel" @click.stop="void(0)">
            <div class="triangle2"></div>
            <div class="triangle"></div>
            <div v-for="(p,index) in compProctList" style="margin-top:10px">
                <span style="margin-right: 5px;">产线</span><el-select style="width: 100px;" v-model="p.ai_prouct_no"><el-option v-for="item in cxList" :key="item.index" :label="item.name" :value="item.index"></el-option> </el-select>
                <span style="margin-right: 5px;margin-left: 5px;">时段</span><el-date-picker v-model="p.compDateHour1" type="datetime" date-format="YYYY-MM-DD" time-format="HH" format="YYYY-MM-DD HH" :value-format="'YYYY-MM-DD HH'" placeholder="开始时间"></el-date-picker>
                <!--<span style="margin-right: 5px;margin-left: 5px;">时点</span><el-select style="width: 100px;" v-model="p.compDateHour1"><el-option v-for="item in hourList" :key="item.code" :label="item.name" :value="item.code"></el-option> </el-select>-->
                <span> 到 </span>
                <el-date-picker v-model="p.compDateHour2" type="datetime" date-format="YYYY-MM-DD" time-format="HH"  format="YYYY-MM-DD HH" :value-format="'YYYY-MM-DD HH'" placeholder="结束时间"></el-date-picker>
                <!--<el-select style="width: 100px;" v-model="p.compDateHour2"><el-option v-for="item in hourList" :key="item.code" :label="item.name" :value="item.code"></el-option> </el-select>

                <el-button v-if="index==compProctList.length-1 && compProctList.length<cxList.length" style="margin:10px" @click="addAILine" title="添加产线">+</el-button>
                <el-button v-else style="margin:10px" @click="removeAILine(index)" title="移除该产线">-</el-button>-->
            </div>
            <div v-if="compProctList.length>1 " style="text-align: center;">
                <el-button style="margin:10px" @click.stop="compAILine">AI工艺比对分析</el-button>
                <el-button style="margin:10px" @click.stop="HideWindow">关闭</el-button>
            </div>
        </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;">
                                    <NumberAnimation :value="ReplaceNull(deviceStatData.status.openProd,'0')" :decimal="0" />
                                    <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;">
                                    <NumberAnimation :value="ReplaceNull(deviceStatData.status.open,'0')" :decimal="0" />
                                    <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;">
                                    <NumberAnimation :value="ReplaceNull(deviceStatData.status.total,'0')" :decimal="0" />
                                    <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;">
                                    <NumberAnimation :value="ReplaceNull(deviceStatData.status.baiPei,'0')" :decimal="0" />
                                    <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;">
                                    <NumberAnimation :value="ReplaceNull(deviceStatData.status.length,'0')" :decimal="0" />
                                    <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;">
                                    <NumberAnimation :value="ReplaceNull(deviceStatData.status.weight,'0')" :decimal="2" />
                                    <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>{{ ReplaceNull(effInfo.open,'-') }}<span class="littleFont">台</span></span>
                                <span style="float: right;">{{ ReplaceNull(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>{{ ReplaceNull(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>{{ ReplaceNull(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">
                                            <NumberAnimation :value="ReplaceNull(effInfo.timeA,'0')" :decimal="0" />
                                        </td>
                                        <td style="border:0">
                                            <NumberAnimation :value="ReplaceNull(effInfo.lengthA,'0')" :decimal="0" />
                                        </td>
                                        <td style="border:0">
                                            <NumberAnimation :value="ReplaceNull(effInfo.weightA,'0')" :decimal="2" />
                                        </td>
                                        <!--<td style="border:0">{{ ReplaceNull((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">
                                            <NumberAnimation :value="ReplaceNull(effInfo.timeB,'0')" :decimal="0" />
                                        </td>
                                        <td style="border:0">
                                            <NumberAnimation :value="ReplaceNull(effInfo.lengthB,'0')" :decimal="0" />
                                        </td>
                                        <td style="border:0">
                                            <NumberAnimation :value="ReplaceNull(effInfo.weightB,'0')" :decimal="2" />
                                        </td>
                                        <!--<td style="border:0">{{ ReplaceNull((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>
                                            <NumberAnimation :value="ReplaceNull(effInfo.length,'0')" :decimal="0" />
                                            <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>
                                            <NumberAnimation :value="ReplaceNull(effInfo.weight,'0')" :decimal="2" />
                                            <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>
    </div>
</template>
<script>
import { ref ,watch,onUnmounted,onMounted} from 'vue';
import {useRouter} from 'vue-router';
import api from "@/api/system";
import * as echarts from 'echarts';
import { ElDatePicker,ElMessage } from 'element-plus';
import 'element-plus/dist/index.css'; // 确保导入样式文件
import NumberAnimation from './NumberAnimation.vue';
export default {
    components: {
        NumberAnimation
    },
    props:{
        clickEvent:{
            type:Object,
            required: true,
            default:{}
        },
        in03ModelLoadState:{
            type:Boolean
        },
        userTimeout:{
            type:Boolean
        },
        userRole:{
            type:String
        }
    },
    setup(props,{emit}) {
        const router = useRouter();
        const isShowAI = ref(false);
        const icon_btn_ai = ref(null);
        const compProctList=ref([{
            ai_prouct_no:'',
            compDate:new Date().Format("yyyy-MM-dd"),
            compDateHour1:new Date(new Date().getTime() - 3600000).Format("yyyy-MM-dd hh")+":00:00",
            compDateHour2:new Date(new Date().getTime() - 3600000).Format("yyyy-MM-dd hh")+":00:00"
        },{
            ai_prouct_no:'',
            compDate:new Date().Format("yyyy-MM-dd"),
            compDateHour1:new Date(new Date().getTime() - 3600000).Format("yyyy-MM-dd hh")+":00:00",
            compDateHour2:new Date(new Date().getTime() - 3600000).Format("yyyy-MM-dd hh")+":00:00"
        }]);
        const hourList=ref([]);
        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 lineArrow001=null;
        let lineArrow002=null;
        let getDataTimer = null;
        let lineCurr = null;
        let lineMarkerLoaded = false;
        //产线列表
        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},
        ])
        let compMarkerts={};
        //产线提示框位置，元素顺序为默认位置，左位置和右位置
        const markerPos=[
                    [[-140, 89, 13],[-130, 89, 11],[-80, 89, 11]],
                    [[-130, 77, 13],[-130, 77, 11],[-80, 77, 11]],
                    [[-120, 66, 13],[-130, 66, 11],[-80, 66, 11]],
                    [[-110, 55, 13],[-130, 55, 11],[-80, 55, 11]],
                    [[-101, 44, 13],[-130, 44, 11],[-80, 44, 11]],
                    [[-94, 33, 13],[-130, 33, 11],[-80, 33, 11]],
                    [[-87, 22, 13],[-130, 22, 11],[-80, 22, 11]],
                    [[-80, 11, 13],[-130, 11, 11],[-80, 11, 11]]
        ];
        //温度速度提示框位置，元素顺序为默认位置，左位置和右位置
        const tmpMarkerPos=[
                    [-198, 89, 60],
                    [-198, 77, 60],
                    [-198, 66, 60],
                    [-198, 55, 60],
                    [-198, 44, 60],
                    [-198, 33, 60],
                    [-198, 22, 60],
                    [-198, 11, 60],
        ];
        //订单花色提示框位置，元素顺序为默认位置，左位置和右位置
        const orderMarkerPos=[
                    [-30, 89, 13],
                    [-30, 77, 13],
                    [-30, 66, 13],
                    [-30, 55, 13],
                    [-30, 44, 13],
                    [-30, 33, 13],
                    [-30, 22, 13],
                    [-30, 11, 13],
        ];
        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();
                }, 100);
                init();
            }
        },{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(buttonCode1.value=='' ? 'Length':buttonCode1.value);
                    LoadUsedLine(buttonCode2.value==''?'price':buttonCode2.value);
                    lineCurr = res.data.curr||[];
                    showLineInfo();
                });
            }
        }

        async function init(){
            backMasterViewByFac();
            (async()=>{
                            let marklst = await player.Native.GisMarker.getMarkerList();
                            if(marklst!=null){
                                for(var i=0;i<marklst.length;i++){
                                    if(player!=null && player.Native!=null)player.Native.GisMarker.destroy(marklst[i].id)
                                }
                            }
            })();
            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)
            for(let i=0;i<items.length;i++){
                if(items[i].name=='RootNode') rootObj = items[i];
            }
            if(window.LINELIST==null){

                //获取产线列表
                items =  await player.Native.ModelTree.getSubItems(rootObj.item);
                items.forEach(ele=>{
                    if(ele.name.indexOf('#线')>-1) lines[ele.name] = ele.item;
                    //if(ele.name=='Line001') lineArrow001=ele;
                    //if(ele.name=='Line002') lineArrow002=ele;
                })
                window.LINELIST = lines;
            }
            drawLineNo(rootObj);
            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 drawLineNo(rootObj){
            if(player!=null && player.Native!=null){
                (async()=>{
                    let marklst = await player.Native.GisMarker.getMarkerList();
                    if(marklst!=null){
                        for(var i=0;i<marklst.length;i++){
                            if(player!=null && player.Native!=null)player.Native.GisMarker.destroy(marklst[i].id)
                        }
                    }
                    //隐藏模型产线编号
                    let imgId = await player.Native.GisMarker.loadImage("data://icon/rz-new/pp.png");
                    window.IN03Markers = {};
                    for(let i=0;i<8;i++){
                        player.Native.ModelTree.findItemByName("Text00"+(i+1), rootObj.item,true,3).then(res=>{ 
                            player.Native.ModelTree.setItemVisible([res.item],false);
                        });
                        player.Native.ModelTree.findItemByName("Plane0"+(11+i+1), rootObj.item,true,3).then(res=>{ 
                            player.Native.ModelTree.setItemVisible([res.item],false);
                        });
                        
                        let line = i+1;
                        //产线编号标记
                        var options = {
                            "text": line,
                            // "parentNode": parentObj.item,
                            "visible": true,
                            //"maxLod": 350,
                            //"minLod": 0,
                            "textFontSize": 18,
                            // "size": [48, 48],
                            "textColor": parseInt("0xFFFFFFFF"),
                            "backgroundColor": parseInt("0x00000050"),
                            "contentPadding": [5, 5, 5, 5],
                            "nodeOffset": [0, -24],
                            "userData": "line|"+line
                        };
                        options.pos = markerPos[i][0];
                        //options.parentNode=tmp.item;
                        options.imgId = imgId
                        options.imgSize = [16, 24];
                        player.Native.GisMarker.create(options).then(markPtr=>{
                            window.IN03Markers[markPtr] = options;
                        });                    
                        //产线温度、速度标记    
                        let optTmp = JSON.parse(JSON.stringify(options));
                        optTmp.pos = tmpMarkerPos[i];
                        optTmp.userData = "tmp|"+line;
                        optTmp.textFontSize = "14";
                        optTmp.imgSize = [316, 18];
                        optTmp.textColor = parseInt("0xe5cd10FF");
                        player.Native.GisMarker.create(optTmp).then(markPtr=>{ 
                            window.IN03Markers[markPtr] = optTmp;
                        });
                        
                        //产线订单花色标记.1\2号产线没有
                        if(line>2){
                            let optOrder = JSON.parse(JSON.stringify(options));
                            optOrder.pos = orderMarkerPos[i];
                            optOrder.userData = "order|"+line;
                            optOrder.textFontSize = "14";
                            optOrder.imgSize = [300, 18];
                            optOrder.textColor = parseInt("0xe5cd10FF");
                            player.Native.GisMarker.create(optOrder).then(markPtr=>{ 
                                window.IN03Markers[markPtr] = optOrder;
                            });
                        }
                    }                
                    //标记点击
                    player.Native.GisMarker.EventGisMarkerLClick.connect((event) => {
                        let markerLClickObj = window.IN03Markers[event.markerId];
                        if(markerLClickObj==null){
                            //emit('markerLClick',{});
                            markerLClickObj = compMarkerts[event.markerId];
                            if(markerLClickObj!=null){                            
                                var params = JSON.stringify(compProctList.value);
                                emit('OpenIframeWin',{class:'newwin in03AiCompWin',src:'/in03-ai-comp#'+params,title:'AI工艺比对详情'});
                            }
                            return;
                        }
                        setTimeout(function(dataType){
                            if(dataType==null) return;
                            dataType = dataType.split("|");
                            if(dataType[0]=='line') switchCX(dataType[1]);
                        },100,markerLClickObj["userData"]);
                        //emit('markerLClick',markerLClickObj);
                        return;
                    });
                    //加载产线数据 
                    showLineInfo();                           
                })();
            }

        }
        //显示产线生产信息
        //4楼左边显示产线的定型温度dxTmp、烫光温度tgTmp以及速度speed
        //4楼楼右边显示产线的订单号order和花色color
        async function showLineInfo(){
            if(player==null || player.Native==null || lineCurr==null) return;  
            let lineDataInfo = {};
            lineCurr.forEach(function(item){ 
                lineDataInfo[item.line] = item;
            });               
            let getCnt = 0;
            for(let markerPtr in window.IN03Markers){ 
                let markerOpt = window.IN03Markers[markerPtr];
                if(markerOpt["userData"]==null) continue;
                let datatype = markerOpt["userData"].split("|")[0];
                if(datatype=='line'){
                    continue;
                }
                let line = markerOpt["userData"].split("|")[1];
                if(lineDataInfo[line]==null) continue;
                if(datatype=="tmp") {
                    markerOpt["text"] = line+"# 定型温度:"+ (lineDataInfo[line].dxTmp||"--")+"   烫光温度:"+ (lineDataInfo[line].tgTmp||"--")+"  速度:"+ (lineDataInfo[line].speed||"--");
                }
                if(datatype=="order") {
                    markerOpt["text"] = line+"# 订单号:"+ (lineDataInfo[line].order||"--")+"  花色:"+ (lineDataInfo[line].color||"--");
                }
                player.Native.GisMarker.update(markerPtr, markerOpt);
                getCnt++;
            }
            if(getCnt<14){
                setTimeout(() => {
                    //未完全加载板板，重新加载
                    showLineInfo()
                }, 200);
            }
        }
        //更新产线状态颜色
        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: '5%',
                    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(window.CurrentTargetType!='IN03') return
            if(BODY_H_RATE>0.9){
                //全屏模式下的视角
                player.Native.Camera.moveTo([-91.64839019242504, -186.23753805841608, 166.78946395819892],
            [-80.69618225097656,21.59876251220703,11.815500259399414],
            [0.0014405644117746175, 0.5652582237894268, 0.8249127621831281], 1);
            }else{
                //非全屏模式下的视角
                player.Native.Camera.moveTo([-96.28250048486545,-174.9589162690673,138.93124701014426],
                [ -87.68050285922813,21.819011918402026,11.68395414100361],
                [ 0.0013062340462677805,0.5429710874519466,0.8397503747804266], 1);
            }
        }
        function HideWindow(){
            if(isShowAI.value){
                player.Native.Camera.moveTo([-96.28250048486545,-174.9589162690673,138.93124701014426],
                [ -87.68050285922813,21.819011918402026,11.68395414100361],
                [ 0.0013062340462677805,0.5429710874519466,0.8397503747804266], 1);
            }
            isShowAI.value=false;
            for(var k in  compMarkerts){
                if(player!=null && player.Native!=null)player.Native.GisMarker.destroy(k);
            }
        }
        //切换到数据消费后台
        function toAdmin(){
            window.open(process.env.VUE_APP_SSO+'?role='+(showIndexData=='index'?"producer":"manager"));
        }
        function OpenAI(){
            isShowAI.value=true;
        }
        function addAILine(){
            compProctList.value.push({
                ai_prouct_no:'',
                compDate:'',
                compDateHour1:'',
                compDateHour2:''
            });
        }
        function removeAILine(ind){
            let tmpList=[];
            for(let i=0;i<compProctList.value.length;i++){
                if(i!=ind){
                    tmpList.push(compProctList.value[i]);
                }
            }
            compProctList.value = tmpList;
        }
        async function compAILine(){
            var lineNo1 = compProctList.value[0].ai_prouct_no*1;
            var lineNo2 = compProctList.value[1].ai_prouct_no*1;
            var v={
                line1:lineNo1,
                line2:lineNo2,
                s1:compProctList.value[0].compDateHour1,
                e1:compProctList.value[0].compDateHour2,
                s2:compProctList.value[1].compDateHour1,
                e2:compProctList.value[1].compDateHour2,
            };
            if(v.line1=='' || v.line2==''){
                ElMessage({
                    message:'请选择需要分析的产线！',
                    type:'error',
                    customClass: 'custom-message'
                });
                return;
            }
            if(v.s1==''|| v.s2==''){
                ElMessage({
                    message:'请选择需要分析的日期和时点！',
                    type:'error',
                    customClass: 'custom-message'
                });
                return;
            }
            if(v.s1.indexOf("00:00")==-1) v.s1=v.s1+":00:00"
            if(v.s2.indexOf("00:00")==-1) v.s2=v.s2+":00:00"
            if(v.e1=="") v.e1 = v.s1;
            if(v.e2=="") v.e2 = v.s2;
            if(v.e1.indexOf("00:00")==-1) v.e1=v.e1+":00:00"
            if(v.e2.indexOf("00:00")==-1) v.e2=v.e2+":00:00"
            if(lineNo1==lineNo2 && v.s1==v.s2 && v.e1==v.e2){
                ElMessage({
                    message:'对比分析的产线、时段不能完全相同！',
                    type:'error',
                    customClass: 'custom-message'
                });
                return;
            }
            for(var k in  compMarkerts){
                if(player!=null && player.Native!=null)player.Native.GisMarker.destroy(k);
            }
            var loadingMsg = ElMessage({
                    message:'正在进行工艺分析中...',
                    type:'info',
                    customClass: 'custom-message',
                    duration:0
            });
            compMarkerts = {};
            ///api/yr/compare?line1=1&line2=2&time1=2025-05-13%2008:00:00&time2=2025-05-13%2009:00:00
            fetch(process.env.VUE_APP_API+'/api/yr/compare', {
              method: 'POST', // 指定请求方法为POST
              headers: {
                'Content-Type': 'application/json', // 设置请求头为JSON格式
              },
              body: JSON.stringify(v) // 将数据转换为JSON字符串作为请求体
            })
            .then(response => response.json()) // 解析JSON格式的响应数据
            .then(res => {
                loadingMsg.close();
                if(res.code!=200 || res.data==null){
                    ElMessage({
                        message:res.msg,
                        type:'error',
                        customClass: 'custom-message'
                    });
                    return;
                }
                var line1Data=res.data[0];
                var line2Data=res.data[1];
                MarkLineComper(line1Data,line2Data,v);
            }).catch((error) => {
              console.error('请求失败:', error);
            });
        }

        function ReplaceNull(v,defaultValue){
            if(v==null) return defaultValue;
            return v;
        }
        async function MarkLineComper(line1Data,line2Data,v){
            player.Native.Camera.moveTo([-94.61742308377592, -231.88112394996935, 91.21216074507522],
            [-80.69618225097656,21.59876251220703,11.815500259399414],
            [-0.0033254334820971166, 0.29907134022370024, 0.9542249603468546], 1);
            var lineNo1 = compProctList.value[0].ai_prouct_no*1;
            var lineNo2 = compProctList.value[1].ai_prouct_no*1;
            line1Data['qz']=line1Data.qz||{};
            line2Data['qz']=line2Data.qz||{};
            line1Data['hz']=line1Data.qz||{};
            line2Data['hz']=line2Data.qz||{};
            var dt = "";
            var imgid = await player.Native.GisMarker.loadImage(lineNo1==lineNo2?"data://icon/qietu/tip-m.png":"data://icon/qietu/tip-r.png");
                var tipText = "";
                if(lineNo1!=lineNo2){
                    if(v.s1==v.e1) dt = v.s1.substring(5).replace(":00:00","")+"时";
                    else if(v.s1.substring(0,10)==v.e1.substring(0,10)){
                        dt = v.s1.substring(5).replace(":00:00","")+"时 到 "+v.e1.substring(10).replace(":00:00","")+"时";
                    }
                    else{
                        dt = v.s1.substring(5).replace(":00:00","")+"时 到 "+v.e1.substring(5).replace(":00:00","")+"时";
                    }
                    /*
                    tipText = lineNo1+"#产线\r"+dt
                    +"       \r       合格率(%)："+line1Data.rate
                    +"       \r       重  量(T)："+line1Data.weight
                    +"       \r       米  长(m)："+line1Data.length
                    +"       \r       水(m3)   ："+line1Data.water
                    +"       \r       电(kWh)  ："+line1Data.electricity
                    +"       \r       气(GJ)   ："+line1Data.gas
                    +"       \r              ...";
                    */
                    /*
                    tipText = lineNo1+"#产线\r"+dt
                    +"       \r       产    能(米)："+ReplaceNull(line1Data.length,'-')
                    +"\r———————————————"
                    +"       \r       定　  型(次)："+ReplaceNull(line1Data.qz.dx,'-')
                    +"       \r   前  高　  梳(次)："+ReplaceNull(line1Data.qz.gs,'-')
                    +"       \r   整  双棍烫光(次)："+ReplaceNull(line1Data.qz.tg,'-')
                    +"       \r       双棍刷毛(次)："+ReplaceNull(line1Data.qz.sm,'-')
                    //+"       \r       电(kWh)    ："+(line1Data.qz.elect||'-')
                    //+"       \r       热 油(GJ)  ："+(line1Data.qz.oil||'-')
                    +"       \r              ...";
                    */
                    tipText = lineNo1+"#产线\r"+dt
                    +"       \r       产    能(米)："+ReplaceNull(line1Data.length,'-')
                    +"       \r       白坯投放(米)："+ReplaceNull(line1Data.bp,'-')
                    +"       \r       电(kWh) 　　："+ReplaceNull(line1Data.elect,'-')
                    +"       \r       导热油(GJ)  ："+ReplaceNull(line1Data.oil,'-')
                    +"       \r              ...";
                }else{
                    var dt1="";
                    var dt2="";
                    var dtPadLen = 19;
                    var dataPadLen = 5;
                    var tipWidth = 400;
                    if(v.s1==v.e1) dt1 = v.s1.substring(5).replace(":00:00","")+"时";
                    else if(v.s1.substring(0,10)==v.e1.substring(0,10)){
                        dt1 = v.s1.substring(5).replace(":00:00","")+"时 到 "+v.e1.substring(11).replace(":00:00","")+"时";
                        dataPadLen = 7;
                    }else{
                        dt1 = v.s1.substring(5).replace(":00:00","")+"时 到 "+v.e1.substring(5).replace(":00:00","")+"时";
                        dtPadLen = 24;
                        dataPadLen = 12;
                        tipWidth = 500;
                    }
                    if(v.s2==v.e2) dt2 = v.s2.substring(5).replace(":00:00","")+"时";
                    else if(v.s2.substring(0,10)==v.e2.substring(0,10)){
                        dt2 = v.s2.substring(5).replace(":00:00","")+"时 到 "+v.e2.substring(11).replace(":00:00","")+"时";
                    }else{
                        dt2 = v.s2.substring(5).replace(":00:00","")+"时 到 "+v.e2.substring(5).replace(":00:00","")+"时";
                    }
                    /*
                    tipText = lineNo1+"#产线\r"+
                        dt1.padEnd(dtPadLen," ")+
                        dt2+"\r合格率(%)："+line1Data.rate.toString().padEnd(dataPadLen," ")+"    合格率(%)："+line2Data.rate
                        +"    \r重  量(T)："+line1Data.weight.toString().padEnd(dataPadLen," ")+"    重  量(T)："+line2Data.weight.toString().padEnd(5," ")
                        +"    \r米  长(m)："+line1Data.length.toString().padEnd(dataPadLen," ")+"    米  长(m)："+line2Data.length.toString().padEnd(5," ")
                        +"    \r水(m3)   ："+line1Data.water.toString().padEnd(dataPadLen," ")+"    水(m3)   ："+line2Data.water.toString().padEnd(5," ")
                        +"    \r电(kWh)  ："+line1Data.electricity.toString().padEnd(dataPadLen," ")+"    电(kWh)  ："+line2Data.electricity.toString().padEnd(5," ")
                        +"    \r气(GJ)   ："+line1Data.gas.toString().padEnd(dataPadLen," ")+"    气(GJ)   ："+line2Data.gas.toString().padEnd(5," ");
                    */
                   /*
                    tipText = lineNo1+"#产线\r"+
                        dt1.padEnd(dtPadLen," ")+"        "+dt2
                        +"       \r产能(米)："+ReplaceNull(line1Data.length,'-')+"               产能(米)："+ReplaceNull(line2Data.length,'-')
                        +"\r————————————————————————"
                        +"    \r   定　  型(次)："+ReplaceNull(line1Data.qz.dx,'-').toString().padEnd(dataPadLen," ")+"     定　  型(次)："+ReplaceNull(line2Data.qz.dx,'-').toString().padEnd(5," ")
                        +"    \r前 高　  梳(次)："+ReplaceNull(line1Data.qz.gs,'-').toString().padEnd(dataPadLen," ")+"  前 高　  梳(次)："+ReplaceNull(line2Data.qz.gs,'-').toString().padEnd(5," ")
                        +"    \r整 双棍烫光(次)："+ReplaceNull(line1Data.qz.tg,'-').toString().padEnd(dataPadLen," ")+"  整 双棍烫光(次)："+ReplaceNull(line2Data.qz.tg,'-').toString().padEnd(5," ")
                        +"    \r   双棍刷毛(次)："+ReplaceNull(line1Data.qz.sm,'-').toString().padEnd(dataPadLen," ")+"     双棍刷毛(次)："+ReplaceNull(line2Data.qz.sm,'-').toString().padEnd(5," ")
                        //+"    \r电(kWh)    ："+line1Data.qz.elect.toString().padEnd(dataPadLen," ")+"    电(kWh)  ："+line2Data.qz.elect.toString().padEnd(5," ")
                        //+"    \r热 油(GJ)  ："+line1Data.qz.oil.toString().padEnd(dataPadLen," ")+"    热 油(GJ)   ："+line2Data.qz.oil.toString().padEnd(5," ");
                        +"\r                      ...";
                    }
                    */
                    tipText = lineNo1+"#产线\r"+
                        dt1.padEnd(dtPadLen," ")+"        "+dt2
                        +"    \r产    能(米)："+ReplaceNull(line1Data.length,'-')+"             产    能(米)："+ReplaceNull(line2Data.length,'-')
                        +"    \r白坯投放(米)："+ReplaceNull(line1Data.bp,'-').toString().padEnd(dataPadLen," ")+"         白坯投放(米)："+ReplaceNull(line2Data.bp,'-').toString().padEnd(5," ")
                        +"    \r电(kWh)     ："+ReplaceNull(line1Data.elect,'-').toString().padEnd(dataPadLen," ")+"         电(kWh)     ："+ReplaceNull(line2Data.elect,'-').toString().padEnd(5," ")
                        +"    \r热 油(GJ)   ："+ReplaceNull(line1Data.oil,'-').toString().padEnd(dataPadLen," ")+"         热 油(GJ)   ："+ReplaceNull(line2Data.oil,'-').toString().padEnd(5," ")
                        +"\r                      ...";
                }
                var options = {
                                    "text": tipText,
                                    "visible": true,
                                    //"maxLod": 130,
                                    "minLod": 0,
                                    "textFontSize":16,
                                    "textColor": parseInt("0xffffffff"),
                                    "contentPadding":[10,5,10,10],
                                    "nodeOffset": lineNo1==lineNo2 ? [-130,-150]:[-200,-150],
                                    "userData":"comp|"
                };
                options.pos = lineNo1==lineNo2 ? markerPos[lineNo1-1][0] : markerPos[lineNo1-1][1];
                options.imgId = imgid
                options.imgSize = lineNo1!=lineNo2 ? [260, 150] :[tipWidth, 150];
                var ptr = await player.Native.GisMarker.create(options);
                compMarkerts[ptr] = options;
                if(lineNo1!=lineNo2){
                    if(v.s2==v.e2) dt = v.s2.substring(5).replace(":00:00","")+"时";
                    else if(v.s2.substring(0,10)==v.e2.substring(0,10)){
                        dt = v.s2.substring(5).replace(":00:00","")+"时 到 "+v.e2.substring(11).replace(":00:00","")+"时";
                    }
                    else{
                        dt = v.s2.substring(5).replace(":00:00","")+"时 到 "+v.e2.substring(5).replace(":00:00","")+"时";
                    }
                    /*
                    var tipText = lineNo2+"#产线\r"+dt
                    +"       \r       产    能(米)："+ReplaceNull(line2Data.length,'-')
                    +"\r———————————————"
                    +"       \r       定　  型(次)："+ReplaceNull(line2Data.qz.dx,'-')
                    +"       \r   前  高　  梳(次)："+ReplaceNull(line2Data.qz.gs,'-')
                    +"       \r   整  双棍烫光(次)："+ReplaceNull(line2Data.qz.tg,'-')
                    +"       \r       双棍刷毛(次)："+ReplaceNull(line2Data.qz.sm,'-')
                    //+"       \r       电(kWh)    ："+(line2Data.qz.elect||'-')
                    //+"       \r       热 油(GJ)  ："+(line2Data.qz.oil||'-')
                    +"       \r              ...";
                    */
                    var tipText = lineNo2+"#产线\r"+dt
                    +"       \r       产    能(米)："+ReplaceNull(line2Data.length,'-')
                    +"       \r       白坯投放(米)："+ReplaceNull(line2Data.bp,'-')
                    +"       \r       电(kWh)　 　："+ReplaceNull(line2Data.elect,'-')
                    +"       \r       导热油(GJ)  ："+ReplaceNull(line2Data.oil,'-')
                    +"       \r              ...";
                    var options = {
                                    "text": tipText,
                                    "visible": true,
                                    //"maxLod": 130,
                                    "minLod": 0,
                                    "textFontSize":16,
                                    "textColor": parseInt("0xffffffff"),
                                    "contentPadding":[10,5,10,10],
                                    "nodeOffset":[-50,-150],
                                    "userData":"comp|"
                    };
                    options.pos = markerPos[lineNo2-1][2];
                    var imgid = await player.Native.GisMarker.loadImage("data://icon/qietu/tip-l.png");
                    options.imgId = imgid
                    options.imgSize = [260, 150];
                    var ptr = await player.Native.GisMarker.create(options);
                    compMarkerts[ptr] = options;
                }
        }
        onMounted(()=>{
            if(BODY_H_RATE>0.9) isFullScreen.value=true;
            else isFullScreen.value=false;
            oldLineState = window.IN345LINE;//初始化产线初始状态
            var hour1Opts = [];
            for (var i = 0; i < 24; i++) {
                if(i<10) hour1Opts.push({"name":'0'+i+'时',"code":'0'+i});
                else hour1Opts.push({"name":i+'时',"code":i});
            }
            hourList.value = hour1Opts;
            window.IN03Markers=null;
        })
        onUnmounted(()=>{
            clearTimeout(getDataTimer);
            clearTimeout(updateLineStateTimer);
            if(player!=null && player.Native!=null){
                (async()=>{
                            let marklst = await player.Native.GisMarker.getMarkerList();
                            if(marklst!=null){
                                for(var i=0;i<marklst.length;i++){
                                    if(player!=null && player.Native!=null)player.Native.GisMarker.destroy(marklst[i].id)
                                }
                            }
                })();
            }
            window.IN03Markers=null;
        })
        return{
            HideWindow,
            switchIndex,
            echarts_sc_qushi,
            echarts_used_qushi,
            showIndexData,
            deviceStatData,
            effInfo,
            btnFrontBg,
            cxList,
            currentCXNo,
            switchCX,
            buttonCode1,
            buttonCode2,
            isFullScreen,
            LoadUsedLine,
            LoadSCLine,
            backMasterViewByFac,
            toAdmin,
            OpenAI,
            isShowAI,
            icon_btn_ai,
            compProctList,
            hourList,
            addAILine,
            removeAILine,
            compAILine,
        }
    }
}
</script>
<style scope="IN03">
.custom-message {
  top: 40% !important; /* 例如，将消息框定位到距离顶部50px */
  left: 50% !important;
  transform: translateX(-50%);
}
.el-popper{
    z-index: 99999 !important;
}
.el-time-spinner__wrapper{
    width: 100% !important;
}
.el-scrollbar:nth-of-type(2){
    display: none !important;
}
.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 0%,transparent 15%,transparent 70%, #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%);
}
.aiPanel{
    width: 500px;
    height: auto;
    right: 2%;
    top: 7.5% !important;
    left: auto !important;
    border: 1px solid #008899;
    background: rgb(0 85 102 / 92%);
    z-index: 10000 !important;
    border-radius: 5px;
    padding: 5px;
    font-size: 14px;
}
.aiPanel .triangle{
        width: 0;
        height: 0;
        position: absolute;
        top: -10px;
        right: 130px;
        border-width: 6px;
        border-style: solid;
        border-color:transparent transparent rgb(0 85 102 / 92%) transparent  ;
        border-radius: 4rpx;
}
.aiPanel .triangle2{
        width: 0;
        height: 0;
        position: absolute;
        top: -12px;
        right: 130px;
        border-width: 6px;
        border-style: solid;
        border-color:transparent transparent #008899 transparent  ;
        border-radius: 4rpx;
}
</style>