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