960的分辨率
This commit is contained in:
@@ -2,7 +2,8 @@
|
|||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=0.25, maximum-scale=1.0, minimum-scale=0.25, user-scalable=no, target-densitydpi=device-dpi" />
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, minimum-scale=1, user-scalable=no, target-densitydpi=device-dpi" />
|
||||||
|
<!-- <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0,user-scalable=no"> -->
|
||||||
<title>天能涂板暂存库可视化看板</title>
|
<title>天能涂板暂存库可视化看板</title>
|
||||||
</head>
|
</head>
|
||||||
<body class="clearfix">
|
<body class="clearfix">
|
||||||
|
|||||||
@@ -812,7 +812,7 @@ export const boardPoint = () => {
|
|||||||
'point_status': '1'
|
'point_status': '1'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'material_name': '',
|
'material_name': '20中负',
|
||||||
'point_code': '19-01-01',
|
'point_code': '19-01-01',
|
||||||
'point_status': '1'
|
'point_status': '1'
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -67,31 +67,31 @@ export default {
|
|||||||
equipId: this.index
|
equipId: this.index
|
||||||
}
|
}
|
||||||
this.$store.dispatch('setConfig', obj)
|
this.$store.dispatch('setConfig', obj)
|
||||||
|
let element = document.documentElement
|
||||||
|
if (this.fullscreen) {
|
||||||
|
if (document.exitFullscreen) {
|
||||||
|
document.exitFullscreen()
|
||||||
|
} else if (document.webkitCancelFullScreen) {
|
||||||
|
document.webkitCancelFullScreen()
|
||||||
|
} else if (document.mozCancelFullScreen) {
|
||||||
|
document.mozCancelFullScreen()
|
||||||
|
} else if (document.msExitFullscreen) {
|
||||||
|
document.msExitFullscreen()
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (element.requestFullscreen) {
|
||||||
|
element.requestFullscreen()
|
||||||
|
} else if (element.webkitRequestFullScreen) {
|
||||||
|
element.webkitRequestFullScreen()
|
||||||
|
} else if (element.mozRequestFullScreen) {
|
||||||
|
element.mozRequestFullScreen()
|
||||||
|
} else if (element.msRequestFullscreen) {
|
||||||
|
// IE11
|
||||||
|
element.msRequestFullscreen()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.fullscreen = !this.fullscreen
|
||||||
this.$router.push('/index')
|
this.$router.push('/index')
|
||||||
// let element = document.documentElement
|
|
||||||
// if (this.fullscreen) {
|
|
||||||
// if (document.exitFullscreen) {
|
|
||||||
// document.exitFullscreen()
|
|
||||||
// } else if (document.webkitCancelFullScreen) {
|
|
||||||
// document.webkitCancelFullScreen()
|
|
||||||
// } else if (document.mozCancelFullScreen) {
|
|
||||||
// document.mozCancelFullScreen()
|
|
||||||
// } else if (document.msExitFullscreen) {
|
|
||||||
// document.msExitFullscreen()
|
|
||||||
// }
|
|
||||||
// } else {
|
|
||||||
// if (element.requestFullscreen) {
|
|
||||||
// element.requestFullscreen()
|
|
||||||
// } else if (element.webkitRequestFullScreen) {
|
|
||||||
// element.webkitRequestFullScreen()
|
|
||||||
// } else if (element.mozRequestFullScreen) {
|
|
||||||
// element.mozRequestFullScreen()
|
|
||||||
// } else if (element.msRequestFullscreen) {
|
|
||||||
// // IE11
|
|
||||||
// element.msRequestFullscreen()
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// this.fullscreen = !this.fullscreen
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -101,7 +101,7 @@ export default {
|
|||||||
@import '~@style/mixin'
|
@import '~@style/mixin'
|
||||||
.container
|
.container
|
||||||
_wh(100%, 100%)
|
_wh(100%, 100%)
|
||||||
background center / 100% 100% url('../images/bg.jpg') no-repeat
|
// background center / 100% 100% url('../images/bg.jpg') no-repeat
|
||||||
p
|
p
|
||||||
_font(12px, 12px ,#fff,,)
|
_font(12px, 12px ,#fff,,)
|
||||||
.content
|
.content
|
||||||
@@ -109,15 +109,14 @@ export default {
|
|||||||
z-index 1
|
z-index 1
|
||||||
top 50%
|
top 50%
|
||||||
left 50%
|
left 50%
|
||||||
width 25%
|
width 50%
|
||||||
min-width 890px
|
|
||||||
transform translateX(-50%) translateY(-50%)
|
transform translateX(-50%) translateY(-50%)
|
||||||
h1
|
h1
|
||||||
font-size .3rem
|
font-size 30px
|
||||||
font-family: 'YouSheBiaoTiHei';
|
font-family: 'YouSheBiaoTiHei';
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: transparent;
|
color: transparent;
|
||||||
line-height .3rem
|
line-height 30px
|
||||||
opacity: 0.89;
|
opacity: 0.89;
|
||||||
background: linear-gradient(0deg, #AAD0F6 0%, #D7E7F5 53.3154296875%, #E0EAF6 100%);
|
background: linear-gradient(0deg, #AAD0F6 0%, #D7E7F5 53.3154296875%, #E0EAF6 100%);
|
||||||
filter: drop-shadow(#092F6D 1px 4px 1px);
|
filter: drop-shadow(#092F6D 1px 4px 1px);
|
||||||
@@ -127,10 +126,12 @@ h1
|
|||||||
margin-bottom 5%
|
margin-bottom 5%
|
||||||
.login_wrap
|
.login_wrap
|
||||||
width 100%
|
width 100%
|
||||||
background #103170 center / 100% 100% url('../images/bg-m_2.png') no-repeat
|
background-color #08225f
|
||||||
|
border 1px solid #43b3fa
|
||||||
|
// background #103170 center / 100% 100% url('../images/bg-m_2.png') no-repeat
|
||||||
padding 3% 10% 6% 10%
|
padding 3% 10% 6% 10%
|
||||||
h2
|
h2
|
||||||
_font(.15rem, .15rem, #9BB9DD,700,center)
|
_font(15px, 15px, #9BB9DD,700,center)
|
||||||
margin-bottom 4%
|
margin-bottom 4%
|
||||||
.item_wrap
|
.item_wrap
|
||||||
background linear-gradient(to bottom, #081438, #0c205a)
|
background linear-gradient(to bottom, #081438, #0c205a)
|
||||||
@@ -138,19 +139,19 @@ h2
|
|||||||
padding 2% 2%
|
padding 2% 2%
|
||||||
margin-bottom 3%
|
margin-bottom 3%
|
||||||
.label
|
.label
|
||||||
_font(.12rem, .25rem, #fff,,left)
|
_font(12px, 25px, #fff,,left)
|
||||||
.input
|
.input
|
||||||
width 100%
|
width 100%
|
||||||
_font(.12rem, .25rem, #fff,,left)
|
_font(12px, 25px, #fff,,left)
|
||||||
background-color transparent
|
background-color transparent
|
||||||
.btn
|
.btn
|
||||||
background-color #2778f3
|
background-color #2778f3
|
||||||
border-radius 6px
|
border-radius 6px
|
||||||
height .4rem
|
height 40px
|
||||||
font-size .17rem
|
font-size 17px
|
||||||
color #fff
|
color #fff
|
||||||
letter-spacing .05rem
|
letter-spacing 5px
|
||||||
line-height .4rem
|
line-height 40px
|
||||||
outline none
|
outline none
|
||||||
border none
|
border none
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -2,12 +2,12 @@
|
|||||||
<section class="container">
|
<section class="container">
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<h1>天能涂板暂存库可视化看板</h1>
|
<h1>天能涂板暂存库可视化看板</h1>
|
||||||
<v-time></v-time>
|
<!-- <v-time></v-time> -->
|
||||||
<div class="exit_btn iconfont" @click="back"></div>
|
<div class="exit_btn iconfont" @click="back"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="zd-row content">
|
<div class="zd-row content">
|
||||||
<div class="zd-col-15 allHeight"><v-left></v-left></div>
|
<div class="l-wrap"><v-left></v-left></div>
|
||||||
<div class="zd-col-8 allHeight"><v-right></v-right></div>
|
<div class="r-wrap"><v-right></v-right></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="left_bg"></div>
|
<div class="left_bg"></div>
|
||||||
<div class="right_bg"></div>
|
<div class="right_bg"></div>
|
||||||
@@ -16,17 +16,26 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import vTime from '@components/time.vue'
|
// import vTime from '@components/time.vue'
|
||||||
import vLeft from './left.vue'
|
import vLeft from './left.vue'
|
||||||
import vRight from './right.vue'
|
import vRight from './right.vue'
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
vTime,
|
// vTime,
|
||||||
vLeft,
|
vLeft,
|
||||||
vRight
|
vRight
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
back () {
|
back () {
|
||||||
|
if (document.exitFullscreen) {
|
||||||
|
document.exitFullscreen()
|
||||||
|
} else if (document.webkitCancelFullScreen) {
|
||||||
|
document.webkitCancelFullScreen()
|
||||||
|
} else if (document.mozCancelFullScreen) {
|
||||||
|
document.mozCancelFullScreen()
|
||||||
|
} else if (document.msExitFullscreen) {
|
||||||
|
document.msExitFullscreen()
|
||||||
|
}
|
||||||
this.$router.push('/setup')
|
this.$router.push('/setup')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -38,68 +47,71 @@ export default {
|
|||||||
position relative
|
position relative
|
||||||
width 100%
|
width 100%
|
||||||
height 100%
|
height 100%
|
||||||
background center / 100% 100% url('../../../images/bg.jpg') no-repeat
|
// background center / 100% 100% url('../../../images/bg.jpg') no-repeat
|
||||||
padding-top 6.5%
|
padding-top 60px
|
||||||
overflow hidden
|
overflow hidden
|
||||||
.header
|
.header
|
||||||
position absolute
|
position absolute
|
||||||
top 0
|
top 0
|
||||||
width 100%
|
width 100%
|
||||||
height 14.14%
|
height 88px
|
||||||
background center / 100% 100% url('../../../images/bg-top.png') no-repeat
|
background center / 100% 100% url('../../../images/bg-top.png') no-repeat
|
||||||
h1
|
h1
|
||||||
font-size: .4rem;
|
font-size: 18px;
|
||||||
font-family: 'YouSheBiaoTiHei';
|
font-family: 'YouSheBiaoTiHei';
|
||||||
font-weight: 400;
|
font-weight: 700;
|
||||||
color: transparent;
|
color: transparent;
|
||||||
line-height .4rem
|
line-height 1
|
||||||
height .4rem
|
|
||||||
opacity: 0.89;
|
opacity: 0.89;
|
||||||
letter-spacing .04rem
|
letter-spacing 1px
|
||||||
background: linear-gradient(0deg, #AAD0F6 0%, #D7E7F5 53.3154296875%, #E0EAF6 100%);
|
background: linear-gradient(0deg, #AAD0F6 0%, #D7E7F5 53.3154296875%, #E0EAF6 100%);
|
||||||
filter: drop-shadow(#092F6D 1px 4px 1px);
|
filter: drop-shadow(#092F6D 1px 4px 1px);
|
||||||
-webkit-background-clip: text;
|
-webkit-background-clip: text;
|
||||||
background-clip: text;
|
background-clip: text;
|
||||||
text-align center
|
text-align center
|
||||||
margin-top 1%
|
margin-top 16px
|
||||||
.exit_btn
|
.exit_btn
|
||||||
position absolute
|
position absolute
|
||||||
left 3%
|
left 3%
|
||||||
top 16%
|
top 11%
|
||||||
z-index 100
|
z-index 100
|
||||||
height .3rem
|
height 16px
|
||||||
width .3rem
|
width 16px
|
||||||
line-height .3rem
|
line-height 16px
|
||||||
font-size .3rem
|
font-size 16px
|
||||||
color #AECAF5
|
color #AECAF5
|
||||||
text-align: center;
|
text-align: center;
|
||||||
cursor: pointer;
|
|
||||||
border-radius: 50%;
|
|
||||||
.content
|
.content
|
||||||
width 94%
|
width 98%
|
||||||
height 100%
|
height 100%
|
||||||
margin 0 auto
|
margin 0 auto
|
||||||
padding-bottom 3%
|
padding-bottom 2%
|
||||||
|
.l-wrap
|
||||||
|
width 64%
|
||||||
|
height 100%
|
||||||
|
.r-wrap
|
||||||
|
width 34.5%
|
||||||
|
height 100%
|
||||||
.left_bg
|
.left_bg
|
||||||
position absolute
|
position absolute
|
||||||
left 0
|
left 0
|
||||||
top 0
|
top 0
|
||||||
width 2%
|
width 2%
|
||||||
height 100%
|
height 100%
|
||||||
background center / 100% auto url('../../../images/bg-left.png') no-repeat
|
// background center / 100% auto url('../../../images/bg-left.png') no-repeat
|
||||||
.right_bg
|
.right_bg
|
||||||
position absolute
|
position absolute
|
||||||
right 0
|
right 0
|
||||||
top 0
|
top 0
|
||||||
width 2%
|
width 2%
|
||||||
height 100%
|
height 100%
|
||||||
background center / 100% auto url('../../../images/bg-right.png') no-repeat
|
// background center / 100% auto url('../../../images/bg-right.png') no-repeat
|
||||||
.bottom_bg
|
.bottom_bg
|
||||||
position absolute
|
position absolute
|
||||||
bottom 0
|
bottom 0
|
||||||
width 100%
|
width 100%
|
||||||
height 4%
|
height 4%
|
||||||
background center / auto 100% url('../../../images/bg-bottom.png') no-repeat
|
// background center / auto 100% url('../../../images/bg-bottom.png') no-repeat
|
||||||
.zd-col-8
|
.zd-col-8
|
||||||
width 35%
|
width 35%
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="n_container">
|
<div class="n_container">
|
||||||
<div class="zd-row allHeight">
|
<div class="zd-row allHeight">
|
||||||
<div class="zd-col-10 allHeight hwpl_wrap_1">
|
<div class="hwpl_wrap_1">
|
||||||
<div class="zd-row jcflexstart state_wrap">
|
<div class="zd-row jcflexstart state_wrap">
|
||||||
<div class="state_icon bg_col_1"></div>
|
<div class="state_icon bg_col_1"></div>
|
||||||
<div class="state_title">满货位</div>
|
<div class="state_title">满货位</div>
|
||||||
@@ -11,48 +11,48 @@
|
|||||||
<div class="zd-row pie_num_wrap">
|
<div class="zd-row pie_num_wrap">
|
||||||
<div class="pie_wrap">
|
<div class="pie_wrap">
|
||||||
<div class="pie_item">
|
<div class="pie_item">
|
||||||
<div id="echart_1" style="width: 100%; height: 100%;"></div>
|
<p>{{ Number(detail.use1) / Number(detail.sum1)}}%</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="pie_name">1排</div>
|
<div class="pie_name">1排</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="zd-col-6">
|
<div class="zd-col-6">
|
||||||
<div class="zd-row num_wrap num_wrap_1">
|
<div class="zd-row num_wrap num_wrap_1">
|
||||||
<div class="zd-col-12 num_label">总货位数</div>
|
<div class="zd-col-12"><p class="num_label">总货位数</p></div>
|
||||||
<div class="zd-col-12 num_value">{{detail.sum1}}个</div>
|
<div class="zd-col-12"><p class="num_value">{{detail.sum1}}个</p></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="zd-row num_wrap num_wrap_2">
|
<div class="zd-row num_wrap num_wrap_2">
|
||||||
<div class="zd-col-12 num_label">已用货位</div>
|
<div class="zd-col-12"><p class="num_label">已用货位</p></div>
|
||||||
<div class="zd-col-12 num_value">{{detail.use1}}个</div>
|
<div class="zd-col-12"><p class="num_value">{{detail.use1}}个</p></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="zd-row num_wrap num_wrap_3">
|
<div class="zd-row num_wrap num_wrap_3">
|
||||||
<div class="zd-col-12 num_label">空余货位</div>
|
<div class="zd-col-12"><p class="num_label">空余货位</p></div>
|
||||||
<div class="zd-col-12 num_value">{{detail.empty1}}个</div>
|
<div class="zd-col-12"><p class="num_value">{{detail.empty1}}个</p></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="pie_wrap">
|
<div class="pie_wrap">
|
||||||
<div class="pie_item">
|
<div class="pie_item">
|
||||||
<div id="echart_2" style="width: 100%; height: 100%;"></div>
|
<p>{{ Number(detail.use2) * 100 / Number(detail.sum2) }}%</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="pie_name">2排</div>
|
<div class="pie_name">2排</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="zd-col-6">
|
<div class="zd-col-6">
|
||||||
<div class="zd-row num_wrap num_wrap_1">
|
<div class="zd-row num_wrap num_wrap_1">
|
||||||
<div class="zd-col-12 num_label">总货位数</div>
|
<div class="zd-col-12"><p class="num_label">总货位数</p></div>
|
||||||
<div class="zd-col-12 num_value">{{detail.sum2}}个</div>
|
<div class="zd-col-12"><p class="num_value">{{detail.sum2}}个</p></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="zd-row num_wrap num_wrap_2">
|
<div class="zd-row num_wrap num_wrap_2">
|
||||||
<div class="zd-col-12 num_label">已用货位</div>
|
<div class="zd-col-12"><p class="num_label">已用货位</p></div>
|
||||||
<div class="zd-col-12 num_value">{{detail.use2}}个</div>
|
<div class="zd-col-12"><p class="num_value">{{detail.use2}}个</p></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="zd-row num_wrap num_wrap_3">
|
<div class="zd-row num_wrap num_wrap_3">
|
||||||
<div class="zd-col-12 num_label">空余货位</div>
|
<div class="zd-col-12"><p class="num_label">空余货位</p></div>
|
||||||
<div class="zd-col-12 num_value">{{detail.empty2}}个</div>
|
<div class="zd-col-12"><p class="num_value">{{detail.empty2}}个</p></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="hwpl_wrap_i">
|
<div class="hwpl_wrap_i">
|
||||||
<div class="zd-row flexWrap hw_wrap">
|
<div class="zd-row flexWrap hw_wrap">
|
||||||
<div class="hw_item" v-for="e in point2" :key="e.point_code">
|
<div class="hw_item" v-for="e in point2" :key="e.point_code" :class="{'hw_item_active': e.point_status === '2'}">
|
||||||
<div class="hw_item_i">
|
<div class="hw_item_i">
|
||||||
<p class="zd-row jcflexcenter hw_p1">{{ e.point_code }}</p>
|
<p class="zd-row jcflexcenter hw_p1">{{ e.point_code }}</p>
|
||||||
<p class="zd-row jcflexcenter hw_p2">{{ e.material_name }}</p>
|
<p class="zd-row jcflexcenter hw_p2">{{ e.material_name }}</p>
|
||||||
@@ -60,7 +60,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="zd-row flexWrap hw_wrap">
|
<div class="zd-row flexWrap hw_wrap">
|
||||||
<div class="hw_item" v-for="e in point3" :key="e.point_code">
|
<div class="hw_item" v-for="e in point3" :key="e.point_code" :class="{'hw_item_active': e.point_status === '2'}">
|
||||||
<div class="hw_item_i">
|
<div class="hw_item_i">
|
||||||
<p class="zd-row jcflexcenter hw_p1">{{ e.point_code }}</p>
|
<p class="zd-row jcflexcenter hw_p1">{{ e.point_code }}</p>
|
||||||
<p class="zd-row jcflexcenter hw_p2">{{ e.material_name }}</p>
|
<p class="zd-row jcflexcenter hw_p2">{{ e.material_name }}</p>
|
||||||
@@ -68,7 +68,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="zd-row flexWrap hw_wrap">
|
<div class="zd-row flexWrap hw_wrap">
|
||||||
<div class="hw_item" v-for="e in point4" :key="e.point_code">
|
<div class="hw_item" v-for="e in point4" :key="e.point_code" :class="{'hw_item_active': e.point_status === '2'}">
|
||||||
<div class="hw_item_i">
|
<div class="hw_item_i">
|
||||||
<p class="zd-row jcflexcenter hw_p1">{{ e.point_code }}</p>
|
<p class="zd-row jcflexcenter hw_p1">{{ e.point_code }}</p>
|
||||||
<p class="zd-row jcflexcenter hw_p2">{{ e.material_name }}</p>
|
<p class="zd-row jcflexcenter hw_p2">{{ e.material_name }}</p>
|
||||||
@@ -76,7 +76,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="zd-row flexWrap hw_wrap">
|
<div class="zd-row flexWrap hw_wrap">
|
||||||
<div class="hw_item" v-for="e in point5" :key="e.point_code">
|
<div class="hw_item" v-for="e in point5" :key="e.point_code" :class="{'hw_item_active': e.point_status === '2'}">
|
||||||
<div class="hw_item_i">
|
<div class="hw_item_i">
|
||||||
<p class="zd-row jcflexcenter hw_p1">{{ e.point_code }}</p>
|
<p class="zd-row jcflexcenter hw_p1">{{ e.point_code }}</p>
|
||||||
<p class="zd-row jcflexcenter hw_p2">{{ e.material_name }}</p>
|
<p class="zd-row jcflexcenter hw_p2">{{ e.material_name }}</p>
|
||||||
@@ -85,10 +85,10 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="zd-col-1 gd_wrap">
|
<div class="gd_wrap">
|
||||||
<p class="txt">A<br>G<br>V<br>过<br>道</p>
|
<p class="txt">A<br>G<br>V<br>过<br>道</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="zd-col-12 allHeight hwpl_wrap_2">
|
<div class="hwpl_wrap_2">
|
||||||
<div class="zd-row allHeight flexWrap rowReverse">
|
<div class="zd-row allHeight flexWrap rowReverse">
|
||||||
<div class="hw_item hw_item_2" v-for="e in point1" :key="e.point_code" :class="{'hw_item_active': e.point_status === '2'}">
|
<div class="hw_item hw_item_2" v-for="e in point1" :key="e.point_code" :class="{'hw_item_active': e.point_status === '2'}">
|
||||||
<div class="hw_item_i">
|
<div class="hw_item_i">
|
||||||
@@ -98,7 +98,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="zd-col-1 gd_wrap">
|
<div class="gd_wrap">
|
||||||
<p class="txt">人<br>工<br>取<br>货<br>通<br>道</p>
|
<p class="txt">人<br>工<br>取<br>货<br>通<br>道</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -141,214 +141,6 @@ export default {
|
|||||||
this.point3 = [...res.pointList].slice(183, 204)
|
this.point3 = [...res.pointList].slice(183, 204)
|
||||||
this.point4 = [...res.pointList].slice(204, 225)
|
this.point4 = [...res.pointList].slice(204, 225)
|
||||||
this.point5 = [...res.pointList].slice(225, 246)
|
this.point5 = [...res.pointList].slice(225, 246)
|
||||||
this.setEchart1()
|
|
||||||
this.setEchart2()
|
|
||||||
},
|
|
||||||
setEchart1 () {
|
|
||||||
let value = Number(this.detail.use1) / Number(this.detail.sum1)
|
|
||||||
value = value * 100
|
|
||||||
value = value.toFixed(0)
|
|
||||||
let option = {
|
|
||||||
grid: {
|
|
||||||
top: 0,
|
|
||||||
left: 0,
|
|
||||||
right: 0,
|
|
||||||
bottom: 0,
|
|
||||||
containLabel: true
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
text: `{a|${value}}{b|%}`,
|
|
||||||
x: 'center',
|
|
||||||
y: 'center',
|
|
||||||
textStyle: {
|
|
||||||
rich: {
|
|
||||||
a: {
|
|
||||||
fontSize: 36,
|
|
||||||
color: '#DBE7F6',
|
|
||||||
fontFamily: 'YouSheBiaoTiHei'
|
|
||||||
},
|
|
||||||
b: {
|
|
||||||
fontSize: 20,
|
|
||||||
padding: [9, 0, 0, 3],
|
|
||||||
color: '#fff',
|
|
||||||
fontFamily: 'YouSheBiaoTiHei'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
series: [{
|
|
||||||
name: '进度',
|
|
||||||
type: 'pie',
|
|
||||||
radius: ['76%', '100%'],
|
|
||||||
center: ['50%', '50%'],
|
|
||||||
clockwise: false,
|
|
||||||
label: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
data: [{
|
|
||||||
name: '已完成',
|
|
||||||
value: value,
|
|
||||||
itemStyle: {
|
|
||||||
decal: {
|
|
||||||
color: '#3D92ED',
|
|
||||||
backgroundColor: '#1774E8',
|
|
||||||
dashArrayX: [1, 0],
|
|
||||||
dashArrayY: [1, 4],
|
|
||||||
rotation: -Math.PI / 4
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
name: '未完成',
|
|
||||||
value: 100 - value,
|
|
||||||
itemStyle: {
|
|
||||||
decal: {
|
|
||||||
color: '#597491',
|
|
||||||
backgroundColor: '#2f5175',
|
|
||||||
dashArrayX: [1, 0],
|
|
||||||
dashArrayY: [2, 4],
|
|
||||||
rotation: -Math.PI / 4
|
|
||||||
}
|
|
||||||
},
|
|
||||||
emphasis: {
|
|
||||||
disabled: true
|
|
||||||
}
|
|
||||||
}]
|
|
||||||
}, {
|
|
||||||
type: 'pie',
|
|
||||||
radius: ['99%', '100%'],
|
|
||||||
clockwise: false,
|
|
||||||
itemStyle: {
|
|
||||||
color: '#45B1F1'
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
data: [1]
|
|
||||||
}, {
|
|
||||||
type: 'pie',
|
|
||||||
radius: ['75%', '76%'],
|
|
||||||
clockwise: false,
|
|
||||||
itemStyle: {
|
|
||||||
color: '#45B1F1'
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
data: [1]
|
|
||||||
}]
|
|
||||||
}
|
|
||||||
if (document.getElementById('echart_1') == null) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
this.$echarts.dispose(document.getElementById('echart_1'))
|
|
||||||
let echart = this.$echarts.init(document.getElementById('echart_1'))
|
|
||||||
echart.setOption(option)
|
|
||||||
window.addEventListener('resize', () => {
|
|
||||||
echart.resize()
|
|
||||||
})
|
|
||||||
},
|
|
||||||
setEchart2 () {
|
|
||||||
let value = Number(this.detail.use2) / Number(this.detail.sum2)
|
|
||||||
value = value * 100
|
|
||||||
value = value.toFixed(0)
|
|
||||||
let option = {
|
|
||||||
grid: {
|
|
||||||
top: 0,
|
|
||||||
left: 0,
|
|
||||||
right: 0,
|
|
||||||
bottom: 0,
|
|
||||||
containLabel: true
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
text: `{a|${value}}{b|%}`,
|
|
||||||
x: 'center',
|
|
||||||
y: 'center',
|
|
||||||
textStyle: {
|
|
||||||
rich: {
|
|
||||||
a: {
|
|
||||||
fontSize: 36,
|
|
||||||
color: '#DBE7F6',
|
|
||||||
fontFamily: 'YouSheBiaoTiHei'
|
|
||||||
},
|
|
||||||
b: {
|
|
||||||
fontSize: 20,
|
|
||||||
padding: [9, 0, 0, 3],
|
|
||||||
color: '#fff',
|
|
||||||
fontFamily: 'YouSheBiaoTiHei'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
series: [{
|
|
||||||
name: '进度',
|
|
||||||
type: 'pie',
|
|
||||||
radius: ['76%', '100%'],
|
|
||||||
center: ['50%', '50%'],
|
|
||||||
clockwise: false,
|
|
||||||
label: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
data: [{
|
|
||||||
name: '已完成',
|
|
||||||
value: value,
|
|
||||||
itemStyle: {
|
|
||||||
decal: {
|
|
||||||
color: '#3D92ED',
|
|
||||||
backgroundColor: '#1774E8',
|
|
||||||
dashArrayX: [1, 0],
|
|
||||||
dashArrayY: [1, 4],
|
|
||||||
rotation: -Math.PI / 4
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
name: '未完成',
|
|
||||||
value: 100 - value,
|
|
||||||
itemStyle: {
|
|
||||||
decal: {
|
|
||||||
color: '#597491',
|
|
||||||
backgroundColor: '#2f5175',
|
|
||||||
dashArrayX: [1, 0],
|
|
||||||
dashArrayY: [2, 4],
|
|
||||||
rotation: -Math.PI / 4
|
|
||||||
}
|
|
||||||
},
|
|
||||||
emphasis: {
|
|
||||||
disabled: true
|
|
||||||
}
|
|
||||||
}]
|
|
||||||
}, {
|
|
||||||
type: 'pie',
|
|
||||||
radius: ['99%', '100%'],
|
|
||||||
clockwise: false,
|
|
||||||
itemStyle: {
|
|
||||||
color: '#45B1F1'
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
data: [1]
|
|
||||||
}, {
|
|
||||||
type: 'pie',
|
|
||||||
radius: ['75%', '76%'],
|
|
||||||
clockwise: false,
|
|
||||||
itemStyle: {
|
|
||||||
color: '#45B1F1'
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
data: [1]
|
|
||||||
}]
|
|
||||||
}
|
|
||||||
if (document.getElementById('echart_2') == null) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
this.$echarts.dispose(document.getElementById('echart_2'))
|
|
||||||
let echart = this.$echarts.init(document.getElementById('echart_2'))
|
|
||||||
echart.setOption(option)
|
|
||||||
window.addEventListener('resize', () => {
|
|
||||||
echart.resize()
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -358,21 +150,29 @@ export default {
|
|||||||
@import '~@style/mixin'
|
@import '~@style/mixin'
|
||||||
.n_container
|
.n_container
|
||||||
_wh(100%, 100%)
|
_wh(100%, 100%)
|
||||||
background center / 100% 100% url('../../../images/bg-center.png') no-repeat
|
background-color #08225f
|
||||||
|
border 1px solid #43b3fa
|
||||||
|
// background center / 100% 100% url('../../../images/bg-center.png') no-repeat
|
||||||
padding 2.2% 0 2.2% 2.2%
|
padding 2.2% 0 2.2% 2.2%
|
||||||
.hwpl_wrap_1
|
.hwpl_wrap_1
|
||||||
width 4.32rem
|
width calc(43.9% - 20px)
|
||||||
|
height 100%
|
||||||
.hwpl_wrap_2
|
.hwpl_wrap_2
|
||||||
width 5.56rem
|
width calc(56.1% - 20px)
|
||||||
|
height 100%
|
||||||
.gd_wrap
|
.gd_wrap
|
||||||
width calc(50% - 4.94rem)
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width 20px
|
||||||
|
height 100%
|
||||||
.state_wrap
|
.state_wrap
|
||||||
margin-bottom .38rem
|
margin-bottom 10px
|
||||||
.state_icon
|
.state_icon
|
||||||
_wh(.14rem, .14rem)
|
_wh(10px, 10px)
|
||||||
.state_title
|
.state_title
|
||||||
_font(.2rem, .2rem, #fff,,)
|
_font(12px, 12px, #fff,,)
|
||||||
margin 0 .4rem 0 .1rem
|
margin 0 20px 0 5px
|
||||||
.bg_col_1
|
.bg_col_1
|
||||||
border-radius 4px
|
border-radius 4px
|
||||||
box-shadow 0px 0px 12px 4px rgba(239, 82, 82, .5)
|
box-shadow 0px 0px 12px 4px rgba(239, 82, 82, .5)
|
||||||
@@ -384,20 +184,28 @@ export default {
|
|||||||
border 1px solid rgba(42, 189, 251, 50%)
|
border 1px solid rgba(42, 189, 251, 50%)
|
||||||
background radial-gradient(circle at 50% 100%, rgba(95, 217, 252, 50%), rgba(14, 82, 140, 50%), rgba(10, 54, 106, 50%));
|
background radial-gradient(circle at 50% 100%, rgba(95, 217, 252, 50%), rgba(14, 82, 140, 50%), rgba(10, 54, 106, 50%));
|
||||||
.pie_num_wrap
|
.pie_num_wrap
|
||||||
margin-bottom .2rem
|
margin-bottom 10px
|
||||||
.pie_wrap
|
.pie_wrap
|
||||||
width 1.075rem
|
width 50px
|
||||||
.pie_item
|
.pie_item
|
||||||
position relative
|
position relative
|
||||||
_wh(1.075rem, 1.075rem)
|
_wh(50px, 50px)
|
||||||
padding .14rem .135rem .135rem .14rem
|
|
||||||
background center / 100% auto url('../../../images/pie-bg_1.png') no-repeat
|
background center / 100% auto url('../../../images/pie-bg_1.png') no-repeat
|
||||||
|
p
|
||||||
|
font-size: 12px;
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 1;
|
||||||
|
transform: scale(0.5);
|
||||||
|
white-space: nowrap;
|
||||||
|
padding-top: 25px;
|
||||||
.pie_name
|
.pie_name
|
||||||
_font(.16rem, .16rem, #fff,,center)
|
_font(12px, 20px, #fff,,center)
|
||||||
|
transform: scale(0.5);
|
||||||
.num_wrap
|
.num_wrap
|
||||||
_wh(100%, .3rem)
|
width 100%
|
||||||
padding .1rem .05rem
|
padding 0 2px
|
||||||
margin-bottom .058rem
|
margin-bottom 5px
|
||||||
.num_wrap_1
|
.num_wrap_1
|
||||||
background center / 100% 100% url('../../../images/gl-bg_1.png') no-repeat
|
background center / 100% 100% url('../../../images/gl-bg_1.png') no-repeat
|
||||||
.num_wrap_2
|
.num_wrap_2
|
||||||
@@ -405,27 +213,32 @@ export default {
|
|||||||
.num_wrap_3
|
.num_wrap_3
|
||||||
background center / 100% 100% url('../../../images/gl-bg_3.png') no-repeat
|
background center / 100% 100% url('../../../images/gl-bg_3.png') no-repeat
|
||||||
.num_label
|
.num_label
|
||||||
_font(.1rem, .1rem, #fff,,left)
|
_font(12px, 12px, #fff,,left)
|
||||||
|
transform: scale(0.5);
|
||||||
|
white-space: nowrap;
|
||||||
.num_value
|
.num_value
|
||||||
_font(.11rem, .1rem, #fff,,right)
|
_font(12px, 12px, #fff,,right)
|
||||||
font-family: 'YouSheBiaoTiHei';
|
transform: scale(0.5);
|
||||||
|
white-space: nowrap;
|
||||||
.hwpl_wrap_i
|
.hwpl_wrap_i
|
||||||
_wh(100%, calc(100% - 2.015rem))
|
_wh(100%, calc(100% - 102px))
|
||||||
.hw_wrap
|
.hw_wrap
|
||||||
|
align-content: flex-start;
|
||||||
height 23.4%
|
height 23.4%
|
||||||
margin-bottom 3%
|
margin-bottom 5%
|
||||||
&:last-child
|
&:last-child
|
||||||
margin-bottom 0
|
margin-bottom 0
|
||||||
.hw_item
|
.hw_item
|
||||||
_wh(.58rem, 32%)
|
_wh(13.6%, 26.6%)
|
||||||
padding .5%
|
padding 2px
|
||||||
margin-bottom 1%
|
margin-bottom 1%
|
||||||
border-radius 4px
|
border-radius 4px
|
||||||
background radial-gradient(circle at 50% 100%, rgba(95, 217, 252, 50%), rgba(14, 82, 140, 50%), rgba(10, 54, 106, 50%));
|
background radial-gradient(circle at 50% 100%, rgba(95, 217, 252, 50%), rgba(14, 82, 140, 50%), rgba(10, 54, 106, 50%));
|
||||||
border 4px solid rgba(42, 189, 251, 50%)
|
border 1px solid rgba(42, 189, 251, 50%)
|
||||||
overflow hidden
|
overflow hidden
|
||||||
.hw_item_2
|
.hw_item_2
|
||||||
height 4.94%
|
width: 10.5%;
|
||||||
|
height: 4.92%;
|
||||||
.hw_item_i
|
.hw_item_i
|
||||||
_wh(100%, 100%)
|
_wh(100%, 100%)
|
||||||
background-image linear-gradient(to bottom, transparent 11px, rgba(22, 62, 113, 20%) 1px), linear-gradient(to right, transparent 11px, rgba(22, 62, 113, 20%) 1px)
|
background-image linear-gradient(to bottom, transparent 11px, rgba(22, 62, 113, 20%) 1px), linear-gradient(to right, transparent 11px, rgba(22, 62, 113, 20%) 1px)
|
||||||
@@ -433,20 +246,24 @@ export default {
|
|||||||
background-repeat repeat
|
background-repeat repeat
|
||||||
.hw_item_active
|
.hw_item_active
|
||||||
background radial-gradient(circle at 50% 100%, rgba(251, 135, 105, 80%), #77200F, #58190E);
|
background radial-gradient(circle at 50% 100%, rgba(251, 135, 105, 80%), #77200F, #58190E);
|
||||||
border 4px solid #B55F4E
|
border 1px solid #B55F4E
|
||||||
.hw_item_i
|
.hw_item_i
|
||||||
background-image linear-gradient(to bottom, transparent 11px, rgba(118, 36, 23, 20%) 1px), linear-gradient(to right, transparent 11px, rgba(118, 36, 23, 20%) 1px)
|
background-image linear-gradient(to bottom, transparent 11px, rgba(118, 36, 23, 20%) 1px), linear-gradient(to right, transparent 11px, rgba(118, 36, 23, 20%) 1px)
|
||||||
.hw_p1
|
.hw_p1
|
||||||
_font(.09rem, .09rem,#EFF2FF,,)
|
_font(12px, 1,#EFF2FF,,)
|
||||||
// font-family: 'YouSheBiaoTiHei'
|
|
||||||
font-family: "SourceHanSansCN-Bold";
|
font-family: "SourceHanSansCN-Bold";
|
||||||
height 50%
|
height 50%
|
||||||
text-shadow: 0px 1px 1px #A0D4FF;
|
text-shadow: 0px 1px 1px #A0D4FF;
|
||||||
|
transform: scale(0.5);
|
||||||
|
white-space: nowrap;
|
||||||
.hw_p2
|
.hw_p2
|
||||||
_font(.1rem, .1rem, #EFF2FF,,center)
|
_font(12px, 1, #EFF2FF,,center)
|
||||||
font-family: "SourceHanSansCN-Bold";
|
font-family: "SourceHanSansCN-Bold";
|
||||||
height 50%
|
height 50%
|
||||||
|
transform: scale(0.5);
|
||||||
|
white-space: nowrap;
|
||||||
.txt
|
.txt
|
||||||
_font(.2rem, .4rem, #fff,,center)
|
_font(12px, 16px, #fff,,center)
|
||||||
font-family: "YouSheBiaoTiHei"
|
font-family: "YouSheBiaoTiHei"
|
||||||
|
transform: scale(0.8);
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -32,7 +32,7 @@
|
|||||||
<li>作业时间</li>
|
<li>作业时间</li>
|
||||||
<li>货位</li>
|
<li>货位</li>
|
||||||
<li>物料</li>
|
<li>物料</li>
|
||||||
<li>出入类型</li>
|
<li>类型</li>
|
||||||
<li>数量</li>
|
<li>数量</li>
|
||||||
</ul>
|
</ul>
|
||||||
<div class="scroll_container">
|
<div class="scroll_container">
|
||||||
@@ -42,10 +42,7 @@
|
|||||||
<div class="scroll-item">{{e.time}}</div>
|
<div class="scroll-item">{{e.time}}</div>
|
||||||
<div class="scroll-item">{{e.point_code}}</div>
|
<div class="scroll-item">{{e.point_code}}</div>
|
||||||
<div class="scroll-item">{{e.material_name}}</div>
|
<div class="scroll-item">{{e.material_name}}</div>
|
||||||
<div class="scroll-item">
|
<div class="scroll-item">{{['入库', '出库'][Number(e.direction)]}}</div>
|
||||||
<span class="state" :class="'state_' + e.direction"></span>
|
|
||||||
<p class="state_name">{{['入库', '出库'][Number(e.direction)]}}</p>
|
|
||||||
</div>
|
|
||||||
<div class="scroll-item">{{e.number}}</div>
|
<div class="scroll-item">{{e.number}}</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
@@ -75,14 +72,14 @@ export default {
|
|||||||
computed: {
|
computed: {
|
||||||
defaultOption1 () {
|
defaultOption1 () {
|
||||||
return {
|
return {
|
||||||
step: 0.4, // 数值越大速度滚动越快
|
step: 0.3, // 数值越大速度滚动越快
|
||||||
limitMoveNum: 7, // 开始无缝滚动的数据量 this.dataList.length
|
limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length
|
||||||
hoverStop: true, // 是否开启鼠标悬停stop
|
hoverStop: true, // 是否开启鼠标悬停stop
|
||||||
direction: 1, // 0向下 1向上 2向左 3向右
|
direction: 1, // 0向下 1向上 2向左 3向右
|
||||||
openWatch: true, // 开启数据实时监控刷新dom
|
openWatch: true, // 开启数据实时监控刷新dom
|
||||||
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
||||||
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
||||||
waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
|
waitTime: 5000 // 单步运动停止的时间(默认值1000ms)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -154,7 +151,7 @@ export default {
|
|||||||
let barName = []
|
let barName = []
|
||||||
let barData1 = []
|
let barData1 = []
|
||||||
let barData2 = []
|
let barData2 = []
|
||||||
let totalDate = []
|
// let totalDate = []
|
||||||
this.qs.map(el => {
|
this.qs.map(el => {
|
||||||
barName.push(el.date)
|
barName.push(el.date)
|
||||||
barData1.push(el.innum)
|
barData1.push(el.innum)
|
||||||
@@ -162,51 +159,25 @@ export default {
|
|||||||
})
|
})
|
||||||
let option = {
|
let option = {
|
||||||
grid: {
|
grid: {
|
||||||
top: 90,
|
top: 24,
|
||||||
left: 0,
|
left: 0,
|
||||||
right: 0,
|
right: 0,
|
||||||
bottom: 0,
|
bottom: 0,
|
||||||
containLabel: true
|
containLabel: true
|
||||||
},
|
},
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis',
|
|
||||||
showContent: false,
|
|
||||||
axisPointer: {
|
|
||||||
type: 'line',
|
|
||||||
lineStyle: {
|
|
||||||
type: 'solid',
|
|
||||||
width: '2',
|
|
||||||
color: {
|
|
||||||
type: 'linear',
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
x2: 0,
|
|
||||||
y2: 1,
|
|
||||||
colorStops: [{
|
|
||||||
offset: 0,
|
|
||||||
color: 'rgba(254,254,254,0)'
|
|
||||||
}, {
|
|
||||||
offset: 1,
|
|
||||||
color: 'rgba(254,254,254,0)'
|
|
||||||
}],
|
|
||||||
global: false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
legend: {
|
legend: {
|
||||||
icon: 'rect',
|
icon: 'rect',
|
||||||
top: '0',
|
top: '0',
|
||||||
right: '0',
|
right: '0',
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: '#9BB9DD',
|
color: '#9BB9DD',
|
||||||
fontSize: 32,
|
fontSize: 12,
|
||||||
lineHeight: 32,
|
lineHeight: 20,
|
||||||
padding: [0, 6]
|
padding: [0, 2]
|
||||||
},
|
},
|
||||||
itemGap: 60,
|
itemGap: 20,
|
||||||
itemWidth: 16,
|
itemWidth: 12,
|
||||||
itemHeight: 16,
|
itemHeight: 12,
|
||||||
data: [{name: '入库', itemStyle: {color: '#67D470'}}, {name: '出库', itemStyle: {color: '#1980EA'}}]
|
data: [{name: '入库', itemStyle: {color: '#67D470'}}, {name: '出库', itemStyle: {color: '#1980EA'}}]
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
@@ -224,10 +195,10 @@ export default {
|
|||||||
axisLabel: {
|
axisLabel: {
|
||||||
interval: 0,
|
interval: 0,
|
||||||
color: '#7591B2',
|
color: '#7591B2',
|
||||||
fontSize: 32,
|
fontSize: 12,
|
||||||
lineHeight: 32,
|
lineHeight: 12,
|
||||||
fontFamily: 'SourceHanSansCN-Regular',
|
fontFamily: 'SourceHanSansCN-Regular',
|
||||||
margin: 20
|
margin: 5
|
||||||
},
|
},
|
||||||
data: barName
|
data: barName
|
||||||
},
|
},
|
||||||
@@ -236,19 +207,19 @@ export default {
|
|||||||
axisLine: {
|
axisLine: {
|
||||||
show: false
|
show: false
|
||||||
},
|
},
|
||||||
splitNumber: 4,
|
splitNumber: 3,
|
||||||
axisTick: {
|
axisTick: {
|
||||||
show: false
|
show: false
|
||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
color: '#B5C5D4',
|
color: '#B5C5D4',
|
||||||
fontSize: 32,
|
fontSize: 12,
|
||||||
fontFamily: 'SourceHanSansCN-Regular'
|
fontFamily: 'SourceHanSansCN-Regular'
|
||||||
},
|
},
|
||||||
splitLine: {
|
splitLine: {
|
||||||
show: true,
|
show: true,
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
type: [8, 6],
|
type: [4, 2],
|
||||||
color: '#455C86'
|
color: '#455C86'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -310,14 +281,6 @@ export default {
|
|||||||
])
|
])
|
||||||
},
|
},
|
||||||
data: barData2
|
data: barData2
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '阴影',
|
|
||||||
type: 'pictorialBar',
|
|
||||||
barWidth: '76px',
|
|
||||||
symbol: 'image://' + img.imgSrc3,
|
|
||||||
data: totalDate,
|
|
||||||
z: -1
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
@@ -327,33 +290,6 @@ export default {
|
|||||||
this.$echarts.dispose(document.getElementById('r_echart_1'))
|
this.$echarts.dispose(document.getElementById('r_echart_1'))
|
||||||
let echart = this.$echarts.init(document.getElementById('r_echart_1'))
|
let echart = this.$echarts.init(document.getElementById('r_echart_1'))
|
||||||
echart.setOption(option)
|
echart.setOption(option)
|
||||||
let len = 0
|
|
||||||
this.rtimer1 = setInterval(() => {
|
|
||||||
if (len === barName.length) {
|
|
||||||
len = 0
|
|
||||||
}
|
|
||||||
totalDate[len] = total
|
|
||||||
echart.setOption({
|
|
||||||
series: [{
|
|
||||||
data: barData1
|
|
||||||
}, {
|
|
||||||
data: barData2
|
|
||||||
}, {
|
|
||||||
data: totalDate
|
|
||||||
}
|
|
||||||
]
|
|
||||||
})
|
|
||||||
echart.dispatchAction({
|
|
||||||
type: 'showTip',
|
|
||||||
seriesIndex: 0,
|
|
||||||
dataIndex: len
|
|
||||||
})
|
|
||||||
totalDate = []
|
|
||||||
len++
|
|
||||||
}, 2000)
|
|
||||||
window.addEventListener('resize', () => {
|
|
||||||
echart.resize()
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -364,80 +300,86 @@ export default {
|
|||||||
.n_container
|
.n_container
|
||||||
_wh(100%, 100%)
|
_wh(100%, 100%)
|
||||||
.right_item
|
.right_item
|
||||||
height calc((100% - 0.2rem) / 3)
|
height calc((100% - 20px) / 3)
|
||||||
margin-bottom .1rem
|
margin-bottom 10px
|
||||||
&:last-child
|
&:last-child
|
||||||
margin-bottom 0
|
margin-bottom 0
|
||||||
.title_wrap
|
.title_wrap
|
||||||
height .5rem
|
height 20px
|
||||||
background center / 100% 100% url('../../../images/bg-title_1.png') no-repeat
|
background center / 100% 100% url('../../../images/bg-title_1.png') no-repeat
|
||||||
padding 0 1rem 0 .3rem
|
padding 0 10px 0 15px
|
||||||
p
|
p
|
||||||
font-size .22rem
|
font-size 12px
|
||||||
font-family: 'YouSheBiaoTiHei';
|
font-family: 'YouSheBiaoTiHei';
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: transparent;
|
color: transparent;
|
||||||
line-height .4rem
|
line-height 14px
|
||||||
background: linear-gradient(0deg, #F9FEFF 0%, #F5FCFF 53.3154296875%, #BAE9FF 100%);
|
background: linear-gradient(0deg, #F9FEFF 0%, #F5FCFF 53.3154296875%, #BAE9FF 100%);
|
||||||
-webkit-background-clip: text;
|
-webkit-background-clip: text;
|
||||||
background-clip: text;
|
background-clip: text;
|
||||||
|
// transform: scale(0.7);
|
||||||
|
// transform-origin: left;
|
||||||
.data_wrap
|
.data_wrap
|
||||||
height calc(100% - .5rem)
|
height calc(100% - 20px)
|
||||||
background center / 100% 100% url('../../../images/bg-m_1.png') no-repeat
|
background center / 100% 100% url('../../../images/bg-m_1.png') no-repeat
|
||||||
padding .2rem .25rem
|
padding 10px 12px
|
||||||
.data_wrap_1
|
.data_wrap_1
|
||||||
padding .1rem .25rem .2rem .25rem
|
padding 5px 12px 10px 12px
|
||||||
.scroll_tab
|
.scroll_tab
|
||||||
_wh(100%, .38rem)
|
_wh(100%, 30px)
|
||||||
background center / 100% url('../../../images/table-bg_1.png') no-repeat
|
background center / 100% 100% url('../../../images/table-bg_1.png') no-repeat
|
||||||
li
|
li
|
||||||
float left
|
float left
|
||||||
width 15%
|
width 15%
|
||||||
_font(.16rem,.38rem,#AFBED8,,center)
|
_font(12px,30px,#AFBED8,,center)
|
||||||
font-family: 'SourceHanSansCN-Regular';
|
font-family: 'SourceHanSansCN-Regular';
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
word-wrap break-word
|
word-wrap break-word
|
||||||
word-break break-all
|
word-break break-all
|
||||||
white-space nowrap
|
white-space nowrap
|
||||||
padding 0 .05rem
|
padding 0 2px
|
||||||
overflow hidden
|
overflow hidden
|
||||||
box-sizing border-box
|
box-sizing border-box
|
||||||
&:nth-child(1)
|
&:nth-child(1)
|
||||||
width 40%
|
width 30%
|
||||||
.scroll_tab_1 li
|
&:nth-child(2)
|
||||||
width 50%
|
width 25%
|
||||||
|
.scroll_tab_1
|
||||||
|
li
|
||||||
|
&:nth-child(1), &:nth-child(2)
|
||||||
|
width 50%
|
||||||
.scroll_container
|
.scroll_container
|
||||||
width 100%
|
width 100%
|
||||||
height calc(100% - .38rem)
|
height calc(100% - 30px)
|
||||||
overflow hidden
|
overflow hidden
|
||||||
.scroll-ul
|
.scroll-ul
|
||||||
li
|
li
|
||||||
_wh(100%, .4rem)
|
_wh(100%, 30px)
|
||||||
border-bottom .01rem solid rgba(122,159,224,0.17)
|
border-bottom 1px solid rgba(122,159,224,0.17)
|
||||||
&:nth-child(even)
|
&:nth-child(even)
|
||||||
background rgba(31,46,73,0.7)
|
background rgba(31,46,73,0.7)
|
||||||
&:nth-child(odd)
|
&:nth-child(odd)
|
||||||
background rgba(31,46,73,0.55)
|
background rgba(31,46,73,0.55)
|
||||||
.scroll-item
|
.scroll-item
|
||||||
float left
|
float left
|
||||||
_wh(15%, .39rem)
|
_wh(15%, 30px)
|
||||||
_fj(row, center)
|
_fj(row, center)
|
||||||
_font(.16rem, .16rem, #B2BBD7,,center)
|
_font(12px, 12px, #B2BBD7,,center)
|
||||||
font-family: 'SourceHanSansCN-Regular';
|
font-family: 'SourceHanSansCN-Regular';
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
word-wrap break-word
|
word-wrap break-word
|
||||||
word-break break-all
|
word-break break-all
|
||||||
// white-space nowrap
|
// white-space nowrap
|
||||||
padding 0 .05rem
|
padding 0 2px
|
||||||
overflow hidden
|
overflow hidden
|
||||||
&:nth-child(1)
|
&:nth-child(1)
|
||||||
width 40%
|
width 30%
|
||||||
.state
|
&:nth-child(2)
|
||||||
display block
|
width 25%
|
||||||
_wh(.2rem, .14rem)
|
.scroll-ul_1
|
||||||
.state_name
|
li
|
||||||
width calc(100% - .4rem)
|
.scroll-item
|
||||||
.scroll-ul_1 li .scroll-item
|
&:nth-child(1), &:nth-child(2)
|
||||||
width 50%
|
width 50%
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
105
src/pages/modules/home_back/index.vue
Normal file
105
src/pages/modules/home_back/index.vue
Normal file
@@ -0,0 +1,105 @@
|
|||||||
|
<template>
|
||||||
|
<section class="container">
|
||||||
|
<div class="header">
|
||||||
|
<h1>天能涂板暂存库可视化看板</h1>
|
||||||
|
<!-- <v-time></v-time> -->
|
||||||
|
<!-- <div class="exit_btn iconfont" @click="back"></div> -->
|
||||||
|
</div>
|
||||||
|
<div class="zd-row content">
|
||||||
|
<div class="zd-col-15 allHeight"><v-left></v-left></div>
|
||||||
|
<div class="zd-col-8 allHeight"><v-right></v-right></div>
|
||||||
|
</div>
|
||||||
|
<div class="left_bg"></div>
|
||||||
|
<div class="right_bg"></div>
|
||||||
|
<div class="bottom_bg"></div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// import vTime from '@components/time.vue'
|
||||||
|
import vLeft from './left.vue'
|
||||||
|
import vRight from './right.vue'
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
// vTime,
|
||||||
|
vLeft,
|
||||||
|
vRight
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
back () {
|
||||||
|
this.$router.push('/setup')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="stylus" scoped>
|
||||||
|
.container
|
||||||
|
position relative
|
||||||
|
width 100%
|
||||||
|
height 100%
|
||||||
|
// background center / 100% 100% url('../../../images/bg.jpg') no-repeat
|
||||||
|
padding-top 6.5%
|
||||||
|
overflow hidden
|
||||||
|
.header
|
||||||
|
position absolute
|
||||||
|
top 0
|
||||||
|
width 100%
|
||||||
|
height 14.14%
|
||||||
|
background center / 100% 100% url('../../../images/bg-top.png') no-repeat
|
||||||
|
h1
|
||||||
|
font-size: .36rem;
|
||||||
|
font-family: 'YouSheBiaoTiHei';
|
||||||
|
font-weight: 700;
|
||||||
|
color: transparent;
|
||||||
|
line-height .4rem
|
||||||
|
height .4rem
|
||||||
|
opacity: 0.89;
|
||||||
|
letter-spacing .04rem
|
||||||
|
background: linear-gradient(0deg, #AAD0F6 0%, #D7E7F5 53.3154296875%, #E0EAF6 100%);
|
||||||
|
filter: drop-shadow(#092F6D 1px 4px 1px);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
text-align center
|
||||||
|
margin-top 1%
|
||||||
|
.exit_btn
|
||||||
|
position absolute
|
||||||
|
left 3%
|
||||||
|
top 16%
|
||||||
|
z-index 100
|
||||||
|
height .3rem
|
||||||
|
width .3rem
|
||||||
|
line-height .3rem
|
||||||
|
font-size .3rem
|
||||||
|
color #AECAF5
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 50%;
|
||||||
|
.content
|
||||||
|
width 94%
|
||||||
|
height 100%
|
||||||
|
margin 0 auto
|
||||||
|
padding-bottom 3%
|
||||||
|
.left_bg
|
||||||
|
position absolute
|
||||||
|
left 0
|
||||||
|
top 0
|
||||||
|
width 2%
|
||||||
|
height 100%
|
||||||
|
// background center / 100% auto url('../../../images/bg-left.png') no-repeat
|
||||||
|
.right_bg
|
||||||
|
position absolute
|
||||||
|
right 0
|
||||||
|
top 0
|
||||||
|
width 2%
|
||||||
|
height 100%
|
||||||
|
// background center / 100% auto url('../../../images/bg-right.png') no-repeat
|
||||||
|
.bottom_bg
|
||||||
|
position absolute
|
||||||
|
bottom 0
|
||||||
|
width 100%
|
||||||
|
height 4%
|
||||||
|
// background center / auto 100% url('../../../images/bg-bottom.png') no-repeat
|
||||||
|
.zd-col-8
|
||||||
|
width 35%
|
||||||
|
</style>
|
||||||
454
src/pages/modules/home_back/left.vue
Normal file
454
src/pages/modules/home_back/left.vue
Normal file
@@ -0,0 +1,454 @@
|
|||||||
|
<template>
|
||||||
|
<div class="n_container">
|
||||||
|
<div class="zd-row allHeight">
|
||||||
|
<div class="zd-col-10 allHeight hwpl_wrap_1">
|
||||||
|
<div class="zd-row jcflexstart state_wrap">
|
||||||
|
<div class="state_icon bg_col_1"></div>
|
||||||
|
<div class="state_title">满货位</div>
|
||||||
|
<div class="state_icon bg_col_2"></div>
|
||||||
|
<div class="state_title">空货位</div>
|
||||||
|
</div>
|
||||||
|
<div class="zd-row pie_num_wrap">
|
||||||
|
<div class="pie_wrap">
|
||||||
|
<div class="pie_item">
|
||||||
|
<div id="echart_1" style="width: 100%; height: 100%;"></div>
|
||||||
|
</div>
|
||||||
|
<div class="pie_name">1排</div>
|
||||||
|
</div>
|
||||||
|
<div class="zd-col-6">
|
||||||
|
<div class="zd-row num_wrap num_wrap_1">
|
||||||
|
<div class="zd-col-12 num_label">总货位数</div>
|
||||||
|
<div class="zd-col-12 num_value">{{detail.sum1}}个</div>
|
||||||
|
</div>
|
||||||
|
<div class="zd-row num_wrap num_wrap_2">
|
||||||
|
<div class="zd-col-12 num_label">已用货位</div>
|
||||||
|
<div class="zd-col-12 num_value">{{detail.use1}}个</div>
|
||||||
|
</div>
|
||||||
|
<div class="zd-row num_wrap num_wrap_3">
|
||||||
|
<div class="zd-col-12 num_label">空余货位</div>
|
||||||
|
<div class="zd-col-12 num_value">{{detail.empty1}}个</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="pie_wrap">
|
||||||
|
<div class="pie_item">
|
||||||
|
<div id="echart_2" style="width: 100%; height: 100%;"></div>
|
||||||
|
</div>
|
||||||
|
<div class="pie_name">2排</div>
|
||||||
|
</div>
|
||||||
|
<div class="zd-col-6">
|
||||||
|
<div class="zd-row num_wrap num_wrap_1">
|
||||||
|
<div class="zd-col-12 num_label">总货位数</div>
|
||||||
|
<div class="zd-col-12 num_value">{{detail.sum2}}个</div>
|
||||||
|
</div>
|
||||||
|
<div class="zd-row num_wrap num_wrap_2">
|
||||||
|
<div class="zd-col-12 num_label">已用货位</div>
|
||||||
|
<div class="zd-col-12 num_value">{{detail.use2}}个</div>
|
||||||
|
</div>
|
||||||
|
<div class="zd-row num_wrap num_wrap_3">
|
||||||
|
<div class="zd-col-12 num_label">空余货位</div>
|
||||||
|
<div class="zd-col-12 num_value">{{detail.empty2}}个</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hwpl_wrap_i">
|
||||||
|
<div class="zd-row flexWrap hw_wrap">
|
||||||
|
<div class="hw_item" v-for="e in point2" :key="e.point_code" :class="{'hw_item_active': e.point_status === '2'}">
|
||||||
|
<div class="hw_item_i">
|
||||||
|
<p class="zd-row jcflexcenter hw_p1">{{ e.point_code }}</p>
|
||||||
|
<p class="zd-row jcflexcenter hw_p2">{{ e.material_name }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="zd-row flexWrap hw_wrap">
|
||||||
|
<div class="hw_item" v-for="e in point3" :key="e.point_code" :class="{'hw_item_active': e.point_status === '2'}">
|
||||||
|
<div class="hw_item_i">
|
||||||
|
<p class="zd-row jcflexcenter hw_p1">{{ e.point_code }}</p>
|
||||||
|
<p class="zd-row jcflexcenter hw_p2">{{ e.material_name }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="zd-row flexWrap hw_wrap">
|
||||||
|
<div class="hw_item" v-for="e in point4" :key="e.point_code" :class="{'hw_item_active': e.point_status === '2'}">
|
||||||
|
<div class="hw_item_i">
|
||||||
|
<p class="zd-row jcflexcenter hw_p1">{{ e.point_code }}</p>
|
||||||
|
<p class="zd-row jcflexcenter hw_p2">{{ e.material_name }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="zd-row flexWrap hw_wrap">
|
||||||
|
<div class="hw_item" v-for="e in point5" :key="e.point_code" :class="{'hw_item_active': e.point_status === '2'}">
|
||||||
|
<div class="hw_item_i">
|
||||||
|
<p class="zd-row jcflexcenter hw_p1">{{ e.point_code }}</p>
|
||||||
|
<p class="zd-row jcflexcenter hw_p2">{{ e.material_name }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="zd-col-1 gd_wrap">
|
||||||
|
<p class="txt">A<br>G<br>V<br>过<br>道</p>
|
||||||
|
</div>
|
||||||
|
<div class="zd-col-12 allHeight hwpl_wrap_2">
|
||||||
|
<div class="zd-row allHeight flexWrap rowReverse">
|
||||||
|
<div class="hw_item hw_item_2" v-for="e in point1" :key="e.point_code" :class="{'hw_item_active': e.point_status === '2'}">
|
||||||
|
<div class="hw_item_i">
|
||||||
|
<p class="zd-row jcflexcenter hw_p1">{{ e.point_code }}</p>
|
||||||
|
<p class="zd-row jcflexcenter hw_p2">{{ e.material_name }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="zd-col-1 gd_wrap">
|
||||||
|
<p class="txt">人<br>工<br>取<br>货<br>通<br>道</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { boardPoint } from '@js/getData2.js'
|
||||||
|
export default {
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
interTime: this.$store.getters.setTime,
|
||||||
|
ltimer: null,
|
||||||
|
point1: [],
|
||||||
|
point2: [],
|
||||||
|
point3: [],
|
||||||
|
point4: [],
|
||||||
|
point5: [],
|
||||||
|
detail: {sum1: '', sum2: '', empty1: '', empty2: '', use1: '', use2: ''}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created () {
|
||||||
|
this.refresh()
|
||||||
|
},
|
||||||
|
beforeDestroy () {
|
||||||
|
clearInterval(this.ltimer)
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
refresh () {
|
||||||
|
this._boardPoint()
|
||||||
|
this.ltimer = setInterval(() => {
|
||||||
|
this._boardPoint()
|
||||||
|
}, this.interTime)
|
||||||
|
},
|
||||||
|
async _boardPoint () {
|
||||||
|
let res = await boardPoint()
|
||||||
|
this.detail = res.detail
|
||||||
|
this.point1 = [...res.pointList].slice(0, 162)
|
||||||
|
this.point2 = [...res.pointList].slice(162, 183)
|
||||||
|
this.point3 = [...res.pointList].slice(183, 204)
|
||||||
|
this.point4 = [...res.pointList].slice(204, 225)
|
||||||
|
this.point5 = [...res.pointList].slice(225, 246)
|
||||||
|
this.setEchart1()
|
||||||
|
this.setEchart2()
|
||||||
|
},
|
||||||
|
setEchart1 () {
|
||||||
|
let value = Number(this.detail.use1) / Number(this.detail.sum1)
|
||||||
|
value = value * 100
|
||||||
|
value = value.toFixed(0)
|
||||||
|
let option = {
|
||||||
|
grid: {
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
bottom: 0,
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
text: `{a|${value}}{b|%}`,
|
||||||
|
x: 'center',
|
||||||
|
y: 'center',
|
||||||
|
textStyle: {
|
||||||
|
rich: {
|
||||||
|
a: {
|
||||||
|
fontSize: 36,
|
||||||
|
color: '#DBE7F6',
|
||||||
|
fontFamily: 'YouSheBiaoTiHei'
|
||||||
|
},
|
||||||
|
b: {
|
||||||
|
fontSize: 20,
|
||||||
|
padding: [9, 0, 0, 3],
|
||||||
|
color: '#fff',
|
||||||
|
fontFamily: 'YouSheBiaoTiHei'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [{
|
||||||
|
name: '进度',
|
||||||
|
type: 'pie',
|
||||||
|
radius: ['76%', '100%'],
|
||||||
|
center: ['50%', '50%'],
|
||||||
|
clockwise: false,
|
||||||
|
label: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
data: [{
|
||||||
|
name: '已完成',
|
||||||
|
value: value,
|
||||||
|
itemStyle: {
|
||||||
|
decal: {
|
||||||
|
color: '#3D92ED',
|
||||||
|
backgroundColor: '#1774E8',
|
||||||
|
dashArrayX: [1, 0],
|
||||||
|
dashArrayY: [1, 4],
|
||||||
|
rotation: -Math.PI / 4
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
name: '未完成',
|
||||||
|
value: 100 - value,
|
||||||
|
itemStyle: {
|
||||||
|
decal: {
|
||||||
|
color: '#597491',
|
||||||
|
backgroundColor: '#2f5175',
|
||||||
|
dashArrayX: [1, 0],
|
||||||
|
dashArrayY: [2, 4],
|
||||||
|
rotation: -Math.PI / 4
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
disabled: true
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
type: 'pie',
|
||||||
|
radius: ['99%', '100%'],
|
||||||
|
clockwise: false,
|
||||||
|
itemStyle: {
|
||||||
|
color: '#45B1F1'
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
data: [1]
|
||||||
|
}, {
|
||||||
|
type: 'pie',
|
||||||
|
radius: ['75%', '76%'],
|
||||||
|
clockwise: false,
|
||||||
|
itemStyle: {
|
||||||
|
color: '#45B1F1'
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
data: [1]
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
if (document.getElementById('echart_1') == null) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.$echarts.dispose(document.getElementById('echart_1'))
|
||||||
|
let echart = this.$echarts.init(document.getElementById('echart_1'))
|
||||||
|
echart.setOption(option)
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
echart.resize()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
setEchart2 () {
|
||||||
|
let value = Number(this.detail.use2) / Number(this.detail.sum2)
|
||||||
|
value = value * 100
|
||||||
|
value = value.toFixed(0)
|
||||||
|
let option = {
|
||||||
|
grid: {
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
bottom: 0,
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
text: `{a|${value}}{b|%}`,
|
||||||
|
x: 'center',
|
||||||
|
y: 'center',
|
||||||
|
textStyle: {
|
||||||
|
rich: {
|
||||||
|
a: {
|
||||||
|
fontSize: 36,
|
||||||
|
color: '#DBE7F6',
|
||||||
|
fontFamily: 'YouSheBiaoTiHei'
|
||||||
|
},
|
||||||
|
b: {
|
||||||
|
fontSize: 20,
|
||||||
|
padding: [9, 0, 0, 3],
|
||||||
|
color: '#fff',
|
||||||
|
fontFamily: 'YouSheBiaoTiHei'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [{
|
||||||
|
name: '进度',
|
||||||
|
type: 'pie',
|
||||||
|
radius: ['76%', '100%'],
|
||||||
|
center: ['50%', '50%'],
|
||||||
|
clockwise: false,
|
||||||
|
label: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
data: [{
|
||||||
|
name: '已完成',
|
||||||
|
value: value,
|
||||||
|
itemStyle: {
|
||||||
|
decal: {
|
||||||
|
color: '#3D92ED',
|
||||||
|
backgroundColor: '#1774E8',
|
||||||
|
dashArrayX: [1, 0],
|
||||||
|
dashArrayY: [1, 4],
|
||||||
|
rotation: -Math.PI / 4
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
name: '未完成',
|
||||||
|
value: 100 - value,
|
||||||
|
itemStyle: {
|
||||||
|
decal: {
|
||||||
|
color: '#597491',
|
||||||
|
backgroundColor: '#2f5175',
|
||||||
|
dashArrayX: [1, 0],
|
||||||
|
dashArrayY: [2, 4],
|
||||||
|
rotation: -Math.PI / 4
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
disabled: true
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
type: 'pie',
|
||||||
|
radius: ['99%', '100%'],
|
||||||
|
clockwise: false,
|
||||||
|
itemStyle: {
|
||||||
|
color: '#45B1F1'
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
data: [1]
|
||||||
|
}, {
|
||||||
|
type: 'pie',
|
||||||
|
radius: ['75%', '76%'],
|
||||||
|
clockwise: false,
|
||||||
|
itemStyle: {
|
||||||
|
color: '#45B1F1'
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
data: [1]
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
if (document.getElementById('echart_2') == null) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.$echarts.dispose(document.getElementById('echart_2'))
|
||||||
|
let echart = this.$echarts.init(document.getElementById('echart_2'))
|
||||||
|
echart.setOption(option)
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
echart.resize()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="stylus" scoped>
|
||||||
|
@import '~@style/mixin'
|
||||||
|
.n_container
|
||||||
|
_wh(100%, 100%)
|
||||||
|
background-color #08225f
|
||||||
|
border 1px solid #43b3fa
|
||||||
|
// background center / 100% 100% url('../../../images/bg-center.png') no-repeat
|
||||||
|
padding 2.2% 0 2.2% 2.2%
|
||||||
|
.hwpl_wrap_1
|
||||||
|
width 4.32rem
|
||||||
|
.hwpl_wrap_2
|
||||||
|
width 5.56rem
|
||||||
|
.gd_wrap
|
||||||
|
width calc(50% - 4.94rem)
|
||||||
|
.state_wrap
|
||||||
|
margin-bottom .38rem
|
||||||
|
.state_icon
|
||||||
|
_wh(.14rem, .14rem)
|
||||||
|
.state_title
|
||||||
|
_font(.2rem, .2rem, #fff,,)
|
||||||
|
margin 0 .4rem 0 .1rem
|
||||||
|
.bg_col_1
|
||||||
|
border-radius 4px
|
||||||
|
box-shadow 0px 0px 12px 4px rgba(239, 82, 82, .5)
|
||||||
|
border 1px solid #B55F4E
|
||||||
|
background radial-gradient(circle at 50% 100%, rgba(251, 135, 105, 80%), #77200F, #58190E);
|
||||||
|
.bg_col_2
|
||||||
|
border-radius 4px
|
||||||
|
box-shadow 0px 0px 12px 4px rgba(142, 181, 229, .5)
|
||||||
|
border 1px solid rgba(42, 189, 251, 50%)
|
||||||
|
background radial-gradient(circle at 50% 100%, rgba(95, 217, 252, 50%), rgba(14, 82, 140, 50%), rgba(10, 54, 106, 50%));
|
||||||
|
.pie_num_wrap
|
||||||
|
margin-bottom .2rem
|
||||||
|
.pie_wrap
|
||||||
|
width 1.075rem
|
||||||
|
.pie_item
|
||||||
|
position relative
|
||||||
|
_wh(1.075rem, 1.075rem)
|
||||||
|
padding .14rem .135rem .135rem .14rem
|
||||||
|
background center / 100% auto url('../../../images/pie-bg_1.png') no-repeat
|
||||||
|
.pie_name
|
||||||
|
_font(.16rem, .16rem, #fff,,center)
|
||||||
|
.num_wrap
|
||||||
|
_wh(100%, .3rem)
|
||||||
|
padding .1rem .05rem
|
||||||
|
margin-bottom .058rem
|
||||||
|
.num_wrap_1
|
||||||
|
background center / 100% 100% url('../../../images/gl-bg_1.png') no-repeat
|
||||||
|
.num_wrap_2
|
||||||
|
background center / 100% 100% url('../../../images/gl-bg_2.png') no-repeat
|
||||||
|
.num_wrap_3
|
||||||
|
background center / 100% 100% url('../../../images/gl-bg_3.png') no-repeat
|
||||||
|
.num_label
|
||||||
|
_font(.1rem, .1rem, #fff,,left)
|
||||||
|
.num_value
|
||||||
|
_font(.11rem, .1rem, #fff,,right)
|
||||||
|
font-family: 'YouSheBiaoTiHei';
|
||||||
|
.hwpl_wrap_i
|
||||||
|
_wh(100%, calc(100% - 2.015rem))
|
||||||
|
.hw_wrap
|
||||||
|
height 23.4%
|
||||||
|
margin-bottom 3%
|
||||||
|
&:last-child
|
||||||
|
margin-bottom 0
|
||||||
|
.hw_item
|
||||||
|
_wh(.58rem, 32%)
|
||||||
|
padding .5%
|
||||||
|
margin-bottom 1%
|
||||||
|
border-radius 4px
|
||||||
|
background radial-gradient(circle at 50% 100%, rgba(95, 217, 252, 50%), rgba(14, 82, 140, 50%), rgba(10, 54, 106, 50%));
|
||||||
|
border 4px solid rgba(42, 189, 251, 50%)
|
||||||
|
overflow hidden
|
||||||
|
.hw_item_2
|
||||||
|
height 4.94%
|
||||||
|
.hw_item_i
|
||||||
|
_wh(100%, 100%)
|
||||||
|
background-image linear-gradient(to bottom, transparent 11px, rgba(22, 62, 113, 20%) 1px), linear-gradient(to right, transparent 11px, rgba(22, 62, 113, 20%) 1px)
|
||||||
|
background-size 12px 12px
|
||||||
|
background-repeat repeat
|
||||||
|
.hw_item_active
|
||||||
|
background radial-gradient(circle at 50% 100%, rgba(251, 135, 105, 80%), #77200F, #58190E);
|
||||||
|
border 4px solid #B55F4E
|
||||||
|
.hw_item_i
|
||||||
|
background-image linear-gradient(to bottom, transparent 11px, rgba(118, 36, 23, 20%) 1px), linear-gradient(to right, transparent 11px, rgba(118, 36, 23, 20%) 1px)
|
||||||
|
.hw_p1
|
||||||
|
_font(.09rem, .09rem,#EFF2FF,,)
|
||||||
|
// font-family: 'YouSheBiaoTiHei'
|
||||||
|
font-family: "SourceHanSansCN-Bold";
|
||||||
|
height 50%
|
||||||
|
text-shadow: 0px 1px 1px #A0D4FF;
|
||||||
|
.hw_p2
|
||||||
|
_font(.1rem, .1rem, #EFF2FF,,center)
|
||||||
|
font-family: "SourceHanSansCN-Bold";
|
||||||
|
height 50%
|
||||||
|
.txt
|
||||||
|
_font(.2rem, .4rem, #fff,,center)
|
||||||
|
font-family: "YouSheBiaoTiHei"
|
||||||
|
</style>
|
||||||
443
src/pages/modules/home_back/right.vue
Normal file
443
src/pages/modules/home_back/right.vue
Normal file
@@ -0,0 +1,443 @@
|
|||||||
|
<template>
|
||||||
|
<div class="n_container">
|
||||||
|
<div class="right_item">
|
||||||
|
<div class="title_wrap"><p>库存分析</p></div>
|
||||||
|
<div class="data_wrap data_wrap_1">
|
||||||
|
<ul class="scroll_tab scroll_tab_1">
|
||||||
|
<li>物料名称</li>
|
||||||
|
<li>数量</li>
|
||||||
|
</ul>
|
||||||
|
<div class="scroll_container">
|
||||||
|
<vue-seamless-scroll :data="kcfx" :class-option="defaultOption1">
|
||||||
|
<ul class="scroll-ul scroll-ul_1">
|
||||||
|
<li v-for="(e, i) in kcfx" :key="i">
|
||||||
|
<div class="scroll-item">{{e.material_name}}</div>
|
||||||
|
<div class="scroll-item">{{e.sum}}</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</vue-seamless-scroll>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="right_item">
|
||||||
|
<div class="title_wrap"><p>出入库趋势</p></div>
|
||||||
|
<div class="data_wrap">
|
||||||
|
<div id="r_echart_1" style="width: 100%; height: 100%;"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="right_item">
|
||||||
|
<div class="title_wrap"><p>当日出入作业</p></div>
|
||||||
|
<div class="data_wrap data_wrap_1">
|
||||||
|
<ul class="scroll_tab">
|
||||||
|
<li>作业时间</li>
|
||||||
|
<li>货位</li>
|
||||||
|
<li>物料</li>
|
||||||
|
<li>出入类型</li>
|
||||||
|
<li>数量</li>
|
||||||
|
</ul>
|
||||||
|
<div class="scroll_container">
|
||||||
|
<vue-seamless-scroll :data="today" :class-option="defaultOption1">
|
||||||
|
<ul class="scroll-ul">
|
||||||
|
<li v-for="(e, i) in today" :key="i">
|
||||||
|
<div class="scroll-item">{{e.time}}</div>
|
||||||
|
<div class="scroll-item">{{e.point_code}}</div>
|
||||||
|
<div class="scroll-item">{{e.material_name}}</div>
|
||||||
|
<div class="scroll-item">
|
||||||
|
<span class="state" :class="'state_' + e.direction"></span>
|
||||||
|
<p class="state_name">{{['入库', '出库'][Number(e.direction)]}}</p>
|
||||||
|
</div>
|
||||||
|
<div class="scroll-item">{{e.number}}</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</vue-seamless-scroll>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import symbol3 from '@img/symbol_3.png'
|
||||||
|
import symbol4 from '@img/symbol_4.png'
|
||||||
|
import lineSelected from '@img/line_selected.png'
|
||||||
|
import { boardKc } from '@js/getData2.js'
|
||||||
|
export default {
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
interTime: this.$store.getters.setTime,
|
||||||
|
rtimer: null,
|
||||||
|
rtimer1: null,
|
||||||
|
qs: [],
|
||||||
|
today: [],
|
||||||
|
kcfx: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
defaultOption1 () {
|
||||||
|
return {
|
||||||
|
step: 0.3, // 数值越大速度滚动越快
|
||||||
|
limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length
|
||||||
|
hoverStop: true, // 是否开启鼠标悬停stop
|
||||||
|
direction: 1, // 0向下 1向上 2向左 3向右
|
||||||
|
openWatch: true, // 开启数据实时监控刷新dom
|
||||||
|
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
||||||
|
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
||||||
|
waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created () {
|
||||||
|
this.refresh()
|
||||||
|
},
|
||||||
|
beforeDestroy () {
|
||||||
|
clearInterval(this.rtimer)
|
||||||
|
clearInterval(this.rtimer1)
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
refresh () {
|
||||||
|
this._boardKc()
|
||||||
|
this.rtimer = setInterval(() => {
|
||||||
|
this._boardKc()
|
||||||
|
}, this.interTime)
|
||||||
|
},
|
||||||
|
async _boardKc () {
|
||||||
|
let res = await boardKc()
|
||||||
|
clearInterval(this.rtimer1)
|
||||||
|
let qs = [...res.qs]
|
||||||
|
for (let i = 0; i < qs.length; i++) {
|
||||||
|
for (let j = i + 1; j < qs.length; j++) {
|
||||||
|
if (qs[i].date === qs[j].date) {
|
||||||
|
if (qs[i].direction === '0') {
|
||||||
|
qs[i].innum = qs[i].num
|
||||||
|
}
|
||||||
|
if (qs[i].direction === '1') {
|
||||||
|
qs[i].outnum = qs[i].num
|
||||||
|
}
|
||||||
|
if (qs[j].direction === '0') {
|
||||||
|
qs[i].innum = qs[j].num
|
||||||
|
}
|
||||||
|
if (qs[j].direction === '1') {
|
||||||
|
qs[i].outnum = qs[j].num
|
||||||
|
}
|
||||||
|
qs.splice(j, 1)
|
||||||
|
j--
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
qs.map(el => {
|
||||||
|
if (!(el.hasOwnProperty('innum') || el.hasOwnProperty('outnum'))) {
|
||||||
|
if (el.direction === '0') {
|
||||||
|
el.innum = el.num
|
||||||
|
el.outnum = 0
|
||||||
|
}
|
||||||
|
if (el.direction === '1') {
|
||||||
|
el.outnum = el.num
|
||||||
|
el.innum = 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this.qs = [...qs]
|
||||||
|
this.today = [...res.today]
|
||||||
|
this.kcfx = [...res.kcfx]
|
||||||
|
this.setEchart1()
|
||||||
|
},
|
||||||
|
setEchart1 () {
|
||||||
|
let img = {
|
||||||
|
imgSrc1: symbol3,
|
||||||
|
imgSrc2: symbol4,
|
||||||
|
imgSrc3: lineSelected
|
||||||
|
}
|
||||||
|
let total = 0
|
||||||
|
this.qs.map(el => {
|
||||||
|
total = Math.max(total, Number(el.innum), Number(el.outnum))
|
||||||
|
})
|
||||||
|
let barName = []
|
||||||
|
let barData1 = []
|
||||||
|
let barData2 = []
|
||||||
|
let totalDate = []
|
||||||
|
this.qs.map(el => {
|
||||||
|
barName.push(el.date)
|
||||||
|
barData1.push(el.innum)
|
||||||
|
barData2.push(el.outnum)
|
||||||
|
})
|
||||||
|
let option = {
|
||||||
|
grid: {
|
||||||
|
top: 90,
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
bottom: 0,
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
showContent: false,
|
||||||
|
axisPointer: {
|
||||||
|
type: 'line',
|
||||||
|
lineStyle: {
|
||||||
|
type: 'solid',
|
||||||
|
width: '2',
|
||||||
|
color: {
|
||||||
|
type: 'linear',
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
x2: 0,
|
||||||
|
y2: 1,
|
||||||
|
colorStops: [{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgba(254,254,254,0)'
|
||||||
|
}, {
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgba(254,254,254,0)'
|
||||||
|
}],
|
||||||
|
global: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
icon: 'rect',
|
||||||
|
top: '0',
|
||||||
|
right: '0',
|
||||||
|
textStyle: {
|
||||||
|
color: '#9BB9DD',
|
||||||
|
fontSize: 32,
|
||||||
|
lineHeight: 32,
|
||||||
|
padding: [0, 6]
|
||||||
|
},
|
||||||
|
itemGap: 60,
|
||||||
|
itemWidth: 16,
|
||||||
|
itemHeight: 16,
|
||||||
|
data: [{name: '入库', itemStyle: {color: '#67D470'}}, {name: '出库', itemStyle: {color: '#1980EA'}}]
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 1,
|
||||||
|
color: '#3C5787'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
interval: 0,
|
||||||
|
color: '#7591B2',
|
||||||
|
fontSize: 32,
|
||||||
|
lineHeight: 32,
|
||||||
|
fontFamily: 'SourceHanSansCN-Regular',
|
||||||
|
margin: 20
|
||||||
|
},
|
||||||
|
data: barName
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
splitNumber: 4,
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: '#B5C5D4',
|
||||||
|
fontSize: 32,
|
||||||
|
fontFamily: 'SourceHanSansCN-Regular'
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
type: [8, 6],
|
||||||
|
color: '#455C86'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
max: total
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '入库',
|
||||||
|
type: 'line',
|
||||||
|
symbol: 'image://' + img.imgSrc1,
|
||||||
|
symbolSize: [20, 20],
|
||||||
|
legendHoverLink: true,
|
||||||
|
showSymbol: false,
|
||||||
|
itemStyle: {
|
||||||
|
color: '#67D470',
|
||||||
|
lineStyle: {
|
||||||
|
color: '#67D470',
|
||||||
|
width: 4
|
||||||
|
}
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgba(103,212,112,0.1)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgba(103,212,112,0.74)'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
data: barData1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '出库',
|
||||||
|
type: 'line',
|
||||||
|
symbol: 'image://' + img.imgSrc2,
|
||||||
|
symbolSize: [20, 20],
|
||||||
|
legendHoverLink: true,
|
||||||
|
showSymbol: false,
|
||||||
|
itemStyle: {
|
||||||
|
color: '#58A2E3',
|
||||||
|
lineStyle: {
|
||||||
|
color: '#58A2E3',
|
||||||
|
width: 4
|
||||||
|
}
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgba(45,144,255,0)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgba(45,144,255,0.85)'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
data: barData2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '阴影',
|
||||||
|
type: 'pictorialBar',
|
||||||
|
barWidth: '76px',
|
||||||
|
symbol: 'image://' + img.imgSrc3,
|
||||||
|
data: totalDate,
|
||||||
|
z: -1
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
if (document.getElementById('r_echart_1') == null) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.$echarts.dispose(document.getElementById('r_echart_1'))
|
||||||
|
let echart = this.$echarts.init(document.getElementById('r_echart_1'))
|
||||||
|
echart.setOption(option)
|
||||||
|
// let len = 0
|
||||||
|
// this.rtimer1 = setInterval(() => {
|
||||||
|
// if (len === barName.length) {
|
||||||
|
// len = 0
|
||||||
|
// }
|
||||||
|
// totalDate[len] = total
|
||||||
|
// echart.setOption({
|
||||||
|
// series: [{
|
||||||
|
// data: barData1
|
||||||
|
// }, {
|
||||||
|
// data: barData2
|
||||||
|
// }, {
|
||||||
|
// data: totalDate
|
||||||
|
// }
|
||||||
|
// ]
|
||||||
|
// })
|
||||||
|
// echart.dispatchAction({
|
||||||
|
// type: 'showTip',
|
||||||
|
// seriesIndex: 0,
|
||||||
|
// dataIndex: len
|
||||||
|
// })
|
||||||
|
// totalDate = []
|
||||||
|
// len++
|
||||||
|
// }, 2000)
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
echart.resize()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="stylus" scoped>
|
||||||
|
@import '~@style/mixin'
|
||||||
|
.n_container
|
||||||
|
_wh(100%, 100%)
|
||||||
|
.right_item
|
||||||
|
height calc((100% - 0.2rem) / 3)
|
||||||
|
margin-bottom .1rem
|
||||||
|
&:last-child
|
||||||
|
margin-bottom 0
|
||||||
|
.title_wrap
|
||||||
|
height .5rem
|
||||||
|
background center / 100% 100% url('../../../images/bg-title_1.png') no-repeat
|
||||||
|
padding 0 1rem 0 .3rem
|
||||||
|
p
|
||||||
|
font-size .22rem
|
||||||
|
font-family: 'YouSheBiaoTiHei';
|
||||||
|
font-weight: 400;
|
||||||
|
color: transparent;
|
||||||
|
line-height .4rem
|
||||||
|
background: linear-gradient(0deg, #F9FEFF 0%, #F5FCFF 53.3154296875%, #BAE9FF 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
.data_wrap
|
||||||
|
height calc(100% - .5rem)
|
||||||
|
background center / 100% 100% url('../../../images/bg-m_1.png') no-repeat
|
||||||
|
padding .2rem .25rem
|
||||||
|
.data_wrap_1
|
||||||
|
padding .1rem .25rem .2rem .25rem
|
||||||
|
.scroll_tab
|
||||||
|
_wh(100%, .38rem)
|
||||||
|
background center / 100% url('../../../images/table-bg_1.png') no-repeat
|
||||||
|
li
|
||||||
|
float left
|
||||||
|
width 15%
|
||||||
|
_font(.16rem,.38rem,#AFBED8,,center)
|
||||||
|
font-family: 'SourceHanSansCN-Regular';
|
||||||
|
font-weight: bold;
|
||||||
|
font-style: italic;
|
||||||
|
word-wrap break-word
|
||||||
|
word-break break-all
|
||||||
|
white-space nowrap
|
||||||
|
padding 0 .05rem
|
||||||
|
overflow hidden
|
||||||
|
box-sizing border-box
|
||||||
|
&:nth-child(1)
|
||||||
|
width 40%
|
||||||
|
.scroll_tab_1 li
|
||||||
|
width 50%
|
||||||
|
.scroll_container
|
||||||
|
width 100%
|
||||||
|
height calc(100% - .38rem)
|
||||||
|
overflow hidden
|
||||||
|
.scroll-ul
|
||||||
|
li
|
||||||
|
_wh(100%, .4rem)
|
||||||
|
border-bottom .01rem solid rgba(122,159,224,0.17)
|
||||||
|
&:nth-child(even)
|
||||||
|
background rgba(31,46,73,0.7)
|
||||||
|
&:nth-child(odd)
|
||||||
|
background rgba(31,46,73,0.55)
|
||||||
|
.scroll-item
|
||||||
|
float left
|
||||||
|
_wh(15%, .39rem)
|
||||||
|
_fj(row, center)
|
||||||
|
_font(.16rem, .16rem, #B2BBD7,,center)
|
||||||
|
font-family: 'SourceHanSansCN-Regular';
|
||||||
|
font-style: italic;
|
||||||
|
word-wrap break-word
|
||||||
|
word-break break-all
|
||||||
|
// white-space nowrap
|
||||||
|
padding 0 .05rem
|
||||||
|
overflow hidden
|
||||||
|
&:nth-child(1)
|
||||||
|
width 40%
|
||||||
|
.state
|
||||||
|
display block
|
||||||
|
_wh(.2rem, .14rem)
|
||||||
|
.state_name
|
||||||
|
width calc(100% - .4rem)
|
||||||
|
.scroll-ul_1 li .scroll-item
|
||||||
|
width 50%
|
||||||
|
</style>
|
||||||
@@ -1,9 +1,6 @@
|
|||||||
import Vue from 'vue'
|
import Vue from 'vue'
|
||||||
import Router from 'vue-router'
|
import Router from 'vue-router'
|
||||||
|
|
||||||
const Setup = r => require.ensure([], () => r(require('@page/Setup')), 'Setup')
|
|
||||||
const Index = r => require.ensure([], () => r(require('@page/modules/home/index')), 'screen')
|
|
||||||
|
|
||||||
Vue.use(Router)
|
Vue.use(Router)
|
||||||
|
|
||||||
export default new Router({
|
export default new Router({
|
||||||
@@ -15,11 +12,11 @@ export default new Router({
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/setup',
|
path: '/setup',
|
||||||
component: Setup
|
component: (resolve) => require(['@page/Setup'], resolve)
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/index',
|
path: '/index',
|
||||||
component: Index
|
component: (resolve) => require(['@page/modules/home/index'], resolve)
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -4,22 +4,22 @@
|
|||||||
url('iconfont/iconfont.woff') format('woff'),
|
url('iconfont/iconfont.woff') format('woff'),
|
||||||
url('iconfont/iconfont.ttf') format('truetype');
|
url('iconfont/iconfont.ttf') format('truetype');
|
||||||
}
|
}
|
||||||
@font-face {
|
// @font-face {
|
||||||
font-family: "YouSheBiaoTiHei";
|
// font-family: "YouSheBiaoTiHei";
|
||||||
src: url('font/YouSheBiaoTiHei.ttf') format('truetype');
|
// src: url('font/YouSheBiaoTiHei.ttf') format('truetype');
|
||||||
}
|
// }
|
||||||
@font-face {
|
// @font-face {
|
||||||
font-family: "SourceHanSansCN-Bold";
|
// font-family: "SourceHanSansCN-Bold";
|
||||||
src: url('font/SourceHanSansCN-Bold.otf') format('truetype');
|
// src: url('font/SourceHanSansCN-Bold.otf') format('truetype');
|
||||||
}
|
// }
|
||||||
@font-face {
|
// @font-face {
|
||||||
font-family: "SourceHanSansCN-Regular";
|
// font-family: "SourceHanSansCN-Regular";
|
||||||
src: url('font/SourceHanSansCN-Regular.otf') format('truetype');
|
// src: url('font/SourceHanSansCN-Regular.otf') format('truetype');
|
||||||
}
|
// }
|
||||||
@font-face {
|
// @font-face {
|
||||||
font-family: "SourceHanSansCN-Medium";
|
// font-family: "SourceHanSansCN-Medium";
|
||||||
src: url('font/SourceHanSansCN-Medium.otf') format('truetype');
|
// src: url('font/SourceHanSansCN-Medium.otf') format('truetype');
|
||||||
}
|
// }
|
||||||
.iconfont {
|
.iconfont {
|
||||||
font-family: "iconfont" !important;
|
font-family: "iconfont" !important;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
|
|||||||
@@ -1,14 +1,16 @@
|
|||||||
import * as types from '../types'
|
import * as types from '../types'
|
||||||
import { getStore, setStore } from '@js/mUtils.js'
|
import { getStore, setStore } from '@js/mUtils.js'
|
||||||
|
|
||||||
const baseUrl = process.env.NODE_ENV === 'development' ? 'http://192.168.81.59:8080' : 'http://192.168.46.5:8080/hl_nlapp'
|
const baseUrl = process.env.NODE_ENV === 'development' ? 'http://10.44.101.112:8010' : 'http://10.44.101.112:8010'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* App通用配置
|
* App通用配置
|
||||||
*/
|
*/
|
||||||
const state = {
|
const state = {
|
||||||
baseUrl: getStore('baseUrl') || baseUrl,
|
baseUrl: getStore('baseUrl') || baseUrl,
|
||||||
setTime: getStore('setTime') || 5000,
|
// baseUrl: baseUrl,
|
||||||
|
setTime: getStore('setTime') || 30000,
|
||||||
|
// setTime: 30000,
|
||||||
equipId: getStore('equipId') || '1'
|
equipId: getStore('equipId') || '1'
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user