root/screen-shangdianke
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化

Browse Source
This commit is contained in:
蔡玲
2024-09-18 14:01:41 +08:00
parent 77d083ea86
commit 84be42a993
6 changed files with 1173 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -4,7 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0,user-scalable=no"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0,user-scalable=no">
<!-- <meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no, target-densitydpi=device-dpi" /> --> <!-- <meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no, target-densitydpi=device-dpi" /> -->
<title>车间物料监控</title> <title>上电科车间物料监控</title>
</head> </head>
<body class="clearfix"> <body class="clearfix">
<div id="app"></div> <div id="app"></div>

60
src/config/mork2.js
View File

@@ -6,14 +6,70 @@ export const getAllBigScreen = () => {
"total_material_qty": 50.0, "total_material_qty": 50.0,
"percentage": "33.33%", "percentage": "33.33%",
"material_id": "1759155580745945088", "material_id": "1759155580745945088",
"material_name": "测试物料2", "material_name": "测试物料1",
"material_code": "A1002" "material_code": "A1002"
}, },
{ {
"total_material_qty": 100.0, "total_material_qty": 100.0,
"percentage": "66.67%", "percentage": "66.67%",
"material_id": "1759154624864063488", "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" "material_code": "A1001"
} }
], ],

41
src/pages_960/Setup.vue
View File

