300 lines
6.8 KiB
Vue
300 lines
6.8 KiB
Vue
<template>
|
|
<div>
|
|
<scEcharts height="300px" :option="option1" style="margin-top: 10px;"></scEcharts>
|
|
<el-table :data="tableData1" class="exportTables">
|
|
<el-table-column type="index" width="50" />
|
|
<el-table-column
|
|
label="任务编号"
|
|
prop="number"
|
|
min-width="100px"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column label="计划数" prop="count">
|
|
</el-table-column>
|
|
<el-table-column label="完成数" prop="count_ok">
|
|
</el-table-column>
|
|
<el-table-column label="完成率" prop="rate">
|
|
</el-table-column>
|
|
</el-table>
|
|
<scEcharts height="300px" :option="option2" style="margin-top: 10px;"></scEcharts>
|
|
<el-table :data="tableData2" class="exportTables">
|
|
<el-table-column type="index" width="50" />
|
|
<el-table-column
|
|
label="任务编号"
|
|
prop="number"
|
|
min-width="100px"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column label="计划数" prop="count">
|
|
</el-table-column>
|
|
<el-table-column label="完成数" prop="count_ok">
|
|
</el-table-column>
|
|
<el-table-column label="完成率" prop="rate">
|
|
</el-table-column>
|
|
</el-table>
|
|
<scEcharts height="300px" :option="option3" style="margin-top: 10px;"></scEcharts>
|
|
<el-table :data="tableData3" class="exportTables">
|
|
<el-table-column type="index" width="50" />
|
|
<el-table-column
|
|
label="任务编号"
|
|
prop="number"
|
|
min-width="100px"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column label="计划数" prop="count">
|
|
</el-table-column>
|
|
<el-table-column label="完成数" prop="count_ok">
|
|
</el-table-column>
|
|
<el-table-column label="完成率" prop="rate">
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import scEcharts from "@/components/scEcharts";
|
|
export default {
|
|
name: "chart",
|
|
components: {
|
|
scEcharts,
|
|
},
|
|
props: {
|
|
queryType:{
|
|
type: String,
|
|
default: "月"
|
|
},
|
|
queryDate:{
|
|
type: String,
|
|
default: ""
|
|
},
|
|
start_date:{
|
|
type: String,
|
|
default: ""
|
|
},
|
|
end_date:{
|
|
type: String,
|
|
default: ""
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
tableHeight: 0,
|
|
currentYear: "",
|
|
currentMonth: "",
|
|
typeOptions: ["月", "年"],
|
|
option1: {
|
|
title: {
|
|
text: "7车间任务完成进度",
|
|
left: 'center',
|
|
},
|
|
tooltip: {
|
|
trigger: "item",
|
|
},
|
|
legend: {
|
|
top: "3",
|
|
right: "3%",
|
|
},
|
|
color: ["rgb(64,158,255)", "orange"],
|
|
series: {
|
|
name: "7车间完成进度",
|
|
type: "pie",
|
|
radius: ["40%", "70%"],
|
|
center: ["50%", "60%"],
|
|
label: {
|
|
show: true,
|
|
position: "outside",
|
|
formatter: "{b} : {c} ({d}%)",
|
|
},
|
|
data: [
|
|
{ value: 0, name: "已完成" },
|
|
{ value: 0, name: "未完成" },
|
|
],
|
|
},
|
|
},
|
|
option2: {
|
|
title: {
|
|
text: "10车间任务完成进度",
|
|
left: 'center',
|
|
},
|
|
tooltip: {
|
|
trigger: "item",
|
|
},
|
|
legend: {
|
|
top: "3",
|
|
right: "3%",
|
|
},
|
|
color: ["rgb(64,158,255)", "orange"],
|
|
series: {
|
|
name: "10车间完成进度",
|
|
type: "pie",
|
|
radius: ["40%", "70%"],
|
|
center: ["50%", "60%"],
|
|
label: {
|
|
show: true,
|
|
position: "outside",
|
|
formatter: "{b} : {c} ({d}%)",
|
|
},
|
|
data: [
|
|
{ value: 0, name: "已完成" },
|
|
{ value: 0, name: "未完成" },
|
|
],
|
|
},
|
|
},
|
|
option3: {
|
|
title: {
|
|
text: "6车间任务完成进度",
|
|
left: 'center',
|
|
},
|
|
tooltip: {
|
|
trigger: "item",
|
|
},
|
|
legend: {
|
|
top: "3",
|
|
right: "3%",
|
|
},
|
|
color: ["rgb(64,158,255)", "orange"],
|
|
series: {
|
|
name: "6车间完成进度",
|
|
type: "pie",
|
|
radius: ["40%", "70%"],
|
|
center: ["50%", "60%"],
|
|
label: {
|
|
show: true,
|
|
position: "outside",
|
|
formatter: "{b} : {c} ({d}%)",
|
|
},
|
|
data: [
|
|
{ value: 0, name: "已完成" },
|
|
{ value: 0, name: "未完成" },
|
|
],
|
|
},
|
|
},
|
|
tableData1: [],
|
|
tableData2: [],
|
|
tableData3: [],
|
|
};
|
|
},
|
|
mounted() {
|
|
this.$nextTick(() => {
|
|
this.getData6();
|
|
this.getData7();
|
|
this.getData10();
|
|
})
|
|
|
|
},
|
|
methods: {
|
|
getData7() {
|
|
let that = this;
|
|
that.tableData1 = [];
|
|
that.option1.series.data[0].value = 0;
|
|
that.option1.series.data[1].value = 0;
|
|
let obj = {};
|
|
obj.page = 0;
|
|
obj.mgroup__belong_dept__name = "7车间";
|
|
obj.start_date__gte = that.start_date;
|
|
obj.end_date__lte = that.end_date;
|
|
that.$API.pm.utask.list.req(obj).then((res) => {
|
|
console.log("utask:", res);
|
|
let data = [];
|
|
let count_ok1 = 0;
|
|
let count_notok1 = 0;
|
|
if (res.length > 0) {
|
|
res.forEach((item) => {
|
|
let obj = item;
|
|
obj.rate =
|
|
Math.round((item.count_ok / item.count) * 100) +
|
|
"%";
|
|
if (item.count_ok >= item.count) {
|
|
count_ok1++;
|
|
} else {
|
|
count_notok1++;
|
|
}
|
|
data.push(obj);
|
|
});
|
|
that.tableData1 = data;
|
|
that.option1.series.data[0].value = count_ok1;
|
|
}
|
|
this.option1.series.data[0].value = count_ok1;
|
|
this.option1.series.data[1].value = count_notok1;
|
|
});
|
|
},
|
|
async getData10() {
|
|
let that = this;
|
|
that.tableData2 = [];
|
|
that.option2.series.data[0].value = 0;
|
|
that.option2.series.data[1].value = 0;
|
|
let obj = {};
|
|
obj.page = 0;
|
|
obj.mgroup__belong_dept__name = "10车间";
|
|
obj.start_date__gte = that.start_date;
|
|
obj.end_date__lte = that.end_date;
|
|
await that.$API.pm.utask.list.req(obj).then((res) => {
|
|
console.log("utask:", res);
|
|
let data = [];
|
|
let count_ok2 = 0;
|
|
let count_notok2 = 0;
|
|
if (res.length > 0) {
|
|
res.forEach((item) => {
|
|
let obj = item;
|
|
obj.rate =
|
|
Math.round((item.count_ok / item.count) * 100) +
|
|
"%";
|
|
if (item.count_ok >= item.count) {
|
|
count_ok2++;
|
|
} else {
|
|
count_notok2++;
|
|
}
|
|
data.push(obj);
|
|
});
|
|
that.tableData2 = data;
|
|
that.option2.series.data[0].value = count_ok2;
|
|
that.option2.series.data[1].value = count_notok2;
|
|
}
|
|
});
|
|
},
|
|
async getData6() {
|
|
let that = this;
|
|
that.tableData3 = [];
|
|
that.option3.series.data[0].value = 0;
|
|
that.option3.series.data[1].value = 0;
|
|
let obj = {};
|
|
obj.page = 0;
|
|
obj.mtask_utask__mgroup__belong_dept__name = "6车间";
|
|
obj.start_date__gte = that.start_date;
|
|
obj.end_date__lte = that.end_date;
|
|
await that.$API.pm.utask.list.req(obj).then((res) => {
|
|
console.log("utask:", res);
|
|
let data = [];
|
|
let count_ok3 = 0;
|
|
let count_notok3 = 0;
|
|
if (res.length > 0) {
|
|
res.forEach((item) => {
|
|
let obj = item;
|
|
obj.rate =
|
|
Math.round((item.count_ok / item.count) * 100) +
|
|
"%";
|
|
if (item.count_ok >= item.count) {
|
|
count_ok3++;
|
|
} else {
|
|
count_notok3++;
|
|
}
|
|
data.push(obj);
|
|
});
|
|
that.tableData3 = data;
|
|
that.option3.series.data[0].value = count_ok3;
|
|
that.option3.series.data[1].value = count_notok3;
|
|
}
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.tables {
|
|
position: absolute;
|
|
top: 6px;
|
|
left: 4px;
|
|
z-index: 10;
|
|
}
|
|
</style>
|