158 lines
4.3 KiB
Vue
158 lines
4.3 KiB
Vue
<template>
|
|
<div>
|
|
<el-card>
|
|
<el-date-picker
|
|
v-model="selectionTimeValue"
|
|
:picker-options="pickerOptions"
|
|
value-format="yyyy-MM"
|
|
type="monthrange"
|
|
align="right"
|
|
size="small"
|
|
style="width: 260px"
|
|
unlink-panels
|
|
range-separator="~"
|
|
start-placeholder="开始月份"
|
|
end-placeholder="结束月份"
|
|
@change="getProductItemValue1"/>
|
|
<span style="margin-left: 340px;font-size: 20px;font-weight: bold">{{ TitlesDrawings }}</span>
|
|
<div id="myChart7" style="width: 1500px; height: 800px; margin-bottom: 20px; margin-top: 20px"/>
|
|
</el-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from 'echarts'
|
|
export default {
|
|
data() {
|
|
return {
|
|
pickerOptions: {
|
|
shortcuts: [{
|
|
text: '本月',
|
|
onClick(picker) {
|
|
picker.$emit('pick', [new Date(), new Date()])
|
|
}
|
|
}, {
|
|
text: '今年至今',
|
|
onClick(picker) {
|
|
const end = new Date()
|
|
const start = new Date(new Date().getFullYear(), 0)
|
|
picker.$emit('pick', [start, end])
|
|
}
|
|
}, {
|
|
text: '最近六个月',
|
|
onClick(picker) {
|
|
const end = new Date()
|
|
const start = new Date()
|
|
start.setMonth(start.getMonth() - 6)
|
|
picker.$emit('pick', [start, end])
|
|
}
|
|
}, {
|
|
text: '最近一年',
|
|
onClick(picker) {
|
|
const end = new Date()
|
|
const start = new Date()
|
|
start.setMonth(start.getMonth() - 12)
|
|
picker.$emit('pick', [start, end])
|
|
}
|
|
}, {
|
|
text: '最近两年',
|
|
onClick(picker) {
|
|
const end = new Date()
|
|
const start = new Date()
|
|
start.setMonth(start.getMonth() - 24)
|
|
picker.$emit('pick', [start, end])
|
|
}
|
|
}, {
|
|
text: '最近三年',
|
|
onClick(picker) {
|
|
const end = new Date()
|
|
const start = new Date()
|
|
start.setMonth(start.getMonth() - 36)
|
|
picker.$emit('pick', [start, end])
|
|
}
|
|
}]
|
|
},
|
|
TitlesDrawings: '精工车间月度工时统计趋势图',
|
|
selectionTimeValue: ''
|
|
}
|
|
},
|
|
methods: {
|
|
getProductItemValue1() {
|
|
if (this.selectionTimeValue) {
|
|
var param = []
|
|
param[0] = ['开始时间', this.selectionTimeValue[0]]
|
|
param[1] = ['结束时间', this.selectionTimeValue[1]]
|
|
var Data = this.CreateData('11', 'jy_车间月度工时统计_查询', param)
|
|
this.ExecDatabase(Data).then(response => {
|
|
this.xdata = []
|
|
this.y1data = []
|
|
this.y2data = []
|
|
this.y3data = []
|
|
if (response.data.length > 0) {
|
|
for (let i = 0; i < response.data.length; i++) {
|
|
this.xdata.push(response.data[i].日期)
|
|
this.y1data.push(response.data[i].精工车间)
|
|
this.y2data.push(response.data[i].通用装配)
|
|
this.y3data.push(response.data[i].专机装配)
|
|
if (!this.downdate) { this.downdate = 0 }
|
|
}
|
|
}
|
|
}).then(() => {
|
|
this.drawLine()
|
|
})
|
|
} else {
|
|
this.$message.warning('请先选择时间')
|
|
}
|
|
},
|
|
drawLine() {
|
|
var chartDom = document.getElementById('myChart7')
|
|
var myChart7 = echarts.init(chartDom)
|
|
var option
|
|
|
|
option = {
|
|
color: ['rgb(169, 202, 232)', '#f40', 'rgb(100, 20, 232)'],
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: this.xdata
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
series: [{
|
|
symbol: 'none',
|
|
name: '精工车间',
|
|
type: 'line',
|
|
itemStyle: {
|
|
normal: {
|
|
label: {
|
|
show: true
|
|
},
|
|
lineStyle: {
|
|
width: 2,
|
|
color: 'rgb(169,202,232)'
|
|
}
|
|
}
|
|
},
|
|
data: this.y1data
|
|
}
|
|
],
|
|
legend: {
|
|
symbol: 'none',
|
|
data: ['精工车间'],
|
|
x: 'center',
|
|
y: 'bottom'
|
|
}
|
|
}
|
|
option && myChart7.setOption(option)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|