|
@@ -1,31 +1,32 @@
|
|
|
<template>
|
|
|
- <div class="p-base p-b-unset m-b-base radius-base fill-blank total-progress-box">
|
|
|
+ <div class="p-base p-b-base m-b-base radius-base fill-blank total-progress-box">
|
|
|
<base-form size="small" :model="model" :items="items"></base-form>
|
|
|
- <div class="flex total-progress-info">
|
|
|
- <div class="flex direction-column full-h p-r-base table-info">
|
|
|
- <div class="p-t-base p-b-extra-small table-title">整体进度</div>
|
|
|
- <div class="flex-1 overflow-hidden">
|
|
|
- <base-table
|
|
|
- border
|
|
|
- stripe
|
|
|
- size="small"
|
|
|
- height="100%"
|
|
|
- highlight-current-row
|
|
|
- :columns="totalColumns"
|
|
|
- :data="totalProgressData"
|
|
|
- @current-change="onCurrentChange"
|
|
|
- >
|
|
|
- <template #empty>暂无数据</template>
|
|
|
- </base-table>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="flex-1 p-t-small p-b-extra-small overflow-hidden full-h chart-info">
|
|
|
+ <div class="total-progress-info">
|
|
|
+ <div class="p-t-base p-b-extra-small table-title">整体进度</div>
|
|
|
+ <div
|
|
|
+ v-if="canLoadTopChart"
|
|
|
+ class="p-t-small p-b-extra-small overflow-hidden chart-info"
|
|
|
+ :style="{ height: topChartHeight + 'px' }"
|
|
|
+ >
|
|
|
<vue-e-charts class="full" :option="totalChartsOption" autoresize></vue-e-charts>
|
|
|
</div>
|
|
|
+ <div class="m-t-base">
|
|
|
+ <base-table
|
|
|
+ border
|
|
|
+ stripe
|
|
|
+ size="small"
|
|
|
+ highlight-current-row
|
|
|
+ :columns="totalColumns"
|
|
|
+ :data="totalProgressData"
|
|
|
+ @current-change="onCurrentChange"
|
|
|
+ >
|
|
|
+ <template #empty>暂无数据</template>
|
|
|
+ </base-table>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="p-base radius-base fill-blank flex group-progress-box">
|
|
|
- <div class="flex direction-column full-h p-r-base table-info">
|
|
|
+ <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 v-show="currentMainName" class="flex items-center current-main-name">
|
|
@@ -39,7 +40,7 @@
|
|
|
</base-table>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="flex-1 full-h chart-info">
|
|
|
+ <div 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>
|
|
@@ -47,7 +48,7 @@
|
|
|
|
|
|
<script setup lang="ts" name="TotalProgress">
|
|
|
/** 评卷进度 */
|
|
|
-import { reactive, watch, computed, ref } from 'vue'
|
|
|
+import { reactive, watch, computed, ref, nextTick } from 'vue'
|
|
|
import VueECharts from 'vue-echarts'
|
|
|
import { minus } from '@/utils/common'
|
|
|
import BaseForm from '@/components/element/BaseForm.vue'
|
|
@@ -65,13 +66,12 @@ import type { EpFormItem, EpTableColumn } from 'global-type'
|
|
|
const { provideInitOption } = useVueECharts()
|
|
|
|
|
|
provideInitOption({ renderer: 'svg' })
|
|
|
-
|
|
|
+const canLoadTopChart = ref(false)
|
|
|
const { subjectList, dataModel, changeModelValue } = useOptions(['subject'])
|
|
|
|
|
|
const model = reactive({
|
|
|
subjectCode: dataModel.subject || '',
|
|
|
})
|
|
|
-
|
|
|
watch(
|
|
|
dataModel,
|
|
|
() => {
|
|
@@ -104,12 +104,11 @@ const totalColumns: EpTableColumn<TotalProgress>[] = [
|
|
|
label: '大题',
|
|
|
formatter: getMainName,
|
|
|
},
|
|
|
- { label: '试卷总量', prop: 'totalPaper', align: 'center', width: 100, sortable: true },
|
|
|
- { label: '已完成', prop: 'finishCount', align: 'center', width: 100, sortable: true },
|
|
|
+ { label: '试卷总量', prop: 'totalPaper', align: 'center', sortable: true },
|
|
|
+ { label: '已完成', prop: 'finishCount', align: 'center', sortable: true },
|
|
|
{
|
|
|
label: '完成比',
|
|
|
align: 'center',
|
|
|
- width: 92,
|
|
|
formatter(row) {
|
|
|
return `${row.finishRate}%`
|
|
|
},
|
|
@@ -118,7 +117,6 @@ const totalColumns: EpTableColumn<TotalProgress>[] = [
|
|
|
{
|
|
|
label: '待完成',
|
|
|
align: 'center',
|
|
|
- width: 90,
|
|
|
formatter(row) {
|
|
|
return `${minus(row.totalPaper, row.finishCount)}`
|
|
|
},
|
|
@@ -127,7 +125,6 @@ const totalColumns: EpTableColumn<TotalProgress>[] = [
|
|
|
{
|
|
|
label: '待完成比',
|
|
|
align: 'center',
|
|
|
- width: 90,
|
|
|
formatter(row) {
|
|
|
return `${minus(100, row.finishRate)}%`
|
|
|
},
|
|
@@ -136,7 +133,6 @@ const totalColumns: EpTableColumn<TotalProgress>[] = [
|
|
|
{
|
|
|
label: '预计耗时(分)',
|
|
|
align: 'center',
|
|
|
- width: 114,
|
|
|
formatter(row) {
|
|
|
return `${parseFloat((row.takeTime / 60).toFixed(2))}`
|
|
|
},
|
|
@@ -156,6 +152,20 @@ const totalProgressData = computed(() => {
|
|
|
return arr
|
|
|
})
|
|
|
|
|
|
+const topChartHeight = computed(() => {
|
|
|
+ return ((markProgressResult.value as any) || []).length * 80 + 1
|
|
|
+})
|
|
|
+watch(
|
|
|
+ () => topChartHeight.value,
|
|
|
+ (val: any) => {
|
|
|
+ if (val > 1) {
|
|
|
+ nextTick(() => {
|
|
|
+ canLoadTopChart.value = true
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+)
|
|
|
+
|
|
|
watch(
|
|
|
() => model.subjectCode,
|
|
|
(v) => {
|
|
@@ -402,22 +412,21 @@ const groupChartsOption = computed<EChartsOption>(() => {
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
.total-progress-box {
|
|
|
- height: 323px;
|
|
|
+ // height: 323px;
|
|
|
.total-progress-info {
|
|
|
border-top: $OnePixelLine;
|
|
|
- height: 253px;
|
|
|
+ // height: 253px;
|
|
|
}
|
|
|
}
|
|
|
-.table-info {
|
|
|
- width: 720px;
|
|
|
- border-right: $OnePixelLine;
|
|
|
- .table-title {
|
|
|
- font-size: $MediumFont;
|
|
|
- }
|
|
|
+// .table-info {
|
|
|
+// // width: 720px;
|
|
|
+// border-right: $OnePixelLine;
|
|
|
+.table-title {
|
|
|
+ font-size: $MediumFont;
|
|
|
}
|
|
|
+// }
|
|
|
|
|
|
.group-progress-box {
|
|
|
- height: 395px;
|
|
|
.current-main-name {
|
|
|
background-color: $BaseBgColor;
|
|
|
font-size: $SmallFont;
|