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

<template>
    <!--这是经编模块的模块展示内容-->
    <div class="bg23">
        <div class="bg32"></div>
    </div>
    <div @click="HideWindow">
        <div for="IN02" id="search"><input v-model="seachValue" type="text" placeholder="请输入设备编号" maxlength="4" @keyup.enter="search"><img
        style="position: absolute;top: 20%;right: 5px;" src="../../assets/image/search_icon.png" class="search_btn" @click="search"></div>
        <div id="search_result" v-if="isshow_search_result">
            <div class="item" v-if="search_result_list.length==0">未搜索到任何设备</div>
            <template v-else>
                <div class="item" v-for="item in search_result_list" @click="ShowInfo(item.code)">{{ item.name }}</div>
            </template>
        </div>
        <div for="IN02"  id="top" class="top top02" 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="backMasterViewBy02"><img src="../../assets/image/view.png"></div>
            <div ref="autoplayer_btn" id="autoplayer_btn" title="切换自动漫游"
                style="cursor: pointer;height: 38px;width: 38px;float: right;margin: 0 10px;" @click.stop="switchAutoPlayer">
                <img v-if="AutoPlayer" src="../../assets/image/auto3d_start.png">
                <img v-else src="../../assets/image/auto3d_stop.png">
            </div>
            <div title="AI分析"
                style="cursor: pointer;height: 38px;width: 38px;float: right;margin: 0 10px;" @click.stop="OpenBPBWin">
                <img src="../../assets/image/icon-ai1.png">
            </div>
        </div>
        <div v-if="isShowFuncMenuList" id="func_menulist">
            <div  id="maogao_btn" title="" style="cursor: pointer;" @click="OpenMaoGaoWin">毛高比重</div>
            <div  id="bpb_fx" title="" style="cursor: pointer;" @click="OpenBPBWin">白坯布预测分析</div>
        </div>
        <div for="IN02" id="dev_state" show="设备状态" style="width: 790px;height: calc(182px*var(--hRate));left: 50%;margin-left: -395px;top:78%;">
            <div class="title_row" style="font-weight: normal;">
                <div class="title_left_line"></div><span>生产情况</span><span style="color:#27e6ff">（今日）</span>
            </div>
            <div class="data_row content" style="display:flex;width:100%;height:calc(134px*var(--hRate));font-weight:normal;font-size: 24px;">
                <div style="width:15%;">
                    <div class="littleFont">米数</div>
                    <div class="label">
                        <NumberAnimation :value="ReplaceNull(indexjsondata.efficiency.totalLength,'0')" :decimal="0" />
                        <span class="unitname">米</span>
                    </div>
                    <div class="littleFont" style="margin-top: calc(30px*var(--hRate));">重量</div>
                    <div class="label">
                        <NumberAnimation :value="ReplaceNull(indexjsondata.efficiency.totalWeight,'0')" :decimal="2" />
                        <span class="unitname">吨</span>
                    </div>
                </div>
                <div style="margin: 0 5%; width:1px;border-left:1px solid #168895 ;"></div>
                <div style="width:11%;height: 100%;">
                    <div class="littleFont">设备<span style="color:#27e6ff">（开机）</span></div>
                    <div class="label" @click="openStopView" title="查看设备停机状态分析" style="cursor: pointer;text-decoration: underline;">
                        <NumberAnimation :value="ReplaceNull(alarmjsondata.device.online,'0')" :decimal="0" />
                        <span class="unitname">台</span>
                    </div>
                    <div class="littleFont" style="margin-top: calc(30px*var(--hRate));">设备<span style="color:#27e6ff">（总数）</span></div>
                    <div class="label">
                        <NumberAnimation :value="ReplaceNull(alarmjsondata.device.total,'0')" :decimal="0" />
                        <span class="unitname">台</span>
                    </div>
                </div>
                <div style="margin: 0 5%; width:1px;border-left:1px solid #168895 ;"></div>
                <div>
                    <div class="littleFont">落卷停机数</div>
                    <div class="label">
                        <NumberAnimation :value="ReplaceNull(alarmjsondata.device.stop6,'0')" :decimal="0" />
                        <span class="unitname">台</span>
                    </div>
                    <div class="littleFont" style="margin-top: calc(30px*var(--hRate));">其他停机数</div>
                    <div class="label">
                        <NumberAnimation :value="ReplaceNull(alarmjsondata.device.alarm,'0')" :decimal="0" />
                        <span class="unitname">台</span>
                    </div>
                </div>
                <div style="width:15%;">
                    <div class="littleFont">断纱停机数</div>
                    <div class="label">
                        <NumberAnimation :value="ReplaceNull(alarmjsondata.device.stop2,'0')" :decimal="0" />
                        <span class="unitname">台</span>
                    </div>
                    <div class="littleFont" style="margin-top: calc(30px*var(--hRate));">盘头小于200圈</div>
                    <div class="label">
                        <NumberAnimation :value="ReplaceNull(alarmjsondata.device.stopPan,'0')" :decimal="0" />
                        <span class="unitname">台</span>
                    </div>
                </div>
                <div>
                    <div class="littleFont">停经片停机数</div>
                    <div class="label">
                        <NumberAnimation :value="ReplaceNull(alarmjsondata.device.stop1,'0')" :decimal="0" />
                        <span class="unitname">台</span>
                    </div>
                    <div class="littleFont" style="margin-top: calc(30px*var(--hRate));">当前开机率</div>
                    <div class="label">
                        <NumberAnimation :value="ReplaceNull(alarmjsondata.device.runningRatio,'0')" :decimal="2" />
                        <span class="unitname">%</span>
                    </div>
                </div>
                <div>
                    <div class="littleFont">叫料数</div>
                    <div class="label">
                        <NumberAnimation :value="ReplaceNull(alarmjsondata.device.stop8,'0')" :decimal="0" />
                        <span class="unitname">台</span>
                    </div>
                  <div class="littleFont" style="margin-top: calc(30px*var(--hRate));">当日开机率</div>
                  <div class="label">
                      <NumberAnimation :value="ReplaceNull(indexjsondata.device.runningRatio,'0')" :decimal="2" />
                      <span class="unitname">%</span>
                  </div>
                </div>
            </div>
        </div>
        <div for="IN02" id="dev_alarm" ref="dev_alarm" show="当前告警" style="color: #ffffff;font-size: 14px;">
            <div class="title_row" style="font-weight: normal;">
                <div class="title_left_line"></div><span>当前告警</span>
            </div>
            <div class="content">
                <table style="width: 100%;font-weight:normal;" cellspacing=0>
                    <thead>
                    <tr>
                        <td class="label" style="width: 30%;text-align: center;">设备编号</td>
                        <td class="label" style="width: 70%">告警类型</td>
                    </tr>
                    </thead>
                </table>
                <div style="height: 128px;width: 100%;overflow: hidden;">
                    <table v-show="AlarmData.length>0" id="dev_alarm_list" ref="dev_alarm_list" style="width: 100%;background: transparent;" cellspacing=0>
                        <tbody>
                        <tr v-for="item in alarmDevList" @click="clickalarmtr(item)" :devno="item.devcode"><td style="width: 30%;text-align: center;">{{item.devcode}}#</td><td :style="'width: 70%;color:'+ item.color">{{ item.typename }}</td></tr>
                        </tbody>
                    </table>
                </div>
                <div style="margin-top: 20px;">
                    <div style="text-align: center;"><img src="../../assets/image/alarm_txt.png"></div>
                    <div class="echarts_alarm" ref="echarts_alarm" id="echarts_alarm" style="height: calc(180px*var(--hRate));width: 100%;">
                    </div>
                </div>
            </div>
        </div>
        <div for="IN02" id="dev_stop" ref="dev_stop" show="停机原因" style="color: #ffffff;font-size: 14px;">
            <div class="title_row" style="font-weight: normal;">
                <div class="title_left_line"></div><span>停机原因</span>
            </div>
            <div class="content">
                <div class="echarts_stop" ref="echarts_stop" id="echarts_stop" style="height: calc(280px*var(--hRate));width: 100%;"></div>
            </div>
        </div>
        <div for="IN02" id="dev_xiaolv" show="生产效率" style="color: #ffffff;font-size: 14px;">
            <div class="title_row" style="font-weight: normal;">
                <div class="title_left_line"></div><span>生产效率</span>
            </div>
            <div class="content">
                <div style="max-height: 96px;width: 100%;overflow: hidden;font-size: 12px;">
                    <table style="width: 100%;" cellspacing=0>
                        <thead>
                        <tr>
                            <td class="label" style="width: 10%;text-align: center;">班组</td>
                            <td class="label" style="width: 25%">生产时间(H)</td>
                            <td class="label" style="width: 25%">已生产数(米)</td>
                            <td class="label" style="width: 20%">总重量(T)</td>
                            <td class="label" style="width: 20%">稼动率(%)</td>
                        </tr>
                        </thead>
                        <tbody>
                        <tr id="scxl_a">
                            <td style="width: 10%;text-align: center;">A组</td>
                            <td style="width: 25%;">{{ scxljsondata.atime }}</td>
                            <td style="width: 25%;">{{ scxljsondata.alength }}</td>
                            <td style="width: 20%;">{{ scxljsondata.aweight }}</td>
                            <td style="width: 20%;">{{ scxljsondata.aefficiency }}</td>
                        </tr>
                        <tr id="scxl_b">
                            <td style="width: 10%;text-align: center;">B组</td>
                            <td style="width: 25%;">{{ scxljsondata.btime }}</td>
                            <td style="width: 25%;">{{ scxljsondata.blength }}</td>
                            <td style="width: 20%;">{{ scxljsondata.bweight }}</td>
                            <td style="width: 20%;">{{ scxljsondata.befficiency }}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div for="IN02" id="dev_jiadonglv" show="稼动率周曲线" style="color: #ffffff;font-size: 14px;">
            <div class="title_row" style="font-weight: normal;">
                <div class="title_left_line"></div><span>稼动率周曲线</span>
            </div>
            <div class="content">
                <div class="echarts_jiadonglv" ref="echarts_jiadonglv" id="echarts_jiadonglv" style="height: 142px;width: 100%;"></div>
            </div>
        </div>
        <div for="IN02" id="dev_sc_qushi" show="生产趋势" style="color: #ffffff;font-size: 14px;">
            <div class="title_row" style="font-weight: normal;">
                <div class="title_left_line"></div><span>生产趋势</span>
            </div>
            <div class="content">
                <div class="echarts_sc_qushi" ref="echarts_sc_qushi" id="echarts_sc_qushi" style="height: 142px;width: 100%;"></div>
            </div>
        </div>
        <div for="IN02" id="dev_used_qushi" show="能耗趋势" style="color: #ffffff;font-size: 14px;">
            <div class="title_row" style="font-weight: normal;">
                <div class="title_left_line"></div><span>能耗趋势</span>
            </div>
            <div class="content">
                <div class="echarts_used_qushi" ref="echarts_used_qushi" id="echarts_used_qushi" style="height: 142px;width: 100%;"></div>
            </div>
        </div>
        <div for="IN02" id="imp_item" v-if="isShowImpItem" desc="导出功能菜单">
            <div :itemcode="index+1" v-for="(item,index) in impFuncList" @click.stop="showImpWin(item,$event)"><span style="display:inline-block;width:85%;">{{ item.name }}</span><img src="../../assets/image/imp2.png" style="float: right;margin-top: 7px;"></div>
            <div @click.stop="showTTT"><span>毯业加工成本</span><img src="../../assets/image/imp2.png" style="float: right;margin-top: 7px;"></div>
        </div>
        <div id="ttt" class="showinfo" v-if="isShowTTT" style="height: 630px;margin-top: -315px;">
                <div class="title">
                    <img src="../../assets/image/title_icon.png" style="margin: 7px;float: left;">
                    <span class="text">毯业加工成本-经编车间</span>
                    <img src="../../assets/image/Close.png" style="margin: 7px;float: right;cursor: pointer;" @click="HideWindow">
                </div>
                <div class="content">
                    <table cellspacing="0" cellpadding="0" style="width: 100%;text-align: center;color: #fff">
                        <thead>
                            <tr style="font-weight: bold;background:rgb(66 90 121);">
                                <td rowspan="2" style="border-right: 1px solid #767e9d !important;">项目</td>
                                <td colspan="2" style="border-right: 1px solid #767e9d !important;border-bottom: 1px solid #767e9d !important;">2024年</td>
                                <td colspan="2" style="border-right: 1px solid #767e9d !important;border-bottom: 1px solid #767e9d !important;">2023年</td>
                                <td colspan="2" style="border-right: 1px solid #767e9d !important;border-bottom: 1px solid #767e9d !important;">差异</td>
                                <td rowspan="2" >原因分析</td>
                            </tr>
                            <tr style="font-weight: bold;background:rgb(66 90 121);">
                                <td style="border-right: 1px solid #767e9d !important;">28169</td><td style="border-right: 1px solid #767e9d !important;">单位成本</td><td style="border-right: 1px solid #767e9d !important;">21574</td><td style="border-right: 1px solid #767e9d !important;">单位成本</td><td style="border-right: 1px solid #767e9d !important;">6594</td><td style="border-right: 1px solid #767e9d !important;">单位成本</td></tr>
                        </thead>
                        <tbody>
                            <tr style="font-weight:bold;background:rgb(236 239 243 / 48%)" v-for="item in tttData">
                                <td v-for="item2 in item">{{ item2 }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
        </div>
        <!--毛高占比窗口-->
        <div id="maogaoWin" class="showinfo" v-if="isShowMaogaoWin">
            <div class="title">
                <img src="../../assets/image/title_icon.png" style="margin: 7px;float: left;">
                <span class="text">生产工艺总览</span>
                <img src="../../assets/image/Close.png" style="margin: 7px;float: right;cursor: pointer;" @click="cloasMaogaoWin">
            </div>
            <div class="content">
                <div style="height: 50px;width: 100%;">
                    <table style="width: 100%;text-align: center;" cellspacing="0" cellpadding="0">
                        <thead>
                        <tr style="height: 50px;font-size:16px;">
                            <td width="33%">毛高</td>
                            <td width="1px" style="color: #817e7e">|</td>
                            <td width="33%">设备数量</td>
                            <td width="1px" style="color: #817e7e">|</td>
                            <td width="33%">占比</td>
                        </tr>
                        </thead>
                    </table>
                </div>
                <div style="height: 340px;overflow: auto;width: 100%;">
                    <table style="width: 100%;text-align: center;" cellspacing="0" cellpadding="0">
                        <tbody>
                            <tr v-if="maogaoData.length==0"><td colspan="6" style="text-align:center">未查询到数据</td></tr>
                            <template v-else>
                                <tr v-for="item in maogaoData" style="color: #FFFFFF;font-size: 20px;cursor: pointer;" title="点击可查看详情" @click="OpenMaoGaoDetailWin(item)">
                                    <td width="33%">{{ item.height }}</td>
                                    <td width="1px" style="color: transparent">|</td>
                                    <td width="33%">{{ item.num }}</td>
                                    <td width="1px" style="color: transparent">|</td>
                                    <td width="33%">{{item.percent}}</td>
                                </tr>
                            </template>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!--毛高占比详情窗口-->
        <div id="maogaoDetailWin" class="newwin" v-if="isShowMaogaoDetailWin">
            <div class="title">
                <img src="../../assets/image/title_icon.png" style="margin: 7px;float: left;">
                <span class="text">生产工艺详情</span>
                <img src="../../assets/image/Close.png" style="margin: 7px;float: right;cursor: pointer;" @click="cloasMaogaoDetailWin">
            </div>
            <div class="content">
                <div style="position: relative;height: 50px">
                    <div id="imp_btn_maogaodetail" @click="impMaogaodetail" title="导出数据" style="cursor: pointer;position: absolute;right: 5px;top: 5px;height: 38px;width: 38px;">
                        <img src="../../assets/image/imp_icon.png">
                    </div>
                </div>
                <div style="height: 64px;">
                    <table style="width: 100%;text-align: center;" cellspacing="0" cellpadding="0">
                        <thead>
                        <tr style="height: 32px;font-size:14px;">
                            <td rowspan="2" width="60" style="border-right: 1px solid #76549b !important;">设备名称</td>
                            <td rowspan="2" width="60" style="border-right: 1px solid #76549b !important;">机台号</td>
                            <td rowspan="2" width="60" style="border-right: 1px solid #76549b !important;">毛高</td>
                            <td rowspan="2" width="60" style="border-right: 1px solid #76549b !important;">配方号</td>
                            <td rowspan="2" width="60" style="border-right: 1px solid #76549b !important;">米克重</td>
                            <td colspan="5" width="300" style="border-right: 1px solid #76549b !important;border-bottom: 1px solid #76549b !important;">
                                送经量
                            </td>
                            <td colspan="3" width="180" style="border-bottom: 1px solid #76549b !important;">线纱规格D</td>
                        </tr>
                        <tr style="height: 32px;">
                            <td width="60" style="border-right: 1px solid #76549b !important;">GB1</td>
                            <td width="60" style="border-right: 1px solid #76549b !important;">GB2</td>
                            <td width="60" style="border-right: 1px solid #76549b !important;">GB3</td>
                            <td width="60" style="border-right: 1px solid #76549b !important;">GB4</td>
                            <td width="60" style="border-right: 1px solid #76549b !important;">GB5</td>
                            <td width="60" style="border-right: 1px solid #76549b !important;">L1、L5</td>
                            <td width="60" style="border-right: 1px solid #76549b !important;">L2、L4</td>
                            <td width="60">L3</td>
                        </tr>
                        </thead>
                    </table>
                </div>
                <div style="height: 420px;overflow: auto;">
                    <table style="width: 100%;text-align: center;" cellspacing="0" cellpadding="0">
                        <tbody>
                            <tr v-for="item in maogaoDetailData" :key="item.index">
                                <td width="60">{{item.device}}</td>
                                <td width="60">{{item.formula_data_2}}</td>
                                <td width="60">{{item.formula_data_15}}</td>
                                <td width="60">{{item.formula_data_1}}</td>
                                <td width="60">{{item.formula_data_3}}</td>
                                <td width="60">{{item.formula_data_19}}</td>
                                <td width="60">{{item.formula_data_20}}</td>
                                <td width="60">{{item.formula_data_21}}</td>
                                <td width="60">{{item.formula_data_22}}</td>
                                <td width="60">{{item.formula_data_23}}</td>
                                <td width="60">{{item.formula_data_4}}</td>
                                <td width="60">{{item.formula_data_5}}</td>
                                <td width="60">{{item.formula_data_6}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div id="iframeWin" v-if="isShowIframeWin" :class="iframeWinData.class">
            <div class="title"><img src="../../assets/image/title_icon.png" style="margin: 7px;float: left;"><span class="text">{{ iframeWinData.title }}</span><img src="../../assets/image/Close.png" style="margin: 7px;float: right;cursor: pointer;" @click="CloseIframeWin"></div>
            <div class="content"><iframe id="ifrm" :src="iframeWinData.src" class=""></iframe></div>
        </div>
        <Imp01 v-if="impItemCode=='01'" :xy="impItemShowDivXY"></Imp01>
        <Imp02 v-if="impItemCode=='02'" :xy="impItemShowDivXY"></Imp02>
        <Imp03 v-if="impItemCode=='03'" :xy="impItemShowDivXY"></Imp03>
        <Imp04 v-if="impItemCode=='04'" :xy="impItemShowDivXY"></Imp04>
        <Imp05 v-if="impItemCode=='05'" :xy="impItemShowDivXY"></Imp05>
        <Imp06 v-if="impItemCode=='06'" :xy="impItemShowDivXY"></Imp06>
        <Imp08 v-if="impItemCode=='08'" :xy="impItemShowDivXY"></Imp08>
        <Imp10 v-if="impItemCode=='10'" :xy="impItemShowDivXY"></Imp10>
        <Imp11 v-if="impItemCode=='11'" :xy="impItemShowDivXY"></Imp11>
        <Imp12 v-if="impItemCode=='12'" :xy="impItemShowDivXY"></Imp12>
        <Imp13 v-if="impItemCode=='13'" :xy="impItemShowDivXY"></Imp13>
        <Imp14 v-if="impItemCode=='14'" :xy="impItemShowDivXY"></Imp14>
        <Imp15 v-if="impItemCode=='15'" :xy="impItemShowDivXY"></Imp15>
    </div>
</template>
<script>
import { ref,onMounted,onUnmounted,watch } from 'vue';
import * as echarts from 'echarts';
import {useRouter} from 'vue-router';
import api from "@/api/system";
import impapi from "@/api/imp";
import Imp01 from "../imp/imp01.vue"
import Imp02 from "../imp/imp02.vue"
import Imp03 from "../imp/imp03.vue"
import Imp04 from "../imp/imp04.vue"
import Imp05 from "../imp/imp05.vue"
import Imp06 from "../imp/imp06.vue"
import Imp08 from "../imp/imp08.vue"
import Imp10 from "../imp/imp10.vue"
import Imp11 from "../imp/imp11.vue"
import Imp12 from "../imp/imp12.vue"
import Imp13 from "../imp/imp13.vue"
import Imp14 from "../imp/imp14.vue"
import Imp15 from "../imp/imp15.vue"
import NumberAnimation from './NumberAnimation.vue'

export default {
    components:{
        Imp01,Imp02,Imp03,Imp04,Imp05,Imp06,Imp08,Imp10,Imp11,Imp12,Imp13,Imp14,Imp15,
        NumberAnimation
    },
    props:{
        clickEvent:{
            type:Object,
            required: true,
            default:{}
        },
        in02ModelLoadState:{
            type:Boolean
        },
        userTimeout:{
            type:Boolean
        },
        userRole:{
            type:String
        }
    },
    setup(props,{emit}) {
        const router = useRouter();
        const showIndexData=ref('');
        let impItemCode=ref('');
        let impItemShowDivXY = ref({top:0,left:0});
        let AutoPlayer=ref(false);
        let isShowFuncMenuList=ref(false);
        let isShowImpItem = ref(null);
        let isshow_search_result = ref(false);
        let search_result_list = ref([]);
        let seachValue = ref([]);
        let LastClickObj='';
        let dbClickTimer =null;
        let openState = false;
        let modelsMap = {};
        let MarkerMap = {};//标记记录
        let MODEL_LOADED  = 1;
        let ALARM_DEVS=[];
        let OFFLINE_DEVS={}
        let indexjsondata=ref({device:{},weekData:[],efficiency:{}});
        let alarmjsondata=ref({device:{}});
        let scxljsondata=ref({});
        let alarmWeek=ref([]);
        let AlarmData=ref([]);
        let tttData = ref([]);
        let stopDeviceNum = ref(0);
        const echarts_stop = ref(null);
        const echarts_jiadonglv = ref(null);
        const echarts_sc_qushi = ref(null);
        const echarts_used_qushi = ref(null);
        const echarts_alarm = ref(null);
        let dev_alarm_echarts = ref(null);
        const dev_stop=ref(null);
        const dev_alarm = ref(null);
        const dev_alarm_list = ref(null);
        const StopDevList=ref([]);
        let DiffStatusDevList=ref({});
        let alarmDevList=ref([]);
        let devAlarmAutoLoadTimter=null;
        let Pan={};
        let LastAlarmDevs={};
        let PanAlarm={};//盘头告警记录
        let deviceInfo=ref({});
        let dataTimer1=null;
        let dataTimer2=null;
        let dataTimer3=null;
        let dataTimer4=null;
        let maogaoData=ref([]);
        let maogaoDetailData = ref([]);
        let maogaoDetailHeight=0;
        let isShowMaogaoWin = ref(false);
        let isShowMaogaoDetailWin = ref(false);
        let isShowTTT = ref(false);
        let isShowIframeWin = ref(false);
        let iframeWinData = ref({});
        let cacheNameRGB = {};
        //导出功能 列表项
        let impFuncList=ref([
            {name:'生产数据',path:'/imp-01',title:'',code:"01",type:"impWin"},
            {name:'停机原因',path:'/imp-02',title:'',code:"02",type:"impWin"},
            {name:'断纱分析',path:'/imp-03',title:'',code:"03",type:"impWin"},
            {name:'并发叫料分析',path:'/imp-04',title:'',code:"04",type:"impWin"},
            {name:'并发下卷分析',path:'/imp-05',title:'',code:"05",type:"impWin"},
            //{name:'告警分析',path:'/imp-06',title:'',code:"06",type:"impWin"},
            {name:'平方米克重',path:'/imp-07',title:'',code:"07"},
            {name:'纱线规格',path:'/imp-08',title:'',code:"08",type:"impWin"},
            {name:'送经量',path:'/imp-09',title:'',code:"09"},
            //{name:'生产绩效日报',path:'/imp-10',title:'',code:"10",type:"impWin"},
            //{name:'生产绩效月报',path:'/imp-11',title:'',code:"11",type:"impWin"},
            //{name:'车间能耗日报',path:'/imp-12',title:'',code:"12",type:"impWin"},
            //{name:'车间能耗月报',path:'/imp-13',title:'',code:"13",type:"impWin"},
            {name:'白坯布靶向预测',path:'/imp-14',title:'',code:"14",type:"impWin"},
            {name:'能耗统计报表',path:'/imp-15',title:'',code:"15",type:"impWin"},
        ]);
        let AlarmType={
            "1": "GB1伺服通讯故障",
            "2": "GB2伺服通讯故障",
            "3": "GB3伺服通讯故障",
            "4": "GB4伺服通讯故障",
            "5": "GB5伺服通讯故障",
            "6": "牵引伺服通讯故障",
            "7": "卷曲伺服通讯故障",
            "8": "断纱故障",
            "9": "电源故障",
            "10": "联动未完全啮合",
            "11": "米长到达",
            "12": "GB1剩余圈数报警",
            "13": "GB2剩余圈数报警",
            "14": "GB3剩余圈数报警",
            "15": "GB4剩余圈数报警",
            "16": "GB5剩余圈数报警",
            "17": "主轴变频掉线",
            "18": "主轴变频故障",
            "19": "GB1伺服故障",
            "20": "GB2伺服故障",
            "21": "GB3伺服故障",
            "22": "GB4伺服故障",
            "23": "GB5伺服故障",
            "24": "牵引伺服故障",
            "25": "卷曲伺服故障",
            "26": "拍照自停",
            "27": "CCD位置报警信息显示",
            "1000": "", //盘头比例低于20%
            "1001": "", //盘头比例低于50%
            "10001": "停经片停机",
            "10002": "CCD断纱停机",
            "10006": "落布米数到达停机",
            "10008": "叫料停机"
        }
        //告警指示灯颜色
        let AlarmColorTypeCode={
            "1": "FF0000",  //红色
            "2": "FF0000",
            "3": "FF0000",
            "4": "FF0000",
            "5": "FF0000",
            "6": "FF0000",
            "7": "FF0000",
            "8": "FF0000",
            "9": "FF0000",
            "10": "FFFF00", //黄色
            "11": "FFFF00", //黄色
            "12": "FFFF00", //黄色
            "13": "FFFF00", //黄色
            "14": "FFFF00", //黄色
            "15": "FFFF00", //黄色
            "16": "FFFF00", //黄色
            "17": "FF0000", //红色
            "18": "FF0000", //红色
            "19": "FF0000", //红色
            "20": "FF0000", //红色
            "21": "FF0000", //红色
            "22": "FF0000", //红色
            "23": "FF0000", //红色
            "24": "FF0000", //红色
            "25": "FF0000",
            "26": "FFFF00",
            "27": "FFFF00",
            "1000": "",         //盘头比例低于20%
            "1001": "",         //盘头比例低于50%
            "10001": "FFFF00",  //黄色
            "10002": "FFFF00",  //黄色
            "10006": "FFFF00",  //黄色
            "10008": "FFFF00"   //黄色
        }
        //停机原因类型
        let StopType={
            "stop1": "停经片停机",
            "stop2": "CCD停机",
            "stop3": "人工停机",
            "stop4": "断电停机",
            "stop5": "设备故障停机",
            "stop6": "落布米数达到停机",
            "stop7": "盘头剩余圈数达到停机",
        }

        watch(() => props.clickEvent, newVal=> {
            if(newVal==null){
                HideWindow();
                return;
            }
            console.log('-----click:',newVal);
            updateInfo('LClick',newVal)
        },{deep:true,immediate:true})
        watch(() => props.in02ModelLoadState, newVal=> {
            console.log('经编模型加载状态：',newVal)
            if(newVal){
                init();
            }
        },{deep:true,immediate:true})
        watch(() => props.userTimeout, newVal=> {
            console.log('IN02 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(){
                if(api==null) return;
                api.GetData().then((res)=> {
                    if(window.CurrentTargetType!='IN02') return;
                    dataTimer1 = setTimeout(function () {
                            //每60秒主动查询一次数据
                            DataFull.GetData()
                        }, INDEX_TIMEOUT);
                        if (res == null || res.code != 0 || window.CurrentTargetType!='IN02') {
                            return
                        }
                        indexjsondata.value = res.data;
                        for(var k in res.data.efficiency)  {
                            res.data.efficiency[k] = res.data.efficiency[k].toFixed(2);
                        }
                        scxljsondata.value = res.data.efficiency;
                        AlarmLine(res.data.weekData);
                        StopLine(res.data.weekData);
                        LoadJDL(res.data.weekData);
                        LoadSCLine(res.data.weekData);
                        LoadUsedLine(res.data.weekData);
                        //$("#dev_state .content .stat .runningRatio").html(jsondata.device.runningRatio);
                        //DataFill.AlarmLine(jsondata.weekData)
                        //DataFill.StopLine(jsondata.weekData)
                        //DataFill.LoadSCXL(jsondata.efficiency)
                        //DataFill.LoadJDL(jsondata.weekData)
                        //DataFill.LoadSCLine(jsondata.weekData)
                        //DataFill.LoadUsedLine(jsondata.weekData)
                })
            },
            GetAlarmData:function(){
                    api.GetAlarmData().then(res=>{
                        if(window.CurrentTargetType!='IN02') return;
                        dataTimer2 = setTimeout(function () {
                            //每10秒主动查询一次数据
                            DataFull.GetAlarmData()
                        }, ALARM_TIMEOUT);
                        if (res == null || res.code != 0 || window.CurrentTargetType!='IN02') {
                            return
                        }
                        alarmjsondata.value = res.data;
                        //DataFill.DevInfo(jsondata.device)
                        AlarmTable(res.data.alarm);
                        LoadPan(res.data.pan);
                    })
            },
            //获取已接入平台设备列表.将在设备模型加载完成后进行初始调用
            GetOnlineDev:function(){
                api.GetOnlineDev().then(res=> {
                    if(window.CurrentTargetType!='IN02') return;
                    dataTimer3 = setTimeout(function () {
                        //每5分钟主动查询一次数据
                        DataFull.GetOnlineDev();
                    }, ONLIME_TIMEOUT);
                    if (res == null || res.code != 0 ||window.CurrentTargetType!='IN02') {
                        return
                    }
                    var jsondata = "," + res.data.join(",") + ",";
                    for (var devcode in modelsMap) {
                        //判断当前设备是否在在线设备列表中
                        //设备原来未接入，现在接入了才恢复正常颜色
                        if (jsondata.indexOf("," + devcode + ",") > -1) {
                            //设备已接入
                            if (OFFLINE_DEVS[devcode] != null) {
                                ChangeModelColor(devcode); //恢复原颜色
                                ChangeModelAlarmState2(devcode);//"00ff00"
                                OFFLINE_DEVS[devcode] = null;
                                console.log('设备上线：', devcode)
                            }
                        } else {
                            if (OFFLINE_DEVS[devcode] == null) {
                                //设备未接入
                                ChangeModelColor(devcode, DEV_OFFLINE_COLOR);
                                ChangeModelAlarmState2(devcode);
                                OFFLINE_DEVS[devcode] = 1
                                console.log('离线设备：',devcode)
                            }
                        }
                    }
                })
            },
            GetStopDev:function(){ 
                impapi.Get00Data().then(async (res)=>{     
                    dataTimer4 = setTimeout(function () {
                        //每60秒主动查询一次数据
                        DataFull.GetStopDev();
                    }, INDEX_TIMEOUT);               
                    if(res.code!=0){
                        return;
                    }
                    res.data.detail.map(item=>{ 
                        DiffStatusDevList.value[item.device] = item;
                    });
                    if(StopDevList.value!=null && StopDevList.value.length>0){
                        //找出状态有变化的设备
                        for(var i=0;i<StopDevList.value.length;i++){
                            var item = StopDevList.value[i];
                            if(DiffStatusDevList.value[item.device]==null){
                                continue;
                            }
                            if(item.status==DiffStatusDevList.value[item.device].status){
                                delete DiffStatusDevList.value[item.device];
                            }
                        }
                    }
                    for(var k in DiffStatusDevList.value){                         
                        let item = DiffStatusDevList.value[k];
                        //状态=0的显示生产中  蓝色，其他停机显示红色
                        let devIten=modelsMap["C_"+item.device]||modelsMap["D_"+item.device];
                        if(devIten==null) continue
                        if(player!=null && player.Native!=null)player.Native.GisMarker.destroy(devIten['markPtr']);
                        let imgid = null;
                        let options = null;
                        console.log('设备状态变化：',item.device,"====",item.device*1%2)
                        if(item.status=="0"){ 
                            //正常生产态                            
                            imgid = await player.Native.GisMarker.loadImage("data://icon/qietu/tip3.png");
                            options = {
                                "text": " "+ k + "#"+"\r\r     正常生产中",
                                "visible": true,
                                //"maxLod": 100,
                                //"minLod": 2,
                                "textFontSize": 16,
                                "textAlign": "center",
                                "contentPadding": [2,2,2,2],
                                "nodeOffset": (item.device*1%2)==0 ? [-120,-340] : [-140,-160],
                                "textColor": parseInt("0xffffffff")
                            };      
                            options.imgSize = [160, 80];                      
                        }else{
                            //停经 断纱 落卷 叫料 黄色
                            if(item.status=="1"||item.status=="7"||item.status=="2"||item.status=="6"){ 
                                imgid = await player.Native.GisMarker.loadImage("data://icon/qietu/tip_yellow.png");
                                options = {
                                    "text":" "+ k + "#"+"\r\r     "+item.remark,
                                    "visible": true,
                                    //"maxLod": 100,
                                    //"minLod": 0.1,
                                    "textFontSize": 16,
                                    "contentPadding": [2,2,2,2],
                                    "textAlign": "center",
                                    "nodeOffset": (item.device*1%2)==0 ? [-120,-340] : [-140,-160],
                                    "textColor": parseInt("0xffffffff")
                                }; 
                                options.imgSize = [160, 80];
                            }else{
                                imgid = await player.Native.GisMarker.loadImage("data://icon/qietu/tip_red.png");
                                options = {
                                    "text":" "+ k + "#"+"\r\r     "+item.remark,
                                    "visible": true,
                                    //"maxLod": 100,
                                    //"minLod": 0.1,
                                    "textFontSize": 16,
                                    "contentPadding": [2,2,2,2],
                                    "textAlign": "center",
                                    "nodeOffset": (item.device*1%2)==0 ? [-120,-340] : [-140,-160],
                                    "textColor": parseInt("0xffffffff")
                                };
                                options.imgSize = [160, 80];
                            }
                        }
                        options.imgId = imgid                        
                        options.pos = [devIten.xyz[0]+1, devIten.xyz[1]-3, 0]
                        let markPtr = await player.Native.GisMarker.create(options);
                        player.Native.GisMarker.update(markPtr, options);
                        devIten['markPtr'] = markPtr;
                    }
                    StopDevList.value = res.data.detail;                     
                }).catch(res=>{
                    console.log("设备停机数据获取失败！",res);
                });
            },
        }

        function search() {
            if (seachValue.value == "") {
                search_result_list.value = [];
                return
            }
            isshow_search_result.value=true;
            var lst = [];
            for (var k in modelsMap) {
                if (k.indexOf(seachValue.value) > -1) {
                    lst.push({"code":k,"name":k.replace("C_", "小经编机").replace("D_", "大经编机")});
                }
            }
            search_result_list.value = lst;
        }

        function switchAutoPlayer(){
            AutoPlayer.value = !AutoPlayer.value;
            if (AutoPlayer.value) {
                try {
                    //循环播放
                    player.Native.CameraAnimation.setLoop(true);
                    // 播放动画
                    player.Native.CameraAnimation.start();
                } catch (e) {
                }
            } else {
                try {
                    player.Native.CameraAnimation.stop();
                } catch (e) {
                }
            }
        }
        async function init(){
            backMasterViewBy02();
            (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)
                    }
                }
            })();
            for (var i in ANIMATION_DATA) {
                // 添加关键帧
                player.Native.CameraAnimation.addKeyFrames([ANIMATION_DATA[i]]);
            }
            //let cfInfo=await player.Native.Model.getInfo("all");
            //player.Native.NodeProxy.setNodeRotation(cfInfo.nodePtr, [0,0,90]);
            var rootItem = await player.Native.ModelTree.getRootItems();
            var rootObj=null;
            for (var i = 0; i < rootItem.length; i++) {
                    if(rootItem[i].name=="T_02"){
                        rootObj = rootItem[i]
                        break;
                    }
            }
             if(rootObj==null){
                    console.log('未找到该模型的根节点')
                    return;
            }
            var rowItems = await player.Native.ModelTree.getSubItems(rootObj.item)
            for (var row = 0; row < rowItems.length; row++) {
                if (rowItems[row].name.length < 2 || (rowItems[row].name.substr(0, 1) != "R" && rowItems[row].name.substr(0, 1) != "D")) continue;
                var devItems = await player.Native.ModelTree.getSubItems(rowItems[row].item)
                for (var i = 0; i < devItems.length; i++) {
                    if (devItems[i].name.length < 2 || (devItems[i].name.substr(0, 2) != 'C_' && devItems[i].name.substr(0, 2) != 'D_')) continue
                    var tmp = devItems[i];// await player.Native.ModelTree.findItemByName(name,0,true,3);

                    //计算当前设备在世界坐标
                    var xyz = await player.Native.ModelTree.calcItemAabb(tmp.item)
                    var xyz2 = [(xyz.aabb.max[0] + xyz.aabb.min[0]) * 0.5, (xyz.aabb.max[1] + xyz.aabb.min[1]) * 0.5, (xyz.aabb.max[2] + xyz.aabb.min[2]) * 0.5];
                    modelsMap[tmp.name] = {item: tmp.item, xyz: xyz2, rowno: rowItems[row].name.substr(1)}
                    //console.log(tmp.name)
                    //初始化设备状态颜色
                    ChangeModelAlarmState2(tmp.name);
                        //创建指示灯标记
                        /*
                        var alarmColorMarker = {
                            "text": "●",
                            "visible": true,
                            "maxLod": 110,
                            "minLod": 0.1,
                            "textFontSize": 14,
                            "textColor": parseInt("0xffffff00") //透明色
                        }
                        alarmColorMarker.pos = [xyz2[0] + 0.7, xyz2[1] - 3, 0]
                        var colormarkPtr = await player.Native.GisMarker.create(alarmColorMarker);
                        player.Native.GisMarker.update(colormarkPtr, alarmColorMarker);
                        modelsAlarmColorMap[tmp.name] = {itemPtr: colormarkPtr, options: alarmColorMarker}
                        */
                }
            }
            //console.log(modelsMap)
            clearTimeout(dataTimer1);
            clearTimeout(dataTimer2);
            clearTimeout(dataTimer3);
            clearTimeout(dataTimer4);
            DataFull.GetData();
            DataFull.GetAlarmData();
            DataFull.GetOnlineDev();
            DataFull.GetStopDev();
            if (ALARM_DEVS.length > 0) {
                for (var i = 0; i < ALARM_DEVS.length; i++) {
                    var s = ALARM_DEVS[i].split(">")
                    //ChangeModelColor(s[0],s[1] , s[2]);

                    ChangeModelAlarmState2(s[0], s[1]);
                }
                ALARM_DEVS = [];//清除
            }
        }
         //经编 2号楼内部最佳视图
        function backMasterViewBy02() {
            if(window.CurrentTargetType!='IN02') return;
            if (AutoPlayer.value) {
                AutoPlayer.value=false;
                try {
                    player.Native.CameraAnimation.stop();
                } catch (e) {
                }
            }
            // player.Native.Camera.moveTo([-60.91624261330108, -39.68511717426356, 85.99570940739352], [-61.26059834308166, -0.225858934410347, -0.5930273740619612], [-0.007940809332449061, 0.9099266223396253, 0.41469324265623975], 1);
            /*player.Native.Camera.moveTo([7.630977787770181, -19.831384507538644, 3.1479712959809714],
            [-18.374309539794922, -20.014415740966797, 0],
            [-0.1600317165278932, 0.0027650086325702416, 0.9871080003892169], 1);
            */
            //-18.330399532189816, -36.35682993987315, 20.472951979735864
            //-18.374309539794922, -20.01441574096679, -7.105427357601002
            //0.004097338015901916, 0.7815354812192895, 0.6238473398328448
            player.Native.Camera.moveTo([-16.875883106106, -40.239128553583534, 25.62119307690701],
            [-17.089787852639105, -19.014737178759784, -1.310617574676634],
            [-0.002761719036738653, 0.7854016082664139, 0.6189803604642822], 1);
        }
        //更改指示灯状态.版本2：更改设备标号牌旁边的指示灯模型
        //绿灯为G 红灯为R 黄灯为Y
        //如果没有告警和停机，显示绿灯另外2个隐藏
        //CCD 叫料 停经片停机显示黄灯另外2个隐藏
        //有故障和掉线二字的显示红灯，其他都显示黄灯
        async function ChangeModelAlarmState2(name, color) {
            if(player.Native==null || window.CurrentTargetType!='IN02') return;
            color = color==null ? "" : color.toUpperCase();
            var iteminfo = modelsMap[name]
            if (iteminfo == null) return;
            var t = (!color ||color=="00FF00"||color=="FFFFFF")?"g":(color=="FF0000"?"r":"y");
            var y_itemid=null,g_itemid=null,r_itemid=null;
            if(cacheNameRGB[name]==null){
                y_itemid = await player.Native.ModelTree.findItemByName(name+"Y",iteminfo.item,true,1)
                g_itemid = await player.Native.ModelTree.findItemByName(name+"G",iteminfo.item,true,1)
                r_itemid = await player.Native.ModelTree.findItemByName(name+"R",iteminfo.item,true,1)
                cacheNameRGB[name]=[r_itemid,g_itemid,y_itemid];
            }else{
                y_itemid = cacheNameRGB[name][2];
                g_itemid = cacheNameRGB[name][1];
                r_itemid = cacheNameRGB[name][0];
            }
            player.Native.ModelTree.setItemVisible([y_itemid.item,g_itemid.item,r_itemid.item],false)
            if(t=='g'){
                player.Native.ModelTree.setItemVisible([g_itemid.item],true);
                return;
            }
            if(t=='r'){
                player.Native.ModelTree.setItemVisible([r_itemid.item],true);
                return;
            }
            if(t=='y'){
                player.Native.ModelTree.setItemVisible([y_itemid.item],true);
                return;
            }
        }
        //设置设置名称或者模型id的颜色
        async function ChangeModelColor(name, color, hinttxt) {
            if(player.Native==null || window.CurrentTargetType!='IN02') return;
            var iteminfo = modelsMap[name]
            if (iteminfo == null) return
            //var tmp = await player.Native.ModelTree.findItemByName(name,0,true,3);
            if (color == null || color == "") {
                if (OFFLINE_DEVS[name] == 1) return; //离线设备无需处理
                //还原
                await player.Native.ModelTree.restoreItemColor(iteminfo.item)
                //隐藏已有标签
                await player.Native.GisMarker.update(MarkerMap[name], {"visible": false});
                MarkerMap[name] = null;
            } else {
                await player.Native.ModelTree.setItemColor(iteminfo.item, parseInt("0x" + color + "ff"), true)
                if (hinttxt != null && hinttxt != "") {
                    var srcPosition = iteminfo.xyz // await player.Native.NodeProxy.getNodePosition(temp.item);
                    //console.log("posio",srcPosition)
                    // 创建标记
                    var options = {};
                    if (MarkerOptMap[name] == null) {
                        var imgid = await player.Native.GisMarker.loadImage("rgba:255,0,0,255");
                        options = {
                            "text": hinttxt,
                            "visible": true,
                            "maxLod": 130,
                            "minLod": 0.1,
                            "textColor": parseInt("0xffffffff")
                        };
                        options.pos = [srcPosition[0] - 1, srcPosition[1] - 2, srcPosition[2]];
                        //options.parentNode=tmp.item;
                        options.imgId = imgid
                        options.imgSize = [-1, -1];
                        MarkerOptMap[name] = options;
                    } else {
                        options = MarkerOptMap[name]
                        options.text = hinttxt;
                    }
                    if (MarkerMap[name] != null) {
                        await player.Native.GisMarker.update(MarkerMap[name], options);
                    } else {
                        var markPtr = await player.Native.GisMarker.create(options);
                        await player.Native.GisMarker.update(markPtr, options);
                        MarkerMap[name] = markPtr;
                    }
                } else {
                    await player.Native.GisMarker.update(MarkerMap[name], {"visible": false});
                }
            }
        }
        function showFuncMenuList(event){
            //event.stopPropagation();
            isShowFuncMenuList.value=true;
        }
        async function updateInfo(name, event) {
            if(player.Native==null) return;
            if(event.object==null) return;
            if (AutoPlayer.value)
            {
                //停止 自动漫游
                AutoPlayer.value=false;
                player.Native.CameraAnimation.stop();
            }
            if (name != "LClick") {
                HideWindow();
                return
            }
            //console.log(event)
            var ty = event.object.nodePtr != null ? 'NODE' : 'ITEM';
            var modelsId = ty == 'NODE' ? event.object.nodePtr : event.object.item;
            if (modelsId == null || modelsId == "") {
                HideWindow();
                return
            }
            var devName = null;
            var cnt = 0;
            var p = null;
            while (devName == null) {
                if (cnt > 5) break //最多查找5层
                if (ty == 'NODE') p = await player.Native.NodeProxy.getNodeParent(modelsId) //节点类型的node
                else p = await player.Native.ModelTree.getItemInfo(modelsId)
                console.log('p:',p)
                if (p.name != null &&p.name!=null && (p.name.substr(0, 2) == "C_")||p.name.substr(0, 2) == "D_") {
                    devName = p.name
                    break
                }
                modelsId = ty == 'NODE' ? p.nodePtr : p.parentItem;
                cnt++
            }
            console.log('Lclick name:',devName,'   LastClickObj:',LastClickObj)
            if (devName == null) {
                HideWindow();
                return
            }
            if (devName == LastClickObj) {
                if (dbClickTimer != null) clearTimeout(dbClickTimer)
                HideWindow();
                //双击
                if (openState) return //窗口已经打开
                OpenWin(devName)
                return
            }
            HideWindow();
            LastClickObj = devName
            dbClickTimer = setTimeout(function (n) {
                ShowInfo(n)
                LastClickObj = null
            }, 200, devName)
        }
        //显示设备基本信息
        async function ShowInfo(name) {
            var se = modelsMap[name];// await player.Native.ModelTree.findItemByName(name,0,true,3);
            if(se==null || player.Native==null || window.CurrentTargetType!='IN02') return;
            //选中
            player.Native.ModelTree.setSelectItem(se.item);
            var calcInfo = await PlayerUtils.call(player.Native.ModelTree.calcItemAabb, se.item);
            //调整目标对象的视角和角度
            if(se.rowno%2==0){
                // 面索引，0表示不定位视角，可设置一个面，也可设置两个或三个面进行组合
                // Top = 1
                // Bottom = 2
                // Front = 4
                // Back = 8
                // Left = 16
                // Right = 32,
                //移动到目标并放大
                player.Native.Camera.moveToAabbWithDistance([calcInfo.localAabb.min, [calcInfo.localAabb.max[0],calcInfo.localAabb.max[1],calcInfo.localAabb.max[2]-1]], 0.2, 9, 0.5);
            }else{
                //backMasterView();
                player.Native.Camera.moveToAabbWithDistance([calcInfo.localAabb.min, [calcInfo.localAabb.max[0],calcInfo.localAabb.max[1],calcInfo.localAabb.max[2]-1]], 0.2, 5, 0.5);
            }
            emit('OpenIframeWin',{class:'newwin deviceInfoWin',src:'/in02-device-info#'+name,title:name.replace('C_','小经编机').replace('D_','大经编机')+'#基本信息'})
            //player.Native.Camera.moveToAabbWithDistance([calcInfo.localAabb.min, calcInfo.localAabb.max], 0.2, 21, 4);
          }
        //打开单设备窗口
        function OpenWin(name) {
            if (LastClickObj != null && name != LastClickObj) return;
            emit('OpenIframeWin',{class:'newwin',src:'/in02-device-peifang#'+name,title:name.replace('C_','小经编机').replace('D_','大经编机')+'#详细信息'})
        }

        function AlarmLine (data) {
            //只获取数据中的alarm数据
            var times = [];
            var v_series = [];
            var tmpWeek=[];
            for (var i = 0; i < data.length; i++) {
                var v = data[i]['alarm'];
                var tv = data[i]['time'].split("-")
                times.push([tv[2],data[i]['time']]);
                if (v != null) tmpWeek.push(v);
            }
            alarmWeek.value = tmpWeek;
            if (alarmWeek.value.length > 0){
                v_series.push({
                    name: "",
                    type: 'line',
                    smooth: true,
                    //symbol: 'none',
                    data: alarmWeek.value,
                    itemStyle: {
                        normal: {
                            color: '#F0F275', // 这里设置折线的颜色
                            lineStyle: {
                                color: '#F0F27560' // 这里同时设置线头的颜色
                            }
                        }
                    },
                });
                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.value}（次）<br/>`;
                            });
                            return xv+result;
                        }
                    },
                    legend: {
                        show: false, //不显示图例
                        inactiveColor: "#04417A",
                        data: "",
                        textStyle: {color: "#fff"},
                        top: "0px"
                    },
                    grid: {
                        left: '1%',
                        right: '2%',
                        bottom: '2%',
                        top: '5%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        axisLabel: {
                            rotate: 0,
                            color: "#26e2fb",
                            formatter:function(v){
                                return v.split(',')[0];
                            }
                        },
                        data: times
                    },
                    yAxis: {
                        type: 'value',
                        nameTextStyle: {
                            color: "#fff"
                        },
                        axisLabel: {
                            color: "#26e2fb"
                        },
                        splitLine: {
                            lineStyle: {
                                color: "#7DA7CD",
                                type: "dashed",
                                width: 1
                            }
                        }
                    },
                    series: v_series
                };
                var echartsEle = echarts.init(document.getElementById('echarts_alarm'));
                echartsEle.setOption(opt);
            }
        }
        function StopLine (data, typecode) {
            var t = dev_stop.value;
            var week = {"stop1A": [], "stop2A": [], "stop3A": [], "stop1B": [], "stop2B": [], "stop3B": []};
            var times = [];
            var v_series = [];
            for (var i = 0; i < data.length; i++) {
                var tv = data[i]['time'].split("-")
                times.push([tv[2],data[i]['time']]);
                for (var k1 in week) {
                    week[k1].push(data[i][k1])
                }
            }
            stopDeviceNum.value = week.stop1A.length + week.stop2A.length + week.stop3A.length + week.stop1B.length + week.stop2B.length + week.stop3B.length
            if (stopDeviceNum.value == 0) {
                echarts_stop.value.innerHtml='';
                return;
            }
            var option = {
                title: {
                    show: false,
                    text: '',
                    left: 'center',
                    top: '1%',
                    bottom: '0'
                },
                color: ["#ffb649", "#cdff5b", "#47b9fb", "#fe7a00","#8fc318","#277dfe"],

                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}（次）<br/>`;
                        });
                        return xv+result;
                    }
                },
                legend: {
                    data: ['停经片A班', 'CCD断纱A班', '人工停机A班', '停经片B班', 'CCD断纱B班', '人工停机B班',],
                    button: '5%',
                    icon:"circle",
                    textStyle: {color: "#fff"},
                    top: "0px",
                    padding:[0,0],
                },
                grid: {
                    containLabel: true,
                    top: '25%',
                    bottom: '0',
                    right: '1%',
                    left: '1%'
                },
                xAxis: [{
                    type: 'category',
                    boundaryGap: true,
                    data: times,
                    axisLabel: {
                        rotate: 0,
                        color: "#26e2fb",
                        formatter:function(v){
                            return v.split(',')[0];
                        }
                    },
                    axisPointer: {snap: false}
                }],
                yAxis: [{
                    type: 'value',
                    axisPointer: {snap: false},
                    axisLabel: {
                        color: "#26e2fb"
                    },
                    splitLine: {
                        lineStyle: {
                            color: "#7DA7CD",
                            type: "dashed",
                            width: 1
                        }
                    }
                }],
                series: [{
                    name: '停经片A班',
                    type: 'bar',
                    barWidth: 5,
                    stack: 'jp',
                    data: week.stop1A
                }, {
                    name: 'CCD断纱A班',
                    type: 'bar',
                    barWidth: 5,
                    stack: 'ccd',
                    data: week.stop3A
                }, {
                    name: '人工停机A班',
                    type: 'bar',
                    barWidth: 5,
                    stack: 'r',
                    data: week.stop2B
                }, {
                    name: '停经片B班',
                    type: 'bar',
                    stack: 'jp',
                    data: week.stop2A
                }, {
                    name: 'CCD断纱B班',
                    type: 'bar',
                    stack: 'ccd',
                    data: week.stop1B
                }, {
                    name: '人工停机B班',
                    type: 'bar',
                    stack: 'r',
                    data: week.stop3B
                }]
            };
            var echartsEle = echarts.init(echarts_stop.value);
            echartsEle.setOption(option);
        }
        function LoadJDL(data) {
            //稼动率
            //获取数据中efficiency、aefficiency、befficiency
            var t = echarts_jiadonglv.value;
            var week_efficiency = [];
            var week_aefficiency = [];
            var week_befficiency = [];
            var times = [];
            var v_series = [];
            var minValue = 100;
            for (var i = 0; i < data.length; i++) {
                var v = data[i]['efficiency'];
                var tv = data[i]['time'].split("-")
                times.push([tv[2],data[i]['time']]);
                if (v != null) week_efficiency.push(v);
                week_aefficiency.push(data[i]['aefficiency']);
                week_befficiency.push(data[i]['befficiency']);
                if(data[i]['aefficiency']<minValue) minValue = parseInt(data[i]['aefficiency']);
                if(data[i]['befficiency']<minValue) minValue = parseInt(data[i]['befficiency']);
            }
            minValue = minValue-10;
            if (week_efficiency.length == 0) {
                return
            }
            v_series.push({
                name: "总稼动率", type: 'line',
                smooth:true,
                showSymbol: false,
                data: week_efficiency, itemStyle: {
                    normal: {
                        color: '#F0F275', // 这里设置折线的颜色
                        lineStyle: {
                            color: '#F0F275' // 这里同时设置线头的颜色
                        }
                    }
                },
            });
            v_series.push({
                name: "A组稼动率", type: 'line',
                smooth:true,
                showSymbol: false,
                data: week_aefficiency, itemStyle: {
                    normal: {
                        color: '#1EFFFF', // 这里设置折线的颜色
                        lineStyle: {
                            color: '#1EFFFF' // 这里同时设置线头的颜色
                        }
                    }
                },
            });
            v_series.push({
                name: "B组稼动率", type: 'line',
                smooth:true,
                showSymbol: false,
                data: week_befficiency, itemStyle: {
                    normal: {
                        color: '#fb4750', // 这里设置折线的颜色
                        lineStyle: {
                            color: '#fb4750' // 这里同时设置线头的颜色
                        }
                    }
                },
            });
            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} %<br/>`;
                        });
                        return xv+result;
                    }
                },
                legend: {
                    show: true, //不显示图例
                    inactiveColor: "#04417A",
                    data: "",
                    icon:"circle",
                    textStyle: {color: "#fff"},
                    top: "top",
                    left:"left",
                },
                grid: {
                    left: '3%',
                    right: '2%',
                    bottom: '0',
                    top: '25%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    axisLabel: {
                        rotate: 0,
                        color: "#26e2fb",
                        formatter:function(v){
                            return v.split(',')[0];
                        }
                    },
                    data: times
                },
                yAxis: {
                    type: 'value',
                    min:minValue,
                    nameTextStyle: {
                        color: "#26e2fb"
                    },
                    axisLabel: {
                        color: "#26e2fb"
                    },
                    splitLine: {
                        lineStyle: {
                            color: "#7DA7CD",
                            type: "dashed",
                            width: 1
                        }
                    }
                },
                series: v_series
            };
            var echartsEle = echarts.init(t);
            echartsEle.setOption(opt);
        }
        function LoadSCLine(data) {
            //生产趋势
            //获取数据中weight、aweight、bweight
            var t = echarts_sc_qushi.value;
            var week_efficiency = [];
            var week_aefficiency = [];
            var week_befficiency = [];
            var times = [];
            var v_series = [];
            for (var i = 0; i < data.length; i++) {
                var tv = data[i]['time'].split("-")
                times.push([tv[2],data[i]['time']]);
                week_efficiency.push(data[i]['length'])
                week_aefficiency.push(data[i]['lengthA'])
                week_befficiency.push(data[i]['lengthB'])
            }
            if (week_efficiency.length == 0) {
                return
            }
            v_series.push({
                name: "总产量", type: 'line', smooth:true, showSymbol: false,
                data: week_efficiency, itemStyle: {
                    normal: {
                        color: '#F0F275', // 这里设置折线的颜色
                        lineStyle: {
                            color: '#F0F275' // 这里同时设置线头的颜色
                        }
                    }
                },
            });
            v_series.push({
                name: "A组产量", type: 'line', smooth:true, showSymbol: false,
                data: week_aefficiency, itemStyle: {
                    normal: {
                        color: '#1EFFFF', // 这里设置折线的颜色
                        lineStyle: {
                            color: '#1EFFFF' // 这里同时设置线头的颜色
                        }
                    }
                }
            });
            v_series.push({
                name: "B组产量", type: 'line',  smooth:true, showSymbol: false,
                data: week_befficiency, itemStyle: {
                    normal: {
                        color: '#fc4850', // 这里设置折线的颜色
                        lineStyle: {
                            color: '#fc4850' // 这里同时设置线头的颜色
                        }
                    }
                }
            });
            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: "top",
                    left:"left",
                },
                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}（米/日）<br/>`;
                        });
                        return xv+result;
                    }
                },
                grid: {
                    left: '3%',
                    right: '2%',
                    bottom: '0',
                    top: '25%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    axisLabel: {
                        rotate: 0,
                        color: "#26e2fb",
                        formatter:function(v){
                            return v.split(',')[0]
                        }
                    },
                    data: times
                },
                yAxis: {
                    type: 'value',
                    nameTextStyle: {
                        color: "#26e2fb"
                    },
                    axisLabel: {
                        color: "#26e2fb"
                    },
                    splitLine: {
                        lineStyle: {
                            color: "#7DA7CD",
                            type: "dashed",
                            width: 1
                        }
                    }
                },
                series: v_series
            };
            var echartsEle = echarts.init(t);
            echartsEle.setOption(opt);
        }
        function LoadUsedLine(data){
            //能耗趋势
            //获取数据中kwh、akwh、bkwh
            var t = echarts_used_qushi.value;
            var week_efficiency = [];
            var week_aefficiency = [];
            var week_befficiency = [];
            var times = [];
            var v_series = [];
            for (var i = 0; i < data.length; i++) {
                var v = data[i]['kwh'];
                var tv = data[i]['time'].split("-")
                times.push([tv[2],data[i]['time']]);
                if (v != null) week_efficiency.push(v);
                week_aefficiency.push(data[i]['akwh'])
                week_befficiency.push(data[i]['bkwh'])
            }
            if (week_efficiency.length == 0) {
                return
            }
            v_series.push({
                name: "总电量", type: 'line', smooth:true, showSymbol: false,
                data: week_efficiency, itemStyle: {
                    normal: {
                        color: '#F0F275', // 这里设置折线的颜色
                        lineStyle: {
                            color: '#F0F275' // 这里同时设置线头的颜色
                        }
                    }
                },
            });
            v_series.push({
                name: "A组电量", type: 'line', smooth:true, showSymbol: false,
                data: week_aefficiency, itemStyle: {
                    normal: {
                        color: '#1EFFFF', // 这里设置折线的颜色
                        lineStyle: {
                            color: '#1EFFFF' // 这里同时设置线头的颜色
                        }
                    }
                },
            });
            v_series.push({
                name: "B组电量", type: 'line', smooth:true, showSymbol: false,
                data: week_befficiency, itemStyle: {
                    normal: {
                        color: '#fb4750', // 这里设置折线的颜色
                        lineStyle: {
                            color: '#fb4750' // 这里同时设置线头的颜色
                        }
                    }
                },
            });
            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}（kWh）<br/>`;
                        });
                        return xv+result;
                    }
                },
                legend: {
                    show: true, //不显示图例
                    inactiveColor: "#04417A",
                    data: "",
                    icon:"circle",
                    textStyle: {color: "#fff"},
                    top: "top",
                    left:"left",
                    padding:[0,5]
                },
                grid: {
                    left: '3%',
                    right: '2%',
                    bottom: '0',
                    top: '25%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    axisLabel: {
                        rotate: 0,
                        color: "#26e2fb",
                        formatter:function(v){
                            return v.split(',')[0]
                        }
                    },
                    data: times
                },
                yAxis: {
                    type: 'value',
                    nameTextStyle: {
                        color: "#26e2fb"
                    },
                    axisLabel: {
                        color: "#26e2fb"
                    },
                    splitLine: {
                        lineStyle: {
                            color: "#7DA7CD",
                            type: "dashed",
                            width: 1
                        }
                    }
                },
                series: v_series
            };
            var echartsEle = echarts.init(t);
            echartsEle.setOption(opt);
        }
        //告警设备列表数据
        function AlarmTable(data) {
            AlarmData.value = data;
            if (data == null || data.length == 0) {
                for (var devcode in modelsMap) {
                    if(LastAlarmDevs[devcode]==null) continue;
                    LastAlarmDevs[devcode] = null;
                    if (PanAlarm[devcode] == null) {
                        //还原设备状态
                        ChangeModelColor(devcode);
                        ChangeModelAlarmState2(devcode); //"00ff00" 绿色
                    }
                }
                return
            }
            var alarmDev = {};
            for (var i = 0; i < AlarmData.value.length; i++) {
                alarmDev[AlarmData.value[i].code] = AlarmData.value[i].type;
            }
            //var tpl = '<tr style="font-weight:bold" devno="{1}"><td style="width: 30%;">{1}#</td><td style="width: 70%;color:{COLOR}">{2}</td></tr>';
            //var lst = [];
            for (var devcode in alarmDev) {
                var alarmInfo = alarmDev[devcode];
                var color = "rgb(206,161,94)" //默认告警文本颜色
                var typeName = AlarmType[alarmInfo];
                if (typeName.indexOf("故障") > -1 || typeName.indexOf("掉线") > -1) color = "rgb(195,70,76)" //红色提醒
                alarmDev[devcode]={color:color,devcode:devcode.replace(/C_/g, "").replace(/D_/g, ""),devcode_all:devcode,typename:typeName,type:alarmInfo};
                ChangeModelAlarmState2(devcode,AlarmColorTypeCode[alarmInfo]); //"00ff00" 绿色
                //lst.push(tpl.replace(/\{1\}/gi, devcode.replace(/C_/g, "")).replace(/\{2\}/g, typeName).replace('{COLOR}', color))
            }
            alarmDevList.value = alarmDev;
            //dev_alarm_list.value.innerHtml='<tbody>'+lst.join('')+'</tbody>';
            var noAlarmDevs = [];

            for (var devcode in modelsMap) {
                    if (OFFLINE_DEVS[devcode] == 1) continue;
                    var alarmInfo = alarmDev[devcode];
                    //上一次没有告警，本次有告警，需要设置成告警状态
                    if (alarmInfo != null) {
                        if (LastAlarmDevs[devcode] == null) {
                            var typeName = AlarmType[alarmInfo];
                            if (MODEL_LOADED == 1) {
                                //机器告警提示
                                //ChangeModelColor(devcode, DEV_ALAR_COLOR, typeName)
                                ChangeModelAlarmState2(devcode, AlarmColorTypeCode[alarmInfo]);
                            } else {
                                //记录下来，等待模型加载完成时处理
                                //ALARM_DEVS.push(devcode + ">"+DEV_ALAR_COLOR+">" + typeName)
                                ALARM_DEVS.push(devcode + ">" + AlarmColorTypeCode[alarmInfo] + ">" + typeName)
                            }
                        }
                        LastAlarmDevs[devcode] = 1;
                    } else {
                        //上一次有告警，并且没有盘头告警时，本次未告警，需要恢复成未告警状态
                        if (LastAlarmDevs[devcode] == 1 && PanAlarm[devcode] == null) {
                            noAlarmDevs.push(devcode);
                        }
                        LastAlarmDevs[devcode] = null;
                    }
            }
            var tb = dev_alarm_list.value;
            //console.log(tb,tb.parentElement)
            if(tb==null) return;
            if (parseInt(window.getComputedStyle(tb).height) > parseInt(window.getComputedStyle(tb.parentElement).height)) {
                if (devAlarmAutoLoadTimter != null) {
                    clearInterval(devAlarmAutoLoadTimter);
                }
                tb.style.top='0px';
                tb.style.position='relative';
                devAlarmAutoLoadTimter = window.setInterval(function () {
                    var tb = dev_alarm_list.value;
                    if(tb==null) return;
                    var tbs = window.getComputedStyle(tb);
                    var tbtop = tb.style.top.replace("px", "") * 1;
                    if (Math.abs(tbtop) >= (parseInt(tbs.height) - 32)) {
                        tb.style.top='0px'
                    } else {
                        tb.style.top = (tbtop - 32) + "px";
                    }
                }, 3000);
            } else {
                clearInterval(devAlarmAutoLoadTimter)
                tb.style.top='0px';
            }
            if (noAlarmDevs.length > 0) {
                for (var i = 0; i < noAlarmDevs.length; i++) {
                    if(LastAlarmDevs[noAlarmDevs[i]]==null) continue;
                    //还原设备的无告警状态
                    ChangeModelColor(noAlarmDevs[i])
                    ChangeModelAlarmState2(noAlarmDevs[i]) //00ff00
                }
            }
        }
        function clickalarmtr(item){
            var devno = item.devcode_all;
            if (devno == '') return;
            ShowInfo(devno);
        }

        function openStopView(){
           emit('OpenIframeWin',{class:'newwin bpbWin',src:'/imp-00',title:'停机状态分析'})
        }
        function LoadPan(data) {
            //盘头数据处理
            window.Pan = {};//先存储，设备详情时需要使用到
            Pan = {};
            if (data == null || data.length == 0) return;
            /*
            var alarmDev = {};
            for (var i = 0; i < this.AlarmData.length; i++) {
                alarmDev[this.AlarmData[i].code] = 1;
            }
            */
            for (var i = 0; i < data.length; i++) {
                var devCode = data[i].code;
                window.Pan[devCode] = data[i].panPercent;
                Pan[devCode] = data[i].panPercent
                /*
                if (alarmDev[devCode] == 1) {
                    continue; //该设备有告警，不处理盘头
                }
                //判断盘头中是否有低于20的
                var panTmp = data[i].panPercent;
                var is20 = false;//是否是小于20%的
                for (var p = 0; p < panTmp.length; p++) {
                    if (panTmp[p] < 20) {
                        if (this.PanAlarm[devCode] != 20) {
                            //该设备进行告警
                            if (MODEL_LOADED == 1) {
                                //机器告警提示
                                console.log('设备', devCode, '盘头小于20%')
                                //ChangeModelColor(devCode, DEV_ALAR_COLOR, this.AlarmType["1000"])
                            } else {
                                //记录下来，等待模型加载完成时处理
                                //ALARM_DEVS.push(devCode + ">"+DEV_ALAR_COLOR+">"+this.AlarmType["1000"])
                            }
                        }
                        is20 = true
                        //this.PanAlarm[devCode] = 20
                        break
                    }
                }
                if (is20) {
                    //当前盘头有小于20%的，则不再做其他判断了
                    continue
                }
                //判断盘头中是否有低于50的,但大于20%的
                var is50 = false;
                for (var p = 0; p < panTmp.length; p++) {
                    if (panTmp[p] < 50 && panTmp[p] >= 20) {
                        if (this.PanAlarm[devCode] != 50) {
                            //该设备进行提醒
                            if (MODEL_LOADED == 1) {
                                //机器提醒提示
                                console.log('设备', devCode, '盘头小于50%大于20%')
                                //ChangeModelColor(devCode, DEV_HINT_COLOR, this.AlarmType["1001"])
                            } else {
                                //记录下来，等待模型加载完成时处理
                                //ALARM_DEVS.push(devCode + ">"+DEV_HINT_COLOR+">"+this.AlarmType["1001"])
                            }
                        }
                        is50 = true
                        //this.PanAlarm[devCode] = 50
                        break
                    }
                }
                if (is50) {
                    continue
                }
                this.PanAlarm[devCode] = null;
                if (MODEL_LOADED == 1) {
                    //盘头剩余比例正常，隐藏提示标签
                    ChangeModelColor(devCode)
                }
                */
            }

        }
        function showImpMenu(){
            isShowImpItem.value = true;
        }
        function OpenMaoGaoWin(){
            isShowMaogaoWin.value = true;
            api.GetMaoGao().then(res=>{
                if(res==null ||res.code!=0){
                    return;
                }
                maogaoData.value = res.data;
            });
        }
        function cloasMaogaoWin(){
            isShowMaogaoWin.value = false;
        }
        function  cloasMaogaoDetailWin() {
            isShowMaogaoDetailWin.value = false;
        }
        function OpenMaoGaoDetailWin(item){
            maogaoDetailHeight = item.height //当前查看详细的比重
            api.GetMaoGaoDetail(maogaoDetailHeight).then(res=>{
                if(res==null ||res.code!=0){
                    return;
                }
                isShowMaogaoDetailWin.value = true;
            })
        }
        //导出毛高比重数据
        function impMaogaodetail(){
            window.open(ApiServer + "/formula/export/" + maogaoDetailHeight)
        }
        function showTTT(){
            impItemCode.value='';
            isShowTTT.value = true;
            var datalist=[];
            datalist.push(["人工工资",1289,457,1027,476,261,-19,'']);
            datalist.push(["社会保险",62,22,55,26,7,-4,'']);
            datalist.push(["福利费",4,1,'-','-',4,1,'']);
            datalist.push(["配件/修理费",30,11,38,18,-8,-7,'']);
            datalist.push(["制版材料",'-','-','-','-','-','-','']);
            datalist.push(["染料",'-','-','-','-','-','-','']);
            datalist.push(["助剂",'-','-','-','-','-','-','']);
            datalist.push(["辅料",2,1,'-','-',2,1,'']);
            datalist.push(["电",190,68,65,30,125,37,'']);
            datalist.push(["天燃气",'-','-','-','-','-','-','']);
            datalist.push(["蒸汽",'-','-','-','-','-','-','']);
            datalist.push(["污水处理费",'-','-','-','-','-','-','']);
            datalist.push(["污泥清理费",'-','-','-','-','-','-','']);
            datalist.push(["其他",18,6,3,1,16,5,'']);
            datalist.push(["摊销及工程费",485,172,133,62,352,110,'']);
            datalist.push(["合计",2080,739,1322,613,758,126,'']);
            tttData.value = datalist;
            isShowImpItem.value = false;
        }
        function showImpWin(item,target){
            if(item.type=='impWin'){
                let targetEle = target.target;
                let xy = {y:targetEle.parentElement.offsetTop+targetEle.parentElement.parentElement.offsetTop,x:targetEle.parentElement.offsetLeft+targetEle.parentElement.parentElement.offsetLeft,h:parseInt(window.getComputedStyle(targetEle.parentElement).height)};
                impItemShowDivXY.value={top:xy.y-xy.h/2,left:xy.x-38};
                impItemCode.value = item.code;
                return;
            }
            impItemCode.value='';
            isShowImpItem.value = false;
            OpenIframe({class:'newwin bpbWin',src:item.path,title:item.title||item.name,type:item.type});
        }
        function OpenBPBWin(){
            OpenIframe({class:'newwin bpbWin',src:'/bpb-fx',title:'白柸布智能靶向预测'});
        }
        function OpenIframe(data){
            iframeWinData.value = data;
            isShowIframeWin.value=true;
        }
        function CloseIframeWin(){
            isShowIframeWin.value=false;
            iframeWinData.value={};
        }
        function HideWindow(){
            isShowFuncMenuList.value=false;
            isShowImpItem.value =false;
            isshow_search_result.value = false;
            isShowTTT.value = false;
            LastClickObj = null
            openState = false
            seachValue.value = '';
            window.Device_Data = null;
            impItemCode.value='';
        }
        //切换到数据消费后台
        function toAdmin(){
          window.open(process.env.VUE_APP_SSO+'?role='+(showIndexData=='index'?"producer":"manager"));
        }
        function switchIndex(){
            if(showIndexData.value=='index'){
                router.push('/datamain');
            }else{
                router.push('/main');
            }
        }
        onMounted(() => {
            backMasterViewBy02();
            //动态设置停机原因的top
            var ele = document.getElementById('dev_alarm');
            var style = window.getComputedStyle(ele);
            dev_stop.value.style.top= (ele.offsetTop * 1 + parseInt(style.height) + 30) + "px";
            clearTimeout(dataTimer1);
            clearTimeout(dataTimer2);
            clearTimeout(dataTimer3);
            clearTimeout(dataTimer4);
            DataFull.GetData();
            DataFull.GetAlarmData();
            DataFull.GetOnlineDev();
            DataFull.GetStopDev();
        })
        onUnmounted(()=>{
            AutoPlayer.value=false;
            window.Pan = null;
            if(player!=null && player.Native!=null)  player.Native.CameraAnimation.stop();
            clearTimeout(dataTimer1);
            clearTimeout(dataTimer2);
            clearTimeout(dataTimer3);
        })
        return{
            impItemCode,
            impItemShowDivXY,
            AutoPlayer,
            isShowFuncMenuList,
            isShowImpItem,
            isshow_search_result,
            showIndexData,
            backMasterViewBy02,
            ChangeModelAlarmState2,
            switchAutoPlayer,
            showFuncMenuList,
            showImpMenu,
            showTTT,
            updateInfo,
            ShowInfo,
            HideWindow,
            clickalarmtr,
            openStopView,
            OpenBPBWin,
            indexjsondata,
            alarmjsondata,
            scxljsondata,
            seachValue,
            search_result_list,
            tttData,
            alarmWeek,
            stopDeviceNum,
            dev_alarm,
            dev_stop,
            echarts_stop,
            echarts_jiadonglv,
            echarts_alarm,
            echarts_sc_qushi,
            echarts_used_qushi,
            dev_alarm_echarts,
            impFuncList,
            AlarmData,
            dev_alarm_list,
            alarmDevList,
            deviceInfo,
            isShowMaogaoWin,
            isShowMaogaoDetailWin,
            showImpWin,
            isShowTTT,
            isShowIframeWin,
            OpenMaoGaoWin,
            OpenMaoGaoDetailWin,
            OpenBPBWin,
            OpenIframe,
            maogaoData,
            maogaoDetailData,
            iframeWinData,
            impMaogaodetail,
            cloasMaogaoDetailWin,
            cloasMaogaoWin,
            CloseIframeWin,
            search,
            switchIndex,
            toAdmin,
            StopDevList,
        }
    }
}
</script>
<style>
.bg23{
    z-index: 1; pointer-events: none;position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin-left: 0;
    border: 0px solid #17666e;
    border-top: 0px;
    background:url('../../assets/image/bg.png');
    -webkit-mask-image: linear-gradient(to bottom, #0b313de5 10%, transparent 40%,transparent 50%, #0b313d 100%);
    mask-image: linear-gradient(to bottom, #0b313de5 10%,transparent 40%,transparent 50%, #0b313d 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;
   */
}

.bg32{
    z-index: 2; 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;
}
</style>