@@ -29,8 +29,7 @@ export default {
loginname: '', loginname: '',
password: '', password: '',
baseUrl: this.$store.getters.baseUrl, baseUrl: this.$store.getters.baseUrl,
setTime: this.$store.getters.setTime / 1000, setTime: this.$store.getters.setTime / 1000
fullscreen: false
} }
}, },
methods: { methods: {
@@ -49,17 +48,7 @@ export default {
this.$store.dispatch('setConfig', obj) this.$store.dispatch('setConfig', obj)
this.$router.push('/home') this.$router.push('/home')
let element = document.documentElement let element = document.documentElement
if (this.fullscreen) { if (!(document.fullscreenElement || document.mozFullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement)) {
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 (element.requestFullscreen) { if (element.requestFullscreen) {
element.requestFullscreen() element.requestFullscreen()
} else if (element.webkitRequestFullScreen) { } else if (element.webkitRequestFullScreen) {
@@ -71,7 +60,6 @@ export default {
element.msRequestFullscreen() element.msRequestFullscreen()
} }
} }
this.fullscreen = !this.fullscreen
} }
} }
} }
@@ -95,27 +83,6 @@ export default {
width 500px width 500px
background-color rgba(255, 255, 255, 0.8) background-color rgba(255, 255, 255, 0.8)
border-radius 5px 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 .login_cnt
width 100% width 100%
padding 15px padding 15px
@@ -140,8 +107,6 @@ export default {
border none border none
box-sizing border-box box-sizing border-box
background-color #ffffff background-color #ffffff
.select-wraper
_wh(calc(100% - 116px), 40px)
.submit .submit
width 100% width 100%
background-color #2778f3 background-color #2778f3
@@ -164,6 +129,4 @@ label
font-size 15px font-size 15px
line-height 40px line-height 40px
color #333333 color #333333
.el-select
width 100%
</style> </style>

245
src/pages_960/modules/home/index.vue
View File

@@ -15,7 +15,7 @@
</div> </div>
<div class="content_wraper content_wraper_2"> <div class="content_wraper content_wraper_2">
<div class="pie_wraper"> <div class="pie_wraper">
<div id="home_1" style="width: 100%; height: 100%;"></div> <div ref="echartsRef1" style="width: 100%; height: 100%;"></div>
</div> </div>
</div> </div>
</div> </div>
@@ -25,7 +25,7 @@
</div> </div>
<div class="content_wraper"> <div class="content_wraper">
<div class="w_wraper"> <div class="w_wraper">
<div id="home_2" style="width: 100%; height: 100%;"></div> <div ref="echartsRef2" style="width: 100%; height: 100%;"></div>
</div> </div>
</div> </div>
</div> </div>
@@ -35,7 +35,7 @@
</div> </div>
<div class="content_wraper"> <div class="content_wraper">
<div class="w_wraper"> <div class="w_wraper">
<div id="home_3" style="width: 100%; height: 100%;"></div> <div ref="echartsRef3" style="width: 100%; height: 100%;"></div>
</div> </div>
</div> </div>
</div> </div>
@@ -156,7 +156,7 @@
</div> </div>
<div class="content_wraper"> <div class="content_wraper">
<div class="w_wraper"> <div class="w_wraper">
<div id="home_4" style="width: 100%; height: 100%;"></div> <div ref="echartsRef4" style="width: 100%; height: 100%;"></div>
</div> </div>
</div> </div>
</div> </div>
@@ -166,7 +166,7 @@
</div> </div>
<div class="content_wraper"> <div class="content_wraper">
<div class="w_wraper"> <div class="w_wraper">
<div id="home_5" style="width: 100%; height: 100%;"></div> <div ref="echartsRef5" style="width: 100%; height: 100%;"></div>
</div> </div>
</div> </div>
</div> </div>
@@ -184,9 +184,8 @@ export default {
return { return {
interTime: this.$store.getters.setTime, interTime: this.$store.getters.setTime,
timer: null, timer: null,
chart1Timer: null, // chart2Timer: null,
chart2Timer: null, // chart5Timer: null,
chart5Timer: null,
materList: [], // 原料库存 materList: [], // 原料库存
curList: [], // 当日出入 curList: [], // 当日出入
historyList: [], // 历史分析 historyList: [], // 历史分析
@@ -194,7 +193,12 @@ export default {
loadList: [], // 当日车间上下料 loadList: [], // 当日车间上下料
taskList: [], // 当日搬运任务 taskList: [], // 当日搬运任务
agvList: [], agvList: [],
rgvList: [] rgvList: [],
myChart1: null,
myChart2: null,
myChart3: null,
myChart4: null,
myChart5: null
} }
}, },
computed: { computed: {
@@ -214,28 +218,51 @@ export default {
created () { created () {
this.refresh() this.refresh()
}, },
beforeDestroy () { mounted () {
clearInterval(this.timer) this.myChart1 = this.$echarts.init(this.$refs.echartsRef1)
clearInterval(this.chart1Timer) this.myChart2 = this.$echarts.init(this.$refs.echartsRef2)
clearInterval(this.chart2Timer) this.myChart3 = this.$echarts.init(this.$refs.echartsRef3)
clearInterval(this.chart5Timer) this.myChart4 = this.$echarts.init(this.$refs.echartsRef4)
this.timer = null this.myChart5 = this.$echarts.init(this.$refs.echartsRef5)
this.chart1Timer = null
this.chart2Timer = null
this.chart5Timer = null
}, },
destroyed () { destroyed () {
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) clearInterval(this.timer)
clearInterval(this.chart1Timer)
clearInterval(this.chart2Timer)
clearInterval(this.chart5Timer)
this.timer = null this.timer = null
this.chart1Timer = null }
this.chart2Timer = null // if (this.chart2Timer !== null) {
this.chart5Timer = null // clearInterval(this.chart2Timer)
// this.chart2Timer = null
// }
// if (this.chart5Timer !== null) {
// clearInterval(this.chart5Timer)
// this.chart5Timer = null
// }
}, },
methods: { methods: {
back () { back () {
let flag = !!(document.fullscreenElement || document.mozFullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement)
if (flag) {
if (document.exitFullscreen) { if (document.exitFullscreen) {
document.exitFullscreen() document.exitFullscreen()
} else if (document.webkitCancelFullScreen) { } else if (document.webkitCancelFullScreen) {
@@ -245,6 +272,7 @@ export default {
} else if (document.msExitFullscreen) { } else if (document.msExitFullscreen) {
document.msExitFullscreen() document.msExitFullscreen()
} }
}
this.$router.push('/setup') this.$router.push('/setup')
}, },
refresh () { refresh () {
@@ -255,12 +283,14 @@ export default {
}, },
async _getAllBigScreen () { async _getAllBigScreen () {
let res = await getAllBigScreen() let res = await getAllBigScreen()
clearInterval(this.chart1Timer) // if (this.chart2Timer !== null) {
clearInterval(this.chart2Timer) // clearInterval(this.chart2Timer)
clearInterval(this.chart5Timer) // this.chart2Timer = null
this.chart1Timer = null // }
this.chart2Timer = null // if (this.chart5Timer !== null) {
this.chart5Timer = null // clearInterval(this.chart5Timer)
// this.chart5Timer = null
// }
this.materList = [...res.inventoryAnalysis] this.materList = [...res.inventoryAnalysis]
this.curList = [...res.inventoryIOAnalysis] this.curList = [...res.inventoryIOAnalysis]
this.historyList = [...res.historyInventoryIOAnalysis] this.historyList = [...res.historyInventoryIOAnalysis]
@@ -276,7 +306,7 @@ export default {
this.setEchart5() this.setEchart5()
}, },
setEchart1 () { 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 seriesData = []
let seriesName = [] let seriesName = []
this.materList.map((e, i) => { this.materList.map((e, i) => {
@@ -300,10 +330,8 @@ export default {
containLabel: true containLabel: true
}, },
title: { title: {
x: '22%', x: '16%',
y: '38%', y: '35%',
width: '200',
height: '40',
text: '总数', text: '总数',
subtext: total, subtext: total,
textAlign: 'center', textAlign: 'center',
@@ -320,38 +348,25 @@ export default {
}, },
legend: { legend: {
show: true, show: true,
type: 'scroll', // type: 'scroll',
orient: 'vertical', orient: 'vertical',
left: '55%', right: 0,
top: 10, bottom: 0,
bottom: 10, itemGap: 6,
itemGap: 9,
icon: 'rect', icon: 'rect',
itemWidth: 4, itemWidth: 4,
itemHeight: 4, itemHeight: 4,
data: seriesName, data: seriesName,
formatter: (name) => { formatter: (name) => {
let qty const item = seriesData.filter((item) => item.name === name)[0]
let percentage return `{a|${name}}\n{b| ${item.value + '}'}`
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(' ')
}, },
textStyle: { textStyle: {
rich: { rich: {
a: { a: {
fontSize: 8, fontSize: 8,
lineHeight: 10, lineHeight: 10,
padding: [10, 0, 0, 0], padding: [0, 0, 0, 0],
wordWrap: 'break-word', wordWrap: 'break-word',
color: '#9BB9DD', color: '#9BB9DD',
align: 'left' align: 'left'
@@ -359,31 +374,18 @@ export default {
b: { b: {
fontSize: 8, fontSize: 8,
lineHeight: 10, lineHeight: 10,
padding: [10, 0, 0, -10], padding: [0, 0, 0, 0],
color: '#DFECFB', color: '#DFECFB',
align: 'left' 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: [{ series: [{
name: '库存量监控', name: '库存量监控',
type: 'pie', type: 'pie',
radius: ['61%', '69%'], radius: ['50%', '60%'],
center: ['24.5%', '49%'], center: ['19%', '50%'],
labelLine: { labelLine: {
show: false show: false
}, },
@@ -402,27 +404,7 @@ export default {
data: seriesData data: seriesData
}] }]
} }
if (document.getElementById('home_1') == null) { this.myChart1.setOption(option, true)
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()
})
}, },
setEchart2 () { setEchart2 () {
let barName = [] let barName = []
@@ -554,25 +536,17 @@ export default {
} }
] ]
} }
if (document.getElementById('home_2') == null) { this.myChart2.setOption(option, true)
return // this.chart2Timer = setInterval(() => {
} // if (option.dataZoom[0].endValue >= barData1.length - 1) {
this.$echarts.dispose(document.getElementById('home_2')) // option.dataZoom[0].endValue = 3
let echart = this.$echarts.init(document.getElementById('home_2')) // option.dataZoom[0].startValue = 0
echart.setOption(option) // } else {
this.chart2Timer = setInterval(() => { // option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
if (option.dataZoom[0].endValue >= barData1.length - 1) { // option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1
option.dataZoom[0].endValue = 3 // }
option.dataZoom[0].startValue = 0 // this.myChart2.setOption(option, true)
} else { // }, 2000)
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()
})
}, },
setEchart3 () { setEchart3 () {
let total = 0 let total = 0
@@ -730,12 +704,7 @@ export default {
} }
] ]
} }
if (document.getElementById('home_3') == null) { this.myChart3.setOption(option, true)
return
}
this.$echarts.dispose(document.getElementById('home_3'))
let echart = this.$echarts.init(document.getElementById('home_3'))
echart.setOption(option)
}, },
setEchart4 () { setEchart4 () {
let xAxisData = [] let xAxisData = []
@@ -820,15 +789,7 @@ export default {
} }
] ]
} }
if (document.getElementById('home_4') == null) { this.myChart4.setOption(option, true)
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()
})
}, },
setEchart5 () { setEchart5 () {
let attaData1 = [] let attaData1 = []
@@ -972,25 +933,17 @@ export default {
} }
] ]
} }
if (document.getElementById('home_5') == null) { this.myChart5.setOption(option, true)
return // this.chart5Timer = setInterval(() => {
} // if (option.dataZoom[0].endValue >= ydata.length - 1) {
this.$echarts.dispose(document.getElementById('home_5')) // option.dataZoom[0].endValue = 7
let echart = this.$echarts.init(document.getElementById('home_5')) // option.dataZoom[0].startValue = 0
echart.setOption(option) // } else {
this.chart5Timer = setInterval(() => { // option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
if (option.dataZoom[0].endValue >= ydata.length - 1) { // option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1
option.dataZoom[0].endValue = 7 // }
option.dataZoom[0].startValue = 0 // this.myChart5.setOption(option, true)
} else { // }, 2000)
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()
})
} }
} }
} }

1001
src/pages_960/modules/home/index_back.vue Normal file
View File

File diff suppressed because it is too large Load Diff

4
src/pages_960/modules/home/style.stylus
View File

@@ -80,8 +80,8 @@
.pie_wraper .pie_wraper
width 100% width 100%
height 100% height 100%
padding 1px 0 0 1px // padding 1px 0 0 1px
background left center / 111px 111px url('../../../images/pie-bg_2_s.png') no-repeat // background left center / 111px 111px url('../../../images/pie-bg_2_s.png') no-repeat
.pie_legend .pie_legend
width calc(100% - 200px) width calc(100% - 200px)
height 100% height 100%