shuishen
2022-07-21 03df59a72de4354fcc731675c53dd2805c2ec8b1
src/App.vue
@@ -1,27 +1,92 @@
<template>
  <div id="app">
    <router-view />
  </div>
    <div id="app">
        <router-view />
        <el-dialog title="提示" :visible.sync="mapShow" width="1020px" :before-close="handleClose">
            <el-input v-model="xyValue" placeholder="请点击地图选择2.5维坐标"></el-input>
            <xymap class="select-map-xy" @setXyValue="setXyValue"></xymap>
            <div style="text-align: right;">
                <el-button @click="setMapXy" type="primary">确认</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
export default {
  name: "app",
  data() {
    return {};
  },
  watch: {},
  created() {
import { mapGetters } from "vuex"
  },
  methods: {},
  computed: {}
export default {
    name: "app",
    data () {
        return {
            xyValue: '',
            mapShow: false
        }
    },
    computed: {
        ...mapGetters(["selectMamShow"]),
    },
    watch: {
        mapShow: {
            immediate: true,
            handler (newVal) {
                if (newVal == true) {
                    this.xyValue = ''
                }
                this.$store.commit('SET_SELECT_MAP', newVal)
            }
        },
        selectMamShow: {
            immediate: true,
            handler (newVal) {
                this.mapShow = newVal
            }
        }
    },
    created () {
    },
    methods: {
        setXyValue (e) {
            let str = ''
            str = str + e[0] + ',' + e[1]
            this.xyValue = str
        },
        setMapXy () {
            if (this.xyValue == '') {
                this.$message({
                    message: '请点击地图选择XY',
                    type: 'warning'
                })
            }
            this.$store.commit('SET_MAP_X_Y', this.xyValue)
            this.mapShow = false
        }
    }
};
</script>
<style lang="scss">
#app {
  width: 100%;
  height: 100%;
  overflow: hidden;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.select-map {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3000;
    background: green;
}
.select-map-xy {
    margin: 10px 0;
    cursor: pointer;
}
</style>