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

数据

Browse Source
This commit is contained in:
caill
2022-09-09 15:52:54 +08:00
parent 064a2e2639
commit 714762dad1
1 changed files with 107 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
src/pages/DeviceManage.vue
View File

@@ -21,10 +21,10 @@
<div class="grid_wrap">
<ul class="scroll_tab_1">
<li>事业部</li>
<li>正常台数</li>
<li>故障台数</li>
<li>委外台数</li>
<li>保养台数</li>
<li>正常(台)</li>
<li>故障(台)</li>
<li>委外(台)</li>
<li>保养(台)</li>
</ul>
<div class="scroll_container_1">
<vue-seamless-scroll :data="gridArr1" :class-option="defaultOption1">
@@ -49,10 +49,10 @@
<div class="grid_wrap">
<ul class="scroll_tab_1 scroll_tab_2">
<li>事业部</li>
<li>需保养台数</li>
<li>已保养台数</li>
<li>在保养台数</li>
<li>未保养台数</li>
<li>需保养(台)</li>
<li>已保养(台)</li>
<li>在保养(台)</li>
<li>未保养(台)</li>
<li>完成率(%)</li>
</ul>
<div class="scroll_container_1">
@@ -89,14 +89,16 @@
<div class="echart_wrap echart_wrap_1">
<div class="echart_wrap_2">
<div class="echart_wrap_l">
<div class="num_items">
<div class="right_1_up_right_item">
<p class="right_1_up_p1">总设备台数</p>
<p class="right_1_up_p2">{{num1}}<span></span></p>
</div>
<div class="right_1_up_right_item">
<p class="right_1_up_p1">在用台数</p>
<p class="right_1_up_p2">{{num2}}<span></span></p>
<div class="echart_wrap_l_l">
<div class="num_items">
<div class="right_1_up_right_item">
<p class="right_1_up_p1">总设备台数</p>
<p class="right_1_up_p2">{{num1}}<span></span></p>
</div>
<div class="right_1_up_right_item">
<p class="right_1_up_p1">在用台数</p>
<p class="right_1_up_p2">{{num2}}<span></span></p>
</div>
</div>
</div>
<div class="echart_wrap_l_wrap">
@@ -174,16 +176,16 @@
<div class="tip_item_bg1"></div>
</div>
<div class="grid_wrap">
<ul class="scroll_tab_1">
<ul class="scroll_tab_1 scroll_tab_4">
<li>班组</li>
<li>MTBF(h)</li>
<li>MTTR(h)</li>
<li>平均OEE（%）</li>
<li>平均OEE(%)</li>
<li>总维修时间(h)</li>
</ul>
<div class="scroll_container_1">
<vue-seamless-scroll :data="gridArr4" :class-option="defaultOption4">
<ul class="content-block-scroll-ul_1">
<ul class="content-block-scroll-ul_1 content-block-scroll-ul_4">
<li v-for="(e, i) in gridArr4" :key="i">
<div class="scroll-ul_1_div">{{e.group_name}}</div>
<div class="scroll-ul_1_div">{{e.device_mtbf}}</div>
@@ -307,7 +309,7 @@ export default {
async _getDeviceTime () {
let res = await getDeviceTime()
if (res.code === '1') {
this.echartArr1 = [...res.device_time_arr]
this.echartArr1 = [...res.srb.device_time_arr]
this.setEchart1()
} else {
this.Dialog(res.desc)
@@ -318,7 +320,7 @@ export default {
grid: {
top: 60,
left: 0,
right: 54,
right: 58,
bottom: 0,
containLabel: true
},
@@ -563,13 +565,23 @@ export default {
async _getDeviceFault () {
let res = await getDeviceFault()
if (res.code === '1') {
this.echartArr2 = [...res.device_fault_arr]
let colors = ['#E0CA07', '#007744', '#C0C0C0', '#B68845', '#07E083', '#2D7CEB', '#00D5FF ', '#C44545', '#8B31A1', '#E1BF94']
res.srb.device_fault_arr.map((e, i) => {
this.$set(e, 'color', colors[i])
})
this.echartArr2 = [...res.srb.device_fault_arr]
this.setEchart2()
} else {
this.Dialog(res.desc)
}
},
setEchart2 () {
let max = 0
this.echartArr2.map(el => {
if (Number(el.device_fault_num) >= Number(max)) {
max = Number(el.device_fault_num)
}
})
let option = {
grid: {
top: 0,
@@ -589,7 +601,7 @@ export default {
xAxis: {
type: 'value',
min: 0,
max: 250,
max: max,
boundaryGap: false,
axisTick: {
show: false
@@ -640,7 +652,8 @@ export default {
series: [
{
type: 'bar',
barWidth: '30',
barWidth: '16',
zlevel: 1,
label: {
show: true,
position: 'right', // 位置
@@ -651,7 +664,16 @@ export default {
},
itemStyle: {
normal: {
color: '#33CCCC'
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: '#2DB796'
},
{
offset: 1,
color: '#6BBBA8'
}
], false)
}
},
data: this.echartArr2.map((it) => it.device_fault_num)
@@ -670,13 +692,13 @@ export default {
async _getDeviceNumber () {
let res = await getDeviceNumber()
if (res.code === '1') {
this.num1 = res.device_all_num
this.num2 = res.device_use_num
this.num1 = res.srb.device_all_num
this.num2 = res.srb.device_use_num
let colors = ['#E0CA07', '#007744', '#C0C0C0', '#B68845', '#07E083', '#2D7CEB', '#00D5FF ', '#C44545', '#8B31A1', '#E1BF94']
res.device_all_arr.map((e, i) => {
res.srb.device_all_arr.map((e, i) => {
this.$set(e, 'color', colors[i])
})
this.echartArr3 = [...res.device_all_arr]
this.echartArr3 = [...res.srb.device_all_arr]
this.setEchart3()
} else {
this.Dialog(res.desc)
@@ -724,7 +746,7 @@ export default {
async _getDeviceRunStatus () {
let res = await getDeviceRunStatus()
if (res.code === '1') {
this.gridArr1 = [...res.device_run_arr]
this.gridArr1 = [...res.srb.device_run_arr]
} else {
this.Dialog(res.desc)
}
@@ -733,7 +755,7 @@ export default {
async _getDeviceYearStatus () {
let res = await getDeviceYearStatus()
if (res.code === '1') {
this.gridArr2 = [...res.device_year_arr]
this.gridArr2 = [...res.srb.device_year_arr]
} else {
this.Dialog(res.desc)
}
@@ -742,7 +764,7 @@ export default {
async _getDeviceYearMainPlan () {
let res = await getDeviceYearMainPlan()
if (res.code === '1') {
this.gridArr3 = [...res.device_year_arr]
this.gridArr3 = [...res.srb.device_year_arr]
} else {
this.Dialog(res.desc)
}
@@ -751,7 +773,7 @@ export default {
async _getDeviceGroupStatus () {
let res = await getDeviceGroupStatus()
if (res.code === '1') {
this.gridArr4 = [...res.device_group_arr]
this.gridArr4 = [...res.srb.device_group_arr]
} else {
this.Dialog(res.desc)
}
@@ -771,13 +793,13 @@ export default {
clear both
.content_left
float left
_wh(28%, 100%)
_wh(24%, 100%)
border-top .03rem solid #0092df
background linear-gradient(rgba(15, 44, 84, 0.6) 0%, rgb(0, 24, 57) 100%)
overflow hidden
.content_center
float left
_wh(calc(44% - .4rem), 100%)
_wh(calc(52% - .4rem), 100%)
margin 0 .2rem
padding .32rem .2rem .2rem .2rem
overflow hidden
@@ -834,20 +856,33 @@ export default {
border-bottom .01rem solid rgba(8,205,248,0.3)
li
float left
width 20%
_font(.14rem,.4rem,#78B1DE,,center)
width 17%
_font(.12rem,.4rem,#78B1DE,,center)
word-wrap break-word
word-break break-all
white-space nowrap
padding 0 .02rem
padding 0 .04rem
overflow hidden
box-sizing border-box
&:nth-child(1)
width 32%
.scroll_container_1
overflow hidden
.scroll_tab_2 li
width calc(100% / 6)
width 15% !important
.scroll_tab_2 li:nth-child(1)
width 25% !important
.scroll_tab_3 li
width calc(100% / 10)
width 10% !important
.scroll_tab_3 li:nth-child(1)
width 10% !important
.scroll_tab_4 li
&:nth-child(1)
width 30% !important
&:nth-child(2), &:nth-child(3)
width 15% !important
&:nth-child(4), &:nth-child(5)
width 20% !important
.content-block-scroll-ul_1
li
_wh(100%, .44rem)
@@ -861,14 +896,16 @@ export default {
li
.scroll-ul_1_div
float left
_wh(20%, .44rem)
_wh(17%, .44rem)
_fj(center)
_font(.14rem, .44rem, #fff,,center)
_font(.12rem, .44rem, #fff,,center)
word-wrap break-word
word-break break-all
white-space nowrap
padding 0 .02rem
padding 0 .04rem
overflow hidden
&:nth-child(1)
width 32%
.progress_line_wrap
position relative
_wh(1.35rem, .03rem)
@@ -885,35 +922,50 @@ export default {
_wh(.15rem, .15rem)
background center center / 100% 100% url(../assets/images/dot_1.png) no-repeat
.content-block-scroll-ul_2 li .scroll-ul_1_div
width calc(100% / 6)
width 15% !important
.content-block-scroll-ul_2 li .scroll-ul_1_div:nth-child(1)
width 25% !important
.content-block-scroll-ul_3 li .scroll-ul_1_div
width calc(100% / 10)
width 10% !important
.content-block-scroll-ul_3 li .scroll-ul_1_div:nth-child(1)
width 10% !important
.content-block-scroll-ul_4 li .scroll-ul_1_div
&:nth-child(1)
width 30% !important
&:nth-child(2), &:nth-child(3)
width 15% !important
&:nth-child(4), &:nth-child(5)
width 20% !important
.num_items
_wh(100%, .6rem)
_fj()
_wh(100%, 100%)
_fj(space-evenly)
flex-direction: column
.right_1_up_right_item
_wh(1.7rem, .6rem)
_wh(100%, .8rem)
background center bottom / 100% 100% url(../assets/images/item_3.png) no-repeat
_fj(space-evenly)
flex-direction column
&:nth-child(2)
margin-left .2rem
margin-top .2rem
.right_1_up_p1
font-family "SourceHanSansCN"
_font(.14rem, .14rem, #78B1DE, 700, center)
display block
_font(.2rem, .4rem, #78B1DE, 700, center)
.right_1_up_p2
font-family "SourceHanSansCN"
_font(.18rem, .18rem, #fff, 700, center)
display block
_font(.22rem, .4rem, #fff, 700, center)
span
_font(.12rem, .18rem, #fff, 700, center)
padding-left .1rem
.echart_wrap_l
_fj()
_wh(60%, 100%)
padding-right .4rem
background right center / .02rem 100% url(../assets/images/item_4.png) no-repeat
.echart_wrap_l_l
_wh(50%, 100%)
padding-right .4rem
.echart_wrap_l_wrap
_wh(100%, calc(100% - .6rem))
padding-top .2rem
_wh(50%, 100%)
.echart_wrap_r
_wh(40%, 100%)
padding-left .2rem