新版本全厂页面开发

src/api/system.js

@@ -27,6 +27,42 @@ function GetFacData(data){
         params: data
     })
 }
+function GetFacDeviceStat(){
+    return request({
+        url: `/api/all/data`,
+        method: "get",
+        params: null
+    })
+}
+function GetFacScLine(){
+    return request({
+        url: `/api/stock`,
+        method: "get",
+        params: null
+    })
+}
+function GetFacUsedLine(){
+    return request({
+        url: `/api/stock`,
+        method: "get",
+        params: null
+    })
+}
+function GetFacProduction(){
+    return request({
+        url: `/api/stock`,
+        method: "get",
+        params: null
+    })
+}
+//获取生产线状态
+function GetProductionLneInfo(){
+    return request({
+        url: `/api/stock`,
+        method: "get",
+        params: null
+    })
+}
 function GetDeviceInfo(data,para){
     return request({
         url: `/api/query/`+data,
@@ -81,4 +117,9 @@ export default {
     GetDeviceInfo,
     GetMaoGao,
     GetMaoGaoDetail,
+    GetFacDeviceStat,
+    GetFacUsedLine,
+    GetFacScLine,
+    GetFacProduction,
+    GetProductionLneInfo,
 }

src/pages/components/Bottom.vue

@@ -1,12 +1,16 @@
 <template>
     <div class="bottom">
-        <div style="display: flex; justify-content: center; flex-flow: row;">
-            <img v-for="item in navlist" :src="item.active?item.img1:item.img" :key="item.code" :t='item.code' :class="item.active?'active':''" @click="loadNavModel(item);">
+        <div style="display: flex; justify-content: left; flex-flow: row;height: 100%;">
+            <div :class="item.active?'btn active':'btn'" v-for="item in navlist" :style="{backgroundImage: item.active?`url(${btnFrontBg})`:''}" @click="loadNavModel(item);">
+                <img :src="item.active?item.img1:item.img" :key="item.code" :t='item.code' :class="item.active?'active':''">
+                <div>{{ item.name }}</div>
+            </div>
         </div>
     </div>
 </template>
 <script>
 import { ref,onMounted,watch } from 'vue';
+import api from "@/api/system";
 export default {
     props:{
         facModelLoadState:{
@@ -15,13 +19,14 @@ export default {
         }
     },
     setup(props,{emit}) {
-
+        let dataTimer = null;
+        const btnFrontBg = require('@/assets/image/nav_btn_front.png');
         let navlist=ref([
-            {"code":"FAC","active":true,"img":require('@/assets/image/fac_btn.png'),"img1":require('@/assets/image/fac_btn_active.png')},
-            {"code":"IN02","active":false,"img":require('@/assets/image/in02_btn.png'),"img1":require('@/assets/image/in02_btn_active.png')},
-            {"code":"IN04","active":false,"img":require('@/assets/image/in04_btn.png'),"img1":require('@/assets/image/in04_btn_active.png')},
-            {"code":"IN03","active":false,"img":require('@/assets/image/in03_btn.png'),"img1":require('@/assets/image/in03_btn_active.png')},
-            {"code":"IN05","active":false,"img":require('@/assets/image/in05_btn.png'),"img1":require('@/assets/image/in05_btn_active.png')},
+            {"code":"FAC","name":"全厂","active":true,"img":require('@/assets/image/nav_ico_fac1.png'),"img1":require('@/assets/image/nav_ico_fac2.png')},
+            {"code":"IN02","name":"经编","active":false,"img":require('@/assets/image/nav_ico_in021.png'),"img1":require('@/assets/image/nav_ico_in022.png')},
+            {"code":"IN04","name":"前整","active":false,"img":require('@/assets/image/nav_ico_in041.png'),"img1":require('@/assets/image/nav_ico_in042.png')},
+            {"code":"IN03","name":"印花","active":false,"img":require('@/assets/image/nav_ico_in031.png'),"img1":require('@/assets/image/nav_ico_in032.png')},
+            {"code":"IN05","name":"后整","active":false,"img":require('@/assets/image/nav_ico_in051.png'),"img1":require('@/assets/image/nav_ico_in052.png')},
         ]);    
         
         watch(() => props.facModelLoadState, newVal=> {
@@ -36,6 +41,24 @@ export default {
                 }
             }
         },{deep:true,immediate:true})
+
+        let DataFull={
+            GetProductionLneInfo:function(){
+                if(window.CurrentTargetType=='IN02'||window.CurrentTargetType=='FAC'){
+                    clearTimeout(dataTimer);
+                    return;
+                }
+                dataTimer = setTimeout(() => {
+                    DataFull.GetProductionLneInfo();
+                }, 2*60*1000);
+                api.GetProductionLneInfo().then(res=>{
+                    if(res==null || res.code!=0){
+                        return;
+                    }
+                    window.IN345LINE = res.data;
+                })
+            }
+        }
  
         //const emit = defineEmits(['call']);
 
@@ -46,6 +69,10 @@ export default {
                 }else navlist.value[i].active=false;
             }
             window.CurrentTargetType=item.code;
+            if(window.CurrentTargetType=='IN03' ||window.CurrentTargetType=='IN04' || window.CurrentTargetType=='IN05'){
+                clearTimeout(dataTimer);
+                DataFull.GetProductionLneInfo();
+            }
             emit('loadNavModel',item);
         }
 
@@ -55,6 +82,7 @@ export default {
 
         return{
             navlist,
+            btnFrontBg,
             loadNavModel
         }
     }

src/pages/components/Fac.vue

@@ -2,9 +2,116 @@
     <!--这是全厂模块的模块展示内容-->
     <div for="FAC" id="top" class="top topfac">
         <div title="返回主视图"
-            style="cursor: pointer;position: absolute;right: 10px;top: 25px;height: 38px;width: 38px;text-align: center;"
+            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>
@@ -13,6 +120,7 @@
 <script>
 import { ref,onMounted,watch,emit,onUnmounted } from 'vue';
 import api from "@/api/system";
+import * as echarts from 'echarts';
 export default {
     props:{
         facModelLoadState:{
@@ -23,16 +131,45 @@ export default {
     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 && MarkerMapFac["FAC"]==null){
+            if(newVal){
                 //模型加载完成
                 console.log('全厂模型加载完成')
                 clearTimeout(getDataTimer);
-                loadmarkers()
+                try{
+                    if(MarkerMapFac["FAC"]==null) loadmarkers();
+                    backMasterViewByFac();
+                }catch(e){
+                    window.location.reload();
+                }
             }
         },{deep:true,immediate:true})
 
@@ -79,12 +216,41 @@ export default {
                         }
                     }
                 });
+            },
+            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([286.03479667714066, -369.1462098899696, 250.99077822208548], [-1630.186261661935, 1578.4562059189793, -1508.5247276647053],[-0.3797261858729431, 0.38594484375048804, 0.840746454851163], 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() {
@@ -103,12 +269,12 @@ export default {
                             "minLod": 0,
                             "textFontSize":16,
                             "textColor": parseInt("0xffffffff"),
-                            "contentPadding":[5,5,5,5],
+                            "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], obj02Aabb.aabb[0][1]-10, obj02Aabb.aabb[0][2]+115];
+                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];
@@ -126,7 +292,7 @@ export default {
                             "minLod": 0,
                             "textFontSize":16,
                             "textColor": parseInt("0xffffffff"),
-                            "contentPadding":[5,5,5,5],
+                            "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);
@@ -147,11 +313,11 @@ export default {
                             "minLod": 0,
                             "textFontSize":16,
                             "textColor": parseInt("0xffffffff"),
-                            "contentPadding":[5,5,5,5],
+                            "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], obj02Aabb.aabb[0][1]-30, obj02Aabb.aabb[0][2]+60];
+                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];
@@ -166,10 +332,10 @@ export default {
                             "minLod": 0,
                             "textFontSize":16,
                             "textColor": parseInt("0xffffffff"),
-                            "contentPadding":[5,5,5,5],
+                            "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]+120, obj02Aabb.aabb[0][1]+10, obj02Aabb.aabb[0][2]+65];
+                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];
@@ -192,6 +358,709 @@ export default {
                     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]+'库存趋势'};
@@ -204,10 +1073,18 @@ export default {
         }
         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)
@@ -217,12 +1094,102 @@ export default {
             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>
+</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>

src/pages/components/In03.vue

@@ -19,6 +19,9 @@ export default {
         }
     },
     setup(props,{emit}) {
+        let lines={};
+        let oldLineState={};
+        let updateLineStateTimer = null;
         watch(() => props.clickEvent, newVal=> {
             if(newVal==null){
                 return;
@@ -39,13 +42,45 @@ export default {
         },{deep:true,immediate:true}) 
         async function init(){
             if(player==null || player.Native==null) return;
+            player.Native.Camera.moveTo([-79.28639598598434, -58.11055865195772, 81.65118471407432], 
+            [ -79.73865566374896, 63.89413313753133, -17.790826652375742], 
+            [-0.0023419608689169997, 0.6317835262434115, 0.7751413362650253], 1);
+            // 使用异步函数
+            (async () => {
+                setTimeout(function() {
+                    player.Native.Camera.setAnchorPos([ -80.69618225097656,21.59876251220703,11.815500259399414]);
+                }, 3000);
+            })();
+            if(window.LINELIST==null){
+                var rootItem = await player.Native.ModelTree.getRootItems();
+                var rootObj=null;
+                for (var i = 0; i < rootItem.length; i++) {
+                    if(rootItem[i].name=="T_03"){
+                        rootObj = rootItem[i]
+                        break;
+                    }
+                }
+                if(rootObj==null){
+                    console.log('未找到该模型的根节点')
+                    return;
+                }
+                var items = await player.Native.ModelTree.getSubItems(rootObj.item)
+                if(items.length==1 && items[0].name=='RootNode') rootObj = items[0];
+                //获取产线列表
+                items =  await player.Native.ModelTree.getSubItems(rootObj.item);
+                items.forEach(ele=>{
+                    if(ele.name.indexOf('#线')>-1) lines[ele.name] = ele.item;
+                })
+                window.LINELIST = lines;
+            }
+            updateLineState();
             if(window.IN03Markers==null){
                 window.IN03Markers = [];
                 //初始化产线名称标记
                 var rootItem = await player.Native.ModelTree.getRootItems();
                 var rootObj=null;
                 for (var i = 0; i < rootItem.length; i++) {
-                        if(rootItem[i].name=="T03"){
+                        if(rootItem[i].name=="T_03"){
                             rootObj = rootItem[i]
                             break;
                         }
@@ -89,8 +124,26 @@ export default {
                 console.log('--------创建标记总耗时:',new Date().getTime()-t1)
             }
         }
+        //更新产线状态颜色
+        async function updateLineState(){
+            updateLineStateTimer = setTimeout(() => {
+                updateLineState();
+            }, 1000*60);
+            if(window.LINELIST==null) return;
+            for(let name in window.LINELIST){
+                if(oldLineState[name]==window.IN345LINE[name]) continue;
+                if(!window.IN345LINE[name]){
+                    //产线未开
+                    await player.Native.ModelTree.setItemColor(window.LINELIST[name], parseInt("0x666666ff"), true)
+                }else{
+                    await player.Native.ModelTree.restoreItemColor(window.LINELIST[name]);
+                }
+            }
+            oldLineState = JSON.parse(JSON.stringify(window.IN345LINE));
+        }
         onUnmounted(()=>{
-            if(player!=null && player.Native!=null){
+            clearTimeout(updateLineStateTimer);
+            if(player!=null && player.Native!=null && window.IN03Markers!=null){
                 window.IN03Markers.forEach(async ele=>{
                     await player.Native.GisMarker.destroy(ele);
                 })

src/pages/components/In04.vue

@@ -19,7 +19,9 @@ export default {
         }
     },
     setup(props,{emit}) {
-
+        let lines={};
+        let oldLineState={};
+        let updateLineStateTimer = null;
         watch(() => props.clickEvent, newVal=> {
             if(newVal==null){
                 return;
@@ -40,6 +42,38 @@ export default {
         },{deep:true,immediate:true}) 
         async function init(){
             if(player==null || player.Native==null) return;
+            player.Native.Camera.moveTo([-146.20756931826455, -119.72177133690849, 129.82384243272116], 
+            [-147.62551666977393, 258.8491681603568, -117.29441130868938], 
+            [-0.0020473386267093672, 0.5466090871139763, 0.8373854036756153], 1);
+            // 使用异步函数
+            (async () => {
+                setTimeout(function() {
+                    player.Native.Camera.setAnchorPos([-174.43048095703125,28.128787994384766,11.160348892211914]);
+                }, 3000);
+            })();
+            if(window.LINELIST==null){
+                var rootItem = await player.Native.ModelTree.getRootItems();
+                var rootObj=null;
+                for (var i = 0; i < rootItem.length; i++) {
+                    if(rootItem[i].name=="T_03"){
+                        rootObj = rootItem[i]
+                        break;
+                    }
+                }
+                if(rootObj==null){
+                    console.log('未找到该模型的根节点')
+                    return;
+                }
+                var items = await player.Native.ModelTree.getSubItems(rootObj.item)
+                if(items.length==1 && items[0].name=='RootNode') rootObj = items[0];
+                //获取产线列表
+                items =  await player.Native.ModelTree.getSubItems(rootObj.item);
+                items.forEach(ele=>{
+                    if(ele.name.indexOf('#线')>-1) lines[ele.name] = ele.item;
+                })
+                window.LINELIST = lines;
+            }
+            updateLineState();
             //获取标记列表
             if(window.IN04Markers==null){
                 window.IN04Markers = [];
@@ -94,8 +128,26 @@ export default {
                 console.log('--------创建标记总耗时:',new Date().getTime()-t1)
             }
         }
+        //更新产线状态颜色
+        async function updateLineState(){
+            updateLineStateTimer = setTimeout(() => {
+                updateLineState();
+            }, 1000*60);
+            if(window.LINELIST==null) return;
+            for(let name in window.LINELIST){
+                if(oldLineState[name]==window.IN345LINE[name]) continue;
+                if(!window.IN345LINE[name]){
+                    //产线未开
+                    await player.Native.ModelTree.setItemColor(window.LINELIST[name], parseInt("0x666666ff"), true)
+                }else{
+                    await player.Native.ModelTree.restoreItemColor(window.LINELIST[name]);
+                }
+            }
+            oldLineState = JSON.parse(JSON.stringify(window.IN345LINE));
+        }
         onUnmounted(()=>{
-            if(player!=null && player.Native!=null){
+            clearTimeout(updateLineStateTimer);
+            if(player!=null && player.Native!=null && window.IN04Markers!=null){
                 window.IN04Markers.forEach(async ele=>{
                     await player.Native.GisMarker.destroy(ele);
                 })

src/pages/components/In05.vue

@@ -19,6 +19,9 @@ export default {
         }
     },
     setup(props,{emit}) {
+        let lines={};
+        let oldLineState={};
+        let updateLineStateTimer = null;
         watch(() => props.clickEvent, newVal=> {
             if(newVal==null){
                 return;
@@ -39,6 +42,38 @@ export default {
         },{deep:true,immediate:true}) 
         async function init(){
             if(player==null || player.Native==null) return;
+            player.Native.Camera.moveTo([5.99086967189374, -108.39600123299967, 107.44720629227993], 
+            [5.275743590562173, 84.52134566560132, -4.46479668903838], 
+            [-0.0018600464536822094, 0.501778967822268, 0.8649938772490875], 1);
+            // 使用异步函数
+            (async () => {
+                setTimeout(function() {
+                    player.Native.Camera.setAnchorPos([9.08051586151123,18.93037986755371,11.160347938537598]);
+                }, 3000);
+            })();
+            if(window.LINELIST==null){
+                var rootItem = await player.Native.ModelTree.getRootItems();
+                var rootObj=null;
+                for (var i = 0; i < rootItem.length; i++) {
+                    if(rootItem[i].name=="T_03"){
+                        rootObj = rootItem[i]
+                        break;
+                    }
+                }
+                if(rootObj==null){
+                    console.log('未找到该模型的根节点')
+                    return;
+                }
+                var items = await player.Native.ModelTree.getSubItems(rootObj.item)
+                if(items.length==1 && items[0].name=='RootNode') rootObj = items[0];
+                //获取产线列表
+                items =  await player.Native.ModelTree.getSubItems(rootObj.item);
+                items.forEach(ele=>{
+                    if(ele.name.indexOf('#线')>-1) lines[ele.name] = ele.item;
+                })
+                window.LINELIST = lines;
+            }
+            updateLineState();
             //获取标记列表
             if(window.IN05Markers==null){
                 window.IN05Markers = [];
@@ -93,8 +128,26 @@ export default {
                 console.log('--------创建标记总耗时:',new Date().getTime()-t1)
             }
         }
+        //更新产线状态颜色
+        async function updateLineState(){
+            updateLineStateTimer = setTimeout(() => {
+                updateLineState();
+            }, 1000*60);
+            if(window.LINELIST==null) return;
+            for(let name in window.LINELIST){
+                if(oldLineState[name]==window.IN345LINE[name]) continue;
+                if(!window.IN345LINE[name]){
+                    //产线未开
+                    await player.Native.ModelTree.setItemColor(window.LINELIST[name], parseInt("0x666666ff"), true)
+                }else{
+                    await player.Native.ModelTree.restoreItemColor(window.LINELIST[name]);
+                }
+            }
+            oldLineState = JSON.parse(JSON.stringify(window.IN345LINE));
+        }
         onUnmounted(()=>{
-            if(player!=null && player.Native!=null){
+            clearTimeout(updateLineStateTimer);
+            if(player!=null && player.Native!=null && window.IN05Markers!=null){
                 window.IN05Markers.forEach(async ele=>{
                     await player.Native.GisMarker.destroy(ele);
                 })

src/pages/main/index.vue

@@ -5,7 +5,7 @@
         <div v-if="!isLoaded" ref="loading" id="loading">正在加载模型中...</div>
         <div v-if="reconnect" class="reconnect">网络连接中断，正在进行重连...</div>
         <video ref="EngineContent" autoplay muted style="width: 1920px;height:1080px;">浏览器不支持</video>
-        <Fac v-if="currentTargetType=='FAC'" :fac-model-load-state="facModelLoadState"  @markerLClick="facMarkerLClick"></Fac>
+        <Fac v-if="currentTargetType=='FAC'" :fac-model-load-state="isLoaded"  @markerLClick="facMarkerLClick"></Fac>
         <In02 ref="In02Ele" v-if="currentTargetType=='IN02'" :click-event="In02ClickEvent" :in02-model-load-state="in02modelloadstate" :user-timeout="AutoPlayer"></In02>
         <In03 ref="In03Ele" v-if="currentTargetType=='IN03'" :click-event="In03ClickEvent" :in03-model-load-state="in03modelloadstate" :user-timeout="AutoPlayer"></In03>
         <In04 v-if="currentTargetType=='IN04'" :click-event="In04ClickEvent" :in04-model-load-state="in04modelloadstate" :user-timeout="AutoPlayer"></In04>
@@ -187,6 +187,27 @@ export default {
                 modelLoadState={};
                 EngineContent.value.play();
                 playerNative.value =Native;
+                // // 选择Pickup工具
+                player.Native.Tools.setCurrentTool("system.Pickup");
+                player.Native.Settings.set('skybox',"string","null");
+                player.Native.Settings.set('bg.image.file',"string",'data/sky/bg.png');
+                //不显示提示框
+                player.Native.Settings.set("tips.enabled", "bool", false);
+                // //点选高亮显示
+                player.Native.Settings.set("pickUp.highlight", "bool", false);
+                //点选包围盒
+                player.Native.Settings.set("show.select.box", "bool", false);
+                player.Native.Settings.set("skybox.select", "string", "blue");
+                //点选背景虚化
+                player.Native.Settings.set("color.pickup.bkAlpha", "float", 0.8);
+                // 选中展示节点
+                // sam0023 = await player.Native.ModelTree.findItemByName("CYLINDER 3 of EQUIPMENT /C1101", 0, true, 3);
+                player.Native.Settings.set('ambientIndenty', 'float', 0.39);//初始化环境光补偿
+                player.Native.Settings.set('diffuseIntensity', 'float', 0.8);//初始化光线强度
+                player.Native.Settings.set('specularIntensity', 'float', 0.64);//初始化高光强度
+                player.Native.Settings.set('searchLightIntensity', 'float', 0.5);//初始化探照灯强度
+                // 点击事件一般仅用于浏览工具，在点选工具下无效
+                Native.Tools.setCurrentTool("system.Browse");
                 switch(window.CurrentTargetType){
                     case "IN02":
                         loadIn02Model(Native);
@@ -211,25 +232,7 @@ export default {
                 //调整视角，使其达到最佳初始效果
                 backMasterView();
                 //player.Native.Camera.moveToItem(lastPtr,1);
-                // // 选择Pickup工具
-                player.Native.Tools.setCurrentTool("system.Pickup");
-                //不显示提示框
-                player.Native.Settings.set("tips.enabled", "bool", false);
-                // //点选高亮显示
-                player.Native.Settings.set("pickUp.highlight", "bool", false);
-                //点选包围盒
-                player.Native.Settings.set("show.select.box", "bool", false);
-                player.Native.Settings.set("skybox.select", "string", "blue");
-                //点选背景虚化
-                player.Native.Settings.set("color.pickup.bkAlpha", "float", 0.8);
-                // 选中展示节点
-                // sam0023 = await player.Native.ModelTree.findItemByName("CYLINDER 3 of EQUIPMENT /C1101", 0, true, 3);
-                player.Native.Settings.set('ambientIndenty', 'float', 0.39);//初始化环境光补偿
-                player.Native.Settings.set('diffuseIntensity', 'float', 0.8);//初始化光线强度
-                player.Native.Settings.set('specularIntensity', 'float', 0.64);//初始化高光强度
-                player.Native.Settings.set('searchLightIntensity', 'float', 0.5);//初始化探照灯强度
-                // 点击事件一般仅用于浏览工具，在点选工具下无效
-                Native.Tools.setCurrentTool("system.Browse");
+
                 Native.ModelTree.EventBrowseLClick.connect((event) => {
                     if(event.object==null) return;
 
@@ -318,27 +321,26 @@ export default {
                 var cf = "data://models/T_ALL.pr";
                 var errStr = await PlayerUtils.call(Native.Model.loadModel, currentTargetType.value, cf);
                 modelLoadState[currentTargetType.value] = true;
-            }else{
-                showMarker(currentTargetType.value);
             }
             facModelLoadState.value=true;//全厂模型加载完成
             await player.Native.Settings.set('ambientIndenty', 'float', 0.39);//初始化环境光补偿
-            await player.Native.Settings.set('diffuseIntensity', 'float', 0.8);//初始化光线强度
+            await player.Native.Settings.set('diffuseIntensity', 'float', 1.2);//初始化光线强度
             await player.Native.Settings.set('specularIntensity', 'float', 0.64);//初始化高光强度
             await player.Native.Model.setModelVisible(currentTargetType.value,true);
             await player.Native.CameraAnimation.clearKeyFrame();
         }
         //后整
         async function loadIn05Model(Native){
+            player.Native.Settings.set('ambientIndenty', 'float', 1);//初始化环境光补偿
+            player.Native.Settings.set('diffuseIntensity', 'float', 2.5);//初始化光线强度
+            player.Native.Settings.set('specularIntensity', 'float', 0.6);//初始化高光强度
             if(currentTargetType.value=="IN05") return;
             currentTargetType.value="IN05";
             await player.Native.Model.setModelVisible("FAC",false);
             await player.Native.Model.setModelVisible("IN02",false);
             await player.Native.Model.setModelVisible("IN03",false);
             await player.Native.Model.setModelVisible("IN04",false);
-            player.Native.Settings.set('ambientIndenty', 'float', 1);//初始化环境光补偿
-            player.Native.Settings.set('diffuseIntensity', 'float', 1);//初始化光线强度
-            player.Native.Settings.set('specularIntensity', 'float', 1.2);//初始化高光强度
+            
             if(modelLoadState[currentTargetType.value]==null){
                 var cf = "data://models/T_03.pr";
                 var errStr = await PlayerUtils.call(Native.Model.loadModel, 'IN03', cf);
@@ -350,15 +352,15 @@ export default {
         }
         //前整
         async function loadIn04Model(Native){
+            player.Native.Settings.set('ambientIndenty', 'float', 1);//初始化环境光补偿
+            player.Native.Settings.set('diffuseIntensity', 'float', 2.5);//初始化光线强度
+            player.Native.Settings.set('specularIntensity', 'float', 0.6);//初始化高光强度
             if(currentTargetType.value=="IN04") return;
             currentTargetType.value="IN04";
             await player.Native.Model.setModelVisible("FAC",false);
             await player.Native.Model.setModelVisible("IN02",false);
             await player.Native.Model.setModelVisible("IN03",false);
-            await player.Native.Model.setModelVisible("IN05",false);
-            player.Native.Settings.set('ambientIndenty', 'float', 1);//初始化环境光补偿
-            player.Native.Settings.set('diffuseIntensity', 'float', 1);//初始化光线强度
-            player.Native.Settings.set('specularIntensity', 'float', 1.2);//初始化高光强度
+            await player.Native.Model.setModelVisible("IN05",false);            
             if(modelLoadState[currentTargetType.value]==null){
                 var cf = "data://models/T_03.pr";
                 var errStr = await PlayerUtils.call(Native.Model.loadModel, 'IN03', cf);
@@ -371,15 +373,15 @@ export default {
         }
         //印花
         async function loadIn03Model(Native){
+            player.Native.Settings.set('ambientIndenty', 'float', 1);//初始化环境光补偿
+            player.Native.Settings.set('diffuseIntensity', 'float', 2.5);//初始化光线强度
+            player.Native.Settings.set('specularIntensity', 'float', 0.6);//初始化高光强度
             if(currentTargetType.value=="IN03") return;
             currentTargetType.value="IN03";
             await player.Native.Model.setModelVisible("FAC",false);
             await player.Native.Model.setModelVisible("IN02",false);
             await player.Native.Model.setModelVisible("IN04",false);
-            await player.Native.Model.setModelVisible("IN05",false);
-            player.Native.Settings.set('ambientIndenty', 'float', 1);//初始化环境光补偿
-            player.Native.Settings.set('diffuseIntensity', 'float', 1);//初始化光线强度
-            player.Native.Settings.set('specularIntensity', 'float', 1.2);//初始化高光强度
+            await player.Native.Model.setModelVisible("IN05",false);            
             if(modelLoadState[currentTargetType.value]==null){
                 var cf = "data://models/T_03.pr";
                 var errStr = await PlayerUtils.call(Native.Model.loadModel, 'IN03', cf);
@@ -392,15 +394,16 @@ export default {
         }
         //经编
         async function loadIn02Model(Native){
+            player.Native.Settings.set('ambientIndenty', 'float', 0.39);//初始化环境光补偿
+            player.Native.Settings.set('diffuseIntensity', 'float', 0.8);//初始化光线强度
+            player.Native.Settings.set('specularIntensity', 'float', 0.64);//初始化高光强度
             if(currentTargetType.value=="IN02") return;
             currentTargetType.value="IN02";
             await player.Native.Model.setModelVisible("FAC",false);
             await player.Native.Model.setModelVisible("IN03",false);
             await player.Native.Model.setModelVisible("IN04",false);
             await player.Native.Model.setModelVisible("IN05",false);
-            player.Native.Settings.set('ambientIndenty', 'float', 0.39);//初始化环境光补偿
-            player.Native.Settings.set('diffuseIntensity', 'float', 0.8);//初始化光线强度
-            player.Native.Settings.set('specularIntensity', 'float', 0.64);//初始化高光强度
+            
             if(modelLoadState[currentTargetType.value]==null){
                 var cf = "data://models/T_02.pr";
                 var errStr = await PlayerUtils.call(Native.Model.loadModel, currentTargetType.value, cf);
@@ -432,19 +435,19 @@ export default {
         function backMasterView() {
             switch(currentTargetType.value){
                 case "FAC":
-                    backMasterViewByFac();
+                    //backMasterViewByFac();
                     break;
                 case "IN02":
                     //backMasterViewBy02();
                     break;
                 case "IN03":
-                    backMasterViewBy03();
+                    //backMasterViewBy03();
                     break;
                 case "IN04":
-                    backMasterViewBy04();
+                    //backMasterViewBy04();
                     break;
                 case "IN05":
-                    backMasterViewBy05();
+                    //backMasterViewBy05();
                     break;
             }
         }

src/styles/main.css

@@ -1,3 +1,6 @@
+    :root {
+        --hRate:1;
+    }
     body{
         padding: 0;
         margin: 0;
@@ -68,7 +71,52 @@
             scrollbar-track-color: #666; /*立体滚动条背景颜色*/
             scrollbar-base-color: #f8f8f8; /*滚动条的基本颜色*/
             /*Cursor: url(mouse.cur); *//*自定义个性鼠标*/
+            color: #Fff;
         }
+    .abs{
+            position: absolute;
+            left: 0;
+            top:0;
+            z-index: 10;
+     }
+     .leftPanel{
+        left:2%;
+        top:8.4%;
+        height: 1px;
+     }
+     .leftPanel .fac_progress{
+        width: 100%;height: 5px;background-color: #154360;z-index: 0;border-radius: 3px;
+     }
+     .leftPanel .fac_progress_value{
+        width: 0%;height: 5px;background-color: #05abc0;z-index: 1;border-radius: 3px;
+     }
+     .rightPanel{
+        right:50px;
+        width: 490px;
+        left: auto;
+        top:8.4%;
+        height: 87%;
+        z-index: 100001 !important;
+     }
+     .fac_btn{
+        width: 56px;
+        height: 30px;
+        text-align: center;
+        line-height: 30px;
+        background-color: #034859;
+        color: #009dad;        
+        margin: 0 2px;
+        display: inline-block;
+        cursor: pointer;
+     }
+     .fac_btn:hover{
+        background-color: #008899 !important;
+        color: #e9f5f6 !important;
+     }
+     .fac_btn.active{
+        background-color: #008899 !important;
+        color: #e9f5f6 !important;
+     }
     .reconnect{
         position: absolute;
         top:0px;
@@ -222,21 +270,51 @@
         top:0;
         left: 0;
         width: 1920px;
-        height: 95px;
-        z-index: 1;
-        background: #ffffff00;
+        height: calc(90px*var(--hRate));
+        z-index: 10000;
+        background-repeat: no-repeat;
     }
     .bottom{
         position: fixed;
-        bottom: 0;
+        bottom:calc(2%*var(--hRate));
+        margin-left: 19px;
         left: 0;
-        width: 1920px;
-        height: 46px;
+        width: 42%;
+        height: calc(100px*var(--hRate));
         z-index: 1;
-        background-image: url('../assets/image/bottom.png')
+        background-repeat: no-repeat;
+        background-size: contain;
+        background-image: url('../assets/image/nav_bg.png')
+    }
+    .bottom .btn{
+        cursor: pointer;
+        display: flex; 
+        flex-flow: column;
+        height: 100%;
+        width: 11%;
+        background-size: contain;
+        background-repeat: no-repeat;
+        color: #1eabb7;
+        font-size: 16px;
+        text-align: center;
+        justify-content: center;
+        align-items: center;
+    }
+    .bottom .btn:hover{
+        color: #fff !important;
+        font-size: 18px !important;
+        font-weight: bold;
+    }
+    .bottom .btn.active{
+        color: #fff !important;
+        font-size: 18px !important;
+        font-weight: bold;
     }
     .bottom img{
         cursor: pointer;
+        vertical-align: middle;
+        width: 30px;
+        height: 30px;
     }
     .top02{
         background-image: url('../assets/image/top.png') !important;
@@ -245,7 +323,38 @@
         background-image: url('../assets/image/top_02.png') !important;
     }
     .topfac{
-        background-image: url('../assets/image/top_fac.png') !important;
+        background-image: url('../assets/image/fac_top.png') !important;
+    }
+    .title_row{
+        display: flex;
+        font-size: 16px;
+        font-weight: bold;
+        height: 24px;
+        line-height: 24px;
+        margin-bottom: 0px;
+    }
+    .title_left_line{
+        background-image: url('../assets/image/title_left_line.png');
+        width: 6px;
+        height: 18px;
+        vertical-align: middle;
+        margin-right: 10px;
+        margin-top: 3px;
+    }
+    .littleFont{
+        font-size: 12px;
+        letter-spacing: 2px;
+    }
+    .data_row{
+        display: flex;
+        font-size: 16px;
+        font-weight: bold;
+        min-height: 60px;
+        margin-top: calc(20px*var(--hRate));
+    }
+    .fac_pie{
+        width: calc(150px*var(--hRate));
+        height: calc(150px*var(--hRate));
     }
     .table_caption{
         height: 30px;