firemap/src/layout/Footer/index.vue

<template>
    <el-footer class="MainFooter">
      <el-switch
        style="display: block;margin-top: 5px;margin-left: 10px;"
        v-model="modeType"
        active-color="#3f96a5"
        inactive-color="#000000"
        active-text="态势显示"
        inactive-text="场景模拟"
        @change="modelTypeChange()">
      </el-switch>

       <div style="margin-left: 300px;line-height: 31px;color: #3f96a5;">
        <span style="margin: auto 30px;">经度: {{ mouseLocation.longitude }}</span>
        <span style="margin: auto 30px;">纬度：{{ mouseLocation.latitude }}</span>
        <span style="margin: auto 30px;">层级: {{ cameraHeightAndZoom.zoom }}</span>
        <span style="margin: auto 30px;">视高：{{ cameraHeightAndZoom.height }}</span>
       </div>
    </el-footer>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
    data(){
      return{
        modeType: false,
        platformshow: this.platformShow,
        //经度
        longitude: 0,
          //维度
        latitude: 0,
      }
    },
    computed: {
    ...mapGetters([
      'isCollapse',
      'mouseLocation',
      'cameraHeightAndZoom',
      'mode'
    ]),
  },
    watch: {
        mouseLocation: function(val, oldVal){
            console.log(val)
            this.longitude = val.longitude
            this.latitude = val.latitude
        },
        mode: function(val, oldVal){
            this.modeType = val
            this.$notify({
              title: val==true?"已切换到态势显示":"已切换到场景模拟",
              type: 'success'
            });
        }
       
    },
    mounted(){
    },
    methods: {
      platformShowChange(){
        this.$store.commit('app/setPlatformShow',this.platformshow);
      },
      setCollapse(){
        this.$store.commit('app/setIsCollapse',!this.isCollapse);
      },
      modelTypeChange(val){
        this.$store.commit('app/setMode',this.modeType);
      }
      
  }
}

</script>
<style  scoped>
.MainFooter {
    padding: 0px;
    height: 30px !important;  
    display: flex;
    background-color: #071c44;
    
}

/deep/ .el-input--mini .el-input__inner {
    height: 24px;
    line-height: 24px;
    background-color: transparent;
    color: white;
}
.platformId /deep/ .el-input__inner{
    background-color: #282c34;
    color: white;
}
</style>