area.vue

<template>
  <div>
    <el-dialog
      title="区域设置"
      :visible.sync="dialogVisible"
      width="1200px"
      :before-close="beforeHideModal"
    >
      <div>
        <Behavior :bgUrl="bgUrl" v-if="type == '12'" ref="canvas" :configxml="configxml"></Behavior>
        <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 Behavior from "./areaconfig/Behavior";
import { roi } from "./areaconfig/roi_1";
export default {
  data() {
    return {
      dialogVisible: false,
      isShow: false,
      type: "9",
      btnIsactive: false,
      showClose: false,
      roiBody: {},
      XMLStr: "",
      taskData: "",
      bgUrl: "",
      baseUrl: "",
      configxml: "",
      fileList: []
    };
  },
  components: {
    TraficCanvas,
    SafeCanvas,
    FlowCanvas,
    FaceCanvas,
    ComplexCanvas,
    Behavior
  },
  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 = "";
      //获取视频截图 12为bk算法采用ocx截图
      if (data.algo_type !== 12) {
        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);
          });
      }

      this.configxml = data.config;
      setTimeout(() => {
        _this.$refs.canvas.stageInit(data.config);
      }, 10);
      setTimeout(() => {
        if (data.rois) {
          _this.$refs.canvas.configInit(data.rois[0].roi, data.config);
          // _this.$refs.canvas.configInit(roi);
        }
      }, 500);
    },
    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(type) {
      if (this.$refs.canvas.roadFlag === false) {
        this.$alert("车道线有修改，请检查车道属性是否正确", "提示", {
          confirmButtonText: "确定"
        });
        //xieminghui
        // this.$refs.canvas.roadFlag = "confirm";
        return;
      }
      let XMLStr = this.$refs.canvas.save();
      console.log("xxx", XMLStr);
      if (this.type == "1" && (XMLStr === "dir" || XMLStr === "in")) {
        this.$message({
          type: "warning",
          message: "请检查配置是否正确"
        });
        return;
      }
      if (this.type == "12") {
        let XMLStr = this.$refs.canvas.paramsData;
        console.log("12", XMLStr);
        this.$parent.submit(XMLStr, "config");
      }
      this.$parent.submit(XMLStr, "roi", this.taskData);
      this.beforeHideModal();
    }
  }
};
</script>
<style lang="stylus" scoped></style>