|
|
@@ -99,6 +99,17 @@
|
|
|
</div>
|
|
|
<el-divider></el-divider>
|
|
|
<div id="taskTimeComparePanel" :style="`height: ${echartsHeight}px;width:1100px`"></div>
|
|
|
+ <div class="dataPaging">
|
|
|
+ <el-pagination
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ :current-page="dataPagingPage"
|
|
|
+ :page-sizes="[5, 10, 15, 20, 30, 40]"
|
|
|
+ :page-size="dataPagingSize"
|
|
|
+ layout="total, sizes, prev, pager, next"
|
|
|
+ :total="dataPagingTotal">
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
@@ -158,6 +169,11 @@
|
|
|
align-items: center;
|
|
|
min-width: 400px;
|
|
|
}
|
|
|
+.dataPaging {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+}
|
|
|
</style>
|
|
|
<script>
|
|
|
import vueCascader from "@/components/cascader.vue"
|
|
|
@@ -192,10 +208,136 @@ export default {
|
|
|
departmentOption: [], // 部门
|
|
|
departmentOptionValue: '',
|
|
|
echartsHeight: 500,
|
|
|
- departmentOptionLoading: false
|
|
|
+ departmentOptionLoading: false,
|
|
|
+ dataPagingPage: 1,
|
|
|
+ dataPagingSize: 10,
|
|
|
+ dataPagingTotal: 0,
|
|
|
+ dataPagingData: [],
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
+ handleSizeChange(val) {
|
|
|
+ this.dataPagingPage = 1
|
|
|
+ this.dataPagingSize = val
|
|
|
+ this.setTaskTimeCompare()
|
|
|
+ },
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ this.dataPagingPage = val
|
|
|
+ this.setTaskTimeCompare()
|
|
|
+ },
|
|
|
+ setTaskTimeCompare() {
|
|
|
+ this.departmentOptionLoading = true
|
|
|
+ let newList = this.dataPagingData
|
|
|
+ let list = newList.slice((this.dataPagingPage - 1) * this.dataPagingSize, this.dataPagingPage * this.dataPagingSize)
|
|
|
+ this.taskTimeComparePublic(list)
|
|
|
+ },
|
|
|
+ taskTimeComparePublic(list) {
|
|
|
+ var _this = this;
|
|
|
+ var xList1 = [], xList2 = []
|
|
|
+ if(list.length > 10) {
|
|
|
+ this.echartsHeight = list.length * 60
|
|
|
+ } else {
|
|
|
+ this.echartsHeight = 500
|
|
|
+ }
|
|
|
+
|
|
|
+ var xList1 = [], xList2 = []
|
|
|
+ if(list.length > 10) {
|
|
|
+ this.echartsHeight = list.length * 60
|
|
|
+ } else {
|
|
|
+ this.echartsHeight = 500
|
|
|
+ }
|
|
|
+
|
|
|
+ setTimeout(() => {
|
|
|
+ var taskNames = [];
|
|
|
+ for (var i in list) {
|
|
|
+ xList1.push({
|
|
|
+ "value": list[i].workHours,
|
|
|
+ "id": list[i].id,
|
|
|
+ "fullName": list[i].name,
|
|
|
+ });
|
|
|
+ xList2.push({
|
|
|
+ "value": list[i].planHours,
|
|
|
+ "id": list[i].id,
|
|
|
+ "fullName": list[i].name,
|
|
|
+ });
|
|
|
+ taskNames.push(list[i].name.length > 12 ? list[i].name.substring(0, 12) + '..' : list[i].name);
|
|
|
+ }
|
|
|
+ var myChart = echarts.init(document.getElementById("taskTimeComparePanel"));
|
|
|
+ _this.compareChart = myChart;
|
|
|
+ var option = {
|
|
|
+ // 全局调色盘。
|
|
|
+ color: ["#409EFF", "#71C671"],
|
|
|
+ title: {
|
|
|
+ show: list.length == 0,
|
|
|
+ textStyle: {
|
|
|
+ color: "#666666",
|
|
|
+ fontSize: 18,
|
|
|
+ fontWeight: 'normal',
|
|
|
+ },
|
|
|
+ text: list.length == 0 ? this.$t('nodata') : this.$t('gong-shi-dui-bi'),
|
|
|
+ left: "center",
|
|
|
+ top: "center"
|
|
|
+ },
|
|
|
+ toolbox: {
|
|
|
+ right: 25,
|
|
|
+ show: true,
|
|
|
+ feature: {
|
|
|
+ saveAsImage: {
|
|
|
+ show: true
|
|
|
+ },
|
|
|
+ restore: {
|
|
|
+ show: true
|
|
|
+ },
|
|
|
+ magicType: {
|
|
|
+ type: ['line', 'bar']
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: [this.$t('shi-ji-gong-shi'), this.$t('plantime')]
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '3%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow'
|
|
|
+ },
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'value',
|
|
|
+ boundaryGap: [0, 1],
|
|
|
+ axisLabel: {
|
|
|
+ formatter: '{value} ' + this.$t('time.hour')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: [{
|
|
|
+ type: 'category',
|
|
|
+ data: taskNames
|
|
|
+ }],
|
|
|
+ series: [{
|
|
|
+ name: this.$t('shi-ji-gong-shi'),
|
|
|
+ type: 'bar',
|
|
|
+ data: xList1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: this.$t('plantime'),
|
|
|
+ type: 'bar',
|
|
|
+ data: xList2
|
|
|
+ }]
|
|
|
+ };
|
|
|
+
|
|
|
+ myChart.setOption(option, { notMerge: true });
|
|
|
+ this.$nextTick(() => {
|
|
|
+ myChart.resize(); // 在DOM更新后，调用resize方法更新图表大小
|
|
|
+ });
|
|
|
+ this.departmentOptionLoading = false
|
|
|
+ }, 1000);
|
|
|
+ },
|
|
|
vueCasader(obj) {
|
|
|
if(obj.distinction == '1') {
|
|
|
if(obj.id != '') {
|
|
|
@@ -278,103 +420,13 @@ export default {
|
|
|
this.http.post('/task/getTaskTimeCompare', { ...obj },
|
|
|
res => {
|
|
|
if (res.code == "ok") {
|
|
|
- var xList1 = [], xList2 = [], list = res.data.reverse();
|
|
|
- if(list.length > 10) {
|
|
|
- this.echartsHeight = list.length * 60
|
|
|
- } else {
|
|
|
- this.echartsHeight = 500
|
|
|
- }
|
|
|
- setTimeout(() => {
|
|
|
- var taskNames = [];
|
|
|
- for (var i in list) {
|
|
|
- xList1.push({
|
|
|
- "value": list[i].workHours,
|
|
|
- "id": list[i].id,
|
|
|
- "fullName": list[i].name,
|
|
|
- });
|
|
|
- xList2.push({
|
|
|
- "value": list[i].planHours,
|
|
|
- "id": list[i].id,
|
|
|
- "fullName": list[i].name,
|
|
|
- });
|
|
|
- taskNames.push(list[i].name.length > 12 ? list[i].name.substring(0, 12) + '..' : list[i].name);
|
|
|
- }
|
|
|
- var myChart = echarts.init(document.getElementById("taskTimeComparePanel"));
|
|
|
- _this.compareChart = myChart;
|
|
|
- var option = {
|
|
|
- // 全局调色盘。
|
|
|
- color: ["#409EFF", "#71C671"],
|
|
|
- title: {
|
|
|
- show: list.length == 0,
|
|
|
- textStyle: {
|
|
|
- color: "#666666",
|
|
|
- fontSize: 18,
|
|
|
- fontWeight: 'normal',
|
|
|
- },
|
|
|
- text: list.length == 0 ? this.$t('nodata') : this.$t('gong-shi-dui-bi'),
|
|
|
- left: "center",
|
|
|
- top: "center"
|
|
|
- },
|
|
|
- toolbox: {
|
|
|
- right: 25,
|
|
|
- show: true,
|
|
|
- feature: {
|
|
|
- saveAsImage: {
|
|
|
- show: true
|
|
|
- },
|
|
|
- restore: {
|
|
|
- show: true
|
|
|
- },
|
|
|
- magicType: {
|
|
|
- type: ['line', 'bar']
|
|
|
- },
|
|
|
- }
|
|
|
- },
|
|
|
- legend: {
|
|
|
- data: [this.$t('shi-ji-gong-shi'), this.$t('plantime')]
|
|
|
- },
|
|
|
- grid: {
|
|
|
- left: '3%',
|
|
|
- right: '4%',
|
|
|
- bottom: '3%',
|
|
|
- containLabel: true
|
|
|
- },
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis',
|
|
|
- axisPointer: {
|
|
|
- type: 'shadow'
|
|
|
- },
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- type: 'value',
|
|
|
- boundaryGap: [0, 1],
|
|
|
- axisLabel: {
|
|
|
- formatter: '{value} ' + this.$t('time.hour')
|
|
|
- }
|
|
|
- },
|
|
|
- yAxis: [{
|
|
|
- type: 'category',
|
|
|
- data: taskNames
|
|
|
- }],
|
|
|
- series: [{
|
|
|
- name: this.$t('shi-ji-gong-shi'),
|
|
|
- type: 'bar',
|
|
|
- data: xList1
|
|
|
- },
|
|
|
- {
|
|
|
- name: this.$t('plantime'),
|
|
|
- type: 'bar',
|
|
|
- data: xList2
|
|
|
- }]
|
|
|
- };
|
|
|
-
|
|
|
- myChart.setOption(option, { notMerge: true });
|
|
|
- this.$nextTick(() => {
|
|
|
- myChart.resize(); // 在DOM更新后，调用resize方法更新图表大小
|
|
|
- });
|
|
|
- this.departmentOptionLoading = false
|
|
|
- }, 1000);
|
|
|
+ let newList = res.data.reverse()
|
|
|
+ this.dataPagingData = newList
|
|
|
+ this.dataPagingTotal = newList.length
|
|
|
+
|
|
|
+ let list = newList.slice((this.dataPagingPage - 1) * this.dataPagingSize, this.dataPagingPage * this.dataPagingSize)
|
|
|
|
|
|
+ this.taskTimeComparePublic(list)
|
|
|
} else {
|
|
|
this.departmentOptionLoading = false
|
|
|
this.$message({
|
Lijy