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

主页左屏

Browse Source
This commit is contained in:
caill
2023-06-02 09:38:31 +08:00
parent 7e3e45eae6
commit bd66b311b4
17 changed files with 1184 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

691
src/pages/modules/homepage/one.vue Normal file
View File

@@ -0,0 +1,691 @@
<template>
<div class="n_container">
<div class="n_header">
<div class="n_header_h1">
<h1>晟华生产数</h1>
</div>
</div>
<div class="n_body_container">
<div class="n_body_container_wraper">
<div class="n_left_content">
<div class="item_wrap">
<div class="item_tip item_tip_bg_s">
<div class="item_tip_left">当日混料生产</div>
</div>
<div class="item_content">
<div id="home_echart_1" style="width: 100%; height: 100%;"></div>
</div>
</div>
<div class="item_wrap">
<div class="item_tip item_tip_bg_s">
<div class="item_tip_left">当日压制生产</div>
</div>
<div class="item_content">
<div id="home_echart_2" style="width: 100%; height: 100%;"></div>
</div>
</div>
<div class="item_wrap">
<div class="item_tip item_tip_bg_s">
<div class="item_tip_left">当日成品情况</div>
</div>
<div class="item_content">
<div id="home_echart_3" style="width: 100%; height: 100%;"></div>
</div>
</div>
</div>
<div class="n_right_content">
<div class="right_wrap">
<div class="machine_wrap hlj_s_wrap">
<div v-for="(e,i) in [1,2,3,4]" :key="i" class="sh_machine hlj_s">
<img src="../../../images/workshop/hlj_s.png" alt="">
</div>
</div>
<div class="machine_wrap hlj_wrap">
<div v-for="(e,i) in [1,2,3,4,5,6,7,8,9,10,11,12]" :key="i" class="sh_machine hlj">
<img src="../../../images/workshop/hlj.png" alt="">
</div>
</div>
<div class="machine_wrap lz_wrap_1">
<div v-for="(e,i) in [1,2,3,4]" :key="i" class="sh_machine lz">
<img src="../../../images/workshop/lz.png" alt="">
</div>
</div>
<div class="machine_wrap lz_wrap_2">
<div v-for="(e,i) in [1,2,3,4,5,6,7,8,9,10,11,12]" :key="i" class="sh_machine lz">
<img src="../../../images/workshop/lz.png" alt="">
</div>
</div>
<div class="machine_wrap lz_wrap_3">
<div v-for="(e,i) in [1,2,3,4,5,6,7,8,9,10,11,12,13]" :key="i" class="sh_machine lz">
<img src="../../../images/workshop/lz.png" alt="">
</div>
</div>
<div class="machine_wrap yyj_wrap_1">
<div class="sh_machine jzjcss">
<img src="../../../images/workshop/jzjcss_yellow.png" alt="">
</div>
<div class="sh_machine yyj">
<img src="../../../images/workshop/yyj_gray.png" alt="">
</div>
<div class="sh_machine wzm"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'one',
data () {
return {
myCharts1: '',
myCharts2: '',
myCharts3: ''
}
},
mounted () {
this.setEchart1()
this.setEchart2()
this.setEchart3()
},
methods: {
setEchart1 () {
let date = ['碾机1', '碾机2', '碾机3', '碾机4', '碾机5', '碾机6', '碾机7', '碾机8', '碾机9', '碾机10']
let data1 = ['500', '600', '700', '800', '500', '600', '700', '800', '900', '1000']
let option = {
grid: {
top: 50,
left: 0,
right: 0,
bottom: 0,
containLabel: true
},
legend: {
icon: 'rect',
textStyle: {
color: '#fff',
fontSize: 14,
lineHeight: 14
},
itemGap: 30.86,
itemWidth: 14.16,
itemHeight: 7.38,
data: [{name: '产量', itemStyle: {color: '#0E90FD'}}]
},
xAxis: {
type: 'category',
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
width: 2,
color: '#8FABBF'
}
},
axisLabel: {
interval: 0,
textStyle: {
color: '#8FABBF',
fontSize: 16
},
rotate: 50
},
data: date
},
yAxis: {
type: 'value',
axisLine: {
show: false
},
splitNumber: 2,
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: '#8FABBF',
fontSize: 14
}
},
splitLine: {
show: true,
lineStyle: {
type: [8, 4],
dashOffset: 4,
color: '#8FABBF'
}
}
},
series: [
{
name: '产量',
type: 'bar',
barWidth: '8',
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 1,
color: 'rgba(96,112,128,0.10)',
opacity: 1
},
{
offset: 0,
color: '#0E90FD',
opacity: 0.1
}
])
}
},
data: data1
}
]
}
let echart = document.getElementById('home_echart_1')
if (this.myCharts1 !== '') {
this.myCharts1.dispose()
}
if (echart !== null) {
this.myCharts1 = this.$echarts.init(echart)
this.myCharts1.setOption(option)
window.addEventListener('resize', () => {
this.myCharts1.resize()
})
}
},
setEchart2 () {
let date = ['压机1', '压机2', '压机3', '压机4', '压机5', '压机6', '压机7', '压机8', '压机9', '压机10']
let data1 = ['500', '600', '700', '800', '500', '600', '700', '800', '900', '1000']
let data2 = ['50', '180', '70', '100', '50', '70', '100', '180', '100', '120']
let option = {
grid: {
top: 50,
left: 0,
right: 0,
bottom: 0,
containLabel: true
},
legend: {
icon: 'rect',
textStyle: {
color: '#fff',
fontSize: 14,
lineHeight: 14
},
itemGap: 30.86,
itemWidth: 14.16,
itemHeight: 7.38,
data: [{name: '合格数', itemStyle: {color: '#33CCCC'}}, {name: '不合格数', itemStyle: {color: '#EAAD24'}}]
},
xAxis: {
type: 'category',
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
width: 2,
color: '#8FABBF'
}
},
axisLabel: {
interval: 0,
textStyle: {
color: '#8FABBF',
fontSize: 16
},
rotate: 50
},
data: date
},
yAxis: {
type: 'value',
axisLine: {
show: false
},
splitNumber: 2,
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: '#8FABBF',
fontSize: 14
}
},
splitLine: {
show: true,
lineStyle: {
type: [8, 4],
dashOffset: 4,
color: '#8FABBF'
}
}
},
series: [
{
name: '合格数',
type: 'bar',
barWidth: '8',
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#33CCCC',
opacity: 1
},
{
offset: 1,
color: 'rgba(31,89,89,0.25)',
opacity: 0.25
}
])
}
},
data: data1
},
{
name: '不合格数',
type: 'bar',
barWidth: '8',
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#B68845',
opacity: 1
},
{
offset: 1,
color: 'rgba(134,98,45,0.25)',
opacity: 0.25
}
])
}
},
data: data2
}
]
}
let echart = document.getElementById('home_echart_2')
if (this.myCharts2 !== '') {
this.myCharts2.dispose()
}
if (echart !== null) {
this.myCharts2 = this.$echarts.init(echart)
this.myCharts2.setOption(option)
window.addEventListener('resize', () => {
this.myCharts2.resize()
})
}
},
setEchart3 () {
let date = ['成品1', '成品2', '成品3', '成品4', '成品5']
let data1 = ['1500', '1600', '1700', '1800', '1500']
let data2 = ['450', '500', '700', '800', '500']
let data3 = ['50', '180', '60', '70', '50']
let option = {
grid: {
top: 50,
left: 0,
right: 0,
bottom: 0,
containLabel: true
},
legend: {
icon: 'rect',
textStyle: {
color: '#fff',
fontSize: 14,
lineHeight: 14
},
itemGap: 30.86,
itemWidth: 14.16,
itemHeight: 7.38,
data: [{name: '库存数', itemStyle: {color: '#0E90FD'}}, {name: '合格入库', itemStyle: {color: '#33CCCC'}}, {name: '不合格入库', itemStyle: {color: '#EAAD24'}}]
},
xAxis: {
type: 'category',
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
width: 2,
color: '#8FABBF'
}
},
axisLabel: {
interval: 0,
textStyle: {
color: '#8FABBF',
fontSize: 16
}
// rotate: 50
},
data: date
},
yAxis: {
type: 'value',
axisLine: {
show: false
},
splitNumber: 2,
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: '#8FABBF',
fontSize: 14
}
},
splitLine: {
show: true,
lineStyle: {
type: [8, 4],
dashOffset: 4,
color: '#8FABBF'
}
}
},
series: [
{
name: '弯头工段',
type: 'bar',
barWidth: '8',
barGap: '200%',
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 1,
color: 'rgba(96,112,128,0.10)',
opacity: 1
},
{
offset: 0,
color: '#0E90FD',
opacity: 0.1
}
])
}
},
data: data1
},
{
name: '综合工段',
type: 'bar',
barWidth: '8',
barGap: '200%',
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#33CCCC',
opacity: 1
},
{
offset: 1,
color: 'rgba(31,89,89,0.25)',
opacity: 0.25
}
])
}
},
data: data2
},
{
name: '成品工段',
type: 'bar',
barWidth: '8',
barGap: '200%',
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#B68845',
opacity: 1
},
{
offset: 1,
color: 'rgba(134,98,45,0.25)',
opacity: 0.25
}
])
}
},
data: data3
}
]
}
let echart = document.getElementById('home_echart_3')
if (this.myCharts3 !== '') {
this.myCharts3.dispose()
}
if (echart !== null) {
this.myCharts3 = this.$echarts.init(echart)
this.myCharts3.setOption(option)
window.addEventListener('resize', () => {
this.myCharts3.resize()
})
}
}
}
}
</script>
<style lang="stylus" scoped>
@import '~@css/mixin'
.n_container
_wh(100%, 100%)
.n_header
_wh(100%, 8%)
_bis('../../../images/bg_header.jpg')
.n_header_h1
_wh(100%, 100%)
_fj(row, flex-end)
_bis('../../../images/top_left.png',auto,,right)
h1
_font(32px, 1, #fff,,right)
padding-bottom 2%
letter-spacing 6px
font-family "阿里妈妈数黑体" !important
margin-right -3px
.n_body_container
_wh(100%, 92%)
padding 40px 0 20px 20px
_bis('../../../images/bg_content.jpg')
.n_body_container_wraper
_wh(100%, 100%)
_fj(row)
.n_left_content
_wh(33%, 100%)
background-color #070b1c
.n_right_content
_wh(calc(67% - 16px), 100%)
.item_wrap
_wh(100%, 33%)
+.item_wrap
margin-top .5%
.item_tip
_wh(100%, 32px)
line-height 32px
padding 0 10px
.item_tip_bg_s
_bis('../../../images/bg_title_s.png')
.item_tip_left
_wh(60%, 100%)
font-family "SourceHanSansCN"
_font(18px, inherit, #fff, 700, left)
letter-spacing 2px
text-shadow 0 0 9px #159AFF
padding-left 34px
_bis('../../../images/bg_title_tip.png', 22px, 22px, left)
.item_content
_wh(100%, calc(100% - 32px))
padding 10px 5px
.right_wrap
position relative
z-index 1
_wh(100%, 100%)
_bis('../../../images/workshop/workshop_l.png')
.machine_wrap
position absolute
z-index 2
.sh_machine
position absolute
top 0
left 0
z-index 3
width 100%
img
position absolute
top 0
left 0
z-index 4
_wh(100%, auto)
.hlj_s_wrap
width 4%
height 85.5%
top 14.5%
left 27%
.hlj_s
&:nth-child(2)
top 5.5%
&:nth-child(3)
top 11%
&:nth-child(4)
top 16.5%
.hlj_wrap
width 4%
height 66.5%
top 33%
left 29%
.hlj
&:nth-child(2)
top 6%
&:nth-child(3)
top 12.7%
&:nth-child(4)
top 18.6%
&:nth-child(5)
top 25.5%
&:nth-child(6)
top 31.5%
&:nth-child(7)
top 38.1%
&:nth-child(8)
top 44%
&:nth-child(9)
top 51%
&:nth-child(10)
top 57%
&:nth-child(11)
top 63.5%
&:nth-child(12)
top 69.5%
.lz_wrap_1
width 2%
height 84.6%
top 15.4%
left 33.5%
.lz
&:nth-child(2)
top 5.4%
&:nth-child(3)
top 11%
&:nth-child(4)
top 16.2%
.lz_wrap_2
width 2%
height 66.3%
top 33.7%
left 33.4%
.lz
&:nth-child(2)
top 6.1%
&:nth-child(3)
top 12.8%
&:nth-child(4)
top 18.5%
&:nth-child(5)
top 26%
&:nth-child(6)
top 31.5%
&:nth-child(7)
top 38.2%
&:nth-child(8)
top 43.9%
&:nth-child(9)
top 51%
&:nth-child(10)
top 56.8%
&:nth-child(11)
top 64%
&:nth-child(12)
top 69.5%
.lz_wrap_3
width 2%
height 94%
top 6%
left 43%
.lz
&:nth-child(2)
top 4%
&:nth-child(3)
top 6.55%
&:nth-child(4)
top 9.1%
&:nth-child(5)
top 14%
&:nth-child(6)
top 18%
&:nth-child(7)
top 20.5%
&:nth-child(8)
top 23%
&:nth-child(9)
top 40%
left 200%
&:nth-child(10)
top 44%
left 100%
&:nth-child(11)
top 54%
left 200%
&:nth-child(12)
top 76%
left 200%
&:nth-child(13)
top 86%
left 200%
.yyj_wrap_1
width 16%
height 9%
top 8%
left 48%
.yyj
width 20%
left 35.5%
.wzm
_wh(50%, 48%)
background-color #d9d9d9
top auto
bottom 0
.jzjcss
width: 20%;
left: 49%;
top: 8%;
</style>