Skip to content

T
template_vue
Commit a2f38d94 authored by 张伯涛's avatar 张伯涛
Browse files
Options

bug修改

parent 5cc57b6f
Hide whitespace changes
Inline Side-by-side
Showing with 1257 additions and 43 deletions
src/api/planeGraph.js
View file @ a2f38d94
...@@ -19,10 +19,11 @@ import request from '@/utils/request' ...@@ -19,10 +19,11 @@ import request from '@/utils/request'
// 查询最近一条数据 // 查询最近一条数据
export function findLatestData() { export function findLatestData(query) {
return request({ return request({
url: '/bichnography/findLatestData', url: '/bichnography/findLatestData',
method: 'get', method: 'get',
params: query
}) })
} }
......
src/views/template/graph/graphWatch.vue
View file @ a2f38d94
...@@ -559,9 +559,9 @@ export default { ...@@ -559,9 +559,9 @@ export default {
mounted() { mounted() {
console.log('11111',this.$route.query.type)
let dataToWatch = JSON.parse(localStorage.getItem('dataToWatch')); let dataToWatch = JSON.parse(localStorage.getItem(this.$route.query.type + 'dataToWatch'));
console.log('dataToWatch',dataToWatch)
let backDiv = document.getElementById('popSuperBack') let backDiv = document.getElementById('popSuperBack')
backDiv.style.backgroundImage = dataToWatch.background backDiv.style.backgroundImage = dataToWatch.background
......
src/views/template/planeGraph.vue
View file @ a2f38d94
...@@ -14,6 +14,16 @@ ...@@ -14,6 +14,16 @@
<!-- 左侧控制列 --> <!-- 左侧控制列 -->
<div class="node-container"> <div class="node-container">
<div>
<el-select v-model="queryForm.type" placeholder="请选择" @change="changeType">
<el-option
v-for="(item,index) in typeOptions"
:key="index"
:label="item.label"
:value="item.value"
/>
</el-select>
</div>
<!-- 遍历nodeList里面的项,这应该就是左侧的选项卡列表 --> <!-- 遍历nodeList里面的项,这应该就是左侧的选项卡列表 -->
<!-- 这个卡也跟着缩放了,感觉不太对劲 --> <!-- 这个卡也跟着缩放了,感觉不太对劲 -->
<div <div
...@@ -25,10 +35,10 @@ ...@@ -25,10 +35,10 @@
@mousedown="evt => nodeItemMouseDown(evt, item.value)" @mousedown="evt => nodeItemMouseDown(evt, item.value)"
> >
<!-- 里面嵌套这层为卡片提供样式和信息之类,后面卡片样式判断可以在这里面做 --> <!-- 里面嵌套这层为卡片提供样式和信息之类,后面卡片样式判断可以在这里面做 -->
<div class="flow-node ellipsis all" <div
:style="{backgroundImage: 'url('+item.value().meta.img+')' }" class="flow-node ellipsis all"
> :style="{backgroundImage: 'url('+item.value().meta.img+')' }"
</div> />
</div> </div>
<!-- <el-input <!-- <el-input
...@@ -38,10 +48,11 @@ ...@@ -38,10 +48,11 @@
v-model="backgroundUrl"> v-model="backgroundUrl">
</el-input> --> </el-input> -->
<el-button <el-button
style=" style="
margin-top: 300px; " margin-top: 300px; "
type="success" type="success"
@click="showBackGroundPage">更换背景</el-button> @click="showBackGroundPage"
>更换背景</el-button>
</div> </div>
<!-- 最外层,加滚轮监听函数 --> <!-- 最外层,加滚轮监听函数 -->
...@@ -51,13 +62,13 @@ ...@@ -51,13 +62,13 @@
<div <div
class="super-flow-content" class="super-flow-content"
> >
<!-- @wheel="handleScroll" 阻止默认滚轮事件--> <!-- @wheel="handleScroll" 阻止默认滚轮事件-->
<!-- 这下面删了个v-drag就不能拖动画布了 --> <!-- 这下面删了个v-drag就不能拖动画布了 -->
<div <div
id="mainSuperBack"
ref="flowContainer" ref="flowContainer"
class="flow-container" class="flow-container"
style="width: 1920px;height: 1080px" style="width: 1920px;height: 1080px"
id="mainSuperBack"
> >
<super-flow <super-flow
ref="superFlow" ref="superFlow"
...@@ -73,21 +84,20 @@ ...@@ -73,21 +84,20 @@
> >
<template v-slot:node="{meta}"> <template v-slot:node="{meta}">
<div <div
slot="reference" slot="reference"
class="flow-node ellipsis all" class="flow-node ellipsis all"
:style="{backgroundImage: 'url('+meta.img+')' }" :style="{backgroundImage: 'url('+meta.img+')' }"
@mouseup="nodeMouseUp" @mouseup="nodeMouseUp"
@click="nodeClick(meta)" @click="nodeClick(meta)"
> >
<el-row> <el-row>
<div :class="[meta.name]" > <div :class="[meta.name]">
{{meta.desc}} {{ meta.desc }}
</div> </div>
</el-row>
</el-row> </div>
</div>
</template> </template>
</super-flow> </super-flow>
</div> </div>
...@@ -182,12 +192,11 @@ ...@@ -182,12 +192,11 @@
title="展示模式" title="展示模式"
:visible.sync="observationMode" :visible.sync="observationMode"
:close-on-click-modal="false" :close-on-click-modal="false"
custom-class = "watchDialog" custom-class="watchDialog"
> >
<div style="width: 100%;"> <div style="width: 100%;">
<superFlowWatch v-if="observationMode" :dataToWatch="dataToWatch"> <superFlowWatch v-if="observationMode" :data-to-watch="dataToWatch" />
</superFlowWatch> </div>
</div>
</el-dialog> </el-dialog>
<!-- 对话框,用来换图 --> <!-- 对话框,用来换图 -->
...@@ -197,11 +206,11 @@ ...@@ -197,11 +206,11 @@
:close-on-click-modal="false" :close-on-click-modal="false"
width="500px" width="500px"
> >
<el-input <el-input
v-model="backgroundUrl" v-model="backgroundUrl"
placeholder="请输入图片地址" placeholder="请输入图片地址"
maxlength="100" maxlength="100"
/> />
<!-- 底下的取消键是死的 --> <!-- 底下的取消键是死的 -->
<span <span
...@@ -298,6 +307,14 @@ export default { ...@@ -298,6 +307,14 @@ export default {
}, },
data() { data() {
return { return {
queryForm: {
type: '1'
},
typeOptions: [
{value: '1', label: 'a'},
{value: '2', label: 'b'},
{value: '3', label: 'c'},
],
timer: "", timer: "",
value: 0, value: 0,
//链接数据 //链接数据
...@@ -663,10 +680,11 @@ export default { ...@@ -663,10 +680,11 @@ export default {
this.dataToWatch.nodeList = this.nodeList this.dataToWatch.nodeList = this.nodeList
this.dataToWatch.linkList = this.linkList this.dataToWatch.linkList = this.linkList
this.dataToWatch.background = document.getElementsByClassName('flow-container')[0].style.backgroundImage this.dataToWatch.background = document.getElementsByClassName('flow-container')[0].style.backgroundImage
localStorage.removeItem(this.queryForm.type + 'dataToWatch')
localStorage.setItem('dataToWatch', JSON.stringify(this.dataToWatch)); localStorage.setItem(this.queryForm.type + 'dataToWatch', JSON.stringify(this.dataToWatch));
let page = this.$router.resolve({ let page = this.$router.resolve({
path:'/graphWatch', path:'/graphWatch',
query: { type: this.queryForm.type }
}) })
window.open(page.href, '_blank'); window.open(page.href, '_blank');
}, },
...@@ -775,14 +793,26 @@ export default { ...@@ -775,14 +793,26 @@ export default {
// console.log('baobaoaoa'); // console.log('baobaoaoa');
let post = {} let post = {}
post.graph = JSON.stringify(data) post.graph = JSON.stringify(data)
post.type = this.queryForm.type
console.log(post); console.log(post);
addBIchnography(post).then(res => { addBIchnography(post).then(res => {
console.log(res); if(res.code === 200) {
this.$message({
message: '添加成功',
type: 'success'
})
}
}) })
}, },
changeType() {
this.loadNodeListJson()
},
// 从服务器获取存档并加载 // 从服务器获取存档并加载
loadNodeListJson(){ loadNodeListJson(){
findLatestData().then(res => { const params = {
type: this.queryForm.type
}
findLatestData(params).then(res => {
let data = JSON.parse(res.data.graph) let data = JSON.parse(res.data.graph)
// data是获取到的信息 // data是获取到的信息
......
src/views/template/planeGraphDetails.vue 0 → 100644
View file @ a2f38d94
<template>
<div>
<div class="planeGraphDetails_module">
<el-button
v-for="(item,index) in btnList"
:key="index"
type="primary"
size="small"
@click="handleJumpDetails(item)"
>
{{ item.label }}
</el-button>
</div>
<div style="display: none" class="super-flow-demo1">
<!-- 查看模式按钮 -->
<div class="watchModeButton">
<!-- <el-button type="success" icon="el-icon-download" style="float: right">导出</el-button> -->
<el-button type="success" icon="el-icon-delete-solid" style="float: right" @click="delAllNodeList();delALlLinkList()">清空</el-button>
<!-- <el-button type="success" icon="el-icon-download" style="float: right" @click="exportNodeListJson">导出</el-button> -->
<el-button type="success" icon="el-icon-upload2" style="float: right;margin-right: 10px;" @click="saveNodeListJson">保存</el-button>
<!-- <el-button type="success" icon="el-icon-download" style="float: right" @click="loadNodeListJson">读档</el-button> -->
<el-button type="success" icon="el-icon-picture" style="float: right" @click="startWatchMode">预览</el-button>
<!-- <el-button type="success" icon="el-icon-picture" style="float: right" @click="test">test</el-button> -->
</div>
<!-- 左侧控制列 -->
<div class="node-container">
<div>
<el-select v-model="queryForm.type" placeholder="请选择" @change="changeType">
<el-option
v-for="(item,index) in typeOptions"
:key="index"
:label="item.label"
:value="item.value"
/>
</el-select>
</div>
<!-- 遍历nodeList里面的项,这应该就是左侧的选项卡列表 -->
<!-- 这个卡也跟着缩放了,感觉不太对劲 -->
<div
v-for="(item, index) in nodeItemList"
:key="index"
class="super-flow__node"
style="position: relative;margin: 10px auto; margin-top: 30px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3)!important;"
:style="{width: item.value().width + 'px', height: item.value().height + 'px' }"
@mousedown="evt => nodeItemMouseDown(evt, item.value)"
>
<!-- 里面嵌套这层为卡片提供样式和信息之类,后面卡片样式判断可以在这里面做 -->
<div
class="flow-node ellipsis all"
:style="{backgroundImage: 'url('+item.value().meta.img+')' }"
/>
</div>
<!-- <el-input
type="textarea"
:rows="2"
placeholder="请输入图片地址"
v-model="backgroundUrl">
</el-input> -->
<el-button
style="
margin-top: 300px; "
type="success"
@click="showBackGroundPage"
>更换背景</el-button>
</div>
<!-- 最外层,加滚轮监听函数 -->
<!-- 中间层,加了个缓冲?上了一遍样式 -->
<!-- 内层,superFlow本体 -->
<!-- superflow里面是个弹窗?就点一下出那个悬浮的东西 -->
<div
class="super-flow-content"
>
<!-- @wheel="handleScroll" 阻止默认滚轮事件-->
<!-- 这下面删了个v-drag就不能拖动画布了 -->
<div
id="mainSuperBack"
ref="flowContainer"
class="flow-container"
style="width: 1920px;height: 1080px"
>
<super-flow
ref="superFlow"
:graph-menu="graphMenu"
:node-menu="nodeMenu"
:link-menu="linkMenu"
:link-base-style="linkBaseStyle"
:link-style="linkStyle"
:link-desc="linkDesc"
:scale-value="scaleValue"
:node-list="nodeList"
:link-list="linkList"
>
<template v-slot:node="{meta}">
<div
slot="reference"
class="flow-node ellipsis all"
:style="{backgroundImage: 'url('+meta.img+')' }"
@mouseup="nodeMouseUp"
@click="nodeClick(meta)"
>
<el-row>
<div :class="[meta.name]">
{{ meta.desc }}
</div>
</el-row>
</div>
</template>
</super-flow>
</div>
</div>
</div>
<!-- 对话框,用来设置细节的 -->
<el-dialog
:title="drawerConf.title"
:visible.sync="drawerConf.visible"
:close-on-click-modal="false"
width="500px"
>
<!-- 判断类型然后选择展示的内容 -->
<el-form
v-show="drawerConf.type === drawerType.node"
ref="nodeSetting"
:model="nodeSetting"
@keyup.native.enter="settingSubmit"
@submit.native.prevent
>
<!-- <el-form-item
label="节点类型名称"
prop="name"
>
<el-input
v-model="nodeSetting.name"
placeholder="请输入节点类型名称"
maxlength="30"
/>
</el-form-item> -->
<el-form-item
label="标签名"
prop="desc"
>
<el-input
v-model="nodeSetting.desc"
placeholder="请输入标签名"
maxlength="30"
/>
</el-form-item>
<el-form-item
label="标签描述"
prop="name"
>
<el-input
v-model="nodeSetting.flowName"
placeholder="请输入标签描述"
maxlength="30"
/>
</el-form-item>
</el-form>
<!-- 判断类型然后选择展示的内容 -->
<el-form
v-show="drawerConf.type === drawerType.link"
ref="linkSetting"
:model="linkSetting"
@keyup.native.enter="settingSubmit"
@submit.native.prevent
>
<el-form-item
label="连线描述"
prop="desc"
>
<el-input
v-model="linkSetting.desc"
placeholder="请输入连线描述"
/>
</el-form-item>
</el-form>
<!-- 底下的取消键是死的 -->
<span
slot="footer"
class="dialog-footer"
>
<el-button
@click="drawerConf.cancel"
>
取 消
</el-button>
<el-button
type="primary"
@click="settingSubmit"
>
确 定
</el-button>
</span>
</el-dialog>
<!-- 对话框,静态展示最终结果 -->
<el-dialog
title="展示模式"
:visible.sync="observationMode"
:close-on-click-modal="false"
custom-class="watchDialog"
>
<div style="width: 100%;">
<superFlowWatch v-if="observationMode" :data-to-watch="dataToWatch" />
</div>
</el-dialog>
<!-- 对话框,用来换图 -->
<el-dialog
title="更改图片(直接输入url即可)"
:visible.sync="backgroundshow"
:close-on-click-modal="false"
width="500px"
>
<el-input
v-model="backgroundUrl"
placeholder="请输入图片地址"
maxlength="100"
/>
<!-- 底下的取消键是死的 -->
<span
slot="footer"
class="dialog-footer"
>
<el-button
@click="()=>{this.backgroundshow = false}"
>
取 消
</el-button>
<el-button
type="primary"
@click="this.changeBackGround"
>
确 定
</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
/* eslint-disable */
import SuperFlow from 'vue-super-flow'
import superFlowWatch from './graph/graphWatch.vue'
import 'vue-super-flow/lib/index.css'
import nodeListJson from './graph/nodeListJson.json'
import FileSaver from 'file-saver'
import { addBIchnography, findLatestData } from '@/api/planeGraph'
// import _ from 'lodash';
// import link from "./VueSuperFlow/VueSuperFlow/link.vue";
const drawerType = {
node: 0,
link: 1
}
export default {
components: {SuperFlow, superFlowWatch},
// 自定义指令
directives: {
// 拖动
drag(el, binding, vnode) {
el.onmousedown = (e) => {
console.log(e)
// 如果目标类名是下面这俩
if (['super-flow__line', 'super-flow'].indexOf(e.target.className) !== -1) {
// 鼠标按下时鼠标的水平位置与元素左边缘的距离
const disx = e.pageX - el.offsetLeft
const disy = e.pageY - el.offsetTop
document.onmousemove = (e) => {
// el.style.left = e.pageX - disx + 'px'
// el.style.top = e.pageY - disy + 'px'
// if (e.pageX - disx < 53 && e.pageX - disx > -1100) {
// if (e.pageY - disy < 40 && e.pageY - disy > -271) {
el.style.left = e.pageX - disx + 'px'
el.style.top = e.pageY - disy + 'px'
// console.log('左', el.style.left, el.style.top, '上')
// }
// }
}
}
document.onmouseup = () => {
document.onmousemove = document.onmouseup = null
}
}
// 对div盒子的大小改变
// let scale = 1
// 滚动相关
el.onmousewheel = document.onmousewheel = (e) => {
if (['super-flow-content', 'super-flow', 'flow-node', 'super-flow__line'].indexOf(e.target.className) !== -1) {
if (e.wheelDelta < 0) {
// console.log('后滚放大')
if (vnode.context.scaleValue < 2.0) {
vnode.context.scaleValue = +((vnode.context.scaleValue += 0.05).toFixed(2))
el.style.transform = `scale(${vnode.context.scaleValue})`
el.style.transformOrigin = '200 200'
// console.log(scale, '放大')
}
} else if (e.wheelDelta > 0) {
// 前滚缩小
if (vnode.context.scaleValue > 0.1) {
vnode.context.scaleValue = +((vnode.context.scaleValue -= 0.05).toFixed(2))
el.style.transform = `scale(${vnode.context.scaleValue})`
el.style.transformOrigin = '200 200'
// console.log(scale, '缩小')
}
}
}
}
}
},
data() {
return {
btnList: [
{ value: '1', label: 'a' },
{ value: '2', label: 'b' },
{ value: '3', label: 'c' }
],
queryForm: {
type: '1'
},
typeOptions: [
{value: '1', label: 'a'},
{value: '2', label: 'b'},
{value: '3', label: 'c'},
],
timer: "",
value: 0,
//链接数据
// 这些可能是垃圾数据?没见有反应
linkList:[{
"endAt":[0,20],
"endId":"nodeGIxBzZdE9dSmmktm",
"id":"link2mmHDWJjnrosq4Yt",
"startAt":[25,0],
"startId":"nodea0ABEitwz5rB1BNq"
},
{
"endAt":[1,20],
"endId":"nodeeQYJaoEyHygkJac6",
"id":"linkeG0joi2eK0KYT5AS",
"startAt":[50,20],
"startId":"nodeGIxBzZdE9dSmmktm"
}
],
//json数据
nodeListJson,
renderStartTime: null,
renderEndTime: null,
//节点数据
node:[],
//节点列表
nodeList:[],
that: this,
scaleValue: 1,
drawerType,
drawerConf: {
title: '',
visible: false,
type: null,
info: null,
open: (type, info) => {
const conf = this.drawerConf
conf.visible = true
conf.type = type
conf.info = info
if (conf.type === drawerType.node) {
conf.title = '节点'
if (this.$refs.nodeSetting) this.$refs.nodeSetting.resetFields()
this.$set(this.nodeSetting, 'name', info.meta.name)
this.$set(this.nodeSetting, 'flowName', info.meta.flowName)
this.$set(this.nodeSetting, 'desc', info.meta.desc)
} else {
conf.title = '连线'
if (this.$refs.linkSetting) this.$refs.linkSetting.resetFields()
this.$set(this.linkSetting, 'desc', info.meta ? info.meta.desc : '')
}
},
cancel: () => {
this.drawerConf.visible = false
if (this.drawerConf.type === drawerType.node) {
this.$refs.nodeSetting.clearValidate()
} else {
this.$refs.linkSetting.clearValidate()
}
}
},
linkSetting: {
desc: ''
},
nodeSetting: {
name: '',
desc: ''
},
dragConf: {
isDown: false,
isMove: false,
offsetTop: 0,
offsetLeft: 0,
clientX: 0,
clientY: 0,
ele: null,
info: null
},
nodeListPic: {
// 图片链接用这种形式(请自行调整大小)
// pic1Common: 'https://sjbz-fd.zol-img.com.cn/t_s1080x1920c/g5/M00/00/02/ChMkJ1fJVFOIV8kdAC3oDpyfq8YAAU9wQN1ivcALegm011.jpg',
pic1Common: require("./graph/服务器正常.png"),
// 引入本地图片用这种形式
pic1Err: require("./graph/服务器报错.png"),
},
// 侧边栏默认节点列表
nodeItemList: [
{
label: '架子',
value: () => ({
width: 66,
height: 33,
meta: {
// 这个值是该卡片在数组对象中的位置,比如,第一个元素是0
nodeItemListId: 0,
label: '架子',
name: '架子',
flowName: '数值',
flowValue: '0',
// 地址链接在上方
img: this.nodeListPic.pic1Common,
commonImg: this.nodeListPic.pic1Common,
errImg: this.nodeListPic.pic1Err
// img: require("./graph/服务器正常.png"),
// commonImg: require("./graph/服务器正常.png"),
// errImg: require("./graph/服务器报错.png")
}
})
},
// 下面的所有配置需要向上面这个看齐,都需要修改
// {
// label: '服务器',
// value: () => ({
// width: 100,
// height: 100,
// meta: {
// label: '1',
// name: '服务器',
// flowName: '负载',
// flowValue: '0',
// img: "https://i.52112.com/icon/256/20181026/23541/1126950.png"
// }
// })
// },
// {
// label: '服务器err',
// value: () => ({
// width: 100,
// height: 100,
// meta: {
// label: '1',
// name: '服务器err',
// flowName: '负载',
// flowValue: '0',
// img: "https://pngpai.com/pai_img/sml/2b95033b-5dbb-4a80-88bc-f2aa58d80485.png"
// }
// })
// },
// {
// label: '标题',
// value: () => ({
// width: 120,
// height: 40,
// meta: {
// label: '5',
// name: '标题',
// flowName: '',
// flowValue: '这是一个文字标签',
// img: ''
// }
// })
// },
],
// 右键画布事件
graphMenu: [
],
// graphMenu: [
// [
// {
// // 选项 label
// label: '架子',
// // 选项是否禁用
// // disable(graph) {
// // return !!graph.nodeList.find(node => node.meta.label === '1')
// // },
// // 选项选中后回调函数
// selected(graph, coordinate) {
// graph.addNode({
// width: 200,
// height: 200,
// coordinate,
// meta: {
// label: '1',
// name: '1',
// img:'shelf'
// }
// })
// }
// },
// {
// label: '服务器',
// selected(graph, coordinate) {
// graph.addNode({
// width: 50,
// height: 50,
// coordinate,
// meta: {
// label: '2',
// name: '2',
// img:'server'
// }
// })
// }
// },
// {
// label: '文本',
// selected(graph, coordinate) {
// graph.addNode({
// width: 120,
// height: 40,
// coordinate,
// meta: {
// label: '3',
// name: 'text',
// img: 'title'
// }
// })
// }
// }
// ],
// ,
// [
// {
// label: '导入',
// selected: graph => {
// this.addNodeList()
// }
// },
// {
// label: '导出',
// selected: graph => {
// this.exportNodeListJson()
// }
// }
// ],
// [
// {
// label: '全选',
// selected: graph => {
// graph.selectAll()
// this.selectAll()
// }
// }
// ],
// [
// {
// label: '全部删除',
// selected: node => {
// // node.selectAll()
// this.delAllNodeList()
// this.delALlLinkList()
// // node.remove()
// }
// }
// ],
// ],
// 节点右键事件
nodeMenu: [
[
{
label: '删除',
selected: node => {
node.remove()
}
},
{
label: '编辑',
selected: node => {
this.drawerConf.open(drawerType.node, node)
}
}
]
],
// 连线右键事件
linkMenu: [
[
{
label: '删除',
selected: link => {
link.remove()
}
},
{
label: '编辑',
selected: link => {
this.drawerConf.open(drawerType.link, link)
}
}
]
],
// 连线样式
linkBaseStyle: {
color: '#666666', // line 颜色
hover: '#FF0000', // line hover 的颜色
textColor: '#666666', // line 描述文字颜色
textHover: '#FF0000', // line 描述文字 hover 颜色
font: '14px Arial', // line 描述文字 字体设置 参考 canvas font
dotted: false, // 是否是虚线
lineDash: [4, 4], // 虚线时生效
background: 'rgba(255,255,255,0.6)' // 描述文字背景色
},
fontList: [
'14px Arial',
'italic small-caps bold 12px arial'
],
// 观察模式
observationMode: false,
dataToWatch: {},
backgroundUrl: '',
backgroundshow: false,
}
},
beforeMount() {
this.renderStartTime = Date.now();
},
updated() {
this.renderEndTime = Date.now();
const renderTime = (this.renderEndTime - this.renderStartTime)/1000;
// 将渲染时间保存在应用的状态中，或者触发一个事件通知外部监听器
// this.$emit('render-finished', renderTime);
console.log("渲染完成所用时间: ", renderTime.toFixed(4), "秒");
// 为了下一次更新时不累积时间，重置开始时间
// this.renderStartTime = null;
this.renderStartTime = Date.now();
},
mounted() {
// this.executionTime = performance.now() - this.startTime;
// console.log("渲染完成所用时间: ", this.executionTime.toFixed(2), "毫秒");
// this.addNode()
document.addEventListener('mousemove', this.docMousemove)
document.addEventListener('mouseup', this.docMouseup)
this.$once('hook:beforeDestroy', () => {
document.removeEventListener('mousemove', this.docMousemove)
document.removeEventListener('mouseup', this.docMouseup)
})
// this.$nextTick( function (){
// this.addNode()
// })
// 上来读一次档
// this.loadNodeListJson()
},
beforeDestroy() {
document.removeEventListener('mousemove', this.docMousemove)
document.removeEventListener('mouseup', this.docMouseup)
clearTimeout(this.timer);
},
methods: {
/** 跳转详情页面*/
handleJumpDetails(item) {
const params = {
type: item.value
}
findLatestData(params).then(res => {
let data = JSON.parse(res.data.graph)
// data是获取到的信息
// console.log('---------------');
data.nodeList.forEach(item => {
// console.log(item.meta.nodeItemListId);
item.meta.img = this.nodeItemList[item.meta.nodeItemListId].value().meta.img
item.meta.commonImg = this.nodeItemList[item.meta.nodeItemListId].value().meta.commonImg
item.meta.errImg = this.nodeItemList[item.meta.nodeItemListId].value().meta.errImg
});
this.nodeList = data.nodeList
this.linkList = data.linkList
this.backgroundUrl = data.background
this.changeBackGround()
this.addNode()
// 下边是跳转
setTimeout(() => {
this.selectAll()
this.dataToWatch = {}
this.dataToWatch.nodeList = this.nodeList
this.dataToWatch.linkList = this.linkList
this.dataToWatch.background = document.getElementsByClassName('flow-container')[0].style.backgroundImage
localStorage.removeItem(item.value + 'dataToWatch')
localStorage.setItem(item.value + 'dataToWatch', JSON.stringify(this.dataToWatch));
let page = this.$router.resolve({
path:'/graphWatch',
query: { type: item.value }
})
window.open(page.href, '_blank');
}, 1000)
})
},
// test() {
// console.log(this.nodeList);
// },
startWatchMode(item) {
this.selectAll()
this.dataToWatch = {}
this.dataToWatch.nodeList = this.nodeList
this.dataToWatch.linkList = this.linkList
this.dataToWatch.background = document.getElementsByClassName('flow-container')[0].style.backgroundImage
localStorage.removeItem(item.value + 'dataToWatch')
localStorage.setItem( item.value + 'dataToWatch', JSON.stringify(this.dataToWatch));
let page = this.$router.resolve({
path:'/graphWatch',
query: { type: item.value }
})
window.open(page.href, '_blank');
},
// 当前页面弹窗的版本
// startWatchMode() {
// // 开启后要先保存一份
// // 然后打开组件,这样组件会读取保存的
// // this.exportNodeListJson
// this.selectAll()
// this.dataToWatch = {}
// this.dataToWatch.nodeList = this.nodeList
// this.dataToWatch.linkList = this.linkList
// this.dataToWatch.background = document.getElementsByClassName('flow-container')[0].style.background
// this.observationMode = true
// },
showBackGroundPage(){
this.backgroundshow = true
},
changeBackGround() {
this.backgroundshow = false
let backDiv = document.getElementById('mainSuperBack')
if (this.backgroundUrl == '') {
this.backgroundUrl = ''
backDiv.style.backgroundImage = this.backgroundUrl
}else{
// this.backgroundUrl = 'url('+this.backgroundUrl+')'
backDiv.style.backgroundImage = 'url('+this.backgroundUrl+')'
}
// backDiv.style.background = this.backgroundUrl
},
//清除
clear(){
this.nodeList = []
},
/*删除所有节点*/
delAllNodeList() {
this.nodeList = []
},
/*删除所有连线*/
delALlLinkList(){
this.linkList = []
},
/*获取所有节点*/
selectAll(){
this.nodeList=this.$refs.superFlow.toJSON().nodeList
this.linkList = this.$refs.superFlow.toJSON().linkList
console.log(this.nodeList)
console.log(this.linkList)
},
/*从文件导入节点存档*/
addNodeList() {
this.nodeList = this.nodeListJson.nodeList
this.linkList = this.nodeListJson.linkList
console.log(this.nodeListJson.background);
document.getElementById('mainSuperBack').style.background = this.nodeListJson.background
this.addNode()
},
/*导出节点json*/
exportNodeListJson(){
this.selectAll()
/**
* data: 封装好的json数据
* JSON.stringify(data, null, 2): 格式化json数据 方便阅读
* new Blob(parame1, parame2): 转为Blob文件流.
* parame1 [] 数据源
* parame2 文件流类型
*/
const data = {}
data.nodeList = this.nodeList
data.linkList = this.linkList
data.background = document.getElementsByClassName('flow-container')[0].style.background
const blob = new Blob([JSON.stringify(data, null, 2)], {type: 'application/json'})
/**
* FileSaver.saveAs(parame1, parame2) 浏览器保存文件
* parame1: Blob文件流
* parame2：文件名
*/
FileSaver.saveAs(blob, "nodeListJson")
},
/*保存json到服务器*/
saveNodeListJson(){
this.selectAll()
// 3.保存,另存一个相似的副本,将图片替换为对应id,将替换后的副本发送
var NewNodeList = JSON.parse(JSON.stringify(this.nodeList))
NewNodeList.forEach(item => {
// 读取列表属性的方法
// console.log(this.nodeItemList[0].value().meta.img);
delete item.meta.img
delete item.meta.commonImg
delete item.meta.errImg
});
const data = {}
data.nodeList = NewNodeList
data.linkList = this.linkList
data.background = this.backgroundUrl
// console.log('baobaoaoa');
let post = {}
post.graph = JSON.stringify(data)
post.type = this.queryForm.type
console.log(post);
addBIchnography(post).then(res => {
if(res.code === 200) {
this.$message({
message: '添加成功',
type: 'success'
})
}
})
},
changeType() {
this.loadNodeListJson()
},
// 从服务器获取存档并加载
loadNodeListJson(){
const params = {
type: this.queryForm.type
}
findLatestData(params).then(res => {
let data = JSON.parse(res.data.graph)
// data是获取到的信息
// console.log('---------------');
data.nodeList.forEach(item => {
// console.log(item.meta.nodeItemListId);
item.meta.img = this.nodeItemList[item.meta.nodeItemListId].value().meta.img
item.meta.commonImg = this.nodeItemList[item.meta.nodeItemListId].value().meta.commonImg
item.meta.errImg = this.nodeItemList[item.meta.nodeItemListId].value().meta.errImg
});
this.nodeList = data.nodeList
this.linkList = data.linkList
this.backgroundUrl = data.background
this.changeBackGround()
// let backDiv = document.getElementById('mainSuperBack')
// if (this.backgroundUrl == '') {
// this.backgroundUrl = ''
// backDiv.style.backgroundImage = this.backgroundUrl
// }else{
// // this.backgroundUrl = 'url('+this.backgroundUrl+')'
// backDiv.style.backgroundImage = 'url('+this.backgroundUrl+')'
// }
// backDiv.style.background = this.backgroundUrl
// this.backgroundUrl = data.background.replace(/^.{5}(.+).{2}$/, '$1')
this.addNode()
})
},
/*生成节点*/
addNode() {
const tempList = this.nodeList
//遍历this.nodeList
tempList.forEach((item,index)=>{
this.$refs.superFlow.addNode({
width: item.width,
height: item.height,
coordinate: item.coordinate,
meta:item.meta
})
})
},
/*获取当前节点 */
getNode(){
const list = this.$refs.superFlow.toJSON().nodeList
const index =(list.length)-1
this.node = list[index]
console.log(this.node)
},
handleScroll(event) {
event.preventDefault() // 阻止默认滚轮事件
// 其他处理逻辑...
},
flowNodeClick(meta) {
},
linkStyle(link) {
if (link.meta && link.meta.desc === '1') {
return {
color: 'red',
hover: '#FF00FF',
dotted: true
}
} else {
return {}
}
},
linkDesc(link) {
return link.meta ? link.meta.desc : ''
},
settingSubmit() {
const conf = this.drawerConf
if (this.drawerConf.type === drawerType.node) {
if (!conf.info.meta) conf.info.meta = {}
Object.keys(this.nodeSetting).forEach(key => {
this.$set(conf.info.meta, key, this.nodeSetting[key])
})
this.$refs.nodeSetting.resetFields()
} else {
if (!conf.info.meta) conf.info.meta = {}
Object.keys(this.linkSetting).forEach(key => {
this.$set(conf.info.meta, key, this.linkSetting[key])
})
this.$refs.linkSetting.resetFields()
}
conf.visible = false
},
nodeMouseUp(evt) {
evt.preventDefault()
},
// 文档中的鼠标移动事件
// 获取鼠标点击时的在可视窗口之中的坐标
docMousemove({ clientX, clientY }) {
// 获取到拖动事件
const conf = this.dragConf
if (conf.isMove) {
conf.ele.style.top = clientY - conf.offsetTop + ((conf.info.height * (this.scaleValue - 1)) / 2) + 'px'
conf.ele.style.left = clientX - conf.offsetLeft + ((conf.info.width * (this.scaleValue - 1)) / 2) + 'px'
} else if (conf.isDown) {
// 鼠标移动量大于 5 时 移动状态生效
conf.isMove =
Math.abs(clientX - conf.clientX) > 5 ||
Math.abs(clientY - conf.clientY) > 5
}
},
docMouseup({ clientX, clientY }) {
const conf = this.dragConf
conf.isDown = false
if (conf.isMove) {
const {
top,
right,
bottom,
left
} = this.$refs.flowContainer.getBoundingClientRect()
// 判断鼠标是否进入 flow container
// 进入了就获取一个坐标,然后把坐标传给节点,并新建这个节点
// 同时调用获取节点方法
if (
clientX > left &&
clientX < right &&
clientY > top &&
clientY < bottom
) {
// 获取拖动元素左上角相对 super flow 区域原点坐标
const coordinate = this.$refs.superFlow.getMouseCoordinate(
clientX - conf.offsetLeft,
clientY - conf.offsetTop
)
const a = [
coordinate[0] / this.scaleValue,
coordinate[1] / this.scaleValue
]
// 添加节点
this.$refs.superFlow.addNode({
coordinate: a,
...conf.info
})
// 获取当前节点
this.getNode()
}
conf.isMove = false
}
if (conf.ele) {
conf.ele.remove()
conf.ele = null
}
},
// 元素被按下
nodeItemMouseDown(evt, infoFun) {
const {
clientX,
clientY,
currentTarget
} = evt
const {
top,
left
} = evt.currentTarget.getBoundingClientRect()
const conf = this.dragConf
const ele = currentTarget.cloneNode(true)
Object.assign(this.dragConf, {
offsetLeft: clientX - left,
offsetTop: clientY - top,
clientX: clientX,
clientY: clientY,
info: infoFun(),
ele,
isDown: true
})
ele.style.position = 'fixed'
ele.style.margin = '0'
ele.style.top = clientY - conf.offsetTop + ((infoFun().height * (this.scaleValue - 1)) / 2) + 'px'
ele.style.left = clientX - conf.offsetLeft + ((infoFun().width * (this.scaleValue - 1)) / 2) + 'px'
this.$el.appendChild(this.dragConf.ele)
},
nodeClick(meta) {
},
}
}
</script>
<style scoped lang="scss">
/* .shelf {
text-align: center;
width: 100%;
height: 100%;
background: url('./graph/架子.png') center / cover;
}
.server {
text-align: center;
width: 100%;
height: 100%;
background: url('./graph/服务器.png') center / cover;
}
.serverErr {
text-align: center;
width: 100%;
height: 100%;
background: url('./graph/服务器err.png') center / cover;
}
.title {
text-align: center;
width: 100%;
height: 100%;
} */
.all {
text-align: center;
width: 100%;
height: 100%;
background: center / cover;
}
</style>
<style scoped lang="scss">
/* 外侧盒子 */
.super-flow-demo1 {
position: relative;
width: 100%;
height: 750px;
background-color: #f5f5f5;
}
.watchModeButton {
position: absolute;
right: 40px;
top: 20px;
z-index: 999;
}
/* 左侧控制部分 */
.node-container {
float: left;
width: 200px;
height: 100%;
text-align: center;
background-color: #FFFFFF;
}
.ellipsis {
/* 文字不换行 */
white-space: nowarp;
/* 文本溢出显示省略号 */
text-overflow: ellipsis;
/* 溢出隐藏 */
overflow: hidden;
/* 必要时换行 */
word-wrap: break-word;
}
/* 右侧画布的外层 */
.super-flow-content {
position: relative;
float: left;
/* 让宽度跟父元素(外面的大框相关) */
width: calc(100% - 220px);
height: 100%;
overflow: auto;
background-color: #bbb;
margin: 10px;
}
/* 右侧画布的本体 */
.flow-container {
float: left;
position: absolute;
background-size: cover; /* 拉伸并填充整个div */
background-repeat: no-repeat; /* 不重复 */
/* background-image: url('https://pic35.photophoto.cn/20150511/0034034892281415_b.jpg'); */
}
/* 观察的对话框设置 */
.watchDialog {
width: 80%;
height: 90%;
}
.el-dialog__wrapper .el-dialog .el-dialog__body {
max-height: 95%!important;
}
</style>
<!-- 记得导包,文件的那个 -->
<!-- 缩放会影响鼠标位置的准确性 -->
<!-- 现在hover卡片后出现的内容是死的,后面需要关联起来,需要用到轮询 -->
<!-- 关联的内容就是那个数字(后面监听那个数字) -->
<!-- 1.读取存档,根据id替换为侧边的图片信息 -->
<!-- 2.拖拽图片,没啥问题,存档这会还是保存的图片信息 -->
<!-- 3.保存,另存一个相似的副本,将图片替换为对应id,将替换后的副本发送 -->
<!-- 4,查看模式,发送普通图片版本的信息过去,这样不影响逻辑 -->
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