添加营销系统模块
This commit is contained in:
hedekun
202
src/views/ManufacturingCenter/OwnTimeStatistics/index.vue
Normal file
202
src/views/ManufacturingCenter/OwnTimeStatistics/index.vue
Normal file
@@ -0,0 +1,202 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-card>
|
||||
<el-row>
|
||||
<span>项目名称:</span>
|
||||
<el-select v-model="projectValue" size="small" filterable clearable placeholder="项目名称">
|
||||
<el-option
|
||||
v-for="item in project"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"/>
|
||||
</el-select>
|
||||
<span>开始日期:</span>
|
||||
<el-date-picker
|
||||
v-model="date1"
|
||||
size="small"
|
||||
type="date"
|
||||
value-format="yyyy-MM-dd"
|
||||
format="yyyy-MM-dd"
|
||||
placeholder="选择日期"/>
|
||||
<span>结束日期:</span>
|
||||
<el-date-picker
|
||||
v-model="date2"
|
||||
size="small"
|
||||
type="date"
|
||||
value-format="yyyy-MM-dd"
|
||||
format="yyyy-MM-dd"
|
||||
placeholder="选择日期"/>
|
||||
<el-radio-group v-model="radio" size="small" style="margin: 10px;">
|
||||
<el-radio :label="1">天</el-radio>
|
||||
<el-radio :label="2">周</el-radio>
|
||||
<el-radio :label="3">月</el-radio>
|
||||
</el-radio-group>
|
||||
<el-button type="success" icon="el-icon-search" style="margin: 10px;" size="small" @click="search">查询</el-button>
|
||||
</el-row>
|
||||
</el-card>
|
||||
<el-card v-loading="loading">
|
||||
<div id="myChart" :style="{width: '100%', height: '470px', margin: 'auto'}"/>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { initProject, searchData } from '@/api/ManufacturingCenter/OwnTimeStatistics'
|
||||
import echarts from 'echarts'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
projectValue: '',
|
||||
project: [],
|
||||
date1: '',
|
||||
date2: '',
|
||||
radio: 1,
|
||||
check1: 0,
|
||||
dataX: [],
|
||||
series: [],
|
||||
delayOkTime: [],
|
||||
planOkTime: [],
|
||||
preOkTime: [],
|
||||
noOkTime: [],
|
||||
totalTime: [],
|
||||
totalAblity: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.fetchData()
|
||||
},
|
||||
methods: {
|
||||
fetchData() {
|
||||
this.project = []
|
||||
initProject().then(response => {
|
||||
for (let i = 0; i < response.data.length; i++) {
|
||||
this.project.push({
|
||||
label: response.data[i].项目名称,
|
||||
value: response.data[i].项目流水号
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
search() {
|
||||
this.loading = true
|
||||
var myChart = echarts.init(document.getElementById('myChart'))
|
||||
myChart.clear()
|
||||
if (this.projectValue === '' || this.projectValue === null) {
|
||||
this.check1 = 0
|
||||
} else {
|
||||
this.check1 = 1
|
||||
}
|
||||
if (this.date1 === '' || this.date1 === null || this.date2 === '' || this.date2 === null) {
|
||||
this.check2 = 0
|
||||
} else {
|
||||
this.check2 = 1
|
||||
}
|
||||
searchData(this.check1, this.projectValue, this.check2, this.date1, this.date2, this.radio).then(response => {
|
||||
console.log(response.data)
|
||||
if (response.data.length !== 0 && !response.data[0].hasOwnProperty('result')) {
|
||||
this.drawLine(response.data)
|
||||
} else {
|
||||
this.$message.warning('没有数据或数据量太大，请重新选择查询条件')
|
||||
this.loading = false
|
||||
}
|
||||
})
|
||||
},
|
||||
drawLine(data) {
|
||||
this.dataX = []
|
||||
this.delayOkTime = []
|
||||
this.planOkTime = []
|
||||
this.preOkTime = []
|
||||
this.noOkTime = []
|
||||
this.totalTime = []
|
||||
this.totalAblity = []
|
||||
this.series = []
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
this.dataX.push(data[i].计划日期)
|
||||
this.delayOkTime.push(data[i].拖延完成工时)
|
||||
this.planOkTime.push(data[i].按计划完成工时)
|
||||
this.preOkTime.push(data[i].提前完成工时)
|
||||
this.noOkTime.push(data[i].未完成工时)
|
||||
this.totalTime.push(data[i].计划总工时)
|
||||
this.totalAblity.push(data[i].设备总能力)
|
||||
}
|
||||
var myChart = echarts.init(document.getElementById('myChart'))
|
||||
myChart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['提前完成工时', '按计划完成工时', '未完成工时', '拖延完成工时', '设备总能力']
|
||||
},
|
||||
dataZoom: { // 实现缩放功能
|
||||
show: true,
|
||||
realtime: true,
|
||||
start: 0,
|
||||
end: 100
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
name: '计划日期',
|
||||
data: this.dataX,
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
rotate: 0,
|
||||
margin: 10
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '工时',
|
||||
min: 0,
|
||||
scale: 'true'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '提前完成工时',
|
||||
type: 'bar',
|
||||
// stack: '工时',
|
||||
data: this.preOkTime
|
||||
},
|
||||
{
|
||||
name: '按计划完成工时',
|
||||
type: 'bar',
|
||||
data: this.planOkTime
|
||||
},
|
||||
{
|
||||
name: '未完成工时',
|
||||
type: 'bar',
|
||||
data: this.noOkTime
|
||||
},
|
||||
{
|
||||
name: '拖延完成工时',
|
||||
type: 'bar',
|
||||
data: this.delayOkTime
|
||||
},
|
||||
{
|
||||
name: '设备总能力',
|
||||
type: 'bar',
|
||||
data: this.totalAblity
|
||||
}
|
||||
]
|
||||
})
|
||||
this.loading = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-card{
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.el-date-editor{
|
||||
width:200px
|
||||
}
|
||||
span{
|
||||
margin: 10px 0 10px 10px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user