index.vue

<!--
 * @Author: your name
 * @Date: 2022-02-12 11:07:10
 * @LastEditTime: 2022-02-15 10:33:20
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /test/hello-world/src/components/GetPos.vue/index.vue
-->
<template>
  <el-dialog
    class="getpos"
    title="定位"
    :visible.sync="dialogVisible"
    width="60%"
    :before-close="handleClose"
  >
    <template v-if="inputVisible">
      <div class="search-wrapper pos">
        <el-input
          v-model="searchinput"
          class="searchinput"
          placeholder="请输入内容"
          size="mini"
          style="width: 150px"
          ref="input"
        ></el-input>
      </div>

      <div @click="pos" class="positionBtn pos">
        <el-button type="primary" size="mini" icon="el-icon-position"
          >定位</el-button
        >
      </div>
    </template>
    <div id="getposmap"></div>
  </el-dialog>
</template>

<script>
import { EditorMap } from "@/utils/mapClass/getPath.js";
export default {
  props: {
    //管道路径，二维数组s
    pipePath: {
      type: Array,
      default: () => [],
    },
    // marker位置，数组
    devicePos: {
      type: Array,
      default: () => [],
    },
    // 设备类型，管道传pipe，marker就不用传值
    device: {
      type: String,
      default: "",
    },
    // 显示隐藏
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    // input跟定位按钮是否展示
    inputVisible: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      // dialogVisible: false,
      map: null,
      searchinput: "",
    };
  },
  watch: {
    dialogVisible(newValue) {
      if (newValue) {
        this.init();
      } else {
        this.map.destroy();
      }
      this.$nextTick(() => {
        const input = this.$refs.input.$refs.input;
        this.map.positionSearch(input);
      });
    },
  },
  mounted() {},
  methods: {
    init() {
      this.$nextTick(() => {
        this.map = new EditorMap("getposmap", {}, this);
        // 如果不传值就是设备,传pipe就是管道
        if (this.device == "") {
          // 如果传了路径就创建一个marker，如果没传就直接激活手动创建
          if (this.devicePos.length > 0) {
            this.map.addDevice({ path: this.devicePos });
          } else {
            this.map.mouseAddMarker();
          }
        } else {
          if (this.pipePath.length > 0) {
            this.map.addPipeLine({ path: this.pipePath });
          } else {
            this.mouseAddPipeline();
          }
        }
      });
    },
    handleClose() {
      this.$emit("close");
    },
    open() {
      this.dialogVisible = true;
    },
    // 返回坐标
    pos() {
      this.path = this.map.getPath();
      this.$emit("getPath", this.path);
      console.log(this.path);
      if (this.path?.length > 0) {
        this.$emit("update:dialogVisible", false);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.search-wrapper {
  left: 30px;
}
.positionBtn {
  right: 30px;
}
.pos {
  position: absolute;
  top: 90px;
  z-index: 20;
}
#getposmap {
  width: 100%;
  height: 500px;
}
</style>