|
@@ -20,6 +20,14 @@
|
|
|
<div class="chart-wrap">
|
|
|
<vue-echarts :option="chartOptions" autoresize></vue-echarts>
|
|
|
</div>
|
|
|
+ <a-table
|
|
|
+ :data-source="tableData"
|
|
|
+ :columns="columns"
|
|
|
+ size="middle"
|
|
|
+ bordered
|
|
|
+ :pagination="false"
|
|
|
+ >
|
|
|
+ </a-table>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script name="WorkStatistics" lang="ts" setup>
|
|
@@ -42,6 +50,7 @@ const transParams = computed(() => {
|
|
|
};
|
|
|
});
|
|
|
const data = ref([]);
|
|
|
+const tableData = ref<any>([]);
|
|
|
const search = () => {
|
|
|
getWorkStatistics(transParams.value).then((res: any) => {
|
|
|
data.value = res || [];
|
|
@@ -54,8 +63,40 @@ const search = () => {
|
|
|
return aa.localeCompare(bb);
|
|
|
}
|
|
|
});
|
|
|
+ createTableData();
|
|
|
});
|
|
|
};
|
|
|
+const createTableData = () => {
|
|
|
+ let deviceNames = Array.from(
|
|
|
+ new Set(data.value.map((item: any) => item.deviceName))
|
|
|
+ );
|
|
|
+ let subjectNames = Array.from(
|
|
|
+ new Set(data.value.map((item: any) => item.subjectName))
|
|
|
+ );
|
|
|
+ let arr = [];
|
|
|
+ for (let i = 0; i < subjectNames.length; i++) {
|
|
|
+ let sName = subjectNames[i];
|
|
|
+ let obj: any = {};
|
|
|
+ for (let j = 0; j < deviceNames.length; j++) {
|
|
|
+ let filter: any = data.value.filter((item: any) => {
|
|
|
+ return item.deviceName == deviceNames[j] && item.subjectName == sName;
|
|
|
+ });
|
|
|
+ obj[sName] = filter.length ? filter[0]?.answerScanCount : "";
|
|
|
+ obj.subjectName = sName;
|
|
|
+ }
|
|
|
+ arr.push(obj);
|
|
|
+ }
|
|
|
+ tableData.value = arr;
|
|
|
+};
|
|
|
+const columns = computed(() => {
|
|
|
+ let arr = data.value.map((item: any) => {
|
|
|
+ return {
|
|
|
+ title: item.deviceName,
|
|
|
+ dataIndex: item.subjectName,
|
|
|
+ };
|
|
|
+ });
|
|
|
+ return [{ title: "科目", dataIndex: "subjectName" }, ...arr];
|
|
|
+});
|
|
|
onMounted(() => {
|
|
|
search();
|
|
|
});
|
|
@@ -197,7 +238,9 @@ const exportFile = async () => {
|
|
|
.work-statistics {
|
|
|
padding: 20px;
|
|
|
.chart-wrap {
|
|
|
- height: calc(100% - 50px);
|
|
|
+ // height: calc(100% - 50px);
|
|
|
+ height: 400px;
|
|
|
+ margin-bottom: 15px;
|
|
|
}
|
|
|
}
|
|
|
</style>
|