area.vue
4.16 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<template>
<div>
<el-dialog
title="区域设置"
:visible.sync="dialogVisible"
width="1100px"
:before-close="beforeHideModal"
>
<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>
<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;
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);
}
}, 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) {
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>