Skip to content

liangzhen / framework-tools-web

Go to a project
Commit 748312c4 by 史敦盼
Options

修改

1 parent 8f9b9e8f
Inline Side-by-side
Showing with 53 additions and 42 deletions
src/views/bigScreen/cockpit/components/ViewInfo.vue
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
* @Autor: pan * @Autor: pan
* @Date: 2024-06-05 10:20:36 * @Date: 2024-06-05 10:20:36
* @LastEditors: pan * @LastEditors: pan
* @LastEditTime: 2024-06-07 16:43:28 * @LastEditTime: 2024-06-11 15:19:04
--> -->
<template> <template>
<div> <div>
...@@ -40,7 +40,8 @@ ...@@ -40,7 +40,8 @@
</div> </div>
</el-scrollbar> </el-scrollbar>
<div class="mxGraph flex-1"> <div class="mxGraph flex-1">
<div id="mxGraph_root" class="w-100 h-100"></div> <img class="w-100 h-100" :src="metaModelData" alt="" />
<!-- <div id="mxGraph_root" class="w-100 h-100"></div> -->
</div> </div>
</template> </template>
<el-empty class="w-100" v-else description="暂无数据"></el-empty> <el-empty class="w-100" v-else description="暂无数据"></el-empty>
...@@ -64,7 +65,8 @@ export default { ...@@ -64,7 +65,8 @@ export default {
archiBelongOptions: [], archiBelongOptions: [],
viewList: [], viewList: [],
graph: null, graph: null,
loading: false loading: false,
metaModelData: ''
} }
}, },
components: {}, components: {},
...@@ -76,8 +78,9 @@ export default { ...@@ -76,8 +78,9 @@ export default {
return `data:image/svg+xml;base64,${base64}` return `data:image/svg+xml;base64,${base64}`
}, },
fnCheckGraph(item) { fnCheckGraph(item) {
this.graph.destroy() // this.graph.destroy()
this.initGraph(item.metaModelData) // this.initGraph(item.metaModelData)
this.metaModelData = this.getSvg(item.metaModelSvg)
}, },
handleSubClick() { handleSubClick() {
this.graph?.destroy() this.graph?.destroy()
...@@ -99,40 +102,43 @@ export default { ...@@ -99,40 +102,43 @@ export default {
archiBelongId: this.activeName, archiBelongId: this.activeName,
} }
this.loading = true this.loading = true
getViewInfo(params).then((res) => { getViewInfo(params)
this.loading = false .then((res) => {
if (res.code === 200) { this.loading = false
this.viewList = res.data if (res.code === 200) {
this.$nextTick(() => { this.viewList = res.data
this.initGraph(this.viewList[0]?.metaModelData) this.metaModelData = this.getSvg(this.viewList[0].metaModelSvg)
}) // this.$nextTick(() => {
} else { // this.initGraph(this.viewList[0]?.metaModelData)
this.viewList = [] // })
} } else {
}).catch(err => { this.viewList = []
this.loading = false }
}) })
}, .catch((err) => {
initGraph(xml) { this.loading = false
if (!xml) return })
this.graph = new mxGraph(document.getElementById('mxGraph_root'))
this.graph.centerZoom = false // 是否居中缩放
this.graph.setEnabled(false) // 设置启用,就是允不允许你改变CELL的形状内容。
const model = this.graph.getModel()
model.beginUpdate()
try {
const parseXml = xml.replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&amp;/g, '&')
var doc = mxUtils.parseXml(xml)
var codec = new mxCodec(doc)
console.log('doc', parseXml)
codec.decode(doc.documentElement, this.graph.getModel())
} finally {
model.endUpdate()
}
}, },
// initGraph(xml) {
// if (!xml) return
// this.graph = new mxGraph(document.getElementById('mxGraph_root'))
// this.graph.centerZoom = false // 是否居中缩放
// this.graph.setEnabled(false) // 设置启用,就是允不允许你改变CELL的形状内容。
// const model = this.graph.getModel()
// model.beginUpdate()
// try {
// const parseXml = xml.replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&amp;/g, '&')
// var doc = mxUtils.parseXml(xml)
// var codec = new mxCodec(doc)
// console.log('doc', parseXml)
// codec.decode(doc.documentElement, this.graph.getModel())
// } finally {
// model.endUpdate()
// }
// },
}, },
destroyed() { destroyed() {
this.graph.destroy() // this.graph.destroy()
}, },
} }
</script> </script>
...@@ -149,8 +155,8 @@ export default { ...@@ -149,8 +155,8 @@ export default {
background-color: #f5fffe; background-color: #f5fffe;
cursor: pointer; cursor: pointer;
.svg { .svg {
width: 240px; width: 140px;
height: 140px; height: 100px;
} }
} }
} }
......
src/views/bigScreen/cockpit/manageCockpit/index.vue
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
* @Autor: pan * @Autor: pan
* @Date: 2024-06-05 09:51:26 * @Date: 2024-06-05 09:51:26
* @LastEditors: pan * @LastEditors: pan
* @LastEditTime: 2024-06-07 15:17:16 * @LastEditTime: 2024-06-11 09:29:35
--> -->
<template> <template>
<div class="w-100 h-100 manageCockpit flex"> <div class="w-100 h-100 manageCockpit flex">
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
@node-click="handleNodeClick" @node-click="handleNodeClick"
></el-tree> ></el-tree>
</div> </div>
<div class="flex-1" style="min-width: 0;"> <div class="flex-1" style="min-width: 0">
<div class="header__wrap p-16"> <div class="header__wrap p-16">
<div class="header-title m-b-16 align-l font-bold font-18"> <div class="header-title m-b-16 align-l font-bold font-18">
发展策划部 发展策划部
...@@ -32,7 +32,12 @@ ...@@ -32,7 +32,12 @@
<div class="content__wrap flex"> <div class="content__wrap flex">
<ProjectInfo ref="project" style="width: 30%" /> <ProjectInfo ref="project" style="width: 30%" />
<ViewInfo style="width: 70%;" :prjId="prjInfo.prjId" ref="view" class="flex-1" /> <ViewInfo
style="width: 70%"
:prjId="prjInfo.prjId"
ref="view"
class="flex-1"
/>
</div> </div>
</div> </div>
...@@ -108,7 +113,7 @@ export default { ...@@ -108,7 +113,7 @@ export default {
this.prjInfo = data[0] this.prjInfo = data[0]
this.init() this.init()
}, },
handleNodeClick(){} handleNodeClick() {},
}, },
} }
</script> </script>
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!