diff --git a/src/views/bigScreen/index_gx.vue b/src/views/bigScreen/index_gx.vue index 9e910cb8..e5cb0768 100644 --- a/src/views/bigScreen/index_gx.vue +++ b/src/views/bigScreen/index_gx.vue @@ -106,7 +106,7 @@
-
+
@@ -130,7 +130,7 @@ @@ -148,15 +148,13 @@
质量分析
-
-
- - - - - +
+ + + + +
-
@@ -166,18 +164,18 @@
实时视频
-
-
+
宣传公告
-
+
@@ -194,6 +192,14 @@
+
+
+ +
+ 紧绷“安全弦”,筑牢“防护网”,光芯科技开展“五一”节前安全生产大检查,紧绷“安全弦”,筑牢“防护网”,光芯科技开展“五一”节前安全生产大检查 +
+
+
@@ -207,11 +213,10 @@
-
+
扫边A
@@ -231,7 +236,6 @@
@@ -243,7 +247,6 @@
@@ -255,7 +258,6 @@ @@ -267,7 +269,6 @@ @@ -279,11 +280,10 @@ -
+
精雕
@@ -303,7 +303,6 @@
@@ -315,7 +314,6 @@
@@ -327,7 +325,6 @@ @@ -339,7 +336,6 @@ @@ -351,7 +347,6 @@ @@ -363,7 +358,6 @@ @@ -375,7 +369,6 @@ @@ -387,7 +380,6 @@ @@ -398,188 +390,7 @@
-
- -
-
-
白片抛
-
-
- -
-
-
-
-
扫边A
-
-
- -
-
-
-
-
黑化
-
-
- -
-
-
-
-
退火
-
-
- -
-
-
-
-
减薄A
-
-
- -
-
-
-
-
减薄B
-
-
- -
-
-
-
-
平磨
-
-
- -
-
-
-
-
精雕
-
-
- -
-
-
-
-
一次抛
-
-
- -
-
-
-
-
扫边B
-
-
- -
-
-
-
-
成品抛
-
-
- -
-
-
-
-
倒角
-
-
- -
-
-
-
-
一次超洗
-
-
- -
-
-
-
-
二次超洗
-
-
- -
-
-
-
-
三次超洗
-
-
-
@@ -609,8 +420,8 @@ const configData={ rowNum : 8, headerHeight : 35, align : 'center', - waitTime : 1500, - columnWidth: [160,80,80,80], + waitTime : 150000, + columnWidth: [110,70,70,70], data : [], } export default { @@ -627,9 +438,9 @@ export default { { color: "#5cb87a", percentage: 100 }, ], factoryName: "", - initialAlpha: -Math.PI / 4.5, - initialBeta: Math.PI / 2, - initialRadius: 2.5, + initialAlpha: Math.PI / 2, + initialBeta: Math.PI / 5, + initialRadius: 2.3, initialTarget: null, resizeTimeout: null, loadedPercent: 0, @@ -664,13 +475,11 @@ export default { count_week:0, count_month:0, cprrws:0, - seriesData: [], + myChart: null, sectionNames: { - 石灰石破碎筛分生产系统: "石灰石破碎", - 原料磨: "原料磨", - 回转窑: "回转窑", - 煤磨: "煤磨", - 余热发电: "余热发电", + // '立方体.010':'一层', + '立方体.103': "一层",// 地面 + '立方体.001': "二层",//地面.001 }, options: { title: { @@ -814,11 +623,23 @@ export default { trigger: 'item', }, legend: { + show:true, + selected: { + '正常': true, + '限用': true, + '维修': true, + '禁用': true, + '报废': true, + }, + data: ['正常', '限用','维修', '禁用', '报废'], // 确保包括所有的系列名 // orient: 'vertical', left: 'center', bottom: '0', textStyle:{ color:"#ffffff" + }, + formatter: function (name) { + return name; // 或者根据需要调整显示内容 } }, series:{ @@ -845,7 +666,7 @@ export default { } }, data: [ - {value: 0, name: '正常'}, + {value: 173, name: '正常'}, {value: 0, name: '限用'}, {value: 0, name: '维修'}, {value: 0, name: '禁用'}, @@ -860,16 +681,16 @@ export default { align:'center', data:[], rowNum : 3, - waitTime:1000, + waitTime:3000, }, configData30:{ - header:['物料批次','未加工','进行中','已完成'], + header:['物料名称','物料批次','物料数量'], headerBGC:'#0a3f44', headerHeight:35, align:'center', data:[], rowNum : 3, - waitTime:1000, + waitTime:3000, }, configData0:{}, configData1:{}, @@ -903,36 +724,53 @@ export default { let month = nowDate.getMonth() + 1; let day = nowDate.getDate(); that.days = new Date(year, month, 0).getDate(); - // month = month < 10 ? "0" + month : month; that.currentYear = year; that.currentMonth = month; that.currentDay = day; that.getEquipments(); that.getMaterials(); that.getMgroup(); - that.getProcessData(); that.getTaskNumber(); that.addListener(); that.setIntervalFun(); - let myChart = echarts.init(document.getElementById('eqPieChart')); - myChart.setOption(that.option_eq); + that.myChart = echarts.init(document.getElementById('eqPieChart')); + that.myChart.setOption(that.option_eq); + let index2 = 0; + this.chartInterval2 = setInterval(function () { + if (index2 < that.option_eq.series.data.length) { + that.myChart.dispatchAction({ + type: "downplay", + seriesIndex: 0, + }); + that.myChart.dispatchAction({ + type: "highlight", + seriesIndex: 0, + dataIndex: index2, + }); + that.myChart.dispatchAction({ + type: "showTip", + seriesIndex: 0, + dataIndex: index2, + }); + index2++; + } else { + index2 = 0; + } + }, 3000); }, methods: { setIntervalFun(){ let that = this; that.scrollInterval = setInterval(() => { - if(that.scrollNum>14){ - // console.log('清零'); + if(that.scrollNum>8){ that.scrollNum = 0; }else{ - // console.log('++++'); that.scrollNum++; } - // console.log('that.scrollNum',that.scrollNum); - let nums = that.scrollNum * 356; + let nums = that.scrollNum * 320; let lefts = 0-nums; document.getElementById("scroll").style.left = lefts +'px'; - },6000) + },15000) }, showTime() { this.currentTime = this.$TOOL.dateFormat(new Date(), "hh:mm:ss"); @@ -1003,7 +841,7 @@ export default { }); let objDay = {query:{start_date:current_date,end_date:current_date,mgroup_name:'三次超洗'}}; that.$API.bi.dataset.exec.req('lineDay_m2', objDay).then((res0) => { - if(res0.data2.ds0){ + if(res0.data2.ds0&&res0.data2.ds0.length>0){ that.count_day = res0.data2.ds0[0].生产数; } }); @@ -1020,7 +858,7 @@ export default { select_cols_date:', EXTRACT ( MONTH FROM mlog.work_end_time) AS 月,EXTRACT(WEEK FROM mlog.work_end_time) AS 周' }}; that.$API.bi.dataset.exec.req('lineDay_m2', objWeek).then((res1) => { - if(res1.data2.ds0){ + if(res1.data2.ds0&&res1.data2.ds0.length>0){ that.count_week = res1.data2.ds0[0].生产数; } }); @@ -1032,7 +870,7 @@ export default { select_cols_date:', EXTRACT ( MONTH FROM mlog.work_end_time) AS 月' }}; that.$API.bi.dataset.exec.req('lineDay_m2', objMonth).then((res2) => { - if(res2.data2.ds0){ + if(res2.data2.ds0&&res2.data2.ds0.length>0){ that.count_month = res2.data2.ds0[0].生产数; } }); @@ -1041,13 +879,12 @@ export default { getEquipments(){ let that = this; that.$API.em.equipment.count_running_state.req().then((res) => { - that.option_eq.series.data[0] = res.count_ok; - that.option_eq.series.data[1] =res.count_limit; - that.option_eq.series.data[2] =res.count_fix; - that.option_eq.series.data[3] =res.count_disable; - that.option_eq.series.data[4] =res.count_scrap; - that.seriesData = that.option_eq.series.data; - that.eqChartShow = true; + that.option_eq.series.data[0].value = res.count_ok; + that.option_eq.series.data[1].value =res.count_limit; + that.option_eq.series.data[2].value =res.count_fix; + that.option_eq.series.data[3].value =res.count_disable; + that.option_eq.series.data[4].value =res.count_scrap; + that.myChart.setOption({series:{data:that.option_eq.series.data}}); }) }, //库存统计列表(原料30库库存和成品10库库存) @@ -1106,7 +943,7 @@ export default { camera.attachControl(canvas, true); camera.maxZ = 1000; // 调整适当的值 // 相机限制 - camera.lowerRadiusLimit = 27; + camera.lowerRadiusLimit = 29; camera.upperRadiusLimit = 50; camera.useAutoRotationBehavior = true; // 灯光 @@ -1122,51 +959,42 @@ export default { "myUI" ); that.myui = advancedTexture; - // 创建一个高亮层 - const highlightLayer = new BABYLON.HighlightLayer( - "highlightLayer", - scene - ); // 主控制区 var control_main = new BABYLON_GUI.StackPanel(); control_main.isVertical = false; control_main.top = "40%"; control_main.left = "-15%"; advancedTexture.addControl(control_main); - - // var button_main = BABYLON_GUI.Button.CreateSimpleButton( - // "button_main", - // "主视角" - // ); - // button_main.width = "80px"; - // button_main.height = "30px"; - // button_main.color = "white"; - // button_main.cornerRadius = 20; - // button_main.background = "green"; - // control_main.addControl(button_main); - // button_main.onPointerClickObservable.add(() => { - // that.flyToMesh(); - // }); - - // 高亮显示mesh名 - const mesh_rect = new BABYLON_GUI.Rectangle("mesh_rect"); - mesh_rect.width = "100px"; - mesh_rect.height = "25px"; - mesh_rect.background = "orange"; - mesh_rect.alpha = 0.6; - mesh_rect.isVisible = false; - advancedTexture.addControl(mesh_rect); - - var mesh_name = new BABYLON_GUI.TextBlock("mesh_name"); - mesh_name.text = ""; - mesh_name.color = "white"; - mesh_name.fontSize = "14px"; - mesh_rect.addControl(mesh_name); var remoteGlbUrl = config.HOST_URL + "/media/model/gx.glb"; BABYLON.SceneLoader.Append( remoteGlbUrl, "", scene, + function(scene){ + for (let key in that.sectionNames) { + let value = that.sectionNames[key]; + let mesh = scene.getMeshByName(key); + if (mesh) { + let rect1 = new BABYLON_GUI.Rectangle(); + rect1.width = "100px"; + rect1.height = "40px"; + rect1.cornerRadius = 20; + rect1.color = "rgba(53, 156, 193, 0.8)"; + rect1.thickness = 4; + rect1.background = "rgba(53, 156, 193, 0.8)"; + + let label = new BABYLON_GUI.TextBlock(); + label.text = value; + label.color = "Orange"; + rect1.addControl(label); + + that.myui.addControl(rect1); + rect1.linkWithMesh(mesh); + rect1.linkOffsetY = -10; + } + } + engine.hideLoadingUI(); + }, function (evt) { var loadedPercent = 0; if (evt.lengthComputable) { @@ -1203,28 +1031,9 @@ export default { for(let i=0;i { - // let keys = 'configData'+index; - // that[keys] = that.deepCopy(configData); - // that[keys].data = []; - // if(res.length>0){ - // res.forEach((item) => { - // let arr = []; - // arr[0] = item.batch; - // arr[1] = item.count_cando; - // arr[2] = item.count_working; - // arr[3] = item.count-item.count_cando-item.count_working; - // that[keys].data.push(arr); - // }) - // } - // }) - // }, getProcessDatas(name,index){ let that = this; let month = that.currentMonth>9?that.currentMonth:'0'+that.currentMonth; @@ -1233,20 +1042,23 @@ export default { let obj = {query:{current_date:current_date,mgroup_name:name}}; that.$API.bi.dataset.exec.req('batch_search', obj).then((res) => { if(res.data2.ds0){ - let lists = res.data2.ds0[0]; + let lists = res.data2.ds0; //根据工段名称分组 let keys = 'configData'+index; that[keys] = that.deepCopy(configData); that[keys].data = []; - lists.forEach((item) => { - let arr = []; - arr[0] = item.批次号; - arr[1] = item.待加工产物数; - arr[2] = item.加工中产物领用数; - arr[3] = item.今日合格数; - // arr[4] = Math.round((item.今日合格数/item.今日合格数)*100)+'%'; - that[keys].data.push(arr); - }) + if(lists.length>0){ + lists.forEach((item) => { + let arr = []; + arr[0] = item.批次号; + arr[1] = item.待加工产物数; + arr[2] = item.加工中产物领用数; + arr[3] = item.今日合格数; + // arr[4] = Math.round((item.今日合格数/item.今日合格数)*100)+'%'; + that[keys].data.push(arr); + }) + } + } }); }, @@ -1255,13 +1067,17 @@ export default { let that = this; this.scene = null; clearInterval(that.timerTime); + clearInterval(that.scrollInterval); that.timerTime = null; + that.scrollInterval = null; }, beforeDestoryed() { let that = this; this.scene = null; clearInterval(that.timerTime); + clearInterval(that.scrollInterval); that.timerTime = null; + that.scrollInterval = null; }, }; @@ -1274,21 +1090,19 @@ export default { } .container { - background: url("/public/img/gx/gx_bj.jpg") no-repeat; + /* background: url("/public/img/gx/gx_bj.jpg") no-repeat; */ background-size: cover; - /* height: 888px; - width: 2136px; */ - height: 1184px; - width: 2848px; + height: 1080px; + width: 1920px; position: relative; } /* header-start */ .pageHeader { z-index: 100; - height: 74px; - width: 100%; + height: 70px; + width: 1920px; padding: 0 20px; - line-height:74px; + line-height:70px; color: #ffffff; position: absolute; text-align: center; @@ -1297,16 +1111,16 @@ export default { /* border-bottom: 1px solid rgba(54, 217, 187, 0.3); */ } .header_left{ - position: absolute;top: 0;left: 10px;font-size: 20px; + position: absolute;top: 0;left: 10px;font-size: 18px; } .header_center_text{ - font-family: myfont;letter-spacing: 0.2em; font-size: 50px;line-height:53px;z-index: 100; + font-family: myfont;letter-spacing: 0.2em; font-size: 38px;line-height:53px;z-index: 100; } .header_right{ - position: absolute;top: 0;right: 10px;font-size: 20px; + position: absolute;top: 0;right: 10px;font-size: 18px; } .header_bg{ - z-index: -1;position: absolute;top:0;left:0;width: 100%;height: 100%; + z-index: -1;position: absolute;top:0;left:0;width:1920px;height:70px; } .header_line{ top:75px; @@ -1329,7 +1143,7 @@ export default { .left_block2, .right_block{ top:74px; - width:355px; + width:240px; z-index: 10; display: flex; position:absolute; @@ -1340,83 +1154,76 @@ export default { background: rgba(9, 31, 43, 0.5); } .left_block3{ - top:400px; + top:340px; left: 0; - width:710px; + width:480px; display: flex; position:absolute; overflow:hidden; flex-direction: column; - padding: 0 20px 0 20px; - height: 390px; + padding: 0 4px; + height: 400px; background: rgba(9, 31, 43, 0.5); } +.left_block3 .flexItem{ + width:480px; +} .left_block { left: 0; + height: 270px; } .right_block { right: 0; - width:710px; - height: 740px; + width:480px; + height: 670px; } .left_block2{ - left: 355px; + left: 240px; + height: 270px; } -.bottom_block{ - width: 100%; - position: absolute; - bottom: 0; - left: 0; - height: 370px; - overflow: hidden; -} -.bottom_block2{ - width: 400%; - position: absolute; - bottom: 0; - left: 0; - height: 370px; - display: flex; - transition: left 2s ease; -} -.flexItem { - height: 370px; -} -.flexItem3 { - width: 356px; - height: 370px; - background: rgba(0,0,0,.8); +.flexItem{ + width: 240px; } .videoFlexItem{ - height: 470px; + width: 460px; + height: 315px; } +.newsFlexItem{ + width: 460px; + height: 355px; +} +/* //短标题 */ +.itemTitle{ + color: #fff; + height:45px; + padding-left: 1.5em; + font-size: 16px; + line-height: 40px; + background-size: 100% 100%; + background-image: url("/public/img/gx/title_bg2.png"); +} +/* //长标题 */ .itemTitle2 { color: #fff; - height:50px; + height:45px; padding-left: 1.5em; - font-size: 20px; - line-height: 44px; + font-size: 16px; + line-height: 40px; background: url("/public/img/gx/title_bg.png") ; background-size: 100% 100%; display: flex; position: relative; } -.itemTitle{ - color: #fff; - height:50px; - padding-left: 1.5em; - font-size: 20px; - line-height: 44px; - background-size: 100% 100%; - background-image: url("/public/img/gx/title_bg2.png"); -} +/* 下面的工序表格标题 */ + .itemTitle_b{ - height: 42px; - line-height: 42px; - width: 350px; + height: 40px; + line-height: 40px; + width: 310px; font-size: 14px; padding-left: 2.5em; } + .block1NumberWrap{ width:48%; border: 1px solid rgba(54, 217, 187, 0.3); @@ -1426,8 +1233,8 @@ export default { .block1Numberinner{ background: rgba(54, 217, 187, 0.3); color: #fff; - height:80px; - line-height:80px; + height:64px; + line-height:64px; position: relative; } .block1Text{ @@ -1468,44 +1275,74 @@ export default { .boxmain{ height: 140px; } +/* 下面的工序表模块 */ +.bottom_block{ + width: 100%; + position: absolute; + bottom: 0; + left: 0; + height: 340px; + overflow: hidden; +} +.bottom_block2{ + width: 300%; + position: absolute; + bottom: 0; + left: 0; + height: 340px; + display: flex; + transition: left 2s ease; +} + +.flexItem3 { + width: 320px; + height: 340px; + background: rgba(9, 31, 43, 0.5) +} .inmBoxmain{ flex: 1; - height: 320px; - box-shadow: 0 0 10px 10px rgb(255 255 255 / 5%); + height: 270px; + width:98%; + margin:auto; + /* border-left: 2px solid #0f5b8e; */ + box-shadow: -4px 0px 4px -1px #0f5b8e; } .itemBody3{ display: flex; - justify-content: space-around; } -#pieCharts,#pieChart1,#pieChart2, -#pieChart3,#pieChart4{ - width: 11vh; - height: 13vh; -} -.bodyList { - width: 200px; - height: 100%; +.viewsItem { color: #ffffff; - display: flex; + font-size: 20px; + width: 440px; + height: 80px; + font-size: 15px; + display: inline-block; + margin-bottom: 20px; +} +.viewsItem_wrap { + height: 70px; + /* display: flex; */ flex-direction: column; - justify-content: space-around; + border-left: 5px solid rgba(53, 156, 193, 0.66); + padding-left: 10px; + border-radius: 5px; } -.bodyListItem { - font-size: 1vh; - border: 1px solid #02f5f2; - height: 16%; - border-radius: 15px; - text-align: center; +.viewsItem_img{ + width: 85px; + /* height: 50px; */ } -.bodyListItemBg { - background: rgba(2, 245, 242, 0.18); +article{ + text-indent: 2em; } -#scrollTable > .hader { - background: rgb(10, 63, 68) !important; - background-color: #0a3f44 !important; +/deep/ .header-item{ + padding: 0 5px!important; + font-size: 12px!important; +} +/deep/ .dv-scroll-board .rows .ceil { + font-size: 12px!important; + padding: 0 5px!important; } - .model { top: 0; width: 100%; @@ -1664,30 +1501,7 @@ export default { font-size: 0.8vw; } -.viewsItem { - color: #ffffff; - font-size: 20px; - width: 650px; - height: 85px; - font-size: 1.2vh; - display: inline-block; - margin-bottom: 20px; -} -.viewsItem_wrap { - height: 85px; - /* display: flex; */ - flex-direction: column; - border-left: 5px solid rgba(53, 156, 193, 0.66); - padding-left: 10px; - border-radius: 5px; -} -.viewsItem_img{ - width: 85px; - /* height: 50px; */ -} -article{ - text-indent: 2em; -} + /* .elec_number { color: rgb(2, 245, 242); font-weight: bold;