Browse Source

fix:地图数据处理

chenzhen2 2 years ago
parent
commit
4a26ccf234

+ 469 - 0
src/views/envmonitor/components/Map/CanvasBox.vue

@@ -0,0 +1,469 @@
+<template>
+  <canvas id="myCanvas" class="canvas-dom" style="boder: 1px solid red">
+  </canvas>
+</template>
+        
+  <script lang="ts">
+import { Search } from "vant";
+import { number } from "echarts";
+import { getMapInfo } from "@/apis/envmonitor";
+import { defineComponent, nextTick, onMounted, reactive, toRefs } from "vue";
+import { parseImgUrl } from "@/utils";
+import { swiper } from "@/utils/swiper";
+
+export default defineComponent({
+  components: {
+    VanSearch: Search,
+  },
+  setup() {
+    let spaceList: any = [];
+    let ctx: any = {};
+    let centerObj: any = {};
+    const proxyData = reactive({
+      spaceList: spaceList,
+      copySpaceArr: spaceList,
+      parseImgUrl: parseImgUrl,
+      spaceName: "",
+      width: 3361.136,
+      height: 2729.25,
+      scale: 1,
+      ctx: ctx,
+      centerObj: centerObj,
+      // 搜索某个空间
+      searchSpace() {
+        proxyData.spaceList.map((item: any) => {
+          // debugger
+          console.log(item.localName == proxyData.spaceName);
+          console.log("搜索====");
+          console.log(item.localName);
+          console.log(proxyData.spaceName);
+          if (item.localName == proxyData.spaceName) {
+            console.log("搜索到某个空间");
+            item.fillColor = "red";
+            item.shadow = true;
+            proxyData.initCanvas();
+          } else {
+            // item.shadow = false;
+            // item.fillColor = "#ececec";
+          }
+        });
+      },
+      // 放大
+      zommAdd() {
+        console.log("被点击了");
+        if (proxyData.scale > 3) {
+          return;
+        }
+        proxyData.scale = proxyData.scale + 0.1;
+        // debugger;
+        proxyData.formSpaceData();
+        proxyData.initCanvas();
+      },
+      // 缩小
+      zommDel() {
+        if (proxyData.scale < 0.3) {
+          return;
+        }
+        proxyData.scale = proxyData.scale - 0.1;
+        proxyData.formSpaceData();
+        proxyData.initCanvas();
+      },
+      sliderSwiper() {
+        // 获取当前时间的下标
+        let sliderList: any = document.querySelector("#sliderListId");
+        sliderList.addEventListener("touchstart", function (e: any) {});
+        swiper(sliderList, {
+          swipeLeft: function (e: any) {},
+          swipeRight: function (e: any) {},
+        });
+      },
+      // canvas画图
+      initCanvas() {
+        let canvasDom: any = document.querySelector("#myCanvas");
+        let ctx: any = canvasDom.getContext("2d");
+        proxyData.drawDpiBegin(
+          canvasDom,
+          ctx,
+          proxyData.width,
+          proxyData.height
+        );
+        proxyData.ctx = ctx;
+        ctx.clearRect(0, 0, proxyData.width, proxyData.height);
+        ctx.scale(
+          proxyData.scale,
+          proxyData.scale,
+          centerObj.left,
+          centerObj.top
+        );
+
+        proxyData.spaceList.map((item: any) => {
+            // debugger
+          if (item.canClick) {
+            let circleArr: any = item.circlePoint;
+            ctx.beginPath();
+            ctx.fillStyle = item.fillColor;
+            let pointLeftArr: any = [];
+            let pointTopArr: any = [];
+
+            item.pointArr.map((childItem: any, index: any) => {
+            //   debugger
+              childItem.left = childItem.left;
+              childItem.top = childItem.top;
+              if (index == 0) {
+                ctx.moveTo(childItem.left, childItem.top);
+              } else {
+                ctx.lineTo(childItem.left, childItem.top);
+              }
+              pointLeftArr.push(childItem.left);
+              pointTopArr.push(childItem.top);
+            });
+            // debugger;
+            console.log(item.devicePoint);
+            proxyData.drawIcon(ctx, "coffee.svg", item.devicePoint[0]);
+            // proxyData.drawIcon(ctx, "dev.svg", item.devicePoint[1]);
+            // proxyData.drawIcon(ctx, "deviceroom.svg", item.devicePoint[2]);
+            ctx.closePath();
+            ctx.fill();
+            ctx.lineWidth = 1;
+            ctx.strokeStyle = "rgba(15, 206, 233, 1)";
+            ctx.stroke();
+            ctx.beginPath();
+            if (circleArr && circleArr.length) {
+              console.log(circleArr);
+              ctx.lineTo(circleArr[3].left, circleArr[3].top);
+              ctx.bezierCurveTo(
+                circleArr[2].left,
+                circleArr[2].top,
+                circleArr[1].left,
+                circleArr[1].top,
+                circleArr[0].left,
+                circleArr[0].top
+              );
+            }
+            ctx.closePath();
+            ctx.fill();
+            ctx.lineWidth = 1;
+            ctx.strokeStyle = "rgba(15, 206, 233, 1)";
+            ctx.stroke();
+
+            let min1: any =
+              proxyData.MaxAndMin(pointLeftArr)[1] -
+              proxyData.MaxAndMin(pointLeftArr)[0];
+            let min2: any =
+              proxyData.MaxAndMin(pointTopArr)[1] -
+              proxyData.MaxAndMin(pointTopArr)[0];
+            let min: any = min1 < min2 ? min1 : min2;
+            ctx.beginPath();
+            ctx.font = "13px serif";
+            ctx.textAlign = "center";
+            ctx.fillStyle = item.fillColor !== "#ececec" ? "#ffffff" : "red";
+            console.log("min===" + min);
+            if (item.localName && min > 100) {
+              ctx.fillText(
+                item.localName,
+                item.logPointArr[0].left,
+                item.logPointArr[0].top,
+                item.width
+              );
+            }
+            ctx.closePath();
+            if (item.shadow) {
+              item.shadowColor = "#000000";
+              ctx.shadowOffsetX = -50; //阴影x轴位移。正值向右,负值向左。
+              ctx.shadowOffsetY = -50; //阴影y轴位移。正值向下,负值向上。
+              ctx.shadowBlur = 10; //阴影模糊滤镜。数据越大,扩散程度越大。
+            }
+          } else {
+            let img: any = new Image();
+            img.src = require("@/assets/svg/bg_disable.png");
+            img.onload = function () {
+              ctx.beginPath();
+              item.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();
+            };
+          }
+        });
+        proxyData.drawDpiEnd(canvasDom, ctx);
+      },
+      MaxAndMin(arr: any) {
+        return [Math.min.apply(null, arr), Math.max.apply(null, arr)];
+      },
+      // 绑定事件
+      bindEvent() {
+        let canvasDom: any = document.querySelector("#myCanvas");
+        // 点击事件
+        canvasDom.addEventListener("click", proxyData.detect);
+      },
+      // 解决canvas画图模糊的问题
+      // 开始画
+      drawDpiBegin(dom: any, context: any, width: any, height: any) {
+        context.save();
+        let scaleValue = window.devicePixelRatio;
+        dom.setAttribute("width", width * scaleValue);
+        dom.setAttribute("height", height * scaleValue);
+
+        dom.style.width = width + "px";
+        dom.style.height = height + "px";
+        context.scale(scaleValue, scaleValue);
+      },
+      // 画图介绍
+      drawDpiEnd(dom: any, context: any) {
+        context.restore();
+      },
+      // 地图点击事件
+      detect(event: any) {
+        let canvasDom: any = document.querySelector("#myCanvas");
+        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("点击了!");
+        for (let i = 0; i < proxyData.spaceList.length; i++) {
+          let item: any = proxyData.spaceList[i];
+          let devicePoint: any = item.devicePoint;
+          let pointArr: any = item.pointArr;
+          let iconFlag: any = false;
+          devicePoint.map((dev: any, index: any) => {
+            if (
+              x >= dev.left &&
+              x <= dev.left + 20 &&
+              y >= dev.top &&
+              y < dev.top + 20
+            ) {
+              // alert("我被点了!");
+              // console.log("我被点了!")
+              iconFlag = true;
+              console.log(`我被点了设备图标!${index}`);
+            }
+          });
+          if (iconFlag) {
+            break;
+          }
+          let dot: any = {
+            x: x,
+            y: y,
+          };
+          let coordinates: any = pointArr;
+          coordinates.map((item: any) => {
+            item.x = item.left;
+            item.y = item.top;
+          });
+          let flag = proxyData.queryPtInPolygon(dot, coordinates);
+          // console.log(flag);
+          if (flag) {
+            console.log("点击了区域" + item.localName);
+            break;
+          }
+        }
+      },
+      queryPtInPolygon(point: any, polygon: any) {
+        let p1: any = "";
+        let p2: any = "";
+        let p3: any = "";
+        let p4: any = "";
+
+        p1 = point;
+        p2 = { x: 1000000000000, y: point.y };
+
+        let count: any = 0;
+        //对每条边都和射线作对比
+        for (let i = 0; i < polygon.length - 1; i++) {
+          p3 = polygon[i];
+          p4 = polygon[i + 1];
+          if (checkCross(p1, p2, p3, p4) == true) {
+            count++;
+          }
+        }
+        p3 = polygon[polygon.length - 1];
+
+        p4 = polygon[0];
+        if (checkCross(p1, p2, p3, p4) == true) {
+          count++;
+        }
+
+        return count % 2 == 0 ? false : true;
+
+        //判断两条线段是否相交
+        function checkCross(p1: any, p2: any, p3: any, p4: any) {
+          let v1: any = { x: p1.x - p3.x, y: p1.y - p3.y };
+          let v2: any = { x: p2.x - p3.x, y: p2.y - p3.y };
+
+          let v3: any = { x: p4.x - p3.x, y: p4.y - p3.y };
+          let v: any = crossMul(v1, v3) * crossMul(v2, v3);
+
+          v1 = { x: p3.x - p1.x, y: p3.y - p1.y };
+          v2 = { x: p4.x - p1.x, y: p4.y - p1.y };
+
+          v3 = { x: p2.x - p1.x, y: p2.y - p1.y };
+          return v <= 0 && crossMul(v1, v3) * crossMul(v2, v3) <= 0
+            ? true
+            : false;
+        }
+
+        //计算向量叉乘
+        function crossMul(v1: any, v2: any) {
+          return v1.x * v2.y - v1.y * v2.x;
+        }
+      },
+      // 画图标
+      drawIcon(ctx: any, url: any, iconPerstion: any) {
+        if (iconPerstion) {
+          let img: any = new Image();
+          img.src = require(`@/assets/svg/${url}`);
+          img.onload = function () {
+            ctx.drawImage(img, iconPerstion.left, iconPerstion.top, 25, 15);
+            iconPerstion.width = 30;
+            iconPerstion.height = 30;
+          };
+        }
+      },
+      // 设置区域颜色
+      setSpaceColor() {
+        proxyData.spaceList.map((item: any, index: any) => {
+          if (index % 2 == 0) {
+            item.fillColor = "#ffcc33";
+          } else if (index % 3 == 0) {
+            item.fillColor = "#ccff99";
+          } else {
+            item.fillColor = "#ececec";
+          }
+        });
+        console.log(proxyData.spaceList);
+      },
+      // 数据格式化
+      formSpaceData() {
+        proxyData.spaceList = JSON.parse(proxyData.copySpaceArr);
+
+        proxyData.spaceList.map((item: any) => {
+          item.fillColor = "#ececec";
+        });
+      },
+      // 格式化地图数据
+      formatePage() {
+        let spaceList: any = [
+          {
+            spaceId: "1",
+            localName: "H301",
+            canClick: true,
+            pointArr: [
+              {
+                left: 577.1346,
+                top: 1944.0056,
+              },
+              {
+                left: 577.1346,
+                top: 2160.6334,
+              },
+              {
+                left: 398.5199,
+                top: 2339.25,
+              },
+              {
+                left: 295.3858,
+                top: 2339.25,
+              },
+              {
+                left: 295.3858,
+                top: 1764.7014,
+              },
+              {
+                left: 397.8632,
+                top: 1764.7014,
+              },
+            ],
+            devicePoint: [
+              {
+                left: 537.493,
+                top: 2151.2646,
+              },
+            ],
+            circlePoint: [],
+            detailPoint: [
+              {
+                left: 317.5158,
+                top: 1797.2386999999999,
+              },
+            ],
+            logoPointArr: [
+              {
+                left: 436.2602,
+                top: 2052.1476000000002,
+              },
+            ],
+          },
+        ];
+        proxyData.copySpaceArr = JSON.stringify(spaceList);
+        proxyData.formSpaceData();
+      },
+
+      /**
+       * 获取地图信息
+       */
+      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.setSpaceColor();
+            proxyData.initCanvas();
+          })
+          .catch(() => {});
+      },
+    });
+    nextTick(() => {
+      proxyData.bindEvent();
+    });
+    onMounted(() => {
+      // proxyData.getMapInfo();
+      proxyData.formatePage();
+      proxyData.initCanvas();
+    });
+    return {
+      ...toRefs(proxyData),
+    };
+  },
+});
+</script>
+    <style lang="scss" scoped>
+.canvas-box {
+  width: 100%;
+  height: calc(100% - 80px);
+  // overflow-x: hidden;
+  // overflow-y: hidden;
+}
+.com-upload {
+  width: 100%;
+  height: 100%;
+  // overflow: hidden;
+}
+.space-search {
+  position: fixed;
+  width: 350px;
+  left: 10px;
+  top: 50px;
+  z-index: 333;
+}
+</style>
+        

