修改接线图展示页面

src/components/mt-preview-ypt/index.vue

@@ -1,46 +1,49 @@
 <template>
     <div
-        style="overflow: hidden; display: flex; flex-direction: column; height: 100vh"
-        v-loading="useData.loading"
         :style="{ backgroundColor: useData.display ? '' : canvas_cfg.color }"
-        :class="`canvasArea ${isDragging ? 'cursor-grabbing' : mtPreviewProps.canDrag ? 'cursor-grab' : ''} `"
         @mousedown="onMouseDown"
         @mousemove="onMouseMove"
         @mouseup="onMouseUp"
         @mouseleave="onMouseUp"
         @wheel="onMouseWheel"
     >
-        <!-- <el-button type="primary" class="backBtn" @click="onBack" v-if="!useData.display">返回</el-button> -->
+        <div
-        <!-- 缩放控制按钮 (默认注释，需要时可开启) -->
+            v-loading="useData.loading"
-        <!-- <div class="zoom-controls">
+            :style="canvasStyle"
+            :class="`canvasArea ${isDragging ? 'cursor-grabbing' : mtPreviewProps.canDrag ? 'cursor-grab' : ''} `"
+        >
+            <!-- <el-button type="primary" class="backBtn" @click="onBack" v-if="!useData.display">返回</el-button> -->
+            <!-- 缩放控制按钮 (默认注释，需要时可开启) -->
+            <!-- <div class="zoom-controls">
             <el-button icon="ZoomIn" size="small" @click="zoomIn"></el-button>
             <el-button icon="ZoomOut" size="small" @click="zoomOut"></el-button>
             <el-button icon="RefreshLeft" size="small" @click="resetTransform"></el-button>
         </div>
          -->
-        <!-- <el-scrollbar ref="elScrollbarRef" class="w-1/1 h-1/1"  @scroll="onScroll" > -->
+            <!-- <el-scrollbar ref="elScrollbarRef" class="w-1/1 h-1/1"  @scroll="onScroll" > -->
-        <div ref="canvasAreaRef" :style="canvasStyle">
+            <div ref="canvasAreaRef">
-            <render-core
+                <render-core
-                v-model:done-json="done_json"
+                    v-model:done-json="done_json"
-                :canvas-cfg="canvas_cfg"
+                    :canvas-cfg="canvas_cfg"
-                :grid-cfg="grid_cfg"
+                    :grid-cfg="grid_cfg"
-                :show-ghost-dom="false"
+                    :show-ghost-dom="false"
-                :canvas-dom="canvasAreaRef"
+                    :canvas-dom="canvasAreaRef"
-                :global-lock="false"
+                    :global-lock="false"
-                :preivew-mode="true"
+                    :preivew-mode="true"
-                :show-popover="mtPreviewProps.showPopover"
+                    :show-popover="mtPreviewProps.showPopover"
-                @setDoneJson="setDoneJson"
+                    @setDoneJson="setDoneJson"
-                @element-click="handleElementClick"
+                    @element-click="handleElementClick"
-            ></render-core>
+                ></render-core>
+            </div>
+            <drag-canvas
+                ref="dragCanvasRef"
+                :scale-ratio="canvas_cfg.scale"
+                @drag-canvas-mouse-down="dragCanvasMouseDown"
+                @drag-canvas-mouse-move="dragCanvasMouseMove"
+                @drag-canvas-mouse-up="dragCanvasMouseUp"
+            ></drag-canvas>
+            <!-- </el-scrollbar> -->
         </div>
-        <drag-canvas
-            ref="dragCanvasRef"
-            :scale-ratio="canvas_cfg.scale"
-            @drag-canvas-mouse-down="dragCanvasMouseDown"
-            @drag-canvas-mouse-move="dragCanvasMouseMove"
-            @drag-canvas-mouse-up="dragCanvasMouseUp"
-        ></drag-canvas>
-        <!-- </el-scrollbar> -->
     </div>
 </template>
 
@@ -58,6 +61,7 @@ import { globalStore } from '../mt-edit/store/global'
 import type { IDoneJsonEventList } from '../mt-edit/store/types'
 
 import MQTT from '@/utils/mqtt'
