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>
|