feat:禅道446折线图：X轴展示产品编号，Y轴展示分检的像位移值
This commit is contained in:
parent
f3a92cb296
commit
ff2e9a49e0
|
|
@ -107,13 +107,7 @@
|
|||
</el-table-column>
|
||||
<el-table-column label="总数">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.总切片数" @click="handleClick(scope.row)" style="color:#0052d9;">{{ scope.row.总切片数 }}</span>
|
||||
<span v-else @click="handleClick(scope.row)" style="color:#0052d9;">{{ scope.row.总生产数 }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="合格率" prop="合格率">
|
||||
<template #default="scope">
|
||||
<span>{{((scope.row.总切片合格数/scope.row.总切片数)*100).toFixed(2) }}%</span>
|
||||
<span @click="handleClick(scope.row)" style="color:#0052d9;">{{ scope.row.总切片数 }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</scTable>
|
||||
|
|
@ -137,11 +131,8 @@
|
|||
<el-table-column label="物料名" prop="物料名" :filters="nameFilters" :filter-method="filterName" filter-placement="bottom-end">
|
||||
</el-table-column>
|
||||
<el-table-column label="总数" prop="总切片数">
|
||||
</el-table-column>
|
||||
<el-table-column label="合格率" prop="合格率">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.总切片数>0">{{((scope.row.总切片合格数/scope.row.总切片数)*100).toFixed(2) }}%</span>
|
||||
<span v-else>0%</span>
|
||||
<span @click="handleClick(scope.row)" style="color:#0052d9;">{{ scope.row.总切片数 }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</scTable>
|
||||
|
|
@ -149,13 +140,86 @@
|
|||
</el-container>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<el-drawer
|
||||
v-model="boardVisible"
|
||||
:title="boardTitle"
|
||||
size="80%"
|
||||
direction="rtl"
|
||||
append-to-body
|
||||
destroy-on-close
|
||||
>
|
||||
<div class="board-drawer-body">
|
||||
<div class="board-drawer-table">
|
||||
<el-table :data="boardList" border stripe height="100%" style="width: 100%;">
|
||||
<el-table-column type="index" label="序号" width="60" />
|
||||
<el-table-column label="板段号" prop="板段号" />
|
||||
<el-table-column label="像位移" prop="像位移" />
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="board-drawer-chart">
|
||||
<div class="board-chart-scroll">
|
||||
<scEcharts
|
||||
:option="chartOption"
|
||||
:style="{ width: chartWidth + 'px', height: '100%' }"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import scEcharts from "@/components/scEcharts";
|
||||
export default {
|
||||
name: "workerTimes",
|
||||
components: { scEcharts },
|
||||
computed: {
|
||||
chartWidth() {
|
||||
const perPoint = 22;
|
||||
const minWidth = 600;
|
||||
return Math.max(minWidth, (this.boardList.length || 1) * perPoint);
|
||||
},
|
||||
chartOption() {
|
||||
const xs = this.boardList.map(i => i.板段号);
|
||||
const ys = this.boardList.map(i => (i.像位移 == null ? null : Number(i.像位移)));
|
||||
return {
|
||||
tooltip: { trigger: 'axis' },
|
||||
grid: { left: 50, right: 20, top: 30, bottom: 100 },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: xs,
|
||||
axisLabel: { rotate: 85, interval: 0, fontSize: 11 }
|
||||
},
|
||||
yAxis: { type: 'value', name: '像位移' },
|
||||
series: [{
|
||||
name: '像位移',
|
||||
type: 'line',
|
||||
data: ys,
|
||||
connectNulls: false,
|
||||
symbol: 'circle',
|
||||
symbolSize: 6,
|
||||
markLine: {
|
||||
symbol: 'none',
|
||||
silent: true,
|
||||
data: [
|
||||
{
|
||||
yAxis: 100,
|
||||
lineStyle: { color: '#f5a623', width: 1.5, type: 'dashed' },
|
||||
label: { formatter: '标准 100', position: 'insideEndTop', color: '#f5a623' }
|
||||
},
|
||||
{
|
||||
yAxis: 200,
|
||||
lineStyle: { color: '#f5222d', width: 1.5, type: 'dashed' },
|
||||
label: { formatter: '标准 200', position: 'insideEndTop', color: '#f5222d' }
|
||||
}
|
||||
]
|
||||
}
|
||||
}]
|
||||
};
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
query:{
|
||||
|
|
@ -175,6 +239,9 @@ export default {
|
|||
filterNames:[],
|
||||
visible:false,
|
||||
userName:'',
|
||||
boardVisible:false,
|
||||
boardTitle:'',
|
||||
boardList:[],
|
||||
code:'lineDay_p',
|
||||
activeName:'shengchan',
|
||||
apiObj: this.$API.system.user.list,
|
||||
|
|
@ -310,6 +377,16 @@ export default {
|
|||
deptChange(){
|
||||
this.getData();
|
||||
},
|
||||
handleClick(row){
|
||||
let that = this;
|
||||
let detail = row.板段明细;
|
||||
if(typeof detail === 'string'){
|
||||
try{ detail = JSON.parse(detail); }catch(e){ detail = []; }
|
||||
}
|
||||
that.boardList = Array.isArray(detail) ? detail : [];
|
||||
that.boardTitle = (row.工装编号 || row.开台人员姓名 || '') + ' 板段列表';
|
||||
that.boardVisible = true;
|
||||
},
|
||||
handleQuery(){
|
||||
let that = this;
|
||||
that.getData();
|
||||
|
|
@ -319,4 +396,26 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
.board-drawer-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
gap: 8px;
|
||||
}
|
||||
.board-drawer-table {
|
||||
flex: 0 0 60%;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.board-drawer-chart {
|
||||
flex: 0 0 40%;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.board-chart-scroll {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue