<!-- * @Author: your name * @Date: 2022-02-12 11:07:10 * @LastEditTime: 2022-02-22 15:08:10 * @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" append-to-body > <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.searchinput=""; } this.$nextTick(() => { const input = this.$refs.input.$refs.input; this.map.positionSearch(input); }); }, }, mounted() {}, methods: { init() { this.$nextTick(() => { const path = eval(this.$store.state.user.systemSetting.map_center); console.log("path",path); this.map = new EditorMap("getposmap", {center:path}, this); // 如果不传值就是设备,传pipe就是管道 if (this.device == "") { // 如果传了路径就创建一个marker,如果没传就直接激活手动创建 if (this.devicePos.length > 0) { this.map.addDevice({ path: this.devicePos }); } else { this.map.mouseAddMarker(); } } else { //console.log(this.pipePath.length) if (this.pipePath!=null && this.pipePath.length > 0) { this.map.addPipeLine({ path: this.pipePath }); } else { this.map.mouseAddPipeline(); } } }); }, handleClose() { this.$emit("close"); }, open() { this.dialogVisible = true; }, // 返回坐标 pos() { this.path = this.map.getPath(); this.$emit("getPath", 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>