|
@@ -1,47 +1,85 @@
|
|
|
<script setup lang="ts">
|
|
|
+import moment from 'moment'
|
|
|
import CardTitle from './CardTitle.vue'
|
|
|
import MyEchart from '@/components/Echart/src/Echart.vue'
|
|
|
import { EChartsOption } from 'echarts'
|
|
|
+import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
|
|
|
+import { reportWorkloadStatistics } from '@/api/oa/staffRecords'
|
|
|
|
|
|
/**
|
|
|
* 普通员工-项目时间分布
|
|
|
*/
|
|
|
-const chartData = [
|
|
|
- { value: 20, name: '浙地智用' },
|
|
|
- { value: 18, name: '要素一本账' },
|
|
|
- { value: 32, name: '苏地慧管' },
|
|
|
- { value: 30, name: '兴化工业云图' }
|
|
|
-]
|
|
|
+const chartData = ref<
|
|
|
+ {
|
|
|
+ name: string
|
|
|
+ value: number
|
|
|
+ }[]
|
|
|
+>([])
|
|
|
|
|
|
const colorPalette = ['#5FA5F8', '#45CCF6', '#F9A527', '#05CE9E']
|
|
|
|
|
|
-const options = {
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: '月度',
|
|
|
- type: 'pie',
|
|
|
- radius: [15, '80%'],
|
|
|
- center: ['50%', '50%'],
|
|
|
- roseType: 'area',
|
|
|
- color: colorPalette,
|
|
|
- label: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- itemStyle: {
|
|
|
- borderRadius: 0
|
|
|
- },
|
|
|
- data: chartData
|
|
|
+const options = ref<EChartsOption>({})
|
|
|
+
|
|
|
+const { wsCache } = useCache()
|
|
|
+const user = wsCache.get(CACHE_KEY.USER)
|
|
|
+const currentIndex = ref<number>(0)
|
|
|
+const userId = user.user.id // 当前登录的编号
|
|
|
+const queryReportWorkloadStatistics = async (index: number): Promise<void> => {
|
|
|
+ const params = {
|
|
|
+ userId: userId,
|
|
|
+ startDate: moment()
|
|
|
+ .startOf(index === 0 ? 'months' : index === 1 ? 'quarter' : 'year')
|
|
|
+ .format('YYYY-MM-DD'),
|
|
|
+ endDate: moment()
|
|
|
+ .endOf(index === 0 ? 'months' : index === 1 ? 'quarter' : 'year')
|
|
|
+ .format('YYYY-MM-DD')
|
|
|
+ }
|
|
|
+ const result = await reportWorkloadStatistics(params)
|
|
|
+ chartData.value = result.map((item) => {
|
|
|
+ return {
|
|
|
+ name: item['xmmc'],
|
|
|
+ value: item['workTime']
|
|
|
}
|
|
|
- ]
|
|
|
-} as EChartsOption
|
|
|
+ })
|
|
|
+ options.value = {
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '月度',
|
|
|
+ type: 'pie',
|
|
|
+ radius: [15, '80%'],
|
|
|
+ center: ['50%', '50%'],
|
|
|
+ roseType: 'area',
|
|
|
+ color: colorPalette,
|
|
|
+ label: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ borderRadius: 0
|
|
|
+ },
|
|
|
+ data: chartData.value
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+}
|
|
|
+queryReportWorkloadStatistics(0)
|
|
|
+const switchReportWorkloadStatistics = (index: number) => {
|
|
|
+ currentIndex.value = index
|
|
|
+ queryReportWorkloadStatistics(index)
|
|
|
+}
|
|
|
</script>
|
|
|
<template>
|
|
|
<CardTitle title="项目工时分布统计">
|
|
|
<template #rightTitle>
|
|
|
<span class="title-types">
|
|
|
- <span class="checked">本月</span>
|
|
|
- <span>季度</span>
|
|
|
- <span>年度</span>
|
|
|
+ <span :class="{ checked: currentIndex === 0 }" @click="switchReportWorkloadStatistics(0)">
|
|
|
+ 本月
|
|
|
+ </span>
|
|
|
+ <span :class="{ checked: currentIndex === 1 }" @click="switchReportWorkloadStatistics(1)">
|
|
|
+ 季度
|
|
|
+ </span>
|
|
|
+ <span :class="{ checked: currentIndex === 2 }" @click="switchReportWorkloadStatistics(2)">
|
|
|
+ 年度
|
|
|
+ </span>
|
|
|
</span>
|
|
|
</template>
|
|
|
</CardTitle>
|
|
@@ -52,7 +90,9 @@ const options = {
|
|
|
<div style="display: flex; width: 50%; align-items: center">
|
|
|
<ul class="time-list">
|
|
|
<li v-for="(item, index) in chartData" :key="index">
|
|
|
- <span><i :style="`background: ${colorPalette[index]};`"></i>{{ item.name }}</span>
|
|
|
+ <span class="title" :title="item.name"
|
|
|
+ ><i :style="`background: ${colorPalette[index]};`"></i>{{ item.name }}</span
|
|
|
+ >
|
|
|
<span>{{ item.value }}小时</span>
|
|
|
</li>
|
|
|
</ul>
|
|
@@ -75,7 +115,14 @@ const options = {
|
|
|
font-size: 14px;
|
|
|
font-weight: 400;
|
|
|
color: #000000;
|
|
|
-
|
|
|
+ &.title {
|
|
|
+ display: inline-block;
|
|
|
+ width: 160px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
i {
|
|
|
display: inline-block;
|
|
|
width: 6px;
|