数据汇集管理

src/api/data-collect/data-set-manage.js

@@ -10,10 +10,10 @@ export function getLeftTreeListAPI(data) {
 }
 
 // 获取数据列表接口
-export function getListDataSetAPI(data) {
+export function getListDataSetAPI(query) {
     return request({
         url: '/smartArchives/data/Collect/list',
         method: 'GET',
-        params: data,
+        params: query,
     })
 }

src/components/Breadcrumb/index.vue

@@ -47,7 +47,8 @@ export default {
       }
       // 判断是否为首页
       if (!this.isDashboard(matched[0])) {
-        matched = [{ path: "/index", meta: { title: "首页" } }].concat(matched)
+        // matched = [{ path: "/index", meta: { title: "首页" } }].concat(matched)
+        matched = [{ path: "/index", meta: { title: "" } }].concat(matched)
       }
       this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
     },

src/layout/components/Navbar.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="navbar">
-    <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
+    <!-- <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /> -->
 
     <breadcrumb v-if="!topNav" id="breadcrumb-container" class="breadcrumb-container" />
     <top-nav v-if="topNav" id="topmenu-container" class="topmenu-container" />

src/views/data-collect/data-set-manage/components/left-tree.vue

@@ -14,9 +14,11 @@
                 </el-col>
             </el-row>
 
+            <div class="tree-container">
                 <el-tree ref="leftTreeRef" :data="filteredTreeData" default-expand-all class="left-tree-list"
                     @node-click="onHandleNodeClick" :filter-node-method="filterNode">
                 </el-tree>
+            </div>
         </el-card>
     </div>
 </template>
@@ -102,7 +104,33 @@ export default {
 </script>
 
 <style scoped>
-.left-tree-list {
+.tree-container {
     margin-top: 10px;
+    max-height: calc(100vh - 230px);
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+.left-tree-list {
+    width: 100%;
+}
+
+/* 自定义滚动条样式 */
+.tree-container::-webkit-scrollbar {
+    width: 6px;
+}
+
+.tree-container::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 3px;
+}
+
+.tree-container::-webkit-scrollbar-thumb {
+    background: #c1c1c1;
+    border-radius: 3px;
+}
+
+.tree-container::-webkit-scrollbar-thumb:hover {
+    background: #a8a8a8;
 }
 </style>

src/views/data-collect/data-set-manage/components/right-table.vue

@@ -3,49 +3,27 @@
     <div>
         <el-card style="min-height: calc(100vh - 125px)">
             <!-- 查询 -->
-            <el-form
-                size="small"
-                ref="queryForm"
-                :inline="true"
-                :model="queryParams"
-            >
+            <el-form size="small" ref="queryForm" :inline="true" :model="queryParams">
                 <el-form-item prop="dataTypeName">
-                    <el-input
-                        clearable
-                        placeholder="数据类型名称"
-                        v-model="queryParams.dataTypeName"
-                        @keyup.enter.native="onHandleQuery"
-                    />
+                    <el-input clearable placeholder="搜索" v-model="queryParams.dataTypeName"
+                        @keyup.enter.native="onHandleQuery" />
                 </el-form-item>
 
                 <el-form-item>
-                    <el-button
-                        size="mini"
-                        type="primary"
-                        icon="el-icon-search"
-                        @click="onHandleQuery"
-                    >
+                    <el-button size="mini" type="primary" icon="el-icon-search" @click="onHandleQuery">
                         查询
                     </el-button>
-                    <el-button
-                        size="mini"
-                        icon="el-icon-refresh"
-                        @click="onResetQuery"
-                    >
+                    <el-button size="mini" icon="el-icon-refresh" @click="onResetQuery">
                         重置
                     </el-button>
                 </el-form-item>
             </el-form>
 
             <!-- 表格 -->
-            <el-table :data="tableData" border>
-                <el-table-column
-                    align="center"
-                    :key="column.prop"
-                    :prop="column.prop"
-                    :label="column.label"
-                    v-for="column in columns"
-                />
+            <el-table :data="filteredTableData" border :height="tableHeight" style="width: 100%">
+                <el-table-column v-if="tableData && tableData.length" type="index" label="序号" width="60" align="center" />
+                <el-table-column align="center" :key="column.prop" :prop="column.prop" :label="column.label"
+                    v-for="column in columns" />
             </el-table>
         </el-card>
     </div>
@@ -68,47 +46,111 @@ export default {
             },
             tableData: [],
             columns: [],
+            tableHeight: 400,
+            filteredManual: null,
         }
     },
