活动介绍

vue树形表格实现甘特图

时间: 2024-09-09 17:06:46 浏览: 218
Vue树形表格实现甘特图通常需要结合树形数据结构和时间线的展示方式。甘特图是一种常用的项目管理工具,用来表示项目、任务或其他活动的计划进度。在Vue中实现甘特图,可以按照以下步骤: 1. 数据准备:首先需要准备树形数据,这通常是一组具有层级关系的对象数组。每个对象代表甘特图中的一个任务,包含任务的开始时间、结束时间、持续时间、子任务等信息。 2. 组件构建:创建Vue组件,并使用一个表格或自定义的绘图区域来展示数据。表格的每一行代表一个任务,可以使用`<el-table>`或类似的Vue表格组件。 3. 时间轴绘制:在表格的基础上,添加时间轴来展示任务的开始和结束时间。可以使用一个水平滚动的时间轴组件,其中每个任务的条形图根据其持续时间和开始时间在时间轴上定位。 4. 功能实现:实现功能如拖拽调整任务时间、点击任务查看详细信息、任务依赖关系等。这些功能的实现需要额外的JavaScript逻辑来处理用户的交互。 5. 样式定制:通过CSS对甘特图进行样式定制,使得图表的显示符合预期的风格。 一个简单的甘特图实现示例可能如下: ```vue <template> <div> <!-- 树形表格 --> <el-table :data="tasks"> <el-table-column prop="name" label="任务名称"></el-table-column> <el-table-column prop="startDate" label="开始日期"></el-table-column> <el-table-column prop="endDate" label="结束日期"></el-table-column> <!-- 其他需要展示的列 --> </el-table> <!-- 时间轴 --> <div class="gantt-chart"> <div v-for="task in tasks" :key="task.id" class="task-bar" :style="taskStyle(task)"></div> </div> </div> </template> <script> export default { data() { return { tasks: [ // 这里是任务数据,每个任务包含name, startDate, endDate等属性 ] }; }, methods: { taskStyle(task) { // 根据任务的开始和结束时间计算样式 const style = { left: /* 计算左侧位置 */, width: /* 计算宽度 */, background: /* 颜色等其他样式 */ }; return style; } } }; </script> <style> /* 定制甘特图样式 */ .gantt-chart { position: relative; /* 其他样式 */ } .task-bar { position: absolute; /* 其他样式 */ } </style> ```
阅读全文

相关推荐

