人员组织图vue3标准版

test
Chengliang 10 months ago
parent fc003ad8ec
commit a3a0a15d98

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

@ -88,14 +88,23 @@ button:focus-visible {
height: 120px;
}
.search-box {
input {
width: 200px;
height: 32px;
border:1px solid #ddd;
outline: none;
border-radius: 5px;
padding-left: 10px;
}
}
.custom-content-top{
height: 30px;
text-align: center;
font-size: 16px;
line-height: 30px;
font-weight: 900;
color: #fff;
background-color: #0e339b;
}
.custom-content-center{

@ -1,6 +1,21 @@
<template>
<div style="height: 95vh;">
<div style="display: flex; padding: 10px;">
<div style="margin-right: 10px"><el-switch v-model="horizontal"></el-switch> 横向</div>
<div style="margin-right: 10px"><el-switch v-model="collapsable"></el-switch> 可收起</div>
<div style="padding: 0 10px 10px">
背景色<ElColorPicker v-model="style.background" size="small"></ElColorPicker>&nbsp;
文字颜色<ElColorPicker v-model="style.color" size="small"></ElColorPicker>&nbsp;
</div>
<div style="margin-right: 10px"><el-button @click="exportImage" type="primary">导出图片</el-button></div>
</div>
<div class="search-box">
<span>搜索</span>
<input type="text" v-model="keyword" placeholder="请输入搜索内容" @keydown.enter="filter" />
</div>
<div style="height: 90vh;">
<vue3-tree-org
ref="tree"
:data="data"
:center="center"
:render-content="renderContent"
@ -10,11 +25,12 @@
:label-style="style"
:scalable="true"
:default-expand-level="10"
:filter-node-method="filterNodeMethod"
>
<!-- 自定义节点内容 -->
<template v-slot="{node}">
<div v-if="node.$$data.type" class="tree-org-node__text node-label">
<div class="custom-content-top">{{node.$$data.deptName}}</div>
<div class="custom-content-top" :style="style">{{node.$$data.deptName}}</div>
<div class="custom-content-center">
<div class="custom-content-left">
<img :src="node.$$data.url" alt="" />
@ -55,111 +71,116 @@
</template>
<script>
import { ElColorPicker,ElButton } from 'element-plus';
import domToImage from 'dom-to-image';
export default {
name: "demo-chart",
components: {
ElColorPicker,ElButton
},
data() {
return {
data: {
"id":1,"type":true,"deptName":"董事办","jobName":"董事长","lastName":"康晴","url":"/src/assets/photo.png",
"id":1,"type":true,"label":"董事办","deptName":"董事办","jobName":"董事长","lastName":"康晴","url":"./photo.png",
"children":[
{
"id":2,"pid":1,"type":true,"deptName":"股份公司","jobName":"总经理","lastName":"徐金尧","url":"/src/assets/photo.png",
"id":2,"pid":1,"type":true,"label":"股份公司","deptName":"股份公司","jobName":"总经理","lastName":"徐金尧","url":"./photo.png",
"children":[
{"id":11,"pid":3,"type":true,"deptName":"股份公司","jobName":"研发副总","lastName":"张清龙","url":"/src/assets/photo1.png",
{"id":11,"pid":3,"type":true,"label":"股份公司","deptName":"股份公司","jobName":"研发副总","lastName":"张清龙","url":"./photo1.png",
"children":[
{"id":24,"pid":11,"type":true,"deptName":"研发部","jobName":"经理","lastName":"王益民","url":"/src/assets/photo1.png",
{"id":24,"pid":11,"type":true,"label":"研发部","deptName":"研发部","jobName":"经理","lastName":"王益民","url":"./photo1.png",
"children":[
{"id":26,"pid":24,"type":true,"deptName":"项目一组","jobName":"项目主管","lastName":"曾甘霖","url":"/src/assets/photo1.png",
{"id":26,"pid":24,"type":true,"label":"项目一组","deptName":"项目一组","jobName":"项目主管","lastName":"曾甘霖","url":"./photo1.png",
"children":[
{"id":null,"pid":26,"type":false,"deptName":"项目一组",
"list":[{"id":32,"jobName":"项目工程师","lastName":"王益民","url":"/src/assets/photo1.png"},
{"id":33,"jobName":"产品工程师","lastName":"王培文","url":"/src/assets/photo1.png"},
{"id":34,"jobName":"电子工程师","lastName":"刘冲文","url":"/src/assets/photo1.png"},
{"id":35,"jobName":"助理工程师","lastName":"从明姓","url":"/src/assets/photo1.png"}]
{"id":null,"pid":26,"type":false,"label":"项目一组","deptName":"项目一组",
"list":[{"id":32,"jobName":"项目工程师","lastName":"王益民","url":"./photo1.png"},
{"id":33,"jobName":"产品工程师","lastName":"王培文","url":"./photo1.png"},
{"id":34,"jobName":"电子工程师","lastName":"刘冲文","url":"./photo1.png"},
{"id":35,"jobName":"助理工程师","lastName":"从明姓","url":"./photo1.png"}]
}
]
},
{"id":27,"pid":24,"type":true,"deptName":"项目二组","jobName":"项目主管","lastName":"杨先念","url":"/src/assets/photo1.png",
{"id":27,"pid":24,"type":true,"label":"项目二组","deptName":"项目二组","jobName":"项目主管","lastName":"杨先念","url":"./photo1.png",
"children":[
{"id":null,"pid":27,"type":false,"deptName":"项目二组",
"list":[{"id":32,"jobName":"产品工程师","lastName":"葛光领","url":"/src/assets/photo1.png"},
{"id":37,"jobName":"助理工程师","lastName":"周杰","url":"/src/assets/photo1.png"}]
{"id":null,"pid":27,"type":false,"label":"项目二组","deptName":"项目二组",
"list":[{"id":32,"jobName":"产品工程师","lastName":"葛光领","url":"./photo1.png"},
{"id":37,"jobName":"助理工程师","lastName":"周杰","url":"./photo1.png"}]
}
]
},
{"id":28,"pid":24,"type":true,"deptName":"项目三组","jobName":"项目主管","lastName":"肖辉","url":"/src/assets/photo1.png",
{"id":28,"pid":24,"type":true,"label":"项目三组","deptName":"项目三组","jobName":"项目主管","lastName":"肖辉","url":"./photo1.png",
"children":[
{"id":null,"pid":28,"type":false,"deptName":"项目三组",
"list":[{"id":38,"jobName":"项目工程师","lastName":"张束尼","url":"/src/assets/photo1.png"},
{"id":39,"jobName":"设计工程师","lastName":"徐恩广","url":"/src/assets/photo1.png"},
{"id":40,"jobName":"产品工程师","lastName":"蔡任杰","url":"/src/assets/photo1.png"},
{"id":41,"jobName":"电子工程师","lastName":"张春雷","url":"/src/assets/photo1.png"},
{"id":42,"jobName":"电子工程师","lastName":"水成峰","url":"/src/assets/photo1.png"},
{"id":43,"jobName":"电子工程师","lastName":"宋红涛","url":"/src/assets/photo1.png"}]
{"id":null,"pid":28,"type":false,"label":"项目三组","deptName":"项目三组",
"list":[{"id":38,"jobName":"项目工程师","lastName":"张束尼","url":"./photo1.png"},
{"id":39,"jobName":"设计工程师","lastName":"徐恩广","url":"./photo1.png"},
{"id":40,"jobName":"产品工程师","lastName":"蔡任杰","url":"./photo1.png"},
{"id":41,"jobName":"电子工程师","lastName":"张春雷","url":"./photo1.png"},
{"id":42,"jobName":"电子工程师","lastName":"水成峰","url":"./photo1.png"},
{"id":43,"jobName":"电子工程师","lastName":"宋红涛","url":"./photo1.png"}]
}
]
},
{"id":29,"pid":24,"type":true,"deptName":"项目四组","jobName":"项目主管","lastName":"陈金","url":"/src/assets/photo1.png",
{"id":29,"pid":24,"type":true,"label":"项目四组","deptName":"项目四组","jobName":"项目主管","lastName":"陈金","url":"./photo1.png",
"children":[
{"id":null,"pid":29,"type":false,"deptName":"项目四组",
"list":[{"id":44,"jobName":"项目工程师","lastName":"丁撵","url":"/src/assets/photo1.png"},
{"id":45,"jobName":"电子工程师","lastName":"卓笋峰","url":"/src/assets/photo1.png"}]
{"id":null,"pid":29,"type":false,"label":"项目四组","deptName":"项目四组",
"list":[{"id":44,"jobName":"项目工程师","lastName":"丁撵","url":"./photo1.png"},
{"id":45,"jobName":"电子工程师","lastName":"卓笋峰","url":"./photo1.png"}]
}
]
},
{"id":30,"pid":24,"type":true,"deptName":"项目五组","jobName":"项目主管","lastName":"马先赫","url":"/src/assets/photo1.png",},
{"id":31,"pid":24,"type":true,"deptName":"项目六组","jobName":"项目主管","lastName":"张佳尔","url":"/src/assets/photo1.png",
{"id":30,"pid":24,"type":true,"label":"项目五组","deptName":"项目五组","jobName":"项目主管","lastName":"马先赫","url":"./photo1.png",},
{"id":31,"pid":24,"type":true,"label":"项目六组","deptName":"项目六组","jobName":"项目主管","lastName":"张佳尔","url":"./photo1.png",
"children":[
{"id":null,"pid":31,"type":false,"deptName":"项目六组",
"list":[{"id":46,"jobName":"资深步进工程师","lastName":"张茶生","url":"/src/assets/photo1.png"}]
{"id":null,"pid":31,"type":false,"label":"项目六组","deptName":"项目六组",
"list":[{"id":46,"jobName":"资深步进工程师","lastName":"张茶生","url":"./photo1.png"}]
}
]
},
{"id":32,"pid":24,"type":true,"deptName":"研发部","jobName":"研发文控","lastName":"于童","url":"/src/assets/photo1.png",}
{"id":32,"pid":24,"type":true,"label":"研发部","deptName":"研发部","jobName":"研发文控","lastName":"于童","url":"./photo1.png",}
]
},
{"id":25,"pid":11,"type":true,"deptName":"股份公司","jobName":"技术总工","lastName":"吴海松","url":"/src/assets/photo.png",},
{"id":25,"pid":11,"type":true,"label":"股份公司","deptName":"股份公司","jobName":"技术总工","lastName":"吴海松","url":"./photo.png",},
]
},
{"id":12,"pid":3,"type":true,"deptName":"采购部","jobName":"经理","lastName":"杨林达","url":"/src/assets/photo1.png",},
{"id":13,"pid":3,"type":true,"deptName":"财务部","jobName":"经理","lastName":"杨清","url":"/src/assets/photo1.png",},
{"id":14,"pid":3,"type":true,"deptName":"品管部","jobName":"经理","lastName":"黄清华","url":"/src/assets/photo1.png",
{"id":12,"pid":3,"type":true,"label":"采购部","deptName":"采购部","jobName":"经理","lastName":"杨林达","url":"./photo1.png",},
{"id":13,"pid":3,"type":true,"label":"财务部","deptName":"财务部","jobName":"经理","lastName":"杨清","url":"./photo1.png",},
{"id":14,"pid":3,"type":true,"label":"品管部","deptName":"品管部","jobName":"经理","lastName":"黄清华","url":"./photo1.png",
"children":[
{"id":16,"pid":14,"type":true,"deptName":"品管部","jobName":"测试中心主管","lastName":"李其攒","url":"/src/assets/photo1.png",
{"id":16,"pid":14,"type":true,"label":"品管部","deptName":"品管部","jobName":"测试中心主管","lastName":"李其攒","url":"./photo1.png",
"children":[
{"id":null,"pid":16,"type":false,"deptName":"品管部",
"list":[{"id":47,"jobName":"测试工程师","lastName":"陈中娟","url":"/src/assets/photo1.png"},
{"id":48,"jobName":"测试员","lastName":"闵贾娟","url":"/src/assets/photo1.png"},
{"id":null,"pid":16,"type":false,"label":"品管部","deptName":"品管部",
"list":[{"id":47,"jobName":"测试工程师","lastName":"陈中娟","url":"./photo1.png"},
{"id":48,"jobName":"测试员","lastName":"闵贾娟","url":"./photo1.png"},
]
}
]
},
{"id":17,"pid":14,"type":true,"deptName":"品管部","jobName":"质量主管","lastName":"苏畅","url":"/src/assets/photo1.png",
{"id":17,"pid":14,"type":true,"label":"品管部","deptName":"品管部","jobName":"质量主管","lastName":"苏畅","url":"./photo1.png",
"children":[
{"id":null,"pid":14,"type":false,"deptName":"品管部",
"list":[{"id":51,"jobName":"质量工程师","lastName":"文涛","url":"/src/assets/photo1.png"}]
{"id":null,"pid":14,"type":false,"label":"品管部","deptName":"品管部",
"list":[{"id":51,"jobName":"质量工程师","lastName":"文涛","url":"./photo1.png"}]
}
]
},
{"id":18,"pid":14,"type":true,"deptName":"品管部","jobName":"质量主管","lastName":"王海军","url":"/src/assets/photo1.png",
{"id":18,"pid":14,"type":true,"label":"品管部","deptName":"品管部","jobName":"质量主管","lastName":"王海军","url":"./photo1.png",
"children":[
{"id":null,"pid":18,"type":false,"deptName":"品管部",
"list":[{"id":49,"jobName":"质量工程师","lastName":"吴佳伟","url":"/src/assets/photo1.png"},
{"id":50,"jobName":"助理设备工程师","lastName":"朱江海","url":"/src/assets/photo1.png"},
{"id":null,"pid":18,"type":false,"label":"品管部","deptName":"品管部",
"list":[{"id":49,"jobName":"质量工程师","lastName":"吴佳伟","url":"./photo1.png"},
{"id":50,"jobName":"助理设备工程师","lastName":"朱江海","url":"./photo1.png"},
]
}
]
},
{"id":19,"pid":14,"type":true,"deptName":"品管部","jobName":"文员","lastName":"袁吉","url":"/src/assets/photo1.png"}
{"id":19,"pid":14,"type":true,"label":"品管部","deptName":"品管部","jobName":"文员","lastName":"袁吉","url":"./photo1.png"}
]
},
{"id":23,"pid":3,"type":true,"deptName":"股份公司","jobName":"常务副总经理","lastName":"房家全","url":"/src/assets/photo.png",
{"id":23,"pid":3,"type":true,"label":"股份公司","deptName":"股份公司","jobName":"常务副总经理","lastName":"房家全","url":"./photo.png",
"children":[
{"id":15,"pid":23,"type":true,"deptName":"物流部","jobName":"经理","lastName":"吴亮亮","url":"/src/assets/photo1.png"},
{"id":20,"pid":23,"type":true,"deptName":"总经办","jobName":"经理","lastName":"吴亮亮","url":"/src/assets/photo1.png"},
{"id":21,"pid":23,"type":true,"deptName":"人力资源部","jobName":"经理","lastName":"吴亮亮","url":"/src/assets/photo1.png"},
{"id":22,"pid":23,"type":true,"deptName":"信息管理部","jobName":"经理","lastName":"吴亮亮","url":"/src/assets/photo1.png"},
{"id":15,"pid":23,"type":true,"label":"物流部","deptName":"物流部","jobName":"经理","lastName":"吴亮亮","url":"./photo1.png"},
{"id":20,"pid":23,"type":true,"label":"总经办","deptName":"总经办","jobName":"经理","lastName":"吴亮亮","url":"./photo1.png"},
{"id":21,"pid":23,"type":true,"label":"人力资源部","deptName":"人力资源部","jobName":"经理","lastName":"吴亮亮","url":"./photo1.png"},
{"id":22,"pid":23,"type":true,"label":"信息管理部","deptName":"信息管理部","jobName":"经理","lastName":"吴亮亮","url":"./photo1.png"},
]
},
@ -167,22 +188,23 @@ export default {
]
},
{
"id":3,"pid":1,"type":true,"deptName":"董事办","jobName":"董事会秘书","lastName":"邹文霞","url":"/src/assets/photo.png",
"id":3,"pid":1,"type":true,"label":"董事办","deptName":"董事办","jobName":"董事会秘书","lastName":"邹文霞","url":"./photo.png",
"children":[
{"id":6,"pid":2,"type":true,"deptName":"董事办","jobName":"行政助理","lastName":"项瑜","url":"/src/assets/photo1.png",},
{"id":8,"pid":2,"type":true,"deptName":"董事办","jobName":"董事会秘书","lastName":"董周斌","url":"/src/assets/photo1.png",}
{"id":6,"pid":2,"type":true,"label":"董事办","deptName":"董事办","jobName":"行政助理","lastName":"项瑜","url":"./photo1.png",},
{"id":8,"pid":2,"type":true,"label":"董事办","deptName":"董事办","jobName":"董事会秘书","lastName":"董周斌","url":"./photo1.png",}
]
},
]
},
keyword:'',
center:true,
horizontal: false,
collapsable: true,
expandAll: true,
style: {
background: "#fff",
color: "#5e6d82",
background: "#0e339b",
color: "#ffffff",
},
};
},
@ -200,6 +222,28 @@ export default {
expandChange() {
this.toggleExpand(this.data, this.expandAll);
},
filter(){
this.$refs.tree.filter(this.keyword)
},
filterNodeMethod(value, data) {
console.log(value, data)
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
exportImage() {
const treeOrgEl = this.$refs.tree.$el;
domToImage.toPng(treeOrgEl) // PNG
.then(function (dataURL) {
const link = document.createElement('a');
link.href = dataURL;
link.download = 'tree_image.png';
link.click();
link.remove();
})
.catch(function (error) {
console.error('导出图片出错:', error);
});
}
},
};
</script>

@ -4,11 +4,12 @@ import path from 'path';
// https://vitejs.dev/config/
export default defineConfig({
base: './', //设置打包相对路径
plugins: [vue()],
resolve: {
alias: {
// 配置别名路径
'@': path.resolve(__dirname, './src'),
'@': path.resolve(__dirname, 'src'),
},
},

Loading…
Cancel
Save