+    computed: {
+        // 按第二个字段进行本地过滤
+        filteredTableData() {
+            // 仅在点击“查询”后使用过滤结果；输入变化不自动过滤
+            if (Array.isArray(this.filteredManual)) return this.filteredManual
+            return this.tableData
+        },
+    },
     methods: {
-        // 查询
+        // 查询：按第一列字段做模糊匹配
         onHandleQuery() {
-            console.log(this.queryParams)
+            if (!Array.isArray(this.columns) || this.columns.length < 1) return
+            const targetProp = this.columns[0] && this.columns[0].prop
+            if (!targetProp) return
+            const keyword = String(this.queryParams.dataTypeName || '').trim()
+            if (!keyword) {
+                // 空关键字还原
+                this.filteredManual = null
+                return
+            }
+            // 执行一次性本地过滤
+            const source = Array.isArray(this.tableData) ? this.tableData : []
+            const kw = keyword.toLowerCase()
+            this.filteredManual = source.filter(row => {
+                const val = row && targetProp in row ? row[targetProp] : ''
+                return String(val ?? '').toLowerCase().includes(kw)
+            })
+            // 触发一次高度计算，避免数据量变化造成滚动体验不佳
+            this.computeTableHeight()
         },
 
         // 重置
         onResetQuery() {
-            this.queryParams = {}
+            this.queryParams = { dataTypeName: undefined }
+            this.filteredManual = null
+            this.computeTableHeight()
         },
 
         // 获取数据列表
         async getListDataSetClassFun(node) {
-            const res = await getListDataSetAPI({
-                dataClassifyId: node
-            })
-            console.log(res);
+            const params = {
+                dataClassifyId: node,
+            }
+            const res = await getListDataSetAPI(params)
 
-            // this.tableData = res.rows
-            // this.total = res.total
+            // 安全解析与渲染
+            this.columns = []
+            this.tableData = []
+            if (!res || !Array.isArray(res.rows) || res.rows.length === 0) return
 
-            // 动态添加表格列和数据源
+            const firstRow = res.rows[0]
+            if (!firstRow || !firstRow.dataJson) return
 
-            /* const num = Math.floor(Math.random() * 6) + 1
-            const num2 = Math.floor(Math.random() * 6) + 1
-            for (let i = 0; i < num; i++) {
-                this.columns.push({
-                    label: `字段${i + 1}`,
-                    prop: `dataTypeName${i}`,
-                })
+            let dataList = []
+            try {
+                dataList = JSON.parse(firstRow.dataJson)
+            } catch (e) {
+                console.warn('数据集 dataJson 解析失败:', e)
+                return
             }
 
-            for (let i = 0; i < num2; i++) {
+            if (!Array.isArray(dataList) || dataList.length === 0) return
+
+            const [header, ...rows] = dataList
+            if (header && typeof header === 'object') {
+                this.columns = Object.entries(header)
+                    .filter(([prop]) => String(prop).toLowerCase() !== 'id')
+                    .map(([prop, label], index) => ({
+                        label: String(label),
+                        prop: String(prop),
+                        width: index === 0 ? '120' : undefined,
+                        align: index === 0 ? 'left' : 'center',
+                    }))
+            }
+            // 将数据行统一转换为对象行，按 columns 的 prop 顺序映射，确保搜索可用
+            const propOrder = this.columns.map(c => c.prop)
+            this.tableData = rows.map(row => {
+                if (Array.isArray(row)) {
                     const obj = {}
-                for (let j = 0; j < num; j++) {
-                    obj[this.columns[j].prop] = `字段${j + 1}的值`
+                    for (let i = 0; i < propOrder.length; i++) {
+                        obj[propOrder[i]] = row[i]
                     }
-                this.tableData.push(obj)
-            } */
+                    return obj
+                }
+                return row || {}
+            })
+            // 数据变更后重新计算高度
+            this.computeTableHeight()
+        },
+        // 计算表格高度（使用固定 height，滚动更顺滑）
+        computeTableHeight() {
+            this.$nextTick(() => {
+                const topOffset = this.$el ? this.$el.getBoundingClientRect().top : 0
+                const formHeight = this.$refs.queryForm && this.$refs.queryForm.$el
+                    ? this.$refs.queryForm.$el.offsetHeight
+                    : 0
+                // 额外预留：卡片内边距、表格头部等
+                const extra = 100
+                const available = window.innerHeight - topOffset - formHeight - extra
+                this.tableHeight = Math.max(260, available)
+            })
         },
     },
 
@@ -123,5 +165,40 @@ export default {
             immediate: true, // 表示立即执行
         },
     },
+
+    mounted() {
+        const onResize = () => this.computeTableHeight()
+        this.computeTableHeight()
+        window.addEventListener('resize', onResize)
+        this.$once('hook:beforeDestroy', () => {
+            window.removeEventListener('resize', onResize)
+        })
+    },
 }
 </script>
+
+<style scoped>
+/* 加粗表格滚动条 */
+::v-deep .el-table__body-wrapper::-webkit-scrollbar,
+::v-deep .el-table__fixed-body-wrapper::-webkit-scrollbar {
+  width: 10px;  /* 垂直滚动条宽度 */
+  height: 10px; /* 水平滚动条高度 */
+}
+
+::v-deep .el-table__body-wrapper::-webkit-scrollbar-track,
+::v-deep .el-table__fixed-body-wrapper::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 6px;
+}
+
+::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb,
+::v-deep .el-table__fixed-body-wrapper::-webkit-scrollbar-thumb {
+  background: #bfbfbf;
+  border-radius: 6px;
+}
+
+::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb:hover,
+::v-deep .el-table__fixed-body-wrapper::-webkit-scrollbar-thumb:hover {
+  background: #a6a6a6;
+}
+</style>

src/views/login.vue

@@ -178,7 +178,7 @@ export default {
 .login-form {
   border-radius: 6px;
   background: #ffffff;
-  width: 550px;
+  width: 600px;
   // padding: 25px 25px 5px 25px;
   z-index: 1;
   margin-left: 58%;