From 9703cd9df9eb1302a1b240a2242a6b27230a485f Mon Sep 17 00:00:00 2001
From: xjs <xjs@ycymedu.com>
Date: Fri, 23 May 2025 10:37:13 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E8=AF=B4=E6=98=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/sort-college/DataTable.vue | 142 +++++++++++++---------
 1 file changed, 85 insertions(+), 57 deletions(-)

diff --git a/src/components/sort-college/DataTable.vue b/src/components/sort-college/DataTable.vue
index 5a33c41..3aaed68 100644
--- a/src/components/sort-college/DataTable.vue
+++ b/src/components/sort-college/DataTable.vue
@@ -1,63 +1,54 @@
 <template>
-<!-- Table -->
-<table class="w-full">
-  <!-- Table Header -->
-  <thead>
-    <tr class="text-[24rpx] text-[#505050]">
-      <th
-        v-for="(headItem, index) in columns"
-        :key="index"
-        :style="{ width: headItem.width }"
-        class="text-left px-[8rpx] py-[12rpx]"
-      >
-        {{ headItem.label }}
-        <span
-          class="i-carbon-help text-[#86909C]"
-          v-if="headItem.key === 'lineDiff' || headItem.key === 'rankDiff'"
-        ></span>
-      </th>
-    </tr>
-  </thead>
+  <!-- Table -->
+  <table class="w-full">
+    <!-- Table Header -->
+    <thead>
+      <tr class="text-[24rpx] text-[#505050]">
+        <th v-for="(headItem, index) in columns" :key="index" :style="{ width: headItem.width }" class="text-left px-[8rpx] py-[12rpx]">
+          {{ headItem.label }}
+          <span
+            class="i-carbon-help text-[#86909C]"
+            v-if="headItem.key === 'lineDiff' || headItem.key === 'rankDiff'"
+            @click.stop="showToast(headItem.key === 'lineDiff' ? 1 : headItem.key === 'rankDiff' ? 2 : 0)"></span>
+        </th>
+      </tr>
+    </thead>
 
-  <!-- Table Body -->
-  <tbody>
-    <tr
-      v-for="(item, index) in recompileData"
-      :key="index"
-      class="text-[24rpx] text-[#505050] border-t border-[#EDEDED]"
-    >
-      <td
-        v-for="(col, colIndex) in columns"
-        :key="colIndex"
-        :style="{ width: col.width }"
-        class="px-[8rpx] py-[12rpx]"
-      >
-        <div v-if="col.key === 'lineDiff'">
-          {{ item['lineDiff'] }}
-        </div>
-        <div class="flex items-center gap-[8rpx]" v-else-if="col.key === 'rankDiff'">
-          {{ item['rankDiff'] }}
-          <img
-            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAATCAYAAACORR0GAAAAAXNSR0IArs4c6QAAATlJREFUSEu11eFNwzAQBeB3gQEyAIV2g67QDewJgBGYgHYCRmhH8AbABHSDRhSJvxmA5sEFtTKuk7jIza9EivP57l0SQcZjY8z0ApgSGAtwI0ApInpdSkYH78bcicjy6JnkOiukQAwj8Jod+rD29qd1K78qkqusUAxRsCEX2aAQIXmviGam58mQTtTEuXVseGLItXNt+zSzAkgbhq0xjxCZg5yPnFv4WB/i3zdY0QHZr/KwAKlB2pFzL7Gqe6EjxMNEpPKmqxZydtXR2jarrhc2QGoNtBB50rc+WDOIdEIhst/tpzHjncizhyUhUagL2VfhYeVQuzqHYQj5gwFlXyZhJIeMUpH/foRb6NxIm5GPEKgK0p7SktQKZWvtG35/VtWOnE2cq1IXn3KfbIwpL4ti+dU0D+dCdEPf+I3M1u2H9e8AAAAASUVORK5CYII="
-            alt="rankDiff"
-            class="w-[16rpx] h-[16rpx]"
-            v-if="item['rankDiff'] > 0"
-          />
-          <img
-            v-else
-            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAATCAYAAACORR0GAAAAAXNSR0IArs4c6QAAARRJREFUSEu91EFOhDAYhuH370TXHGGOwMaEuNJM4jnKCYwnEE4yeAoTE0LcsZwb6BE8wFC1OBBGO6UmZboikPTJ9/Uvkj3rtbqkMUqK9nb7xEJLrmv9Bqzt/kaJXgqTrNZawXYIshQmFjgH1kPnwEboP9jVi05XkLZ3VRU6O0dQCGaRixUNkBgo2k1VhmB/IB82RcbhCcSckBMzlEpxb5MckI/hOSTZSciFTVLkXcduqLC/gzPJvJAzGeTt5mcIflfpw2ah6YYGHgZkSBeKBUFzU+XDslo/YniNAp2q0b5XUNCRR4Nc2NiEoYwKebAqOmTPpK/reMU7o8NVcCH203vURDeNTvZ7UhGS7pMUIUFI5ftv8gVvqo+bwdfwaAAAAABJRU5ErkJggg=="
-            alt="rankDiff"
-            class="w-[16rpx] h-[16rpx]"
-          />
-        </div>
-        <div v-else>
-          {{ item[col.key] }}
-        </div>
-      </td>
-    </tr>
-  </tbody>
-</table>
+    <!-- Table Body -->
+    <tbody>
+      <tr v-for="(item, index) in recompileData" :key="index" class="text-[24rpx] text-[#505050] border-t border-[#EDEDED]">
+        <td v-for="(col, colIndex) in columns" :key="colIndex" :style="{ width: col.width }" class="px-[8rpx] py-[12rpx]">
+          <div v-if="col.key === 'lineDiff'">
+            {{ item["lineDiff"] }}
+          </div>
+          <div class="flex items-center gap-[8rpx]" v-else-if="col.key === 'rankDiff'">
+            {{ item["rankDiff"] }}
+            <img
+              src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAATCAYAAACORR0GAAAAAXNSR0IArs4c6QAAATlJREFUSEu11eFNwzAQBeB3gQEyAIV2g67QDewJgBGYgHYCRmhH8AbABHSDRhSJvxmA5sEFtTKuk7jIza9EivP57l0SQcZjY8z0ApgSGAtwI0ApInpdSkYH78bcicjy6JnkOiukQAwj8Jod+rD29qd1K78qkqusUAxRsCEX2aAQIXmviGam58mQTtTEuXVseGLItXNt+zSzAkgbhq0xjxCZg5yPnFv4WB/i3zdY0QHZr/KwAKlB2pFzL7Gqe6EjxMNEpPKmqxZydtXR2jarrhc2QGoNtBB50rc+WDOIdEIhst/tpzHjncizhyUhUagL2VfhYeVQuzqHYQj5gwFlXyZhJIeMUpH/foRb6NxIm5GPEKgK0p7SktQKZWvtG35/VtWOnE2cq1IXn3KfbIwpL4ti+dU0D+dCdEPf+I3M1u2H9e8AAAAASUVORK5CYII="
+              alt="rankDiff"
+              class="w-[16rpx] h-[16rpx]"
+              v-if="item['rankDiff'] > 0" />
+            <img
+              v-else
+              src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAATCAYAAACORR0GAAAAAXNSR0IArs4c6QAAARRJREFUSEu91EFOhDAYhuH370TXHGGOwMaEuNJM4jnKCYwnEE4yeAoTE0LcsZwb6BE8wFC1OBBGO6UmZboikPTJ9/Uvkj3rtbqkMUqK9nb7xEJLrmv9Bqzt/kaJXgqTrNZawXYIshQmFjgH1kPnwEboP9jVi05XkLZ3VRU6O0dQCGaRixUNkBgo2k1VhmB/IB82RcbhCcSckBMzlEpxb5MckI/hOSTZSciFTVLkXcduqLC/gzPJvJAzGeTt5mcIflfpw2ah6YYGHgZkSBeKBUFzU+XDslo/YniNAp2q0b5XUNCRR4Nc2NiEoYwKebAqOmTPpK/reMU7o8NVcCH203vURDeNTvZ7UhGS7pMUIUFI5ftv8gVvqo+bwdfwaAAAAABJRU5ErkJggg=="
+              alt="rankDiff"
+              class="w-[16rpx] h-[16rpx]" />
+          </div>
+          <div v-else>
+            {{ item[col.key] }}
+          </div>
+        </td>
+      </tr>
+    </tbody>
+  </table>
 
