629 lines
17 KiB
Vue
629 lines
17 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<el-row>
|
|
<el-card v-loading="loading1" style="height: 450px">
|
|
<span>工时分析</span>
|
|
<el-date-picker
|
|
v-model="startTime"
|
|
value-format="yyyy-MM-dd"
|
|
size="small"
|
|
style="width: 170px;margin:0px 10px"
|
|
type="date"
|
|
placeholder="选择开始加工日期"/>
|
|
<span class="demonstration">~</span>
|
|
<el-date-picker
|
|
v-model="endTime"
|
|
value-format="yyyy-MM-dd"
|
|
size="small"
|
|
style="width: 170px;margin:0px 10px"
|
|
type="date"
|
|
placeholder="选择加工完成日期"/>
|
|
<el-button size="small" type="success" icon="el-icon-search" @click="search1()">查询</el-button>
|
|
<div v-if="chart1" id="myChart1" :style="{width: '100%', height: '400px', margin: 'auto'}"/>
|
|
</el-card>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-card v-loading="loading2" style="height: 450px">
|
|
<span>工人时间段统计</span>
|
|
<el-select v-model="nameValue" filterable size="small" placeholder="操作者" style="width: 110px">
|
|
<el-option
|
|
v-for="item in name"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"/>
|
|
</el-select>
|
|
<el-date-picker v-model="startTime2" :clearable="false" size="small" type="year" value-format="yyyy" format="yyyy" style="width: 150px" placeholder="选择年"/>
|
|
<el-button size="small" type="success" icon="el-icon-search" @click="search2()">查询</el-button>
|
|
<div v-if="chart2" id="myChart2" :style="{width: '100%', height: '400px', margin: 'auto'}"/>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-card v-loading="loading2" style="height: 450px">
|
|
<div v-if="chart3" id="myChart3" :style="{width: '100%', height: '400px', margin: 'auto'}"/>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col>
|
|
<el-card v-loading="loading4" style="height: 550px">
|
|
<span>不合格数量统计</span>
|
|
<el-date-picker v-model="startTime4" :clearable="false" size="small" type="year" value-format="yyyy" format="yyyy" style="width: 150px" placeholder="选择年"/>
|
|
<el-button size="small" type="success" icon="el-icon-search" @click="search4()">查询</el-button>
|
|
<div v-if="chart4" id="myChart4" :style="{width: '100%', height: '400px', margin: 'auto'}"/>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col>
|
|
<el-card v-loading="loading5" style="height: 550px">
|
|
<span>设备利用率OEE</span>
|
|
<el-date-picker
|
|
v-model="startTime5"
|
|
value-format="yyyy-MM-dd"
|
|
size="small"
|
|
style="width: 160px;margin-top: 10px"
|
|
type="date"
|
|
placeholder="选择日期"/>
|
|
<span class="demonstration">~</span>
|
|
<el-date-picker
|
|
v-model="endTime5"
|
|
value-format="yyyy-MM-dd"
|
|
size="small"
|
|
style="width: 160px"
|
|
type="date"
|
|
placeholder="选择日期"/>
|
|
<el-button size="small" type="success" icon="el-icon-search" @click="search5()">查询</el-button>
|
|
<div v-if="chart5" id="myChart5" :style="{width: '100%', height: '400px', margin: 'auto'}"/>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col>
|
|
<el-card v-loading="loading6" style="height: 550px">
|
|
<span>设备利用率OEE</span>
|
|
<el-select v-model="opnameValue" filterable size="small" placeholder="工位号" style="width: 110px">
|
|
<el-option
|
|
v-for="item in opname"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"/>
|
|
</el-select>
|
|
<el-date-picker v-model="startTime6" :clearable="false" size="small" type="year" value-format="yyyy" format="yyyy" style="width: 150px" placeholder="选择年"/>
|
|
<el-button size="small" type="success" icon="el-icon-search" @click="search6()">查询</el-button>
|
|
<div v-if="chart6" id="myChart6" :style="{width: '100%', height: '400px', margin: 'auto'}"/>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { search1, search2, searchPerson, search4, search5, getOPname, search6 } from '@/api/ManufacturingCenter/ManHourAnalysis'
|
|
import echarts from 'echarts'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
startTime: '',
|
|
endTime: '',
|
|
chart1: true,
|
|
res1: [],
|
|
loading1: false, // 图表1
|
|
nameValue: '',
|
|
name: [],
|
|
startTime2: '',
|
|
chart2: true,
|
|
res2: [],
|
|
loading2: false, // 2
|
|
chart3: true, // 3
|
|
startTime4: '',
|
|
chart4: true,
|
|
res4: [],
|
|
loading4: false, // 图表4
|
|
startTime5: '2019-12-01',
|
|
endTime5: '2019-12-21',
|
|
chart5: true,
|
|
res5: [],
|
|
loading5: false, // 图表5
|
|
opnameValue: '',
|
|
opname: [],
|
|
startTime6: '2019',
|
|
chart6: true,
|
|
res6: [],
|
|
loading6: false // 图表6
|
|
}
|
|
},
|
|
created() {
|
|
this.fetchData()
|
|
},
|
|
mounted() {
|
|
this.search1()
|
|
this.search2()
|
|
this.search4()
|
|
this.search5()
|
|
this.search6()
|
|
},
|
|
methods: {
|
|
fetchData() {
|
|
this.name = []
|
|
this.opname = []
|
|
searchPerson().then(response => {
|
|
for (let i = 0; i < response.data.length; i++) {
|
|
this.name.push({
|
|
label: response.data[i].姓名,
|
|
value: response.data[i].姓名
|
|
})
|
|
}
|
|
}).then(() => {
|
|
this.nameValue = this.name[0].value
|
|
})
|
|
getOPname().then(response => {
|
|
for (let i = 0; i < response.data.length; i++) {
|
|
this.opname.push({
|
|
label: response.data[i].设备号,
|
|
value: response.data[i].设备号
|
|
})
|
|
}
|
|
}).then(() => {
|
|
this.opnameValue = this.opname[0].value
|
|
})
|
|
},
|
|
// 时间段工时
|
|
search1() {
|
|
this.chart1 = false
|
|
this.loading1 = true
|
|
var check
|
|
if (this.startTime && this.endTime) { check = 1 } else { check = 0 }
|
|
search1(0, 0, check, this.startTime, this.endTime).then(response => {
|
|
this.res1 = response.data
|
|
this.loading1 = false
|
|
this.chart1 = true
|
|
}).then(() => {
|
|
var myChart1 = echarts.init(document.getElementById('myChart1'))
|
|
myChart1.clear()
|
|
this.drawLine1(this.res1)
|
|
})
|
|
},
|
|
drawLine1(data) {
|
|
var dataX = []
|
|
var lineData1 = []
|
|
var lineData2 = []
|
|
for (let i = 0; i < data.length; i++) {
|
|
dataX.push(data[i].姓名)
|
|
lineData1.push(data[i].理论加工时间段)
|
|
lineData2.push(data[i].实际加工时间段)
|
|
}
|
|
var myChart1 = echarts.init(document.getElementById('myChart1'))
|
|
myChart1.clear()
|
|
myChart1.setOption({
|
|
legend: {
|
|
data: ['理论工时', '实际工时']
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '8%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
name: '姓名',
|
|
axisLabel: {
|
|
interval: 0,
|
|
rotate: 90,
|
|
margin: 10
|
|
},
|
|
data: dataX
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
name: 'min',
|
|
min: 0,
|
|
scale: 'true'
|
|
},
|
|
series: [
|
|
{
|
|
name: '理论工时',
|
|
type: 'bar',
|
|
color: '#67C23A',
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'inside'
|
|
}
|
|
},
|
|
data: lineData1
|
|
},
|
|
{
|
|
name: '实际工时',
|
|
type: 'bar',
|
|
color: 'rgb(213,58,53)',
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'top'
|
|
}
|
|
},
|
|
data: lineData2
|
|
}
|
|
]
|
|
})
|
|
},
|
|
search2() {
|
|
this.chart2 = false
|
|
this.loading2 = true
|
|
var check, startTime, endtime
|
|
if (this.startTime2) { check = 1 } else { check = 0 }
|
|
if (check === 1) {
|
|
startTime = this.startTime2 + '-01-01'
|
|
endtime = this.startTime2 + '-12-31'
|
|
}
|
|
search2(1, this.nameValue, check, startTime, endtime).then(response => {
|
|
this.res2 = response.data
|
|
this.loading2 = false
|
|
this.chart2 = true
|
|
}).then(() => {
|
|
var myChart2 = echarts.init(document.getElementById('myChart2'))
|
|
var myChart3 = echarts.init(document.getElementById('myChart3'))
|
|
myChart2.clear()
|
|
myChart3.clear()
|
|
this.drawLine2(this.res2)
|
|
this.drawLine3(this.res2)
|
|
})
|
|
},
|
|
drawLine2(data) {
|
|
var dataX = []
|
|
var lineData1 = []
|
|
var lineData2 = []
|
|
for (let i = 0; i < data.length; i++) {
|
|
dataX.push(data[i].月份)
|
|
lineData1.push(data[i].理论加工时间段)
|
|
lineData2.push(data[i].实际加工时间段)
|
|
}
|
|
var myChart2 = echarts.init(document.getElementById('myChart2'))
|
|
myChart2.clear()
|
|
myChart2.setOption({
|
|
legend: {
|
|
data: ['理论工时', '实际工时']
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '8%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
name: '月份',
|
|
axisLabel: {
|
|
interval: 0,
|
|
rotate: 0,
|
|
margin: 10
|
|
},
|
|
data: dataX
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
name: 'min',
|
|
min: 0,
|
|
scale: 'true'
|
|
},
|
|
series: [
|
|
{
|
|
name: '理论工时',
|
|
type: 'bar',
|
|
color: '#67C23A',
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'inside'
|
|
}
|
|
},
|
|
data: lineData1
|
|
},
|
|
{
|
|
name: '实际工时',
|
|
type: 'bar',
|
|
color: 'rgb(213,58,53)',
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'top'
|
|
}
|
|
},
|
|
data: lineData2
|
|
}
|
|
]
|
|
})
|
|
},
|
|
drawLine3(data) {
|
|
var dataX = []
|
|
var lineData1 = []
|
|
var lineData2 = []
|
|
for (let i = 0; i < data.length; i++) {
|
|
dataX.push(data[i].月份)
|
|
lineData1.push(data[i].理论加工时间段)
|
|
lineData2.push(data[i].实际加工时间段)
|
|
}
|
|
var myChart3 = echarts.init(document.getElementById('myChart3'))
|
|
myChart3.clear()
|
|
myChart3.setOption({
|
|
legend: {
|
|
data: ['理论工时', '实际工时']
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '8%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
name: '月份',
|
|
axisLabel: {
|
|
interval: 0,
|
|
rotate: 0,
|
|
margin: 10
|
|
},
|
|
data: dataX
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
name: 'min',
|
|
min: 0,
|
|
scale: 'true'
|
|
},
|
|
series: [
|
|
{
|
|
name: '理论工时',
|
|
data: lineData1,
|
|
type: 'line'
|
|
},
|
|
{
|
|
name: '实际工时',
|
|
data: lineData2,
|
|
type: 'line'
|
|
}
|
|
]
|
|
})
|
|
},
|
|
search4() {
|
|
this.chart4 = false
|
|
this.loading4 = true
|
|
var check, startTime, endtime
|
|
if (this.startTime4) { check = 1 } else { check = 0 }
|
|
if (check === 1) {
|
|
startTime = this.startTime4 + '-01-01'
|
|
endtime = this.startTime4 + '-12-31'
|
|
}
|
|
search4(check, startTime, endtime).then(response => {
|
|
this.res4 = response.data
|
|
this.loading4 = false
|
|
this.chart4 = true
|
|
}).then(() => {
|
|
var myChart4 = echarts.init(document.getElementById('myChart4'))
|
|
myChart4.clear()
|
|
this.drawLine4(this.res4)
|
|
})
|
|
},
|
|
drawLine4(data) {
|
|
var dataX = []
|
|
var lineData1 = []
|
|
for (let i = 0; i < data.length; i++) {
|
|
dataX.push(data[i].月份)
|
|
lineData1.push(data[i].不合格总数量)
|
|
}
|
|
var myChart4 = echarts.init(document.getElementById('myChart4'))
|
|
myChart4.clear()
|
|
myChart4.setOption({
|
|
grid: {
|
|
left: '3%',
|
|
right: '8%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
name: '月份',
|
|
axisLabel: {
|
|
interval: 0,
|
|
rotate: 0,
|
|
margin: 10
|
|
},
|
|
data: dataX
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
name: '不合格数量',
|
|
min: 0,
|
|
scale: 'true'
|
|
},
|
|
series: [
|
|
{
|
|
name: '总数量',
|
|
type: 'line',
|
|
color: '#67C23A',
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'inside'
|
|
}
|
|
},
|
|
data: lineData1
|
|
}
|
|
]
|
|
})
|
|
},
|
|
search5() {
|
|
this.chart5 = false
|
|
this.loading5 = true
|
|
search5(this.startTime5, this.endTime5).then(response => {
|
|
this.res5 = response.data
|
|
this.loading5 = false
|
|
this.chart5 = true
|
|
}).then(() => {
|
|
var myChart5 = echarts.init(document.getElementById('myChart5'))
|
|
myChart5.clear()
|
|
this.drawLine5(this.res5)
|
|
})
|
|
},
|
|
drawLine5(data) {
|
|
var dataX = []
|
|
var lineData1 = []
|
|
for (let i = 0; i < data.length; i++) {
|
|
dataX.push(data[i].工位号)
|
|
lineData1.push(data[i].持续时间)
|
|
}
|
|
var myChart5 = echarts.init(document.getElementById('myChart5'))
|
|
myChart5.clear()
|
|
myChart5.setOption({
|
|
grid: {
|
|
left: '3%',
|
|
right: '8%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
name: '工位号',
|
|
axisLabel: {
|
|
interval: 0,
|
|
rotate: 90,
|
|
margin: 10
|
|
},
|
|
data: dataX
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
name: '利用率(%)',
|
|
min: 0,
|
|
scale: 'true'
|
|
},
|
|
series: [
|
|
{
|
|
name: '工位号',
|
|
type: 'bar',
|
|
color: '#67C23A',
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'inside'
|
|
}
|
|
},
|
|
data: lineData1
|
|
}
|
|
]
|
|
})
|
|
},
|
|
search6() {
|
|
this.chart6 = false
|
|
this.loading6 = true
|
|
var check, startTime, endtime
|
|
if (this.startTime6) { check = 1 } else { check = 0 }
|
|
if (check === 1) {
|
|
startTime = this.startTime6 + '-01-01'
|
|
endtime = this.startTime6 + '-12-31'
|
|
}
|
|
search6(this.opnameValue, check, startTime, endtime).then(response => {
|
|
this.res6 = response.data
|
|
this.loading6 = false
|
|
this.chart6 = true
|
|
}).then(() => {
|
|
var myChart6 = echarts.init(document.getElementById('myChart6'))
|
|
myChart6.clear()
|
|
this.drawLine6(this.res6)
|
|
})
|
|
},
|
|
drawLine6(data) {
|
|
var dataX = []
|
|
var lineData1 = []
|
|
for (let i = 0; i < data.length; i++) {
|
|
dataX.push(data[i].月份)
|
|
lineData1.push(data[i].持续时间)
|
|
}
|
|
var myChart6 = echarts.init(document.getElementById('myChart6'))
|
|
myChart6.clear()
|
|
myChart6.setOption({
|
|
grid: {
|
|
left: '3%',
|
|
right: '8%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
name: '月份',
|
|
axisLabel: {
|
|
interval: 0,
|
|
rotate: 0,
|
|
margin: 10
|
|
},
|
|
data: dataX
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
name: '利用率(%)',
|
|
min: 0,
|
|
scale: 'true'
|
|
},
|
|
series: [
|
|
{
|
|
name: '工位号',
|
|
type: 'bar',
|
|
color: '#67C23A',
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'inside'
|
|
}
|
|
},
|
|
data: lineData1
|
|
}
|
|
]
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
|
|
</style>
|