From 84be42a99396683bd146687418535b48f24bc723 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=94=A1=E7=8E=B2?= <8702040+cai-ling@user.noreply.gitee.com> Date: Wed, 18 Sep 2024 14:01:41 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 2 +- src/config/mork2.js | 60 +- src/pages_960/Setup.vue | 41 +- src/pages_960/modules/home/index.vue | 265 +++--- src/pages_960/modules/home/index_back.vue | 1001 +++++++++++++++++++++ src/pages_960/modules/home/style.stylus | 4 +- 6 files changed, 1173 insertions(+), 200 deletions(-) create mode 100644 src/pages_960/modules/home/index_back.vue diff --git a/index.html b/index.html index d9f4286..1a7d38e 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - 车间物料监控 + 上电科车间物料监控
diff --git a/src/config/mork2.js b/src/config/mork2.js index 114ead8..0f0055d 100644 --- a/src/config/mork2.js +++ b/src/config/mork2.js @@ -6,14 +6,70 @@ export const getAllBigScreen = () => { "total_material_qty": 50.0, "percentage": "33.33%", "material_id": "1759155580745945088", - "material_name": "测试物料2", + "material_name": "测试物料1", "material_code": "A1002" }, { "total_material_qty": 100.0, "percentage": "66.67%", "material_id": "1759154624864063488", - "material_name": "测试物料", + "material_name": "测试物料2", + "material_code": "A1001" + }, + { + "total_material_qty": 100.0, + "percentage": "66.67%", + "material_id": "1759154624864063488", + "material_name": "测试物料3", + "material_code": "A1001" + }, + { + "total_material_qty": 100.0, + "percentage": "66.67%", + "material_id": "1759154624864063488", + "material_name": "测试物料4", + "material_code": "A1001" + }, + { + "total_material_qty": 100.0, + "percentage": "66.67%", + "material_id": "1759154624864063488", + "material_name": "测试物料5", + "material_code": "A1001" + }, + { + "total_material_qty": 100.0, + "percentage": "66.67%", + "material_id": "1759154624864063488", + "material_name": "测试物料6", + "material_code": "A1001" + }, + { + "total_material_qty": 100.0, + "percentage": "66.67%", + "material_id": "1759154624864063488", + "material_name": "测试物料7", + "material_code": "A1001" + }, + { + "total_material_qty": 100.0, + "percentage": "66.67%", + "material_id": "1759154624864063488", + "material_name": "测试物料8", + "material_code": "A1001" + }, + { + "total_material_qty": 100.0, + "percentage": "66.67%", + "material_id": "1759154624864063488", + "material_name": "测试物料9", + "material_code": "A1001" + }, + { + "total_material_qty": 100.0, + "percentage": "66.67%", + "material_id": "1759154624864063488", + "material_name": "测试物料10", "material_code": "A1001" } ], diff --git a/src/pages_960/Setup.vue b/src/pages_960/Setup.vue index 930872a..7993488 100644 --- a/src/pages_960/Setup.vue +++ b/src/pages_960/Setup.vue @@ -29,8 +29,7 @@ export default { loginname: '', password: '', baseUrl: this.$store.getters.baseUrl, - setTime: this.$store.getters.setTime / 1000, - fullscreen: false + setTime: this.$store.getters.setTime / 1000 } }, methods: { @@ -49,17 +48,7 @@ export default { this.$store.dispatch('setConfig', obj) this.$router.push('/home') let element = document.documentElement - if (this.fullscreen) { - if (document.exitFullscreen) { - document.exitFullscreen() - } else if (document.webkitCancelFullScreen) { - document.webkitCancelFullScreen() - } else if (document.mozCancelFullScreen) { - document.mozCancelFullScreen() - } else if (document.msExitFullscreen) { - document.msExitFullscreen() - } - } else { + if (!(document.fullscreenElement || document.mozFullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement)) { if (element.requestFullscreen) { element.requestFullscreen() } else if (element.webkitRequestFullScreen) { @@ -71,7 +60,6 @@ export default { element.msRequestFullscreen() } } - this.fullscreen = !this.fullscreen } } } @@ -95,27 +83,6 @@ export default { width 500px background-color rgba(255, 255, 255, 0.8) border-radius 5px -.login_tab - position relative - height 50px - font-size 0 - background-color rgba(255, 255, 255, 0.9) - border-radius 5px 5px 0 0 -.login_tab_item - float left - width 50% - font-size 16px - line-height 50px - color #333333 - text-align center - cursor pointer -.login_tab_line - position absolute - width 50% - height 2px - background-color #2778f3 - left 0 - bottom 0 .login_cnt width 100% padding 15px @@ -140,8 +107,6 @@ export default { border none box-sizing border-box background-color #ffffff -.select-wraper - _wh(calc(100% - 116px), 40px) .submit width 100% background-color #2778f3 @@ -164,6 +129,4 @@ label font-size 15px line-height 40px color #333333 -.el-select - width 100% diff --git a/src/pages_960/modules/home/index.vue b/src/pages_960/modules/home/index.vue index 612392d..dda4a34 100644 --- a/src/pages_960/modules/home/index.vue +++ b/src/pages_960/modules/home/index.vue @@ -15,7 +15,7 @@
-
+
@@ -25,7 +25,7 @@
-
+
@@ -35,7 +35,7 @@
-
+
@@ -156,7 +156,7 @@
-
+
@@ -166,7 +166,7 @@
-
+
@@ -184,9 +184,8 @@ export default { return { interTime: this.$store.getters.setTime, timer: null, - chart1Timer: null, - chart2Timer: null, - chart5Timer: null, + // chart2Timer: null, + // chart5Timer: null, materList: [], // 原料库存 curList: [], // 当日出入 historyList: [], // 历史分析 @@ -194,7 +193,12 @@ export default { loadList: [], // 当日车间上下料 taskList: [], // 当日搬运任务 agvList: [], - rgvList: [] + rgvList: [], + myChart1: null, + myChart2: null, + myChart3: null, + myChart4: null, + myChart5: null } }, computed: { @@ -214,36 +218,60 @@ export default { created () { this.refresh() }, - beforeDestroy () { - clearInterval(this.timer) - clearInterval(this.chart1Timer) - clearInterval(this.chart2Timer) - clearInterval(this.chart5Timer) - this.timer = null - this.chart1Timer = null - this.chart2Timer = null - this.chart5Timer = null + mounted () { + this.myChart1 = this.$echarts.init(this.$refs.echartsRef1) + this.myChart2 = this.$echarts.init(this.$refs.echartsRef2) + this.myChart3 = this.$echarts.init(this.$refs.echartsRef3) + this.myChart4 = this.$echarts.init(this.$refs.echartsRef4) + this.myChart5 = this.$echarts.init(this.$refs.echartsRef5) }, destroyed () { - clearInterval(this.timer) - clearInterval(this.chart1Timer) - clearInterval(this.chart2Timer) - clearInterval(this.chart5Timer) - this.timer = null - this.chart1Timer = null - this.chart2Timer = null - this.chart5Timer = null + if (this.myChart1 !== null) { + this.myChart1.dispose() + this.myChart1 = null + } + if (this.myChart2 !== null) { + this.myChart2.dispose() + this.myChart2 = null + } + if (this.myChart3 !== null) { + this.myChart3.dispose() + this.myChart3 = null + } + if (this.myChart4 !== null) { + this.myChart4.dispose() + this.myChart4 = null + } + if (this.myChart5 !== null) { + this.myChart5.dispose() + this.myChart5 = null + } + if (this.timer !== null) { + clearInterval(this.timer) + this.timer = null + } + // if (this.chart2Timer !== null) { + // clearInterval(this.chart2Timer) + // this.chart2Timer = null + // } + // if (this.chart5Timer !== null) { + // clearInterval(this.chart5Timer) + // this.chart5Timer = null + // } }, methods: { back () { - if (document.exitFullscreen) { - document.exitFullscreen() - } else if (document.webkitCancelFullScreen) { - document.webkitCancelFullScreen() - } else if (document.mozCancelFullScreen) { - document.mozCancelFullScreen() - } else if (document.msExitFullscreen) { - document.msExitFullscreen() + let flag = !!(document.fullscreenElement || document.mozFullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement) + if (flag) { + if (document.exitFullscreen) { + document.exitFullscreen() + } else if (document.webkitCancelFullScreen) { + document.webkitCancelFullScreen() + } else if (document.mozCancelFullScreen) { + document.mozCancelFullScreen() + } else if (document.msExitFullscreen) { + document.msExitFullscreen() + } } this.$router.push('/setup') }, @@ -255,12 +283,14 @@ export default { }, async _getAllBigScreen () { let res = await getAllBigScreen() - clearInterval(this.chart1Timer) - clearInterval(this.chart2Timer) - clearInterval(this.chart5Timer) - this.chart1Timer = null - this.chart2Timer = null - this.chart5Timer = null + // if (this.chart2Timer !== null) { + // clearInterval(this.chart2Timer) + // this.chart2Timer = null + // } + // if (this.chart5Timer !== null) { + // clearInterval(this.chart5Timer) + // this.chart5Timer = null + // } this.materList = [...res.inventoryAnalysis] this.curList = [...res.inventoryIOAnalysis] this.historyList = [...res.historyInventoryIOAnalysis] @@ -276,7 +306,7 @@ export default { this.setEchart5() }, setEchart1 () { - let colors = ['#1980EA', '#67D470', '#B4C9EF', '#BCBF5C', '#EF5252', '#6d5edd', '#bf41bb'] + let colors = ['#1980EA', '#67D470', '#B4C9EF', '#BCBF5C', '#EF5252', '#6d5edd', '#bf41bb', '#f65621', '#21f6eb', '#64b0ad'] let seriesData = [] let seriesName = [] this.materList.map((e, i) => { @@ -300,10 +330,8 @@ export default { containLabel: true }, title: { - x: '22%', - y: '38%', - width: '200', - height: '40', + x: '16%', + y: '35%', text: '总数', subtext: total, textAlign: 'center', @@ -320,38 +348,25 @@ export default { }, legend: { show: true, - type: 'scroll', + // type: 'scroll', orient: 'vertical', - left: '55%', - top: 10, - bottom: 10, - itemGap: 9, + right: 0, + bottom: 0, + itemGap: 6, icon: 'rect', itemWidth: 4, itemHeight: 4, data: seriesName, formatter: (name) => { - let qty - let percentage - for (let i = 0; i < seriesData.length; i++) { - if (seriesData[i].name === name) { - qty = seriesData[i].value - percentage = seriesData[i].percentage - } - } - var arr = [ - '{a|' + name + '}\n', - '{b|' + qty + '}', - '{c|' + percentage + '}' - ] - return arr.join(' ') + const item = seriesData.filter((item) => item.name === name)[0] + return `{a|${name}}\n{b| ${item.value + '}'}` }, textStyle: { rich: { a: { fontSize: 8, lineHeight: 10, - padding: [10, 0, 0, 0], + padding: [0, 0, 0, 0], wordWrap: 'break-word', color: '#9BB9DD', align: 'left' @@ -359,31 +374,18 @@ export default { b: { fontSize: 8, lineHeight: 10, - padding: [10, 0, 0, -10], + padding: [0, 0, 0, 0], color: '#DFECFB', align: 'left' - }, - c: { - align: 'right', - fontSize: 8, - lineHeight: 8, - padding: [9, 0, 0, 0], - color: '#9BB9DD' } } - }, - pageTextStyle: { - fontSize: 8, - color: 'RGBA(86, 114, 157, 0.9)' - }, - pageButtonItemGap: 0, - pageIconSize: 0 + } }, series: [{ name: '库存量监控', type: 'pie', - radius: ['61%', '69%'], - center: ['24.5%', '49%'], + radius: ['50%', '60%'], + center: ['19%', '50%'], labelLine: { show: false }, @@ -402,27 +404,7 @@ export default { data: seriesData }] } - if (document.getElementById('home_1') == null) { - return - } - this.$echarts.dispose(document.getElementById('home_1')) - let echart = this.$echarts.init(document.getElementById('home_1')) - echart.setOption(option) - let bu = 0 - this.chart1Timer = setInterval(() => { - if (bu > seriesData.length - 1) { - bu = 0 - } - echart.dispatchAction({ - type: 'legendScroll', - seriesIndex: 0, - scrollDataIndex: bu - }) - bu++ - }, 2000) - window.addEventListener('resize', () => { - echart.resize() - }) + this.myChart1.setOption(option, true) }, setEchart2 () { let barName = [] @@ -554,25 +536,17 @@ export default { } ] } - if (document.getElementById('home_2') == null) { - return - } - this.$echarts.dispose(document.getElementById('home_2')) - let echart = this.$echarts.init(document.getElementById('home_2')) - echart.setOption(option) - this.chart2Timer = setInterval(() => { - if (option.dataZoom[0].endValue >= barData1.length - 1) { - option.dataZoom[0].endValue = 3 - option.dataZoom[0].startValue = 0 - } else { - option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1 - option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1 - } - echart.setOption(option) - }, 2000) - window.addEventListener('resize', () => { - echart.resize() - }) + this.myChart2.setOption(option, true) + // this.chart2Timer = setInterval(() => { + // if (option.dataZoom[0].endValue >= barData1.length - 1) { + // option.dataZoom[0].endValue = 3 + // option.dataZoom[0].startValue = 0 + // } else { + // option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1 + // option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1 + // } + // this.myChart2.setOption(option, true) + // }, 2000) }, setEchart3 () { let total = 0 @@ -730,12 +704,7 @@ export default { } ] } - if (document.getElementById('home_3') == null) { - return - } - this.$echarts.dispose(document.getElementById('home_3')) - let echart = this.$echarts.init(document.getElementById('home_3')) - echart.setOption(option) + this.myChart3.setOption(option, true) }, setEchart4 () { let xAxisData = [] @@ -820,15 +789,7 @@ export default { } ] } - if (document.getElementById('home_4') == null) { - return - } - this.$echarts.dispose(document.getElementById('home_4')) - let echart = this.$echarts.init(document.getElementById('home_4')) - echart.setOption(option) - window.addEventListener('resize', () => { - echart.resize() - }) + this.myChart4.setOption(option, true) }, setEchart5 () { let attaData1 = [] @@ -972,25 +933,17 @@ export default { } ] } - if (document.getElementById('home_5') == null) { - return - } - this.$echarts.dispose(document.getElementById('home_5')) - let echart = this.$echarts.init(document.getElementById('home_5')) - echart.setOption(option) - this.chart5Timer = setInterval(() => { - if (option.dataZoom[0].endValue >= ydata.length - 1) { - option.dataZoom[0].endValue = 7 - option.dataZoom[0].startValue = 0 - } else { - option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1 - option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1 - } - echart.setOption(option) - }, 2000) - window.addEventListener('resize', () => { - echart.resize() - }) + this.myChart5.setOption(option, true) + // this.chart5Timer = setInterval(() => { + // if (option.dataZoom[0].endValue >= ydata.length - 1) { + // option.dataZoom[0].endValue = 7 + // option.dataZoom[0].startValue = 0 + // } else { + // option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1 + // option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1 + // } + // this.myChart5.setOption(option, true) + // }, 2000) } } } diff --git a/src/pages_960/modules/home/index_back.vue b/src/pages_960/modules/home/index_back.vue new file mode 100644 index 0000000..031eb77 --- /dev/null +++ b/src/pages_960/modules/home/index_back.vue @@ -0,0 +1,1001 @@ + + + + + diff --git a/src/pages_960/modules/home/style.stylus b/src/pages_960/modules/home/style.stylus index 6e43e16..b09cd34 100644 --- a/src/pages_960/modules/home/style.stylus +++ b/src/pages_960/modules/home/style.stylus @@ -80,8 +80,8 @@ .pie_wraper width 100% height 100% - padding 1px 0 0 1px - background left center / 111px 111px url('../../../images/pie-bg_2_s.png') no-repeat + // padding 1px 0 0 1px + // background left center / 111px 111px url('../../../images/pie-bg_2_s.png') no-repeat .pie_legend width calc(100% - 200px) height 100%