323 lines
12 KiB
HTML
323 lines
12 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Document</title>
|
||
|
|
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
|
||
|
|
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body style="text-align:center;">
|
||
|
|
<div id="orgTree" class="OkrTree" style="display: inline-block; zoom:0.5">
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
<style>
|
||
|
|
.content-top {
|
||
|
|
background: rgb(14, 51, 155);
|
||
|
|
color: rgb(255, 255, 255);
|
||
|
|
height: 30px;
|
||
|
|
text-align: center;
|
||
|
|
font-size: 16px;
|
||
|
|
line-height: 30px;
|
||
|
|
font-weight: 900;
|
||
|
|
}
|
||
|
|
|
||
|
|
.content-center {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
width: 100%;
|
||
|
|
height: calc(100% - 30px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.content-left {
|
||
|
|
flex: 1;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.content-right {
|
||
|
|
font-size: 14px;
|
||
|
|
flex: 1;
|
||
|
|
height: 100%;
|
||
|
|
font-weight: 400;
|
||
|
|
background-color: #e6f6ff;
|
||
|
|
color: #000;
|
||
|
|
}
|
||
|
|
|
||
|
|
.content-left img {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.content-right .job {
|
||
|
|
width: 100%;
|
||
|
|
margin: 20px 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.content-right .name {
|
||
|
|
width: 100%;
|
||
|
|
margin-top: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tag-line {
|
||
|
|
width: 200px;
|
||
|
|
height: 0;
|
||
|
|
top: 50%;
|
||
|
|
left: 0%;
|
||
|
|
margin-top: -1px;
|
||
|
|
border-bottom: solid 2px black;
|
||
|
|
position: absolute;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tag-line1 {
|
||
|
|
width: 100px;
|
||
|
|
height: 0;
|
||
|
|
top: 50%;
|
||
|
|
left: 0%;
|
||
|
|
margin-top: -1px;
|
||
|
|
border-bottom: solid 2px black;
|
||
|
|
position: absolute;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tag-row{
|
||
|
|
position: absolute;
|
||
|
|
left:23%;
|
||
|
|
top:115%
|
||
|
|
}
|
||
|
|
|
||
|
|
.add-line {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
border: 0;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.vertical-line {
|
||
|
|
width: 3px;
|
||
|
|
background-color: black;
|
||
|
|
margin-top: -2px;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
</style>
|
||
|
|
</html>
|
||
|
|
|
||
|
|
<script src="./okrTree.js"></script>
|
||
|
|
<script>
|
||
|
|
var json = [];
|
||
|
|
var tagJson = [];
|
||
|
|
|
||
|
|
jQuery.ajax({
|
||
|
|
type: 'get',
|
||
|
|
url:'/api/jhsecond/chart/selectChart',
|
||
|
|
async:false,
|
||
|
|
dataType:'json',
|
||
|
|
success:function (res) {
|
||
|
|
json.push(res.result);
|
||
|
|
tagJson = res.halfResult;
|
||
|
|
},
|
||
|
|
error:function () {
|
||
|
|
console.log("Error")
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
var s = $("#orgTree").OkrTree({
|
||
|
|
data: json, // 数据源
|
||
|
|
isdrop: false, //是否支持拖拽
|
||
|
|
tagTemplate: function(data, path) {
|
||
|
|
if(data.halfType == "true" && tagJson.length > 0) {
|
||
|
|
return [
|
||
|
|
`<div style='width:200px;height:150px;margin-left:200px;' >
|
||
|
|
<div class='tag-line'></div>
|
||
|
|
<div class='content-top'>
|
||
|
|
${data.deptName}
|
||
|
|
</div>
|
||
|
|
<div class='content-center' style="display:${data.show == 0 ? 'flex' : 'none'}">
|
||
|
|
<div class='content-left'>
|
||
|
|
<img src=${data.photoUrl} alr='照片'/>
|
||
|
|
</div>
|
||
|
|
<div class='content-right'>
|
||
|
|
<div class='job'>${data.jobName}</div>
|
||
|
|
<div class='name'>${data.lastName}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class='expandIcon' title='折叠'>-</div>
|
||
|
|
<div class='row tag-row'>
|
||
|
|
<div class='item'>
|
||
|
|
<div class='lineTop'>
|
||
|
|
<div class='line-left'>
|
||
|
|
</div>
|
||
|
|
<div class='line-right top'>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div style='width:200px;height:150px;'>
|
||
|
|
<div class='content-top'>
|
||
|
|
${tagJson[0].deptName}
|
||
|
|
</div>
|
||
|
|
<div class='content-center' style="display:${tagJson[0].show == 0 ? 'flex' : 'none'}">
|
||
|
|
<div class='content-left'>
|
||
|
|
<img src=${tagJson[0].photoUrl} alr='照片'/>
|
||
|
|
</div>
|
||
|
|
<div class='content-right'>
|
||
|
|
<div class='job'>${tagJson[0].jobName}</div>
|
||
|
|
<div class='name'>${tagJson[0].lastName}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class='item'>
|
||
|
|
<div class='lineTop'>
|
||
|
|
<div class='line-left top'>
|
||
|
|
</div>
|
||
|
|
<div class='line-right top'>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div style='width:200px;height:150px;margin-left: 50px'>
|
||
|
|
<div class='content-top'>
|
||
|
|
${tagJson[1].deptName}
|
||
|
|
</div>
|
||
|
|
<div class='content-center' style="display:${tagJson[1].show == 0 ? 'flex' : 'none'}">
|
||
|
|
<div class='content-left'>
|
||
|
|
<img src=${tagJson[1].photoUrl} alr='照片'/>
|
||
|
|
</div>
|
||
|
|
<div class='content-right'>
|
||
|
|
<div class='job'>${tagJson[1].jobName}</div>
|
||
|
|
<div class='name'>${tagJson[1].lastName}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class='item'>
|
||
|
|
<div class='lineTop'>
|
||
|
|
<div class='line-left top'>
|
||
|
|
</div>
|
||
|
|
<div class='line-right top'>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div style='width:200px;height:150px;margin-left: 50px'>
|
||
|
|
<div class='content-top'>
|
||
|
|
${tagJson[2].deptName}
|
||
|
|
</div>
|
||
|
|
<div class='content-center' style="display:${tagJson[2].show == 0 ? 'flex' : 'none'}">
|
||
|
|
<div class='content-left'>
|
||
|
|
<img src=${tagJson[2].photoUrl} alr='照片'/>
|
||
|
|
</div>
|
||
|
|
<div class='content-right'>
|
||
|
|
<div class='job'>${tagJson[2].jobName}</div>
|
||
|
|
<div class='name'>${tagJson[2].lastName}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class='item'>
|
||
|
|
<div class='lineTop'>
|
||
|
|
<div class='line-left top'>
|
||
|
|
</div>
|
||
|
|
<div class='line-right'>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div style='width:200px;height:150px;margin-left: 50px'>
|
||
|
|
<div class='content-top'>
|
||
|
|
${tagJson[3].deptName}
|
||
|
|
</div>
|
||
|
|
<div class='content-center' style="display:${tagJson[3].show == 0 ? 'flex' : 'none'}">
|
||
|
|
<div class='content-left'>
|
||
|
|
<img src=${tagJson[3].photoUrl} alr='照片'/>
|
||
|
|
</div>
|
||
|
|
<div class='content-right'>
|
||
|
|
<div class='job'>${tagJson[3].jobName}</div>
|
||
|
|
<div class='name'>${tagJson[3].lastName}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>`
|
||
|
|
|
||
|
|
].join("");
|
||
|
|
}else {
|
||
|
|
return [
|
||
|
|
`<div style='width:200px;height:150px;margin-left: 100px;'>
|
||
|
|
<div class='tag-line1'></div>
|
||
|
|
<div class='content-top'>
|
||
|
|
${data.deptName}
|
||
|
|
</div>
|
||
|
|
<div class='content-center' style="display:${data.show == 0 ? 'flex' : 'none'}">
|
||
|
|
<div class='content-left'>
|
||
|
|
<img src=${data.photoUrl} alr='照片'/>
|
||
|
|
</div>
|
||
|
|
<div class='content-right'>
|
||
|
|
<div class='job'>${data.jobName}</div>
|
||
|
|
<div class='name'>${data.lastName}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>`
|
||
|
|
].join("");
|
||
|
|
}
|
||
|
|
},
|
||
|
|
itemTemplate: function(data, path) {
|
||
|
|
if(data.addLine == "true") {
|
||
|
|
let height = 110*data.addCount+'px';
|
||
|
|
return [
|
||
|
|
`<div class='add-line' style='height:${height}'>
|
||
|
|
<div class='vertical-line'></div>
|
||
|
|
</div>
|
||
|
|
<div style='width:200px;height:150px;'>
|
||
|
|
<div class='content-top'>
|
||
|
|
${data.deptName}
|
||
|
|
</div>
|
||
|
|
<div class='content-center' style="display:${data.show == 0 ? 'flex' : 'none'}">
|
||
|
|
<div class='content-left'>
|
||
|
|
<img src=${data.photoUrl} alr='照片'/>
|
||
|
|
</div>
|
||
|
|
<div class='content-right'>
|
||
|
|
<div class='job'>${data.jobName}</div>
|
||
|
|
<div class='name'>${data.lastName}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>`
|
||
|
|
].join("");
|
||
|
|
}else {
|
||
|
|
return [
|
||
|
|
`<div style='width:200px;height:150px;'>
|
||
|
|
<div class='content-top'>
|
||
|
|
${data.deptName}
|
||
|
|
</div>
|
||
|
|
<div class='content-center' style="display:${data.show == 0 ? 'flex' : 'none'}">
|
||
|
|
<div class='content-left'>
|
||
|
|
<img src=${data.photoUrl} alr='照片'/>
|
||
|
|
</div>
|
||
|
|
<div class='content-right'>
|
||
|
|
<div class='job'>${data.jobName}</div>
|
||
|
|
<div class='name'>${data.lastName}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</div>`
|
||
|
|
].join("");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// const zoomContainer = document.getElementById('orgTree');
|
||
|
|
// let scale = 0.45;
|
||
|
|
|
||
|
|
// zoomContainer.addEventListener('wheel', function(event) {
|
||
|
|
// event.preventDefault();
|
||
|
|
|
||
|
|
// // Adjust the scale based on the wheel delta
|
||
|
|
// scale += event.deltaY * -0.01;
|
||
|
|
|
||
|
|
// // Limit the scale (optional)
|
||
|
|
// scale = Math.min(Math.max(.5, scale), 3);
|
||
|
|
|
||
|
|
// // Apply the scale transformation
|
||
|
|
// zoomContainer.style.transform = `scale(${scale})`;
|
||
|
|
// });
|
||
|
|
|
||
|
|
|
||
|
|
</script>
|