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

<template>
    <!--这是全厂模块的模块展示内容-->
    <div for="FAC" id="top" class="top topfac">
        <div title="返回主视图"
            style="cursor: pointer;position: absolute;right: 40px;top: 25px;height: 38px;width: 38px;text-align: center;"
            @click="backMasterViewByFac"><img src="../../assets/image/view.png"></div>
    </div>
    <div class="bg1"></div>
    <div class="abs leftPanel">
        <div class="title_row"><div class="title_left_line"></div><span>平均值</span><span style="color:#27e6ff">（本月）</span></div>
        <div class="data_row"><img src="../../assets/image/icon_00.png">
            <div style="margin-left: 10px;"><table>
                <tbody>
                    <tr style="background-color:transparent">
                        <td style="border:0">
                            <div class="littleFont">成本<span style="color:#27e6ff">（总能耗）</span></div>
                            <div style="font-size: 32px;font-weight: bold;">{{ deviceStatData.avgMonth.costTotal }}<span style="font-size: 12px;"> 元/日</span></div>
                        </td>
                        <td style="border:0;padding-left: 40px;">
                            <div class="littleFont">经编<span style="color:#27e6ff">（单位能耗）</span></div>
                            <div style="font-size:24px;font-weight:bold;height: 38px;line-height: 48px;color: #fbc16b;">{{ deviceStatData.avgMonth.costJb }}<span style="font-size: 12px;"> 元/米</span></div>
                        </td>
                        <td style="border:0;padding-left: 40px;">
                            <div class="littleFont">染整<span style="color:#27e6ff">（单位能耗）</span></div>
                            <div style="font-size:24px;font-weight:bold;height: 38px;line-height: 48px;color: #fbc16b;">{{ deviceStatData.avgMonth.costRz }}<span style="font-size: 12px;"> 元/米</span></div>
                        </td>
                        <td style="border-bottom: 0;border-right: 1px solid #146c86;padding-left: 20px;">&nbsp;</td>
                        <td style="border:0;padding-left: 40px;">
                            <div class="littleFont">经编<span style="color:#27e6ff">（产出）</span></div>
                            <div style="font-size:24px;font-weight:bold;height: 38px;line-height: 48px;color: #27e6ff;">{{ deviceStatData.avgMonth.yieldJb }}<span style="font-size: 12px;"> 米/日</span></div>
                        </td>
                        <td style="border:0;padding-left: 40px;">
                            <div class="littleFont">经编<span style="color:#27e6ff">（平均嫁动率）</span></div>
                            <div style="font-size:24px;font-weight:bold;height: 38px;line-height: 48px;color: #27e6ff;">{{ deviceStatData.avgMonth.jdl }}<span style="font-size: 12px;"> %</span></div>
                        </td>
                        <td style="border:0;padding-left: 40px;">
                            <div class="littleFont">染整<span style="color:#27e6ff">（产出）</span></div>
                            <div style="font-size:24px;font-weight:bold;height: 38px;line-height: 48px;color: #27e6ff;">{{ deviceStatData.avgMonth.yieldRz }}<span style="font-size: 12px;"> 米/日</span></div>
                        </td>
                    </tr>
                </tbody>
            </table></div>
        </div>
        <div class="title_row" style="margin-top: 3%;"><div class="title_left_line"></div><span>经编</span><span style="color:#27e6ff">（生产情况）</span></div>
        <div class="data_row" style="width: 300px;display: block;margin-top:0;">
            <div style="display: flex;">
                <div ref="echarts1" class="fac_pie"></div>
                <div ref="echarts2" class="fac_pie"></div>
            </div>
            <div style="padding-left: 25px;color: #27e6ff;width: 100%;">
                <div class="littleFont">产量（今日）</div>
                <div style="font-size: 22px;font-weight: bold;">{{ deviceStatData.currYield.jb.yield }}<span class="littleFont">米</span></div>
                <div style="position: relative;margin-top: 5px;">
                    <div class="abs fac_progress_value" :style="{width:(deviceStatData.currYield.jb.yield/deviceStatData.currYield.jb.yieldMax*100)+'%',backgroundColor: '#008899'}"></div>
                    <div class="abs fac_progress" style="background-color: #072e47;"></div>
                </div>
            </div>
            <div style="padding-left: 25px;color: #27e6ff;margin-top: 25px;width: 100%;">
                <div class="littleFont"><span>开机数（今日）</span><span style="float: right;">总数</span></div>
                <div style="font-size: 22px;"><b>{{ deviceStatData.currYield.jb.openNum }}<span class="littleFont">台</span></b>
                    <b style="float: right;">{{ deviceStatData.currYield.jb.totalNum }}<span class="littleFont">台</span></b>
                </div>
                <div style="position: relative;margin-top: 5px;">
                    <div class="abs fac_progress_value" :style="{width:deviceStatData.currYield.jb.openRatio+'%',backgroundColor: '#008899'}"></div>
                    <div class="abs fac_progress" style="background-color: #072e47;"></div>
                </div>
            </div>
        </div>
        <div class="title_row" style="margin-top: 3%;"><div class="title_left_line"></div><span>染整</span><span style="color:#27e6ff">（生产情况）</span></div>
        <div class="data_row" style="width: 300px;display: block;margin-top:0;">
            <div style="display: flex;">
                <div ref="echarts3" class="fac_pie"></div>
                <div ref="echarts4" class="fac_pie"></div>
            </div>
            <div style="padding-left: 25px;color: #27e6ff;width: 100%;">
                <div class="littleFont">印染（今日）</div>
                <div style="font-size: 22px;font-weight: bold;">{{ deviceStatData.currYield.rz.yield }}<span class="littleFont">米</span></div>
                <div style="position: relative;margin-top: 5px;">
                    <div class="abs fac_progress_value" :style="{width:(deviceStatData.currYield.rz.yield/deviceStatData.currYield.rz.yieldMax*100)+'%'}"></div>
                    <div class="abs fac_progress"></div>
                </div>
            </div>
            <div style="padding-left: 25px;color: #27e6ff;margin-top: 25px;width: 100%;">
                <div class="littleFont"><span>开机数（今日）</span><span style="float: right;">总数</span></div>
                <div style="font-size: 22px;"><b>{{ deviceStatData.currYield.rz.openNum }}<span class="littleFont">台</span></b>
                    <b style="float: right;">{{ deviceStatData.currYield.rz.totalNum }}<span class="littleFont">台</span></b>
                </div>
                <div style="position: relative;margin-top: 5px;">
                    <div class="abs fac_progress_value" :style="{width:deviceStatData.currYield.rz.openRatio+'%'}"></div>
                    <div class="abs fac_progress"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="abs rightPanel">
        <div class="title_row" style="line-height: 30px;"><div class="title_left_line" style="margin-top: 7px;"></div>
            <span>生产趋势</span><span style="color:#27e6ff">（7天）</span>
            <span style="margin-left: auto !important;">
                <span :class="buttonCode1=='Length'?'fac_btn active':'fac_btn'" @click="LoadSCLine('Length')">米数</span>
                <span :class="buttonCode1=='Weight'?'fac_btn active':'fac_btn'" @click="LoadSCLine('Weight')">重量</span>
            </span>
        </div>
        <div class="data_row" ref="echarts_sc_qushi" style="width: 100%;height: 42%;border: 1px solid #008899;"></div>
        <div class="title_row" style="line-height: 30px;margin-top: 8%;"><div class="title_left_line" style="margin-top: 7px;"></div>
            <span>能耗趋势</span><span style="color:#27e6ff">（30天）</span>
            <span style="margin-left: auto !important;">
                <span :class="buttonCode2=='price'?'fac_btn active':'fac_btn'" @click="LoadUsedLine('price')">折算</span>
                <span :class="buttonCode2=='electricity'?'fac_btn active':'fac_btn'" @click="LoadUsedLine('electricity')">电</span>
                <span :class="buttonCode2=='steam'?'fac_btn active':'fac_btn'" @click="LoadUsedLine('steam')">气</span>
                <span :class="buttonCode2=='water'?'fac_btn active':'fac_btn'" @click="LoadUsedLine('water')">水</span>
            </span>
        </div>
        <div class="data_row" ref="echarts_used_qushi" style="width: 100%;height: 42%;border: 1px solid #008899;"></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>
