xy-frontend/src/views/realTimeMonitor/components/takePicButton.vue

<template>
  <!-- <el-button type="primary" @click="handleTakePic" :loading="picLoading"
    >主动拍照
  </el-button> -->
  <el-dropdown trigger="click" @command="handleCommandpic">
    <el-button type="primary" :loading="picLoading">
      主动拍照<i class="el-icon-arrow-down el-icon--right"></i>
    </el-button>
    <el-dropdown-menu slot="dropdown" class="picdropStyle">
      <el-dropdown-item
        :command="item.channelid"
        v-for="(item, index) in channelIdList"
        :key="index"
        >{{
          item.alias !== null && item.alias !== ""
            ? item.alias
            : item.channelname
        }}</el-dropdown-item
      >
    </el-dropdown-menu>
  </el-dropdown>
</template>
<script>
import {
  getTermStatus,
  setTermCamera,
  getTakePicStatusJoggle,
  getTakePicPhotoStatusJoggle,
} from "@/utils/api/index";
export default {
  data() {
    return {
      picLoading: false,
      statusTimer: null,
      statusNum: 0,
      picPimer: null,
      picNum: 0,
      pzchannelId: "",
    };
  },
  watch: {
    termId: {
      handler(newVal, oldVal) {
        console.log("我改变了");
        clearInterval(this.statusTimer);
        this.statusTimer = null;
        this.statusNum = 0;
        clearInterval(this.picPimer);
        this.picPimer = null;
        this.picNum = 0;
        this.picLoading = false;
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
    console.log(this.channelIdList);
    console.log("我是主动拍照");
  },
  computed: {
    termId() {
      return this.$store.state.termId;
    },

    channelIdList() {
      return this.$store.state.channelIdList;
    },
  },

  methods: {
    handleCommandpic(command) {
      console.log(command);
      this.pzchannelId = command;
      this.picLoading = true;
      getTermStatus({ termId: this.termId }).then((res) => {
        console.log(res);
        if (res.data.isonline) {
          let params = [
            {
              name: "act",
              value: "capture",
            },
            {
              name: "channel",
              value: command,
            },
            {
              name: "preset",
              value: 255,
            },
            {
              name: "type",
              value: 0,
            },
          ];
          this.setTermFn(params);
        } else {
          this.picLoading = false;
          this.$message({
            duration: 1500,
            showClose: true,
            message: "装置下线，发送指令失败",
            type: "error",
          });
        }
      });
    },
    handleTakePic() {},
    //下发命令
    setTermFn(val) {
      setTermCamera({
        termId: this.termId,
        list: val,
      })
        .then((res) => {
          console.log(res);
          this.getTakePicStatus(res.data);
          clearInterval(this.statusTimer);
          this.statusTimer = null;
          this.statusTimer = window.setInterval(() => {
            this.getTakePicStatus(res.data);
            this.statusNum++;
          }, 5000);
        })
        .catch((err) => {});
    },
    //查询命令是否下发成功
    getTakePicStatus(val) {
      console.log(val);
      getTakePicStatusJoggle({
        requestid: val.requestId,
        termId: this.termId,
        photoTime: new Date(val.date).getTime(),
      })
        .then((res) => {
          console.log(res);
          //res.data  0 状态未知  1 成功 2失败
          // if (
          //   res.data.cmaStatus == 0 &&
          //   res.data.picStatus == false &&
          //   this.statusNum >= 5
          // ) {
          //   //全部没有返回，失败
          //   this.clearFn();
          //   this.$message({
          //     duration: 1500,
          //     showClose: true,
          //     message: "指令图片都没有返回true，并且轮巡大于五次！",
          //     type: "warning",
          //   });
          // } else if (res.data.cmaStatus == 1) {
          //   this.clearFn();
          //   this.$message({
          //     duration: 1500,
          //     showClose: true,
          //     message: "拍照指令cmaStatus下发成功返回1！",
          //     type: "success",
          //   });
          //   clearInterval(this.picPimer);
          //   this.picPimer = null;
          //   this.picPimer = window.setInterval(() => {
          //     this.newPicApi(val);
          //     this.picNum++;
          //   }, 8000);
          //   return;
          // } else if (res.data.picStatus == true) {
          //   this.clearFn();
          //   this.$message({
          //     duration: 1500,
          //     showClose: true,
          //     message: "指令下发失败，图片已经返回！",
          //     type: "success",
          //   });
          //   clearInterval(this.picPimer);
          //   this.picPimer = null;
          //   this.picPimer = window.setInterval(() => {
          //     this.newPicApi(val);
          //     this.picNum++;
          //   }, 2000);
          //   return;
          // }
          if (
            res.data.cmaStatus != 1 &&
            res.data.picStatus == false &&
            this.statusNum >= 5
          ) {
            this.clearFn();
            this.$message({
              duration: 1500,
              showClose: true,
              message: "下发指令超时，请重试！",
              type: "warning",
            });
          } else if (
            res.data.cmaStatus == 1 &&
            res.data.picStatus == false &&
            this.statusNum < 5
          ) {
            this.clearFn();
            this.$message({
              duration: 1500,
              showClose: true,
              message: "下发指令成功！",
              type: "success",
            });
            this.newPicApi(val);
            clearInterval(this.picPimer);
            this.picPimer = null;
            this.picPimer = window.setInterval(() => {
              this.newPicApi(val);
              this.picNum++;
            }, 8000);
          } else if (
            res.data.cmaStatus != 1 &&
            res.data.picStatus == true &&
            this.statusNum < 5
          ) {
            this.clearFn();
            this.newPicApi(val);
            clearInterval(this.picPimer);
            this.picPimer = null;
            this.picPimer = window.setInterval(() => {
              this.newPicApi(val);
              this.picNum++;
            }, 8000);
          }
        })
        .catch((err) => {
          console.log(err); //代码错误、请求失败捕获
        });
    },
    //获取最新的图片
    newPicApi(val) {
      getTakePicPhotoStatusJoggle({
        requestid: val.requestId,
        termId: this.termId,
        photoTime: new Date(val.date).getTime(),
      }).then((res) => {
        console.log(res.data);
        console.log(this.picNum);
        if (res.data == true && this.picNum < 10) {
          //   console.log(this.$parent.$parent);
          this.$parent.$parent.getPhotoList(
            -1,
            new Date(val.date).getTime(),
            this.termId
          ); //获取图片列表是传当前设备的 id 和termid

          this.$message({
            duration: 1500,
            showClose: true,
            message: "已返回最新图片！",
            type: "success",
          });
          clearInterval(this.picPimer);
          this.picPimer = null;
          this.picNum = 0;
          console.log("返回最新图片");
        } else if (res.data == false && this.picNum > 10) {
          clearInterval(this.picPimer);
          this.picPimer = null;
          this.picNum = 0;
        }
      });
    },
    clearFn() {
      console.log("我要取消了轮巡")
      clearInterval(this.statusTimer);
      this.statusTimer = null;
      this.statusNum = 0;
      this.picLoading = false;
      console.log("我要取消了轮巡1111111111111111111111111111111")
      clearInterval(this.picPimer);
          this.picPimer = null;
          this.picNum = 0;
    },
  },
  destroyed() {
    console.log("离开了");
    clearInterval(this.statusTimer);
    this.statusTimer = null;
    this.statusNum = 0;
  },
  beforeRouteLeave(to, from, next) {
    // 路由跳转前，清除轮询
    next();
    console.log("7777777777777777777777777");
  },
};
</script>