area.vue

<template>
  <div>
    <el-dialog
      title="区域设置"
      :visible.sync="dialogVisible"
      width="1100px"
      :before-close="beforeHideModal"
    >
    <div>
           <TraficCanvas
        :bgUrl="bgUrl"
        v-if="type == '0' || type == '5' || type == '3'" 
        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>
    </div>
     <div>
        <el-button type="primary" style="float:left; margin-right:10px" @click="down">下载<i class="el-icon-download el-icon--right"></i></el-button>
        <el-upload
          class="upload-demo"
          action=""
          :auto-upload="false"
          :show-file-list="false"
          :on-change="handleChange"
          :file-list="fileList">
         <el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>
          <span slot="tip" class="el-upload__tip upinfo"> 手动上传场景图片</span>
        </el-upload>
      </div>
      <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";
import {roi} from "./areaconfig/roi_1"
export default {
  data() {
    return {
      dialogVisible: false,
      isShow: false,
      type: "0",
      btnIsactive: false,
      showClose: false,
      roiBody: {},
      XMLStr: "",
      taskData: "",
      bgUrl: "",
      baseUrl:"",
      fileList:[]
    };
  },
  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;
            this.baseUrl = "data:image/png;base64," + data.pic_base64;
            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) {
                console.log(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);
          // _this.$refs.canvas.configInit(roi);
        }
      }, 300);
    },
    handleChange(file, fileLis){
          this.bgUrl = URL.createObjectURL(file.raw);
        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) {
              console.log(error);
            }
          }, 500);
    },
    down(){
      this.downloadurl(this.baseUrl,'scenes_pic')
    },
    downloadurl(content, fileName) { //下载base64图片
      var base64ToBlob = function(code) {
          let parts = code.split(';base64,');
          let contentType = parts[0].split(':')[1];
          let raw = window.atob(parts[1]);
          let rawLength = raw.length;
          let uInt8Array = new Uint8Array(rawLength);
          for(let i = 0; i < rawLength; ++i) {
              uInt8Array[i] = raw.charCodeAt(i);
          }
          return new Blob([uInt8Array], {
              type: contentType
          });
      };
      let aLink = document.createElement('a');
      let blob = base64ToBlob(content); //new Blob([content]);
      let evt = document.createEvent("HTMLEvents");
      evt.initEvent("click", true, true); //initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
      aLink.download = fileName;
      aLink.href = URL.createObjectURL(blob);
      aLink.click();
    },
    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) {
        console.log(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>