1111

src/styles/view/datav.scss

@@ -122,8 +122,12 @@
             .hc-datav-table .hc-datav-table-main {
                 .el-table.top-table {
                     width: 100%;
-                    height: 40px;
+                    height: 100%;
+                    --el-table-bg-color: transparent;
                     --el-table-border-color: #59647A;
+                    --el-table-tr-bg-color: #1e3353;
+                    --el-table-text-color: #7fcedd;
+                    --el-table-row-hover-bg-color: #0f203a;
                     .el-table__cell {
                         background: #1e3353;
                         color: #7fcedd;
@@ -131,31 +135,11 @@
                         height: 40px;
                         padding: 0;
                     }
-                    .el-table__body-wrapper {
-                        display: none !important;
-                    }
                     .cell {
                         padding: 0;
                         line-height: unset;
                     }
                 }
-                .seamless {
-                    position: relative;
-                    width: 100%;
-                    height: calc(100% - 40px);
-                    overflow: hidden;
-                }
-                .el-table.bottom-table {
-                    width: 100%;
-                    --el-table-border-color: #59647A;
-                    --el-table-tr-bg-color: #1e3353;
-                    --el-table-text-color: #7fcedd;
-                    --el-table-row-hover-bg-color: #0f203a;
-                    .el-table__header-wrapper {
-                        display: none !important;
-                        width: 100%;
-                    }
-                }
             }
         }
         .hc-datav-row-charts {

src/views/home/datav.vue

@@ -216,7 +216,7 @@
 </template>
 
 <script setup>
-import { nextTick, onMounted, ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import router from '~src/router/index'
 import { useAppStore } from '~src/store'
 import bgPng from '~src/assets/images/datav-bg.png'
@@ -235,9 +235,9 @@ const searchRef = ref(null)
 const tourOpen = ref(false)
 
 onMounted(() => {
-    setTimeout(() => {
+    /*setTimeout(() => {
         tourOpen.value = true
-    }, 500)
+    }, 500)*/
 })
 
 //关闭引导提示

src/views/home/modules/table1.vue

@@ -1,38 +1,29 @@
 <template>
     <div class="hc-datav-table-main hc-full">
-        <el-table class="top-table tablebox" :data="tableData" border>
+        <el-table ref="tableRef" class="top-table tablebox" :data="tableData" border @mouseover="clearScroll" @mouseleave="createScroll">
             <el-table-column prop="key1" label="项目阶段" align="center" />
             <el-table-column prop="key2" label="项目类型" align="center" />
-            <el-table-column prop="key3" label="计划总投资" align="center" />
-            <el-table-column prop="key4" label="实际已投资" align="center" />
-            <el-table-column prop="key5" label="未完成投资" align="center" />
+            <el-table-column prop="key3" label="计划总投资" align="center">
+                <template #default="scope">
+                    <span style="color: #06A3FF;" class="font-bold">{{ scope.row.key3 }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column prop="key4" label="实际已投资" align="center">
+                <template #default="scope">
+                    <span style="color: #10C90F;" class="font-bold">{{ scope.row.key4 }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column prop="key5" label="未完成投资" align="center">
+                <template #default="scope">
+                    <span style="color: #D7A70D;" class="font-bold">{{ scope.row.key5 }}</span>
+                </template>
+            </el-table-column>
         </el-table>
-        <vue3-seamless-scroll class="seamless tablebox" :list="tableData" :hover="true" :limit-scroll-num="8" :step="0.4" :wheel="true" :is-watch="true">
-            <el-table class="bottom-table" :data="tableData" border>
-                <el-table-column prop="key1" label="项目阶段" align="center" />
-                <el-table-column prop="key2" label="项目类型" align="center" />
-                <el-table-column prop="key3" label="计划总投资" align="center">
-                    <template #default="scope">
-                        <span style="color: #06A3FF;" class="font-bold">{{ scope.row.key3 }}</span>
-                    </template>
-                </el-table-column>
-                <el-table-column prop="key4" label="实际已投资" align="center">
-                    <template #default="scope">
-                        <span style="color: #10C90F;" class="font-bold">{{ scope.row.key4 }}</span>
-                    </template>
-                </el-table-column>
-                <el-table-column prop="key5" label="未完成投资" align="center">
-                    <template #default="scope">
-                        <span style="color: #D7A70D;" class="font-bold">{{ scope.row.key5 }}</span>
-                    </template>
-                </el-table-column>
-            </el-table>
-        </vue3-seamless-scroll>
     </div>
 </template>
 
 <script setup>
-import { ref, watch } from 'vue'
+import { onMounted, onUnmounted, ref, watch } from 'vue'
 
 //参数
 const props = defineProps({
@@ -47,4 +38,34 @@ const tableData = ref(props.datas)
 watch(() => props.datas, (val) => {
     tableData.value = val
 }, { deep: true })
+
+let timer = null
+const tableRef = ref(null)
+
+const clearScroll = () => {
+    clearInterval(timer)
+    timer = null
+}
+const createScroll = () => {
+    clearScroll()
+    // 拿到 table
+    const table = tableRef.value.layout.table.refs
+    // 拿到可以滚动的元素
+    const wrapper = table.bodyWrapper.firstElementChild.firstElementChild
+
+    timer = setInterval(() => {
+        wrapper.scrollTop += 1
+        // 判断是否滚动到底部，如果到底部了置为0（可视高度 + 距离顶部 = 整个高度）
+        if (wrapper.clientHeight + wrapper.scrollTop === wrapper.scrollHeight) {
+            wrapper.scrollTop = 0
+        }
+    }, 50)
+}
+
+onMounted(() => {
+    createScroll()
+})
+onUnmounted(() => {
+    clearScroll()
+})
 </script>

src/views/home/modules/table2.vue

@@ -1,44 +1,34 @@
 <template>
     <div class="hc-datav-table-main hc-full">
-        <el-table class="top-table tablebox" :data="tableData" border>
+        <el-table ref="tableRef" class="top-table tablebox" :data="tableData" border @mouseover="clearScroll" @mouseleave="createScroll">
             <el-table-column prop="key1" label="项目阶段" align="center" />
             <el-table-column prop="key2" label="项目类型" align="center" />
-            <el-table-column prop="key3" label="计划项目" align="center" />
-            <el-table-column prop="key4" label="未制定计划项目" align="center" />
-            <el-table-column prop="key5" label="按计划完成项目" align="center" />
-            <el-table-column prop="key6" label="未按计划完成项目" align="center" />
+            <el-table-column prop="key3" label="计划项目" align="center">
+                <template #default="scope">
+                    <span style="color: #FF0606;" class="font-bold">{{ scope.row.key3 }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column prop="key4" label="未制定计划项目" align="center">
+                <template #default="scope">
+                    <span style="color: #D7A70D;" class="font-bold">{{ scope.row.key4 }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column prop="key5" label="按计划完成项目" align="center">
+                <template #default="scope">
+                    <span style="color: #06A3FF;" class="font-bold">{{ scope.row.key5 }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column prop="key6" label="未按计划完成项目" align="center">
+                <template #default="scope">
+                    <span style="color: #10C90F;" class="font-bold">{{ scope.row.key6 }}</span>
+                </template>
+            </el-table-column>
         </el-table>
-        <vue3-seamless-scroll class="seamless tablebox" :list="tableData" :hover="true" :limit-scroll-num="8" :step="0.4" :wheel="true" :is-watch="true">
-            <el-table class="bottom-table" :data="tableData" border style="width: 100%;">
-                <el-table-column prop="key1" label="项目阶段" align="center" />
-                <el-table-column prop="key2" label="项目类型" align="center" />
-                <el-table-column prop="key3" label="计划项目" align="center">
-                    <template #default="scope">
-                        <span style="color: #FF0606;" class="font-bold">{{ scope.row.key3 }}</span>
-                    </template>
-                </el-table-column>
-                <el-table-column prop="key4" label="未制定计划项目" align="center">
-                    <template #default="scope">
-                        <span style="color: #D7A70D;" class="font-bold">{{ scope.row.key4 }}</span>
-                    </template>
-                </el-table-column>
-                <el-table-column prop="key5" label="按计划完成项目" align="center">
-                    <template #default="scope">
-                        <span style="color: #06A3FF;" class="font-bold">{{ scope.row.key5 }}</span>
-                    </template>
-                </el-table-column>
-                <el-table-column prop="key6" label="未按计划完成项目" align="center">
-                    <template #default="scope">
-                        <span style="color: #10C90F;" class="font-bold">{{ scope.row.key6 }}</span>
-                    </template>
-                </el-table-column>
-            </el-table>
-        </vue3-seamless-scroll>
     </div>
 </template>
 
 <script setup>
-import { ref, watch } from 'vue'
+import { onMounted, onUnmounted, ref, watch } from 'vue'
 
 //参数
 const props = defineProps({
@@ -53,4 +43,35 @@ const tableData = ref(props.datas)
 watch(() => props.datas, (val) => {
     tableData.value = val
 }, { deep: true })
+
+
+let timer = null
+const tableRef = ref(null)
+
+const clearScroll = () => {
+    clearInterval(timer)
+    timer = null
+}
+const createScroll = () => {
+    clearScroll()
+    // 拿到 table
+    const table = tableRef.value.layout.table.refs
+    // 拿到可以滚动的元素
+    const wrapper = table.bodyWrapper.firstElementChild.firstElementChild
+
+    timer = setInterval(() => {
+        wrapper.scrollTop += 1
+        // 判断是否滚动到底部，如果到底部了置为0（可视高度 + 距离顶部 = 整个高度）
+        if (wrapper.clientHeight + wrapper.scrollTop === wrapper.scrollHeight) {
+            wrapper.scrollTop = 0
+        }
+    }, 50)
+}
+
+onMounted(() => {
+    createScroll()
+})
+onUnmounted(() => {
+    clearScroll()
+})
 </script>