完成工作项统计

main
wuyize 2022-07-13 15:04:13 +08:00
parent 29ce65fc05
commit 4f3d028beb
3 changed files with 204 additions and 8 deletions

View File

@ -0,0 +1,137 @@
<template>
<div id="projectechartsBar" ref="projectechartsBar">
<!-- 准备具有宽高的容器 -->
<div style="width: 100%; height: 100%" ref="chart"></div>
</div>
</template>
<script>
import request from "@/utils/request";
let Echarts = require('echarts/lib/echarts'); // 使import
require('echarts/lib/chart/bar'); // bar =
export default {
data() {
return {
chart: null,
}
},
props: {
task: {}
},
watch: {
task: function (val) {
this.initEcharts()
}
},
methods: {
//
init() {
console.log(this.$refs.chart);
//
this.chart = Echarts.init(this.$refs.chart);
let option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
}
},
legend: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['需求', '任务', '缺陷']
},
color: [ '#79bbff', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
series: [
{
name: '未完成',
type: 'bar',
stack: 'total',
label: {
show: true,
color:'#FFFFFF',
formatter:function (params) {
if(params.value==0){ //0
return ''
}else{
return params.value
}
}
},
emphasis: {
focus: 'series'
},
data: [this.task.require.totalNum - this.task.require.completeNum, this.task.task.totalNum - this.task.task.completeNum, this.task.flaw.totalNum - this.task.flaw.completeNum]
},
{
name: '已完成',
type: 'bar',
stack: 'total',
label: {
show: true,
color:'#FFFFFF',
formatter:function (params) {
if(params.value==0){ //0
return ''
}else{
return params.value
}
}
},
emphasis: {
focus: 'series'
},
data: [this.task.require.completeNum, this.task.task.completeNum, this.task.flaw.completeNum]
},
]
};
this.chart.setOption(option);
},
initEcharts() {
this.$nextTick(() => {
this.init()
});
//this.chart.setOption(option);
window.addEventListener("resize", function () {
this.chart.resize();
});
}
}
};
</script>
<style scoped lang="scss">
#echartsBar {
width: 100%;
height: 100%;
display: flex;
.echarts_box {
flex-shrink: 0;
}
}
</style>

View File

