factory_web/src/views/statistics/task_rate_gx.vue

757 lines
22 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<el-container>
<el-header>
<div class="right-panel">
<!-- <el-select v-model="mgroupId"
placeholder="请选择工段"
@change="mgroupChange">
<el-option
v-for="item in options"
:key="item.id"
:label="item.name"
:value="item.id"
>
</el-option>
</el-select> -->
<el-date-picker
v-model="searchDate"
type="month"
placeholder="查询日期"
value-format="YYYY-MM"
style="width: 160px"
>
</el-date-picker>
<el-button
type="primary"
icon="el-icon-search"
@click="handleQuery"
></el-button>
</div>
</el-header>
<el-main id="elMain">
<!-- 0 -->
<el-card shadow="never" style="margin-bottom: 8px">
<el-row :gutter="10">
<el-col :lg="12">
<el-card shadow="never">
<div id="linechart0"></div>
</el-card>
</el-col>
<el-col :lg="12">
<el-card shadow="never" style="position: relative">
<el-button
@click="handleExport(0)"
class="tables"
type="primary"
>导出</el-button
>
<el-table :data="tableData0" id="exportDiv0" :height="300">
<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-card>
<!-- 1 -->
<el-card shadow="never" style="margin-bottom: 8px">
<el-row :gutter="10">
<el-col :lg="12">
<el-card shadow="never">
<div id="linechart1"></div>
</el-card>
</el-col>
<el-col :lg="12">
<el-card shadow="never" style="position: relative">
<el-button
@click="handleExport(1)"
class="tables"
type="primary"
>导出</el-button
>
<el-table
:data="tableData1"
id="exportDiv1"
:height="300"
>
<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-card>
<!-- 2 -->
<el-card shadow="never" style="margin-bottom: 8px">
<el-row :gutter="10">
<el-col :lg="12">
<el-card shadow="never">
<div id="linechart2"></div>
</el-card>
</el-col>
<el-col :lg="12">
<el-card shadow="never" style="position: relative">
<el-button
@click="handleExport(2)"
class="tables"
type="primary"
>导出</el-button
>
<el-table :data="tableData2" id="exportDiv2" :height="300">
<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-card>
<!-- 3 -->
<el-card shadow="never" style="margin-bottom: 8px">
<el-row :gutter="10">
<el-col :lg="12">
<el-card shadow="never">
<div id="linechart3"></div>
</el-card>
</el-col>
<el-col :lg="12">
<el-card shadow="never" style="position: relative">
<el-button
@click="handleExport(3)"
class="tables"
type="primary"
>导出</el-button
>
<el-table :data="tableData3" id="exportDiv3" :height="300">
<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-card>
<!-- 4 -->
<el-card shadow="never" style="margin-bottom: 8px">
<el-row :gutter="10">
<el-col :lg="12">
<el-card shadow="never">
<div id="linechart4"></div>
</el-card>
</el-col>
<el-col :lg="12">
<el-card shadow="never" style="position: relative">
<el-button
@click="handleExport(4)"
class="tables"
type="primary"
>导出</el-button
>
<el-table :data="tableData4" id="exportDiv4" :height="300">
<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-card>
<!-- 5 -->
<el-card shadow="never" style="margin-bottom: 8px">
<el-row :gutter="10">
<el-col :lg="12">
<el-card shadow="never">
<div id="linechart5"></div>
</el-card>
</el-col>
<el-col :lg="12">
<el-card shadow="never" style="position: relative">
<el-button
@click="handleExport(5)"
class="tables"
type="primary"
>导出</el-button
>
<el-table :data="tableData5" id="exportDiv5" :height="300">
<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-card>
<!-- 6 -->
<el-card shadow="never" style="margin-bottom: 8px">
<el-row :gutter="10">
<el-col :lg="12">
<el-card shadow="never">
<div id="linechart6"></div>
</el-card>
</el-col>
<el-col :lg="12">
<el-card shadow="never" style="position: relative">
<el-button
@click="handleExport(6)"
class="tables"
type="primary"
>导出</el-button
>
<el-table :data="tableData6" id="exportDiv6" :height="300">
<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-card>
<!-- 7 -->
<el-card shadow="never" style="margin-bottom: 8px">
<el-row :gutter="10">
<el-col :lg="12">
<el-card shadow="never">
<div id="linechart7"></div>
</el-card>
</el-col>
<el-col :lg="12">
<el-card shadow="never" style="position: relative">
<el-button
@click="handleExport(7)"
class="tables"
type="primary"
>导出</el-button
>
<el-table :data="tableData7" id="exportDiv7" :height="300">
<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-card>
<!-- 8 -->
<el-card shadow="never" style="margin-bottom: 8px">
<el-row :gutter="10">
<el-col :lg="12">
<el-card shadow="never">
<div id="linechart8"></div>
</el-card>
</el-col>
<el-col :lg="12">
<el-card shadow="never" style="position: relative">
<el-button
@click="handleExport(8)"
class="tables"
type="primary"
>导出</el-button
>
<el-table :data="tableData8" id="exportDiv8" :height="300">
<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-card>
<!-- 9 -->
<el-card shadow="never" style="margin-bottom: 8px">
<el-row :gutter="10">
<el-col :lg="12">
<el-card shadow="never">
<div id="linechart9"></div>
</el-card>
</el-col>
<el-col :lg="12">
<el-card shadow="never" style="position: relative">
<el-button
@click="handleExport(9)"
class="tables"
type="primary"
>导出</el-button
>
<el-table :data="tableData9" id="exportDiv9" :height="300">
<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-card>
<!-- 10 -->
<el-card shadow="never" style="margin-bottom: 8px">
<el-row :gutter="10">
<el-col :lg="12">
<el-card shadow="never">
<div id="linechart10"></div>
</el-card>
</el-col>
<el-col :lg="12">
<el-card shadow="never" style="position: relative">
<el-button
@click="handleExport(10)"
class="tables"
type="primary"
>导出</el-button
>
<el-table :data="tableData10" id="exportDiv10" :height="300">
<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-card>
<!-- 11 -->
<el-card shadow="never" style="margin-bottom: 8px">
<el-row :gutter="10">
<el-col :lg="12">
<el-card shadow="never">
<div id="linechart11"></div>
</el-card>
</el-col>
<el-col :lg="12">
<el-card shadow="never" style="position: relative">
<el-button
@click="handleExport(11)"
class="tables"
type="primary"
>导出</el-button
>
<el-table :data="tableData11" id="exportDiv11" :height="300">
<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-card>
<!-- 12 -->
<el-card shadow="never" style="margin-bottom: 8px">
<el-row :gutter="10">
<el-col :lg="12">
<el-card shadow="never">
<div id="linechart12"></div>
</el-card>
</el-col>
<el-col :lg="12">
<el-card shadow="never" style="position: relative">
<el-button
@click="handleExport(12)"
class="tables"
type="primary"
>导出</el-button
>
<el-table :data="tableData12" id="exportDiv12" :height="300">
<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-card>
<!-- 13 -->
<el-card shadow="never" style="margin-bottom: 8px">
<el-row :gutter="10">
<el-col :lg="12">
<el-card shadow="never">
<div id="linechart13"></div>
</el-card>
</el-col>
<el-col :lg="12">
<el-card shadow="never" style="position: relative">
<el-button
@click="handleExport(13)"
class="tables"
type="primary"
>导出</el-button
>
<el-table :data="tableData13" id="exportDiv13" :height="300">
<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-card>
<!-- 14 -->
<el-card shadow="never" style="margin-bottom: 8px">
<el-row :gutter="10">
<el-col :lg="12">
<el-card shadow="never">
<div id="linechart14"></div>
</el-card>
</el-col>
<el-col :lg="12">
<el-card shadow="never" style="position: relative">
<el-button
@click="handleExport(14)"
class="tables"
type="primary"
>导出</el-button
>
<el-table :data="tableData14" id="exportDiv14" :height="300">
<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-card>
<!-- 15 -->
<el-card shadow="never" style="margin-bottom: 8px">
<el-row :gutter="10">
<el-col :lg="12">
<el-card shadow="never">
<div id="linechart15"></div>
</el-card>
</el-col>
<el-col :lg="12">
<el-card shadow="never" style="position: relative">
<el-button
@click="handleExport(15)"
class="tables"
type="primary"
>导出</el-button
>
<el-table :data="tableData15" id="exportDiv15" :height="300">
<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-card>
</el-main>
</el-container>
</template>
<script>
import * as echarts from "echarts";
import T from "@/components/scEcharts/echarts-theme-T.js";
echarts.registerTheme("T", T);
import scEcharts from "@/components/scEcharts";
function deepCopy(obj) {
return JSON.parse(JSON.stringify(obj));
}
const ondDayTime = 86400000;
export default {
name: "chart",
components: {
scEcharts,
},
data() {
return {
query: {
querys:[
[{field:'start_date',compare:'gte',value:''},{field:'mgroup',compare:'',value:''}],
[{field:'end_date',compare:'lte',value:''},{field:'mgroup',compare:'',value:''}]
],
page:0
},
mgroupId:'',
start_date:'',
end_date:'',
currentDate: "",
searchDate:'',
options:[],
basicOption: {
title: {
text: "",
},
tooltip: {
trigger: "item",
},
legend: {
top: "3",
right: "3%",
},
color: ["rgb(64,158,255)", "rgb(255,165,0)"],
series: {
name: "任务进度",
type: "pie",
radius: ["40%", "70%"],
center: ["50%", "55%"],
itemStyle: {
borderRadius: 5
},
label: {
show: true,
position: "outside",
formatter: "{b} : {c} ({d}%)",
},
data: [
{ value: 0, name: "合格数" },
{ value: 0, name: "未完成" },
],
},
},
tableData0: [],
tableData1: [],
tableData2: [],
tableData3: [],
tableData4: [],
tableData5: [],
tableData6: [],
tableData7: [],
tableData8: [],
tableData9: [],
tableData10: [],
tableData11: [],
tableData12: [],
tableData13: [],
tableData14: [],
tableData15: [],
};
},
mounted() {
let that = this;
let nowDate = new Date();
that.getMgroup();
},
methods: {
getWeekDate(dates){
let that = this;
dates = new Date(dates);
let week =dates.getDay(); //当前时间的week数
let weekFirst = 0, weekLast = 0;
if (week == 0) {
weekFirst = 6;
weekLast = 0; //周日特殊处理
} else {
weekFirst = week - 1;
weekLast = 7 - week;
}
let first = new Date(dates.getTime() - weekFirst * ondDayTime); //本周周一
let last = new Date(new Date(dates.getTime() + weekLast * ondDayTime)); //本周周日
let dateArr = [];
for (let i = 0; i < 7; i++) {
let itemDate = new Date(first.getTime() + i * ondDayTime);
let item = itemDate.getDate();
dateArr.push(item);
}
that.weekDateList = dateArr;
that.query.start_date = that.query.querys[0][0].value = first.toISOString().split('T')[0];
that.query.end_date = that.query.querys[1][0].value = last.toISOString().split('T')[0];
that.options.forEach((item,index)=>{
console.log('item',item);
setTimeout(()=>{
that.getData(item.id,item.name,index);
},500)
})
},
getMgroup(){
let that = this;
that.options = [];
that.$API.mtm.mgroup.list.req({ page: 0}).then((res) => {
// that.options = res.slice(21);
that.options = res;
let nowDate = new Date();
that.getWeekDate(nowDate);
});
},
setChart(name, option = null) {
// 根据name 渲染数据, option需填写否则option为模拟数据
var myChart = echarts.getInstanceByDom(
document.getElementById(name)
);
if (myChart == undefined) {
myChart = echarts.init(document.getElementById(name), "T");
}
if (option == null) {
option = Object.assign({}, this.basicOption);
}
setTimeout(() => {
try {
myChart.setOption(option);
} catch (error) {}
}, 500);
},
getData(mgroup_id,mgroup_name,mgroup_index) {
let that = this;
that.tableData1 = [];
that.query.querys[0][1].value = null;
that.query.querys[1][1].value = null;
let option = deepCopy(that.basicOption);
option.title.text = mgroup_name+"任务进度";
option.series.data[0].value = 0;
option.series.data[1].value = 0;
that.query.querys[0][1].value = mgroup_id;
that.query.querys[1][1].value = mgroup_id;
that.$API.pm.mtask.cquery.req(that.query).then((res) => {
let names = 'tableData'+mgroup_index;
that[names] = res;
// console.log('names',names);
// console.log('that[names]',that[names]);
let count_jh = 0,count_ok = 0,count_diff = 0;
if (res.length > 0) {
res.forEach((item) => {
count_jh+=item.count;
count_ok+=item.count_ok;
});
count_diff = count_jh - count_ok;
option.series.data[0].value = count_ok;
option.series.data[1].value = count_diff>0?count_diff:0;
let chartId = 'linechart'+mgroup_index;
that.setChart(chartId, option);
}else{
let chartId = 'linechart'+mgroup_index;
that.setChart(chartId, option);
}
});
},
handleQuery(){
let that = this;
if(this.searchDate!==''&&this.searchDate!==null){
let dates = this.searchDate.split('-');
let year = dates[0];
let month = dates[1];
let days = new Date(year, month, 0).getDate();
let start_date = year + "-" + month + "-01";
let end_date = year + "-" + month + "-"+days;
that.query.querys[0][0].value = start_date;
that.query.querys[1][0].value = end_date;
}else{
that.query.querys[0][0].value = that.start_date;
that.query.querys[1][0].value = that.end_date;
}
that.options.forEach((item,index)=>{
setTimeout(()=>{
that.getData(item.id,item.name,index);
},500)
})
},
handleExport(val) {
this.exportLoading = true;
let id = "#exportDiv" + val;
let name = val + "车间完成率";
this.$XLSX(id, name);
this.exportLoading = false;
},
},
};
</script>
<style scoped>
#linechart1,#linechart2,#linechart3,#linechart4,
#linechart5,#linechart6,#linechart7,#linechart8,
#linechart9,#linechart10,#linechart11,#linechart12,
#linechart13,#linechart14,#linechart15,#linechart0{
width: 100%;
height: 300px;
}
.tables {
position: absolute;
top: 6px;
left: 4px;
z-index: 10;
}
</style>