+  <dialog ref="myDialog">
+    <h1 class="text-[36rpx] text-[#000] font-700 mt-[40rpx] mb-[34rpx] text-center">{{ title }}</h1>
+    <p class="text-[#333] text-[28rpx] px-[32rpx]">{{ tipContent }}</p>
+    <div class="flex items-center justify-center py-[32rpx] border-t-[#EDEDED] border-t-solid border-t-[2rpx]">
+      <button @click="handleCloseModal" class="text-[#1580FF] border-none bg-[unset] text-[36rpx] outline-none">确认</button>
+    </div>
+  </dialog>
 </template>
 
 <script lang="ts" setup>
@@ -75,6 +66,7 @@
     },
   });
 
+  const myDialogRef = useTemplateRef("myDialog")
   const columns = ref([
     { label: "年份", key: "year", width: "62rpx" },
     { label: "录取", key: "planCount", width: "54rpx" },
@@ -97,4 +89,40 @@
     });
     return _data;
   });
+
+  const title = ref('')
+  const tipContent = ref("")
+
+  const showToast = (type: number) => {
+
+    if (type === 1) {
+      title.value = "线差";
+      tipContent.value = "根据志愿历年最低分 - 当前批次线的差值得出，线差可为填报提供参考。";
+    } else if (type === 2) {
+      title.value = "历年位次差";
+      tipContent.value = "根据考生历年的等效位次 - 志愿历年录取位次的差值得出，位次差可更准确的与历年位次进行比较。";
+    }
+    myDialogRef.value?.showModal()
+    // uni.showModal({
+    //   title: title,
+    //   content: tipContent,
+    //   showCancel: false,
+    //   confirmColor: "#1580FF",
+    // });
+  };
+
+  const handleCloseModal = () => {
+    myDialogRef.value?.close()
+  }
 </script>
+
+<style lang="scss" scoped>
+dialog{
+  border: 1px solid transparent !important;
+  border-radius: 12px !important;
+  margin-left: 10%;
+  margin-right: 10%;
+  padding:0;
+
+}
+</style>