<template> <el-row :gutter="20"> <el-col :span="24"> <el-form :inline="true" label-width="100px" @submit.prevent="getList"> <el-form-item label="名称"> <el-input v-model="queryParams.name" placeholder="请输入名称" clearable /> </el-form-item> <el-form-item label="责任人"> <el-input v-model="queryParams.respPerson" placeholder="请输入责任人" clearable /> </el-form-item> <el-form-item> <el-button type="primary" @click="getList">查询</el-button> <el-button @click="resetQuery">重置</el-button> <el-button type="primary" @click="toggleGantt" style="margin-left: 10px;" > {{ showGantt ? '收起甘特图' : '展开甘特图' }} </el-button> </el-form-item> </el-form> </el-col> <el-col :span="showGantt ? 12 : 24"> <el-table ref="table" :data="listData" row-key="uid" border :row-style="{ height: '30px' }" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" @row-click="handleRowClick" @expand-change="handleExpandChange" highlight-current-row > <el-table-column prop="code" label="编号" width="120" /> <el-table-column prop="name" label="名称" min-width="180" /> <el-table-column prop="respPerson" label="责任人" width="120" /> <el-table-column prop="schedule" label="完成百分比" width="120"> <template slot-scope="{row}"> <el-progress :percentage="row.schedule" :show-text="row.schedule > 10" :stroke-width="18" :color="getProgressColor(row.schedule)" /> </template> </el-table-column> <el-table-column prop="planStartDate" label="计划开始日期" width="150" /> <el-table-column prop="planEndDate" label="计划结束日期" width="150" /> <el-table-column label="操作" width="100"> <template slot-scope="scope"> <el-button size="mini" icon="el-icon-view" @click.stop="handleUpdate(scope.row)">查看</el-button> </template> </el-table-column> </el-table> </el-col> <el-col v-if="showGantt" :span="12"> </el-col> </el-row> <el-dialog :title="title" :visible.sync="open" width="850px" append-to-body> <el-form ref="form" :model="form" :rules="rules" label-width="100px" :disabled="disable"> <el-row> <el-col :span="12"> <el-form-item label="编号" prop="code"> <el-input v-model="form.code" placeholder="请输入编号" /> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="名称" prop="name"> <el-input v-model="form.name" placeholder="请输入名称" /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="24"> <el-form-item label="备注" prop="remarks"> <el-input v-model="form.remarks" type="textarea" placeholder="请输入备注" rows="3" /> </el-form-item> </el-col> </el-row> <el-button @click="cancel">取 消</el-button> </el-form> </el-dialog> </template> <script> import gantt from 'dhtmlx-gantt'; import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'; import { getPlan, listPlan } from '@/api/dw/plan/planview'; export default { name: 'Planview', data() { return { expandedKeys: new Set(), // 存储所有展开节点的UID listData: [], total: 0, queryParams: { pageNum: 1, pageSize: 1000, // 树形结构不适合分页,增加单页大小 name: null, respPerson: null }, open: false, title: '', form: {}, rules: { name: [{ required: true, message: '名称不能为空', trigger: 'blur' }], schedule: [ { required: true, message: '完成百分比不能为空', trigger: 'blur' }, { type: 'number', message: '输入内容不是有效的数字', trigger: 'blur' } ] }, disable: true, showGantt: true, // 控制甘特图显示 flatData: [], // 扁平化数据 ganttInitialized: false, // 甘特图初始化标志 currentSelectedTask: null, // 当前选中的任务ID ganttExpandState: new Map() // 存储甘特图的展开状态 }; }, mounted() { this.getList(); }, methods: { // 获取进度条颜色 getProgressColor(percentage) { if (percentage < 30) return '#F56C6C'; if (percentage < 70) return '#E6A23C'; return '#67C23A'; }, // 初始化甘特图 initGantt() { if (!this.$refs.ganttContainer) return; try { // 清除之前的实例 if (gantt.$container) { gantt.destructor(); } gantt.config.date_format = "%Y-%m-%d"; // 隐藏网格部分 gantt.config.show_grid = false; gantt.config.grid_width = 0; // 设置时间刻度 gantt.config.scales = [ { unit: "year", step: 1, format: "%Y年" }, { unit: "month", step: 1, format: "%m月" }, { unit: "day", step: 1, format: "%d日" } ]; // 设置刻度高度 gantt.config.scale_height = 40; // 增加高度以容纳更多刻度 // 调整行高与表格一致 gantt.config.row_height = 30; // 自定义刻度模板 gantt.templates.scale_cell_class = function(date, scale) { if (scale.unit === "year") return "year-scale"; if (scale.unit === "month") return "month-scale"; return "day-scale"; }; gantt.templates.task_text = (start, end, task) => task.text; gantt.init(this.$refs.ganttContainer); // 绑定事件 gantt.attachEvent('onTaskSelected', (id) => { this.currentSelectedTask = id; this.scrollToTableRow(id); }); // 绑定展开/折叠事件 gantt.attachEvent('onAfterTaskOpen', (id) => { this.ganttExpandState.set(id, true); this.syncGanttExpandToTable(id, true); }); gantt.attachEvent('onAfterTaskClose', (id) => { this.ganttExpandState.set(id, false); this.syncGanttExpandToTable(id, false); }); // 获取甘特图DOM元素 const ganttDataArea = document.querySelector('.gantt_data_area'); // 监听表格滚动事件 const tableBody = this.$refs.table.$el.querySelector('.el-table__body-wrapper'); if (tableBody) { tableBody.addEventListener('scroll', () => { // 同步垂直滚动 if (ganttDataArea) { ganttDataArea.scrollTop = tableBody.scrollTop; } }); } this.ganttInitialized = true; console.log('甘特图初始化成功'); } catch (e) { console.error('甘特图初始化失败:', e); } }, // 将甘特图的展开状态同步到表格 syncGanttExpandToTable(taskId, expanded) { const row = this.flatData.find(item => item.uid === taskId); if (!row) return; // 更新展开状态 if (expanded) { this.expandedKeys.add(row.uid); } else { this.expandedKeys.delete(row.uid); } // 更新表格UI this.$nextTick(() => { const tableRow = this.$refs.table.$el.querySelector([data-id="${row.uid}"]); if (tableRow) { const expandIcon = tableRow.querySelector('.el-table__expand-icon'); if (expandIcon) { const isExpanded = expandIcon.classList.contains('el-table__expand-icon--expanded'); if (isExpanded !== expanded) { this.$refs.table.toggleRowExpansion(row, expanded); } } } }); }, // 获取数据 async getList() { try { const res = await listPlan(this.queryParams); this.listData = this.handleTree(res.data, 'uid', 'parentUid'); this.flatData = this.flattenTree(this.listData); // 初始展开所有节点 this.expandedKeys = new Set(this.flatData.map(item => item.uid)); this.$nextTick(() => { // 初始化甘特图 if (this.showGantt) { this.initGantt(); this.updateGantt(); } // 展开所有节点 this.expandAllNodes(); }); } catch (error) { console.error('获取数据失败:', error); } }, // 递归展开所有节点 expandAllNodes() { if (!this.$refs.table || !this.listData.length) return; const expandNode = (node) => { this.$refs.table.toggleRowExpansion(node, true); if (node.children && node.children.length) { node.children.forEach(child => expandNode(child)); } }; this.listData.forEach(root => expandNode(root)); }, // 更新甘特图数据 updateGantt() { if (!this.ganttInitialized) return; const tasks = this.getVisibleTasks(); console.log('更新甘特图任务数量:', tasks.length); try { // 保存当前甘特图的展开状态 this.saveGanttExpandState(); gantt.clearAll(); gantt.parse({ data: tasks, links: [] }); // 恢复甘特图的展开状态 this.restoreGanttExpandState(); this.adjustGanttView(tasks); } catch (e) { console.error('更新甘特图失败:', e); } }, // 保存甘特图的展开状态 saveGanttExpandState() { if (!this.flatData.length) return; // 遍历所有任务,保存展开状态 this.flatData.forEach(item => { if (gantt.isTaskExists(item.uid)) { this.ganttExpandState.set(item.uid, gantt.isTaskOpen(item.uid)); } }); }, // 恢复甘特图的展开状态 restoreGanttExpandState() { this.ganttExpandState.forEach((isOpen, taskId) => { if (gantt.isTaskExists(taskId)) { gantt.openTask(taskId, isOpen); } }); }, // 获取当前可见的任务(根据展开状态) getVisibleTasks() { const visibleTasks = []; const collectVisible = (nodes) => { nodes.forEach(node => { visibleTasks.push({ id: node.uid, text: node.name, start_date: node.planStartDate, duration: node.planDuration || 1, progress: (node.schedule || 0) / 100, parent: node.parentUid || 0, open: this.expandedKeys.has(node.uid) // 设置初始展开状态 }); // 如果节点是展开的,递归收集子节点 if (this.expandedKeys.has(node.uid) && node.children) { collectVisible(node.children); } }); }; collectVisible(this.listData); return visibleTasks; }, // 自动调整甘特图视图 adjustGanttView(tasks) { if (!tasks.length) return; // 计算时间范围 const dates = tasks .filter(t => t.start_date) .map(t => new Date(t.start_date)); if (!dates.length) return; const minDate = new Date(Math.min(...dates.map(d => d.getTime()))); const maxDate = new Date(Math.max(...dates.map(t => { const endDate = new Date(t.start_date); endDate.setDate(endDate.getDate() + (t.duration || 0)); return endDate.getTime(); }))); // 设置时间范围 gantt.setWorkTime({ start_date: minDate, end_date: maxDate }); // 不再动态调整缩放级别,使用固定的年月日三级刻度 gantt.render(); }, // 树形结构转扁平结构 flattenTree(data) { const result = []; const stack = [...data]; while (stack.length) { const node = stack.pop(); result.push(node); if (node.children) { stack.push(...node.children); } } return result; }, // 处理树形结构 handleTree(data, idKey = 'uid', parentKey = 'parentUid') { const map = {}; const tree = []; // 创建映射 data.forEach(item => { map[item[idKey]] = { ...item, children: [] }; }); // 构建树 data.forEach(item => { const parentId = item[parentKey]; if (parentId && map[parentId]) { map[parentId].children.push(map[item[idKey]]); } else { tree.push(map[item[idKey]]); } }); return tree; }, // 行点击事件 handleRowClick(row) { this.$nextTick(() => { // 高亮当前行 this.$refs.table.setCurrentRow(row); // 在甘特图中选中对应任务 if (this.ganttInitialized) { gantt.selectTask(row.uid); gantt.showTask(row.uid); } }); }, // 滚动到表格行 scrollToTableRow(taskId) { const row = this.flatData.find(item => item.uid === taskId); if (!row) return; this.$nextTick(() => { // 确保所有父节点都展开 this.expandParents(row); // 高亮当前行 this.$refs.table.setCurrentRow(row); // 滚动到元素 const tableBody = this.$refs.table.$el.querySelector('.el-table__body-wrapper'); const rowEl = this.$refs.table.$el.querySelector([data-id="${row.uid}"]); if (tableBody && rowEl) { const rowTop = rowEl.offsetTop; const tableHeight = tableBody.clientHeight; tableBody.scrollTop = rowTop - tableHeight / 2; } }); }, // 展开父节点 expandParents(row) { if (!row.parentUid) return; const parent = this.flatData.find(item => item.uid === row.parentUid); if (parent && !this.expandedKeys.has(parent.uid)) { this.expandedKeys.add(parent.uid); this.$refs.table.toggleRowExpansion(parent, true); this.expandParents(parent); } }, // 树展开/折叠更新甘特图 handleExpandChange(row, expanded) { // 更新展开状态 if (expanded) { this.expandedKeys.add(row.uid); } else { this.expandedKeys.delete(row.uid); // 折叠时同时折叠所有子节点 this.collapseChildren(row); } // 更新甘特图 this.$nextTick(() => { this.updateGantt(); // 同步到甘特图展开状态 if (this.ganttInitialized && gantt.isTaskExists(row.uid)) { gantt.openTask(row.uid, expanded); } }); }, // 递归折叠子节点 collapseChildren(node) { if (node.children && node.children.length) { node.children.forEach(child => { this.expandedKeys.delete(child.uid); this.$refs.table.toggleRowExpansion(child, false); this.collapseChildren(child); }); } }, // 切换甘特图显示 - 解决重新初始化问题 toggleGantt() { this.showGantt = !this.showGantt; if (this.showGantt) { this.$nextTick(() => { // 确保每次展开都重新初始化甘特图 this.ganttInitialized = false; this.initGantt(); this.updateGantt(); }); } }, // 获取数据详情 async handleUpdate(row) { try { const res = await getPlan(row.uid); this.form = res.data; this.open = true; this.title = '查看治理计划'; } catch (error) { console.error('获取详情失败:', error); } }, // 取消按钮 cancel() { this.open = false; }, // 重置查询 resetQuery() { this.queryParams = { pageNum: 1, pageSize: 1000, name: null, respPerson: null }; this.getList(); } } }; </script> <style scoped> /* 新增样式 */ .page-container { padding: 20px; background-color: #f5f7fa; height: calc(100vh - 60px); } .search-wrapper { background-color: #fff; padding: 15px 20px; border-radius: 4px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); margin-bottom: 20px; } .table-container { background-color: #fff; padding: 15px; border-radius: 4px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); height: calc(100vh - 180px); overflow: auto; } .gantt-container { background-color: #fff; border-radius: 4px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); padding: 5px; height: calc(100vh - 180px); overflow: auto; } /* 表格标题行样式 */ :deep(.el-table__header) th { height: 30px; padding: 0; background-color: #f8f8f9; } /* 甘特图标题行样式 */ :deep(.gantt_grid_head_cell) { height: 30px; line-height: 30px; padding: 0 5px; background-color: #f8f8f9; border-right: 1px solid #e0e0e0; font-weight: bold; } /* 甘特图时间刻度样式 */ :deep(.gantt_scale_cell) { height: 30px; line-height: 30px; border-bottom: 1px solid #e0e0e0; background-color: #f8f8f9; } /* 对齐表格和甘特图的边框 */ :deep(.el-table--border) { border: 1px solid #ebeef5; } :deep(.gantt_grid, .gantt_grid_head, .gantt_data_area) { border: 1px solid #ebeef5; } /* 甘特图时间刻度样式 */ :deep(.year-scale) { background-color: #f0f9eb; /* 年份背景色 */ color: #67c23a; /* 年份文字颜色 */ font-weight: bold; text-align: center; border-right: 1px solid #e0e0e0; } :deep(.month-scale) { background-color: #ecf5ff; /* 月份背景色 */ color: #409eff; /* 月份文字颜色 */ text-align: center; border-right: 1px solid #e0e0e0; } :deep(.day-scale) { background-color: #fdf6ec; /* 日期背景色 */ color: #e6a23c; /* 日期文字颜色 */ text-align: center; border-right: 1px solid #e0e0e0; } .page-container { padding: 20px; background-color: #f5f7fa; } .search-wrapper { background-color: #fff; padding: 15px 20px; border-radius: 4px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); margin-bottom: 20px; } .table-container { background-color: #fff; padding: 15px; border-radius: 4px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } .gantt-container { background-color: #fff; border-radius: 4px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); padding: 5px; } .dialog-footer { text-align: right; margin-top: 20px; } .toggle-button { margin-bottom: 15px; } .el-table { width: 100%; } .el-table--border { border: 1px solid #ebeef5; } .el-table__row:hover { background-color: #f5f7fa !important; } .el-progress { margin-top: 8px; } .el-form-item { margin-bottom: 18px; } </style> 甘特图初始化失败请修复

