|
@@ -1,12 +1,16 @@
|
|
|
<template>
|
|
|
- <div style="background:#f1f2f3" >
|
|
|
- <div id="container"></div>
|
|
|
+ <div style="background:#f1f2f3;" id="full">
|
|
|
+ <img style="width: 25px; height: 25px;float: right" v-if="!fullscreen" @click="enterFullscreen" src="@/assets/icons/amplify.svg" title="全屏">
|
|
|
+ <img style="width: 25px; height: 25px;float: right" @click="backFullscreen" v-if="fullscreen" src="@/assets/icons/reduce.svg" title="还原">
|
|
|
+ <div id="container">
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import G6 from '@antv/g6';
|
|
|
let graph;
|
|
|
+
|
|
|
const fittingString = (str, maxWidth, fontSize) => {
|
|
|
const ellipsis = "...";
|
|
|
const ellipsisLength = G6.Util.getTextSize(ellipsis, fontSize)[0];
|
|
@@ -256,7 +260,7 @@ G6.registerNode('card-node', {
|
|
|
},
|
|
|
},
|
|
|
draw: (cfg, group) => {
|
|
|
-
|
|
|
+
|
|
|
const config = getNodeConfig(cfg);
|
|
|
const isRoot = cfg.dataType === 'root';
|
|
|
const nodeUrl = cfg.nodeUrl;
|
|
@@ -460,11 +464,15 @@ export default {
|
|
|
props:['id'],
|
|
|
data () {
|
|
|
return {
|
|
|
-
|
|
|
+ fullscreen:false
|
|
|
}
|
|
|
},
|
|
|
mounted () {
|
|
|
// this.getData()
|
|
|
+ document.addEventListener('fullscreenchange', this.handleFullscreenChange);
|
|
|
+ document.addEventListener('mozfullscreenchange', this.handleFullscreenChange);
|
|
|
+ document.addEventListener('webkitfullscreenchange', this.handleFullscreenChange);
|
|
|
+ document.addEventListener('MSFullscreenChange',this.handleFullscreenChange)
|
|
|
},
|
|
|
methods:{
|
|
|
createMenu (array) {
|
|
@@ -480,7 +488,7 @@ export default {
|
|
|
children: [],
|
|
|
nodeUrl:HASLINKS.includes(node['name'])?'123':null
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
if (node.children && node.children.length > 0) {
|
|
|
// 如果存在子节点
|
|
|
for (var index = 0; index < node.children.length; index++) {
|
|
@@ -550,14 +558,55 @@ export default {
|
|
|
if (!container || !container.scrollWidth || !container.scrollHeight) return;
|
|
|
graph.changeSize(container.scrollWidth, container.scrollHeight);
|
|
|
};
|
|
|
- }
|
|
|
+ },
|
|
|
+ enterFullscreen () {
|
|
|
+ /* 获取(<html>)元素以全屏显示页面 */
|
|
|
+ const full = document.getElementById('full')
|
|
|
+ if (full.RequestFullScreen) {
|
|
|
+ full.RequestFullScreen()
|
|
|
+ //兼容Firefox
|
|
|
+ } else if (full.mozRequestFullScreen) {
|
|
|
+ full.mozRequestFullScreen()
|
|
|
+ //兼容Chrome, Safari and Opera等
|
|
|
+ } else if (full.webkitRequestFullScreen) {
|
|
|
+ full.webkitRequestFullScreen()
|
|
|
+ //兼容IE/Edge
|
|
|
+ } else if (full.msRequestFullscreen) {
|
|
|
+ full.msRequestFullscreen()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleFullscreenChange () {
|
|
|
+ if (document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement) {
|
|
|
+ // 全屏模式激活
|
|
|
+
|
|
|
+ console.log('全屏模式已激活');
|
|
|
+ this.fullscreen = true
|
|
|
+ } else {
|
|
|
+ // 全屏模式退出
|
|
|
+ this.fullscreen = false
|
|
|
+ console.log('全屏模式已退出');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /*全屏还原*/
|
|
|
+ backFullscreen(){
|
|
|
+ if (document.exitFullscreen) {
|
|
|
+ document.exitFullscreen();
|
|
|
+ } else if (document.webkitCancelFullScreen) {
|
|
|
+ document.webkitCancelFullScreen();
|
|
|
+ } else if (document.mozCancelFullScreen) {
|
|
|
+ document.mozCancelFullScreen();
|
|
|
+ } else if (document.msExitFullscreen) {
|
|
|
+ document.msExitFullscreen();
|
|
|
+ }
|
|
|
+ },
|
|
|
},
|
|
|
+
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
<style>
|
|
|
#container{
|
|
|
- height: 100vh;
|
|
|
+ height: calc(100vh - 500px);
|
|
|
width: 100vw;
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|