index.vue

<template>
  <div class="settingZone" v-if='btnIsactive'>
    <button @click='showModal'>区域设置</button>
    <el-dialog title="区域配置" :visible.sync="isShow" width="30%" :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">
        <button @click="beforeHideModal">取 消</button>
        <button type="primary" @click="save">确 定</button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import TraficCanvas from "./TraficCanvas";
  import FlowCanvas from "./FlowCanvas";
  import SafeCanvas from "./SafeCanvas";
  import FaceCanvas from "./FaceCanvas";
  import ComplexCanvas from "./ComplexCanvas";
  export default {
    name: "zoneSetting",
    data() {
      return {
        isShow: false,
        type: "",
        btnIsactive: false,
        showClose: false,
        roiBody: {},
        XMLStr: "",
        bgUrl: ""
      };
    },
    components: {
      TraficCanvas,
      SafeCanvas,
      FlowCanvas,
      FaceCanvas,
      ComplexCanvas
    },
    methods: {
      showModal: function(event) {
        var event = event || window.event;
        if ($(event.target).hasClass("disabled")) {
          return;
        }
        // let filePath = 'C:/Program Files (x86)/screen.jpg';
        // if(!this.testIe.isIe) {
        // 	let canvas = document.createElement('canvas');
        // 	let video = $('video').get(0)
        // 	canvas.width = 800;
        // 	canvas.height = 500;
        // 	canvas.getContext('2d').drawImage(video, 0, 0, 800, 500);
        // 	this.bgUrl = canvas.toDataURL('image/webp')
        // } else {
        //获取截图
        this.bgUrl = "";
        let cur_duid = this.$parent.$parent.curentVchanId[1];
        let subtask_id = this.$parent.$parent.curentSubTaskId;
        this.axios({
          method: "get",
          url:
            this.API.IP +
            "/tx1_box/api/v1/devconf_fx/devs/" +
            this.dev_unid +
            "/vchans/" +
            cur_duid +
            "/cut_pic?s=" +
            new Date().getTime(),
          headers: {
            authorization: window.localStorage.getItem("atoken")
          },
          params: {
            subtask_id: subtask_id
          }
        })
          .then(res => {
            if (!res.data.ecode) {
              this.bgUrl = "data:image/png;base64," + res.data.pic_base64;
              setTimeout(() => {
                let canvas = document.createElement("canvas");
                let img = $(".pic img").get(0);
                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("区域设置截图失败!" + res.data.enote);
            }
          })
          .catch(err => {
            console.log("区域设置截图返回异常:", err.message);
          });
        // this.bgUrl = document.getElementById('VionVideo').CapturePicture(filePath) + '?stamp=' + new Date().getTime();
        // }
        $("#VionVideo").hide();
        this.isShow = true;
        setTimeout(() => {
          this.$refs.canvas.stageInit();
          $(".modal-lt button")
            .eq(0)
            .addClass("active");
          console.log(this.$parent.$parent.mtaskInfo);
          if (this.$parent.$parent.mtaskInfo[0].scenes[0].rois) {
            this.$refs.canvas.configInit(
              this.$parent.$parent.mtaskInfo[0].scenes[0].rois[0].roi
            );
          }
        }, 0);
      },
      beforeHideModal: function() {
        this.$refs.canvas.clear();
        this.bgUrl = "";
        $(".modal-lt button").removeClass("active");
        this.isShow = false;
        $("#VionVideo").show();
      },
      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.beforeHideModal();
      }
    }
  };
</script>

<style scoped>
button {
  width: 10%;
}

.modal-title {
  float: left;
  width: 93%;
  overflow: hidden;
}

.settingZone {
  width: 100px;
  float: left;
  margin-right: 15px;
}

.settingZone > button {
  width: 100px;
}

.modal-left {
  float: left;
  min-height: 350px;
  width: 20%;
  color: #fff;
}

.modal-right {
  position: relative;
  float: left;
  text-align: center;
  width: 80%;
}

.modal-left button {
  display: block;
  margin: 10px;
}

.modal-lt button {
  width: 120px;
}

.modal-lb button {
  width: 100px;
}

#zone_list button.active {
  background: #fff;
  color: #3d6797;
}

#line_type {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 500px;
  height: 300px;
  margin-left: -250px;
  margin-top: -150px;
  z-index: 52;
  color: #fff;
  text-align: center;
  line-height: 35px;
  background: #409eff;
}

#line_type.active {
  display: block;
  z-index: 1001;
  opacity: 1;
}

#line_type p {
  padding: 15px;
  font-size: 17px;
  font-weight: bold;
}
#line_type input {
  width: 150px;
}

#line_type button {
  color: #fff;
  height: 35px;
  line-height: 35px;
  margin: 50px 2%;
  width: 50px;
}

#c1 {
  position: absolute;
  top: 0;
  left: 0;
}

.pic {
  position: absolute;
  top: 0;
  left: 0;
}

.pic img {
  width: 800px;
  height: 500px;
  margin: 0;
  padding: 0;
}

canvas {
  margin: 0;
  padding: 0;
}

.title {
  /*background: url('../../../assets/18.png') no-repeat;*/
  width: 24%;
  height: 70px;
  line-height: 50px;
  margin: 0;
  margin-left: 3.5%;
  font-size: 25px;
  letter-spacing: 10px;
  display: inline-block;
}

.shadow {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  width: 100%;
  height: 100%;
  background: #000;
  filter: alpha(opacity=50);
  -moz-opacity: 0.5;
  opacity: 0.5;
}

ul {
  padding: 10px;
}

li {
  width: 130px;
  text-align: center;
}

button.disabled {
  background: #999;
}

.item {
  width: 50%;
  margin: 0 auto;
}
.item span {
  display: inline-block;
  width: 30%;
  text-align: right;
}
.item div {
  display: inline-block;
  width: 70%;
}
</style>