CN116127936A - 一种编制工程单位矩阵图的方法、电子设备及存储介质 - Google Patents
一种编制工程单位矩阵图的方法、电子设备及存储介质 Download PDFInfo
- Publication number
- CN116127936A CN116127936A CN202310346959.XA CN202310346959A CN116127936A CN 116127936 A CN116127936 A CN 116127936A CN 202310346959 A CN202310346959 A CN 202310346959A CN 116127936 A CN116127936 A CN 116127936A
- Authority
- CN
- China
- Prior art keywords
- engineering
- unit matrix
- working
- matrix diagram
- engineering unit
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
- 239000011159 matrix material Substances 0.000 title claims abstract description 113
- 238000010586 diagram Methods 0.000 title claims abstract description 90
- 238000000034 method Methods 0.000 title claims abstract description 58
- 238000003860 storage Methods 0.000 title claims abstract description 14
- 238000012545 processing Methods 0.000 claims abstract description 7
- 238000004590 computer program Methods 0.000 claims description 15
- 238000009877 rendering Methods 0.000 claims description 13
- 238000013507 mapping Methods 0.000 claims description 9
- 230000008569 process Effects 0.000 claims description 7
- 238000012544 monitoring process Methods 0.000 claims description 3
- 238000010276 construction Methods 0.000 abstract description 4
- 230000000007 visual effect Effects 0.000 abstract description 4
- 238000012986 modification Methods 0.000 abstract description 2
- 230000004048 modification Effects 0.000 abstract description 2
- 238000007792 addition Methods 0.000 abstract 1
- 238000012217 deletion Methods 0.000 abstract 1
- 230000037430 deletion Effects 0.000 abstract 1
- 230000006870 function Effects 0.000 description 19
- 230000009471 action Effects 0.000 description 5
- 230000002776 aggregation Effects 0.000 description 1
- 238000004220 aggregation Methods 0.000 description 1
- 238000004458 analytical method Methods 0.000 description 1
- 238000003491 array Methods 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000006243 chemical reaction Methods 0.000 description 1
- 238000007405 data analysis Methods 0.000 description 1
- 238000005429 filling process Methods 0.000 description 1
- 238000007726 management method Methods 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 238000013515 script Methods 0.000 description 1
- 239000011800 void material Substances 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/166—Editing, e.g. inserting or deleting
- G06F40/177—Editing, e.g. inserting or deleting of tables; using ruled lines
- G06F40/18—Editing, e.g. inserting or deleting of tables; using ruled lines of spreadsheets
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/166—Editing, e.g. inserting or deleting
- G06F40/183—Tabulation, i.e. one-dimensional positioning
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/189—Automatic justification
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06Q—INFORMATION AND COMMUNICATION TECHNOLOGY [ICT] SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES; SYSTEMS OR METHODS SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES, NOT OTHERWISE PROVIDED FOR
- G06Q50/00—Information and communication technology [ICT] specially adapted for implementation of business processes of specific business sectors, e.g. utilities or tourism
- G06Q50/08—Construction
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- General Health & Medical Sciences (AREA)
- General Engineering & Computer Science (AREA)
- Health & Medical Sciences (AREA)
- Software Systems (AREA)
- Artificial Intelligence (AREA)
- Audiology, Speech & Language Pathology (AREA)
- Computational Linguistics (AREA)
- Business, Economics & Management (AREA)
- Human Resources & Organizations (AREA)
- Marketing (AREA)
- Primary Health Care (AREA)
- Strategic Management (AREA)
- Tourism & Hospitality (AREA)
- General Business, Economics & Management (AREA)
- Human Computer Interaction (AREA)
- Economics (AREA)
- Stored Programmes (AREA)
Abstract
一种编制工程单位矩阵图的方法、电子设备及存储介质,属于可视化编辑处理技术领域。为了解决工程单位矩阵图编制排版不固定、数据关系不清晰的问题。本发明定义工程单位矩阵图的数据属性,采用vue.js框架进行编码构建,将步骤S1定义的工程单位矩阵图的数据属性映射到构建的工程单位矩阵图中,设置分项工程数据结构,设置工作面数据结构,将原始数据转换为二维数组进行工程单位矩阵图的数据结构的初始化,得到工程单位矩阵图页面,在得到的工程单位矩阵图页面的单元格进行增加、删除、修改,进行工程单位矩阵图编制。本发明可以编制出固定排版,具有清晰数据结构、数据关系的单位工程矩阵图。
Description
技术领域
本发明属于可视化编辑处理技术领域,具体涉及一种编制工程单位矩阵图的方法、电子设备及存储介质。
背景技术
建筑工务管理部门需要管理众多工程类项目,每个工程类项目具有前期计划阶段、施工阶段、验收阶段的生命周期,其中在前期计划阶段、施工阶段会产生不同的单位工程编制对应的工程单位矩阵图辅助工程进行计划、施工。
编制单位工程矩阵图的传统方式是在excel表格上进行编制,但在excel编制工程单位矩阵图存在以下问题:
1.不同的人在excel上编制工程单位矩阵图的“工作内容”、“工作面”的单元格位置随意上下左右调换布局位置,完全按照个人习惯,导致排版混乱不统一,存在合并单元格时合并出错的问题;
2.识别工程单位矩阵图中的“工作内容”与“工作面”信息困难,很难通过脚本识别出excel表格中哪些单元格代表着“工作内容”与“工作面”信息,识别“工作内容”与“工作面”信息内在关系困难,对数据进行归集分析困难;
3.工程单位矩阵图的“工作内容”、“工作面”信息在填写过程中容易存在错填、漏填情况,excel没有校验纠错的功能。
发明内容
本发明要解决是工程单位矩阵图编制排版不固定、数据关系不清晰的问题,提出一种编制工程单位矩阵图的方法、电子设备及存储介质。
为实现上述目的,本发明通过以下技术方案实现:
一种编制工程单位矩阵图的方法,包括如下步骤:
S1、定义工程单位矩阵图的数据属性:包括工作内容、分项工程、工作面、工作项;
S2、构建工程单位矩阵图:采用vue.js框架构建工程单位矩阵图,将步骤S1定义的工程单位矩阵图的数据属性映射到构建的工程单位矩阵图中,设置分项工程数据结构,设置工作面数据结构,将原始数据转换为二维数组进行工程单位矩阵图的数据结构的初始化,得到工程单位矩阵图页面;
S3、在步骤S2得到的工程单位矩阵图页面的单元格进行增加、删除、修改,进行工程单位矩阵图编制。
进一步的,步骤S1的具体实现方法包括如下步骤:
S1.1、定义分项工程:设置分项工程为树形结构,每个树的节点为一个分项工程,一级分项工程下具有二级分项工程,二级分项工程下具有三级分项工程,一级分项工程为一颗树的根节点;
S1.2、定义工作内容:工作内容为一个或者多个分项工程组合成的,通过数组表示工作内容,数组中的每一项为一个一级分项工程;
S1.3、定义工作面、工作项:工作面为工程单位矩阵图的组成部分,以行或者列表示,和工作内容成丛横排版,一个工作面由一个工作名称和一个或者多个工作项组成;当工作面以行形式表示,工作内容以列形式表示;
工作项:工作面和工作内容分别以行和列来表示,每一行和列十字形交叉处的单元格定义为工作项。
进一步的,步骤S2的具体实现方法包括如下步骤:
S2.1、构建工程单位矩阵图的工作内容、分项工程;
S2.2、构建工程单位矩阵图的工作面。
进一步的,步骤S2.1的具体实现方法包括如下步骤:
S2.1.1、采用vue.js框架构建工程单位矩阵图,设置工程单位矩阵图表格的表头部分用来表示工作内容的分项工程,设置分项工程数据结构,分项工程数据结构为树形结构,则每棵树的同级节点在表头的同一行;
当存在多棵树最大层级不同时,以最大层级的树的最后层级为结束层级,其他树的叶子节点进行行合并;
对于每棵树的每个节点具有下级节点时,节点进行列合并,列合并数目为节点具有的叶子节点数目;
S2.1.2、将分项工程数据结构转换为渲染表格的分项工程二维数组,进行工程单位矩阵图的分项工程数据结构的初始化:
S2.1.2.1、首先构造一个空的分项工程二维数组,深度遍历分项工程数据结构,把同一个层级的节点集合在同一个数组中,然后将该数组置于构造的空的分项工程二维数组中,则得到分项工程二维数组最终数据结构;
S2.1.2.2、然后深度遍历分项工程数据结构,记录每个节点下的叶子节点数量,记录方式是节点id与叶子数量形成一一对应的映射;
S2.1.2.3、遍历2.1.2.1中的分项工程二维数组的所有节点,在遍历过程中会分三种情况处理:
情况一:如果节点不是叶子节点,则进行列合并,给该节点添加一个属性为列合并,列合并的值根据S2.1.2.2步骤中记录的该节点的id对应的叶子节点数量的映射得到;
情况二:如果节点不是最后一层级的叶子节点,则进行行合并,给该节点添加一个属性为行合并,行合并的值为最大层级与该节点的层级的层级之差;
情况三:排除情况一和情况二,该节点是叶子节点,不做行、列合并的记录。
S2.1.3、经过步骤S2.1.1-S2.1.2将分项工程数据结构转换为符合渲染条件的分项工程二维数组,然后通过分项工程二维数组生成具有行列合并单元格的树形表头。
进一步的,步骤S2.2的具体实现方法包括如下步骤:
S2.2.1、工程单位矩阵图表格的表体部分由一行或者多行组成,用来表示工作面,每一行第一个单元格用来填写工作面名称,该行的其余单元格用来表示工作项,每一个工作项对象的当前行id为行地址,每一个工作项对象的当前列id为列地址,通过行地址 、列地址定位工作项所属的工作面、分项工程;
S2.2.2、将工作面数据结构转换为渲染表格的工作面二维数组,进行工程单位矩阵图的工作面数据结构的初始化:构造一个空的工作面二维数组,然后遍历工作面数据结构,在每次循环的开始,首先构造一个临时数组来表示每一行数据,临时数组索引为0的位置储存当前工作名称对象,然后临时数组剩余索引的位置由该工作名称下的工作项数组数据补全,生成表体的一行数据,然后把该临时数组放进工作面二维数组里面,最终生成工程单位矩阵图的工作面。
进一步的,步骤S3的具体实现方法包括如下步骤:
S3.1、在步骤S2得到的工程单位矩阵图页面进行操作,当鼠标在工程单位矩阵图页面点击某个单元格时,该单元格会聚焦高亮,展示选中状态,同时显示附着在单元格旁边的增加、删除图标;
S3.2、通过监听增加、删除图标的点击事件增加、删除单元格内容,在点击单元格的同时,单元格高亮状态下编辑单元格的文本内容,进行工程单位矩阵图编制。
电子设备,包括存储器和处理器,存储器存储有计算机程序,所述的处理器执行所述计算机程序时实现所述的一种编制工程单位矩阵图的方法的步骤。
计算机可读存储介质,其上存储有计算机程序,所述计算机程序被处理器执行时实现所述的一种编制工程单位矩阵图的方法。
本发明的有益效果:
本发明所述的一种编制工程单位矩阵图的方法,可以编制出固定排版、“工作内容”与“工作面”的数据关系清晰的工程单位矩阵图,同时还具有错填校验、纠正的辅助功能。
本发明所述的一种编制工程单位矩阵图的方法,用户通过web页面加载编制工程单位矩阵图的方法,即可在页面上编制工程单位矩阵图,而编制好的工程单位矩阵图提供接口去读取数据,同时又支持传入外部数据去展示出对应的工程单位矩阵图。通过这种方式把“视图”与“数据”的关系抽象出来了。
本发明所述的一种编制工程单位矩阵图的方法,数据关系清晰:通过编制矩阵图得到清晰的数据结构供外部读取,也可从外部传入规范的数据结构生成清晰的矩阵图,“视图”与“数据”解耦分离,利于数据分析。视觉统一:生成的矩阵图,工作内容在表格上方,工作面在表格左侧,视觉统一。可在线跨平台共享:web页面部署后即可通过浏览器实时分享查看矩阵图,不需要像传统做法把excel文件传来传去。
附图说明
图1为本发明所述的一种编制工程单位矩阵图的方法的工艺流程图;
图2为本发明所述的一种编制工程单位矩阵图的方法的操作流程效果图。
具体实施方式
为了使本发明的目的、技术方案及优点更加清楚明白,以下结合附图及具体实施方式,对本发明进行进一步详细说明。应当理解,此处所描述的具体实施方式仅用以解释本发明,并不用于限定本发明,即所描述的具体实施方式仅仅是本发明一部分实施方式,而不是全部的具体实施方式。通常在此处附图中描述和展示的本发明具体实施方式的组件可以以各种不同的配置来布置和设计,本发明还可以具有其他实施方式。
因此,以下对在附图中提供的本发明的具体实施方式的详细描述并非旨在限制要求保护的本发明的范围,而是仅仅表示本发明的选定具体实施方式。基于本发明的具体实施方式,本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他具体实施方式,都属于本发明保护的范围。
为能进一步了解本发明的发明内容、特点及功效,兹例举以下具体实施方式,并配合附图1和附图2详细说明如下 :
具体实施方式一:
一种编制工程单位矩阵图的方法,包括如下步骤:
S1、定义工程单位矩阵图的数据属性:包括工作内容、分项工程、工作面、工作项;
进一步的,步骤S1的具体实现方法包括如下步骤:
S1.1、定义分项工程:设置分项工程为树形结构,每个树的节点为一个分项工程,一级分项工程下具有二级分项工程,二级分项工程下具有三级分项工程,一级分项工程为一颗树的根节点;
S1.2、定义工作内容:工作内容为一个或者多个分项工程组合成的,通过数组表示工作内容,数组中的每一项为一个一级分项工程;
示例代码如下:
interface TreeItem {
id: string; // 节点id
name: string; // 节点名称
level: number; // 层级
children: TreeItem[] // 下一层数据
}
const node: TreeItem = {具体属性省略} // 生成分项工程节点
const columnTree: Treeitem[] = [node, node] // 生成多个分项工程树;
S1.3、定义工作面、工作项:工作面为工程单位矩阵图的组成部分,以行或者列表示,和工作内容成丛横排版,一个工作面由一个工作名称和一个或者多个工作项组成;当工作面以行形式表示,工作内容以列形式表示;
工作项:工作面和工作内容分别以行和列来表示,每一行和列十字形交叉处的单元格定义为工作项;
示例代码如下:
// 工作名称
interface WorkNameItem {
rowId: string;// 行id
rowName: string;// 工作名称
rowData: Array<WorkItem>// 工作项数组
}
// 工作项
interface WorkItem {
id: string; // 工作项id
rowId: string; // 关联的行id,即关联哪个工作面
columnId: string; // 关联的列id, 即关联哪个分项工程
finish: number | string | null; // 工作项内容
}
S2、构建工程单位矩阵图:采用vue.js框架构建工程单位矩阵图,将步骤S1定义的工程单位矩阵图的数据属性映射到构建的工程单位矩阵图中,设置columnTree表示分项工程数据结构,设置workNameList表示工作面数据结构,将原始数据转换为二维数组进行工程单位矩阵图的数据结构的初始化,得到工程单位矩阵图页面;
进一步的,步骤S2的具体实现方法包括如下步骤:
S2.1、构建工程单位矩阵图的工作内容、分项工程,步骤S2.1的具体实现方法包括如下步骤:
S2.1.1、采用vue.js框架构建工程单位矩阵图,设置工程单位矩阵图表格的表头部分用来表示工作内容的分项工程,设置columnTree表示分项工程数据结构,分项工程为树形结构,则每棵树的同级节点在表头的同一行;
当存在多棵树最大层级不同时,以最大层级的树的最后层级为结束层级,其他树的叶子节点进行行合并;
对于每棵树的每个节点具有下级节点时,节点进行列合并,列合并数目为节点具有的叶子节点数目;
S2.1.2、将分项工程数据结构columnTree转换为渲染表格的二维数组tableHeadData,进行工程单位矩阵图的数据结构的初始化:
S2.1.2.1、首先构造一个空的二维数组tableHeadData: [],深度遍历分项工程的树形结构columnTree,把同一个层级level的节点集合在同一个数组中,然后将该数组置于tableHeadData中,则tableHeadData数组最终数据结构为:
tableHeadData: [
[{level为0的节点1}, {{level为0的节点2}],
[{level为1的节点1},{level为1的节点2}]
]
S2.1.2.2、然后深度遍历分项工程的树形结构,记录每个节点下的叶子节点数量,记录方式是节点id与叶子数量形成一一对应的映射;
S2.1.2.3、遍历2.1.2.1中的tableHeadData的所有节点,在遍历过程中会分三种情况处理:
情况一:如果该节点不是叶子节点,则进行列合并,给该节点添加一个属性colSpan,属性的值根据S2.1.2.2步骤中记录的该节点的id对应的叶子节点数量的映射得到;
情况二:如果该节点不是最后一层级的叶子节点,则进行行合并,给该节点添加一个属性rowSpan,属性的值为最大层级与该节点的层级的层级之差;
情况三:排除情况一和情况二,该节点是叶子节点,不做行、列合并的记录。
S2.1.3、经过步骤S2.1.1-S2.1.2将columnTree转换为符合渲染条件的tableHeadData,然后通过tableHeadData生成具有行列合并单元格的树形表头;
示例代码如下:
// 树转换层级数组的方法
function generateLevelArray(treeData: TreeItem[]) {
const arr = [];
treeForEach(treeData, (item) =>{
if (!Array.isArray(arr[item.level])) {
arr[item.level] = [];
}
arr[item.level].push(item);
});
return arr;
}
// 是否有子节点,一般用来判断是否是叶子节点
function hasChildren(item: TreeItem): boolean {
return Array.isArray(item.children)&&item.children.length>0;
}
// 深度遍历树执行回调函数
function treeForEach(tree: TreeItem[], cb: Function, parent?:TreeItem): void {
const isFunction = typeof cb === 'function';
if (!isFunction) return;
tree.forEach((item, index) =>{
const hasChild = hasChildren(item);
cb(item, index, parent);
if (hasChild) {
treeForEach(item.children, cb, item);
}
});
}
// 记录每个节点下面有几个叶子节点
function getLeafNumberMap(tree: TreeItem): NodeLeafNumberMap {
const nodeLeafNumberMap: NodeLeafNumberMap = Object.create(null);
function deep(node: TreeItem) {
if (!hasChildren(node)) {
nodeLeafNumberMap[node.id] = 1;
return nodeLeafNumberMap[node.id];
}
// 有children 有leaf
if (Object.hasOwn(nodeLeafNumberMap, node.id)) returnnodeLeafNumberMap[node.id];
// 有children 没leaf
let num = 0;
node.children.forEach(item =>{
num += deep(item);
})
nodeLeafNumberMap[node.id] = num;
return num;
}
deep(tree);
return nodeLeafNumberMap;
}
const columnTree: Ref<TreeItem[]>= ref([]); // 分项工程
// 分项工程转换成表头需要渲染的二维数组
const tableHeadData = computed(() =>{
const leafNumberMapList = columnTree.value.map(tree =>getLeafNumberMap(tree));
const leafNumberMap = leafNumberMapList.reduce((prevMap, currentMap)=>
({ ...prevMap, ...currentMap }), Object.create(null))
const levelArray = generateLevelArray(columnTree.value);
const tableHeadData: Array<Array<TableHeadCell>>= [];
const maxLevel = levelArray.length - 1; // 最大层级
levelArray.forEach((level) =>{
const row: Array<TableHeadCell>= [];
level.forEach((treeItem: TreeItem) =>{
if (hasChildren(treeItem)) {
// 非叶子节点列合并
const item: TableHeadCell = {
id: treeItem.id,
name: treeItem.name,
level: treeItem.level,
colspan: leafNumberMap[treeItem.id],
}
row.push(item);
} else if (treeItem.level !== maxLevel) {
// 非末端叶子节点需要行合并
const rowspan = maxLevel - treeItem.level + 1;
const item: TableHeadCell = {
id: treeItem.id,
name: treeItem.name,
level: treeItem.level,
rowspan,
}
row.push(item);
} else {
// 末端叶子节点
const item: TableHeadCell = {
id: treeItem.id,
name: treeItem.name,
level: treeItem.level,
}
row.push(item);
}
});
tableHeadData.push(row);
});
const firstCell: TableHeadCell = { id: FIRST_CELL_ID, name: '工作内容', rowspan: maxLevel + 1, level: 0 };
if (tableHeadData[0]) {
tableHeadData[0].unshift(firstCell);
} else {
tableHeadData[0] = [firstCell]
}
return tableHeadData;
})
/**
* @description 渲染表头单元格
* @param cell 表头树形单元格
*/
function renderTableHeadCell(cell: TableHeadCell) {
function changeHandle(v: string, cell: TableHeadCell) {
nodeFieldChangeHandle(cell.id, 'name', v);
}
return (
<>
<EditCellVue
isEditing={isCellEdit(cell)}
modelValue={cell.name}
onChange={v =>changeHandle(v, cell)}
maxlength={50}
/>
{
(props.mode === MODE_TYPE.CREATE)&&renderHeadCellAction(cell)
}
</>
);
}
// 渲染表头行
function getRenderHeadRow(row) {
let rowFocus = false;
const renderRow = row.map((cell: TableHeadCell) =>{
const cellFocus = isCellFocus(cell);
if (!rowFocus&&cellFocus) {
rowFocus = cellFocus;
}
if (isWorkContentCell(cell)) {
// “工作内容” 单元格
return (
<td
key={cell.id}
rowspan={(cell as RowSpanCell).rowspan}
>
<EditCellVue modelValue={cell.name} isEditing={false} />
</td>
)
}
const classs = `${cellFocus ? 'focus' : ''}`
const clickHandleMap = {
[MODE_TYPE.CREATE]: (e) =>focusCellHandle(cell, e),
[MODE_TYPE.EDIT]: noop,
[MODE_TYPE.READONLY]: noop
}
const domProps = {
class: classs,
key: cell.id,
onClick: clickHandleMap[props.mode],
}
if ((cell as ColSpanCell).colspan) {
return (
<td
colspan={(cell as ColSpanCell).colspan}
{...domProps}
>
{renderTableHeadCell(cell)}
</td>
)
}
if ((cell as RowSpanCell).rowspan) {
return (
<td
rowspan={(cell as RowSpanCell).rowspan}
{...domProps}
>
{renderTableHeadCell(cell)}
</td>
)
}
return<td {...domProps}>{renderTableHeadCell(cell)}</td>
});
return {
renderRow,
rowFocus
}
}
// 渲染表头
function renderTableHead(tableHeadData) {
return tableHeadData.map((row) =>{
const { renderRow, rowFocus } = getRenderHeadRow(row);
const style = rowFocus ? { zIndex: 10 } : {}; // 行的zIndex提升使得 +- icon可以被点击
return<tr key={row[0].id} style={style}>{renderRow}</tr>;
});
}
S2.2、构建工程单位矩阵图的工作面,步骤S2.2的具体实现方法包括如下步骤:
S2.2.1、工程单位矩阵图表格的表体部分由一行或者多行组成,用来表示工作面,每一行第一个单元格用来填写工作面名称,该行的其余单元格用来表示工作项,每一个工作项对象的当前行id用rowId表示,每一个工作项对象的当前列id用columnId表示,通过rowId 、columnId定位工作项所属的工作面、分项工程;
S2.2.2、将工作面workNameList转换为渲染表格的二维数组tableBodyData,进行工程单位矩阵图的数据结构的初始化:首先构造一个空的二维数组list:[],然后遍历workNameList,在每次循环的开始,首先构造一个中间变量row:[]来表示每一行数据,row[0]的位置储存当前工作名称对象,然后row剩余部分由该工作名称下的工作项数组rowData补全,生成表体的一行数据,然后把row放进list里面,最终生成tableBodyData。
示例代码如下:
const tableBodyData = computed(() =>{
const list = [];
workNameList.value.forEach((workNameItem: WorkNameItem) =>{
const cell: BodyRowNameCell = {
id: workNameItem.rowId,
name: workNameItem.rowName,
action: generateCellAction(),
};
const row: Array<BodyRowNameCell | TableBodyCell>= [cell];
workNameItem.rowData.forEach((workItem: WorkItem) =>{
const item: TableBodyCell = {
...workItem,
name: `${workItem.finish ?? ''}`,
action: generateCellAction(),
}
row.push(item);
});
list.push(row);
});
return list;
});
// 渲染表体内容
function renderTableBody(table) {
function changeHandle(v: string, cell: BodyRowNameCell |TableBodyCell) {
const workNameItem: WorkNameItem = workNameCellMap.value[cell.id]
if (workNameItem) {
workNameItem.rowName = v;
return;
}
const workItem: WorkItem = workItemCellMap.value[cell.id]
if (workItem) {
workItem.finish = v
return;
}
}
return table.map((row: Array<BodyRowNameCell | TableBodyCell>) =>{
return<tr key={(row[0] as BodyRowNameCell).id}>
{
row.map((cell, index) =>{
const isFirstCell = index === 0;
const clickHandleMap = {
[MODE_TYPE.CREATE]: (e) =>focusCellHandle(cell, e),
[MODE_TYPE.EDIT]: isFirstCell ? noop : (e) =>focusCellHandle(cell,e),
[MODE_TYPE.READONLY]: noop
}
const cellFocus = isCellFocus(cell);
const classs = `${cellFocus ? 'focus' : ''}`
return (
<td
class={classs}
key={cell.id}
onClick={clickHandleMap[props.mode]}>
<EditCellVue
isEditing={isCellEdit(cell)}
modelValue={cell.name}
onChange={v =>changeHandle(v, cell)}
/>
{
isFirstCell&&(props.mode === MODE_TYPE.CREATE)&&
renderRowAction(workNameList.value.length>1, e =>deleteWorkNameHandle(cell.id), e =>addWorkNameHandle(cell.id))
}
</td>
)
})
}
</tr>;
});
}
S3、在步骤S2得到的工程单位矩阵图页面的单元格进行增加、删除、修改,进行工程单位矩阵图编制。
进一步的,步骤S3的具体实现方法包括如下步骤:
S3.1、在步骤S2得到的工程单位矩阵图页面进行操作,当鼠标在工程单位矩阵图页面点击某个单元格时,该单元格会聚焦高亮,展示选中状态,同时显示附着在单元格旁边的增加、删除图标;
S3.2、通过监听增加、删除图标的点击事件增加、删除单元格内容,在点击单元格的同时,单元格高亮状态下编辑单元格的文本内容,进行工程单位矩阵图编制。
具体实施方式二:
电子设备,包括存储器和处理器,存储器存储有计算机程序,所述的处理器执行所述计算机程序时实现所述的一种编制工程单位矩阵图的方法的步骤。
本发明的计算机装置可以是包括有处理器以及存储器等装置,例如包含中央处理器的单片机等。并且,处理器用于执行存储器中存储的计算机程序时实现上述的一种编制工程单位矩阵图的方法的步骤。
所称处理器可以是中央处理单元(Central Processing Unit,CPU),还可以是其他通用处理器、数字信号处理器 (Digital Signal Processor,DSP)、专用集成电路(Application Specific Integrated Circuit,ASIC)、现成可编程门阵列 (Field-Programmable Gate Array,FPGA) 或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。
所述存储器可主要包括存储程序区和存储数据区,其中,存储程序区可存储操作系统、至少一个功能所需的应用程序(比如声音播放功能、图像播放功能等)等;存储数据区可存储根据手机的使用所创建的数据(比如音频数据、电话本等)等。此外,存储器可以包括高速随机存取存储器,还可以包括非易失性存储器,例如硬盘、内存、插接式硬盘,智能存储卡(Smart Media Card, SMC),安全数字(Secure Digital, SD)卡,闪存卡(Flash Card)、至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。
具体实施方式三:
计算机可读存储介质,其上存储有计算机程序,所述计算机程序被处理器执行时实现所述的一种编制工程单位矩阵图的方法。
本发明的计算机可读存储介质可以是被计算机装置的处理器所读取的任何形式的存储介质,包括但不限于非易失性存储器、易失性存储器、铁电存储器等,计算机可读存储介质上存储有计算机程序,当计算机装置的处理器读取并执行存储器中所存储的计算机程序时,可以实现上述的一种编制工程单位矩阵图的方法的步骤。
所述计算机程序包括计算机程序代码,所述计算机程序代码可以为源代码形式、对象代码形式、可执行文件或某些中间形式等。所述计算机可读介质可以包括:能够携带所述计算机程序代码的任何实体或装置、记录介质、U盘、移动硬盘、磁碟、光盘、计算机存储器、只读存储器(ROM,Read-Only Memory)、随机存取存储器(RAM,Random Access Memory)、电载波信号、电信信号以及软件分发介质等。需要说明的是,所述计算机可读介质包含的内容可以根据司法管辖区内立法和专利实践的要求进行适当的增减,例如在某些司法管辖区,根据立法和专利实践,计算机可读介质不包括电载波信号和电信信号。
需要说明的是,术语“第一”和“第二”等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来,而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且,术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含,从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素,而且还包括没有明确列出的其他要素,或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下,由语句“包括一个……”限定的要素,并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。
虽然在上文中已经参考具体实施方式对本申请进行了描述,然而在不脱离本申请的范围的情况下,可以对其进行各种改进并且可以用等效物替换其中的部件。尤其是,只要不存在结构冲突,本申请所披露的具体实施方式中的各项特征均可通过任意方式相互结合起来使用,在本说明书中未对这些组合的情况进行穷举性的描述仅仅是出于省略篇幅和节约资源的考虑。因此,本申请并不局限于文中公开的特定具体实施方式,而是包括落入权利要求的范围内的所有技术方案。
Claims (8)
1.一种编制工程单位矩阵图的方法,其特征在于,包括如下步骤:
S1、定义工程单位矩阵图的数据属性:包括工作内容、分项工程、工作面、工作项;
S2、构建工程单位矩阵图:采用vue.js框架构建工程单位矩阵图,将步骤S1定义的工程单位矩阵图的数据属性映射到构建的工程单位矩阵图中,设置分项工程数据结构,设置工作面数据结构,将原始数据转换为二维数组进行工程单位矩阵图的数据结构的初始化,得到工程单位矩阵图页面;
S3、在步骤S2得到的工程单位矩阵图页面的单元格进行增加、删除、修改,进行工程单位矩阵图编制。
2.根据权利要求1中所述的一种编制工程单位矩阵图的方法,其特征在于,步骤S1的具体实现方法包括如下步骤:
S1.1、定义分项工程:设置分项工程为树形结构,每个树的节点为一个分项工程,一级分项工程下具有二级分项工程,二级分项工程下具有三级分项工程,一级分项工程为一颗树的根节点;
S1.2、定义工作内容:工作内容为一个或者多个分项工程组合成的,通过数组表示工作内容,数组中的每一项为一个一级分项工程;
S1.3、定义工作面、工作项:工作面为工程单位矩阵图的组成部分,以行或者列表示,和工作内容成丛横排版,一个工作面由一个工作名称和一个或者多个工作项组成;当工作面以行形式表示,工作内容以列形式表示;
工作项:工作面和工作内容分别以行和列来表示,每一行和列十字形交叉处的单元格定义为工作项。
3.根据权利要求2中所述的一种编制工程单位矩阵图的方法,其特征在于,步骤S2的具体实现方法包括如下步骤:
S2.1、构建工程单位矩阵图的工作内容、分项工程;
S2.2、构建工程单位矩阵图的工作面。
4.根据权利要求3所述的一种编制工程单位矩阵图的方法,其特征在于,步骤S2.1的具体实现方法包括如下步骤:
S2.1.1、采用vue.js框架构建工程单位矩阵图,设置工程单位矩阵图表格的表头部分用来表示工作内容的分项工程,设置分项工程数据结构,分项工程数据结构为树形结构,则每棵树的同级节点在表头的同一行;
当存在多棵树最大层级不同时,以最大层级的树的最后层级为结束层级,其他树的叶子节点进行行合并;
对于每棵树的每个节点具有下级节点时,节点进行列合并,列合并数目为节点具有的叶子节点数目;
S2.1.2、将分项工程数据结构转换为渲染表格的分项工程二维数组,进行工程单位矩阵图的分项工程数据结构的初始化:
S2.1.2.1、首先构造一个空的分项工程二维数组,深度遍历分项工程数据结构,把同一个层级的节点集合在同一个数组中,然后将该数组置于构造的空的分项工程二维数组中,则得到分项工程二维数组最终数据结构;
S2.1.2.2、然后深度遍历分项工程数据结构,记录每个节点下的叶子节点数量,记录方式是节点id与叶子数量形成一一对应的映射;
S2.1.2.3、遍历2.1.2.1中的分项工程二维数组的所有节点,在遍历过程中会分三种情况处理:
情况一:如果节点不是叶子节点,则进行列合并,给该节点添加一个属性为列合并,列合并的值根据S2.1.2.2步骤中记录的该节点的id对应的叶子节点数量的映射得到;
情况二:如果节点不是最后一层级的叶子节点,则进行行合并,给该节点添加一个属性为行合并,行合并的值为最大层级与该节点的层级的层级之差;
情况三:排除情况一和情况二,该节点是叶子节点,不做行、列合并的记录;
S2.1.3、经过步骤S2.1.1-S2.1.2将分项工程数据结构转换为符合渲染条件的分项工程二维数组,然后通过分项工程二维数组生成具有行列合并单元格的树形表头。
5.根据权利要求4所述的一种编制工程单位矩阵图的方法,其特征在于,步骤S2.2的具体实现方法包括如下步骤:
S2.2.1、工程单位矩阵图表格的表体部分由一行或者多行组成,用来表示工作面,每一行第一个单元格用来填写工作面名称,该行的其余单元格用来表示工作项,每一个工作项对象的当前行id为行地址,每一个工作项对象的当前列id为列地址,通过行地址 、列地址定位工作项所属的工作面、分项工程;
S2.2.2、将工作面数据结构转换为渲染表格的工作面二维数组,进行工程单位矩阵图的工作面数据结构的初始化:构造一个空的工作面二维数组,然后遍历工作面数据结构,在每次循环的开始,首先构造一个临时数组来表示每一行数据,临时数组索引为0的位置储存当前工作名称对象,然后临时数组剩余索引的位置由该工作名称下的工作项数组数据补全,生成表体的一行数据,然后把该临时数组放进工作面二维数组里面,最终生成工程单位矩阵图的工作面。
6.根据权利要求5所述的一种编制工程单位矩阵图的方法,其特征在于,步骤S3的具体实现方法包括如下步骤:
S3.1、在步骤S2得到的工程单位矩阵图页面进行操作,当鼠标在工程单位矩阵图页面点击某个单元格时,该单元格会聚焦高亮,展示选中状态,同时显示附着在单元格旁边的增加、删除图标;
S3.2、通过监听增加、删除图标的点击事件增加、删除单元格内容,在点击单元格的同时,单元格高亮状态下编辑单元格的文本内容,进行工程单位矩阵图编制。
7.电子设备,其特征在于,包括存储器和处理器,存储器存储有计算机程序,所述的处理器执行所述计算机程序时实现权利要求1-6任一项所述的一种编制工程单位矩阵图的方法的步骤。
8.计算机可读存储介质,其上存储有计算机程序,其特征在于,所述计算机程序被处理器执行时实现权利要求1-6任一项所述的一种编制工程单位矩阵图的方法。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202310346959.XA CN116127936B (zh) | 2023-04-04 | 2023-04-04 | 一种编制工程单位矩阵图的方法、电子设备及存储介质 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202310346959.XA CN116127936B (zh) | 2023-04-04 | 2023-04-04 | 一种编制工程单位矩阵图的方法、电子设备及存储介质 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN116127936A true CN116127936A (zh) | 2023-05-16 |
CN116127936B CN116127936B (zh) | 2023-08-01 |
Family
ID=86306529
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202310346959.XA Active CN116127936B (zh) | 2023-04-04 | 2023-04-04 | 一种编制工程单位矩阵图的方法、电子设备及存储介质 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN116127936B (zh) |
Citations (13)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN102999632A (zh) * | 2012-12-14 | 2013-03-27 | 上海斐讯数据通信技术有限公司 | 一种树形结构数据库的自动读取和提交方法 |
CN104537573A (zh) * | 2014-12-17 | 2015-04-22 | 国家电网公司 | 一种电网运行信息全景可视化展示系统 |
CN105468606A (zh) * | 2014-08-25 | 2016-04-06 | 小米科技有限责任公司 | 网页保存的方法及装置 |
CN107992625A (zh) * | 2017-12-25 | 2018-05-04 | 湖南星汉数智科技有限公司 | 一种网页表格数据自动抽取方法及装置 |
CN109408764A (zh) * | 2018-11-28 | 2019-03-01 | 南京赛克蓝德网络科技有限公司 | 页面区域划分方法、装置、计算设备和介质 |
CN110825364A (zh) * | 2019-11-04 | 2020-02-21 | 浪潮云信息技术有限公司 | 一种基于树形结构的应用模板配置方法 |
CN111832272A (zh) * | 2020-07-20 | 2020-10-27 | 苏州易卖东西信息技术有限公司 | 一种基于element-ui实现表格嵌套表单功能的方法 |
CN113821746A (zh) * | 2021-08-30 | 2021-12-21 | 浪潮软件科技有限公司 | 一种原生html表格组件 |
CN113901022A (zh) * | 2021-09-22 | 2022-01-07 | 成都飞机工业(集团)有限责任公司 | 一种业务与数据关系模型建立方法、装置、设备及存储介质 |
CN114037401A (zh) * | 2021-09-30 | 2022-02-11 | 上汽通用五菱汽车股份有限公司 | 一种基于Django的制造业PFMEA管理系统 |
CN114169303A (zh) * | 2021-12-14 | 2022-03-11 | 平安养老保险股份有限公司 | 基于vue.js的表格编辑方法、装置、设备及介质 |
CN114925665A (zh) * | 2022-06-08 | 2022-08-19 | 杭州比智科技有限公司 | 一种基于web表格的图表数据编辑方法及系统 |
CN115935917A (zh) * | 2022-12-16 | 2023-04-07 | 浩云科技股份有限公司 | 一种可视化图表的数据处理方法、装置、设备及存储介质 |
-
2023
- 2023-04-04 CN CN202310346959.XA patent/CN116127936B/zh active Active
Patent Citations (13)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN102999632A (zh) * | 2012-12-14 | 2013-03-27 | 上海斐讯数据通信技术有限公司 | 一种树形结构数据库的自动读取和提交方法 |
CN105468606A (zh) * | 2014-08-25 | 2016-04-06 | 小米科技有限责任公司 | 网页保存的方法及装置 |
CN104537573A (zh) * | 2014-12-17 | 2015-04-22 | 国家电网公司 | 一种电网运行信息全景可视化展示系统 |
CN107992625A (zh) * | 2017-12-25 | 2018-05-04 | 湖南星汉数智科技有限公司 | 一种网页表格数据自动抽取方法及装置 |
CN109408764A (zh) * | 2018-11-28 | 2019-03-01 | 南京赛克蓝德网络科技有限公司 | 页面区域划分方法、装置、计算设备和介质 |
CN110825364A (zh) * | 2019-11-04 | 2020-02-21 | 浪潮云信息技术有限公司 | 一种基于树形结构的应用模板配置方法 |
CN111832272A (zh) * | 2020-07-20 | 2020-10-27 | 苏州易卖东西信息技术有限公司 | 一种基于element-ui实现表格嵌套表单功能的方法 |
CN113821746A (zh) * | 2021-08-30 | 2021-12-21 | 浪潮软件科技有限公司 | 一种原生html表格组件 |
CN113901022A (zh) * | 2021-09-22 | 2022-01-07 | 成都飞机工业(集团)有限责任公司 | 一种业务与数据关系模型建立方法、装置、设备及存储介质 |
CN114037401A (zh) * | 2021-09-30 | 2022-02-11 | 上汽通用五菱汽车股份有限公司 | 一种基于Django的制造业PFMEA管理系统 |
CN114169303A (zh) * | 2021-12-14 | 2022-03-11 | 平安养老保险股份有限公司 | 基于vue.js的表格编辑方法、装置、设备及介质 |
CN114925665A (zh) * | 2022-06-08 | 2022-08-19 | 杭州比智科技有限公司 | 一种基于web表格的图表数据编辑方法及系统 |
CN115935917A (zh) * | 2022-12-16 | 2023-04-07 | 浩云科技股份有限公司 | 一种可视化图表的数据处理方法、装置、设备及存储介质 |
Non-Patent Citations (4)
Title |
---|
BRAD BOESEN: "BCG Matrix Templates in draw.io", Retrieved from the Internet <URL:drawio-app.com/blog/bcg-matrix-templates-in-draw-io> * |
不详: "Vue 2中的矩阵图", Retrieved from the Internet <URL:3czol.com/xinxijishu/901970.html> * |
刘晓玲 等: "大数据背景下交通调查的创新与交通模型的构建", 《创新驱动于智慧发展——2018中国城市交通规划年会论文集》, pages 3198 - 3206 * |
韩同银 等: "客运专线施工组织信息化项目分解方法研究", 《中国铁路》, pages 28 - 31 * |
Also Published As
Publication number | Publication date |
---|---|
CN116127936B (zh) | 2023-08-01 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN110275889B (zh) | 一种适用于机器学习的特征处理方法及装置 | |
US10423416B2 (en) | Automatic creation of macro-services | |
CN106557307B (zh) | 业务数据的处理方法及处理系统 | |
CN110990403A (zh) | 业务数据的存储方法、系统、计算机设备及存储介质 | |
CN112463149B (zh) | 一种面向软件定义卫星的可复用代码库构建方法与装置 | |
CA3142770A1 (en) | Component linkage configuration method, device, computer equipment and storage medium | |
CN116127936B (zh) | 一种编制工程单位矩阵图的方法、电子设备及存储介质 | |
CN110889272A (zh) | 数据处理方法、装置、设备及存储介质 | |
CN111124938B (zh) | 组件化的测试用例的生成方法 | |
CN112861059A (zh) | 可视化组件生成方法、装置、计算机设备及可读存储介质 | |
CN109947705A (zh) | 一种石油工程数据的存取系统与方法 | |
CN115982177A (zh) | 一种基于树形维度的数据归集的方法、装置、设备及介质 | |
JPH02297284A (ja) | 文書処理システム | |
CN115759025A (zh) | 基于模板文件的Excel数据转换方法、系统、介质及设备 | |
CN114329720A (zh) | 一种ui数据的同步方法、装置、电子设备及存储介质 | |
CN114925127A (zh) | 级联结构数据的二维图表生成方法、装置、存储介质 | |
CN114662119A (zh) | 一种智能合约漏洞检测方法及装置 | |
CN111026705A (zh) | 建筑工程文件管理方法、系统及终端设备 | |
JPH0934938A (ja) | 原価設定方法 | |
US7996366B1 (en) | Method and system for identifying stale directories | |
CN116661768B (zh) | 基于知识图谱的页面代码生成方法、系统、装置和介质 | |
JP5512817B2 (ja) | 情報処理装置、情報処理方法、プログラム、および媒体 | |
CN116954622B (zh) | 抽象语法树和源代码坐标的关联方法、电子设备和介质 | |
CN113779319B (zh) | 一种基于树的高效集合运算系统 | |
US8849866B2 (en) | Method and computer program product for creating ordered data structure |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
GR01 | Patent grant | ||
GR01 | Patent grant |