1.1.0 coding...

src/components/common/BtnPagination.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="btn-pagination flex items-center">
+    <div v-if="showPrev" class="page-toggle-btn prev-100" @click="toPrev">
+      <span>上：</span>
+      <p>100</p>
+    </div>
+    <div v-if="showNext" class="page-toggle-btn next-100 m-l-base" @click="toNext">
+      <span>下：</span>
+      <p>100</p>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed } from 'vue'
+import useVModel from '@/hooks/useVModel'
+const props = defineProps<{ modelValue: any; pagination: any }>()
+
+const currentPage = useVModel(props)
+const showNext = computed(() => {
+  return props.pagination.pageCount > currentPage.value
+})
+const showPrev = computed(() => {
+  return currentPage.value > 1
+})
+const toPrev = () => {
+  currentPage.value = currentPage.value - 1
+}
+const toNext = () => {
+  currentPage.value = currentPage.value + 1
+}
+</script>
+<style lang="scss" scoped>
+.btn-pagination {
+  .page-toggle-btn {
+    height: 32px;
+    padding: 0 4px;
+    display: flex;
+    align-items: center;
+    color: #fff;
+    font-size: 12px;
+    background-color: #00ba97;
+    border-radius: 4px;
+    cursor: pointer;
+    span {
+      padding-left: 4px;
+    }
+    p {
+      background-color: #00987b;
+      border-radius: 4px;
+      width: 40px;
+      height: 24px;
+      line-height: 24px;
+      text-align: center;
+    }
+  }
+}
+</style>

src/modules/analysis/marker-statistics/index.vue

@@ -81,12 +81,11 @@
                 <span>{{ query.markerName }}</span>
               </div> -->
               <div class="flex items-center justify-between detail-info-table-header">
-                <div class="choose-score-info"></div>
-                <div class="my-pagination">
-                  <div class="page-toggle-btn prev-100"></div>
-                  <div class="page-toggle-btn next-100 m-l-base"></div>
+                <div class="choose-score-info">
+                  <span class="txt">{{}}分段</span>
+                  <span class="close">&times;</span>
                 </div>
-
+                <btn-pagination v-model="currentPage" :pagination="pagination"></btn-pagination>
                 <!-- <el-button custom-1 size="small" class="detail-info-label">
                   <span class="">总数:</span>
                   <span class="m-l-extra-small detail-info-label-num">{{ pagination.total }}</span>
@@ -173,6 +172,9 @@ import SvgIcon from '@/components/common/SvgIcon.vue'
 import useMainStore from '@/store/main'
 import ScoringPanelWithConfirm from '@/components/shared/ScoringPanelWithConfirm.vue'
 import ImagePreview from '@/components/shared/ImagePreview.vue'
+import BtnPagination from '@/components/common/BtnPagination'
+import { ElIcon } from 'element-plus'
+import { Close } from '@element-plus/icons-vue'
 import type { EChartsOption } from 'echarts'
 import type { ExtractApiResponse } from '@/api/api'
 import type { EpTableColumn, EpFormItem } from 'global-type'
@@ -436,6 +438,38 @@ const markerSubjectiveChartsOption = computed<EChartsOption>(() => {
       itemWidth: 14,
       data: ['评卷员主观分布', '小组主观分布', '题组主观分布'],
     },
+    tooltip: {
+      trigger: 'axis',
+      // appendToBody:true,
+      // confine: true,
+      // enterable: true,
+      // extraCssText: 'max-width:70%;max-height:96%;overflow:auto',
+      axisPointer: {
+        type: 'line',
+        crossStyle: {
+          color: '#999',
+        },
+        lineStyle: {
+          type: 'dashed',
+        },
+      },
+      // formatter: function (params) {
+      //   let res = '';
+      //   for (let i = 0; i < params.length; i++) {
+      //     // console.log(params[i].name, params[i].seriesName, params[i].value)
+      //     const {seriesIndex} = params[i];
+      //     let groupNum = Object.keys(groupDataListMap).length;
+      //     let asIndexIndex = parseInt(seriesIndex/groupNum);
+      //     let fieldId = chooseIndexes[asIndexIndex].id;
+      //     let obj = (chartBindDatasetFields.length?chartBindDatasetFields:chooseIndexes).find(x=>x.id==fieldId);
+      //     let {dataFormatCode} = obj;
+      //     let func = floatFormatConfig.find(v => v.value == dataFormatCode).format;
+      //     var data = '<p>' + params[i].name + '</p>';
+      //     res += '<p class="padding:15px 0;">' + params[i].marker + params[i].seriesName + '<span style="font-weight:900;float:right;padding-left:15px;">' + (params[i].value?func(params[i].value):'-') + '</span>' + '</p>';
+      //   }
+      //   return data + res;
+      // }
+    },
     xAxis: {
       axisLine: { show: false },
       axisTick: { show: false },
@@ -650,6 +684,24 @@ onSearch()
     .detail-info-table-header {
       .choose-score-info {
         background: rgba(0, 186, 151, 0.1);
+        display: flex;
+        align-items: center;
+        height: 32px;
+        padding: 0 10px;
+        border-radius: 4px;
+        .txt {
+          color: #00ba97;
+          font-weight: bold;
+          font-size: 12px;
+          margin-right: 12px;
+        }
+        .close {
+          color: #00ba97;
+          font-weight: bold;
+          cursor: pointer;
+          font-size: 16px;
+          margin-bottom: 2px;
+        }
       }
     }
     .marker-name {