From a795fd4c7e12eb222ca92f37164107fc855c3ffb Mon Sep 17 00:00:00 2001
From: hongxilin <17663930442@163.com>
Date: Mon, 6 Jan 2025 10:22:54 +0800
Subject: [PATCH] =?UTF-8?q?=E6=89=B9=E9=87=8F=E5=85=85=E5=80=BC=E8=BE=93?=
 =?UTF-8?q?=E5=85=A5=E7=B2=BE=E7=BD=91=E5=8F=B7=E7=9A=84=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vue/gold-system/src/router/index.js                |   2 +-
 vue/gold-system/src/views/login.vue                |   2 +-
 vue/gold-system/src/views/recharge/addRecharge.vue |  92 +++++++----
 vue/gold-system/src/views/z.vue                    | 181 ++++++++++++---------
 4 files changed, 160 insertions(+), 117 deletions(-)

diff --git a/vue/gold-system/src/router/index.js b/vue/gold-system/src/router/index.js
index e951857..0c8fc72 100644
--- a/vue/gold-system/src/router/index.js
+++ b/vue/gold-system/src/router/index.js
@@ -4,7 +4,7 @@ const router=createRouter({
     history:createWebHashHistory(),
     routes:[
         {path:'/login', name:"login", component:()=>import("../views/login.vue")},
-        {path:'/',redirect:"/workspace"},
+        {path:'/',redirect:"/login"},
         {path:'/test',component:()=>import("../views/z.vue")},
         {
             meta:{requireAuth:true},
diff --git a/vue/gold-system/src/views/login.vue b/vue/gold-system/src/views/login.vue
index bc409fd..73cf936 100644
--- a/vue/gold-system/src/views/login.vue
+++ b/vue/gold-system/src/views/login.vue
@@ -21,7 +21,7 @@ const login = async function () {
     );
     if (result.data.code == 200) {
       localStorage.setItem("token", result.data.msg);
-      router.push("/");
+      router.push("/workspace");
       ElMessage.success("登录成功");
       console.log("请求成功", result);
     } else {
diff --git a/vue/gold-system/src/views/recharge/addRecharge.vue b/vue/gold-system/src/views/recharge/addRecharge.vue
index eefe256..e45a225 100644
--- a/vue/gold-system/src/views/recharge/addRecharge.vue
+++ b/vue/gold-system/src/views/recharge/addRecharge.vue
@@ -373,48 +373,68 @@ const addLine = function () {
 };
 const loading = ref(false);
 // 添加多行
-// const addLines = async function () {
-//   try {
-//     for (let j = 0; j < addLineObj.value; j++) {
-//       batchData.value.unshift({
-//         line: ++i.value,
-//         showInput: true,
-//       });
-//     }
-//     ElMessage.success("添加成功");
-//   } catch (error) {
-//     console.log("添加失败", error);
-//     ElMessage.error("添加失败");
-//   }
-// }
-
-// 添加多行点击按钮
 const addLines = async function () {
   try {
-    // loading.value = true; // 操作开始前，将loading设为true，显示加载动画
-    // console.log(loading.value, "loading.value");
+    loading.value = true; // 操作开始前，将loading设为true，显示加载动画
+    console.log(loading.value, "loading.value")
 
-    const newItems = Array.from({ length: addLineObj.value }, (_, index) => reactive({
-      line: ++i.value,
-      showInput: true,
-      isInputInvalid: false,
-      inputErrorMessage: '',
-      freeGold: "0",
-      rechargeGold: "0",
-      paidGold: "0",
-    }));
-    batchData.value = [...newItems, ...batchData.value];
+    await new Promise(resolve => setTimeout(resolve, 100)); // 人为创建一个小延迟
 
+    for (let j = 0; j < addLineObj.value; j++) {
+      batchData.value.unshift({
+        line: ++i.value,
+        showInput: true,
+        isInputInvalid: false,
+        inputErrorMessage: '',
+        freeGold: "0",
+        rechargeGold: "0",
+        paidGold: "0",
+      });
+    }
     ElMessage.success("添加成功");
-    // loading.value = false; // 将loading设为false，关闭加载动画
+    console.log(batchData.value, "batchData.value");
   } catch (error) {
     console.log("添加失败", error);
     ElMessage.error("添加失败");
-    // 如果出现异常，也要确保关闭加载动画
-    // loading.value = false;
+  } finally {
+    loading.value = false;
+    console.log(loading.value, "loading.value")
   }
-};
+}
+// 添加多行点击按钮
+// const addLines = async function () {
+//   try {
+
+//     loading.value = true; // 操作开始前，将loading设为true，显示加载动画
+//     console.log(loading.value, "loading.value")
+
+//     await new Promise(resolve => setTimeout(resolve, 100)); // 人为创建一个小延迟
+
+//     const newItems = Array.from({ length: addLineObj.value }, (_, index) => reactive({
+//       line: ++i.value,
+//       showInput: true,
+//       isInputInvalid: false,
+//       inputErrorMessage: '',
+//       freeGold: "0",
+//       rechargeGold: "0",
+//       paidGold: "0",
+//     }));
+//     batchData.value = [...newItems, ...batchData.value];
+//     ElMessage.success("添加成功");
 
+//     console.log(batchData.value, "batchData.value");
+
+//     loading.value = false;
+//     console.log(loading.value, "loading.value")
+//   } catch (error) {
+//     console.log("添加失败", error);
+//     ElMessage.error("添加失败");
+//     // 如果出现异常，也要确保关闭加载动画
+//     loading.value = false;
+//   }
+// };
+// 使用 _.throttle 并设置 trailing 为 false 实现严格节流，只执行一次
+const throttledAddLines = _.throttle(addLines, 500, { trailing: false });
 // 导入excel按钮的ref
 const uploadRefMap = ref({});
 // 获取excel数据
@@ -967,7 +987,7 @@ onMounted(async function () {
         <span>添加</span>
         <el-input-number min="1" style="width: 100px;" controls-position="right" v-model="addLineObj"></el-input-number>
         <span>行</span>
-        <el-button type="primary" @click="addLines" style="margin-right: 10px">添加</el-button>
+        <el-button type="primary" @click="throttledAddLines" style="margin-right: 10px">添加</el-button>
       </div>
       <el-button type="warning" @click="batchSettingInit()" style="margin-right: 10px">批量设置</el-button>
       <!-- <el-upload :ref="(el) => handleSetUploadRefMap(el)" action="" :http-request="httpExcelRequest" :limit="1" :show-file-list="false"
@@ -977,8 +997,8 @@ onMounted(async function () {
       <el-button type="danger" plain @click="batchDel()" style="margin-right: 10px; width: 130px">批量删除</el-button>
     </el-row>
     <el-row>
-      <el-table :data="batchData" border max-height="540px" style="height: 540px"
-        @selection-change="handleSelectionChangebatch">
+      <el-table id="batchTable" v-loading="loading" :data="batchData" border
+        max-height="540px" style="height: 540px" @selection-change="handleSelectionChangebatch">
         <el-table-column type="selection" width="50px" />
         <el-table-column property="index" label="序号" width="55px">
           <template #default="scope">
@@ -1200,7 +1220,7 @@ p {
 <style>
 .error-message {
   color: red;
-  font-size: 12px;
+  font-size: 8px;
 }
 
 .is-invalid .el-input__inner {
diff --git a/vue/gold-system/src/views/z.vue b/vue/gold-system/src/views/z.vue
index e6bacc9..8e482c4 100644
--- a/vue/gold-system/src/views/z.vue
+++ b/vue/gold-system/src/views/z.vue
@@ -1,107 +1,130 @@
 <script setup>
-import { all } from 'axios';
-import * as echarts from 'echarts';
-import { ref, onMounted, reactive, computed } from "vue";
-import { VscInfo } from 'vue-icons-plus/vsc'
-import { Bs1CircleFill, Bs2CircleFill, Bs3CircleFill, Bs4Circle, Bs5Circle, Bs6Circle, Bs7Circle, Bs8Circle } from 'vue-icons-plus/bs'
-import axios from 'axios';
+import { ref, onMounted, reactive, computed, nextTick } from "vue";
 
 // 变量
-const option4Data = ref([]);
-const a1=ref(1000);
-const a2=ref(2000);
-const a3=ref(3000);
-const a4=ref(4000);
+let allData = []
+let tableData = []
+let elTableHeight = 0  //el-table的高度
+let theadHeight = 0  //表头的高度
+let contentHeight = 0 //主要内容高度
+let showRowCount = 0 //一共能显示多少行 
+let falseBox = 0  //后边假盒子的高度
+let scollBoxHeight = 0 //假滚动条的高度
+let scrollTopRowCount = 0 //一共向上滚动了多少行
+
+// 方法
 onMounted(async function () {
-    option4Data.value = [
-        { value: a1.value, name: '1000金币' },
-        { value: a2.value, name: '2000金币' },
-        { value: a3.value, name: '3000金币' },
-        { value: a4.value, name: '4000金币' },
-    ];
-    // 第一个柱状图 基于准备好的dom，初始化echarts实例
-    var rechargeBar = echarts.init(document.getElementById('main'));
-
-    const option = {
-        tooltip: {
-            trigger: 'item'
-        },
-        legend: {
-            bottom: '-2%',
-            left: 'center',
-            orient: 'vertical'
-        },
-        grid: {
-            top: '0%', // 设置图表距离容器顶部的距离为10%，使饼图上移
-        },
-        series: [
-            {
-                name: '全年累计消耗金币数(个)\n10000',
-                type: 'pie',
-                radius: ['80%', '60%'],
-                avoidLabelOverlap: false,
-                label: {
-                    show: true,
-                    position: 'center',
-                    formatter: '{a}',
-                    fontSize: 15,
-                    fontWeight: 'bold'
-                },
-                labelLine: {
-                    show: false
-                },
-                data: option4Data.value,
-                color: ['#57a5ff', '#7f29ff', '#f2d113']
-            }
-        ]
-    };
-    // 使用刚指定的配置项和数据显示图表。
-    rechargeBar.setOption(option);
-})
+    allData = [];
+    for (let i = 0; i < 10000; i++) {
+        allData.push({
+            name: '张三' + i,
+            age: 20 + i,
+            address: '北京市海淀区' + i,
+            salary: 50000 + i,
+            date: '2022-01-01'
+        })
+    }
+    scollBoxHeight = 45 * allData.length + 45; //多加一行，要不然滚动到底差一行
+    await new Promise(resolve => setTimeout(resolve, 100)); // 人为创建一个小延迟
+    nextTick(() => {
+        elTableHeight = document.querySelector('.table-box .el-table').offsetHeight;
+        theadHeight = document.querySelector('.table-box .el-table__header-wrapper').offsetHeight;
+        contentHeight = elTableHeight - theadHeight;
+        showRowCount = Math.floor(contentHeight / 45);
+        // 获取默认显示的前 <showRowCount> 条
+        tableData = JSON.parse(JSON.stringify(allData)).splice(0, showRowCount);
+    })
+    falseBox = document.querySelector('.false-box');
+    falseBox.addEventListener('scroll', function (e) {
+        scrollTopRowCount = Math.ceil(e.target.scrollTop / 45);
+        // 获取从索引<scrollTopRowCount> 开始 <showRowCount> 条
+        tableData = JSON.parse(JSON.stringify(allData)).splice(scrollTopRowCount, showRowCount);
+    });
+    console.log(allData)
+    console.log(elTableHeight)
+    console.log(theadHeight)
+    console.log(contentHeight)
+    console.log(showRowCount)
+    console.log(falseBox)
+    console.log(scollBoxHeight)
+    console.log(tableData)
 
-const imgrule = ref('..\assets\韩信.png');
+})
 
 </script>
 
 <template>
-    <div>
-        <el-image :preview-src-list="[imgrule]" preview-teleported="true" src="..\assets\动漫美女.png" alt="美女" style="width: 50px; height: 50px" />
+    <div class="box" style="width: 1000px; height: 500px; overflow: hidden; position: relative;">
+        <!-- false-box这是一个用来显示滚动条的方法 -->
+        <div class="false-box" style="width: 100%; height: 100%; position: absolute; top: 0%; left: 0%; overflow: auto;">
+            <div class="scroll-box" :style="{ 'height': scollBoxHeight + 'px' }">
+                <!-- scroll-box是用来撑起盒子的方法 -->
+            </div>
+        </div>
+        <div class="table-box">
+            <el-table :data="tableData" style="width: 100%">
+                <el-table-column prop="name" label="姓名" width="180">
+                </el-table-column>
+                <el-table-column prop="age" label="年龄" width="180">
+                </el-table-column>
+                <el-table-column prop="address" label="地址">
+                </el-table-column>
+                <el-table-column prop="salary" label="薪资" width="180">
+
+                </el-table-column>
+                <el-table-column prop="date" label="日期" width="180">
+                </el-table-column>
+
+
+            </el-table>
+        </div>
     </div>
-    <div id="main" style="width: 600px;height:400px;"></div>
 </template>
 
 <style scoped>
-.comparedWithYesterday {
-    display: flex;
+.box {
+    width: 1000px;
+    height: 500px;
+    overflow: hidden;
+    position: relative;
 }
 
-.ranking-item {
-    margin-bottom: 10px;
+.box .false-box {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0%;
+    left: 0%;
+    overflow: auto;
 }
 
-.ranking-header {
-    margin-bottom: 10px;
-    display: flex;
+.box .false-box .scroll-box {
+    width: 100%;
+    height: 1000px;
+    position: absolute;
+    top: 0%;
+    left: 0%;
 }
 
-.goldCategory {
-    margin-right: 20px;
-    display: flex;
+.box .table-box {
+    width: calc(100% - 20px);
+    height: 100%;
+    position: absolute;
+    top: 0%;
+    left: 0%;
 }
 
-.bar {
-    display: flex;
-}
 
-.pie {
-    display: flex;
+::v-deep .el-table {
+    width: 100%;
+    height: 100%;
 }
 
-.el-row {
-    margin-bottom: 20px;
+.el-table .el-table__row {
+    height: 45px;
 }
 
-.el-radio-button {
-    border: 1px solid grey;
+.el-table .el-table__row td {
+    padding: 0px
 }
 </style>
\ No newline at end of file