+ 13 - 5
src/views/envmonitor/components/Map/MapBox.vue

@@ -55,7 +55,6 @@
               >
             </template>
           </div>
-          <!--          <div class="circle" v-else :style="{backgroundColor: area.circleColor?area.circleColor:''}"></div>-->
         </div>
       </div>
     </div>
@@ -151,6 +150,7 @@ import {
 import { Toast, Dialog } from "vant";
 import { getBuildingList, getFloorList, getMapInfo } from "@/apis/envmonitor";
 import SpaceSearch from "@/views/envmonitor/Search/SpaceSearch.vue";
+import CanvasBox from "./CanvasBox.vue";
 import { useRouter } from "vue-router";
 import { getSpaceType, mapIcon } from "@/utils/mapIcon";
 import any = jasmine.any;
@@ -181,9 +181,14 @@ export default defineComponent({
       type: String,
       default: () => "",
     },
+    mapType: {
+      type: Number,
+      default: () => 1,
+    },
   },
   components: {
     SpaceSearch,
+    CanvasBox,
   },
   setup(props, contx) {
     const router = useRouter();
@@ -279,9 +284,9 @@ export default defineComponent({
             //计算指针距离元素边框的位置
             disX = startX - el.offsetLeft;
             disY = startY - el.offsetTop;
-            console.log( el.offsetLeft)
-            console.log(el.offsetTop)
-            console.log(e.touches[0].pageX)
+            console.log(el.offsetLeft);
+            console.log(el.offsetTop);
+            console.log(e.touches[0].pageX);
           },
           { passive: true }
         );
@@ -348,6 +353,7 @@ export default defineComponent({
         let houseHeight: any = houseDesDom ? houseDesDom.offsetHeight : 0;
         proxyData.swipe(matrix_box, {
           swipeLeft: function (e: any) {
+            // debugger;
             if (!proxyData.displacement.moveable) {
               if (matrix_box.offsetWidth < proxyData.screenInfo.screenWidth) {
               } else {
@@ -1129,6 +1135,7 @@ export default defineComponent({
       },
       // 设备模块初始化地图
       init(item: any) {
+        // debugger;
         if (item) {
           proxyData.setDefaultSpace(item);
         }
@@ -1182,6 +1189,7 @@ export default defineComponent({
       proxyData.spaceInfo.buildingId = props.buildingId;
       proxyData.spaceInfo.floorId = props.floorId;
       proxyData.selectArea.spaceId = props.spaceInfo.spaceId;
+      // debugger;
       proxyData.init(proxyData.spaceInfo);
     });
     return {
@@ -1223,7 +1231,7 @@ export default defineComponent({
     }
     .device span {
       color: #fff !important;
-      font-size:16px;
+      font-size: 16px;
     }
   }
 

+ 1 - 0
src/views/envmonitor/components/Map/index.vue

@@ -11,6 +11,7 @@
     </div>
     <map-box
       v-if="type === 2"
+      :mapType="2"
       :spaceData="spaceData"
       :projectId="projectId"
       :floorId="floorId"

+ 31 - 200
src/views/envmonitor/index.vue

@@ -1013,6 +1013,7 @@ export default defineComponent({
         getSpaceInfo(data)
           .then((res) => {
             const content: any = res?.content ?? [];
+            console.log("timer===", 1);
             if (content[0]) {
               proxyData.officeData = content[0];
             }
@@ -1299,12 +1300,6 @@ export default defineComponent({
           }
         }
       },
-      // 修改加班时间
-      setWorkTime() {
-        proxyData.showScenario = false;
-        // 修改成功后获取服务定制时间
-        proxyData.setTime();
-      },
       // 提前关闭
       handlePreClose() {
         let endDate: any = formatDate();
@@ -1402,164 +1397,6 @@ export default defineComponent({
         }
         return newStr;
       },
-      // 获取灯灯定制时间
-      getSetTimeHttp() {
-        const params: { spaceId: string } = {
-          spaceId: proxyData.spaceInfo.spaceId,
-        };
-        getSetTimeHttp(params).then((res) => {
-          const resData = res;
-          // debugger
-          const content = resData?.content ?? {};
-          // proxyData.workInfo = content
-          /* 可选日期和时间的规则是:
-          当下时间至次日服务定制开始时间;
-          如果没有服务定制时间,
-          默认次日8:00 */
-          proxyData.nextCusStartTime = content.nextCusStartTime
-            ? Math.floor(Number(content.nextCusStartTime / 10000))
-            : 9;
-          /* 当时间早于  当天服务定制开始时间且不早于2个小时,当前时间-当天服务开始时间 ;
-                否则,当天服务结束时间为开始-明天服务定制开始时间/明天8点
-            */
-          let date = formatDate("");
-          let tomText: string = ""; // 明天 文案
-          let now = getHours(); // 用户的时间
-          let cusEndTime: number = 0; // 服务定制 - 开始时间
-          let cusStartTime: number = 0; // 服务定制 - 结束时间
-          let changTime: number = 0; // 修改后的时间
-          proxyData.showWorkOff = false; // 不显示提前关闭
-
-          /*
-              先判断服务定制时间是否跨天,跨天以第二天的开始时间为准
-            */
-          // 修改以后的时间 endDate 和 endTime
-          // 当天
-          // debugger
-          if (content.endDate && date === content.endDate) {
-            changTime = Number(content.endTime / 10000);
-            tomText = "";
-          }
-          // 修改到明天
-          if (content.endDate && date !== content.endDate) {
-            changTime = Number(content.endTime / 10000); // 今天的时间肯定小于明天的 所以+24
-            tomText = "明天";
-          }
-
-          /* 无服务定制时间:
-              --- 时间弹窗 ----
-              今天显示:当前时间开始,默认是当前时间+2小时
-              次日显示:00点 - 8点
-              --- 有设置时间 ---
-              1、 且 设置时间在当前时间之后,显示设置时间
-              2、 且在当前时间之前,显示选择结束时间
-          */
-          // 无服务定制时间
-          if (
-            !content.nextCusEndTime &&
-            !content.cusStartTime &&
-            content.endDate
-          ) {
-            let daTime = tomText ? changTime + 24 : changTime;
-            // console.log('无服务定制', daTime);
-            if (now < daTime) {
-              proxyData.headerInfo.tipText = `${tomText}${proxyData.hourMiChange(
-                changTime
-              )}`;
-              proxyData.headerInfo.tipTextSwatch = false;
-              proxyData.showWorkOff = true; // 提前关闭
-              proxyData.workInfo.textTime = proxyData.hourMiChange(changTime);
-              proxyData.workInfo.text = tomText ? tomText : "今天";
-            } else {
-              proxyData.headerInfo.tipText = "选择工作结束时间";
-              proxyData.headerInfo.tipTextSwatch = true;
-              proxyData.workInfo.textTime = "";
-              proxyData.workInfo.text = "";
-            }
-          } else {
-            proxyData.headerInfo.tipText = "选择工作结束时间";
-            proxyData.headerInfo.tipTextSwatch = true;
-            proxyData.workInfo.textTime = "";
-            proxyData.workInfo.text = "";
-          }
-
-          if (!content.cusEndTime) {
-            proxyData.cusStartTime = 0; // 今天的服务定制开始时间
-            proxyData.cusEndTime = 0; // 今天结束时间
-            return;
-          }
-          // 无服务定制不走下面的代码
-          /*
-                有服务定制:
-                    当天进来时间、用户修改时间、当天服务定制时间 显示判断;
-                    1、今天没有,明天有
-                    2、今天有,明天没有
-                    3、今天有,明天有
-            */
-          if (content.cusEndTime) {
-            cusStartTime = content.cusStartTime
-              ? Number(content.cusStartTime / 10000)
-              : 0;
-            cusEndTime = content.cusEndTime
-              ? Number(content.cusEndTime / 10000)
-              : 0;
-            proxyData.cusStartTime = Math.floor(cusStartTime); // 今天的服务定制开始时间
-            proxyData.cusEndTime = Math.floor(cusEndTime); // 今天的服务定制结束时间
-          }
-          // 1、用户时间 服务定制时间之内
-          // debugger
-          if (now >= cusStartTime && now < cusEndTime && !changTime) {
-            // console.log('当前时间,服务定制之内,没有更改时间')
-            proxyData.headerInfo.tipText = `${tomText}${proxyData.hourMiChange(
-              cusEndTime
-            )}`;
-            proxyData.headerInfo.tipTextSwatch = false;
-          } else if (now >= cusStartTime && now < cusEndTime && changTime) {
-            const daTime =
-              (tomText ? changTime + 24 : changTime) > now
-                ? changTime
-                : cusEndTime;
-            // console.log('当前时间,服务定制之内,有更改时间', daTime)
-            proxyData.headerInfo.tipText = `${tomText}${proxyData.hourMiChange(
-              daTime
-            )}`;
-            proxyData.headerInfo.tipTextSwatch = false;
-            proxyData.workInfo.textTime = proxyData.hourMiChange(daTime);
-            proxyData.workInfo.text = tomText ? tomText : "今天";
-          } else if (now >= cusEndTime && changTime) {
-            //大于服务定制时间
-            // (tomText ? changTime + 24 : changTime) 判断changeTime是否跨天
-            if ((tomText ? changTime + 24 : changTime) >= now) {
-              // console.log('当前时间,服务定制之外,有更改时间且 修改时间大于当前');
-              cusEndTime = changTime;
-              proxyData.headerInfo.tipText = `${tomText}${proxyData.hourMiChange(
-                cusEndTime
-              )}`;
-              proxyData.headerInfo.tipTextSwatch = false;
-              proxyData.showWorkOff = true;
-              proxyData.workInfo.textTime = proxyData.hourMiChange(cusEndTime);
-              proxyData.workInfo.text = tomText ? tomText : "今天";
-            } else {
-              // console.log('当前时间,服务定制之外,有更改时间且 修改时间小于当前')
-              proxyData.headerInfo.tipTextSwatch = true;
-              proxyData.headerInfo.tipText = "选择工作结束时间";
-              proxyData.workInfo.textTime = "";
-              proxyData.workInfo.text = "";
-            }
-          } else {
-            // proxyData.headerInfo.tipTextSwatch = false
-            proxyData.headerInfo.tipTextSwatch = true;
-            proxyData.headerInfo.tipText = "选择工作结束时间";
-            // proxyData.headerInfo.tipText = `${tomText}${proxyData.hourMiChange(cusEndTime)}`
-            proxyData.workInfo.textTime = "";
-            proxyData.workInfo.text = "";
-          }
-        });
-      },
-      // 设置设备的关闭时间
-      setTime() {
-        proxyData.getSetTimeHttp();
-      },
       // 点击切换会议室场景
       handlePopup(type: string = "scenario") {
         if (proxyData.userIsControl) {
@@ -1637,6 +1474,13 @@ export default defineComponent({
        * 获取场景列表
        */
       scenarioArr: scenarioArr,
+      // 定时获取场景的配置
+      querySpaceSceneConfigTimer(timer: any = 10000) {
+        let timerOut: any = setTimeout(() => {
+          proxyData.querySpaceSceneConfig();
+          clearTimeout(timerOut);
+        }, timer);
+      },
       querySpaceSceneConfig() {
         let params: any = {
           spaceId: proxyData.spaceInfo.spaceId,
@@ -1648,6 +1492,7 @@ export default defineComponent({
           let data: any = resData?.data ?? [];
           proxyData.scenarioArr = data;
           proxyData.checkIsSpaceScene();
+          proxyData.querySpaceSceneConfigTimer();
         });
       },
       /**
@@ -1655,14 +1500,17 @@ export default defineComponent({
        */
       workkArr: workkArr,
       secenTimer: secenTimer,
+      // 清除查询加班记录的定时器
+      clearSecenTimer() {
+        clearTimeout(proxyData.secenTimer);
+        proxyData.secenTimer = null;
+      },
       // 定时查空间的加班记录
       queryCustomAndScenceTimer(timer: any = 10000) {
-        if (proxyData.secenTimer) {
-          clearTimeout(proxyData.secenTimer);
-          proxyData.secenTimer = null;
-        }
+        proxyData.clearSecenTimer();
         proxyData.secenTimer = setTimeout(() => {
           proxyData.queryCustomAndScence();
+          proxyData.clearSecenTimer();
         }, timer);
       },
       // 定时查空间的加班记录
@@ -1684,10 +1532,10 @@ export default defineComponent({
             if (proxyData.controlMode === 1) {
               proxyData.formateManualWorkTime();
             }
-            proxyData.queryCustomAndScenceTimer(5000);
+            proxyData.queryCustomAndScenceTimer();
           })
           .catch(() => {
-            proxyData.queryCustomAndScenceTimer(5000);
+            proxyData.queryCustomAndScenceTimer();
           });
       },
 
@@ -1767,14 +1615,12 @@ export default defineComponent({
         // proxyData.roomType = "";
         // 获取场景配置
         proxyData.timerSpaceInfo(0);
-        // 获取空间下的设备信息
-        proxyData.getEquipments();
-        proxyData.querySpaceSceneConfig();
+        // 动态获取场景配置
+        proxyData.querySpaceSceneConfigTimer(0);
         // 查询加班记录
         proxyData.queryCustomAndScenceTimer(0);
-        proxyData.setTime();
-        // 定时获取空间模式
-        // proxyData.getSpaceModeTimer()
+        // 获取空间下的设备信息
+        proxyData.getEquipments();
       },
       /**
        *删除参数
@@ -1784,23 +1630,12 @@ export default defineComponent({
         let url: any = window.location.origin + window.location.pathname;
         history.replaceState("", "", url);
       },
-      // 定时关闭提示框
-      setTimerCloseTip() {
-        let timeNum: number = 0;
-        proxyData.intervalTimer = setInterval(() => {
-          timeNum++;
-          if (timeNum > 2) {
-            proxyData.showSpaceTip = false;
-            clearInterval(proxyData.intervalTimer);
-            proxyData.updatePageUrl();
-          }
-        }, 1000);
-      },
       // 平板当前空间
       spaceData: spaceData,
       copySpaceData: spaceData,
       floorId: "",
       buildingId: "",
+      // 获取pad当前绑定的空间
       queryWorkSpace() {
         let params: any = {
           criteria: {
@@ -1887,8 +1722,8 @@ export default defineComponent({
       },
       // 切换空间
       changeSpace(item: any, type: any = 0) {
-        // 定时清除空间信息
-        proxyData.clearTimerSpaceInfo();
+        //
+        proxyData.clearAll();
         // 重置当前选中空间的状态
         proxyData.resetSpaceStatus();
         proxyData.spaceInfo = item;
@@ -1943,22 +1778,18 @@ export default defineComponent({
         //执行长按要执行的内容,如弹出菜单
         // console.log("长按");
       },
-    });
-    nextTick(() => {
-      // proxyData.envmonitorMove()
-      // proxyData.envScrollTop()
+      // 定时器清除
+      clearAll() {
+        proxyData.clearTimerSpaceInfo();
+        proxyData.clearSecenTimer();
+      },
     });
     onBeforeUnmount(() => {
-      proxyData.clearTimerSpaceInfo();
+      proxyData.clearAll();
     });
     onMounted(() => {
-      // debugger
-      // 获取天气信息
-      // console.log("router====")
-      // console.log(route.query)
       let spaceId: any = route.query.spaceId;
       proxyData.spaceInfo = {
-        // spaceId: "Sp1101080259ce19c0effb604fe380f3a00c37e3959e",
         spaceId: spaceId,
       };
       proxyData.defaultSpace = {

+ 61 - 47
src/views/mapData/indexOld.vue

@@ -132,18 +132,27 @@ export default defineComponent({
           item.devicePoint.map((dev: any) => {
             dev.left = dev.left * 1;
             dev.top = proxyData.floorObj.height - dev.top;
+            // dev.top = dev.top;
           });
           item.logoPointArr.map((dev: any) => {
             dev.left = dev.left * 1;
             dev.top = proxyData.floorObj.height - dev.top;
+            // dev.top = dev.top;
           });
           item.pointArr.map((dev: any) => {
             dev.left = dev.left * 1;
             dev.top = proxyData.floorObj.height - dev.top;
+            // dev.top = dev.top;
           });
           item.circlePoint.map((dev: any) => {
             dev.left = dev.left * 1;
             dev.top = proxyData.floorObj.height - dev.top;
+            // dev.top = dev.top;
+          });
+          item.detailPoint.map((dev: any) => {
+            dev.left = dev.left * 1;
+            dev.top = proxyData.floorObj.height - dev.top;
+            // dev.top = dev.top;
           });
         });
       },
@@ -162,65 +171,70 @@ export default defineComponent({
               console.log(obj);
               if (obj.width && obj.height) {
                 proxyData.floorObj.width = obj.width;
-                proxyData.floorObj.height = obj.width;
-                proxyData.floorObj.floorId=nameArr[1]
+                proxyData.floorObj.height = obj.height;
+                proxyData.floorObj.floorId = nameArr[1];
               }
             }
           });
         } else {
-          let pointObj: any = {
-            spaceId: nameArr[1] ? nameArr[1].toString() : "",
-            localName: nameArr[0] ? nameArr[0].toString() : "",
-            canClick: nameArr[2] && nameArr[2] == "unc" ? false : true,
-            pointArr: [],
-            devicePoint: [],
-            circlePoint: [],
-            logoPointArr: [],
-          };
+          if (nameArr[0]) {
+            let pointObj: any = {
+              spaceId: nameArr[1] ? nameArr[1].toString() : "",
+              localName: nameArr[0] ? nameArr[0].toString() : "",
+              canClick: nameArr[2] && nameArr[2] == "unc" ? false : true,
+              pointArr: [],
+              devicePoint: [],
+              circlePoint: [],
+              detailPoint: [],
+              logoPointArr: [],
+            };
 
-          arr.map((item: any, index: any) => {
-            if (item) {
-              let itemArr: any = item.split(",");
-              let obj: any = {
-                left: itemArr[0],
-                top: itemArr[1],
-              };
-              if (pointObj.canClick && nameArr[2] && nameArr[2] == "c") {
-                pointObj.circlePoint.push(obj);
-              } else if (
-                !pointObj.canClick &&
-                nameArr[3] &&
-                nameArr[3] == "c"
-              ) {
-                pointObj.circlePoint.push(obj);
-              } else {
-                if (index <= 1) {
-                  pointObj.logoPointArr.push(obj);
-                } else if (index <= 4) {
-                  pointObj.devicePoint.push(obj);
+            arr.map((item: any, index: any) => {
+              if (item) {
+                let itemArr: any = item.split(",");
+                let obj: any = {
+                  left: itemArr[0],
+                  top: itemArr[1],
+                };
+                if (pointObj.canClick && nameArr[2] && nameArr[2] == "c") {
+                  pointObj.circlePoint.push(obj);
+                } else if (
+                  !pointObj.canClick &&
+                  nameArr[2] &&
+                  nameArr[2] == "c"
+                ) {
+                  pointObj.circlePoint.push(obj);
                 } else {
-                  pointObj.pointArr.push(obj);
+                  if (index < 1) {
+                    pointObj.devicePoint.push(obj);
+                  } else if (index < 2) {
+                    pointObj.logoPointArr.push(obj);
+                  } else if (index < 3) {
+                    pointObj.detailPoint.push(obj);
+                  } else {
+                    pointObj.pointArr.push(obj);
+                  }
                 }
               }
-            }
-          });
+            });
 
-          let flag: any = false;
-          proxyData.spaceArr.map((item: any) => {
-            if (nameArr[1] && item.spaceId === nameArr[1]) {
-              item.circlePoint = pointObj.circlePoint;
-              flag = true;
-            } else {
-              if (item.spaceId === nameArr[0]) {
-                item.logoPointArr = pointObj.logoPointArr;
-                item.devicePoint = pointObj.devicePoint;
-                item.pointArr = pointObj.pointArr;
+            let flag: any = false;
+            proxyData.spaceArr.map((item: any) => {
+              if (nameArr[1] && item.spaceId === nameArr[1]) {
+                item.circlePoint = pointObj.circlePoint;
                 flag = true;
+              } else {
+                if (item.spaceId === nameArr[0]) {
+                  item.logoPointArr = pointObj.logoPointArr;
+                  item.devicePoint = pointObj.devicePoint;
+                  item.pointArr = pointObj.pointArr;
+                  flag = true;
+                }
               }
+            });
+            if (!flag) {
+              proxyData.spaceArr.push(pointObj);
             }
-          });
-          if (!flag) {
-            proxyData.spaceArr.push(pointObj);
           }
         }
       },

File diff suppressed because it is too large
+ 48 - 1237
src/views/mapDataNew/sichuan.vue