+import { log } from 'console'
 
 const tableData = [
     {
@@ -174,13 +178,15 @@ const canvasStyle = computed(() => ({
     transformOrigin: '0 0',
     // width: `100vw`,
     // height: `100vh`,
+
     width: canvas_cfg.value.width + 'px',
     height: canvas_cfg.value.height + 'px',
     backgroundColor: useData.display ? '' : canvas_cfg.value.color,
     backgroundImage: canvas_cfg.value.img ? `url(${canvas_cfg.value.img})` : 'none',
     backgroundSize: '100% 100%',
     backgroundPosition: 'center',
-    backgroundRepeat: 'no-repeat'
+    backgroundRepeat: 'no-repeat',
+    marginLeft: (document.documentElement.clientWidth - canvas_cfg.value.width * canvas_cfg.value.scale) / 2 + 'px'
 }))
 
 const onScroll = ({ scrollLeft, scrollTop }: { scrollLeft: number; scrollTop: number }) => {

src/components/mt-preview/index.vue

@@ -4,6 +4,11 @@
         v-loading="useData.loading"
         element-loading-background="#343849c7"
         :style="{ backgroundColor: useData.display ? '' : canvas_cfg.color }"
+        @mousedown="onMouseDown"
+        @mousemove="onMouseMove"
+        @mouseup="onMouseUp"
+        @mouseleave="onMouseUp"
+        @wheel="onMouseWheel"
     >
         <el-button type="primary" class="backBtn" @click="onBack" v-if="!useData.display">返回</el-button>
         <!-- 缩放控制按钮 (默认注释，需要时可开启) -->
@@ -18,11 +23,6 @@
             ref="canvasAreaRef"
             :class="`canvasArea ${isDragging ? 'cursor-grabbing' : mtPreviewProps.canDrag ? 'cursor-grab' : ''} `"
             style=""
-            @mousedown="onMouseDown"
-            @mousemove="onMouseMove"
-            @mouseup="onMouseUp"
-            @mouseleave="onMouseUp"
-            @wheel="onMouseWheel"
             :style="canvasStyle"
         >
             <render-core

src/utils/request.ts

@@ -20,12 +20,7 @@ class HttpRequest {
             config => {
                 // 添加全局的loading..
                 // config.headers['Authorization'] =
-                //     'bearer ' + JSON.parse(window.localStorage.getItem('adminInfo') || '{}').access_token; // 请求头带上token token要在登录的时候保存在localStorage中
+                //     'bearer ' + JSON.parse(window.localStorage.getItem('adminInfo') || '{}').access_token // 请求头带上token token要在登录的时候保存在localStorage中
-                // console.log(
-                //   "🚀 ~ requestHandler ~ config.headers['Authorization']:",
-                //   JSON.parse(window.localStorage.getItem('adminInfo') || '{}'),
-                //   config.headers
-                // );
 
                 config.headers['Authorization'] =
                     'bearer eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySW5kZXgiOiJmYTM3YjkzY2M5MGQ0YzE3ODRjYThmNmRlYmRkZWUxYSIsInVzZXJfbmFtZSI6InJvb3QiLCJzY29wZSI6WyJhbGwiXSwibmlja25hbWUiOiLotoXnuqfnrqHnkIblkZgiLCJ1c2VyVHlwZSI6MCwiZGVwdEluZGV4IjoiNTY5OWU1OTE2YTE4YTYzODFlMWFjOTJkYTViZDI2MjgiLCJleHAiOjE4MjE4MTc2MTksImF1dGhvcml0aWVzIjpbInJvb3QiXSwianRpIjoiMmJiM2Q5ZTYtNmY3Yy00Yjg1LThiM2EtZDI2ODdmMTUzMDg5IiwiY2xpZW50X2lkIjoibmpjbnRlc3QiLCJoZWFkU2N1bHB0dXJlIjoicmVzb3VyY2VEYXRhLzMxNzRDRUFFOUQ0MjRGMjJCQjkxQTU4OURENjdCMDUxLmpwZyJ9.WjeYl1lvvJdDE1FUGIhS99rE5qKaBXOypWxmxK0svWweGqEbu1XCLjKm_YkiTwjZJ_oIcn5JOO9rvHFkkea76BUsYo5wlzuBBiy7sKqM1fFzOFQq6hdFevNTJAbYH9FiBxYxI-e9DZ5mvLGE6umOjUfn_FAsku2w6Uj5DtvpOKBWYzLEPTEifOqNI9he4zJAmVZniUUMf26SDoEdfu0TyrIS1j_qKaEb-cqR1XDhivdthEBK5m9vxJyXFZ5kofNxwQQkit_oiqJRkCZIt9TWAjCh-frzMHCvA30hkAr-VCD2JfCmmEr3hW_lmwfINaPtFVbHCdCKqdrl6VmF1HObaQ'