<template> <el-row :gutter="20"> <el-col :span="24"> <el-form :inline="true" label-width="100px" @submit.prevent="getList"> <el-form-item label="名称"> <el-input v-model="queryParams.name" placeholder="请输入名称" /> </el-form-item> <el-form-item label="责任人"> <el-input v-model="queryParams.respPerson" placeholder="请输入责任人" /> </el-form-item> <el-form-item> <el-button type="primary" @click="getList">查询</el-button> <el-button @click="resetQuery">重置</el-button> </el-form-item> </el-form> </el-col> <el-col :span="24"> <el-button type="primary" @click="toggleGantt" style="margin-bottom: 15px;" > {{ showGantt ? '收起甘特图' : '展开甘特图' }} </el-button> </el-col> <el-col :span="showGantt ? 12 : 24"> <el-table ref="table" :data="listData" row-key="uid" border :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" @row-click="rowClick" @expand-change="handleExpandChange" > <el-table-column prop="code" label="编号" /> <el-table-column prop="name" label="名称" /> <el-table-column prop="respPerson" label="责任人" /> <el-table-column prop="schedule" label="完成百分比" /> <el-table-column prop="planStartDate" label="计划开始日期" /> <el-table-column prop="planEndDate" label="计划结束日期" /> <el-table-column label="操作"> <template slot-scope="scope"> <el-button size="mini" icon="el-icon-view" @click="handleUpdate(scope.row)">查看</el-button> </template> </el-table-column> </el-table> <el-pagination layout="prev, pager, next" :total="total" :page-size="queryParams.pageSize" @current-change="handleCurrentChange" /> </el-col> <el-col :span="12" v-if="showGantt"> </el-col> </el-row> <el-dialog :title="title" :visible.sync="open" width="850px" append-to-body> <el-form ref="form" :model="form" :rules="rules" label-width="100px" :disabled="disable"> <el-row> <el-col :span="12"> <el-form-item label="编号" prop="code"> <el-input v-model="form.code" placeholder="请输入编号" /> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="名称" prop="name"> <el-input v-model="form.name" placeholder="请输入名称" /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="24"> <el-form-item label="备注" prop="remarks"> <el-input v-model="form.remarks" type="textarea" placeholder="请输入备注" /> </el-form-item> </el-col> </el-row> <el-button @click="cancel">取 消</el-button> </el-form> </el-dialog> </template> <script> import gantt from 'dhtmlx-gantt'; import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'; import { listPlan, getPlan } from '@/api/dw/plan/planview'; export default { name: 'Planview', data() { return { listData: [], total: 0, queryParams: { pageNum: 1, pageSize: 10, name: null, respPerson: null }, open: false, title: '', form: {}, rules: { name: [{ required: true, message: '名称不能为空', trigger: 'blur' }], schedule: [ { required: true, message: '完成百分比不能为空', trigger: 'blur' }, { type: 'number', message: '输入内容不是有效的数字', trigger: 'blur' } ] }, disable: true, showGantt: true, // 控制甘特图显示 flatData: [], // 扁平化数据 baseDate: new Date('2023-01-01'), // 基准日期 maxDuration: 365, // 最大工期(天) maxOffset: 365 // 最大偏移天数 }; }, mounted() { this.getList(); this.initGantt(); }, methods: { async getList() { const res = await listPlan(this.queryParams); this.listData = this.handleTree(res.data, 'uid', 'parentUid'); this.total = res.total; this.flatData = this.flattenTree(this.listData); this.getMaxDuration(); this.$nextTick(() => { const tasks = this.ganttData(this.flatData); this.updateGantt(tasks); }); }, // 获取最大工期 getMaxDuration() { const durations = this.flatData.map(item => item.planDuration || 0); this.maxDuration = Math.max(...durations, 1); }, // 计算甘特图宽度 calculateGanttWidth(row) { const duration = row.planDuration || 0; const width = (duration / this.maxDuration) * 100; return ${Math.max(5, width)}%; }, // 计算甘特图偏移 calculateGanttOffset(row) { if (!row.planStartDate) return '0%'; const startDate = new Date(row.planStartDate); const daysOffset = Math.floor((startDate - this.baseDate) / (1000 * 60 * 60 * 24)); return ${(daysOffset / this.maxOffset) * 100}%; }, // 初始化甘特图 initGantt() { if (!this.$refs.ganttContainer) return; gantt.config.date_format = '%Y-%m-%d'; gantt.config.columns = [ { name: 'text', label: '任务名称', tree: true, width: '*' }, { name: 'start_date', label: '开始时间', align: 'center' }, { name: 'duration', label: '工期(天)', align: 'center' } ]; gantt.templates.task_text = (start, end, task) => task.text; gantt.init(this.$refs.ganttContainer); gantt.parse({ data: [], links: [] }); // 确保事件监听器只绑定一次 if (!this.ganttEventInitialized) { gantt.attachEvent('onTaskSelected', id => { const row = this.flatData.find(item => item.uid === id); if (row) { this.$refs.table.setCurrentRow(row); } }); this.ganttEventInitialized = true; } }, // 更新甘特图 updateGantt(tasks) { gantt.clearAll(); gantt.parse({ data: tasks, links: [] }); }, // 树形结构转扁平结构 flattenTree(data) { const result = []; const stack = [...data]; while (stack.length) { const node = stack.pop(); result.push(node); if (node.children) { stack.push(...node.children); } } return result; }, // 转换为甘特图数据 ganttData(data) { return data .filter(item => item.uid && item.planStartDate) .map(item => ({ id: item.uid, text: item.name, start_date: item.planStartDate, duration: item.planDuration || 0, progress: (item.schedule || 0) / 100, parent: item.parentUid || 0 })); }, // 处理树形结构 handleTree(data, idKey = 'id', parentKey = 'parentId') { const map = {}; const tree = []; data.forEach(item => (map[item[idKey]] = item)); data.forEach(item => { const parent = map[item[parentKey]]; if (parent) { (parent.children || (parent.children = [])).push(item); } else { tree.push(item); } }); return tree; }, // 行点击事件 rowClick(row) { const taskId = row.uid; this.$nextTick(() => { if (gantt.$initialized) { gantt.showTask(taskId); gantt.selectTask(taskId); // 强制重绘确保高亮生效 gantt.render(); } }); }, // 树展开/折叠更新甘特图 handleExpandChange(row, expanded) { if (expanded) { const allChildren = this.getAllChildren(row); const tasks = this.ganttData(allChildren); this.$nextTick(() => { this.updateGantt(tasks); if (gantt.$initialized && tasks.length > 0) { // 获取展开节点的最早和最晚日期 const dates = tasks .filter(t => t.start_date) .map(t => new Date(t.start_date)); if (dates.length > 0) { const minDate = new Date(Math.min(...dates.map(d => d.getTime()))); const maxDate = new Date(Math.max(...dates.map(d => { const endDate = new Date(t.start_date); endDate.setDate(endDate.getDate() + (t.duration || 0)); return endDate.getTime(); }))); // 设置视图时间范围 gantt.setWorkTime({ start_date: minDate, end_date: maxDate }); // 调整视图缩放级别 gantt.config.scale_unit = 'day'; gantt.config.step = 1; gantt.config.scale_height = 28; // 重新渲染并定位第一个任务 gantt.render(); gantt.showTask(tasks[0].id); gantt.selectTask(tasks[0].id); } } }); } else { const topLevelTasks = this.listData.map(item => ({ id: item.uid, text: item.name, start_date: item.planStartDate, duration: item.planDuration || 0, progress: (item.schedule || 0) / 100, parent: item.parentUid || 0 })); this.$nextTick(() => { this.updateGantt(topLevelTasks); if (gantt.$initialized) { // 恢复默认时间范围 gantt.setWorkTime({ start_date: new Date('2023-01-01'), end_date: new Date('2023-12-31') }); gantt.config.scale_unit = 'month'; gantt.config.step = 1; gantt.config.scale_height = 28; gantt.render(); } }); } }, // 递归获取所有子节点 getAllChildren(node) { let children = [node]; if (node.children && node.children.length > 0) { node.children.forEach(child => { children = children.concat(this.getAllChildren(child)); }); } return children; }, // 切换甘特图 toggleGantt() { this.showGantt = !this.showGantt; if (this.showGantt) { this.$nextTick(() => { const tasks = this.ganttData(this.flatData); this.updateGantt(tasks); }); } }, // 获取数据 async handleUpdate(row) { const res = await getPlan(row.uid); this.form = res.data; this.open = true; this.title = '查看治理计划'; }, // 取消按钮 cancel() { this.open = false; }, // 重置查询 resetQuery() { this.queryParams = { pageNum: 1, pageSize: 10, name: null, respPerson: null }; this.getList(); }, // 分页切换 handleCurrentChange(page) { this.queryParams.pageNum = page; this.getList(); } } }; </script> <style scoped> .page-container { padding: 20px; } .table-container { background-color: #fff; padding: 10px; border-radius: 4px; } .gantt-container { background-color: #f9f9f9; border: 1px solid #ebeef5; padding: 10px; border-radius: 4px; } .dialog-footer { text-align: right; } .search-wrapper { margin-bottom: 20px; background-color: #fff; padding: 10px; border-radius: 4px; } .toggle-button { margin-bottom: 15px; } .gantt-bar-container { position: relative; height: 30px; background-color: #f5f7fa; border-radius: 4px; overflow: hidden; margin: 5px 0; } .gantt-bar { position: absolute; top: 0; left: 0; height: 100%; background-color: #409EFF; color: white; text-align: center; font-size: 12px; line-height: 30px; } </style> 列表的展开和收缩,甘特图没有同步,请重新优化

