修改接线图展示页面

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

@@ -1,14 +1,16 @@
 <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"
+    >
+        <div
+            v-loading="useData.loading"
+            :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> -->
             <!-- 缩放控制按钮 (默认注释，需要时可开启) -->
@@ -19,7 +21,7 @@
         </div>
          -->
             <!-- <el-scrollbar ref="elScrollbarRef" class="w-1/1 h-1/1"  @scroll="onScroll" > -->
-        <div ref="canvasAreaRef" :style="canvasStyle">
+            <div ref="canvasAreaRef">
                 <render-core
                     v-model:done-json="done_json"
                     :canvas-cfg="canvas_cfg"
@@ -42,6 +44,7 @@
             ></drag-canvas>
             <!-- </el-scrollbar> -->
         </div>
+    </div>
 </template>
 
 <script setup lang="ts">
@@ -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'