|
@@ -34,28 +34,43 @@
|
|
|
<div class="p-base radius-base fill-blank group-progress-box">
|
|
|
<div class="flex direction-column p-r-base">
|
|
|
<div class="flex justify-between">
|
|
|
- <span class="table-title p-t-small p-b-extra-small">小组进度</span>
|
|
|
+ <!-- <span class="table-title p-t-small p-b-extra-small">小组进度</span> -->
|
|
|
+ <el-radio-group v-model="tabValue">
|
|
|
+ <el-radio-button label="每日进度" />
|
|
|
+ <el-radio-button label="小组进度" />
|
|
|
+ </el-radio-group>
|
|
|
<span v-show="currentMainName" class="flex items-center current-main-name">
|
|
|
<svg-icon class="m-r-medium-mini" name="question"></svg-icon>
|
|
|
<span>{{ currentMainName }}</span>
|
|
|
</span>
|
|
|
</div>
|
|
|
- <div class="flex-1 overflow-hidden">
|
|
|
- <base-table border stripe size="small" height="100%" :columns="groupColumns" :data="groupProgressData">
|
|
|
+ <div class="flex-1 overflow-hidden p-t-base">
|
|
|
+ <base-table
|
|
|
+ v-if="tabValue === '小组进度'"
|
|
|
+ border
|
|
|
+ stripe
|
|
|
+ size="small"
|
|
|
+ height="100%"
|
|
|
+ :columns="groupColumns"
|
|
|
+ :data="groupProgressData"
|
|
|
+ >
|
|
|
+ <template #empty>暂无数据</template>
|
|
|
+ </base-table>
|
|
|
+ <base-table v-else border stripe size="small" height="100%" :columns="dayColumns" :data="groupProgressData">
|
|
|
<template #empty>暂无数据</template>
|
|
|
</base-table>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="chart-info m-t-base" style="height: 300px">
|
|
|
+ <div v-if="tabValue === '小组进度'" class="chart-info m-t-base" style="height: 300px">
|
|
|
<vue-e-charts v-if="currentMainName" class="full" :option="groupChartsOption" autoresize></vue-e-charts>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
-<script setup lang="ts" name="TotalProgress">
|
|
|
+<script setup lang="tsx" name="TotalProgress">
|
|
|
/** 评卷进度 */
|
|
|
import { reactive, watch, computed, ref, nextTick } from 'vue'
|
|
|
-import { ElButton } from 'element-plus'
|
|
|
+import { ElButton, ElRadioButton, ElRadioGroup } from 'element-plus'
|
|
|
import VueECharts from 'vue-echarts'
|
|
|
import { minus } from '@/utils/common'
|
|
|
import BaseForm from '@/components/element/BaseForm.vue'
|
|
@@ -71,7 +86,7 @@ import type { ExtractApiResponse } from '@/api/api'
|
|
|
import type { EpFormItem, EpTableColumn } from 'global-type'
|
|
|
|
|
|
const { provideInitOption } = useVueECharts()
|
|
|
-
|
|
|
+const tabValue = ref('每日进度')
|
|
|
provideInitOption({ renderer: 'svg' })
|
|
|
const canLoadTopChart = ref(false)
|
|
|
// const { subjectList, dataModel, changeModelValue } = useOptions(['subject'])
|
|
@@ -284,7 +299,8 @@ const totalChartsOption = computed<EChartsOption>(() => {
|
|
|
right: 0,
|
|
|
top: 0,
|
|
|
itemWidth: 14,
|
|
|
- data: ['试卷总量', '已完成', '完成比'],
|
|
|
+ // data: ['试卷总量', '已完成', '完成比'],
|
|
|
+ data: ['试卷总量', '已完成'],
|
|
|
},
|
|
|
yAxis: {
|
|
|
axisLine: { show: false },
|
|
@@ -333,29 +349,38 @@ const totalChartsOption = computed<EChartsOption>(() => {
|
|
|
color: '#3AD500',
|
|
|
},
|
|
|
data: getYAxisData('finishCount', markProgressResult?.value),
|
|
|
- },
|
|
|
- {
|
|
|
- name: '完成比',
|
|
|
- type: 'bar',
|
|
|
- // barWidth: 44,
|
|
|
- barWidth: 11,
|
|
|
- barGap: '-200%',
|
|
|
- showBackground: true,
|
|
|
- xAxisIndex: 1,
|
|
|
- itemStyle: {
|
|
|
- color: 'rgba(0, 186, 151,0.3)',
|
|
|
- },
|
|
|
label: {
|
|
|
show: true,
|
|
|
color: '#444',
|
|
|
fontSize: 10,
|
|
|
formatter({ value }) {
|
|
|
- return value > 0 ? `${value}%` : ''
|
|
|
+ return getRateLabel(value)
|
|
|
},
|
|
|
- position: 'insideTopRight',
|
|
|
+ position: 'right',
|
|
|
},
|
|
|
- data: getYAxisData('finishRate', markProgressResult?.value),
|
|
|
},
|
|
|
+ // {
|
|
|
+ // name: '完成比',
|
|
|
+ // type: 'bar',
|
|
|
+ // // barWidth: 44,
|
|
|
+ // barWidth: 11,
|
|
|
+ // barGap: '-200%',
|
|
|
+ // showBackground: true,
|
|
|
+ // xAxisIndex: 1,
|
|
|
+ // itemStyle: {
|
|
|
+ // color: 'rgba(0, 186, 151,0.3)',
|
|
|
+ // },
|
|
|
+ // label: {
|
|
|
+ // show: true,
|
|
|
+ // color: '#444',
|
|
|
+ // fontSize: 10,
|
|
|
+ // formatter({ value }) {
|
|
|
+ // return value > 0 ? `${value}%` : ''
|
|
|
+ // },
|
|
|
+ // position: 'insideTopRight',
|
|
|
+ // },
|
|
|
+ // data: getYAxisData('finishRate', markProgressResult?.value),
|
|
|
+ // },
|
|
|
],
|
|
|
}
|
|
|
})
|
|
@@ -398,6 +423,35 @@ const groupProgressData = computed(() => {
|
|
|
arr.push(total)
|
|
|
return arr
|
|
|
})
|
|
|
+const getRateLabel = (value: any) => {
|
|
|
+ if (markProgressResult.value?.length) {
|
|
|
+ let rate = markProgressResult.value.find((v) => v.finishCount == value)?.finishRate
|
|
|
+ return rate ? rate + '%' : ''
|
|
|
+ } else {
|
|
|
+ return ''
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const dayColumns = computed(() => {
|
|
|
+ let dateArr =
|
|
|
+ groupProgressResult?.value?.[0]?.dayProgresses?.map((item: any) => {
|
|
|
+ return {
|
|
|
+ label: item.date,
|
|
|
+ formatter(row: any) {
|
|
|
+ let dayProgresses = row.dayProgresses
|
|
|
+ let col = dayProgresses.find((v: any) => v.date == item.date)
|
|
|
+ // return '444'
|
|
|
+ return <span>{`${col.count} / ${col.rate}%`}</span>
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }) || []
|
|
|
+
|
|
|
+ return [
|
|
|
+ { label: '小组', formatter: (row: any) => (row.markingGroupNumber ? `第${row.markingGroupNumber}组` : '全体') },
|
|
|
+ { label: '完成总量', prop: 'finishCount', align: 'center', sortable: true },
|
|
|
+ ...dateArr,
|
|
|
+ ]
|
|
|
+})
|
|
|
|
|
|
watch(
|
|
|
currentMainQuestion,
|