大家在看

recommend-type

基于 ADS9110的隔离式数据采集 (DAQ) 系统方案(待编辑)-电路方案

描述 该“可实现最大 SNR 和采样率的 18 位 2Msps 隔离式数据采集参考设计”演示了如何应对隔离式数据采集系统设计中的典型性能限制挑战: 通过将数字隔离器引入的传播延迟降至最低,使采样率达到最大 通过有效地减轻数字隔离器引入的 ADC 采样时钟抖动,使高频交流信号链性能 (SNR) 达到最大 特性 18 位、2Msps、1 通道、差分输入、隔离式数据采集 (DAQ) 系统 利用 ADS9110 的 multiSPI:trade_mark: 数字接口实现 2MSPS 采样率,同时保持低 SPI 数据速率 源同步 SPI 数据传输模式,可将隔离器传播延迟降至最低并提高采样率 可降低隔离器引入的抖动的技术,能够将 SNR 提高 12dB(100kHz Fin,2MSPS) 经测试的设计包含理论和计算、组件选择、PCB 设计和测量结果 原理图 附件文档: 方案相关器件: ISO1541:低功耗、双向 I2C 隔离器 ISO7840:高性能 5.7kVRMS 增强型四通道数字隔离器 ISO7842:高性能 5.7kVRMS 增强型四通道数字隔离器
recommend-type

