路径审核预览

src/views/manage/components/Scriptpreviewopen.vue

@@ -82,20 +82,19 @@
         </div> -->
       </el-col>
       <!-- 画布 -->
-      <el-col :span="20">
+      <el-col :span="24">
         <el-col :span="24">
           <div id="page"></div>
         </el-col>
       </el-col>
       <!-- 属性栏 -->
-      <el-col :span="4">
+      <!-- <el-col :span="4">
         <section class="right-part">
-          <!-- 缩略图 -->
           <div id="minimap">
             <div class="title">缩略图</div>
           </div>
         </section>
-      </el-col>
+      </el-col> -->
     </el-row>
     <!-- 弹窗 -->
     <article>
@@ -618,18 +617,30 @@ export default {
       const toolbar = new G6Editor.Toolbar({
         container: "toolbar"
       });
+      const container = document.getElementById('page');
+      // 为 graph 容器添加鼠标滚轮事件监听
+      container.addEventListener('mousewheel', (e) => {
+        e.preventDefault();
+        const ratio = 1.1; // 设置放大缩小的比例
+        const oldScale = this.editor.getCurrentPage().getZoom(); // 获取当前的缩放比例
+        // console.log(oldScale, 'oldScale')
+        const newScale = e.wheelDelta > 0 ? oldScale * ratio : oldScale / ratio; // 根据滚轮方向计算新的缩放比例
+        // console.log(newScale, 'oldScale')
+        this.editor.getCurrentPage().zoom(newScale); // 执行缩放操作
+      })
+
       // 属性栏
       // const detailpannel = new G6Editor.Detailpannel({
       //   container: "detailpannel"
       // });
       // 缩略图
-      let minimapWidth = getComputedStyle(document.querySelector(".right-part")).width;
-      minimapWidth = Number(minimapWidth.replace(/px$/, ""));
-      const minimap = new G6Editor.Minimap({
-        container: "minimap",
-        width: minimapWidth,
-        height: 200
-      });
+      // let minimapWidth = getComputedStyle(document.querySelector(".right-part")).width;
+      // minimapWidth = Number(minimapWidth.replace(/px$/, ""));
+      // const minimap = new G6Editor.Minimap({
+      //   container: "minimap",
+      //   width: minimapWidth,
+      //   height: 200
+      // });
       // 右键菜单
       const contextmenu = new G6Editor.Contextmenu({
         container: "contextmenu"
@@ -639,7 +650,7 @@ export default {
       editor.add(itempannel);
       editor.add(toolbar);
       // editor.add(detailpannel);
-      editor.add(minimap);
+      // editor.add(minimap);
       editor.add(contextmenu);
       // 挂载到window，方便调试
       window.editor = editor;