Yangwl
/
lanju-front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
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.
master
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '240e16a84a'
${ noResults }
lanju-front/src/views/quality/qcTableCheckDevelop/index.vue

664 lines
16 KiB
Vue
Raw Blame History

<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-form-item>
</el-form>
<div class="top-table">
<div class="top-left-table">
<div class="title">巡检数据统计</div>
<table class="tableStyle" cellpadding="0" cellspacing="0" style="width:100%;table-layout : fixed">
<thead>
<tr>
<th rowspan="2">时间</th>
<th rowspan="2" style="border-right:1px solid #dfe6ec;">抽样数</th>
<th :colspan="tableThead.length?tableThead.length:''">缺陷不良</th>
<th rowspan="2" style="border-left:1px solid #dfe6ec;">不良率</th>
</tr>
<tr>
<th v-for="(item,index) in tableThead" :key="index">{{item}}</th>
</tr>
</thead>
</table>
<div style="width:100%;height:300px;overflow-y: auto">
<table class="tableStyle" cellpadding="0" cellspacing="0" style="table-layout : fixed">
<tbody>
<tr v-for="(item,index) in tableTbody" :key="index">
<td>{{item.timeCol}}</td>
<td>{{item.sampleQuality}}</td>
<td v-for="(items,indexs) in item.ddTab" :key="indexs">{{items}}</td>
<td>{{item.noOkRate}}%</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="top-right-table">
<div class="title">巡检</div>
<table class="tableStyle" cellpadding="0" cellspacing="0" style="width:100%;table-layout : fixed">
<thead>
<tr>
<th>缺陷类别</th>
<th>不良数</th>
<th>占比</th>
</tr>
</thead>
</table>
<div style="width:100%;height:300px;overflow-y: auto">
<table class="tableStyle" cellpadding="0" cellspacing="0" style="table-layout : fixed">
<tbody>
<tr v-for="(items,indexs) in tableBlfx" :key="indexs">
<td>{{items.dataType}}</td>
<td>{{items.noOkQuality}}</td>
<td>{{items.noOkNumRate}}%</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="bottom-echart">
<div class="left-echart">
<div class="title">巡检不良率</div>
<div id="echartss" style="width:680px;height:200px;"></div>
</div>
<div class="right-echart">
<div class="title">不良排列图</div>
<div id="echartTs" style="width:650px;height:200px;"></div>
</div>
</div>
<!-- <el-table v-loading="loading" :data="incomeList" @selection-change="handleSelectionChange">
<el-table-column label="供应商编号" align="center" prop="supplierCode" width="120" fixed/>
<el-table-column label="供应商名称" align="left" prop="supplierName" width="390" fixed/>
<el-table-column label="总批数" align="center" prop="batchs" width="90"/>
<el-table-column label="合格批次" align="center" prop="okBatchs" width="100"/>
<el-table-column label="不合格批次" align="center" prop="noOkBatchs" width="100"/>
<el-table-column label="批次不良率" align="center" prop="noOkBatchRate" width="100"/>
<el-table-column label="总数量" align="center" prop="nums" width="90"/>
<el-table-column label="合格数量" align="center" prop="okNums" width="100"/>
<el-table-column label="不合格数量" align="center" prop="noOkNums" width="100"/>
<el-table-column label="数量不良率" align="center" prop="noOkNumRate" width="100"/>
</el-table> -->
</div>
</template>
<script>
import { getIncomeTableList,getTableHzTitleTh,getTableHzData,getTableHzNoOkData,getDictData} from "@/api/quality/qcTable";
import moment from 'moment';
import * as echarts from "echarts";
export default {
name: "qcTableCheckDevelop",
components: {},
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 生产rfid流程表格数据
incomeList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 新增-物料选中listtag
selectMaterielListtag:[],
dateRange:[],
// 查询参数
queryParams: {
checkType:'checkTypeSCXJ',
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:'checkTypeSCXJ',
factoryName:''
}
],
jianyanNode:[
// {
// dictNo:'yyyy',
// dictValue:'年'
// },
// {
// dictNo:'mm',
// dictValue:'月'
// },
// {
// dictNo:'dd',
// dictValue:'日'
// },
],
tableThead:[],
tableTbody:[],
tableBlfx:[],
echartsData:[],
dateNode:'dd',
};
},
mounted(){
this.getDictData()
this.getThead()
this.getTbody()
this.getBlfx()
},
created() {
},
methods: {
async getThead(){
let res=await getTableHzTitleTh({checkType:'checkTypeSCXJ'})
console.log('resTh',res)
this.tableThead=res.columns1
},
async getTbody(){
let res=await getTableHzData(this.queryParams)
console.log('resData',res)
let xData=[]
let yData=[]
res.map((item,index)=>{
let ddTab=[]
xData.push(item.timeCol),
yData.push(item.noOkRate)
Object.keys(item).map((itemT,indexT)=>{
if((itemT!='timeCol')&&(itemT!='sampleQuality')&&(itemT!='noOkRate')){
ddTab.push(item[itemT])
}
})
item.ddTab=ddTab
})
console.log('resData处理后',res)
this.tableTbody=res
this.getEcharts(xData,yData)
},
async getBlfx(){
let xdata=[]
let ydata=[]
let res=await getTableHzNoOkData(this.queryParams)
console.log('res不良分析',res)
res.map((item,index)=>{
xdata.push(item.dataType)
ydata.push(item.noOkQuality)
})
this.tableBlfx=res
console.log('table',this.tableBlfx)
this.getEchartsT(xdata,ydata)
},
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
}
});
},
getEcharts(xData,yData){
var _this=this
var chartDom = document.getElementById('echartss');
var myChart = echarts.init(chartDom);
var option;
option = {
// title:{
// text:'不\n良\n率\n%',
// left:'1%',
// top:'30%'
// },
grid: {
y: '10%',
x:'1%',
y2: '6%',
x2: '1%',
width:'95%',
containLabel: true
},
// legend: {
// top:0,
// right:120,
// icon: "roundRect",
// data:["成品包装不良率%"],
// textStyle:{
// color:'#000',
// fontSize:12
// }
// },
xAxis: {
type: 'category',
name:_this.dateNode=='dd'?'时':_this.dateNode=='mm'?'日':'月',
splitLine: {
show: true //分隔线，默认数值轴显示，类目轴不显示
},
axisTick:{
show:false,
inside:true,
},
axisLabel:{
rotate: _this.queryParams.ymdms=='dd'?0:50,
fontSize:11
},
data: xData
},
yAxis: {
type: 'value',
show:true,
// boundaryGap:true,
axisLine:{
// show:true,
},
axisLabel:{
formatter:'{value}%'
}
// splitLine: {
// show: true
// },
// axisTick:{
// show:true,
// inside:true,
// alignWithLabel:true,
// },
},
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)
},
}
}
]
};
option && myChart.setOption(option);
},
getEchartsT(xdata,ydata){
var chartDom = document.getElementById('echartTs');
var myChart2 = echarts.init(chartDom);
var option2;
option2 = {
// title:{
// text:'不\n良\n率\n%',
// left:'1%',
// top:'30%'
// },
grid: {
y: '10%',
x:'1%',
y2: '6%',
x2: '2%',
width:'95%',
containLabel: true
},
// legend: {
// top:0,
// right:120,
// icon: "roundRect",
// data:["成品包装不良率%"],
// textStyle:{
// color:'#000',
// fontSize:12
// }
// },
xAxis: {
type: 'category',
// splitLine: {
// show: true //分隔线，默认数值轴显示，类目轴不显示
// },
axisTick:{
show:false,
inside:true,
},
data: xdata
},
yAxis: {
type: 'value',
show:true,
// boundaryGap:true,
axisLine:{
// show:true,
},
// splitLine: {
// show: true
// },
// axisTick:{
// show:true,
// inside:true,
// alignWithLabel:true,
// },
},
series: [
{
name:'成品包装不良率%',
data: ydata,
type: 'bar',
// symbol: "circle",
// symbolSize: 5,
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)
},
}
}
]
};
option2 && myChart2.setOption(option2);
},
// 表单重置
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
},
}
};
</script>
<style lang="scss" scoped>
.top-table{
display: flex;
justify-content: space-between;
width: 1450px;
height: 380px;
.top-left-table{
width: 48%;
height: 100%;
.title{
font-size: 14px;
color:#606266;
padding: 5px 0px;
font-weight: 600;
}
.tableStyle{
width: 100%;
// border-top: 1px solid #000;
// border-left: 1px solid #000;
thead{
tr{
text-align: center;
line-height: 25px;
background: #f8f8f9;
th{
padding: 0;
color:#606266;
border-bottom: 1px solid #dfe6ec;
// border-right: 1px solid #000;
// border-bottom: 1px solid #000;
}
}
}
tbody tr{
text-align: center;
line-height: 25px;
td{
padding: 0;
border-bottom: 1px solid #dfe6ec;
color:#86898b;
}
}
}
}
.top-right-table{
width: 48%;
height: 100%;
.title{
font-size: 14px;
color:#606266;
padding: 5px 0px;
font-weight: 600;
}
.tableStyle{
width: 100%;
// border-top: 1px solid #000;
// border-left: 1px solid #000;
thead{
tr{
text-align: center;
line-height: 50px;
background: #f8f8f9;
th{
padding: 0;
color:#606266;
border-bottom: 1px solid #dfe6ec;
// border-right: 1px solid #000;
// border-bottom: 1px solid #000;
}
}
}
tbody tr{
text-align: center;
line-height: 25px;
td{
padding: 0;
border-bottom: 1px solid #dfe6ec;
color:#86898b;
}
}
}
}
}
.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>
Reference in New Issue View Git Blame Copy Permalink