自动化图书管理系统 v7.0

自动化图书馆管理系统包含了目前图书馆管理业务的每个环节,能同时管理图书和期刊,能打印条码、书标,并制作借书证,最大藏书量在300万册以上。系统采用CNMARC标准及中图法第四版分类,具有Web检索与发布功能,条码扫描,支持一卡通,支持触摸屏。系统包括系统管理、读者管理、编目、流通、统计、查询等功能。能够在一个界面下实现图书、音像、期刊的管理,设置假期、设置暂离锁(提高安全性)、暂停某些读者的借阅权、导入导出读者、交换MARC数据、升级辅助编目库等。安装本系统前请先安装SQL 2000SQL 下载地址 http://pan.baidu.com/s/145vkr安装过程如有问题可咨询: TEL 13851381727  QQ 306404635
recommend-type

真正的VB6.0免安装,可以装U盘启动了

这个,,资源都来自CSDN大神们,在这里声明下。
recommend-type

详细说明 VC++的MFC开发串口调试助手源代码,包括数据发送,接收,显示制式等29782183com

详细说明 VC++的MFC开发串口调试助手源代码,包括数据发送,接收,显示制式等29782183com
recommend-type

文档编码批量转换UTF16toUTF8.rar

将UTF16编码格式的文件转换编码到UTF8 使用格式:U16toU8.exe [output] 如果没有output,则覆盖源文件,否则输出到output中 方便命令行使用,批量转换文件编码

