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

change

Browse Source
This commit is contained in:
caill
2022-08-01 11:16:17 +08:00
parent 42ec1e6f39
commit 79bbac67da
5 changed files with 573 additions and 538 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/assets/css/reset.css
View File

@@ -80,12 +80,12 @@ li {
} }
html, body { html, body {
/* width: 1920px; width: 1920px;
height: 1080px; */ height: 1080px;
width: 100%; /* width: 100%;
height: 100%; height: 100%;
min-width: 1440px; min-width: 1440px;
min-height: 1080px; min-height: 1080px; */
} }
body { body {

4
src/components/header.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<header> <header>
<p>海亮铜管智能车间生产监控中心</p> <p>{{title}}</p>
<div class="data_box clearfix"> <div class="data_box clearfix">
<div class="date_item date">{{date}}</div> <div class="date_item date">{{date}}</div>
<div class="date_item week">{{week}}</div> <div class="date_item week">{{week}}</div>
@@ -12,6 +12,7 @@
<div class="tiem_item seconds">{{seconds}}</div> <div class="tiem_item seconds">{{seconds}}</div>
</div> </div>
</div> </div>
<slot></slot>
</header> </header>
</template> </template>
@@ -67,6 +68,7 @@ export default {
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~@css/mixin' @import '~@css/mixin'
header header
position relative
width 100% width 100%
height 1rem height 1rem
position relative position relative

17
src/pages/DeviceScreen.vue
View File

@@ -1,19 +1,4 @@
<template> <template>
<section class="bg">
<header>
<p>海亮铜管智能车间设备监控中心</p>
<div class="data_box clearfix">
<div class="date_item date">{{date}}</div>
<div class="date_item week">{{week}}</div>
<div class="date_item time clearfix">
<div class="tiem_item hours">{{hours}}</div>
<div class="colon">:</div>
<div class="tiem_item minutes">{{minutes}}</div>
<div class="colon">:</div>
<div class="tiem_item seconds">{{seconds}}</div>
</div>
</div>
</header>
<div class="container"> <div class="container">
<div class="left_wrap"> <div class="left_wrap">
<div class="item_wrap"> <div class="item_wrap">
@@ -225,8 +210,6 @@
</div> </div>
</div> </div>
</div> </div>
<section class="bottom"></section>
</section>
</template> </template>
<script> <script>

38
src/pages/HomeScreen.vue
View File

@@ -1,16 +1,21 @@
<template> <template>
<section class="box"> <section class="box">
<t-header :title="title1">
<p class="p1" @click="toJump">{{title2}}</p>
</t-header>
<Monitoring-Screen v-if="page === 'two'"></Monitoring-Screen> <Monitoring-Screen v-if="page === 'two'"></Monitoring-Screen>
<Device-Screen v-if="page === 'one'"></Device-Screen> <Device-Screen v-if="page === 'one'"></Device-Screen>
</section> </section>
</template> </template>
<script> <script>
import THeader from '@components/header.vue'
import MonitoringScreen from './MonitoringScreen.vue' import MonitoringScreen from './MonitoringScreen.vue'
import DeviceScreen from './DeviceScreen.vue' import DeviceScreen from './DeviceScreen.vue'
export default { export default {
name: 'HomeScreen', name: 'HomeScreen',
components: { components: {
THeader,
MonitoringScreen, MonitoringScreen,
DeviceScreen DeviceScreen
}, },
@@ -21,14 +26,38 @@ export default {
iTime: this.$store.getters.setTime1 iTime: this.$store.getters.setTime1
} }
}, },
computed: {
title1 () {
let t = ''
t = this.page === 'one' ? '海亮铜管智能车间设备监控中心' : '海亮铜管智能车间生产监控中心'
return t
},
title2 () {
let t = ''
t = this.page === 'two' ? '海亮铜管智能车间设备监控中心' : '海亮铜管智能车间生产监控中心'
return t
}
},
mounted () { mounted () {
this.swipePage() this.swipePage()
}, },
beforeDestroy () {
this.$once('hook:beforeDestroy', () => {
clearInterval(this.timer)
})
},
methods: { methods: {
swipePage () { swipePage () {
this.timer = setInterval(() => { this.timer = setInterval(() => {
this.page = this.page === 'one' ? 'two' : 'one' this.page = this.page === 'one' ? 'two' : 'one'
}, this.iTime) }, this.iTime)
},
toJump () {
window.clearInterval(this.timer)
this.page = this.page === 'one' ? 'two' : 'one'
setTimeout(() => {
this.swipePage()
}, 2000)
} }
} }
} }
@@ -39,4 +68,13 @@ export default {
.box .box
_wh(100%, 100%) _wh(100%, 100%)
overflow hidden overflow hidden
.p1
position absolute
display block
cursor pointer
left .2509rem
top .22rem
font-family "SourceHanSansCN"
_font(.18rem, .30rem, #fff, 700,)
letter-spacing .01rem
</style> </style>

126
src/pages/MonitoringScreen.vue
View File

@@ -1,6 +1,4 @@
<template> <template>
<section class="bg">
<t-header title="海亮铜管智能车间生产监控中心"></t-header>
<div class="container"> <div class="container">
<div class="left_wrap"> <div class="left_wrap">
<div class="item_wrap"> <div class="item_wrap">
@@ -135,6 +133,8 @@
<div class="scroll_wrap"> <div class="scroll_wrap">
<ul class="scroll_tab_1"> <ul class="scroll_tab_1">
<li>工单号</li> <li>工单号</li>
<li>物料编码</li>
<li>物料规格</li>
<li>计划完成</li> <li>计划完成</li>
<li>实际完成</li> <li>实际完成</li>
<li>差距</li> <li>差距</li>
@@ -146,10 +146,12 @@
<ul class="scroll-ul_1"> <ul class="scroll-ul_1">
<li v-for="(e, i) in array1" :key="i"> <li v-for="(e, i) in array1" :key="i">
<div class="scroll-ul_1_div">{{e.produceorder_code}}</div> <div class="scroll-ul_1_div">{{e.produceorder_code}}</div>
<div class="scroll-ul_1_div">{{e.material_code}}</div>
<div class="scroll-ul_1_div">{{e.material_spec}}</div>
<div class="scroll-ul_1_div">{{e.plan_qty}}</div> <div class="scroll-ul_1_div">{{e.plan_qty}}</div>
<div class="scroll-ul_1_div">{{e.real_qty}}</div> <div class="scroll-ul_1_div">{{e.real_qty}}</div>
<div class="scroll-ul_1_div">{{e.gap_qty}}</div> <div class="scroll-ul_1_div">{{e.gap_qty}}</div>
<div class="scroll-ul_1_div">{{e.finish_rate | numFixed(1)}}</div> <div class="scroll-ul_1_div">{{e.finish_rate | numFixed(1)}}%</div>
<div class="scroll-ul_1_div"> <div class="scroll-ul_1_div">
<div class="progress_line_wrap"> <div class="progress_line_wrap">
<div class="progress_dot_wrap"> <div class="progress_dot_wrap">
@@ -170,7 +172,7 @@
</div> </div>
<div class="item_content_2"> <div class="item_content_2">
<div class="scroll_wrap"> <div class="scroll_wrap">
<ul class="scroll_tab_1"> <ul class="scroll_tab_1 scroll_tab_2">
<li>订单号</li> <li>订单号</li>
<li>产品编号</li> <li>产品编号</li>
<li>产品规格</li> <li>产品规格</li>
@@ -180,7 +182,7 @@
</ul> </ul>
<div class="scroll_container_1"> <div class="scroll_container_1">
<vue-seamless-scroll :data="array2" :class-option="defaultOption1"> <vue-seamless-scroll :data="array2" :class-option="defaultOption1">
<ul class="scroll-ul_1"> <ul class="scroll-ul_1 scroll-ul_2">
<li v-for="(e, i) in array2" :key="i"> <li v-for="(e, i) in array2" :key="i">
<div class="scroll-ul_1_div">{{e.produceorder_code}}</div> <div class="scroll-ul_1_div">{{e.produceorder_code}}</div>
<div class="scroll-ul_1_div">{{e.material_code}}</div> <div class="scroll-ul_1_div">{{e.material_code}}</div>
@@ -309,8 +311,6 @@
</div> </div>
</div> </div>
</div> </div>
<section class="bottom"></section>
</section>
</template> </template>
<script> <script>
@@ -425,7 +425,7 @@ export default {
}) })
let option = { let option = {
grid: { grid: {
top: this.fontSize(50), top: 50,
left: 0, left: 0,
right: 0, right: 0,
bottom: 0, bottom: 0,
@@ -435,22 +435,22 @@ export default {
icon: 'rect', icon: 'rect',
textStyle: { textStyle: {
color: '#fff', color: '#fff',
fontSize: this.fontSize(14), fontSize: 14,
lineHeight: this.fontSize(14) lineHeight: 14
}, },
itemGap: this.fontSize(30.86), itemGap: 30.86,
itemWidth: this.fontSize(14.16), itemWidth: 14.16,
itemHeight: this.fontSize(7.38), itemHeight: 7.38,
data: [{name: '弯头工段', itemStyle: {color: '#0E90FD'}}, {name: '综合工段', itemStyle: {color: '#33CCCC'}}, {name: '成品工段', itemStyle: {color: '#EAAD24'}}] data: [{name: '弯头工段', itemStyle: {color: '#0E90FD'}}, {name: '综合工段', itemStyle: {color: '#33CCCC'}}, {name: '成品工段', itemStyle: {color: '#EAAD24'}}]
}, },
dataZoom: [ // dataZoom: [
{ // {
show: false, // 为true滚动条出现 // show: false, // 为true滚动条出现
type: 'slider', // type:'inside'，滚动条在最下面，鼠标点击滚动 // type: 'slider', // type:'inside'，滚动条在最下面，鼠标点击滚动
startValue: 0, // 从头开始。 // startValue: 0, // 从头开始。
endValue: 4 // end百分比显示范围，endValue具体显示几个数值 // endValue: 4 // end百分比显示范围，endValue具体显示几个数值
} // }
], // ],
xAxis: { xAxis: {
type: 'category', type: 'category',
axisTick: { axisTick: {
@@ -467,8 +467,9 @@ export default {
interval: 0, interval: 0,
textStyle: { textStyle: {
color: '#8FABBF', color: '#8FABBF',
fontSize: this.fontSize(16) fontSize: 16
} },
rotate: 50
}, },
data: date data: date
}, },
@@ -484,7 +485,7 @@ export default {
axisLabel: { axisLabel: {
textStyle: { textStyle: {
color: '#8FABBF', color: '#8FABBF',
fontSize: this.fontSize(14) fontSize: 14
} }
}, },
splitLine: { splitLine: {
@@ -568,7 +569,7 @@ export default {
let echart = document.getElementById('echart_d1') let echart = document.getElementById('echart_d1')
this.myCharts1 = this.$echarts.init(echart) this.myCharts1 = this.$echarts.init(echart)
this.myCharts1.setOption(option) this.myCharts1.setOption(option)
this.autoMove(option, 1) // this.autoMove(option, 1)
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
this.myCharts1.resize() this.myCharts1.resize()
}) })
@@ -582,9 +583,9 @@ export default {
}) })
let option = { let option = {
grid: { grid: {
top: this.fontSize(50), top: 50,
left: 0, left: 0,
right: this.fontSize(25), right: 25,
bottom: 0, bottom: 0,
containLabel: true containLabel: true
}, },
@@ -593,7 +594,7 @@ export default {
show: false, // 为true滚动条出现 show: false, // 为true滚动条出现
type: 'slider', // type:'inside'，滚动条在最下面，鼠标点击滚动 type: 'slider', // type:'inside'，滚动条在最下面，鼠标点击滚动
startValue: 0, // 从头开始。 startValue: 0, // 从头开始。
endValue: 5 // end百分比显示范围，endValue具体显示几个数值 endValue: 9 // end百分比显示范围，endValue具体显示几个数值
} }
], ],
xAxis: { xAxis: {
@@ -613,9 +614,10 @@ export default {
interval: 0, interval: 0,
textStyle: { textStyle: {
color: '#8FABBF', color: '#8FABBF',
fontSize: this.fontSize(16), fontSize: 16
align: 'center' // align: 'center'
} },
rotate: 50
}, },
data: date data: date
}, },
@@ -631,7 +633,7 @@ export default {
axisLabel: { axisLabel: {
textStyle: { textStyle: {
color: '#8FABBF', color: '#8FABBF',
fontSize: this.fontSize(14) fontSize: 14
} }
}, },
splitLine: { splitLine: {
@@ -699,7 +701,7 @@ export default {
} else if (type === 2) { } else if (type === 2) {
this.timeOut2 = setInterval(() => { this.timeOut2 = setInterval(() => {
if (Number(option.dataZoom[0].endValue) === option.series[0].data.length - 1) { if (Number(option.dataZoom[0].endValue) === option.series[0].data.length - 1) {
option.dataZoom[0].endValue = 5 option.dataZoom[0].endValue = 9
option.dataZoom[0].startValue = 0 option.dataZoom[0].startValue = 0
} else { } else {
option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1 option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
@@ -710,7 +712,7 @@ export default {
} }
}, },
setEchart3 () { setEchart3 () {
let value = parseFloat(this.objL1.finish_rate) let value = Number(this.objL1.finish_rate)
let title = '%' let title = '%'
let text = '完成率' let text = '完成率'
let option = { let option = {
@@ -722,24 +724,24 @@ export default {
textStyle: { textStyle: {
rich: { rich: {
a: { a: {
fontSize: this.fontSize(26), fontSize: 26,
color: '#00D9FF', color: '#00D9FF',
fontFamily: 'SourceHanSansCN', fontFamily: 'SourceHanSansCN',
foontWeight: '700' foontWeight: '700'
}, },
b: { b: {
fontSize: this.fontSize(16), fontSize: 16,
color: '#ffffff', color: '#ffffff',
fontFamily: 'SourceHanSansCN', fontFamily: 'SourceHanSansCN',
foontWeight: '700', foontWeight: '700',
padding: [this.fontSize(10), 0, 0, this.fontSize(3)] padding: [10, 0, 0, 3]
}, },
c: { c: {
color: '#FFFFFF', color: '#FFFFFF',
fontSize: this.fontSize(13), fontSize: 13,
fontWeight: '700', fontWeight: '700',
fontFamily: 'SourceHanSansCN', fontFamily: 'SourceHanSansCN',
padding: [this.fontSize(10), 0, 0, 0] padding: [10, 0, 0, 0]
} }
} }
} }
@@ -793,28 +795,22 @@ export default {
}, },
setEchart4 () { setEchart4 () {
let arr = [] let arr = []
let colors = []
this.arrR1.map(el => { this.arrR1.map(el => {
arr.push(el.real_qty) arr.push({name: el.material_spec, value: parseFloat(el.real_qty), itemStyle: {color: el.color}})
colors.push(el.color)
}) })
var option = { var option = {
tooltip: { tooltip: {
trigger: 'item' trigger: 'item'
}, },
color: colors,
series: [ series: [
{ {
name: '区域', name: '区域',
type: 'pie', type: 'pie',
radius: ['70%', '95%'], radius: ['70%', '95%'],
center: ['50%', '50%'], center: ['50%', '50%'],
left: 0, roseType: 'radius',
roseType: 'area',
avoidLabelOverlap: false,
label: { label: {
show: false, show: false
position: 'center'
}, },
labelLine: { labelLine: {
show: false show: false
@@ -1040,7 +1036,7 @@ export default {
border-bottom .01rem solid rgba(8,205,248,0.3) border-bottom .01rem solid rgba(8,205,248,0.3)
li li
float left float left
width 15% width 12%
_font(.14rem,.4rem,#78B1DE,,center) _font(.14rem,.4rem,#78B1DE,,center)
word-wrap break-word word-wrap break-word
word-break break-all word-break break-all
@@ -1048,8 +1044,12 @@ export default {
padding 0 .02rem padding 0 .02rem
overflow hidden overflow hidden
box-sizing border-box box-sizing border-box
&:nth-child(6) &:nth-child(8)
width 25% width 16%
.scroll_tab_2 li
width 17%
&:first-child
width 15%
.scroll_container_1 .scroll_container_1
width 100% width 100%
height calc(100% - .4rem) height calc(100% - .4rem)
@@ -1063,7 +1063,7 @@ export default {
box-shadow inset 0px 1px 0px 0px rgba(13,89,115,0.3) box-shadow inset 0px 1px 0px 0px rgba(13,89,115,0.3)
.scroll-ul_1_div .scroll-ul_1_div
float left float left
_wh(15%, .44rem) _wh(12%, .44rem)
_fj(center) _fj(center)
_font(.14rem, .44rem, #fff,,center) _font(.14rem, .44rem, #fff,,center)
word-wrap break-word word-wrap break-word
@@ -1071,8 +1071,12 @@ export default {
white-space nowrap white-space nowrap
padding 0 .02rem padding 0 .02rem
overflow hidden overflow hidden
&:nth-child(6) &:nth-child(8)
width 25% width 16%
.scroll-ul_2 li .scroll-ul_1_div
width 17%
&:first-child
width 15%
.progress_line_wrap .progress_line_wrap
position relative position relative
_wh(1.35rem, .03rem) _wh(1.35rem, .03rem)
@@ -1169,25 +1173,33 @@ export default {
_wh(.0725rem, .3rem) _wh(.0725rem, .3rem)
margin-left .15rem margin-left .15rem
_fj() _fj()
overflow hidden
i i
display block display block
_wh(.0725rem, .0725rem) _wh(.0725rem, .0725rem)
border-radius 100% border-radius 100%
&:nth-child(2) &:nth-child(2)
_wh(calc(100% - 0.2825rem), .3rem)
font-family "SourceHanSansCN" font-family "SourceHanSansCN"
_font(.12rem, .3rem, #fff,400,) _font(.12rem, .3rem, #fff,400,)
margin-left .06rem margin-left .06rem
overflow hidden
text-overflow ellipsis
white-space nowrap
.right_1_down_inner_3_r .right_1_down_inner_3_r
_wh(50%, 100%) _wh(50%, 100%)
line-height .3rem line-height .3rem
overflow hidden overflow hidden
text-align center text-align right
span span
font-family "SourceHanSansCN" font-family "SourceHanSansCN"
_font(.12rem, .3rem, #fff,700,) _font(.12rem, .3rem, #fff,700,)
&:nth-child(1) &:nth-child(1)
font-family "SourceHanSansCN" font-family "SourceHanSansCN"
_font(.18rem, .3rem, #00D5FF,700,) _font(.18rem, .3rem, #00D5FF,700,)
overflow hidden
text-overflow ellipsis
white-space nowrap
.item_content_4 .item_content_4
_wh(100%, calc(100% - .32rem)) _wh(100%, calc(100% - .32rem))
padding .1rem 0 .2rem padding .1rem 0 .2rem
@@ -1234,10 +1246,10 @@ export default {
clear both clear both
.item_5_l .item_5_l
float left float left
_wh(1.83rem, 100%) _wh(50%, 100%)
.item_5_r .item_5_r
float right float right
_wh(1.83rem, 100%) _wh(50%, 100%)
_fj() _fj()
flex-direction column flex-direction column
.item_5_l_1 .item_5_l_1