Skip to content

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

设备树，流向，单页流向

parent dab88572
Expand all Show whitespace changes
Inline Side-by-side
Showing with 323 additions and 8 deletions
package.json
View file @ 6093fcc2
......@@ -40,9 +40,10 @@
},
"dependencies": {
"@riophae/vue-treeselect": "0.4.0",
"arrow-line": "^0.7.5",
"axios": "0.24.0",
"clipboard": "2.0.8",
"common": "file:../frontpackage",
"common": "file:D://FrontPackage/frontpackage",
"core-js": "3.19.1",
"echarts": "^4.9.0",
"element-ui": "2.15.8",
......@@ -52,10 +53,13 @@
"js-beautify": "1.13.0",
"js-cookie": "3.0.1",
"jsencrypt": "3.0.0-rc.1",
"jspdf": "^2.5.2",
"leader-line": "^1.0.7",
"nprogress": "0.2.0",
"quill": "1.3.7",
"screenfull": "5.0.2",
"sortablejs": "1.10.2",
"three": "^0.152.2",
"typescript": "^4.5.2",
"vue": "2.6.12",
"vue-class-component": "^7.2.3",
......@@ -67,11 +71,9 @@
"vue-video-player": "5.0",
"vuedraggable": "^2.24.3",
"vuex": "3.6.0",
"webpackbar": "^6.0.1",
"three": "^0.152.2"
"webpackbar": "^6.0.1"
},
"devDependencies": {
"gsap": "^3.12.2",
"@vue/cli-plugin-babel": "4.4.6",
"@vue/cli-plugin-eslint": "4.4.6",
"@vue/cli-service": "4.4.6",
......@@ -84,6 +86,7 @@
"connect": "3.6.6",
"eslint": "7.15.0",
"eslint-plugin-vue": "7.2.0",
"gsap": "^3.12.2",
"lint-staged": "10.5.3",
"runjs": "4.4.2",
"sass": "1.32.13",
......
public/index.html
View file @ 6093fcc2
......@@ -197,6 +197,7 @@
</style>
<link rel="stylesheet" href="/vt/style/vt.css">
<script src="/vt/libs/three.min.js"></script>
<script src="/leader-line.min.js"></script>
<script src="/vt/vt.js"></script>
</head>
......
public/leader-line.min.js 0 → 100644
View file @ 6093fcc2
This diff is collapsed.
src/components/sbsLazyTree.vue
View file @ 6093fcc2
......@@ -7,9 +7,16 @@
<div v-if="treeTitle" class="treeTitle" style="font-weight: 600;">
{{treeTitle}}
</div>
<div v-if="loading" class="treeBody">
<el-input
placeholder="输入关键字进行过滤"
v-model="filterText">
</el-input>
<el-tree @node-collapse='handleNodeCollapse' :highlight-current='true' :load="loadNode" lazy :props="props"
:rootid='rootid' style="width: 100%;" @node-click="handleNodeClick" ref="tree">
:rootid='rootid' style="width: 100%;" @node-click="handleNodeClick" ref="tree"
:filter-node-method="filterNode"
>
</el-tree>
</div>
</div>
......@@ -21,6 +28,7 @@
除了选中暴露选中事件，其他的props不需要传递
部分prop将会失效
*/
// const { jsPDF } = require('jspdf');
export default {
props: {
/* 当没url时判定静态数据 */
......@@ -68,6 +76,7 @@
},
},
mounted() {
this.$post('sbgl/usbxx/queryroot',{
pid:'root'
}).then(res => {
......@@ -127,6 +136,7 @@
},
data() {
return {
filterText:'',
rootArray: [],
loading: false,
lastNode: null,
......@@ -139,7 +149,21 @@
}
};
},
watch: {
filterText(val) {
// if(val=='pdf'){
// const doc = new jsPDF();
// doc.text('Hello world!', 10, 10);
// doc.save('example.pdf');
// }
this.$refs.tree.filter(val);
}
},
methods: {
filterNode(value, data) {
if (!value) return true;
return data.name.indexOf(value) !== -1;
},
handleNodeCollapse(data, node, instance) {
if (data.id === 'root') {
......
src/router/index.js
View file @ 6093fcc2
......@@ -302,7 +302,13 @@ export const powerRoutes = [
}
]
// 公共路由
export const constantRoutes = [{
export const constantRoutes = [
{
path: '/sblxtree',
component: () => import('@/views/sbxxgl/sblxgx/sblxtree'),
hidden: true
},
{
path: '/redirect',
component: Layout,
hidden: true,
......
src/views/sbxxgl/sblxgx/index.vue
View file @ 6093fcc2
<template>
<div class="outbox">
<!-- 左侧 -->
<BasePage class="min_full" :config="config">
<template #dialog="ctx">
<!-- 嵌入默认页面额外弹框的插槽 ctx.pagePage来操作默认页面 -->
......@@ -9,10 +11,16 @@
</template>
</BasePage>
<!-- 右侧 -->
<div id='sblxtree' class="sblxtree">
<SblxTree/>
</div>
</div>
</template>
<script>
import Edit from './edit.vue'
import SblxTree from './sblxtree'
export default {
name: 'sblxgx',
data() {
......@@ -118,11 +126,23 @@
// }
},
components: {
Edit
Edit,SblxTree
}
}
</script>
<style>
<style lang="scss" scoped>
.outbox{
display: flex;
height: calc(100% - 84px);
width: 100%;
}
.sblxtree{
width: calc(100% - 900px);
height: calc(100vh - 84px);
overflow: auto;
}
</style>
src/views/sbxxgl/sblxgx/sblxtree/index.vue 0 → 100644
View file @ 6093fcc2
<template>
<div class="full padding-content">
<!-- title-->
<div class="sblxtreeTitle">
节点流向关系查询
<!-- 全屏查询-->
<i title='在单独页面查看' @click="toFullPage" style="float: right;line-height: 30px;margin-right: 15px;font-size: 16px;cursor: pointer;" class="el-icon-full-screen"></i>
</div>
<!-- 查询框-->
<div style="padding: 10px;">
<el-row :gutter="20">
<el-col :span="24">
<el-input v-model="dqjd" placeholder="请输入查询节点">
</el-input>
</el-col>
<el-col :span="12">
<div class="padding-10 flex-center">
<el-button @click="cx(true)" size='mini' type="primary">上游查询</el-button>
</div>
</el-col>
<el-col :span="12">
<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" :name="index">
<div class="padding-10 divlist" :id='item.name' :ref="item.name">
</div>
</el-collapse-item>
</el-collapse>
</div>
</div>
</template>
<script>
export default {
mounted() {
this.$nextTick(() => {
const scrollableDiv = document.getElementById('sblxtree');
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 = {
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 => {
let arrobj = new LeaderLine(document.querySelector(`[data-jd="${name+item.syjd}"]`), document
.querySelector(`[data-jd="${name+item.dqjd}"]`), {
path: 'arc',
startPlugColor: '#1a6be0',
endPlugColor: '#1efdaa',
gradient: true,
dash: {
animation: true
}
});
this.arrowLineList.push(arrobj)
})
this.arrowLineList.forEach(item => item.position())
this.lxObj = this.showList[val]
})
} else {
this.arrowLineList.forEach(item => item.remove())
this.arrowLineList = []
this.lxList = []
this.lxObj = {}
}
},
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;
}
.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>
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