Ver código fonte

fix: pad温度参数问题处理

chenzhen2 2 anos atrás
pai
commit
77c1e6b620

Diferenças do arquivo suprimidas por serem muito extensas
+ 4 - 0
src/assets/svg/babyselected.svg


BIN
src/assets/svg/bg_disable.png


Diferenças do arquivo suprimidas por serem muito extensas
+ 4 - 0
src/assets/svg/coffee.svg


Diferenças do arquivo suprimidas por serem muito extensas
+ 4 - 0
src/assets/svg/coffeeselected.svg


+ 7 - 0
src/assets/svg/dev.svg

@@ -0,0 +1,7 @@
+<svg width="36" height="20" viewBox="0 0 36 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="8" width="20" height="20" rx="8" fill="#59AFFF" fill-opacity="0.15"/>
+<path d="M13.5 5.6C13.5 5.54477 13.5448 5.5 13.6 5.5H22.4C22.4552 5.5 22.5 5.54477 22.5 5.6V11.5H13.5V5.6Z" stroke="#59AFFF"/>
+<path d="M12.6404 14.5L13.3904 11.5H22.6096L23.3596 14.5H12.6404Z" stroke="#59AFFF"/>
+<path d="M16.5 7.5L15.5 8.5L16.5 9.5" stroke="#59AFFF" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19.5 9.5L20.5 8.5L19.5 7.5" stroke="#59AFFF" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

Diferenças do arquivo suprimidas por serem muito extensas
+ 6 - 0
src/assets/svg/device.svg


Diferenças do arquivo suprimidas por serem muito extensas
+ 6 - 0
src/assets/svg/deviceroom.svg


+ 10 - 0
src/router/index.ts

@@ -183,6 +183,16 @@ export const constantRoutes: Array<RouteRecordRaw> = [
       color: '#F5F5F5',
       hideHeader: false
     }
+  },
+  {
+    path: '/map-data-new',
+    component: () => import('@/views/mapDataNew/index.vue'),
+    name: 'mapDataNew',
+    meta: {
+      title: '地图数据处理',
+      color: '#F5F5F5',
+      hideHeader: false
+    }
   }
 ]
 

+ 3 - 5
src/views/envmonitor/index.vue

