area.vue 4.16 KB
<template>
  <div>
   <el-dialog
      title="区域设置"
      :visible.sync="dialogVisible"
      width="1100px"
      :before-close="beforeHideModal"
      >
      <TraficCanvas :bgUrl='bgUrl' v-if="type=='0' || type=='5'" ref='canvas'></TraficCanvas>
      <FlowCanvas :bgUrl='bgUrl' v-if="type=='1'" ref='canvas'></FlowCanvas>
      <SafeCanvas :bgUrl='bgUrl' v-if="type=='2'" ref='canvas'></SafeCanvas>
      <FaceCanvas :bgUrl='bgUrl' v-if="type=='4'" ref='canvas'></FaceCanvas>
      <ComplexCanvas :bgUrl='bgUrl' v-if="type=='7'" ref='canvas'></ComplexCanvas>
      <span slot="footer" class="dialog-footer">
        <el-button @click="beforeHideModal">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
  </el-dialog>
  </div>
</template>
<script>
 import TraficCanvas from "./areaconfig/TraficCanvas";
  import FlowCanvas from "./areaconfig/FlowCanvas";
  import SafeCanvas from "./areaconfig/SafeCanvas";
  import FaceCanvas from "./areaconfig/FaceCanvas";
  import ComplexCanvas from "./areaconfig/ComplexCanvas";
export default {
  data() {
      return {
        dialogVisible: false,
        isShow: false,
        type: '0',
        btnIsactive: false,
        showClose: false,
        roiBody: {},
        XMLStr: "",
        taskData:'',
        bgUrl:''
      };
    },
  components: {
    TraficCanvas,
    SafeCanvas,
    FlowCanvas,
    FaceCanvas,
    ComplexCanvas
  },
  methods: {
      showModal: function(data,mtaskdata) {
        var _this = this;
        this.$store.commit('setocxstate',0)
        this.taskData = mtaskdata;
        this.dialogVisible =true;
        this.type = data.algo_type;
        // this.type = 2;
        this.bgUrl = "";
        //获取视频截图
        this.$api.task.cutpic(mtaskdata.vchan.vdev_unid, mtaskdata.vchan.vchan_refid,mtaskdata.subtask_id).then(data => {
            if (!data.ecode) {
              this.bgUrl = "data:image/png;base64," + data.pic_base64;
              debugger
              setTimeout(() => {
                let img = document.getElementById('pic').childNodes[0]
                let canvas = document.createElement("canvas");
                canvas.width = 800;
                canvas.height = 500;
                try {
                  canvas.getContext("2d").drawImage(img, 0, 0, 800, 500);
                  _this.bgUrl = canvas.toDataURL("image/webp");
                } catch (error) {}
              }, 500);
            } else {
              alert("区域设置截图失败!" + data.enote);
            }
          })
          .catch(err => {
            console.log("区域设置截图返回异常:", err.message);
          });
        setTimeout(() => {
          _this.$refs.canvas.stageInit();
          if (data.rois) {
              _this.$refs.canvas.configInit(
                data.rois[0].roi
              );
          }
        }, 300);
      },
      beforeHideModal: function() {
        this.$store.commit('setocxstate',1)
        this.dialogVisible = false;
        this.$refs.canvas.clear();
        this.$refs.canvas.cindex = 0;
        this.bgUrl = "";
      },
      getType: function() {
        if (this.$parent.subTaskInfo) {
          this.type = this.$parent.subTaskInfo.task_algo_type;
        } else {
          this.type = this.$parent.$parent.subTaskInfo.task_algo_type;
        }
        this.XMLStr = "";
        this.btnIsactive = true;
        try {
          this.EditList(1);
        } catch (error) {}
      },
      save: function() {
        if (this.$refs.canvas.roadFlag === false) {

          this.$alert("车道线有修改,请检查车道属性是否正确", "提示", {
            confirmButtonText: "确定"
          });
          //xieminghui
          // this.$refs.canvas.roadFlag = "confirm";
          return;
        }
        let XMLStr = this.$refs.canvas.save();
        if (this.type == "1" && (XMLStr === "dir" || XMLStr === "in")) {
          this.$message({
            type: "warning",
            message: "请检查配置是否正确"
          });
          return;
        }
        this.$parent.submit(XMLStr, "roi", this.taskData);
        this.beforeHideModal();
      }
    }
}
</script>
<style lang="stylus" scoped>

</style>