最新推荐

recommend-type

C#类库封装:简化SDK调用实现多功能集成,构建地磅无人值守系统

内容概要:本文介绍了利用C#类库封装多个硬件设备的SDK接口,实现一系列复杂功能的一键式调用。具体功能包括身份证信息读取、人证识别、车牌识别(支持臻识和海康摄像头)、LED显示屏文字输出、称重数据读取、二维码扫描以及语音播报。所有功能均被封装为简单的API,极大降低了开发者的工作量和技术门槛。文中详细展示了各个功能的具体实现方式及其应用场景,如身份证读取、人证核验、车牌识别等,并最终将这些功能整合到一起,形成了一套完整的地磅称重无人值守系统解决方案。 适合人群:具有一定C#编程经验的技术人员,尤其是需要快速集成多种硬件设备SDK的应用开发者。 使用场景及目标:适用于需要高效集成多种硬件设备SDK的项目,特别是那些涉及身份验证、车辆管理、物流仓储等领域的企业级应用。通过使用这些封装好的API,可以大大缩短开发周期,降低维护成本,提高系统的稳定性和易用性。 其他说明:虽然封装后的API极大地简化了开发流程,但对于一些特殊的业务需求,仍然可能需要深入研究底层SDK。此外,在实际部署过程中,还需考虑网络环境、硬件兼容性等因素的影响。
recommend-type

基于STM32F1的BLDC无刷直流电机与PMSM永磁同步电机源码解析:传感器与无传感器驱动详解

基于STM32F1的BLDC无刷直流电机和PMSM永磁同步电机的驱动实现方法,涵盖了有传感器和无传感两种驱动方式。对于BLDC电机,有传感器部分采用霍尔传感器进行六步换相,无传感部分则利用反电动势过零点检测实现换相。对于PMSM电机,有传感器部分包括霍尔传感器和编码器的方式,无传感部分则采用了滑模观测器进行矢量控制(FOC)。文中不仅提供了详细的代码片段,还分享了许多调试经验和技巧。 适合人群:具有一定嵌入式系统和电机控制基础知识的研发人员和技术爱好者。 使用场景及目标:适用于需要深入了解和实现BLDC和PMSM电机驱动的开发者,帮助他们掌握不同传感器条件下的电机控制技术和优化方法。 其他说明:文章强调了实际调试过程中可能遇到的问题及其解决方案,如霍尔传感器的中断触发换相、反电动势过零点检测的采样时机、滑模观测器的参数调整以及编码器的ABZ解码等。
recommend-type

基于Java的跨平台图像处理软件ImageJ:多功能图像编辑与分析工具

内容概要:本文介绍了基于Java的图像处理软件ImageJ,详细阐述了它的跨平台特性、多线程处理能力及其丰富的图像处理功能。ImageJ由美国国立卫生研究院开发,能够在多种操作系统上运行,包括Windows、Mac OS、Linux等。它支持多种图像格式,如TIFF、PNG、GIF、JPEG、BMP、DICOM、FITS等,并提供图像栈功能,允许多个图像在同一窗口中进行并行处理。此外,ImageJ还提供了诸如缩放、旋转、扭曲、平滑处理等基本操作,以及区域和像素统计、间距、角度计算等高级功能。这些特性使ImageJ成为科研、医学、生物等多个领域的理想选择。 适合人群:需要进行图像处理的专业人士,如科研人员、医生、生物学家,以及对图像处理感兴趣的普通用户。 使用场景及目标:适用于需要高效处理大量图像数据的场合,特别是在科研、医学、生物学等领域。用户可以通过ImageJ进行图像的编辑、分析、处理和保存,提高工作效率。 其他说明:ImageJ不仅功能强大,而且操作简单,用户无需安装额外的运行环境即可直接使用。其基于Java的开发方式确保了不同操作系统之间的兼容性和一致性。
recommend-type

