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 @@
</noscript>
<div id="app"></div>
</body>
<script>
<script>
function connectCamera(szDeviceIp, szUser, szPass, camType) {
var i = 0;
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
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
{"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
src/api/apiList.js
......@@ -7,7 +7,7 @@ import device from "./device";
import resource from "./resource";
import codes from "./codes";
import ops from "./ops";
import {config} from '../../public/js/config.js'
// import {config} from '../../public/js/config.js'
import baseurl from './baseUrl'
let wsIP = "";
let flvIP = "";
......@@ -21,8 +21,8 @@ switch (process.env.NODE_ENV) {
break;
case "production":
wsIP = location.host; // 生产环境url
// flvIP = "192.168.9.245" + ":8080"
flvIP = location.hostname + ":38080"
flvIP = "192.168.9.245" + ":8080"
// flvIP = location.hostname + ":8080"
break;
}
export default {
......
src/api/baseUrl.js
let baseUrl = "/api"; // 本地代理
console.log(process.env.NODE_ENV);
switch (process.env.NODE_ENV) {
case "development":
// baseUrl = "http://192.168.9.234:20080"; // 测试环境url
baseUrl = window.config.https?"https://192.168.9.233:20070":"http://192.168.9.233:20080"; // 测试环境url
// baseUrl = "http://192.168.9.82:8080"; // 测试环境url
// baseUrl = "http://192.168.9.61:8086";
// baseUrl = 'http://vion-panda.51vip.biz:52510';
break;
case "pre":
baseUrl = "https://pre-server.feleti.cn"; // 预上线环境url
break;
case "production":
baseUrl = window.config.https?`https://${location.host}`:`http://${location.host}`; // 生产环境url
break;
}
import axios from "axios";
switch (process.env.NODE_ENV) {
case "development":
// baseUrl = "http://192.168.9.234:20080"; // 测试环境url
baseUrl = window.config.https?"https://192.168.9.233:20070":"http://192.168.9.173:20080"; // 测试环境url
// baseUrl = "http://192.168.9.82:8080"; // 测试环境url
// baseUrl = "http://192.168.9.61:8086";
// baseUrl = 'http://vion-panda.51vip.biz:52510';
break;
case "pre":
baseUrl = "https://pre-server.feleti.cn"; // 预上线环境url
break;
case "production":
baseUrl = window.config.https?`https://${location.host}`:`http://${location.host}`; // 生产环境url
break;
}
export default baseUrl;
src/api/log.js
......@@ -15,6 +15,7 @@ let servicename = {
const oplogs = function(data,service,action) {
//开启日志模式才进行日志收集
if(window.config.logstatus) {
debugger
let username = localStorage.getItem('uname');
let baseData = {
"dt": moment().locale('zh-cn'),
......@@ -29,7 +30,7 @@ const oplogs = function(data,service,action) {
"serv_type":service
}
api.post(oplogurl,baseData).then(res =>{
console.log(res)
});
}
}
......
src/components/video.vue
......@@ -10,7 +10,7 @@
</template>
<script>
import {config} from '../../public/js/config'
// import {config} from '../../public/js/config'
export default {
data () {
return {
......
src/main.js
......@@ -24,8 +24,6 @@ Vue.prototype.$buildCode = buildCode;
Vue.prototype.oParse = new XML.ObjTree();
Vue.prototype.axios = axios;
// import VueParticles from "vue-particles";
// Vue.use(VueParticles);
Vue.use(api);
Vue.use(log);
Vue.use(ElementUI, { size: "small", zIndex: 3000 });
......
src/views/Layout/index.vue
......@@ -55,7 +55,7 @@
<script>
import types from "../../store/types.js";
import {config} from "../../../public/js/config";
// import {config} from "../../../public/js/config";
import menus from "./menu";
export default {
name: "x",
......
src/views/Login.vue
......@@ -73,7 +73,7 @@
<script>
let particlesConfig = require("../assets/js/particles.json");
let versioninfo = require("../../public/js/version");
import { config } from "../../public/js/config";
// import { config } from "../../public/js/config";
import types from "../store/types.js";
export default {
name: "Login",
......
src/views/Resetpassword.vue
......@@ -47,9 +47,9 @@ export default {
callback(new Error("新旧密码不能重复！"));
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)) {
callback(new Error("您的密码复杂度太低（密码中必须包含写字母、数字、特殊字符），请及时修改密码！"))
callback(new Error("您的密码复杂度太低（密码中必须包含大写和小写字母、数字、特殊字符长度大于8位），请及时修改密码！"))
}
if (this.ruleForm.checkPass !== "") {
this.$refs.ruleForm.validateField("checkPass");
......
src/views/deviceshow/index.vue
......@@ -173,7 +173,7 @@
</template>
<script>
import mixin from "../../assets/js/mixin";
import {config} from "../../../public/js/config"
// import {config} from "../../../public/js/config"
export default {
mixins: [mixin],
data() {
......
src/views/ops/user_manage.vue
......@@ -188,16 +188,17 @@ export default {
}
};
var checkUser = (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入用户名"));
var userReg = /^[a-zA-Z0-9]{6,32}/
if (!userReg.test(value)) {
callback(new Error("用户名长度为6到32个字符数字字母组合"));
} else {
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)) {
callback(new Error("您的密码复杂度太低（密码中必须包含写字母、数字、特殊字符），请及时修改密码！"))
callback(new Error("您的密码复杂度太低（密码中必须包含大写和小写字母、数字、特殊字符长度大于8位），请及时修改密码！"))
} else {
callback();
}
......
src/views/sceneManage/eventTab.vue
......@@ -48,7 +48,7 @@ import IllegalAlarm from "./eventData/illegalEvent.vue";
import Eventalarm from "./eventData/eventAlarm.vue";
import EventDetail from "./eventDetail.vue";
import { mapState } from "vuex";
import {config} from '../../../public/js/config.js'
// import {config} from '../../../public/js/config.js'
export default {
data() {
return {
......
src/views/sceneManage/index.vue
......@@ -204,7 +204,7 @@ export default {
}
if(this.subtaskdata.task_algo_type == '12') {
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)
setTimeout(() => {
this.$refs.videoplay.videoPlay();
......
src/views/sceneManage/setting/area.vue
......@@ -3,36 +3,35 @@
<el-dialog
title="区域设置"
:visible.sync="dialogVisible"
width="1100px"
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>
<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=""
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>
: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">
......@@ -49,7 +48,7 @@ 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"
import { roi } from "./areaconfig/roi_1";
export default {
data() {
return {
......@@ -62,9 +61,9 @@ export default {
XMLStr: "",
taskData: "",
bgUrl: "",
baseUrl:"",
configxml:"",
fileList:[]
baseUrl: "",
configxml: "",
fileList: []
};
},
components: {
......@@ -84,78 +83,84 @@ export default {
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);
});
//获取视频截图 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(data.rois[0].roi, data.config);
// _this.$refs.canvas.configInit(roi);
}
}, 300);
}, 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);
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')
down() {
this.downloadurl(this.baseUrl, "scenes_pic");
},
downloadurl(content, fileName) { //下载base64图片
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 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 aLink = document.createElement("a");
let blob = base64ToBlob(content); //new Blob([content]);
let evt = document.createEvent("HTMLEvents");
evt.initEvent("click", true, true); //initEvent 不加后两个参数在FF下会报错 事件类型，是否冒泡，是否阻止浏览器的默认行为
......@@ -194,7 +199,7 @@ export default {
return;
}
let XMLStr = this.$refs.canvas.save();
console.log("xxx",XMLStr);
console.log("xxx", XMLStr);
if (this.type == "1" && (XMLStr === "dir" || XMLStr === "in")) {
this.$message({
type: "warning",
......@@ -202,9 +207,9 @@ export default {
});
return;
}
if(this.type == '12') {
if (this.type == "12") {
let XMLStr = this.$refs.canvas.paramsData;
console.log("12",XMLStr)
console.log("12", XMLStr);
this.$parent.submit(XMLStr, "config");
}
this.$parent.submit(XMLStr, "roi", this.taskData);
......
src/views/sceneManage/setting/areaconfig/Behavior.vue
<template>
<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="pic" id="pic" :style="{'background':caturl}">
<div class="pic" id="pic">
<canvas id="main" width="700" height="500"></canvas>
</div>
</div>
......@@ -9,26 +20,21 @@
<div class="be-header">
<el-radio-group v-model="checkval" size="mini">
<el-radio-button label="shanghai">行为事件</el-radio-button>
<el-radio-button label="北京" name="shangha" disabled
>交通事件</el-radio-button
>
<el-radio-button label="广州" name="shnghai" disabled
>安防事件</el-radio-button
>
<el-radio-button label="北京" name="shangha" disabled>交通事件</el-radio-button>
<el-radio-button label="广州" name="shnghai" disabled>安防事件</el-radio-button>
</el-radio-group>
</div>
<div class="be-content">
<div class="typebox">
<div class="checkbox" v-for="(item, index) in basconfig" :key="index">
<div
:class="{ listbox: true, curlist: cindex == index }"
@click="seltype(item, index)"
>
<el-checkbox-group v-model="checkboxGroup1" class="checkgrop">
<el-checkbox :key="item.name" :label="item.name">{{
<div :class="{ listbox: true, curlist: cindex == index }" @click="seltype(item, index)">
<!-- <el-checkbox-group v-model="checktype" 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>
</div>
</div>
......@@ -37,12 +43,12 @@
<div class="areabox">
<div class="area-header">检测规则</div>
<div
:class="{ 'area-item': true, activeare: item.id == curuuid }"
:class="{ 'area-item': true, 'activeare1': item.id == curuuid }"
v-for="(item, index) in groupList"
:key="index"
@click="changeKlass(item)"
>
区域{{ index + 1 }}
>区域{{ index + 1 }}
<!-- <span class="el-icon-circle-close" @click="deleteShape(item)"></span> -->
</div>
<div class="bottombtn">
<!-- <el-button @click="savechange" type="primary" size="mini" style="width:90px">保存</el-button> -->
......@@ -51,31 +57,27 @@
type="primary"
size="mini"
style="width: 90px"
>保存</el-button> -->
>保存</el-button>-->
</div>
</div>
<div class="setbox">
<div
v-for="(val, key, index) in citem.config"
:key="index"
class="setboxitem"
>
<div v-if="citem.config">
<div v-for="(val, key, index) in citem.config" :key="index" class="setboxitem">
<span class="configlabel">{{ key }}:</span>
<span class=""
><el-input v-model="citem.config[key]"></el-input
></span>
<span class>
<el-input v-model="citem.config[key]"></el-input>
</span>
</div>
</div>
</div>
</div>
<div class="pusbox">
<div class="label">推送地址:</div>
<div>
<el-input
v-model="pushurl"
placeholder="推送地址"
width="100"
></el-input>
<el-input v-model="pushurl" placeholder="推送地址" width="100"></el-input>
</div>
<div style="color;#ccc">方向：1进入区域,2出去区域,3双向警告</div>
<div><el-button size="mini" @click="clearcanvas">清空</el-button></div>
</div>
</div>
</div>
......@@ -85,7 +87,6 @@
import { fabric } from "fabric";
import { select } from "svg.js";
import { xml } from "./bog.js";
var canvas = null;
var drawingObject = null; //当前绘制对象
var mouseFrom = {},
mouseTo = {},
......@@ -107,89 +108,198 @@ export default {
return {
tabPosition: "top",
checkval: "shanghai",
checkboxGroup1: ["人员脱岗"],
checktype: [],
groupList: [],
curAlgoType: "xsdsfd",
basconfig: [],
curtool: "line",
baselist: {},
cindex: 0,
citem: null,
citem: { config: null },
curuuid: null,
pushurl: "",
canvasObject: null,
roiBody: {},
basedocument: null,
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: {
/**
* 工具选择
*
*/
changetool(type) {
if (type == "polygon") {
this.drawPolygon();
}
drawType = type;
},
/**
* 初始化区域
*/
configInit(basexml, confxml) {
drawType = "rectangle";
let obj = this.oParse.parseXML(basexml).roi;
for (key in obj) {
configInit(roiXml, confxml) {
debugger;
var picuri = new Date().getTime();
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 = [];
if (obj[key].region_count > 0) {
let polygon = obj[key].polygon;
if (obj[key].region_count == 1) {
let points = polygon.point;
mouseFrom.x = points[0].x * 700;
mouseFrom.y = points[0].y * 500;
mouseTo.x = points[2].x * 700;
mouseTo.y = points[2].y * 500;
this.drawing("init");
klassarr.push(drawingObject);
} else {
for (let i = 0; i < polygon.length; i++) {
let points = polygon[i].point;
mouseFrom.x = points[0].x * 700;
mouseFrom.y = points[0].y * 500;
mouseTo.x = points[2].x * 700;
mouseTo.y = points[2].y * 500;
if (roiobj[key].region_count > 0) {
var polygon = roiobj[key].polygon;
if (Object.prototype.toString.call(polygon) === "[object Array]") {
polygon.map(ele => {
if (ele.polygon_type == "rect") {
drawType = "rect";
let points = ele.point;
this.initRect(points);
} else if (ele.polygon_type == "line") {
drawType = ele.polygon_type;
this.intline(points)
this.drawing("init");
} else if (ele.polygon_type == "polygon") {
drawType = ele.polygon_type;
let points = ele.point;
this.intPolygon(points)
this.drawing("init");
}
this.drawing("init");
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);
}
}
obj[key].rois = klassarr;
for (let k = 0; k < this.basconfig.length; k++) {
if (this.basconfig[k].config.算法ID === key) {
this.basconfig[k].roi = klassarr;
// this.basconfig[k].config = confobj['root']
break;
roiobj[key].rois = klassarr;
for (let k = 0; k < this.basconfig.length; k++) {
if (this.basconfig[k].config.算法ID === key) {
this.basconfig[k].roi = klassarr;
// this.basconfig[k].config = confobj['root']
break;
}
}
}
}
this.basconfig[0].roi.map((ele) => {
this.fabricObjInit(ele);
});
if (this.basconfig.length > 0) {
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) {
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);
},
getObjects(klass) {
//获取所有的列表对象
var group = canvas.getObjects();
var group = this.canvas.getObjects();
},
setAreaconfig() {
var group = canvas.getObjects();
var group = this.canvas.getObjects();
this.groupList = group;
},
//设置活动对象
changeKlass(klass) {
canvas.setActiveObject(klass);
canvas.requestRenderAll();
console.log(klass)
this.curklass = klass;
this.canvas.setActiveObject(klass);
this.canvas.requestRenderAll();
},
updateGroup() {
var group = canvas.getObjects();
var group = this.canvas.getObjects();
this.groupList = group;
},
......@@ -197,23 +307,24 @@ export default {
* tab切换保存之前绘制的数据
*/
changetype(data, index) {
var group = canvas.getObjects();
var group = this.canvas.getObjects();
var confdata = this.basconfig[this.cindex];
confdata.roi = group;
canvas.clear();
this.canvas.clear();
console.log(this.basconfig);
},
/**
* 回显对象
*/
fabricObjInit(klass) {
canvas.add(klass);
this.canvas.add(klass);
},
/**
* 根据选择模型定位规则
*/
selectklass(klass) {
this.curuuid = klass.id;
this.curklass = klass;
},
/**
* 解构算法xml
......@@ -241,7 +352,7 @@ export default {
id: key,
name: key,
roi: null,
config: obj[key],
config: obj[key]
};
arr.push(buildobj);
} else {
......@@ -279,11 +390,11 @@ export default {
//博关算法监测区域
let confArr = [],
parentname;
this.basconfig.map((ele) => {
this.basconfig.map(ele => {
if (ele.config["算法ID"]) {
let idname = ele.config["算法ID"];
let ROI = {
idname: "",
idname: ""
};
console.log(this.buildRoI(ele));
this.roiBody[idname] = this.buildRoI(ele);
......@@ -298,58 +409,112 @@ export default {
confArr.push(childconfig);
});
this.buildParam(parentname, confArr);
this.clear();
return this.oParse.writeXML({ roi: this.roiBody });
},
clear() {
canvas.clear();
this.basconfig = [];
if (this.canvas !== undefined) {
this.canvas.clear();
}
},
/**
* 构建ROI
*/
buildRoI(klass) {
debugger
let bg_arr = [],
pol;
let idname = klass.config["算法ID"];
if (klass.roi != null && klass.roi != "") {
klass.roi.map((ele) => {
let lines = ele.aCoords;
let point = [
{
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: "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),
},
];
let obj = {
polygon_point_count: 4,
point: point,
pol,
idname = klass.config["算法ID"];
try {
if (klass.roi != null && klass.roi != "") {
klass.roi.map((ele, k) => {
if (ele.drawtype == "rect") {
let lines = ele.aCoords;
let point = [
{
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: "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)
}
];
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);
});
pol = {
region_count: klass.roi.length,
polygon: bg_arr,
};
} else {
pol = {
region_count: 0,
};
}
} else {
pol = {
region_count: 0
};
}
console.log(pol);
} catch (error) {}
return pol;
},
/**
......@@ -358,13 +523,13 @@ export default {
buildParam(parentname, confArr) {
let paramsconfig = {
root: {
算法功能: {},
},
算法功能: {}
}
};
let pobj = {
结果推送地址: this.pushurl,
结果推送地址: this.pushurl
};
confArr.map((ele) => {
confArr.map(ele => {
for (key in ele) {
pobj[key] = ele[key];
}
......@@ -372,39 +537,195 @@ export default {
paramsconfig.root.算法功能[parentname] = pobj;
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) {
var vthis = this;
if (drawingObject && type == "draw") {
canvas.remove(drawingObject);
this.canvas.remove(drawingObject);
}
var canvasObject = null;
switch (drawType) {
case "arrow": //箭头
canvasObject = new fabric.Path(
this.canvasObject = new fabric.Path(
drawArrow(mouseFrom.x, mouseFrom.y, mouseTo.x, mouseTo.y, 30, 30),
{
stroke: color,
fill: "rgba(255,255,255,0)",
strokeWidth: drawWidth,
strokeWidth: drawWidth
}
);
break;
case "line": //直线
canvasObject = new fabric.Line(
this.canvasObject = new fabric.Line(
[mouseFrom.x, mouseFrom.y, mouseTo.x, mouseTo.y],
{
stroke: color,
strokeWidth: drawWidth,
strokeWidth: 2,
class: "line",
originX: "center",
originY: "center",
selectable: false,
hasBorders: false,
hasControls: false,
evented: false,
objectCaching: false,
stroke: color
}
);
break;
case "dottedline": //虚线
canvasObject = new fabric.Line(
this.canvasObject = new fabric.Line(
[mouseFrom.x, mouseFrom.y, mouseTo.x, mouseTo.y],
{
strokeDashArray: [3, 1],
stroke: color,
strokeWidth: drawWidth,
strokeWidth: drawWidth
}
);
break;
......@@ -416,13 +737,13 @@ export default {
(mouseTo.x - left) * (mouseTo.x - left) +
(mouseTo.y - top) * (mouseTo.y - top)
) / 2;
canvasObject = new fabric.Circle({
this.canvasObject = new fabric.Circle({
left: left,
top: top,
stroke: color,
fill: "rgba(255, 255, 255, 0)",
radius: radius,
strokeWidth: drawWidth,
strokeWidth: drawWidth
});
break;
case "ellipse": //椭圆
......@@ -435,7 +756,7 @@ export default {
(mouseTo.x - left) * (mouseTo.x - left) +
(mouseTo.y - top) * (mouseTo.y - top)
) / 2;
canvasObject = new fabric.Ellipse({
this.canvasObject = new fabric.Ellipse({
left: left,
top: top,
stroke: color,
......@@ -444,71 +765,47 @@ export default {
originY: "center",
rx: Math.abs(left - mouseTo.x),
ry: Math.abs(top - mouseTo.y),
strokeWidth: drawWidth,
strokeWidth: drawWidth
});
break;
case "square": //TODO:正方形（后期完善）
break;
case "rectangle": //长方形
case "rect": //长方形
// eslint-disable-next-line no-redeclare
var left = mouseFrom.x,
top = mouseFrom.y;
canvasObject = new fabric.Rect({
this.canvasObject = 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, // 边框大小
});
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;
strokeWidth: 1 // 边框大小
});
break;
case "rightangle": //直角三角形
var path =
"M " +
mouseFrom.x +
" " +
mouseFrom.y +
" L " +
mouseFrom.x +
" " +
mouseTo.y +
" L " +
mouseTo.x +
" " +
mouseTo.y +
" z";
canvasObject = new fabric.Path(path, {
left: left,
top: top,
case "polygon": //路径绘制
var left = mouseFrom.x,
top = mouseFrom.y,
path = vthis.path;
this.canvasObject = new fabric.Polygon(vthis.polygonpoint, {
hasControls: false,
stroke: color,
strokeWidth: drawWidth,
fill: "rgba(255, 255, 255, 0)",
fill: "rgba(255, 255, 255, 0)"
});
break;
case "equilateral": //等边三角形
var height = mouseTo.y - mouseFrom.y;
canvasObject = new fabric.Triangle({
this.canvasObject = new fabric.Triangle({
top: mouseFrom.y,
left: mouseFrom.x,
width: Math.sqrt(Math.pow(height, 2) + Math.pow(height / 2.0, 2)),
height: height,
stroke: color,
strokeWidth: drawWidth,
fill: "rgba(255,255,255,0)",
fill: "rgba(255,255,255,0)"
});
break;
case "isosceles":
......@@ -521,9 +818,9 @@ export default {
fontSize: 18,
borderColor: "#2c2c2c",
fill: color,
hasControls: false,
hasControls: false
});
canvas.add(textbox);
this.canvas.add(textbox);
textbox.enterEditing();
textbox.hiddenTextarea.focus();
break;
......@@ -533,105 +830,153 @@ export default {
break;
}
// canvasObject.index = getCanvasObjectIndex();
if (canvasObject) {
canvasObject.id = vthis.uuid();
if (this.canvasObject) {
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);
// canvasObject.index = getCanvasObjectIndex();
if (type !== "init") {
canvas.add(canvasObject); //.setActiveObject(canvasObject)
vthis.canvas.add(this.canvasObject); //.setActiveObject(canvasObject)
}
drawingObject = canvasObject;
drawingObject = this.canvasObject;
vthis.updateGroup();
}
},
},
created() {
console.log("xxxx", this.configxml.xml);
this.basconfig = this.oParse.parseXML(this.configxml.xml);
this.initConfig(this.basconfig);
},
mounted() {
document.getElementById("VionVideo").CapturePicture("D:\/vionpic/behavior.png")
setTimeout(() => {
this.caturl = "D:\/vionpic\/behavior.png"
}, 1000);
this.basedocument = $.parseXML(xml);
var vthis = this;
Initfab() {
var vthis = this;
var 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";
var img = document.createElement("img");
//设置图形显示拖拽点样式
// if (drawType !== "polygon") {
// fabric.Object.prototype.controls.deleteControl = new fabric.Control({
// x: 0.5,
// y: -0.5,
// offsetY: -10,
// offsetX: -30,
// cursorStyle: "pointer",
// mouseUpHandler: deleteObject,
// 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 =
"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";
var img = document.createElement("img");
//设置图形显示拖拽点样式
function renderIcon(ctx, left, top, styleOverride, fabricObject) {
if (drawType == "polygon") {
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({
x: 0.5,
y: -0.5,
offsetY: -10,
offsetX: -30,
cursorStyle: "pointer",
mouseUpHandler: deleteObject,
render: renderIcon,
cornerSize: 16,
});
function deleteObject(eventData, transform) {
var target = transform.target;
var canvas = target.canvas;
cvselect = false;
canvas.remove(target);
canvas.requestRenderAll();
}
drawingObject = null;
moveCount = 1;
doDrawing = false;
});
this.canvas.on("mouse:move", function(options) {
if (drawType == "polygon") {
if (vthis.activeLine && vthis.activeLine.class == "line") {
var pointer = vthis.canvas.getPointer(options.e);
vthis.activeLine.set({ x2: pointer.x, y2: pointer.y });
function renderIcon(ctx, left, top, styleOverride, fabricObject) {
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;
canvas = new fabric.Canvas("main", {});
canvas.on("mouse:down", function (options) {
console.log(options);
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;
var points = vthis.activeShape.get("points");
points[vthis.pointArray.length] = {
x: pointer.x,
y: pointer.y,
zIndex: 1
};
vthis.activeShape.set({
points: points
});
vthis.canvas.renderAll();
}
vthis.canvas.renderAll();
return 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>
......@@ -682,7 +1027,6 @@ button {
top: 0;
left: 0;
border: 1px solid #ccc;
background: url("../../../../assets/img/home/bk.png") no-repeat;
background-size: 100% 100%;
}
......@@ -705,6 +1049,7 @@ button {
overflow-y: auto;
display: flex;
flex-direction: row;
text-align: center;
}
.configbox {
height: 230px;
......@@ -726,11 +1071,12 @@ button {
border-radius: 3px;
}
.listbox {
width: 93px;
width: 78px;
border: 1px solid #dcdfe6;
margin: 0 10px 10px 0;
height: 35px;
margin: 0 0 0 5px;
border-radius: 5px;
text-align: center;
}
.checkgrop {
width: 20px;
......@@ -739,6 +1085,9 @@ button {
}
.typetext {
margin: 8px 0 0 0;
text-align: center;
width: 100%;
cursor: pointer;
}
.curlist {
border: 1px solid #2d8cf0;
......@@ -770,4 +1119,26 @@ button {
text-align: center;
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>
src/views/sceneManage/setting/areaconfig/SafeCanvas.vue
......@@ -826,7 +826,11 @@
} catch (error) {
console.log(error)
}
console.log("roisss",this.oParse.writeXML({
root: {
roilist: this.roiBody
}
}))
return this.oParse.writeXML({
root: {
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
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
src/views/sceneManage/setting/areaconfig/draw.js
class draw{
constructor(cav){
this.cav = cav;
/**
* fabric绘图
* 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
src/views/sceneManage/setting/handleparam.vue
......@@ -71,7 +71,7 @@
</template>
<script>
import {config} from '../../../../public/js/config'
// import {config} from '../../../../public/js/config'
export default {
data() {
return {
......
vue.config.js
......@@ -3,7 +3,7 @@ const vinfopath = "./public/js/version.json";
const BuildInfo = require("./version.js");
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
.BundleAnalyzerPlugin;
const CopyWebpackPlugin = require("copy-webpack-plugin") //引入插件
module.exports = {
productionSourceMap: false,
lintOnSave: false,
......@@ -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 => {
// config.entry('main').add('babel-polyfill')
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!