直盘管
This commit is contained in:
0
src/pages/management/TuiWan.vue
Normal file
0
src/pages/management/TuiWan.vue
Normal file
365
src/pages/management/ZhiPanGuan.vue
Normal file
365
src/pages/management/ZhiPanGuan.vue
Normal file
@@ -0,0 +1,365 @@
|
|||||||
|
<template>
|
||||||
|
<section class="bg">
|
||||||
|
<t-header title="海亮铜管件智能车间直盘管下料看板">
|
||||||
|
<p class="p1" @click="toJump">海亮铜管件智能车间推弯生产看板</p>
|
||||||
|
</t-header>
|
||||||
|
<div class="container">
|
||||||
|
<div class="top_wrap">
|
||||||
|
<div class="left_wrap">
|
||||||
|
<div class="item_wrap">
|
||||||
|
<div class="item_tip">
|
||||||
|
<div class="item_tip_left">盘管下料</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_content item_content_1">
|
||||||
|
<div class="item_td_box_l">
|
||||||
|
<div class="item_td_box">
|
||||||
|
<div class="item_td_inner">
|
||||||
|
<div class="item_td_txt1">双斜切计划</div>
|
||||||
|
<div class="item_td_txt2">10000<span>个</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="item_td_inner">
|
||||||
|
<div class="item_td_txt1">已生产</div>
|
||||||
|
<div class="item_td_txt2">10000<span>个</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_td_box item_td_box_1">
|
||||||
|
<div class="echart_zpg_wrap_1">
|
||||||
|
<div id="echart_zpg_1" style="width: 100%; height: 100%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_td_box_r">
|
||||||
|
<div class="item_td_box">
|
||||||
|
<div class="item_td_inner">
|
||||||
|
<div class="item_td_txt1">无屑计划</div>
|
||||||
|
<div class="item_td_txt2">10000<span>个</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="item_td_inner">
|
||||||
|
<div class="item_td_txt1">已生产</div>
|
||||||
|
<div class="item_td_txt2">10000<span>个</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_td_box item_td_box_1">
|
||||||
|
<div class="echart_zpg_wrap_1">
|
||||||
|
<div id="echart_zpg_2" style="width: 100%; height: 100%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_wrap">
|
||||||
|
<div class="item_tip">
|
||||||
|
<div class="item_tip_left">设备报警信息</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_content"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="right_wrap">
|
||||||
|
<div class="item_wrap">
|
||||||
|
<div class="item_tip">
|
||||||
|
<div class="item_tip_left">直管下料</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_content item_content_1">
|
||||||
|
<div class="item_td_box_l">
|
||||||
|
<div class="item_td_box">
|
||||||
|
<div class="item_td_inner">
|
||||||
|
<div class="item_td_txt1">双斜切计划</div>
|
||||||
|
<div class="item_td_txt2">10000<span>个</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="item_td_inner">
|
||||||
|
<div class="item_td_txt1">已生产</div>
|
||||||
|
<div class="item_td_txt2">10000<span>个</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_td_box item_td_box_1">
|
||||||
|
<div class="echart_zpg_wrap_1">
|
||||||
|
<div id="echart_zpg_3" style="width: 100%; height: 100%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_td_box_r">
|
||||||
|
<div class="item_td_box">
|
||||||
|
<div class="item_td_inner">
|
||||||
|
<div class="item_td_txt1">无屑计划</div>
|
||||||
|
<div class="item_td_txt2">10000<span>个</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="item_td_inner">
|
||||||
|
<div class="item_td_txt1">已生产</div>
|
||||||
|
<div class="item_td_txt2">10000<span>个</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_td_box item_td_box_1">
|
||||||
|
<div class="echart_zpg_wrap_1">
|
||||||
|
<div id="echart_zpg_4" style="width: 100%; height: 100%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_wrap">
|
||||||
|
<div class="item_tip">
|
||||||
|
<div class="item_tip_left">设备状态</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_content"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom_wrap">
|
||||||
|
<div class="item_wrap_l">
|
||||||
|
<div class="item_tip item_tip_l">
|
||||||
|
<div class="item_tip_left">任务列表</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_content"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<section class="bottom"></section>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import THeader from '@components/header.vue'
|
||||||
|
export default {
|
||||||
|
name: 'ZhiPanGuan',
|
||||||
|
components: {
|
||||||
|
THeader
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
myCharts1: '',
|
||||||
|
myCharts2: '',
|
||||||
|
myCharts3: '',
|
||||||
|
myCharts4: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
this.setEchart1()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
toJump () {
|
||||||
|
this.$router.push('/TuiWan')
|
||||||
|
},
|
||||||
|
setEchart1 () {
|
||||||
|
// let value = Number(this.objL1.finish_rate)
|
||||||
|
let value = 50
|
||||||
|
let title = '%'
|
||||||
|
let text = '进度'
|
||||||
|
let option = {
|
||||||
|
title: [
|
||||||
|
{
|
||||||
|
text: '{a|' + value + '}{b|' + title + '}\n{c|' + text + '}',
|
||||||
|
x: 'center',
|
||||||
|
y: 'center',
|
||||||
|
textStyle: {
|
||||||
|
rich: {
|
||||||
|
a: {
|
||||||
|
fontSize: 26,
|
||||||
|
color: '#00D9FF',
|
||||||
|
fontFamily: 'SourceHanSansCN',
|
||||||
|
foontWeight: '700'
|
||||||
|
},
|
||||||
|
b: {
|
||||||
|
fontSize: 16,
|
||||||
|
color: '#ffffff',
|
||||||
|
fontFamily: 'SourceHanSansCN',
|
||||||
|
foontWeight: '700',
|
||||||
|
padding: [10, 0, 0, 3]
|
||||||
|
},
|
||||||
|
c: {
|
||||||
|
color: '#FFFFFF',
|
||||||
|
fontSize: 13,
|
||||||
|
fontWeight: '700',
|
||||||
|
fontFamily: 'SourceHanSansCN',
|
||||||
|
padding: [10, 0, 0, 0]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
polar: {
|
||||||
|
radius: ['75%', '83%'],
|
||||||
|
center: ['50%', '50%']
|
||||||
|
},
|
||||||
|
angleAxis: {
|
||||||
|
max: 100,
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
radiusAxis: {
|
||||||
|
type: 'category',
|
||||||
|
show: true,
|
||||||
|
axisLabel: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{name: '',
|
||||||
|
type: 'bar',
|
||||||
|
roundCap: true,
|
||||||
|
showBackground: true,
|
||||||
|
backgroundStyle: {
|
||||||
|
color: '#0a2543'
|
||||||
|
},
|
||||||
|
data: [value],
|
||||||
|
coordinateSystem: 'polar',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: '#00dfff'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
let option1 = JSON.parse(JSON.stringify(option))
|
||||||
|
let option2 = JSON.parse(JSON.stringify(option))
|
||||||
|
let option3 = JSON.parse(JSON.stringify(option))
|
||||||
|
let option4 = JSON.parse(JSON.stringify(option))
|
||||||
|
option1.title[0].text = '{a|' + '10' + '}{b|' + title + '}\n{c|' + text + '}'
|
||||||
|
option2.title[0].text = '{a|' + '20' + '}{b|' + title + '}\n{c|' + text + '}'
|
||||||
|
option3.title[0].text = '{a|' + '30' + '}{b|' + title + '}\n{c|' + text + '}'
|
||||||
|
option4.title[0].text = '{a|' + '40' + '}{b|' + title + '}\n{c|' + text + '}'
|
||||||
|
let echart1 = document.getElementById('echart_zpg_1')
|
||||||
|
let echart2 = document.getElementById('echart_zpg_2')
|
||||||
|
let echart3 = document.getElementById('echart_zpg_3')
|
||||||
|
let echart4 = document.getElementById('echart_zpg_4')
|
||||||
|
if (this.myCharts1 !== '') {
|
||||||
|
this.myCharts1.dispose()
|
||||||
|
}
|
||||||
|
if (this.myCharts2 !== '') {
|
||||||
|
this.myCharts2.dispose()
|
||||||
|
}
|
||||||
|
if (this.myCharts3 !== '') {
|
||||||
|
this.myCharts3.dispose()
|
||||||
|
}
|
||||||
|
if (this.myCharts4 !== '') {
|
||||||
|
this.myCharts4.dispose()
|
||||||
|
}
|
||||||
|
if (echart1 !== null) {
|
||||||
|
this.myCharts1 = this.$echarts.init(echart1)
|
||||||
|
this.myCharts1.setOption(option1)
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
this.myCharts1.resize()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
if (echart2 !== null) {
|
||||||
|
this.myCharts2 = this.$echarts.init(echart2)
|
||||||
|
this.myCharts2.setOption(option2)
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
this.myCharts2.resize()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
if (echart3 !== null) {
|
||||||
|
this.myCharts3 = this.$echarts.init(echart3)
|
||||||
|
this.myCharts3.setOption(option3)
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
this.myCharts3.resize()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
if (echart4 !== null) {
|
||||||
|
this.myCharts4 = this.$echarts.init(echart4)
|
||||||
|
this.myCharts4.setOption(option4)
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
this.myCharts4.resize()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="stylus" scoped>
|
||||||
|
@import '~@css/mixin'
|
||||||
|
.bg
|
||||||
|
_wh(100%, 100%)
|
||||||
|
overflow hidden
|
||||||
|
.p1
|
||||||
|
position absolute
|
||||||
|
display block
|
||||||
|
cursor pointer
|
||||||
|
left .2509rem
|
||||||
|
top .22rem
|
||||||
|
font-family "SourceHanSansCN"
|
||||||
|
_font(.18rem, .30rem, #fff, 700,)
|
||||||
|
letter-spacing .01rem
|
||||||
|
.container
|
||||||
|
_wh(100%, calc(100% - 1.38rem))
|
||||||
|
padding .3rem .2509rem 0
|
||||||
|
overflow hidden
|
||||||
|
.bottom
|
||||||
|
_wh(100%, .38rem)
|
||||||
|
background center bottom / 19.06rem 100% url(../../assets/images/screen1/bottom.png) no-repeat
|
||||||
|
.top_wrap
|
||||||
|
_wh(100%, 60%)
|
||||||
|
clear both
|
||||||
|
.bottom_wrap
|
||||||
|
_wh(100%, 40%)
|
||||||
|
.left_wrap
|
||||||
|
float left
|
||||||
|
width 49%
|
||||||
|
.right_wrap
|
||||||
|
float right
|
||||||
|
width 49%
|
||||||
|
.item_wrap
|
||||||
|
_wh(100%, 50%)
|
||||||
|
.item_wrap_l
|
||||||
|
_wh(100%, 100%)
|
||||||
|
.item_tip
|
||||||
|
_wh(100%, .32rem)
|
||||||
|
line-height .32rem
|
||||||
|
background center center / 100% 100% url(../../assets/images/screen1/title_bg_2.png) no-repeat
|
||||||
|
.item_tip_l
|
||||||
|
background-image url(../../assets/images/screen1/title_bg_d2.png)
|
||||||
|
.item_tip_left
|
||||||
|
float left
|
||||||
|
_wh(60%, 100%)
|
||||||
|
font-family "SourceHanSansCN"
|
||||||
|
_font(.18rem, inherit, #fff, 700,)
|
||||||
|
letter-spacing .02rem
|
||||||
|
text-shadow 0 0 .09rem #159AFF
|
||||||
|
padding-left .38rem
|
||||||
|
.item_content
|
||||||
|
_wh(100%, calc(100% - .32rem))
|
||||||
|
padding .17rem .17rem .24rem .17rem
|
||||||
|
background-color #011834
|
||||||
|
.item_content_1
|
||||||
|
clear both
|
||||||
|
.item_td_box_l
|
||||||
|
float left
|
||||||
|
_wh(50%, 100%)
|
||||||
|
padding-right .5rem
|
||||||
|
_fj()
|
||||||
|
.item_td_box_r
|
||||||
|
float right
|
||||||
|
_wh(50%, 100%)
|
||||||
|
padding-left .5rem
|
||||||
|
_fj()
|
||||||
|
background center left / .02rem 1.42rem url(../../assets/images/screen1/line_3.png) no-repeat
|
||||||
|
.item_td_box
|
||||||
|
width 50%
|
||||||
|
.item_td_inner
|
||||||
|
_wh(1.8rem, .7rem)
|
||||||
|
background center bottom / 100% 100% url(../../assets/images/screen1/item_4.png) no-repeat
|
||||||
|
padding .05rem
|
||||||
|
&:nth-child(2)
|
||||||
|
margin-top .2rem
|
||||||
|
.item_td_txt1
|
||||||
|
font-family "SourceHanSansCN"
|
||||||
|
_font(.14rem, .3rem, #78b1de,bold,center)
|
||||||
|
.item_td_txt2
|
||||||
|
font-family "SourceHanSansCN"
|
||||||
|
_font(.18rem, .3rem, #fff,bold,center)
|
||||||
|
span
|
||||||
|
font-size .12rem
|
||||||
|
padding 0 .05rem
|
||||||
|
.echart_zpg_wrap_1
|
||||||
|
_wh(80%, 80%)
|
||||||
|
.item_td_box_1
|
||||||
|
_wh(1.6rem, 1.6rem)
|
||||||
|
_fj(center, center)
|
||||||
|
background center bottom / 100% 100% url(../../assets/images/screen1/item_3.png) no-repeat
|
||||||
|
</style>
|
||||||
@@ -7,6 +7,8 @@ const DeviceScreen = r => require.ensure([], () => r(require('@page/DeviceScreen
|
|||||||
const WorkshopScreen = r => require.ensure([], () => r(require('@page/WorkshopScreen')), 'WorkshopScreen')
|
const WorkshopScreen = r => require.ensure([], () => r(require('@page/WorkshopScreen')), 'WorkshopScreen')
|
||||||
const HomeScreen = r => require.ensure([], () => r(require('@page/HomeScreen')), 'HomeScreen')
|
const HomeScreen = r => require.ensure([], () => r(require('@page/HomeScreen')), 'HomeScreen')
|
||||||
|
|
||||||
|
const ZhiPanGuan = r => require.ensure([], () => r(require('@page/management/ZhiPanGuan')), 'ZhiPanGuan')
|
||||||
|
|
||||||
Vue.use(Router)
|
Vue.use(Router)
|
||||||
|
|
||||||
export default new Router({
|
export default new Router({
|
||||||
@@ -20,6 +22,10 @@ export default new Router({
|
|||||||
path: '/setup',
|
path: '/setup',
|
||||||
component: Setup
|
component: Setup
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/ZhiPanGuan',
|
||||||
|
component: ZhiPanGuan
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/MonitoringScreen',
|
path: '/MonitoringScreen',
|
||||||
component: MonitoringScreen
|
component: MonitoringScreen
|
||||||
|
|||||||
Reference in New Issue
Block a user