MATLAB语音识别系统:基于GUI的数字0-9识别及深度学习模型应用 · GUI v1.2

内容概要:本文介绍了一款基于MATLAB的语音识别系统,主要功能是识别数字0到9。该系统采用图形用户界面(GUI),方便用户操作,并配有详尽的代码注释和开发报告。文中详细描述了系统的各个组成部分,包括音频采集、信号处理、特征提取、模型训练和预测等关键环节。此外,还讨论了MATLAB在此项目中的优势及其面临的挑战,如提高识别率和处理背景噪音等问题。最后,通过对各模块的工作原理和技术细节的总结,为未来的研究和发展提供了宝贵的参考资料。 适合人群:对语音识别技术和MATLAB感兴趣的初学者、学生或研究人员。 使用场景及目标:适用于希望深入了解语音识别技术原理的人群,特别是希望通过实际案例掌握MATLAB编程技巧的学习者。目标是在实践中学习如何构建简单的语音识别应用程序。 其他说明:该程序需要MATLAB 2019b及以上版本才能正常运行,建议使用者确保软件环境符合要求。
recommend-type

c语言通讯录管理系统源码.zip

C语言项目源码
recommend-type

Teleport Pro教程:轻松复制网站内容

标题中提到的“复制别人网站的软件”指向的是一种能够下载整个网站或者网站的特定部分,然后在本地或者另一个服务器上重建该网站的技术或工具。这类软件通常被称作网站克隆工具或者网站镜像工具。 描述中提到了一个具体的教程网址,并提到了“天天给力信誉店”,这可能意味着有相关的教程或资源可以在这个网店中获取。但是这里并没有提供实际的教程内容,仅给出了网店的链接。需要注意的是,根据互联网法律法规,复制他人网站内容并用于自己的商业目的可能构成侵权,因此在此类工具的使用中需要谨慎,并确保遵守相关法律法规。 标签“复制 别人 网站 软件”明确指出了这个工具的主要功能,即复制他人网站的软件。 文件名称列表中列出了“Teleport Pro”,这是一款具体的网站下载工具。Teleport Pro是由Tennyson Maxwell公司开发的网站镜像工具,允许用户下载一个网站的本地副本,包括HTML页面、图片和其他资源文件。用户可以通过指定开始的URL,并设置各种选项来决定下载网站的哪些部分。该工具能够帮助开发者、设计师或内容分析人员在没有互联网连接的情况下对网站进行离线浏览和分析。 从知识点的角度来看,Teleport Pro作为一个网站克隆工具,具备以下功能和知识点: 1. 网站下载:Teleport Pro可以下载整个网站或特定网页。用户可以设定下载的深度,例如仅下载首页及其链接的页面,或者下载所有可访问的页面。 2. 断点续传:如果在下载过程中发生中断,Teleport Pro可以从中断的地方继续下载,无需重新开始。 3. 过滤器设置:用户可以根据特定的规则过滤下载内容,如排除某些文件类型或域名。 4. 网站结构分析:Teleport Pro可以分析网站的链接结构,并允许用户查看网站的结构图。 5. 自定义下载:用户可以自定义下载任务,例如仅下载图片、视频或其他特定类型的文件。 6. 多任务处理:Teleport Pro支持多线程下载,用户可以同时启动多个下载任务来提高效率。 7. 编辑和管理下载内容:Teleport Pro具备编辑网站镜像的能力,并可以查看、修改下载的文件。 8. 离线浏览:下载的网站可以在离线状态下浏览,这对于需要测试网站在不同环境下的表现的情况十分有用。 9. 备份功能:Teleport Pro可以用来备份网站,确保重要数据的安全。 在实际使用此类工具时,需要注意以下几点: - 著作权法:复制网站内容可能侵犯原作者的版权,因此在使用此类工具时,必须确保有合法权利去下载和使用目标网站的内容。 - 服务条款:许多网站的服务条款明确禁止未经授权的网站克隆。因此,在使用此类软件之前,应当仔细阅读并遵守目标网站的服务条款。 - 数据隐私:下载含有个人数据的网站可能触及隐私保护法律,特别是在欧洲通用数据保护条例(GDPR)等法规的环境下。 - 网络安全:随意下载网站可能导致恶意软件和病毒的传播,用户应当使用最新的反病毒软件,并在安全的环境中进行操作。 综上所述,虽然“复制别人网站的软件”在技术上是可行的,且可以用于多种正当目的,但在使用此类工具时,必须遵守法律法规和道德规范,不可侵犯他人的合法权益。
recommend-type

【跨平台开发者的必读】:解决Qt5Widgetsd.lib目标计算机类型冲突终极指南

# 1. 跨平台开发与Qt框架简介 跨平台开发已经成为现代软件开发中不可或缺的一部分,它使得开发者能够构建出能够在多种操作系统上运行的应用程序,从而触及更广泛的用户群体。在这其中,Qt框架作为一套成熟的跨平台应用程序和用户界面框架,扮演着关键角色。Qt不仅仅是一个跨平台的工具集,它的设计哲学还包含了模块化和可扩展性,使其能够适应各种规模和复杂度的项目。本章节我们将简要介绍
recommend-type

普通RNN结构和特点

