生产
This commit is contained in:
BIN
src/assets/images/sctj_bg1.png
Normal file
BIN
src/assets/images/sctj_bg1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
BIN
src/assets/images/sctj_bg2.png
Normal file
BIN
src/assets/images/sctj_bg2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
src/assets/images/sctj_bg3.png
Normal file
BIN
src/assets/images/sctj_bg3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
src/assets/images/sctj_icon.png
Normal file
BIN
src/assets/images/sctj_icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 581 B |
BIN
src/assets/images/sctj_top.png
Normal file
BIN
src/assets/images/sctj_top.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
@@ -20,3 +20,262 @@ export const deviceUseRate = (id) => post('api/deviceScreen/deviceUseRate', {})
|
||||
export const deviceStatusList = (id) => post('api/deviceScreen/deviceStatusList', {})
|
||||
/** 1.10近30天设备故障统计 */
|
||||
export const errCensus = (id) => post('api/deviceScreen/errCensus', {})
|
||||
|
||||
export const productionStatistics = () => {
|
||||
let res = {
|
||||
'code': 200,
|
||||
'desc': '操作成功',
|
||||
'result': {
|
||||
'planRes': [
|
||||
{
|
||||
'workorder_procedure': '压制',
|
||||
'label': '2',
|
||||
'plan_qty': 20000,
|
||||
'real_qty': 480
|
||||
},
|
||||
{
|
||||
'workorder_procedure': '原料',
|
||||
'label': '1',
|
||||
'plan_qty': 0,
|
||||
'real_qty': 0
|
||||
},
|
||||
{
|
||||
'workorder_procedure': '干燥',
|
||||
'label': '3',
|
||||
'plan_qty': 0,
|
||||
'real_qty': 0
|
||||
},
|
||||
{
|
||||
'workorder_procedure': '包装',
|
||||
'label': '4',
|
||||
'plan_qty': 0,
|
||||
'real_qty': 0
|
||||
}
|
||||
],
|
||||
'materialTask': [
|
||||
{
|
||||
'plan_qty': '0',
|
||||
'real_qty': '0',
|
||||
'label': '1',
|
||||
'workorder_procedure': '原料'
|
||||
}
|
||||
],
|
||||
'finishedRes': [
|
||||
{
|
||||
'workorder_procedure': '压制',
|
||||
'label': '2',
|
||||
'plan_qty': 20000,
|
||||
'real_qty': 480
|
||||
},
|
||||
{
|
||||
'workorder_procedure': '原料',
|
||||
'label': '1',
|
||||
'plan_qty': 0,
|
||||
'real_qty': 0
|
||||
},
|
||||
{
|
||||
'workorder_procedure': '干燥',
|
||||
'label': '3',
|
||||
'plan_qty': 0,
|
||||
'real_qty': 0
|
||||
},
|
||||
{
|
||||
'workorder_procedure': '包装',
|
||||
'label': '4',
|
||||
'plan_qty': 0,
|
||||
'real_qty': 0
|
||||
}
|
||||
],
|
||||
'productionTask': [
|
||||
{
|
||||
'workorder_id': '1650768844706480128',
|
||||
'label': null,
|
||||
'device_name': '压机5',
|
||||
'material_code': 'ZLMCZ1001C111122GM001BD20-8',
|
||||
'material_name': null,
|
||||
'cust_name': null,
|
||||
'plan_qty': 1000000,
|
||||
'real_qty': 0,
|
||||
'qualified_qty': 0,
|
||||
'unqualified_qty': 0,
|
||||
'order_status': '3',
|
||||
'order_status_name': '生产中',
|
||||
'shift_type': null,
|
||||
'realproducestart_date': '2023-04-25 15:51:44',
|
||||
'realproduceend_date': '-'
|
||||
},
|
||||
{
|
||||
'workorder_id': '1650404416467193856',
|
||||
'label': null,
|
||||
'device_name': '压机3',
|
||||
'material_code': 'ZLMCZ1001C111122GM001BD20-8',
|
||||
'material_name': null,
|
||||
'cust_name': null,
|
||||
'plan_qty': 1000000,
|
||||
'real_qty': 0,
|
||||
'qualified_qty': 0,
|
||||
'unqualified_qty': 0,
|
||||
'order_status': '3',
|
||||
'order_status_name': '生产中',
|
||||
'shift_type': null,
|
||||
'realproducestart_date': '2023-04-24 15:42:59',
|
||||
'realproduceend_date': '-'
|
||||
},
|
||||
{
|
||||
'workorder_id': '1649612373595746304',
|
||||
'label': null,
|
||||
'device_name': '压机7',
|
||||
'material_code': 'ZLMCZ1001C122211GM001BD20-8',
|
||||
'material_name': null,
|
||||
'cust_name': null,
|
||||
'plan_qty': 100000,
|
||||
'real_qty': 0,
|
||||
'qualified_qty': 0,
|
||||
'unqualified_qty': 0,
|
||||
'order_status': '3',
|
||||
'order_status_name': '生产中',
|
||||
'shift_type': null,
|
||||
'realproducestart_date': '2023-04-22 11:29:10',
|
||||
'realproduceend_date': '-'
|
||||
},
|
||||
{
|
||||
'workorder_id': '1648878346865606656',
|
||||
'label': null,
|
||||
'device_name': '压机4',
|
||||
'material_code': 'ZLMCZ1001C122211GM001BD20-8',
|
||||
'material_name': null,
|
||||
'cust_name': null,
|
||||
'plan_qty': 100000,
|
||||
'real_qty': 0,
|
||||
'qualified_qty': 0,
|
||||
'unqualified_qty': 0,
|
||||
'order_status': '3',
|
||||
'order_status_name': '生产中',
|
||||
'shift_type': null,
|
||||
'realproducestart_date': '2023-04-20 10:43:55',
|
||||
'realproduceend_date': '-'
|
||||
},
|
||||
{
|
||||
'workorder_id': '1648195777525485568',
|
||||
'label': null,
|
||||
'device_name': '压机2',
|
||||
'material_code': 'ZLMCZ1001C111122GM001BD20-8',
|
||||
'material_name': null,
|
||||
'cust_name': null,
|
||||
'plan_qty': 10000,
|
||||
'real_qty': 0,
|
||||
'qualified_qty': 0,
|
||||
'unqualified_qty': 0,
|
||||
'order_status': '3',
|
||||
'order_status_name': '生产中',
|
||||
'shift_type': null,
|
||||
'realproducestart_date': '2023-04-18 13:34:36',
|
||||
'realproduceend_date': '-'
|
||||
},
|
||||
{
|
||||
'workorder_id': '1647845461961498624',
|
||||
'label': null,
|
||||
'device_name': '压机1',
|
||||
'material_code': 'ZLMCZ1001C111122GM001BD20-8',
|
||||
'material_name': null,
|
||||
'cust_name': null,
|
||||
'plan_qty': 10000,
|
||||
'real_qty': 0,
|
||||
'qualified_qty': 0,
|
||||
'unqualified_qty': 0,
|
||||
'order_status': '3',
|
||||
'order_status_name': '生产中',
|
||||
'shift_type': null,
|
||||
'realproducestart_date': '2023-04-17 14:18:58',
|
||||
'realproduceend_date': '-'
|
||||
},
|
||||
{
|
||||
'workorder_id': '1650040960085835776',
|
||||
'label': null,
|
||||
'device_name': '压机3',
|
||||
'material_code': 'ZLMCZ1001C111122GM001BD20-8',
|
||||
'material_name': null,
|
||||
'cust_name': null,
|
||||
'plan_qty': 100000,
|
||||
'real_qty': 100004,
|
||||
'qualified_qty': 99807,
|
||||
'unqualified_qty': 197,
|
||||
'order_status': '5',
|
||||
'order_status_name': '完成',
|
||||
'shift_type': null,
|
||||
'realproducestart_date': '2023-04-23 15:38:03',
|
||||
'realproduceend_date': '2023-04-24 12:01:03'
|
||||
},
|
||||
{
|
||||
'workorder_id': '1649231836326563840',
|
||||
'label': null,
|
||||
'device_name': '压机3',
|
||||
'material_code': 'ZLMCZ1001C122211GM001BD20-8',
|
||||
'material_name': null,
|
||||
'cust_name': null,
|
||||
'plan_qty': 100000,
|
||||
'real_qty': 276285,
|
||||
'qualified_qty': 263808,
|
||||
'unqualified_qty': 12477,
|
||||
'order_status': '5',
|
||||
'order_status_name': '完成',
|
||||
'shift_type': null,
|
||||
'realproducestart_date': '2023-04-21 10:10:40',
|
||||
'realproduceend_date': '2023-04-23 14:17:33'
|
||||
},
|
||||
{
|
||||
'workorder_id': '1648871924408909824',
|
||||
'label': null,
|
||||
'device_name': '压机3',
|
||||
'material_code': 'ZLMCZ1001C111122GM001BD20-8',
|
||||
'material_name': null,
|
||||
'cust_name': null,
|
||||
'plan_qty': 100000,
|
||||
'real_qty': 0,
|
||||
'qualified_qty': 0,
|
||||
'unqualified_qty': 0,
|
||||
'order_status': '5',
|
||||
'order_status_name': '完成',
|
||||
'shift_type': null,
|
||||
'realproducestart_date': '2023-04-20 10:11:33',
|
||||
'realproduceend_date': '2023-04-21 09:44:15'
|
||||
},
|
||||
{
|
||||
'workorder_id': '1648869698739240960',
|
||||
'label': null,
|
||||
'device_name': '压机3',
|
||||
'material_code': 'ZLMCZ1001C111122GM001BD20-8',
|
||||
'material_name': null,
|
||||
'cust_name': null,
|
||||
'plan_qty': 100000,
|
||||
'real_qty': 1652528,
|
||||
'qualified_qty': 1549371,
|
||||
'unqualified_qty': 103157,
|
||||
'order_status': '5',
|
||||
'order_status_name': '完成',
|
||||
'shift_type': null,
|
||||
'realproducestart_date': '2023-04-20 10:03:54',
|
||||
'realproduceend_date': '2023-04-20 10:03:54'
|
||||
},
|
||||
{
|
||||
'workorder_id': '1648860718914801664',
|
||||
'label': null,
|
||||
'device_name': '压机3',
|
||||
'material_code': 'ZLMCZ1001C111122GM001BD20-8',
|
||||
'material_name': null,
|
||||
'cust_name': null,
|
||||
'plan_qty': 10000,
|
||||
'real_qty': 1652528,
|
||||
'qualified_qty': 1549371,
|
||||
'unqualified_qty': 103157,
|
||||
'order_status': '5',
|
||||
'order_status_name': '完成',
|
||||
'shift_type': null,
|
||||
'realproducestart_date': '-',
|
||||
'realproduceend_date': '2023-04-20 09:37:49'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
return res
|
||||
}
|
||||
|
||||
755
src/pages/ProdCount.vue
Normal file
755
src/pages/ProdCount.vue
Normal file
@@ -0,0 +1,755 @@
|
||||
<template>
|
||||
<section>
|
||||
<t-header index='1'></t-header>
|
||||
<section class="content">
|
||||
<div class="con1">
|
||||
<!-- <div class="c-title c-left"> -->
|
||||
<div class="cbox">
|
||||
<!-- <span class="icon1"></span> -->
|
||||
<div>今日压制量：</div>
|
||||
<div class="num">
|
||||
<div class="bg" v-for="item in showNum1" :key="item" :class="{dot: item === '.'}">{{item}}</div>
|
||||
</div>
|
||||
<div>吨</div>
|
||||
</div>
|
||||
<!-- <div class="c-title c-right"> -->
|
||||
<div class="cbox">
|
||||
<div>今日干燥量：</div>
|
||||
<div class="num">
|
||||
<div class="bg" v-for="item in showNum2" :key="item" :class="{dot: item === '.'}">{{item}}</div>
|
||||
</div>
|
||||
<div>吨</div>
|
||||
</div>
|
||||
<!-- <div class="c-title c-right" style="marginLeft: 1rem;"> -->
|
||||
<div class="cbox">
|
||||
<div>今日成品量：</div>
|
||||
<div class="num">
|
||||
<div class="bg" v-for="item in showNum3" :key="item" :class="{dot: item === '.'}">{{item}}</div>
|
||||
</div>
|
||||
<div>吨</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="center_wrapper" style="display:flex">
|
||||
<div class="con2">
|
||||
<div class="title">混碾生产</div>
|
||||
<div class="item_content_0">
|
||||
<div id="echart_d01" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="con3" style="position: relative">
|
||||
<div class="title">成品计划完成情况</div>
|
||||
<div class="item_content_1">
|
||||
<div id="echart_d05" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="con4">
|
||||
<div class="block_h2">
|
||||
<h2>生产任务</h2>
|
||||
</div>
|
||||
<div class="list_scroll_title">
|
||||
<span>设备</span><span>物料编码</span><span>计划数量/重量</span><span>实际数量/重量</span><span>合格数量/重量</span><span>不合格数量/重量</span><span>生产状态</span><span>开始时间</span><span>结束时间</span>
|
||||
</div>
|
||||
<vue-seamless-scroll :data="taskData" :class-option="classOption" class="content-block-scroll">
|
||||
<ul class="content-block-scroll-ul">
|
||||
<li v-for="(e, i) in taskData" :key="i">
|
||||
<span :class="{blue:e.order_status ==='1',yellow:e.order_status ==='2',green:e.order_status ==='3',red:e.order_status ==='4',orange:e.order_status ==='5'}">{{e.device_name}}</span><span :class="{blue:e.order_status ==='1',yellow:e.order_status ==='2',green:e.order_status ==='3',red:e.order_status ==='4',orange:e.order_status ==='5'}">{{e.material_code}}</span><span :class="{blue:e.order_status ==='1',yellow:e.order_status ==='2',green:e.order_status ==='3',red:e.order_status ==='4',orange:e.order_status ==='5'}">{{e.plan_qty}}</span><span :class="{blue:e.order_status ==='1',yellow:e.order_status ==='2',green:e.order_status ==='3',red:e.order_status ==='4',orange:e.order_status ==='5'}">{{e.real_qty}}</span><span :class="{blue:e.order_status ==='1',yellow:e.order_status ==='2',green:e.order_status ==='3',red:e.order_status ==='4',orange:e.order_status ==='5'}">{{e.qualified_qty}}</span><span :class="{blue:e.order_status ==='1',yellow:e.order_status ==='2',green:e.order_status ==='3',red:e.order_status ==='4',orange:e.order_status ==='5'}">{{e.unqualified_qty}}</span><span :class="{blue:e.order_status ==='1',yellow:e.order_status ==='2',green:e.order_status ==='3',red:e.order_status ==='4',orange:e.order_status ==='5'}">{{e.order_status_name}}</span><span :class="{blue:e.order_status ==='1',yellow:e.order_status ==='2',green:e.order_status ==='3',red:e.order_status ==='4',orange:e.order_status ==='5'}">{{e.realproducestart_date}}</span><span :class="{blue:e.order_status ==='1',yellow:e.order_status ==='2',green:e.order_status ==='3',red:e.order_status ==='4',orange:e.order_status ==='5'}">{{e.realproduceend_date}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import THeader from '@components/header.vue'
|
||||
import * as echarts from 'echarts'
|
||||
import { productionStatistics } from '@js/getData1'
|
||||
export default {
|
||||
name: 'ProdCount',
|
||||
components: {
|
||||
THeader
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
interTime: this.$store.getters.setTime,
|
||||
timer: null,
|
||||
showNum1: '',
|
||||
showNum2: '',
|
||||
showNum3: '',
|
||||
showNum4: '',
|
||||
myCharts05: '',
|
||||
materData: [],
|
||||
deviceData: [],
|
||||
resData: {},
|
||||
taskData: [],
|
||||
realqty: '',
|
||||
planqty: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classOption () {
|
||||
// return {
|
||||
// step: 0.4,
|
||||
// limitMoveNum: 6
|
||||
// }
|
||||
return {
|
||||
step: 0.2, // 数值越大速度滚动越快
|
||||
limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length
|
||||
hoverStop: true, // 是否开启鼠标悬停stop
|
||||
direction: 1, // 0向下 1向上 2向左 3向右
|
||||
openWatch: true, // 开启数据实时监控刷新dom
|
||||
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
||||
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
||||
waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.initData()
|
||||
this.refresh()
|
||||
},
|
||||
beforeDestroy () {
|
||||
clearInterval(this.timer)
|
||||
},
|
||||
methods: {
|
||||
refresh () {
|
||||
this.timer = setInterval(() => {
|
||||
this.initData()
|
||||
}, this.interTime)
|
||||
},
|
||||
async initData () {
|
||||
let res = await productionStatistics()
|
||||
this.resData = res.result
|
||||
this.showNum1 = (res.result.finishedRes[0].real_qty + '').split('')
|
||||
this.showNum2 = (res.result.finishedRes[1].real_qty + '').split('')
|
||||
this.showNum3 = (res.result.finishedRes[2].real_qty + '').split('')
|
||||
this.taskData = [...res.result.productionTask]
|
||||
this.setEchart05()
|
||||
this.realqty = res.result.materialTask[0].real_qty
|
||||
this.planqty = res.result.materialTask[0].plan_qty
|
||||
this.setEchart01()
|
||||
// 五种状态：未成产、已下发、生产中、停止、完成
|
||||
},
|
||||
setEchart01 () {
|
||||
let data = [
|
||||
{
|
||||
value: 10,
|
||||
name: '1号砖'
|
||||
},
|
||||
{
|
||||
value: 20,
|
||||
name: '2号砖'
|
||||
},
|
||||
{
|
||||
value: 30,
|
||||
name: '3号砖'
|
||||
},
|
||||
{
|
||||
value: 40,
|
||||
name: '4号砖'
|
||||
},
|
||||
{
|
||||
value: 50,
|
||||
name: '5号砖'
|
||||
},
|
||||
{
|
||||
value: 60,
|
||||
name: '6号砖'
|
||||
}
|
||||
]
|
||||
var option = {
|
||||
legend: {
|
||||
orient: 'horizontal',
|
||||
bottom: '1%',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontWeight: 'bold',
|
||||
fontSize: 14
|
||||
},
|
||||
itemGap: 30.86,
|
||||
itemWidth: 14.16,
|
||||
itemHeight: 7.38,
|
||||
data: ['1号砖', '2号砖', '3号砖', '4号砖', '5号砖', '6号砖']
|
||||
},
|
||||
color: ['#0966E8', '#07E083', '#e7E255', '#cda02e', '#01E38a', '#57c01d'],
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['43%', '70%'],
|
||||
label: {
|
||||
normal: {
|
||||
// position: 'inner',
|
||||
formatter: '{d}%',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontWeight: 'bold',
|
||||
fontSize: 14
|
||||
}
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: true
|
||||
},
|
||||
data: data
|
||||
}
|
||||
]
|
||||
}
|
||||
let echart = document.getElementById('echart_d01')
|
||||
this.myCharts01 = this.$echarts.init(echart)
|
||||
this.myCharts01.setOption(option)
|
||||
window.addEventListener('resize', () => {
|
||||
this.myCharts01.resize()
|
||||
})
|
||||
},
|
||||
setEchart05 () {
|
||||
var data05d0 = []
|
||||
var data05d1 = []
|
||||
var data05d2 = []
|
||||
this.resData.planRes.map(el => {
|
||||
data05d0.push(el.workorder_procedure)
|
||||
data05d1.push(el.plan_qty)
|
||||
data05d2.push(el.real_qty)
|
||||
})
|
||||
let option = {
|
||||
grid: {
|
||||
top: 50,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
icon: 'rect',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 14,
|
||||
lineHeight: 14
|
||||
},
|
||||
itemGap: 30.86,
|
||||
itemWidth: 14.16,
|
||||
itemHeight: 7.38,
|
||||
data: [{name: '计划生产数量', itemStyle: {color: '#0E90FD'}}, {name: '已完成数量', itemStyle: {color: '#EAAD24'}}]
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#8FABBF'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
textStyle: {
|
||||
color: '#8FABBF',
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
data: data05d0
|
||||
// data: ['压制', '干燥', '包装']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
splitNumber: 2,
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#8FABBF',
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: [8, 4],
|
||||
dashOffset: 4,
|
||||
color: '#8FABBF',
|
||||
opacity: 0.2
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '计划生产数量',
|
||||
type: 'bar',
|
||||
barWidth: '28',
|
||||
barGap: '100%', // 柱图间距
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(96,112,128,0.10)',
|
||||
opacity: 1
|
||||
},
|
||||
{
|
||||
offset: 0,
|
||||
color: '#0E90FD',
|
||||
opacity: 0.1
|
||||
}
|
||||
])
|
||||
}
|
||||
},
|
||||
data: data05d1
|
||||
// data: ['390', '390', '390']
|
||||
},
|
||||
{
|
||||
name: '已完成数量',
|
||||
type: 'bar',
|
||||
barWidth: '28',
|
||||
barGap: '100%', // 柱图间距
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#B68845',
|
||||
opacity: 1
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(134,98,45,0.25)',
|
||||
opacity: 0.25
|
||||
}
|
||||
])
|
||||
}
|
||||
},
|
||||
data: data05d2
|
||||
// data: ['210', '210', '210']
|
||||
}
|
||||
]
|
||||
}
|
||||
let echart = document.getElementById('echart_d05')
|
||||
if (this.myCharts05 !== '') {
|
||||
this.myCharts05.dispose()
|
||||
}
|
||||
if (echart !== null) {
|
||||
this.myCharts05 = this.$echarts.init(echart)
|
||||
this.myCharts05.setOption(option)
|
||||
window.addEventListener('resize', () => {
|
||||
this.myCharts05.resize()
|
||||
})
|
||||
}
|
||||
},
|
||||
getEchart1 () {
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
var myChart = echarts.init(document.getElementById('echart_d1'))
|
||||
var finishArr = []
|
||||
var unFinishArr = []
|
||||
var materArr = []
|
||||
this.materData.map(el => {
|
||||
finishArr.push(el.finished_qty)
|
||||
unFinishArr.push(el.unfinished_qty)
|
||||
materArr.push(el.material_code)
|
||||
})
|
||||
// 指定图表的配置项和数据
|
||||
var option = {
|
||||
legend: {
|
||||
top: 20,
|
||||
right: 10,
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
fontSize: 12,
|
||||
lineHeight: 20
|
||||
},
|
||||
itemGap: 20,
|
||||
itemHeight: 8,
|
||||
data: ['完成', '未完成']
|
||||
},
|
||||
title: {
|
||||
text: '半成品计划完成率', // 标题
|
||||
top: '12px',
|
||||
left: '20px',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: '16'
|
||||
}
|
||||
},
|
||||
// tooltip: {
|
||||
// trigger: 'axis'
|
||||
// },
|
||||
xAxis: {
|
||||
// data: ['1号砖', '2号砖', '3号砖', '4号砖'],
|
||||
data: materArr,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
// xAxis: {
|
||||
// type: 'category',
|
||||
// axisLine: {
|
||||
// lineStyle: {
|
||||
// color: '#fff'
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
yAxis: {
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: '未完成',
|
||||
type: 'bar',
|
||||
barWidth: 14,
|
||||
stack: '完成情况',
|
||||
// data: [15, 20, 36, 10],
|
||||
data: unFinishArr,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#32C5FF'
|
||||
// label: {
|
||||
// show: true,
|
||||
// position: 'inside',
|
||||
// formatter: function (params) {
|
||||
// if (params.value !== 0) {
|
||||
// return params.value
|
||||
// } else {
|
||||
// return ''
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
}, {
|
||||
name: '完成',
|
||||
type: 'bar',
|
||||
barWidth: 14,
|
||||
stack: '完成情况',
|
||||
// data: [40, 57, 18, 20],
|
||||
data: finishArr,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#F7B502'
|
||||
// label: {
|
||||
// show: true,
|
||||
// position: 'inside',
|
||||
// formatter: function (params) {
|
||||
// if (params.value !== 0) {
|
||||
// return params.value
|
||||
// } else {
|
||||
// return ''
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
}]
|
||||
}
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(option)
|
||||
window.addEventListener('resize', function () {
|
||||
myChart.resize()
|
||||
})
|
||||
},
|
||||
getEchart2 () {
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
// var lineData = [4, 9, 8, 6, 8, 7, 3, 8]
|
||||
// var barData = [50002, 34120, 48370, 57370, 67582, 90892, 32321, 57370]
|
||||
// var xData = ['1号机', '2号机', '3号机', '4号机', '5号机', '6号机', '7号机', '8号机']
|
||||
var lineData = []
|
||||
var barData = []
|
||||
var xData = []
|
||||
this.deviceData.map(el => {
|
||||
console.log(el.produce_qty)
|
||||
lineData.push(el.produce_qty)
|
||||
barData.push(el.produce_num)
|
||||
xData.push(el.device_name)
|
||||
})
|
||||
var myChart = echarts.init(document.getElementById('echarts2'))
|
||||
var option = {
|
||||
legend: {
|
||||
top: 20,
|
||||
right: 10,
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
fontSize: 12,
|
||||
lineHeight: 20
|
||||
},
|
||||
itemGap: 20,
|
||||
itemHeight: 8,
|
||||
data: ['数量', '重量']
|
||||
},
|
||||
// tooltip: {
|
||||
// trigger: 'axis'
|
||||
// },
|
||||
xAxis: {
|
||||
// name: '设备',
|
||||
type: 'category',
|
||||
data: xData,
|
||||
nameGap: 60, // 坐标轴名称与轴线之间的距离。
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
// name: '交易额（亿元）',
|
||||
type: 'value',
|
||||
min: 0,
|
||||
// max: 100000,
|
||||
max: Math.max.apply(null, barData),
|
||||
splitNumber: 10,
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: ['#315070'],
|
||||
width: 1,
|
||||
type: 'dotted'
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
// name: '增长率',
|
||||
type: 'value',
|
||||
min: 0,
|
||||
// max: 10,
|
||||
max: Math.max.apply(null, lineData),
|
||||
splitNumber: 10,
|
||||
// position: 'right',
|
||||
// formatter: '{value}',
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#F7B502'
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '数量',
|
||||
type: 'bar',
|
||||
data: barData,
|
||||
barWidth: 10,
|
||||
itemStyle: {
|
||||
color: '#32C5FF'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '重量',
|
||||
type: 'line',
|
||||
symbolSize: 12, // 拐点圆的大小
|
||||
symbol: 'circle',
|
||||
data: lineData,
|
||||
lineStyle: {
|
||||
color: '#F7B502'
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#F7B502'
|
||||
}
|
||||
},
|
||||
yAxisIndex: 1
|
||||
}
|
||||
]
|
||||
}
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(option)
|
||||
window.addEventListener('resize', function () {
|
||||
myChart.resize()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~@css/mixin'
|
||||
.content
|
||||
_wh(calc(100% - 108px), calc(100% - 108px))
|
||||
margin 12px auto
|
||||
.blue
|
||||
color #32C5FF !important
|
||||
.green
|
||||
color #30EBC9 !important
|
||||
.gray
|
||||
color #516282 !important
|
||||
.yellow
|
||||
color #E2BB0E !important
|
||||
.orange
|
||||
color #F96700 !important
|
||||
.red
|
||||
color #FF0000 !important
|
||||
.con1
|
||||
width 100%
|
||||
height 123px
|
||||
overflow hidden
|
||||
position relative
|
||||
background center center / 100% 100% url(../assets/images/sctj_top.png) no-repeat
|
||||
margin-bottom 15px
|
||||
text-align center
|
||||
display flex
|
||||
justify-content space-between
|
||||
align-items center
|
||||
// .c-title
|
||||
// float left
|
||||
// // line-height 1.23rem
|
||||
// line-height 123px
|
||||
// .c-left
|
||||
// margin 0 1.3rem 0 1.3rem
|
||||
// display flex
|
||||
// align-items center
|
||||
// .c-right
|
||||
// // margin 0 2.9rem 0 2.5rem
|
||||
// display flex
|
||||
// align-items center
|
||||
.cbox
|
||||
width 30%
|
||||
display flex
|
||||
align-items center
|
||||
justify-content center
|
||||
div
|
||||
font-size .24rem
|
||||
color #32C5FF
|
||||
.icon1
|
||||
display inline-block
|
||||
width .19rem
|
||||
height .19rem
|
||||
overflow hidden
|
||||
position relative
|
||||
background center center / 100% 100% url(../assets/images/sctj_icon.png) no-repeat
|
||||
margin-right .2rem
|
||||
.num
|
||||
display flex
|
||||
align-items center
|
||||
.bg
|
||||
width .44rem
|
||||
height .6rem
|
||||
background rgba(50,197,255,0.10)
|
||||
display flex
|
||||
align-items center
|
||||
justify-content center
|
||||
margin-right .1rem
|
||||
font-size .5rem
|
||||
color #F7B502
|
||||
.dot
|
||||
background none
|
||||
width .14rem
|
||||
.center_wrapper
|
||||
_wh(100%, calc(50% - 69px))
|
||||
_fj(row)
|
||||
.con2
|
||||
width 40%
|
||||
height 100%
|
||||
overflow hidden
|
||||
position relative
|
||||
background center center / 100% 100% url(../assets/images/sctj_bg1.png) no-repeat
|
||||
.title
|
||||
_wh(calc(100% - 34px), 22px)
|
||||
margin 17px
|
||||
_font(16px, 22px, #fff,,left)
|
||||
.desc
|
||||
_wh(100%, 22px)
|
||||
_fj(row, center)
|
||||
div
|
||||
_font(16px, 22px, #fff,,)
|
||||
span
|
||||
font-size 16px
|
||||
color #F7B502
|
||||
margin 0 30px
|
||||
.item_content_0
|
||||
_wh(calc(100% - 44px), calc(100% - 112px))
|
||||
margin 17px auto
|
||||
.con3
|
||||
width calc(60% - 15px)
|
||||
height 100%
|
||||
overflow hidden
|
||||
position relative
|
||||
background center center / 100% 100% url(../assets/images/sctj_bg2.png) no-repeat
|
||||
.title
|
||||
_wh(calc(100% - 34px), 22px)
|
||||
margin 17px
|
||||
_font(16px, 22px, #fff,,left)
|
||||
.item_content_1
|
||||
_wh(calc(100% - 44px), calc(100% - 90px))
|
||||
margin 17px auto
|
||||
.con4
|
||||
_wh(100%, calc(50% - 85px))
|
||||
margin-top 16px
|
||||
overflow hidden
|
||||
position relative
|
||||
background center center / 100% 100% url(../assets/images/sctj_bg3.png) no-repeat
|
||||
.block_h2
|
||||
_wh(calc(100% - 34px), 22px)
|
||||
margin 17px auto
|
||||
h2
|
||||
_font(16px, 22px, #fff,,left)
|
||||
.list_scroll_title
|
||||
_wh(calc(100% - 50px), 32px)
|
||||
margin 0 auto
|
||||
background #262F52
|
||||
line-height 32px
|
||||
span
|
||||
display inline-block
|
||||
width 11%
|
||||
text-align center
|
||||
line-height 32px
|
||||
// float left
|
||||
font-size 14px
|
||||
&:nth-child(1)
|
||||
width 8%
|
||||
&:nth-child(2)
|
||||
width 15%
|
||||
.content-block-scroll
|
||||
_wh(calc(100% - 50px), calc(100% - 113px))
|
||||
margin 0 auto 25px auto
|
||||
overflow hidden
|
||||
.content-block-scroll-ul
|
||||
width 100%
|
||||
li
|
||||
width 100%
|
||||
height 38px
|
||||
_fj(row, center)
|
||||
&:nth-child(2n)
|
||||
background rgba(38,47,82,0.50)
|
||||
span
|
||||
display inline-block
|
||||
width 11%
|
||||
font-size 12px
|
||||
// padding 0 .1rem
|
||||
text-align center
|
||||
line-height 38px
|
||||
box-sizing border-box
|
||||
// float left
|
||||
&:nth-child(1)
|
||||
width 8%
|
||||
&:nth-child(2)
|
||||
width 15%
|
||||
</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 HomeScreen = r => require.ensure([], () => r(require('@page/HomeScreen')), 'HomeScreen')
|
||||
|
||||
const ProdCount = r => require.ensure([], () => r(require('@page/ProdCount')), 'ProdCount')
|
||||
|
||||
Vue.use(Router)
|
||||
|
||||
export default new Router({
|
||||
@@ -35,6 +37,10 @@ export default new Router({
|
||||
{
|
||||
path: '/HomeScreen',
|
||||
component: HomeScreen
|
||||
},
|
||||
{
|
||||
path: '/ProdCount',
|
||||
component: ProdCount
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user