Skip to content

platform / fanxing_new

Go to a project
Commit 598ed260 by 潘建波
Options

bg区域绘制提交

1 parent 74fb58bd
Inline Side-by-side
Showing 26 changed files with 952 additions and 402 deletions
dist.zip
No preview for this file type
public/index.html
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
</noscript> </noscript>
<div id="app"></div> <div id="app"></div>
</body> </body>
<script> <script>
function connectCamera(szDeviceIp, szUser, szPass, camType) { function connectCamera(szDeviceIp, szUser, szPass, camType) {
var i = 0; var i = 0;
camType = 'ball' camType = 'ball'
......
public/js/serveConfig.json 0 → 100644
{
"logstatus":true, //是否开启日志收集
"hadertitle":"AI视频分析平台",//系统标题
"logintitle":"AI视频分析平台",//展示标题
"https": false,
"isvideo":0,
"bigtree":true,//大数据展示树
"host":"http://10.1.200.100:20080",
"ddurl":"http://aaa.zzgx.gov.cn",
"ddloginurl":"http://10.1.200.97:29090",
"huasanDD": 'http://aaa.zzgx.gov.cn/oauth/authorize?response_type=code&scope=read&client_id=KLjmdAH0',
"ddwsurl":"10.1.200.97:29090",
"isdd":false, //是否开启钉钉登录
}
\ No newline at end of file \ No newline at end of file
public/js/version.json
{"commit":"5454a14cc08221039f6a0eb3af9e4064cd8dded4","commitDate":"2021-4-23 11:9","buildDate":"2021-5-11 10:38","version":"2.0.9","info":"feat✨ chrome视频播放"}
\ No newline at end of file \ No newline at end of file
{"commit":"74fb58bd670e9c36110fc5a6949768f3dc081afa","commitDate":"2021-5-11 19:19","buildDate":"2021-5-15 16:57","version":"2.1.0","info":"测试提交"}
\ No newline at end of file \ No newline at end of file
src/api/apiList.js
...@@ -7,7 +7,7 @@ import device from "./device"; ...@@ -7,7 +7,7 @@ import device from "./device";
import resource from "./resource"; import resource from "./resource";
import codes from "./codes"; import codes from "./codes";
import ops from "./ops"; import ops from "./ops";
import {config} from '../../public/js/config.js' // import {config} from '../../public/js/config.js'
import baseurl from './baseUrl' import baseurl from './baseUrl'
let wsIP = ""; let wsIP = "";
let flvIP = ""; let flvIP = "";
...@@ -21,8 +21,8 @@ switch (process.env.NODE_ENV) { ...@@ -21,8 +21,8 @@ switch (process.env.NODE_ENV) {
break; break;
case "production": case "production":
wsIP = location.host; // 生产环境url wsIP = location.host; // 生产环境url
// flvIP = "192.168.9.245" + ":8080" flvIP = "192.168.9.245" + ":8080"
flvIP = location.hostname + ":38080" // flvIP = location.hostname + ":8080"
break; break;
} }
export default { export default {
......
src/api/baseUrl.js
let baseUrl = "/api"; // 本地代理 let baseUrl = "/api"; // 本地代理
console.log(process.env.NODE_ENV); import axios from "axios";
switch (process.env.NODE_ENV) {
case "development": switch (process.env.NODE_ENV) {
// baseUrl = "http://192.168.9.234:20080"; // 测试环境url case "development":
baseUrl = window.config.https?"https://192.168.9.233:20070":"http://192.168.9.233:20080"; // 测试环境url // baseUrl = "http://192.168.9.234:20080"; // 测试环境url
// baseUrl = "http://192.168.9.82:8080"; // 测试环境url baseUrl = window.config.https?"https://192.168.9.233:20070":"http://192.168.9.173:20080"; // 测试环境url
// baseUrl = "http://192.168.9.61:8086"; // baseUrl = "http://192.168.9.82:8080"; // 测试环境url
// baseUrl = 'http://vion-panda.51vip.biz:52510'; // baseUrl = "http://192.168.9.61:8086";
break; // baseUrl = 'http://vion-panda.51vip.biz:52510';
case "pre": break;
baseUrl = "https://pre-server.feleti.cn"; // 预上线环境url case "pre":
break; baseUrl = "https://pre-server.feleti.cn"; // 预上线环境url
case "production": break;
baseUrl = window.config.https?`https://${location.host}`:`http://${location.host}`; // 生产环境url case "production":
break; baseUrl = window.config.https?`https://${location.host}`:`http://${location.host}`; // 生产环境url
} break;
}
export default baseUrl; export default baseUrl;
src/api/log.js
...@@ -15,6 +15,7 @@ let servicename = { ...@@ -15,6 +15,7 @@ let servicename = {
const oplogs = function(data,service,action) { const oplogs = function(data,service,action) {
//开启日志模式才进行日志收集 //开启日志模式才进行日志收集
if(window.config.logstatus) { if(window.config.logstatus) {
debugger
let username = localStorage.getItem('uname'); let username = localStorage.getItem('uname');
let baseData = { let baseData = {
"dt": moment().locale('zh-cn'), "dt": moment().locale('zh-cn'),
...@@ -29,7 +30,7 @@ const oplogs = function(data,service,action) { ...@@ -29,7 +30,7 @@ const oplogs = function(data,service,action) {
"serv_type":service "serv_type":service
} }
api.post(oplogurl,baseData).then(res =>{ api.post(oplogurl,baseData).then(res =>{
console.log(res)
}); });
} }
} }
......
src/components/video.vue
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
</template> </template>
<script> <script>
import {config} from '../../public/js/config' // import {config} from '../../public/js/config'
export default { export default {
data () { data () {
return { return {
......
src/main.js
...@@ -24,8 +24,6 @@ Vue.prototype.$buildCode = buildCode; ...@@ -24,8 +24,6 @@ Vue.prototype.$buildCode = buildCode;
Vue.prototype.oParse = new XML.ObjTree(); Vue.prototype.oParse = new XML.ObjTree();
Vue.prototype.axios = axios; Vue.prototype.axios = axios;
// import VueParticles from "vue-particles"; // import VueParticles from "vue-particles";
// Vue.use(VueParticles);
Vue.use(api); Vue.use(api);
Vue.use(log); Vue.use(log);
Vue.use(ElementUI, { size: "small", zIndex: 3000 }); Vue.use(ElementUI, { size: "small", zIndex: 3000 });
......
src/views/Layout/index.vue
...@@ -55,7 +55,7 @@ ...@@ -55,7 +55,7 @@
<script> <script>
import types from "../../store/types.js"; import types from "../../store/types.js";
import {config} from "../../../public/js/config"; // import {config} from "../../../public/js/config";
import menus from "./menu"; import menus from "./menu";
export default { export default {
name: "x", name: "x",
......
src/views/Login.vue
...@@ -73,7 +73,7 @@ ...@@ -73,7 +73,7 @@
<script> <script>
let particlesConfig = require("../assets/js/particles.json"); let particlesConfig = require("../assets/js/particles.json");
let versioninfo = require("../../public/js/version"); let versioninfo = require("../../public/js/version");
import { config } from "../../public/js/config"; // import { config } from "../../public/js/config";
import types from "../store/types.js"; import types from "../store/types.js";
export default { export default {
name: "Login", name: "Login",
......
src/views/Resetpassword.vue
...@@ -47,9 +47,9 @@ export default { ...@@ -47,9 +47,9 @@ export default {
callback(new Error("新旧密码不能重复！")); callback(new Error("新旧密码不能重复！"));
return return
} }
var pwdRegex = /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,30}/; var pwdRegex = /^(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$"/;
if (!pwdRegex.test(value)) { if (!pwdRegex.test(value)) {
callback(new Error("您的密码复杂度太低（密码中必须包含写字母、数字、特殊字符），请及时修改密码！")) callback(new Error("您的密码复杂度太低（密码中必须包含大写和小写字母、数字、特殊字符长度大于8位），请及时修改密码！"))
} }
if (this.ruleForm.checkPass !== "") { if (this.ruleForm.checkPass !== "") {
this.$refs.ruleForm.validateField("checkPass"); this.$refs.ruleForm.validateField("checkPass");
......
src/views/deviceshow/index.vue
...@@ -173,7 +173,7 @@ ...@@ -173,7 +173,7 @@
</template> </template>
<script> <script>
import mixin from "../../assets/js/mixin"; import mixin from "../../assets/js/mixin";
import {config} from "../../../public/js/config" // import {config} from "../../../public/js/config"
export default { export default {
mixins: [mixin], mixins: [mixin],
data() { data() {
......
src/views/ops/user_manage.vue
...@@ -188,16 +188,17 @@ export default { ...@@ -188,16 +188,17 @@ export default {
} }
}; };
var checkUser = (rule, value, callback) => { var checkUser = (rule, value, callback) => {
if (value === "") { var userReg = /^[a-zA-Z0-9]{6,32}/
callback(new Error("请输入用户名")); if (!userReg.test(value)) {
callback(new Error("用户名长度为6到32个字符数字字母组合"));
} else { } else {
callback(); callback();
} }
}; };
var validatePass = (rule, value, callback) => { var validatePass = (rule, value, callback) => {
var pwdRegex = /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,30}/; var pwdRegex = /^(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$"/;;
if (!pwdRegex.test(value)) { if (!pwdRegex.test(value)) {
callback(new Error("您的密码复杂度太低（密码中必须包含写字母、数字、特殊字符），请及时修改密码！")) callback(new Error("您的密码复杂度太低（密码中必须包含大写和小写字母、数字、特殊字符长度大于8位），请及时修改密码！"))
} else { } else {
callback(); callback();
} }
......
src/views/sceneManage/eventTab.vue
...@@ -48,7 +48,7 @@ import IllegalAlarm from "./eventData/illegalEvent.vue"; ...@@ -48,7 +48,7 @@ import IllegalAlarm from "./eventData/illegalEvent.vue";
import Eventalarm from "./eventData/eventAlarm.vue"; import Eventalarm from "./eventData/eventAlarm.vue";
import EventDetail from "./eventDetail.vue"; import EventDetail from "./eventDetail.vue";
import { mapState } from "vuex"; import { mapState } from "vuex";
import {config} from '../../../public/js/config.js' // import {config} from '../../../public/js/config.js'
export default { export default {
data() { data() {
return { return {
......
src/views/sceneManage/index.vue
...@@ -204,7 +204,7 @@ export default { ...@@ -204,7 +204,7 @@ export default {
} }
if(this.subtaskdata.task_algo_type == '12') { if(this.subtaskdata.task_algo_type == '12') {
console.log(this.subtaskdata) console.log(this.subtaskdata)
this.playurl = {rtsp_url:"rtsp://192.168.9.233:8554//opt/data/vedio/1619338660378.264"}; this.playurl = {rtsp_url:this.subtaskdata.vchan.url};
console.log("bkurl",this.playurl) console.log("bkurl",this.playurl)
setTimeout(() => { setTimeout(() => {
this.$refs.videoplay.videoPlay(); this.$refs.videoplay.videoPlay();
......
src/views/sceneManage/setting/area.vue
...@@ -3,36 +3,35 @@ ...@@ -3,36 +3,35 @@
<el-dialog <el-dialog
title="区域设置" title="区域设置"
:visible.sync="dialogVisible" :visible.sync="dialogVisible"
width="1100px" width="1200px"
:before-close="beforeHideModal" :before-close="beforeHideModal"
> >
<div> <div>
<Behavior :bgUrl="bgUrl" v-if="type == '12'" ref="canvas" :configxml="configxml"></Behavior> <Behavior :bgUrl="bgUrl" v-if="type == '12'" ref="canvas" :configxml="configxml"></Behavior>
<TraficCanvas <TraficCanvas :bgUrl="bgUrl" v-if="type == '0' || type == '5' || type == '3'" ref="canvas"></TraficCanvas>
:bgUrl="bgUrl" <FlowCanvas :bgUrl="bgUrl" v-if="type == '1'" ref="canvas"></FlowCanvas>
v-if="type == '0' || type == '5' || type == '3'" <SafeCanvas :bgUrl="bgUrl" v-if="type == '2'" ref="canvas"></SafeCanvas>
ref="canvas" <FaceCanvas :bgUrl="bgUrl" v-if="type == '4'" ref="canvas"></FaceCanvas>
></TraficCanvas> <ComplexCanvas :bgUrl="bgUrl" v-if="type == '7'" ref="canvas"></ComplexCanvas>
<FlowCanvas :bgUrl="bgUrl" v-if="type == '1'" ref="canvas"></FlowCanvas> </div>
<SafeCanvas :bgUrl="bgUrl" v-if="type == '2'" ref="canvas"></SafeCanvas> <div>
<FaceCanvas :bgUrl="bgUrl" v-if="type == '4'" ref="canvas"></FaceCanvas> <el-button type="primary" style="float:left; margin-right:10px" @click="down">
<ComplexCanvas 下载
:bgUrl="bgUrl" <i class="el-icon-download el-icon--right"></i>
v-if="type == '7'" </el-button>
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 <el-upload
class="upload-demo" class="upload-demo"
action="" action
:auto-upload="false" :auto-upload="false"
:show-file-list="false" :show-file-list="false"
:on-change="handleChange" :on-change="handleChange"
:file-list="fileList"> :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-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> </el-upload>
</div> </div>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
...@@ -49,7 +48,7 @@ import SafeCanvas from "./areaconfig/SafeCanvas"; ...@@ -49,7 +48,7 @@ import SafeCanvas from "./areaconfig/SafeCanvas";
import FaceCanvas from "./areaconfig/FaceCanvas"; import FaceCanvas from "./areaconfig/FaceCanvas";
import ComplexCanvas from "./areaconfig/ComplexCanvas"; import ComplexCanvas from "./areaconfig/ComplexCanvas";
import Behavior from "./areaconfig/Behavior"; import Behavior from "./areaconfig/Behavior";
import {roi} from "./areaconfig/roi_1" import { roi } from "./areaconfig/roi_1";
export default { export default {
data() { data() {
return { return {
...@@ -62,9 +61,9 @@ export default { ...@@ -62,9 +61,9 @@ export default {
XMLStr: "", XMLStr: "",
taskData: "", taskData: "",
bgUrl: "", bgUrl: "",
baseUrl:"", baseUrl: "",
configxml:"", configxml: "",
fileList:[] fileList: []
}; };
}, },
components: { components: {
...@@ -84,78 +83,84 @@ export default { ...@@ -84,78 +83,84 @@ export default {
this.type = data.algo_type; this.type = data.algo_type;
// this.type = 2; // this.type = 2;
this.bgUrl = ""; this.bgUrl = "";
//获取视频截图 //获取视频截图 12为bk算法采用ocx截图
this.$api.task if (data.algo_type !== 12) {
.cutpic( this.$api.task
mtaskdata.vchan.vdev_unid, .cutpic(
mtaskdata.vchan.vchan_refid, mtaskdata.vchan.vdev_unid,
mtaskdata.subtask_id mtaskdata.vchan.vchan_refid,
) mtaskdata.subtask_id
.then(data => { )
if (!data.ecode) { .then(data => {
this.bgUrl = "data:image/png;base64," + data.pic_base64; if (!data.ecode) {
this.baseUrl = "data:image/png;base64," + data.pic_base64; this.bgUrl = "data:image/png;base64," + data.pic_base64;
setTimeout(() => { this.baseUrl = "data:image/png;base64," + data.pic_base64;
let img = document.getElementById("pic").childNodes[0]; setTimeout(() => {
let canvas = document.createElement("canvas"); let img = document.getElementById("pic").childNodes[0];
canvas.width = 800; let canvas = document.createElement("canvas");
canvas.height = 500; canvas.width = 800;
try { canvas.height = 500;
canvas.getContext("2d").drawImage(img, 0, 0, 800, 500); try {
_this.bgUrl = canvas.toDataURL("image/webp"); canvas.getContext("2d").drawImage(img, 0, 0, 800, 500);
} catch (error) { _this.bgUrl = canvas.toDataURL("image/webp");
console.log(error); } catch (error) {
} console.log(error);
}, 500); }
} else { }, 500);
alert("区域设置截图失败!" + data.enote); } else {
} alert("区域设置截图失败!" + data.enote);
}) }
.catch(err => { })
console.log("区域设置截图返回异常:", err.message); .catch(err => {
}); console.log("区域设置截图返回异常:", err.message);
});
}
this.configxml = data.config; this.configxml = data.config;
setTimeout(() => { setTimeout(() => {
_this.$refs.canvas.stageInit(data.config); _this.$refs.canvas.stageInit(data.config);
}, 10);
setTimeout(() => {
if (data.rois) { if (data.rois) {
_this.$refs.canvas.configInit(data.rois[0].roi,data.config); _this.$refs.canvas.configInit(data.rois[0].roi, data.config);
// _this.$refs.canvas.configInit(roi); // _this.$refs.canvas.configInit(roi);
} }
}, 300); }, 500);
}, },
handleChange(file, fileLis){ handleChange(file, fileLis) {
this.bgUrl = URL.createObjectURL(file.raw); this.bgUrl = URL.createObjectURL(file.raw);
setTimeout(() => { setTimeout(() => {
let img = document.getElementById("pic").childNodes[0]; let img = document.getElementById("pic").childNodes[0];
let canvas = document.createElement("canvas"); let canvas = document.createElement("canvas");
canvas.width = 800; canvas.width = 800;
canvas.height = 500; canvas.height = 500;
try { try {
canvas.getContext("2d").drawImage(img, 0, 0, 800, 500); canvas.getContext("2d").drawImage(img, 0, 0, 800, 500);
_this.bgUrl = canvas.toDataURL("image/webp"); _this.bgUrl = canvas.toDataURL("image/webp");
} catch (error) { } catch (error) {
console.log(error); console.log(error);
} }
}, 500); }, 500);
}, },
down(){ down() {
this.downloadurl(this.baseUrl,'scenes_pic') this.downloadurl(this.baseUrl, "scenes_pic");
}, },
downloadurl(content, fileName) { //下载base64图片 downloadurl(content, fileName) {
//下载base64图片
var base64ToBlob = function(code) { var base64ToBlob = function(code) {
let parts = code.split(';base64,'); let parts = code.split(";base64,");
let contentType = parts[0].split(':')[1]; let contentType = parts[0].split(":")[1];
let raw = window.atob(parts[1]); let raw = window.atob(parts[1]);
let rawLength = raw.length; let rawLength = raw.length;
let uInt8Array = new Uint8Array(rawLength); let uInt8Array = new Uint8Array(rawLength);
for(let i = 0; i < rawLength; ++i) { for (let i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i); uInt8Array[i] = raw.charCodeAt(i);
} }
return new Blob([uInt8Array], { return new Blob([uInt8Array], {
type: contentType type: contentType
}); });
}; };
let aLink = document.createElement('a'); let aLink = document.createElement("a");
let blob = base64ToBlob(content); //new Blob([content]); let blob = base64ToBlob(content); //new Blob([content]);
let evt = document.createEvent("HTMLEvents"); let evt = document.createEvent("HTMLEvents");
evt.initEvent("click", true, true); //initEvent 不加后两个参数在FF下会报错 事件类型，是否冒泡，是否阻止浏览器的默认行为 evt.initEvent("click", true, true); //initEvent 不加后两个参数在FF下会报错 事件类型，是否冒泡，是否阻止浏览器的默认行为
...@@ -194,7 +199,7 @@ export default { ...@@ -194,7 +199,7 @@ export default {
return; return;
} }
let XMLStr = this.$refs.canvas.save(); let XMLStr = this.$refs.canvas.save();
console.log("xxx",XMLStr); console.log("xxx", XMLStr);
if (this.type == "1" && (XMLStr === "dir" || XMLStr === "in")) { if (this.type == "1" && (XMLStr === "dir" || XMLStr === "in")) {
this.$message({ this.$message({
type: "warning", type: "warning",
...@@ -202,9 +207,9 @@ export default { ...@@ -202,9 +207,9 @@ export default {
}); });
return; return;
} }
if(this.type == '12') { if (this.type == "12") {
let XMLStr = this.$refs.canvas.paramsData; let XMLStr = this.$refs.canvas.paramsData;
console.log("12",XMLStr) console.log("12", XMLStr);
this.$parent.submit(XMLStr, "config"); this.$parent.submit(XMLStr, "config");
} }
this.$parent.submit(XMLStr, "roi", this.taskData); this.$parent.submit(XMLStr, "roi", this.taskData);
......
src/views/sceneManage/setting/areaconfig/Behavior.vue
<template> <template>
<div class="modal-body b-box"> <div class="modal-body b-box">
<div class="tool">
<div :class="{'tool-t':true,'toolactive':curtool == 'line'}" @click="changetool('line')">
<img src="./img/line.png" alt />
</div>
<div :class="{'tool-t':true,'toolactive':curtool == 'line'}" @click="changetool('rect')">
<img src="./img/rect.png" alt />
</div>
<div :class="{'tool-t':true,'toolactive':curtool == 'line' }" @click="changetool('polygon')">
<img src="./img/dbx.png" alt />
</div>
</div>
<div class="modal-left"> <div class="modal-left">
<div class="pic" id="pic" :style="{'background':caturl}"> <div class="pic" id="pic">
<canvas id="main" width="700" height="500"></canvas> <canvas id="main" width="700" height="500"></canvas>
</div> </div>
</div> </div>
...@@ -9,26 +20,21 @@ ...@@ -9,26 +20,21 @@
<div class="be-header"> <div class="be-header">
<el-radio-group v-model="checkval" size="mini"> <el-radio-group v-model="checkval" size="mini">
<el-radio-button label="shanghai">行为事件</el-radio-button> <el-radio-button label="shanghai">行为事件</el-radio-button>
<el-radio-button label="北京" name="shangha" disabled <el-radio-button label="北京" name="shangha" disabled>交通事件</el-radio-button>
>交通事件</el-radio-button <el-radio-button label="广州" name="shnghai" disabled>安防事件</el-radio-button>
>
<el-radio-button label="广州" name="shnghai" disabled
>安防事件</el-radio-button
>
</el-radio-group> </el-radio-group>
</div> </div>
<div class="be-content"> <div class="be-content">
<div class="typebox"> <div class="typebox">
<div class="checkbox" v-for="(item, index) in basconfig" :key="index"> <div class="checkbox" v-for="(item, index) in basconfig" :key="index">
<div <div :class="{ listbox: true, curlist: cindex == index }" @click="seltype(item, index)">
:class="{ listbox: true, curlist: cindex == index }" <!-- <el-checkbox-group v-model="checktype" class="checkgrop">
@click="seltype(item, index)" <el-checkbox :key="item.name" :label="item.name">
> {{
<el-checkbox-group v-model="checkboxGroup1" class="checkgrop">
<el-checkbox :key="item.name" :label="item.name">{{
"" ""
}}</el-checkbox> }}
</el-checkbox-group> </el-checkbox>
</el-checkbox-group> -->
<span class="typetext">{{ item.name }}</span> <span class="typetext">{{ item.name }}</span>
</div> </div>
</div> </div>
...@@ -37,12 +43,12 @@ ...@@ -37,12 +43,12 @@
<div class="areabox"> <div class="areabox">
<div class="area-header">检测规则</div> <div class="area-header">检测规则</div>
<div <div
:class="{ 'area-item': true, activeare: item.id == curuuid }" :class="{ 'area-item': true, 'activeare1': item.id == curuuid }"
v-for="(item, index) in groupList" v-for="(item, index) in groupList"
:key="index" :key="index"
@click="changeKlass(item)" @click="changeKlass(item)"
> >区域{{ index + 1 }}
区域{{ index + 1 }} <!-- <span class="el-icon-circle-close" @click="deleteShape(item)"></span> -->
</div> </div>
<div class="bottombtn"> <div class="bottombtn">
<!-- <el-button @click="savechange" type="primary" size="mini" style="width:90px">保存</el-button> --> <!-- <el-button @click="savechange" type="primary" size="mini" style="width:90px">保存</el-button> -->
...@@ -51,31 +57,27 @@ ...@@ -51,31 +57,27 @@
type="primary" type="primary"
size="mini" size="mini"
style="width: 90px" style="width: 90px"
>保存</el-button> --> >保存</el-button>-->
</div> </div>
</div> </div>
<div class="setbox"> <div class="setbox">
<div <div v-if="citem.config">
v-for="(val, key, index) in citem.config" <div v-for="(val, key, index) in citem.config" :key="index" class="setboxitem">
:key="index"
class="setboxitem"
>
<span class="configlabel">{{ key }}:</span> <span class="configlabel">{{ key }}:</span>
<span class="" <span class>
><el-input v-model="citem.config[key]"></el-input <el-input v-model="citem.config[key]"></el-input>
></span> </span>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="pusbox"> <div class="pusbox">
<div class="label">推送地址:</div> <div class="label">推送地址:</div>
<div> <div>
<el-input <el-input v-model="pushurl" placeholder="推送地址" width="100"></el-input>
v-model="pushurl"
placeholder="推送地址"
width="100"
></el-input>
</div> </div>
<div style="color;#ccc">方向：1进入区域,2出去区域,3双向警告</div>
<div><el-button size="mini" @click="clearcanvas">清空</el-button></div>
</div> </div>
</div> </div>
</div> </div>
...@@ -85,7 +87,6 @@ ...@@ -85,7 +87,6 @@
import { fabric } from "fabric"; import { fabric } from "fabric";
import { select } from "svg.js"; import { select } from "svg.js";
import { xml } from "./bog.js"; import { xml } from "./bog.js";
var canvas = null;
var drawingObject = null; //当前绘制对象 var drawingObject = null; //当前绘制对象
var mouseFrom = {}, var mouseFrom = {},
mouseTo = {}, mouseTo = {},
...@@ -107,89 +108,198 @@ export default { ...@@ -107,89 +108,198 @@ export default {
return { return {
tabPosition: "top", tabPosition: "top",
checkval: "shanghai", checkval: "shanghai",
checkboxGroup1: ["人员脱岗"], checktype: [],
groupList: [], groupList: [],
curAlgoType: "xsdsfd", curAlgoType: "xsdsfd",
basconfig: [], basconfig: [],
curtool: "line",
baselist: {}, baselist: {},
cindex: 0, cindex: 0,
citem: null, citem: { config: null },
curuuid: null, curuuid: null,
pushurl: "", pushurl: "",
canvasObject: null,
roiBody: {}, roiBody: {},
basedocument: null, basedocument: null,
paramsData: "", paramsData: "",
caturl:"" caturl: "",
drawWidth: 2,
moveCount: 1, //绘制移动计数器
doDrawing: false, // 绘制状态
color: "#E34F51", //画笔颜色
//polygon 相关参数
polygonMode: false,
pointArray: [],
lineArray: [],
activeShape: false,
activeLine: "",
line: {},
delectKlass: {},
imgFile: {},
imgSrc: "",
polygonpoint:[],
canvas: null,
curklass:null, //活动对象
}; };
}, },
methods: { methods: {
/** /**
* 工具选择
*
*/
changetool(type) {
if (type == "polygon") {
this.drawPolygon();
}
drawType = type;
},
/**
* 初始化区域 * 初始化区域
*/ */
configInit(basexml, confxml) { configInit(roiXml, confxml) {
drawType = "rectangle"; debugger;
let obj = this.oParse.parseXML(basexml).roi; var picuri = new Date().getTime();
for (key in obj) { try {
document
.getElementById("VionVideo")
.CapturePicture("D:\\/" + picuri + ".jpg");
setTimeout(() => {
document.getElementById("pic").style.backgroundImage =
"url(D:\\/" + picuri + ".jpg)";
}, 1500);
} catch (error) {}
let roiobj = this.oParse.parseXML(roiXml).roi;
if (roiobj === undefined) {
roiobj = {};
}
for (key in roiobj) {
let klassarr = []; let klassarr = [];
if (obj[key].region_count > 0) { if (roiobj[key].region_count > 0) {
let polygon = obj[key].polygon; var polygon = roiobj[key].polygon;
if (obj[key].region_count == 1) { if (Object.prototype.toString.call(polygon) === "[object Array]") {
let points = polygon.point; polygon.map(ele => {
mouseFrom.x = points[0].x * 700; if (ele.polygon_type == "rect") {
mouseFrom.y = points[0].y * 500; drawType = "rect";
mouseTo.x = points[2].x * 700; let points = ele.point;
mouseTo.y = points[2].y * 500;
this.drawing("init"); this.initRect(points);
klassarr.push(drawingObject); } else if (ele.polygon_type == "line") {
} else { drawType = ele.polygon_type;
for (let i = 0; i < polygon.length; i++) { this.intline(points)
let points = polygon[i].point; this.drawing("init");
mouseFrom.x = points[0].x * 700; } else if (ele.polygon_type == "polygon") {
mouseFrom.y = points[0].y * 500; drawType = ele.polygon_type;
mouseTo.x = points[2].x * 700; let points = ele.point;
mouseTo.y = points[2].y * 500; this.intPolygon(points)
this.drawing("init");
}
this.drawing("init"); this.drawing("init");
klassarr.push(drawingObject); klassarr.push(drawingObject);
});
} else {
if (polygon.polygon_type == "rect") {
drawType ="rect";
this.initRect(polygon.point);
} else if (polygon.polygon_type == "line") {
drawType = polygon.polygon_type;
this.intline(polygon.point)
this.drawing("init");
//
} else if (polygon.polygon_type == "polygon") {
drawType ="polygon";
let points = polygon.point;
this.intPolygon(points)
this.drawing("init");
} }
this.drawing("init");
klassarr.push(drawingObject);
} }
} roiobj[key].rois = klassarr;
obj[key].rois = klassarr; for (let k = 0; k < this.basconfig.length; k++) {
for (let k = 0; k < this.basconfig.length; k++) { if (this.basconfig[k].config.算法ID === key) {
if (this.basconfig[k].config.算法ID === key) { this.basconfig[k].roi = klassarr;
this.basconfig[k].roi = klassarr; // this.basconfig[k].config = confobj['root']
// this.basconfig[k].config = confobj['root'] break;
break; }
} }
} }
} }
this.basconfig[0].roi.map((ele) => { if (this.basconfig.length > 0) {
this.fabricObjInit(ele); if (this.basconfig[0].roi) {
}); this.basconfig[0].roi.map(ele => {
this.fabricObjInit(ele);
this.setAreaconfig();
});
}
}
},
initRect(points) {
mouseFrom.x = points[0].x * 700;
mouseFrom.y = points[0].y * 500;
mouseTo.x = points[2].x * 700;
mouseTo.y = points[2].y * 500;
},
intline(points){
mouseFrom.x = points[0].x * 700;
mouseFrom.y = points[0].y * 500;
mouseTo.x = points[1].x * 700;
mouseTo.y = points[1].y * 500;
},
clearcanvas(){
this.canvas.clear()
},
intPolygon(points) {
mouseFrom.x = points[0].x * 700;
mouseFrom.y = points[0].y * 500;
let pointarr = [];
points.map(ele => {
let obj = {
x:ele.x * 700,
y:ele.y * 500
}
pointarr.push(obj);
})
this.polygonpoint = pointarr
}, },
/** /**
* 初始化区域( * 初始化参数及画布
* 误删为了兼容vion的区域设置
* 该区域设置转化为参数设置
*/ */
stageInit(data) { stageInit(data) {
if (!this.canvas) {
this.Initfab();
}
if (data.xml !== undefined && data.xml.indexOf('undefined')< 0) {
this.basconfig = Object.assign(
this.oParse.parseXML(data.xml),
this.oParse.parseXML(xml)
);
} else {
this.basconfig = this.oParse.parseXML(xml);
}
this.initConfig(this.basconfig);
console.log("config", data); console.log("config", data);
}, },
getObjects(klass) { getObjects(klass) {
//获取所有的列表对象 //获取所有的列表对象
var group = canvas.getObjects(); var group = this.canvas.getObjects();
}, },
setAreaconfig() { setAreaconfig() {
var group = canvas.getObjects(); var group = this.canvas.getObjects();
this.groupList = group; this.groupList = group;
}, },
//设置活动对象 //设置活动对象
changeKlass(klass) { changeKlass(klass) {
canvas.setActiveObject(klass); console.log(klass)
canvas.requestRenderAll(); this.curklass = klass;
this.canvas.setActiveObject(klass);
this.canvas.requestRenderAll();
}, },
updateGroup() { updateGroup() {
var group = canvas.getObjects(); var group = this.canvas.getObjects();
this.groupList = group; this.groupList = group;
}, },
...@@ -197,23 +307,24 @@ export default { ...@@ -197,23 +307,24 @@ export default {
* tab切换保存之前绘制的数据 * tab切换保存之前绘制的数据
*/ */
changetype(data, index) { changetype(data, index) {
var group = canvas.getObjects(); var group = this.canvas.getObjects();
var confdata = this.basconfig[this.cindex]; var confdata = this.basconfig[this.cindex];
confdata.roi = group; confdata.roi = group;
canvas.clear(); this.canvas.clear();
console.log(this.basconfig); console.log(this.basconfig);
}, },
/** /**
* 回显对象 * 回显对象
*/ */
fabricObjInit(klass) { fabricObjInit(klass) {
canvas.add(klass); this.canvas.add(klass);
}, },
/** /**
* 根据选择模型定位规则 * 根据选择模型定位规则
*/ */
selectklass(klass) { selectklass(klass) {
this.curuuid = klass.id; this.curuuid = klass.id;
this.curklass = klass;
}, },
/** /**
* 解构算法xml * 解构算法xml
...@@ -241,7 +352,7 @@ export default { ...@@ -241,7 +352,7 @@ export default {
id: key, id: key,
name: key, name: key,
roi: null, roi: null,
config: obj[key], config: obj[key]
}; };
arr.push(buildobj); arr.push(buildobj);
} else { } else {
...@@ -279,11 +390,11 @@ export default { ...@@ -279,11 +390,11 @@ export default {
//博关算法监测区域 //博关算法监测区域
let confArr = [], let confArr = [],
parentname; parentname;
this.basconfig.map((ele) => { this.basconfig.map(ele => {
if (ele.config["算法ID"]) { if (ele.config["算法ID"]) {
let idname = ele.config["算法ID"]; let idname = ele.config["算法ID"];
let ROI = { let ROI = {
idname: "", idname: ""
}; };
console.log(this.buildRoI(ele)); console.log(this.buildRoI(ele));
this.roiBody[idname] = this.buildRoI(ele); this.roiBody[idname] = this.buildRoI(ele);
...@@ -298,58 +409,112 @@ export default { ...@@ -298,58 +409,112 @@ export default {
confArr.push(childconfig); confArr.push(childconfig);
}); });
this.buildParam(parentname, confArr); this.buildParam(parentname, confArr);
this.clear();
return this.oParse.writeXML({ roi: this.roiBody }); return this.oParse.writeXML({ roi: this.roiBody });
}, },
clear() { clear() {
canvas.clear(); this.basconfig = [];
if (this.canvas !== undefined) {
this.canvas.clear();
}
}, },
/** /**
* 构建ROI * 构建ROI
*/ */
buildRoI(klass) { buildRoI(klass) {
debugger
let bg_arr = [], let bg_arr = [],
pol; pol,
let idname = klass.config["算法ID"]; idname = klass.config["算法ID"];
if (klass.roi != null && klass.roi != "") { try {
klass.roi.map((ele) => { if (klass.roi != null && klass.roi != "") {
let lines = ele.aCoords; klass.roi.map((ele, k) => {
let point = [ if (ele.drawtype == "rect") {
{ let lines = ele.aCoords;
point_seq: "1", let point = [
x: (lines.tl.x / 700).toFixed(6), {
y: (lines.tl.y / 500).toFixed(6), point_seq: "1",
}, x: (lines.tl.x / 700).toFixed(6),
{ y: (lines.tl.y / 500).toFixed(6)
point_seq: "2", },
x: (lines.tr.x / 700).toFixed(6), {
y: (lines.tr.y / 500).toFixed(6), point_seq: "2",
}, x: (lines.tr.x / 700).toFixed(6),
{ y: (lines.tr.y / 500).toFixed(6)
point_seq: "3", },
x: (lines.br.x / 700).toFixed(6), {
y: (lines.br.y / 500).toFixed(6), point_seq: "3",
}, x: (lines.br.x / 700).toFixed(6),
{ y: (lines.br.y / 500).toFixed(6)
point_seq: "4", },
x: (lines.bl.x / 700).toFixed(6), {
y: (lines.bl.y / 500).toFixed(6), point_seq: "4",
}, x: (lines.bl.x / 700).toFixed(6),
]; y: (lines.bl.y / 500).toFixed(6)
let obj = { }
polygon_point_count: 4, ];
point: point, let obj = {
polygon_seq: k + 1,
polygon_point_count: 4,
point: point,
polygon_type: "rect"
};
bg_arr.push(obj);
}
//多边形
if (ele.drawtype == "polygon") {
let po = ele.points;
let poarr = [];
po.map((ele, i) => {
let obj = {
point_seq: i / 2 + 1,
x: (ele.x / 700).toFixed(6),
y: (ele.y / 500).toFixed(6)
};
poarr.push(obj);
});
let obj = {
polygon_seq: k + 1,
polygon_point_count: po.length,
point: poarr,
polygon_type: "polygon"
};
bg_arr.push(obj);
}
debugger
if (ele.drawtype == "line") {
let lines = ele.aCoords;
let point = [{
point_seq: "1",
x: (ele.x1 / 700).toFixed(6),
y: (ele.y1 / 500).toFixed(6)
},
{
point_seq: "2",
x: (ele.x2 / 700).toFixed(6),
y: (ele.y2 / 500).toFixed(6)
},];
let obj = {
polygon_seq: k + 1,
polygon_point_count: 2,
point: point,
polygon_type: "line"
};
bg_arr.push(obj);
}
});
pol = {
region_count: klass.roi.length,
polygon: bg_arr
}; };
bg_arr.push(obj); } else {
}); pol = {
pol = { region_count: 0
region_count: klass.roi.length, };
polygon: bg_arr, }
}; console.log(pol);
} else { } catch (error) {}
pol = {
region_count: 0,
};
}
return pol; return pol;
}, },
/** /**
...@@ -358,13 +523,13 @@ export default { ...@@ -358,13 +523,13 @@ export default {
buildParam(parentname, confArr) { buildParam(parentname, confArr) {
let paramsconfig = { let paramsconfig = {
root: { root: {
算法功能: {}, 算法功能: {}
}, }
}; };
let pobj = { let pobj = {
结果推送地址: this.pushurl, 结果推送地址: this.pushurl
}; };
confArr.map((ele) => { confArr.map(ele => {
for (key in ele) { for (key in ele) {
pobj[key] = ele[key]; pobj[key] = ele[key];
} }
...@@ -372,39 +537,195 @@ export default { ...@@ -372,39 +537,195 @@ export default {
paramsconfig.root.算法功能[parentname] = pobj; paramsconfig.root.算法功能[parentname] = pobj;
this.paramsData = this.oParse.writeXML(paramsconfig); this.paramsData = this.oParse.writeXML(paramsconfig);
}, },
//生成多边形
generatePolygon() {
var points = new Array();
this.pointArray.map((point, index) => {
points.push({
x: point.left,
y: point.top
});
this.canvas.remove(point);
});
this.lineArray.map((line, index) => {
this.canvas.remove(line);
});
this.canvas.remove(this.activeShape).remove(this.activeLine);
var polygon = new fabric.Polygon(points, {
stroke: this.color,
strokeWidth: this.drawWidth,
fill: "rgba(255, 255, 255, 0)",
opacity: 1,
hasBorders: true,
hasControls: false,
drawtype: drawType
});
polygon.drawtype = drawType;
this.canvas.add(polygon);
this.activeLine = null;
this.activeShape = null;
this.polygonMode = false;
this.doDrawing = false;
this.drawType = null;
this.setAreaconfig();
var group = this.canvas.getObjects();
var confdata = this.basconfig[this.cindex];
confdata.roi = group;
},
// 绘制多边形开始，绘制多边形和其他图形不一样，需要单独处理
drawPolygon() {
drawType = "polygon";
this.polygonMode = true;
//这里画的多边形，由顶点与线组成
this.pointArray = new Array(); // 顶点集合
this.lineArray = new Array(); //线集合
this.canvas.isDrawingMode = false;
},
//delete
deleteShape(klass) {
var points = klass.get("points");
var a = this.canvas.getActiveObject();
this.canvas.remove(a)
this.canvas.requestRenderAll();
this.updateGroup();
},
addPoint(e) {
var random = Math.floor(Math.random() * 10000);
var id = new Date().getTime() + random;
var circle = new fabric.Circle({
radius: 5,
fill: "#ffffff",
stroke: "#333333",
strokeWidth: 0.5,
left: (e.pointer.x || e.e.layerX) / this.canvas.getZoom(),
top: (e.pointer.y || e.e.layerY) / this.canvas.getZoom(),
selectable: false,
hasBorders: false,
hasControls: false,
originX: "center",
originY: "center",
id: id,
objectCaching: false
});
if (this.pointArray.length == 0) {
circle.set({
fill: "red"
});
}
var points = [
(e.pointer.x || e.e.layerX) / this.canvas.getZoom(),
(e.pointer.y || e.e.layerY) / this.canvas.getZoom(),
(e.pointer.x || e.e.layerX) / this.canvas.getZoom(),
(e.pointer.y || e.e.layerY) / this.canvas.getZoom()
];
this.line = new fabric.Line(points, {
strokeWidth: 2,
fill: "#999999",
stroke: "#999999",
class: "line",
originX: "center",
originY: "center",
selectable: false,
hasBorders: false,
hasControls: false,
evented: false,
objectCaching: false
});
if (this.activeShape) {
var pos = this.canvas.getPointer(e.e);
var points = this.activeShape.get("points");
points.push({
x: pos.x,
y: pos.y
});
var polygon = new fabric.Polygon(points, {
stroke: "#333333",
strokeWidth: 1,
fill: "#cccccc",
opacity: 0.3,
selectable: true,
hasBorders: false,
hasControls: false,
evented: false,
objectCaching: false
});
polygon.drawtype = drawType;
this.canvas.remove(this.activeShape);
this.canvas.add(polygon);
this.activeShape = polygon;
this.canvas.requestRenderAll();
} else {
var polyPoint = [
{
x: (e.pointer.x || e.e.layerX) / this.canvas.getZoom(),
y: (e.pointer.y || e.e.layerY) / this.canvas.getZoom()
}
];
var polygon = new fabric.Polygon(polyPoint, {
stroke: "#333333",
strokeWidth: 1,
fill: "#cccccc",
opacity: 0.3,
selectable: false,
hasBorders: false,
hasControls: false,
evented: false,
objectCaching: false
});
this.activeShape = polygon;
this.canvas.add(polygon);
}
console.log("polygon", this.activeShape);
this.activeLine = this.line;
this.pointArray.push(circle);
this.lineArray.push(this.line);
this.canvas.add(this.line);
this.canvas.add(circle);
},
drawing(type) { drawing(type) {
var vthis = this; var vthis = this;
if (drawingObject && type == "draw") { if (drawingObject && type == "draw") {
canvas.remove(drawingObject); this.canvas.remove(drawingObject);
} }
var canvasObject = null;
switch (drawType) { switch (drawType) {
case "arrow": //箭头 case "arrow": //箭头
canvasObject = new fabric.Path( this.canvasObject = new fabric.Path(
drawArrow(mouseFrom.x, mouseFrom.y, mouseTo.x, mouseTo.y, 30, 30), drawArrow(mouseFrom.x, mouseFrom.y, mouseTo.x, mouseTo.y, 30, 30),
{ {
stroke: color, stroke: color,
fill: "rgba(255,255,255,0)", fill: "rgba(255,255,255,0)",
strokeWidth: drawWidth, strokeWidth: drawWidth
} }
); );
break; break;
case "line": //直线 case "line": //直线
canvasObject = new fabric.Line( this.canvasObject = new fabric.Line(
[mouseFrom.x, mouseFrom.y, mouseTo.x, mouseTo.y], [mouseFrom.x, mouseFrom.y, mouseTo.x, mouseTo.y],
{ {
stroke: color, strokeWidth: 2,
strokeWidth: drawWidth, class: "line",
originX: "center",
originY: "center",
selectable: false,
hasBorders: false,
hasControls: false,
evented: false,
objectCaching: false,
stroke: color
} }
); );
break; break;
case "dottedline": //虚线 case "dottedline": //虚线
canvasObject = new fabric.Line( this.canvasObject = new fabric.Line(
[mouseFrom.x, mouseFrom.y, mouseTo.x, mouseTo.y], [mouseFrom.x, mouseFrom.y, mouseTo.x, mouseTo.y],
{ {
strokeDashArray: [3, 1], strokeDashArray: [3, 1],
stroke: color, stroke: color,
strokeWidth: drawWidth, strokeWidth: drawWidth
} }
); );
break; break;
...@@ -416,13 +737,13 @@ export default { ...@@ -416,13 +737,13 @@ export default {
(mouseTo.x - left) * (mouseTo.x - left) + (mouseTo.x - left) * (mouseTo.x - left) +
(mouseTo.y - top) * (mouseTo.y - top) (mouseTo.y - top) * (mouseTo.y - top)
) / 2; ) / 2;
canvasObject = new fabric.Circle({ this.canvasObject = new fabric.Circle({
left: left, left: left,
top: top, top: top,
stroke: color, stroke: color,
fill: "rgba(255, 255, 255, 0)", fill: "rgba(255, 255, 255, 0)",
radius: radius, radius: radius,
strokeWidth: drawWidth, strokeWidth: drawWidth
}); });
break; break;
case "ellipse": //椭圆 case "ellipse": //椭圆
...@@ -435,7 +756,7 @@ export default { ...@@ -435,7 +756,7 @@ export default {
(mouseTo.x - left) * (mouseTo.x - left) + (mouseTo.x - left) * (mouseTo.x - left) +
(mouseTo.y - top) * (mouseTo.y - top) (mouseTo.y - top) * (mouseTo.y - top)
) / 2; ) / 2;
canvasObject = new fabric.Ellipse({ this.canvasObject = new fabric.Ellipse({
left: left, left: left,
top: top, top: top,
stroke: color, stroke: color,
...@@ -444,71 +765,47 @@ export default { ...@@ -444,71 +765,47 @@ export default {
originY: "center", originY: "center",
rx: Math.abs(left - mouseTo.x), rx: Math.abs(left - mouseTo.x),
ry: Math.abs(top - mouseTo.y), ry: Math.abs(top - mouseTo.y),
strokeWidth: drawWidth, strokeWidth: drawWidth
}); });
break; break;
case "square": //TODO:正方形（后期完善） case "square": //TODO:正方形（后期完善）
break; break;
case "rectangle": //长方形 case "rect": //长方形
// eslint-disable-next-line no-redeclare // eslint-disable-next-line no-redeclare
var left = mouseFrom.x, var left = mouseFrom.x,
top = mouseFrom.y; top = mouseFrom.y;
canvasObject = new fabric.Rect({ this.canvasObject = new fabric.Rect({
left: left, left: left,
top: top, top: top,
width: mouseTo.x - left, //矩形的宽度 width: mouseTo.x - left, //矩形的宽度
height: mouseTo.y - top, //矩形的高度 height: mouseTo.y - top, //矩形的高度
fill: "rgba(0,0,0,.3)", //填充的颜色 fill: "rgba(0,0,0,.3)", //填充的颜色
stroke: "orange", // 边框原色 stroke: "orange", // 边框原色
strokeWidth: 1, // 边框大小 strokeWidth: 1 // 边框大小
});
canvasObject.on("selected", function () {
cvselect = true;
cvunselect = true;
curObjcet = canvasObject;
vthis.selectklass(canvasObject);
});
canvasObject.on("deselected", function () {
vthis.setAreaconfig();
var group = canvas.getObjects();
var confdata = vthis.basconfig[vthis.cindex];
confdata.roi = group;
cvunselect = false;
}); });
break; break;
case "rightangle": //直角三角形 case "polygon": //路径绘制
var path = var left = mouseFrom.x,
"M " + top = mouseFrom.y,
mouseFrom.x + path = vthis.path;
" " +
mouseFrom.y + this.canvasObject = new fabric.Polygon(vthis.polygonpoint, {
" L " +
mouseFrom.x + hasControls: false,
" " +
mouseTo.y +
" L " +
mouseTo.x +
" " +
mouseTo.y +
" z";
canvasObject = new fabric.Path(path, {
left: left,
top: top,
stroke: color, stroke: color,
strokeWidth: drawWidth, fill: "rgba(255, 255, 255, 0)"
fill: "rgba(255, 255, 255, 0)",
}); });
break; break;
case "equilateral": //等边三角形 case "equilateral": //等边三角形
var height = mouseTo.y - mouseFrom.y; var height = mouseTo.y - mouseFrom.y;
canvasObject = new fabric.Triangle({ this.canvasObject = new fabric.Triangle({
top: mouseFrom.y, top: mouseFrom.y,
left: mouseFrom.x, left: mouseFrom.x,
width: Math.sqrt(Math.pow(height, 2) + Math.pow(height / 2.0, 2)), width: Math.sqrt(Math.pow(height, 2) + Math.pow(height / 2.0, 2)),
height: height, height: height,
stroke: color, stroke: color,
strokeWidth: drawWidth, strokeWidth: drawWidth,
fill: "rgba(255,255,255,0)", fill: "rgba(255,255,255,0)"
}); });
break; break;
case "isosceles": case "isosceles":
...@@ -521,9 +818,9 @@ export default { ...@@ -521,9 +818,9 @@ export default {
fontSize: 18, fontSize: 18,
borderColor: "#2c2c2c", borderColor: "#2c2c2c",
fill: color, fill: color,
hasControls: false, hasControls: false
}); });
canvas.add(textbox); this.canvas.add(textbox);
textbox.enterEditing(); textbox.enterEditing();
textbox.hiddenTextarea.focus(); textbox.hiddenTextarea.focus();
break; break;
...@@ -533,105 +830,153 @@ export default { ...@@ -533,105 +830,153 @@ export default {
break; break;
} }
// canvasObject.index = getCanvasObjectIndex(); // canvasObject.index = getCanvasObjectIndex();
if (canvasObject) { if (this.canvasObject) {
canvasObject.id = vthis.uuid(); this.canvasObject.on("selected", function() {
cvselect = true;
cvunselect = true;
curObjcet = vthis.canvasObject;
vthis.selectklass(vthis.canvasObject);
});
this.canvasObject.on("deselected", function() {
vthis.setAreaconfig();
var group = vthis.canvas.getObjects();
var confdata = vthis.basconfig[vthis.cindex];
confdata.roi = group;
cvunselect = false;
});
this.canvasObject.id = vthis.uuid();
this.canvasObject.drawtype = drawType;
// console.log(canvasObject); // console.log(canvasObject);
// canvasObject.index = getCanvasObjectIndex(); // canvasObject.index = getCanvasObjectIndex();
if (type !== "init") { if (type !== "init") {
canvas.add(canvasObject); //.setActiveObject(canvasObject) vthis.canvas.add(this.canvasObject); //.setActiveObject(canvasObject)
} }
drawingObject = canvasObject; drawingObject = this.canvasObject;
vthis.updateGroup(); vthis.updateGroup();
} }
}, },
}, Initfab() {
created() { var vthis = this;
console.log("xxxx", this.configxml.xml); var deleteIcon =
this.basconfig = this.oParse.parseXML(this.configxml.xml); "data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Ebene_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='595.275px' height='595.275px' viewBox='200 215 230 470' xml:space='preserve'%3E%3Ccircle style='fill:%23F44336;' cx='299.76' cy='439.067' r='218.516'/%3E%3Cg%3E%3Crect x='267.162' y='307.978' transform='matrix(0.7071 -0.7071 0.7071 0.7071 -222.6202 340.6915)' style='fill:white;' width='65.545' height='262.18'/%3E%3Crect x='266.988' y='308.153' transform='matrix(0.7071 0.7071 -0.7071 0.7071 398.3889 -83.3116)' style='fill:white;' width='65.544' height='262.179'/%3E%3C/g%3E%3C/svg%3E";
this.initConfig(this.basconfig); var img = document.createElement("img");
//设置图形显示拖拽点样式
}, // if (drawType !== "polygon") {
mounted() { // fabric.Object.prototype.controls.deleteControl = new fabric.Control({
document.getElementById("VionVideo").CapturePicture("D:\/vionpic/behavior.png") // x: 0.5,
setTimeout(() => { // y: -0.5,
this.caturl = "D:\/vionpic\/behavior.png" // offsetY: -10,
}, 1000); // offsetX: -30,
this.basedocument = $.parseXML(xml); // cursorStyle: "pointer",
// mouseUpHandler: deleteObject,
var vthis = this; // render: renderIcon,
// cornerSize: 16
// });
// }
function deleteObject(eventData, transform) {
var target = transform.target;
var canvas = target.canvas;
cvselect = false;
canvas.remove(target);
canvas.requestRenderAll();
}
var deleteIcon = function renderIcon(ctx, left, top, styleOverride, fabricObject) {
"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Ebene_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='595.275px' height='595.275px' viewBox='200 215 230 470' xml:space='preserve'%3E%3Ccircle style='fill:%23F44336;' cx='299.76' cy='439.067' r='218.516'/%3E%3Cg%3E%3Crect x='267.162' y='307.978' transform='matrix(0.7071 -0.7071 0.7071 0.7071 -222.6202 340.6915)' style='fill:white;' width='65.545' height='262.18'/%3E%3Crect x='266.988' y='308.153' transform='matrix(0.7071 0.7071 -0.7071 0.7071 398.3889 -83.3116)' style='fill:white;' width='65.544' height='262.179'/%3E%3C/g%3E%3C/svg%3E"; if (drawType == "polygon") {
var img = document.createElement("img"); return;
//设置图形显示拖拽点样式 }
var size = this.cornerSize;
ctx.save();
ctx.translate(left, top);
ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
ctx.drawImage(img, -size / 2, -size / 2, size, size);
ctx.restore();
}
img.src = deleteIcon;
window.zoom = window.zoom ? window.zoom : 1;
this.canvas = new fabric.Canvas("main", {});
this.canvas.selectionColor = "rgba(0,0,0,0)";
this.canvas.on("mouse:down", function(options) {
var xy = transformMouse(options.e.offsetX, options.e.offsetY);
mouseFrom.x = xy.x;
mouseFrom.y = xy.y;
// drawing();
if (drawType == "polygon") {
let e = options;
this.skipTargetFind = false;
try {
// 此段为判断是否闭合多边形，点击红点时闭合多边形
if (vthis.pointArray.length > 1) {
// e.target.id == this.pointArray[0].id 表示点击了初始红点
console.log(e.target);
if (e.target && e.target.id == vthis.pointArray[0].id) {
vthis.generatePolygon();
}
}
//未点击红点则继续作画
if (vthis.polygonMode) {
vthis.addPoint(e);
}
} catch (error) {
console.log(error);
}
}
if (!cvselect) {
doDrawing = true;
} else {
if (!cvunselect) {
cvselect = false;
}
}
});
this.canvas.on("mouse:up", function(options) {
var xy = transformMouse(options.e.offsetX, options.e.offsetY);
mouseTo.x = xy.x;
mouseTo.y = xy.y;
fabric.Object.prototype.controls.deleteControl = new fabric.Control({ drawingObject = null;
x: 0.5, moveCount = 1;
y: -0.5, doDrawing = false;
offsetY: -10, });
offsetX: -30, this.canvas.on("mouse:move", function(options) {
cursorStyle: "pointer", if (drawType == "polygon") {
mouseUpHandler: deleteObject, if (vthis.activeLine && vthis.activeLine.class == "line") {
render: renderIcon, var pointer = vthis.canvas.getPointer(options.e);
cornerSize: 16, vthis.activeLine.set({ x2: pointer.x, y2: pointer.y });
});
function deleteObject(eventData, transform) {
var target = transform.target;
var canvas = target.canvas;
cvselect = false;
canvas.remove(target);
canvas.requestRenderAll();
}
function renderIcon(ctx, left, top, styleOverride, fabricObject) { var points = vthis.activeShape.get("points");
var size = this.cornerSize; points[vthis.pointArray.length] = {
ctx.save(); x: pointer.x,
ctx.translate(left, top); y: pointer.y,
ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle)); zIndex: 1
ctx.drawImage(img, -size / 2, -size / 2, size, size); };
ctx.restore(); vthis.activeShape.set({
} points: points
img.src = deleteIcon; });
window.zoom = window.zoom ? window.zoom : 1; vthis.canvas.renderAll();
canvas = new fabric.Canvas("main", {}); }
canvas.on("mouse:down", function (options) { vthis.canvas.renderAll();
console.log(options); return false;
var xy = transformMouse(options.e.offsetX, options.e.offsetY);
mouseFrom.x = xy.x;
mouseFrom.y = xy.y;
if (!cvselect) {
doDrawing = true;
} else {
if (!cvunselect) {
cvselect = false;
} }
if (moveCount % 2 && !doDrawing) {
//减少绘制频率
return;
}
moveCount++;
var xy = transformMouse(options.e.offsetX, options.e.offsetY);
mouseTo.x = xy.x;
mouseTo.y = xy.y;
vthis.drawing("draw");
});
function transformMouse(mouseX, mouseY) {
return { x: mouseX / window.zoom, y: mouseY / window.zoom };
} }
});
canvas.on("mouse:up", function (options) {
var xy = transformMouse(options.e.offsetX, options.e.offsetY);
mouseTo.x = xy.x;
mouseTo.y = xy.y;
// drawing();
drawingObject = null;
moveCount = 1;
doDrawing = false;
});
canvas.on("mouse:move", function (options) {
if (moveCount % 2 && !doDrawing) {
//减少绘制频率
return;
}
moveCount++;
var xy = transformMouse(options.e.offsetX, options.e.offsetY);
mouseTo.x = xy.x;
mouseTo.y = xy.y;
drawType = "rectangle";
vthis.drawing("draw");
});
function transformMouse(mouseX, mouseY) {
return { x: mouseX / window.zoom, y: mouseY / window.zoom };
} }
}, },
created() {},
mounted() {
this.basedocument = $.parseXML(xml);
}
}; };
</script> </script>
...@@ -682,7 +1027,6 @@ button { ...@@ -682,7 +1027,6 @@ button {
top: 0; top: 0;
left: 0; left: 0;
border: 1px solid #ccc; border: 1px solid #ccc;
background: url("../../../../assets/img/home/bk.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
...@@ -705,6 +1049,7 @@ button { ...@@ -705,6 +1049,7 @@ button {
overflow-y: auto; overflow-y: auto;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
text-align: center;
} }
.configbox { .configbox {
height: 230px; height: 230px;
...@@ -726,11 +1071,12 @@ button { ...@@ -726,11 +1071,12 @@ button {
border-radius: 3px; border-radius: 3px;
} }
.listbox { .listbox {
width: 93px; width: 78px;
border: 1px solid #dcdfe6; border: 1px solid #dcdfe6;
margin: 0 10px 10px 0;
height: 35px; height: 35px;
margin: 0 0 0 5px;
border-radius: 5px; border-radius: 5px;
text-align: center;
} }
.checkgrop { .checkgrop {
width: 20px; width: 20px;
...@@ -739,6 +1085,9 @@ button { ...@@ -739,6 +1085,9 @@ button {
} }
.typetext { .typetext {
margin: 8px 0 0 0; margin: 8px 0 0 0;
text-align: center;
width: 100%;
cursor: pointer;
} }
.curlist { .curlist {
border: 1px solid #2d8cf0; border: 1px solid #2d8cf0;
...@@ -770,4 +1119,26 @@ button { ...@@ -770,4 +1119,26 @@ button {
text-align: center; text-align: center;
color: #2d8cf0; color: #2d8cf0;
} }
.tool {
padding: 5px;
height: 120px;
border: 1px solid #ccc;
margin-right: 5px;
}
.tool-t {
margin-bottom: 10px;
height: 20px;
width: 20px;
cursor: pointer;
}
.tool-t img {
height: 100%;
width: 100%;
}
.tool-t:nth-child(2) img {
width: 80%;
height: 80%;
}
</style> </style>
src/views/sceneManage/setting/areaconfig/SafeCanvas.vue
...@@ -826,7 +826,11 @@ ...@@ -826,7 +826,11 @@
} catch (error) { } catch (error) {
console.log(error) console.log(error)
} }
console.log("roisss",this.oParse.writeXML({
root: {
roilist: this.roiBody
}
}))
return this.oParse.writeXML({ return this.oParse.writeXML({
root: { root: {
roilist: this.roiBody roilist: this.roiBody
......
src/views/sceneManage/setting/areaconfig/bog.js
export const xml = `<?xml version="1.0" encoding="GBK"?><root><算法功能><行为分析_BG><人员脱岗><算法ID>RegionalInvasion</算法ID><告警门限值>60</告警门限值><告警间隔>5</告警间隔></人员脱岗><人员入侵><算法ID>AbsentDetection</算法ID><方向>1</方向></人员入侵><物品遗留><算法ID>GoodsMovedDeteion</算法ID><灵敏度>60</灵敏度><上报频率>3</上报频率><背景刷新时间>5</背景刷新时间></物品遗留></行为分析_BG></算法功能></root>`
\ No newline at end of file \ No newline at end of file
export const xml = `<?xml version="1.0" encoding="GBK"?><root><算法功能><行为分析_BG><人员脱岗><算法ID>AbsentDetection</算法ID><告警门限值>60</告警门限值><告警间隔>5</告警间隔></人员脱岗><人员入侵><算法ID>RegionalInvasion</算法ID><方向>1</方向></人员入侵><物品遗留><算法ID>GoodsMovedDeteion</算法ID><灵敏度>60</灵敏度><上报频率>3</上报频率><背景刷新时间>5</背景刷新时间></物品遗留><越线><算法ID>CrossLineDetection</算法ID></越线></行为分析_BG></算法功能></root>`
\ No newline at end of file \ No newline at end of file
src/views/sceneManage/setting/areaconfig/draw.js
class draw{ /**
constructor(cav){ * fabric绘图
this.cav = cav; * fab --fabric实例
* shape --绘制的图形
* type -- 绘制类型
*/
import { fabric } from "fabric"
class draw {
constructor(el, type) {
this.el = el;
this.type = type;
this.fab = null;
this.drawingObject = null; //当前绘制对象
this.mouseFrom = {} //绘制启点
this.mouseTo = {} //绘制移动点
this.doDrawing = false; //绘图状态
this.selectionColor = "rgba(0,0,0,0.05)";
this.color = red;
this.doDrawing = false;
this.deleteIcon =
"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Ebene_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='595.275px' height='595.275px' viewBox='200 215 230 470' xml:space='preserve'%3E%3Ccircle style='fill:%23F44336;' cx='299.76' cy='439.067' r='218.516'/%3E%3Cg%3E%3Crect x='267.162' y='307.978' transform='matrix(0.7071 -0.7071 0.7071 0.7071 -222.6202 340.6915)' style='fill:white;' width='65.545' height='262.18'/%3E%3Crect x='266.988' y='308.153' transform='matrix(0.7071 0.7071 -0.7071 0.7071 398.3889 -83.3116)' style='fill:white;' width='65.544' height='262.179'/%3E%3C/g%3E%3C/svg%3E";
this.img = document.createElement("img");
}
/**
* 初始化
*/
initFavCanvas() {
let { el } = this;
this.fab = new new fabric.Canvas(el, {})
}
/**设置绘图类型 */
setDrawType(type) {
this.type = type;
}
/**
* 初始化绘图动作
*/
initEvent() {
this.fab.on("mouse:down", this.mousedownEvent)
this.fab.on("mouse:move", this.mousemoveEvent);
this.fab.on("mouse:up", this.mouseupEvent);
}
/**
* 鼠标按下动作
*/
mousedownEvent(e) {
let { mouseFrom, doDrawing, drawing } = this;
//鼠标按下坐标
var xy = e.pointer || this.transformMouse(e.e.offsetX, e.e.offsetY);
mouseFrom.x = xy.x;
mouseFrom.y = xy.y;
doDrawing = true;
fabdrawing(e);
}
/**
* 鼠标移动
*/
mousemoveEvent(e) {
}
/**
* 鼠标抬起
*/
mouseupEvent(e) {
}
/**
* fabdrawing
* 绘制图形
*/
fabdrawing(e) {
let { fab, mouseFrom, mouseTo, type, drawingObject } = this;
if (drawingObject) {
fab.remove(drawingObject);
}
var canvasObject = null;
var left = mouseFrom.x,
top = mouseFrom.y;
switch (type) {
case "arrow":
canvasObject = this.drawArrow(e);
break;
case "rectangle":
canvasObject = this.drawReacangle(e);
break;
default:
break;
}
}
/**
* 坐标转换
*/
transformMouse(mouseX, mouseY) {
return { x: mouseX / 1, y: mouseY / 1 };
}
/**绘制箭头 */
drawArrow(e) {
let { mouseFrom, mouseTo } = this;
var x1 = mouseFrom.x,
x2 = mouseTo.x,
y1 = mouseFrom.y,
y2 = mouseTo.y;
var w = x2 - x1,
h = y2 - y1,
sh = Math.cos(Math.PI / 4) * 16;
var sin = h / Math.sqrt(Math.pow(w, 2) + Math.pow(h, 2));
var cos = w / Math.sqrt(Math.pow(w, 2) + Math.pow(h, 2));
var w1 = (16 * sin) / 4,
h1 = (16 * cos) / 4,
centerx = sh * cos,
centery = sh * sin;
/**
* centerx,centery 表示起始点，终点连线与箭头尖端等边三角形交点相对x，y
* w1 ，h1用于确定四个点
*/
var path = " M " + x1 + " " + y1;
path += " L " + (x2 - centerx + w1) + " " + (y2 - centery - h1);
path +=
" L " + (x2 - centerx + w1 * 2) + " " + (y2 - centery - h1 * 2);
path += " L " + x2 + " " + y2;
path +=
" L " + (x2 - centerx - w1 * 2) + " " + (y2 - centery + h1 * 2);
path += " L " + (x2 - centerx - w1) + " " + (y2 - centery + h1);
path += " Z";
return new fabric.Path(path, {
stroke: this.color,
fill: this.color,
strokeWidth: this.drawWidth
});
}
/**
*绘制方形
*/
drawReacangle(e){
let { mouseFrom, mouseTo } = this;
return new fabric.Rect({
left: left,
top: top,
width: mouseTo.x - left, //矩形的宽度
height: mouseTo.y - top, //矩形的高度
fill: "rgba(0,0,0,.3)", //填充的颜色
stroke: "orange", // 边框原色
strokeWidth: 1 // 边框大小
});
} }
} }
\ No newline at end of file \ No newline at end of file
src/views/sceneManage/setting/handleparam.vue
...@@ -71,7 +71,7 @@ ...@@ -71,7 +71,7 @@
</template> </template>
<script> <script>
import {config} from '../../../../public/js/config' // import {config} from '../../../../public/js/config'
export default { export default {
data() { data() {
return { return {
......
vue.config.js
...@@ -3,7 +3,7 @@ const vinfopath = "./public/js/version.json"; ...@@ -3,7 +3,7 @@ const vinfopath = "./public/js/version.json";
const BuildInfo = require("./version.js"); const BuildInfo = require("./version.js");
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer") const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
.BundleAnalyzerPlugin; .BundleAnalyzerPlugin;
const CopyWebpackPlugin = require("copy-webpack-plugin") //引入插件
module.exports = { module.exports = {
productionSourceMap: false, productionSourceMap: false,
lintOnSave: false, lintOnSave: false,
...@@ -18,6 +18,16 @@ module.exports = { ...@@ -18,6 +18,16 @@ module.exports = {
} }
} }
}, },
configureWebpack: {
plugins: [
new CopyWebpackPlugin([ //打包时执行拷贝
{
from: __dirname + "/public/config/js/config.js",
to: __dirname + "/dist/config/js/config.js"
}
])
]
},
chainWebpack: config => { chainWebpack: config => {
// config.entry('main').add('babel-polyfill') // config.entry('main').add('babel-polyfill')
if (process.env.use_analyzer) { if (process.env.use_analyzer) {
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!