116 lines
2.3 KiB
Vue
116 lines
2.3 KiB
Vue
<template>
|
|
<div id="work" style="width: 100%; height: 300px"></div>
|
|
</template>
|
|
|
|
<script>
|
|
import { getTaskData } from '@/api/index';
|
|
import * as echarts from 'echarts';
|
|
import { getDate, getPastTime } from '@/common/times';
|
|
|
|
export default {
|
|
props: {
|
|
time: {
|
|
type: Array,
|
|
},
|
|
all: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
chartPie: null,
|
|
taskData: [],
|
|
workTime: '',
|
|
isAllProject: false,
|
|
};
|
|
},
|
|
watch: {
|
|
time(value) {
|
|
this.workTime = value;
|
|
this.getTaskData();
|
|
setTimeout(() => {
|
|
this.drawCharts();
|
|
}, 2000);
|
|
},
|
|
all(value) {
|
|
this.isAllProject = value;
|
|
this.getTaskData();
|
|
setTimeout(() => {
|
|
this.drawCharts();
|
|
}, 2000);
|
|
},
|
|
},
|
|
|
|
mounted: function () {},
|
|
methods: {
|
|
async getTaskData() {
|
|
var projectId = sessionStorage.getItem('projectId');
|
|
var param = {};
|
|
if (this.isAllProject == false) {
|
|
param = {
|
|
start: getDate(this.workTime[0]),
|
|
end: getDate(this.workTime[1]),
|
|
projectId: projectId,
|
|
};
|
|
} else {
|
|
param = {
|
|
start: getDate(this.workTime[0]),
|
|
end: getDate(this.workTime[1]),
|
|
};
|
|
}
|
|
const { data } = await getTaskData(param);
|
|
this.taskData = [
|
|
{
|
|
value: data.handle,
|
|
name: '已处理',
|
|
},
|
|
{
|
|
value: data.unHandle,
|
|
name: '未处理',
|
|
},
|
|
{
|
|
value: data.total,
|
|
name: '总数',
|
|
},
|
|
];
|
|
},
|
|
drawPieChart() {
|
|
this.chartPie = echarts.init(document.getElementById('work'));
|
|
this.chartPie.setOption({
|
|
title: {
|
|
text: '工单统计',
|
|
left: 'center',
|
|
},
|
|
tooltip: {
|
|
trigger: 'item',
|
|
},
|
|
legend: {
|
|
orient: 'vertical',
|
|
left: 'bottom',
|
|
},
|
|
series: [
|
|
{
|
|
type: 'pie',
|
|
radius: '50%',
|
|
data: this.taskData,
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
|
},
|
|
},
|
|
},
|
|
],
|
|
});
|
|
},
|
|
drawCharts() {
|
|
this.drawPieChart();
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped></style>
|