452 lines
11 KiB
Vue
452 lines
11 KiB
Vue
<template>
|
|
<el-container>
|
|
<el-header>
|
|
<div class="right-panel">
|
|
<el-select v-model="queryType" @change="queryTypeChange">
|
|
<el-option
|
|
v-for="item in typeOptions"
|
|
:key="item"
|
|
:label="item"
|
|
:value="item"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
<el-date-picker
|
|
v-if="queryType == '月'"
|
|
v-model="queryDate"
|
|
type="month"
|
|
placeholder="查询月期"
|
|
value-format="YYYY-MM"
|
|
style="width: 100%"
|
|
>
|
|
</el-date-picker>
|
|
<el-date-picker
|
|
v-if="queryType == '年'"
|
|
v-model="queryDate"
|
|
type="year"
|
|
placeholder="查询年份"
|
|
value-format="YYYY"
|
|
style="width: 100%"
|
|
>
|
|
</el-date-picker>
|
|
<el-button
|
|
type="primary"
|
|
icon="el-icon-search"
|
|
@click="handleQuery"
|
|
></el-button>
|
|
</div>
|
|
</el-header>
|
|
<el-main id="elMain">
|
|
<el-row :gutter="10" id="elCol">
|
|
<el-col :lg="8">
|
|
<el-card shadow="never">
|
|
<scEcharts height="300px" :option="option1"></scEcharts>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :lg="8">
|
|
<el-card shadow="never">
|
|
<scEcharts height="300px" :option="option2"></scEcharts>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :lg="8">
|
|
<el-card shadow="never">
|
|
<scEcharts height="300px" :option="option3"></scEcharts>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="10">
|
|
<el-col :lg="8">
|
|
<el-card shadow="never" style="position: relative">
|
|
<el-button
|
|
@click="handleExport('7')"
|
|
class="tables"
|
|
type="primary"
|
|
>导出</el-button
|
|
>
|
|
<el-table
|
|
:data="tableData1"
|
|
id="exportDiv7"
|
|
:height="tableHeight"
|
|
>
|
|
<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>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :lg="8">
|
|
<el-card shadow="never" style="position: relative">
|
|
<el-button
|
|
@click="handleExport('10')"
|
|
class="tables"
|
|
type="primary"
|
|
>导出</el-button
|
|
>
|
|
<el-table
|
|
:data="tableData2"
|
|
id="exportDiv10"
|
|
:height="tableHeight"
|
|
>
|
|
<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>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :lg="8">
|
|
<el-card shadow="never" style="position: relative">
|
|
<el-button
|
|
@click="handleExport('6')"
|
|
class="tables"
|
|
type="primary"
|
|
>导出</el-button
|
|
>
|
|
<el-table
|
|
:data="tableData3"
|
|
id="exportDiv6"
|
|
:height="tableHeight"
|
|
>
|
|
<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>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
</el-main>
|
|
</el-container>
|
|
</template>
|
|
<script>
|
|
import scEcharts from "@/components/scEcharts";
|
|
export default {
|
|
name: "chart",
|
|
components: {
|
|
scEcharts,
|
|
},
|
|
data() {
|
|
return {
|
|
tableHeight: 0,
|
|
queryType: "月",
|
|
queryDate: "",
|
|
start_date: "",
|
|
end_date: "",
|
|
currentYear: "",
|
|
currentMonth: "",
|
|
typeOptions: ["月", "年"],
|
|
option1: {
|
|
title: {
|
|
text: "7车间完成率",
|
|
},
|
|
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车间完成率",
|
|
// subtext: '',
|
|
},
|
|
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车间完成率",
|
|
},
|
|
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}%)",
|
|
},
|
|
// labelLayout: {
|
|
// verticalAlign: "bottom",
|
|
// // dy: 10,
|
|
// align: "left",
|
|
// dx: -10,
|
|
// },
|
|
// labelLine: {
|
|
// // length: 10,
|
|
// // length2: 30,
|
|
// lineStyle: {
|
|
// color: 'rgb(64,158,255)',
|
|
// type: "dashed",
|
|
// },
|
|
// },
|
|
data: [
|
|
{ value: 0, name: "已完成" },
|
|
{ value: 0, name: "未完成" },
|
|
],
|
|
},
|
|
},
|
|
tableData1: [],
|
|
tableData2: [],
|
|
tableData3: [],
|
|
};
|
|
},
|
|
mounted() {
|
|
let that = this;
|
|
let date = new Date();
|
|
let year = date.getFullYear();
|
|
let month = date.getMonth() + 1;
|
|
let days = new Date(year, month, 0).getDate();
|
|
this.currentYear = year;
|
|
this.currentMonth = month > 9 ? month : "0" + month;
|
|
this.start_date = year + "-" + month + "-01";
|
|
this.end_date =
|
|
year + "-" + month + "-" + new Date(year, month, 0).getDate();
|
|
let month1 = month > 9 ? month : "0" + month;
|
|
this.queryDate = year + "-" + month1;
|
|
let height = document.getElementById("elMain").clientHeight - 40;
|
|
let chartheight = document.getElementById("elCol").clientHeight;
|
|
that.tableHeight = height - chartheight;
|
|
this.getData6();
|
|
this.getData7();
|
|
this.getData10();
|
|
},
|
|
methods: {
|
|
queryTypeChange() {
|
|
this.queryDate = "";
|
|
},
|
|
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 = this.start_date;
|
|
obj.end_date__lte = this.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 = this.start_date;
|
|
obj.end_date__lte = this.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 = this.start_date;
|
|
obj.end_date__lte = this.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;
|
|
}
|
|
});
|
|
},
|
|
handleQuery() {
|
|
if (this.queryDate !== "" && this.queryDate !== null) {
|
|
if (this.queryType == "月") {
|
|
this.start_date = this.queryDate + "-01";
|
|
let arr = this.queryDate.split("-");
|
|
this.end_date =
|
|
this.queryDate +
|
|
"-" +
|
|
new Date(arr[0], arr[1], 0).getDate();
|
|
} else {
|
|
this.start_date = this.queryDate + "-01-01";
|
|
this.end_date = this.queryDate + "-12-31";
|
|
}
|
|
} else {
|
|
if (this.queryType == "月") {
|
|
this.start_date =
|
|
this.currentYear + "-" + this.currentMonth + "-01";
|
|
this.end_date =
|
|
this.currentYear +
|
|
"-" +
|
|
this.currentMonth +
|
|
"-" +
|
|
new Date(
|
|
this.currentYear,
|
|
this.currentMonth,
|
|
0
|
|
).getDate();
|
|
} else {
|
|
this.start_date = this.currentYear + "-01-01";
|
|
this.end_date = this.currentYear + "-12-31";
|
|
}
|
|
}
|
|
this.getData6();
|
|
this.getData7();
|
|
this.getData10();
|
|
},
|
|
handleExport(val) {
|
|
this.exportLoading = true;
|
|
let id = "#exportDiv" + val;
|
|
let name = val + "车间完成率";
|
|
this.$XLSX(id, name);
|
|
this.exportLoading = false;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.tables {
|
|
position: absolute;
|
|
top: 6px;
|
|
left: 4px;
|
|
z-index: 10;
|
|
}
|
|
</style>
|