bug fix

src/modules/analysis/group-monitoring/index.vue

@@ -9,7 +9,7 @@
     </div>
     <div class="flex-1 p-base">
       <div class="radius-base p-l-base p-r-base p-t-mini fill-blank p-b-mini">
-        <base-table border stripe size="small" :columns="columns" :data="result">
+        <base-table border stripe size="small" :columns="columns" :data="tableData">
           <template #column-leader="{ row }">
             <div style="text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis">
               <span
@@ -26,6 +26,13 @@
             </div>
           </template>
         </base-table>
+        <el-pagination
+          v-bind="pagination"
+          v-model:current-page="currentPage"
+          background
+          right
+          layout="total,pager"
+        ></el-pagination>
       </div>
 
       <div class="radius-base m-t-base p-l-base p-r-base p-t-mini fill-blank p-b-mini">
@@ -39,9 +46,9 @@
 
 <script setup lang="tsx" name="AnalysisGroupMonitoring">
 /** 小组监控 */
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { useRouter } from 'vue-router'
-import { ElButton } from 'element-plus'
+import { ElButton, ElPagination } from 'element-plus'
 import BaseForm from '@/components/element/BaseForm.vue'
 import BaseTable from '@/components/element/BaseTable.vue'
 import useFetch from '@/hooks/useFetch'
@@ -108,6 +115,16 @@ const columns: any = [
   { label: '已给分自定义抽查卷数', prop: 'customCheckReScoreCount', minWidth: 178, sortable: true },
 ]
 
+const pagination = computed(() => ({
+  layout: 'prev,pager,next',
+  pageCount: Math.ceil((result.value?.length || 0) / 10),
+  pageSize: 10,
+  total: result.value?.length || 0,
+}))
+const currentPage = ref(1)
+const tableData = computed(() => {
+  return (result.value || []).slice((currentPage.value - 1) * 10, (currentPage.value - 1) * 10 + 10)
+})
 /** 刷新按钮 */
 function onSearch() {
   let markingGroupNumbers: any = formModel.value.markingGroupNumbers
@@ -144,6 +161,8 @@ function viewMonitoringDetail(
 onOptionInit(onSearch)
 
 const chartOptions = computed(() => {
+  const xData = result.value?.map((item) => item.markingGroupLeader) || []
+  // const radius = xData.length <= 20 ? 10 : 8
   return {
     grid: {
       top: 50,
@@ -169,19 +188,29 @@ const chartOptions = computed(() => {
         rotate: 30,
         // interval: 0,
       },
-      data: result.value?.map((item) => item.markingGroupLeader) || [],
+      data: xData,
     },
     yAxis: {
       axisTick: { show: false },
       type: 'value',
     },
-
+    dataZoom: [
+      {
+        show: xData.length > 20,
+        realtime: true,
+        height: 15,
+        bottom: 10,
+        start: 0,
+        end: 2000 / xData.length,
+      },
+    ],
     series: [
       {
         name: '已浏览',
         type: 'bar',
         itemStyle: {
           color: '#0064FF',
+          // borderRadius: [radius, radius, 0, 0],
         },
         data: result.value?.map((item) => item.totalCount) || [],
         label: {
@@ -193,7 +222,7 @@ const chartOptions = computed(() => {
             return value > 0 ? `${value}` : ''
           },
         },
-        barWidth: '20',
+        barWidth: xData.length <= 20 ? '20' : '16',
         barCategoryGap: '50%',
         barGap: '0%',
       },
@@ -202,6 +231,7 @@ const chartOptions = computed(() => {
         type: 'bar',
         itemStyle: {
           color: '#3AD500',
+          // borderRadius: [radius, radius, 0, 0],
         },
         data: result.value?.map((item) => item.totalReScoreCount) || [],
         label: {
@@ -213,7 +243,7 @@ const chartOptions = computed(() => {
             return value > 0 ? `${value}` : ''
           },
         },
-        barWidth: '20',
+        barWidth: xData.length <= 20 ? '20' : '16',
         barCategoryGap: '50%',
         barGap: '0%',
       },

src/plugins/echarts.ts

@@ -8,6 +8,7 @@ import {
   MarkLineComponent,
   ToolboxComponent,
   TooltipComponent,
+  DataZoomComponent,
 } from 'echarts/components'
 
 const useECharts = () => {
@@ -22,6 +23,7 @@ const useECharts = () => {
     MarkLineComponent,
     ToolboxComponent,
     TooltipComponent,
+    DataZoomComponent,
   ])
 }