1111

package.json

@@ -43,6 +43,7 @@
         "sass": "^1.72.0",
         "unocss": "^0.58.7",
         "unocss-preset-extra": "^0.5.3",
-        "vite": "^4.5.0"
+        "vite": "^4.5.0",
+        "vue3-seamless-scroll": "^2.0.1"
     }
 }

src/components/install.js

@@ -14,6 +14,8 @@ import 'hc-vue3-ui/scss'
 import '../styles/app/main.scss'
 import '../styles/app/element.scss'
 
+import vue3SeamlessScroll from 'vue3-seamless-scroll'
+
 //注册全局组件
 export const setupInstall = (App) => {
     // 饿了么UI框架
@@ -22,4 +24,6 @@ export const setupInstall = (App) => {
     })
     // hc-vue3-ui
     App.use(HcVue3UI, website)
+
+    App.use(vue3SeamlessScroll)
 }

src/styles/view/datav.scss

@@ -112,6 +112,50 @@
                     }
                 }
             }
+            .hc-datav-divider {
+                margin: 18px 0;
+            }
+            .hc-datav-table {
+                height: calc(100% - 240px);
+                overflow: hidden;
+            }
+            .hc-datav-table .hc-datav-table-main {
+                .el-table.top-table {
+                    width: 100%;
+                    height: 40px;
+                    --el-table-border-color: #59647A;
+                    .el-table__cell {
+                        background: #1e3353;
+                        color: #7fcedd;
+                        font-weight: unset;
+                        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 {
+                    --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 {
             .row-charts {

src/views/home/datav.vue

@@ -104,6 +104,10 @@
                                 </hc-col>
                             </hc-row>
                         </div>
+                        <div class="hc-datav-divider" />
+                        <div class="hc-datav-table relative">
+                            <HcDatavTable1 :datas="tableData1" />
+                        </div>
                     </div>
                 </el-col>
                 <el-col :span="8" class="h-full">
@@ -191,6 +195,10 @@
                                 </hc-col>
                             </hc-row>
                         </div>
+                        <div class="hc-datav-divider" />
+                        <div class="hc-datav-table relative">
+                            <HcDatavTable2 :datas="tableData2" />
+                        </div>
                     </div>
                 </el-col>
             </el-row>
@@ -206,6 +214,8 @@ import bgPng from '~src/assets/images/datav-bg.png'
 import png2 from '~src/assets/images/datav-2.png'
 import HcDatavSelect from './modules/select.vue'
 import HcDatavCard from './modules/card.vue'
+import HcDatavTable1 from './modules/table1.vue'
+import HcDatavTable2 from './modules/table2.vue'
 
 const store = useAppStore()
 
@@ -221,6 +231,22 @@ const levelArr = [{ id: '1', name: '一级' }, { id: '2', name: '二级' }, { id
 const stageArr = [{ id: '1', name: '项目阶段' }, { id: '2', name: '在建项目' }, { id: '3', name: '新开工项目' }, { id: '4', name: '建成项目' }]
 const typeArr = [{ id: '1', name: '公路' }, { id: '2', name: '水利' }, { id: '3', name: '房建' }, { id: '4', name: '铁路' }]
 
+//表格1
+const tableData1 = ref([
+    { key1: '在建项目', key2: '铁路', key3: '12000', key4: '12000', key5: 2000 },
+    { key1: '在建项目', key2: '民航', key3: '12000', key4: '12000', key5: 2000 },
+    { key1: '在建项目', key2: 'xx', key3: '12000', key4: '12000', key5: 2000 },
+    { key1: '在建项目', key2: 'xx', key3: '12000', key4: '12000', key5: 2000 },
+])
+
+//表格2
+const tableData2 = ref([
+    { key1: '在建项目', key2: '铁路', key3: '12', key4: '12', key5: 12, key6: 12 },
+    { key1: '在建项目', key2: '民航', key3: '12', key4: '12', key5: 12, key6: 12 },
+    { key1: '在建项目', key2: 'xx', key3: '12', key4: '12', key5: 12, key6: 12 },
+    { key1: '在建项目', key2: 'xx', key3: '12', key4: '12', key5: 12, key6: 12 },
+])
+
 //跳转到首页
 const toHomePage = () => {
     router.push({ name: store.home })

src/views/home/modules/table1.vue

@@ -0,0 +1,53 @@
+<template>
+    <div class="hc-datav-table-main hc-full">
+        <el-table class="top-table tablebox" :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" />
+            <el-table-column prop="key4" label="实际已投资" align="center" />
+            <el-table-column prop="key5" label="未完成投资" align="center" />
+        </el-table>
+        <vue3-seamless-scroll
+            class="seamless tablebox" :list="tableData" :hover="true"
+            :limit-scroll-num="6" :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: #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'
+
+//参数
+const props = defineProps({
+    datas: {
+        type: Array,
+        default: () => ([]),
+    },
+})
+
+//监听
+const tableData = ref(props.datas)
+watch(() => props.datas, (val) => {
+    tableData.value = val
+}, { deep: true })
+</script>

src/views/home/modules/table2.vue

@@ -0,0 +1,59 @@
+<template>
+    <div class="hc-datav-table-main hc-full">
+        <el-table class="top-table tablebox" :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" />
+            <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>
+        <vue3-seamless-scroll
+            class="seamless tablebox" :list="tableData" :hover="true"
+            :limit-scroll-num="6" :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'
+
+//参数
+const props = defineProps({
+    datas: {
+        type: Array,
+        default: () => ([]),
+    },
+})
+
+//监听
+const tableData = ref(props.datas)
+watch(() => props.datas, (val) => {
+    tableData.value = val
+}, { deep: true })
+</script>

yarn.lock

@@ -2871,6 +2871,11 @@ text-table@^0.2.0:
   resolved "http://39.108.216.210:9000/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
   integrity sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==
 
+throttle-debounce@5.0.0:
+  version "5.0.0"
+  resolved "http://39.108.216.210:9000/throttle-debounce/-/throttle-debounce-5.0.0.tgz#a17a4039e82a2ed38a5e7268e4132d6960d41933"
+  integrity sha512-2iQTSgkkc1Zyk0MeVrt/3BvuOXYPl/R8Z0U2xxo9rjwNciaHDG3R+Lm6dh4EeUci49DanvBnuqI6jshoQQRGEg==
+
 to-fast-properties@^2.0.0:
   version "2.0.0"
   resolved "http://39.108.216.210:9000/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
@@ -3022,6 +3027,13 @@ vue-router@^4.3.0:
   dependencies:
     "@vue/devtools-api" "^6.5.1"
 
+vue3-seamless-scroll@^2.0.1:
+  version "2.0.1"
+  resolved "http://39.108.216.210:9000/vue3-seamless-scroll/-/vue3-seamless-scroll-2.0.1.tgz#7b2d44afe94d545a2fe4affe8f81b884fc713268"
+  integrity sha512-mI3BaDU3pjcPUhVSw3/xNKdfPBDABTi/OdZaZqKysx4cSdNfGRbVvGNDzzptBbJ5S7imv5T55l6x/SqgnxKreg==
+  dependencies:
+    throttle-debounce "5.0.0"
+
 vue@3.4.21:
   version "3.4.21"
   resolved "http://39.108.216.210:9000/vue/-/vue-3.4.21.tgz#69ec30e267d358ee3a0ce16612ba89e00aaeb731"