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 {
/* width: 1920px;
height: 1080px; */
width: 100%;
width: 1920px;
height: 1080px;
/* width: 100%;
height: 100%;
min-width: 1440px;
min-height: 1080px;
min-height: 1080px; */
}
body {

4
src/components/header.vue
View File

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

407
src/pages/DeviceScreen.vue
View File

@@ -1,232 +1,215 @@
<template>
<section class="bg">
<header>
<p>海亮铜管智能车间设备监控中心</p>
<div class="data_box clearfix">
<div class="date_item date">{{date}}</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 class="container">
<div class="left_wrap">
<div class="item_wrap">
<div class="item_tip">
<div class="item_tip_left">设备实时状态</div>
</div>
</div>
</header>
<div class="container">
<div class="left_wrap">
<div class="item_wrap">
<div class="item_tip">
<div class="item_tip_left">设备实时状态</div>
<div class="item_5_l">
<div class="item_content_0">
<div id="echart_d01" style="width: 100%; height: 100%"></div>
</div>
<div class="item_5_l">
<div class="item_content_0">
<div id="echart_d01" style="width: 100%; height: 100%"></div>
<div class="total">
<div v-if="totalNum">{{totalNum}}<span>台</span></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 class="total">
<div v-if="totalNum">{{totalNum}}<span>台</span></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 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 class="right_1_down_inner_3_r">
<span>{{e.value}}</span>
<span>台</span>
</div>
</div>
</div>
</div>
<div class="right_wrap">
<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 class="item_wrap">
<div class="item_tip">
<div class="item_tip_left">设备管理</div>
</div>
<div class="item_wrap">
<div class="item_tip">
<div class="item_tip_left">设备报警信息</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_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 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 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 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>
<section class="bottom"></section>
</section>
<div class="right_wrap">
<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>
<script>

38
src/pages/HomeScreen.vue
View File

@@ -1,16 +1,21 @@
<template>
<section class="box">
<t-header :title="title1">
<p class="p1" @click="toJump">{{title2}}</p>
</t-header>
<Monitoring-Screen v-if="page === 'two'"></Monitoring-Screen>
<Device-Screen v-if="page === 'one'"></Device-Screen>
</section>
</template>
<script>
import THeader from '@components/header.vue'
import MonitoringScreen from './MonitoringScreen.vue'
import DeviceScreen from './DeviceScreen.vue'
export default {
name: 'HomeScreen',
components: {
THeader,
MonitoringScreen,
DeviceScreen
},
@@ -21,14 +26,38 @@ export default {
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 () {
this.swipePage()
},
beforeDestroy () {
this.$once('hook:beforeDestroy', () => {
clearInterval(this.timer)
})
},
methods: {
swipePage () {
this.timer = setInterval(() => {
this.page = this.page === 'one' ? 'two' : 'one'
}, 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
_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
</style>

654
src/pages/MonitoringScreen.vue
View File

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