样式
This commit is contained in:
@@ -79,14 +79,14 @@ li {
|
|||||||
-webkit-border-radius: 6px;
|
-webkit-border-radius: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 马钢大屏尺寸1920*1200 */
|
/* 马钢大屏尺寸1920*1080 */
|
||||||
html, body {
|
html, body {
|
||||||
/* width: 100%;
|
/* width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
min-width: 1440px;
|
min-width: 1440px;
|
||||||
min-height: 1040px; */
|
min-height: 1040px; */
|
||||||
width: 1920px;
|
width: 1920px;
|
||||||
height: 1200px;
|
height: 1080px;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
|||||||
@@ -6,8 +6,8 @@
|
|||||||
<div class="con1">
|
<div class="con1">
|
||||||
<div class="cbox">
|
<div class="cbox">
|
||||||
<div>当前班次:</div>
|
<div>当前班次:</div>
|
||||||
<div class="num">
|
<div class="num" style="color: #f7b502; font-size: 0.46rem; letter-spacing: 15px;">
|
||||||
<div class="bg" v-for="(item, i) in showNum1" :key="i" :class="{dot: item === '.'}">{{item}}</div>
|
白班
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="cbox">
|
<div class="cbox">
|
||||||
@@ -35,14 +35,14 @@
|
|||||||
<div class="center_wrapper" style="display:flex">
|
<div class="center_wrapper" style="display:flex">
|
||||||
<div class="con2">
|
<div class="con2">
|
||||||
<div class="title"><span class="dotIncon"></span><span class="tltxt">当班生产</span></div>
|
<div class="title"><span class="dotIncon"></span><span class="tltxt">当班生产</span></div>
|
||||||
<div class="item_content_1">
|
<div class="item_content_0">
|
||||||
<div id="two_echart_06" style="width: 100%; height: 100%"></div>
|
<div id="echart_d1" style="width: 100%; height: 100%"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="con3">
|
<div class="con3">
|
||||||
<div class="title"><span class="dotIncon"></span><span class="tltxt">人员月生产量</span></div>
|
<div class="title"><span class="dotIncon"></span><span class="tltxt">人员月生产量</span></div>
|
||||||
<div class="item_content_1">
|
<div class="item_content_1">
|
||||||
<div id="echart_d3" style="width: 100%; height: 100%"></div>
|
<div id="echart_d2" style="width: 100%; height: 100%"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -85,8 +85,8 @@ export default {
|
|||||||
showNum3: '',
|
showNum3: '',
|
||||||
showNum4: '333',
|
showNum4: '333',
|
||||||
showNum5: '333',
|
showNum5: '333',
|
||||||
myCharts03: '',
|
myCharts02: '',
|
||||||
myCharts06: '',
|
myCharts01: '',
|
||||||
materData: [],
|
materData: [],
|
||||||
deviceData: [],
|
deviceData: [],
|
||||||
arr3: [
|
arr3: [
|
||||||
@@ -111,7 +111,7 @@ export default {
|
|||||||
device_fault_num: '120'
|
device_fault_num: '120'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
echartData06: [
|
echartData01: [
|
||||||
{
|
{
|
||||||
material_code: '压机1',
|
material_code: '压机1',
|
||||||
region_in_qty: '150',
|
region_in_qty: '150',
|
||||||
@@ -189,15 +189,15 @@ export default {
|
|||||||
this.showNum4 = res.pressProduction.dailyProductionQty
|
this.showNum4 = res.pressProduction.dailyProductionQty
|
||||||
this.showNum5 = res.pressProduction.dailyProductionWeight
|
this.showNum5 = res.pressProduction.dailyProductionWeight
|
||||||
this.workOrder = [...res.workOrder]
|
this.workOrder = [...res.workOrder]
|
||||||
this.setEchart06()
|
this.setEchart01()
|
||||||
this.setEchart3()
|
this.setEchart02()
|
||||||
},
|
},
|
||||||
setEchart06 () {
|
setEchart01 () {
|
||||||
let data1 = []
|
let data1 = []
|
||||||
let data2 = []
|
let data2 = []
|
||||||
let data3 = []
|
let data3 = []
|
||||||
let device = []
|
let device = []
|
||||||
this.echartData06.map(e => {
|
this.echartData01.map(e => {
|
||||||
data1.push(e.region_in_qty)
|
data1.push(e.region_in_qty)
|
||||||
data2.push(e.region_out_qty)
|
data2.push(e.region_out_qty)
|
||||||
data3.push(e.inventory_qty)
|
data3.push(e.inventory_qty)
|
||||||
@@ -213,15 +213,16 @@ export default {
|
|||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
icon: 'rect',
|
icon: 'rect',
|
||||||
|
// right: 0,
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: '#fff',
|
color: '#fff',
|
||||||
fontSize: 14,
|
fontSize: 14,
|
||||||
lineHeight: 14
|
lineHeight: 14
|
||||||
},
|
},
|
||||||
itemGap: 10.86,
|
itemGap: 40.86,
|
||||||
itemWidth: 10.16,
|
itemWidth: 20.16,
|
||||||
itemHeight: 7.38,
|
itemHeight: 7.38,
|
||||||
data: [{name: '入库数量(块)', itemStyle: {color: '#33CCCC'}}, {name: '出库数量(块)', itemStyle: {color: '#EAAD24'}}, {name: '库存数量(块)', itemStyle: {color: '#0E90FD'}}]
|
data: [{name: '合格数', itemStyle: {color: '#33CCCC'}}, {name: '不合格数', itemStyle: {color: '#EAAD24'}}, {name: '剩余数', itemStyle: {color: '#0E90FD'}}]
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
@@ -270,9 +271,9 @@ export default {
|
|||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: '入库数量(块)',
|
name: '合格数',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
barWidth: '8',
|
barWidth: '12',
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
@@ -292,9 +293,9 @@ export default {
|
|||||||
data: data1
|
data: data1
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '出库数量(块)',
|
name: '不合格数',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
barWidth: '8',
|
barWidth: '12',
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
@@ -314,9 +315,9 @@ export default {
|
|||||||
data: data2
|
data: data2
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '库存数量(块)',
|
name: '剩余数',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
barWidth: '8',
|
barWidth: '12',
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
@@ -337,19 +338,19 @@ export default {
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
let echart = document.getElementById('two_echart_06')
|
let echart = document.getElementById('echart_d1')
|
||||||
// if (this.myCharts06 !== '') {
|
// if (this.myCharts01 !== '') {
|
||||||
// this.myCharts06.dispose()
|
// this.myCharts01.dispose()
|
||||||
// }
|
// }
|
||||||
if (echart !== null) {
|
if (echart !== null) {
|
||||||
this.myCharts06 = this.$echarts.init(echart)
|
this.myCharts01 = this.$echarts.init(echart)
|
||||||
this.myCharts06.setOption(option)
|
this.myCharts01.setOption(option)
|
||||||
window.addEventListener('resize', () => {
|
window.addEventListener('resize', () => {
|
||||||
this.myCharts06.resize()
|
this.myCharts01.resize()
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
setEchart3 () {
|
setEchart02 () {
|
||||||
let max = 0
|
let max = 0
|
||||||
this.arr3.map(el => {
|
this.arr3.map(el => {
|
||||||
if (Number(el.device_fault_num) >= Number(max)) {
|
if (Number(el.device_fault_num) >= Number(max)) {
|
||||||
@@ -454,12 +455,12 @@ export default {
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
let echart = document.getElementById('echart_d3')
|
let echart = document.getElementById('echart_d2')
|
||||||
this.myCharts03 = this.$echarts.init(echart)
|
this.myCharts02 = this.$echarts.init(echart)
|
||||||
this.myCharts03.setOption(option)
|
this.myCharts02.setOption(option)
|
||||||
// this.autoMove(option)
|
// this.autoMove(option)
|
||||||
window.addEventListener('resize', () => {
|
window.addEventListener('resize', () => {
|
||||||
this.myCharts03.resize()
|
this.myCharts02.resize()
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
autoMove (option) {
|
autoMove (option) {
|
||||||
@@ -471,7 +472,7 @@ export default {
|
|||||||
option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
|
option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
|
||||||
option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1
|
option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1
|
||||||
}
|
}
|
||||||
this.myCharts06.setOption(option)
|
this.myCharts01.setOption(option)
|
||||||
}, 2000)
|
}, 2000)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -501,7 +502,7 @@ export default {
|
|||||||
overflow hidden
|
overflow hidden
|
||||||
.container
|
.container
|
||||||
_wh(100%, calc(100% - 1.38rem))
|
_wh(100%, calc(100% - 1.38rem))
|
||||||
padding .3rem .2509rem 0
|
padding .1rem .2509rem 0
|
||||||
overflow hidden
|
overflow hidden
|
||||||
clear both
|
clear both
|
||||||
.bottom
|
.bottom
|
||||||
@@ -525,7 +526,7 @@ export default {
|
|||||||
overflow hidden
|
overflow hidden
|
||||||
position relative
|
position relative
|
||||||
background center center / 100% 100% url(../../assets/images/sctj_top.png) no-repeat
|
background center center / 100% 100% url(../../assets/images/sctj_top.png) no-repeat
|
||||||
margin 15px 0
|
margin 5px 0
|
||||||
text-align center
|
text-align center
|
||||||
display flex
|
display flex
|
||||||
justify-content space-between
|
justify-content space-between
|
||||||
@@ -579,9 +580,8 @@ export default {
|
|||||||
_fj(row)
|
_fj(row)
|
||||||
.con2
|
.con2
|
||||||
width 70%
|
width 70%
|
||||||
height 100%
|
// height 100%
|
||||||
overflow hidden
|
height calc(100% - 34px)
|
||||||
position relative
|
|
||||||
.title
|
.title
|
||||||
// _wh(calc(100% - 34px), 32px)
|
// _wh(calc(100% - 34px), 32px)
|
||||||
_wh(100%, 32px)
|
_wh(100%, 32px)
|
||||||
@@ -589,19 +589,12 @@ export default {
|
|||||||
padding-left 0.18rem
|
padding-left 0.18rem
|
||||||
_font(16px, 32px, #fff,,left)
|
_font(16px, 32px, #fff,,left)
|
||||||
background center center / 100% 100% url(../../assets/images/screen1/bg_title_l.png) no-repeat
|
background center center / 100% 100% url(../../assets/images/screen1/bg_title_l.png) no-repeat
|
||||||
.desc
|
|
||||||
_wh(100%, 32px)
|
|
||||||
_fj(row, center)
|
|
||||||
div
|
|
||||||
_font(16px, 32px, #fff,,)
|
|
||||||
span
|
|
||||||
font-size 16px
|
|
||||||
color #F7B502
|
|
||||||
margin 0 30px
|
|
||||||
.item_content_0
|
.item_content_0
|
||||||
position relative
|
// _wh(calc(100% - 44px), calc(100% - 112px))
|
||||||
_wh(calc(100% - 44px), calc(100% - 112px))
|
_wh(calc(100% - 44px), 100%)
|
||||||
|
height 100%
|
||||||
// margin 17px auto
|
// margin 17px auto
|
||||||
|
float right
|
||||||
.tltxt
|
.tltxt
|
||||||
position relative
|
position relative
|
||||||
top -3px
|
top -3px
|
||||||
@@ -614,10 +607,11 @@ export default {
|
|||||||
left -6px
|
left -6px
|
||||||
background center center / 100% 100% url(../../assets/images/screen1/bg_title_tip.png) no-repeat
|
background center center / 100% 100% url(../../assets/images/screen1/bg_title_tip.png) no-repeat
|
||||||
.con3
|
.con3
|
||||||
// width calc(30% - 15px)
|
|
||||||
width 30%
|
width 30%
|
||||||
height 100%
|
// height 100%
|
||||||
overflow hidden
|
// padding-top 120px
|
||||||
|
height calc(100% - 34px)
|
||||||
|
// overflow hidden
|
||||||
position relative
|
position relative
|
||||||
.title
|
.title
|
||||||
position absolute
|
position absolute
|
||||||
@@ -633,7 +627,7 @@ export default {
|
|||||||
float right
|
float right
|
||||||
.con4
|
.con4
|
||||||
_wh(100%, calc(50% - 85px))
|
_wh(100%, calc(50% - 85px))
|
||||||
margin-top 16px
|
margin-top 66px
|
||||||
overflow hidden
|
overflow hidden
|
||||||
position relative
|
position relative
|
||||||
.block_h2
|
.block_h2
|
||||||
|
|||||||
Reference in New Issue
Block a user