</template>
<script>
import { ref,onMounted,watch,emit,onUnmounted } from 'vue';
import api from "@/api/system";
import * as echarts from 'echarts';
export default {
    props:{
        facModelLoadState:{
            type:Boolean,
            required: true
        }
    },
    setup(props,{emit}) {
        const isShowIframeWin=ref(false);
        const iframeWinData = ref({});
        const echarts1 = ref(null);
        const echarts2 = ref(null);
        const echarts3 = ref(null);
        const echarts4 = ref(null);
        const echarts_sc_qushi = ref(null);
        const echarts_used_qushi = ref(null);
        let buttonCode1 = ref('');
        let buttonCode2 = ref('');
        let deviceStatData=ref({"avgMonth":{},"currYield":{"jb":{},"rz":{}}});
        let typeUnitName = '';
        const dataTypeUnit={
            'Length':'米',
            'Weight':'吨',
            'price':'元/米',
            'electricity':'kwh',
            'steam':'GJ',
            'water':'m³',
        };
        let getDataTimer=null;
        let getDataTimer1 = null;
        let getDataTimer2 = null;
        let getDataTimer3 = null;
        let getDataTimer4 = null;
        let MarkerMapFac={};
        let FacStockData={};
        let markerLClickObj = null;
        let echartsEleIns_0=null;
        let echartsEleIns_1=null;
        watch(() => props.facModelLoadState, newVal=> {
            if(newVal){
                //模型加载完成
                console.log('全厂模型加载完成')
                clearTimeout(getDataTimer);
                try{
                    if(MarkerMapFac["FAC"]==null) loadmarkers();
                    backMasterViewByFac();
                }catch(e){
                    window.location.reload();
                }
            }
        },{deep:true,immediate:true})

        let DataFull={
            GetFacData:function(){
                api.GetFacData().then((res)=>{
                    if(window.CurrentTargetType!='FAC') return;
                    getDataTimer = setTimeout(function () {
                        //每1分钟主动查询一次数据
                        DataFull.GetFacData()
                    }, 60*1000);
                    FacStockData = res||{};
                    if (res == null || player.Native==null || window.CurrentTargetType!='FAC') {
                        return
                    }
                    for (var key in MarkerMapFac) {
                        if(key=="FAC"){
                            for (var marker in MarkerMapFac[key]) {
                                var opt = MarkerMapFac[key][marker];
                                var dataType = opt["userData"];
                                if(dataType==null) continue;
                                dataType = dataType.split("|");
                                var dataMap = res[dataType[0]];//从返回结果中获取到当前数据类型对应的统计结果
                                if(dataMap==null) continue;
                                var dataTpl = dataType[1]; //从拆分结果中获取数据模板
                                var dataText = dataTpl;
                                //将模板中的属性替换成数据值
                                for (var attr in dataMap) {
                                    /*
                                    if(attr=="fdy" || attr=="poy"){
                                        for (var yclattr in dataMap[attr]) {
                                            dataText = dataText.replace("{"+attr+"."+yclattr+"}",dataMap[attr][yclattr].toString().padEnd(6," "));
                                        }
                                        continue
                                    }
                                    */
                                    dataText = dataText.replace("{"+attr+"}",dataMap[attr].toString().padEnd(6," "));
                                }
                                //更新GIS标记内容
                                opt["text"]=dataText;
                                player.Native.GisMarker.update(marker, opt);
                            }
                            break;
                        }
                    }
                });
            },
            GetDeviceStat:function(){
                api.GetFacDeviceStat().then(res=>{
                    if(window.CurrentTargetType!='FAC') return;
                    getDataTimer1 = setTimeout(function () {
                        //每1分钟主动查询一次数据
                        DataFull.GetDeviceStat()
                    }, 60*1000);
                    if (res == null || player.Native==null || window.CurrentTargetType!='FAC') {
                        return
                    }
                    if(res.code!=200){
                        /*
                        let msg = ElMessage({
                            message:"正在加载数据",
                            type:"info",
                            duration:0,
                        })
                        */
                        return;
                    }
                    deviceStatData.value = res.data;
                    LoadSCLine('Length');
                    LoadUsedLine('price');
                    LoadJBPie();
                    LoadRZPie();
                })
            }
        }
        //全局厂房最佳视图
        function backMasterViewByFac(){
            // player.Native.Camera.moveTo([235.678127000173, 13.38107286701451, 74.13573809425804], [-1248.3191825020908, -262.59031050373517, -409.93944372657353], [-0.30023176822741604, -0.055832565112502126, 0.9522308596238611], 1);
            player.Native.Camera.moveTo([230.81374612743963, -478.03486595784244, 397.44713298891566], 
            [-1191.7422834310603, 2397.473667672639, -1974.2218082537938],
            [-0.2635955199415324, 0.5328234187400651, 0.8041247454897171], 1);
            // 使用异步函数
            (async () => {
                setTimeout(function() {
                    player.Native.Camera.setAnchorPos([-45.87571144104003, -44.632896423339844, 43.90447044372559]);
                }, 3000);
            })();
        }
        async function loadmarkers(){
                //获取4号楼顶对象
                var obj02 = await player.Native.ModelTree.findItemByName("Box013",0,true,1);
                var imgid = await player.Native.GisMarker.loadImage("data://icon/qietu/tip2.png");
                var options = {
                            "text": "白坯布（"+StockTypeUnit['bpb']+"）\r\r当前库存：-\r统计时间：7点至次日7点\r当日入库：- 出库：-\r当月入库：- 出库：-\r",
                            "visible": true,
                            //"maxLod": 130,
                            "minLod": 0,
                            "textFontSize":16,
                            "textColor": parseInt("0xffffffff"),
                            "contentPadding":[10,10,10,10],
                            "userData":"bpb|白坯布（"+StockTypeUnit['bpb']+"）\r\r当前库存：{curr}\r统计时间：7点至次日7点\r当日入库：{d-in} 出库：{d-out}\r当月入库：{m-in} 出库：{m-out}\r"
                };

                var obj02Aabb = await player.Native.ModelTree.getItemShapeInfo(obj02.item);
                options.pos = [obj02Aabb.aabb[0][0]-40, obj02Aabb.aabb[0][1]-10, obj02Aabb.aabb[0][2]+115];
                //options.parentNode=tmp.item;
                options.imgId = imgid
                options.imgSize = [0, 140];
                var markPtr = await player.Native.GisMarker.create(options);
                //await player.Native.GisMarker.update(markPtr, options);
                MarkerMapFac["FAC"]={};
                MarkerMapFac["FAC"][markPtr]=options;
                //获取盘头仓对象
                var pantou = await player.Native.ModelTree.findItemByName("Object023",0,true,1);
                //var imgid = await player.Native.GisMarker.loadImage("rgba:255,0,255,255");
                var options = {
                            "text": "盘头（"+StockTypeUnit['pt']+"）\r\r当前库存：-\r统计时间：7点至次日7点\r当日入库：- 出库：-\r当月入库：- 出库：-",
                            "visible": true,
                            //"maxLod": 130,
                            "minLod": 0,
                            "textFontSize":16,
                            "textColor": parseInt("0xffffffff"),
                            "contentPadding":[10,10,10,10],
                            "userData":"pt|盘头（"+StockTypeUnit['pt']+"）\r\r当前库存：{curr}\r统计时间：7点至次日7点\r当日入库：{d-in} 出库：{d-out}\r当月入库：{m-in} 出库：{m-out}\r"
                };
                var obj02Aabb = await player.Native.ModelTree.getItemShapeInfo(pantou.item);
                options.pos = [obj02Aabb.aabb[0][0], obj02Aabb.aabb[0][1]-30, obj02Aabb.aabb[0][2]+45];
                //options.parentNode=tmp.item;
                options.imgId = imgid
                options.imgSize = [240, 140];
                var markPtr = await player.Native.GisMarker.create(options);
                MarkerMapFac["FAC"][markPtr]=options;
                //await player.Native.GisMarker.update(markPtr, options);
                //获取原材料仓对象
                var pantou = await player.Native.ModelTree.findItemByName("B412",0,true,1);
                //var imgid = await player.Native.GisMarker.loadImage("rgba:255,0,255,255");
                var options = {
                            "text": "原材料（"+StockTypeUnit['ycl']+"）\r\r当前库存：-\r统计时间：7点至次日7点\r当日入库：- 出库：-\r当月入库：- 出库：-\r",
                            "visible": true,
                            //"maxLod": 130,
                            "minLod": 0,
                            "textFontSize":16,
                            "textColor": parseInt("0xffffffff"),
                            "contentPadding":[10,10,10,10],
                            "userData":"ycl|原材料（"+StockTypeUnit['ycl']+"）\r\r当前库存：{curr}\r统计时间：7点至次日7点\r当日入库：{d-in} 出库：{d-out}\r当月入库：{m-in} 出库：{m-out}\r"
                };
                var obj02Aabb = await player.Native.ModelTree.getItemShapeInfo(pantou.item);
                options.pos = [obj02Aabb.aabb[0][0]-50, obj02Aabb.aabb[0][1]-10, obj02Aabb.aabb[0][2]+60];
                //options.parentNode=tmp.item;
                options.imgId = imgid
                options.imgSize = [0, 140];
                var markPtr = await player.Native.GisMarker.create(options);
                MarkerMapFac["FAC"][markPtr]=options;
                //await player.Native.GisMarker.update(markPtr, options);
                //var imgid = await player.Native.GisMarker.loadImage("rgba:255,0,255,255");
                var options = {
                            "text": "成品（"+StockTypeUnit['cp']+"）\r\r当前库存：-\r统计时间：7点至次日7点\r当日入库：- 出库：-\r当月入库：- 出库：-",
                            "visible": true,
                            //"maxLod": 130,
                            "minLod": 0,
                            "textFontSize":16,
                            "textColor": parseInt("0xffffffff"),
                            "contentPadding":[10,10,10,10],
                            "userData":"cp|成品（"+StockTypeUnit['cp']+"）\r\r当前库存：{curr}\r统计时间：7点至次日7点\r当日入库：{d-in} 出库：{d-out}\r当月入库：{m-in} 出库：{m-out}\r"
                };
                options.pos = [obj02Aabb.aabb[0][0]+100, obj02Aabb.aabb[0][1]+10, obj02Aabb.aabb[0][2]+75];
                //options.parentNode=tmp.item;
                options.imgId = imgid
                options.imgSize = [250, 140];
                var markPtr = await player.Native.GisMarker.create(options);
                MarkerMapFac["FAC"][markPtr]=options;
                //await player.Native.GisMarker.update(markPtr, options);
                //标记点击
                player.Native.GisMarker.EventGisMarkerLClick.connect((event) => {
                    markerLClickObj = MarkerMapFac["FAC"][event.markerId];
                    if(markerLClickObj==null || FacStockData==null){
                        emit('markerLClick',{});
                        return;
                    }
                    setTimeout(function(dataType){
                        if(dataType==null) return;
                        dataType = dataType.split("|");
                        //打开库存趋势窗口
                        showStockTrend(dataType[0]);
                    },100,markerLClickObj["userData"]);
                    emit('markerLClick',markerLClickObj);
                });
                DataFull.GetFacData(); 
                DataFull.GetDeviceStat();
                /*
                DataFull.GetFacProduction();
                DataFull.GetScLine();
                DataFull.GetUsedLine();
                LoadJBPie();
                LoadRZPie();
                */
        }
        function LoadSCLine(dataType) {
            buttonCode1.value = dataType;
            typeUnitName = dataTypeUnit[dataType];
            let data = deviceStatData.value.prodTrade;
            //生产趋势
            //获取数据中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]['date'];
                times.push(tv);
                if(dataType=='Length'){
                    week_aefficiency.push(data[i]['jbLength'])
                    week_befficiency.push(data[i]['rzLength'])
                }else{
                    week_aefficiency.push(data[i]['jbWeight'])
                    week_befficiency.push(data[i]['rzWeight'])
                }
            }
            if (week_aefficiency.length == 0 && week_befficiency.length==0) {
                return
            }
            v_series.push({
                name: "经编", type: 'bar',  smooth: true, //symbol: 'none',
                data: week_aefficiency, itemStyle: {
                    normal: {
                        color: '#1EFFFF', // 这里设置折线的颜色
                        lineStyle: {
                            color: '#1EFFFF' // 这里同时设置线头的颜色
                        }
                    }
                },
                barWidth: "8",
                itemStyle: {
                    barBorderRadius: [3, 3, 0, 0,],
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1, // 这四个参数分别表示渐变的起点 (x1, y1) 与终点 (x2, y2)
                        [
                            {offset: 0, color: '#fbc16b'},   // 0% 处的颜色
                            {offset: 1, color: '#fbc16b70'}   // 100% 处的颜色
                        ]
                    )
                }
            });
            v_series.push({
                name: "染整", type: 'bar',  smooth: true, //symbol: 'none',
                data: week_befficiency, itemStyle: {
                    normal: {
                        color: '#295589', // 这里设置折线的颜色
                        lineStyle: {
                            color: '#295589' // 这里同时设置线头的颜色
                        }
                    }
                },
                barWidth: "8",
                itemStyle: {
                    barBorderRadius: [3, 3, 0, 0,],
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1, // 这四个参数分别表示渐变的起点 (x1, y1) 与终点 (x2, y2)
                        [
                            {offset: 0, color: '#fc4850'},   // 0% 处的颜色
                            {offset: 1, color: '#fc485070'}   // 100% 处的颜色
                        ]
                    )
                }
            });
            var opt = {
                title: {
                    show: false, //不显示标题
                    text: '',
                    textStyle: {
                        color: "rgb(89, 151, 229)",
                        fontWeight: "bold"
                    },
                    top: "0px",
                    left: "30px"
                },
                legend: {
                    show: true, //不显示图例
                    inactiveColor: "#04417A",
                    data: "",
                    icon:"circle",
                    textStyle: {color: "#fff"},
                    top: "5",
                    left: "10px",
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        label: {
                            show: true,
                            backgroundColor: '#fff',
                            color: '#556677',
                            borderColor: 'rgba(0,0,0,0)',
                            shadowColor: 'rgba(0,0,0,0)',
                            shadowOffsetY: 0
                        },
                        lineStyle: {
                            width: 0
                        }
                    },
                    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}<br/>`;
                            result += ` ${item.marker} ${item.seriesName}:  ${item.value}（`+typeUnitName+`）<br/>`;
                        });
                        return xv+result;
                    }
                },
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '0',
                    top: '15%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: true,
                    axisLabel: {
                        rotate: 45,
                        color: "#26e2fb"
                    },
                    axisTick:{
                        show:false
                    },
                    data: times
                },
                yAxis: {
                    type: 'value',
                    nameTextStyle: {
                        color: "#26e2fb"
                    },
                    axisLine:{
                        show:true
                    },
                    axisLabel: {
                        color: "#26e2fb"
                    },
                    splitLine: {
                        lineStyle: {
                            color: "#7DA7CD",
                            type: "dashed",
                            width: 1
                        }
                    }
                },
                series: v_series
            };
            if(echartsEleIns_1!=null){
                echartsEleIns_1.dispose();

            }
            echartsEleIns_1 = echarts.init(t);
            echartsEleIns_1.setOption(opt);
        }
        function LoadUsedLine(dataType){
            buttonCode2.value = dataType;
            typeUnitName = dataTypeUnit[dataType];
            let data = deviceStatData.value.energyTrade;
            //能耗趋势
            var t = echarts_used_qushi.value;
            var times = [];
            var v_series = [];
            var week_aefficiency = [];
            var week_befficiency = [];
            for (var i = 0; i < data.length; i++) {
                times.push(data[i]['date']);
                if(data[i]['jb'][dataType]!=null) week_aefficiency.push(data[i]['jb'][dataType]);
                if(data[i]['rz'][dataType]!=null) week_befficiency.push(data[i]['rz'][dataType]);
            }
            if (week_aefficiency.length> 0) {
                v_series.push({
                    name: "经编", type: 'line', //symbol: 'none',
                    data: week_aefficiency, 
                    symbol: 'circle', // 使用圆作为折点标记
                    symbolSize: 6,
                    itemStyle: {
                        normal: {
                            color: '#fbc16b', // 这里设置折线的颜色
                            lineStyle: {
                                color: '#fbc16b' // 这里同时设置线头的颜色
                            }
                        }
                    },
                });
            }
            if(week_befficiency.length>0){
                v_series.push({
                    name: "染整", type: 'line', //symbol: 'none',
                    data: week_befficiency, 
                    symbol: 'circle', // 使用圆作为折点标记
                    symbolSize: 6,
                    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"
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: function (params) {
                        let xv='';
                        let result = '';
                        params.forEach(function (item) {
                            xv=`${item.name}<br/>`;
                            result += ` ${item.marker} ${item.seriesName}:  ${item.value}（`+typeUnitName+`）<br/>`;
                        });
                        return xv+result;
                    }
                },
                legend: {
                    show: true, //不显示图例
                    inactiveColor: "#04417A",
                    data: "",
                    textStyle: {color: "#fff"},
                    top: "5",
                    left:"10px",
                    icon:"circle",
                },
                grid: {
                    left: '3%',
                    right: '1%',
                    bottom: '0',
                    top: '15%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    axisLabel: {
                        rotate: 45,
                        color: "#26e2fb"
                    },
                    axisLine:{
                        show:true
                    },
                    axisTick:{
                        show:false,
                    },
                    data: times
                },
                yAxis: {
                    type: 'value',
                    nameTextStyle: {
                        color: "#26e2fb"
                    },
                    axisLine:{
                        show:true
                    },
                    axisTick:{
                        show:false,
                    },
                    axisLabel: {
                        color: "#26e2fb"
                    },
                    splitLine: {
                        lineStyle: {
                            color: "#7DA7CD",
                            type: "dashed",
                            width: 1
                        }
                    }
                },
                series: v_series
            };
            if(echartsEleIns_0!=null){
                echartsEleIns_0.dispose();
            }
            echartsEleIns_0 = echarts.init(t);            
            echartsEleIns_0.setOption(opt);
        }
        function LoadJBPie(){
            //嫁动率
            const myChart = echarts.init(echarts1.value);
            // 配置项
            const option = {
            title: {
                text: '进度仪表盘',
                left: 'center',
                top: 'top',
                show:false,
            },
            tooltip: {
                formatter: '{a} <br/>{b} : {c}%'
            },
            series: [
                {
                name: '经编',
                type: 'gauge',
                startAngle: '90',
                endAngle: '-270',
                pointer: {
                    show: false
                },
                progress: {
                    show: true,
                    itemStyle:{
                        color:"#28c4d8"
                    },
                    roundCap: true, //圆角
                    width: 8 // 进度条宽度
                },
                axisLine: {
                    show:true,
                    lineStyle: {
                        width: 8, // 仪表盘宽度，
                        color: [[1, '#052c45']] // 底色
                    }
                },
                axisTick: {
                    show: false // 隐藏刻度
                },
                splitLine: {
                    show:false,
                    length: 15, // 分割线长度
                    lineStyle: {
                        width: 2,
                        color: '#999'
                    }
                },
                axisLabel: {
                    distance: 25,
                    color: '#999',
                    fontSize: 14,
                    show:false,
                },
                
                data: [
                    {
                        value: deviceStatData.value.currYield.jb.jdl, // 初始进度值
                        name: '当前嫁动率',
                        title:{
                            offsetCenter: [0, -15], // 位置调整，'50%' 表示垂直居中，0 表示水平居中（根据需要调整）
                            color: '#27e6ff', // 文字颜色
                            fontSize: 14*BODY_H_RATE // 文字大小
                        },
                        detail: {
                            valueAnimation: true,
                            offsetCenter: [0, 10],
                            formatter: '{value}%',  
                            color: '#27e6ff', // 文字颜色 
                            fontSize: 24*BODY_H_RATE // 文字大小                 
                        },
                    }
                ]
                },
                {
                    type: 'pie',
                    radius: ['59%', '60.5%'],
                    hoverAnimation: false,
                    clockWise: false,
                    tooltip:{
                        show:false,
                    },
                    itemStyle: {
                        normal: { 
                            shadowBlur: 20,
                            shadowColor: 'rgba(0, 255, 255,.3)',
                            color: '#008596',
                        }
                    },
                    label: {
                        show: false
                    },
                    data: [100]
                },
            ]
            };
            // 使用配置项渲染图表
            myChart.setOption(option);
            //开机率
            const kjOpt = {
                title: {
                    text: '进度仪表盘',
                    left: 'center',
                    top: 'top',
                    show:false,
                },
                tooltip: {
                    formatter: '{a} <br/>{b} : {c}%'
                },
                series: [
                    {
                    name: '经编',
                    type: 'gauge',
                    startAngle: '90',
                    endAngle: '-270',
                    pointer: {
                        show: false
                    },
                    progress: {
                        show: true,
                        itemStyle:{
                            color:"#28c4d8"
                        },
                        roundCap: true, //圆角
                        width: 8 // 进度条宽度
                    },
                    axisLine: {
                        show:true,
                        lineStyle: {
                            width: 8, // 仪表盘宽度，
                            color: [[1, '#052c45']] // 底色
                        }
                    },
                    axisTick: {
                        show: false // 隐藏刻度
                    },
                    splitLine: {
                        show:false,
                        length: 15, // 分割线长度
                        lineStyle: {
                            width: 2,
                            color: '#999'
                        }
                    },
                    axisLabel: {
                        distance: 25,
                        color: '#999',
                        fontSize: 14,
                        show:false,
                    },
                    
                    data: [
                        {
                            value: deviceStatData.value.currYield.jb.openRatio, // 初始进度值
                            name: '开机率',
                            title:{
                                offsetCenter: [0, -15], // 位置调整，'50%' 表示垂直居中，0 表示水平居中（根据需要调整）
                                color: '#27e6ff', // 文字颜色
                                fontSize: 14*BODY_H_RATE // 文字大小
                            },
                            detail: {
                                valueAnimation: true,
                                offsetCenter: [0, 10],
                                formatter: '{value}%',  
                                color: '#27e6ff', // 文字颜色 
                                fontSize: 24*BODY_H_RATE // 文字大小                 
                            },
                        }
                    ]
                    },
                    {
                        type: 'pie',
                        radius: ['59%', '60.5%'],
                        hoverAnimation: false,
                        clockWise: false,
                        tooltip:{
                            show:false,
                        },
                        itemStyle: {
                            normal: { 
                                shadowBlur: 20,
                                shadowColor: 'rgba(0, 255, 255,.3)',
                                color: '#008596',
                            }
                        },
                        label: {
                            show: false
                        },
                        data: [100]
                    },
                ]
            };
            const kj = echarts.init(echarts2.value);
            kj.setOption(kjOpt);
        }
        function LoadRZPie(){
            //嫁动率
            const myChart = echarts.init(echarts3.value);
            // 配置项
            const option = {
            title: {
                text: '进度仪表盘',
                left: 'center',
                top: 'top',
                show:false,
            },
            tooltip: {
                formatter: function(a){ 
                    return a.seriesName+'<br>'+a.name+" : "+a.value/100*deviceStatData.value.currYield.rz.maxLine+'条';
                }
            },
            series: [
                {
                name: '染整',
                type: 'gauge',
                startAngle: '90',
                endAngle: '-270',
                pointer: {
                    show: false
                },
                progress: {
                    show: true,
                    itemStyle:{
                        color:"#28c4d8"
                    },
                    roundCap: true, //圆角
                    width: 8 // 进度条宽度
                },
                axisLine: {
                    show:true,
                    lineStyle: {
                        width: 8, // 仪表盘宽度，
                        color: [[1, '#052c45']] // 底色
                    }
                },
                axisTick: {
                    show: false // 隐藏刻度
                },
                splitLine: {
                    show:false,
                    length: 15, // 分割线长度
                    lineStyle: {
                        width: 2,
                        color: '#999'
                    }
                },
                axisLabel: {
                    distance: 25,
                    color: '#999',
                    fontSize: 14,
                    show:false,
                },
                
                data: [
                    {
                        value: deviceStatData.value.currYield.rz.openLine/deviceStatData.value.currYield.rz.maxLine*100, // 初始进度值
                        name: '开动产线',
                        title:{
                            offsetCenter: [0, -15], // 位置调整，'50%' 表示垂直居中，0 表示水平居中（根据需要调整）
                            color: '#27e6ff', // 文字颜色
                            fontSize: 14*BODY_H_RATE // 文字大小
                        },
                        detail: {
                            valueAnimation: true,
                            offsetCenter: [0, 10],
                            formatter:function(v){
                                return v/100*deviceStatData.value.currYield.rz.maxLine+'条'
                            },
                            color: '#27e6ff', // 文字颜色 
                            fontSize: 24*BODY_H_RATE // 文字大小                 
                        },
                    }
                ]
                },
                {
                    type: 'pie',
                    radius: ['59%', '60.5%'],
                    hoverAnimation: false,
                    clockWise: false,
                    tooltip:{
                        show:false,
                    },
                    itemStyle: {
                        normal: { 
                            shadowBlur: 20,
                            shadowColor: 'rgba(0, 255, 255,.3)',
                            color: '#008596',
                        }
                    },
                    label: {
                        show: false
                    },
                    data: [100]
                },
            ]
            };
            // 使用配置项渲染图表
            myChart.setOption(option);
            //开机率
            const kjOpt = {
                title: {
                    text: '进度仪表盘',
                    left: 'center',
                    top: 'top',
                    show:false,
                },
                tooltip: {
                    formatter: '{a} <br/>{b} : {c}%'
                },
                series: [
                    {
                    name: '染整',
                    type: 'gauge',
                    startAngle: '90',
                    endAngle: '-270',
                    pointer: {
                        show: false
                    },
                    progress: {
                        show: true,
                        itemStyle:{
                            color:"#28c4d8"
                        },
                        roundCap: true, //圆角
                        width: 8 // 进度条宽度
                    },
                    axisLine: {
                        show:true,
                        lineStyle: {
                            width: 8, // 仪表盘宽度，
                            color: [[1, '#052c45']] // 底色
                        }
                    },
                    axisTick: {
                        show: false // 隐藏刻度
                    },
                    splitLine: {
                        show:false,
                        length: 15, // 分割线长度
                        lineStyle: {
                            width: 2,
                            color: '#999'
                        }
                    },
                    axisLabel: {
                        distance: 25,
                        color: '#999',
                        fontSize: 14,
                        show:false,
                    },
                    
                    data: [
                        {
                            value: deviceStatData.value.currYield.rz.openRatio, // 初始进度值
                            name: '开机率',
                            title:{
                                offsetCenter: [0, -15], // 位置调整，'50%' 表示垂直居中，0 表示水平居中（根据需要调整）
                                color: '#27e6ff', // 文字颜色
                                fontSize: 14*BODY_H_RATE // 文字大小
                            },
                            detail: {
                                valueAnimation: true,
                                offsetCenter: [0, 10],
                                formatter: '{value}%',  
                                color: '#27e6ff', // 文字颜色 
                                fontSize: 24*BODY_H_RATE // 文字大小                 
                            },
                        }
                    ]
                    },
                    {
                        type: 'pie',
                        radius: ['59%', '60.5%'],
                        hoverAnimation: false,
                        clockWise: false,
                        tooltip:{
                            show:false,
                        },
                        itemStyle: {
                            normal: { 
                                shadowBlur: 20,
                                shadowColor: 'rgba(0, 255, 255,.3)',
                                color: '#008596',
                            }
                        },
                        label: {
                            show: false
                        },
                        data: [100]
                    },
                ]
            };
            const kj = echarts.init(echarts4.value);
            kj.setOption(kjOpt);
        }
        function showStockTrend(type){
            iframeWinData.value = {class:'newwin bpbWin',src:'/stock-trend-fx#'+type,title:StockTypeName[type]+'库存趋势'};
            isShowIframeWin.value=true;

        }
        function CloseIframeWin(){
            isShowIframeWin.value=false;
            iframeWinData.value={};
        }
        onMounted(()=>{
            clearTimeout(getDataTimer);
            clearTimeout(getDataTimer1);
            clearTimeout(getDataTimer2);
            clearTimeout(getDataTimer3);
            clearTimeout(getDataTimer4);
            backMasterViewByFac();
        });
        onUnmounted(()=>{
            clearTimeout(getDataTimer);
            clearTimeout(getDataTimer1);
            clearTimeout(getDataTimer2);
            clearTimeout(getDataTimer3);
            clearTimeout(getDataTimer4);
            if(MarkerMapFac["FAC"]==null) return;
            for(let key in MarkerMapFac["FAC"]){
                if(player!=null && player.Native!=null)player.Native.GisMarker.destroy(key)
            }
        });
        return{
            backMasterViewByFac,
            loadmarkers,
            showStockTrend,
            LoadSCLine,
            LoadUsedLine,
            isShowIframeWin,
            iframeWinData,
            markerLClickObj,
            CloseIframeWin,
            getDataTimer,
            getDataTimer1,
            getDataTimer2,
            getDataTimer3,
            getDataTimer4,
            deviceStatData,
            echarts1,
            echarts2,
            echarts3,
            echarts4,
            echarts_sc_qushi,
            echarts_used_qushi,
            buttonCode1,
            buttonCode2,
        }
    }
}
</script>
<style>
.bg1{
    z-index: 1; pointer-events: none;position: absolute;
    top: calc(90px * var(--hRate));
    left: 0;
    width: 98.2%;
    height: 89%;
    margin-left: 19px;
    border: 2px solid #17666e;
    border-top: 0px;
    /*
    background:url('../../assets/image//bg.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;
   */
}
.devicePanel{
    position: absolute;top: 5%;left: 2%;width: 300px;height: 306px;z-index: 2;color: rgb(255, 255, 255);font-size: 18px;padding: 10px;border: 1px solid #b4a9e6;background: #1d476c1c;border-radius: 5px;box-shadow: 0px 0px 4px #5d7a94;
}
.deviceItem{
    line-height: 35px;width:80%;display:inline-block;height: 60px;font-weight: bold;
}
.deviceDetailItem{
    line-height: 20px;width:80%;display:inline-block;font-weight: normal;font-size: 14px;margin-left: 58px;color: #e1d7e8;
}
.precentBg{
    width: 100%;height: 10px;display: inline-block;background: rgb(221 219 224);border-radius: 10px;
}
.productionPanel{
    position: absolute;
    top: 9%;
    right: 5%;
    width: 11%;
    color: #fff;
    font-size: 14px;
    z-index: 2; 
    filter: blur(0px);
    backdrop-filter: blur(5px);
    /*border: 1px solid #b4a9e6;*/
    /*background: #1d476c1c;*/
    border-radius: 5px;
    box-shadow: 0px 0px 10px #c1cce587; 
    /*transform: rotateZ(0deg) rotateX(20deg) rotateY(-58deg) skew(2deg);*/
    
}
.productionPanel .content{
    background: transparent;padding: 5px;
}
.productionPanel .title{
    text-align: center;width: 100%;font-weight: bold;line-height: 32px;font-size: 18px;color: #d6dce3;
}
.productionPanel .cyc{
    border: 10px solid #2566ad;
    border-radius: 50%;
    height: 66px;
    text-align: center;
    width: 33%;
    line-height: 66px;
    background: #258cce;
    font-size: 19px;
    margin: 10px 29%;
}
</style>