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 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" /> -->
<title>车间物料监控</title>
<title>上电科车间物料监控</title>
</head>
<body class="clearfix">
<div id="app"></div>

60
src/config/mork2.js
View File

@@ -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"
}
],

41
src/pages_960/Setup.vue
View File

@@ -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%
</style>

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

@@ -15,7 +15,7 @@
</div>
<div class="content_wraper content_wraper_2">
<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>
@@ -25,7 +25,7 @@
</div>
<div class="content_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>
@@ -35,7 +35,7 @@
</div>
<div class="content_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>
@@ -156,7 +156,7 @@
</div>
<div class="content_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>
@@ -166,7 +166,7 @@
</div>
<div class="content_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>
@@ -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)
}
}
}

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
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%