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 @@
{{ meta.flowName }}
</div>
<el-divider></el-divider>
<div>
<div v-if="meta && meta.info && meta.info.mac">
mac:{{ meta.info.mac }}
</div>
<div>
<div v-if="meta && meta.info && meta.info.pn">
pn:{{ meta.info.pn }}
</div>
......@@ -395,96 +395,96 @@ export default {
],
// 右键画布事件
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()
}
}
],
// [
// {
// // 选项 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: [
......@@ -562,7 +562,7 @@ export default {
let dataToWatch = JSON.parse(localStorage.getItem('dataToWatch'));
let backDiv = document.getElementById('popSuperBack')
backDiv.style.background = dataToWatch.background
backDiv.style.backgroundImage = dataToWatch.background
this.nodeList = dataToWatch.nodeList
this.linkList = dataToWatch.linkList
......@@ -595,7 +595,6 @@ export default {
let map = new Map
for (let i = 0; i < res.data.length; i++) {
const element = res.data[i];
map.set(element.location,element)
}
// 使用map,把res对应的标签和值塞进去
......@@ -605,7 +604,9 @@ export default {
console.log(this.nodeList);
for (let i = 0; i < this.nodeList.length; i++) {
let element = this.nodeList[i].meta.desc;
// console.log('------11111-----');
// console.log(map.get(element));
// 如果存在map中存在列表中的元素
if (map.get(element) != undefined) {
// 获取需要监听的数值(两个版本,一个数字,一个字符,不然el的那组件不认)
this.nodeList[i].meta.num = map.get(element).qty
......@@ -616,12 +617,14 @@ export default {
// console.log('-----------');
// console.log(this.nodeList[i].meta.info);
}
if(map.get(element).qty == 0){
this.nodeList[i].meta.img = this.nodeList[i].meta.errImg
}else {
this.nodeList[i].meta.img = this.nodeList[i].meta.commonImg
}
}
}
// 刷一下模版,不然没有响应式
this.templateShow = false
......@@ -631,6 +634,7 @@ export default {
})
},
// 没用
startWatchMode() {
// 开启后要先保存一份
// 然后打开组件,这样组件会读取保存的
......@@ -937,7 +941,7 @@ export default {
position: relative;
float: left;
/* 让宽度跟父元素(外面的大框相关) */
width: calc(100% - 220px);
width: 100%;
height: 100%;
overflow: hidden;
background-color: #bbb;
......@@ -950,7 +954,8 @@ export default {
width: 100%;
height: 100%;
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 {
......
src/views/template/planeGraph.vue
View file @ 4964d21e
......@@ -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-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>
<!-- 左侧控制列 -->
......@@ -378,6 +379,14 @@ export default {
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: [
{
......@@ -386,16 +395,23 @@ export default {
width: 66,
height: 33,
meta: {
// 这个值是该卡片在数组对象中的位置,比如,第一个元素是0
nodeItemListId: 0,
label: '架子',
name: '架子',
flowName: '数值',
flowValue: '0',
img: require("./graph/服务器正常.png"),
commonImg: require("./graph/服务器正常.png"),
errImg: require("./graph/服务器报错.png")
// 地址链接在上方
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: '服务器',
......@@ -637,12 +653,15 @@ export default {
},
methods: {
// test() {
// console.log(this.nodeList);
// },
startWatchMode() {
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.dataToWatch.background = document.getElementsByClassName('flow-container')[0].style.backgroundImage
localStorage.setItem('dataToWatch', JSON.stringify(this.dataToWatch));
let page = this.$router.resolve({
......@@ -668,14 +687,17 @@ export default {
this.backgroundshow = true
},
changeBackGround() {
this.backgroundshow = false
let backDiv = document.getElementById('mainSuperBack')
if (this.backgroundUrl == '') {
this.backgroundUrl == ''
this.backgroundUrl = ''
backDiv.style.backgroundImage = this.backgroundUrl
}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 {
/*保存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 = this.nodeList
data.nodeList = NewNodeList
data.linkList = this.linkList
data.background = document.getElementsByClassName('flow-container')[0].style.background
data.background = this.backgroundUrl
// console.log('baobaoaoa');
let post = {}
post.graph = JSON.stringify(data)
......@@ -750,14 +784,29 @@ export default {
findLatestData().then(res => {
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.linkList = data.linkList
this.backgroundUrl = data.background
let backDiv = document.getElementById('mainSuperBack')
backDiv.style.background = this.backgroundUrl
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.backgroundUrl = data.background.replace(/^.{5}(.+).{2}$/, '$1')
this.addNode()
})
......@@ -1021,7 +1070,9 @@ export default {
width: 100%;
height: 100%;
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 {
......@@ -1040,3 +1091,10 @@ export default {
<!-- 现在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