Commit 598ed260 by 潘建波

bg区域绘制提交

1 parent 74fb58bd
No preview for this file type
......@@ -27,7 +27,7 @@
</noscript>
<div id="app"></div>
</body>
<script>
<script>
function connectCamera(szDeviceIp, szUser, szPass, camType) {
var i = 0;
camType = 'ball'
......
{
"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
{"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
......@@ -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 {
......
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;
......@@ -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)
});
}
}
......
......@@ -10,7 +10,7 @@
</template>
<script>
import {config} from '../../public/js/config'
// import {config} from '../../public/js/config'
export default {
data () {
return {
......
......@@ -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 });
......
......@@ -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",
......
......@@ -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",
......
......@@ -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");
......
......@@ -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() {
......
......@@ -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();
}
......
......@@ -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 {
......
......@@ -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();
......
......@@ -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);
......
......@@ -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
......
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
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
......@@ -71,7 +71,7 @@
</template>
<script>
import {config} from '../../../../public/js/config'
// import {config} from '../../../../public/js/config'
export default {
data() {
return {
......
......@@ -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!