完成工作项统计
parent
29ce65fc05
commit
4f3d028beb
|
|
@ -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>
|
||||
|
|
@ -72,7 +72,7 @@ export default {
|
|||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
show: false,
|
||||
fontSize: '40',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
|
|
@ -88,7 +88,7 @@ export default {
|
|||
type: 'scroll',
|
||||
orient: 'vertical',
|
||||
// right: 10,
|
||||
left:350,
|
||||
left: '80%',
|
||||
top: 20,
|
||||
bottom: 20,
|
||||
}
|
||||
|
|
|
|||
|
|
@ -47,8 +47,22 @@
|
|||
</div>
|
||||
<div style="flex: 1;margin-left: 30px;height: 100%;display: flex;flex-direction: column">
|
||||
<p class="p-title" style="margin-left: 10px">工作项统计</p>
|
||||
<div style="flex:1;margin-top: 30px;padding: 20px;
|
||||
display: flex;flex-direction: column; justify-content: space-between;background-color: white; border-radius: 10px;">
|
||||
<div
|
||||
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>
|
||||
|
|
@ -204,7 +218,7 @@
|
|||
<div style="height: 500px;margin: 0 30px 30px 30px;
|
||||
display: flex;flex-direction: row;justify-content: space-between">
|
||||
<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;
|
||||
display: flex;flex-direction: column; justify-content: space-between;background-color: white; border-radius: 10px;align-items: stretch">
|
||||
<TendencyChart style="flex: 1;"></TendencyChart>
|
||||
|
|
@ -246,7 +260,7 @@
|
|||
title="提示"
|
||||
v-model="dialogVisible"
|
||||
width="30%"
|
||||
:before-close="handleClose">
|
||||
>
|
||||
<div>确认删除该公告?</div>
|
||||
<template #footer>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
|
|
@ -268,10 +282,10 @@ import request from "@/utils/request";
|
|||
import moment from "moment";
|
||||
import EditProjectDialog from "../components/EditProjectDialog";
|
||||
import TendencyChart from "../components/TendencyChart";
|
||||
|
||||
import EchartsBar from "../components/echartsBar"
|
||||
export default {
|
||||
name: "ProjectInfo",
|
||||
components: {EditProjectDialog, TendencyChart},
|
||||
components: {EditProjectDialog, TendencyChart, EchartsBar},
|
||||
data() {
|
||||
return {
|
||||
project: {
|
||||
|
|
@ -299,6 +313,9 @@ export default {
|
|||
completeNum: 0,
|
||||
totalNum: 0,
|
||||
|
||||
taskStat: {},
|
||||
selftaskStat: {},
|
||||
|
||||
projectClasses: [],
|
||||
projectSubClasses: [],
|
||||
|
||||
|
|
@ -388,6 +405,8 @@ export default {
|
|||
this.getProjectStats();
|
||||
this.getProjectClass();
|
||||
this.getannouncementList();
|
||||
this.getTaskStats();
|
||||
this.getselfTaskStats();
|
||||
},
|
||||
mounted() {
|
||||
const that = this
|
||||
|
|
@ -397,6 +416,46 @@ export default {
|
|||
};
|
||||
},
|
||||
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() {
|
||||
var that = this;
|
||||
|
|
|
|||
Loading…
Reference in New Issue