Yangwl
/
LanJu_UI
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

页面优化

Browse Source
yangwl
lucungang 7 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> </el-form>
<div class="top-table"> <div class="top-table">
<div class="top-left-table"> <el-tabs v-model="activeName" @tab-click="handleClick" style="height:1000px;overflow-y: auro;">
<div class="title">巡检数据统计</div> <el-tab-pane label="不良率统计" name="first" >
<table class="tableStyle" cellpadding="0" cellspacing="0" style="width:100%;table-layout : fixed"> <div class="top-one-tab">
<thead> <div class="title">巡检不良率</div>
<tr> <div id="echartss" style="width:1200px;height:450px;"></div>
<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="top-left-table">
<div class="title">巡检数据统计</div>
</div> <el-table :data="tableTbody" height="440" :loading="loading">
<div class="bottom-echart"> <el-table-column label="时间" align="center" prop="timeCol" min-width="100" />
<div class="left-echart"> <el-table-column label="抽样数" align="center" prop="sampleQuality" min-width="100"/>
<div class="title">巡检不良率</div> <el-table-column label="缺陷不良" align="center" min-width="100">
<div id="echartss" style="width:680px;height:200px;"></div> <template v-for="(column, index) in tableThead">
</div> <el-table-column align="center" :prop="'col'+index" :key="index" :label="column"/>
<div class="right-echart"> </template>
<div class="title">不良排列图</div> </el-table-column>
<div id="echartTs" style="width:650px;height:200px;"></div> <el-table-column label="不良率" align="center" prop="noOkRate" min-width="100">
</div> <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> </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> </div>
</template> </template>
@ -160,6 +128,7 @@ export default {
title: "", title: "",
// 是否显示弹出层 // 是否显示弹出层
open: false, open: false,
activeName:'',
// 新增-物料选中listtag // 新增-物料选中listtag
selectMaterielListtag:[], selectMaterielListtag:[],
dateRange:[], dateRange:[],
@ -203,63 +172,74 @@ export default {
], ],
tableThead:[], tableThead:[],
tableTbody:[], tableTbody:[],
tableTheadTh:[],
tableBlfx:[], tableBlfx:[],
echartsData:[], echartsData:[],
dateNode:'dd', dateNode:'dd',
}; };
}, },
mounted(){ mounted(){
this.getDictData() this.$nextTick(()=>{
this.getThead() this.getDictData()
this.getTbody() this.getThead()
this.getBlfx() this.getTbody()
this.getBlfx()
})
// this.getEchartsTh()
}, },
created() { created() {
this.activeName='first'
}, },
methods: { methods: {
handleClick(){
},
async getThead(){ async getThead(){
let res=await getTableHzTitleTh({checkType:'checkTypeSCXJ'}) let res=await getTableHzTitleTh({checkType:'checkTypeSCXJ'})
console.log('resTh',res) console.log('resTh',res)
this.tableThead=res.columns1 this.tableThead=res.columns1
}, },
async getTbody(){ async getTbody(){
this.loading=true
// this.tableTheadTh=[]
let res=await getTableHzData(this.queryParams) let res=await getTableHzData(this.queryParams)
console.log('resData',res) console.log('resData',res)
let xData=[] let xData=[]
let yData=[] let yData=[]
this.tableTbody=res
res.map((item,index)=>{ res.map((item,index)=>{
let ddTab=[]
xData.push(item.timeCol), xData.push(item.timeCol),
yData.push(item.noOkRate) 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) console.log('tableTbody',this.tableTbody)
this.tableTbody=res this.loading=false
this.getEcharts(xData,yData) this.getEcharts(xData,yData)
}, },
async getBlfx(){ async getBlfx(){
let xdata=[] let xdata=[]
let ydata=[] let ydata=[]
let peiData=[]
let res=await getTableHzNoOkData(this.queryParams) let res=await getTableHzNoOkData(this.queryParams)
console.log('res不良分析',res) console.log('res不良分析',res)
res.map((item,index)=>{ res.map((item,index)=>{
var pDat={}
pDat.name=item.dataType
pDat.value=item.noOkQuality
xdata.push(item.dataType) xdata.push(item.dataType)
ydata.push(item.noOkQuality) ydata.push(item.noOkQuality)
peiData.push(pDat)
}) })
this.tableBlfx=res this.tableBlfx=res
console.log('table',this.tableBlfx) console.log('table',this.tableBlfx)
this.getEchartsT(xdata,ydata) this.getEchartsT(xdata,ydata)
this.getEchartsTh(peiData)
}, },
change(e){ change(e){
@ -287,29 +267,14 @@ export default {
var myChart = echarts.init(chartDom); var myChart = echarts.init(chartDom);
var option; var option;
option = { option = {
// title:{
// text:'不\n良\n率\n%',
// left:'1%',
// top:'30%'
// },
grid: { grid: {
y: '10%', y: '5%',
x:'1%', x:'1%',
y2: '6%', y2: '6%',
x2: '1%', x2: '1%',
width:'95%', width:'96%',
containLabel: true containLabel: true
}, },
// legend: {
// top:0,
// right:120,
// icon: "roundRect",
// data:["成品包装不良率%"],
// textStyle:{
// color:'#000',
// fontSize:12
// }
// },
xAxis: { xAxis: {
type: 'category', type: 'category',
name:_this.dateNode=='dd'?'时':_this.dateNode=='mm'?'日':'月', name:_this.dateNode=='dd'?'时':_this.dateNode=='mm'?'日':'月',
@ -337,14 +302,6 @@ export default {
axisLabel:{ axisLabel:{
formatter:'{value}%' formatter:'{value}%'
} }
// splitLine: {
// show: true
// },
// axisTick:{
// show:true,
// inside:true,
// alignWithLabel:true,
// },
}, },
series: [ series: [
{ {
@ -382,11 +339,6 @@ export default {
var myChart2 = echarts.init(chartDom); var myChart2 = echarts.init(chartDom);
var option2; var option2;
option2 = { option2 = {
// title:{
// text:'不\n良\n率\n%',
// left:'1%',
// top:'30%'
// },
grid: { grid: {
y: '10%', y: '10%',
x:'1%', x:'1%',
@ -395,21 +347,8 @@ export default {
width:'95%', width:'95%',
containLabel: true containLabel: true
}, },
// legend: {
// top:0,
// right:120,
// icon: "roundRect",
// data:["成品包装不良率%"],
// textStyle:{
// color:'#000',
// fontSize:12
// }
// },
xAxis: { xAxis: {
type: 'category', type: 'category',
// splitLine: {
// show: true //分隔线，默认数值轴显示，类目轴不显示
// },
axisTick:{ axisTick:{
show:false, show:false,
inside:true, inside:true,
@ -420,26 +359,14 @@ export default {
yAxis: { yAxis: {
type: 'value', type: 'value',
show:true, show:true,
// boundaryGap:true,
axisLine:{ axisLine:{
// show:true,
}, },
// splitLine: {
// show: true
// },
// axisTick:{
// show:true,
// inside:true,
// alignWithLabel:true,
// },
}, },
series: [ series: [
{ {
name:'成品包装不良率%', name:'成品包装不良率%',
data: ydata, data: ydata,
type: 'bar', type: 'bar',
// symbol: "circle",
// symbolSize: 5,
label:{ label:{
show:true, show:true,
position: "top", position: "top",
@ -465,6 +392,54 @@ export default {
option2 && myChart2.setOption(option2); 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() { reset() {
this.form = { this.form = {
@ -516,85 +491,52 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.top-table{ .top-table{
display: flex; //display: flex;
justify-content: space-between; //justify-content: space-between;
width: 1450px; width: 1280px;
height: 380px; height: 1000px;
.top-left-table{ .top-one-tab{
width: 48%;
height: 100%;
.title{ .title{
font-size: 14px; font-size: 14px;
color:#606266; color:#606266;
padding: 5px 0px; padding: 5px 0px;
font-weight: 600; 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{ .top-left-table{
width: 48%; width: 100%;
height: 100%; height: 470px;
.title{ .title{
font-size: 14px; font-size: 14px;
color:#606266; color:#606266;
padding: 5px 0px; padding: 5px 0px;
font-weight: 600; font-weight: 600;
} }
.tableStyle{ }
width: 100%; .top-right-table{
// border-top: 1px solid #000; display: flex;
// border-left: 1px solid #000; justify-content: space-between;
thead{ width: 100%;
tr{ height: 100%;
text-align: center; .left-table{
line-height: 50px; width: 48%;
background: #f8f8f9; .title{
th{ font-size: 14px;
padding: 0; color:#606266;
color:#606266; padding: 5px 0px;
border-bottom: 1px solid #dfe6ec; font-weight: 600;
// border-right: 1px solid #000;
// border-bottom: 1px solid #000;
}
}
} }
tbody tr{ }
text-align: center; .right-echarts{
line-height: 25px; width: 48%;
td{ .title{
padding: 0; font-size: 14px;
border-bottom: 1px solid #dfe6ec; color:#606266;
color:#86898b; padding: 5px 0px;
} font-weight: 600;
} }
} }
} }
} }
.bottom-echart{ .bottom-echart{

Write Preview
Loading…
Cancel
Save