Skip to content

Z
zghywpc-vue
Commit add99fce authored by 李苏's avatar 李苏 💬
Browse files
Options

末端标识，弹出单页面查看

parent e25a75b0
Hide whitespace changes
Inline Side-by-side
Showing with 371 additions and 14 deletions
src/router/index.js
View file @ add99fce
......@@ -305,7 +305,7 @@ export const powerRoutes = [
export const constantRoutes = [
{
path: '/sblxtree',
component: () => import('@/views/sbxxgl/sblxgx/sblxtree'),
component: () => import('@/views/sbxxgl/sblxgx/sblxtree/fullPage'),
hidden: true
},
{
......
src/views/sbxxgl/sblxgx/sblxtree/fullPage/index.vue 0 → 100644
View file @ add99fce
<template>
<div class="full padding-content">
<!-- title-->
<div class="sblxtreeTitle">
节点流向关系查询
<!-- 全屏查询-->
</div>
<!-- 查询框-->
<div style="padding: 10px;">
<el-row :gutter="20">
<el-col :span="19" class="padding-10 flex-center" >
<el-input v-model="dqjd" placeholder="请输入查询节点">
</el-input>
</el-col>
<el-col :span="2">
<div class="padding-10 flex-center">
<el-button @click="cx(true)" size='mini' type="primary">上游查询</el-button>
</div>
</el-col>
<el-col :span="2">
<div class="padding-10 flex-center">
<el-button @click="cx(false)" size='mini' type="primary">下游查询</el-button>
</div>
</el-col>
</el-col>
</el-row>
</div>
<div v-if="showList.length==0" class="flex-center" style="color: #999;font-size: 18px;line-height: 400px">
暂无数据
</div>
<!-- 手风琴折叠面板-->
<div v-if="showList.length!=0" class="padding-10">
<el-collapse v-model='activeName' @change='change' accordion>
<el-collapse-item v-for="(item,index) in showList" :title="`${item.name}(${item.lx})`" :name="index">
<!-- -->
<!-- <i title='保存流向' @click="savefile()"
style="float: right;line-height: 30px;margin-right: 15px;font-size: 16px;cursor: pointer;"
class="el-icon-paperclip"></i> -->
<div class="padding-10 divlist" :id='item.name' :ref="item.name">
</div>
</el-collapse-item>
</el-collapse>
</div>
</div>
</template>
<script>
const html2canvas = require('html2canvas');
export default {
mounted() {
this.$nextTick(() => {
const scrollableDiv = document.body
scrollableDiv.addEventListener('scroll', () => {
this.arrowLineList.forEach(item => item.position())
});
})
this.timer = setInterval(() => {
this.arrowLineList.forEach(item => item.position())
}, 500)
},
beforeDestroy() {
this.arrowLineList.forEach(item => item.remove())
this.arrowLineList = []
clearInterval(this.timer)
this.activeName = -1
},
deactivated() {
this.arrowLineList.forEach(item => item.remove())
this.arrowLineList = []
this.activeName = -1
},
data() {
return {
dqjd: '',
activeName: -1,
sylist: {},
showList: [],
arrowLineList: [],
lxObj: {},
timer: null
}
},
methods: {
/* 上游查询构建*/
// buildUpTree(apidata) {
// },
cx(isUp) {
this.activeName = -1
this.arrowLineList.forEach(item => item.remove())
this.showList = []
this.arrowLineList = []
this.lxObj = {}
if (!this.dqjd) {
this.$warning('请输入查询节点')
} else {
this.$post('sbgl/usblxgx/tree/groups', {
isUp,
sbxxCode: this.dqjd
}).then(res => {
this.sbxxCode = this.dqjd
this.sylist = res.data.records || {}
let keyList = Object.keys(this.sylist)
keyList.forEach(key => {
let item = {
lx:isUp?'上游':'下游',
name: key,
data: this.sylist[key]
}
this.showList.push(item)
})
/* 绘制流向*/
this.$nextTick(() => {
/* 外层div*/
this.showList.forEach(item => {
this.hzlx(item)
})
})
})
}
},
/* 绘制指向*/
/* 绘制流向*/
hzlx(data) {
/* dom*/
let $dom = $(this.$refs[data.name])
let lxList = data.data
lxList.forEach(item => {
/* 判定溯源节点/当前节点
存在溯源节点，就把子节点插入到后面
如果不存在溯源节点，然后判定是否存在当前节点，如果存在就插入当前节点之前，不存在就新建溯源插入子节点
*/
if ($dom.find(`[data-jd=${data.name+item.syjd}]`).length == 0) {
// $($dom.find(`[data-jd=${item.syjd}]`)[0]).after(`<div data-jd=${item.dqjd} class="jd">${item.dqjd}</div>`)
if ($dom.find(`[data-jd=${data.name+item.dqjd}]`).length == 0) {
/* 都没有的情况*/
$dom.append(
`<div data-jd=${data.name+item.syjd} class="jd">${item.syjd}</div><div data-jd=${data.name+item.dqjd} class="jd">${item.dqjd}</div>`
)
} else {
$($dom.find(`[data-jd=${data.name+item.dqjd}]`)[0]).before(
`<div data-jd=${data.name+item.syjd} class="jd">${item.syjd}</div>`)
}
} else {
/* 存在溯源节点，插入子节点在溯源节点之后*/
if ($dom.find(`[data-jd=${data.name+item.dqjd}]`).length == 0) {
$($dom.find(`[data-jd=${data.name+item.syjd}]`)[0]).after(
`<div data-jd=${data.name+item.dqjd} class="jd">${item.dqjd}</div>`)
} else {
console.log('存在溯源节点和当前节点之前已存在', data.name)
}
}
})
},
change(val) {
if (this.showList[val]) {
this.$nextTick(() => {
this.arrowLineList.forEach(item => item.remove())
this.arrowLineList = []
let name = this.showList[val].name
let lxList = this.showList[val].data
lxList.forEach(item => {
if (item.syjd == item.dqjd) {
console.log(`绘制${item.syjd}====>${item.dqjd}节点重复,取消绘制`)
} else {
let arrobj = new LeaderLine(document.querySelector(`[data-jd="${name+item.syjd}"]`), document
.querySelector(`[data-jd="${name+item.dqjd}"]`), {
path: 'arc',
startPlugColor: '#1a6be0',
endPlugColor: '#1efdaa',
// startSocket:'boottom',
// endSocket:'top',
size: 2,
gradient: true,
dash: {
animation: true
}
});
this.arrowLineList.push(arrobj)
}
})
/* 判定哪些是终端节点而不是上游节点*/
let syjdList = lxList.map(lxitem => lxitem.syjd)
let zddjList = []
lxList.forEach(item => {
if (!syjdList.includes(item.dqjd)) {
zddjList.push(item.dqjd)
}
})
zddjList.forEach(item => {
document.querySelector(`[data-jd="${name+item}"]`).classList.add('zdClass'); // 添加一个类
})
/* -----*/
this.arrowLineList.forEach(item => item.position())
this.lxObj = this.showList[val]
})
} else {
this.arrowLineList.forEach(item => item.remove())
this.arrowLineList = []
this.lxList = []
this.lxObj = {}
}
},
savefile() {
const element = document.getElementsByName('body');
html2canvas(element).then(canvas => {
const imgData = canvas.toDataURL('image/png');
var link = document.createElement('a');
link.href = imgData;
link.download = 'image.png';
link.click();
link.remove()
});
},
toFullPage() {
const url = `${location.origin}/#/sblxtree`
window.open(url, '_blank'); // 第二个参数 '_blank' 表示在新窗口或标签页中打开
}
}
}
</script>
<style>
.jd {
height: 30px;
width: 100px;
background-color: #0b90ce;
color: #fff;
margin-bottom: 40px;
line-height: 30px;
text-align: center;
}
.zdClass {
animation: glow 1.5s infinite alternate
}
@keyframes glow {
0% {
box-shadow: 0 0 2px #3498db, 0 0 2px #3498db, 0 0 2px #3498db, 0 0 2px #3498db;
}
25% {
box-shadow: 0 0 2px #ffff00, 0 0 2px #ffff00, 0 0 2px #ffff00, 0 0 2px #ffff00;
}
50% {
box-shadow: 0 0 2px #aa00ff, 0 0 2px #aa00ff, 0 0 2px #aa00ff, 0 0 2px #aa00ff;
}
75% {
box-shadow: 0 0 2px #ffff00, 0 0 2px #ffff00, 0 0 2px #ffff00, 0 0 2px #ffff00;
}
100% {
box-shadow: 0 0 2px #3498db, 0 0 2px #3498db, 0 0 2px #3498db, 0 0 2px #3498db;
}
}
.navbar {
z-index: 999;
}
.el-scrollbar__view {
z-index: 999;
}
#scrollPane {
z-index: 999;
}
</style>
<style lang="scss" scoped>
.full {}
.sblxtreeTitle {
line-height: 30px;
font-size: 14px;
color: #666;
text-align: center;
font-weight: 700;
}
.padding-10 {
padding: 10px;
}
::v-deep .el-scrollbar__view {
z-index: 999999;
}
::v-deep .navbar {
z-index: 999999;
}
.divlist {
display: flex;
justify-content: center;
/* 水平居中 */
align-items: center;
flex-direction: column;
/* 垂直居中 */
}
</style>
src/views/sbxxgl/sblxgx/sblxtree/index.vue
View file @ add99fce
......@@ -12,7 +12,7 @@
<div style="padding: 10px;">
<el-row :gutter="20">
<el-col :span="24">
<el-input v-model="dqjd" placeholder="请输入查询节点">
<el-input @focus="toFullPage" v-model="dqjd" placeholder="请输入查询节点">
</el-input>
</el-col>
<el-col :span="12">
......@@ -35,9 +35,9 @@
<!-- 手风琴折叠面板-->
<div v-if="showList.length!=0" class="padding-10">
<el-collapse v-model='activeName' @change='change' accordion>
<el-collapse-item v-for="(item,index) in showList" :title="item.name" :name="index">
<el-collapse-item v-for="(item,index) in showList" :title="`${item.name}(${item.lx})`" :name="index">
<!-- -->
<!-- <i title='保存流向' @click="savefile()"
<!-- <i title='保存流向' @click="savefile()"
style="float: right;line-height: 30px;margin-right: 15px;font-size: 16px;cursor: pointer;"
class="el-icon-paperclip"></i> -->
<div class="padding-10 divlist" :id='item.name' :ref="item.name">
......@@ -52,7 +52,6 @@
</template>
<script>
const html2canvas = require('html2canvas');
export default {
mounted() {
......@@ -112,6 +111,7 @@
let keyList = Object.keys(this.sylist)
keyList.forEach(key => {
let item = {
lx:isUp?'上游':'下游',
name: key,
data: this.sylist[key]
}
......@@ -160,12 +160,7 @@
console.log('存在溯源节点和当前节点之前已存在', data.name)
}
}
})
},
change(val) {
......@@ -176,14 +171,17 @@
let name = this.showList[val].name
let lxList = this.showList[val].data
lxList.forEach(item => {
if(item.syjd==item.dqjd){
if (item.syjd == item.dqjd) {
console.log(`绘制${item.syjd}====>${item.dqjd}节点重复,取消绘制`)
}else{
} else {
let arrobj = new LeaderLine(document.querySelector(`[data-jd="${name+item.syjd}"]`), document
.querySelector(`[data-jd="${name+item.dqjd}"]`), {
path: 'arc',
startPlugColor: '#1a6be0',
endPlugColor: '#1efdaa',
// startSocket:'boottom',
// endSocket:'top',
size: 2,
gradient: true,
dash: {
animation: true
......@@ -191,9 +189,25 @@
});
this.arrowLineList.push(arrobj)
}
})
/* 判定哪些是终端节点而不是上游节点*/
let syjdList = lxList.map(lxitem => lxitem.syjd)
let zddjList = []
lxList.forEach(item => {
if (!syjdList.includes(item.dqjd)) {
zddjList.push(item.dqjd)
}
})
zddjList.forEach(item => {
document.querySelector(`[data-jd="${name+item}"]`).classList.add('zdClass'); // 添加一个类
})
/* -----*/
this.arrowLineList.forEach(item => item.position())
this.lxObj = this.showList[val]
})
......@@ -207,7 +221,7 @@
},
savefile(){
savefile() {
const element = document.getElementsByName('body');
html2canvas(element).then(canvas => {
const imgData = canvas.toDataURL('image/png');
......@@ -237,6 +251,27 @@
line-height: 30px;
text-align: center;
}
.zdClass {
animation: glow 1.5s infinite alternate
}
@keyframes glow {
0% {
box-shadow: 0 0 2px #3498db, 0 0 2px #3498db, 0 0 2px #3498db, 0 0 2px #3498db;
}
25% {
box-shadow: 0 0 2px #ffff00, 0 0 2px #ffff00, 0 0 2px #ffff00, 0 0 2px #ffff00;
}
50% {
box-shadow: 0 0 2px #aa00ff, 0 0 2px #aa00ff, 0 0 2px #aa00ff, 0 0 2px #aa00ff;
}
75% {
box-shadow: 0 0 2px #ffff00, 0 0 2px #ffff00, 0 0 2px #ffff00, 0 0 2px #ffff00;
}
100% {
box-shadow: 0 0 2px #3498db, 0 0 2px #3498db, 0 0 2px #3498db, 0 0 2px #3498db;
}
}
.navbar {
z-index: 999;
......@@ -281,4 +316,6 @@
flex-direction: column;
/* 垂直居中 */
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment