diff --git a/src/views/bigScreen/index_enm.vue b/src/views/bigScreen/index_enm.vue index 71788546..a4939111 100644 --- a/src/views/bigScreen/index_enm.vue +++ b/src/views/bigScreen/index_enm.vue @@ -170,8 +170,9 @@ export default { currentLightMesh: null, activeSection: 2, activeSectionName: '回转窑', - updateTime: '2023-08-17 16:00:00', + updateTime: '', basicOption: { + color: 'rgb(1,235,239)', backgroundColor: '', xAxis: { data: ['一月', '二月', '三月', '四月', '五月', '六月'], @@ -225,6 +226,7 @@ export default { chart6Option: {}, seriesData1: [0, 0, 0, 0, 0, 0], seriesData2: [0, 0, 0, 0, 0, 0], + seriesData2_2: [0, 0, 0, 0, 0, 0], seriesData3: [0, 0, 0, 0, 0, 0], seriesData3_2: [0, 0, 0, 0, 0, 0], seriesData4: [0, 0, 0, 0, 0, 0], @@ -240,6 +242,62 @@ export default { 水泥磨: { total: '0', elec: '0' }, 水泥包装: { total: '0', elec: '0' } }, + sectionDatas: { + 回转窑: { + elec_consume_unit: 29, + total_production: 2541, + coal_consume_unit: 105, + run_rate: 100, + charts_ele: [30, 29, 28, 31, 28, 16], + charts_prod: [2530, 2698, 2600, 2550, 2610, 2000], + charts_rate: [100, 100, 100, 100, 100, 100], + }, + 电石渣: { + elec_consume_unit: 4, + total_production: 1523, + coal_consume_unit: '', + run_rate: 100, + charts_ele: [3, 6, 4, 7, 5, 3], + charts_prod: [2015, 2698, 2904, 2550, 2610, 1200], + charts_rate: [100, 100, 100, 100, 100, 100], + }, + 原料磨: { + elec_consume_unit: 15, + total_production: 3230, + coal_consume_unit: '', + run_rate: 100, + charts_ele: [16, 15, 17, 15, 16, 10], + charts_prod: [3204, 3500, 3385, 3461, 3359, 2000], + charts_rate: [100, 100, 100, 100, 100, 100], + }, + 煤磨: { + elec_consume_unit: 36, + total_production: 420, + coal_consume_unit: '', + run_rate: 100, + charts_ele: [35, 37, 36, 37, 36, 20], + charts_prod: [426, 445, 425, 449, 438, 265], + charts_rate: [100, 100, 100, 100, 100, 100], + }, + 水泥磨: { + elec_consume_unit: 35, + total_production: 3063, + coal_consume_unit: '', + run_rate: 100, + charts_ele: [35, 37, 36, 37, 36, 20], + charts_prod: [3204, 3500, 3385, 3461, 3359, 2000], + charts_rate: [100, 100, 100, 100, 100, 100], + }, + 水泥包装: { + elec_consume_unit: 2, + total_production: 1000, + coal_consume_unit: '', + run_rate: 100, + charts_ele: [1, 3, 2, 3, 2, 1], + charts_prod: [1052, 1462, 1268, 1389, 1156, 800], + charts_rate: [100, 100, 100, 100, 100, 100], + } + } } }, mounted() { @@ -253,6 +311,7 @@ export default { that.nowDay = day; that.query.year_s = year; that.query.month_s = month; + that.updateTime = myDate.getFullYear() + '-' + (myDate.getMonth() + 1) + '-' + myDate.getDate() + ' ' + myDate.getHours() + ':' + myDate.getMinutes() + ':' + myDate.getSeconds(); this.initDomStyle(); this.$nextTick(() => { this.$API.enm.enstat.req({ type: 'month_s', month_s: month, year_s: year, page: 0 }).then((res1) => { @@ -305,6 +364,8 @@ export default { let item = arr[i] + '月' xAxisData.push(item); } + // 模拟数据 + xAxisData = ['1.19', '1.20', '1.21', '1.22', '1.23', '1.24']; let month0 = arr[0] > 9 ? arr[0] : '0' + arr[0]; let start_time = year_s + '-' + month0 + '-01 10:00:00'; that.arrMonth = arr; @@ -316,6 +377,9 @@ export default { this.getSectionData(); this.getDayData(); this.init(); + setTimeout(() => { + this.getMockData() + }, 1000); }, beforeUnmount() { // 性能优化 @@ -366,10 +430,10 @@ export default { // 监听并处理error事件 this.ws.onerror = function (error) { console.log('ws断开,尝试重连') - setTimeout(() => { - this.ws = null; - this.init() - }, 5000) + // setTimeout(() => { + // this.ws = null; + // this.init() + // }, 5000) } } @@ -389,6 +453,37 @@ export default { return a[property] - b[property]; } }, + getMockData() { + let that = this; + this.factoryData = { + elec_consume: 10983267, + pcoal_consume: 9500, + water_consume: 12825, + cair_consume: 676534 + } + this.mgroupValues = { + 电石渣: { total: 1523, elec: 4 }, + 原料磨: { total: 3230, elec: 15 }, + 煤磨: { total: 420, elec: 36 }, + 回转窑: { total: 2541, elec: 29 }, + 水泥磨: { total: 3063, elec: 35 }, + 水泥包装: { total: 1000, elec: 2 } + } + this.sectionData = this.sectionDatas[this.activeSectionName] + setInterval(() => { + this.factoryData.elec_consume += Math.floor(Math.random() * 10); + this.factoryData.pcoal_consume += Math.floor(Math.random() * 10); + this.factoryData.water_consume += Math.floor(Math.random() * 10); + this.factoryData.cair_consume += Math.floor(Math.random() * 10); + this.sectionDatas[this.activeSectionName].total_production += Math.floor(Math.random() * 10); + this.sectionDatas[this.activeSectionName].elec_consume_unit += Math.floor(Math.random() * 1); + this.sectionDatas[this.activeSectionName].charts_ele[5] = this.sectionDatas[this.activeSectionName].elec_consume_unit; + this.sectionDatas[this.activeSectionName].charts_prod[5] = this.sectionDatas[this.activeSectionName].total_production; + let data = new Date(); + that.updateTime = data.getFullYear() + '-' + (data.getMonth() + 1) + '-' + data.getDate() + ' ' + data.getHours() + ':' + data.getMinutes() + ':' + data.getSeconds(); + }, 10000) + }, + getFactoryData() { var that = this; that.$API.enm.enstat2.req(that.query).then((res) => { @@ -420,6 +515,15 @@ export default { that.seriesData2 = seriesData2; that.seriesData3 = seriesData3; that.seriesData3_2 = seriesData3_2; + // 模拟数据 + that.seriesData1 = [303468, 303524, 312095, 305684, 307468, 223420] + that.chart1Option.yAxis.min = 200000; + that.seriesData2 = [425, 430, 436, 430, 443, 340]; + that.seriesData2_2 = [586, 560, 576, 555, 543, 205]; + that.chart2Option.yAxis.min = 100; + that.seriesData3 = [20456, 24783, 21430, 22354, 25531, 15687]; + // that.seriesData3 = [586, 560, 576, 555, 543, 205] + that.chart3Option.yAxis.min = 15000; that.initCharts(); }) }, @@ -446,6 +550,15 @@ export default { that.seriesData4 = seriesData4; that.seriesData5 = seriesData5; that.seriesData6 = seriesData6; + // 模拟数据 + that.seriesData4 = this.sectionDatas.回转窑.charts_ele; + that.seriesData5 = this.sectionDatas.回转窑.charts_prod; + that.seriesData6 = this.sectionDatas.回转窑.charts_rate; + // that.chart4Option.yAxis.min = 200000; + // that.seriesData5 = [425, 430, 436, 430, 443, 340]; + // that.chart5Option.yAxis.min = 300; + // that.seriesData6 = [586, 560, 576, 555, 543, 205] + // that.chart6Option.yAxis.min = 500; that.initCharts1(); }) }, @@ -487,23 +600,23 @@ export default { that.setChart('chart1', that.chart1Option); this.chart2Option = deepCopy(that.basicOption) this.chart2Option.series[0].type = 'line'; - this.chart2Option.series[0].data = that.seriesData2; + this.chart2Option.series[1] = { + name: '工业水', + type: 'line', + barWidth: 15, + label: { + show: true, + position: 'top' + }, + emphasis: { + focus: 'series' + }, + data: that.seriesData2_2 + }, + this.chart2Option.series[0].data = that.seriesData2; this.setChart('chart2', this.chart2Option); this.chart3Option = deepCopy(that.basicOption) this.chart3Option.series = [ - { - name: '工业水', - type: 'bar', - barWidth: 15, - label: { - show: true, - position: 'top' - }, - emphasis: { - focus: 'series' - }, - data: that.seriesData3 - }, { name: '压缩空气', type: 'bar', @@ -511,7 +624,7 @@ export default { emphasis: { focus: 'series' }, - data: that.seriesData3_2 + data: that.seriesData3 }] this.setChart('chart3', this.chart3Option); }, @@ -522,7 +635,8 @@ export default { } that.basicOption.xAxis.data = that.xAxisData; this.chart4Option = deepCopy(that.basicOption) - this.chart4Option.series[0].type = 'line'; + this.chart4Option.series[0].type = 'bar'; + this.chart4Option.series[0].barWidth = 20; this.chart4Option.series[0].data = that.seriesData4; this.setChart('chart4', this.chart4Option); this.chart5Option = deepCopy(that.basicOption) @@ -530,7 +644,8 @@ export default { this.chart5Option.series[0].data = that.seriesData5; this.setChart('chart5', this.chart5Option); this.chart6Option = deepCopy(that.basicOption) - this.chart6Option.series[0].type = 'line'; + this.chart6Option.series[0].type = 'bar'; + this.chart6Option.series[0].barWidth = 20; this.chart6Option.series[0].data = that.seriesData6; this.setChart('chart6', this.chart6Option); }, @@ -833,10 +948,11 @@ export default { BABYLON.Animation.CreateAndStartAnimation('at5', camera, 'position', 45, 200, camera.position, cameraPosition, 0, ease); BABYLON.Animation.CreateAndStartAnimation('at51', camera, 'target', 45, 200, camera.target, position, 0, ease); } - let dataViewName = rect1.name.split('_')[0] + '_data_view'; - that.getMgroupChartData(dataViewName); + // let dataViewName = rect1.name.split('_')[0] + '_data_view'; + let dataViewName = rect1.name.split('_')[0]; that.activeSectionName = dataViewName; that.activeSection = 2; + that.getMgroupChartData(dataViewName); let dataView = advancedTexture.getControlByName(dataViewName); if (dataView) { // // 在这里进行矩形的操作 @@ -895,13 +1011,13 @@ export default { rc.text = "单位产品电耗："; } else if (j == 1 && i == 0) { // rc.text = that.mgroupValues[value].total; - rc.text = "123"; + rc.text = that.mgroupValues[value].total; rc.width = "80px"; rc.fontSize = '18px'; rc.color = "rgb(44,237,255)"; } else if (j == 1 && i == 1) { // rc.text = that.mgroupValues[value].total; - rc.text = "456"; + rc.text = that.mgroupValues[value].elec; rc.width = "80px"; rc.fontSize = '18px'; rc.color = "rgb(44,237,255)"; @@ -1071,6 +1187,10 @@ export default { that.seriesData4 = seriesData4; that.seriesData5 = seriesData5; that.seriesData6 = seriesData6; + //模拟数据 + that.seriesData4 = this.sectionDatas[this.activeSectionName].charts_ele; + that.seriesData5 = this.sectionDatas[this.activeSectionName].charts_prod; + that.seriesData6 = this.sectionDatas[this.activeSectionName].charts_rate; that.initCharts1(); const element_main = document.querySelector('.right_main'); element_main.classList.add('animate__animated', 'animate__fadeIn'); @@ -1091,30 +1211,39 @@ export default { }, getMgroupChartData(name) { - var that = this; - let obj = {}; - obj.type = 'month_s'; - obj.start_time = that.start_time; - obj.end_time = that.end_time; - obj.mgroup__name = name; - obj.page = 0; - this.$API.enm.enstat.req(obj).then((res) => { - let list0 = res.sort(this.compare('month_s')); - let list = list0.sort(this.compare('year_s')); - let seriesData4 = [0, 0, 0, 0, 0, 0], - seriesData5 = [0, 0, 0, 0, 0, 0], - seriesData6 = [0, 0, 0, 0, 0, 0]; - list.forEach(item => { - let index = that.arrMonth.indexOf(item.month_s); - seriesData4[index] = Number(item.elec_consume_unit) - seriesData5[index] = Number(item.total_production) - seriesData6[index] = Number(item.run_rate) - }) - that.seriesData4 = seriesData4; - that.seriesData5 = seriesData5; - that.seriesData6 = seriesData6; - that.initCharts1(); - }) + let that = this; + this.sectionData = this.sectionDatas[this.activeSectionName]; + //模拟数据 + that.seriesData4 = this.sectionDatas[this.activeSectionName].charts_ele; + that.seriesData5 = this.sectionDatas[this.activeSectionName].charts_prod; + that.seriesData6 = this.sectionDatas[this.activeSectionName].charts_rate; + that.initCharts1(); + console.log(this.sectionData, this.activeSectionName) + // 模拟数据 + // var that = this; + // let obj = {}; + // obj.type = 'month_s'; + // obj.start_time = that.start_time; + // obj.end_time = that.end_time; + // obj.mgroup__name = name; + // obj.page = 0; + // this.$API.enm.enstat.req(obj).then((res) => { + // let list0 = res.sort(this.compare('month_s')); + // let list = list0.sort(this.compare('year_s')); + // let seriesData4 = [0, 0, 0, 0, 0, 0], + // seriesData5 = [0, 0, 0, 0, 0, 0], + // seriesData6 = [0, 0, 0, 0, 0, 0]; + // list.forEach(item => { + // let index = that.arrMonth.indexOf(item.month_s); + // seriesData4[index] = Number(item.elec_consume_unit) + // seriesData5[index] = Number(item.total_production) + // seriesData6[index] = Number(item.run_rate) + // }) + // that.seriesData4 = seriesData4; + // that.seriesData5 = seriesData5; + // that.seriesData6 = seriesData6; + // that.initCharts1(); + // }) }, }, unmounted() { @@ -1245,7 +1374,7 @@ header { .panel_value { padding-left: 1em; - font-size: 22px; + font-size: 20px; font-weight: bold; text-align: right; } @@ -1253,7 +1382,7 @@ header { .panel_unit { right: 5px; color: #aebfe9; - font-size: 16px; + font-size: 12px; text-align: right; position: absolute; } @@ -1314,4 +1443,5 @@ header { text-align: center; background: url(./../../../public/img/menu_active.png) no-repeat; background-size: 100%; -} \ No newline at end of file +} + \ No newline at end of file