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

设备screenys

Browse Source
This commit is contained in:
xiangxy
2022-07-29 13:30:51 +08:00
parent 485b3ea4b4
commit 2518e22e45
1 changed files with 124 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

175
src/pages/DeviceScreen.vue
View File

@@ -20,12 +20,26 @@
<div class="item_tip">
<div class="item_tip_left">设备实时状态</div>
</div>
<div class="item_content_1">
<div id="echart_d01" style="width: 100%; height: 100%"></div>
<div class="item_5_l">
<div class="item_content_0">
<div id="echart_d01" style="width: 100%; height: 100%"></div>
</div>
<div class="total">
<div>110<span>台</span></div>
</div>
<div class="total-desc">设备总数</div>
</div>
<div class="total">
<!-- <div>总数</div> -->
<div>110<span>台</span></div>
<div class="item_5_r">
<div class="right_1_down_inner_3_i" v-for="(e, i) in arrR01" :key="i">
<div class="right_1_down_inner_3_l">
<span :style="{'background-color': e.color}"><i :style="{'background-color': e.color}"></i></span>
<span>{{e.name}}</span>
</div>
<div class="right_1_down_inner_3_r">
<span>{{e.qty}}</span>
<span>台</span>
</div>
</div>
</div>
</div>
<div class="item_wrap">
@@ -48,8 +62,8 @@
<p class="item_content_1_inner_2_p2">6h</p>
</div>
<div class="item_content_1_inner_2">
<p class="item_content_1_inner_2_p1">报警：</p>
<p class="item_content_1_inner_2_p2">4次</p>
<p class="item_content_1_inner_2_p1 cred">报警：</p>
<p class="item_content_1_inner_2_p2 cred">4次</p>
</div>
</div>
<div class="item_content_1_inner">
@@ -66,9 +80,9 @@
<p class="item_content_1_inner_2_p1">MTTR：</p>
<p class="item_content_1_inner_2_p2">6h</p>
</div>
<div class="item_content_1_inner_2">
<p class="item_content_1_inner_2_p1">报警：</p>
<p class="item_content_1_inner_2_p2">4次</p>
<div class="item_content_1_inner_2 cred">
<p class="item_content_1_inner_2_p1 cred">报警：</p>
<p class="item_content_1_inner_2_p2 cred">4次</p>
</div>
</div>
<div class="item_content_1_inner">
@@ -85,9 +99,9 @@
<p class="item_content_1_inner_2_p1">MTTR：</p>
<p class="item_content_1_inner_2_p2">6h</p>
</div>
<div class="item_content_1_inner_2">
<p class="item_content_1_inner_2_p1">报警：</p>
<p class="item_content_1_inner_2_p2">4次</p>
<div class="item_content_1_inner_2 cred">
<p class="item_content_1_inner_2_p1 cred">报警：</p>
<p class="item_content_1_inner_2_p2 cred">4次</p>
</div>
</div>
</div>
@@ -149,7 +163,7 @@
<div class="scroll-ul_1_div">{{e.material_code}}</div>
<div class="scroll-ul_1_div">{{e.material_code}}</div>
<div class="scroll-ul_1_div">{{e.material_code}}</div>
<div class="scroll-ul_1_div">{{e.material_code}}</div>
<div class="scroll-ul_1_div"><span :style="{'background-color': ddddcolor}"><i></i></span>{{e.material_code}}</div>
<div class="scroll-ul_1_div">{{e.material_code}}</div>
<div class="scroll-ul_1_div">{{e.material_code}}</div>
<div class="scroll-ul_1_div">{{e.material_code}}</div>
@@ -218,9 +232,32 @@
<script>
import * as echarts from 'echarts'
export default {
name: 'MonitoringScreen1',
name: 'MonitoringScreen2',
data () {
return {
ddddcolor: '#f00',
arrR01: [
{
color: '#2D7CEB',
name: '正常运行',
qty: '10'
},
{
color: '#07E083',
name: '暂未生产',
qty: '20'
},
{
color: '#00D5FF',
name: '空闲设备',
qty: '30'
},
{
color: '#CC6060',
name: '故障设备',
qty: '40'
}
],
data01: [{value: 500, name: '正常运行'}, {value: 300, name: '暂未生产'}, {value: 200, name: '空闲设备'}, {value: 100, name: '故障设备'}],
chartData1: [
{
@@ -353,6 +390,12 @@ export default {
this.setEchart05()
},
methods: {
fontSize (res) {
const clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
if (!clientWidth) return
let fontSize = clientWidth * res / 1920
return fontSize
},
updateTime () {
let cd = new Date()
let year = cd.getFullYear()
@@ -401,11 +444,11 @@ export default {
{
axisTick: 'none',
axisLine: 'none',
offset: '27',
offset: '5',
axisLabel: {
textStyle: {
color: '#ffffff', // y轴字体颜色
fontSize: '16'
color: '#8FABBF', // y轴字体颜色
fontSize: '12'
}
},
data: ['设备01', '设备02', '设备03', '设备04', '设备05']
@@ -417,19 +460,19 @@ export default {
axisLabel: {
textStyle: {
color: '#ffffff',
fontSize: '16'
fontSize: '12'
}
},
data: [1, 1, 1, 1]
},
{
axisLine: {
lineStyle: {
type: [8, 4],
dashOffset: 4,
// color: 'rgba(0,0,0,0)' // y轴线颜色
color: '#3D5266' // y轴线颜色
color: '#3D5266', // y轴线颜色
opacity: 0.4
}
},
data: []
@@ -461,7 +504,7 @@ export default {
normal: {
show: false,
position: 'right',
distance: 10,
distance: 2,
formatter: function (param) {
return param.value + '%'
},
@@ -486,7 +529,7 @@ export default {
// },
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
{
offset: 0,
color: '#B68845',
@@ -514,7 +557,7 @@ export default {
normal: {
show: true,
position: 'right',
distance: 10,
distance: 2,
color: '#ffffff',
formatter: function (data) {
return dataLine[data.dataIndex] + '次'
@@ -575,7 +618,15 @@ export default {
},
setEchart04 () {
// 多列柱状图
// 到外面壳边框的距离
let option = {
grid: {
top: this.fontSize(50),
left: 0,
right: this.fontSize(25),
bottom: 0,
containLabel: true
},
// 图例
legend: {
// icon: 'rect',
@@ -605,7 +656,7 @@ export default {
interval: 0,
textStyle: {
color: '#8FABBF',
fontSize: 16
fontSize: 14
}
},
data: this.xData
@@ -630,7 +681,8 @@ export default {
lineStyle: {
type: [8, 4],
dashOffset: 4,
color: '#8FABBF'
color: '#8FABBF',
opacity: 0.2
}
}
},
@@ -756,7 +808,7 @@ export default {
interval: 0,
textStyle: {
color: '#8FABBF',
fontSize: 16
fontSize: 14
}
},
data: ['设备综合效率OEE', '产能利用效率TEEP']
@@ -782,7 +834,8 @@ export default {
lineStyle: {
type: [8, 4],
dashOffset: 4,
color: '#8FABBF'
color: '#8FABBF',
opacity: 0.2
}
}
},
@@ -921,7 +974,7 @@ export default {
itemGap: 30.86,
itemWidth: 14.16,
itemHeight: 7.38,
data: [{name: '运行设备', itemStyle: {color: '#0E90FD'}}, {name: '暂未生产设备', itemStyle: {color: '#33CCCC'}}, {name: '关机设备', itemStyle: {color: '#EAAD24'}}, {name: '故障设备', itemStyle: {color: '#ff0000'}}]
data: [{name: '运行设备', itemStyle: {color: '#0E90FD'}}, {name: '暂未生产设备', itemStyle: {color: '#07E083'}}, {name: '关机设备', itemStyle: {color: '#EAAD24'}}, {name: '故障设备', itemStyle: {color: '#CC6060'}}]
},
xAxis: {
type: 'category',
@@ -939,7 +992,7 @@ export default {
interval: 0,
textStyle: {
color: '#8FABBF',
fontSize: 16
fontSize: 14
}
},
data: ['无屑下料机1', '无屑下料机1', '无屑下料机1', '无屑下料机1', '无屑下料机1', '无屑下料机1']
@@ -964,7 +1017,8 @@ export default {
lineStyle: {
type: [8, 4],
dashOffset: 4,
color: '#8FABBF'
color: '#8FABBF',
opacity: 0.2
}
}
},
@@ -1002,7 +1056,7 @@ export default {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#33CCCC',
color: '#07E083',
opacity: 1
},
{
@@ -1048,12 +1102,12 @@ export default {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#ff0000',
color: '#CC6060',
opacity: 1
},
{
offset: 1,
color: 'rgba(122,50,99,0.25)',
color: 'rgba(123,33,33,0.25)',
opacity: 0.25
}
])
@@ -1140,24 +1194,23 @@ export default {
}
},
splitLine: {
show: true,
show: false,
lineStyle: {
type: [8, 4],
dashOffset: 4,
color: '#8FABBF'
color: '#8FABBF',
opacity: 0.2
}
},
max: max
},
series: [
{
name: '总库存',
type: 'bar',
barWidth: 10,
barWidth: 8,
itemStyle: {
normal: {
show: true,
// color: '#67c23a',
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
@@ -1269,20 +1322,20 @@ export default {
color: '#909399'
},
splitLine: {
show: true,
show: false,
lineStyle: {
type: [8, 4],
dashOffset: 4,
color: '#8FABBF'
color: '#8FABBF',
opacity: 0.2
}
},
max: max
},
series: [
{
name: '总库存',
type: 'bar',
barWidth: 10,
barWidth: 8,
itemStyle: {
normal: {
show: true,
@@ -1414,6 +1467,11 @@ header
letter-spacing .02rem
text-shadow 0 0 .09rem #159AFF
padding-left .38rem
.item_content_0
width 2.2rem
height 2.2rem
// _fj(space-around)
// padding .17rem 0 .24rem
.item_content_1
_wh(100%, calc(100% - .32rem))
_fj(space-around)
@@ -1501,6 +1559,12 @@ header
overflow hidden
&:nth-child(8)
width 13.2%
&:nth-child(4)
span
_wh(.0725rem, .0725rem)
border-radius 100%
background-color #2D7CEB
margin-right .1rem
// scroll2
.scroll_tab_2
_wh(100%, .4rem)
@@ -1612,7 +1676,7 @@ header
&:nth-child(1)
_wh(.0725rem, .0725rem)
border-radius 100%
background-color #07E083
background-color #2D7CEB
margin-left .15rem
&:nth-child(2)
font-family "SourceHanSansCN"
@@ -1641,22 +1705,26 @@ header
_wh(1.83rem, .3rem)
.item_5_r
float right
_wh(1.83rem, .3rem)
margin-top .4rem
_wh(1.83rem, 60%)
_fj()
flex-direction column
.right_1_down_inner_3_i
margin-bottom .045rem
.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
.item_5_l_2
_wh(100%, calc(100% - 1.42rem))
_wh(100%, 40%)
.right_1_down_inner_3_i
margin-bottom .03rem
&:nth-child(1), &:nth-child(2)
margin-bottom 5%
.total
position absolute
top 2.7rem
left 0.3rem
top 2.5rem
left .3rem
text-align center
width 4rem
width 2.2rem
div
line-height 0.24rem
// color #f80
@@ -1664,4 +1732,9 @@ header
font-size .3rem
margin-top 0.08rem
font-weight 700
.total-desc
width 2.2rem
text-align center
.cred
color #CC6060
</style>