展示页面

package.json

@@ -37,6 +37,8 @@
     "node-sass": "^4.12.0",
     "prettier": "^1.18.2",
     "sass-loader": "^8.0.0",
+    "stylus": "^0.54.7",
+    "stylus-loader": "^3.0.2",
     "vue-template-compiler": "^2.6.10"
   },
   "eslintConfig": {

public/css/element_reset/detail.css

+input {
+    width: 100% !important;
+}
+
+.el-pagination__editor {
+    width: 30px !important;
+    /* padding-top: 0 !important; */
+}
\ No newline at end of file

public/css/element_reset/style.css

+.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;
+}

public/css/element_reset/template.css

+.detail-modal .el-dialog--small {
+     width: 56% !important; 
+}
\ No newline at end of file

public/css/iconfont.css

+
+@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"; }
+

public/css/iframe/common.css

+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

public/index.html

@@ -6,12 +6,16 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <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>
   <body>
     <noscript>
-      <strong>We're sorry but fanxing doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      <strong></strong>
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->
+   
   </body>
 </html>

public/infoDialog.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

public/libs/my97/lang/zh-cn.js

+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

public/libs/my97/skin/WdatePicker.css

+.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

public/libs/my97/skin/simple/datepicker.css

+/* 
+ * 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

public/libs/xml.js

+(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

public/xml/VasconfigVal.xml

+<?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>

src/App.vue

@@ -6,6 +6,7 @@
 
 <style lang="scss">
 #app {
+  height: 100%;
   font-family:MicrosoftYaHeiUI;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

src/api/apiList.js

-import map from './map'
-import login from './login'
-import task from './taskManage'
-import search from './search'
+import map from "./map";
+import login from "./login";
+import task from "./task";
 export default {
   map,
   login,
-  task,
-  search
-}
\ No newline at end of file
+  task
+};

src/api/login/urls.js

-import baseUrl from '../baseUrl'
+import baseUrl from "../baseUrl";
 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
+  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/"
+};

src/api/task/index.js

+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));
+  }
+};

src/api/task/urls.js

+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()}`; // 切换任务
+  }
+};

src/assets/css/public.css

+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

src/assets/javscript/CalibrationCalc.js

+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
+}
+
+
+

src/assets/javscript/Camera_Parameters.js

+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

src/assets/javscript/configxml.js

+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

src/assets/javscript/positionOperate.js

+//---------------预置位操作------------
+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

src/assets/javscript/positionOperateByVido.js

+//摄像机预置位控制类
+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

src/main.js

 import Vue from "vue";
 import App from "./App.vue";
-import ElementUI from 'element-ui';
-import 'element-ui/lib/theme-chalk/index.css';
+import ElementUI from "element-ui";
+import "element-ui/lib/theme-chalk/index.css";
 import router from "./router";
 import store from "./store";
-import resetCss from './assets/resetElementCss/index.css'
-import api from './api/install'
-import echarts from 'echarts'
-import './assets/icon/iconfont.css'
-import moment from 'moment'
-import {buildCode} from './assets/js/buildcodes.js'
+import resetCss from "./assets/resetElementCss/index.css";
+import api from "./api/install";
+import "./assets/css/public.css";
+import echarts from "echarts";
+import "./assets/icon/iconfont.css";
+import buildCode from "../src/assets/js/buildcodes";
+import moment from "moment";
 Vue.prototype.$echarts = echarts;
 Vue.prototype.$moment = moment;
 Vue.prototype.$buildCode = buildCode;
-Vue.use(api)
-Vue.use(ElementUI, { size: 'small', zIndex: 3000 });
+Vue.prototype.oParse = new XML.ObjTree();
+Vue.use(api);
+Vue.use(ElementUI, { size: "small", zIndex: 3000 });
 Vue.use(resetCss);
 
 Vue.config.productionTip = false;

src/store/index.js

-import Vue from 'vue'
-import Vuex from 'vuex'
+import Vue from "vue";
+import Vuex from "vuex";
 
-Vue.use(Vuex)
+Vue.use(Vuex);
 
-import getters from './getters'
-import actions from './actions'
-import users from './modules/login'
+import getters from "./getters";
+import actions from "./actions";
+import mutations from "./mutaition";
+import users from "./modules/login";
+import state from "./state";
 // 导出 store 对象
 export default new Vuex.Store({
   getters,
   actions,
-    modules:{
+  mutations,
+  state,
+  modules: {
     users
   }
-})
\ No newline at end of file
+});

src/store/mutaition.js

+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;
+  }
+};

src/store/state.js

+export default {
+  ocxstate: 0
+}

src/views/Home.vue

 <template>
   <div class="home">
-    <el-container>
+    <el-container class="home-box">
       <el-header class="headers">
 		  <img class="logoImg" src="../assets/img/home/logo.png" alt="">
 		  <div class="headRight">
@@ -81,3 +81,6 @@ export default {
   }
 };
 </script>
+<style lang="stylus" scoped>
+
+</style>

src/views/public/infodialog.vue

+<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>
+

src/views/sceneManage/eventData/allEvent.vue

+<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>

src/views/sceneManage/eventData/carEvent.vue

+<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>

src/views/sceneManage/eventData/eventAlarm.vue

+<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>

src/views/sceneManage/eventData/illegalEvent.vue

+<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>

src/views/sceneManage/eventTab.vue

+<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>

src/views/sceneManage/setting/area.vue

+<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>

src/views/sceneManage/setting/areaconfig/LightCanvas.vue

+<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