Commit aabcea70 by 夏新然

展示页面

2 parents a8255247 f499816d
Showing 109 changed files with 3023 additions and 45 deletions
...@@ -37,6 +37,8 @@ ...@@ -37,6 +37,8 @@
"node-sass": "^4.12.0", "node-sass": "^4.12.0",
"prettier": "^1.18.2", "prettier": "^1.18.2",
"sass-loader": "^8.0.0", "sass-loader": "^8.0.0",
"stylus": "^0.54.7",
"stylus-loader": "^3.0.2",
"vue-template-compiler": "^2.6.10" "vue-template-compiler": "^2.6.10"
}, },
"eslintConfig": { "eslintConfig": {
......
This diff could not be displayed because it is too large.
input {
width: 100% !important;
}
.el-pagination__editor {
width: 30px !important;
/* padding-top: 0 !important; */
}
\ No newline at end of file \ No newline at end of file
.el-input__inner {
background: #393E52;
border: none !important;
color: #fff !important;
font-size: 15px;
}
.el-icon-date {
/*display: none !important;*/
}
.el-time-spinner__item {
line-height: 16px !important;
}
.el-time-spinner__item:hover:not(.disabled):not(.active) {
background: transparent !important;
}
.el-pagination__editor {
height: 30px !important;
vertical-align: middle !important;
}
.detail-modal .el-dialog--small {
width: 56% !important;
}
\ No newline at end of file \ No newline at end of file
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1484031753529'); /* IE9*/
src: url('iconfont.eot?t=1484031753529#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff?t=1484031753529') format('woff'), /* chrome, firefox */
url('iconfont.ttf?t=1484031753529') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('iconfont.svg?t=1484031753529#iconfont') format('svg'); /* iOS 4.1- */
}
.icon-liebiaoshitu:before { content: "\e610"; }
.icon-logistics:before { content: "\e620"; }
.icon-productshipping:before { content: "\e621"; }
.icon-producttransport:before { content: "\e622"; }
.icon-product:before { content: "\e623"; }
.icon-schedule:before { content: "\e624"; }
.icon-anonymous-iconfont:before { content: "\e61a"; }
.icon-daifukuan:before { content: "\e625"; }
.icon-iconfont55:before { content: "\e62a"; }
.icon-jikediancanicon13:before { content: "\e60f"; }
.icon-jinggaojingshi:before { content: "\e618"; }
.icon-icon11:before { content: "\e636"; }
.icon-gengduoxuanzhong:before { content: "\e63d"; }
.icon-dianhua:before { content: "\e634"; }
.icon-history:before { content: "\e6f3"; }
.icon-link:before { content: "\e6f7"; }
.icon-qrcode:before { content: "\e639"; }
.icon-fenxiang01:before { content: "\e648"; }
.icon-assessedbadge:before { content: "\e70a"; }
.icon-bad:before { content: "\e716"; }
.icon-good:before { content: "\e717"; }
.icon-shouji:before { content: "\e635"; }
.icon-xiugai:before { content: "\e63f"; }
.icon-gouwuche:before { content: "\e60a"; }
.icon-dizhi:before { content: "\e609"; }
.icon-erweima:before { content: "\e63a"; }
.icon-liebiao1:before { content: "\e62f"; }
.icon-jifenshangcheng:before { content: "\e614"; }
.icon-huodong:before { content: "\e62d"; }
.icon-tupian01:before { content: "\e607"; }
.icon-icon:before { content: "\e638"; }
.icon-fanhuidingbu:before { content: "\e627"; }
.icon-kefu:before { content: "\e628"; }
.icon-tuihuanhuo:before { content: "\e626"; }
.icon-fenlei:before { content: "\e630"; }
.icon-xiaoxi:before { content: "\e602"; }
.icon-tishi:before { content: "\e604"; }
.icon-weixin:before { content: "\e61c"; }
.icon-jian:before { content: "\e712"; }
.icon-wenjianjia:before { content: "\e63b"; }
.icon-huiyuan:before { content: "\e61d"; }
.icon-jia:before { content: "\e66e"; }
.icon-wenjianjia1:before { content: "\e684"; }
.icon-lajitong:before { content: "\e63e"; }
.icon-xuanzhuan:before { content: "\e655"; }
.icon-yuan:before { content: "\e63c"; }
.icon-dingdan:before { content: "\e631"; }
.icon-jiantouzuo:before { content: "\e613"; }
.icon-dagou:before { content: "\e637"; }
.icon-xiaoxi1:before { content: "\e605"; }
.icon-zhiding:before { content: "\e629"; }
.icon-sousuo:before { content: "\e603"; }
.icon-listquery:before { content: "\e632"; }
.icon-shoucang:before { content: "\e612"; }
.icon-email:before { content: "\e608"; }
.icon-daikuanyue:before { content: "\e60e"; }
.icon-dizhi1:before { content: "\e633"; }
.icon-shoucang1:before { content: "\e617"; }
.icon-yuyue:before { content: "\e61b"; }
.icon-renzheng:before { content: "\e61e"; }
.icon-qq:before { content: "\e61f"; }
.icon-changjianwenti:before { content: "\e606"; }
.icon-shenhe-copy:before { content: "\e62b"; }
.icon-shezhimianban:before { content: "\e62c"; }
.icon-view2:before { content: "\e60b"; }
.icon-view:before { content: "\e60c"; }
.icon-like:before { content: "\e615"; }
.icon-likefill:before { content: "\e616"; }
.icon-xiaoxi2:before { content: "\e619"; }
.icon-hot:before { content: "\e756"; }
.icon-yqfxiugai:before { content: "\e6ab"; }
.icon-yuan1:before { content: "\e6a0"; }
.icon-tongzhi:before { content: "\e60d"; }
.icon-xiugaimima:before { content: "\e611"; }
.icon-rotateleft:before { content: "\e601"; }
.icon--duoxuan-weixuan:before { content: "\e68f"; }
.icon--duoxuan-yixuan:before { content: "\e690"; }
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.info-wrap {
top: 0;
right: 0;
bottom: 0;
left: 0;
position: fixed;
overflow: auto;
margin: 0;
/* z-index: 99992; */
z-index: 99992;
}
.info-dialog {
position: absolute;
left: 50%;
transform: translateX(-50%);
border-radius: 2px;
box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
box-sizing: border-box;
margin-bottom: 50px;
top: 30%;
background: url(../../img/bgc.png) no-repeat;
border: 2px solid #2E5192;
border-radius: 5px;
}
.info-dialog--tiny {
width: 30%;
}
.info-dialog--small {
width: 60%;
}
.info-dialog--large {
width: 90%;
}
/* 弹窗头部 */
.info-head {
padding: 20px 20px 0;
}
.info-head:before,
.info-head:after {
display: table;
content: "";
}
.info-head:after {
clear: both;
}
.info-title {
line-height: 1;
font-size: 16px;
font-weight: 700;
color: #fff;
}
.info-headerbtn {
float: right;
background: transparent;
border: none;
outline: none;
padding: 0;
cursor: pointer;
font-size: 16px;
}
.info-close {
font-style: normal;
line-height: 1;
color: #bfcbd9;
text-transform: none;
display: inline-block;
}
.info-headerbtn:focus .info-close,
.info-headerbtn:hover .info-close {
color: #20a0ff;
}
.info-close:before {
content: "×";
display: inline-block;
transform: scale(2);
width: 16px;
height: 16px;
}
/* 弹窗主体部 */
.info-body {
padding: 30px 20px;
color: #fff;
font-size: 14px;
}
/* 弹窗尾部 */
.info-footer {
padding: 10px 20px 15px;
text-align: right;
box-sizing: border-box;
}
.info-footer button:first-child {
margin-right: 10px;
}
.info-button+.info-button {
margin-left: 10px;
}
.info-footer .info-button {
margin: 0;
padding: 8px 16px;
border: none;
outline: none;
background-color: #2194ef;
border-radius: 5px;
color: #fff;
font-size: 14px;
text-align: center;
box-sizing: border-box;
cursor: pointer;
}
/* 遮罩层 */
.info-mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: .5;
background: #000;
/* z-index: 99991; */
z-index: 99991;
}
\ No newline at end of file \ No newline at end of file
...@@ -6,12 +6,16 @@ ...@@ -6,12 +6,16 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>fanxing</title> <title>fanxing</title>
<script src="<%= BASE_URL %>js/kinetic-v5.1.0.min.js"></script>
<script src="<%= BASE_URL %>js/ObjTree.js"></script>
<script src="<%= BASE_URL %>js/jquery.min.js"></script>
</head> </head>
<body> <body>
<noscript> <noscript>
<strong>We're sorry but fanxing doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> <strong></strong>
</noscript> </noscript>
<div id="app"></div> <div id="app"></div>
<!-- built files will be auto injected --> <!-- built files will be auto injected -->
</body> </body>
</html> </html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>提示信息</title>
<link rel="stylesheet" href="css/iframe/common.css">
<style>
.info-footer {
display: none;
}
</style>
</head>
<body>
<div class="info-wrap">
<div class="info-dialog info-dialog--tiny">
<div class="info-head">
<span class="info-title">提示</span>
<button class="info-headerbtn" aria-label="Close">
<i class="info-close"></i>
</button>
</div>
<div class="info-body">
<span></span>
</div>
<div class="info-footer">
<button class="info-button info-close-button">
<span>关 闭</span>
</button>
</div>
</div>
</div>
<div class="info-mask"></div>
<script>
// window.onload = function() {
var globalVm = ''; // 父级组件实例
function changeText(data) {
var str = "";
str = typeof data === "string" ? data : JSON.stringify(data);
document.getElementsByClassName('info-body')[0].childNodes[1].innerText = str;
document.getElementsByClassName('info-footer')[0].style.display = "block";
// console.log('parent window:', parent);
}
document.getElementsByClassName('info-headerbtn')[0].addEventListener('click', function(e) {
var e = e || window.event;
e.stopPropagation();
e.preventDefault();
try {
globalVm.hide();
} catch (err) {
console.log('弹窗组件关闭的异常:', err.message)
console.dir('父级 global:', parent)
globalVm = parent.infoDialogVm;
globalVm.hide();
}
// globalVm.showInfo('关闭弹窗', false);
});
document.getElementsByClassName('info-close-button')[0].addEventListener('click', function(e) {
var e = e || window.event;
e.stopPropagation();
e.preventDefault();
try {
globalVm.hide();
} catch (err) {
console.log('弹窗组件关闭的异常:', err.message)
console.dir('父级 global:', parent)
globalVm = parent.infoDialogVm;
globalVm.hide();
}
});
// }
</script>
</body>
</html>
\ No newline at end of file \ No newline at end of file
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
var $lang = {
errAlertMsg: "\u4E0D\u5408\u6CD5\u7684\u65E5\u671F\u683C\u5F0F\u6216\u8005\u65E5\u671F\u8D85\u51FA\u9650\u5B9A\u8303\u56F4,\u9700\u8981\u64A4\u9500\u5417?",
aWeekStr: ["\u5468", "\u65E5", "\u4E00", "\u4E8C", "\u4E09", "\u56DB", "\u4E94", "\u516D"],
aLongWeekStr: ["\u5468", "\u661F\u671F\u65E5", "\u661F\u671F\u4E00", "\u661F\u671F\u4E8C", "\u661F\u671F\u4E09", "\u661F\u671F\u56DB", "\u661F\u671F\u4E94", "\u661F\u671F\u516D"],
aMonStr: ["\u4E00\u6708", "\u4E8C\u6708", "\u4E09\u6708", "\u56DB\u6708", "\u4E94\u6708", "\u516D\u6708", "\u4E03\u6708", "\u516B\u6708", "\u4E5D\u6708", "\u5341\u6708", "\u5341\u4E00", "\u5341\u4E8C"],
aLongMonStr: ["\u4E00\u6708", "\u4E8C\u6708", "\u4E09\u6708", "\u56DB\u6708", "\u4E94\u6708", "\u516D\u6708", "\u4E03\u6708", "\u516B\u6708", "\u4E5D\u6708", "\u5341\u6708", "\u5341\u4E00\u6708", "\u5341\u4E8C\u6708"],
clearStr: "\u6E05\u7A7A",
todayStr: "\u4ECA\u5929",
okStr: "\u786E\u5B9A",
updateStr: "\u786E\u5B9A",
timeStr: "\u65F6\u95F4",
quickStr: "\u5FEB\u901F\u9009\u62E9",
err_1: '\u6700\u5C0F\u65E5\u671F\u4E0D\u80FD\u5927\u4E8E\u6700\u5927\u65E5\u671F!'
}
\ No newline at end of file \ No newline at end of file
.Wdate{
border:#999 1px solid;
height:20px;
background:#fff url(datePicker.gif) no-repeat right;
}
.Wdate::-ms-clear{display:none;}
.WdateFmtErr{
font-weight:bold;
color:red;
}
\ No newline at end of file \ No newline at end of file
/*
* My97 DatePicker 4.7
* Ƥ�����:whyGreen
*/
/* ����ѡ������ DIV */
.WdateDiv{
width:180px;
background-color:#fff;
border:#1b9cdd 1px solid; /*#C5E1E4*/
padding:2px;
}
/* ˫������Ŀ�� */
.WdateDiv2{
width:360px;
}
.WdateDiv *{font-size:9pt;}
/****************************
* ����ͼ�� ȫ����A��ǩ
***************************/
.WdateDiv .NavImg a{
cursor:pointer;
display:block;
width:16px;
height:16px;
margin-top:1px;
}
.WdateDiv .NavImgll a{
float:left;
background:url(img.gif) no-repeat;
}
.WdateDiv .NavImgl a{
float:left;
background:url(img.gif) no-repeat -16px 0px;
}
.WdateDiv .NavImgr a{
float:right;
background:url(img.gif) no-repeat -32px 0px;
}
.WdateDiv .NavImgrr a{
float:right;
background:url(img.gif) no-repeat -48px 0px;
}
/****************************
* ����·����
***************************/
/* ����·��� DIV */
.WdateDiv #dpTitle{
height:24px;
padding:1px;
border:#c5d9e8 1px solid;
background:url(bg.jpg);
margin-bottom:2px;
}
/* ����·������ INPUT */
.WdateDiv .yminput{
margin-top:2px;
text-align:center;
border:0px;
height:20px;
width:50px;
color:#034c50;
background-color:transparent;
cursor:pointer;
}
/* ����·�������ý���ʱ����ʽ INPUT */
.WdateDiv .yminputfocus{
margin-top:2px;
text-align:center;
border:#939393 1px solid;
font-weight:bold;
color:#034c50;
height:20px;
width:50px;
}
/* �˵�ѡ��� DIV */
.WdateDiv .menuSel{
z-index:1;
position:absolute;
background-color:#FFFFFF;
border:#A3C6C8 1px solid;
display:none;
}
/* �˵�����ʽ TD */
.WdateDiv .menu{
cursor:pointer;
background-color:#fff;/*1b9cdd*/
color:#11777C;/**/
}
/* �˵���mouseover��ʽ TD */
.WdateDiv .menuOn{
cursor:pointer;
color: #fff;/*custom*/
background-color:#1b9cdd;/*BEEBEE*/
}
/* �˵���Чʱ����ʽ TD */
.WdateDiv .invalidMenu{
color:#aaa;
}
/* ��ѡ����ƫ�� DIV */
.WdateDiv .YMenu{
margin-top:20px;
}
/* ��ѡ����ƫ�� DIV */
.WdateDiv .MMenu{
margin-top:20px;
*width:62px;
}
/* ʱѡ����λ�� DIV */
.WdateDiv .hhMenu{
margin-top:-90px;
margin-left:26px;
}
/* ��ѡ����λ�� DIV */
.WdateDiv .mmMenu{
margin-top:-46px;
margin-left:26px;
}
/* ��ѡ����λ�� DIV */
.WdateDiv .ssMenu{
margin-top:-24px;
margin-left:26px;
}
/****************************
* �����
***************************/
.WdateDiv .Wweek {
text-align:center;
background:#DAF3F5;
border-right:#BDEBEE 1px solid;
}
/****************************
* ����,�������
***************************/
/* ������ TR */
.WdateDiv .MTitle{
color:#fff;/*13777e*/
background-color:#1b9cdd;/*bdebee*/
}
.WdateDiv .WdayTable2{
border-collapse:collapse;
border:#BEE9F0 1px solid;
}
.WdateDiv .WdayTable2 table{
border:0;
}
/* ��������� TABLE */
.WdateDiv .WdayTable{
line-height:20px;
color:#1b9cdd;/*13777e*/
background-color:#edfbfb;
border:#1b9cdd 1px solid;/*BEE9F0*/
}
.WdateDiv .WdayTable td{
text-align:center;
}
/* ���ڸ����ʽ TD */
.WdateDiv .Wday{
cursor:pointer;
}
/* ���ڸ��mouseover��ʽ TD */
.WdateDiv .WdayOn{
cursor:pointer;
background-color:#74d2d9 ;
}
/* ��ĩ���ڸ����ʽ TD */
.WdateDiv .Wwday{
cursor:pointer;
color:#ab1e1e;
}
/* ��ĩ���ڸ��mouseover��ʽ TD */
.WdateDiv .WwdayOn{
cursor:pointer;
background-color:#74d2d9;
}
.WdateDiv .Wtoday{
cursor:pointer;
color:blue;
}
.WdateDiv .Wselday{
background-color:#A7E2E7;
}
.WdateDiv .WspecialDay{
background-color:#66F4DF;
}
/* �����·ݵ����� */
.WdateDiv .WotherDay{
cursor:pointer;
color:#0099CC;
}
/* �����·ݵ�����mouseover��ʽ */
.WdateDiv .WotherDayOn{
cursor:pointer;
background-color:#C0EBEF;
}
/* ��Ч���ڵ���ʽ,�������ڷ�Χ�������ڸ����ʽ,����ѡ������� */
.WdateDiv .WinvalidDay{
color:#aaa;
}
/****************************
* ʱ�����
***************************/
/* ʱ���� DIV */
.WdateDiv #dpTime{
}
/* ʱ������ SPAN */
.WdateDiv #dpTime #dpTimeStr{
margin-left:1px;
color:#000;/*497F7F*/
}
/* ʱ������� INPUT */
.WdateDiv #dpTime input{
height:20px;
width:18px;
text-align:center;
color:#333;
border:#1b9cdd 1px solid; /*61CAD0*/
}
/* ʱ�� ʱ INPUT */
.WdateDiv #dpTime .tB{
border-right:0px;
}
/* ʱ�� �ֺͼ���� ':' INPUT */
.WdateDiv #dpTime .tE{
border-left:0;
border-right:0;
}
/* ʱ�� �� INPUT */
.WdateDiv #dpTime .tm{
width:7px;
border-left:0;
border-right:0;
}
/* ʱ���ұߵ����ϰ�ť BUTTON */
.WdateDiv #dpTime #dpTimeUp{
height:10px;
width:13px;
border:0px;
background:url(img.gif) no-repeat -32px -16px;
}
/* ʱ���ұߵ����°�ť BUTTON */
.WdateDiv #dpTime #dpTimeDown{
height:10px;
width:13px;
border:0px;
background:url(img.gif) no-repeat -48px -16px;
}
/****************************
* ����
***************************/
.WdateDiv #dpQS {
float:left;
margin-right:3px;
margin-top:3px;
background:url(img.gif) no-repeat 0px -16px;
width:20px;
height:20px;
cursor:pointer;
}
.WdateDiv #dpControl {
text-align:right;
margin-top:3px;
}
.WdateDiv .dpButton{
height:20px;
width:45px;
margin-top:2px;
border:#fff 1px solid;/*38B1B9*/
background: linear-gradient(to right, #1ca1e2, #0c65a6);/*background-color:#CFEBEE;*/
color:#fff;/*08575B*/
}
\ No newline at end of file \ No newline at end of file
(function($) {
function mnpXml(opCode, xmlStr) {
return this.each(function() {
if (typeof xmlStr != "string") return;
if (!jQuery.isXMLDoc(this)) return;
var node = $.parseXml(xmlStr).firstChild.cloneNode(true);
switch (opCode) {
case "append":
this.appendChild(node);
break;
case "prepend":
if (this.childNodes.length > 0)
this.insertBefore(node, this.firstChild);
else
this.appendChild(node);
break;
case "after":
if (this.nextSibling)
this.parentNode.insertBefore(node, this.nextSibling);
else
this.parentNode.appendChild(node);
break;
case "before":
this.parentNode.insertBefore(node, this);
break;
}
});
}
$.fn.extend({
appendXml: function(s) {
return mnpXml.call(this, "append", s);
},
prependXml: function(s) {
return mnpXml.call(this, "prepend", s);
},
afterXml: function(s) {
return mnpXml.call(this, "after", s);
},
beforeXml: function(s) {
return mnpXml.call(this, "before", s);
},
xml: function() {
var elem = this[0];
return elem.xml || (new XMLSerializer()).serializeToString(elem) ;
},
innerXml: function() {
var s = this.xml();
var i = s.indexOf(">"), j = s.lastIndexOf("<");
if (j > i)
return s.substring(i + 1, j);
else
return "";
}
});
$.extend(jQuery, {
parseXml: function(xmlStr) {
if (window.ActiveXObject) {
var xd = new ActiveXObject("Microsoft.XMLDOM");
xd.async = false;
xd.loadXML(xmlStr);
return xd;
}
else if (typeof DOMParser != "undefined") {
var xd = new DOMParser().parseFromString(xmlStr, "text/xml");
return xd;
}
else return null;
},
toXml: function(obj, nodeName, useAttr) {
var x = $($.parseXml("<" + nodeName + " />"));
var n = x.find(":first");
for (var p in obj) {
if (useAttr)
n.attr(p, obj[p]);
else
n.appendXml("<" + p + " />").find(p).text(obj[p]);
}
return x[0];
}
});
})(jQuery);
\ No newline at end of file \ No newline at end of file
<?xml version="1.0" encoding="UTF8"?>
<root>
<功能配置>
<抓拍参数配置>
<抓拍模式>2</抓拍模式>
<路口电警>
<虚拟线圈>
<线圈2启用>0</线圈2启用>
<线圈1启用>0</线圈1启用>
<显示>0</显示>
<线圈3启用>0</线圈3启用>
</虚拟线圈>
<占用紧急车道>
<启用算法>0</启用算法>
</占用紧急车道>
<车辆慢行>
<启用>0</启用>
</车辆慢行>
<非法停车>
<启用算法>0</启用算法>
</非法停车>
<行人检测>
<启用>0</启用>
</行人检测>
<占用公交车道>
<启用算法>0</启用算法>
</占用公交车道>
<礼让行人>
<启用>0</启用>
</礼让行人>
<异常停车>
<启用>0</启用>
</异常停车>
<占用非机动车道>
<启用算法>0</启用算法>
</占用非机动车道>
</路口电警>
<视频卡口>
<卡口抓两张图>0</卡口抓两张图>
<跨线变道>
<启用算法>1</启用算法>
</跨线变道>
<逆行>
<输出限时单行>0</输出限时单行>
<启用算法>0</启用算法>
</逆行>
<雷达测速>
<雷达匹配失败方案>0</雷达匹配失败方案>
<启用算法>1</启用算法>
<过滤掉视频测速低速车>0</过滤掉视频测速低速车>
</雷达测速>
<车辆拥堵>
<启用算法>0</启用算法>
</车辆拥堵>
<压线>
<启用算法>1</启用算法>
</压线>
<大货车禁行>
<黄牌即认为是大货车>0</黄牌即认为是大货车>
<启用算法>1</启用算法>
</大货车禁行>
<占有率超限>
<启用算法>0</启用算法>
</占有率超限>
</视频卡口>
</抓拍参数配置>
</功能配置>
<基础配置>
<成像参数设置>
<曝光设置>
<自动>
<触发帧最大曝光时间>1511</触发帧最大曝光时间>
<最优环境亮度>70.000000</最优环境亮度>
<最优车牌亮度>70.000000</最优车牌亮度>
<最大曝光时间>10000</最大曝光时间>
<最大增益>20</最大增益>
</自动>
<手动>
<手动曝光时间>300</手动曝光时间>
</手动>
<曝光模式>0</曝光模式>
</曝光设置>
<外设设置>
<闪光灯开关>1</闪光灯开关>
<闪光灯极性>1</闪光灯极性>
<白昼切换>0</白昼切换>
<闪光灯控制模式>0</闪光灯控制模式>
<频闪灯开关>0</频闪灯开关>
</外设设置>
<图像调节>
<色度>35</色度>
<锐度>90</锐度>
<对比度>41</对比度>
<饱和度>41</饱和度>
</图像调节>
</成像参数设置>
<网络设置>
<数据服务器>
<IP地址>192.168.5.38</IP地址>
<端口>2525</端口>
</数据服务器>
</网络设置>
</基础配置>
<雷达>
<输出雷达Log信息>0</输出雷达Log信息>
<车道1支持雷达>0</车道1支持雷达>
<车道3支持雷达>0</车道3支持雷达>
<车道2支持雷达>0</车道2支持雷达>
</雷达>
<高级配置>
<调试参数>
<JPEG压缩比>53</JPEG压缩比>
<HD-SDI>
<启用HD-SDI>0</启用HD-SDI>
</HD-SDI>
</调试参数>
</高级配置>
</root>
...@@ -6,6 +6,7 @@ ...@@ -6,6 +6,7 @@
<style lang="scss"> <style lang="scss">
#app { #app {
height: 100%;
font-family:MicrosoftYaHeiUI; font-family:MicrosoftYaHeiUI;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
......
import map from './map' import map from "./map";
import login from './login' import login from "./login";
import task from './taskManage' import task from "./task";
import search from './search'
export default { export default {
map, map,
login, login,
task,
search
}
\ No newline at end of file \ No newline at end of file
task
};
...@@ -54,4 +54,4 @@ service.interceptors.response.use( ...@@ -54,4 +54,4 @@ service.interceptors.response.use(
*/ */
export default function() { export default function() {
return service return service
}
\ No newline at end of file \ No newline at end of file
}
...@@ -44,4 +44,4 @@ export default { ...@@ -44,4 +44,4 @@ export default {
} }
return instance.delete(url, options) return instance.delete(url, options)
} }
}
\ No newline at end of file \ No newline at end of file
}
...@@ -16,4 +16,4 @@ const install = function(Vue) { ...@@ -16,4 +16,4 @@ const install = function(Vue) {
export default { export default {
install install
}
\ No newline at end of file \ No newline at end of file
}
...@@ -18,4 +18,4 @@ export default { ...@@ -18,4 +18,4 @@ export default {
codes(params,id){ codes(params,id){
return api.get(urls.codes+id+'/codes',params) return api.get(urls.codes+id+'/codes',params)
} }
}
\ No newline at end of file \ No newline at end of file
}
import baseUrl from '../baseUrl' import baseUrl from "../baseUrl";
export default { export default {
login: baseUrl + '/api/v1/devconf_fx/users/login',
algocombs:baseUrl+'/api/v1/devconf_fx/algo_combs',
storeconfs:baseUrl+'/api/v1/devconf_fx/store_confs',
cates:baseUrl+'/api/v1/codes/traffic/cates',
codes:baseUrl+'/api/v1/codes/traffic/cates/',
}
\ No newline at end of file \ No newline at end of file
login: baseUrl + "/api/v1/devconf_fx/users/login",
algocombs: baseUrl + "/api/v1/devconf_fx/algo_combs",
storeconfs: baseUrl + "/api/v1/devconf_fx/store_confs",
cates: baseUrl + "/api/v1/codes/traffic/cates",
codes: baseUrl + "/api/v1/codes/traffic/cates/"
};
import api from "../index";
import urls from "./urls";
export default {
//登陆
getTask(params, id) {
return api.get(urls.getTask, params);
},
editTask(params, taskid) {
return api.post(urls.editTask(taskid), params);
},
editRoi(taskid, subtaskid, params) {
return api.post(urls.editroi(taskid, subtaskid), params);
},
alternatestate(params, taskid, subtaskid) {
return api.post(urls.alternatestate(taskid, subtaskid), params);
},
algostate(params, taskid, subtaskid) {
return api.post(urls.algostate(taskid, subtaskid), params);
},
getSubTask(taskid) {
return api.get(urls.getSubTask(taskid));
},
getStream(devid, vrefid) {
return api.get(urls.getstream(devid, vrefid));
},
getPlayUrl(subid) {
return api.get(urls.getPlayUrl(subid)); // 获取播放地址
},
getTaskParams(taskid, subtaskid) {
return api.get(urls.getTaskParams(taskid, subtaskid));
},
cutpic(devid, vchanid, subtaskid) {
return api.get(urls.cutpic(devid, vchanid, subtaskid));
},
deleteTask(taskid) {
return api.delete(urls.deleteTask(taskid));
}
};
import baseUrl from "../baseUrl";
function gitTimer() {
return new Date().getTime();
}
export default {
getTask: `${baseUrl}/api/v1/devconf_fx/tasks?s=${gitTimer()}`,
editTask: taskid => {
return `${baseUrl}/api/v1/devconf_fx/tasks/${taskid}`;
},
editroi: (taskid, subtaskid) => {
return `${baseUrl}/api/v1/devconf_fx/tasks/${taskid}/subtasks/${subtaskid}?s=${gitTimer()}`; // ROI设置
},
alternatestate: (taskid, subtaskid) => {
return `${baseUrl}/api/v1/devconf_fx/tasks/${taskid}/subtask/${subtaskid}/suspend_alternate_task?s=${gitTimer()}`;
},
algostate: (taskid, subtaskid) => {
return `${baseUrl}/api/v1/devconf_fx/tasks/${taskid}/subtask/${subtaskid}/suspend_algorithm?s=${gitTimer()}`;
},
getSubTask: id => {
return `${baseUrl}/api/v1/devconf_fx/tasks/${id}/subtasks?s=${gitTimer()}`;
},
getstream: (devid, vrefid) => {
return `${baseUrl}/api/v1/stream/devs/${devid}/vchans/${vrefid}/live/is_sending?s=${gitTimer()}`;
},
getPlayUrl: subid => {
return `${baseUrl}/api/v1/devconf_fx/analyse/live/play_url?subtask_id=${subid}`; // 获取播放地址
},
getTaskParams: (taskid, subtaskid) => {
return `${baseUrl}/api/v1/devconf_fx/tasks/${taskid}/subtasks/${subtaskid}?s=${gitTimer()}`; // 推流信息
},
cutpic: (devid, vchanid, subtaskid) => {
return `${baseUrl}/api/v1/devconf_fx/devs/${devid}/vchans/${vchanid}/cut_pic?subtask_id=${subtaskid}&s=${gitTimer()}`; // 截图
},
deleteTask: taskid => {
return `${baseUrl}/api/v1/devconf_fx/tasks/${taskid}?s=${gitTimer()}`; // 删除子任务
},
deleteSubTask: (taskid, subtaskid) => {
return `${baseUrl}/api/v1/devconf_fx/tasks/${taskid}/subtask/${subtaskid}?s=${gitTimer()}`; // 删除子任务
},
changeTask: taskid => {
return `${baseUrl}/api/v1/devconf_fx/tasks/${taskid}/start_or_stop?s=${gitTimer()}`; // 切换任务
}
};
...@@ -2,4 +2,4 @@ import baseUrl from '../baseUrl' ...@@ -2,4 +2,4 @@ import baseUrl from '../baseUrl'
export default { export default {
tasks: baseUrl + '/api/v1/devconf_fx/tasks', tasks: baseUrl + '/api/v1/devconf_fx/tasks',
subtasks:baseUrl+'/api/v1/devconf_fx/tasks/', subtasks:baseUrl+'/api/v1/devconf_fx/tasks/',
}
\ No newline at end of file \ No newline at end of file
}
html,body{
height: 100%;
}
*{
padding: 0;
margin: 0;
}
.home,.home-box{
height: 100%;
}
.home-box .el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
background: red
}
.home-box .el-tabs__nav{
width: 100%;
}
.home-box .el-tabs__item{
width: 25%!important;
padding: 0!important;
text-align: center;
}
/* 设置区域设置按钮 */
.editbtn .el-radio-button__inner{
border: 0;
}
.editbtn .el-radio-button:first-child,.editbtn .el-radio-button__inner{
border: 0!important;
}
.editbtn .el-radio-button:last-child,.editbtn .el-radio-button__inner{
border-radius: 0;
border: 0;
}
.editbtn .el-radio-button__orig-radio:checked+.el-radio-button__inner{
border: 0;
background: none;
box-shadow:none;
color: #3BB7FF;
}
.editbtn .el-radio-button__inner{
background: none;
padding: 0;
}
.el-radio-button--small .el-radio-button__inner{
font-size: 18px;
color: #3BB7FF;
}
.editbtn{
height: 46px;
width: 48px;
line-height: 46px;
text-align: center;
font-size: 14px;
background: #D7EDFF;
cursor: pointer;
}
\ No newline at end of file \ No newline at end of file
import {CalcRealCoor,CalcImgCoor,Mat_Multiply,CalcInvK,CalcK} from "./Camera_Parameters.js"
const PI = 3.14159265
const CameraParameter = {
m_fTiltAngle: '', //倾斜角度,摄像头与水平面夹角,单位度
m_fRollAngle: '', //滚动角度,摄像头“滚”的角度,单位度 (备用参数,可能不需要)
m_fPanAngle: '', //旋转角度,摄像头“摇”的角度,单位度 (备用参数,可
m_fCCDWidth: '', //ccd宽度=图像宽度×ccd水平像素距离,(单位:毫米)
m_fCCDHeight: '', //ccd高度=图像高度×ccd垂直像素距离,(单
m_fFocusX: '', //中间数据
m_fFo: '',
m_fHeight: '', //相机高度
m_fCameraFoucs: '', //摄像头的焦
m_dblK: [], //成像矩阵,以相机为原点,x轴向右,y轴向下,z轴向前
m_dblInvK: [],
}
var CameraParam = CameraParameter;
var CarLength = 4.5, CarWidth = 1.7, CarHeight = 1.5;
var PedLength = 0.3, PedWidth = 0.5, PedHeight = 1.7;
var ModelLength = 4.5,ModelWidth = 1.7,ModelHeight = 1.5;
export var changeModelData = function(type){
if(type == 'car'){
ModelLength = CarLength;
ModelWidth = CarWidth;
ModelHeight = CarHeight;
}
if(type == 'person'){
ModelLength = PedLength;
ModelWidth = PedWidth;
ModelHeight = PedHeight;
}
}
var CalcCrossPoint = function (p1, p2, p3, p4) {
var fDetM1 = '', fDetM2 = '', fa = '';
var p5 = {};
fDetM1 = (p2.x - p1.x) * (p4.y - p3.y) - (p4.x - p3.x) * (p2.y - p1.y);
if (fDetM1 < 0.000001 && fDetM1 > -0.000001) {
fDetM1 = 0.000001;
}
fDetM2 = (p3.x - p1.x) * (p4.y - p3.y) - (p4.x - p3.x) * (p3.y - p1.y);
fa = fDetM2 / fDetM1;
p5.x = p1.x + fa * (p2.x - p1.x);
p5.y = p1.y + fa * (p2.y - p1.y);
return p5;
}
/**
* 根据平行线和一个标定距离计算相机标定
* @param {float} fHeight //相机高度
* @param {float} fRatioW2H //图像宽高比
* @param {Array} Points //标定的6个点的相对坐标,前四个是一组平行线;最后两点是标定好的距离
* @param {float} fDist //标定最后两点的距离
*/
export var scRTEngineCalcBaseon6Points = function (fHeight, fRatioW2H, Points, fDist) {
var VanishPoint, fTanTilt, fy, fMinError = 1000;
var copyCameraParameter = JSON.stringify(CameraParameter);
var TempParam = JSON.parse(copyCameraParameter);
if (fHeight <= 0 || fDist <= 0 || fRatioW2H <= 0)
return;
VanishPoint = CalcCrossPoint(Points[0], Points[1], Points[2], Points[3]);
if (VanishPoint.y < -100000 || VanishPoint.y > 100000) //标定线平行则放弃
return;
TempParam.m_fHeight = fHeight;
CameraParam.m_fHeight = fHeight;
//搜索error最小的标定
for (fTanTilt = 0.01; fTanTilt < 1; fTanTilt += 0.005) //范围45~89度
{
var fTiltAngle; //fTiltAngle为相机与水平线的夹角
if (VanishPoint.y <= 0.5) //如果标定线交点在图像上方,认为其是地面平行线相交的无穷远点,夹角取值范围0~45度
{
fTiltAngle = Math.atan(fTanTilt) * 180 / PI;
fy = (0.5 - VanishPoint.y) / fTanTilt;
} else //否则认为是纵向平行线相交的地心点,此时fTiltAngle的取值范围45~89度,fTanTilt可认为是ctg(tilt),地心点的图像坐标y=fy*ctg(tilt)
{
fTiltAngle = Math.atan(1.0 / fTanTilt) * 180 / PI;
fy = (VanishPoint.y - 0.5) / fTanTilt;
}
TempParam.m_fTiltAngle = fTiltAngle;
TempParam.m_fFocusX = fy / fRatioW2H;
TempParam.m_fFocusY = fy;
if(TempParam.m_fFocusX != 0)
{
var fTanPan = -(VanishPoint.x-0.5)*Math.cos(TempParam.m_fTiltAngle/180*PI)/TempParam.m_fFocusX;//pan角度,根据消失点计算
TempParam.m_fPanAngle = Math.atan(fTanPan)*180/PI;
}
else
{
TempParam.m_fPanAngle = 0;
}
TempParam.m_dblK = CalcK(TempParam.m_dblK,TempParam.m_fFocusX, TempParam.m_fFocusY, TempParam.m_fTiltAngle, 0, TempParam.m_fPanAngle);
TempParam.m_dblInvK = CalcInvK(TempParam.m_dblInvK,TempParam.m_fFocusX, TempParam.m_fFocusY, TempParam.m_fTiltAngle, 0, TempParam.m_fPanAngle);
//计算头两点的距离,搜索error最小的标定
{
var fCurrrError = '';
var P0 = '',P1 = '';
P0 = CalcRealCoor(Points[4], TempParam.m_dblInvK, TempParam.m_fHeight);
P1 = CalcRealCoor(Points[5], TempParam.m_dblInvK, TempParam.m_fHeight);
fCurrrError = Math.abs(Math.sqrt((P0.x-P1.x)*(P0.x-P1.x) + (P0.z-P1.z)*(P0.z-P1.z)) - fDist);
if (fCurrrError < fMinError)
{
fMinError = fCurrrError;
var a = JSON.stringify(TempParam);
var b = JSON.parse(a);
CameraParam = b;
}
}
}
}
/**
* 计算车或人的模型框点位
* @param {*} P1 模型线点
* @param {*} P2 模型线点
* @param {*} CarOutline 传入参数
*/
export var CalcCarOutline = function (P1, P2, CarOutline)
{
var P3d1 = {}, P3d2 = {};
var Xdire = {}, Zdire = {};
var ftempN;
P3d1 = CalcRealCoor(P1, CameraParam.m_dblInvK, CameraParam.m_fHeight, P3d1);
P3d2 = CalcRealCoor(P2, CameraParam.m_dblInvK, CameraParam.m_fHeight, P3d2);
Zdire.x = P3d2.x-P3d1.x;
Zdire.y = P3d2.z-P3d1.z;
ftempN = Math.sqrt(Zdire.x*Zdire.x+Zdire.y*Zdire.y);
Zdire.x /= ftempN;
Zdire.y /= ftempN;
Xdire.x = Zdire.y;
Xdire.y = -Zdire.x;
{
//左上点
P3d2.x = P3d1.x-ModelWidth/2*Xdire.x;
P3d2.y = CameraParam.m_fHeight-ModelHeight;
P3d2.z = P3d1.z-ModelWidth/2*Xdire.y;
CalcImgCoor(CarOutline[0], CameraParam.m_dblK, P3d2);
//右上点
P3d2.x = P3d1.x+ModelWidth/2*Xdire.x;
P3d2.y = CameraParam.m_fHeight-ModelHeight;
P3d2.z = P3d1.z+ModelWidth/2*Xdire.y;
CalcImgCoor(CarOutline[1], CameraParam.m_dblK, P3d2);
//右下点
P3d2.x = P3d1.x+ModelWidth/2*Xdire.x;
P3d2.y = CameraParam.m_fHeight;
P3d2.z = P3d1.z+ModelWidth/2*Xdire.y;
CalcImgCoor(CarOutline[2], CameraParam.m_dblK, P3d2);
//左下点
P3d2.x = P3d1.x-ModelWidth/2*Xdire.x;
P3d2.y = CameraParam.m_fHeight;
P3d2.z = P3d1.z-ModelWidth/2*Xdire.y;
CalcImgCoor(CarOutline[3], CameraParam.m_dblK, P3d2);
//前左上点
P3d2.x = P3d1.x-ModelWidth/2*Xdire.x+ModelLength*Zdire.x;
P3d2.y = CameraParam.m_fHeight-ModelHeight;
P3d2.z = P3d1.z-ModelWidth/2*Xdire.y+ModelLength*Zdire.y;
CalcImgCoor(CarOutline[4], CameraParam.m_dblK, P3d2);
//前右上点
P3d2.x = P3d1.x+ModelWidth/2*Xdire.x+ModelLength*Zdire.x;
P3d2.y = CameraParam.m_fHeight-ModelHeight;
P3d2.z = P3d1.z+ModelWidth/2*Xdire.y+ModelLength*Zdire.y;
CalcImgCoor(CarOutline[5], CameraParam.m_dblK, P3d2);
//前右下点
P3d2.x = P3d1.x+ModelWidth/2*Xdire.x+ModelLength*Zdire.x;
P3d2.y = CameraParam.m_fHeight;
P3d2.z = P3d1.z+ModelWidth/2*Xdire.y+ModelLength*Zdire.y;
CalcImgCoor(CarOutline[6], CameraParam.m_dblK, P3d2);
//前左下点
P3d2.x = P3d1.x-ModelWidth/2*Xdire.x+ModelLength*Zdire.x;
P3d2.y = CameraParam.m_fHeight;
P3d2.z = P3d1.z-ModelWidth/2*Xdire.y+ModelLength*Zdire.y;
CalcImgCoor(CarOutline[7], CameraParam.m_dblK, P3d2);
}
return CarOutline
}
const PI = 3.1415926535898;
const EPS = 0.00000001;
//xyz 是指针类型
export var CalcRealCoor = function(point, invK, Objheight) {
var point_m = {
x:0,
y:0
}
var _xyz = {x:null,y:null,z:null};
point_m.x = (point.x-0.5);
point_m.y = (point.y-0.5);
_xyz.x = invK[0]*point_m.x+invK[1]*point_m.y+invK[2];
_xyz.y = invK[3]*point_m.x+invK[4]*point_m.y+invK[5];
_xyz.z = invK[6]*point_m.x+invK[7]*point_m.y+invK[8];
_xyz.x = _xyz.x/_xyz.y*Objheight;
_xyz.z = _xyz.z/_xyz.y*Objheight;
_xyz.y = Objheight;
return _xyz
}
export var CalcImgCoor = function(_point, K , xyz) {
var x_coor = K[0]*xyz.x+K[1]*xyz.y+K[2]*xyz.z;
var y_coor = K[3]*xyz.x+K[4]*xyz.y+K[5]*xyz.z;
var z_coor = K[6]*xyz.x+K[7]*xyz.y+K[8]*xyz.z;
x_coor /= z_coor;
y_coor /= z_coor;
x_coor += 0.5;
y_coor += 0.5;
_point.x = x_coor;
_point.y = y_coor;
return _point
}
export var CalcK = function(cK, fFocusX, fFocusY, fTilt, fRoll, fPan) {
var K = cK;
var theta = fTilt*PI/180,
gamma = fRoll*PI/180,
beta = fPan*PI/180,
sintheta = Math.sin(theta),
costheta = Math.cos(theta),
singamma = Math.sin(gamma),
cosgamma = Math.cos(gamma),
sinbeta = Math.sin(beta),
cosbeta = Math.cos(beta),
f_mat = [0,0,0,0,0,0,0,0,1],
theta_mat = [1,0,0,0,0,0,0,0,0],
gamma_mat = [0,0,0,0,0,0,0,0,1],
beta_mat = [0,0,0,0,1,0,0,0,0];
f_mat[0]=fFocusX;
f_mat[4]=fFocusY;
theta_mat[4]=costheta;
theta_mat[5]=-sintheta;
theta_mat[7]=sintheta;
theta_mat[8]=costheta;
gamma_mat[0]=cosgamma;
gamma_mat[1]=-singamma;
gamma_mat[3]=singamma;
gamma_mat[4]=cosgamma;
beta_mat[0]=cosbeta;
beta_mat[2]=-sinbeta;
beta_mat[6]=sinbeta;
beta_mat[8]=cosbeta;
K = Mat_Multiply(f_mat, theta_mat);
if ((fRoll > EPS)||(fRoll < -EPS))
{
K = Mat_Multiply(K, gamma_mat);
}
if ((fPan > EPS)||(fPan < -EPS))
{
K = Mat_Multiply(K, beta_mat);
}
return K
}
export var CalcInvK = function (cinvK, fFocusX, fFocusY, fTilt, fRoll, fPan) {
var InvK = cinvK,
theta = fTilt*PI/180,
gamma = fRoll*PI/180,
beta = fPan*PI/180,
sintheta = Math.sin(theta),
costheta = Math.cos(theta),
singamma = Math.sin(gamma),
cosgamma = Math.cos(gamma),
sinbeta = Math.sin(beta),
cosbeta = Math.cos(beta),
f_mat = [0,0,0,0,0,0,0,0,1],
theta_mat = [1,0,0,0,0,0,0,0,0],
gamma_mat = [0,0,0,0,0,0,0,0,1],
beta_mat = [0,0,0,0,1,0,0,0,0];
f_mat[0]= 1/fFocusX;
f_mat[4]= 1/fFocusY;
theta_mat[4]=costheta;
theta_mat[5]=sintheta;
theta_mat[7]=-sintheta;
theta_mat[8]=costheta;
gamma_mat[0]=cosgamma;
gamma_mat[1]=singamma;
gamma_mat[3]=-singamma;
gamma_mat[4]=cosgamma;
beta_mat[0]=cosbeta;
beta_mat[2]=sinbeta;
beta_mat[6]=-sinbeta;
beta_mat[8]=cosbeta;
if ((fRoll > EPS)||(fRoll < -EPS))
{
InvK = Mat_Multiply(beta_mat, gamma_mat);
InvK = Mat_Multiply(InvK, theta_mat);
InvK = Mat_Multiply(InvK, f_mat);
}
else if ((fPan > EPS)||(fPan < -EPS))
{
InvK = Mat_Multiply(beta_mat, theta_mat);
InvK = Mat_Multiply(InvK, f_mat);
}
else
{
InvK = Mat_Multiply(theta_mat, f_mat);
}
return InvK
}
function Mat_Multiply (m1, m2){
var mm = [], i, j, k,result = [];
for (var i=0;i<9;i++){
mm[i] = m1[i];
}
for (var i=0;i<3;i++) {
for (var j=0;j<3;j++){
result[i*3+j] = 0;
for (var k=0;k<3;k++){
result[i*3+j] += mm[i*3+k]*m2[k*3+j];
}
}
}
return result;
}
\ No newline at end of file \ No newline at end of file
export var configxml = {
xml:'<?xml version="1.0" encoding="GBK"?>'+
'<calibration><camera_height>6.5</camera_height><ccd_width>4</ccd_width><ccd_height>3</ccd_height><measure_line_length>2.5</measure_line_length><cali_lines><cali_lines_count>3</cali_lines_count><cali_line><cali_line_seq>1</cali_line_seq><lane_line_type>6</lane_line_type><lane_no>1</lane_no><line><polygon_point_count>2</polygon_point_count><point><point_seq>1</point_seq><x>0.101000</x><y>0.761600</y></point><point><point_seq>2</point_seq><x>0.212250</x><y>0.383600</y></point></line></cali_line><cali_line><cali_line_seq>2</cali_line_seq><lane_line_type>6</lane_line_type><lane_no>1</lane_no><line><polygon_point_count>2</polygon_point_count><point><point_seq>1</point_seq><x>0.806000</x><y>0.785600</y></point><point><point_seq>2</point_seq><x>0.709750</x><y>0.423600</y></point></line></cali_line><cali_line><cali_line_seq>3</cali_line_seq><lane_line_type>8</lane_line_type><lane_no>1</lane_no><line><polygon_point_count>2</polygon_point_count><point><point_seq>1</point_seq><x>0.343500</x><y>0.699600</y></point><point><point_seq>2</point_seq><x>0.358500</x><y>0.619600</y></point></line></cali_line></cali_lines></calibration>'
}
\ No newline at end of file \ No newline at end of file
//---------------预置位操作------------
function addPrePosition() {
var index;
index = getNextPreValue();
if (index > 60) {
alert("最多支持10个预置位");
return false;
}
var isAddSuccess = cameraController.AddPreLocation(index);
//仅当添加预置位的时候,才保存到数据库
if (isAddSuccess) {
//关闭Ocx显示
hideOcxDiv();
$.messager.prompt("添加预置位", "请输入预置位名称", function (r) {
if (r) {
if (r.length > 32) {
$.messager.alert("提示", "预置位名称请保持在32个字节内!", "info", function () {
showOcxDiv();
});
} else {
addPreLocation(currentCameraID, index, r);
showOcxDiv();
}
} else {
//显示Ocx层
showOcxDiv();
}
});
} else {
hideOcxDiv();
$.messager.alert("提示", "添加预置位失败!", "info", function () {
showOcxDiv();
});
}
}
function gotoPrePosition() {
//停止球机巡航
stopCameraNavigate();
//获取选择的预置位
var index = getSelectedPreValue();
if (!index) {
hideOcxDiv();
$.messager.alert("提示", "请先选择预置位", "info", function () {
showOcxDiv();
});
return false;
}
var isGotoSuccess = cameraController.GoToPreplace(index);
}
//从预置位列表获取下一个预置位的索引值
function getNextPreValue() {
var options = $("#prelocationSelect li");
var length = options.length;
if (length == 0) {//如果是空列表,返回初始值1
return 51;
} else {
//获取最后一个列表项的值并返回
optionValue = $(options[length - 1]).attr("data-value");
//类型转换,加1得到下一个值
return optionValue - 0 + 1;
}
}
//获取已选择的预值位值
function getSelectedPreValue() {
var containerObj = $("#prelocationSelect");
//获取选择的预置位
var index = containerObj.find("li.liSelected").attr("data-value");
return index;
}
//删除预置位
function deletePrePosition() {
//获取选择的预置位
var index = getSelectedPreValue();
if (!index) {
hideOcxDiv();
$.messager.alert("提示", "请先选择预置位", "info", function () {
showOcxDiv();
});
return false;
}
var isDeleteSuccess = cameraController.DeletePreplace(index);
if (isDeleteSuccess) {
deletePreLocation(currentCameraID, index);
} else {
hideOcxDiv();
$.messager.alert("提示", "删除失败!", "info", function () {
showOcxDiv();
});
}
}
//获取指定相机的预置位列表
function getPreLocationList() {
var url = "../../Ashx/Vion/SystemManager/CameraPreLocationHandler.ashx?param=GetList&cameraID=" + currentCameraID;
$.post(url, null, function (data) {
//清空预置位
$("#prelocationSelect").find("li").remove();
//加载预置位
var optionArray = new Array();
for (var i = 0; i < data.length; i++) {
optionArray.push("<li data-value='" + data[i].index + "'>" + data[i].name + "</li>");
}
//if ($.browser.msie && $.browser.version == "6.0") {
$("#prelocationSelect").append(optionArray.join(""));
//} else {
// $("#prelocationSelect .mCSB_container").append(optionArray.join(""));
//}
}, "json");
}
//添加预置位
function addPreLocation(cameraId, preLocationIndex, locationName) {
var url = "../../Ashx/Vion/SystemManager/CameraPreLocationHandler.ashx?param=Add";
var prelocationData = {
cameraId: cameraId,
preIndex: preLocationIndex,
locationName: encodeURIComponent(locationName)
};
$.post(url, prelocationData, function (data) {
if (!data.result) {
hideOcxDiv();
$.messager.alert("提示", "添加预置位失败!", "info", function () {
showOcxDiv();
});
} else {
//添加预置位
getPreLocationList();
}
}, "json");
}
function deletePreLocation(cameraID, index) {
var url = "../../Ashx/Vion/SystemManager/CameraPreLocationHandler.ashx?param=Delete&cameraID=" + cameraID + "&preIndex=" + index;
$.post(url, "", function (data) {
if (!data.result) {
hideOcxDiv();
$.messager.alert("提示", "删除预置位失败!", "info", function () {
showOcxDiv();
});
} else {
getPreLocationList();
}
}, "json");
}
function changePrePosition(e) {
//获取预置位
var selectedIndex = getSelectedPreValue();
if (!selectedIndex) {
hideOcxDiv();
$.messager.alert("提示", "请选择预置位!", "info", function () {
showOcxDiv();
});
return false;
}
//重新设置预置位
var resetSuccess = cameraController.AddPreLocation(selectedIndex);
if (!resetSuccess) {
hideOcxDiv();
$.messager.alert("提示", "重设失败!", "info", function () {
showOcxDiv();
});
}
}
\ No newline at end of file \ No newline at end of file
//摄像机预置位控制类
function CameraController() {
//添加预置位
this.AddPreLocation = function (index) {
//return ContrlPan("savepreplace", index, 0, 0) == "1";
//alert("添加预置位");
//var back = VionVideo.PtzSendCmdEx("V_PRESET_GET", index, "");
var re = VionVideo.PtzSendCmd("V_PRESET_SET", index, "");
return result(re);
}
//删除预置位
this.DeletePreplace = function (index) {
//return ContrlPan("delpreplace", index, 0, 0) == "1";
var re = VionVideo.PtzSendCmd("V_PRESET_DEL", index, "");
return result(re);
}
//转到预置位
this.GoToPreplace = function (index) {
//index = 17;
//return ContrlPan("gotopreplace", index, 0, 0) == "1";
var re = VionVideo.PtzSendCmd("V_PRESET_JMP", index, "");
return result(re);
}
//控制模式相关
//设置当前窗口控制模式为无状态
this.setPtzModeNull = function () {
var re = VionVideo.PtzSendCmd("V_PTZMODE_SET_NULL", 0, "");
return result(re);
}
//设置当前窗口控制模式为3D定位 支持方框 支持点定位
this.setPtzMode3dPtz = function () {
var re = VionVideo.PtzSendCmd("V_PTZMODE_SET_3DPTZ", 0, "");
return result(re);
}
//设置当前窗口控制模式为点击移动 支持鼠标点击 上下左右移动
this.setPtzModeClick = function () {
var re = VionVideo.PtzSendCmd("V_PTZMODE_SET_CLICK", 0, "");
return result(re);
}
var baseLocalPath = "D:\\vion-tech\\";
//删除本地缓存的文件
this.deleteLocalFile = function (szPath) {
var re;
if (szPath == "") {
var d = new Date();
szPath = baseLocalPath + d.getFullYear();
re = VionVideo.FileDelete(szPath, 0);
}
else {
re = VionVideo.FileDelete(szPath, 1);
}
return result(re);
}
function result(re) {
if (re == 1) {
return true;
}
else {
return false;
}
}
}
export {
CameraController
}
\ No newline at end of file \ No newline at end of file
import Vue from "vue"; import Vue from "vue";
import App from "./App.vue"; import App from "./App.vue";
import ElementUI from 'element-ui'; import ElementUI from "element-ui";
import 'element-ui/lib/theme-chalk/index.css'; import "element-ui/lib/theme-chalk/index.css";
import router from "./router"; import router from "./router";
import store from "./store"; import store from "./store";
import resetCss from './assets/resetElementCss/index.css' import resetCss from "./assets/resetElementCss/index.css";
import api from './api/install' import api from "./api/install";
import echarts from 'echarts' import "./assets/css/public.css";
import './assets/icon/iconfont.css' import echarts from "echarts";
import moment from 'moment' import "./assets/icon/iconfont.css";
import {buildCode} from './assets/js/buildcodes.js' import buildCode from "../src/assets/js/buildcodes";
import moment from "moment";
Vue.prototype.$echarts = echarts; Vue.prototype.$echarts = echarts;
Vue.prototype.$moment = moment; Vue.prototype.$moment = moment;
Vue.prototype.$buildCode = buildCode; Vue.prototype.$buildCode = buildCode;
Vue.use(api) Vue.prototype.oParse = new XML.ObjTree();
Vue.use(ElementUI, { size: 'small', zIndex: 3000 }); Vue.use(api);
Vue.use(ElementUI, { size: "small", zIndex: 3000 });
Vue.use(resetCss); Vue.use(resetCss);
Vue.config.productionTip = false; Vue.config.productionTip = false;
......
...@@ -17,4 +17,4 @@ const actions= { ...@@ -17,4 +17,4 @@ const actions= {
} }
} }
// 最后导出 // 最后导出
export default actions;
\ No newline at end of file \ No newline at end of file
export default actions;
import Vue from 'vue' import Vue from "vue";
import Vuex from 'vuex' import Vuex from "vuex";
Vue.use(Vuex) Vue.use(Vuex);
import getters from './getters' import getters from "./getters";
import actions from './actions' import actions from "./actions";
import users from './modules/login' import mutations from "./mutaition";
import users from "./modules/login";
import state from "./state";
// 导出 store 对象 // 导出 store 对象
export default new Vuex.Store({ export default new Vuex.Store({
getters,
actions,
modules:{
users
}
})
\ No newline at end of file \ No newline at end of file
getters,
actions,
mutations,
state,
modules: {
users
}
});
export default {
setVideostate(state, data) {
state.videoplaystate = data;
},
setocxstate(state, data) {
state.ocxstate = data;
},
settraffictype(state, data) {
state.traffictype = data;
},
setcarcolor(state, data) {
state.carcolor = data;
},
setcarbrand(state, data) {
state.carbrand = data;
},
setbehaviortype(state, data) {
state.behaviortype = data;
},
setillegaltype(state, data) {
state.illegaltype = data;
}
};
export default {
ocxstate: 0
}
<template> <template>
<div class="home"> <div class="home">
<el-container> <el-container class="home-box">
<el-header class="headers"> <el-header class="headers">
<img class="logoImg" src="../assets/img/home/logo.png" alt=""> <img class="logoImg" src="../assets/img/home/logo.png" alt="">
<div class="headRight"> <div class="headRight">
...@@ -80,4 +80,7 @@ export default { ...@@ -80,4 +80,7 @@ export default {
} }
} }
}; };
</script>
\ No newline at end of file \ No newline at end of file
</script>
<style lang="stylus" scoped>
</style>
<template>
<div class="info-dialog" v-if="infoDialogShow">
<iframe :src="iframeSrc" ref="infoIframe" frameborder="0" class="info-iframe"></iframe>
</div>
</template>
<script>
import Vue from 'vue'
export default {
data () {
return {
infoDialogShow: false,
iframeSrc: '',
visiableTimer: null
}
},
methods: {
showInfo(info, isVisible, type) {
this.infoDialogShow = true;
window.infoDialogVm = this;
if(arguments.length > 1) {
this.infoDialogShow = isVisible;
switch (type) {
case 'info':
this.iframeSrc = 'static/infoDialog.html';
break;
case 'picDetail':
this.iframeSrc = 'static/picDetailDialog.html';
break;
case 'paramSetting':
this.iframeSrc = 'static/paramSettingDialog.html';
break;
default:
break;
}
} else if(arguments.length == 1) {
this.iframeSrc = 'static/infoDialog.html';
} else {
return;
}
if(this.infoDialogShow) {
let self = this;
if(self && !self._isDestroyed) {
self.visiableTimer = setTimeout(() => {
try {
this.$refs.infoIframe.contentWindow.globalVm = this;
} catch (error) { }
if(type == undefined) {
try {
if(this.$refs.infoIframe.contentWindow) {
this.$refs.infoIframe.contentWindow.changeText(info, this);
}
} catch (err) {
this.infoDialogShow = false;
eval("console.log('自定义弹窗changeText异常:', err.message)")
}
} else {
try {
if(this.$refs.infoIframe.contentWindow) {
this.$refs.infoIframe.contentWindow.filterType(info);
}
} catch (err) {
this.infoDialogShow = false;
eval("console.log('自定义弹窗filterType异常:', err.message)");
}
}
}, 500);
}
}
},
hide() {
this.infoDialogShow = false;
window.clearTimeout(this.visiableTimer);
}
}
}
</script>
<style scoped>
.info-dialog {
width: 100%;
height: 100%;
position: relative;
z-index: 99990;
}
.info-iframe {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* z-index: 99990; */
}
</style>
<template>
<div class="pic-content scrollbar">
<el-row v-if="allAlarmData.length > 0">
<!-- 交通事件类 -->
<!-- 机动车事件 -->
<el-col :span="24" ref="picbox" :class="{'pic-box':true,'illclass':item.illegalTypeCode == 1?true:false}" v-for="(item, index) in allAlarmData" :key="index" v-if="item.event_cate !== 'flow'">
<el-col :lg="12" :md="10" :sm="11" v-if='item.task_algo_type!="1"'>
<el-card :body-style="{ padding: 0 }">
<div class="img-wrap" @click="showInfo(index)">
<b class="img-border"></b>
<div class="picbackground">
<img :src = "item.pic" class="photos"/>
</div>
</div>
</el-card>
</el-col>
<el-col :lg="12" :md="14" :sm="13" v-if="item.event_type === 'vehicle' || item.event_type === 'xcycle'">
<ul class="pic-info">
<li v-if="item.event_type === 'vehicle'" :title="item.vehicle_plate_text">
<span>车牌号码:</span>
<span>{{ item.vehicle_plate_text }}</span>
</li>
<li v-if="item.event_type === 'vehicle'" :title="item.vehicle_body_type_text">
<span>车辆类型:</span>
<span>{{ item.vehicle_body_type_text }}</span>
</li>
<li v-if="item.event_type === 'vehicle'" :title="item.vehicle_body_color_text">
<span>车身颜色:</span>
<span>{{ item.vehicle_body_color_text }}</span>
</li>
<li v-if="item.event_type === 'vehicle'" :title="item.vehicle_body_logo_text">
<span>车辆品牌:</span>
<span>{{ item.vehicle_body_logo_text }}</span>
</li>
<li v-if="item.illegalType" :title="item.illegalType">
<span>违法类型:</span>
<span>{{ item.illegalType }}</span>
</li>
<!-- 非机动车 -->
<li v-if="item.event_type === 'xcycle'" :title="item.xcycle_type_text">
<!-- 非机动车类型 -->
<span>车辆类型:</span>
<span>{{ item.xcycle_type_text }}</span>
</li>
<!-- <li v-if="item.event_type === 'xcycle'">
<span>是否违法:</span>
<span>{{ item.illegalType}}</span>
</li> -->
<!-- <li :title="item.driver_face_sex" v-if="item.event_type === 'xcycle'">
<span>{{ item.driver_face_sex }}</span>
</li> -->
<li v-if="item.event_type === 'xcycle'" :title="item.company">
<span>运营公司:</span>
<span>{{ item.company }}</span>
</li>
<li v-if="item.event_type === 'xcycle'" :title="item.xcycle_color_type">
<span>车辆颜色:</span>
<span>{{ item.xcycle_color_type }}</span>
</li>
<li v-if="item.event_type === 'xcycle'" :title="item.driver_face_upbody_text">
<span>上身颜色:</span>
<span>{{ item.driver_face_upbody_text }}</span>
</li>
<li :title="item.driver_face_lobody_text" v-if="item.event_type === 'xcycle'">
<span>速度:</span>
<span>{{ item.location_speed }}</span>
</li>
<li :title="item.driver_face_lobody_text" v-if="item.event_type === 'xcycle'">
<span>戴帽子:</span>
<span>{{ item.driver_face_with_hats }}</span>
</li>
<!-- <li v-if="item.illegalType" :title="item.illegalType">
<span>违法类型:</span>
<span>{{ item.illegalType }}</span>
</li> -->
</ul>
</el-col>
<!-- 行人事件 -->
<el-col :lg="12" :md="14" :sm="13" v-if="item.event_type === 'pedestrian'">
<ul class="pic-info">
<!-- <li :title="item.shoot_date">
<span>抓拍日期:</span>
<span>{{ item.shoot_date }}</span>
</li>
<li :title="item.shoot_time">
<span>抓拍时间:</span>
<span>{{ item.shoot_time }}</span>
</li> -->
<li :title="item.driver_face_sex">
<span>性别:</span>
<span>{{ item.driver_face_sex }}</span>
</li>
<li :title="item.driver_face_upbody_text">
<span>上身颜色:</span>
<span>{{ item.driver_face_upbody_text }}</span>
</li>
<li :title="item.driver_face_lobody_text">
<span>下身颜色:</span>
<span>{{ item.driver_face_lobody_text }}</span>
</li>
<li :title="item.pedestrian_height">
<span>身高:</span>
<span>{{ item.pedestrian_height }}</span>
</li>
<li :title="item.driver_face_lobody_text">
<span>速度:</span>
<span>{{ item.location_speed }}</span>
</li>
<li :title="item.driver_face_lobody_text">
<span>戴帽子:</span>
<span>{{ item.driver_face_with_hats }}</span>
</li>
<!-- <li v-if="item.illegalType" :title="item.illegalType">
<span>违法类型:</span>
<span>{{ item.illegalType }}</span>
</li> -->
</ul>
</el-col>
<!--安防事件-->
<el-col :span="12" v-if="item.event_cate === 'behavior'">
<ul class="pic-info">
<li :title="getCode('安防事件',item.event_type)">
<span>事件类型:</span>
<span>{{ getCode('安防事件',String(item.event_type)) }}</span>
</li>
<!-- 区域人数 -->
<li v-if="item.event_type == '21'">
<span>区域{{ item.event_data.density.persons }}</span>
</li>
<li>
<span>抓拍日期:</span>
<span>{{ item.shoot_date }}</span>
</li>
<li :title="item.shoot_time">
<span>抓拍时间:</span>
<span>{{ item.shoot_time }}</span>
</li>
<!-- <li v-if="item.illegalType" :title="item.illegalType">
<span>违法类型:</span>
<span>{{ item.illegalType }}</span>
</li> -->
</ul>
</el-col>
</el-col>
<!--客流事件-->
<el-col :span="22" class="pic-box" v-for="(item, index) in allAlarmData" :key="index" v-if="item.event_cate === 'flow'">
<el-col :span="24">
<ul class="pic-info">
<li :title="item.shoot_date">
<span class="flow-left">抓拍日期:</span>
<span class="flow-right">{{ item.shoot_date }}</span>
</li>
<li :title="item.shoot_time">
<span class="flow-left">抓拍时间:</span>
<span class="flow-right">{{ item.shoot_time }}</span>
</li>
<li :title="item.event_type_text">
<span class="flow-left">事件类型:</span>
<span class="flow-right">{{ item.event_type_text }}</span>
</li>
<li v-if="item.event_type === 'inout_num'" :title="item.inNum">
<span class="flow-left">进入人数:</span>
<span class="flow-right">{{ item.inNum }}</span>
</li>
<li v-if="item.event_type === 'inout_num'" :title="item.outNum">
<span class="flow-left">离开人数:</span>
<span class="flow-right">{{ item.outNum }}</span>
</li>
<li v-if="item.event_type === 'postions'" :title="item.areaPersons">
<span class="flow-left">人数:</span>
<span class="flow-right">{{ item.areaPersons }}</span>
</li>
</ul>
</el-col>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data(){
return{
allAlarmData:[],
curPicData:''
}
},
props:["itemData"],
methods:{
showInfo: function(index) {
this.curPicData = this.allAlarmData[index];
if(this.curPicData) {
this.$emit("showDitail",this.curPicData)
}
}
},
created() {
},
mounted() {
},
watch:{
itemData(val){
if(val == '') {
this.allAlarmData = [];
return
}
var timer = new Date().getTime()
if(val.event_cate === 'flow' || val.event_type === 'pflow' ||val.event_type === 'pdensity') return
if(this.allAlarmData.length > 20) {
this.allAlarmData.pop();
} else {
this.allAlarmData.unshift(val);
}
}
}
}
</script>
<style lang="stylus" scoped>
</style>
<template>
<div class="pic-content scrollbar">
<el-row v-if="carAlarmData.length > 0">
<!-- 交通事件类 -->
<!-- 机动车事件 -->
<el-col :span="22" :offset="1" class="pic-box" v-for="(item, index) in carAlarmData" :key="index" v-if="item.event_cate !== 'flow'">
<el-col :span="12" v-if='item.task_algo_type!="1"'>
<el-card :body-style="{ padding: 0 }">
<div class="img-wrap" @click="showInfo(index)">
<b class="img-border"></b>
<div class="picbackground">
<img :src="item.pic" class="photos"/>
</div>
</div>
</el-card>
</el-col>
<el-col :span="11" :offset="1" v-if="item.event_type === 'vehicle' || item.event_type === 'xcycle'">
<ul class="pic-info">
<!-- <li :title="item.shoot_date">
<span>抓拍日期:</span>
<span>{{ item.shoot_date }}</span>
</li>
<li :title="item.shoot_time">
<span>抓拍时间:</span>
<span>{{ item.shoot_time }}</span>
</li>
<li :title="item.location_name">
<span>地点名称:</span>
<span>{{ item.location_name }}</span>
</li> -->
<li v-if="item.event_type === 'vehicle'" :title="item.vehicle_plate_text">
<span>车牌号码:</span>
<span>{{ item.vehicle_plate_text }}</span>
</li>
<!-- <li v-if="item.event_type === 'vehicle'" :title="item.vehicle_body_type_text">
<span>车辆类型:</span>
<span>{{ item.vehicle_body_type_text }}</span>
</li> -->
<li v-if="item.event_type === 'vehicle'" :title="item.vehicle_body_color_text">
<span>车身颜色:</span>
<span>{{ item.vehicle_body_color_text }}</span>
</li>
<li v-if="item.event_type === 'vehicle'" :title="item.vehicle_body_logo_text">
<span>车辆品牌:</span>
<span>{{ item.vehicle_body_logo_text }}</span>
</li>
<li v-if="item.event_type === 'vehicle'" :title="item.vehicle_RefinedFeature_text">
<span>标志物:</span>
<span>{{ item.RefinedFeature_text }}</span>
</li>
<li v-if="item.illegalType" :title="item.illegalType">
<span>违法类型:</span>
<span>{{ item.illegalType }}</span>
</li>
</ul>
</el-col>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data(){
return{
carAlarmData:[]
}
},
props:["itemData"],
methods:{
showInfo: function(index) {
this.curPicData = this.carAlarmData[index];
if(this.curPicData) {
this.$emit("showDitail",this.curPicData)
}
}
},
created() {
},
mounted() {
},
watch:{
itemData(val){
if(val == '') {
this.carAlarmData = [];
}
if(val.event_cate == "traffic" && val.event_type=="vehicle") {
if(this.carAlarmData.length > 20) {
this.carAlarmData.pop();
}
this.carAlarmData.unshift(val);
}
}
}
}
</script>
<style lang="stylus" scoped>
</style>
<template>
<div class="pic-content scrollbar">
<el-row v-if="eventAlarmData.length > 0">
<!-- 交通事件类 -->
<!-- 机动车事件 -->
<el-col :span="22" :offset="1" class="pic-box" v-for="(item, index) in eventAlarmData" :key="index">
<el-col :span="12" v-if='item.task_algo_type!="1"'>
<el-card :body-style="{ padding: 0 }">
<div class="img-wrap" @click="showInfo(index)">
<b class="img-border"></b>
<div class="picbackground">
<img :src="item.pic" class="photos"/>
</div>
</div>
</el-card>
</el-col>
<el-col :span="12" v-if="item.event_type === 'vehicle' || item.event_type === 'xcycle'">
<ul class="pic-info">
<!-- <li :title="item.shoot_date">
<span>抓拍日期:</span>
<span>{{ item.shoot_date }}</span>
</li>
<li :title="item.shoot_time">
<span>抓拍时间:</span>
<span>{{ item.shoot_time }}</span>
</li>
<li :title="item.location_name">
<span>地点名称:</span>
<span>{{ item.location_name }}</span>
</li> -->
<li v-if="item.event_type === 'vehicle'" :title="item.vehicle_plate_text">
<span>车牌号码:</span>
<span>{{ item.vehicle_plate_text }}</span>
</li>
<!-- <li v-if="item.event_type === 'vehicle'" :title="item.vehicle_body_type_text">
<span>车辆类型:</span>
<span>{{ item.vehicle_body_type_text }}</span>
</li> -->
<li v-if="item.event_type === 'vehicle'" :title="item.vehicle_body_color_text">
<span>车身颜色:</span>
<span>{{ item.vehicle_body_color_text }}</span>
</li>
<li v-if="item.event_type === 'vehicle'" :title="item.vehicle_body_logo_text">
<span>车辆品牌:</span>
<span>{{ item.vehicle_body_logo_text }}</span>
</li>
<li v-if="item.event_type === 'vehicle'" :title="item.vehicle_RefinedFeature_text">
<span>标志物:</span>
<span>{{ item.RefinedFeature_text }}</span>
</li>
<!-- 非机动车 -->
<li v-if="item.event_type === 'xcycle'" :title="item.xcycle_type_text">
<span>骑车类型:</span>
<span>{{ item.xcycle_type_text }}</span>
</li>
<li v-if="item.event_type === 'xcycle'" :title="item.xcycle_color_type">
<span>车辆颜色:</span>
<span>{{ item.xcycle_color_type }}</span>
</li>
<li :title="item.driver_face_sex" v-if="item.event_type === 'xcycle'">
<span>性别:</span>
<span>{{ item.driver_face_sex }}</span>
</li>
<!-- <li v-if="item.event_type === 'xcycle'" :title="item.company">
<span>运营公司:</span>
<span>{{ item.company }}</span>
</li> -->
<li v-if="item.event_type === 'xcycle'" :title="item.driver_face_upbody_text">
<span>上身颜色:</span>
<span>{{ item.driver_face_upbody_text }}</span>
</li>
<li :title="item.driver_face_lobody_text" v-if="item.event_type === 'xcycle'">
<span>速度:</span>
<span>{{ item.location_speed }}</span>
</li>
<li :title="item.driver_face_lobody_text" v-if="item.event_type === 'xcycle'">
<span>戴帽子:</span>
<span>{{ item.driver_face_with_hats }}</span>
</li>
<!-- <li v-if="item.illegalType" :title="item.illegalType">
<span>违法类型:</span>
<span>{{ item.illegalType }}</span>
</li> -->
</ul>
</el-col>
<!-- 行人事件 区域人数-->
<el-col :span="12" v-if="item.event_type === 'pedestrian'">
<ul class="pic-info">
<!-- <li :title="item.shoot_date">
<span>抓拍日期:</span>
<span>{{ item.shoot_date }}</span>
</li>
<li :title="item.shoot_time">
<span>抓拍时间:</span>
<span>{{ item.shoot_time }}</span>
</li> -->
<li :title="item.driver_face_sex">
<span>性别:</span>
<span>{{ item.driver_face_sex }}</span>
</li>
<li :title="item.driver_face_upbody_text">
<span>上身颜色:</span>
<span>{{ item.driver_face_upbody_text }}</span>
</li>
<li :title="item.driver_face_lobody_text">
<span>下身颜色:</span>
<span>{{ item.driver_face_lobody_text }}</span>
</li>
<li :title="item.pedestrian_height">
<span>身高:</span>
<span>{{ item.pedestrian_height }}</span>
</li>
<li :title="item.driver_face_lobody_text">
<span>速度:</span>
<span>{{ item.location_speed }}</span>
</li>
<li :title="item.driver_face_lobody_text">
<span>戴帽子:</span>
<span>{{ item.driver_face_with_hats }}</span>
</li>
<!-- <li v-if="item.illegalType" :title="item.illegalType">
<span>违法类型:</span>
<span>{{ item.illegalType }}</span>
</li> -->
</ul>
</el-col>
<!--安防事件-->
<el-col :span="12" v-if="item.event_cate === 'behavior'">
<ul class="pic-info">
<li :title="getCode('安防事件',item.event_type)">
<span>事件类型:</span>
<span>{{ getCode('安防事件',item.event_type) }}</span>
</li>
<li :title="item.shoot_date">
<span>抓拍日期:</span>
<span>{{ item.shoot_date }}</span>
</li>
<li :title="item.shoot_time">
<span>抓拍时间:</span>
<span>{{ item.shoot_time }}</span>
</li>
<li v-if="item.event_type == '21'">
<span>区域人数:</span>
<span>{{ item.event_data.density.persons }}</span>
</li>
<!-- <li v-if="item.illegalType" :title="item.illegalType">
<span>违法类型:</span>
<span>{{ item.illegalType }}</span>
</li> -->
</ul>
</el-col>
</el-col>
<!--客流事件-->
<el-col :span="22" class="pic-box" v-for="(item, index) in eventAlarmData" :key="index" v-if="item.event_cate === 'flow'">
<el-col :span="24">
<ul class="pic-info">
<li :title="item.shoot_date">
<span class="flow-left">抓拍日期:</span>
<span class="flow-right">{{ item.shoot_date }}</span>
</li>
<li :title="item.shoot_time">
<span class="flow-left">抓拍时间:</span>
<span class="flow-right">{{ item.shoot_time }}</span>
</li>
<li :title="item.event_type_text">
<span class="flow-left">事件类型:</span>
<span class="flow-right">{{ item.event_type_text }}</span>
</li>
<li v-if="item.event_type === 'inout_num'" :title="item.inNum">
<span class="flow-left">进入人数:</span>
<span class="flow-right">{{ item.inNum }}</span>
</li>
<li v-if="item.event_type === 'inout_num'" :title="item.outNum">
<span class="flow-left">离开人数:</span>
<span class="flow-right">{{ item.outNum }}</span>
</li>
<li v-if="item.event_type === 'postions'" :title="item.areaPersons">
<span class="flow-left">区域人数:</span>
<span class="flow-right">{{ item.areaPersons }}</span>
</li>
</ul>
</el-col>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data(){
return{
eventAlarmData:[],
}
},
props:["itemData"],
methods:{
showInfo: function(index) {
this.curPicData = this.eventAlarmData[index];
if(this.curPicData) {
this.$emit("showDitail",this.curPicData)
}
}
},
created() {
},
mounted() {
},
watch:{
itemData(val){
if(val == '') {
this.eventAlarmData = [];
}
if(val.event_cate == "behavior"){
this.eventAlarmData.push(val);
}
}
}
}
</script>
<style scoped lang="stylus">
</style>
<template>
<div class="pic-content scrollbar">
<el-row v-if="illegalAlarmData.length > 0">
<!-- 交通事件类 -->
<!-- 机动车事件 -->
<el-col :span="22" :offset="1" class="pic-box" v-for="(item, index) in illegalAlarmData" :key="index" v-if="item.event_cate !== 'flow'">
<el-col :span="12" v-if='item.task_algo_type!="1"'>
<el-card :body-style="{ padding: 0 }">
<div class="img-wrap" @click="showInfo(index)">
<b class="img-border"></b>
<div class="picbackground">
<img v-lazy="item.pic" class="photos"/>
</div>
</div>
</el-card>
</el-col>
<el-col :span="12" v-if="item.event_type === 'vehicle' || item.event_type === 'xcycle'">
<ul class="pic-info">
<!-- <li :title="item.shoot_date">
<span>抓拍日期:</span>
<span>{{ item.shoot_date }}</span>
</li>
<li :title="item.shoot_time">
<span>抓拍时间:</span>
<span>{{ item.shoot_time }}</span>
</li>
<li :title="item.location_name">
<span>地点名称:</span>
<span>{{ item.location_name }}</span>
</li> -->
<li v-if="item.event_type === 'vehicle'" :title="item.vehicle_plate_text">
<span>车牌号码:</span>
<span>{{ item.vehicle_plate_text }}</span>
</li>
<!-- <li v-if="item.event_type === 'vehicle'" :title="item.vehicle_body_type_text">
<span>车辆类型:</span>
<span>{{ item.vehicle_body_type_text }}</span>
</li> -->
<li v-if="item.event_type === 'vehicle'" :title="item.vehicle_body_color_text">
<span>车身颜色:</span>
<span>{{ item.vehicle_body_color_text }}</span>
</li>
<li v-if="item.event_type === 'vehicle'" :title="item.vehicle_body_logo_text">
<span>车辆品牌:</span>
<span>{{ item.vehicle_body_logo_text }}</span>
</li>
<li v-if="item.event_type === 'vehicle'" :title="item.vehicle_plate_text">
<span>违法类型:</span>
<span>{{ item.illegalType}}</span>
</li>
<!-- 非机动车 -->
<li v-if="item.event_type === 'xcycle'" :title="item.xcycle_type_text">
<span>骑车类型:</span>
<span>{{ item.xcycle_type_text }}</span>
</li>
<li v-if="item.event_type === 'xcycle'" :title="item.xcycle_color_type">
<span>车辆颜色:</span>
<span>{{ item.xcycle_color_type }}</span>
</li>
<li :title="item.driver_face_lobody_text" v-if="item.event_type === 'xcycle'">
<span>速度:</span>
<span>{{ item.location_speed }}</span>
</li>
<li v-if="item.event_type === 'xcycle'">
<span>违法类型:</span>
<span>{{ item.illegalType}}</span>
</li>
</ul>
</el-col>
<!-- 行人事件 -->
<el-col :span="12" v-if="item.event_type === 'pedestrian'">
<ul class="pic-info">
<!-- <li :title="item.shoot_date">
<span>抓拍日期:</span>
<span>{{ item.shoot_date }}</span>
</li>
<li :title="item.shoot_time">
<span>抓拍时间:</span>
<span>{{ item.shoot_time }}</span>
</li> -->
<li :title="item.driver_face_sex">
<span>性别:</span>
<span>{{ item.driver_face_sex }}</span>
</li>
<li :title="item.pedestrian_height">
<span>身高:</span>
<span>{{ item.pedestrian_height }}</span>
</li>
<li :title="item.driver_face_lobody_text">
<span>速度:</span>
<span>{{ item.location_speed }}</span>
</li>
<li v-if="item.illegalType" :title="item.illegalType">
<span>违法类型:</span>
<span>{{ item.illegalType }}</span>
</li>
</ul>
</el-col>
<!--安防事件-->
<el-col :span="12" v-if="item.event_cate === 'behavior'">
<ul class="pic-info">
<li :title="item.shoot_date">
<span>抓拍日期:</span>
<span>{{ item.shoot_date }}</span>
</li>
<li :title="item.shoot_time">
<span>抓拍时间:</span>
<span>{{ item.shoot_time }}</span>
</li>
<li :title="getCode('安防事件',item.event_type)">
<span>事件类型:</span>
<span>{{ getCode('安防事件',item.event_type) }}</span>
</li>
<li v-if="item.illegalType" :title="item.illegalType">
<span>违法类型:</span>
<span>{{ item.illegalType }}</span>
</li>
</ul>
</el-col>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data(){
return{
illegalAlarmData:[]
}
},
props:["itemData"],
methods:{
showInfo: function(index) {
this.curPicData = this.illegalAlarmData[index];
if(this.curPicData) {
this.$emit("showDitail",this.curPicData)
}
}
},
created() {
},
mounted() {
},
watch:{
itemData(val){
if(val == '') {
this.illegalAlarmData = [];
return
}
if(val.illegalTypeCode && val.illegalTypeCode == 1) {
this.illegalAlarmData.push(val);
}
}
}
}
</script>
<style lang="stylus" scoped>
</style>
<template>
<div>
<el-tabs v-model="activeName2" @tab-click="handleClick">
<el-tab-pane label="全卡口" name="first">
<Allalarm @showDitail="showDitail" :itemData="resultData" ref="allalarm"></Allalarm>
</el-tab-pane>
<el-tab-pane label="机动车" name="second">
<CarAlarm @showDitail="showDitail" :itemData="resultData" ref="caralarm"></CarAlarm>
</el-tab-pane>
<el-tab-pane label="违法" name="third">
<IllegalAlarm @showDitail="showDitail" :itemData="resultData" ref="illegalalarm"></IllegalAlarm>
</el-tab-pane>
<el-tab-pane label="事件" name="fourth">
<Eventalarm @showDitail="showDitail" :itemData="resultData" ref="eventalarm"></Eventalarm>
</el-tab-pane>
</el-tabs>
<div>
<EventDetail ref="detail" @closeDetailModal="closeDetailModal" :curData="curdata"></EventDetail>
</div>
</div>
</template>
<script>
// 分类报警
import Allalarm from "./eventData/allEvent.vue";
import CarAlarm from "./eventData/carEvent.vue";
import IllegalAlarm from "./eventData/illegalEvent.vue";
import Eventalarm from "./eventData/eventAlarm.vue";
import EventDetail from "./eventDetail.vue";
import { mapState } from "vuex";
export default {
data() {
return {
activeName2: "first",
resultData: [],
connect_id: "",
curdata: "",
curentId: "",
cws: "",
keepAlive: ""
};
},
components: {
Allalarm,
CarAlarm,
IllegalAlarm,
Eventalarm,
EventDetail
},
computed: {
// ...mapState(["eventData", "wsclient"])
},
methods: {
handleClick(tab, event) {
console.log(tab, event);
},
dataInit(cid, type) {
this.resultData = "";
this.curType = type;
this.carItems = [];
let send_mesage =
'{"type":"request","connect_id": "' +
this.connect_id +
'","subtask_id":"' +
cid +
'"}';
console.log("当前任务id", cid);
this.cws.send(send_mesage);
this.curentId = cid;
},
showDitail(data) {
// this.$refs.ocxvido.show = false;
this.$refs.detail.detailInfo(data);
},
closeDetailModal() {
this.$store.commit("setocxstate", 1);
},
connectwebsocket(type) {
let that = this;
this.connect_id = new Date().getTime();
this.cws = new WebSocket(
"ws://" +
this.API.IP +
"/websocket/v1/recv_data/connects/" +
this.connect_id
);
this.cws.onopen = () => {
console.log("ws事件推送服务连接成功");
if (type == 1) {
let send_mesage =
'{"type":"request","connect_id": "' +
this.connect_id +
'","subtask_id":"' +
this.curentId +
'"}';
this.cws.send(send_mesage);
}
};
this.cws.onmessage = evt => {
let data = JSON.parse(evt.data);
if (data.command) {
} else if (data.type == "response") {
console.log("请求任务推送成功");
} else if (data.event_cate) {
//根据抓拍图片坐标显示精确位置
if (data.subtask_id != this.curentId) {
return;
}
if (data.event_cate != "flow") {
try {
data.picsEmpty = data.pics.length == 0 ? true : false;
if (data.pics[0].object_rect != undefined) {
data.bigpic =
data.pics[0].src_url ||
"data:image/jpeg;base64," + data.pics[0].pic_base64;
let img = new Image();
let picOffset = data.pics[0].object_rect;
let canvas = document.createElement("canvas");
canvas.width =
data.pics[0].width * (picOffset.right - picOffset.left) ||
189;
canvas.height =
data.pics[0].hight * (picOffset.bottom - picOffset.top) ||
246;
let ctx = canvas.getContext("2d");
//设置图片跨域访问
img.setAttribute("crossOrigin", "anonymous");
const that = this;
img.onload = function() {
//画图
let width = img.width * (picOffset.right - picOffset.left);
let height = img.height * (picOffset.bottom - picOffset.top);
if (width == 0) width = img.width;
if (height == 0) height = img.height;
ctx.drawImage(
img,
img.width * picOffset.left,
img.height * picOffset.top,
width,
height,
0,
0,
canvas.width,
canvas.height
);
// ctx.drawImage(img,0,0,width,height, 0, 0, canvas.width,canvas.height);
data.pic = canvas.toDataURL("image/jpeg");
};
img.src =
data.pics[0].src_url ||
"data:image/jpeg;base64," + data.pics[0].pic_base64;
} else {
data.pic =
data.pics[0].src_url ||
"data:image/jpeg;base64," + data.pics[0].pic_base64;
debugger;
data.bigpic =
data.pics[0].src_url ||
"data:image/jpeg;base64," + data.pics[0].pic_base64;
}
setTimeout(() => {
this.filterCode(data);
}, 500);
} catch (err) {
console.log(err);
}
}
}
};
try {
this.keepAlive = setInterval(() => {
let send_mesage =
'{"type":"request","id":"' +
new Date().getTime() +
'","mts":"' +
new Date().getTime() +
'","command": "get /websocket/v1/recv_data/connects/' +
this.connect_id +
'/keep_alive"}';
if (that.cws.readyState == 1) {
that.cws.send(send_mesage);
} else {
clearInterval(that.keepAlive);
that.connectwebsocket(1);
console.log("推送服务断开连接");
}
}, 20000);
} catch (err) {
console.log(err);
}
}
},
watch: {},
beforeMount() {
this.connectwebsocket();
//监听成功
this.cws.onopen = function() {
console.log("ws事件推送服务连接成功");
};
//监听断开
this.cws.onclose = function() {
window.clearInterval(this.keepAlive);
this.connectwebsocket(1);
};
},
beforeDestroy() {
this.cws.close();
try {
window.clearTimeout(this.keepAlive);
} catch (error) {}
}
};
</script>
<template>
<div>
<el-dialog
title="区域设置"
:visible.sync="dialogVisible"
width="1100px"
:before-close="beforeHideModal"
>
<TraficCanvas :bgUrl='bgUrl' v-if="type=='0' || type=='5'" ref='canvas'></TraficCanvas>
<FlowCanvas :bgUrl='bgUrl' v-if="type=='1'" ref='canvas'></FlowCanvas>
<SafeCanvas :bgUrl='bgUrl' v-if="type=='2'" ref='canvas'></SafeCanvas>
<FaceCanvas :bgUrl='bgUrl' v-if="type=='4'" ref='canvas'></FaceCanvas>
<ComplexCanvas :bgUrl='bgUrl' v-if="type=='7'" ref='canvas'></ComplexCanvas>
<span slot="footer" class="dialog-footer">
<el-button @click="beforeHideModal">取 消</el-button>
<el-button type="primary" @click="save">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import TraficCanvas from "./areaconfig/TraficCanvas";
import FlowCanvas from "./areaconfig/FlowCanvas";
import SafeCanvas from "./areaconfig/SafeCanvas";
import FaceCanvas from "./areaconfig/FaceCanvas";
import ComplexCanvas from "./areaconfig/ComplexCanvas";
export default {
data() {
return {
dialogVisible: false,
isShow: false,
type: '0',
btnIsactive: false,
showClose: false,
roiBody: {},
XMLStr: "",
taskData:'',
bgUrl:''
};
},
components: {
TraficCanvas,
SafeCanvas,
FlowCanvas,
FaceCanvas,
ComplexCanvas
},
methods: {
showModal: function(data,mtaskdata) {
var _this = this;
this.$store.commit('setocxstate',0)
this.taskData = mtaskdata;
this.dialogVisible =true;
this.type = data.algo_type;
// this.type = 2;
this.bgUrl = "";
//获取视频截图
this.$api.task.cutpic(mtaskdata.vchan.vdev_unid, mtaskdata.vchan.vchan_refid,mtaskdata.subtask_id).then(data => {
if (!data.ecode) {
this.bgUrl = "data:image/png;base64," + data.pic_base64;
debugger
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) {}
}, 500);
} else {
alert("区域设置截图失败!" + data.enote);
}
})
.catch(err => {
console.log("区域设置截图返回异常:", err.message);
});
setTimeout(() => {
_this.$refs.canvas.stageInit();
if (data.rois) {
_this.$refs.canvas.configInit(
data.rois[0].roi
);
}
}, 300);
},
beforeHideModal: function() {
this.$store.commit('setocxstate',1)
this.dialogVisible = false;
this.$refs.canvas.clear();
this.$refs.canvas.cindex = 0;
this.bgUrl = "";
},
getType: function() {
if (this.$parent.subTaskInfo) {
this.type = this.$parent.subTaskInfo.task_algo_type;
} else {
this.type = this.$parent.$parent.subTaskInfo.task_algo_type;
}
this.XMLStr = "";
this.btnIsactive = true;
try {
this.EditList(1);
} catch (error) {}
},
save: function() {
if (this.$refs.canvas.roadFlag === false) {
this.$alert("车道线有修改,请检查车道属性是否正确", "提示", {
confirmButtonText: "确定"
});
//xieminghui
// this.$refs.canvas.roadFlag = "confirm";
return;
}
let XMLStr = this.$refs.canvas.save();
if (this.type == "1" && (XMLStr === "dir" || XMLStr === "in")) {
this.$message({
type: "warning",
message: "请检查配置是否正确"
});
return;
}
this.$parent.submit(XMLStr, "roi", this.taskData);
this.beforeHideModal();
}
}
}
</script>
<style lang="stylus" scoped>
</style>
<template>
<div class='lightCanvas'>
<div class="pic3"><img :src="bgUrl" /></div>
<canvas id="c3" @click='canvasCLick' width="200" height="200"> <!--宽高写在html里,写在css里有问题-->
<span>该浏览器不支持canvas内容</span> <!--对于不支持canvas的浏览器显示-->
</canvas>
</div>
</template>
<script>
export default {
name: 'LightCanvas',
data() {
return{
bgUrl: '',
cirAry:[],
ctx: {}
}
},
methods: {
imgSize: function (w,h) {
},
canvasCLick: function (e) {
if (this.cirAry.length==4) {
this.$message({
type:'info',
message:'最多只能设置四个点'
})
return
}
var e = e || window.event;
let currentC = [e.offsetX,e.offsetY];
let flag = this.isAddCircle(this.cirAry,currentC)
if (flag===true) {
this.cirAry.push(currentC)
this.$parent.lightCancle = true
if (this.cirAry.length==4) {
this.$parent.lightNextBtn = true
}
}else{
alert('与其他点重合,请重新选择')
}
this.draw()
},
draw: function () {
this.ctx.clearRect(0, 0, 200, 200);
let that = this;
this.cirAry.forEach(function (ele,index) {
that.drawCircle(ele,'yellow')
if (index>0) {
that.drawLine(ele,that.cirAry[index-1],'yellow')
}
if (index==3) {
that.drawLine(ele,that.cirAry[0],'yellow')
}
})
},
drawCircle: function(ary, color, r) {
var r = r ? r : 2
this.ctx.beginPath();
this.ctx.arc(ary[0], ary[1], r, 0, 2 * Math.PI);
this.ctx.fillStyle = color;
this.ctx.fill();
},
drawLine: function(c1, c2, color, w) {
var width = w ? w : 2;
this.ctx.lineWidth = width;
this.ctx.strokeStyle = color;
this.ctx.moveTo(c1[0], c1[1]);
this.ctx.lineTo(c2[0], c2[1]);
this.ctx.stroke();
},
isAddCircle: function(ary, currentC) {
let flag = true;
for(let i = 0; i < ary.length; i++) {
let distance = Math.sqrt(Math.pow(ary[i][0] - currentC[0], 2) + Math.pow(ary[i][1] - currentC[1], 2));
if(distance < 6) {
flag = i;
break;
}
}
return flag
},
cancle: function () {
this.cirAry.pop()
if (this.cirAry.length==0) {
this.$parent.lightCancle = false
}
this.$parent.lightNextBtn = false
this.draw()
}
},
mounted() { 
this.ctx = document.getElementById('c3').getContext('2d');
}
}
</script>
<style scoped>
.lightCanvas{
position: relative;
height:230px;
padding-top: 10px;
}
.pic3 {
position: absolute;
top: 0;
left: 0;
width:200px;
height:200px;
left:150px;
top:10px
}
.pic3 img {
margin: 0;
padding: 0;
width:200px;
height:200px
}
canvas {
position: absolute;
margin: 0;
padding: 0;
left:150px;
top:10px
}
</style>
\ No newline at end of file \ No newline at end of file
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!