frontend/src/views/management/monitoringEquipment/photographicDevice/components/gpsPosition.vue

<template>
  <el-dialog
    class="gpsPoisitiondialog"
    title="GPS位置"
    :visible.sync="isShow"
    :close-on-click-modal="false"
    width="662px"
    @close="handleclose"
  >
    <div class="gpsbox" v-loading="loading">
      <p>
        <span>经度：</span><span>{{ infornr.longitude }}</span>
      </p>
      <p>
        <span>纬度：</span><span>{{ infornr.latitude }}</span>
      </p>
      <p>
        <span>半径：</span><span>{{ infornr.radius }}</span>
      </p>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="isShow = false">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { getTermGPSJoggle, getTermGPSPosition } from "@/utils/api/index";
export default {
  props: {
    title: String,
  },
  data() {
    return {
      loading: true,
      isShow: false,
      timer: null,
      infornr: {},
      i: 0,
      queryTime: "", //查询ID
      cmdid: "",
    };
  },
  mounted() {},
  methods: {
    //获取第一次数据
    getgpsData(val) {
      console.log(val);
      this.loading = true;
      //this.cmdid = cmdid;
      getTermGPSPosition({
        cmdId: val.cmdid,
      })
        .then((res) => {
          this.queryTime = res.data;
          this.getNewgpsData(val);
          this.timer = window.setInterval(() => {
            this.getNewgpsData(val);
            this.i++;
          }, 5000);
        })
        .catch((err) => {});
    },
    //最新数据
    getNewgpsData(val) {
      getTermGPSJoggle({
        queryTime: this.queryTime,
        termid: val.id,
      })
        .then((res) => {
          this.loading = true;
          if (res.code == 200) {
            this.infornr = res.data;
            if (res.data.hasNew == true) {
              this.loading = false;
              this.i = 0;
              this.$message({
                showClose: true,
                message: "gps信息已更新",
                type: "success",
              });
              clearInterval(this.timer);
            } else if (this.i > 9) {
              this.loading = false;
              this.i = 0;
              this.$message({
                showClose: true,
                message: "暂未获取到GPS信息，请稍后再试！！",
                type: "warning",
              });
              clearInterval(this.timer);
            }
          } else {
            this.$message.error(res.code.msg);
          }
        })
        .catch((err) => {});
    },
    display() {
      this.isShow = true;
    },
    hide() {
      this.isShow = false;
    },
    handleclose() {
      this.i = 0;
      clearInterval(this.timer);
      this.timer = null;
    },
  },
};
</script>
<style lang="less">
.gpsPoisitiondialog {
  .gpsbox {
    p {
      line-height: 32px;
      height: 32px;
      font-size: 16px;
    }
  }
}
</style>