平面图宽高修改

src/views/template/graph/graphWatch.vue

 <template>
-  <div style="height: 100%;">
+  <div style="height: 98%;">
     <div class="super-flow-demo1">
 
       <!-- 最外层,加滚轮监听函数 -->
@@ -53,7 +53,7 @@
                 <div v-if="meta && meta.info && meta.info.pn">
                   pn:{{ meta.info.pn }}
                 </div>
-              
+
                 <div
                   slot="reference"
                   class="flow-node ellipsis all"
@@ -175,14 +175,14 @@
         <superFlowWatch v-if="observationMode" :dataToWatch="dataToWatch">
         </superFlowWatch>
     </div>
-      
+
     </el-dialog>
   </div>
 </template>
 
 <script>
 /* eslint-disable */
-import SuperFlow from 'vue-super-flow' 
+import SuperFlow from 'vue-super-flow'
 import 'vue-super-flow/lib/index.css'
 import nodeListJson from './nodeListJson.json'
 import FileSaver from 'file-saver'
@@ -624,7 +624,7 @@ export default {
             }
 
           }
-          
+
         }
         // 刷一下模版,不然没有响应式
         this.templateShow = false
@@ -648,7 +648,7 @@ export default {
 
       this.observationMode = true
     },
-    
+
     //清除
     clear(){
       this.nodeList = []
@@ -943,7 +943,7 @@ export default {
   /* 让宽度跟父元素(外面的大框相关) */
   width: 100%;
   height: 100%;
-  overflow: hidden;
+  overflow: auto;
   background-color: #bbb;
   margin: 10px;
 }
@@ -951,8 +951,8 @@ export default {
 .flow-container {
   float: left;
   position: absolute;
-  width: 100%;
-  height: 100%;
+  width: 1920px;
+  height: 1080px;
   overflow: hidden;
   /* background: url("./R-C.jpg") no-repeat  center / cover ; */
   background: no-repeat  center / cover ;
@@ -981,8 +981,8 @@ export default {
  -->
 
 
-<!-- 先加个业务id 
+<!-- 先加个业务id
   flowName
 -->
 
-<!-- 导入后分两个版本,一个有文字标签,一个没有,按钮来回切换 -->
\ No newline at end of file
+<!-- 导入后分两个版本,一个有文字标签,一个没有,按钮来回切换 -->

src/views/template/planeGraph.vue

@@ -25,7 +25,7 @@
           @mousedown="evt => nodeItemMouseDown(evt, item.value)"
         >
           <!-- 里面嵌套这层为卡片提供样式和信息之类,后面卡片样式判断可以在这里面做 -->
-          <div class="flow-node ellipsis all" 
+          <div class="flow-node ellipsis all"
           :style="{backgroundImage: 'url('+item.value().meta.img+')' }"
           >
           </div>
@@ -37,10 +37,10 @@
           placeholder="请输入图片地址"
           v-model="backgroundUrl">
         </el-input> -->
-        <el-button 
+        <el-button
         style="
-        margin-top: 300px; "  
-        type="success" 
+        margin-top: 300px; "
+        type="success"
         @click="showBackGroundPage">更换背景</el-button>
       </div>
 
@@ -138,7 +138,7 @@
             maxlength="30"
           />
         </el-form-item>
-        
+
       </el-form>
       <!-- 判断类型然后选择展示的内容 -->
       <el-form
@@ -187,7 +187,7 @@
         <superFlowWatch v-if="observationMode" :dataToWatch="dataToWatch">
         </superFlowWatch>
     </div>
-      
+
     </el-dialog>
     <!-- 对话框,用来换图 -->
     <el-dialog
@@ -201,7 +201,7 @@
             placeholder="请输入图片地址"
             maxlength="100"
           />
-      
+
       <!-- 底下的取消键是死的 -->
       <span
         slot="footer"
@@ -225,8 +225,8 @@
 
 <script>
 /* eslint-disable */
-import SuperFlow from 'vue-super-flow' 
-import superFlowWatch from './graph/graphWatch.vue' 
+import SuperFlow from 'vue-super-flow'
+import superFlowWatch from './graph/graphWatch.vue'
 import 'vue-super-flow/lib/index.css'
 import nodeListJson from './graph/nodeListJson.json'
 import FileSaver from 'file-saver'
@@ -411,7 +411,7 @@ export default {
             }
           })
         },
-        
+
         // 下面的所有配置需要向上面这个看齐,都需要修改
         // {
         //   label: '服务器',
@@ -460,7 +460,7 @@ export default {
       ],
       // 右键画布事件
       graphMenu: [
-        
+
       ],
 //       graphMenu: [
 //         [
@@ -687,7 +687,7 @@ export default {
       this.backgroundshow = true
     },
     changeBackGround() {
-      
+
       this.backgroundshow = false
       let backDiv = document.getElementById('mainSuperBack')
       if (this.backgroundUrl == '') {
@@ -698,9 +698,9 @@ export default {
         backDiv.style.backgroundImage = 'url('+this.backgroundUrl+')'
       }
       // backDiv.style.background = this.backgroundUrl
-      
+
     },
-    
+
     //清除
     clear(){
       this.nodeList = []
@@ -782,7 +782,7 @@ export default {
     // 从服务器获取存档并加载
     loadNodeListJson(){
       findLatestData().then(res => {
-        
+
         let data = JSON.parse(res.data.graph)
         // data是获取到的信息
         // console.log('---------------');
@@ -809,7 +809,7 @@ export default {
         // this.backgroundUrl = data.background.replace(/^.{5}(.+).{2}$/, '$1')
         this.addNode()
       })
-      
+
     },
 
 
@@ -986,7 +986,7 @@ export default {
 
 
 
-<style>
+<style scoped lang="scss">
 /* .shelf {
   text-align: center;
   width: 100%;
@@ -1019,13 +1019,12 @@ export default {
 
 
 </style>
-<style>
+<style scoped lang="scss">
 /* 外侧盒子 */
 .super-flow-demo1 {
   position: relative;
-  margin-top: 20px;
   width: 100%;
-  height: 800px;
+  height: 750px;
   background-color: #f5f5f5;
 }
 .watchModeButton {
@@ -1059,7 +1058,7 @@ export default {
   /* 让宽度跟父元素(外面的大框相关) */
   width: calc(100% - 220px);
   height: 100%;
-  overflow: hidden;
+  overflow: auto;
   background-color: #bbb;
   margin: 10px;
 }
@@ -1067,9 +1066,8 @@ export default {
 .flow-container {
   float: left;
   position: absolute;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
+  width: 1920px;
+  height: 1080px;
   background-size: cover; /* 拉伸并填充整个div */
   background-repeat: no-repeat; /* 不重复 */
   /* background-image: url('https://pic35.photophoto.cn/20150511/0034034892281415_b.jpg'); */
@@ -1097,4 +1095,4 @@ export default {
 <!-- 2.拖拽图片,没啥问题,存档这会还是保存的图片信息 -->
 <!-- 3.保存,另存一个相似的副本,将图片替换为对应id,将替换后的副本发送 -->
 
-<!-- 4,查看模式,发送普通图片版本的信息过去,这样不影响逻辑 -->
\ No newline at end of file
+<!-- 4,查看模式,发送普通图片版本的信息过去,这样不影响逻辑 -->