<think>首先,用户的问题是:“我想了解普通RNN的结构及其特点请问RNN循环神经网络结构特点工作原理”。这涉及到RNN的结构、特点和工作原理。根据系统级指令:-所有行内数学表达式必须使用$...$格式。-独立公式必须使用$$...$$格式并单独成段。-LaTeX语法正确。-使用中文回答。-生成相关问题。-回答中引用的段落末尾自然地添加引用标识。用户可见层指令:-回答结构清晰,帮助用户逐步解决问题。-保证回答真实可靠。参考站内引用:-引用[1]:关于RNN的基本介绍,为什么需要RNN。-引用[2]:关于RNN的工作原理、结构图,以及与其他网络的比较。用户上一次的问题和我的回答:用户是第一次
recommend-type

探讨通用数据连接池的核心机制与应用

根据给定的信息,我们能够推断出讨论的主题是“通用数据连接池”,这是一个在软件开发和数据库管理中经常用到的重要概念。在这个主题下,我们可以详细阐述以下几个知识点: 1. **连接池的定义**: 连接池是一种用于管理数据库连接的技术,通过维护一定数量的数据库连接,使得连接的创建和销毁操作更加高效。开发者可以在应用程序启动时预先创建一定数量的连接,并将它们保存在一个池中,当需要数据库连接时,可以直接从池中获取,从而降低数据库连接的开销。 2. **通用数据连接池的概念**: 当提到“通用数据连接池”时,它意味着这种连接池不仅支持单一类型的数据库(如MySQL、Oracle等),而且能够适应多种不同数据库系统。设计一个通用的数据连接池通常需要抽象出一套通用的接口和协议,使得连接池可以兼容不同的数据库驱动和连接方式。 3. **连接池的优点**: - **提升性能**:由于数据库连接创建是一个耗时的操作,连接池能够减少应用程序建立新连接的时间,从而提高性能。 - **资源复用**:数据库连接是昂贵的资源,通过连接池,可以最大化现有连接的使用,避免了连接频繁创建和销毁导致的资源浪费。 - **控制并发连接数**:连接池可以限制对数据库的并发访问,防止过载,确保数据库系统的稳定运行。 4. **连接池的关键参数**: - **最大连接数**:池中能够创建的最大连接数。 - **最小空闲连接数**:池中保持的最小空闲连接数,以应对突发的连接请求。 - **连接超时时间**:连接在池中保持空闲的最大时间。 - **事务处理**:连接池需要能够管理不同事务的上下文,保证事务的正确执行。 5. **实现通用数据连接池的挑战**: 实现一个通用的连接池需要考虑到不同数据库的连接协议和操作差异。例如,不同的数据库可能有不同的SQL方言、认证机制、连接属性设置等。因此,通用连接池需要能够提供足够的灵活性,允许用户配置特定数据库的参数。 6. **数据连接池的应用场景**: - **Web应用**:在Web应用中,为了处理大量的用户请求,数据库连接池可以保证数据库连接的快速复用。 - **批处理应用**:在需要大量读写数据库的批处理作业中,连接池有助于提高整体作业的效率。 - **微服务架构**:在微服务架构中,每个服务可能都需要与数据库进行交互,通用连接池能够帮助简化服务的数据库连接管理。 7. **常见的通用数据连接池技术**: - **Apache DBCP**:Apache的一个Java数据库连接池库。 - **C3P0**:一个提供数据库连接池和控制工具的开源Java框架。 - **HikariCP**:目前性能最好的开源Java数据库连接池之一。 - **BoneCP**:一个高性能的开源Java数据库连接池。 - **Druid**:阿里巴巴开源的一个数据库连接池,提供了对性能监控的高级特性。 8. **连接池的管理与监控**: 为了保证连接池的稳定运行,开发者需要对连接池的状态进行监控,并对其进行适当的管理。监控指标可能包括当前活动的连接数、空闲的连接数、等待获取连接的请求队列长度等。一些连接池提供了监控工具或与监控系统集成的能力。 9. **连接池的配置和优化**: 连接池的性能与连接池的配置密切相关。需要根据实际的应用负载和数据库性能来调整连接池的参数。例如,在高并发的场景下,可能需要增加连接池中连接的数量。另外,适当的线程池策略也可以帮助连接池更好地服务于多线程环境。 10. **连接池的应用案例**: 一个典型的案例是电商平台在大型促销活动期间,用户访问量激增,此时通用数据连接池能够保证数据库操作的快速响应,减少因数据库连接问题导致的系统瓶颈。 总结来说,通用数据连接池是现代软件架构中的重要组件,它通过提供高效的数据库连接管理,增强了软件系统的性能和稳定性。了解和掌握连接池的原理及实践,对于任何涉及数据库交互的应用开发都至关重要。在实现和应用连接池时,需要关注其设计的通用性、配置的合理性以及管理的有效性,确保在不同的应用场景下都能发挥出最大的效能。
recommend-type

【LabVIEW网络通讯终极指南】:7个技巧提升UDP性能和安全性

# 摘要 本文系统介绍了LabVIEW在网络通讯中的应用,尤其是针对UDP协议的研究与优化。首先,阐述了UDP的原理、特点及其在LabVIEW中的基础应用。随后,本文深入探讨了通过调整数据包大小、实现并发通信及优化缓冲区管理等技巧来优化UDP性能的LabVIEW方法。接着,文章聚焦于提升UDP通信安全性,介绍了加密技术和认证授权机制在LabVIEW中的实现,以及防御网络攻击的策略。最后,通过具体案例展示了LabVIEW在实时数据采集和远程控制系统中的高级应用,并展望了LabVIEW与UDP通讯技术的未来发展趋势及新兴技术的影响。 # 关键字 LabVIEW;UDP网络通讯;性能优化;安全性;