引入地图

package-lock.json

@@ -958,6 +958,41 @@
             "integrity": "sha1-K1o6s/kYzKSKjHVMCBaOPwPrphs=",
             "dev": true
         },
+        "@saga-web/base": {
+            "version": "2.1.9",
+            "resolved": "http://dev.dp.sagacloud.cn:8082/repository/npm-saga/@saga-web/base/-/base-2.1.9.tgz",
+            "integrity": "sha512-V5Xgh02IFmRgM0/7Hkm34RFS/VHepK7786LefuJLyuRh0B48DNJSPrkBAgad5Rl5VM76c8hSQikiS/fyuy7nDQ=="
+        },
+        "@saga-web/cad-engine": {
+            "version": "2.0.565",
+            "resolved": "http://dev.dp.sagacloud.cn:8082/repository/npm-saga/@saga-web/cad-engine/-/cad-engine-2.0.565.tgz",
+            "integrity": "sha512-ffHLfDXDRS8cipfyrXAXN2tueuNXVGLRmrTLmacbqhOIuIQZIUzVjaDVfCPxicTL+HHdMEDt7ZGXzuWf2IFfuw==",
+            "requires": {
+                "@saga-web/base": "2.1.9",
+                "@saga-web/draw": "2.1.80",
+                "@saga-web/graphy": "2.1.52",
+                "axios": "^0.18.0",
+                "pako": "^1.0.10",
+                "poly-decomp": "^0.3.0",
+                "polybooljs": "^1.2.0"
+            }
+        },
+        "@saga-web/draw": {
+            "version": "2.1.80",
+            "resolved": "http://dev.dp.sagacloud.cn:8082/repository/npm-saga/@saga-web/draw/-/draw-2.1.80.tgz",
+            "integrity": "sha512-NR1ingLeebY/r2Z/KhelngSkQS8rB+tSlmDvjgxZPbsOX+OO077iZ0foQEq4pDLf2leRYDMKLTz3nwecHfbpeg==",
+            "requires": {
+                "@saga-web/base": "^2.1.9"
+            }
+        },
+        "@saga-web/graphy": {
+            "version": "2.1.52",
+            "resolved": "http://dev.dp.sagacloud.cn:8082/repository/npm-saga/@saga-web/graphy/-/graphy-2.1.52.tgz",
+            "integrity": "sha512-64Kvrg7bDR1QT4N+MM56rOZePNMLv46m525leqkVr1cUHfh11kZy3PcUchth0tN6oqXghT3KmQGDVpngKNHs+A==",
+            "requires": {
+                "@saga-web/draw": "2.1.80"
+            }
+        },
         "@soda/friendly-errors-webpack-plugin": {
             "version": "1.7.1",
             "resolved": "https://registry.npm.taobao.org/@soda/friendly-errors-webpack-plugin/download/@soda/friendly-errors-webpack-plugin-1.7.1.tgz",
@@ -2056,6 +2091,43 @@
             "integrity": "sha1-JDkOatYThrCnRyZXVNKhchnehiw=",
             "dev": true
         },
