Skip to content

T
template_vue
Commit 4964d21e authored by 高宇's avatar 高宇
Browse files
Options

Merge remote-tracking branch 'origin/project9-8' into project9-8

parents f9aac93a 80dd0a4a
Show whitespace changes
Inline Side-by-side
Showing with 178 additions and 115 deletions
src/views/template/graph/graphWatch.vue
View file @ 4964d21e
...@@ -47,10 +47,10 @@ ...@@ -47,10 +47,10 @@
{{ meta.flowName }} {{ meta.flowName }}
</div> </div>
<el-divider></el-divider> <el-divider></el-divider>
<div> <div v-if="meta && meta.info && meta.info.mac">
mac:{{ meta.info.mac }} mac:{{ meta.info.mac }}
</div> </div>
<div> <div v-if="meta && meta.info && meta.info.pn">
pn:{{ meta.info.pn }} pn:{{ meta.info.pn }}
</div> </div>
...@@ -395,96 +395,96 @@ export default { ...@@ -395,96 +395,96 @@ export default {
], ],
// 右键画布事件 // 右键画布事件
graphMenu: [ graphMenu: [
[ // [
{ // {
// 选项 label // // 选项 label
label: '架子', // label: '架子',
// 选项是否禁用 // // 选项是否禁用
// disable(graph) { // // disable(graph) {
// return !!graph.nodeList.find(node => node.meta.label === '1') // // return !!graph.nodeList.find(node => node.meta.label === '1')
// }, // // },
// 选项选中后回调函数 // // 选项选中后回调函数
selected(graph, coordinate) { // selected(graph, coordinate) {
graph.addNode({ // graph.addNode({
width: 200, // width: 200,
height: 200, // height: 200,
coordinate, // coordinate,
meta: { // meta: {
label: '1', // label: '1',
name: '1', // name: '1',
img:'shelf' // img:'shelf'
} // }
}) // })
} // }
}, // },
{ // {
label: '服务器', // label: '服务器',
selected(graph, coordinate) { // selected(graph, coordinate) {
graph.addNode({ // graph.addNode({
width: 50, // width: 50,
height: 50, // height: 50,
coordinate, // coordinate,
meta: { // meta: {
label: '2', // label: '2',
name: '2', // name: '2',
img:'server' // img:'server'
} // }
}) // })
} // }
}, // },
{ // {
label: '文本', // label: '文本',
selected(graph, coordinate) { // selected(graph, coordinate) {
graph.addNode({ // graph.addNode({
width: 120, // width: 120,
height: 40, // height: 40,
coordinate, // coordinate,
meta: { // meta: {
label: '3', // label: '3',
name: 'text', // name: 'text',
img: 'title' // img: 'title'
} // }
}) // })
} // }
} // }
], // ],
, // ,
[ // [
{ // {
label: '导入', // label: '导入',
selected: graph => { // selected: graph => {
this.addNodeList() // this.addNodeList()
} // }
}, // },
{ // {
label: '导出', // label: '导出',
selected: graph => { // selected: graph => {
this.exportNodeListJson() // this.exportNodeListJson()
} // }
} // }
], // ],
[ // [
{ // {
label: '全选', // label: '全选',
selected: graph => { // selected: graph => {
graph.selectAll() // graph.selectAll()
this.selectAll() // this.selectAll()
} // }
} // }
], // ],
[ // [
{ // {
label: '全部删除', // label: '全部删除',
selected: node => { // selected: node => {
// node.selectAll() // // node.selectAll()
this.delAllNodeList() // this.delAllNodeList()
this.delALlLinkList() // this.delALlLinkList()
// node.remove() // // node.remove()
} // }
} // }
], // ],
], ],
// 节点右键事件 // 节点右键事件
nodeMenu: [ nodeMenu: [
...@@ -562,7 +562,7 @@ export default { ...@@ -562,7 +562,7 @@ export default {
let dataToWatch = JSON.parse(localStorage.getItem('dataToWatch')); let dataToWatch = JSON.parse(localStorage.getItem('dataToWatch'));
let backDiv = document.getElementById('popSuperBack') let backDiv = document.getElementById('popSuperBack')
backDiv.style.background = dataToWatch.background backDiv.style.backgroundImage = dataToWatch.background
this.nodeList = dataToWatch.nodeList this.nodeList = dataToWatch.nodeList
this.linkList = dataToWatch.linkList this.linkList = dataToWatch.linkList
...@@ -595,7 +595,6 @@ export default { ...@@ -595,7 +595,6 @@ export default {
let map = new Map let map = new Map
for (let i = 0; i < res.data.length; i++) { for (let i = 0; i < res.data.length; i++) {
const element = res.data[i]; const element = res.data[i];
map.set(element.location,element) map.set(element.location,element)
} }
// 使用map,把res对应的标签和值塞进去 // 使用map,把res对应的标签和值塞进去
...@@ -605,7 +604,9 @@ export default { ...@@ -605,7 +604,9 @@ export default {
console.log(this.nodeList); console.log(this.nodeList);
for (let i = 0; i < this.nodeList.length; i++) { for (let i = 0; i < this.nodeList.length; i++) {
let element = this.nodeList[i].meta.desc; let element = this.nodeList[i].meta.desc;
// console.log('------11111-----');
// console.log(map.get(element)); // console.log(map.get(element));
// 如果存在map中存在列表中的元素
if (map.get(element) != undefined) { if (map.get(element) != undefined) {
// 获取需要监听的数值(两个版本,一个数字,一个字符,不然el的那组件不认) // 获取需要监听的数值(两个版本,一个数字,一个字符,不然el的那组件不认)
this.nodeList[i].meta.num = map.get(element).qty this.nodeList[i].meta.num = map.get(element).qty
...@@ -616,12 +617,14 @@ export default { ...@@ -616,12 +617,14 @@ export default {
// console.log('-----------'); // console.log('-----------');
// console.log(this.nodeList[i].meta.info); // console.log(this.nodeList[i].meta.info);
}
if(map.get(element).qty == 0){ if(map.get(element).qty == 0){
this.nodeList[i].meta.img = this.nodeList[i].meta.errImg this.nodeList[i].meta.img = this.nodeList[i].meta.errImg
}else { }else {
this.nodeList[i].meta.img = this.nodeList[i].meta.commonImg this.nodeList[i].meta.img = this.nodeList[i].meta.commonImg
} }
}
} }
// 刷一下模版,不然没有响应式 // 刷一下模版,不然没有响应式
this.templateShow = false this.templateShow = false
...@@ -631,6 +634,7 @@ export default { ...@@ -631,6 +634,7 @@ export default {
}) })
}, },
// 没用
startWatchMode() { startWatchMode() {
// 开启后要先保存一份 // 开启后要先保存一份
// 然后打开组件,这样组件会读取保存的 // 然后打开组件,这样组件会读取保存的
...@@ -937,7 +941,7 @@ export default { ...@@ -937,7 +941,7 @@ export default {
position: relative; position: relative;
float: left; float: left;
/* 让宽度跟父元素(外面的大框相关) */ /* 让宽度跟父元素(外面的大框相关) */
width: calc(100% - 220px); width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
background-color: #bbb; background-color: #bbb;
...@@ -950,7 +954,8 @@ export default { ...@@ -950,7 +954,8 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
background: url("./R-C.jpg") no-repeat center / cover ; /* background: url("./R-C.jpg") no-repeat center / cover ; */
background: no-repeat center / cover ;
} }
/* 观察的对话框设置 */ /* 观察的对话框设置 */
.watchDialog { .watchDialog {
......
src/views/template/planeGraph.vue
View file @ 4964d21e
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
<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-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-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="startWatchMode">预览</el-button>
<!-- <el-button type="success" icon="el-icon-picture" style="float: right" @click="test">test</el-button> -->
</div> </div>
<!-- 左侧控制列 --> <!-- 左侧控制列 -->
...@@ -378,6 +379,14 @@ export default { ...@@ -378,6 +379,14 @@ export default {
ele: null, ele: null,
info: 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: [ nodeItemList: [
{ {
...@@ -386,16 +395,23 @@ export default { ...@@ -386,16 +395,23 @@ export default {
width: 66, width: 66,
height: 33, height: 33,
meta: { meta: {
// 这个值是该卡片在数组对象中的位置,比如,第一个元素是0
nodeItemListId: 0,
label: '架子', label: '架子',
name: '架子', name: '架子',
flowName: '数值', flowName: '数值',
flowValue: '0', flowValue: '0',
img: require("./graph/服务器正常.png"), // 地址链接在上方
commonImg: require("./graph/服务器正常.png"), img: this.nodeListPic.pic1Common,
errImg: require("./graph/服务器报错.png") commonImg: this.nodeListPic.pic1Common,
errImg: this.nodeListPic.pic1Err
// img: require("./graph/服务器正常.png"),
// commonImg: require("./graph/服务器正常.png"),
// errImg: require("./graph/服务器报错.png")
} }
}) })
}, },
// 下面的所有配置需要向上面这个看齐,都需要修改 // 下面的所有配置需要向上面这个看齐,都需要修改
// { // {
// label: '服务器', // label: '服务器',
...@@ -637,12 +653,15 @@ export default { ...@@ -637,12 +653,15 @@ export default {
}, },
methods: { methods: {
// test() {
// console.log(this.nodeList);
// },
startWatchMode() { startWatchMode() {
this.selectAll() this.selectAll()
this.dataToWatch = {} this.dataToWatch = {}
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.background this.dataToWatch.background = document.getElementsByClassName('flow-container')[0].style.backgroundImage
localStorage.setItem('dataToWatch', JSON.stringify(this.dataToWatch)); localStorage.setItem('dataToWatch', JSON.stringify(this.dataToWatch));
let page = this.$router.resolve({ let page = this.$router.resolve({
...@@ -668,14 +687,17 @@ export default { ...@@ -668,14 +687,17 @@ export default {
this.backgroundshow = true this.backgroundshow = true
}, },
changeBackGround() { changeBackGround() {
this.backgroundshow = false this.backgroundshow = false
let backDiv = document.getElementById('mainSuperBack') let backDiv = document.getElementById('mainSuperBack')
if (this.backgroundUrl == '') { if (this.backgroundUrl == '') {
this.backgroundUrl == '' this.backgroundUrl = ''
backDiv.style.backgroundImage = this.backgroundUrl
}else{ }else{
this.backgroundUrl = 'url('+this.backgroundUrl+')' // this.backgroundUrl = 'url('+this.backgroundUrl+')'
backDiv.style.backgroundImage = 'url('+this.backgroundUrl+')'
} }
backDiv.style.background = this.backgroundUrl // backDiv.style.background = this.backgroundUrl
}, },
...@@ -733,10 +755,22 @@ export default { ...@@ -733,10 +755,22 @@ export default {
/*保存json到服务器*/ /*保存json到服务器*/
saveNodeListJson(){ saveNodeListJson(){
this.selectAll() 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 = {} const data = {}
data.nodeList = this.nodeList data.nodeList = NewNodeList
data.linkList = this.linkList data.linkList = this.linkList
data.background = document.getElementsByClassName('flow-container')[0].style.background data.background = this.backgroundUrl
// console.log('baobaoaoa'); // console.log('baobaoaoa');
let post = {} let post = {}
post.graph = JSON.stringify(data) post.graph = JSON.stringify(data)
...@@ -750,14 +784,29 @@ export default { ...@@ -750,14 +784,29 @@ export default {
findLatestData().then(res => { findLatestData().then(res => {
let data = JSON.parse(res.data.graph) let data = JSON.parse(res.data.graph)
console.log(data); // 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.nodeList = data.nodeList
this.linkList = data.linkList this.linkList = data.linkList
this.backgroundUrl = data.background this.backgroundUrl = data.background
let backDiv = document.getElementById('mainSuperBack') this.changeBackGround()
backDiv.style.background = this.backgroundUrl // 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.backgroundUrl = data.background.replace(/^.{5}(.+).{2}$/, '$1')
this.addNode() this.addNode()
}) })
...@@ -1021,7 +1070,9 @@ export default { ...@@ -1021,7 +1070,9 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
background: url("./graph/R-C.jpg") no-repeat center / cover ; background-size: cover; /* 拉伸并填充整个div */
background-repeat: no-repeat; /* 不重复 */
/* background-image: url('https://pic35.photophoto.cn/20150511/0034034892281415_b.jpg'); */
} }
/* 观察的对话框设置 */ /* 观察的对话框设置 */
.watchDialog { .watchDialog {
...@@ -1040,3 +1091,10 @@ export default { ...@@ -1040,3 +1091,10 @@ export default {
<!-- 现在hover卡片后出现的内容是死的,后面需要关联起来,需要用到轮询 --> <!-- 现在hover卡片后出现的内容是死的,后面需要关联起来,需要用到轮询 -->
<!-- 关联的内容就是那个数字(后面监听那个数字) --> <!-- 关联的内容就是那个数字(后面监听那个数字) -->
<!-- 1.读取存档,根据id替换为侧边的图片信息 -->
<!-- 2.拖拽图片,没啥问题,存档这会还是保存的图片信息 -->
<!-- 3.保存,另存一个相似的副本,将图片替换为对应id,将替换后的副本发送 -->
<!-- 4,查看模式,发送普通图片版本的信息过去,这样不影响逻辑 -->
\ No newline at end of file
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