Yangwl
/
LJ-UI
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

页面优化

Browse Source
yangwl
lucungang 3 months ago
parent 0cac3d84ba
commit 8ec02165b7
1 changed files with 155 additions and 213 deletions
Show Stats Download Patch File Download Diff File

368
src/views/quality/qcTableCheckDevelop/index.vue
Unescape Escape View File

@ -47,88 +47,56 @@
</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>
<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="echartss" style="width:1200px;height:450px;"></div>
</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 class="top-left-table">
<div class="title">巡检数据统计</div>
<el-table :data="tableTbody" height="440" :loading="loading">
<el-table-column label="时间" align="center" prop="timeCol" min-width="100" />
<el-table-column label="抽样数" align="center" prop="sampleQuality" min-width="100"/>
<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">
<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="echartTs" 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="echartsTh" style="width:600px;height:450px;"></div>
</div>
</div>
</el-tab-pane>
</el-tabs>
</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>
@ -160,6 +128,7 @@ export default {
title: "",
// 是否显示弹出层
open: false,
activeName:'',
// 新增-物料选中listtag
selectMaterielListtag:[],
dateRange:[],
@ -203,63 +172,74 @@ export default {
],
tableThead:[],
tableTbody:[],
tableTheadTh:[],
tableBlfx:[],
echartsData:[],
dateNode:'dd',
};
},
mounted(){
this.getDictData()
this.getThead()
this.getTbody()
this.getBlfx()
this.$nextTick(()=>{
this.getDictData()
this.getThead()
this.getTbody()
this.getBlfx()
})
// this.getEchartsTh()
},
created() {
this.activeName='first'
},
methods: {
handleClick(){
},
async getThead(){
let res=await getTableHzTitleTh({checkType:'checkTypeSCXJ'})
console.log('resTh',res)
this.tableThead=res.columns1
},
async getTbody(){
this.loading=true
// this.tableTheadTh=[]
let res=await getTableHzData(this.queryParams)
console.log('resData',res)
let xData=[]
let yData=[]
this.tableTbody=res
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
})
console.log('tableTbody',this.tableTbody)
this.loading=false
this.getEcharts(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.getEchartsT(xdata,ydata)
this.getEchartsTh(peiData)
},
change(e){
@ -287,29 +267,14 @@ export default {
var myChart = echarts.init(chartDom);
var option;
option = {
// title:{
// text:'不\n良\n率\n%',
// left:'1%',
// top:'30%'
// },
grid: {
y: '10%',
y: '5%',
x:'1%',
y2: '6%',
x2: '1%',
width:'95%',
width:'96%',
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'?'日':'月',
@ -337,14 +302,6 @@ export default {
axisLabel:{
formatter:'{value}%'
}
// splitLine: {
// show: true
// },
// axisTick:{
// show:true,
// inside:true,
// alignWithLabel:true,
// },
},
series: [
{
@ -382,11 +339,6 @@ export default {
var myChart2 = echarts.init(chartDom);
var option2;
option2 = {
// title:{
// text:'不\n良\n率\n%',
// left:'1%',
// top:'30%'
// },
grid: {
y: '10%',
x:'1%',
@ -395,21 +347,8 @@ export default {
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,
@ -420,26 +359,14 @@ export default {
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",
@ -465,6 +392,54 @@ export default {
option2 && myChart2.setOption(option2);
},
getEchartsTh(peiData){
console.log('peiData',peiData)
var chartDomT = document.getElementById('echartsTh');
var myChart3 = echarts.init(chartDomT);
var option3;
option3 = {
// 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
}
}
},
}
]
}
option3 && myChart3.setOption(option3);
},
// 表单重置
reset() {
this.form = {
@ -516,85 +491,52 @@ export default {
</script>
<style lang="scss" scoped>
.top-table{
display: flex;
justify-content: space-between;
width: 1450px;
height: 380px;
.top-left-table{
width: 48%;
height: 100%;
//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;
}
.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%;
.top-left-table{
width: 100%;
height: 470px;
.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;
}
}
}
.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;
}
tbody tr{
text-align: center;
line-height: 25px;
td{
padding: 0;
border-bottom: 1px solid #dfe6ec;
color:#86898b;
}
}
.right-echarts{
width: 48%;
.title{
font-size: 14px;
color:#606266;
padding: 5px 0px;
font-weight: 600;
}
}
}
}
.bottom-echart{

Write Preview
Loading…
Cancel
Save