@ -72,7 +72,7 @@ export default {
}, },
emphasis: { emphasis: {
label: { label: {
show: true, show: false,
fontSize: '40', fontSize: '40',
fontWeight: 'bold' fontWeight: 'bold'
} }
@ -88,7 +88,7 @@ export default {
type: 'scroll', type: 'scroll',
orient: 'vertical', orient: 'vertical',
// right: 10, // right: 10,
left:350, left: '80%',
top: 20, top: 20,
bottom: 20, bottom: 20,
} }

View File

@ -47,8 +47,22 @@
</div> </div>
<div style="flex: 1;margin-left: 30px;height: 100%;display: flex;flex-direction: column"> <div style="flex: 1;margin-left: 30px;height: 100%;display: flex;flex-direction: column">
<p class="p-title" style="margin-left: 10px">工作项统计</p> <p class="p-title" style="margin-left: 10px">工作项统计</p>
<div style="flex:1;margin-top: 30px;padding: 20px; <div
display: flex;flex-direction: column; justify-content: space-between;background-color: white; border-radius: 10px;"> style="flex:1;margin-top: 30px;padding: 10px;
display: flex;flex-direction:row; justify-content: space-between;background-color: white; border-radius: 10px;">
<div style="width: 50%;">
<p class="p-subtitle" style="margin-left: 10px;margin-top: 10px">项目</p>
<echartsBar :task="taskStat" style="height: 190px; weight: 100%"></echartsBar></div>
<div style="width: 50%;">
<p class="p-subtitle" style="margin-left: 10px;margin-top: 10px">个人</p>
<echartsBar :task="selftaskStat" style="height: 190px; weight: 100%"></echartsBar></div>
<!-- <div style="width: 50%;"><selfechartsBar style="height: 190px; weight: 100%"></selfechartsBar></div> -->
<!-- <el-tabs :tab-position="tabPosition" style="height: 200px; margin-top: -15px;" class="demo-tabs">
<el-tab-pane label="项目">
<echartsBar style="height: 190px; weight: 100%"></echartsBar>
</el-tab-pane>
<el-tab-pane label="个人"><echartsBar style="height: 190px; weight: 100%"></echartsBar></el-tab-pane>
</el-tabs> -->
</div> </div>
</div> </div>
@ -204,7 +218,7 @@
<div style="height: 500px;margin: 0 30px 30px 30px; <div style="height: 500px;margin: 0 30px 30px 30px;
display: flex;flex-direction: row;justify-content: space-between"> display: flex;flex-direction: row;justify-content: space-between">
<div style="flex: 1;height: 100%;display: flex;flex-direction: column"> <div style="flex: 1;height: 100%;display: flex;flex-direction: column">
<p class="p-title" style="margin-left: 10px">工作项统计</p> <p class="p-title" style="margin-left: 10px">工作项完成趋势</p>
<div style="flex:1;margin-top: 30px;padding: 20px; <div style="flex:1;margin-top: 30px;padding: 20px;
display: flex;flex-direction: column; justify-content: space-between;background-color: white; border-radius: 10px;align-items: stretch"> display: flex;flex-direction: column; justify-content: space-between;background-color: white; border-radius: 10px;align-items: stretch">
<TendencyChart style="flex: 1;"></TendencyChart> <TendencyChart style="flex: 1;"></TendencyChart>
@ -246,7 +260,7 @@
title="提示" title="提示"
v-model="dialogVisible" v-model="dialogVisible"
width="30%" width="30%"
:before-close="handleClose"> >
<div>确认删除该公告?</div> <div>确认删除该公告?</div>
<template #footer> <template #footer>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
@ -268,10 +282,10 @@ import request from "@/utils/request";
import moment from "moment"; import moment from "moment";
import EditProjectDialog from "../components/EditProjectDialog"; import EditProjectDialog from "../components/EditProjectDialog";
import TendencyChart from "../components/TendencyChart"; import TendencyChart from "../components/TendencyChart";
import EchartsBar from "../components/echartsBar"
export default { export default {
name: "ProjectInfo", name: "ProjectInfo",
components: {EditProjectDialog, TendencyChart}, components: {EditProjectDialog, TendencyChart, EchartsBar},
data() { data() {
return { return {
project: { project: {
@ -299,6 +313,9 @@ export default {
completeNum: 0, completeNum: 0,
totalNum: 0, totalNum: 0,
taskStat: {},
selftaskStat: {},
projectClasses: [], projectClasses: [],
projectSubClasses: [], projectSubClasses: [],
@ -388,6 +405,8 @@ export default {
this.getProjectStats(); this.getProjectStats();
this.getProjectClass(); this.getProjectClass();
this.getannouncementList(); this.getannouncementList();
this.getTaskStats();
this.getselfTaskStats();
}, },
mounted() { mounted() {
const that = this const that = this
@ -397,6 +416,46 @@ export default {
}; };
}, },
methods: { methods: {
getTaskStats() {
const that = this
request({
url: 'project/' + this.$route.params.projectId + '/task/stats' ,
method: 'get'
}).then(response => {
if (response.data.code === 200) {
that.taskStat = {
require: response.data.data.records[0],
task: response.data.data.records[1],
flaw: response.data.data.records[2]
}
}
}).catch(function (error) {
console.log(error)
})
},
getselfTaskStats() {
const that = this
request({
url: 'project/' + this.$route.params.projectId + '/task/stats/'+this.$store.state.staff.staffId ,
method: 'get'
}).then(response => {
if (response.data.code === 200) {
that.selftaskStat = {
require: response.data.data.records[0],
task: response.data.data.records[1],
flaw: response.data.data.records[2]
}
}
}).catch(function (error) {
console.log(error)
})
},
// //
delxtggsj() { delxtggsj() {
var that = this; var that = this;