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

change

Browse Source
This commit is contained in:
caill
2022-08-01 11:16:17 +08:00
parent 42ec1e6f39
commit 79bbac67da
5 changed files with 573 additions and 538 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/assets/css/reset.css
View File

@@ -80,12 +80,12 @@ li {
} }
html, body { html, body {
/* width: 1920px; width: 1920px;
height: 1080px; */ height: 1080px;
width: 100%; /* width: 100%;
height: 100%; height: 100%;
min-width: 1440px; min-width: 1440px;
min-height: 1080px; min-height: 1080px; */
} }
body { body {

4
src/components/header.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<header> <header>
<p>海亮铜管智能车间生产监控中心</p> <p>{{title}}</p>
<div class="data_box clearfix"> <div class="data_box clearfix">
<div class="date_item date">{{date}}</div> <div class="date_item date">{{date}}</div>
<div class="date_item week">{{week}}</div> <div class="date_item week">{{week}}</div>
@@ -12,6 +12,7 @@
<div class="tiem_item seconds">{{seconds}}</div> <div class="tiem_item seconds">{{seconds}}</div>
</div> </div>
</div> </div>
<slot></slot>
</header> </header>
</template> </template>
@@ -67,6 +68,7 @@ export default {
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~@css/mixin' @import '~@css/mixin'
header header
position relative
width 100% width 100%
height 1rem height 1rem
position relative position relative

407
src/pages/DeviceScreen.vue
View File

@@ -1,232 +1,215 @@
<template> <template>
<section class="bg"> <div class="container">
<header> <div class="left_wrap">
<p>海亮铜管智能车间设备监控中心</p> <div class="item_wrap">
<div class="data_box clearfix"> <div class="item_tip">
<div class="date_item date">{{date}}</div> <div class="item_tip_left">设备实时状态</div>
<div class="date_item week">{{week}}</div>
<div class="date_item time clearfix">
<div class="tiem_item hours">{{hours}}</div>
<div class="colon">:</div>
<div class="tiem_item minutes">{{minutes}}</div>
<div class="colon">:</div>
<div class="tiem_item seconds">{{seconds}}</div>
</div> </div>
</div> <div class="item_5_l">
</header> <div class="item_content_0">
<div class="container"> <div id="echart_d01" style="width: 100%; height: 100%"></div>
<div class="left_wrap">
<div class="item_wrap">
<div class="item_tip">
<div class="item_tip_left">设备实时状态</div>
</div> </div>
<div class="item_5_l"> <div class="total">
<div class="item_content_0"> <div v-if="totalNum">{{totalNum}}<span>台</span></div>
<div id="echart_d01" style="width: 100%; height: 100%"></div> </div>
<div v-if="totalNum" class="total-desc">设备总数</div>
</div>
<div class="item_5_r">
<div class="right_1_down_inner_3_i" v-for="(e, i) in arrR01" :key="i">
<div class="right_1_down_inner_3_l">
<span :style="{'background-color': e.color}"><i :style="{'background-color': e.color}"></i></span>
<span>{{e.name}}</span>
</div> </div>
<div class="total"> <div class="right_1_down_inner_3_r">
<div v-if="totalNum">{{totalNum}}<span>台</span></div> <span>{{e.value}}</span>
</div> <span>台</span>
<div v-if="totalNum" class="total-desc">设备总数</div>
</div>
<div class="item_5_r">
<div class="right_1_down_inner_3_i" v-for="(e, i) in arrR01" :key="i">
<div class="right_1_down_inner_3_l">
<span :style="{'background-color': e.color}"><i :style="{'background-color': e.color}"></i></span>
<span>{{e.name}}</span>
</div>
<div class="right_1_down_inner_3_r">
<span>{{e.value}}</span>
<span>台</span>
</div>
</div>
</div>
</div>
<div class="item_wrap">
<div class="item_tip">
<div class="item_tip_left">设备管理</div>
</div>
<div class="item_content_1">
<div class="item_content_1_inner">
<div class="item_content_1_inner_1">弯头工段</div>
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
<p class="item_content_1_inner_2_p1">OEE：</p>
<p class="item_content_1_inner_2_p2">{{sbgl_jo1.oee}}</p>
</div>
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
<p class="item_content_1_inner_2_p1">MIBF：</p>
<p class="item_content_1_inner_2_p2">{{sbgl_jo1.MIBF}}h</p>
</div>
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
<p class="item_content_1_inner_2_p1">MTTR：</p>
<p class="item_content_1_inner_2_p2">{{sbgl_jo1.MTTR}}h</p>
</div>
<div class="item_content_1_inner_2">
<p class="item_content_1_inner_2_p1 cred">报警：</p>
<p class="item_content_1_inner_2_p2 cred">{{sbgl_jo1.err_times}}次</p>
</div>
</div>
<div class="item_content_1_inner">
<div class="item_content_1_inner_1">综合工段</div>
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
<p class="item_content_1_inner_2_p1">OEE：</p>
<p class="item_content_1_inner_2_p2">{{sbgl_jo2.oee}}</p>
</div>
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
<p class="item_content_1_inner_2_p1">MIBF：</p>
<p class="item_content_1_inner_2_p2">{{sbgl_jo2.MIBF}}h</p>
</div>
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
<p class="item_content_1_inner_2_p1">MTTR：</p>
<p class="item_content_1_inner_2_p2">{{sbgl_jo2.MTTR}}h</p>
</div>
<div class="item_content_1_inner_2">
<p class="item_content_1_inner_2_p1 cred">报警：</p>
<p class="item_content_1_inner_2_p2 cred">{{sbgl_jo2.err_times}}次</p>
</div>
</div>
<div class="item_content_1_inner">
<div class="item_content_1_inner_1">成品工段</div>
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
<p class="item_content_1_inner_2_p1">OEE：</p>
<p class="item_content_1_inner_2_p2">{{sbgl_jo3.oee}}</p>
</div>
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
<p class="item_content_1_inner_2_p1">MIBF：</p>
<p class="item_content_1_inner_2_p2">{{sbgl_jo3.MIBF}}h</p>
</div>
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
<p class="item_content_1_inner_2_p1">MTTR：</p>
<p class="item_content_1_inner_2_p2">{{sbgl_jo3.MTTR}}h</p>
</div>
<div class="item_content_1_inner_2">
<p class="item_content_1_inner_2_p1 cred">报警：</p>
<p class="item_content_1_inner_2_p2 cred">{{sbgl_jo3.err_times}}次</p>
</div>
</div>
</div>
</div>
<div class="item_wrap">
<div class="item_tip">
<div class="item_tip_left">设备产能利用</div>
</div>
<div class="item_content_1">
<div id="echart_d02" style="width: 100%; height: 100%"></div>
</div>
</div>
</div>
<div class="center_wrap">
<div class="item_wrap_1 inlblock">
<div class="item_tip item_tip_01">
<div class="item_tip_left">设备综合效率OEE&产能利用效率TEEP</div>
</div>
<div class="item_content_1">
<div id="echart_d03" style="width: 100%; height: 100%"></div>
</div>
</div>
<div class="item_wrap_1 inlblock">
<div class="item_tip item_tip_01">
<div class="item_tip_left">运行设备大类产能比</div>
</div>
<div class="item_content_1">
<div id="echart_d04" style="width: 100%; height: 100%"></div>
</div>
</div>
<div class="item_wrap_2 item_wrap_3">
<div class="item_tip item_tip_2">
<div class="item_tip_left">设备综合统计</div>
</div>
<div class="item_content_1">
<div id="echart_d05" style="width: 100%; height: 100%"></div>
</div>
</div>
<div class="item_wrap_2">
<div class="item_tip item_tip_2">
<div class="item_tip_left">设备状态列表</div>
</div>
<div class="item_content_2">
<div class="scroll_wrap">
<ul class="scroll_tab_1">
<li>设备编号</li>
<li>设备名称</li>
<li>设备大类</li>
<li>设备状态</li>
<!-- <li>产量</li> -->
<li>开机时间</li>
<li>关机时间</li>
<!-- <li>生产日期</li> -->
</ul>
<div class="scroll_container_1 scroll_container_3" v-if="array1.length">
<vue-seamless-scroll :data="array1" :class-option="defaultOption1">
<ul class="scroll-ul_1">
<li v-for="(e, i) in array1" :key="i">
<div class="scroll-ul_1_div">{{e.device_code}}</div>
<div class="scroll-ul_1_div">{{e.device_name}}</div>
<div class="scroll-ul_1_div">{{e.workprocedure_name}}</div>
<div class="scroll-ul_1_div scroll-ul_1_div4"><span :style="{'background-color': e.color}"></span><i>{{e.device_status}}</i></div>
<!-- <div class="scroll-ul_1_div">{{e.product_qty}}</div> -->
<div class="scroll-ul_1_div">{{e.start_time}}</div>
<div class="scroll-ul_1_div">{{e.end_time}}</div>
<!-- <div class="scroll-ul_1_div">{{e.product_time}}</div> -->
</li>
</ul>
</vue-seamless-scroll>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="right_wrap"> <div class="item_wrap">
<div class="item_wrap"> <div class="item_tip">
<div class="item_tip"> <div class="item_tip_left">设备管理</div>
<div class="item_tip_left">设备TOP10故障次数</div>
</div>
<div class="item_content_1">
<div id="echart_d08" style="width: 100%; height: 100%"></div>
</div>
</div> </div>
<div class="item_wrap"> <div class="item_content_1">
<div class="item_tip"> <div class="item_content_1_inner">
<div class="item_tip_left">设备报警信息</div> <div class="item_content_1_inner_1">弯头工段</div>
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
<p class="item_content_1_inner_2_p1">OEE：</p>
<p class="item_content_1_inner_2_p2">{{sbgl_jo1.oee}}</p>
</div>
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
<p class="item_content_1_inner_2_p1">MIBF：</p>
<p class="item_content_1_inner_2_p2">{{sbgl_jo1.MIBF}}h</p>
</div>
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
<p class="item_content_1_inner_2_p1">MTTR：</p>
<p class="item_content_1_inner_2_p2">{{sbgl_jo1.MTTR}}h</p>
</div>
<div class="item_content_1_inner_2">
<p class="item_content_1_inner_2_p1 cred">报警：</p>
<p class="item_content_1_inner_2_p2 cred">{{sbgl_jo1.err_times}}次</p>
</div>
</div> </div>
<div class="item_content_4"> <div class="item_content_1_inner">
<div class="scroll_wrap"> <div class="item_content_1_inner_1">综合工段</div>
<ul class="scroll_tab_2"> <div class="item_content_1_inner_2 item_content_1_inner_2_bg">
<li>编号</li> <p class="item_content_1_inner_2_p1">OEE：</p>
<li>名称</li> <p class="item_content_1_inner_2_p2">{{sbgl_jo2.oee}}</p>
<li>报警原因</li> </div>
<li>报警时间</li> <div class="item_content_1_inner_2 item_content_1_inner_2_bg">
</ul> <p class="item_content_1_inner_2_p1">MIBF：</p>
<div class="scroll_container_2"> <p class="item_content_1_inner_2_p2">{{sbgl_jo2.MIBF}}h</p>
<vue-seamless-scroll :data="array2" :class-option="defaultOption2"> </div>
<ul class="scroll-ul_2"> <div class="item_content_1_inner_2 item_content_1_inner_2_bg">
<li v-for="(e, i) in array2" :key="i"> <p class="item_content_1_inner_2_p1">MTTR：</p>
<div class="scroll-ul_2_div">{{e.device_code}}</div> <p class="item_content_1_inner_2_p2">{{sbgl_jo2.MTTR}}h</p>
<div class="scroll-ul_2_div">{{e.device_name}}</div> </div>
<div class="scroll-ul_2_div">{{e.err_name}}</div> <div class="item_content_1_inner_2">
<div class="scroll-ul_2_div">{{e.start_time}}</div> <p class="item_content_1_inner_2_p1 cred">报警：</p>
</li> <p class="item_content_1_inner_2_p2 cred">{{sbgl_jo2.err_times}}次</p>
</ul> </div>
</vue-seamless-scroll> </div>
</div> <div class="item_content_1_inner">
<div class="item_content_1_inner_1">成品工段</div>
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
<p class="item_content_1_inner_2_p1">OEE：</p>
<p class="item_content_1_inner_2_p2">{{sbgl_jo3.oee}}</p>
</div>
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
<p class="item_content_1_inner_2_p1">MIBF：</p>
<p class="item_content_1_inner_2_p2">{{sbgl_jo3.MIBF}}h</p>
</div>
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
<p class="item_content_1_inner_2_p1">MTTR：</p>
<p class="item_content_1_inner_2_p2">{{sbgl_jo3.MTTR}}h</p>
</div>
<div class="item_content_1_inner_2">
<p class="item_content_1_inner_2_p1 cred">报警：</p>
<p class="item_content_1_inner_2_p2 cred">{{sbgl_jo3.err_times}}次</p>
</div> </div>
</div> </div>
</div> </div>
<div class="item_wrap"> </div>
<div class="item_tip"> <div class="item_wrap">
<div class="item_tip_left">近30天设备故障统计</div> <div class="item_tip">
</div> <div class="item_tip_left">设备产能利用</div>
<!-- <div class="item_content_5"> </div>
<div id="echart_d4" style="width: 100%; height: 100%"></div> <div class="item_content_1">
</div> --> <div id="echart_d02" style="width: 100%; height: 100%"></div>
<div class="item_content_1"> </div>
<div id="echart_d10" style="width: 100%; height: 100%"></div> </div>
</div>
<div class="center_wrap">
<div class="item_wrap_1 inlblock">
<div class="item_tip item_tip_01">
<div class="item_tip_left">设备综合效率OEE&产能利用效率TEEP</div>
</div>
<div class="item_content_1">
<div id="echart_d03" style="width: 100%; height: 100%"></div>
</div>
</div>
<div class="item_wrap_1 inlblock">
<div class="item_tip item_tip_01">
<div class="item_tip_left">运行设备大类产能比</div>
</div>
<div class="item_content_1">
<div id="echart_d04" style="width: 100%; height: 100%"></div>
</div>
</div>
<div class="item_wrap_2 item_wrap_3">
<div class="item_tip item_tip_2">
<div class="item_tip_left">设备综合统计</div>
</div>
<div class="item_content_1">
<div id="echart_d05" style="width: 100%; height: 100%"></div>
</div>
</div>
<div class="item_wrap_2">
<div class="item_tip item_tip_2">
<div class="item_tip_left">设备状态列表</div>
</div>
<div class="item_content_2">
<div class="scroll_wrap">
<ul class="scroll_tab_1">
<li>设备编号</li>
<li>设备名称</li>
<li>设备大类</li>
<li>设备状态</li>
<!-- <li>产量</li> -->
<li>开机时间</li>
<li>关机时间</li>
<!-- <li>生产日期</li> -->
</ul>
<div class="scroll_container_1 scroll_container_3" v-if="array1.length">
<vue-seamless-scroll :data="array1" :class-option="defaultOption1">
<ul class="scroll-ul_1">
<li v-for="(e, i) in array1" :key="i">
<div class="scroll-ul_1_div">{{e.device_code}}</div>
<div class="scroll-ul_1_div">{{e.device_name}}</div>
<div class="scroll-ul_1_div">{{e.workprocedure_name}}</div>
<div class="scroll-ul_1_div scroll-ul_1_div4"><span :style="{'background-color': e.color}"></span><i>{{e.device_status}}</i></div>
<!-- <div class="scroll-ul_1_div">{{e.product_qty}}</div> -->
<div class="scroll-ul_1_div">{{e.start_time}}</div>
<div class="scroll-ul_1_div">{{e.end_time}}</div>
<!-- <div class="scroll-ul_1_div">{{e.product_time}}</div> -->
</li>
</ul>
</vue-seamless-scroll>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<section class="bottom"></section> <div class="right_wrap">
</section> <div class="item_wrap">
<div class="item_tip">
<div class="item_tip_left">设备TOP10故障次数</div>
</div>
<div class="item_content_1">
<div id="echart_d08" style="width: 100%; height: 100%"></div>
</div>
</div>
<div class="item_wrap">
<div class="item_tip">
<div class="item_tip_left">设备报警信息</div>
</div>
<div class="item_content_4">
<div class="scroll_wrap">
<ul class="scroll_tab_2">
<li>编号</li>
<li>名称</li>
<li>报警原因</li>
<li>报警时间</li>
</ul>
<div class="scroll_container_2">
<vue-seamless-scroll :data="array2" :class-option="defaultOption2">
<ul class="scroll-ul_2">
<li v-for="(e, i) in array2" :key="i">
<div class="scroll-ul_2_div">{{e.device_code}}</div>
<div class="scroll-ul_2_div">{{e.device_name}}</div>
<div class="scroll-ul_2_div">{{e.err_name}}</div>
<div class="scroll-ul_2_div">{{e.start_time}}</div>
</li>
</ul>
</vue-seamless-scroll>
</div>
</div>
</div>
</div>
<div class="item_wrap">
<div class="item_tip">
<div class="item_tip_left">近30天设备故障统计</div>
</div>
<!-- <div class="item_content_5">
<div id="echart_d4" style="width: 100%; height: 100%"></div>
</div> -->
<div class="item_content_1">
<div id="echart_d10" style="width: 100%; height: 100%"></div>
</div>
</div>
</div>
</div>
</template> </template>
<script> <script>

38
src/pages/HomeScreen.vue
View File

@@ -1,16 +1,21 @@
<template> <template>
<section class="box"> <section class="box">
<t-header :title="title1">
<p class="p1" @click="toJump">{{title2}}</p>
</t-header>
<Monitoring-Screen v-if="page === 'two'"></Monitoring-Screen> <Monitoring-Screen v-if="page === 'two'"></Monitoring-Screen>
<Device-Screen v-if="page === 'one'"></Device-Screen> <Device-Screen v-if="page === 'one'"></Device-Screen>
</section> </section>
</template> </template>
<script> <script>
import THeader from '@components/header.vue'
import MonitoringScreen from './MonitoringScreen.vue' import MonitoringScreen from './MonitoringScreen.vue'
import DeviceScreen from './DeviceScreen.vue' import DeviceScreen from './DeviceScreen.vue'
export default { export default {
name: 'HomeScreen', name: 'HomeScreen',
components: { components: {
THeader,
MonitoringScreen, MonitoringScreen,
DeviceScreen DeviceScreen
}, },
@@ -21,14 +26,38 @@ export default {
iTime: this.$store.getters.setTime1 iTime: this.$store.getters.setTime1
} }
}, },
computed: {
title1 () {
let t = ''
t = this.page === 'one' ? '海亮铜管智能车间设备监控中心' : '海亮铜管智能车间生产监控中心'
return t
},
title2 () {
let t = ''
t = this.page === 'two' ? '海亮铜管智能车间设备监控中心' : '海亮铜管智能车间生产监控中心'
return t
}
},
mounted () { mounted () {
this.swipePage() this.swipePage()
}, },
beforeDestroy () {
this.$once('hook:beforeDestroy', () => {
clearInterval(this.timer)
})
},
methods: { methods: {
swipePage () { swipePage () {
this.timer = setInterval(() => { this.timer = setInterval(() => {
this.page = this.page === 'one' ? 'two' : 'one' this.page = this.page === 'one' ? 'two' : 'one'
}, this.iTime) }, this.iTime)
},
toJump () {
window.clearInterval(this.timer)
this.page = this.page === 'one' ? 'two' : 'one'
setTimeout(() => {
this.swipePage()
}, 2000)
} }
} }
} }
@@ -39,4 +68,13 @@ export default {
.box .box
_wh(100%, 100%) _wh(100%, 100%)
overflow hidden overflow hidden
.p1
position absolute
display block
cursor pointer
left .2509rem
top .22rem
font-family "SourceHanSansCN"
_font(.18rem, .30rem, #fff, 700,)
letter-spacing .01rem
</style> </style>

654
src/pages/MonitoringScreen.vue
View File

@@ -1,300 +1,289 @@
<template> <template>
<section class="bg"> <div class="container">
<t-header title="海亮铜管智能车间生产监控中心"></t-header> <div class="left_wrap">
<div class="container"> <div class="item_wrap">
<div class="left_wrap"> <div class="item_tip">
<div class="item_wrap"> <div class="item_tip_left" style="width: 40%">计划达成</div>
<div class="item_tip"> <div class="item_tip_right" style="width: 60%">
<div class="item_tip_left" style="width: 40%">计划达成</div> <span :class="{'span1': swiper === true}">日计划达成</span><span :class="{'span1': swiper === false}">/月计划达成</span>
<div class="item_tip_right" style="width: 60%">
<span :class="{'span1': swiper === true}">日计划达成</span><span :class="{'span1': swiper === false}">/月计划达成</span>
</div>
</div> </div>
<div class="swiper_wrap"> </div>
<div class="swiper_wrap_con"> <div class="swiper_wrap">
<div v-if="swiper === false" class="swiper_item"> <div class="swiper_wrap_con">
<div class="item_content_1_inner"> <div v-if="swiper === false" class="swiper_item">
<div class="item_content_1_inner_1">弯头工段</div> <div class="item_content_1_inner">
<div class="item_content_1_inner_2 item_content_1_inner_2_bg"> <div class="item_content_1_inner_1">弯头工段</div>
<p class="item_content_1_inner_2_p1">{{jo1.plan_qty === '' ? 0 : jo1.plan_qty}}</p> <div class="item_content_1_inner_2 item_content_1_inner_2_bg">
<p class="item_content_1_inner_2_p2">日计划量</p> <p class="item_content_1_inner_2_p1">{{jo1.plan_qty === '' ? 0 : jo1.plan_qty}}</p>
</div> <p class="item_content_1_inner_2_p2">日计划量</p>
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
<p class="item_content_1_inner_2_p1">{{jo1.real_qty === '' ? 0 : jo1.real_qty}}</p>
<p class="item_content_1_inner_2_p2">日完成量</p>
</div>
<div class="item_content_1_inner_2">
<p class="item_content_1_inner_2_p1">{{jo1.finish_rate === '' ? 0 : jo1.finish_rate}}</p>
<p class="item_content_1_inner_2_p2">日完成率</p>
</div>
</div> </div>
<div class="item_content_1_inner"> <div class="item_content_1_inner_2 item_content_1_inner_2_bg">
<div class="item_content_1_inner_1">综合工段</div> <p class="item_content_1_inner_2_p1">{{jo1.real_qty === '' ? 0 : jo1.real_qty}}</p>
<div class="item_content_1_inner_2 item_content_1_inner_2_bg"> <p class="item_content_1_inner_2_p2">日完成量</p>
<p class="item_content_1_inner_2_p1">{{jo2.plan_qty === '' ? 0 : jo2.plan_qty}}</p>
<p class="item_content_1_inner_2_p2">日计划量</p>
</div>
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
<p class="item_content_1_inner_2_p1">{{jo2.real_qty === '' ? 0 : jo2.real_qty}}</p>
<p class="item_content_1_inner_2_p2">日完成量</p>
</div>
<div class="item_content_1_inner_2">
<p class="item_content_1_inner_2_p1">{{jo2.finish_rate === '' ? 0 : jo2.finish_rate}}</p>
<p class="item_content_1_inner_2_p2">日完成率</p>
</div>
</div> </div>
<div class="item_content_1_inner"> <div class="item_content_1_inner_2">
<div class="item_content_1_inner_1">成品工段</div> <p class="item_content_1_inner_2_p1">{{jo1.finish_rate === '' ? 0 : jo1.finish_rate}}</p>
<div class="item_content_1_inner_2 item_content_1_inner_2_bg"> <p class="item_content_1_inner_2_p2">日完成率</p>
<p class="item_content_1_inner_2_p1">{{jo3.plan_qty === '' ? 0 : jo3.plan_qty}}</p>
<p class="item_content_1_inner_2_p2">日计划量</p>
</div>
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
<p class="item_content_1_inner_2_p1">{{jo3.real_qty === '' ? 0 : jo3.real_qty}}</p>
<p class="item_content_1_inner_2_p2">日完成量</p>
</div>
<div class="item_content_1_inner_2">
<p class="item_content_1_inner_2_p1">{{jo3.finish_rate === '' ? 0 : jo3.finish_rate}}</p>
<p class="item_content_1_inner_2_p2">日完成率</p>
</div>
</div> </div>
</div> </div>
<div v-else class="swiper_item"> <div class="item_content_1_inner">
<div class="item_content_1_inner"> <div class="item_content_1_inner_1">综合工段</div>
<div class="item_content_1_inner_1">弯头工段</div> <div class="item_content_1_inner_2 item_content_1_inner_2_bg">
<div class="item_content_1_inner_2 item_content_1_inner_2_bg"> <p class="item_content_1_inner_2_p1">{{jo2.plan_qty === '' ? 0 : jo2.plan_qty}}</p>
<p class="item_content_1_inner_2_p1">{{joo1.plan_qty === '' ? 0 : joo1.plan_qty}}</p> <p class="item_content_1_inner_2_p2">日计划量</p>
<p class="item_content_1_inner_2_p2">月计划量</p>
</div>
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
<p class="item_content_1_inner_2_p1">{{joo1.real_qty === '' ? 0 : joo1.real_qty}}</p>
<p class="item_content_1_inner_2_p2">月完成量</p>
</div>
<div class="item_content_1_inner_2">
<p class="item_content_1_inner_2_p1">{{joo1.finish_rate === '' ? 0 : joo1.finish_rate}}</p>
<p class="item_content_1_inner_2_p2">月完成率</p>
</div>
</div> </div>
<div class="item_content_1_inner"> <div class="item_content_1_inner_2 item_content_1_inner_2_bg">
<div class="item_content_1_inner_1">综合工段</div> <p class="item_content_1_inner_2_p1">{{jo2.real_qty === '' ? 0 : jo2.real_qty}}</p>
<div class="item_content_1_inner_2 item_content_1_inner_2_bg"> <p class="item_content_1_inner_2_p2">日完成量</p>
<p class="item_content_1_inner_2_p1">{{joo2.plan_qty === '' ? 0 : joo2.plan_qty}}</p>
<p class="item_content_1_inner_2_p2">月计划量</p>
</div>
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
<p class="item_content_1_inner_2_p1">{{joo2.real_qty === '' ? 0 : joo2.real_qty}}</p>
<p class="item_content_1_inner_2_p2">月完成量</p>
</div>
<div class="item_content_1_inner_2">
<p class="item_content_1_inner_2_p1">{{joo2.finish_rate === '' ? 0 : joo2.finish_rate}}</p>
<p class="item_content_1_inner_2_p2">月完成率</p>
</div>
</div> </div>
<div class="item_content_1_inner"> <div class="item_content_1_inner_2">
<div class="item_content_1_inner_1">成品工段</div> <p class="item_content_1_inner_2_p1">{{jo2.finish_rate === '' ? 0 : jo2.finish_rate}}</p>
<div class="item_content_1_inner_2 item_content_1_inner_2_bg"> <p class="item_content_1_inner_2_p2">日完成率</p>
<p class="item_content_1_inner_2_p1">{{joo3.plan_qty === '' ? 0 : joo3.plan_qty}}</p> </div>
<p class="item_content_1_inner_2_p2">月计划量</p> </div>
</div> <div class="item_content_1_inner">
<div class="item_content_1_inner_2 item_content_1_inner_2_bg"> <div class="item_content_1_inner_1">成品工段</div>
<p class="item_content_1_inner_2_p1">{{joo3.real_qty === '' ? 0 : joo3.real_qty}}</p> <div class="item_content_1_inner_2 item_content_1_inner_2_bg">
<p class="item_content_1_inner_2_p2">月完成量</p> <p class="item_content_1_inner_2_p1">{{jo3.plan_qty === '' ? 0 : jo3.plan_qty}}</p>
</div> <p class="item_content_1_inner_2_p2">日计划量</p>
<div class="item_content_1_inner_2"> </div>
<p class="item_content_1_inner_2_p1">{{joo3.finish_rate === '' ? 0 : joo3.finish_rate}}</p> <div class="item_content_1_inner_2 item_content_1_inner_2_bg">
<p class="item_content_1_inner_2_p2">月完成率</p> <p class="item_content_1_inner_2_p1">{{jo3.real_qty === '' ? 0 : jo3.real_qty}}</p>
</div> <p class="item_content_1_inner_2_p2">日完成量</p>
</div>
<div class="item_content_1_inner_2">
<p class="item_content_1_inner_2_p1">{{jo3.finish_rate === '' ? 0 : jo3.finish_rate}}</p>
<p class="item_content_1_inner_2_p2">日完成率</p>
</div>
</div>
</div>
<div v-else class="swiper_item">
<div class="item_content_1_inner">
<div class="item_content_1_inner_1">弯头工段</div>
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
<p class="item_content_1_inner_2_p1">{{joo1.plan_qty === '' ? 0 : joo1.plan_qty}}</p>
<p class="item_content_1_inner_2_p2">月计划量</p>
</div>
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
<p class="item_content_1_inner_2_p1">{{joo1.real_qty === '' ? 0 : joo1.real_qty}}</p>
<p class="item_content_1_inner_2_p2">月完成量</p>
</div>
<div class="item_content_1_inner_2">
<p class="item_content_1_inner_2_p1">{{joo1.finish_rate === '' ? 0 : joo1.finish_rate}}</p>
<p class="item_content_1_inner_2_p2">月完成率</p>
</div>
</div>
<div class="item_content_1_inner">
<div class="item_content_1_inner_1">综合工段</div>
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
<p class="item_content_1_inner_2_p1">{{joo2.plan_qty === '' ? 0 : joo2.plan_qty}}</p>
<p class="item_content_1_inner_2_p2">月计划量</p>
</div>
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
<p class="item_content_1_inner_2_p1">{{joo2.real_qty === '' ? 0 : joo2.real_qty}}</p>
<p class="item_content_1_inner_2_p2">月完成量</p>
</div>
<div class="item_content_1_inner_2">
<p class="item_content_1_inner_2_p1">{{joo2.finish_rate === '' ? 0 : joo2.finish_rate}}</p>
<p class="item_content_1_inner_2_p2">月完成率</p>
</div>
</div>
<div class="item_content_1_inner">
<div class="item_content_1_inner_1">成品工段</div>
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
<p class="item_content_1_inner_2_p1">{{joo3.plan_qty === '' ? 0 : joo3.plan_qty}}</p>
<p class="item_content_1_inner_2_p2">月计划量</p>
</div>
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
<p class="item_content_1_inner_2_p1">{{joo3.real_qty === '' ? 0 : joo3.real_qty}}</p>
<p class="item_content_1_inner_2_p2">月完成量</p>
</div>
<div class="item_content_1_inner_2">
<p class="item_content_1_inner_2_p1">{{joo3.finish_rate === '' ? 0 : joo3.finish_rate}}</p>
<p class="item_content_1_inner_2_p2">月完成率</p>
</div> </div>
</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_1">
<div id="echart_d1" style="width: 100%; height: 100%"></div>
</div>
</div>
<div class="item_wrap">
<div class="item_tip">
<div class="item_tip_left">近30天产量走势</div>
</div>
<div class="item_content_1">
<div id="echart_d2" style="width: 100%; height: 100%"></div>
</div> </div>
</div> </div>
</div> </div>
<div class="center_wrap"> <div class="item_wrap">
<div class="item_wrap_2"> <div class="item_tip">
<div class="item_tip item_tip_2"> <div class="item_tip_left">近一周工段产量</div>
<div class="item_tip_left">今日排产生产进度跟踪</div> </div>
</div> <div class="item_content_1">
<div class="item_content_2"> <div id="echart_d1" style="width: 100%; height: 100%"></div>
<div class="scroll_wrap"> </div>
<ul class="scroll_tab_1"> </div>
<li>工单号</li> <div class="item_wrap">
<li>计划完成</li> <div class="item_tip">
<li>实际完成</li> <div class="item_tip_left">近30天产量走势</div>
<li>差距</li> </div>
<li>完成率</li> <div class="item_content_1">
<li>进度</li> <div id="echart_d2" style="width: 100%; height: 100%"></div>
</ul> </div>
<div class="scroll_container_1"> </div>
<vue-seamless-scroll :data="array1" :class-option="defaultOption1"> </div>
<ul class="scroll-ul_1"> <div class="center_wrap">
<li v-for="(e, i) in array1" :key="i"> <div class="item_wrap_2">
<div class="scroll-ul_1_div">{{e.produceorder_code}}</div> <div class="item_tip item_tip_2">
<div class="scroll-ul_1_div">{{e.plan_qty}}</div> <div class="item_tip_left">今日排产生产进度跟踪</div>
<div class="scroll-ul_1_div">{{e.real_qty}}</div> </div>
<div class="scroll-ul_1_div">{{e.gap_qty}}</div> <div class="item_content_2">
<div class="scroll-ul_1_div">{{e.finish_rate | numFixed(1)}}</div> <div class="scroll_wrap">
<div class="scroll-ul_1_div"> <ul class="scroll_tab_1">
<div class="progress_line_wrap"> <li>工单号</li>
<div class="progress_dot_wrap"> <li>物料编码</li>
<div class="progress_dot" :style="{'left': Number(e.finish_rate) + '%'}"></div> <li>物料规格</li>
</div> <li>计划完成</li>
<li>实际完成</li>
<li>差距</li>
<li>完成率</li>
<li>进度</li>
</ul>
<div class="scroll_container_1">
<vue-seamless-scroll :data="array1" :class-option="defaultOption1">
<ul class="scroll-ul_1">
<li v-for="(e, i) in array1" :key="i">
<div class="scroll-ul_1_div">{{e.produceorder_code}}</div>
<div class="scroll-ul_1_div">{{e.material_code}}</div>
<div class="scroll-ul_1_div">{{e.material_spec}}</div>
<div class="scroll-ul_1_div">{{e.plan_qty}}</div>
<div class="scroll-ul_1_div">{{e.real_qty}}</div>
<div class="scroll-ul_1_div">{{e.gap_qty}}</div>
<div class="scroll-ul_1_div">{{e.finish_rate | numFixed(1)}}%</div>
<div class="scroll-ul_1_div">
<div class="progress_line_wrap">
<div class="progress_dot_wrap">
<div class="progress_dot" :style="{'left': Number(e.finish_rate) + '%'}"></div>
</div> </div>
</div> </div>
</li> </div>
</ul> </li>
</vue-seamless-scroll> </ul>
</div> </vue-seamless-scroll>
</div> </div>
</div> </div>
</div> </div>
<div class="item_wrap_2 item_wrap_3"> </div>
<div class="item_tip item_tip_2"> <div class="item_wrap_2 item_wrap_3">
<div class="item_tip_left">今日未完成的订单</div> <div class="item_tip item_tip_2">
<div class="item_tip_left">今日未完成的订单</div>
</div>
<div class="item_content_2">
<div class="scroll_wrap">
<ul class="scroll_tab_1 scroll_tab_2">
<li>订单号</li>
<li>产品编号</li>
<li>产品规格</li>
<li>订单数量</li>
<li>实际完成</li>
<li>计划完成日期</li>
</ul>
<div class="scroll_container_1">
<vue-seamless-scroll :data="array2" :class-option="defaultOption1">
<ul class="scroll-ul_1 scroll-ul_2">
<li v-for="(e, i) in array2" :key="i">
<div class="scroll-ul_1_div">{{e.produceorder_code}}</div>
<div class="scroll-ul_1_div">{{e.material_code}}</div>
<div class="scroll-ul_1_div">{{e.material_spec}}</div>
<div class="scroll-ul_1_div">{{e.plan_qty}}</div>
<div class="scroll-ul_1_div">{{e.real_qty}}</div>
<div class="scroll-ul_1_div">{{e.date}}</div>
</li>
</ul>
</vue-seamless-scroll>
</div>
</div> </div>
<div class="item_content_2"> </div>
<div class="scroll_wrap"> </div>
<ul class="scroll_tab_1"> </div>
<li>订单号</li> <div class="right_wrap">
<li>产品编号</li> <div class="item_wrap">
<li>产品规格</li> <div class="item_tip">
<li>订单数量</li> <div class="item_tip_left">今日产量</div>
<li>实际完成</li> </div>
<li>计划完成日期</li> <div class="item_content_3">
</ul> <div class="right_1_up">
<div class="scroll_container_1"> <div class="right_1_up_left">
<vue-seamless-scroll :data="array2" :class-option="defaultOption1"> <div class="echart_d3_wrap">
<ul class="scroll-ul_1"> <div id="echart_d3" style="width: 100%; height: 100%"></div>
<li v-for="(e, i) in array2" :key="i"> </div>
<div class="scroll-ul_1_div">{{e.produceorder_code}}</div> </div>
<div class="scroll-ul_1_div">{{e.material_code}}</div> <div class="right_1_up_right">
<div class="scroll-ul_1_div">{{e.material_spec}}</div> <div class="right_1_up_right_item">
<div class="scroll-ul_1_div">{{e.plan_qty}}</div> <p class="right_1_up_p1">计划产量</p>
<div class="scroll-ul_1_div">{{e.real_qty}}</div> <p class="right_1_up_p2">{{objL1.plan_qty}}<span>PCS</span></p>
<div class="scroll-ul_1_div">{{e.date}}</div> </div>
</li> <div class="right_1_up_right_item">
</ul> <p class="right_1_up_p1">实际产量</p>
</vue-seamless-scroll> <p class="right_1_up_p2">{{objL1.real_qty}}<span>PCS</span></p>
</div>
</div>
</div>
<div class="right_1_down">
<div class="right_1_down_inner_1">
<div>工单总数：</div>
<div>{{objL1.sum_qty}}个</div>
</div>
<div class="right_1_down_inner_2">
<div :style="{'width': Number(objL1.normal_qty) * 100 / (Number(objL1.normal_qty) + Number(objL1.delayed_qty)) + '%' }"></div>
<div :style="{'width': Number(objL1.delayed_qty) * 100 / (Number(objL1.normal_qty) + Number(objL1.delayed_qty)) + '%'}"></div>
</div>
<div class="right_1_down_inner_3">
<div class="right_1_down_inner_3_i">
<div class="right_1_down_inner_3_l">
<span><i class="color1"></i></span>
<span>正常工单</span>
</div>
<div class="right_1_down_inner_3_r">
<span>{{objL1.normal_qty}}</span>
<span>个</span>
</div>
</div>
<div class="right_1_down_inner_3_i">
<div class="right_1_down_inner_3_l">
<span><i class="color2"></i></span>
<span>延期工单</span>
</div>
<div class="right_1_down_inner_3_r">
<span>{{objL1.delayed_qty}}</span>
<span>个</span>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="right_wrap"> <div class="item_wrap">
<div class="item_wrap"> <div class="item_tip">
<div class="item_tip"> <div class="item_tip_left">今日TOP10产量</div>
<div class="item_tip_left">今日产量</div>
</div>
<div class="item_content_3">
<div class="right_1_up">
<div class="right_1_up_left">
<div class="echart_d3_wrap">
<div id="echart_d3" style="width: 100%; height: 100%"></div>
</div>
</div>
<div class="right_1_up_right">
<div class="right_1_up_right_item">
<p class="right_1_up_p1">计划产量</p>
<p class="right_1_up_p2">{{objL1.plan_qty}}<span>PCS</span></p>
</div>
<div class="right_1_up_right_item">
<p class="right_1_up_p1">实际产量</p>
<p class="right_1_up_p2">{{objL1.real_qty}}<span>PCS</span></p>
</div>
</div>
</div>
<div class="right_1_down">
<div class="right_1_down_inner_1">
<div>工单总数：</div>
<div>{{objL1.sum_qty}}个</div>
</div>
<div class="right_1_down_inner_2">
<div :style="{'width': Number(objL1.normal_qty) * 100 / (Number(objL1.normal_qty) + Number(objL1.delayed_qty)) + '%' }"></div>
<div :style="{'width': Number(objL1.delayed_qty) * 100 / (Number(objL1.normal_qty) + Number(objL1.delayed_qty)) + '%'}"></div>
</div>
<div class="right_1_down_inner_3">
<div class="right_1_down_inner_3_i">
<div class="right_1_down_inner_3_l">
<span><i class="color1"></i></span>
<span>正常工单</span>
</div>
<div class="right_1_down_inner_3_r">
<span>{{objL1.normal_qty}}</span>
<span>个</span>
</div>
</div>
<div class="right_1_down_inner_3_i">
<div class="right_1_down_inner_3_l">
<span><i class="color2"></i></span>
<span>延期工单</span>
</div>
<div class="right_1_down_inner_3_r">
<span>{{objL1.delayed_qty}}</span>
<span>个</span>
</div>
</div>
</div>
</div>
</div>
</div> </div>
<div class="item_wrap"> <div class="item_content_4">
<div class="item_tip"> <vue-seamless-scroll :data="array3" :class-option="defaultOption3">
<div class="item_tip_left">今日TOP10产量</div> <ul class="scroll-ul_2">
</div> <li v-for="(e, i) in array3" :key="i">
<div class="item_content_4"> <div class="scroll-ul_2_div_1"><span>{{e.sort}}</span></div>
<vue-seamless-scroll :data="array3" :class-option="defaultOption3"> <div class="scroll-ul_2_div_2">{{e.material_spec}}</div>
<ul class="scroll-ul_2"> <div class="scroll-ul_2_div_3">
<li v-for="(e, i) in array3" :key="i"> <span>{{e.real_qty}}</span><span>产量</span>
<div class="scroll-ul_2_div_1"><span>{{e.sort}}</span></div>
<div class="scroll-ul_2_div_2">{{e.material_spec}}</div>
<div class="scroll-ul_2_div_3">
<span>{{e.real_qty}}</span><span>产量</span>
</div>
</li>
</ul>
</vue-seamless-scroll>
</div>
</div>
<div class="item_wrap">
<div class="item_tip">
<div class="item_tip_left">近30天生产订单分布</div>
</div>
<div class="item_content_5">
<div class="item_5_l">
<div class="item_5_l_1">
<div id="echart_d4" style="width: 100%; height: 100%"></div>
</div>
<div class="item_5_l_2">
<div class="right_1_down_inner_3_i" v-for="(e, i) in arrR1.slice(0,3)" :key="i">
<div class="right_1_down_inner_3_l">
<span><i :style="{'background-color': e.color}"></i></span>
<span>{{e.material_spec}}</span>
</div>
<div class="right_1_down_inner_3_r">
<span>{{e.real_qty}}</span>
<span>个</span>
</div>
</div> </div>
</div> </li>
</ul>
</vue-seamless-scroll>
</div>
</div>
<div class="item_wrap">
<div class="item_tip">
<div class="item_tip_left">近30天生产订单分布</div>
</div>
<div class="item_content_5">
<div class="item_5_l">
<div class="item_5_l_1">
<div id="echart_d4" style="width: 100%; height: 100%"></div>
</div> </div>
<div class="item_5_r"> <div class="item_5_l_2">
<div class="right_1_down_inner_3_i" v-for="(e, i) in arrR1.slice(3,10)" :key="i"> <div class="right_1_down_inner_3_i" v-for="(e, i) in arrR1.slice(0,3)" :key="i">
<div class="right_1_down_inner_3_l"> <div class="right_1_down_inner_3_l">
<span><i :style="{'background-color': e.color}"></i></span> <span><i :style="{'background-color': e.color}"></i></span>
<span>{{e.material_spec}}</span> <span>{{e.material_spec}}</span>
@@ -306,11 +295,22 @@
</div> </div>
</div> </div>
</div> </div>
<div class="item_5_r">
<div class="right_1_down_inner_3_i" v-for="(e, i) in arrR1.slice(3,10)" :key="i">
<div class="right_1_down_inner_3_l">
<span><i :style="{'background-color': e.color}"></i></span>
<span>{{e.material_spec}}</span>
</div>
<div class="right_1_down_inner_3_r">
<span>{{e.real_qty}}</span>
<span>个</span>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
<section class="bottom"></section> </div>
</section>
</template> </template>
<script> <script>
@@ -425,7 +425,7 @@ export default {
}) })
let option = { let option = {
grid: { grid: {
top: this.fontSize(50), top: 50,
left: 0, left: 0,
right: 0, right: 0,
bottom: 0, bottom: 0,
@@ -435,22 +435,22 @@ export default {
icon: 'rect', icon: 'rect',
textStyle: { textStyle: {
color: '#fff', color: '#fff',
fontSize: this.fontSize(14), fontSize: 14,
lineHeight: this.fontSize(14) lineHeight: 14
}, },
itemGap: this.fontSize(30.86), itemGap: 30.86,
itemWidth: this.fontSize(14.16), itemWidth: 14.16,
itemHeight: this.fontSize(7.38), itemHeight: 7.38,
data: [{name: '弯头工段', itemStyle: {color: '#0E90FD'}}, {name: '综合工段', itemStyle: {color: '#33CCCC'}}, {name: '成品工段', itemStyle: {color: '#EAAD24'}}] data: [{name: '弯头工段', itemStyle: {color: '#0E90FD'}}, {name: '综合工段', itemStyle: {color: '#33CCCC'}}, {name: '成品工段', itemStyle: {color: '#EAAD24'}}]
}, },
dataZoom: [ // dataZoom: [
{ // {
show: false, // 为true滚动条出现 // show: false, // 为true滚动条出现
type: 'slider', // type:'inside'，滚动条在最下面，鼠标点击滚动 // type: 'slider', // type:'inside'，滚动条在最下面，鼠标点击滚动
startValue: 0, // 从头开始。 // startValue: 0, // 从头开始。
endValue: 4 // end百分比显示范围，endValue具体显示几个数值 // endValue: 4 // end百分比显示范围，endValue具体显示几个数值
} // }
], // ],
xAxis: { xAxis: {
type: 'category', type: 'category',
axisTick: { axisTick: {
@@ -467,8 +467,9 @@ export default {
interval: 0, interval: 0,
textStyle: { textStyle: {
color: '#8FABBF', color: '#8FABBF',
fontSize: this.fontSize(16) fontSize: 16
} },
rotate: 50
}, },
data: date data: date
}, },
@@ -484,7 +485,7 @@ export default {
axisLabel: { axisLabel: {
textStyle: { textStyle: {
color: '#8FABBF', color: '#8FABBF',
fontSize: this.fontSize(14) fontSize: 14
} }
}, },
splitLine: { splitLine: {
@@ -568,7 +569,7 @@ export default {
let echart = document.getElementById('echart_d1') let echart = document.getElementById('echart_d1')
this.myCharts1 = this.$echarts.init(echart) this.myCharts1 = this.$echarts.init(echart)
this.myCharts1.setOption(option) this.myCharts1.setOption(option)
this.autoMove(option, 1) // this.autoMove(option, 1)
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
this.myCharts1.resize() this.myCharts1.resize()
}) })
@@ -582,9 +583,9 @@ export default {
}) })
let option = { let option = {
grid: { grid: {
top: this.fontSize(50), top: 50,
left: 0, left: 0,
right: this.fontSize(25), right: 25,
bottom: 0, bottom: 0,
containLabel: true containLabel: true
}, },
@@ -593,7 +594,7 @@ export default {
show: false, // 为true滚动条出现 show: false, // 为true滚动条出现
type: 'slider', // type:'inside'，滚动条在最下面，鼠标点击滚动 type: 'slider', // type:'inside'，滚动条在最下面，鼠标点击滚动
startValue: 0, // 从头开始。 startValue: 0, // 从头开始。
endValue: 5 // end百分比显示范围，endValue具体显示几个数值 endValue: 9 // end百分比显示范围，endValue具体显示几个数值
} }
], ],
xAxis: { xAxis: {
@@ -613,9 +614,10 @@ export default {
interval: 0, interval: 0,
textStyle: { textStyle: {
color: '#8FABBF', color: '#8FABBF',
fontSize: this.fontSize(16), fontSize: 16
align: 'center' // align: 'center'
} },
rotate: 50
}, },
data: date data: date
}, },
@@ -631,7 +633,7 @@ export default {
axisLabel: { axisLabel: {
textStyle: { textStyle: {
color: '#8FABBF', color: '#8FABBF',
fontSize: this.fontSize(14) fontSize: 14
} }
}, },
splitLine: { splitLine: {
@@ -699,7 +701,7 @@ export default {
} else if (type === 2) { } else if (type === 2) {
this.timeOut2 = setInterval(() => { this.timeOut2 = setInterval(() => {
if (Number(option.dataZoom[0].endValue) === option.series[0].data.length - 1) { if (Number(option.dataZoom[0].endValue) === option.series[0].data.length - 1) {
option.dataZoom[0].endValue = 5 option.dataZoom[0].endValue = 9
option.dataZoom[0].startValue = 0 option.dataZoom[0].startValue = 0
} else { } else {
option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1 option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
@@ -710,7 +712,7 @@ export default {
} }
}, },
setEchart3 () { setEchart3 () {
let value = parseFloat(this.objL1.finish_rate) let value = Number(this.objL1.finish_rate)
let title = '%' let title = '%'
let text = '完成率' let text = '完成率'
let option = { let option = {
@@ -722,24 +724,24 @@ export default {
textStyle: { textStyle: {
rich: { rich: {
a: { a: {
fontSize: this.fontSize(26), fontSize: 26,
color: '#00D9FF', color: '#00D9FF',
fontFamily: 'SourceHanSansCN', fontFamily: 'SourceHanSansCN',
foontWeight: '700' foontWeight: '700'
}, },
b: { b: {
fontSize: this.fontSize(16), fontSize: 16,
color: '#ffffff', color: '#ffffff',
fontFamily: 'SourceHanSansCN', fontFamily: 'SourceHanSansCN',
foontWeight: '700', foontWeight: '700',
padding: [this.fontSize(10), 0, 0, this.fontSize(3)] padding: [10, 0, 0, 3]
}, },
c: { c: {
color: '#FFFFFF', color: '#FFFFFF',
fontSize: this.fontSize(13), fontSize: 13,
fontWeight: '700', fontWeight: '700',
fontFamily: 'SourceHanSansCN', fontFamily: 'SourceHanSansCN',
padding: [this.fontSize(10), 0, 0, 0] padding: [10, 0, 0, 0]
} }
} }
} }
@@ -793,28 +795,22 @@ export default {
}, },
setEchart4 () { setEchart4 () {
let arr = [] let arr = []
let colors = []
this.arrR1.map(el => { this.arrR1.map(el => {
arr.push(el.real_qty) arr.push({name: el.material_spec, value: parseFloat(el.real_qty), itemStyle: {color: el.color}})
colors.push(el.color)
}) })
var option = { var option = {
tooltip: { tooltip: {
trigger: 'item' trigger: 'item'
}, },
color: colors,
series: [ series: [
{ {
name: '区域', name: '区域',
type: 'pie', type: 'pie',
radius: ['70%', '95%'], radius: ['70%', '95%'],
center: ['50%', '50%'], center: ['50%', '50%'],
left: 0, roseType: 'radius',
roseType: 'area',
avoidLabelOverlap: false,
label: { label: {
show: false, show: false
position: 'center'
}, },
labelLine: { labelLine: {
show: false show: false
@@ -1040,7 +1036,7 @@ export default {
border-bottom .01rem solid rgba(8,205,248,0.3) border-bottom .01rem solid rgba(8,205,248,0.3)
li li
float left float left
width 15% width 12%
_font(.14rem,.4rem,#78B1DE,,center) _font(.14rem,.4rem,#78B1DE,,center)
word-wrap break-word word-wrap break-word
word-break break-all word-break break-all
@@ -1048,8 +1044,12 @@ export default {
padding 0 .02rem padding 0 .02rem
overflow hidden overflow hidden
box-sizing border-box box-sizing border-box
&:nth-child(6) &:nth-child(8)
width 25% width 16%
.scroll_tab_2 li
width 17%
&:first-child
width 15%
.scroll_container_1 .scroll_container_1
width 100% width 100%
height calc(100% - .4rem) height calc(100% - .4rem)
@@ -1063,7 +1063,7 @@ export default {
box-shadow inset 0px 1px 0px 0px rgba(13,89,115,0.3) box-shadow inset 0px 1px 0px 0px rgba(13,89,115,0.3)
.scroll-ul_1_div .scroll-ul_1_div
float left float left
_wh(15%, .44rem) _wh(12%, .44rem)
_fj(center) _fj(center)
_font(.14rem, .44rem, #fff,,center) _font(.14rem, .44rem, #fff,,center)
word-wrap break-word word-wrap break-word
@@ -1071,8 +1071,12 @@ export default {
white-space nowrap white-space nowrap
padding 0 .02rem padding 0 .02rem
overflow hidden overflow hidden
&:nth-child(6) &:nth-child(8)
width 25% width 16%
.scroll-ul_2 li .scroll-ul_1_div
width 17%
&:first-child
width 15%
.progress_line_wrap .progress_line_wrap
position relative position relative
_wh(1.35rem, .03rem) _wh(1.35rem, .03rem)
@@ -1169,25 +1173,33 @@ export default {
_wh(.0725rem, .3rem) _wh(.0725rem, .3rem)
margin-left .15rem margin-left .15rem
_fj() _fj()
overflow hidden
i i
display block display block
_wh(.0725rem, .0725rem) _wh(.0725rem, .0725rem)
border-radius 100% border-radius 100%
&:nth-child(2) &:nth-child(2)
_wh(calc(100% - 0.2825rem), .3rem)
font-family "SourceHanSansCN" font-family "SourceHanSansCN"
_font(.12rem, .3rem, #fff,400,) _font(.12rem, .3rem, #fff,400,)
margin-left .06rem margin-left .06rem
overflow hidden
text-overflow ellipsis
white-space nowrap
.right_1_down_inner_3_r .right_1_down_inner_3_r
_wh(50%, 100%) _wh(50%, 100%)
line-height .3rem line-height .3rem
overflow hidden overflow hidden
text-align center text-align right
span span
font-family "SourceHanSansCN" font-family "SourceHanSansCN"
_font(.12rem, .3rem, #fff,700,) _font(.12rem, .3rem, #fff,700,)
&:nth-child(1) &:nth-child(1)
font-family "SourceHanSansCN" font-family "SourceHanSansCN"
_font(.18rem, .3rem, #00D5FF,700,) _font(.18rem, .3rem, #00D5FF,700,)
overflow hidden
text-overflow ellipsis
white-space nowrap
.item_content_4 .item_content_4
_wh(100%, calc(100% - .32rem)) _wh(100%, calc(100% - .32rem))
padding .1rem 0 .2rem padding .1rem 0 .2rem
@@ -1234,10 +1246,10 @@ export default {
clear both clear both
.item_5_l .item_5_l
float left float left
_wh(1.83rem, 100%) _wh(50%, 100%)
.item_5_r .item_5_r
float right float right
_wh(1.83rem, 100%) _wh(50%, 100%)
_fj() _fj()
flex-direction column flex-direction column
.item_5_l_1 .item_5_l_1