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

大屏1

Browse Source
This commit is contained in:
caill
2022-07-29 11:24:08 +08:00
parent 4c60004371
commit 485b3ea4b4
1 changed files with 40 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/pages/MonitoringScreen1.vue
View File

@@ -18,8 +18,8 @@
<div class="left_wrap"> <div class="left_wrap">
<div class="item_wrap"> <div class="item_wrap">
<div class="item_tip"> <div class="item_tip">
<div class="item_tip_left">计划达成</div> <div class="item_tip_left" style="width: 40%">计划达成</div>
<div class="item_tip_right"> <div class="item_tip_right" style="width: 60%">
<span :class="{'span1': swiper === true}">日计划达成</span><span :class="{'span1': swiper === false}">/月计划达成</span> <span :class="{'span1': swiper === true}">日计划达成</span><span :class="{'span1': swiper === false}">/月计划达成</span>
</div> </div>
</div> </div>
@@ -142,7 +142,7 @@
<div class="center_wrap"> <div class="center_wrap">
<div class="item_wrap_2"> <div class="item_wrap_2">
<div class="item_tip item_tip_2"> <div class="item_tip item_tip_2">
<div class="item_tip_left">近30天产量走势</div> <div class="item_tip_left">今日排产生产进度跟踪</div>
</div> </div>
<div class="item_content_2"> <div class="item_content_2">
<div class="scroll_wrap"> <div class="scroll_wrap">
@@ -162,7 +162,7 @@
<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}}</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">
@@ -361,7 +361,8 @@ export default {
array2: [], array2: [],
array3: [], array3: [],
objL1: {}, objL1: {},
arrR1: [] arrR1: [],
docState: 'saved'
} }
}, },
computed: { computed: {
@@ -461,7 +462,7 @@ export default {
}) })
let option = { let option = {
grid: { grid: {
top: 50, top: this.fontSize(50),
left: 0, left: 0,
right: 0, right: 0,
bottom: 0, bottom: 0,
@@ -471,12 +472,12 @@ export default {
icon: 'rect', icon: 'rect',
textStyle: { textStyle: {
color: '#fff', color: '#fff',
fontSize: 14, fontSize: this.fontSize(14),
lineHeight: 14 lineHeight: this.fontSize(14)
}, },
itemGap: 30.86, itemGap: this.fontSize(30.86),
itemWidth: 14.16, itemWidth: this.fontSize(14.16),
itemHeight: 7.38, itemHeight: this.fontSize(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: [
@@ -503,7 +504,7 @@ export default {
interval: 0, interval: 0,
textStyle: { textStyle: {
color: '#8FABBF', color: '#8FABBF',
fontSize: 16 fontSize: this.fontSize(16)
} }
}, },
data: date data: date
@@ -520,7 +521,7 @@ export default {
axisLabel: { axisLabel: {
textStyle: { textStyle: {
color: '#8FABBF', color: '#8FABBF',
fontSize: 14 fontSize: this.fontSize(14)
} }
}, },
splitLine: { splitLine: {
@@ -618,9 +619,9 @@ export default {
}) })
let option = { let option = {
grid: { grid: {
top: 50, top: this.fontSize(50),
left: 0, left: 0,
right: 0, right: this.fontSize(25),
bottom: 0, bottom: 0,
containLabel: true containLabel: true
}, },
@@ -629,7 +630,7 @@ export default {
show: false, // 为true滚动条出现 show: false, // 为true滚动条出现
type: 'slider', // type:'inside'，滚动条在最下面，鼠标点击滚动 type: 'slider', // type:'inside'，滚动条在最下面，鼠标点击滚动
startValue: 0, // 从头开始。 startValue: 0, // 从头开始。
endValue: 4 // end百分比显示范围，endValue具体显示几个数值 endValue: 5 // end百分比显示范围，endValue具体显示几个数值
} }
], ],
xAxis: { xAxis: {
@@ -649,8 +650,8 @@ export default {
interval: 0, interval: 0,
textStyle: { textStyle: {
color: '#8FABBF', color: '#8FABBF',
fontSize: 16, fontSize: this.fontSize(16),
align: 'left' align: 'center'
} }
}, },
data: date data: date
@@ -667,7 +668,7 @@ export default {
axisLabel: { axisLabel: {
textStyle: { textStyle: {
color: '#8FABBF', color: '#8FABBF',
fontSize: 14 fontSize: this.fontSize(14)
} }
}, },
splitLine: { splitLine: {
@@ -735,7 +736,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 = 4 option.dataZoom[0].endValue = 5
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
@@ -758,24 +759,24 @@ export default {
textStyle: { textStyle: {
rich: { rich: {
a: { a: {
fontSize: 32, fontSize: this.fontSize(26),
color: '#00D9FF', color: '#00D9FF',
fontFamily: 'SourceHanSansCN', fontFamily: 'SourceHanSansCN',
foontWeight: '700' foontWeight: '700'
}, },
b: { b: {
fontSize: 16, fontSize: this.fontSize(16),
color: '#ffffff', color: '#ffffff',
fontFamily: 'SourceHanSansCN', fontFamily: 'SourceHanSansCN',
foontWeight: '700', foontWeight: '700',
padding: [10, 0, 0, 5] padding: [this.fontSize(10), 0, 0, this.fontSize(3)]
}, },
c: { c: {
color: '#FFFFFF', color: '#FFFFFF',
fontSize: 13, fontSize: this.fontSize(13),
fontWeight: '700', fontWeight: '700',
fontFamily: 'SourceHanSansCN', fontFamily: 'SourceHanSansCN',
padding: [10, 0, 0, 0] padding: [this.fontSize(10), 0, 0, 0]
} }
} }
} }
@@ -866,6 +867,12 @@ export default {
this.myCharts4.resize() this.myCharts4.resize()
}) })
}, },
fontSize (res) {
const clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
if (!clientWidth) return
let fontSize = clientWidth * res / 1920
return fontSize
},
/** 左一 */ /** 左一 */
async _planReached () { async _planReached () {
let res = await planReached() let res = await planReached()
@@ -1292,19 +1299,22 @@ header
clear both clear both
.item_5_l .item_5_l
float left float left
_wh(1.83rem, .3rem) _wh(1.83rem, 100%)
.item_5_r .item_5_r
float right float right
_wh(1.83rem, .3rem) _wh(1.83rem, 100%)
_fj()
flex-direction column
.right_1_down_inner_3_i .right_1_down_inner_3_i
margin-bottom .045rem margin-bottom .045rem
.item_5_l_1 .item_5_l_1
_wh(100%, 1.42rem) _wh(100%, 60%)
background right center / .02rem 100% url(../assets/images/screen1/line_3.png) no-repeat background right center / .02rem 100% url(../assets/images/screen1/line_3.png) no-repeat
.item_5_l_2 .item_5_l_2
_wh(100%, calc(100% - 1.42rem)) _wh(100%, 40%)
.right_1_down_inner_3_i .right_1_down_inner_3_i
margin-bottom .03rem &:nth-child(1), &:nth-child(2)
margin-bottom 5%
.color1 .color1
background-color #07E083 background-color #07E083
.color2 .color2