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.
619 lines
15 KiB
Vue
619 lines
15 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px" style="margin-bottom:-15px" >
|
|
<!-- <el-form-item label="检验类型">
|
|
<el-select v-model="queryParams.checkType" filterable placeholder="请选择检验类型">
|
|
<el-option
|
|
v-for="item in jianyanType"
|
|
:key="item.factoryCode"
|
|
:label="item.factoryName"
|
|
:value="item.factoryCode">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item> -->
|
|
<el-form-item label="统计维度">
|
|
<el-select v-model="queryParams.ymdms" filterable placeholder="请选择检验节点" @change="change(queryParams.ymdms)">
|
|
<el-option
|
|
v-for="item in jianyanNode"
|
|
:key="item.ymdType"
|
|
:label="item.ymdTypeName"
|
|
:value="item.ymdType">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item v-show="queryParams.ymdms=='yyyy'" label="检验时间">
|
|
<el-date-picker
|
|
v-model="queryParams.incomeTimeStr"
|
|
style="width: 230px"
|
|
type="year"
|
|
value-format="yyyy"
|
|
placeholder="选择检验时间">
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
<el-form-item v-show="queryParams.ymdms=='mm'" label="检验时间">
|
|
<el-date-picker v-model="queryParams.incomeTimeStr" size="small" style="width: 230px" value-format="yyyy-MM"
|
|
type="month" placeholder="选择检验时间" />
|
|
</el-form-item>
|
|
<el-form-item v-show="queryParams.ymdms=='dd'" label="检验时间">
|
|
<el-date-picker v-model="queryParams.incomeTimeStr" size="small" style="width: 230px" type="date" value-format="yyyy-MM-dd" placeholder="选择检验时间"
|
|
/>
|
|
</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-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出明细</el-button>
|
|
</el-form-item>
|
|
</el-row>
|
|
</el-form>
|
|
|
|
<div class="top-table">
|
|
<el-tabs v-model="activeName" @tab-click="handleClick" style="height:1000px;overflow-y: auro;">
|
|
<el-tab-pane label="不良率统计" name="first" >
|
|
<div class="top-one-tab">
|
|
<div class="title">来料不良率</div>
|
|
<div id="echartssl" style="width:1200px;height:450px;"></div>
|
|
</div>
|
|
<div class="top-left-table">
|
|
<div class="title">来料数据统计</div>
|
|
<el-table :data="tableTbody" height="440" :loading="loading" ref="tables">
|
|
<el-table-column label="时间" align="center" prop="timeCol" min-width="100" fixed="left" />
|
|
<el-table-column label="抽样数" align="center" prop="sampleQuality" min-width="100" fixed/>
|
|
<el-table-column label="缺陷不良" align="center" min-width="100">
|
|
<template v-for="(column, index) in tableThead">
|
|
<el-table-column align="center" :prop="'col'+index" :key="index" :label="column"/>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="不良率" align="center" prop="noOkRate" min-width="100" fixed="right">
|
|
<template slot-scope="scope">
|
|
<span>{{scope.row.noOkRate}}%</span>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="不良数统计" name="second">
|
|
<div class="top-one-tab">
|
|
<div class="title">不良排列图</div>
|
|
<div id="echartTsl" style="width:1200px;height:500px;"></div>
|
|
</div>
|
|
<div class="top-right-table">
|
|
<div class="left-table">
|
|
<div class="title">来料</div>
|
|
<el-table :data="tableBlfx" height="400">
|
|
<el-table-column label="时间" align="center" prop="dataType" min-width="100" />
|
|
<el-table-column label="抽样数" align="center" prop="noOkQuality" min-width="100"/>
|
|
<el-table-column label="不良率" align="center" prop="noOkNumRate" min-width="100">
|
|
<template slot-scope="scope">
|
|
<span>{{scope.row.noOkNumRate}}%</span>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<div class="right-echarts">
|
|
<div class="title">不良比例</div>
|
|
<div id="echartsThl" style="width:600px;height:450px;"></div>
|
|
</div>
|
|
</div>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { getIncomeTableList,getTableHzTitleTh,getTableHzDataSC,getTableHzNoOkData,getDictData} from "@/api/quality/qcTable";
|
|
import moment from 'moment';
|
|
import * as echarts from "echarts";
|
|
|
|
export default {
|
|
name: "LlAnalysisReport",
|
|
components: {},
|
|
data() {
|
|
return {
|
|
// 遮罩层
|
|
loading: false,
|
|
// 选中数组
|
|
ids: [],
|
|
// 非单个禁用
|
|
single: true,
|
|
// 非多个禁用
|
|
multiple: true,
|
|
// 显示搜索条件
|
|
showSearch: true,
|
|
// 总条数
|
|
total: 0,
|
|
// 生产rfid流程表格数据
|
|
incomeList: [],
|
|
// 弹出层标题
|
|
title: "",
|
|
// 是否显示弹出层
|
|
open: false,
|
|
activeName:'',
|
|
// 新增-物料选中listtag
|
|
selectMaterielListtag:[],
|
|
dateRange:[],
|
|
// 查询参数
|
|
queryParams: {
|
|
checkType:'checkTypeLL',
|
|
ymdms: 'dd',
|
|
incomeTimeStr: moment().format('YYYY-MM-DD'),
|
|
|
|
},
|
|
// 表单参数
|
|
form: {},
|
|
// 表单校验
|
|
rules: {
|
|
workorderId: [
|
|
{ required: true, message: "工单ID不能为空", trigger: "blur" }
|
|
],
|
|
rfid: [
|
|
{ required: true, message: "rfid号不能为空", trigger: "blur" }
|
|
],
|
|
},
|
|
jianyanType:[
|
|
{
|
|
factoryCode:'checkTypeLL',
|
|
factoryName:''
|
|
}
|
|
],
|
|
jianyanNode:[
|
|
// {
|
|
// dictNo:'yyyy',
|
|
// dictValue:'年'
|
|
// },
|
|
// {
|
|
// dictNo:'mm',
|
|
// dictValue:'月'
|
|
// },
|
|
// {
|
|
// dictNo:'dd',
|
|
// dictValue:'日'
|
|
// },
|
|
],
|
|
tableThead:[
|
|
|
|
],
|
|
tableTbody:[],
|
|
tableBlfx:[],
|
|
echartsData:[],
|
|
dateNode:'dd',
|
|
};
|
|
},
|
|
mounted(){
|
|
// this.$nextTick(()=>{
|
|
this.getDictData()
|
|
this.getThead()
|
|
this.getTbody()
|
|
this.getBlfx()
|
|
// })
|
|
|
|
// this.getEchartsThl()
|
|
|
|
|
|
},
|
|
created() {
|
|
this.activeName='first'
|
|
},
|
|
methods: {
|
|
|
|
handleClick(){
|
|
this.$nextTick(()=>{
|
|
this.$refs.tables.doLayout()//对table进行重新布局
|
|
})
|
|
},
|
|
async getThead(){
|
|
let res=await getTableHzTitleTh({checkType:'checkTypeLL'})
|
|
console.log('resTh',res)
|
|
this.tableThead=res.columns1
|
|
|
|
},
|
|
async getTbody(){
|
|
this.loading=true
|
|
let res=await getTableHzDataSC(this.queryParams)
|
|
console.log('resData',res)
|
|
this.$nextTick(()=>{
|
|
this.$refs.tables.doLayout()//对table进行重新布局
|
|
})
|
|
let xData=[]
|
|
let yData=[]
|
|
//this.tableTbody=res
|
|
this.tableTbody=res.filter(item => item.sampleQuality !== '0');
|
|
res.map((item,index)=>{
|
|
xData.push(item.timeCol),
|
|
yData.push(item.noOkRate)
|
|
|
|
})
|
|
console.log('tableTbody',this.tableTbody)
|
|
this.loading=false
|
|
this.getEchartsl(xData,yData)
|
|
},
|
|
async getBlfx(){
|
|
let xdata=[]
|
|
let ydata=[]
|
|
let peiData=[]
|
|
let res=await getTableHzNoOkData(this.queryParams)
|
|
console.log('res不良分析',res)
|
|
res.map((item,index)=>{
|
|
var pDat={}
|
|
pDat.name=item.dataType
|
|
pDat.value=item.noOkQuality
|
|
xdata.push(item.dataType)
|
|
ydata.push(item.noOkQuality)
|
|
peiData.push(pDat)
|
|
})
|
|
this.tableBlfx=res
|
|
console.log('table',this.tableBlfx)
|
|
this.getEchartsTl(xdata,ydata)
|
|
this.getEchartsThl(peiData)
|
|
|
|
},
|
|
change(e){
|
|
console.log('e',e)
|
|
this.dateNode=e,
|
|
this.queryParams.incomeTimeStr=null
|
|
},
|
|
getDictData() {
|
|
const _this = this;
|
|
getDictData(
|
|
{
|
|
dictType: 'static_dims',
|
|
}
|
|
).then((response) => {
|
|
if (response) {
|
|
console.log('response',response)
|
|
_this.jianyanNode = response
|
|
_this.queryParams.ymdms=_this.jianyanNode[2].ymdType
|
|
}
|
|
});
|
|
},
|
|
getEchartsl(xData,yData){
|
|
var _this=this
|
|
var chartDoml = document.getElementById('echartssl');
|
|
var myChartl = echarts.init(chartDoml);
|
|
var optionl;
|
|
optionl = {
|
|
grid: {
|
|
y: '5%',
|
|
x:'1%',
|
|
y2: '6%',
|
|
x2: '1%',
|
|
width:'96%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
name:_this.dateNode=='dd'?'时':_this.dateNode=='mm'?'日':'月',
|
|
splitLine: {
|
|
show: true //分隔线，默认数值轴显示，类目轴不显示
|
|
},
|
|
axisTick:{
|
|
show:false,
|
|
inside:true,
|
|
},
|
|
axisLabel:{
|
|
rotate: _this.queryParams.ymdms=='mm'?50:0,
|
|
fontSize:11
|
|
},
|
|
|
|
data: xData
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
show:true,
|
|
// boundaryGap:true,
|
|
axisLine:{
|
|
// show:true,
|
|
},
|
|
axisLabel:{
|
|
formatter:'{value}%'
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name:'成品包装不良率%',
|
|
data: yData,
|
|
type: 'line',
|
|
symbol: "circle",
|
|
symbolSize: 5,
|
|
label:{
|
|
show:true,
|
|
fontSize:11
|
|
},
|
|
lineStyle: {
|
|
color: "rgba(12, 115, 242, 1)"
|
|
},
|
|
areaStyle:{
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
|
offset: 0,
|
|
color: "#fff" // 0% 处的颜色
|
|
}, {
|
|
offset: 1,
|
|
color: "rgba(12, 115, 242, 1)" // 100% 处的颜色
|
|
}], false)
|
|
},
|
|
}
|
|
}
|
|
]
|
|
};
|
|
|
|
optionl && myChartl.setOption(optionl);
|
|
},
|
|
getEchartsTl(xdata,ydata){
|
|
var chartDoml = document.getElementById('echartTsl');
|
|
var myChart2l = echarts.init(chartDoml);
|
|
var option2l;
|
|
option2l = {
|
|
grid: {
|
|
y: '10%',
|
|
x:'1%',
|
|
y2: '6%',
|
|
x2: '2%',
|
|
width:'95%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
axisTick:{
|
|
show:false,
|
|
inside:true,
|
|
},
|
|
|
|
data: xdata
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
show:true,
|
|
axisLine:{
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name:'成品包装不良率%',
|
|
data: ydata,
|
|
type: 'bar',
|
|
label:{
|
|
show:true,
|
|
position: "top",
|
|
},
|
|
lineStyle: {
|
|
color: "rgba(12, 115, 242, 1)"
|
|
},
|
|
barWidth: 30,
|
|
itemStyle:{
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
|
offset: 0,
|
|
color: "#fff" // 0% 处的颜色
|
|
}, {
|
|
offset: 1,
|
|
color: "rgba(12, 115, 242, 1)" // 100% 处的颜色
|
|
}], false)
|
|
},
|
|
}
|
|
}
|
|
]
|
|
};
|
|
|
|
option2l && myChart2l.setOption(option2l);
|
|
},
|
|
getEchartsThl(peiData){
|
|
console.log('peiData',peiData)
|
|
var chartDomTl = document.getElementById('echartsThl');
|
|
var myChart3l = echarts.init(chartDomTl);
|
|
var option3l;
|
|
option3l = {
|
|
// title: {
|
|
// text: 'Referer of a Website',
|
|
// left: 'center'
|
|
// },
|
|
tooltip: {
|
|
trigger: 'item'
|
|
},
|
|
legend: {
|
|
orient: 'vertical',
|
|
left: 'left'
|
|
},
|
|
series: [
|
|
{
|
|
name: '不良数',
|
|
type: 'pie',
|
|
radius: '50%',
|
|
minAngle: 30,
|
|
data: peiData,
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
},
|
|
label: {
|
|
normal: {
|
|
position: 'inside',
|
|
formatter: '{d}%',
|
|
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontWeight: 'bold',
|
|
fontSize: 10
|
|
}
|
|
}
|
|
},
|
|
}
|
|
]
|
|
}
|
|
option3l && myChart3l.setOption(option3l);
|
|
},
|
|
// 表单重置
|
|
reset() {
|
|
this.form = {
|
|
recordId: null,
|
|
workorderId: null,
|
|
rfid: null,
|
|
factoryCode: null,
|
|
machineCode: null,
|
|
nowProcessId: null,
|
|
nextProcessId: null,
|
|
orderNum: null,
|
|
inTime: null,
|
|
outTime: null,
|
|
status: null,
|
|
remark: null,
|
|
attr1: null,
|
|
attr2: null,
|
|
attr3: null,
|
|
attr4: null,
|
|
createBy: null,
|
|
createTime: null,
|
|
updateBy: null,
|
|
updateTime: null,
|
|
shiftId: null
|
|
};
|
|
this.resetForm("form");
|
|
},
|
|
/** 搜索按钮操作 */
|
|
handleQuery() {
|
|
console.log('queryForm',this.queryParams)
|
|
this.getThead()
|
|
this.getTbody()
|
|
this.getBlfx()
|
|
|
|
},
|
|
/** 重置按钮操作 */
|
|
resetQuery() {
|
|
this.queryParams.ymdms=null
|
|
this.queryParams.incomeTimeStr=null
|
|
},
|
|
// 多选框选中数据
|
|
handleSelectionChange(selection) {
|
|
this.ids = selection.map(item => item.recordId)
|
|
this.single = selection.length!==1
|
|
this.multiple = !selection.length
|
|
},
|
|
/** 导出按钮操作 */
|
|
handleExport() {
|
|
this.download('quality/staticTable/exportIncomeDetail', {
|
|
...this.queryParams
|
|
}, `incomeNoOkList_${new Date().getTime()}.xlsx`)
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.top-table{
|
|
//display: flex;
|
|
//justify-content: space-between;
|
|
width: 1280px;
|
|
height: 1000px;
|
|
.top-one-tab{
|
|
.title{
|
|
font-size: 14px;
|
|
color:#606266;
|
|
padding: 5px 0px;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
.top-left-table{
|
|
width: 100%;
|
|
height: 470px;
|
|
.title{
|
|
font-size: 14px;
|
|
color:#606266;
|
|
padding: 5px 0px;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
.top-right-table{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
height: 100%;
|
|
.left-table{
|
|
width: 48%;
|
|
.title{
|
|
font-size: 14px;
|
|
color:#606266;
|
|
padding: 5px 0px;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
.right-echarts{
|
|
width: 48%;
|
|
.title{
|
|
font-size: 14px;
|
|
color:#606266;
|
|
padding: 5px 0px;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
.bottom-echart{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 1450px;
|
|
height: 240px;
|
|
padding-top: 15px;
|
|
.left-echart{
|
|
width: 48%;
|
|
height: 100%;
|
|
.title{
|
|
font-size: 14px;
|
|
color:#606266;
|
|
padding: 5px 0px;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
.right-echart{
|
|
width: 48%;
|
|
height: 100%;
|
|
.title{
|
|
font-size: 14px;
|
|
color:#606266;
|
|
padding: 5px 0px;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
}
|
|
.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> |