+        "axios": {
+            "version": "0.18.1",
+            "resolved": "http://dev.dp.sagacloud.cn:8082/repository/npm-saga/axios/-/axios-0.18.1.tgz",
+            "integrity": "sha512-0BfJq4NSfQXd+SkFdrvFbG7addhYSBA2mQwISr46pD6E5iqkWg02RAs8vyTT/j0RTnoYmeXauBuSv1qKwR179g==",
+            "requires": {
+                "follow-redirects": "1.5.10",
+                "is-buffer": "^2.0.2"
+            },
+            "dependencies": {
+                "debug": {
+                    "version": "3.1.0",
+                    "resolved": "http://dev.dp.sagacloud.cn:8082/repository/npm-saga/debug/-/debug-3.1.0.tgz",
+                    "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+                    "requires": {
+                        "ms": "2.0.0"
+                    }
+                },
+                "follow-redirects": {
+                    "version": "1.5.10",
+                    "resolved": "http://dev.dp.sagacloud.cn:8082/repository/npm-saga/follow-redirects/-/follow-redirects-1.5.10.tgz",
+                    "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
+                    "requires": {
+                        "debug": "=3.1.0"
+                    }
+                },
+                "is-buffer": {
+                    "version": "2.0.4",
+                    "resolved": "http://dev.dp.sagacloud.cn:8082/repository/npm-saga/is-buffer/-/is-buffer-2.0.4.tgz",
+                    "integrity": "sha512-Kq1rokWXOPXWuaMAqZiJW4XxsmD9zGx9q4aePabbn3qCRGedtH7Cm+zV8WETitMfu1wdh+Rvd6w5egwSngUX2A=="
+                },
+                "ms": {
+                    "version": "2.0.0",
+                    "resolved": "http://dev.dp.sagacloud.cn:8082/repository/npm-saga/ms/-/ms-2.0.0.tgz",
+                    "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+                }
+            }
+        },
         "babel-eslint": {
             "version": "10.0.3",
             "resolved": "https://registry.npm.taobao.org/babel-eslint/download/babel-eslint-10.0.3.tgz?cache=0&sync_timestamp=1575991707525&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbabel-eslint%2Fdownload%2Fbabel-eslint-10.0.3.tgz",
@@ -3685,7 +3757,8 @@
         "deepmerge": {
             "version": "1.5.2",
             "resolved": "https://registry.npm.taobao.org/deepmerge/download/deepmerge-1.5.2.tgz?cache=0&sync_timestamp=1572279720382&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdeepmerge%2Fdownload%2Fdeepmerge-1.5.2.tgz",
-            "integrity": "sha1-EEmdhohEza1P7ghC34x/bwyVp1M="
+            "integrity": "sha1-EEmdhohEza1P7ghC34x/bwyVp1M=",
+            "dev": true
         },
         "default-gateway": {
             "version": "5.0.5",
@@ -4147,29 +4220,6 @@
             "integrity": "sha1-pvfhx5AlwrBYOOjjRPbonrgyE6g=",
             "dev": true
         },
-        "element-ui": {
-            "version": "2.13.0",
-            "resolved": "https://registry.npmjs.org/element-ui/-/element-ui-2.13.0.tgz",
-            "integrity": "sha512-KYsHWsBXYbLELS8cdfvgJTOMSUby3UEjvsPV1V1VmgJ/DdkOAS4z3MiOrPxrT9w2Cc5lZ4eVSQiGhYFR5NVChw==",
-            "requires": {
-                "async-validator": "~1.8.1",
-                "babel-helper-vue-jsx-merge-props": "^2.0.0",
-                "deepmerge": "^1.2.0",
-                "normalize-wheel": "^1.0.1",
-                "resize-observer-polyfill": "^1.5.0",
-                "throttle-debounce": "^1.0.1"
-            },
-            "dependencies": {
-                "async-validator": {
-                    "version": "1.8.5",
-                    "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-1.8.5.tgz",
-                    "integrity": "sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==",
-                    "requires": {
-                        "babel-runtime": "6.x"
-                    }
-                }
-            }
-        },
         "elliptic": {
             "version": "6.5.2",
             "resolved": "https://registry.npm.taobao.org/elliptic/download/elliptic-6.5.2.tgz?cache=0&sync_timestamp=1574449776597&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Felliptic%2Fdownload%2Felliptic-6.5.2.tgz",
@@ -7739,11 +7789,6 @@
             "integrity": "sha1-suHE3E98bVd0PfczpPWXjRhlBVk=",
             "dev": true
         },
-        "normalize-wheel": {
-            "version": "1.0.1",
-            "resolved": "https://registry.npmjs.org/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
-            "integrity": "sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU="
-        },
         "npm-run-path": {
             "version": "2.0.2",
             "resolved": "https://registry.npm.taobao.org/npm-run-path/download/npm-run-path-2.0.2.tgz?cache=0&sync_timestamp=1577052941951&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fnpm-run-path%2Fdownload%2Fnpm-run-path-2.0.2.tgz",
@@ -8115,8 +8160,7 @@
         "pako": {
             "version": "1.0.10",
             "resolved": "https://registry.npm.taobao.org/pako/download/pako-1.0.10.tgz",
-            "integrity": "sha1-Qyi621CGpCaqkPVBl31JVdpclzI=",
-            "dev": true
+            "integrity": "sha1-Qyi621CGpCaqkPVBl31JVdpclzI="
         },
         "parallel-transform": {
             "version": "1.2.0",
@@ -8319,6 +8363,16 @@
                 "find-up": "^3.0.0"
             }
         },
+        "poly-decomp": {
+            "version": "0.3.0",
+            "resolved": "http://dev.dp.sagacloud.cn:8082/repository/npm-saga/poly-decomp/-/poly-decomp-0.3.0.tgz",
+            "integrity": "sha512-hWeBxGzPYiybmI4548Fca7Up/0k1qS5+79cVHI9+H33dKya5YNb9hxl0ZnDaDgvrZSuYFBhkCK/HOnqN7gefkQ=="
+        },
+        "polybooljs": {
+            "version": "1.2.0",
+            "resolved": "http://dev.dp.sagacloud.cn:8082/repository/npm-saga/polybooljs/-/polybooljs-1.2.0.tgz",
+            "integrity": "sha1-tDkMLgedTCYtOyUExiiNlbp6R1g="
+        },
         "portfinder": {
             "version": "1.0.25",
             "resolved": "https://registry.npm.taobao.org/portfinder/download/portfinder-1.0.25.tgz?cache=0&sync_timestamp=1571176857935&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fportfinder%2Fdownload%2Fportfinder-1.0.25.tgz",
@@ -10513,11 +10567,6 @@
                 "neo-async": "^2.6.0"
             }
         },
