Skip to content

Commit

Permalink
fix: Object Model cannot be opened
Browse files Browse the repository at this point in the history
  • Loading branch information
@xuxiaobo1010
xuxiaobo1010 committed Aug 26, 2022
1 parent 2bd7cc3 commit e3f087e
Show file tree
Hide file tree
Showing 11 changed files with 330 additions and 121 deletions.
1 change: 1 addition & 0 deletions src/store/modules/topo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -311,6 +311,7 @@ const mutations = {
_.merge(canvas.handlerArgs, {
type: 'createVueComponent',
chart: thing.chart,
data: thing.data,
productid: thing.productid,
})
)
Expand Down
8 changes: 4 additions & 4 deletions src/utils/konva/core/topoBasic.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -334,11 +334,11 @@ const topoBasic = {
vueComponet = new Konva.Rect({
x: 100,
y: 100,
width: 300,
height: 200,
width: args.data.width || 300,
height: args.data.height || 200,
type: args.chart,
fill: 'rgba(30, 30, 30,0.7)',
text: args.chart,
fill: args.data.fill || 'rgba(30, 30, 30,0.7)',
text: args.text,
name: 'vuecomponent',
id: args.productid + '_vuecomponent' + topoId,
draggable: true,
Expand Down
219 changes: 130 additions & 89 deletions src/utils/konva/core/topoStage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ const topoStage = {
stage: args.stage,
})
})
let list = []
stage.find('Label').forEach((node) => {
info['Label'] = stage.find('Label')
console.log(
Expand Down Expand Up @@ -194,94 +195,106 @@ const topoStage = {
node: node,
})
if (node.attrs.type == 'konvaimage') {
let item = node.attrs
// {
// type: node.attrs.type,
// x: node.attrs.x,
// y: node.attrs.y,
// width: node.attrs.width,
// height: node.attrs.height,
// }
list.push(item)
console.log('这是图片1111111', node)
if (window.location.hash.indexOf('type=device') > 0) {
imgUrlToFile(node.attrs.src).then((item) => {
var file = item
console.log('这是图片解析内容', item, window.FileReader)
// if (window.location.hash.indexOf('type=device') > 0) {
// imgUrlToFile(node.attrs.src).then((item) => {
// var file = item
// console.log('这是图片解析内容', item, window.FileReader)

// let formData = new FormData()
// formData.append('file', item)
// console.log('file FormData', formData)
// var jsonData = { file: '' }
// formData.forEach((value, key) => (jsonData[key] = value))
// console.log(jsonData)
if (window.FileReader) {
var fr = new FileReader()
console.log(fr)
// fr.readAsDataURL(item)
// fr.onload = (e) => {
// console.log('e', e.target.result)
// }
fr.onloadend = function (e) {
console.log(e)
console.log('打印引入', playGIF, '打印stream', Stream)
//document.getElementById("portrait").src = e.target.result;
console.log('e.target.result', e, playGIF)
playGIF.doParse(
new Stream(e.target.result),
function (hdr, frames, canvas) {
//console.log(hdr);
//console.log(frames.length);
//帧
var s = 0
for (var i = 0; i < frames.length; i++) {
s += frames[i].delay
}
//时长
console.log('total time:' + s * 10 + ' milliseconds')
//第一张图片
console.log('这是读取gif内容', frames)
if (window.location.hash.indexOf('type=device') > 0) {
let index = 0
// // let formData = new FormData()
// // formData.append('file', item)
// // console.log('file FormData', formData)
// // var jsonData = { file: '' }
// // formData.forEach((value, key) => (jsonData[key] = value))
// // console.log(jsonData)
// if (window.FileReader) {
// var fr = new FileReader()
// console.log(fr)
// // fr.readAsDataURL(item)
// // fr.onload = (e) => {
// // console.log('e', e.target.result)
// // }
// fr.onloadend = function (e) {
// console.log(e)
// console.log('打印引入', playGIF, '打印stream', Stream)
// //document.getElementById("portrait").src = e.target.result;
// console.log('e.target.result', e, playGIF)
// playGIF.doParse(
// new Stream(e.target.result),
// function (hdr, frames, canvas) {
// //console.log(hdr);
// //console.log(frames.length);
// //帧
// var s = 0
// for (var i = 0; i < frames.length; i++) {
// s += frames[i].delay
// }
// //时长
// console.log('total time:' + s * 10 + ' milliseconds')
// //第一张图片
// console.log('这是读取gif内容', frames)
// if (window.location.hash.indexOf('type=device') > 0) {
// let index = 0

let BgimageObj = new Image()
// let BgimageObj = new Image()

imageList[current] = setInterval(() => {
console.log('konvagif', index, node)
node.setAttrs({
image: BgimageObj,
})
canvas
.getContext('2d')
.putImageData(frames[index].data, 0, 0)
// console.log('base64', canvas.toDataURL('image/jpg'))
BgimageObj.src = canvas.toDataURL('image/png')
index++
if (index == frames.length) index = 0
if (window.location.hash.indexOf('type=device') < 0) {
clearInterval(imageList[current])
}
}, 500)
}
// imageList[current] = setInterval(() => {
// console.log('konvagif', index, node)
// node.setAttrs({
// image: BgimageObj,
// })
// canvas
// .getContext('2d')
// .putImageData(frames[index].data, 0, 0)
// // console.log('base64', canvas.toDataURL('image/jpg'))
// BgimageObj.src = canvas.toDataURL('image/png')
// index++
// if (index == frames.length) index = 0
// if (window.location.hash.indexOf('type=device') < 0) {
// clearInterval(imageList[current])
// }
// }, 500)
// }

// canvas.getContext('2d').putImageData(frames[15].data, 0, 0)
// var img = document.getElementById('portrait')
// img.width = hdr.width
// img.height = hdr.height
// img.src = canvas.toDataURL('image/png')
}
)
}
// fr.onloadend(e)
//console.log(fr.readAsDataURL(file));
//fr.readAsDataURL(file);
//fr.readAsArrayBuffer(file);
//fr.readAsBinaryString(file);
//fr.readAsText(file);
if (typeof fr.readAsBinaryString == 'function') {
fr.readAsBinaryString(file)
}
}
})
} else if (window.location.hash.indexOf('type=device') < 0) {
console.log('进行图片展示', node)
// // canvas.getContext('2d').putImageData(frames[15].data, 0, 0)
// // var img = document.getElementById('portrait')
// // img.width = hdr.width
// // img.height = hdr.height
// // img.src = canvas.toDataURL('image/png')
// }
// )
// }
// // fr.onloadend(e)
// //console.log(fr.readAsDataURL(file));
// //fr.readAsDataURL(file);
// //fr.readAsArrayBuffer(file);
// //fr.readAsBinaryString(file);
// //fr.readAsText(file);
// if (typeof fr.readAsBinaryString == 'function') {
// fr.readAsBinaryString(file)
// }
// }
// })
// } else if (window.location.hash.indexOf('type=device') < 0) {
console.log('进行图片展示', node)
if (window.location.hash.indexOf('type=device') < 0) {
let image = new Image()
node.setAttrs({
image: image,
})
image.src = node.attrs.src
}

// }
// BgimageObj.onload = () => {
// layer.add(yoda)
// const BgimageObj = new Image()
Expand Down Expand Up @@ -323,11 +336,38 @@ const topoStage = {
console.log('contextmenu', e.target)
})
node.on('click', (e) => {
console.log(e, 'eeeeee')
canvas.clickItem = e.target
canvas.contextmenu = {}
console.log('click', e.target.attrs)
console.log('点击弹出编辑框', e.evt.button, dbclickflag)
//判断是否点击鼠标左键和在编辑状态
if (dbclickflag) {
// clearTimeout(timer)
setTimeout(() => {
dbclickflag = false
}, 500)
}
if (!dbclickflag) {
dbclickflag = true
timer = setTimeout(() => {
if (
e.evt.button == 0 &&
window.location.hash.indexOf('type=device') < 0
) {
dbclickflag = false
console.log('打开编辑框')
dgiotBus.$emit('nodeEdit', node)
}
}, 500)
}
// canvas.contextmenu = {}
// canvas.clickItem = e.target
// console.log('click', e.target.attrs)
// 单击时，这里根据node bind 的控件类型，去展示对应的控件信息
})
// node.on('click', (e) => {
// console.log(e, 'eeeeee')
// canvas.clickItem = e.target
// canvas.contextmenu = {}
// console.log('click', e.target.attrs)
// })
})
stage.find('Sprite').forEach((node) => {
if (
Expand Down Expand Up @@ -496,19 +536,20 @@ const topoStage = {
console.log('click', e.target.attrs)
})
})
let list = []

stage.find('Rect').forEach((node) => {
if (
location.href.includes('&type=device') ||
location.href.includes('evidence')
) {
let item = {
type: node.attrs.type,
x: node.attrs.x,
y: node.attrs.y,
width: node.attrs.width,
height: node.attrs.height,
}
let item = node.attrs
// {
// type: node.attrs.type,
// x: node.attrs.x,
// y: node.attrs.y,
// width: node.attrs.width,
// height: node.attrs.height,
// }
list.push(item)
dgiotlogger.info('dgiotlogger node:', node)
node
Expand Down
62 changes: 42 additions & 20 deletions src/views/CloudFunction/topo/components/TopoTabs.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,21 +100,43 @@
静态文本框
</el-button>
<el-divider />
<el-button
<img
draggable="true"
size="mini"
src="http://dev.iotn2n.com/dgiot_file/topo/png/pump.gif"
style="width: 40px; height: 40px; display: inline-block"
type="primary"
@click.native="
@click="
createBasicThing({
productid: $route.query.productid,
type: 'knovaimage',
image: 'http://dev.iotn2n.com/dgiot_file/topo/png/pump.gif',
hidden: false,
})
"
>
水泵
</el-button>
/>
<img
draggable="true"
size="mini"
src="https://mp0.usr.cn/uploads/drawimg/1612317621248_0251.gif"
style="
width: 40px;
height: 40px;
display: inline-block;
margin-left: 20px;
"
type="primary"
@click="
createBasicThing({
productid: $route.query.productid,
type: 'knovaimage',
image:
'https://mp0.usr.cn/uploads/drawimg/1612317621248_0251.gif',
hidden: false,
})
"
/>
<el-divider />
<el-button
draggable="true"
size="mini"
Expand All @@ -137,29 +159,23 @@
>
精灵图
</el-button>
<!-- <el-button
<el-divider />
<el-button
draggable="true"
size="mini"
type="primary"
@click.native="
createBasicThing({
productid: $route.query.productid,
type: 'gifimage',
image: 'http://dev.iotn2n.com/dgiot_file/topo/png/pump.png',
animations: {
idle: [
// x, y, width, height (4 frames)
2, 2, 84, 65, 131, 2, 84, 65, 262, 2, 84, 65, 389, 2, 84, 65,
518, 2, 84, 65,
],
},
type: 'vuecomponent',
data: {},
chart: 'line',
hidden: false,
})
"
>
水泵
</el-button> -->
<el-divider />
折线图
</el-button>
<el-button
draggable="true"
size="mini"
Expand All @@ -168,12 +184,18 @@
createBasicThing({
productid: $route.query.productid,
type: 'vuecomponent',
chart: 'line',
data: {
width: 262,
height: 72,
fill: 'rgba(80, 190, 240, 0.2)',
text: '产品数量',
},
chart: 'realcard',
hidden: false,
})
"
>
折线图
数据卡片
</el-button>
<el-divider />
<!-- http://dev.iotn2n.com/dgiot_file/topo/png/pump.png -->
Expand Down

0 comments on commit e3f087e

Please sign in to comment.