From 37eacdadfe43fb6bafb4d6b9a3b97d79be0c10ba Mon Sep 17 00:00:00 2001 From: shijing Date: Fri, 22 Nov 2024 11:21:17 +0800 Subject: [PATCH] =?UTF-8?q?fix:=E5=85=89=E8=8A=AF=E5=A4=A7=E5=B1=8F?= =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/scEcharts/index.vue | 10 +- src/views/bigScreen/index_gx.vue | 493 ++++------------------------- 2 files changed, 68 insertions(+), 435 deletions(-) diff --git a/src/components/scEcharts/index.vue b/src/components/scEcharts/index.vue index 9e2112c4..793ef653 100644 --- a/src/components/scEcharts/index.vue +++ b/src/components/scEcharts/index.vue @@ -27,7 +27,15 @@ option: { deep:true, handler (v) { - unwarp(this.myChart).setOption(v); + let that = this; + if(that.myChart!==null){ + that.myChart.setOption(v); + }else{ + let myChart = echarts.init(that.$refs.scEcharts, 'T'); + myChart.setOption(v); + that.myChart = myChart; + } + // unwarp(this.myChart).setOption(v); } } }, diff --git a/src/views/bigScreen/index_gx.vue b/src/views/bigScreen/index_gx.vue index 6ff5677a..57c09b3d 100644 --- a/src/views/bigScreen/index_gx.vue +++ b/src/views/bigScreen/index_gx.vue @@ -16,7 +16,6 @@
-
-
@@ -232,6 +230,7 @@ :config="configData2" class="inmBoxmain" /> +
@@ -241,6 +240,7 @@ :config="configData3" class="inmBoxmain" /> +
@@ -250,6 +250,7 @@ :config="configData4" class="inmBoxmain" /> +
@@ -259,6 +260,7 @@ :config="configData5" class="inmBoxmain" /> +
@@ -268,20 +270,9 @@ :config="configData6" class="inmBoxmain" /> +
-
精雕
@@ -289,6 +280,7 @@ :config="configData8" class="inmBoxmain" /> +
@@ -298,6 +290,7 @@ :config="configData9" class="inmBoxmain" /> +
@@ -307,6 +300,7 @@ :config="configData10" class="inmBoxmain" /> +
@@ -316,6 +310,7 @@ :config="configData11" class="inmBoxmain" /> +
@@ -325,6 +320,7 @@ :config="configData12" class="inmBoxmain" /> +
@@ -334,6 +330,7 @@ :config="configData13" class="inmBoxmain" /> +
@@ -343,6 +340,7 @@ :config="configData14" class="inmBoxmain" /> +
@@ -352,6 +350,7 @@ :config="configData15" class="inmBoxmain" /> +
@@ -361,7 +360,7 @@ :config="configData0" class="inmBoxmain" /> - +
@@ -385,13 +384,13 @@ BABYLON.DracoCompression.Configuration.decoder.fallbackUrl = import "babylonjs-loaders"; import "animate.css"; const configData={ - header : ['物料批次','未加工','进行中','已完成'], + header : ['物料批次','未加工','进行中','已完成','合格数'], headerBGC : '#0a3f44', rowNum : 3, headerHeight : 35, align : 'center', waitTime : 150000, - columnWidth: [110,70,70,70], + columnWidth: [110,68,68,68,68], data : [], } const baseOption={ @@ -521,8 +520,8 @@ const baseOption2= { borderRadius: 5 }, data: [ - {value: 860, name: '合格'}, - {value: 10, name: '不合格'}, + {value: 0, name: '合格'}, + {value: 0, name: '不合格'}, ] }] } @@ -532,26 +531,15 @@ export default { }, data() { return { - colors: [ - { color: "#f95050", percentage: 20 }, - { color: "#e6a23c", percentage: 40 }, - { color: "#1989fa", percentage: 60 }, - { color: "#02f5f2", percentage: 80 }, - { color: "#5cb87a", percentage: 100 }, - ], - factoryName: "", initialAlpha: Math.PI / 2, initialBeta: Math.PI / 5, initialRadius: 2.3, initialTarget: null, resizeTimeout: null, loadedPercent: 0, - currentLightMesh: null, - infoVisibel: false, - clickVisible: false, - eqChartShow:false, percentage: 25, updateTime: "2023-08-17 16:00:00", + //当前时间 currentTime: "", currentWeek: "", currentYear: "", @@ -561,18 +549,7 @@ export default { timerTime: null, start_date: "", end_date: "", - dialogData: { - deptName: "", - }, - currentData: { - deptName: "", - }, - deptName: "入窑生料", heightTimer: null, - count_shuliao: 0, - count_meihao: 0, - count_elec: 0, - blockTableHeight: 0, count_day:0, count_week:0, count_month:0, @@ -580,189 +557,18 @@ export default { myChart: null, sectionNames: { // '立方体.010':'一层', - '立方体.103': "一层",// 地面 - '立方体.001': "二层",//地面.001 - }, - options: { - title: { - text: '总计', - left: 'center', - textStyle:{ - fontSize: 16, - color: '#fff', - } - }, - tooltip: { - trigger: 'item', - }, - legend: { - itemWidth: 12, - itemHeight: 12, - left: 'center', - bottom: '1%', - textStyle: { - color: '#fff', - fontSize: 10, - }, - }, - series: [{ - type: 'pie', - radius: ['40%', '70%'], - center: ['50%', '50%'], - label: false, - itemStyle: { - borderRadius: 5 - }, - data: [ - {value: 860, name: '合格'}, - {value: 10, name: '不合格'}, - ] - }] - }, - option1: { - title: { - text: '尺寸早班', - left: 'center', - textStyle:{ - fontSize: 16, - color: '#fff', - } - }, - tooltip: { - trigger: 'item', - }, - legend: { - itemWidth: 12, - itemHeight: 12, - left: 'center', - bottom: '1%', - textStyle: { - color: '#fff', - fontSize: 10, - }, - }, - series: [{ - type: 'pie', - radius: ['40%', '70%'], - center: ['50%', '50%'], - label: false, - itemStyle: { - borderRadius: 5 - }, - data: [ - {value: 860, name: '合格'}, - {value: 10, name: '不合格'}, - ] - }] - }, - option2: { - title: { - text: '尺寸晚班', - left: 'center', - textStyle:{ - fontSize: 16, - color: '#fff', - } - }, - tooltip: { - trigger: 'item', - }, - legend: { - itemWidth: 12, - itemHeight: 12, - left: 'center', - bottom: '1%', - textStyle: { - color: '#fff', - fontSize: 10, - }, - }, - series: [{ - type: 'pie', - radius: ['40%', '70%'], - center: ['50%', '50%'], - label: false, - itemStyle: { - borderRadius: 5 - }, - data: [ - {value: 860, name: '合格'}, - {value: 10, name: '不合格'}, - ] - }] - }, - option3: { - title: { - text: '外观早班', - left: 'center', - textStyle:{ - fontSize: 16, - color: '#fff', - } - }, - tooltip: { - trigger: 'item', - }, - legend: { - itemWidth: 12, - itemHeight: 12, - left: 'center', - bottom: '1%', - textStyle: { - color: '#fff', - fontSize: 10, - }, - }, - series: [{ - type: 'pie', - radius: ['40%', '70%'], - center: ['50%', '50%'], - label: false, - itemStyle: { - borderRadius: 5 - }, - data: [ - {value: 860, name: '合格'}, - {value: 10, name: '不合格'}, - ] - }] - }, - option4: { - title: { - text: '外观晚班', - left: 'center', - textStyle:{ - fontSize: 16, - color: '#fff', - } - }, - tooltip: { - trigger: 'item', - }, - legend: { - itemWidth: 12, - itemHeight: 12, - left: 'center', - bottom: '1%', - textStyle: { - color: '#fff', - fontSize: 10, - }, - }, - series: [{ - type: 'pie', - radius: ['40%', '70%'], - center: ['50%', '50%'], - label: false, - itemStyle: { - borderRadius: 5 - }, - data: [ - {value: 860, name: '合格'}, - {value: 10, name: '不合格'}, - ] - }] + '地面': "一层",// + '一层地面': "一层",// 地面 + '地面.001': "二层",// 地面 + '二层地面': "二层",//地面.001 }, + // 质量分析饼状图option + options: {}, + option1: {}, + option2: {}, + option3: {}, + option4: {}, + //设备状态饼状图option option_eq: { color: ['rgb(145,204,117)', '#ffa500 ', 'rgb(250,200,88)', 'rgb(215,102,97)', 'rgb(185,51,46)' ], tooltip: { @@ -820,6 +626,7 @@ export default { ] } }, + //成品table数据 configDataProd:{ header:['物料名称','物料批次','物料数量'], headerBGC:'#0a3f44', @@ -830,6 +637,7 @@ export default { waitTime:3000, columnWidth: [260,260,100], }, + //原料table数据 configData30:{ header:['物料名称','物料批次','物料数量'], headerBGC:'#0a3f44', @@ -840,6 +648,7 @@ export default { waitTime:3000, columnWidth: [260,260,100], }, + //工序库存table数据 configData0:{}, configData1:{}, configData2:{}, @@ -858,7 +667,9 @@ export default { configData15:{}, scrollNum:0, scrollInterval:null, + //近七天日数组 dayArr:[], + //工序柱状图option options0:{}, options1:{}, options2:{}, @@ -879,7 +690,6 @@ export default { }, mounted() { let that = this; - that.options0 = that.deepCopy(baseOption); that.initFactory(); that.bigScreenName = that.$TOOL.data.get("BASE_INFO").base.bigScreen_name; that.showTime(); @@ -894,12 +704,12 @@ export default { that.currentMonth = month; that.currentDay = day; let dayArr = []; - for(let i=6;i>0;i--){ + for(let i=6;i>-1;i--){ let date = new Date(nowDate.getTime()-i*24*60*60*1000); let day = date.getDate(); dayArr.push(day); } - dayArr.push(day); + // dayArr.push(day); that.dayArr = dayArr; that.getEquipments(); that.getMaterials(); @@ -939,6 +749,15 @@ export default { let month = that.currentMonth>9?that.currentMonth:'0'+that.currentMonth; let day = that.currentDay>9?that.currentDay:'0'+that.currentDay; let current_date = that.currentYear+'-'+month+'-'+day; + that.options = that.deepCopy(baseOption2); + that.option1 = that.deepCopy(baseOption2); + that.option1.title.text = '早班尺寸'; + that.option2 = that.deepCopy(baseOption2); + that.option2.title.text = '晚班尺寸'; + that.option3 = that.deepCopy(baseOption2); + that.option3.title.text = '早班外观'; + that.option4 = that.deepCopy(baseOption2); + that.option4.title.text = '晚班外观'; let obj = { query:{ "fw_type":"prod", @@ -970,16 +789,12 @@ export default { index = 4; } let key = 'option'+index; - that[key] = that.deepCopy(baseOption2); - that[key].title.text = item.班次+' '+item.部门; that[key].series.data[0].value = item.合格数; that[key].series.data[1].value = item.不合格数; }) - that.options = that.deepCopy(baseOption2); that.options.series.data[0].value = count_ok; that.options.series.data[1].value = count_notok; } - } }); }, @@ -994,7 +809,7 @@ export default { let nums = that.scrollNum * 384; let lefts = 0-nums; document.getElementById("scroll").style.left = lefts +'px'; - },150000) + },6000) }, showTime() { this.currentTime = this.$TOOL.dateFormat(new Date(), "hh:mm:ss"); @@ -1029,7 +844,6 @@ export default { var model = document.getElementsByClassName("model")[0]; if (windowWidth > 960) { container.style.overflow = "hidden"; - // container.style.height = windowHeight + "px"; model.style.position = "absolute"; model.style.height = windowHeight - 3 + "px"; model.style.top = 0; @@ -1059,7 +873,7 @@ export default { let current_date = that.currentYear+'-'+month+'-'+day; let obj = {query:{current_date:current_date}}; that.$API.bi.dataset.exec.req('cprrws', obj).then((res) => { - if(res.data2.ds0){ + if(res.data2.ds0&&res.data2.ds0.length>0){ that.cprrws = res.data2.ds0[0].日任务数; } }); @@ -1203,13 +1017,13 @@ export default { rect1.width = "100px"; rect1.height = "40px"; rect1.cornerRadius = 20; - rect1.color = "rgba(53, 156, 193, 0.8)"; + rect1.color = "rgba(255,160,0,.7)"; rect1.thickness = 4; - rect1.background = "rgba(53, 156, 193, 0.8)"; + rect1.background = "rgba(255,160,0,.7)"; let label = new BABYLON_GUI.TextBlock(); label.text = value; - label.color = "Orange"; + label.color = "#ffffff"; rect1.addControl(label); that.myui.addControl(rect1); @@ -1234,7 +1048,6 @@ export default { ); return scene; }; - const scene = createScene(); //Call the createScene function engine.runRenderLoop(function () { scene.render(); @@ -1278,29 +1091,28 @@ export default { arr[0] = item.批次号; arr[1] = item.待加工产物数; arr[2] = item.加工中产物领用数; + arr[3] = item.今日生产数; arr[3] = item.今日合格数; that[keys].data.push(arr); }) } - } }); }, getProcessCount(name,index){ let that = this; + let optionKey = 'options'+index; + that[optionKey] = that.deepCopy(baseOption); + that[optionKey].xAxis.data =that.dayArr; let nowDate = new Date(); let end_date = that.$TOOL.dateFormat2(nowDate); let start_date = that.$TOOL.dateFormat2(new Date(nowDate.getTime()-6*24*60*60*1000)); - console.log(end_date); - console.log(start_date); let obj = {query:{end_date:end_date,start_date:start_date,mgroup_name:name}}; that.$API.bi.dataset.exec.req('lineDay_m2', obj).then((res) => { if(res.data2.ds0){ let lists = res.data2.ds0; - let optionKey = 'options'+index; - that[optionKey] = that.deepCopy(baseOption); - let data0=[],data1=[],data2=[]; if(lists.length>0){ + let data0=[],data1=[],data2=[]; lists.forEach((item) => { let index = that.dayArr.indexOf(item.日); data0[index] = item.生产数; @@ -1310,9 +1122,8 @@ export default { that[optionKey].series[0].data = data0; that[optionKey].series[1].data = data1; that[optionKey].series[2].data = data2; + console.log(that[optionKey]); } - - } }); }, @@ -1493,7 +1304,7 @@ export default { background: rgba(54, 217, 187, 0.3); color: #fff; height:64px; - line-height:64px; + line-height:80px; position: relative; } .block1Text{ @@ -1562,7 +1373,7 @@ export default { left: 50%; width: 150px; height: 30px; - line-height: 30px; + line-height: 28px; font-size: 16px; color: #00ffff; text-align: center; @@ -1660,191 +1471,5 @@ article{ font-size: 12px; } -#dashbordProcess .el-progress-circle { - height: 60px !important; - width: 60px !important; -} -.el-progress--circle .el-progress__text { - display: block; - margin-top: 1px; - color: #fff; - font-size: 20px !important; - font-weight: bold !important; -} - -.inforBlock { - left: 60%; - top: 30%; - width: 420px; - height: 150px; - position: absolute; - font-weight: 500; - color: #fff; - padding: 20px; - font-size: 14px; - box-sizing: border-box; - background: linear-gradient( - to bottom left, - rgba(25, 154, 118, 0.5), - rgba(31, 44, 50, 0.5) - ); -} - -.inforBlock.clickBlock { - left: 50%; - width: 520px; - height: 225px; - padding: 40px; - font-size: 16px; - transform: translateX(-50%); -} - -.inforBlock > .border_corner { - z-index: 2500; - position: absolute; - width: 10px; - height: 10px; - background: rgba(0, 0, 0, 0); - border: 2px solid rgba(54, 217, 187, 1); -} - -.inforBlock > .border_left_top { - top: 0; - left: 0; - border-right: none; - border-bottom: none; -} - -.inforBlock > .border_right_top { - top: 0; - right: 0; - border-left: none; - border-bottom: none; -} - -.inforBlock > .border_left_bottom { - bottom: 0; - left: 0; - border-right: none; - border-top: none; -} - -.inforBlock > .border_right_bottom { - bottom: 0; - right: 0; - border-left: none; - border-top: none; -} - -.inforBlock > .title { - font-size: 20px; - font-weight: 600; - position: absolute; - top: -45px; - text-align: center; - width: 100%; - left: 0; -} - -.inforBlock > .infoCantier { - display: flex; -} - -.infoCantier > .leftBlock { - width: 100px; - display: flex; - flex-direction: column; - margin-right: 30px; -} - -.infoCantier > .rightBlock { - display: flex; - flex-direction: column; - justify-content: space-between; -} - -.infoCantier > .rightBlock > .countWrap { - display: flex; - justify-content: space-between; - width: 280px; - margin-top: 10px; -} - -.percentage-value { - display: block; - margin-top: 6px; - font-size: 1.5vh; - color: #02f5f2; - font-weight: bold; -} -.percentage-label { - color: #ffffff; - font-size: 1.2vh; -} -.circle_bottom_text { - color: #02f5f2; - font-size: 0.8vw; -} - - -/* .elec_number { - color: rgb(2, 245, 242); - font-weight: bold; - font-size: 1.4vh; - padding-top: 5px; -} */ -/* // 表格——el-table 去除背景颜色*/ -/deep/ .el-table, -.el-table__body, -/deep/ .el-table .el-table__body-wrapper { - background: transparent !important; -} -/deep/ .el-table .el-table__header-wrapper { - background: rgba(32, 93, 74, 0.83) !important; -} -/deep/ .el-table .el-table__body-wrapper { - background: rgba(46, 139, 155, 0.48) !important; -} -/deep/ .el-table th { - background-color: transparent !important; -} -/deep/ .el-table tr { - background-color: transparent !important; -} -/deep/ .el-table tr :hover { - background-color: transparent !important; -} -/deep/ - .el-table--enable-row-hover - .el-table__body - tr:hover - > td.el-table__cell { - background-color: transparent !important; -} -/* //清除鼠标移入效果 */ -/deep/.el-table__body tr.hover-row > td { - background-color: transparent !important; -} -/* // 行底边线 */ -/deep/ .el-table .el-table__body-wrapper /deep/ .el-table td.el-table__cell, -.el-table th.el-table__cell.is-leaf { - background: transparent !important; -} -/deep/ .el-table td.el-table__cell, -/deep/ .el-table th.el-table__cell.is-leaf { - border-bottom: 1px solid rgb(25, 111, 115, 0.82) !important; -} -/* 改变radio选中时的样式 */ -/deep/ .el-radio.elRadio > .el-radio__label { - color: #ffffff; -} -/deep/ .el-radio__input.is-checked .el-radio__inner { - background: #13f1df; - border-color: #13f1df; -} -/deep/ .el-table__inner-wrapper:before { - background-color: rgba(0, 0, 0, 0) !important; -} -/* 改变radio选中时的样式 */