-        "throttle-debounce": {
-            "version": "1.1.0",
-            "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-1.1.0.tgz",
-            "integrity": "sha512-XH8UiPCQcWNuk2LYePibW/4qL97+ZQ1AN3FNXwZRBNPPowo/NRU5fAlDCSNBJIYCKbioZfuYtMhG4quqoJhVzg=="
-        },
         "through": {
             "version": "2.3.8",
             "resolved": "https://registry.npm.taobao.org/through/download/through-2.3.8.tgz",

package.json

@@ -12,7 +12,11 @@
         "core-js": "^3.4.4",
         "vue": "^2.6.10",
         "vue-router": "^3.1.3",
-        "vuex": "^3.1.2"
+        "vuex": "^3.1.2",
+        "@saga-web/base": "2.1.9",
+        "@saga-web/cad-engine": "2.0.565",
+        "@saga-web/draw": "2.1.80",
+        "@saga-web/graphy": "2.1.52"
     },
     "devDependencies": {
         "@vue/cli-plugin-babel": "^4.1.0",

src/components/floorMap/floorBase.vue

@@ -0,0 +1,38 @@
+<template>
+  <div id="floor_base">
+    <canvas id="map" :width="initWidth" height="800"></canvas>
+  </div>
+</template>
+<script>
+import { ZoneScene } from "@saga-web/cad-engine/lib";
+import { FloorView } from "@saga-web/cad-engine/lib/FloorView";
+// import { SPainter, SPoint, SLinearGradient } from "@saga-web/draw/lib";
+export default {
+  data() {
+    return {
+      view: null, //视图
+      ZoneScene: null, //场景类
+      initWidth: null, //初始化得宽度
+      mapUrl: "/api/download/daas//b2b5a2130cf511eabf9667e7f714e00e.jsonz"
+    };
+  },
+  methods: {
+    //     clearImg() {
+    //   if (!this.ZoneScene) {
+    //     this.ZoneScene = new ZoneScene();
+    //   }
+    //   // this.ZoneScene.clearMap();
+    // },
+  },
+  mounted() {
+    //  将场景赋给view对图进行绘制
+    this.initWidth = document.documentElement.clientWidth;
+    this.view = new FloorView(`map`);
+    this.ZoneScene = new ZoneScene();
+    this.ZoneScene.loadUrl(this.mapUrl).then(res => {
+      this.view.scene = this.ZoneScene;
+      this.view.fitSceneToView();
+    });
+  }
+};
+</script>

src/components/floorMap/index.vue

@@ -0,0 +1,16 @@
+<template>
+  <div id="floor_map">
+    <floorBase></floorBase>
+  </div>
+</template>
+<script>
+import floorBase from "./floorBase"
+export default {
+  components:{floorBase},
+  data() {
+    return {};
+  },
+  methods: {},
+  mounted() {}
+};
+</script>

src/views/floorFunc/index.vue

@@ -1,6 +1,20 @@
 <template>
-  <div id="floorFunc">楼层功能</div>
+  <div id="floorFunc">
+    <floorMap></floorMap>
+  </div>
 </template>
+<script>
+import floorMap from "@/components/floorMap/index.vue";
+export default {
+  components: { floorMap },
+  data() {
+    return {};
+  },
+  mounted() {
+
+  }
+};
+</script>
 <style lang="less">
 #floorFunc {
   color: #fff;

src/views/flooraction/index.vue

@@ -1,604 +0,0 @@
-<template>
-  <div class="floor-container">
-    <div class="png">
-      <div
-        class="f1"
-        v-show="imgShow"
-      >
-        <div>
-          <img
-            src="../../assets/images/flooraction/one.png"
-            alt=""
-          />
-        </div>
-        <div>
-          <img
-            :class="{ 'is-lucency': stateStatus }"
-            src="../../assets/images/flooraction/F1.png"
-            alt=""
-          />
-        </div>
-      </div>
-
-      <div
-        class="b2"
-        v-show="!imgShow"
-      >
-        <div>
-          <img
-            src="../../assets/images/flooraction/undergroundtwo.png"
-            alt=""
-          />
-        </div>
-        <div>
-          <img
-            v-show="shebeifang"
-            class="dashangye"
-            src="../../assets/images/flooraction/dashangye.png"
-            alt=""
-          />
-          <img
-            v-show="shebeifang"
-            class="caoshi"
-            src="../../assets/images/flooraction/caoshi.png"
-            alt=""
-          />
-          <img
-            v-show="shebeifang"
-            class="caoshishenghuo"
-            src="../../assets/images/flooraction/caoshishenghuo.png"
-            alt=""
-          />
-          <img
-            v-show="shebeifang"
-            class="xiaofang"
-            src="../../assets/images/flooraction/xiaofang.png"
-            alt=""
-          />
-          <img
-            v-show="shebeifang"
-            class="dashangyeshuiben"
-            src="../../assets/images/flooraction/dashangyeshuiben.png"
-            alt=""
-          />
-          <div
-            class="tongdao"
-            v-show="tongdao"
-          >
-            <div>
-              <img
-                src="../../assets/images/flooraction/tongdao.png"
-                alt=""
-              />
-              X2
-            </div>
-            <div>
-              <img
-                src="../../assets/images/flooraction/tongdao.png"
-                alt=""
-              />
-              X2
-            </div>
-            <div>
-              <img
-                src="../../assets/images/flooraction/tongdao.png"
-                alt=""
-              />
-              X2
-            </div>
-            <div>
-              <img
-                src="../../assets/images/flooraction/tongdao.png"
-                alt=""
-              />
-              X2
-            </div>
-            <div>
-              <img
-                src="../../assets/images/flooraction/tongdao.png"
-                alt=""
-              />
-              X2
-            </div>
-            <div>
-              <img
-                src="../../assets/images/flooraction/tongdao.png"
-                alt=""
-              />
-              X2
-            </div>
-            <div>
-              <img
-                src="../../assets/images/flooraction/tongdao.png"
-                alt=""
-              />
-              X2
-            </div>
-            <div>
-              <img
-                src="../../assets/images/flooraction/tongdao.png"
-                alt=""
-              />
-              X2
-            </div>
-            <div>
-              <img
-                src="../../assets/images/flooraction/tongdao.png"
-                alt=""
-              />
-              X2
-            </div>
-          </div>
-          <div
-            class="futi"
-            v-show="futi"
-          >
-            <div style="cursor: pointer; z-index: 9998;">
-              <img
-                src="../../assets/images/flooraction/zidongfuti.webp"
-                alt=""
-              />
-              X2
-            </div>
-            <!-- @click="$emit('update:shebeisheshiShow', true)" -->
-            <div style="cursor: pointer; z-index: 9998;">
-              <img
-                src="../../assets/images/flooraction/zidongfuti.webp"
-                alt=""
-              />
-              X2
-            </div>
-          </div>
-          <div
-            class="huoti"
-            v-show="huoti"
-          >
-            <div style="cursor: pointer; z-index: 9998;">
-              <img
-                src="../../assets/images/flooraction/zidongfutiescalator2.webp"
-                alt=""
-              />
-              X2
-            </div>
-            <div style="cursor: pointer; z-index: 9998;">
-              <img
-                src="../../assets/images/flooraction/zidongfutiescalator2.webp"
-                alt=""
-              />
-              X2
-            </div>
-            <div style="cursor: pointer; z-index: 9998;">
-              <img
-                src="../../assets/images/flooraction/zidongfutiescalator2.webp"
-                alt=""
-              />
-              X2
-            </div>
-            <div style="cursor: pointer; z-index: 9998;">
-              <img
-                src="../../assets/images/flooraction/zidongfutiescalator2.webp"
-                alt=""
-              />
-              X2
-            </div>
-            <div style="cursor: pointer; z-index: 9998;">
-              <img
-                src="../../assets/images/flooraction/zidongfutiescalator2.webp"
-                alt=""
-              />
-              X2
-            </div>
-          </div>
-          <div
-            class="weishengjian"
-            v-show="weishengjian"
-          >
-            <div>
-              <img
-                src="../../assets/images/flooraction/weishengjian.png"
-                alt=""
-              />
-              X2
-            </div>
-          </div>
-          <div
-            class="keti"
-            v-show="keti"
-          >
-            <div style="cursor: pointer; z-index: 9998;">
-              <img
-                src="../../assets/images/flooraction/diandongfuti.webp"
-                alt=""
-              />
-              X2
-            </div>
-            <div style="cursor: pointer; z-index: 9998;">
-              <img
-                src="../../assets/images/flooraction/diandongfuti.webp"
-                alt=""
-              />
-              X2
-            </div>
-          </div>
-          <img
-            :class="{ 'is-lucency': stateStatus }"
-            src="../../assets/images/flooraction/B2.png"
-            alt=""
-          />
-        </div>
-        <div
-          class="hover-img"
-          @click="handleGoRoute"
-        >
-          <img
-            src="../../assets/images/flooraction/hover.png"
-            alt=""
-          />
-        </div>
-      </div>
-    </div>
-
-    <div class="select">
-      <selector-model
-        ref="child"
-        @childDataArrEvent="childDataArrEvent"
-        :imgShow.sync="imgShow"
-        :stateStatus.sync="stateStatus"
-      ></selector-model>
-    </div>
-    <Modal
-      :obj="obj"
-      :routerName="routerName"
-      @handlerouterName="handlerouterName"
-    />
-    <div
-      class="mask"
-      v-show="obj.show"
-    ></div>
-  </div>
-</template>
-
-<script>
-import selectorModel from "./selector.vue";
-import Modal from "../Device/Modal";
-export default {
-  props: ["routerName"],
-  data() {
-    return {
-      imgShow: false,
-      stateStatus: false,
-      childDataArr: [],
-      shebeifang: true,
-      tongdao: true,
-      weishengjian: true,
-      huoti: true,
-      keti: true,
-      futi: true,
-      obj: {
-        show: false,
-        src: "main-list"
-      }
-    };
-  },
-  computed: {},
-  created() {},
-  mounted() {},
-  watch: {
-    routerName: {
-      immediate: true,
-      handler: function(val) {
-        if (val == "floor1") {
-          this.handleModal();
-        } else {
-          this.obj = {
-            show: false,
-            src: "room-layout",
-            istab: true
-          };
-        }
-      }
-    }
-  },
-  methods: {
-    handleGoRoute() {
-      this.$emit("handlerouterName", "floor1");
-      this.handleModal();
-    },
-    childDataArrEvent(arr) {
-      this.childDataArr = arr;
-      // console.log(this.childDataArr)
-      this.shebeifang =
-        this.childDataArr.indexOf("主要设备房") == -1 ? false : true;
-      this.tongdao = this.childDataArr.indexOf("疏散通道") == -1 ? false : true;
-      this.weishengjian =
-        this.childDataArr.indexOf("卫生间") == -1 ? false : true;
-      this.futi = this.childDataArr.indexOf("扶梯/坡梯") == -1 ? false : true;
-      this.keti = this.childDataArr.indexOf("客梯") == -1 ? false : true;
-      this.huoti = this.childDataArr.indexOf("货梯") == -1 ? false : true;
-
-      if (this.childDataArr.length == 0) {
-        this.shebeifang = true;
-        this.tongdao = true;
-        this.weishengjian = true;
-        this.futi = true;
-        this.keti = true;
-        this.huoti = true;
-      }
-    },
-    handleModal() {
-      this.obj = {
-        show: true,
-        src: "room-layout",
-        istab: true
-      };
-    },
-    handlerouterName(val) {
-      this.$emit("handlerouterName", val);
-      // console.log(val);
-      // this.$emit("handlerouterName", val);
-      // this.$set(this.obj, "show", false);
-    }
-  },
-  components: { selectorModel, Modal }
-};
-</script>
-
-<style scoped lang="less">
-.floor-container {
-  position: relative;
-  height: 100%;
-  color: #fff;
-
-  .png {
-    height: 100%;
-    .is-lucency {
-      opacity: 0.4;
-      // position: relative;
-      // z-index: 0;
-    }
-    & > div {
-      height: 100%;
-      position: relative;
-      & > div:nth-child(1) {
-        // height: 100%;
-        position: absolute;
-        left: 59px;
-        top: 50px;
-      }
-      & > div:nth-child(2) {
-        height: 100%;
-        padding-top: 60px;
-        box-sizing: border-box;
-        text-align: center;
-        position: relative;
-        .dashangye {
-          z-index: 100;
-          position: absolute;
-          top: 140px;
-          left: 910px;
-        }
-        .caoshi {
-          z-index: 99;
-          position: absolute;
-          top: 141px;
-          left: 707px;
-        }
-        .caoshishenghuo {
-          z-index: 99;
-          position: absolute;
-          top: 326px;
-          left: 1547px;
-        }
-        .xiaofang {
-          z-index: 99;
-          position: absolute;
-          top: 225px;
-          left: 1437px;
-        }
-        .dashangyeshuiben {
-          z-index: 99;
-          position: absolute;
-          top: 254px;
-          left: 1503px;
-        }
-        .tongdao {
-          // z-index: 100;
-          width: 100%;
-          height: ~"calc(100% - 60px)";
-          position: absolute;
-          left: 0;
-          top: 0;
-          & > div {
-            position: absolute;
-            font-size: 16px;
-            z-index: 99;
-            img {
-              vertical-align: bottom;
-            }
-          }
-          & > div:nth-of-type(1) {
-            left: 491px;
-            top: 156px;
-          }
-          & > div:nth-of-type(2) {
-            left: 798px;
-            top: 142px;
-          }
-          & > div:nth-of-type(3) {
-            left: 1218px;
-            top: 169px;
-          }
-          & > div:nth-of-type(4) {
-            left: 595px;
-            top: 323px;
-          }
-          & > div:nth-of-type(5) {
-            left: 1006px;
-            top: 376px;
-          }
-          & > div:nth-of-type(6) {
-            left: 332px;
-            top: 747px;
-          }
-          & > div:nth-of-type(7) {
-            left: 790px;
-            top: 730px;
-          }
-          & > div:nth-of-type(8) {
-            left: 1286px;
-            top: 667px;
-          }
-          & > div:nth-of-type(9) {
-            left: 1520px;
-            top: 467px;
-          }
-        }
-        .futi {
-          // z-index: 30;
-          width: 100%;
-          height: ~"calc(100% - 60px)";
-          position: absolute;
-          left: 0;
-          top: 0;
-          & > div {
-            z-index: 99;
-            position: absolute;
-            font-size: 16px;
-            img {
-              vertical-align: bottom;
-              width: 46px;
-            }
-          }
-          & > div:nth-of-type(1) {
-            left: 435px;
-            top: 258px;
-          }
-          & > div:nth-of-type(2) {
-            left: 1191px;
-            top: 601px;
-          }
-        }
-        .huoti {
-          // z-index: 30;
-          width: 100%;
-          height: ~"calc(100% - 60px)";
-          position: absolute;
-          left: 0;
-          top: 0;
-          & > div {
-            z-index: 99;
-            position: absolute;
-            font-size: 16px;
-            img {
-              vertical-align: bottom;
-              width: 46px;
-            }
-          }
-          & > div:nth-of-type(1) {
-            left: 544px;
-            top: 365px;
-          }
-          & > div:nth-of-type(2) {
-            left: 600px;
-            top: 350px;
-          }
-          & > div:nth-of-type(3) {
-            left: 951px;
-            top: 372px;
-          }
-          & > div:nth-of-type(4) {
-            left: 295px;
-            top: 713px;
-          }
-          & > div:nth-of-type(5) {
-            left: 1494px;
-            top: 496px;
-          }
-        }
-        .weishengjian {
-          // z-index: 30;
-          width: 100%;
-          height: ~"calc(100% - 60px)";
-          position: absolute;
-          left: 0;
-          top: 0;
-          & > div {
-            z-index: 99;
-            position: absolute;
-            font-size: 16px;
-            left: 1018px;
-            top: 323px;
-            img {
-              vertical-align: bottom;
-            }
-          }
-        }
-        .keti {
-          // z-index: 30;
-          width: 100%;
-          height: ~"calc(100% - 60px)";
-          position: absolute;
-          left: 0;
-          top: 0;
-          & > div {
-            z-index: 99;
-            position: absolute;
-            font-size: 16px;
-            img {
-              vertical-align: bottom;
-              width: 46px;
-            }
-          }
-          & > div:nth-of-type(1) {
-            top: 725px;
-            left: 1046px;
-          }
-          & > div:nth-of-type(2) {
-            top: 315px;
-            left: 1335px;
-          }
-        }
-      }
-      .hover-img {
-        position: absolute;
-        top: 140px;
-        left: 917px;
-        width: 168px;
-        height: 105px;
-        z-index: 101;
-        img {
-          cursor: pointer;
-          margin-left: -7px;
-          display: none;
-        }
-      }
-
-      .hover-img:hover {
-        img {
-          display: block;
-        }
-      }
-    }
-    .b2 {
-      position: relative;
-    }
-  }
-  .select {
-    position: absolute;
-    right: 20px;
-    top: 35%;
-    transform: translateY(-50%);
-    z-index: 10000;
-  }
-  .mask {
-    position: fixed;
-    top: 0;
-    left: 0;
-    background: #000;
-    width: 100%;
-    height: 100%;
-    z-index: 2000;
-    opacity: 0.8;
-  }
-}
-</style>

src/views/flooraction/selector.vue

@@ -1,370 +0,0 @@
-<template>
-  <div>
-    <div>
-      <div style="cursor: pointer; position: relative;">
-        <img
-          @click="clickEventShow"
-          src="../../assets/images/flooraction/legend.png"
-          alt=""
-        />
-        <el-collapse-transition>
-          <div class="sele-legend" v-show="legendShow">
-            <div>
-              <div class="sign">
-                <img
-                  src="../../assets/images/flooraction/sanjiao2.png"
-                  alt=""
-                />
-              </div>
-              <div class="title">
-                <div>
-                  <el-checkbox
-                    v-model="allState"
-                    @change="allChange"
-                  ></el-checkbox>
-                </div>
-                <div>项目</div>
-                <div>数量</div>
-                <div>单位</div>
-                <div>图例</div>
-              </div>
-              <div class="table">
-                <ul>
-                  <li
-                    v-for="(item, index) in legend"
-                    :key="index"
-                    :class="{ 'is-status': item.state }"
-                  >
-                    <div>
-                      <el-checkbox
-                        v-model="item.state"
-                        @change="itemChange(item)"
-                      ></el-checkbox>
-                    </div>
-                    <div>{{ item.name }}</div>
-                    <div>{{ item.count }}</div>
-                    <div>{{ item.unit }}</div>
-                    <div>
-                      <span v-if="item.name == '建筑面积'">--</span>
-                      <span v-else-if="item.name == '机动车位'">--</span>
-                      <span v-else-if="item.name == '防火分区'">--</span>
-                      <img
-                        v-else-if="item.name == '主要设备房'"
-                        src="../../assets/images/flooraction/sebei.png"
-                        alt=""
-                      />
-                      <img
-                        v-else-if="item.name == '疏散通道'"
-                        src="../../assets/images/flooraction/tongdao.png"
-                        alt=""
-                      />
-                      <img
-                        v-else-if="item.name == '卫生间'"
-                        src="../../assets/images/flooraction/weishengjian.png"
-                        alt=""
-                      />
-                      <img
-                        v-else-if="item.name == '扶梯/坡梯'"
-                        src="../../assets/images/flooraction/futi.png"
-                        alt=""
-                      />
-                      <img
-                        v-else-if="item.name == '客梯'"
-                        src="../../assets/images/flooraction/keti.png"
-                        alt=""
-                      />
-                      <img
-                        v-else-if="item.name == '货梯'"
-                        src="../../assets/images/flooraction/huoti.png"
-                        alt=""
-                      />
-                      <img
-                        v-else
-                        src="../../assets/images/flooraction/liantongkou.png"
-                        alt=""
-                      />
-                    </div>
-                  </li>
-                </ul>
-                <div class="text">
-                  <p style="padding-left: 2px;">
-                    注: 1.主要设备房包括:制冷机房、生活水泵房、消防泵房
-                  </p>
-                  <p>2.图例后的数字,代表此位置的数量</p>
-                  <p>3.-B2-1至-B2-8为防火分区编号</p>
-                </div>
-              </div>
-            </div>
-          </div>
-        </el-collapse-transition>
-      </div>
-      <div class="select-floor">
-        <span>
-          <img src="../../assets/images/flooraction/sanjiao.png" alt="" />
-        </span>
-        <span>F2</span>
-        <span @click="isActive" :class="{ 'is-active': state }">
-          <span>F1</span>
-        </span>
-        <span>B1</span>
-        <span @click="isActive2" :class="{ 'is-active': !state }"
-          ><span>B2</span></span
-        >
-        <span
-          ><img src="../../assets/images/flooraction/sanjiao.png" alt=""
-        /></span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: ['imgShow', 'stateStatus'],
-  data() {
-    return {
-      legendShow: false,
-      state: false,
-      allState: false,
-      legend: [
-        { name: '建筑面积', count: 18500, unit: '㎡', state: false },
-        { name: '主要设备房', count: 5, unit: '处', state: false },
-        { name: '机动车位', count: 556, unit: '个', state: false },
-        { name: '疏散通道', count: 18, unit: '个', state: false },
-        { name: '卫生间', count: 1, unit: '处', state: false },
-        { name: '扶梯/坡梯', count: 4, unit: '部', state: false },
-        { name: '客梯', count: 5, unit: '部', state: false },
-        { name: '货梯', count: 10, unit: '部', state: false },
-        { name: '防火分区', count: 8, unit: '个', state: false },
-        { name: '连通口', count: 0, unit: '处', state: false }
-      ],
-      legendArr: []
-    }
-  },
-  computed: {},
-  created() {},
-  mounted() {},
-  watch: {
-    legend: {
-      handler(newValue) {
-        newValue.forEach(item => {
-          if (item.state) {
-            this.$emit('update:stateStatus', true)
-          }
-        })
-        let arr = newValue.filter(item => {
-          if (!item.state) {
-            return item
-          }
-        })
-        if (arr.length != newValue.length) {
-          this.$emit('update:stateStatus', true)
-        } else {
-          this.$emit('update:stateStatus', false)
-        }
-      },
-      deep: true
-    }
-  },
-  methods: {
-    allChange() {
-      if (this.allState) {
-        this.legend.forEach(item => {
-          item.state = true
-          this.legendArr.push(item.name)
-        })
-      } else {
-        this.legend.forEach(item => {
-          item.state = false
-          this.legendArr = []
-        })
-      }
-      this.legendArr = [...new Set(this.legendArr)]
-      this.$emit('childDataArrEvent', this.legendArr)
-    },
-    itemChange(ele) {
-      // console.log(e)
-      let arr = this.legend.filter(item => {
-        if (item.state) {
-          return item
-        }
-      })
-      if (arr.length == this.legend.length) {
-        this.allState = true
-      } else {
-        this.allState = false
-      }
-      if (ele.state) {
-        this.legendArr.push(ele.name)
-      } else {
-        let num = this.legendArr.indexOf(ele.name)
-        if (num != -1) {
-          this.legendArr.splice(num, 1)
-        }
-      }
-      this.legendArr = [...new Set(this.legendArr)]
-      this.$emit('childDataArrEvent', this.legendArr)
-    },
-    clickEventShow() {
-      this.legendShow = !this.legendShow
-    },
-    isActive() {
-      this.state = true
-      this.$emit('update:imgShow', true)
-    },
-    isActive2() {
-      this.state = false
-      this.$emit('update:imgShow', false)
-    }
-  },
-  components: {}
-}
-</script>
-
-<style scoped lang="less">
-.sele-legend {
-  width: 421px;
-  height: 572px;
-  position: absolute;
-  right: 75px;
-  top: 0;
-  transition: 0.5s all;
-  & > div {
-    background: #0a1b51;
-    opacity: 0.95;
-    border: 1px solid #0a397f;
-    width: 406px;
-    height: 100%;
-    position: relative;
-    .sign {
-      position: absolute;
-      right: -13px;
-      top: -1px;
-    }
-    .title {
-      width: 100%;
-      height: 42px;
-      background: #1649ce;
-      line-height: 42px;
-      display: flex;
-      font-size: 16px;
-      box-sizing: border-box;
-      padding-left: 12px;
-      padding-right: 10px;
-      & > div:nth-child(1) {
-        flex: 0.6;
-      }
-      & > div:nth-child(2) {
-        flex: 3;
-      }
-      & > div {
-        flex: 2;
-      }
-      /deep/ .el-checkbox__inner {
-        background: none;
-        border: 1px solid #033a8c;
-      }
-      /deep/ .el-checkbox .is-checked {
-        .el-checkbox__inner {
-          background: #005daa !important;
-        }
-      }
-    }
-    .table {
-      padding-right: 10px;
-      box-sizing: border-box;
-      ul {
-        li {
-          color: #8c90ae;
-          box-sizing: border-box;
-          padding-left: 12px;
-          line-height: 40px;
-          display: flex;
-          border: 1px solid #0a1b51;
-          & > div:nth-child(1) {
-            flex: 0.6;
-          }
-          & > div:nth-child(2) {
-            flex: 3;
-          }
-          & > div {
-            flex: 2;
-          }
-          /deep/ .el-checkbox__inner {
-            background: none;
-            border: 1px solid #033a8c;
-          }
-          /deep/ .el-checkbox .is-checked {
-            .el-checkbox__inner {
-              background: #005daa !important;
-            }
-          }
-        }
-        li:nth-child(even) {
-          background: #0c1555;
-          border: 1px solid #0d1a5f;
-        }
-        .is-status {
-          background: #102982 !important;
-          border: 1px solid #143db3 !important;
-        }
-      }
-      .text {
-        margin-top: 12px;
-        margin-left: 38px;
-        line-height: 22px;
-        color: #4a89b0;
-        p:nth-child(2) {
-          text-indent: 2em;
-        }
-        p:nth-child(3) {
-          text-indent: 2em;
-        }
-      }
-    }
-  }
-}
-.select-floor {
-  font-size: 16px;
-  margin-top: 10px;
-  width: 61px;
-  height: 260px;
-  border: 1px solid #00aee8;
-  background: #0f2967;
-  border-radius: 3px;
-  color: #00cce8;
-  & > span {
-    cursor: pointer;
-    text-align: center;
-    line-height: 40px;
-    height: 16.5%;
-    width: 100%;
-    display: block;
-    transition: 0.5s all;
-    // padding: 5px;
-    & > span {
-      border: 1px solid #0f2967;
-      box-sizing: border-box;
-      display: block;
-      height: 43px;
-      border-radius: 3px;
-      line-height: 43px;
-    }
-  }
-  & > span:nth-child(1) {
-    line-height: 40px;
-    img {
-      transform: rotate(180deg);
-    }
-  }
-  .is-active {
-    & > span {
-      border: 1px solid #00cce8;
-      color: #fff;
-      background: #047ca6;
-      width: 70%;
-      margin: 0 auto 0;
-    }
-  }
-}
-</style>

vue.config.js

@@ -0,0 +1,19 @@
+module.exports = {
+    devServer: {
+        proxy: {
+            "/api": {
+                target: "http://localhost:3000",
+                changeOrigin: true,
+                secure: false,
+                pathRewrite: {
+                    "^/api": ''
+                }
+            },
+        },
+        // 关闭esline
+        overlay: {
+            warnings: false,
+            errors: false
+        },
+    },
+}