修改代码

src/api/demoData1.js

@@ -29,6 +29,13 @@ export function searchAaa(query) {
     params: query
   })
 }
+export function searchBbb(query) {
+  return request({
+    url: '/demodata1/searchBbb',
+    method: 'get',
+    params: query
+  })
+}
 export function searchCcc(query) {
   return request({
     url: '/demodata1/searchCcc',
@@ -43,6 +50,20 @@ export function searchCccc(query) {
     params: query
   })
 }
+export function searchDdd(query) {
+  return request({
+    url: '/demodata1/searchDdd',
+    method: 'get',
+    params: query
+  })
+}
+export function searchDddd(query) {
+  return request({
+    url: '/demodata1/searchDddd',
+    method: 'get',
+    params: query
+  })
+}
 export function searchEee(query) {
   return request({
     url: '/demodata1/searchEee',
@@ -50,3 +71,26 @@ export function searchEee(query) {
     params: query
   })
 }
+
+export function searchTableList(data) {
+  return request({
+    method: 'post',
+    url: '/mixSelect/getList',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    data: data
+  })
+}
+export function getListTotal(data) {
+  return request({
+    method: 'post',
+    url: '/mixSelect/getListTotal',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    data: data
+  })
+}
+
+

src/views/template/planeGraph.vue

+<!-- eslint-disable -->
 <template>
-  <div>平面图</div>
+  <div id="viewWindow" class="viewWindow">
+    <div id="backGround" class="backGround">
+      <p>教育
+        有道智慧教育
+        中国大学MOOC
+        网易有道校企合作
+        关于有道
+        有道介绍
+        投资者关系
+        社会责任
+        同道计划
+        廉正举报
+        联系我们
+        加入有道
+        校园招聘
+        社会招聘
+        相关资质
+        营业执照
+        出版物经营许可证
+        广播电视节目
+        制作许可证
+        用户资质
+        隐私政策
+        服务条款</p>
+    </div>
+  </div>
 </template>
 
 <script>
+/* eslint-disable*/
 export default {
-  name: "planeGraph",
+  name: 'PlaneGraph',
   data() {
-    return{
+    return {
+      viewWindow: null,
+      backGround: null,
+      zoom: 1.0,
+      timer: null
+    }
+  },
+  mounted() {
+    // 获取视窗
+    this.viewWindow = document.getElementById('viewWindow')
+    // 获取背景
+    this.backGround = document.getElementById('backGround')
+
+    // 给视窗挂滚轮监听
+    this.viewWindow.addEventListener('wheel', this.onScroll)
+    // 给背景挂按键监听
+    this.backGround.addEventListener('mousedown', this.mouseDown)
+    this.backGround.addEventListener('mouseup', this.mouseUp)
 
+  },
+  beforeDestroy() {
+    // 卸载视窗滚轮监听
+    this.viewWindow.removeEventListener('wheel', this.onScroll)
+    this.backGround.removeEventListener('mousedown', this.mouseDown)
+    this.backGround.removeEventListener('mouseup', this.mouseUp)
+    console.log('卸载鼠标监听');
+  },
+  methods: {
+    // 鼠标滚动后判断缩放
+    onScroll(e) {
+      if (e.wheelDelta < 0) {
+        console.log('鼠标滚轮后滚,缩小')
+        this.zoomDown()
+      } else if (e.wheelDelta > 0) {
+        console.log('鼠标滚轮前滚,放大')
+        this.zoomUp()
+      }
+    },
+    // 放大
+    zoomUp() {
+      this.zoom += 0.1
+      document.querySelector(":root").style.setProperty("--zoom", this.zoom)
+    },
+    // 缩小
+    zoomDown() {
+      this.zoom -= 0.1
+      document.querySelector(":root").style.setProperty("--zoom", this.zoom)
+    },
+
+    // 鼠标按下
+    mouseDown() {
+      // console.log('按下');
+      // 按到背景，给背景挂移动监听
+      this.backGround.addEventListener('mousemove', this.mouseMoveThrottle)
+      this.test()
+    },
+    // 鼠标移动，节流
+    mouseMoveThrottle() {
+      if (!this.timer) {
+        this.timer = setTimeout(() => {
+          this.timer = null
+          this.mouseMove.call(this)
+        }, 500)
+      }
+    },
+    mouseMove() {
+      console.log(111);
+      // 移动背景
+      // 重新计算缩放的中心位置
+    },
+    // 鼠标松开
+    mouseUp() {
+      // console.log('抬起');
+      // 松开背景，给背景移除移动监听
+      this.backGround.removeEventListener('mousemove', this.mouseMoveThrottle)
+    },
+
+    drag() {
+      console.log('拖动');
+    },
+
+    test(){
+      let a = 10
+      return function () {
+        console.log(a);
+      }
+    },
+
+    getAB() {
+
+
+      // var divA = document.getElementById('divA');
+      // var divB = document.getElementById('divB');
+
+      // function getDistanceToCenter() {
+      //   // 获取A的宽度和高度
+      //   var aWidth = divA.offsetWidth;
+      //   var aHeight = divA.offsetHeight;
+
+      //   // 获取B的位置和尺寸
+      //   var bLeft = divB.offsetLeft;
+      //   var bTop = divB.offsetTop;
+      //   var bWidth = divB.offsetWidth;
+      //   var bHeight = divB.offsetHeight;
+
+      //   // 计算B左边框和顶边到A中心点的距离
+      //   var distanceX = (bLeft + bWidth / 2) - (aWidth / 2);
+      //   var distanceY = (bTop + bHeight / 2) - (aHeight / 2);
+
+      //   return { x: distanceX, y: distanceY };
+      // }
+
+      // // 示例：在控制台输出B左边框和顶边到A中心点的距离
+      // console.log(getDistanceToCenter());
     }
   }
 }
 </script>
 
 <style scoped lang="scss">
+:root {
+  --zoom: 1.0;
+}
+
+.viewWindow {
+  overflow: hidden;
+  width: 1000px;
+  height: 600px;
+  border: 1px solid black;
+}
+
+.backGround {
+  scale: (var(--zoom));
+  transform-origin: 10px 10px; // 定义缩放原点,相对于左上角的距离x、y，单位px
+
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+  position: relative;
+  width: 500px;
+  height: 500px;
+  background-color: antiquewhite;
+}
+
+.mode1 {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  margin-left: 10px;
+  margin-top: 10px;
+  background-color: aquamarine;
+}
 
-</style>
+// 父div-A里面有一个子div-B，B会在A里面缩放和移动，我希望实时获取B左边框和顶边到A中心点的距离（px）</style>

vue.config.js

@@ -115,11 +115,13 @@ module.exports = {
       //   }
       // },
       [process.env.VUE_APP_BASE_API]: {
-        target: `http://49.232.167.247:20014/`,
+        // target: `http://192.168.1.38:8088/`,
         // target: `http://localhost:8088/`,
         // target: `http://10.5.87.231:10010/internal`,
         // target: `http://117.122.212.91:32012/`,
         // target: `http://192.144.239.97:20070/`,
+        // ===
+        target: `http://192.168.1.37:8088/`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''