xy-frontend/src/views/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">
      <el-descriptions :column="1" border>
        <el-descriptions-item>
          <template slot="label"> 采集时间 </template
          >{{ $moment(infornr.updatetime).format("YYYY-MM-DD HH:mm:ss") }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 经度 </template>{{ infornr.longitude }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 纬度 </template>{{ infornr.latitude }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 半径 </template>{{ infornr.radius }}
        </el-descriptions-item>
      </el-descriptions>
      <el-button type="text" class="newBtn" @click="getgpsData()"
        >获取最新GPS位置</el-button
      >
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="isShow = false">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import {
  getTermLastGPSPosition,
  getTermGPSJoggle,
  getTermGPSPosition,
} from "@/utils/api/index";
export default {
  props: {
    title: String,
  },
  data() {
    return {
      loading: false,
      isShow: false,
      timer: null,
      infornr: {},
      i: 0,
      queryTime: "", //查询ID
      zzcmdid: "",
      zztermid: "",
    };
  },
  mounted() {},
  methods: {
    //获取数据信息
    getgpssql() {
      getTermLastGPSPosition({
        termId: this.zztermid,
      })
        .then((res) => {
          this.infornr = res.data;
          // this.$message({
          //   duration: 1500,
          //   showClose: true,
          //   message: "gps信息已更新",
          //   type: "success",
          // });
        })
        .catch((err) => {});
    },
    //获取第一次数据
    getgpsData() {
      console.log(this.zzcmdid);
      console.log(this.zztermid);
      this.loading = true;
      getTermGPSPosition({
        cmdId: this.zzcmdid,
      })
        .then((res) => {
          this.queryTime = res.data;
          console.log(this.zztermid);
          this.getNewgpsData(this.zztermid);
          this.timer = window.setInterval(() => {
            this.getNewgpsData(this.zztermid);
            this.i++;
          }, 5000);
        })
        .catch((err) => {});
    },
    //最新数据
    getNewgpsData(val) {
      getTermGPSJoggle({
        queryTime: this.queryTime,
        termid: val,
      })
        .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({
                duration: 1500,
                showClose: true,
                message: "gps信息已更新",
                type: "success",
              });
              clearInterval(this.timer);
            } else if (this.i > 9) {
              this.loading = false;
              this.i = 0;
              this.$message({
                duration: 1500,
                showClose: true,
                message: "暂未获取到GPS信息，请稍后再试！！",
                type: "warning",
              });
              clearInterval(this.timer);
            }
          } else {
            this.$message.error(res.code.msg);
          }
        })
        .catch((err) => {});
    },
    display(data) {
      console.log(data);
      this.isShow = true;
      this.zzcmdid = data.cmdId;
      this.zztermid = data.id;
    },
    hide() {
      this.isShow = false;
    },
    handleclose() {
      this.i = 0;
      clearInterval(this.timer);
      this.timer = null;
      this.loading = false;
    },
  },
};
</script>
<style lang="less">
.gpsPoisitiondialog {
  .gpsbox {
    p {
      line-height: 32px;
      height: 32px;
      font-size: 16px;
    }
    .newBtn {
      margin-top: 14px;
    }
  }
}
</style>