@@ -782,7 +782,7 @@ export default defineComponent({
       getPadImg() {
         let params: any = {
           funcType: proxyData.officeData.roomFuncType,
-          spaceId:proxyData.spaceInfo.spaceId
+          spaceId: proxyData.spaceInfo.spaceId,
         };
         let str: any = setQueryConfig(params);
         // debugger;
@@ -1000,6 +1000,7 @@ export default defineComponent({
           })
           .catch(() => {
             proxyData.loadinngEnd();
+            proxyData.timerSpaceInfo();
           });
       },
       // 定时调获取空调接口
@@ -1192,9 +1193,6 @@ export default defineComponent({
         };
         getMeetingSceneHttp(params)
           .then((res) => {
-            // console.log('res====')
-            // console.log(res)
-            // debugger
             let resSen: string = res?.content ?? "";
             if (resSen === "OFFWORK") {
               resSen = "ADJOURNMENT";
@@ -1582,9 +1580,9 @@ export default defineComponent({
       },
       // 定时调空间
       timerSpaceInfo(timer: any = 5000) {
-        proxyData.clearTimerSpaceInfo();
         proxyData.spaceTimer = setTimeout(() => {
           proxyData.getSpaceInfo();
+          proxyData.clearTimerSpaceInfo();
         }, timer);
       },
       isWork: false,

+ 38 - 241
src/views/mapData/index.vue

@@ -1,231 +1,17 @@
 <template>
-  <div class="com-upload">
-    <div class="file-upload">
-      <div class="file-upload-text">上传文件</div>
-      <input
-        class="file-upload-input"
-        id="upfile"
-        type="file"
-        @change="getFile"
-      />
-    </div>
-
-    <canvas id="myCanvas" width="10000" height="10000">
-      Canvas画正多边形
-    </canvas>
+  <div class="com-pic">
+    <div class="pic-1"></div>
+    <div class="div2"></div>
   </div>
 </template>
-  
-<script lang="ts">
-import { number } from "echarts";
+    
+  <script lang="ts">
 import { defineComponent, nextTick, onMounted, reactive, toRefs } from "vue";
 
 export default defineComponent({
   components: {},
   setup() {
-    let allObj: any = [];
-    const proxyData = reactive({
-      allObj: allObj,
-      // canvas画图
-      initCanvas() {
-        let canvasDom: any = document.querySelector("#myCanvas");
-        let ctx: any = canvasDom.getContext("2d");
-        let dots: any = proxyData.allObj.objArr;
-        console.log(proxyData.allObj.objArr);
-        for (let key in dots) {
-          let item = dots[key];
-          console.log(item);
-          ctx.lineWidth = 1;
-          ctx.fillStyle = "#cfefef";
-          ctx.beginPath();
-          let circleArr: any = [];
-          for (let i = 0; i < item.length; i++) {
-            item[i].left = item[i].left;
-            item[i].top = item[i].top;
-            if (item[i].type === "circle") {
-              circleArr.push(item[i]);
-            } else {
-              if (!item[i].type) {
-                ctx.lineTo(item[i].left, item[i].top);
-              }
-            }
-          }
-          if (circleArr && circleArr.length) {
-            ctx.lineTo(circleArr[0].left, circleArr[0].top);
-            ctx.bezierCurveTo(
-              circleArr[1].left,
-              circleArr[1].top,
-              circleArr[2].left,
-              circleArr[2].top,
-              circleArr[3].left,
-              circleArr[3].top
-            );
-          } else {
-            ctx.lineTo(item[0].left, item[0].top);
-          }
-          ctx.fill();
-          ctx.closePath();
-          ctx.strokeStyle = "red"; //填充边框颜色
-          ctx.stroke();
-          // canvasDom.addEventListener("click", function (e: any) {
-          //   const canvasInfo = canvasDom.getBoundingClientRect();
-          //   console.log(e);
-          //   console.log(canvasInfo);
-          //   console.log(ctx.isPointInPath(e.layerX, e.layerY));
-          // });
-        }
-      },
-      getFile(e: any) {
-        console.log(e.target.files);
-        let fileSelect: any = e.target.files[0];
-        let name: any = fileSelect.name;
-        name = name.split(".")[0];
-        // this.fileName = fileSelect.name;
-        let reader: any = new FileReader();
-        if (typeof FileReader === "undefined") {
-          console.log("您的浏览器不支持FileReader接口");
-          return;
-        }
-        reader.readAsText(fileSelect, "gb2312"); //注意读取中文的是用这个编码,不是utf-8
-        // const _this = this;
-        reader.onload = function () {
-          // console.log(reader.result);
-          let result: any = reader.result;
-          // _this.$nextTick(() => {
-          //     _this.voiceContent = reader.result;
-          // });
-          // proxyData.handleStr(result);
-          proxyData.handPoint(result, name);
-        };
-      },
-      handPoint(result: any, name: any) {
-        result = result.replace(/\"/g, "");
-        let nameArr: any = name.split("-");
-        let arr: any = result.split(/[(\r\n)\r\n]+/);
-        let p: any = localStorage.getItem("ponit");
-        let objArr: any = JSON.parse(p) || {};
-        let pointObj: any = {
-          spaceId: nameArr[0].toString(),
-          pointArr: [],
-          circularPoints: [],
-          logPointArr: [],
-        };
-        arr.map((item: any, index: any) => {
-          if (item) {
-            let itemArr: any = item.split(",");
-          }
-        });
-
-        proxyData.allObj.objArr = objArr;
-        localStorage.setItem("ponit", JSON.stringify(proxyData.allObj.objArr));
-        proxyData.initCanvas();
-      },
-      // 处理坐标
-      handleStr(mapstr: any) {
-        let maparr: any = mapstr.split("<DIV ");
-        //console.log("maparr", maparr);
-        let _this: any = proxyData;
-        let allDiv: any = [];
-        let objArr: any = {};
-        let allObj: any = {};
-        //debugger;
-        maparr.map((item: any) => {
-          let divobj: any = {};
-          let divarr: any = item.split(" ");
-          //console.log("divarr", divarr);
-          divarr.map(function (item: any) {
-            if (item.indexOf("id=") > -1) {
-              let idarr: any = item.split("=");
-              // debugger;
-              let idstr: any = idarr[1];
-              divobj.id = idstr;
-              // console.log("idstr", idstr);
-              return;
-            }
-          });
-
-          divobj.height = proxyData.getNum(item, "HEIGHT");
-          divobj.width = proxyData.getNum(item, "WIDTH");
-          divobj.left = proxyData.getNum(item, "LEFT");
-          divobj.top = proxyData.getNum(item, "TOP");
-          let title: any = proxyData.getNum(item, "title");
-          let titleArr: any = title.split("-");
-          console.log(titleArr);
-          divobj.spaceId = titleArr[0];
-          divobj.order = titleArr[1] * 1;
-          if (titleArr[2] && titleArr[2] === "c") {
-            divobj.type = "circle";
-          }
-          if (divobj.width) {
-            allDiv.push(divobj);
-          }
-        });
-
-        allDiv.map((item: any) => {
-          if (item.spaceId) {
-            if (objArr[item.spaceId]) {
-              objArr[item.spaceId].push(item);
-            } else {
-              objArr[item.spaceId] = [item];
-            }
-          } else {
-            allObj.width = item.width;
-            allObj.height = item.height;
-          }
-        });
-        for (let key in objArr) {
-          objArr[key].sort(proxyData.sortab("order"));
-        }
-        proxyData.allObj.objArr = objArr;
-        // 画图
-        proxyData.initCanvas();
-        console.log(JSON.stringify(proxyData.allObj.objArr));
-      },
-      sortab(data: any) {
-        return function (obj1: any, obj2: any) {
-          var value1 = obj1[data];
-          var value2 = obj2[data];
-          if (value2 < value1) {
-            return 1;
-          } else if (value2 > value1) {
-            return -1;
-          } else {
-            return 0;
-          }
-        };
-      },
-      getNum(str: any, param: any) {
-        //debugger;
-        let paindex: any = str.indexOf(param);
-        // console.log(str);
-        if (paindex > -1) {
-          if (param === "title") {
-            let palength: any = param.length;
-            let otherstr: any = str.substr(paindex + palength);
-            let pxindex: any = otherstr.indexOf("#");
-            // debugger
-            let numstr: any = otherstr.substr(0, pxindex);
-            // console.log(numstr);
-            let arr: any = numstr.split("=");
-            let tempStr: any = arr[1];
-            if (tempStr) {
-              tempStr = tempStr.substr(1, tempStr.length);
-            }
-            // console.log(tempStr);
-            return tempStr;
-          } else {
-            let palength: any = param.length;
-            let otherstr: any = str.substr(paindex + palength);
-            //   console.log(otherstr)
-            let pxindex: any = otherstr.indexOf("px");
-            let numstr: any = otherstr.substr(0, pxindex);
-            numstr = numstr.replace(/:/, "");
-            return numstr ? Number(numstr) : "";
-          }
-        }
-        return "";
-      },
-    });
+    const proxyData = reactive({});
     nextTick(() => {});
     onMounted(() => {});
     return {
@@ -234,27 +20,38 @@ export default defineComponent({
   },
 });
 </script>
-  <style lang="scss" scoped>
-.home {
-  .child-view {
-    position: absolute;
-    width: 100%;
-    transition: all 0.8s cubic-bezier(0.55, 0, 0.1, 1);
-  }
-
-  .slide-left-enter,
-  .slide-right-leave-active {
-    opacity: 0;
-    -webkit-transform: translate(50px, 0);
-    transform: translate(50px, 0);
-  }
+<style lang="scss" scoped>
+.com-pic {
+  position: relative;
+}
+.pic-1 {
+  position: absolute;
+  box-sizing: border-box;
+  left: 50px;
+  width: 120px;
+  height: 300px;
+  background-size: 50% 100%;
+  background-repeat: no-repeat;
+  border-top-left-radius: 180px;
+  border-bottom-left-radius: 180px;
+  //   border-bottom: 120px solid red;
+  //   border-right: 60px solid transparent;
+  //   border-left: 60px solid transparent;
+  // rotate: (90deg);
+  border-left: 120px solid red;
+  border-top: 100px solid transparent;
+  border-bottom: 100px solid transparent;
+}
 
-  .slide-left-leave-active,
-  .slide-right-enter {
-    opacity: 0;
-    -webkit-transform: translate(-50px, 0);
-    transform: translate(-50px, 0);
-  }
+.div2 {
+  position: absolute;
+  top: 20px;
+  left: 350px;
+  width: 200px;
+  height: 200px;
+  background: #99b4d3;
+  clip-path: polygon(0 0, 300 0, 150 200, 0 200);
+  //   rotate: (15deg);
 }
 </style>
-  
+    

+ 260 - 0
src/views/mapData/indexOld.vue

@@ -0,0 +1,260 @@
+<template>
+  <div class="com-upload">
+    <div class="file-upload">
+      <div class="file-upload-text">上传文件</div>
+      <input
+        class="file-upload-input"
+        id="upfile"
+        type="file"
+        @change="getFile"
+      />
+    </div>
+
+    <canvas id="myCanvas" width="10000" height="10000">
+      Canvas画正多边形
+    </canvas>
+  </div>
+</template>
+  
+<script lang="ts">
+import { number } from "echarts";
+import { defineComponent, nextTick, onMounted, reactive, toRefs } from "vue";
+
+export default defineComponent({
+  components: {},
+  setup() {
+    let allObj: any = [];
+    const proxyData = reactive({
+      allObj: allObj,
+      // canvas画图
+      initCanvas() {
+        let canvasDom: any = document.querySelector("#myCanvas");
+        let ctx: any = canvasDom.getContext("2d");
+        let dots: any = proxyData.allObj.objArr;
+        console.log(proxyData.allObj.objArr);
+        for (let key in dots) {
+          let item = dots[key];
+          console.log(item);
+          ctx.lineWidth = 1;
+          ctx.fillStyle = "#cfefef";
+          ctx.beginPath();
+          let circleArr: any = [];
+          for (let i = 0; i < item.length; i++) {
+            item[i].left = item[i].left;
+            item[i].top = item[i].top;
+            if (item[i].type === "circle") {
+              circleArr.push(item[i]);
+            } else {
+              if (!item[i].type) {
+                ctx.lineTo(item[i].left, item[i].top);
+              }
+            }
+          }
+          if (circleArr && circleArr.length) {
+            ctx.lineTo(circleArr[0].left, circleArr[0].top);
+            ctx.bezierCurveTo(
+              circleArr[1].left,
+              circleArr[1].top,
+              circleArr[2].left,
+              circleArr[2].top,
+              circleArr[3].left,
+              circleArr[3].top
+            );
+          } else {
+            ctx.lineTo(item[0].left, item[0].top);
+          }
+          ctx.fill();
+          ctx.closePath();
+          ctx.strokeStyle = "red"; //填充边框颜色
+          ctx.stroke();
+          // canvasDom.addEventListener("click", function (e: any) {
+          //   const canvasInfo = canvasDom.getBoundingClientRect();
+          //   console.log(e);
+          //   console.log(canvasInfo);
+          //   console.log(ctx.isPointInPath(e.layerX, e.layerY));
+          // });
+        }
+      },
+      getFile(e: any) {
+        console.log(e.target.files);
+        let fileSelect: any = e.target.files[0];
+        let name: any = fileSelect.name;
+        name = name.split(".")[0];
+        // this.fileName = fileSelect.name;
+        let reader: any = new FileReader();
+        if (typeof FileReader === "undefined") {
+          console.log("您的浏览器不支持FileReader接口");
+          return;
+        }
+        reader.readAsText(fileSelect, "gb2312"); //注意读取中文的是用这个编码,不是utf-8
+        // const _this = this;
+        reader.onload = function () {
+          // console.log(reader.result);
+          let result: any = reader.result;
+          // _this.$nextTick(() => {
+          //     _this.voiceContent = reader.result;
+          // });
+          // proxyData.handleStr(result);
+          proxyData.handPoint(result, name);
+        };
+      },
+      handPoint(result: any, name: any) {
+        result = result.replace(/\"/g, "");
+        let nameArr: any = name.split("-");
+        let arr: any = result.split(/[(\r\n)\r\n]+/);
+        let p: any = localStorage.getItem("ponit");
+        let objArr: any = JSON.parse(p) || {};
+        let pointObj: any = {
+          spaceId: nameArr[0].toString(),
+          pointArr: [],
+          circularPoints: [],
+          logPointArr: [],
+        };
+        arr.map((item: any, index: any) => {
+          if (item) {
+            let itemArr: any = item.split(",");
+          }
+        });
+
+        proxyData.allObj.objArr = objArr;
+        localStorage.setItem("ponit", JSON.stringify(proxyData.allObj.objArr));
+        proxyData.initCanvas();
+      },
+      // 处理坐标
+      handleStr(mapstr: any) {
+        let maparr: any = mapstr.split("<DIV ");
+        //console.log("maparr", maparr);
+        let _this: any = proxyData;
+        let allDiv: any = [];
+        let objArr: any = {};
+        let allObj: any = {};
+        //debugger;
+        maparr.map((item: any) => {
+          let divobj: any = {};
+          let divarr: any = item.split(" ");
+          //console.log("divarr", divarr);
+          divarr.map(function (item: any) {
+            if (item.indexOf("id=") > -1) {
+              let idarr: any = item.split("=");
+              // debugger;
+              let idstr: any = idarr[1];
+              divobj.id = idstr;
+              // console.log("idstr", idstr);
+              return;
+            }
+          });
+
+          divobj.height = proxyData.getNum(item, "HEIGHT");
+          divobj.width = proxyData.getNum(item, "WIDTH");
+          divobj.left = proxyData.getNum(item, "LEFT");
+          divobj.top = proxyData.getNum(item, "TOP");
+          let title: any = proxyData.getNum(item, "title");
+          let titleArr: any = title.split("-");
+          console.log(titleArr);
+          divobj.spaceId = titleArr[0];
+          divobj.order = titleArr[1] * 1;
+          if (titleArr[2] && titleArr[2] === "c") {
+            divobj.type = "circle";
+          }
+          if (divobj.width) {
+            allDiv.push(divobj);
+          }
+        });
+
+        allDiv.map((item: any) => {
+          if (item.spaceId) {
+            if (objArr[item.spaceId]) {
+              objArr[item.spaceId].push(item);
+            } else {
+              objArr[item.spaceId] = [item];
+            }
+          } else {
+            allObj.width = item.width;
+            allObj.height = item.height;
+          }
+        });
+        for (let key in objArr) {
+          objArr[key].sort(proxyData.sortab("order"));
+        }
+        proxyData.allObj.objArr = objArr;
+        // 画图
+        proxyData.initCanvas();
+        console.log(JSON.stringify(proxyData.allObj.objArr));
+      },
+      sortab(data: any) {
+        return function (obj1: any, obj2: any) {
+          var value1 = obj1[data];
+          var value2 = obj2[data];
+          if (value2 < value1) {
+            return 1;
+          } else if (value2 > value1) {
+            return -1;
+          } else {
+            return 0;
+          }
+        };
+      },
+      getNum(str: any, param: any) {
+        //debugger;
+        let paindex: any = str.indexOf(param);
+        // console.log(str);
+        if (paindex > -1) {
+          if (param === "title") {
+            let palength: any = param.length;
+            let otherstr: any = str.substr(paindex + palength);
+            let pxindex: any = otherstr.indexOf("#");
+            // debugger
+            let numstr: any = otherstr.substr(0, pxindex);
+            // console.log(numstr);
+            let arr: any = numstr.split("=");
+            let tempStr: any = arr[1];
+            if (tempStr) {
+              tempStr = tempStr.substr(1, tempStr.length);
+            }
+            // console.log(tempStr);
+            return tempStr;
+          } else {
+            let palength: any = param.length;
+            let otherstr: any = str.substr(paindex + palength);
+            //   console.log(otherstr)
+            let pxindex: any = otherstr.indexOf("px");
+            let numstr: any = otherstr.substr(0, pxindex);
+            numstr = numstr.replace(/:/, "");
+            return numstr ? Number(numstr) : "";
+          }
+        }
+        return "";
+      },
+    });
+    nextTick(() => {});
+    onMounted(() => {});
+    return {
+      ...toRefs(proxyData),
+    };
+  },
+});
+</script>
+  <style lang="scss" scoped>
+.home {
+  .child-view {
+    position: absolute;
+    width: 100%;
+    transition: all 0.8s cubic-bezier(0.55, 0, 0.1, 1);
+  }
+
+  .slide-left-enter,
+  .slide-right-leave-active {
+    opacity: 0;
+    -webkit-transform: translate(50px, 0);
+    transform: translate(50px, 0);
+  }
+
+  .slide-left-leave-active,
+  .slide-right-enter {
+    opacity: 0;
+    -webkit-transform: translate(-50px, 0);
+    transform: translate(-50px, 0);
+  }
+}
+</style>
+  

+ 181 - 0
src/views/mapDataNew/index.vue

@@ -0,0 +1,181 @@
+<template>
+  <div class="com-upload" style="position: relative">
+    <canvas id="myCanvas" class="canvasDom">
+      <img
+        :style="{ left: item.deviceArr[0].left, top: item.deviceArr[0].top }"
+        style="position: absolute; width: 20px; height: 20px; z-index: 999;left: 20px;top:20px;"
+        :src="parseImgUrl('map-icon', 'device.svg')"
+        alt=""
+        :key="index"
+        v-for="(item, index) in spaceList"
+      />
+    </canvas>
+  </div>
+</template>
+    
+  <script lang="ts">
+import { number } from "echarts";
+import { getMapInfo } from "@/apis/envmonitor";
+import { defineComponent, nextTick, onMounted, reactive, toRefs } from "vue";
+import { parseImgUrl } from "@/utils";
+
+export default defineComponent({
+  components: {},
+  setup() {
+    let spaceList: any = [];
+    const proxyData = reactive({
+      spaceList: spaceList,
+      parseImgUrl: parseImgUrl,
+      width: 100,
+      height: 200,
+      // canvas画图
+      initCanvas() {
+        let canvasDom: any = document.querySelector("#myCanvas");
+        canvasDom.width = proxyData.width;
+        canvasDom.height = proxyData.height;
+        let ctx: any = canvasDom.getContext("2d");
+        ctx.clearRect(0, 0, proxyData.width, proxyData.height);
+        proxyData.spaceList.map((item: any) => {
+          let left: any = parseInt(item.left);
+          let top: any = parseInt(item.top);
+          let pointArr: any = [
+            {
+              left: left,
+              top: top,
+            },
+            {
+              left: left + item.width,
+              top: top,
+            },
+            {
+              left: left + item.width,
+              top: top + item.height,
+            },
+            {
+              left: left,
+              top: top + item.height,
+            },
+          ];
+          let deviceArr: any = [
+            {
+              left: left,
+              top: top + 5,
+            },
+            {
+              left: left + 15,
+              top: top + 5,
+            },
+            {
+              left: left + 25,
+              top: top + 5,
+            },
+          ];
+          let logoArr: any = [
+            {
+              left: left + item.width / 2,
+              top: top + item.top / 2,
+            },
+            {
+              left: left + item.width / 2 + 30,
+              top: top + item.top / 2 + 30,
+            },
+          ];
+          item.pointArr = pointArr;
+          item.deviceArr = deviceArr;
+          item.logoArr = logoArr;
+          //   images/map-icon/bg_disable.png
+          if (item.canClick) {
+            ctx.lineWidth = 1;
+            ctx.beginPath();
+            pointArr.map((item: any, index: any) => {
+              ctx.lineTo(item.left, item.top);
+            });
+            ctx.fillStyle = "#cfefef";
+            ctx.fill();
+            // proxyData.drawIcon(ctx, "coffee.svg", deviceArr[0]);
+            // proxyData.drawIcon(ctx, "dev.svg", deviceArr[1]);
+            // proxyData.drawIcon(ctx, "deviceroom.svg", deviceArr[2]);
+          } else {
+            let img: any = new Image();
+            img.src = require("@/assets/svg/bg_disable.png");
+            img.onload = function () {
+              ctx.beginPath();
+              pointArr.map((item: any, index: any) => {
+                if (index === 0) {
+                  ctx.moveTo(item.left, item.top);
+                } else {
+                  ctx.lineTo(item.left, item.top);
+                }
+              });
+              //   ctx.fillStyle = "#cfefef";
+              //   ctx.fill();
+              let pat: any = ctx.createPattern(img, "repeat");
+              ctx.fillStyle = pat;
+              ctx.fill();
+              ctx.closePath();
+              ctx.strokeStyle = "rgba(15, 206, 233, 1)";
+              ctx.stroke();
+            };
+          }
+        });
+      },
+      // 绑定事件
+      bindEvent() {
+        let canvasDom: any = document.querySelector("#myCanvas");
+        // 点击事件
+        canvasDom.addEventListener("click", detect);
+        function detect(event: any) {
+          let x: any = event.clientX - canvasDom.getBoundingClientRect().left;
+          let y: any = event.clientY - canvasDom.getBoundingClientRect().top;
+          //   let ctx: any = canvasDom.getContext("2d");
+          proxyData.initCanvas();
+          console.log(event);
+          alert("点击了!");
+        }
+      },
+      drawIcon(ctx: any, url: any, iconPerstion: any) {
+        let img: any = new Image();
+        img.src = require(`@/assets/svg/${url}`);
+        img.onload = function () {
+          ctx.drawImage(img, iconPerstion.left, iconPerstion.top, 20, 10);
+        };
+      },
+      /**
+       * 获取地图信息
+       */
+      getMapInfo() {
+        let params: any = {
+          projectId: "Pj1101080259",
+          floorId: "Fl11010802593241ec348ecb4148806b9034c8957454",
+        };
+        getMapInfo(params)
+          .then((res) => {
+            // debugger
+            let resData: any = res;
+            let data: any = resData?.data ?? null;
+            proxyData.width = data.width;
+            proxyData.height = data.height;
+            proxyData.spaceList = data.spaceList;
+            proxyData.initCanvas();
+          })
+          .catch(() => {});
+      },
+    });
+    nextTick(() => {
+      proxyData.bindEvent();
+    });
+    onMounted(() => {
+      proxyData.getMapInfo();
+    });
+    return {
+      ...toRefs(proxyData),
+    };
+  },
+});
+</script>
+<style lang="scss" scoped>
+.canvasDom {
+  position: relative;
+}
+</style>
+