You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

254 lines
6.8 KiB
Vue

<template>
2 years ago
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="100px" style="margin-bottom: 0px;">
<el-form-item label="生产时间段" prop="productDateArray">
<el-date-picker
v-model="queryParams.productDateArray"
format="yyyy-MM-dd HH:mm:00"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
<el-form-item label="产品编码" prop="productCode">
<el-input
v-model="queryParams.productCode"
placeholder="请输入产品编码"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="设备编码" prop="machineCode">
<el-input
v-model="queryParams.machineCode"
placeholder="请输入设备编码"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
2 years ago
<el-form-item label="班次" prop="shiftId">
<el-select v-model="queryParams.shiftId" placeholder="请选择班次" clearable>
<el-option v-for="item in workShift" :key="item.shiftId" :label="item.shiftDesc"
:value="item.shiftId"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="图表类型">
<el-select v-model="queryParams.chartType" filterable placeholder="请选择图表类型">
<el-option
v-for="item in typeOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"></el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"></el-button>
</el-form-item>
</el-form>
<el-row :gutter="20">
<el-col :sm="24" :lg="24">
<span style="font-size: 20px;margin: 40%;color: cadetblue;">{{title}}</span>
</el-col>
</el-row>
<el-row :gutter="20">
<div style="border: 1px solid #cfdee4;">
<div id="orderline" style="width:100%;height:500px"></div>
</div>
</el-row>
</div>
</template>
<script>
2 years ago
import * as echarts from 'echarts'
require('echarts/theme/macarons')
import {getHfChartData} from "@/api/quality/qcProCheck";
import {getProShifts} from "@/api/mes/reportWork";
import moment from 'moment';
export default {
2 years ago
name: "produceLineChart",
components: {},
data() {
return {
2 years ago
title:"烘房白坯质量统计",
// 查询参数
queryParams: {
productDateArray: [],
pageNum: 1,
pageSize: 10,
workorderCode: null,
workorderName: null,
parentOrder: null,
orderId: null,
orderCode: null,
productId: null,
productCode: null,
prodType: null,
productName: null,
productSpc: null,
productDate: null,
createTimeStart:null,
createTimeEnd:null,
chartType:'hf'
},
typeOptions:[
{
label:"烘房",
value:"hf"
},
{
label:"产品",
value:"cp"
}
2 years ago
],
options:null,
// 产品选中listtag
selectMaterielListtag:[],
// 班次list
workShift: []
}
},
2 years ago
mounted(){
this.getDate();
this.getList();
// 获取班次信息
getProShifts().then(response => {
this.workShift = response.data
})
},
methods: {
/**获取默认查询时间段**/
getDate() {
let start = this.Fungetdate (0)
let end = this.Fungetdate (1)
this.queryParams.productDateArray.push(start,end)
},
Fungetdate (num) {
var dd = new Date();
dd.setDate(dd.getDate() + num);
var y = dd.getFullYear();
var m = dd.getMonth() + 1;//获取当前月份的日期
var d = dd.getDate();
return y + "-" + m + "-" + d+" 00:00:00";
},
/** 搜索按钮操作 */
handleQuery() {
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.getDate();
this.handleQuery();
},
getList() {
if(this.queryParams.productDateArray!=null){
this.queryParams.createTimeStart = moment(this.queryParams.productDateArray[0]).format('YYYY-MM-DD HH:mm:00');
this.queryParams.createTimeEnd = moment(this.queryParams.productDateArray[1]).format('YYYY-MM-DD HH:mm:00');
}
let myChart = this.$echarts.init(document.getElementById('orderline'))
getHfChartData(this.queryParams).then(data => {
let seriesResult = data.series;
seriesResult.forEach(se => {
se.type = 'bar';
se.stack = 'total',
se.label = {show: true},
se.emphasis = {focus: 'series'}
});
myChart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: data.yAxisData//['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
series: seriesResult,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: function (params) {
debugger
let result="合格率:"+Number(params[0].data)*100.00/(Number(params[1].data)+Number(params[0].data))+"%<br/>";
for (let i = 0; i < params.length; i++) {
result+=params[i].marker + params[i].seriesName + '' + params[i].data + '<br>'
}
return params[0].name + '<br/>'
+ result
}
}
},
true
)
})
}
}
};
</script>
2 years ago
<style lang="scss" scoped>
.tagbox {
display: flex;
/* overflow: scroll; */
position: relative;
width: 80%;
padding-left: 26px;
margin-bottom: 15px;
.tagboxlabel{
width: 100px;
text-align: right;
vertical-align: middle;
font-size: 14px;
color: black;
line-height: 40px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-right: 12px;
}
.tag {
width: 720px;
border: 1px #DCDFE6 solid;
height: 60px;
padding: 5px 15px;
overflow-y: scroll;
.tagitem{
margin-left: 5px;
}
}
.button1{
width: 37px;
height: 37px;
position: absolute;
right: -39px;
top: 2px;
}
}
</style>