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) {},
      deep: true,
      immediate: true,
    },
  },
  mounted() {
    console.log(this.channelIdList);
  },
  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++;
          }, 3000);
        })
        .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 != 1 && this.statusNum >= 5) {
            this.clearFn();
            this.$message({
              duration: 1500,
              showClose: true,
              message: "下发指令超时，请重试！",
              type: "warning",
            });
          } else if (res.data.cmaStatus == 1 || 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++;
            }, 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() {
      clearInterval(this.statusTimer);
      this.statusTimer = null;
      this.statusNum = 0;
      this.picLoading = false;
    },
  },
};
</script>