fix:生产检验统计合格率取整

This commit is contained in:
shijing 2024-03-26 16:27:54 +08:00
parent 00c57134d3
commit c8be074677
1 changed files with 305 additions and 158 deletions

View File

@ -3,30 +3,68 @@
<el-header> <el-header>
<div class="right-panel"> <div class="right-panel">
<el-select v-model="queryType" @change="queryTypeChange"> <el-select v-model="queryType" @change="queryTypeChange">
<el-option v-for="item in typeOptions" :key="item" :label="item" :value="item"> <el-option
v-for="item in typeOptions"
:key="item"
:label="item"
:value="item"
>
</el-option> </el-option>
</el-select> </el-select>
<el-date-picker v-if="queryType == ''" v-model="queryDate" type="month" placeholder="查询月期" <el-date-picker
value-format="YYYY-MM" style="width:100%"> v-if="queryType == '月'"
v-model="queryDate"
type="month"
placeholder="查询月期"
value-format="YYYY-MM"
>
</el-date-picker> </el-date-picker>
<el-date-picker v-if="queryType == ''" v-model="queryDate" type="year" placeholder="查询年份" <el-date-picker
value-format="YYYY" style="width:100%"> v-if="queryType == '年'"
v-model="queryDate"
type="year"
placeholder="查询年份"
value-format="YYYY"
>
</el-date-picker> </el-date-picker>
<el-button type="primary" icon="el-icon-search" @click="handleQuery"></el-button> <el-button
type="primary"
icon="el-icon-search"
@click="handleQuery"
></el-button>
</div> </div>
</el-header> </el-header>
<el-main> <el-main>
<el-card shadow="never" style="margin-bottom: 8px;"> <el-card shadow="never" style="margin-bottom: 8px">
<el-row :gutter="15"> <el-row :gutter="15">
<el-col :lg="8"> <el-col :lg="8">
<scEcharts height="300px" :option="option1"></scEcharts> <scEcharts height="300px" :option="option1"></scEcharts>
</el-col> </el-col>
<el-col :lg="16" style="position: relative;"> <el-col :lg="16" style="position: relative">
<el-button @click="handleExport('7')" class="tables" type="primary">导出</el-button> <el-button
<el-table :data="tableData7" id="exportDiv7" :height="300"> @click="handleExport('7')"
<el-table-column label="年" prop="年" v-if="queryType == '年'" width="60"> class="tables"
type="primary"
>导出</el-button
>
<el-table
:data="tableData7"
id="exportDiv7"
:height="300"
>
<el-table-column
label="年"
prop="年"
v-if="queryType == '年'"
width="60"
>
</el-table-column> </el-table-column>
<el-table-column label="月" prop="月" v-else width="60"> <el-table-column
label="月"
prop="月"
v-else
width="60"
>
</el-table-column> </el-table-column>
<el-table-column label="物料名" prop="物料名"> <el-table-column label="物料名" prop="物料名">
</el-table-column> </el-table-column>
@ -40,10 +78,17 @@
</el-table-column> </el-table-column>
<el-table-column label="合格率" prop="合格率"> <el-table-column label="合格率" prop="合格率">
<template #default="scope"> <template #default="scope">
<span>{{ scope.row.合格率.toFixed(2) }}%</span> <span
>{{
Math.round(scope.row.合格率)
}}%</span
>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="不合格原因及数量" align="center"> <el-table-column
label="不合格原因及数量"
align="center"
>
<el-table-column label="炸纹" prop="炸纹"> <el-table-column label="炸纹" prop="炸纹">
</el-table-column> </el-table-column>
<el-table-column label="条纹" prop="条纹"> <el-table-column label="条纹" prop="条纹">
@ -61,17 +106,36 @@
</el-col> </el-col>
</el-row> </el-row>
</el-card> </el-card>
<el-card shadow="never" style="margin-bottom: 8px;"> <el-card shadow="never" style="margin-bottom: 8px">
<el-row :gutter="15"> <el-row :gutter="15">
<el-col :lg="8"> <el-col :lg="8">
<scEcharts height="300px" :option="option2"></scEcharts> <scEcharts height="300px" :option="option2"></scEcharts>
</el-col> </el-col>
<el-col :lg="16" style="position: relative;"> <el-col :lg="16" style="position: relative">
<el-button @click="handleExport('10')" class="tables" type="primary">导出</el-button> <el-button
<el-table :data="tableData10" id="exportDiv10" :height="300"> @click="handleExport('10')"
<el-table-column label="年" prop="年" v-if="queryType == '年'" width="60"> class="tables"
type="primary"
>导出</el-button
>
<el-table
:data="tableData10"
id="exportDiv10"
:height="300"
>
<el-table-column
label="年"
prop="年"
v-if="queryType == '年'"
width="60"
>
</el-table-column> </el-table-column>
<el-table-column label="月" prop="月" v-else width="60"> <el-table-column
label="月"
prop="月"
v-else
width="60"
>
</el-table-column> </el-table-column>
<el-table-column label="物料名" prop="物料名"> <el-table-column label="物料名" prop="物料名">
</el-table-column> </el-table-column>
@ -85,10 +149,17 @@
</el-table-column> </el-table-column>
<el-table-column label="合格率"> <el-table-column label="合格率">
<template #default="scope"> <template #default="scope">
<span>{{ scope.row.合格率.toFixed(2) }}%</span> <span
>{{
Math.round(scope.row.合格率)
}}%</span
>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="不合格原因及数量" align="center"> <el-table-column
label="不合格原因及数量"
align="center"
>
<el-table-column label="椭圆/弯曲" prop="弯曲"> <el-table-column label="椭圆/弯曲" prop="弯曲">
</el-table-column> </el-table-column>
<el-table-column label="条纹" prop="条纹"> <el-table-column label="条纹" prop="条纹">
@ -110,17 +181,36 @@
</el-col> </el-col>
</el-row> </el-row>
</el-card> </el-card>
<el-card shadow="never" style="margin-bottom: 8px;"> <el-card shadow="never" style="margin-bottom: 8px">
<el-row :gutter="15"> <el-row :gutter="15">
<el-col :lg="8"> <el-col :lg="8">
<scEcharts height="300px" :option="option3"></scEcharts> <scEcharts height="300px" :option="option3"></scEcharts>
</el-col> </el-col>
<el-col :lg="16" style="position: relative;"> <el-col :lg="16" style="position: relative">
<el-button @click="handleExport('8')" class="tables" type="primary">导出</el-button> <el-button
<el-table :data="tableData8" id="exportDiv8" :height="300"> @click="handleExport('8')"
<el-table-column label="年" prop="年" v-if="queryType == '年'" width="60"> class="tables"
type="primary"
>导出</el-button
>
<el-table
:data="tableData8"
id="exportDiv8"
:height="300"
>
<el-table-column
label="年"
prop="年"
v-if="queryType == '年'"
width="60"
>
</el-table-column> </el-table-column>
<el-table-column label="月" prop="月" v-else width="60"> <el-table-column
label="月"
prop="月"
v-else
width="60"
>
</el-table-column> </el-table-column>
<el-table-column label="物料名" prop="物料名"> <el-table-column label="物料名" prop="物料名">
</el-table-column> </el-table-column>
@ -134,10 +224,17 @@
</el-table-column> </el-table-column>
<el-table-column label="合格率"> <el-table-column label="合格率">
<template #default="scope"> <template #default="scope">
<span>{{ scope.row.合格率.toFixed(2) }}%</span> <span
>{{
Math.round(scope.row.合格率)
}}%</span
>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="不合格原因及数量" align="center"> <el-table-column
label="不合格原因及数量"
align="center"
>
<el-table-column label="椭圆/弯曲" prop="弯曲"> <el-table-column label="椭圆/弯曲" prop="弯曲">
</el-table-column> </el-table-column>
<el-table-column label="条纹" prop="条纹"> <el-table-column label="条纹" prop="条纹">
@ -163,117 +260,128 @@
</el-container> </el-container>
</template> </template>
<script> <script>
const colors = ['rgb(64,158,255)','#FAFAD2','#EEE9BF','#EEDC82','#EED5B7','#EEC591','#EEAD0E','#EE9A00','#EE9572','#F08080']; const colors = [
import scEcharts from '@/components/scEcharts'; "rgb(64,158,255)",
"#FAFAD2",
"#EEE9BF",
"#EEDC82",
"#EED5B7",
"#EEC591",
"#EEAD0E",
"#EE9A00",
"#EE9572",
"#F08080",
];
import scEcharts from "@/components/scEcharts";
export default { export default {
name: 'chart', name: "chart",
components: { components: {
scEcharts scEcharts,
}, },
data() { data() {
return { return {
queryType: '月', queryType: "月",
queryDate: '', queryDate: "",
start_date: '', start_date: "",
end_date: '', end_date: "",
currentYear: '', currentYear: "",
currentMonth: '', currentMonth: "",
typeOptions: ['月', '年'], typeOptions: ["月", "年"],
option1: { option1: {
color:colors, color: colors,
title: { title: {
text: '7车间', text: "7车间",
// subtext: '', // subtext: '',
}, },
tooltip: { tooltip: {
trigger: 'item' trigger: "item",
}, },
series: { series: {
name: '7车间预制棒', name: "7车间预制棒",
type: 'pie', type: "pie",
radius: ['40%', '70%'], radius: ["40%", "70%"],
center: ['50%', '60%'], center: ["50%", "60%"],
label: { label: {
show: true, show: true,
position: 'outside', position: "outside",
formatter: '{b} : {c} ({d}%)', formatter: "{b} : {c} ({d}%)",
}, },
data: [ data: [
{ value: 0, name: '合格数' }, { value: 0, name: "合格数" },
{ value: 0, name: '炸纹' }, { value: 0, name: "炸纹" },
{ value: 0, name: '条纹' }, { value: 0, name: "条纹" },
{ value: 0, name: '气泡' }, { value: 0, name: "气泡" },
{ value: 0, name: '弯曲' }, { value: 0, name: "弯曲" },
{ value: 0, name: '其他' }, { value: 0, name: "其他" },
] ],
} },
}, },
option2: { option2: {
color:colors, color: colors,
title: { title: {
text: '10车间', text: "10车间",
// subtext: '', // subtext: '',
}, },
tooltip: { tooltip: {
trigger: 'item' trigger: "item",
}, },
series: { series: {
name: '10车间预制管', name: "10车间预制管",
type: 'pie', type: "pie",
radius: ['40%', '70%'], radius: ["40%", "70%"],
center: ['50%', '60%'], center: ["50%", "60%"],
label: { label: {
show: true, show: true,
position: 'outside', position: "outside",
formatter: '{b} : {c} ({d}%)', formatter: "{b} : {c} ({d}%)",
}, },
data: [ data: [
{ value: 0, name: '合格数' }, { value: 0, name: "合格数" },
{ value: 0, name: '条纹' }, { value: 0, name: "条纹" },
{ value: 0, name: '断裂' }, { value: 0, name: "断裂" },
{ value: 0, name: '偏壁' }, { value: 0, name: "偏壁" },
{ value: 0, name: '大小头' }, { value: 0, name: "大小头" },
{ value: 0, name: '结石' }, { value: 0, name: "结石" },
{ value: 0, name: '气线' }, { value: 0, name: "气线" },
] ],
} },
}, },
option3: { option3: {
color:colors, color: colors,
title: { title: {
text: '退火', text: "退火",
// subtext: '', // subtext: '',
}, },
tooltip: { tooltip: {
trigger: 'item' trigger: "item",
}, },
series: { series: {
name: '退火预制管', name: "退火预制管",
type: 'pie', type: "pie",
radius: ['40%', '70%'], radius: ["40%", "70%"],
center: ['50%', '60%'], center: ["50%", "60%"],
label: { label: {
show: true, show: true,
position: 'outside', position: "outside",
formatter: '{b} : {c} ({d}%)', formatter: "{b} : {c} ({d}%)",
}, },
data: [ data: [
{ value: 0, name: '合格数' }, { value: 0, name: "合格数" },
{ value: 0, name: '椭圆/弯曲' }, { value: 0, name: "椭圆/弯曲" },
{ value: 0, name: '条纹' }, { value: 0, name: "条纹" },
{ value: 0, name: '断裂' }, { value: 0, name: "断裂" },
{ value: 0, name: '偏壁' }, { value: 0, name: "偏壁" },
{ value: 0, name: '大小头' }, { value: 0, name: "大小头" },
{ value: 0, name: '结石' }, { value: 0, name: "结石" },
{ value: 0, name: '气线' }, { value: 0, name: "气线" },
{ value: 0, name: '箱中破' }, { value: 0, name: "箱中破" },
] ],
} },
}, },
tableData7: [], tableData7: [],
tableData10: [], tableData10: [],
tableData8: [], tableData8: [],
} };
}, },
mounted() { mounted() {
let date = new Date(); let date = new Date();
@ -282,64 +390,73 @@ export default {
let days = new Date(year, month, 0).getDate(); let days = new Date(year, month, 0).getDate();
this.currentYear = year; this.currentYear = year;
this.currentMonth = month; this.currentMonth = month;
month = month < 10 ? '0' + month : month; month = month < 10 ? "0" + month : month;
this.queryDate = year + '-' + month; this.queryDate = year + "-" + month;
this.start_date = year + '-' + month + '-01'; this.start_date = year + "-" + month + "-01";
this.end_date = year + '-' + month + '-' + new Date(year, month, 0).getDate(); this.end_date =
year + "-" + month + "-" + new Date(year, month, 0).getDate();
this.getData(); this.getData();
this.getData7(); this.getData7();
this.getData10(); this.getData10();
}, },
methods: { methods: {
queryTypeChange(value) { queryTypeChange(value) {
console.log(value) console.log(value);
this.queryDate = ''; this.queryDate = "";
}, },
getData() { getData() {
let that = this; let that = this;
that.tableData8 = []; that.tableData8 = [];
let exec = that.queryType == '月' ? 'lineMonth' : 'lineYear'; let exec = that.queryType == "月" ? "lineMonth" : "lineYear";
let obj = { let obj = {
query: { query: {
start_date: this.start_date, end_date: this.end_date, dept_name: "8车间", start_date: this.start_date,
mgroup_name: "退火",group_bys_mgroup: ", mgroup.name", end_date: this.end_date,
select_cols_mgroup: ", mgroup.name AS 工段", dept_name: "8车间",
mgroup_name: "管料退火",
group_bys_mgroup: ", mgroup.name",
select_cols_mgroup: ", mgroup.name AS 工段",
}, },
}; };
that.$API.bi.dataset.exec.req(exec, obj).then((res) => { that.$API.bi.dataset.exec.req(exec, obj).then((res) => {
console.log('退火车间统计:', res); console.log("退火车间统计:", res);
if (res.data2.ds0) { if (res.data2.ds0) {
let data = res.data2.ds0; let data = res.data2.ds0;
that.tableData8 = data; that.tableData8 = data;
} else { } else {
that.tableData8 = []; that.tableData8 = [];
} }
}); });
//echarts //echarts
let obj2 = { let obj2 = {
query: { query: {
start_date: this.start_date, end_date: this.end_date, dept_name: "8车间", start_date: this.start_date,
group_bys_material: "", order_bys_material: "", select_cols_material: "", end_date: this.end_date,
mgroup_name: "退火",group_bys_mgroup: ", mgroup.name", dept_name: "8车间",
select_cols_mgroup: ", mgroup.name AS 工段", group_bys_material: "",
order_bys_material: "",
select_cols_material: "",
mgroup_name: "管料退火",
group_bys_mgroup: ", mgroup.name",
select_cols_mgroup: ", mgroup.name AS 工段",
}, },
}; };
that.$API.bi.dataset.exec.req(exec, obj2).then((res2) => { that.$API.bi.dataset.exec.req(exec, obj2).then((res2) => {
console.log('退火车间统计:', res2); console.log("退火车间统计:", res2);
if (res2.data2.ds0) { if (res2.data2.ds0) {
let data = res2.data2.ds0; let data = res2.data2.ds0;
if (data.length > 0) { if (data.length > 0) {
data.forEach(item => { data.forEach((item) => {
that.option3.series.data[0].value += item.合格数; that.option3.series.data[0].value += item.合格数;
that.option3.series.data[1].value += item.弯曲; that.option3.series.data[1].value += item.弯曲;
that.option3.series.data[2].value += item.条纹; that.option3.series.data[2].value += item.条纹;
that.option3.series.data[3].value += item.断裂; that.option3.series.data[3].value += item.断裂;
that.option3.series.data[4].value += item.偏壁; that.option3.series.data[4].value += item.偏壁;
that.option3.series.data[5].value += item.大小头; that.option3.series.data[5].value += item.大小头;
that.option3.series.data[6].value += item.结石; that.option3.series.data[6].value += item.结石;
that.option3.series.data[7].value += item.气线; that.option3.series.data[7].value += item.气线;
that.option3.series.data[8].value += item.箱中破; that.option3.series.data[8].value += item.箱中破;
}) });
} }
} }
}); });
@ -348,31 +465,39 @@ export default {
let that = this; let that = this;
that.tableData7 = []; that.tableData7 = [];
let obj = { let obj = {
query: { start_date: this.start_date, end_date: this.end_date, dept_name: "7车间" }, query: {
start_date: this.start_date,
end_date: this.end_date,
dept_name: "7车间",
},
}; };
let exec = that.queryType == '月' ? 'lineMonth' : 'lineYear'; let exec = that.queryType == "月" ? "lineMonth" : "lineYear";
that.$API.bi.dataset.exec.req(exec, obj).then((res) => { that.$API.bi.dataset.exec.req(exec, obj).then((res) => {
console.log('7生产车间统计:', res); console.log("7生产车间统计:", res);
if (res.data2.ds0) { if (res.data2.ds0) {
let data = res.data2.ds0; let data = res.data2.ds0;
that.tableData7 = data; that.tableData7 = data;
} else { } else {
that.tableData7 = []; that.tableData7 = [];
} }
}); });
//echarts //echarts
let obj2 = { let obj2 = {
query: { query: {
start_date: this.start_date, end_date: this.end_date, dept_name: "7车间", start_date: this.start_date,
group_bys_material: "",order_bys_material: "",select_cols_material: "" end_date: this.end_date,
dept_name: "7车间",
group_bys_material: "",
order_bys_material: "",
select_cols_material: "",
}, },
}; };
that.$API.bi.dataset.exec.req(exec, obj2).then((res2) => { that.$API.bi.dataset.exec.req(exec, obj2).then((res2) => {
console.log('7生产车间统计:', res2); console.log("7生产车间统计:", res2);
if (res2.data2.ds0) { if (res2.data2.ds0) {
let data = res2.data2.ds0; let data = res2.data2.ds0;
if (data.length > 0) { if (data.length > 0) {
data.forEach(item => { data.forEach((item) => {
that.option1.series.data[0].value += item.合格数; that.option1.series.data[0].value += item.合格数;
that.option1.series.data[1].value += item.炸纹; that.option1.series.data[1].value += item.炸纹;
that.option1.series.data[2].value += item.条纹; that.option1.series.data[2].value += item.条纹;
@ -388,61 +513,82 @@ export default {
let that = this; let that = this;
that.tableData10 = []; that.tableData10 = [];
let obj = { let obj = {
query: { start_date: this.start_date, end_date: this.end_date, dept_name: "10车间" }, query: {
start_date: this.start_date,
end_date: this.end_date,
dept_name: "10车间",
},
}; };
let exec = that.queryType == '月' ? 'lineMonth' : 'lineYear'; let exec = that.queryType == "月" ? "lineMonth" : "lineYear";
that.$API.bi.dataset.exec.req(exec, obj).then((res) => { that.$API.bi.dataset.exec.req(exec, obj).then((res) => {
console.log('10生产车间统计:', res); console.log("10生产车间统计:", res);
if (res.data2.ds0) { if (res.data2.ds0) {
let data = res.data2.ds0; let data = res.data2.ds0;
that.tableData10 = data; that.tableData10 = data;
} else { } else {
that.tableData10 = []; that.tableData10 = [];
} }
}); });
//echarts //echarts
let obj2 = { let obj2 = {
query: { query: {
start_date: this.start_date, end_date: this.end_date, dept_name: "10车间", start_date: this.start_date,
group_bys_material: "",order_bys_material: "",select_cols_material: "" end_date: this.end_date,
dept_name: "10车间",
group_bys_material: "",
order_bys_material: "",
select_cols_material: "",
}, },
}; };
that.$API.bi.dataset.exec.req(exec, obj2).then((res2) => { that.$API.bi.dataset.exec.req(exec, obj2).then((res2) => {
console.log('10生产车间统计:', res2); console.log("10生产车间统计:", res2);
if (res2.data2.ds0) { if (res2.data2.ds0) {
let data = res2.data2.ds0; let data = res2.data2.ds0;
if (data.length > 0) { if (data.length > 0) {
data.forEach((item) => { data.forEach((item) => {
that.option2.series.data[0].value += item.合格数; that.option2.series.data[0].value += item.合格数;
that.option2.series.data[1].value += item.断裂; that.option2.series.data[1].value += item.断裂;
that.option2.series.data[2].value += item.条纹; that.option2.series.data[2].value += item.条纹;
that.option2.series.data[3].value += item.偏壁; that.option2.series.data[3].value += item.偏壁;
that.option2.series.data[4].value += item.大小头; that.option2.series.data[4].value += item.大小头;
that.option2.series.data[5].value += item.结石; that.option2.series.data[5].value += item.结石;
that.option2.series.data[6].value += item.气线; that.option2.series.data[6].value += item.气线;
}) });
} }
} }
}); });
}, },
handleQuery() { handleQuery() {
let that = this; let that = this;
if (this.queryType == '月') { if (this.queryType == "月") {
if (this.queryDate !== '' && this.queryDate !== null) { if (this.queryDate !== "" && this.queryDate !== null) {
this.start_date = this.queryDate + '-01'; this.start_date = this.queryDate + "-01";
let arr = this.queryDate.split('-'); let arr = this.queryDate.split("-");
this.end_date = this.queryDate + '-' + new Date(arr[0], arr[1], 0).getDate(); this.end_date =
this.queryDate +
"-" +
new Date(arr[0], arr[1], 0).getDate();
} else { } else {
this.start_date = this.currentYear + '-' + this.currentMonth + '-01'; this.start_date =
this.end_date = this.currentYear + '-' + this.currentMonth + '-' + new Date(this.currentYear, this.currentMonth, 0).getDate(); this.currentYear + "-" + this.currentMonth + "-01";
this.end_date =
this.currentYear +
"-" +
this.currentMonth +
"-" +
new Date(
this.currentYear,
this.currentMonth,
0
).getDate();
} }
} else { } else {
if (this.queryDate !== '' && this.queryDate !== null) { if (this.queryDate !== "" && this.queryDate !== null) {
this.start_date = this.queryDate + '-01-01'; this.start_date = this.queryDate + "-01-01";
this.end_date = this.queryDate + '-12-31'; this.end_date = this.queryDate + "-12-31";
} else { } else {
this.start_date = this.currentYear + '-01-01'; this.start_date = this.currentYear + "-01-01";
this.end_date = this.currentYear + '-12-31'; this.end_date = this.currentYear + "-12-31";
} }
} }
this.getData(); this.getData();
@ -451,18 +597,19 @@ export default {
}, },
handleExport(val) { handleExport(val) {
this.exportLoading = true; this.exportLoading = true;
let id = '#exportDiv' + val; let id = "#exportDiv" + val;
let name = val == '8' ? '退火生产检验统计' : val+'车间生产检验统计'; let name =
val == "8" ? "退火生产检验统计" : val + "车间生产检验统计";
this.$XLSX(id, name); this.$XLSX(id, name);
this.exportLoading = false; this.exportLoading = false;
}, },
}, },
} };
</script> </script>
<style scoped> <style scoped>
.tables{ .tables {
position: absolute; position: absolute;
top:4px; top: 4px;
right: 14px; right: 14px;
z-index: 10; z-index: 10;
} }