310 lines
7.8 KiB
Vue
310 lines
7.8 KiB
Vue
|
<template>
|
|||
|
|
<view class="performance">
|
|||
|
|
<view class="grid-card">
|
|||
|
|
<uni-grid :show-border="false">
|
|||
|
|
<uni-grid-item>
|
|||
|
|
<view class="grid-item-box">
|
|||
|
|
<view class="num">{{chartData.TotalCount || 0}}</view>
|
|||
|
|
<text class="text">总任务数</text>
|
|||
|
|
</view>
|
|||
|
|
</uni-grid-item>
|
|||
|
|
<uni-grid-item>
|
|||
|
|
<view class="grid-item-box">
|
|||
|
|
<view class="num" style="color: #91CB74">{{chartData.unfinishCount || 0}}</view>
|
|||
|
|
<text class="text">待办数</text>
|
|||
|
|
</view>
|
|||
|
|
</uni-grid-item>
|
|||
|
|
<uni-grid-item>
|
|||
|
|
<view class="grid-item-box">
|
|||
|
|
<view class="num" style="color: #FAC858">{{chartData.timeOverWaitCount || 0}}</view>
|
|||
|
|
<text class="text">超时待办数</text>
|
|||
|
|
</view>
|
|||
|
|
</uni-grid-item>
|
|||
|
|
<uni-grid-item>
|
|||
|
|
<view class="grid-item-box">
|
|||
|
|
<view class="num" style="color: #EE6666">{{
|
|||
|
|
(chartData.doneCount || 0) + (chartData.timeOverCount || 0)
|
|||
|
|
}}</view>
|
|||
|
|
<text class="text">已办事项</text>
|
|||
|
|
</view>
|
|||
|
|
</uni-grid-item>
|
|||
|
|
<uni-grid-item>
|
|||
|
|
<view class="grid-item-box">
|
|||
|
|
<view class="num" style="color: #73C0DE">{{allFinishRate}}</view>
|
|||
|
|
<text class="text">完成率</text>
|
|||
|
|
</view>
|
|||
|
|
</uni-grid-item>
|
|||
|
|
<uni-grid-item>
|
|||
|
|
<view class="grid-item-box">
|
|||
|
|
<view class="num" style="color: #3CA272">{{finishRate}}</view>
|
|||
|
|
<text class="text">及时完成率</text>
|
|||
|
|
</view>
|
|||
|
|
</uni-grid-item>
|
|||
|
|
</uni-grid>
|
|||
|
|
</view>
|
|||
|
|
<!-- <view class="word-chart">-->
|
|||
|
|
<!-- <qiun-data-charts-->
|
|||
|
|
<!-- type="word"-->
|
|||
|
|
<!-- :opts="wordOpts"-->
|
|||
|
|
<!-- :chartData="wordChartData"-->
|
|||
|
|
<!-- />-->
|
|||
|
|
<!-- </view>-->
|
|||
|
|
<view class="line-chart">
|
|||
|
|
<view class="line-chart-title">任务及时完成率（近6个月）</view>
|
|||
|
|
<qiun-data-charts
|
|||
|
|
type="line"
|
|||
|
|
:opts="lineOpts"
|
|||
|
|
:chartData="lineChartData"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
<view class="table">
|
|||
|
|
<uni-table style="width: 100%" border stripe emptyText="暂无更多数据" >
|
|||
|
|
<!-- 表头行 -->
|
|||
|
|
<uni-tr>
|
|||
|
|
<uni-th width="100" align="center">月份</uni-th>
|
|||
|
|
<uni-th width="60" align="center">任务数</uni-th>
|
|||
|
|
<uni-th width="60" align="center">完成率</uni-th>
|
|||
|
|
<uni-th width="90" align="center">及时完成率</uni-th>
|
|||
|
|
</uni-tr>
|
|||
|
|
<!-- 表格数据行 -->
|
|||
|
|
<uni-tr v-for="(item, key) in tableData" :key="key">
|
|||
|
|
<uni-td align="center">{{item.MONTHStr}}</uni-td>
|
|||
|
|
<uni-td align="center">{{item.TOTAL_QTY}}</uni-td>
|
|||
|
|
<uni-td align="center">{{item.FINISH_RATE}}%</uni-td>
|
|||
|
|
<uni-td align="center">{{item.NORMAL_FINISH_RATE}}%</uni-td>
|
|||
|
|
</uni-tr>
|
|||
|
|
</uni-table>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import {
|
|||
|
|
getChartData,
|
|||
|
|
} from '../../services/app'
|
|||
|
|
import { initFilter } from '../../utils/common'
|
|||
|
|
|
|||
|
|
let uChartsInstance = {}
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
chartData: {},
|
|||
|
|
tableData: [],
|
|||
|
|
lineChartData: {},
|
|||
|
|
wordChartData: {},
|
|||
|
|
wordOpts: {
|
|||
|
|
color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
|
|||
|
|
padding: undefined,
|
|||
|
|
enableScroll: false,
|
|||
|
|
extra: {
|
|||
|
|
word: {
|
|||
|
|
type: "normal",
|
|||
|
|
autoColors: false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
lineOpts: {
|
|||
|
|
color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
|
|||
|
|
padding: [15,10,0,15],
|
|||
|
|
enableScroll: false,
|
|||
|
|
legend: {},
|
|||
|
|
xAxis: {
|
|||
|
|
disableGrid: true
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
gridType: "dash",
|
|||
|
|
dashLength: 2,
|
|||
|
|
unit: '%'
|
|||
|
|
},
|
|||
|
|
extra: {
|
|||
|
|
line: {
|
|||
|
|
type: "curve",
|
|||
|
|
width: 2,
|
|||
|
|
activeType: "hollow"
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onReady() {
|
|||
|
|
// this.getLineServerData();
|
|||
|
|
// this.getWordServerData();
|
|||
|
|
},
|
|||
|
|
async onShow() {
|
|||
|
|
const orgId = uni.getStorageSync('orgId')
|
|||
|
|
const { User } = uni.getStorageSync('appInfo')
|
|||
|
|
const curDate = new Date()
|
|||
|
|
const curYear = curDate.getFullYear()
|
|||
|
|
const curMonth = curDate.getMonth()
|
|||
|
|
let y, m;
|
|||
|
|
if (curMonth > 5) {
|
|||
|
|
y = curYear
|
|||
|
|
m = curMonth - 5
|
|||
|
|
} else {
|
|||
|
|
y = curYear - 1
|
|||
|
|
m = 11 - (curMonth - 6)
|
|||
|
|
}
|
|||
|
|
const startTime = uni.$u.timeFormat(new Date(y, m, 1), 'yyyy-mm-dd')
|
|||
|
|
|
|||
|
|
const endTime = uni.$u.timeFormat(new Date(), 'yyyy-mm-dd')
|
|||
|
|
let json = initFilter(orgId,User.NAME,"","","",startTime, endTime);
|
|||
|
|
const res = await getChartData(json)
|
|||
|
|
if (res.IsSuccessful) {
|
|||
|
|
this.chartData = res.Data
|
|||
|
|
const preLineChartData = (res.Data?.groupDataLine || []).splice(-6, 6)
|
|||
|
|
const lineChartConfig = {
|
|||
|
|
categories: preLineChartData.map(i => i.MONTHStr.split('年')[1]),
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: "完成率",
|
|||
|
|
data: preLineChartData.map(i => i.FINISH_RATE)
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "及时完成率",
|
|||
|
|
data: preLineChartData.map(i => i.NORMAL_FINISH_RATE)
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
this.lineChartData = JSON.parse(JSON.stringify(lineChartConfig));
|
|||
|
|
this.tableData = res.Data?.groupData || []
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// getLineServerData() {
|
|||
|
|
// //模拟从服务器获取数据时的延时
|
|||
|
|
// setTimeout(() => {
|
|||
|
|
// //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
|
|||
|
|
// let res = {
|
|||
|
|
// categories: ["202201","202201","202201","202201","202201","202201"],
|
|||
|
|
// series: [
|
|||
|
|
// {
|
|||
|
|
// name: "完成率",
|
|||
|
|
// data: [35,8,25,37,4,20]
|
|||
|
|
// },
|
|||
|
|
// {
|
|||
|
|
// name: "及时完成率B",
|
|||
|
|
// data: [70,40,65,100,44,68]
|
|||
|
|
// }
|
|||
|
|
// ]
|
|||
|
|
// };
|
|||
|
|
// this.lineChartData = JSON.parse(JSON.stringify(res));
|
|||
|
|
// }, 500);
|
|||
|
|
// },
|
|||
|
|
// getWordServerData() {
|
|||
|
|
// //模拟从服务器获取数据时的延时
|
|||
|
|
// setTimeout(() => {
|
|||
|
|
// //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
|
|||
|
|
// let res = {
|
|||
|
|
// series: [
|
|||
|
|
// {
|
|||
|
|
// name: "总任务数(484)",
|
|||
|
|
// textSize: 25,
|
|||
|
|
// data: undefined
|
|||
|
|
// },
|
|||
|
|
// {
|
|||
|
|
// name: "待办数(1)",
|
|||
|
|
// textSize: 20,
|
|||
|
|
// data: undefined
|
|||
|
|
// },
|
|||
|
|
// {
|
|||
|
|
// name: "超时待办数(24)",
|
|||
|
|
// textSize: 20,
|
|||
|
|
// data: undefined
|
|||
|
|
// },
|
|||
|
|
// {
|
|||
|
|
// name: "已办事项(58)",
|
|||
|
|
// textSize: 20,
|
|||
|
|
// data: undefined
|
|||
|
|
// },
|
|||
|
|
// {
|
|||
|
|
// name: "完成率(98%)",
|
|||
|
|
// textSize: 20,
|
|||
|
|
// data: undefined
|
|||
|
|
// },
|
|||
|
|
// {
|
|||
|
|
// name: "及时完成率(66)",
|
|||
|
|
// textSize: 20,
|
|||
|
|
// data: undefined
|
|||
|
|
// }
|
|||
|
|
// ]
|
|||
|
|
// };
|
|||
|
|
// this.wordChartData = JSON.parse(JSON.stringify(res));
|
|||
|
|
// }, 500);
|
|||
|
|
// }
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
allFinishRate() {
|
|||
|
|
const { TotalCount, timeOverCount, doneCount } = this.chartData
|
|||
|
|
if (TotalCount) {
|
|||
|
|
return ((doneCount + timeOverCount) / TotalCount * 100).toFixed(1)
|
|||
|
|
}
|
|||
|
|
return 0
|
|||
|
|
},
|
|||
|
|
finishRate() {
|
|||
|
|
const { TotalCount, doneCount } = this.chartData
|
|||
|
|
if (TotalCount) {
|
|||
|
|
return (doneCount / TotalCount * 100).toFixed(1)
|
|||
|
|
}
|
|||
|
|
return 0
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.performance {
|
|||
|
|
padding: 16px;
|
|||
|
|
}
|
|||
|
|
.word-chart {
|
|||
|
|
border: 1px solid #e5e5e5;
|
|||
|
|
padding: 10px;
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
}
|
|||
|
|
.line-chart {
|
|||
|
|
margin-bottom: 26px;
|
|||
|
|
}
|
|||
|
|
.line-chart-title {
|
|||
|
|
font-weight: bold;
|
|||
|
|
font-size: 18px;
|
|||
|
|
text-align: center;
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
}
|
|||
|
|
.grid-card {
|
|||
|
|
margin-bottom: 26px;
|
|||
|
|
border: 1px solid #e5e5e5;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
padding: 8px;
|
|||
|
|
}
|
|||
|
|
.grid-item-box {
|
|||
|
|
flex: 1;
|
|||
|
|
// position: relative;
|
|||
|
|
/* #ifndef APP-NVUE */
|
|||
|
|
display: flex;
|
|||
|
|
/* #endif */
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
padding: 15px 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.grid-item-box-row {
|
|||
|
|
flex: 1;
|
|||
|
|
// position: relative;
|
|||
|
|
/* #ifndef APP-NVUE */
|
|||
|
|
display: flex;
|
|||
|
|
/* #endif */
|
|||
|
|
flex-direction: row;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
padding: 15px 0;
|
|||
|
|
}
|
|||
|
|
.grid-item-box .num {
|
|||
|
|
font-size: 30px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
.grid-item-box .text {
|
|||
|
|
color: rgba(0, 0, 0, .65);
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
</style>
|