展示页面

package.json

@@ -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": {

public/css/easyui/easyui.css

+.panel {
+  overflow: hidden;
+  text-align: left;
+  margin: 0;
+  border: 0;
+  -moz-border-radius: 0 0 0 0;
+  -webkit-border-radius: 0 0 0 0;
+  border-radius: 0 0 0 0;
+}
+
+.panel-header {
+  padding: 5px;
+  position: relative;
+}
+
+.panel-header-noborder {
+  border-width: 0 0 1px 0;
+}
+.panel-body {
+  overflow: auto;
+  border-top-width: 0;
+  padding: 0;
+}
+.panel-body-noheader {
+  border-top-width: 1px;
+}
+.panel-body-noborder {
+  border-width: 0px;
+}
+.panel-body-nobottom {
+  border-bottom-width: 0;
+}
+.panel-with-icon {
+  padding-left: 18px;
+}
+.panel-icon,
+.panel-tool {
+  position: absolute;
+  top: 50%;
+  margin-top: -8px;
+  height: 16px;
+  overflow: hidden;
+}
+.panel-icon {
+  left: 5px;
+  width: 16px;
+}
+.panel-tool {
+  right: 5px;
+  width: auto;
+}
+.panel-tool a {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  opacity: 0.6;
+  filter: alpha(opacity=60);
+  margin: 0 0 0 2px;
+  vertical-align: top;
+}
+.panel-tool a:hover {
+  opacity: 1;
+  filter: alpha(opacity=100);
+  background-color: #eaf2ff;
+  -moz-border-radius: 3px 3px 3px 3px;
+  -webkit-border-radius: 3px 3px 3px 3px;
+  border-radius: 3px 3px 3px 3px;
+}
+.panel-loading {
+  padding: 11px 0px 10px 30px;
+}
+.panel-noscroll {
+  overflow: hidden;
+}
+.panel-fit,
+.panel-fit body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+}
+.panel-loading {
+  background: url('images/loading.gif') no-repeat 10px 10px;
+}
+.panel-tool-close {
+  background: url('images/panel_tools.png') no-repeat -16px 0px;
+}
+.panel-tool-min {
+  background: url('images/panel_tools.png') no-repeat 0px 0px;
+}
+.panel-tool-max {
+  background: url('images/panel_tools.png') no-repeat 0px -16px;
+}
+.panel-tool-restore {
+  background: url('images/panel_tools.png') no-repeat -16px -16px;
+}
+.panel-tool-collapse {
+  background: url('images/panel_tools.png') no-repeat -32px 0;
+}
+.panel-tool-expand {
+  background: url('images/panel_tools.png') no-repeat -32px -16px;
+}
+
+.panel-header {
+  background: transparent
+}
+.panel-body {
+  background-color: transparent;
+  color: #fff;
+  font-size: 12px;
+}
+.panel-title {
+  font-size: 20px;
+  font-weight: bold;
+  color: #fff;
+  height: 16px;
+  line-height: 16px;
+}
+.panel-footer {
+  border: 1px solid #95B8E7;
+  overflow: hidden;
+  background: #F4F4F4;
+}
+.panel-footer-noborder {
+  border-width: 1px 0 0 0;
+}
+.panel-hleft,
+.panel-hright {
+  position: relative;
+}
+.panel-hleft>.panel-body,
+.panel-hright>.panel-body {
+  position: absolute;
+}
+.panel-hleft>.panel-header {
+  float: left;
+}
+.panel-hright>.panel-header {
+  float: right;
+}
+.panel-hleft>.panel-body {
+  border-top-width: 1px;
+  border-left-width: 0;
+}
+.panel-hright>.panel-body {
+  border-top-width: 1px;
+  border-right-width: 0;
+}
+.panel-hleft>.panel-body-nobottom {
+  border-bottom-width: 1px;
+  border-right-width: 0;
+}
+.panel-hright>.panel-body-nobottom {
+  border-bottom-width: 1px;
+  border-left-width: 0;
+}
+.panel-hleft>.panel-footer {
+  position: absolute;
+  right: 0;
+}
+.panel-hright>.panel-footer {
+  position: absolute;
+  left: 0;
+}
+.panel-hleft>.panel-header-noborder {
+  border-width: 0 1px 0 0;
+}
+.panel-hright>.panel-header-noborder {
+  border-width: 0 0 0 1px;
+}
+.panel-hleft>.panel-body-noborder {
+  border-width: 0;
+}
+.panel-hright>.panel-body-noborder {
+  border-width: 0;
+}
+.panel-hleft>.panel-body-noheader {
+  border-left-width: 1px;
+}
+.panel-hright>.panel-body-noheader {
+  border-right-width: 1px;
+}
+.panel-hleft>.panel-footer-noborder {
+  border-width: 0 0 0 1px;
+}
+.panel-hright>.panel-footer-noborder {
+  border-width: 0 1px 0 0;
+}
+.panel-hleft>.panel-header .panel-icon,
+.panel-hright>.panel-header .panel-icon {
+  margin-top: 0;
+  top: 5px;
+}
+.panel-hleft>.panel-header .panel-title,
+.panel-hright>.panel-header .panel-title {
+  position: absolute;
+  min-width: 16px;
+  left: 21px;
+  top: 5px;
+  bottom: auto;
+  white-space: nowrap;
+  word-wrap: normal;
+  -webkit-transform: rotate(90deg);
+  -webkit-transform-origin: 0 0;
+  -moz-transform: rotate(90deg);
+  -moz-transform-origin: 0 0;
+  -o-transform: rotate(90deg);
+  -o-transform-origin: 0 0;
+  transform: rotate(90deg);
+  transform-origin: 0 0;
+}
+.panel-hleft>.panel-header .panel-title-up,
+.panel-hright>.panel-header .panel-title-up {
+  position: absolute;
+  min-width: 16px;
+  left: 21px;
+  top: auto;
+  bottom: 5px;
+  text-align: right;
+  white-space: nowrap;
+  word-wrap: normal;
+  -webkit-transform: rotate(-90deg);
+  -webkit-transform-origin: 0 0;
+  -moz-transform: rotate(-90deg);
+  -moz-transform-origin: 0 0;
+  -o-transform: rotate(-90deg);
+  -o-transform-origin: 0 0;
+  transform: rotate(-90deg);
+  transform-origin: 0 16px;
+}
+.panel-hleft>.panel-header .panel-with-icon.panel-title-up,
+.panel-hright>.panel-header .panel-with-icon.panel-title-up {
+  padding-left: 0;
+  padding-right: 18px;
+}
+.panel-hleft>.panel-header .panel-tool,
+.panel-hright>.panel-header .panel-tool {
+  top: auto;
+  bottom: 5px;
+  width: 16px;
+  height: auto;
+  left: 50%;
+  margin-left: -8px;
+  margin-top: 0;
+}
+.panel-hleft>.panel-header .panel-tool a,
+.panel-hright>.panel-header .panel-tool a {
+  margin: 2px 0 0 0;
+}
+.accordion {
+  overflow: hidden;
+  border-width: 1px;
+  border-style: solid;
+}
+.accordion .accordion-header {
+  border-width: 0 0 1px;
+  cursor: pointer;
+}
+.accordion .accordion-body {
+  border-width: 0 0 1px;
+}
+.accordion-noborder {
+  border-width: 0;
+}
+.accordion-noborder .accordion-header {
+  border-width: 0 0 1px;
+}
+.accordion-noborder .accordion-body {
+  border-width: 0 0 1px;
+}
+.accordion-collapse {
+  background: url('images/accordion_arrows.png') no-repeat 0 0;
+}
+.accordion-expand {
+  background: url('images/accordion_arrows.png') no-repeat -16px 0;
+}
+.accordion {
+  background: #ffffff;
+  border-color: #95B8E7;
+}
+.accordion .accordion-header {
+  background: #E0ECFF;
+  filter: none;
+}
+.accordion .accordion-header-selected {
+  background: #ffe48d;
+}
+.accordion .accordion-header-selected .panel-title {
+  color: #000000;
+}
+.accordion .panel-last > .accordion-header {
+  border-bottom-color: #E0ECFF;
+}
+.accordion .panel-last > .accordion-body {
+  border-bottom-color: #ffffff;
+}
+.accordion .panel-last > .accordion-header-selected,
+.accordion .panel-last > .accordion-header-border {
+  border-bottom-color: #95B8E7;
+}
+.accordion> .panel-hleft {
+  float: left;
+}
+.accordion> .panel-hleft>.panel-header {
+  border-width: 0 1px 0 0;
+}
+.accordion> .panel-hleft> .panel-body {
+  border-width: 0 1px 0 0;
+}
+.accordion> .panel-hleft.panel-last > .accordion-header {
+  border-right-color: #E0ECFF;
+}
+.accordion> .panel-hleft.panel-last > .accordion-body {
+  border-right-color: #ffffff;
+}
+.accordion> .panel-hleft.panel-last > .accordion-header-selected,
+.accordion> .panel-hleft.panel-last > .accordion-header-border {
+  border-right-color: #95B8E7;
+}
+.accordion> .panel-hright {
+  float: right;
+}
+.accordion> .panel-hright>.panel-header {
+  border-width: 0 0 0 1px;
+}
+.accordion> .panel-hright> .panel-body {
+  border-width: 0 0 0 1px;
+}
+.accordion> .panel-hright.panel-last > .accordion-header {
+  border-left-color: #E0ECFF;
+}
+.accordion> .panel-hright.panel-last > .accordion-body {
+  border-left-color: #ffffff;
+}
+.accordion> .panel-hright.panel-last > .accordion-header-selected,
+.accordion> .panel-hright.panel-last > .accordion-header-border {
+  border-left-color: #95B8E7;
+}
+.window {
+  overflow: hidden;
+  padding: 5px;
+  border-width: 1px;
+  border-style: solid;
+}
+.window .window-header {
+  background: transparent;
+  padding: 0px 0px 6px 0px;
+}
+.window .window-body {
+  border-width: 1px;
+  border-style: solid;
+  border-top-width: 0px;
+}
+.window .window-body-noheader {
+  border-top-width: 1px;
+}
+.window .panel-body-nobottom {
+  border-bottom-width: 0;
+}
+.window .window-header .panel-icon,
+.window .window-header .panel-tool {
+  top: 50%;
+  margin-top: -11px;
+}
+.window .window-header .panel-icon {
+  left: 1px;
+}
+.window .window-header .panel-tool {
+  right: 1px;
+}
+.window .window-header .panel-with-icon {
+  padding-left: 18px;
+}
+.window-proxy {
+  position: absolute;
+  overflow: hidden;
+}
+.window-proxy-mask {
+  position: absolute;
+  filter: alpha(opacity=5);
+  opacity: 0.05;
+}
+.window-mask {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  filter: alpha(opacity=40);
+  opacity: 0.40;
+  font-size: 1px;
+  overflow: hidden;
+}
+.window,
+.window-shadow {
+  position: absolute;
+  -moz-border-radius: 5px 5px 5px 5px;
+  -webkit-border-radius: 5px 5px 5px 5px;
+  border-radius: 5px 5px 5px 5px;
+}
+.window-shadow {
+  background: #ccc;
+  -moz-box-shadow: 2px 2px 3px #cccccc;
+  -webkit-box-shadow: 2px 2px 3px #cccccc;
+  box-shadow: 2px 2px 3px #cccccc;
+  filter: progid:DXImageTransform.Microsoft.Blur(pixelRadius=2,MakeShadow=false,ShadowOpacity=0.2);
+}
+.window,
+.window .window-body {
+  border-color: #95B8E7;
+}
+.window {
+  background-color: #E0ECFF;
+  background: -webkit-linear-gradient(top,#EFF5FF 0,#E0ECFF 20%);
+  background: -moz-linear-gradient(top,#EFF5FF 0,#E0ECFF 20%);
+  background: -o-linear-gradient(top,#EFF5FF 0,#E0ECFF 20%);
+  background: linear-gradient(to bottom,#EFF5FF 0,#E0ECFF 20%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#EFF5FF,endColorstr=#E0ECFF,GradientType=0);
+}
+.window-proxy {
+  border: 1px dashed #95B8E7;
+}
+.window-proxy-mask,
+.window-mask {
+  background: #ccc;
+}
+.window .panel-footer {
+  border: 1px solid #95B8E7;
+  position: relative;
+  top: -1px;
+}
+.window-thinborder {
+  padding: 0;
+}
+.window-thinborder .window-header {
+  padding: 5px 5px 6px 5px;
+}
+.window-thinborder .window-body {
+  border-width: 0px;
+}
+.window-thinborder .window-header .panel-icon,
+.window-thinborder .window-header .panel-tool {
+  margin-top: -9px;
+  margin-left: 5px;
+  margin-right: 5px;
+}
+.window-noborder {
+  border: 0;
+}
+.window.panel-hleft .window-header {
+  padding: 0 6px 0 0;
+}
+.window.panel-hright .window-header {
+  padding: 0 0 0 6px;
+}
+.window.panel-hleft>.panel-header .panel-title {
+  top: auto;
+  left: 16px;
+}
+.window.panel-hright>.panel-header .panel-title {
+  top: auto;
+  right: 16px;
+}
+.window.panel-hleft>.panel-header .panel-title-up,
+.window.panel-hright>.panel-header .panel-title-up {
+  bottom: 0;
+}
+.window.panel-hleft .window-body {
+  border-width: 1px 1px 1px 0;
+}
+.window.panel-hright .window-body {
+  border-width: 1px 0 1px 1px;
+}
+.window.panel-hleft .window-header .panel-icon {
+  top: 1px;
+  margin-top: 0;
+  left: 0;
+}
+.window.panel-hright .window-header .panel-icon {
+  top: 1px;
+  margin-top: 0;
+  left: auto;
+  right: 1px;
+}
+.window.panel-hleft .window-header .panel-tool,
+.window.panel-hright .window-header .panel-tool {
+  margin-top: 0;
+  top: auto;
+  bottom: 1px;
+  right: auto;
+  margin-right: 0;
+  left: 50%;
+  margin-left: -11px;
+}
+.window.panel-hright .window-header .panel-tool {
+  left: auto;
+  right: 1px;
+}
+.window-thinborder.panel-hleft .window-header {
+  padding: 5px 6px 5px 5px;
+}
+.window-thinborder.panel-hright .window-header {
+  padding: 5px 5px 5px 6px;
+}
+.window-thinborder.panel-hleft>.panel-header .panel-title {
+  left: 21px;
+}
+.window-thinborder.panel-hleft>.panel-header .panel-title-up,
+.window-thinborder.panel-hright>.panel-header .panel-title-up {
+  bottom: 5px;
+}
+.window-thinborder.panel-hleft .window-header .panel-icon,
+.window-thinborder.panel-hright .window-header .panel-icon {
+  margin-top: 5px;
+}
+.window-thinborder.panel-hleft .window-header .panel-tool,
+.window-thinborder.panel-hright .window-header .panel-tool {
+  left: 16px;
+  bottom: 5px;
+}
+.dialog-content {
+  overflow: auto;
+}
+.dialog-toolbar {
+  position: relative;
+  padding: 2px 5px;
+}
+.dialog-tool-separator {
+  float: left;
+  height: 24px;
+  border-left: 1px solid #ccc;
+  border-right: 1px solid #fff;
+  margin: 2px 1px;
+}
+.dialog-button {
+  position: relative;
+  top: -1px;
+  padding: 5px;
+  text-align: right;
+}
+.dialog-button .l-btn {
+  margin-left: 5px;
+}
+.dialog-toolbar,
+.dialog-button {
+  background: #F4F4F4;
+  border-width: 1px;
+  border-style: solid;
+}
+.dialog-toolbar {
+  border-color: #95B8E7 #95B8E7 #dddddd #95B8E7;
+}
+.dialog-button {
+  border-color: #dddddd #95B8E7 #95B8E7 #95B8E7;
+}
+.window-thinborder .dialog-toolbar {
+  border-left: transparent;
+  border-right: transparent;
+  border-top-color: #F4F4F4;
+}
+.window-thinborder .dialog-button {
+  top: 0px;
+  padding: 5px 8px 8px 8px;
+  border-left: transparent;
+  border-right: transparent;
+  border-bottom: transparent;
+}
+.l-btn {
+  text-decoration: none;
+  display: inline-block;
+  overflow: hidden;
+  margin: 0;
+  padding: 0;
+  cursor: pointer;
+  outline: none;
+  text-align: center;
+  vertical-align: middle;
+  line-height: normal;
+}
+.l-btn-plain {
+  border-width: 0;
+  padding: 1px;
+}
+.l-btn-left {
+  display: inline-block;
+  position: relative;
+  overflow: hidden;
+  margin: 0;
+  padding: 0;
+  vertical-align: top;
+}
+.l-btn-text {
+  display: inline-block;
+  vertical-align: top;
+  width: auto;
+  line-height: 24px;
+  font-size: 12px;
+  padding: 0;
+  margin: 0 4px;
+}
+.l-btn-icon {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  line-height: 16px;
+  position: absolute;
+  top: 50%;
+  margin-top: -8px;
+  font-size: 1px;
+}
+.l-btn span span .l-btn-empty {
+  display: inline-block;
+  margin: 0;
+  width: 16px;
+  height: 24px;
+  font-size: 1px;
+  vertical-align: top;
+}
+.l-btn span .l-btn-icon-left {
+  padding: 0 0 0 20px;
+  background-position: left center;
+}
+.l-btn span .l-btn-icon-right {
+  padding: 0 20px 0 0;
+  background-position: right center;
+}
+.l-btn-icon-left .l-btn-text {
+  margin: 0 4px 0 24px;
+}
+.l-btn-icon-left .l-btn-icon {
+  left: 4px;
+}
+.l-btn-icon-right .l-btn-text {
+  margin: 0 24px 0 4px;
+}
+.l-btn-icon-right .l-btn-icon {
+  right: 4px;
+}
+.l-btn-icon-top .l-btn-text {
+  margin: 20px 4px 0 4px;
+}
+.l-btn-icon-top .l-btn-icon {
+  top: 4px;
+  left: 50%;
+  margin: 0 0 0 -8px;
+}
+.l-btn-icon-bottom .l-btn-text {
+  margin: 0 4px 20px 4px;
+}
+.l-btn-icon-bottom .l-btn-icon {
+  top: auto;
+  bottom: 4px;
+  left: 50%;
+  margin: 0 0 0 -8px;
+}
+.l-btn-left .l-btn-empty {
+  margin: 0 4px;
+  width: 16px;
+}
+.l-btn-plain:hover {
+  padding: 0;
+}
+.l-btn-focus {
+  outline: #0000FF dotted thin;
+}
+.l-btn-large .l-btn-text {
+  line-height: 40px;
+}
+.l-btn-large .l-btn-icon {
+  width: 32px;
+  height: 32px;
+  line-height: 32px;
+  margin-top: -16px;
+}
+.l-btn-large .l-btn-icon-left .l-btn-text {
+  margin-left: 40px;
+}
+.l-btn-large .l-btn-icon-right .l-btn-text {
+  margin-right: 40px;
+}
+.l-btn-large .l-btn-icon-top .l-btn-text {
+  margin-top: 36px;
+  line-height: 24px;
+  min-width: 32px;
+}
+.l-btn-large .l-btn-icon-top .l-btn-icon {
+  margin: 0 0 0 -16px;
+}
+.l-btn-large .l-btn-icon-bottom .l-btn-text {
+  margin-bottom: 36px;
+  line-height: 24px;
+  min-width: 32px;
+}
+.l-btn-large .l-btn-icon-bottom .l-btn-icon {
+  margin: 0 0 0 -16px;
+}
+.l-btn-large .l-btn-left .l-btn-empty {
+  margin: 0 4px;
+  width: 32px;
+}
+.l-btn {
+  color: #444;
+  background: #fafafa;
+  background-repeat: repeat-x;
+  border: 1px solid #bbb;
+  background: -webkit-linear-gradient(top,#ffffff 0,#eeeeee 100%);
+  background: -moz-linear-gradient(top,#ffffff 0,#eeeeee 100%);
+  background: -o-linear-gradient(top,#ffffff 0,#eeeeee 100%);
+  background: linear-gradient(to bottom,#ffffff 0,#eeeeee 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff,endColorstr=#eeeeee,GradientType=0);
+  -moz-border-radius: 5px 5px 5px 5px;
+  -webkit-border-radius: 5px 5px 5px 5px;
+  border-radius: 5px 5px 5px 5px;
+}
+.l-btn:hover {
+  background: #eaf2ff;
+  color: #000000;
+  border: 1px solid #b7d2ff;
+  filter: none;
+}
+.l-btn-plain {
+  background: transparent;
+  border-width: 0;
+  filter: none;
+}
+.l-btn-outline {
+  border-width: 1px;
+  border-color: #b7d2ff;
+  padding: 0;
+}
+.l-btn-plain:hover {
+  background: #eaf2ff;
+  color: #000000;
+  border: 1px solid #b7d2ff;
+  -moz-border-radius: 5px 5px 5px 5px;
+  -webkit-border-radius: 5px 5px 5px 5px;
+  border-radius: 5px 5px 5px 5px;
+}
+.l-btn-disabled,
+.l-btn-disabled:hover {
+  opacity: 0.5;
+  cursor: default;
+  background: #fafafa;
+  color: #444;
+  background: -webkit-linear-gradient(top,#ffffff 0,#eeeeee 100%);
+  background: -moz-linear-gradient(top,#ffffff 0,#eeeeee 100%);
+  background: -o-linear-gradient(top,#ffffff 0,#eeeeee 100%);
+  background: linear-gradient(to bottom,#ffffff 0,#eeeeee 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff,endColorstr=#eeeeee,GradientType=0);
+}
+.l-btn-disabled .l-btn-text,
+.l-btn-disabled .l-btn-icon {
+  filter: alpha(opacity=50);
+}
+.l-btn-plain-disabled,
+.l-btn-plain-disabled:hover {
+  background: transparent;
+  filter: alpha(opacity=50);
+}
+.l-btn-selected,
+.l-btn-selected:hover {
+  background: #ddd;
+  filter: none;
+}
+.l-btn-plain-selected,
+.l-btn-plain-selected:hover {
+  background: #ddd;
+}
+.textbox {
+  position: relative;
+  border: 1px solid #95B8E7;
+  background-color: #fff;
+  vertical-align: middle;
+  display: inline-block;
+  overflow: hidden;
+  white-space: nowrap;
+  margin: 0;
+  padding: 0;
+  -moz-border-radius: 5px 5px 5px 5px;
+  -webkit-border-radius: 5px 5px 5px 5px;
+  border-radius: 5px 5px 5px 5px;
+}
+.textbox .textbox-text {
+  font-size: 12px;
+  border: 0;
+  margin: 0;
+  padding: 4px;
+  white-space: normal;
+  vertical-align: top;
+  outline-style: none;
+  resize: none;
+  -moz-border-radius: 5px 5px 5px 5px;
+  -webkit-border-radius: 5px 5px 5px 5px;
+  border-radius: 5px 5px 5px 5px;
+}
+.textbox .textbox-text::-ms-clear,
+.textbox .textbox-text::-ms-reveal {
+  display: none;
+}
+.textbox textarea.textbox-text {
+  white-space: pre-wrap;
+}
+.textbox .textbox-prompt {
+  font-size: 12px;
+  color: #aaa;
+}
+.textbox .textbox-bgicon {
+  background-position: 3px center;
+  padding-left: 21px;
+}
+.textbox .textbox-button,
+.textbox .textbox-button:hover {
+  position: absolute;
+  top: 0;
+  padding: 0;
+  vertical-align: top;
+  -moz-border-radius: 0 0 0 0;
+  -webkit-border-radius: 0 0 0 0;
+  border-radius: 0 0 0 0;
+}
+.textbox .textbox-button-right,
+.textbox .textbox-button-right:hover {
+  right: 0;
+  border-width: 0 0 0 1px;
+}
+.textbox .textbox-button-left,
+.textbox .textbox-button-left:hover {
+  left: 0;
+  border-width: 0 1px 0 0;
+}
+.textbox .textbox-button-top,
+.textbox .textbox-button-top:hover {
+  left: 0;
+  border-width: 0 0 1px 0;
+}
+.textbox .textbox-button-bottom,
+.textbox .textbox-button-bottom:hover {
+  top: auto;
+  bottom: 0;
+  left: 0;
+  border-width: 1px 0 0 0;
+}
+.textbox-addon {
+  position: absolute;
+  top: 0;
+}
+.textbox-label {
+  display: inline-block;
+  width: 80px;
+  height: 22px;
+  line-height: 22px;
+  vertical-align: middle;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin: 0;
+  padding-right: 5px;
+}
+.textbox-label-after {
+  padding-left: 5px;
+  padding-right: 0;
+}
+.textbox-label-top {
+  display: block;
+  width: auto;
+  padding: 0;
+}
+.textbox-disabled,
+.textbox-label-disabled {
+  opacity: 0.6;
+  filter: alpha(opacity=60);
+}
+.textbox-icon {
+  display: inline-block;
+  width: 18px;
+  height: 20px;
+  overflow: hidden;
+  vertical-align: top;
+  background-position: center center;
+  cursor: pointer;
+  opacity: 0.6;
+  filter: alpha(opacity=60);
+  text-decoration: none;
+  outline-style: none;
+}
+.textbox-icon-disabled,
+.textbox-icon-readonly {
+  cursor: default;
+}
+.textbox-icon:hover {
+  opacity: 1.0;
+  filter: alpha(opacity=100);
+}
+.textbox-icon-disabled:hover {
+  opacity: 0.6;
+  filter: alpha(opacity=60);
+}
+.textbox-focused {
+  border-color: #6b9cde;
+  -moz-box-shadow: 0 0 3px 0 #95B8E7;
+  -webkit-box-shadow: 0 0 3px 0 #95B8E7;
+  box-shadow: 0 0 3px 0 #95B8E7;
+}
+.textbox-invalid {
+  border-color: #ffa8a8;
+  background-color: #fff3f3;
+}
+.passwordbox-open {
+  background: url('images/passwordbox_open.png') no-repeat center center;
+}
+.passwordbox-close {
+  background: url('images/passwordbox_close.png') no-repeat center center;
+}
+.filebox .textbox-value {
+  vertical-align: top;
+  position: absolute;
+  top: 0;
+  left: -5000px;
+}
+.filebox-label {
+  display: inline-block;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  left: 0;
+  top: 0;
+  z-index: 10;
+  background: url('images/blank.gif') no-repeat;
+}
+.l-btn-disabled .filebox-label {
+  cursor: default;
+}
+.combo-arrow {
+  width: 18px;
+  height: 20px;
+  overflow: hidden;
+  display: inline-block;
+  vertical-align: top;
+  cursor: pointer;
+  opacity: 0.6;
+  filter: alpha(opacity=60);
+}
+.combo-arrow-hover {
+  opacity: 1.0;
+  filter: alpha(opacity=100);
+}
+.combo-panel {
+  overflow: auto;
+}
+.combo-arrow {
+  background: url('images/combo_arrow.png') no-repeat center center;
+}
+.combo-panel {
+  background-color: #ffffff;
+}
+.combo-arrow {
+  background-color: #E0ECFF;
+}
+.combo-arrow-hover {
+  background-color: #eaf2ff;
+}
+.combo-arrow:hover {
+  background-color: #eaf2ff;
+}
+.combo .textbox-icon-disabled:hover {
+  cursor: default;
+}
+.combobox-item,
+.combobox-group,
+.combobox-stick {
+  font-size: 12px;
+  padding: 3px;
+  color: #000000;
+}
+.combobox-item-disabled {
+  opacity: 0.5;
+  filter: alpha(opacity=50);
+}
+.combobox-gitem {
+  padding-left: 10px;
+}
+.combobox-group,
+.combobox-stick {
+  font-weight: bold;
+}
+.combobox-stick {
+  position: absolute;
+  top: 1px;
+  left: 1px;
+  right: 1px;
+  background: inherit;
+}
+.combobox-item-hover {
+  background-color: #eaf2ff;
+  color: #000000;
+}
+.combobox-item-selected {
+  background-color: #ffe48d;
+  color: #000000;
+}
+.combobox-icon {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  vertical-align: middle;
+  margin-right: 2px;
+}
+.tagbox {
+  cursor: text;
+}
+.tagbox .textbox-text {
+  float: left;
+}
+.tagbox-label {
+  position: relative;
+  display: block;
+  margin: 4px 0 0 4px;
+  padding: 0 20px 0 4px;
+  float: left;
+  vertical-align: top;
+  text-decoration: none;
+  -moz-border-radius: 5px 5px 5px 5px;
+  -webkit-border-radius: 5px 5px 5px 5px;
+  border-radius: 5px 5px 5px 5px;
+  background: #eaf2ff;
+  color: #000000;
+}
+.tagbox-remove {
+  background: url('images/tagbox_icons.png') no-repeat -16px center;
+  position: absolute;
+  display: block;
+  width: 16px;
+  height: 16px;
+  right: 2px;
+  top: 50%;
+  margin-top: -8px;
+  opacity: 0.6;
+  filter: alpha(opacity=60);
+}
+.tagbox-remove:hover {
+  opacity: 1;
+  filter: alpha(opacity=100);
+}
+.textbox-disabled .tagbox-label {
+  cursor: default;
+}
+.textbox-disabled .tagbox-remove:hover {
+  cursor: default;
+  opacity: 0.6;
+  filter: alpha(opacity=60);
+}
+.layout {
+  position: relative;
+  overflow: hidden;
+  margin: 0;
+  padding: 0;
+  z-index: 0;
+}
+.layout-panel {
+  position: absolute;
+  overflow: hidden;
+}
+.layout-body {
+  min-width: 1px;
+  min-height: 1px;
+}
+.layout-panel-east,
+.layout-panel-west {
+  z-index: 2;
+}
+.layout-panel-north,
+.layout-panel-south {
+  z-index: 3;
+}
+.layout-expand {
+  position: absolute;
+  padding: 0px;
+  font-size: 1px;
+  cursor: pointer;
+  z-index: 1;
+}
+.layout-expand .panel-header,
+.layout-expand .panel-body {
+  background: transparent;
+  filter: none;
+  overflow: hidden;
+}
+.layout-expand .panel-header {
+  border-bottom-width: 0px;
+}
+.layout-expand .panel-body {
+  position: relative;
+}
+.layout-expand .panel-body .panel-icon {
+  margin-top: 0;
+  top: 0;
+  left: 50%;
+  margin-left: -8px;
+}
+.layout-expand-west .panel-header .panel-icon,
+.layout-expand-east .panel-header .panel-icon {
+  display: none;
+}
+.layout-expand-title {
+  position: absolute;
+  top: 0;
+  left: 21px;
+  white-space: nowrap;
+  word-wrap: normal;
+  -webkit-transform: rotate(90deg);
+  -webkit-transform-origin: 0 0;
+  -moz-transform: rotate(90deg);
+  -moz-transform-origin: 0 0;
+  -o-transform: rotate(90deg);
+  -o-transform-origin: 0 0;
+  transform: rotate(90deg);
+  transform-origin: 0 0;
+}
+.layout-expand-title-up {
+  position: absolute;
+  top: 0;
+  left: 0;
+  text-align: right;
+  padding-left: 5px;
+  white-space: nowrap;
+  word-wrap: normal;
+  -webkit-transform: rotate(-90deg);
+  -webkit-transform-origin: 0 0;
+  -moz-transform: rotate(-90deg);
+  -moz-transform-origin: 0 0;
+  -o-transform: rotate(-90deg);
+  -o-transform-origin: 0 0;
+  transform: rotate(-90deg);
+  transform-origin: 0 0;
+}
+.layout-expand-with-icon {
+  top: 18px;
+}
+.layout-expand .panel-body-noheader .layout-expand-title,
+.layout-expand .panel-body-noheader .panel-icon {
+  top: 5px;
+}
+.layout-expand .panel-body-noheader .layout-expand-with-icon {
+  top: 23px;
+}
+.layout-split-proxy-h,
+.layout-split-proxy-v {
+  position: absolute;
+  font-size: 1px;
+  display: none;
+  z-index: 5;
+}
+.layout-split-proxy-h {
+  width: 5px;
+  cursor: e-resize;
+}
+.layout-split-proxy-v {
+  height: 5px;
+  cursor: n-resize;
+}
+.layout-mask {
+  position: absolute;
+  background: #fafafa;
+  filter: alpha(opacity=10);
+  opacity: 0.10;
+  z-index: 4;
+}
+.layout-button-up {
+  background: url('images/layout_arrows.png') no-repeat -16px -16px;
+}
+.layout-button-down {
+  background: url('images/layout_arrows.png') no-repeat -16px 0;
+}
+
+.layout-button-right {
+  background: url('images/layout_arrows.png') no-repeat 0 -16px;
+}
+.layout-split-proxy-h,
+.layout-split-proxy-v {
+  background-color: #aac5e7;
+}
+.layout-split-north {
+  border-bottom: 5px solid #E6EEF8;
+}
+.layout-split-south {
+  border-top: 5px solid #E6EEF8;
+}
+.layout-split-east {
+  border-left: 5px solid #E6EEF8;
+}
+
+.layout-expand {
+  background-color: #E0ECFF;
+}
+.layout-expand-over {
+  background-color: #E0ECFF;
+}
+.tabs-container {
+  overflow: hidden;
+}
+.tabs-header {
+  border-width: 1px;
+  border-style: solid;
+  border-bottom-width: 0;
+  position: relative;
+  padding: 0;
+  padding-top: 2px;
+  overflow: hidden;
+}
+.tabs-scroller-left,
+.tabs-scroller-right {
+  position: absolute;
+  top: auto;
+  bottom: 0;
+  width: 18px;
+  font-size: 1px;
+  display: none;
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
+}
+.tabs-scroller-left {
+  left: 0;
+}
+.tabs-scroller-right {
+  right: 0;
+}
+.tabs-tool {
+  position: absolute;
+  bottom: 0;
+  padding: 1px;
+  overflow: hidden;
+  border-width: 1px;
+  border-style: solid;
+}
+.tabs-header-plain .tabs-tool {
+  padding: 0 1px;
+}
+.tabs-wrap {
+  position: relative;
+  left: 0;
+  overflow: hidden;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+}
+.tabs-scrolling {
+  margin-left: 18px;
+  margin-right: 18px;
+}
+.tabs-disabled {
+  opacity: 0.3;
+  filter: alpha(opacity=30);
+}
+.tabs {
+  list-style-type: none;
+  height: 26px;
+  margin: 0px;
+  padding: 0px;
+  padding-left: 4px;
+  width: 50000px;
+  border-style: solid;
+  border-width: 0 0 1px 0;
+}
+.tabs li {
+  float: left;
+  display: inline-block;
+  margin: 0 4px -1px 0;
+  padding: 0;
+  position: relative;
+  border: 0;
+}
+.tabs li a.tabs-inner {
+  display: inline-block;
+  text-decoration: none;
+  margin: 0;
+  padding: 0 10px;
+  height: 25px;
+  line-height: 25px;
+  text-align: center;
+  white-space: nowrap;
+  border-width: 1px;
+  border-style: solid;
+  -moz-border-radius: 5px 5px 0 0;
+  -webkit-border-radius: 5px 5px 0 0;
+  border-radius: 5px 5px 0 0;
+}
+.tabs li.tabs-selected a.tabs-inner {
+  font-weight: bold;
+  outline: none;
+}
+.tabs li.tabs-selected a:hover.tabs-inner {
+  cursor: default;
+  pointer: default;
+}
+.tabs li a.tabs-close,
+.tabs-p-tool {
+  position: absolute;
+  font-size: 1px;
+  display: block;
+  height: 12px;
+  padding: 0;
+  top: 50%;
+  margin-top: -6px;
+  overflow: hidden;
+}
+.tabs li a.tabs-close {
+  width: 12px;
+  right: 5px;
+  opacity: 0.6;
+  filter: alpha(opacity=60);
+}
+.tabs-p-tool {
+  right: 16px;
+}
+.tabs-p-tool a {
+  display: inline-block;
+  font-size: 1px;
+  width: 12px;
+  height: 12px;
+  margin: 0;
+  opacity: 0.6;
+  filter: alpha(opacity=60);
+}
+.tabs li a:hover.tabs-close,
+.tabs-p-tool a:hover {
+  opacity: 1;
+  filter: alpha(opacity=100);
+  cursor: hand;
+  cursor: pointer;
+}
+.tabs-with-icon {
+  padding-left: 18px;
+}
+.tabs-icon {
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  left: 10px;
+  top: 50%;
+  margin-top: -8px;
+}
+.tabs-title {
+  font-size: 12px;
+}
+.tabs-closable {
+  padding-right: 8px;
+}
+.tabs-panels {
+  margin: 0px;
+  padding: 0px;
+  border-width: 1px;
+  border-style: solid;
+  border-top-width: 0;
+  overflow: hidden;
+}
+.tabs-header-bottom {
+  border-width: 0 1px 1px 1px;
+  padding: 0 0 2px 0;
+}
+.tabs-header-bottom .tabs {
+  border-width: 1px 0 0 0;
+}
+.tabs-header-bottom .tabs li {
+  margin: -1px 4px 0 0;
+}
+.tabs-header-bottom .tabs li a.tabs-inner {
+  -moz-border-radius: 0 0 5px 5px;
+  -webkit-border-radius: 0 0 5px 5px;
+  border-radius: 0 0 5px 5px;
+}
+.tabs-header-bottom .tabs-tool {
+  top: 0;
+}
+.tabs-header-bottom .tabs-scroller-left,
+.tabs-header-bottom .tabs-scroller-right {
+  top: 0;
+  bottom: auto;
+}
+.tabs-panels-top {
+  border-width: 1px 1px 0 1px;
+}
+.tabs-header-left {
+  float: left;
+  border-width: 1px 0 1px 1px;
+  padding: 0;
+}
+.tabs-header-right {
+  float: right;
+  border-width: 1px 1px 1px 0;
+  padding: 0;
+}
+.tabs-header-left .tabs-wrap,
+.tabs-header-right .tabs-wrap {
+  height: 100%;
+}
+.tabs-header-left .tabs {
+  height: 100%;
+  padding: 4px 0 0 2px;
+  border-width: 0 1px 0 0;
+}
+.tabs-header-right .tabs {
+  height: 100%;
+  padding: 4px 2px 0 0;
+  border-width: 0 0 0 1px;
+}
+.tabs-header-left .tabs li,
+.tabs-header-right .tabs li {
+  display: block;
+  width: 100%;
+  position: relative;
+}
+.tabs-header-left .tabs li {
+  left: auto;
+  right: 0;
+  margin: 0 -1px 4px 0;
+  float: right;
+}
+.tabs-header-right .tabs li {
+  left: 0;
+  right: auto;
+  margin: 0 0 4px -1px;
+  float: left;
+}
+.tabs-justified li a.tabs-inner {
+  padding-left: 0;
+  padding-right: 0;
+}
+.tabs-header-left .tabs li a.tabs-inner {
+  display: block;
+  text-align: left;
+  padding-left: 10px;
+  padding-right: 10px;
+  -moz-border-radius: 5px 0 0 5px;
+  -webkit-border-radius: 5px 0 0 5px;
+  border-radius: 5px 0 0 5px;
+}
+.tabs-header-right .tabs li a.tabs-inner {
+  display: block;
+  text-align: left;
+  padding-left: 10px;
+  padding-right: 10px;
+  -moz-border-radius: 0 5px 5px 0;
+  -webkit-border-radius: 0 5px 5px 0;
+  border-radius: 0 5px 5px 0;
+}
+.tabs-panels-right {
+  float: right;
+  border-width: 1px 1px 1px 0;
+}
+.tabs-panels-left {
+  float: left;
+  border-width: 1px 0 1px 1px;
+}
+.tabs-header-noborder,
+.tabs-panels-noborder {
+  border: 0px;
+}
+.tabs-header-plain {
+  border: 0px;
+  background: transparent;
+}
+.tabs-pill {
+  padding-bottom: 3px;
+}
+.tabs-header-bottom .tabs-pill {
+  padding-top: 3px;
+  padding-bottom: 0;
+}
+.tabs-header-left .tabs-pill {
+  padding-right: 3px;
+}
+.tabs-header-right .tabs-pill {
+  padding-left: 3px;
+}
+.tabs-header .tabs-pill li a.tabs-inner {
+  -moz-border-radius: 5px 5px 5px 5px;
+  -webkit-border-radius: 5px 5px 5px 5px;
+  border-radius: 5px 5px 5px 5px;
+}
+.tabs-header-narrow,
+.tabs-header-narrow .tabs-narrow {
+  padding: 0;
+}
+.tabs-narrow li,
+.tabs-header-bottom .tabs-narrow li {
+  margin-left: 0;
+  margin-right: -1px;
+}
+.tabs-narrow li.tabs-last,
+.tabs-header-bottom .tabs-narrow li.tabs-last {
+  margin-right: 0;
+}
+.tabs-header-left .tabs-narrow,
+.tabs-header-right .tabs-narrow {
+  padding-top: 0;
+}
+.tabs-header-left .tabs-narrow li {
+  margin-bottom: -1px;
+  margin-right: -1px;
+}
+.tabs-header-left .tabs-narrow li.tabs-last,
+.tabs-header-right .tabs-narrow li.tabs-last {
+  margin-bottom: 0;
+}
+.tabs-header-right .tabs-narrow li {
+  margin-bottom: -1px;
+  margin-left: -1px;
+}
+.tabs-scroller-left {
+  background: #E0ECFF url('images/tabs_icons.png') no-repeat 1px center;
+}
+.tabs-scroller-right {
+  background: #E0ECFF url('images/tabs_icons.png') no-repeat -15px center;
+}
+.tabs li a.tabs-close {
+  background: url('images/tabs_icons.png') no-repeat -34px center;
+}
+.tabs li a.tabs-inner:hover {
+  background: #eaf2ff;
+  color: #000000;
+  filter: none;
+}
+.tabs li.tabs-selected a.tabs-inner {
+  background-color: #ffffff;
+  color: #0E2D5F;
+  background: -webkit-linear-gradient(top,#EFF5FF 0,#ffffff 100%);
+  background: -moz-linear-gradient(top,#EFF5FF 0,#ffffff 100%);
+  background: -o-linear-gradient(top,#EFF5FF 0,#ffffff 100%);
+  background: linear-gradient(to bottom,#EFF5FF 0,#ffffff 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#EFF5FF,endColorstr=#ffffff,GradientType=0);
+}
+.tabs-header-bottom .tabs li.tabs-selected a.tabs-inner {
+  background: -webkit-linear-gradient(top,#ffffff 0,#EFF5FF 100%);
+  background: -moz-linear-gradient(top,#ffffff 0,#EFF5FF 100%);
+  background: -o-linear-gradient(top,#ffffff 0,#EFF5FF 100%);
+  background: linear-gradient(to bottom,#ffffff 0,#EFF5FF 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff,endColorstr=#EFF5FF,GradientType=0);
+}
+.tabs-header-left .tabs li.tabs-selected a.tabs-inner {
+  background: -webkit-linear-gradient(left,#EFF5FF 0,#ffffff 100%);
+  background: -moz-linear-gradient(left,#EFF5FF 0,#ffffff 100%);
+  background: -o-linear-gradient(left,#EFF5FF 0,#ffffff 100%);
+  background: linear-gradient(to right,#EFF5FF 0,#ffffff 100%);
+  background-repeat: repeat-y;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#EFF5FF,endColorstr=#ffffff,GradientType=1);
+}
+.tabs-header-right .tabs li.tabs-selected a.tabs-inner {
+  background: -webkit-linear-gradient(left,#ffffff 0,#EFF5FF 100%);
+  background: -moz-linear-gradient(left,#ffffff 0,#EFF5FF 100%);
+  background: -o-linear-gradient(left,#ffffff 0,#EFF5FF 100%);
+  background: linear-gradient(to right,#ffffff 0,#EFF5FF 100%);
+  background-repeat: repeat-y;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff,endColorstr=#EFF5FF,GradientType=1);
+}
+.tabs li a.tabs-inner {
+  color: #0E2D5F;
+  background-color: #E0ECFF;
+  background: -webkit-linear-gradient(top,#EFF5FF 0,#E0ECFF 100%);
+  background: -moz-linear-gradient(top,#EFF5FF 0,#E0ECFF 100%);
+  background: -o-linear-gradient(top,#EFF5FF 0,#E0ECFF 100%);
+  background: linear-gradient(to bottom,#EFF5FF 0,#E0ECFF 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#EFF5FF,endColorstr=#E0ECFF,GradientType=0);
+}
+.tabs-header,
+.tabs-tool {
+  background-color: #E0ECFF;
+}
+.tabs-header-plain {
+  background: transparent;
+}
+.tabs-header,
+.tabs-scroller-left,
+.tabs-scroller-right,
+.tabs-tool,
+.tabs,
+.tabs-panels,
+.tabs li a.tabs-inner,
+.tabs li.tabs-selected a.tabs-inner,
+.tabs-header-bottom .tabs li.tabs-selected a.tabs-inner,
+.tabs-header-left .tabs li.tabs-selected a.tabs-inner,
+.tabs-header-right .tabs li.tabs-selected a.tabs-inner {
+  border-color: #95B8E7;
+}
+.tabs-p-tool a:hover,
+.tabs li a:hover.tabs-close,
+.tabs-scroller-over {
+  background-color: #eaf2ff;
+}
+.tabs li.tabs-selected a.tabs-inner {
+  border-bottom: 1px solid #ffffff;
+}
+.tabs-header-bottom .tabs li.tabs-selected a.tabs-inner {
+  border-top: 1px solid #ffffff;
+}
+.tabs-header-left .tabs li.tabs-selected a.tabs-inner {
+  border-right: 1px solid #ffffff;
+}
+.tabs-header-right .tabs li.tabs-selected a.tabs-inner {
+  border-left: 1px solid #ffffff;
+}
+.tabs-header .tabs-pill li.tabs-selected a.tabs-inner {
+  background: #ffe48d;
+  color: #000000;
+  filter: none;
+  border-color: #95B8E7;
+}
+.datagrid .panel-body {
+  overflow: hidden;
+  position: relative;
+}
+.datagrid-view {
+  position: relative;
+  overflow: hidden;
+}
+.datagrid-view1,
+.datagrid-view2 {
+  position: absolute;
+  overflow: hidden;
+  top: 0;
+}
+.datagrid-view1 {
+  left: 0;
+}
+.datagrid-view2 {
+  right: 0;
+}
+.datagrid-mask {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0.3;
+  filter: alpha(opacity=30);
+  display: none;
+}
+.datagrid-mask-msg {
+  position: absolute;
+  top: 50%;
+  margin-top: -20px;
+  padding: 10px 5px 10px 30px;
+  width: auto;
+  height: 16px;
+  border-width: 2px;
+  border-style: solid;
+  display: none;
+}
+.datagrid-empty {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 25px;
+  line-height: 25px;
+  text-align: center;
+}
+.datagrid-sort-icon {
+  padding: 0;
+  display: none;
+}
+.datagrid-toolbar {
+  height: auto;
+  padding: 1px 2px;
+  border-width: 0 0 1px 0;
+  border-style: solid;
+}
+.datagrid-btn-separator {
+  float: left;
+  height: 24px;
+  border-left: 1px solid #ccc;
+  border-right: 1px solid #fff;
+  margin: 2px 1px;
+}
+.datagrid .datagrid-pager {
+  display: block;
+  margin: 0;
+  border-width: 1px 0 0 0;
+  border-style: solid;
+}
+.datagrid .datagrid-pager-top {
+  border-width: 0 0 1px 0;
+}
+.datagrid-header {
+  overflow: hidden;
+  cursor: default;
+  border-width: 0 0 1px 0;
+  border-style: solid;
+}
+.datagrid-header-inner {
+  float: left;
+  width: 10000px;
+}
+.datagrid-header-row,
+.datagrid-row {
+  height: 25px;
+}
+.datagrid-body td,
+.datagrid-footer td {
+  border-width: 0 1px 1px 0;
+  border-style: dotted;
+  margin: 0;
+  padding: 0;
+}
+.datagrid-cell,
+.datagrid-cell-group,
+.datagrid-header-rownumber,
+.datagrid-cell-rownumber {
+  margin: 0;
+  padding: 0 4px;
+  white-space: nowrap;
+  word-wrap: normal;
+  overflow: hidden;
+  height: 18px;
+  line-height: 18px;
+  font-size: 12px;
+}
+.datagrid-header .datagrid-cell {
+  height: auto;
+}
+.datagrid-header .datagrid-cell span {
+  font-size: 12px;
+}
+.datagrid-cell-group {
+  text-align: center;
+  text-overflow: ellipsis;
+}
+.datagrid-header-rownumber,
+.datagrid-cell-rownumber {
+  width: 30px;
+  text-align: center;
+  margin: 0;
+  padding: 0;
+}
+.datagrid-body {
+  margin: 0;
+  padding: 0;
+  overflow: auto;
+  zoom: 1;
+}
+.datagrid-view1 .datagrid-body-inner {
+  padding-bottom: 20px;
+}
+.datagrid-view1 .datagrid-body {
+  overflow: hidden;
+}
+.datagrid-footer {
+  overflow: hidden;
+}
+.datagrid-footer-inner {
+  border-width: 1px 0 0 0;
+  border-style: solid;
+  width: 10000px;
+  float: left;
+}
+.datagrid-row-editing .datagrid-cell {
+  height: auto;
+}
+.datagrid-header-check,
+.datagrid-cell-check {
+  padding: 0;
+  width: 27px;
+  height: 18px;
+  font-size: 1px;
+  text-align: center;
+  overflow: hidden;
+}
+.datagrid-header-check input,
+.datagrid-cell-check input {
+  margin: 0;
+  padding: 0;
+  width: 15px;
+  height: 18px;
+}
+.datagrid-resize-proxy {
+  position: absolute;
+  width: 1px;
+  height: 10000px;
+  top: 0;
+  cursor: e-resize;
+  display: none;
+}
+.datagrid-body .datagrid-editable {
+  margin: 0;
+  padding: 0;
+}
+.datagrid-body .datagrid-editable table {
+  width: 100%;
+  height: 100%;
+}
+.datagrid-body .datagrid-editable td {
+  border: 0;
+  margin: 0;
+  padding: 0;
+}
+.datagrid-view .datagrid-editable-input {
+  margin: 0;
+  padding: 2px 4px;
+  border: 1px solid #95B8E7;
+  font-size: 12px;
+  outline-style: none;
+  -moz-border-radius: 0 0 0 0;
+  -webkit-border-radius: 0 0 0 0;
+  border-radius: 0 0 0 0;
+}
+.datagrid-view .validatebox-invalid {
+  border-color: #ffa8a8;
+}
+.datagrid-sort .datagrid-sort-icon {
+  display: inline;
+  padding: 0 13px 0 0;
+  background: url('images/datagrid_icons.png') no-repeat -64px center;
+}
+.datagrid-sort-desc .datagrid-sort-icon {
+  display: inline;
+  padding: 0 13px 0 0;
+  background: url('images/datagrid_icons.png') no-repeat -16px center;
+}
+.datagrid-sort-asc .datagrid-sort-icon {
+  display: inline;
+  padding: 0 13px 0 0;
+  background: url('images/datagrid_icons.png') no-repeat 0px center;
+}
+.datagrid-row-collapse {
+  background: url('images/datagrid_icons.png') no-repeat -48px center;
+}
+.datagrid-row-expand {
+  background: url('images/datagrid_icons.png') no-repeat -32px center;
+}
+.datagrid-mask-msg {
+  background: #ffffff url('images/loading.gif') no-repeat scroll 5px center;
+}
+.datagrid-header,
+.datagrid-td-rownumber {
+  color:#fff
+}
+.datagrid-cell-rownumber {
+  color: #000000;
+}
+.datagrid-resize-proxy {
+  background: #aac5e7;
+}
+.datagrid-mask {
+  background: #ccc;
+}
+.datagrid-mask-msg {
+  border-color: #95B8E7;
+}
+.datagrid-toolbar,
+.datagrid-pager {
+  background: #F4F4F4;
+}
+.datagrid-header,
+.datagrid-toolbar,
+.datagrid-pager,
+.datagrid-footer-inner {
+  border-color: #dddddd;
+}
+.datagrid-body td,
+.datagrid-footer td {
+  border-color: #ccc;
+  color:#fff
+}
+.datagrid-htable,
+.datagrid-btable,
+.datagrid-ftable {
+  color: #fff;
+  border-collapse: separate;
+}
+.datagrid-row-alt {
+  background: #fafafa;
+}
+.datagrid-row-over {
+  background: rgba(17,51,95,.8);
+  color: #000000;
+  cursor: default;
+}
+
+.datagrid-row-editing .textbox,
+.datagrid-row-editing .textbox-text {
+  -moz-border-radius: 0 0 0 0;
+  -webkit-border-radius: 0 0 0 0;
+  border-radius: 0 0 0 0;
+}
+.propertygrid .datagrid-view1 .datagrid-body td {
+  padding-bottom: 1px;
+  border-width: 0 1px 0 0;
+}
+.propertygrid .datagrid-group {
+  height: 21px;
+  overflow: hidden;
+  border-width: 0 0 1px 0;
+  border-style: solid;
+}
+.propertygrid .datagrid-group span {
+  font-weight: bold;
+}
+.propertygrid .datagrid-view1 .datagrid-body td {
+  border-color: #dddddd;
+}
+.propertygrid .datagrid-view1 .datagrid-group {
+  border-color: #E0ECFF;
+}
+.propertygrid .datagrid-view2 .datagrid-group {
+  border-color: #dddddd;
+}
+.propertygrid .datagrid-group,
+.propertygrid .datagrid-view1 .datagrid-body,
+.propertygrid .datagrid-view1 .datagrid-row-over,
+.propertygrid .datagrid-view1 .datagrid-row-selected {
+  border-left: 2px solid #fff;
+  margin-top:-20px!important;
+  height: 359px!important
+}
+.datalist .datagrid-header {
+  border-width: 0;
+}
+.datalist .datagrid-group,
+.m-list .m-list-group {
+  height: 25px;
+  line-height: 25px;
+  font-weight: bold;
+  overflow: hidden;
+  background-color: #efefef;
+  border-style: solid;
+  border-width: 0 0 1px 0;
+  border-color: #ccc;
+}
+.datalist .datagrid-group-expander {
+  display: none;
+}
+.datalist .datagrid-group-title {
+  padding: 0 4px;
+}
+.datalist .datagrid-btable {
+  width: 100%;
+  table-layout: fixed;
+}
+.datalist .datagrid-row td {
+  border-style: solid;
+  border-left-color: transparent;
+  border-right-color: transparent;
+  border-bottom-width: 0;
+}
+.datalist-lines .datagrid-row td {
+  border-bottom-width: 1px;
+}
+.datalist .datagrid-cell,
+.m-list li {
+  width: auto;
+  height: auto;
+  padding: 2px 4px;
+  line-height: 18px;
+  position: relative;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.datalist-link,
+.m-list li>a {
+  display: block;
+  position: relative;
+  cursor: pointer;
+  color: #000000;
+  text-decoration: none;
+  overflow: hidden;
+  margin: -2px -4px;
+  padding: 2px 4px;
+  padding-right: 16px;
+  line-height: 18px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.datalist-link::after,
+.m-list li>a::after {
+  position: absolute;
+  display: block;
+  width: 8px;
+  height: 8px;
+  content: '';
+  right: 6px;
+  top: 50%;
+  margin-top: -4px;
+  border-style: solid;
+  border-width: 1px 1px 0 0;
+  -ms-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  -webkit-transform: rotate(45deg);
+  -o-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+.m-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.m-list li {
+  border-style: solid;
+  border-width: 0 0 1px 0;
+  border-color: #ccc;
+}
+.m-list li>a:hover {
+  background: #eaf2ff;
+  color: #000000;
+}
+.m-list .m-list-group {
+  padding: 0 4px;
+}
+.pagination {
+  zoom: 1;
+}
+.pagination table {
+  float: left;
+  height: 30px;
+}
+.pagination td {
+  border: 0;
+}
+.pagination-btn-separator {
+  float: left;
+  height: 24px;
+  border-left: 1px solid #ccc;
+  border-right: 1px solid #fff;
+  margin: 3px 1px;
+}
+.pagination .pagination-num {
+  border-width: 1px;
+  border-style: solid;
+  margin: 0 2px;
+  padding: 2px;
+  width: 2em;
+  height: auto;
+}
+.pagination-page-list {
+  margin: 0px 6px;
+  padding: 1px 2px;
+  width: auto;
+  height: auto;
+  border-width: 1px;
+  border-style: solid;
+}
+.pagination-info {
+  float: right;
+  margin: 0 6px;
+  padding: 0;
+  height: 30px;
+  line-height: 30px;
+  font-size: 12px;
+}
+.pagination span {
+  font-size: 12px;
+}
+.pagination-link .l-btn-text {
+  width: 24px;
+  text-align: center;
+  margin: 0;
+}
+.pagination-first {
+  background: url('images/pagination_icons.png') no-repeat 0 center;
+}
+.pagination-prev {
+  background: url('images/pagination_icons.png') no-repeat -16px center;
+}
+.pagination-next {
+  background: url('images/pagination_icons.png') no-repeat -32px center;
+}
+.pagination-last {
+  background: url('images/pagination_icons.png') no-repeat -48px center;
+}
+.pagination-load {
+  background: url('images/pagination_icons.png') no-repeat -64px center;
+}
+.pagination-loading {
+  background: url('images/loading.gif') no-repeat center center;
+}
+.pagination-page-list,
+.pagination .pagination-num {
+  border-color: #95B8E7;
+}
+.calendar {
+  border-width: 1px;
+  border-style: solid;
+  padding: 1px;
+  overflow: hidden;
+}
+.calendar table {
+  table-layout: fixed;
+  border-collapse: separate;
+  font-size: 12px;
+  width: 100%;
+  height: 100%;
+}
+.calendar table td,
+.calendar table th {
+  font-size: 12px;
+}
+.calendar-noborder {
+  border: 0;
+}
+.calendar-header {
+  position: relative;
+  height: 22px;
+}
+.calendar-title {
+  text-align: center;
+  height: 22px;
+}
+.calendar-title span {
+  position: relative;
+  display: inline-block;
+  top: 2px;
+  padding: 0 3px;
+  height: 18px;
+  line-height: 18px;
+  font-size: 12px;
+  cursor: pointer;
+  -moz-border-radius: 5px 5px 5px 5px;
+  -webkit-border-radius: 5px 5px 5px 5px;
+  border-radius: 5px 5px 5px 5px;
+}
+.calendar-prevmonth,
+.calendar-nextmonth,
+.calendar-prevyear,
+.calendar-nextyear {
+  position: absolute;
+  top: 50%;
+  margin-top: -7px;
+  width: 14px;
+  height: 14px;
+  cursor: pointer;
+  font-size: 1px;
+  -moz-border-radius: 5px 5px 5px 5px;
+  -webkit-border-radius: 5px 5px 5px 5px;
+  border-radius: 5px 5px 5px 5px;
+}
+.calendar-prevmonth {
+  left: 20px;
+  background: url('images/calendar_arrows.png') no-repeat -18px -2px;
+}
+.calendar-nextmonth {
+  right: 20px;
+  background: url('images/calendar_arrows.png') no-repeat -34px -2px;
+}
+.calendar-prevyear {
+  left: 3px;
+  background: url('images/calendar_arrows.png') no-repeat -1px -2px;
+}
+.calendar-nextyear {
+  right: 3px;
+  background: url('images/calendar_arrows.png') no-repeat -49px -2px;
+}
+.calendar-body {
+  position: relative;
+}
+.calendar-body th,
+.calendar-body td {
+  text-align: center;
+}
+.calendar-day {
+  border: 0;
+  padding: 1px;
+  cursor: pointer;
+  -moz-border-radius: 5px 5px 5px 5px;
+  -webkit-border-radius: 5px 5px 5px 5px;
+  border-radius: 5px 5px 5px 5px;
+}
+.calendar-other-month {
+  opacity: 0.3;
+  filter: alpha(opacity=30);
+}
+.calendar-disabled {
+  opacity: 0.6;
+  filter: alpha(opacity=60);
+  cursor: default;
+}
+.calendar-menu {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 180px;
+  height: 150px;
+  padding: 5px;
+  font-size: 12px;
+  display: none;
+  overflow: hidden;
+}
+.calendar-menu-year-inner {
+  text-align: center;
+  padding-bottom: 5px;
+}
+.calendar-menu-year {
+  width: 50px;
+  text-align: center;
+  border-width: 1px;
+  border-style: solid;
+  outline-style: none;
+  resize: none;
+  margin: 0;
+  padding: 2px;
+  font-weight: bold;
+  font-size: 12px;
+  -moz-border-radius: 5px 5px 5px 5px;
+  -webkit-border-radius: 5px 5px 5px 5px;
+  border-radius: 5px 5px 5px 5px;
+}
+.calendar-menu-prev,
+.calendar-menu-next {
+  display: inline-block;
+  width: 21px;
+  height: 21px;
+  vertical-align: top;
+  cursor: pointer;
+  -moz-border-radius: 5px 5px 5px 5px;
+  -webkit-border-radius: 5px 5px 5px 5px;
+  border-radius: 5px 5px 5px 5px;
+}
+.calendar-menu-prev {
+  margin-right: 10px;
+  background: url('images/calendar_arrows.png') no-repeat 2px 2px;
+}
+.calendar-menu-next {
+  margin-left: 10px;
+  background: url('images/calendar_arrows.png') no-repeat -45px 2px;
+}
+.calendar-menu-month {
+  text-align: center;
+  cursor: pointer;
+  font-weight: bold;
+  -moz-border-radius: 5px 5px 5px 5px;
+  -webkit-border-radius: 5px 5px 5px 5px;
+  border-radius: 5px 5px 5px 5px;
+}
+.calendar-body th,
+.calendar-menu-month {
+  color: #4d4d4d;
+}
+.calendar-day {
+  color: #000000;
+}
+.calendar-sunday {
+  color: #CC2222;
+}
+.calendar-saturday {
+  color: #00ee00;
+}
+.calendar-today {
+  color: #0000ff;
+}
+.calendar-menu-year {
+  border-color: #95B8E7;
+}
+.calendar {
+  border-color: #95B8E7;
+}
+.calendar-header {
+  background: #E0ECFF;
+}
+.calendar-body,
+.calendar-menu {
+  background: #ffffff;
+}
+.calendar-body th {
+  background: #F4F4F4;
+  padding: 2px 0;
+}
+.calendar-hover,
+.calendar-nav-hover,
+.calendar-menu-hover {
+  background-color: #eaf2ff;
+  color: #000000;
+}
+.calendar-hover {
+  border: 1px solid #b7d2ff;
+  padding: 0;
+}
+.calendar-selected {
+  background-color: #ffe48d;
+  color: #000000;
+  border: 1px solid #ffab3f;
+  padding: 0;
+}
+.datebox-calendar-inner {
+  height: 180px;
+}
+.datebox-button {
+  padding: 0 5px;
+  text-align: center;
+}
+.datebox-button a {
+  line-height: 22px;
+  font-size: 12px;
+  font-weight: bold;
+  text-decoration: none;
+  opacity: 0.6;
+  filter: alpha(opacity=60);
+}
+.datebox-button a:hover {
+  opacity: 1.0;
+  filter: alpha(opacity=100);
+}
+.datebox-current,
+.datebox-close {
+  float: left;
+}
+.datebox-close {
+  float: right;
+}
+.datebox .combo-arrow {
+  background-image: url('images/datebox_arrow.png');
+  background-position: center center;
+}
+.datebox-button {
+  background-color: #F4F4F4;
+}
+.datebox-button a {
+  color: #444;
+}
+.spinner-arrow {
+  background-color: #E0ECFF;
+  display: inline-block;
+  overflow: hidden;
+  vertical-align: top;
+  margin: 0;
+  padding: 0;
+  opacity: 1.0;
+  filter: alpha(opacity=100);
+  width: 18px;
+}
+.spinner-arrow-up,
+.spinner-arrow-down {
+  opacity: 0.6;
+  filter: alpha(opacity=60);
+  display: block;
+  font-size: 1px;
+  width: 18px;
+  height: 10px;
+  width: 100%;
+  height: 50%;
+  color: #444;
+  outline-style: none;
+}
+.spinner-arrow-hover {
+  background-color: #eaf2ff;
+  opacity: 1.0;
+  filter: alpha(opacity=100);
+}
+.spinner-arrow-up:hover,
+.spinner-arrow-down:hover {
+  opacity: 1.0;
+  filter: alpha(opacity=100);
+  background-color: #eaf2ff;
+}
+.textbox-icon-disabled .spinner-arrow-up:hover,
+.textbox-icon-disabled .spinner-arrow-down:hover {
+  opacity: 0.6;
+  filter: alpha(opacity=60);
+  background-color: #E0ECFF;
+  cursor: default;
+}
+.spinner .textbox-icon-disabled {
+  opacity: 0.6;
+  filter: alpha(opacity=60);
+}
+.spinner-arrow-up {
+  background: url('images/spinner_arrows.png') no-repeat 1px center;
+}
+.spinner-arrow-down {
+  background: url('images/spinner_arrows.png') no-repeat -15px center;
+}
+.spinner-button-up {
+  background: url('images/spinner_arrows.png') no-repeat -32px center;
+}
+.spinner-button-down {
+  background: url('images/spinner_arrows.png') no-repeat -48px center;
+}
+.progressbar {
+  border-width: 1px;
+  border-style: solid;
+  -moz-border-radius: 5px 5px 5px 5px;
+  -webkit-border-radius: 5px 5px 5px 5px;
+  border-radius: 5px 5px 5px 5px;
+  overflow: hidden;
+  position: relative;
+}
+.progressbar-text {
+  text-align: center;
+  position: absolute;
+}
+.progressbar-value {
+  position: relative;
+  overflow: hidden;
+  width: 0;
+  -moz-border-radius: 5px 0 0 5px;
+  -webkit-border-radius: 5px 0 0 5px;
+  border-radius: 5px 0 0 5px;
+}
+.progressbar {
+  border-color: #95B8E7;
+}
+.progressbar-text {
+  color: #000000;
+  font-size: 12px;
+}
+.progressbar-value .progressbar-text {
+  background-color: #ffe48d;
+  color: #000000;
+}
+.searchbox-button {
+  width: 18px;
+  height: 20px;
+  overflow: hidden;
+  display: inline-block;
+  vertical-align: top;
+  cursor: pointer;
+  opacity: 0.6;
+  filter: alpha(opacity=60);
+}
+.searchbox-button-hover {
+  opacity: 1.0;
+  filter: alpha(opacity=100);
+}
+.searchbox .l-btn-plain {
+  border: 0;
+  padding: 0;
+  vertical-align: top;
+  opacity: 0.6;
+  filter: alpha(opacity=60);
+  -moz-border-radius: 0 0 0 0;
+  -webkit-border-radius: 0 0 0 0;
+  border-radius: 0 0 0 0;
+}
+.searchbox .l-btn-plain:hover {
+  border: 0;
+  padding: 0;
+  opacity: 1.0;
+  filter: alpha(opacity=100);
+  -moz-border-radius: 0 0 0 0;
+  -webkit-border-radius: 0 0 0 0;
+  border-radius: 0 0 0 0;
+}
+.searchbox a.m-btn-plain-active {
+  -moz-border-radius: 0 0 0 0;
+  -webkit-border-radius: 0 0 0 0;
+  border-radius: 0 0 0 0;
+}
+.searchbox .m-btn-active {
+  border-width: 0 1px 0 0;
+  -moz-border-radius: 0 0 0 0;
+  -webkit-border-radius: 0 0 0 0;
+  border-radius: 0 0 0 0;
+}
+.searchbox .textbox-button-right {
+  border-width: 0 0 0 1px;
+}
+.searchbox .textbox-button-left {
+  border-width: 0 1px 0 0;
+}
+.searchbox-button {
+  background: url('images/searchbox_button.png') no-repeat center center;
+}
+.searchbox .l-btn-plain {
+  background: #E0ECFF;
+}
+.searchbox .l-btn-plain-disabled,
+.searchbox .l-btn-plain-disabled:hover {
+  opacity: 0.5;
+  filter: alpha(opacity=50);
+}
+.slider-disabled {
+  opacity: 0.5;
+  filter: alpha(opacity=50);
+}
+.slider-h {
+  height: 22px;
+}
+.slider-v {
+  width: 22px;
+}
+.slider-inner {
+  position: relative;
+  height: 6px;
+  top: 7px;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 5px;
+}
+.slider-handle {
+  position: absolute;
+  display: block;
+  outline: none;
+  width: 20px;
+  height: 20px;
+  top: 50%;
+  margin-top: -10px;
+  margin-left: -10px;
+}
+.slider-tip {
+  position: absolute;
+  display: inline-block;
+  line-height: 12px;
+  font-size: 12px;
+  white-space: nowrap;
+  top: -22px;
+}
+.slider-rule {
+  position: relative;
+  top: 15px;
+}
+.slider-rule span {
+  position: absolute;
+  display: inline-block;
+  font-size: 0;
+  height: 5px;
+  border-width: 0 0 0 1px;
+  border-style: solid;
+}
+.slider-rulelabel {
+  position: relative;
+  top: 20px;
+}
+.slider-rulelabel span {
+  position: absolute;
+  display: inline-block;
+  font-size: 12px;
+}
+.slider-v .slider-inner {
+  width: 6px;
+  left: 7px;
+  top: 0;
+  float: left;
+}
+.slider-v .slider-handle {
+  left: 50%;
+  margin-top: -10px;
+}
+.slider-v .slider-tip {
+  left: -10px;
+  margin-top: -6px;
+}
+.slider-v .slider-rule {
+  float: left;
+  top: 0;
+  left: 16px;
+}
+.slider-v .slider-rule span {
+  width: 5px;
+  height: 'auto';
+  border-left: 0;
+  border-width: 1px 0 0 0;
+  border-style: solid;
+}
+.slider-v .slider-rulelabel {
+  float: left;
+  top: 0;
+  left: 23px;
+}
+.slider-handle {
+  background: url('images/slider_handle.png') no-repeat;
+}
+.slider-inner {
+  border-color: #95B8E7;
+  background: #E0ECFF;
+}
+.slider-rule span {
+  border-color: #95B8E7;
+}
+.slider-rulelabel span {
+  color: #000000;
+}
+.menu {
+  position: absolute;
+  margin: 0;
+  padding: 2px;
+  border-width: 1px;
+  border-style: solid;
+  overflow: hidden;
+}
+.menu-inline {
+  position: relative;
+}
+.menu-item {
+  position: relative;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
+}
+.menu-text {
+  height: 20px;
+  line-height: 20px;
+  float: left;
+  padding-left: 28px;
+}
+.menu-icon {
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  left: 2px;
+  top: 50%;
+  margin-top: -8px;
+}
+.menu-rightarrow {
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  right: 0;
+  top: 50%;
+  margin-top: -8px;
+}
+.menu-line {
+  position: absolute;
+  left: 26px;
+  top: 0;
+  height: 2000px;
+  font-size: 1px;
+}
+.menu-sep {
+  margin: 3px 0px 3px 25px;
+  font-size: 1px;
+}
+.menu-noline .menu-line {
+  display: none;
+}
+.menu-noline .menu-sep {
+  margin-left: 0;
+  margin-right: 0;
+}
+.menu-active {
+  -moz-border-radius: 5px 5px 5px 5px;
+  -webkit-border-radius: 5px 5px 5px 5px;
+  border-radius: 5px 5px 5px 5px;
+}
+.menu-item-disabled {
+  opacity: 0.5;
+  filter: alpha(opacity=50);
+  cursor: default;
+}
+.menu-text,
+.menu-text span {
+  font-size: 12px;
+}
+.menu-shadow {
+  position: absolute;
+  -moz-border-radius: 5px 5px 5px 5px;
+  -webkit-border-radius: 5px 5px 5px 5px;
+  border-radius: 5px 5px 5px 5px;
+  background: #ccc;
+  -moz-box-shadow: 2px 2px 3px #cccccc;
+  -webkit-box-shadow: 2px 2px 3px #cccccc;
+  box-shadow: 2px 2px 3px #cccccc;
+  filter: progid:DXImageTransform.Microsoft.Blur(pixelRadius=2,MakeShadow=false,ShadowOpacity=0.2);
+}
+.menu-rightarrow {
+  background: url('images/menu_arrows.png') no-repeat -32px center;
+}
+.menu-line {
+  border-left: 1px solid #ccc;
+  border-right: 1px solid #fff;
+}
+.menu-sep {
+  border-top: 1px solid #ccc;
+  border-bottom: 1px solid #fff;
+}
+.menu {
+  background-color: #fafafa;
+  border-color: #ddd;
+  color: #444;
+}
+.menu-content {
+  background: #ffffff;
+}
+.menu-item {
+  border-color: transparent;
+  _border-color: #fafafa;
+}
+.menu-active {
+  border-color: #b7d2ff;
+  color: #000000;
+  background: #eaf2ff;
+}
+.menu-active-disabled {
+  border-color: transparent;
+  background: transparent;
+  color: #444;
+}
+.m-btn-downarrow,
+.s-btn-downarrow {
+  display: inline-block;
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  font-size: 1px;
+  right: 0;
+  top: 50%;
+  margin-top: -8px;
+}
+.m-btn-active,
+.s-btn-active {
+  background: #eaf2ff;
+  color: #000000;
+  border: 1px solid #b7d2ff;
+  filter: none;
+}
+.m-btn-plain-active,
+.s-btn-plain-active {
+  background: transparent;
+  padding: 0;
+  border-width: 1px;
+  border-style: solid;
+  -moz-border-radius: 5px 5px 5px 5px;
+  -webkit-border-radius: 5px 5px 5px 5px;
+  border-radius: 5px 5px 5px 5px;
+}
+.m-btn .l-btn-left .l-btn-text {
+  margin-right: 20px;
+}
+.m-btn .l-btn-icon-right .l-btn-text {
+  margin-right: 40px;
+}
+.m-btn .l-btn-icon-right .l-btn-icon {
+  right: 20px;
+}
+.m-btn .l-btn-icon-top .l-btn-text {
+  margin-right: 4px;
+  margin-bottom: 14px;
+}
+.m-btn .l-btn-icon-bottom .l-btn-text {
+  margin-right: 4px;
+  margin-bottom: 34px;
+}
+.m-btn .l-btn-icon-bottom .l-btn-icon {
+  top: auto;
+  bottom: 20px;
+}
+.m-btn .l-btn-icon-top .m-btn-downarrow,
+.m-btn .l-btn-icon-bottom .m-btn-downarrow {
+  top: auto;
+  bottom: 0px;
+  left: 50%;
+  margin-left: -8px;
+}
+.m-btn-line {
+  display: inline-block;
+  position: absolute;
+  font-size: 1px;
+  display: none;
+}
+.m-btn .l-btn-left .m-btn-line {
+  right: 0;
+  width: 16px;
+  height: 500px;
+  border-style: solid;
+  border-color: #aac5e7;
+  border-width: 0 0 0 1px;
+}
+.m-btn .l-btn-icon-top .m-btn-line,
+.m-btn .l-btn-icon-bottom .m-btn-line {
+  left: 0;
+  bottom: 0;
+  width: 500px;
+  height: 16px;
+  border-width: 1px 0 0 0;
+}
+.m-btn-large .l-btn-icon-right .l-btn-text {
+  margin-right: 56px;
+}
+.m-btn-large .l-btn-icon-bottom .l-btn-text {
+  margin-bottom: 50px;
+}
+.m-btn-downarrow,
+.s-btn-downarrow {
+  background: url('images/menu_arrows.png') no-repeat 0 center;
+}
+.m-btn-plain-active,
+.s-btn-plain-active {
+  border-color: #b7d2ff;
+  background-color: #eaf2ff;
+  color: #000000;
+}
+.s-btn:hover .m-btn-line,
+.s-btn-active .m-btn-line,
+.s-btn-plain-active .m-btn-line {
+  display: inline-block;
+}
+.l-btn:hover .s-btn-downarrow,
+.s-btn-active .s-btn-downarrow,
+.s-btn-plain-active .s-btn-downarrow {
+  border-style: solid;
+  border-color: #aac5e7;
+  border-width: 0 0 0 1px;
+}
+.messager-body {
+  padding: 10px 10px 30px 10px;
+  overflow: auto;
+}
+.messager-button {
+  text-align: center;
+  padding: 5px;
+}
+.messager-button .l-btn {
+  width: 70px;
+}
+.messager-icon {
+  float: left;
+  width: 32px;
+  height: 32px;
+  margin: 0 10px 10px 0;
+}
+.messager-error {
+  background: url('images/messager_icons.png') no-repeat scroll -64px 0;
+}
+.messager-info {
+  background: url('images/messager_icons.png') no-repeat scroll 0 0;
+}
+.messager-question {
+  background: url('images/messager_icons.png') no-repeat scroll -32px 0;
+}
+.messager-warning {
+  background: url('images/messager_icons.png') no-repeat scroll -96px 0;
+}
+.messager-progress {
+  padding: 10px;
+}
+.messager-p-msg {
+  margin-bottom: 5px;
+}
+.messager-body .messager-input {
+  width: 100%;
+  padding: 4px 0;
+  outline-style: none;
+  border: 1px solid #95B8E7;
+}
+.window-thinborder .messager-button {
+  padding-bottom: 8px;
+}
+.tree {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+.tree li {
+  white-space: nowrap;
+}
+.tree li ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+.tree-node {
+  /*height: 18px;*/
+  white-space: nowrap;
+  cursor: pointer;
+}
+.tree-hit {
+  cursor: pointer;
+}
+.tree-expanded,
+.tree-collapsed,
+.tree-folder,
+.tree-file,
+.tree-checkbox,
+.tree-indent {
+  display: inline-block;
+  width: 16px;
+  height: 18px;
+  vertical-align: top;
+  overflow: hidden;
+}
+.tree-expanded {
+  background: url('images/arrow.png') no-repeat 0px 7px;
+}
+.tree-expanded-hover {
+  background: url('images/arrow.png') no-repeat 0px -9px;
+}
+.tree-collapsed {
+  background: url('images/arrow.png') no-repeat 0px -9px;
+}
+.tree-collapsed-hover {
+  background: url('images/arrow.png') no-repeat 0px 7px;
+}
+.tree-lines .tree-expanded,
+.tree-lines .tree-root-first .tree-expanded {
+  background: url('images/tree_icons.png') no-repeat -144px 0;
+}
+.tree-lines .tree-collapsed,
+.tree-lines .tree-root-first .tree-collapsed {
+  background: url('images/tree_icons.png') no-repeat -128px 0;
+}
+.tree-lines .tree-node-last .tree-expanded,
+.tree-lines .tree-root-one .tree-expanded {
+  background: url('images/tree_icons.png') no-repeat -80px 0;
+}
+.tree-lines .tree-node-last .tree-collapsed,
+.tree-lines .tree-root-one .tree-collapsed {
+  background: url('images/tree_icons.png') no-repeat -64px 0;
+}
+.tree-line {
+  background: url('images/tree_icons.png') no-repeat -176px 0;
+}
+.tree-join {
+  background: url('images/tree_icons.png') no-repeat -192px 0;
+}
+.tree-joinbottom {
+  background: url('images/tree_icons.png') no-repeat -160px 0;
+}
+.tree-folder {
+  /*background: url('images/tree_icons.png') no-repeat -208px 0;*/
+}
+.tree-folder-open {
+  /*background: url('images/tree_icons.png') no-repeat -224px 0;*/
+}
+.tree-file {
+  background: url('images/tree_icons.png') no-repeat -240px 0;
+}
+.tree-loading {
+  background: url('images/loading.gif') no-repeat center center;
+}
+.tree-checkbox0 {
+  background: url('images/tree_icons.png') no-repeat -208px -18px;
+}
+.tree-checkbox1 {
+  background: url('images/tree_icons.png') no-repeat -224px -18px;
+}
+.tree-checkbox2 {
+  background: url('images/tree_icons.png') no-repeat -240px -18px;
+}
+.tree-title {
+  /*font-size: 12px;*/
+  display: inline-block;
+  text-decoration: none;
+  /*vertical-align: top;*/
+  vertical-align: middle;
+  white-space: nowrap;
+  padding: 0 2px;
+  /*height: 18px;
+  line-height: 18px;*/
+}
+.tree-node-proxy {
+  font-size: 12px;
+  line-height: 20px;
+  padding: 0 2px 0 20px;
+  border-width: 1px;
+  border-style: solid;
+  z-index: 9900000;
+}
+.tree-dnd-icon {
+  display: inline-block;
+  position: absolute;
+  width: 16px;
+  height: 18px;
+  left: 2px;
+  top: 50%;
+  margin-top: -9px;
+}
+.tree-dnd-yes {
+  background: url('images/tree_icons.png') no-repeat -256px 0;
+}
+.tree-dnd-no {
+  background: url('images/tree_icons.png') no-repeat -256px -18px;
+}
+.tree-node-top {
+  border-top: 1px dotted red;
+}
+.tree-node-bottom {
+  border-bottom: 1px dotted red;
+}
+.tree-node-append .tree-title {
+  border: 1px dotted red;
+}
+.tree-editor {
+  border: 1px solid #95B8E7;
+  font-size: 12px;
+  line-height: 16px;
+  padding: 0 4px;
+  margin: 0;
+  width: 80px;
+  outline-style: none;
+  vertical-align: top;
+  position: absolute;
+  top: 0;
+}
+.tree-node-proxy {
+  background-color: #ffffff;
+  color: #000000;
+  border-color: #95B8E7;
+}
+.tree-node-hover {
+  /*background: #eaf2ff;*/
+  /*color: #000000;*/
+}
+.tree-node-selected {
+  /*background: #ffe48d;
+  color: #000000;*/
+}
+.tree-node-hidden {
+  display: none;
+}
+.validatebox-invalid {
+  border-color: #ffa8a8;
+  background-color: #fff3f3;
+  color: #000;
+}
+.tooltip {
+  position: absolute;
+  display: none;
+  z-index: 9900000;
+  outline: none;
+  opacity: 1;
+  filter: alpha(opacity=100);
+  padding: 5px;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 5px;
+  -moz-border-radius: 5px 5px 5px 5px;
+  -webkit-border-radius: 5px 5px 5px 5px;
+  border-radius: 5px 5px 5px 5px;
+}
+.tooltip-content {
+  font-size: 12px;
+}
+.tooltip-arrow-outer,
+.tooltip-arrow {
+  position: absolute;
+  width: 0;
+  height: 0;
+  line-height: 0;
+  font-size: 0;
+  border-style: solid;
+  border-width: 6px;
+  border-color: transparent;
+  _border-color: tomato;
+  _filter: chroma(color=tomato);
+}
+.tooltip-arrow {
+  display: none \9;
+}
+.tooltip-right .tooltip-arrow-outer {
+  left: 0;
+  top: 50%;
+  margin: -6px 0 0 -13px;
+}
+.tooltip-right .tooltip-arrow {
+  left: 0;
+  top: 50%;
+  margin: -6px 0 0 -12px;
+}
+.tooltip-left .tooltip-arrow-outer {
+  right: 0;
+  top: 50%;
+  margin: -6px -13px 0 0;
+}
+.tooltip-left .tooltip-arrow {
+  right: 0;
+  top: 50%;
+  margin: -6px -12px 0 0;
+}
+.tooltip-top .tooltip-arrow-outer {
+  bottom: 0;
+  left: 50%;
+  margin: 0 0 -13px -6px;
+}
+.tooltip-top .tooltip-arrow {
+  bottom: 0;
+  left: 50%;
+  margin: 0 0 -12px -6px;
+}
+.tooltip-bottom .tooltip-arrow-outer {
+  top: 0;
+  left: 50%;
+  margin: -13px 0 0 -6px;
+}
+.tooltip-bottom .tooltip-arrow {
+  top: 0;
+  left: 50%;
+  margin: -12px 0 0 -6px;
+}
+.tooltip {
+  background-color: #ffffff;
+  border-color: #95B8E7;
+  color: #000000;
+}
+.tooltip-right .tooltip-arrow-outer {
+  border-right-color: #95B8E7;
+}
+.tooltip-right .tooltip-arrow {
+  border-right-color: #ffffff;
+}
+.tooltip-left .tooltip-arrow-outer {
+  border-left-color: #95B8E7;
+}
+.tooltip-left .tooltip-arrow {
+  border-left-color: #ffffff;
+}
+.tooltip-top .tooltip-arrow-outer {
+  border-top-color: #95B8E7;
+}
+.tooltip-top .tooltip-arrow {
+  border-top-color: #ffffff;
+}
+.tooltip-bottom .tooltip-arrow-outer {
+  border-bottom-color: #95B8E7;
+}
+.tooltip-bottom .tooltip-arrow {
+  border-bottom-color: #ffffff;
+}
+.switchbutton {
+  text-decoration: none;
+  display: inline-block;
+  overflow: hidden;
+  vertical-align: middle;
+  margin: 0;
+  padding: 0;
+  cursor: pointer;
+  background: #bbb;
+  border: 1px solid #bbb;
+  -moz-border-radius: 5px 5px 5px 5px;
+  -webkit-border-radius: 5px 5px 5px 5px;
+  border-radius: 5px 5px 5px 5px;
+}
+.switchbutton-inner {
+  display: inline-block;
+  overflow: hidden;
+  position: relative;
+  top: -1px;
+  left: -1px;
+}
+.switchbutton-on,
+.switchbutton-off,
+.switchbutton-handle {
+  display: inline-block;
+  text-align: center;
+  height: 100%;
+  float: left;
+  font-size: 12px;
+  -moz-border-radius: 5px 5px 5px 5px;
+  -webkit-border-radius: 5px 5px 5px 5px;
+  border-radius: 5px 5px 5px 5px;
+}
+.switchbutton-on {
+  background: #ffe48d;
+  color: #000000;
+}
+.switchbutton-off {
+  background-color: #ffffff;
+  color: #000000;
+}
+.switchbutton-on,
+.switchbutton-reversed .switchbutton-off {
+  -moz-border-radius: 5px 0 0 5px;
+  -webkit-border-radius: 5px 0 0 5px;
+  border-radius: 5px 0 0 5px;
+}
+.switchbutton-off,
+.switchbutton-reversed .switchbutton-on {
+  -moz-border-radius: 0 5px 5px 0;
+  -webkit-border-radius: 0 5px 5px 0;
+  border-radius: 0 5px 5px 0;
+}
+.switchbutton-handle {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  background-color: #ffffff;
+  color: #000000;
+  border: 1px solid #bbb;
+  -moz-box-shadow: 0 0 3px 0 #bbb;
+  -webkit-box-shadow: 0 0 3px 0 #bbb;
+  box-shadow: 0 0 3px 0 #bbb;
+}
+.switchbutton-value {
+  position: absolute;
+  top: 0;
+  left: -5000px;
+}
+.switchbutton-disabled {
+  opacity: 0.5;
+  filter: alpha(opacity=50);
+}
+.switchbutton-disabled,
+.switchbutton-readonly {
+  cursor: default;
+}
+
+
+

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/css/jedate.css

+/* CSS Document */
+.jedatebox{width:270px;height:auto; font-family:'PingFangSC-Light','PingFang SC','Segoe UI','Lucida Grande','NotoSansHans-Light','Microsoft YaHei', '\5FAE\8F6F\96C5\9ED1', STHeiti, 'WenQuanYi Micro Hei', SimSun, sans-serif;font-size:12px; cursor:default;margin: 0;padding: 0;    border-radius: 4px; overflow: hidden;}
+.jedatebox *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;font-style:normal;font-family:'PingFangSC-Light','PingFang SC','Segoe UI','Lucida Grande','NotoSansHans-Light','Microsoft YaHei', '\5FAE\8F6F\96C5\9ED1', STHeiti, 'WenQuanYi Micro Hei', SimSun, sans-serif;font-size:12px;}
+.jedatebox ul,.jedatebox ol,.jedatebox li,.jedatebox dl{list-style-type:none;font-style:normal;font-weight: 300;}
+.jedatebox .jedateym .prev{background-image: url("data:image/gif;base64,R0lGODlhBQAJAIABAP///////yH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS41LWMwMjEgNzkuMTU1NzcyLCAyMDE0LzAxLzEzLTE5OjQ0OjAwICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxNCAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MEIxREZCQ0E3NTFCMTFFNkIxRDFEQzhDMDRCNjUxNDYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MEIxREZCQ0I3NTFCMTFFNkIxRDFEQzhDMDRCNjUxNDYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowQjFERkJDODc1MUIxMUU2QjFEMURDOEMwNEI2NTE0NiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowQjFERkJDOTc1MUIxMUU2QjFEMURDOEMwNEI2NTE0NiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PgH//v38+/r5+Pf29fTz8vHw7+7t7Ovq6ejn5uXk4+Lh4N/e3dzb2tnY19bV1NPS0dDPzs3My8rJyMfGxcTDwsHAv769vLu6ubi3trW0s7KxsK+urayrqqmop6alpKOioaCfnp2cm5qZmJeWlZSTkpGQj46NjIuKiYiHhoWEg4KBgH9+fXx7enl4d3Z1dHNycXBvbm1sa2ppaGdmZWRjYmFgX15dXFtaWVhXVlVUU1JRUE9OTUxLSklIR0ZFRENCQUA/Pj08Ozo5ODc2NTQzMjEwLy4tLCsqKSgnJiUkIyIhIB8eHRwbGhkYFxYVFBMSERAPDg0MCwoJCAcGBQQDAgEAACH5BAEAAAEALAAAAAAFAAkAAAIMjAMHidsLXTRQMVoAADs=");}
+.jedatebox .jedateym .next{background-image: url("data:image/gif;base64,R0lGODlhBQAJAIABAP///////yH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS41LWMwMjEgNzkuMTU1NzcyLCAyMDE0LzAxLzEzLTE5OjQ0OjAwICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxNCAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MUJDNTNBNTY3NTFCMTFFNkJGMjJFRDQ2NDZCQ0RDMDAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MUJDNTNBNTc3NTFCMTFFNkJGMjJFRDQ2NDZCQ0RDMDAiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoxQkM1M0E1NDc1MUIxMUU2QkYyMkVENDY0NkJDREMwMCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoxQkM1M0E1NTc1MUIxMUU2QkYyMkVENDY0NkJDREMwMCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PgH//v38+/r5+Pf29fTz8vHw7+7t7Ovq6ejn5uXk4+Lh4N/e3dzb2tnY19bV1NPS0dDPzs3My8rJyMfGxcTDwsHAv769vLu6ubi3trW0s7KxsK+urayrqqmop6alpKOioaCfnp2cm5qZmJeWlZSTkpGQj46NjIuKiYiHhoWEg4KBgH9+fXx7enl4d3Z1dHNycXBvbm1sa2ppaGdmZWRjYmFgX15dXFtaWVhXVlVUU1JRUE9OTUxLSklIR0ZFRENCQUA/Pj08Ozo5ODc2NTQzMjEwLy4tLCsqKSgnJiUkIyIhIB8eHRwbGhkYFxYVFBMSERAPDg0MCwoJCAcGBQQDAgEAACH5BAEAAAEALAAAAAAFAAkAAAIMRB5gp9v2YlJsJRQKADs=");}
+.jedatebox .jedateym .pndrop{width:14px;height:40px; overflow:hidden;display: inline-block;position:relative;vertical-align: top;background-repeat: no-repeat;background-position: center center;background-image: url("data:image/gif;base64,R0lGODlhCQAFAIABAP///////yH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS41LWMwMjEgNzkuMTU1NzcyLCAyMDE0LzAxLzEzLTE5OjQ0OjAwICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxNCAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDRERDNEMjA3NTFCMTFFNkE0QjFBRTExMDY2QjY5MEUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDRERDNEMjE3NTFCMTFFNkE0QjFBRTExMDY2QjY5MEUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NEREM0QxRTc1MUIxMUU2QTRCMUFFMTEwNjZCNjkwRSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NEREM0QxRjc1MUIxMUU2QTRCMUFFMTEwNjZCNjkwRSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PgH//v38+/r5+Pf29fTz8vHw7+7t7Ovq6ejn5uXk4+Lh4N/e3dzb2tnY19bV1NPS0dDPzs3My8rJyMfGxcTDwsHAv769vLu6ubi3trW0s7KxsK+urayrqqmop6alpKOioaCfnp2cm5qZmJeWlZSTkpGQj46NjIuKiYiHhoWEg4KBgH9+fXx7enl4d3Z1dHNycXBvbm1sa2ppaGdmZWRjYmFgX15dXFtaWVhXVlVUU1JRUE9OTUxLSklIR0ZFRENCQUA/Pj08Ozo5ODc2NTQzMjEwLy4tLCsqKSgnJiUkIyIhIB8eHRwbGhkYFxYVFBMSERAPDg0MCwoJCAcGBQQDAgEAACH5BAEAAAEALAAAAAAJAAUAAAIKhH+BGYoNGWxgFgA7");}
+.jedatebox .jedateym .prev,.jedatebox .jedateym .next{width:15%;height:40px; float:left;display:block;text-align: center;background-repeat: no-repeat;background-position: center center;}
+.jedatebox em,.jedatebox i{height:40px;margin: 0;padding: 0;font-style:normal;display:inline-block;font-size: 16px;}
+.jedatetipscon{color:#000; float:left; overflow:hidden;background-color: #FFFEF4; line-height:22px;padding:6px;border: 1px rgb(247, 206, 57) solid;font-style:normal;font-family:'PingFangSC-Light','PingFang SC','Segoe UI','Lucida Grande','NotoSansHans-Light','Microsoft YaHei', '\5FAE\8F6F\96C5\9ED1', STHeiti, 'WenQuanYi Micro Hei', SimSun, sans-serif;font-size:12px;font-weight: 300;}
+.jedatetipscon p{padding: 0;margin: 0;}
+.jedatetipscon p.red{color: #ff0000;}
+
+.jedatebox .jedatehmscon::-webkit-scrollbar{height:6px;width:6px;margin-right:5px;background: #f5f5f5;transition:all 0.3s ease-in-out;border-radius:0px}
+.jedatebox .jedatehmscon::-webkit-scrollbar-track { -webkit-border-radius: 0px;border-radius: 0px;}
+.jedatebox .jedatehmscon::-webkit-scrollbar-thumb{-webkit-border-radius: 0px;border-radius: 0px;background: rgba(0,0,0,0.5); }
+.jedatebox .jedatehmscon::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,0.6)}
+.jedatebox .jedatehmscon::-webkit-scrollbar-thumb:active{background:rgba(0,0,0,0.8)}
+.jedatebox .jedatehmscon::-webkit-scrollbar-thumb:window-inactive {background: rgba(0,0,0,0.4);}
+/* 蓝色风格 */
+.jedateblue{border:1px #00A1CB solid;background-color:#fff;}
+.jedateblue div,.jedateblue ol,.jedateblue ul,.jedateblue li,.jedateblue p,.jedateblue span{margin: 0;padding: 0;list-style-type:none;}
+.jedateblue.dateshow{display:block;}
+.jedateblue .jedatetop{width:100%;background: #00A1CB; color:#fff; overflow:hidden;text-align:center;}
+.jedateblue .jedateym{float:left;height:40px; line-height:40px;}
+.jedateblue .jedateym span{width:70%;padding: 0;float:left;text-align: center;text-overflow: ellipsis; display:block;}
+.jedateblue .jedateym span input{width:100%;float:left;padding: 0;border:none;background-color:transparent;text-align: center;}
+.jedateblue .jedateym .triangle{margin: 0;padding:0;font-style:normal;}
+.jedateblue .jedateym .triangle:hover{background-color:#00B9E8;}
+.jedateblue .jedatesety,.jedateblue .jedatesetm{width: 100%; position:absolute;left:0; top:40px; bottom:0;background-color: #fff; z-index:50;}
+.jedateblue .jedatesety .ymdropul,.jedateblue .jedatesetm .ymdropul{width:100%;height:246px;overflow:auto;}
+.jedateblue .jedatesety .ymdropul li{width:33.3%;float:left;text-align: center;height:49px; line-height:49px;font-size: 16px;}
+.jedateblue .jedatesety .ymdropul li.disabled{color:#bbb;}
+.jedateblue .jedatesetm .ymdropul li{width:33.3%;float:left;text-align: center;height:60px; line-height:60px;font-size: 16px;}
+.jedateblue .jedatesetm .ymdropul li.disabled{color:#bbb;}
+.jedateblue .jedatesety .ymdropul li.disabled:hover,.jedateblue .jedatesetm .ymdropul li.disabled:hover{background:#fff;}
+.jedateblue .jedatesety .ymdropul li:hover,.jedateblue .jedatesetm .ymdropul li:hover{background: #F2F2F2;border-radius:4px;}
+.jedateblue .jedatesety .ymdropul li.action,.jedateblue .jedatesetm .ymdropul li.action{background: #00A1CB;color:#fff;border-radius:4px;}
+.jedateblue .jedatesety .ymdropul li.action:hover,.jedateblue .jedatesetm .ymdropul li.action:hover{background: #00A1CB;color:#fff;}
+.jedateblue .jedatetopym p{overflow:auto; padding-top:4px;}
+.jedateblue .jedatetopym p span{width:31%; margin:0 1.1%;background-color: #00A1CB;color: #fff;display: block;height:28px;line-height:28px; border-radius:5px;text-align:center;}
+.jedateblue .jedatetopym p span.jedateymchri{background-color: #F0F0F0;color: #555;float:left;font-size: 16px;}
+.jedateblue .jedatetopym p span.jedateymchle{background-color: #F0F0F0;color: #555;float:left;font-size: 16px;}
+.jedateblue .jedatetopym p span.jedateymchok{background-color: #00A1CB;color:#fff;float:right;font-size: 12px;}
+
+.jedateblue .jedayy,.jedateblue .jedaym{height:202px;overflow:auto; padding:5px;}
+.jedateblue .jedayy li{width:33.3%;float:left;text-align: center;height:38px; line-height:38px;font-size: 14px;}
+.jedateblue .jedayy li.action,.jedateblue .jedayy li.action:hover{background: #00A1CB;color:#fff;border-radius:4px;}
+.jedateblue .jedayy li:hover{background: #F2F2F2;border-radius:4px;}
+.jedateblue .jedayy li.disabled{ color:#bbb;}
+.jedateblue .jedaym li{width:50%;float:left;text-align: center;height:32px; line-height:32px;font-size: 14px;}
+.jedateblue .jedaym li.action,.jedateblue .jedaym li.action:hover{background: #00A1CB;color:#fff;border-radius:4px;}
+.jedateblue .jedaym li:hover{background: #F2F2F2;border-radius:4px;}
+.jedateblue .jedaym li.disabled { color: #bbb;  }
+.jedateblue .jedaol{width:100%;overflow:auto;}
+.jedateblue .jedaul{ padding:0px;overflow:auto;}
+.jedateblue .jedaol li{width:14.28%; float:left; height:30px; line-height:30px; text-align:center; position:relative; overflow:hidden;}
+.jedateblue .jedaul li{width:14.28%; float:left; height:36px;  text-align:center; position:relative; overflow:hidden;border-right: 1px #efefef solid;border-bottom: 1px #efefef solid;}
+.jedateblue .jedaul li .nolunar{line-height: 36px;font-size: 15px;}
+.jedateblue .jedaul li .solar{height:16px;line-height:16px;font-size: 14px;padding-top: 3px;display: block;}
+.jedateblue .jedaul li .lunar{height:16px;line-height:16px;font-size: 12px;overflow:hidden;display: block;padding: 0 5px;}
+.jedateblue .jedaol li.weeks{background:#f5f5f5;border-bottom: 1px solid #ddd;}
+.jedateblue .jedaul li.action,.jedateblue .jedaul li.action:hover,.jedateblue .jedaul li.action .lunar{background: #00A1CB;color:#fff;}
+.jedateblue .jedaul li.other,.jedateblue .jedaul li.other .nolunar,.jedateblue .jedaul li.other .lunar{color:#4DDBFF;}
+.jedateblue .jedaul li.disabled,.jedateblue .jedaul li.disabled .nolunar,.jedateblue .jedaul li.disabled .lunar{ color:#bbb;}
+.jedateblue .jedaul li.disabled:hover{background:#fff;}
+.jedateblue .jedaul li:nth-child(7n){border-right:none;}
+.jedateblue .jedaul li:hover{background: #F2F2F2;}
+.jedateblue .jedaul li.red{ color:#ff0000;}
+.jedateblue .jedaul li .marks{ width:5px; height:5px; background:#ff0000; -webkit-border-radius:50%;border-radius:50%; position:absolute; right:2px; top:4px;}
+.jedateblue .jedaul li.action .marks{ width:5px; height:5px; background:#fff; -webkit-border-radius:50%;border-radius:50%; position:absolute; right:2px; top:4px;}
+
+.jedateblue .jedatebot{height:34px;line-height:34px; padding:0 3px 0 5px;overflow:hidden;background:#f5f5f5;}
+.jedateblue .jedatebot .jedatehms{border:1px #ddd solid;background-color: #fff;margin:0px 5% 3px 0;padding-left:1px;display:inline-block;overflow:hidden;}
+.jedateblue .jedatebot .botflex{width:50%;float:left;display: inline-block;margin:0;padding-top:3px; overflow:hidden;}
+.jedateblue .jedatebot .botflex li{width:32px; float:left;text-align:center;}
+.jedateblue .jedatebot .botflex li input{width:100%;float:left;padding: 0;border:none;text-align: center;display:block;height:26px;line-height:26px;text-decoration: none;outline:none;-moz-outline:none;font-size: 14px;font-family:'Avenir Next', Avenir, 'Helvetica Neue', Helvetica, 'Lantinghei SC', 'Hiragino Sans GB', 'Microsoft YaHei', '\5FAE\8F6F\96C5\9ED1', STHeiti, 'WenQuanYi Micro Hei', SimSun, sans-serif;}
+.jedateblue .jedatebot .botflex li input[disabled]{background-color: #f0f0f0;color: #aaa;}
+.jedateblue .jedatebot .botflex i{width:12px;float:left;height:26px;line-height:24px;font-style:normal;display:block;text-align: center;background: #f2f2f2; }
+.jedateblue .jedatebot .jedatebtn{text-align:center;font-size: 12px;}
+.jedateblue .jedatebot .jedatebtn span{width:31%;float:right; margin:0 1.1%;background-color: #00A1CB;color: #fff;display: block;height:28px;line-height:28px; border-radius:4px;text-align:center;}
+
+.jedateblue .jedateprophms{width: 100%;background: #FFF;}
+.jedateblue .jedateproppos{position:absolute;left:0; top:0px;display:none;}
+.jedateblue .jedatepropfix{display:block;}
+.jedateblue .jedatepropcon{padding:40px 5px 5px 5px;background-color: #fff; overflow:hidden;position: relative;}
+.jedateblue .jedatehmstitle{width:100%;height:40px;line-height:40px;position:absolute;left:0;top:0;background: #00A1CB; color:#EEEEEE;overflow:hidden;text-align:center;font-size: 15px;}
+.jedateblue .jedateproptext{width:72px; float:left;height:30px;line-height:30px; text-align:center;margin:6px 0 0 10px;}
+.jedateblue .jedatehmscon{width:72px;height:204px; float:left; overflow-y:auto;border: 1px solid #ddd; margin:0px 0px 0px 10px;}
+.jedateblue .jedatehmscon p{width:100%;float:left;text-align: center;height:25px; line-height:25px;font-size: 14px;}
+.jedateblue .jedatehmscon p:hover{background: #F2F2F2;}
+.jedateblue .jedatehmscon p.action,.jedateblue .jedatehmscon p.action:hover{background: #00A1CB;color:#fff;}
+.jedateblue .jedatehmscon p.disabled{ background: #fbfbfb;color:#ccc;}
+.jedateblue .jedatehmscon p.disabled.action{ background: #00A1CB;color:#FFFFFF;filter:Alpha(opacity=30);opacity:.3; }
+.jedateblue .jedatems p{width:10%;float:left;text-align: center;height:32px; line-height:32px;}
+.jedateblue .jedateh p.action,.jedateblue .jedatems p.action{background: #00A1CB;color:#fff;}
+.jedateblue .jedatehmsclose{width:30px; height:30px; line-height:26px; text-align:center;position: absolute;top:50%;right:4px; margin-top:-15px;z-index:150;font-size:24px;}
+
+
+/* 绿色风格 */
+.jedategreen{border:1px #78BA32 solid;background-color:#fff;}
+.jedategreen div,.jedategreen ol,.jedategreen ul,.jedategreen li,.jedategreen p,.jedategreen span{margin: 0;padding: 0;list-style-type:none;}
+.jedategreen.dateshow{display:block;}
+.jedategreen .jedatetop{width:100%;background: #78BA32; color:#fff; overflow:hidden;text-align:center;}
+.jedategreen .jedateym{float:left;height:40px; line-height:40px;}
+.jedategreen .jedateym span{width:70%;padding: 0;float:left;text-align: center;text-overflow: ellipsis; display:block;}
+.jedategreen .jedateym span input{width:100%;float:left;padding: 0;border:none;background-color:transparent;text-align: center;}
+.jedategreen .jedateym .triangle{margin: 0;padding:0;font-style:normal;}
+.jedategreen .jedateym .triangle:hover{background-color:#93CF50;}
+.jedategreen .jedatesety,.jedategreen .jedatesetm{width: 100%; position:absolute;left:0; top:40px; bottom:0;background-color: #fff; z-index:50;}
+.jedategreen .jedatesety .ymdropul,.jedategreen .jedatesetm .ymdropul{width:100%;height:246px;overflow:auto;}
+.jedategreen .jedatesety .ymdropul li{width:33.3%;float:left;text-align: center;height:49px; line-height:49px;font-size: 16px;}
+.jedategreen .jedatesety .ymdropul li.disabled{color:#bbb;}
+.jedategreen .jedatesetm .ymdropul li{width:33.3%;float:left;text-align: center;height:60px; line-height:60px;font-size: 16px;}
+.jedategreen .jedatesetm .ymdropul li.disabled{color:#bbb;}
+.jedategreen .jedatesety .ymdropul li.disabled:hover,.jedategreen .jedatesetm .ymdropul li.disabled:hover{background:#fff;}
+.jedategreen .jedatesety .ymdropul li:hover,.jedategreen .jedatesetm .ymdropul li:hover{background: #F2F2F2;border-radius:4px;}
+.jedategreen .jedatesety .ymdropul li.action,.jedategreen .jedatesetm .ymdropul li.action{background: #78BA32;color:#fff;border-radius:4px;}
+.jedategreen .jedatesety .ymdropul li.action:hover,.jedategreen .jedatesetm .ymdropul li.action:hover{background: #78BA32;color:#fff;}
+.jedategreen .jedatetopym p{overflow:auto; padding-top:4px;}
+.jedategreen .jedatetopym p span{width:31%; margin:0 1.1%;background-color: #78BA32;color: #fff;display: block;height:28px;line-height:28px; border-radius:5px;text-align:center;}
+.jedategreen .jedatetopym p span.jedateymchri{background-color: #F0F0F0;color: #555;float:left;font-size: 16px;}
+.jedategreen .jedatetopym p span.jedateymchle{background-color: #F0F0F0;color: #555;float:left;font-size: 16px;}
+.jedategreen .jedatetopym p span.jedateymchok{background-color: #78BA32;color:#fff;float:right;font-size: 12px;}
+
+.jedategreen .jedayy,.jedategreen .jedaym{height:202px;overflow:auto; padding:5px;}
+.jedategreen .jedayy li{width:33.3%;float:left;text-align: center;height:38px; line-height:38px;font-size: 14px;}
+.jedategreen .jedayy li.action,.jedategreen .jedayy li.action:hover{background: #78BA32;color:#fff;border-radius:4px;}
+.jedategreen .jedayy li:hover{background: #F2F2F2;border-radius:4px;}
+.jedategreen .jedayy li.disabled{ color:#bbb;}
+.jedategreen .jedaym li{width:50%;float:left;text-align: center;height:32px; line-height:32px;font-size: 14px;}
+.jedategreen .jedaym li.action,.jedategreen .jedaym li.action:hover{background: #78BA32;color:#fff;border-radius:4px;}
+.jedategreen .jedaym li:hover{background: #F2F2F2;border-radius:4px;}
+.jedategreen .jedaym li.disabled { color: #bbb;  }
+.jedategreen .jedaol{width:100%;overflow:auto;}
+.jedategreen .jedaul{ padding:0px;overflow:auto;}
+.jedategreen .jedaol li{width:14.28%; float:left; height:30px; line-height:30px; text-align:center; position:relative; overflow:hidden;}
+.jedategreen .jedaul li{width:14.28%; float:left; height:36px;  text-align:center; position:relative; overflow:hidden;border-right: 1px #efefef solid;border-bottom: 1px #efefef solid;}
+.jedategreen .jedaul li .nolunar{line-height: 40px;font-size: 15px;}
+.jedategreen .jedaul li .solar{height:18px;line-height:16px;font-size: 14px;padding-top: 3px;display: block;}
+.jedategreen .jedaul li .lunar{height:16px;line-height:16px;font-size: 12px;overflow:hidden;display: block;padding: 0 5px;}
+.jedategreen .jedaol li.weeks{background:#f5f5f5;border-bottom: 1px solid #ddd;}
+.jedategreen .jedaul li.action,.jedategreen .jedaul li.action:hover,.jedategreen .jedaul li.action .lunar{background: #78BA32;color:#fff;}
+.jedategreen .jedaul li.other,.jedategreen .jedaul li.other .nolunar,.jedategreen .jedaul li.other .lunar{color:#AFDC7E;}
+.jedategreen .jedaul li.disabled,.jedategreen .jedaul li.disabled .nolunar,.jedategreen .jedaul li.disabled .lunar{ color:#bbb;}
+.jedategreen .jedaul li.disabled:hover{background:#fff;}
+.jedategreen .jedaul li:nth-child(7n){border-right:none;}
+.jedategreen .jedaul li:hover{background: #F2F2F2;}
+.jedategreen .jedaul li.red{ color:#ff0000;}
+.jedategreen .jedaul li .marks{ width:5px; height:5px; background:#ff0000; -webkit-border-radius:50%;border-radius:50%; position:absolute; right:2px; top:4px;}
+.jedategreen .jedaul li.action .marks{ width:5px; height:5px; background:#fff; -webkit-border-radius:50%;border-radius:50%; position:absolute; right:2px; top:4px;}
+
+.jedategreen .jedatebot{height:34px;line-height:34px; padding:0 3px 0 5px;overflow:hidden;background:#f5f5f5;}
+.jedategreen .jedatebot .jedatehms{border:1px #ddd solid;background-color: #fff;margin:0px 5% 3px 0;padding-left:1px;display:inline-block;overflow:hidden;}
+.jedategreen .jedatebot .botflex{width:50%;float:left;display: inline-block;margin:0;padding-top:3px; overflow:hidden;}
+.jedategreen .jedatebot .botflex li{width:32px; float:left;text-align:center;}
+.jedategreen .jedatebot .botflex li input{width:100%;float:left;padding: 0;border:none;text-align: center;display:block;height:26px;line-height:26px;text-decoration: none;outline:none;-moz-outline:none;font-size: 14px;font-family:'Avenir Next', Avenir, 'Helvetica Neue', Helvetica, 'Lantinghei SC', 'Hiragino Sans GB', 'Microsoft YaHei', '\5FAE\8F6F\96C5\9ED1', STHeiti, 'WenQuanYi Micro Hei', SimSun, sans-serif;}
+.jedategreen .jedatebot .botflex li input[disabled]{background-color: #f0f0f0;color: #aaa;}
+.jedategreen .jedatebot .botflex i{width:12px;float:left;height:26px;line-height:24px;font-style:normal;display:block;text-align: center;background: #f2f2f2; }
+.jedategreen .jedatebot .jedatebtn{text-align:center;font-size: 12px;}
+.jedategreen .jedatebot .jedatebtn span{width:31%;float:right; margin:0 1.1%;background-color: #78BA32;color: #fff;display: block;height:28px;line-height:28px; border-radius:4px;text-align:center;}
+
+.jedategreen .jedateprophms{width: 100%;background: #FFF;}
+.jedategreen .jedateproppos{position:absolute;left:0; top:0px; padding-top:0px; display:none;}
+.jedategreen .jedatepropfix{display:block;}
+.jedategreen .jedatepropcon{padding:40px 5px 5px 5px;background-color: #fff; overflow:hidden;position: relative;}
+.jedategreen .jedatehmstitle{width:100%;height:40px;line-height:40px;position:absolute;left:0;top:0;background: #78BA32; color:#EEEEEE;overflow:hidden;text-align:center;font-size: 15px;}
+.jedategreen .jedateproptext{width:72px; float:left;height:30px;line-height:30px; text-align:center;margin:6px 0 0 10px;}
+.jedategreen .jedatehmscon{width:72px;height:204px; float:left; overflow-y:auto;border: 1px solid #ddd; margin:0px 0px 0px 10px;}
+.jedategreen .jedatehmscon p{width:100%;float:left;text-align: center;height:25px; line-height:25px;font-size: 14px;}
+.jedategreen .jedatehmscon p:hover{background: #F2F2F2;}
+.jedategreen .jedatehmscon p.action,.jedategreen .jedatehmscon p.action:hover{background: #78BA32;color:#fff;}
+.jedategreen .jedatehmscon p.disabled{background: #fbfbfb;color:#ccc;}
+.jedategreen .jedatehmscon p.disabled.action{ background: #78BA32;color:#FFFFFF;filter:Alpha(opacity=30);opacity:.3; }
+.jedategreen .jedatems p{width:10%;float:left;text-align: center;height:32px; line-height:32px;}
+.jedategreen .jedateh p.action,.jedategreen .jedatems p.action{background: #78BA32;color:#fff;}
+.jedategreen .jedatehmsclose{width:30px; height:30px; line-height:26px; text-align:center;position: absolute;top:50%;right:4px; margin-top:-15px;z-index:150;font-size:24px;}
+
+
+/* 红色风格 */
+.jedatered{border:1px #D91600 solid;background-color:#fff;}
+.jedatered div,.jedatered ol,.jedatered ul,.jedatered li,.jedatered p,.jedatered span{margin: 0;padding: 0;list-style-type:none;}
+.jedatered.dateshow{display:block;}
+.jedatered .jedatetop{width:100%;background: #D91600; color:#fff; overflow:hidden;text-align:center;}
+.jedatered .jedateym{float:left;height:40px; line-height:40px;}
+.jedatered .jedateym span{width:70%;padding: 0;float:left;text-align: center;text-overflow: ellipsis; display:block;}
+.jedatered .jedateym span input{width:100%;float:left;padding: 0;border:none;background-color:transparent;text-align: center;}
+.jedatered .jedateym .triangle{margin: 0;padding:0;font-style:normal;}
+.jedatered .jedateym .triangle:hover{background-color:#FF1F06;}
+.jedatered .jedatesety,.jedatered .jedatesetm{width: 100%; position:absolute;left:0; top:40px; bottom:0;background-color: #fff; z-index:50;}
+.jedatered .jedatesety .ymdropul,.jedatered .jedatesetm .ymdropul{width:100%;height:246px;overflow:auto;}
+.jedatered .jedatesety .ymdropul li{width:33.3%;float:left;text-align: center;height:49px; line-height:49px;font-size: 16px;}
+.jedatered .jedatesety .ymdropul li.disabled{color:#bbb;}
+.jedatered .jedatesetm .ymdropul li{width:33.3%;float:left;text-align: center;height:60px; line-height:60px;font-size: 16px;}
+.jedatered .jedatesetm .ymdropul li.disabled{color:#bbb;}
+.jedatered .jedatesety .ymdropul li.disabled:hover,.jedatered .jedatesetm .ymdropul li.disabled:hover{background:#fff;}
+.jedatered .jedatesety .ymdropul li:hover,.jedatered .jedatesetm .ymdropul li:hover{background: #F2F2F2;border-radius:4px;}
+.jedatered .jedatesety .ymdropul li.action,.jedatered .jedatesetm .ymdropul li.action{background: #D91600;color:#fff;border-radius:4px;}
+.jedatered .jedatesety .ymdropul li.action:hover,.jedatered .jedatesetm .ymdropul li.action:hover{background: #D91600;color:#fff;}
+.jedatered .jedatetopym p{overflow:auto; padding-top:4px;}
+.jedatered .jedatetopym p span{width:31%; margin:0 1.1%;background-color: #D91600;color: #fff;display: block;height:28px;line-height:28px; border-radius:5px;text-align:center;}
+.jedatered .jedatetopym p span.jedateymchri{background-color: #F0F0F0;color: #555;float:left;font-size: 16px;}
+.jedatered .jedatetopym p span.jedateymchle{background-color: #F0F0F0;color: #555;float:left;font-size: 16px;}
+.jedatered .jedatetopym p span.jedateymchok{background-color: #D91600;color:#fff;float:right;font-size: 12px;}
+
+.jedatered .jedayy,.jedatered .jedaym{height:202px;overflow:auto; padding:5px;}
+.jedatered .jedayy li{width:33.3%;float:left;text-align: center;height:38px; line-height:38px;font-size: 14px;}
+.jedatered .jedayy li.action,.jedatered .jedayy li.action:hover{background: #D91600;color:#fff;border-radius:4px;}
+.jedatered .jedayy li:hover{background: #F2F2F2;border-radius:4px;}
+.jedatered .jedayy li.disabled{ color:#bbb;}
+.jedatered .jedaym li{width:50%;float:left;text-align: center;height:32px; line-height:32px;font-size: 14px;}
+.jedatered .jedaym li.action,.jedatered .jedaym li.action:hover{background: #D91600;color:#fff;}
+.jedatered .jedaym li:hover{background: #F2F2F2;}
+.jedatered .jedaym li.disabled { color: #bbb;  }
+.jedatered .jedaol{width:100%;overflow:auto;}
+.jedatered .jedaul{ padding:0px;overflow:auto;}
+.jedatered .jedaol li{width:14.28%; float:left; height:30px; line-height:30px; text-align:center; position:relative; overflow:hidden;}
+.jedatered .jedaul li{width:14.28%; float:left; height:36px;  text-align:center; position:relative; overflow:hidden;border-right: 1px #efefef solid;border-bottom: 1px #efefef solid;}
+.jedatered .jedaul li .nolunar{line-height: 40px;font-size: 15px;}
+.jedatered .jedaul li .solar{height:18px;line-height:16px;font-size: 14px;padding-top: 3px;display: block;}
+.jedatered .jedaul li .lunar{height:16px;line-height:16px;font-size: 12px;overflow:hidden;display: block;padding: 0 5px;}
+.jedatered .jedaol li.weeks{background:#f5f5f5;border-bottom: 1px solid #ddd;}
+.jedatered .jedaul li.action,.jedatered .jedaul li.action:hover,.jedatered .jedaul li.action .lunar{background: #D91600;color:#fff;}
+.jedatered .jedaul li.other,.jedatered .jedaul li.other .nolunar,.jedatered .jedaul li.other .lunar{color:#FF8C80;}
+.jedatered .jedaul li.disabled,.jedatered .jedaul li.disabled .nolunar,.jedatered .jedaul li.disabled .lunar{ color:#bbb;}
+.jedatered .jedaul li.disabled:hover{background:#fff;}
+.jedatered .jedaul li:nth-child(7n){border-right:none;}
+.jedatered .jedaul li:hover{background: #F2F2F2;}
+.jedatered .jedaul li.red{ color:#ff0000;}
+.jedatered .jedaul li .marks{ width:5px; height:5px; background:#ff0000; -webkit-border-radius:50%;border-radius:50%; position:absolute; right:2px; top:4px;}
+.jedatered .jedaul li.action .marks{ width:5px; height:5px; background:#fff; -webkit-border-radius:50%;border-radius:50%; position:absolute; right:2px; top:4px;}
+
+.jedatered .jedatebot{height:34px;line-height:34px; padding:0 3px 0 5px;overflow:hidden;background:#f5f5f5;}
+.jedatered .jedatebot .jedatehms{border:1px #ddd solid;background-color: #fff;margin:0px 5% 3px 0;padding-left:1px;display:inline-block;overflow:hidden;}
+.jedatered .jedatebot .botflex{width:50%;float:left;display: inline-block;margin:0;padding-top:3px; overflow:hidden;}
+.jedatered .jedatebot .botflex li{width:32px; float:left;text-align:center;}
+.jedatered .jedatebot .botflex li input{width:100%;float:left;padding: 0;border:none;text-align: center;display:block;height:26px;line-height:26px;text-decoration: none;outline:none;-moz-outline:none;font-size: 14px;font-family:'Avenir Next', Avenir, 'Helvetica Neue', Helvetica, 'Lantinghei SC', 'Hiragino Sans GB', 'Microsoft YaHei', '\5FAE\8F6F\96C5\9ED1', STHeiti, 'WenQuanYi Micro Hei', SimSun, sans-serif;}
+.jedatered .jedatebot .botflex li input[disabled]{background-color: #f0f0f0;color: #aaa;}
+.jedatered .jedatebot .botflex i{width:12px;float:left;height:26px;line-height:24px;font-style:normal;display:block;text-align: center;background: #f2f2f2; }
+.jedatered .jedatebot .jedatebtn{text-align:center;font-size: 12px;}
+.jedatered .jedatebot .jedatebtn span{width:31%;float:right; margin:0 1.1%;background-color: #D91600;color: #fff;display: block;height:28px;line-height:28px; border-radius:4px;text-align:center;}
+
+.jedatered .jedateprophms{width: 100%;background: #FFF;}
+.jedatered .jedateproppos{position:absolute;left:0; top:0px; padding-top:0px; display:none;}
+.jedatered .jedatepropfix{display:block;}
+.jedatered .jedatepropcon{padding:40px 5px 5px 5px;background-color: #fff; overflow:hidden;position: relative;}
+.jedatered .jedatehmstitle{width:100%;height:40px;line-height:40px;position:absolute;left:0;top:0;background: #D91600; color:#EEEEEE;overflow:hidden;text-align:center;font-size: 15px;}
+.jedatered .jedateproptext{width:72px; float:left;height:30px;line-height:30px; text-align:center;margin:6px 0 0 10px;}
+.jedatered .jedatehmscon{width:72px;height:204px; float:left; overflow-y:auto;border: 1px solid #ddd; margin:0px 0px 0px 10px;}
+.jedatered .jedatehmscon p{width:100%;float:left;text-align: center;height:25px; line-height:25px;font-size: 14px;}
+.jedatered .jedatehmscon p:hover{background: #F2F2F2;}
+.jedatered .jedatehmscon p.action,.jedatered .jedatehmscon p.action:hover{background: #D91600;color:#fff;}
+.jedatered .jedatehmscon p.disabled{background: #fbfbfb;color:#ccc;}
+.jedatered .jedatehmscon p.disabled.action{ background: #D91600;color:#FFFFFF;filter:Alpha(opacity=30);opacity:.3; }
+.jedatered .jedatems p{width:10%;float:left;text-align: center;height:32px; line-height:32px;}
+.jedatered .jedateh p.action,.jedatered .jedatems p.action{background: #D91600;color:#fff;}
+.jedatered .jedatehmsclose{width:30px; height:30px; line-height:26px; text-align:center;position: absolute;top:50%;right:4px; margin-top:-15px;z-index:150;font-size:24px;}
\ No newline at end of file

public/css/jeui.css

+@charset "utf-8";
+/**
+ @Name : JEUI v1.0
+ @Author: chen guojun
+ @Date: 2016-12-28
+ @官网：http://www.jayui.com/jeui/ 或 https://github.com/singod/jeui
+*/
+@import url("iconfont.css");
+html,body{min-height:100%;}
+html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}
+body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin: 0;padding: 0;border: 0;outline: 0;-webkit-tap-highlight-color:transparent;}
+article,aside,header,footer,nav,section,figure,figcaption,hgroup,progress,canvas{display:block}
+blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
+body{font-size:12px;font-family:'PingFangSC-Light','PingFang SC','Segoe UI','Lucida Grande','NotoSansHans-Light','Microsoft YaHei', '\5FAE\8F6F\96C5\9ED1', STHeiti, 'WenQuanYi Micro Hei', SimSun, sans-serif;text-rendering:geometricPrecision;color:#333333;background:#FFFFFF;}
+h1,h2,h3,h4,h5,h6{font-size:100%; font-weight:normal; font-style:normal;}
+table{border-collapse:collapse;border-spacing:0;font-size:100%;empty-cells:show}
+address,caption,cite,code,dfn,th,var{font-style:normal; font-weight:normal;}
+button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}
+button{overflow:visible;}
+button,input{line-height:normal;}
+button,select{text-transform:none;}
+button,html input[type=button],input[type=reset],input[type=submit]{cursor:pointer;-webkit-appearance:button;}
+input[type=checkbox],input[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0;cursor:pointer;}
+button[disabled],html input[disabled]{cursor:default;}
+button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}
+button,input,select,textarea{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:"liga","kern";}
+input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto;}
+input[type=search]{-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield;}
+input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none;}
+textarea{overflow:auto;vertical-align:top;resize:vertical;}
+pre{white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word;}
+ul,ol,li,dl{list-style-type:none;}         i,em{font-style:normal}     svg:not(:root){overflow:hidden}
+img{vertical-align:middle;border:0;-ms-interpolation-mode:bicubic;-webkit-tap-highlight-color:rgba(0,0,0,0);}   
+a{color:#333;text-decoration: none;outline:none;} 
+a:link {color:#333;} 
+a:visited {color:#333;} 
+a:hover {color:#777;outline:none;-moz-outline:none;}
+a:active{blr:expression(this.onFocus=this.blur())}
+a:focus {outline:none;-moz-outline:none;}
+/* Browser scrollbar Style 滚动条 */
+::-webkit-scrollbar-track { -webkit-border-radius: 0px;border-radius: 0px;}
+::-webkit-scrollbar-thumb {-webkit-border-radius: 0px;border-radius: 0px;background: rgba(0,0,0,0.5);}
+::-webkit-scrollbar-thumb:window-inactive {background: rgba(0,0,0,0.4); }
+::-webkit-scrollbar{width:8px;height:10px;background:rgba(222,222,222,0.3);transition:all 0.3s ease-in-out;border-radius:0px}
+::-webkit-scrollbar-thumb{-webkit-border-radius: 0px;border-radius: 0px;background: rgba(0,0,0,0.5); }
+::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,0.6)}
+::-webkit-scrollbar-thumb:active{background:rgba(0,0,0,0.8)}
+
+/* other */
+/* 消除第三方ui可能造成的冲突 */
+.je-html,.je-html *{-webkit-box-sizing:content-box!important;-moz-box-sizing:content-box!important;box-sizing:content-box!important;}
+.header,.warpbox,.navbox,.footer{width:1200px; min-width:1200px; height:auto!important;margin-left:auto; margin-right:auto;}
+.je-f0{font-size:0}          .je-f12{font-size:12px}           .je-f14{font-size:14px}           .je-f16{font-size:16px}
+.je-f18{font-size:18px}      .je-f20{font-size:20px}           .je-f22{font-size:22px}           .je-f24{font-size:24px}
+.je-f26{font-size:26px}      .je-f28{font-size:28px}           .je-f30{font-size:30px}
+.je-field{margin-bottom:10px;padding:0;border:1px solid #e2e2e2;}
+.je-field-title{margin:10px 0 20px;border:none;border-top:1px solid #e2e2e2;}
+.je-field legend{margin-left:20px;padding:0 10px;font-weight:300;}
+.je-quote{margin-bottom:10px;padding:12px;border-left:5px solid #0074d9;border-radius:0 3px 3px 0;background-color:#f2f2f2;line-height:22px;}
+.je-quote.green {border-left:5px solid #5eb95e;}
+.je-quote.orange {border-left:5px solid #F37B1D;}
+.je-icon {font-family:"iconfont" !important;font-size:18px;font-style:normal;vertical-align: bottom;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;font-smoothing: antialiased;text-stroke-width: 0.2px;}
+/* 苹果字体与微软雅黑 */                                                                   
+.je-fmy{font-family:'PingFangSC-Light','PingFang SC','Segoe UI','Lucida Grande','NotoSansHans-Light','Microsoft YaHei', '\5FAE\8F6F\96C5\9ED1', STHeiti, 'WenQuanYi Micro Hei', SimSun, sans-serif;text-rendering:geometricPrecision;}
+/* 宋体 */
+.je-far{font-family:Arial,"\5b8b\4f53", sans-serif;}
+                                            
+/* clear */
+.je-clear{display: block; clear:both; font-size:0; height:0; line-height:0;*zoom:1}
+.je-clear:after{content:"."; clear:both; display:block; height:0; visibility:hidden;}
+
+/* display */
+.je-hide{display:none;}                   .je-show{display:block;}
+.je-din{display:inline;}                  .je-dib{display:inline-block;}
+/* float */  
+.je-fl{ float:left;}                      .je-fr{ float:right;}
+/* position */
+.je-ovh{overflow:hidden;}                 .je-por{position:relative;}   
+.je-poa{position:absolute;}               .je-pof{position:fixed!important;}
+/* text-align */
+.je-tc{text-align:center;}                .je-tr{text-align:right;}   
+.je-tl{text-align:left;}                  .je-tj{text-align:justify;}
+
+/* 块状元素水平居中 */
+.je-auto{margin-left:auto; margin-right:auto;}
+/* 单行文字溢出虚点显 示*/
+.je-cell{text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
+/* percentage 百分比 */
+.je-w100{width:100%;}   .je-w90{width:90%;}   .je-w85{width:85%;}   .je-w80{width:80%;}   .je-w75{width:75%;}      .je-w70{width:70%;}
+.je-w67{width:67%;}     .je-w60{width:60%;}   .je-w50{width:50%;}   .je-w40{width:40%;}   .je-w33{width:32.8%;}   .je-w30{width:30%;}
+.je-w25{width:25%;}     .je-w20{width:20%;}   .je-w15{width:15%;}   .je-w10{width:10%;}   .je-w5{width:5%;}        .je-w0{width:0px;}
+                                                                                                                             
+/* margin-left */
+.je-ml0{margin-left:0}           .je-ml2{margin-left:2px}         .je-ml5{margin-left:5px}          .je-ml8{margin-left:8px}
+.je-ml10{margin-left:10px}       .je-ml15{margin-left:15px}       .je-ml20{margin-left:20px}        .je-ml25{margin-left:25px}         .je-ml30{margin-left:30px}
+/* margin-right */                                                                                                                                               
+.je-mr0{margin-right:0}          .je-mr2{margin-right:2px}        .je-mr5{margin-right:5px}         .je-mr8{margin-right:8px}
+.je-mr10{margin-right:10px}      .je-mr15{margin-right:15px}      .je-mr20{margin-right:20px}       .je-mr25{margin-right:25px}        .je-mr30{margin-right:30px}
+/* margin-top */
+.je-mt0{margin-top:0}            .je-mt2{margin-top:2px}          .je-mt5{margin-top:5px}           .je-mt8{margin-top:8px}
+.je-mt10{margin-top:10px}        .je-mt15{margin-top:15px}        .je-mt20{margin-top:20px}         .je-mt25{margin-top:25px}          .je-mt30{margin-top:30px}
+/* margin-bottom */
+.je-mb0{margin-bottom:0}         .je-mb2{margin-bottom:2px}       .je-mb5{margin-bottom:5px}        .je-mb8{margin-bottom:8px}
+.je-mb10{margin-bottom:10px}     .je-mb15{margin-bottom:15px}     .je-mb20{margin-bottom:20px}      .je-mb25{margin-bottom:25px}      .je-mb30{margin-bottom:30px}
+/* margin */
+.je-m0{margin:0}                 .je-m1{margin:1px}               .je-m2{margin:2px}                .je-m5{margin:5px}                .je-m8{margin:8px}
+.je-m10{margin:10px}             .je-m15{margin:15px}             .je-m20{margin:20px}              .je-m25{margin:25px}              .je-m30{margin:30px}
+                                                                                                                                              
+/* padding-left */
+.je-pl0{padding-left:0}          .je-pl2{padding-left:2px}        .je-pl5{padding-left:5px}         .je-pl8{padding-left:8px}
+.je-pl10{padding-left:10px}      .je-pl15{padding-left:15px}      .je-pl20{padding-left:20px}       .je-pl25{padding-left:25px}       .je-pl30{padding-left:30px}
+/* padding-right */
+.je-pr0{padding-right:0}         .je-pr2{padding-right:2px}       .je-pr5{padding-right:5px}        .je-pr8{padding-right:8px}
+.je-pr10{padding-right:10px}     .je-pr15{padding-right:15px}     .je-pr20{padding-right:20px}      .je-pr25{padding-right:25px}      .je-pr30{padding-right:30px}
+/* padding-top */
+.je-pt0{padding-top:0}           .je-pt2{padding-top:2px}         .je-pt5{padding-top:5px}          .je-pt8{padding-top:8px}
+.je-pt10{padding-top:10px}       .je-pt15{padding-top:15px}       .je-pt20{padding-top:20px}        .je-pt25{padding-top:25px}        .je-pt30{padding-top:30px}
+/* padding-bottom */
+.je-pb0{padding-bottom:0}        .je-pb2{padding-bottom:2px}      .je-pb5{padding-bottom:5px}       .je-pb8{padding-bottom:8px}  
+.je-pb10{padding-bottom:10px}    .je-pb15{padding-bottom:15px}    .je-pb20{padding-bottom:20px}     .je-pb25{padding-bottom:25px}     .je-pb30{padding-bottom:30px}
+/* padding */
+.je-p0{padding:0}                .je-p2{padding:2px}              .je-p5{padding:5px}               .je-p8{padding:8px}
+.je-p10{padding:10px}            .je-p15{padding:15px}            .je-p20{padding:20px}             .je-p25{padding:25px}             .je-p30{padding:30px}
+
+/** buttons Style*/
+.je-btn{display:inline-block;padding:0 18px;height:36px;line-height:36px;border:none;border-radius:3px;background-color:#0074d9;color:#fff;opacity:.9;filter:alpha(opacity=90);text-align: center; text-decoration: none;white-space: nowrap; -webkit-user-select: none; -moz-user-select: none; user-select: none; overflow: visible; cursor: pointer;}
+.je-btn-big{padding:0 25px;height:44px;line-height:44px;}
+.je-btn-small{padding:0 10px;height:30px;line-height:30px;}
+.je-btn-mini{padding:0 5px;height:22px;line-height:22px;}
+.je-btn:hover, .je-btn:focus{text-decoration: none;opacity:.75;filter:alpha(opacity=75);}
+.je-btn:focus { outline: none;  }
+.je-btn:active { outline: none; opacity:1;filter:alpha(opacity=100);}
+.je-btn[disabled],.je-btn[disabled]:active,.je-btn[disabled]:hover{border:1px solid #e6e6e6;background-color:#F9F9F9;color:#C9C9C9;opacity:1;cursor:not-allowed;}
+/* Form Style*/
+.je-form-item,.je-form-pane,.je-form-text{clear:both;margin-bottom:15px;}
+.je-input,.je-select,.je-textarea{height:36px;line-height:36px;line-height:34px\9;border:1px solid #D9D9D9;border-radius:3px;background-color:#fff;outline: 0;-webkit-transition: border-color .15s cubic-bezier(.65,.05,.35,.5);transition: border-color .15s cubic-bezier(.65,.05,.35,.5);-webkit-box-sizing: border-box!important;-moz-box-sizing: border-box!important;box-sizing: border-box!important;}
+.je-input:focus,.je-select:focus,.je-textarea:focus{border:1px solid #3bb4f2;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 5px rgba(59,180,242,.3);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 5px rgba(59,180,242,.3);}
+.je-input[disabled]{background-color: #F8F8F8;}
+.je-inputbox {margin-left: 110px;min-height: 36px;  }
+
+.je-form-item .je-label{height:36px;line-height:36px;line-height:34px\9;float:left;display:block;padding:0 10px;width:90px;text-align:right;font-weight:400;}
+.je-form-item .je-input{padding: 0% 8px;width:100%;font-size:14px;}
+.je-form-item .je-textarea{width:100%;min-height: 100px;height: auto;line-height: 20px;padding: 6px 10px;resize: vertical;font-size:14px;}
+.je-form-pane .je-label{height:34px;line-height:34px;line-height:34px\9;float:left;display:block;padding:0 10px;width:89px;text-align:right;font-weight:400;border-radius: 2px 0 0 2px;background-color: #F9F9F9;border:1px solid #d6d6d6;border-right:none;border-radius:3px 0 0 3px;}
+.je-form-pane .je-input{padding: 0% 8px;width:100%;border-radius:0 3px 3px 0;font-size:14px;}
+
+.je-form-text .je-label{width:100%;height:36px;line-height:36px;line-height:36px\9;float:left;display:block;padding:0 10px;text-align:left;font-weight:400;border-radius: 2px 0 0 2px;background-color: #F9F9F9;border:1px solid #D6D6D6;border-bottom:none;border-radius:3px 3px 0 0;-webkit-box-sizing: border-box!important;-moz-box-sizing: border-box!important;box-sizing: border-box!important;}
+.je-form-text .je-textarea{width:100%;min-height: 100px;height: auto;line-height: 20px;padding: 6px 10px;border-radius:0 0 3px 3px;resize: vertical;font-size:14px;}
+/* beautify checkbox */
+.je-check{height:30px;line-height:30px;line-height:30px\9;border:1px solid #DADADA;border-radius:3px;display: inline-block;overflow: hidden;position: relative;margin: 2px 2px 0 0;}
+.je-check input{width:100%;height:100%;margin:0;padding:0;position: absolute; top:0; left:0;right:0;bottom:0; z-index:5; filter:alpha(opacity=0);opacity:0;cursor:pointer;display: block;-webkit-box-sizing: border-box!important;-moz-box-sizing: border-box!important;box-sizing: border-box!important;}
+.je-check em{width:30px;height:30px;line-height: 28px;display: inline-block;float: left;background-color:#fff;text-align: center;font-size: 20px;color: #DFDFDF;font-family:"iconfont" !important;vertical-align: bottom;}
+.je-check .je-check-text{height:30px;line-height:30px;display: inline-block;float: left;padding: 0 8px;background-color: #F6F6F6;overflow: hidden;}
+.je-check.on{border:1px solid #5eb95e;}
+.je-check.on em{background-color:#fff;color: #5eb95e;}
+.je-check.on .je-check-text{background-color: #5eb95e;color: #ffffff;}
+.je-check.checkDisa,.je-check.disabled{filter:alpha(opacity=40);opacity:0.4;}
+/* beautify radio */
+.je-radio{height:32px;line-height:32px;line-height:32px\9;display: inline-block;overflow: hidden;position: relative;margin-top: 2px;}
+.je-radio input{width:100%;height:100%;margin:0;padding:0;position: absolute; top:0; left:0;right:0;bottom:0; z-index:5; filter:alpha(opacity=0);opacity:0;cursor:pointer;display: block;-webkit-box-sizing: border-box!important;-moz-box-sizing: border-box!important;box-sizing: border-box!important;}
+.je-radio em{width:28px;height:32px;line-height: 32px;display: inline-block;float: left;background-color:#fff;text-align: left;font-size: 28px;color: #D8D8D8;font-family:"iconfont" !important;vertical-align: bottom;}
+.je-radio .je-radio-text{height:32px;line-height:32px;display: inline-block;float: left;padding: 0 8px 0 0;overflow: hidden;}
+.je-radio.on{background-color:#fff;}
+.je-radio.on em{color: #5eb95e;}
+.je-radio.on .je-radio-text{color: #222;}
+.je-radio.checkDisa,.je-radio.disabled{filter:alpha(opacity=40);opacity:0.4;}
+
+.je-check-switch,.je-radio-switch{position:relative;display:inline-block;width:65px;height:28px;line-height:28px;line-height:28px\9;border-radius:28px;background-color:#C6C6C6;-webkit-appearance:none;user-select:none;margin: 4px 4px 0 0;}
+.je-check-switch input,.je-radio-switch input{width:100%;height:100%;margin:0;padding:0;position: absolute; top:0; left:0;right:0;bottom:0; z-index:5; filter:alpha(opacity=0);opacity:0;cursor:pointer;display: block;-webkit-box-sizing: border-box!important;-moz-box-sizing: border-box!important;box-sizing: border-box!important;}
+.je-check-switch span,.je-radio-switch span{color: #ffffff;display: inline-block;padding: 0px 6px;font-size:12px;float: right;}
+.je-check-switch em,.je-radio-switch em{position: absolute;top: 50%;left: 2px;width: 24px;height: 24px;margin-top:-12px;display:block;border-radius: 50px;background-color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.4);}
+.je-check-switch.on,.je-radio-switch.on{background-color: #5eb95e;}
+.je-check-switch.on span,.je-radio-switch.on span{float: left;}
+.je-check-switch.on em,.je-radio-switch.on em{left: auto;right: 2px!important;}
+.je-check-switch.checkDisa,.je-check-switch.disabled,
+.je-radio-switch.checkDisa,.je-radio-switch.disabled{filter:alpha(opacity=40);opacity:0.4;}
+/* beautify select */
+.je-select{min-width: 190px;height:34px;line-height:34px;line-height:34px\9;padding:0 22px 0 8px;border-radius:3px;display: inline-block;overflow: hidden;position: relative;cursor: pointer;position: relative;text-overflow:ellipsis; white-space:nowrap;}
+.je-select.disabled{background-color:#f2f2f2;color: #aaa;}
+.je-select:after { width: 20px;height: 32px;overflow: hidden;position: absolute;right: 2px;top:0px;cursor: pointer;transition: all .3s;-webkit-transition: all .3s; content:"";background-image: url("data:image/gif;base64,R0lGODlhEgASAIABAGZmZv///yH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4zLWMwMTEgNjYuMTQ1NjYxLCAyMDEyLzAyLzA2LTE0OjU2OjI3ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0Q0Q2RTRDMjVEQkMxMUU0QjBCREU0MUY5QUQyMDA2NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0Q0Q2RTRDMzVEQkMxMUU0QjBCREU0MUY5QUQyMDA2NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjRDRDZFNEMwNURCQzExRTRCMEJERTQxRjlBRDIwMDY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjRDRDZFNEMxNURCQzExRTRCMEJERTQxRjlBRDIwMDY3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEAQAAAQAsAAAAABIAEgAAAhqMj6nL7Q8NiAdYajPMnPovcdcjYiMGpuq6FAA7"); background-repeat:no-repeat; background-position:right center;}
+.je-select-open{border:1px solid #D9D9D9;border-radius:3px;background-color:#fff;box-shadow: 0 0 5px rgba(0,0,0,.2);position: absolute;overflow: hidden;}
+.je-select-open .opensoso{padding: 4px 8px;width:100%;background-color:#fff;-webkit-box-sizing: border-box!important;-moz-box-sizing: border-box!important;box-sizing: border-box!important;position: relative;}
+.je-select-open input{padding: 0% 4px;width:100%;height:24px;line-height:24px;-webkit-box-sizing: border-box!important;-moz-box-sizing: border-box!important;box-sizing: border-box!important;border:1px solid #DADADA;}
+.je-select-open dl{padding: 4px 0;font-size:14px;overflow: auto;}
+.je-select-open dt{padding: 0 8px;height: 32px;line-height: 32px;text-overflow:ellipsis; white-space:nowrap;overflow: hidden;color: #777;font-style: italic;}
+.je-select-open dd{padding: 0 8px;height: 32px;line-height: 32px;text-overflow:ellipsis; white-space:nowrap;overflow: hidden;cursor: pointer;}
+.je-select-open dd.on,.je-select-open dd.on:hover{background-color: #5eb95e;color:#fff;}
+.je-select-open dd.group{padding: 0 8px 0 22px;}
+.je-select-open dd:hover{background-color: #F3F3F3;}
+/* table */
+.je-table{margin:10px 0;width:100%;background-color:#fff;}
+.je-table tr{-webkit-transition:all .3s;transition:all .3s;}
+.je-table thead tr{background-color:#f2f2f2;}
+.je-table th{text-align:left;}
+.je-table td,.je-table th{padding:9px 15px;min-height:20px;border:1px solid #e0e0e0;font-size:14px;line-height:20px;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;}
+.je-table tr:hover,.je-table[even] tr:nth-child(even){background-color:#f8f8f8;}
+.je-table[skin=botline],.je-table[skin=leftline]{border:1px solid #e0e0e0;}
+.je-table[skin=botline] td,.je-table[skin=botline] th{border:none;border-bottom:1px solid #e0e0e0;}
+.je-table[skin=leftline] th{border-bottom:1px solid #e0e0e0;}
+.je-table[skin=leftline] td{border:none;border-left:1px solid #e0e0e0;}
+.je-table[skin=noline] td,.je-table[skin=noline] th{border:none;}
+/* table 表格数据类 */
+.je-datatable{position: relative; overflow: hidden;background: #fff;border: 1px solid #e0e0e0;text-align: left;}
+.je-datatable .fielddrop{width: 60px;height: 36px;overflow: hidden;background-color: #f2f2f2;background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABFElEQVQ4T6WU0VHDQAxE9yqADgIVECoIJUAFQAdLBdCBNxUAFQAdpATowOmAVACzMxcmY9+d7KAff1h6ltYrJQRB8hTAY0qp77puHeWnKIHkk4E5717SS6tmCvAOwHOGXEr6/BfQxSSXfkYw54QdRpIM3zeBJH8KwF7See1DEbAHsBgUf0i6Pgo4d9ymhtkupZFdt63ZpzpyRb990ztJNvwoWkD776wy9kbSZhbwGP1GGpL0Wt3OhD1I0r5mNDJJj7KaCH2VZGn+ogS02IZeBNCiH4s/JZ8sm/qkAv0CcCXpe/Lq5YPgTofQLYBlCRYeB5JesbeDLna5s+oJC68NSQLoMvRG0ntL2xDo4mwnm7l5rZ37C3xXWBXEHNkQAAAAAElFTkSuQmCC");background-repeat: no-repeat;background-position: center center;cursor: pointer;position: absolute;top:34px;left:5px;border:1px solid #e0e0e0;border-radius:0 0 4px 4px;z-index:50;display: none;}
+.je-datatable .je-datatable-thead{position: relative;  background-color: #f2f2f2;width: 9999px;height:34px;border-bottom:1px solid #e0e0e0;}
+.je-datatable .je-datatable-thead col{display: none;}
+.je-datatable .je-datatable-thead table{border-spacing: 0;text-align: left;position: relative;table-layout: fixed;}
+.je-datatable .je-datatable-thead table th{position: relative;padding:0 5px;border-right:1px solid #e0e0e0;overflow: hidden;height: 34px;line-height: 34px;text-overflow:ellipsis;white-space:nowrap;}
+.je-datatable .je-datatable-field{display: none;padding: 10px;overflow: hidden;background-color: #f2f2f2;position: absolute;top:35px;left: 0;  right:0;bottom: 0;z-index: 100;border-bottom: 1px #ddd solid;}
+.je-datatable .je-datatable-field h3{height: 30px;line-height: 30px;border-bottom: 1px #ddd solid;font-size: 14px;}
+.je-datatable .je-datatable-field h3 em{width: 30px;height: 30px;float:right;background-image: url(../images/icon-close.png);background-repeat: no-repeat;background-position: center center;cursor: pointer;}
+.je-datatable .je-datatable-field ul{overflow: hidden;padding-top: 4px;}
+.je-datatable .je-datatable-field li{display: inline-block; padding-right: 15px;float: left;}
+.je-datatable .je-datatable-field li label{cursor: pointer;padding: 5px 0;display:block;}
+
+.je-datatable .je-datatable-tbody{position: relative;overflow: auto;background-color: #ffffff;min-height: 68px;}
+.je-datatable .je-datatable-mask{display: block;position: absolute;top:0;left: 0;right:0;bottom:0;z-index: 150;background-color: #ffffff;}
+.je-datatable .je-datatable-mask div{width:160px;height:40px;line-height:40px;padding-top:40px;text-align:center;position:absolute;margin:-40px 0 0 -80px;top:50%;left:50%;background-position: center 4px;background-repeat: no-repeat;}
+.je-datatable .je-datatable-mask .loading{background-image:url(../images/icon-loading.gif);}
+.je-datatable .je-datatable-mask .nocontent{background-image: url(../images/icon-sigh.png);}
+.je-datatable .je-datatable-mask .error{background-image: url(../images/icon-error.png);}
+.je-datatable .je-datatable-tbody table{height: 68px;border-spacing: 0;text-align: left;table-layout:fixed;background-color: #ffffff;}
+.je-datatable .je-datatable-tbody table td{position: relative;padding: 5px;border-right:1px solid #e0e0e0;border-bottom:1px solid #e0e0e0;line-height: 20px;overflow: hidden;}
+.je-datatable .je-datatable-tbody tr:hover{background-color:#fffeee;}
+.je-datatable .colsort{ background-repeat:no-repeat;cursor:pointer;}
+.je-datatable .colsort em{width: 10px;height: 12px;display:inline-block;position: absolute;top:50%;right:5px;margin: -6px 0 0 -5px;z-index: 10;overflow: hidden;}
+.je-datatable .colsort.all em:before{content:"";font-size: 0;line-height: 0;border-width: 5px;width:0;height:0;border-style:dashed dashed solid dashed; border-color:transparent transparent #666 transparent;position: absolute;top:-5px;left: 0;}
+.je-datatable .colsort.all em:after{content:"";font-size: 0;line-height: 0;border-width: 5px;width:0;height:0;border-style:solid dashed dashed dashed; border-color:#666 transparent transparent transparent;position: absolute;bottom:-5px;left: 0;}
+.je-datatable .colsort.desc em:after{content:"";font-size: 0;line-height: 0;border-width: 5px;width:0;height:0;border-style:solid dashed dashed dashed; border-color:#666 transparent transparent transparent;position: absolute;bottom:-2px;left: 0;}
+.je-datatable .colsort.asc em:before{content:"";font-size: 0;line-height: 0;border-width: 5px;width:0;height:0;border-style:dashed dashed solid dashed; border-color:transparent transparent #666 transparent;position: absolute;position: absolute;top:-2px;left: 0;}
+.je-datatable-page{background-color: #f2f2f2;height:24px;line-height:24px;padding:5px 0;text-align: right;}
+.je-datatable-page .pagebox{float: right;}
+.je-datatable-page span,.je-datatable-page a{margin: 0 3px;float: left;border-radius:4px;overflow: hidden;}
+.je-datatable-page a, .je-datatable-page .flip, .je-datatable-page .current { border: 1px solid #dadada; display: inline-block; height: 22px; line-height: 22px; text-align: center; }
+.je-datatable-page a { background: none repeat scroll 0 0 #fff; color: #010101; text-decoration: none; min-width: 32px; }
+.je-datatable-page a:hover { background: #fff;color: #0074d9;}
+.je-datatable-page .noPage { color: #a4a4a4;margin-right: 3px; cursor:not-allowed;}
+.je-datatable-page .current {border: 1px solid #0074d9; background-color:#0074d9; color: #ffffff; min-width: 32px;  }
+.je-datatable-page .flip { padding: 0 5px;}
+.je-datatable-page .pagecount,.je-datatable-page .datacount{padding-right: 10px;line-height:24px;}
+.je-datatable-page .pagecount em,.je-datatable-page .datacount em{padding:0 3px;color: #b00;}
+.je-datatable-page .gopage{width:40px;border: 1px solid #dadada; display: inline-block; text-align: center;border-radius:4px 0 0 4px;height: 20px; line-height: 20px;vertical-align: top;margin-left: 5px;-webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,.15);box-shadow: inset 1px 1px 2px rgba(0,0,0,.10);}
+.je-datatable-page .gobtn{width:40px;border: 1px solid #dadada;border-left: none;background: #fff; display: inline-block; text-align: center;border-radius:0 4px 4px 0;height: 24px; line-height: 20px;margin-right: 4px;vertical-align: top;overflow: hidden;}
+/* tree */
+.je-tree{margin:10px 0;width:100%;background-color:#fff; font-size: 14px;}
+.je-tree li{min-height: 26px;line-height: 26px;}
+.je-tree li a{min-height: 26px;line-height: 26px;display: block;}
+.je-tree li a:hover{color: #0074d9;}
+.je-tree li .treeparent{background-color:#C6C6C6;}
+.je-tree li ul{display: none;}
+.je-tree li ul li{padding-left: 28px;}
+.je-tree li ul.open{display: block!important;}
+.je-tree .folderhide{background: url(../images/folder-hide.gif) no-repeat left center;padding-left: 34px;}
+.je-tree .foldershow{background: url(../images/folder-show.gif) no-repeat left center;}
+.je-tree .folderleaf{background: url(../images/leaf.gif) no-repeat 4px center;padding-left: 24px;}
+/* Tab */
+.je-tab{margin: 10px 0;overflow: hidden;text-align: left!important;border: 1px solid #e2e2e2;box-shadow: 0 2px 5px 0 rgba(0,0,0,.1);}
+.je-tab .tabheader{position: relative;left: 0;height: 40px;background-color: #f2f2f2;white-space: nowrap;font-size: 0;border-bottom: 1px solid #e2e2e2;}
+.je-tab .tabheader li{position:relative;padding:0 20px 0 10px;min-width:65px;font-size:14px;line-height:40px;display: inline-block; vertical-align: middle;cursor: default;}
+.je-tab .tabheader li em{float: right;width:18px;height:18px;line-height:18px;font-size:20px;position:absolute;top:50%;right:2px;margin-top:-9px;text-align: center;display: block;cursor: pointer;}
+.je-tab .tabheader li em:hover{background-color: #dd514c;color: #fff;border-radius:500px;}
+.je-tab .tabheader li.on{margin-right: -1px;  margin-left: -1px;background-color: #fff;border: 1px solid #e2e2e2;border-top: none;border-width: 1px;border-bottom-color: #fff;}
+.je-tab .tabcontent{padding:10px;}
+.je-tab .tabcontent .tabitem{min-height:100px;display: none;}
+.je-tab .tabcontent .tabitem.on{display: block;}
+/* progress bar 进度条 */
+.je-progress{position: relative; height: 6px; border-radius: 20px; background-color: #e2e2e2;}
+.je-progress-bar{position: absolute; width: 0; max-width: 100%; height: 6px; border-radius: 20px; text-align: right; background-color: #5FB878; transition: all .3s; -webkit-transition: all .3s;}
+.je-progress-big, .je-progress-big .je-progress-bar{height: 18px; line-height: 18px;}
+.je-progress-text{position: relative; top: -18px; line-height: 18px; font-size: 12px; color: #666}
+.je-progress-big .je-progress-text{position: static; padding: 0 10px; color: #fff;}
+/* Backgrounds Style*/
+.je-bg-navy { background-color: #001f3f; }            .je-bg-blue { background-color: #0074d9; }
+.je-bg-aqua { background-color: #7fdbff; }            .je-bg-teal { background-color: #39cccc; }
+.je-bg-olive { background-color: #3d9970; }           .je-bg-green { background-color: #5eb95e; }
+.je-bg-lime { background-color: #01ff70; }            .je-bg-yellow { background-color: #ffdc00; }
+.je-bg-orange { background-color: #F37B1D; }          .je-bg-red { background-color: #dd514c; }
+.je-bg-fuchsia { background-color: #f012be; }         .je-bg-purple { background-color: #8E488E; }
+.je-bg-maroon { background-color: #85144b; }          .je-bg-black { background-color: #111111;}
+.je-bg-white{ background-color:#fff; }                .je-bg-native{background-color: #e6e6e6;color: #222;}
+
+/* Colors Style*/
+.je-g0{color:#000;}               .je-g2{color:#222;}                .je-g3{color:#333;}                 .je-g4{color:#444;}       .je-g5{color:#555;}       
+.je-g6{color:#666;}               .je-g7{color:#777;}                .je-g8{color:#888;}                 .je-g9{color:#999;}       .je-white{color:#fff;}
+.je-ga{color:#aaa;}               .je-gb{color:#bbb;}                .je-gc{color:#ccc;}                 .je-gd{color:#ddd;}       .je-ge{color:#eee;}   
+.je-navy { color: #001f3f; }      .je-blue { color: #0074d9; }       .je-aqua { color: #7fdbff; }        .je-teal { color: #39cccc; }
+.je-olive { color: #3d9970; }     .je-green { color: #5eb95e; }      .je-lime { color: #01ff70; }        .je-yellow { color: #ffdc00; }
+.je-orange { color: #F37B1D; }    .je-red { color: #dd514c; }        .je-fuchsia { color: #f012be; }     .je-purple { color: #8E488E; }
+.je-maroon { color: #85144b; }    .je-black { color: #111111; }
+                                    
+/* link color Style*/
+a.je-red{color:#dd514c;}          a.je-blue{color:#0074d9;}          a.je-green{ color: #5eb95e; }       a.je-yellow{ color: #ffdc00; } 
+a.je-orange{ color: #F37B1D; }    a.je-white{ color:#fff; }
+
+/* border radius */
+.je-rdu{-webkit-border-radius:1000px;-moz-border-radius:1000px;border-radius:1000px;}
+.je-rdu3{-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
+.je-rdu4{-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
+.je-rdu5{-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
+.je-rdu6{-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}
\ No newline at end of file

public/dynamicParameters.html

+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <title>动态参数</title>
+    <!--<link href="../../css/frame.css" rel="stylesheet" />-->
+    <link href="css/easyui/easyui.css" rel="stylesheet" />
+    <link href="../../../../static/libs/my97/skin/WdatePicker.css" rel="stylesheet">
+    <link href="../../../../static/libs/my97/skin/simple/datepicker.css" rel="stylesheet">
+    <style type="text/css">
+        .textbox-addon-right {
+            float: right;
+        }
+
+        .treE {
+            overflow: hidden
+        }
+
+        .treE:hover {
+            overflow-y: auto
+        }
+
+        .treE::-webkit-scrollbar-track {
+            background-color: #2A2C3B;
+        }
+
+        .treE::-webkit-scrollbar {
+            width: 10px;
+            background-color: #F5F5F5;
+        }
+
+        .treE::-webkit-scrollbar-thumb {
+            /*border-radius: 10px;*/
+            background: #286399;
+            border: 2px solid rgb(116, 117, 255);
+            border-radius: 5px;
+        }
+
+        body {
+            background: rgba(23, 39, 68, .6);
+            height: 400px!important;
+            padding: 0 3%!important;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="easyui-layout" data-options="fit:true">
+        <div data-options="region:'west',split:true" style="width:300px;" class='treE'>
+            <div id="ptree" class="easyui-tree" data-options="fit:true,lines:true,onClick:clickTreeNode,filter:searchTree">
+            </div>
+        </div>
+        <div data-options="region:'center'" style="padding:5px">
+            <div id="pgrid" class="easyui-propertygrid" data-options="showGroup:false,fit:true,fitColumns:true,
+                 columns:myColumns,onAfterEdit:onEndEditParameter,onClickRow:onClickPropertyRow">
+            </div>
+        </div>
+        <!--<div data-options="region:'south',border:false" style="height: 40px;padding:8px;">
+            <a href="#" id="saveAllChanged" class="settingBtn">保存</a>
+        </div>-->
+    </div>
+    <script src="libs/jquery.min.js"></script>
+    <script src="libs/xml.js"></script>
+    <script src="libs/jquery.easyui.min.js"></script>
+    <script src="libs/jquery.easyui.extension.js"></script>
+    <script src="libs/my97/WdatePicker.js"></script>
+    <script type="text/javascript">
+        var pGridObj;
+        var selectedNode; //当前选中的节点
+        var changedKeyValues = new Array(); //用于保存已修改的参数集合,在重新加载参数树及提交成功后清空
+        var currentRowIndex = null; //当前选中的行
+        var edit_xml = null; //保存编辑后的xml信息
+        var isDebug = true;
+
+        var myColumns = [
+            [{
+                field: "name",
+                title: "参数名",
+                width: 100,
+                formatter: function(value, rowData, rowIndex) {
+                    return '<span style="display:inline-block;width:96%;overflow: hidden;white-space: nowrap;text-overflow:ellipsis" title="' + value + '">' + value + '</span>';
+                }
+            }, {
+                field: "value",
+                title: "值",
+                width: 150,
+                formatter: parameterValueFormatter,
+                styler: parameterStyleFormatter
+            }, {
+                field: "info",
+                title: "说明",
+                width: 150,
+                formatter: function(value, rowData, rowIndex) {
+                    return '<span style="display:inline-block;width:96%;overflow: hidden;white-space: nowrap;text-overflow:ellipsis" title="' + value + '">' + value + '</span>';
+                }
+            }]
+        ];
+
+        $(document).ready(function() {
+            pGridObj = $("#pgrid");
+            loadParameterTree();
+            // $("#saveAllChanged").click(submitAllChanges);
+        });
+
+        function clickButton(text) {
+            $("#ptree").tree("doFilter", text);
+        }
+        //
+        function searchTree(q, node) {
+            return node.text.indexOf(q) > -1;
+        }
+
+
+        //加载参数树
+        function loadParameterTree(xmlK, xmlV) {
+            let xmlValue = $.parseXML(xmlV)
+            edit_xml = xmlValue;
+            console.log(edit_xml)
+            let xmlKey = $.parseXML(xmlK);
+            console.log(xmlKey)
+            console.log(xmlValue)
+            let jsonData = convertXmlToJson(xmlKey, xmlValue);
+            window.xmlStr = ""; //XMLtoString(jsonData);
+            $('.datagrid-body').html('')
+            $("#ptree").tree("loadData", jsonData);
+
+            // var url = "/do/trafficController/configVal?t=" + new Date().getTime();
+            // var dataUrl = "/do/trafficController/configKey?t=" + new Date().getTime();
+            // if (isDebug) {
+            //     url = "xml/traffic_config_utf8.xml";
+            //     dataUrl = "xml/traffic_config_utf8.xml";
+            // }
+
+            // $.get(url, null, function(xml) {
+            //     //解释XML
+            //     var xmlDoc;
+            //     try {
+            //         xmlDoc = $.parseXML(xml);
+            //         edit_xml = xmlDoc;
+            //     } catch (e) {
+            //         $.messager.alert("错误", "解释参数XML错误!(XML格式不正确)", "error");
+            //         return;
+            //     }
+            //     //加载存储设置值的XML
+            //     $.ajax(dataUrl, {
+            //         async: true,
+            //         dataType: "text",
+            //         error: function(jqXHR, status, error) {
+            //             $.messager.alert("错误", "获取参数值XML出错!", "error");
+            //         },
+            //         success: function(data, status, jqXHR) {
+            //             try {
+            //                 var xmlValueJsonData = $.parseXML(data);
+            //             } catch (e) {
+            //                 $.messager.alert("错误", "解释参数XML错误!(XML格式不正确)", "error");
+            //                 return;
+            //             }
+            //             var jsonData = convertXmlToJson(xmlDoc, xmlValueJsonData);
+            //             console.log(jsonData)
+            //             $("#ptree").tree("loadData", jsonData);
+            //         }
+            //     });
+
+            // }, "text");
+        }
+
+        //参数值格式化函数
+        function parameterValueFormatter(value, row, index) {
+
+            var valueType = row.type;
+            console.log(valueType)
+            switch (valueType) {
+                case "3":
+                    var data = row.editor.options.data;
+                    for (var i = 0; i < data.length; i++) {
+                        if (data[i].id == value)
+                            return data[i].text;
+                    }
+                    return value;
+                    //布尔型，1->开启,0->关闭
+                case "4":
+                    return parseInt(value) == 1 ? "是" : "否";
+                default:
+                    return value;
+            }
+        }
+
+        function parameterStyleFormatter(value, row, index) {
+            var valueType = row.type;
+            switch (valueType) {
+                //布尔型，1->显示为绿色,0->显示为红色
+                case "4":
+                    return parseInt(value) == 1 ? "color:green" : "color:red";
+                default:
+                    return "";
+            }
+        }
+
+        function clickTreeNode(node) {
+            selectedNode = node; //保存当前选中的节点
+            if (node.gridData) {
+                pGridObj.propertygrid("loadData", node.gridData);
+            }
+        }
+
+        //结果编辑参数
+        function onEndEditParameter(index, row, changes) {
+            if (changes && changes.value != null && changes.value != undefined) {
+                if (window.console)
+                    console.log(selectedNode.attr.path + "/" + row.name + "=" + changes.value);
+                var key = selectedNode.attr.path + "/" + row.name + "#" + row.type;
+                //替换'/'为'\\'
+                key = key.replace(/\//g, "\\");
+                changedKeyValues[key] = changes.value; //保存参数
+                //提交xml
+                editor_chgxml(selectedNode.attr.path + "/" + row.name,changes.value);
+
+                //提交路径
+                // onchangexmlNode();
+            }
+        }
+
+        function onchangexmlNode() {
+            window.xmlStr = "";
+            for (var key in changedKeyValues) {
+                var _key = key.split("#")[0];
+                window.xmlStr += key + "@" + changedKeyValues[key] + ";";
+            }
+            // console.log("window.xmlStr="+window.xmlStr);
+        }
+
+        //编辑xml
+        //编辑xml
+        function editor_chgxml(path, value) {
+            console.log(path);
+            console.log(value);
+            var xml_node = path.split("/");
+            $root = $(edit_xml).find("root");
+            if (xml_node != null && xml_node.length) {
+                // $_chil = $root.find(xml_node[1]);
+              var $_chil = null;
+              var _chilList = $root.children();
+              for(var j = 0; j< _chilList.length; j++){
+                  if(_chilList[j].nodeName == xml_node[1]){
+                    $_chil = _chilList[j]
+                  }
+              }
+			        if ($_chil == null) {
+                    $root.appendXml("<" + xml_node[1] + "/>");
+                    $_chil = $root.children();//$root.find(xml_node[1]);
+                    $_chil = $_chil[$_chil.length-1];
+                    for (var i = 2; i < xml_node.length; i++) {
+                        $($_chil).appendXml("<" + xml_node[i] + "/>");
+                        $_chil = $_chil.lastChild;
+                        if (i == xml_node.length - 1) {
+                            $_chil.textContent  = value;
+                        }
+                    }
+                } else {
+                    var _chil;
+                    for (var i = 2; i < xml_node.length; i++) {
+                        _chil = $_chil;
+                        //$_chil = _chil.get//_chil.find(xml_node[i]);
+                        //if ($_chil != null && $_chil.length == 0) {
+                        //    _chil.appendXml("<" + xml_node[i] + "/>");
+                        //    $_chil = _chil.find(xml_node[i]);
+                        //}else {
+                          var childrens = $($_chil).children();
+                          var isnotself_chi=false;
+
+                          for(var k = 0; k <  childrens.length; k++){
+                            if(childrens[k].nodeName == xml_node[i]){
+                              isnotself_chi=true;
+                              $_chil = childrens[k];
+                            }
+                          }
+                          if(  !isnotself_chi){
+                            $(_chil).appendXml("<" + xml_node[i] + "/>");
+                            $_chil = _chil.lastChild;
+                          }
+
+                        //}
+                        if (i == xml_node.length - 1) {
+                            $($_chil).val(value);
+                            $_chil.textContent  = value;
+                        }
+                    }
+                }
+            }
+            window.xmlStr = XMLtoString(edit_xml);
+            console.log("window.xmlStr=" + window.xmlStr)
+        }
+
+        // function editor_xml(path,value){
+        //     console.log(path);
+        //     console.log(value);
+        // 	var xml_node = path.split("/");
+        //     $root = $(edit_xml).find("root");
+        //     console.log($root);
+        // 	if(xml_node != null && xml_node.length){
+        //         $_chil = $root.find(xml_node[1]);
+        // 		if(xml_node.length == 3){
+        // 			$_chil = $_chil.find(xml_node[2]);
+        // 		}else if(xml_node.length > 3){
+        // 			for(var i = 2 ; i < xml_node.length ; i++){
+        //     			$_chil = $_chil.find(xml_node[i]);
+        //     		}
+        // 		}
+        // 		$_AttribDefault = $_chil.find("AttribDefault");
+        // 		$_AttribDefault.text(value);
+        // 	}
+
+        // window.xmlStr = XMLtoString(edit_xml);
+        //          	console.log(xmlStr)
+        // }
+
+        //xml转化成string
+        function XMLtoString(elem) {
+            var serialized;
+            try {
+                // XMLSerializer exists in current Mozilla browsers
+                serializer = new XMLSerializer();
+                serialized = serializer.serializeToString(elem);
+            } catch (e) {
+                // Internet Explorer has a different approach to serializing XML
+                serialized = elem.xml;
+            }
+
+            return serialized;
+        }
+
+
+        //点击属性表格行
+        function onClickPropertyRow(index, row) {
+            currentRowIndex = index;
+            //开始编辑表格
+            $("#pgrid").propertygrid("beginEdit", index);
+        }
+        //提交所有的修改
+        function submitAllChanges() {
+            if (currentRowIndex) {
+                $("#pgrid").propertygrid("unselectRow", currentRowIndex);
+            }
+            setTimeout(submitAllChangesToServer, 200);
+        }
+        //提交修改到服务器
+        function submitAllChangesToServer() {
+            var dataString = "";
+
+            for (var key in changedKeyValues) {
+                if (dataString.length > 0)
+                    dataString = dataString + "&" + encodeURIComponent(key) + "=" + changedKeyValues[key];
+                else
+                    dataString = dataString + encodeURIComponent(key) + "=" + changedKeyValues[key];
+            }
+            //              console.log(dataString)
+            if (dataString.length == 0) {
+                $.messager.alert("提示", "无需要保存的修改！", "info");
+                return;
+            }
+            //添加securityToken
+            /* var securityToken = document.getElementsByName("-xsrf-");
+             if (securityToken.length > 0) {
+                 dataString += "&-xsrf-=" + securityToken[0].value;
+             } else {
+                 alert("securityToken为空！不能提交!");
+                 return;
+             }*/
+            //提交到后台接口进行保存
+            //            var saveParameterUrl = "/settings/advanced/save";
+            /* var saveParameterUrl = "/do/trafficController/saveConfig";
+             $.post(saveParameterUrl, dataString, function(data) {
+                 if (!data.error) {
+                     $.messager.alert("结果", "保存失败!原因:" + data.feedback.Msg, "error");
+                 } else {
+                     $.messager.alert("结果", "保存成功!", "info");
+                     //保存成功，清空上次修改的参数
+                     changedKeyValues = new Array();
+                 }
+             }, "json");*/
+        }
+
+        //解释参数树为Tree组件要求的Json格式
+        function convertXmlToJson(xml, xmlValue) {
+            var jsonData = [];
+            //如果XMl的节点不为空
+            var rootNode = $(xml).find("root");
+            if (rootNode.length > 0) {
+                var idgetter = getIdGetter();
+                var treeNode = convertToTreeNode(rootNode[0], idgetter, "");
+                bindXmlNodeToTreeNode(treeNode, rootNode[0], idgetter, xmlValue);
+                //添加到Json数据
+                jsonData = treeNode.children;
+            }
+            return jsonData;
+        }
+
+        //用于获取累加的树结点Id
+        function getIdGetter() {
+            var id = 1;
+            return function() {
+                return id++;
+            };
+        }
+        //绑定Xml结点到Tree结点
+        function bindXmlNodeToTreeNode(parentTreeNode, xmlNode, idGetter, valueXml) {
+            var childNodes = getXmlChildNodes(xmlNode);
+            for (var i = 0; i < childNodes.length; i++) {
+                var currentNode = childNodes[i];
+
+                //判断结点是否是叶节点（把属于右侧的参数拆分出去）
+                var isEndNode = isEndNodeFun(currentNode);
+                var treeNode; //当前节点对应的TreeNode
+                if (isEndNode) {
+                    //把子节点格式化为propertiesGrid的Json格式
+                    var nodePath = parentTreeNode.attr.path + "/" + currentNode.nodeName;
+                    parentTreeNode.addGridData(getGridData(currentNode, valueXml, nodePath));
+                } else {
+                    treeNode = convertToTreeNode(currentNode, idGetter, parentTreeNode.attr.path);
+                    //循环添加所有的子节点
+                    bindXmlNodeToTreeNode(treeNode, currentNode, idGetter, valueXml);
+                    parentTreeNode.children.push(treeNode);
+                }
+            }
+        }
+
+        //转换为PropertyGrid需要的格式
+        function getGridData(currentNode, valueXml, nodePath) {
+            var childNodes = getXmlChildNodes(currentNode);
+
+            var pType = childNodes[0].text ? childNodes[0].text : childNodes[0].textContent;
+            var pInfo = childNodes[1].text ? childNodes[1].text : childNodes[1].textContent;
+            var pDefault = childNodes[2].text ? childNodes[2].text : childNodes[2].textContent;
+            var pValue = getValueFromValueXml(valueXml, nodePath);
+            //对数值进行格式化
+            pDefault = getValidateValue(pType, pDefault);
+            pValue = getValidateValue(pType, pValue);
+
+            pValue = pValue ? pValue : pDefault; //如果当前节点的值没有改变，则取默认值
+            // pValue = pDefault;
+            var pRange = childNodes[3].text ? childNodes[3].text : childNodes[3].textContent;
+            return {
+                name: currentNode.nodeName,
+                value: pValue,
+                defaultValue: pDefault,
+                type: pType,
+                info: pInfo,
+                group: "default",
+                editor: getEditor(pType, pRange)
+            };
+        }
+
+        //从另一个值Xml中获取已经改变的值
+        function getValueFromValueXml(valueXml, nodePath) {
+            //使用遍历的方式去查找元素
+            var isFound = true;
+            var nodes = nodePath.split("/");
+            var tempNode = valueXml;
+            for (var i = 0; i < nodes.length; i++) {
+                tempNode = getDirectChildByTagName(tempNode, nodes[i]);
+                if (!tempNode) {
+                    isFound = false;
+                    break;
+                }
+            }
+            if (isFound) {
+                let o = tempNode.text || tempNode.textContent
+                console.log(o)
+                return tempNode.text ? tempNode.text : tempNode.textContent;
+            } else
+                return null;
+        }
+
+        //根据节点的类型，返回合适的编辑器
+        /*
+            pType:
+                0 - Int
+                1 - Float
+                2 - String
+                3 - Enum   枚举值在 Range字段内
+                4 - Boolean
+                5 - Time
+                6 - Undefined
+        */
+        function getEditor(pType, pRange) {
+            var editor = {
+                type: null,
+                options: {}
+            };
+            //最小值，最大值
+            var min = null;
+            var max = null;
+            if (pRange) {
+                var rangePart = getNumRange(pRange);
+                min = rangePart[0];
+                max = rangePart[1];
+            }
+            switch (pType) {
+                case "0":
+                    editor.type = "numberspinner";
+                    if (min)
+                        editor.options.min = parseInt(min);
+                    if (max)
+                        editor.options.max = parseInt(max);
+                    editor.options.validType = "range[" + min + "," + max + "]";
+                    break;
+                case "1":
+                    editor.type = "numberbox";
+                    if (min)
+                        editor.options.min = parseFloat(min);
+                    if (max)
+                        editor.options.max = parseFloat(max);
+                    editor.options.precision = 4; //浮点数默认4位小数
+                    editor.options.validType = "range[" + min + "," + max + "]";
+                    break;
+                case "3":
+                    //枚举类型
+                    editor.type = "combobox";
+                    editor.options = {
+                        valueField: "id",
+                        textField: "text",
+                        required: true,
+                        editable: false,
+                        data: getComboboxData(pRange)
+                    };
+                    break;
+                case "4":
+                    editor.type = "checkbox";
+                    editor.options.on = 1;
+                    editor.options.off = 0;
+                    break;
+                case "5":
+                    editor.type = "timespinner";
+                    editor.options = getTimeOptions(pRange);
+                    break;
+                case "2":
+                case "6":
+                default:
+                    editor.type = "validatebox";
+                    editor.options = getTextOptions(pRange);
+                    break;
+            }
+            return editor;
+
+            function getComboboxData(pRangeString) {
+                var enumRegex = /(-?\d+)-(([0-9a-zA-Z\u4e00-\u9faf]+)(&amp;)?)?/g; //枚举类型的正则表达式
+                var comboboxData = [];
+                var match = enumRegex.exec(pRangeString);
+                while (match != null) {
+                    comboboxData.push({
+                        id: match[1],
+                        text: match.length >= 4 ? match[3] : ""
+                    });
+                    match = enumRegex.exec(pRangeString);
+                }
+                return comboboxData;
+            }
+
+            function getNumRange(pRangeString) {
+                var numRangeRegex = /(-?([0-9]+\.)?[0-9]*)-(-?([0-9]+\.)?[0-9]*)/g; // 数字范围类型的正则表达式
+                var data = [];
+                var match = numRangeRegex.exec(pRangeString);
+                if (match != null) {
+                    data.push(match[1]);
+                    data.push(match[3]);
+                }
+                return data;
+            }
+
+            function getTimeOptions(pRangeString) {
+                var options = {};
+                var timeRangeParts;
+                if (pRange) {
+                    timeRangeParts = pRangeString.split("-");
+                    if (timeRangeParts.length == 2) {
+                        options.max = timeRangeParts[0].split(":")[1].replace(/_/g, ":");
+                        options.min = timeRangeParts[1].split(":")[1].replace(/_/g, ":");
+                        options.required = true;
+                        options.showSeconds = true;
+                        options.dateFmt = "HH:mm:ss";
+                    }
+                }
+                return options;
+            }
+            // 构造Text组件的参数
+            function getTextOptions(pRangeString) {
+                return {
+                    validType: "maxLength[" + pRangeString + "]"
+                };
+            }
+        }
+
+        //格式Xml中的值为合法的格式
+        function getValidateValue(type, value) {
+            if (value) {
+                switch (type) {
+                    case "5":
+                        value = value.split(":")[1].replace(/_/g, ":");
+                        break;
+                    default:
+                }
+            }
+            return value;
+        }
+
+        //是否是参数树的叶节点
+        function isEndNodeFun(currentNode) {
+            var childNodes = getXmlChildNodes(currentNode);
+
+            if (currentNode && childNodes && childNodes.length > 0 &&
+                childNodes[0].nodeName == "AttribType") {
+                return true;
+            } else {
+                return false;
+            }
+        }
+        //获取直系子节点
+        function getDirectChildByTagName(node, tagName) {
+            var nodes = getXmlChildNodes(node);
+            for (var i = 0; i < nodes.length; i++) {
+                if (nodes[i].nodeName == tagName)
+                    return nodes[i];
+            }
+            return null;
+        }
+        //获取XML节点的子节点列表，兼容IE及非IE
+        function getXmlChildNodes(xmlNode) {
+            //IE下是childNodes,非IE下是children
+            if (xmlNode.childNodes) {
+                var currentNode;
+                //遍历所有的子节点
+                var validateNodeArray = new Array();
+                for (var i = 0; i < xmlNode.childNodes.length; i++) {
+                    currentNode = xmlNode.childNodes[i];
+                    if (currentNode.nodeName == "#text") {
+                        continue;
+                    }
+                    validateNodeArray.push(currentNode);
+                }
+                return validateNodeArray;
+            } else {
+                return xmlNode.children;
+            }
+        }
+        //把一个XMl结点转为TreeNode
+        function convertToTreeNode(xmlNode, idGetter, parentName) {
+            return {
+                id: idGetter(),
+                text: xmlNode.nodeName,
+                children: [],
+                attr: {
+                    path: function() {
+                        if (parentName)
+                            return parentName + "/" + xmlNode.nodeName; //保存根节点到当前节点的路径
+                        else {
+                            return xmlNode.nodeName;
+                        }
+                    }()
+                },
+                gridData: {
+                    total: 0,
+                    rows: []
+                },
+                addGridData: function(data) {
+                    this.gridData.total++;
+                    this.gridData.rows.push(data);
+                }
+            };
+        }
+
+        function submit(params) {
+            try {
+                $('#pgrid').datagrid('endEdit', currentRowIndex)
+            } catch (error) {
+
+            }
+        }
+    </script>
+</body>
+
+</html>

public/index.html

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

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/js/ObjTree.js

+// ========================================================================
+//  XML.ObjTree -- XML source code from/to JavaScript object like E4X
+// ========================================================================
+
+if ( typeof(XML) == 'undefined' ) XML = function() {};
+
+//  constructor
+
+XML.ObjTree = function () {
+    return this;
+};
+
+//  class variables
+
+XML.ObjTree.VERSION = "0.23";
+
+//  object prototype
+
+XML.ObjTree.prototype.xmlDecl = '<?xml version="1.0" encoding="UTF-8" ?>\n';
+XML.ObjTree.prototype.attr_prefix = '-';
+
+//  method: parseXML( xmlsource )
+
+XML.ObjTree.prototype.parseXML = function ( xml ) {
+    var root;
+    if ( window.DOMParser ) {
+        var xmldom = new DOMParser();
+//      xmldom.async = false;           // DOMParser is always sync-mode
+        var dom = xmldom.parseFromString( xml, "application/xml" );
+        if ( ! dom ) return;
+        root = dom.documentElement;
+    } else if ( window.ActiveXObject ) {
+        xmldom = new ActiveXObject('Microsoft.XMLDOM');
+        xmldom.async = false;
+        xmldom.loadXML( xml );
+        root = xmldom.documentElement;
+    }
+    if ( ! root ) return;
+    return this.parseDOM( root );
+};
+
+//  method: parseHTTP( url, options, callback )
+
+XML.ObjTree.prototype.parseHTTP = function ( url, options, callback ) {
+    var myopt = {};
+    for( var key in options ) {
+        myopt[key] = options[key];                  // copy object
+    }
+    if ( ! myopt.method ) {
+        if ( typeof(myopt.postBody) == "undefined" &&
+             typeof(myopt.postbody) == "undefined" &&
+             typeof(myopt.parameters) == "undefined" ) {
+            myopt.method = "get";
+        } else {
+            myopt.method = "post";
+        }
+    }
+    if ( callback ) {
+        myopt.asynchronous = true;                  // async-mode
+        var __this = this;
+        var __func = callback;
+        var __save = myopt.onComplete;
+        myopt.onComplete = function ( trans ) {
+            var tree;
+            if ( trans && trans.responseXML && trans.responseXML.documentElement ) {
+                tree = __this.parseDOM( trans.responseXML.documentElement );
+            }
+            __func( tree, trans );
+            if ( __save ) __save( trans );
+        };
+    } else {
+        myopt.asynchronous = false;                 // sync-mode
+    }
+    var trans;
+    if ( typeof(HTTP) != "undefined" && HTTP.Request ) {
+        myopt.uri = url;
+        var req = new HTTP.Request( myopt );        // JSAN
+        if ( req ) trans = req.transport;
+    } else if ( typeof(Ajax) != "undefined" && Ajax.Request ) {
+        var req = new Ajax.Request( url, myopt );   // ptorotype.js
+        if ( req ) trans = req.transport;
+    }
+    if ( callback ) return trans;
+    if ( trans && trans.responseXML && trans.responseXML.documentElement ) {
+        return this.parseDOM( trans.responseXML.documentElement );
+    }
+}
+
+//  method: parseDOM( documentroot )
+
+XML.ObjTree.prototype.parseDOM = function ( root ) {
+    if ( ! root ) return;
+	
+    this.__force_array = {};
+    if ( this.force_array ) {
+        for( var i=0; i<this.force_array.length; i++ ) {
+            this.__force_array[this.force_array[i]] = 1;
+        }
+    }
+
+    var json = this.parseElement( root );   // parse root node
+    if ( this.__force_array[root.nodeName] ) {
+        json = [ json ];
+    }
+    if ( root.nodeType != 11 ) {            // DOCUMENT_FRAGMENT_NODE
+        var tmp = {};
+        tmp[root.nodeName] = json;          // root nodeName
+        json = tmp;
+    }
+    return json;
+};
+
+//  method: parseElement( element )
+
+XML.ObjTree.prototype.parseElement = function ( elem ) {
+    //  COMMENT_NODE
+    if ( elem.nodeType == 7 ) {
+        return;
+    }
+
+    //  TEXT_NODE CDATA_SECTION_NODE
+    if ( elem.nodeType == 3 || elem.nodeType == 4 ) {
+        var bool = elem.nodeValue.match( /[^\x00-\x20]/ );
+        //console.log(bool)
+        if ( bool == null ) return;     // ignore white spaces
+        
+        return elem.nodeValue;
+    }
+
+    var retval;
+    var cnt = {};
+
+    //  parse attributes
+    if ( elem.attributes && elem.attributes.length ) {
+        retval = {};
+        for ( var i=0; i<elem.attributes.length; i++ ) {
+            var key = elem.attributes[i].nodeName;
+            if ( typeof(key) != "string" ) continue;
+            var val = elem.attributes[i].nodeValue;
+            if ( ! val ) continue;
+            key = this.attr_prefix + key;
+            if ( typeof(cnt[key]) == "undefined" ) cnt[key] = 0;
+            cnt[key] ++;
+            this.addNode( retval, key, cnt[key], val );
+        }
+    }
+
+    //  parse child nodes (recursive)
+    if ( elem.childNodes && elem.childNodes.length ) {
+        var textonly = true;
+        if ( retval ) textonly = false;        // some attributes exists
+        for ( var i=0; i<elem.childNodes.length && textonly; i++ ) {
+            var ntype = elem.childNodes[i].nodeType;
+            if ( ntype == 3 || ntype == 4 ) continue;
+            textonly = false;
+        }
+        if ( textonly ) {
+            if ( ! retval ) retval = "";
+            for ( var i=0; i<elem.childNodes.length; i++ ) {
+                retval += elem.childNodes[i].nodeValue;
+            }
+        } else {
+            if ( ! retval ) retval = {};
+            for ( var i=0; i<elem.childNodes.length; i++ ) {
+                var key = elem.childNodes[i].nodeName;
+                if ( typeof(key) != "string" ) continue;
+                var val = this.parseElement( elem.childNodes[i] );
+                if ( ! val ) continue;
+                if ( typeof(cnt[key]) == "undefined" ) cnt[key] = 0;
+                cnt[key] ++;
+                this.addNode( retval, key, cnt[key], val );
+            }
+        }
+    }
+    return retval;
+};
+
+//  method: addNode( hash, key, count, value )
+
+XML.ObjTree.prototype.addNode = function ( hash, key, cnts, val ) {
+    if ( this.__force_array[key] ) {
+        if ( cnts == 1 ) hash[key] = [];
+        hash[key][hash[key].length] = val;      // push
+    } else if ( cnts == 1 ) {                   // 1st sibling
+        hash[key] = val;
+    } else if ( cnts == 2 ) {                   // 2nd sibling
+        hash[key] = [ hash[key], val ];
+    } else {                                    // 3rd sibling and more
+        hash[key][hash[key].length] = val;
+    }
+};
+
+//  method: writeXML( tree )
+
+XML.ObjTree.prototype.writeXML = function ( tree ) {
+    var xml = this.hash_to_xml( null, tree );
+    return this.xmlDecl + xml;
+};
+
+//  method: hash_to_xml( tagName, tree )
+
+XML.ObjTree.prototype.hash_to_xml = function ( name, tree ) {
+    var elem = [];
+    var attr = [];
+    for( var key in tree ) {
+        if ( ! tree.hasOwnProperty(key) ) continue;
+        var val = tree[key];
+        if ( key.charAt(0) != this.attr_prefix ) {
+            if ( typeof(val) == "undefined" || val == null ) {
+                elem[elem.length] = "<"+key+" />";
+            } else if ( typeof(val) == "object" && val.constructor == Array ) {
+                elem[elem.length] = this.array_to_xml( key, val );
+            } else if ( typeof(val) == "object" ) {
+                elem[elem.length] = this.hash_to_xml( key, val );
+            } else {
+                elem[elem.length] = this.scalar_to_xml( key, val );
+            }
+        } else {
+            attr[attr.length] = " "+(key.substring(1))+'="'+(this.xml_escape( val ))+'"';
+        }
+    }
+    var jattr = attr.join("");
+    var jelem = elem.join("");
+    if ( typeof(name) == "undefined" || name == null ) {
+        // no tag
+    } else if ( elem.length > 0 ) {
+        if ( jelem.match( /\n/ )) {
+            jelem = "<"+name+jattr+">\n"+jelem+"</"+name+">\n";
+        } else {
+            jelem = "<"+name+jattr+">"  +jelem+"</"+name+">\n";
+        }
+    } else {
+        jelem = "<"+name+jattr+" />\n";
+    }
+    return jelem;
+};
+
+//  method: array_to_xml( tagName, array )
+
+XML.ObjTree.prototype.array_to_xml = function ( name, array ) {
+    var out = [];
+    for( var i=0; i<array.length; i++ ) {
+        var val = array[i];
+        if ( typeof(val) == "undefined" || val == null ) {
+            out[out.length] = "<"+name+" />";
+        } else if ( typeof(val) == "object" && val.constructor == Array ) {
+            out[out.length] = this.array_to_xml( name, val );
+        } else if ( typeof(val) == "object" ) {
+            out[out.length] = this.hash_to_xml( name, val );
+        } else {
+            out[out.length] = this.scalar_to_xml( name, val );
+        }
+    }
+    return out.join("");
+};
+
+//  method: scalar_to_xml( tagName, text )
+
+XML.ObjTree.prototype.scalar_to_xml = function ( name, text ) {
+    if ( name == "#text" ) {
+        return this.xml_escape(text);
+    } else {
+        return "<"+name+">"+this.xml_escape(text)+"</"+name+">\n";
+    }
+};
+
+//  method: xml_escape( text )
+
+XML.ObjTree.prototype.xml_escape = function ( text ) {
+    return (text + '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+};
+
+/*
+// ========================================================================
+
+=head1 NAME
+
+XML.ObjTree -- XML source code from/to JavaScript object like E4X
+
+=head1 SYNOPSIS
+
+    var xotree = new XML.ObjTree();
+    var tree1 = {
+        root: {
+            node: "Hello, World!"
+        }
+    };
+    var xml1 = xotree.writeXML( tree1 );        // object tree to XML source
+    alert( "xml1: "+xml1 );
+
+    var xml2 = '<?xml version="1.0"?><response><error>0</error></response>';
+    var tree2 = xotree.parseXML( xml2 );        // XML source to object tree
+    alert( "error: "+tree2.response.error );
+
+=head1 DESCRIPTION
+
+XML.ObjTree class is a parser/generater between XML source code
+and JavaScript object like E4X, ECMAScript for XML.
+This is a JavaScript version of the XML::TreePP module for Perl.
+This also works as a wrapper for XMLHTTPRequest and successor to JKL.ParseXML class
+when this is used with prototype.js or JSAN's HTTP.Request class.
+
+=head2 JavaScript object tree format
+
+A sample XML source:
+
+    <?xml version="1.0" encoding="UTF-8"?>
+    <family name="Kawasaki">
+        <father>Yasuhisa</father>
+        <mother>Chizuko</mother>
+        <children>
+            <girl>Shiori</girl>
+            <boy>Yusuke</boy>
+            <boy>Kairi</boy>
+        </children>
+    </family>
+
+Its JavaScript object tree like JSON/E4X:
+
+    {
+        'family': {
+            '-name':    'Kawasaki',
+            'father':   'Yasuhisa',
+            'mother':   'Chizuko',
+            'children': {
+                'girl': 'Shiori'
+                'boy': [
+                    'Yusuke',
+                    'Kairi'
+                ]
+            }
+        }
+    };
+
+Each elements are parsed into objects:
+
+    tree.family.father;             # the father's given name.
+
+Prefix '-' is inserted before every attributes' name.
+
+    tree.family["-name"];           # this family's family name
+
+A array is used because this family has two boys.
+
+    tree.family.children.boy[0];    # first boy's name
+    tree.family.children.boy[1];    # second boy's name
+    tree.family.children.girl;      # (girl has no other sisiters)
+
+=head1 METHODS
+
+=head2 xotree = new XML.ObjTree()
+
+This constructor method returns a new XML.ObjTree object.
+
+=head2 xotree.force_array = [ "rdf:li", "item", "-xmlns" ];
+
+This property allows you to specify a list of element names
+which should always be forced into an array representation.
+The default value is null, it means that context of the elements
+will determine to make array or to keep it scalar.
+
+=head2 xotree.attr_prefix = '@';
+
+This property allows you to specify a prefix character which is
+inserted before each attribute names.
+Instead of default prefix '-', E4X-style prefix '@' is also available.
+The default character is '-'.
+Or set '@' to access attribute values like E4X, ECMAScript for XML.
+The length of attr_prefix must be just one character and not be empty.
+
+=head2 tree = xotree.parseXML( xmlsrc );
+
+This method loads an XML document using the supplied string
+and returns its JavaScript object converted.
+
+=head2 tree = xotree.parseDOM( domnode );
+
+This method parses a DOM tree (ex. responseXML.documentElement)
+and returns its JavaScript object converted.
+
+=head2 tree = xotree.parseHTTP( url, options );
+
+This method loads a XML file from remote web server
+and returns its JavaScript object converted.
+XMLHTTPRequest's synchronous mode is always used.
+This mode blocks the process until the response is completed.
+
+First argument is a XML file's URL
+which must exist in the same domain as parent HTML file's.
+Cross-domain loading is not available for security reasons.
+
+Second argument is options' object which can contains some parameters:
+method, postBody, parameters, onLoading, etc.
+
+This method requires JSAN's L<HTTP.Request> class or prototype.js's Ajax.Request class.
+
+=head2 xotree.parseHTTP( url, options, callback );
+
+If a callback function is set as third argument,
+XMLHTTPRequest's asynchronous mode is used.
+
+This mode calls a callback function with XML file's JavaScript object converted
+after the response is completed.
+
+=head2 xmlsrc = xotree.writeXML( tree );
+
+This method parses a JavaScript object tree
+and returns its XML source generated.
+
+=head1 EXAMPLES
+
+=head2 Text node and attributes
+
+If a element has both of a text node and attributes
+or both of a text node and other child nodes,
+text node's value is moved to a special node named "#text".
+
+    var xotree = new XML.ObjTree();
+    var xmlsrc = '<span class="author">Kawasaki Yusuke</span>';
+    var tree = xotree.parseXML( xmlsrc );
+    var class = tree.span["-class"];        # attribute
+    var name  = tree.span["#text"];         # text node
+
+=head2 parseHTTP() method with HTTP-GET and sync-mode
+
+HTTP/Request.js or prototype.js must be loaded before calling this method.
+
+    var xotree = new XML.ObjTree();
+    var url = "http://example.com/index.html";
+    var tree = xotree.parseHTTP( url );
+    xotree.attr_prefix = '@';                   // E4X-style
+    alert( tree.html["@lang"] );
+
+This code shows C<lang=""> attribute from a X-HTML source code.
+
+=head2 parseHTTP() method with HTTP-POST and async-mode
+
+Third argument is a callback function which is called on onComplete.
+
+    var xotree = new XML.ObjTree();
+    var url = "http://example.com/mt-tb.cgi";
+    var opts = {
+        postBody:   "title=...&excerpt=...&url=...&blog_name=..."
+    };
+    var func = function ( tree ) {
+        alert( tree.response.error );
+    };
+    xotree.parseHTTP( url, opts, func );
+
+This code send a trackback ping and shows its response code.
+
+=head2 Simple RSS reader
+
+This is a RSS reader which loads RDF file and displays all items.
+
+    var xotree = new XML.ObjTree();
+    xotree.force_array = [ "rdf:li", "item" ];
+    var url = "http://example.com/news-rdf.xml";
+    var func = function( tree ) {
+        var elem = document.getElementById("rss_here");
+        for( var i=0; i<tree["rdf:RDF"].item.length; i++ ) {
+            var divtag = document.createElement( "div" );
+            var atag = document.createElement( "a" );
+            atag.href = tree["rdf:RDF"].item[i].link;
+            var title = tree["rdf:RDF"].item[i].title;
+            var tnode = document.createTextNode( title );
+            atag.appendChild( tnode );
+            divtag.appendChild( atag );
+            elem.appendChild( divtag );
+        }
+    };
+    xotree.parseHTTP( url, {}, func );
+
+=head2  XML-RPC using writeXML, prototype.js and parseDOM
+
+If you wish to use prototype.js's Ajax.Request class by yourself:
+
+    var xotree = new XML.ObjTree();
+    var reqtree = {
+        methodCall: {
+            methodName: "weblogUpdates.ping",
+            params: {
+                param: [
+                    { value: "Kawa.net xp top page" },  // 1st param
+                    { value: "http://www.kawa.net/" }   // 2nd param
+                ]
+            }
+        }
+    };
+    var reqxml = xotree.writeXML( reqtree );       // JS-Object to XML code
+    var url = "http://example.com/xmlrpc";
+    var func = function( req ) {
+        var resdom = req.responseXML.documentElement;
+        xotree.force_array = [ "member" ];
+        var restree = xotree.parseDOM( resdom );   // XML-DOM to JS-Object
+        alert( restree.methodResponse.params.param.value.struct.member[0].value.string );
+    };
+    var opt = {
+        method:         "post",
+        postBody:       reqxml,
+        asynchronous:   true,
+        onComplete:     func
+    };
+    new Ajax.Request( url, opt );
+
+=head1 AUTHOR
+
+Yusuke Kawasaki http://www.kawa.net/
+
+=head1 COPYRIGHT AND LICENSE
+
+Copyright (c) 2005-2006 Yusuke Kawasaki. All rights reserved.
+This program is free software; you can redistribute it and/or
+modify it under the Artistic license. Or whatever license I choose,
+which I will do instead of keeping this documentation like it is.
+
+=cut
+// ========================================================================
+*/

public/js/jquery.easyui.extension.js

+/*
+  说明：扩展EasyUI的验证规则
+*/
+$.extend($.fn.validatebox.defaults.rules, {
+    //验证身份证
+    idcard: {
+        validator: function(value) {
+            return /^\d{15}(\d{2}[A-Za-z0-9])?$/i.test(value);
+        },
+        message: '身份证号码格式不正确'
+    },
+    //最小长度
+    minLength: {
+        validator: function(value, param) {
+            return value.length >= param[0];
+        },
+        message: '请输入至少{0}个字符.'
+    },
+    maxLength: {
+        validator: function(value, param) {
+            return value.length <= param[0];
+        },
+        message: '最多只能输入{0}个字符'
+    },
+    phone: { // 验证电话号码 
+        validator: function(value) {
+            return /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/i.test(value);
+        },
+        message: '格式不正确,请使用下面格式:020-88888888'
+    },
+    mobile: { // 验证手机号码 
+        validator: function(value) {
+            return /^(13|15|18)\d{9}$/i.test(value);
+        },
+        message: '手机号码格式不正确'
+    },
+    currency: { // 验证货币 
+        validator: function(value) {
+            return /^\d+(\.\d+)?$/i.test(value);
+        },
+        message: '货币格式不正确'
+    },
+    intOrFloat: { // 验证整数或小数 
+        validator: function(value) {
+            return /^\d+(\.\d+)?$/i.test(value);
+        },
+        message: '请输入数字，并确保格式正确'
+    },
+    integer: { // 验证整数 
+        validator: function(value) {
+            return /^[+]?[1-9]+\d*$/i.test(value);
+        },
+        message: '请输入整数'
+    },
+    age: { // 验证年龄
+        validator: function(value) {
+            return /^(?:[1-9][0-9]?|1[01][0-9]|120)$/i.test(value);
+        },
+        message: '年龄必须是0到120之间的整数'
+    },
+    chinese: { // 验证中文 
+        validator: function(value) {
+            return /^[\Α-\￥]+$/i.test(value);
+        },
+        message: '请输入中文'
+    },
+    english: { // 验证英语 
+        validator: function(value) {
+            return /^[A-Za-z]+$/i.test(value);
+        },
+        message: '请输入英文'
+    },
+    username: { // 验证用户名 
+        validator: function(value) {
+            return /^[a-zA-Z][a-zA-Z0-9_]{5,15}$/i.test(value);
+        },
+        message: '用户名不合法（字母开头，允许6-16字节，允许字母数字下划线）'
+    },
+    faxno: { // 验证传真 
+        validator: function(value) {
+            //            return /^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/i.test(value); 
+            return /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/i.test(value);
+        },
+        message: '传真号码不正确'
+    },
+    zip: { // 验证邮政编码 
+        validator: function(value) {
+            return /^[1-9]\d{5}$/i.test(value);
+        },
+        message: '邮政编码格式不正确'
+    },
+    ip: { // 验证IP地址 
+        validator: function(value) {
+            return /^(?:(?:25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9]?[0-9])\.){3}(?:25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9]?[0-9])$/.test(value);
+        },
+        message: 'IP地址格式不正确'
+    },
+    mac: {
+        validator: function(value) {
+            return /^([0-9a-fA-F]{2}-?){6}$/.test(value);
+        },
+        message: 'MAC地址不正确'
+    },
+    name: { // 验证姓名，可以是中文或英文 
+        validator: function(value) {
+            return /^[\Α-\￥]+$/i.test(value) | /^\w+[\w\s]+\w+$/i.test(value);
+        },
+        message: '请输入姓名'
+    },
+    date: { // 验证姓名，可以是中文或英文 
+        validator: function(value) {
+            //格式yyyy-MM-dd或yyyy-M-d
+            return /^(?:(?!0000)[0-9]{4}([-]?)(?:(?:0?[1-9]|1[0-2])\1(?:0?[1-9]|1[0-9]|2[0-8])|(?:0?[13-9]|1[0-2])\1(?:29|30)|(?:0?[13578]|1[02])\1(?:31))|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)([-]?)0?2\2(?:29))$/i.test(value);
+        },
+        message: '日期格式不正确'
+    },
+    equals: {
+        validator: function(value, param) {
+            if ($("#" + param[0]).val() != "" && value != "") {
+                return $("#" + param[0]).val() == value;
+            } else {
+                return true;
+            }
+        },
+        message: '两次输入不匹配'
+    },
+    regex: {
+        validator: function(value, param) {
+            var regex = new RegExp(param[0]);
+            return regex.test(value);
+        },
+        message: "格式不合法"
+    },
+    longitude: {
+        validator: function(value, param) {
+            var regex = /^[\-\+]?(0?\d{1,2}(\.\d{1,6})?|1[0-7]?\d{1}(\.\d{1,6})?|180(\.0{1,6})?)$/;
+            return regex.test(value);
+        },
+        message: "经度格式不合法"
+    },
+    latitude: {
+        validator: function(value, param) {
+            var regex = /^[\-\+]?([0-8]?\d{1}(\.\d{1,6})?|90(\.0{1,6})?)$/;
+            return regex.test(value);
+        },
+        message: "纬度格式不合法"
+    },
+    //不能为空，参数为不能取的值的数组 ["","-1","全部"]
+    notEmpty: {
+        validator: function(value, param) {
+            var isValidate = true;
+            for (var i = 0; i < param.length; i++) {
+                if (value == param[i]) {
+                    return false;
+                }
+            }
+            return true;
+        },
+        message: "不能为空"
+    },
+    // 数值范围验证
+    range: {
+        validator: function(value, param) {
+            return value >= param[0] && value <= param[1];
+        },
+        message: "值必须在{0}与{1}之间"
+    }
+});
+
+//扩展Tab组件，添加遮罩
+(function() {
+    $.extend($.fn.tabs.methods, {
+        //显示遮罩
+        loading: function(jq, msg) {
+            return jq.each(function() {
+                var panel = $(this).tabs("getSelected");
+                if (msg == undefined) {
+                    msg = "正在加载数据，请稍候...";
+                }
+                $("<div class=\"datagrid-mask\"></div>").css({ display: "block", width: panel.width(), height: panel.height() + 30 }).appendTo(panel);
+                $("<div class=\"datagrid-mask-msg\"></div>").html(msg).appendTo(panel).css({ display: "block", left: (panel.width() - $("div.datagrid-mask-msg", panel).outerWidth()) / 2, top: (panel.height() - $("div.datagrid-mask-msg", panel).outerHeight()) / 2 });
+            });
+        },
+        //隐藏遮罩
+        loaded: function(jq) {
+            return jq.each(function() {
+                var panel = $(this).tabs("getSelected");
+                panel.find("div.datagrid-mask-msg").remove();
+                panel.find("div.datagrid-mask").remove();
+            });
+        }
+    });
+})(jQuery);
+
+// 扩展Datagrid 使用本地分页功能
+(function($) {
+    function pagerFilter(data) {
+        if ($.isArray(data)) { // is array
+            data = {
+                total: data.length,
+                rows: data
+            }
+        }
+        var target = this;
+        var dg = $(target);
+        var state = dg.data('datagrid');
+        var opts = dg.datagrid('options');
+        if (!state.allRows) {
+            state.allRows = (data.rows);
+        }
+        if (!opts.remoteSort && opts.sortName) {
+            var names = opts.sortName.split(',');
+            var orders = opts.sortOrder.split(',');
+            state.allRows.sort(function(r1, r2) {
+                var r = 0;
+                for (var i = 0; i < names.length; i++) {
+                    var sn = names[i];
+                    var so = orders[i];
+                    var col = $(target).datagrid('getColumnOption', sn);
+                    var sortFunc = col.sorter || function(a, b) {
+                        return a == b ? 0 : (a > b ? 1 : -1);
+                    };
+                    r = sortFunc(r1[sn], r2[sn]) * (so == 'asc' ? 1 : -1);
+                    if (r != 0) {
+                        return r;
+                    }
+                }
+                return r;
+            });
+        }
+        var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);
+        var end = start + parseInt(opts.pageSize);
+        data.rows = state.allRows.slice(start, end);
+        return data;
+    }
+
+    var loadDataMethod = $.fn.datagrid.methods.loadData;
+    var deleteRowMethod = $.fn.datagrid.methods.deleteRow;
+    $.extend($.fn.datagrid.methods, {
+        clientPaging: function(jq) {
+            return jq.each(function() {
+                var dg = $(this);
+                var state = dg.data('datagrid');
+                var opts = state.options;
+                opts.loadFilter = pagerFilter;
+                var onBeforeLoad = opts.onBeforeLoad;
+                opts.onBeforeLoad = function(param) {
+                    state.allRows = null;
+                    return onBeforeLoad.call(this, param);
+                }
+                var pager = dg.datagrid('getPager');
+                pager.pagination({
+                    onSelectPage: function(pageNum, pageSize) {
+                        opts.pageNumber = pageNum;
+                        opts.pageSize = pageSize;
+                        pager.pagination('refresh', {
+                            pageNumber: pageNum,
+                            pageSize: pageSize
+                        });
+                        dg.datagrid('loadData', state.allRows);
+                    }
+                });
+                $(this).datagrid('loadData', state.data);
+                if (opts.url) {
+                    $(this).datagrid('reload');
+                }
+            });
+        },
+        loadData: function(jq, data) {
+            jq.each(function() {
+                $(this).data('datagrid').allRows = null;
+            });
+            return loadDataMethod.call($.fn.datagrid.methods, jq, data);
+        },
+        deleteRow: function(jq, index) {
+            return jq.each(function() {
+                var row = $(this).datagrid('getRows')[index];
+                deleteRowMethod.call($.fn.datagrid.methods, $(this), index);
+                var state = $(this).data('datagrid');
+                if (state.options.loadFilter == pagerFilter) {
+                    for (var i = 0; i < state.allRows.length; i++) {
+                        if (state.allRows[i] == row) {
+                            state.allRows.splice(i, 1);
+                            break;
+                        }
+                    }
+                    $(this).datagrid('loadData', state.allRows);
+                }
+            });
+        },
+        getAllRows: function(jq) {
+            return jq.data('datagrid').allRows;
+        }
+    })
+})(jQuery);
+// 扩展编辑器
+$.extend($.fn.datagrid.defaults.editors, {
+    my97datepicker: {
+        init: function(container, options) {
+            var datepicker = $("<input class='Wdate' onclick='showDatePicker()' />").appendTo(container);
+            return input;
+
+            function showDatePicker() {
+                WdatePicker(options);
+            }
+        },
+        getValue: function(target) {
+            return $(target).val();
+        },
+        setValue: function(target, value) {
+            $(target).val(value);
+        },
+        resize: function(target, width) {
+            var input = $(target);
+            if ($.boxModel == true) {
+                input.width(width - (input.outerWidth() - input.width()));
+            } else {
+                input.width(width);
+            }
+        }
+    }
+});
\ No newline at end of file

public/js/jquery.tree.js

+/**
+ * jQuery EasyUI 1.5.2
+ * 
+ * Copyright (c) 2009-2017 www.jeasyui.com. All rights reserved.
+ *
+ * Licensed under the freeware license: http://www.jeasyui.com/license_freeware.php
+ * To use it on other terms please contact us: info@jeasyui.com
+ *
+ */
+(function($){
+function _1(_2){
+var _3=$(_2);
+_3.addClass("tree");
+return _3;
+};
+function _4(_5){
+var _6=$.data(_5,"tree").options;
+$(_5).unbind().bind("mouseover",function(e){
+var tt=$(e.target);
+var _7=tt.closest("div.tree-node");
+if(!_7.length){
+return;
+}
+_7.addClass("tree-node-hover");
+if(tt.hasClass("tree-hit")){
+if(tt.hasClass("tree-expanded")){
+tt.addClass("tree-expanded-hover");
+}else{
+tt.addClass("tree-collapsed-hover");
+}
+}
+e.stopPropagation();
+}).bind("mouseout",function(e){
+var tt=$(e.target);
+var _8=tt.closest("div.tree-node");
+if(!_8.length){
+return;
+}
+_8.removeClass("tree-node-hover");
+if(tt.hasClass("tree-hit")){
+if(tt.hasClass("tree-expanded")){
+tt.removeClass("tree-expanded-hover");
+}else{
+tt.removeClass("tree-collapsed-hover");
+}
+}
+e.stopPropagation();
+}).bind("click",function(e){
+var tt=$(e.target);
+var _9=tt.closest("div.tree-node");
+if(!_9.length){
+return;
+}
+if(tt.hasClass("tree-hit")){
+_85(_5,_9[0]);
+return false;
+}else{
+if(tt.hasClass("tree-checkbox")){
+_34(_5,_9[0]);
+return false;
+}else{
+_d9(_5,_9[0]);
+_6.onClick.call(_5,_c(_5,_9[0]));
+}
+}
+e.stopPropagation();
+}).bind("dblclick",function(e){
+var _a=$(e.target).closest("div.tree-node");
+if(!_a.length){
+return;
+}
+_d9(_5,_a[0]);
+_6.onDblClick.call(_5,_c(_5,_a[0]));
+e.stopPropagation();
+}).bind("contextmenu",function(e){
+var _b=$(e.target).closest("div.tree-node");
+if(!_b.length){
+return;
+}
+_6.onContextMenu.call(_5,e,_c(_5,_b[0]));
+e.stopPropagation();
+});
+};
+function _d(_e){
+var _f=$.data(_e,"tree").options;
+_f.dnd=false;
+var _10=$(_e).find("div.tree-node");
+_10.draggable("disable");
+_10.css("cursor","pointer");
+};
+function _11(_12){
+var _13=$.data(_12,"tree");
+var _14=_13.options;
+var _15=_13.tree;
+_13.disabledNodes=[];
+_14.dnd=true;
+_15.find("div.tree-node").draggable({disabled:false,revert:true,cursor:"pointer",proxy:function(_16){
+var p=$("<div class=\"tree-node-proxy\"></div>").appendTo("body");
+p.html("<span class=\"tree-dnd-icon tree-dnd-no\">&nbsp;</span>"+$(_16).find(".tree-title").html());
+p.hide();
+return p;
+},deltaX:15,deltaY:15,onBeforeDrag:function(e){
+if(_14.onBeforeDrag.call(_12,_c(_12,this))==false){
+return false;
+}
+if($(e.target).hasClass("tree-hit")||$(e.target).hasClass("tree-checkbox")){
+return false;
+}
+if(e.which!=1){
+return false;
+}
+var _17=$(this).find("span.tree-indent");
+if(_17.length){
+e.data.offsetWidth-=_17.length*_17.width();
+}
+},onStartDrag:function(e){
+$(this).next("ul").find("div.tree-node").each(function(){
+$(this).droppable("disable");
+_13.disabledNodes.push(this);
+});
+$(this).draggable("proxy").css({left:-10000,top:-10000});
+_14.onStartDrag.call(_12,_c(_12,this));
+var _18=_c(_12,this);
+if(_18.id==undefined){
+_18.id="easyui_tree_node_id_temp";
+_60(_12,_18);
+}
+_13.draggingNodeId=_18.id;
+},onDrag:function(e){
+var x1=e.pageX,y1=e.pageY,x2=e.data.startX,y2=e.data.startY;
+var d=Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2));
+if(d>3){
+$(this).draggable("proxy").show();
+}
+this.pageY=e.pageY;
+},onStopDrag:function(){
+for(var i=0;i<_13.disabledNodes.length;i++){
+$(_13.disabledNodes[i]).droppable("enable");
+}
+_13.disabledNodes=[];
+var _19=_d0(_12,_13.draggingNodeId);
+if(_19&&_19.id=="easyui_tree_node_id_temp"){
+_19.id="";
+_60(_12,_19);
+}
+_14.onStopDrag.call(_12,_19);
+}}).droppable({accept:"div.tree-node",onDragEnter:function(e,_1a){
+if(_14.onDragEnter.call(_12,this,_1b(_1a))==false){
+_1c(_1a,false);
+$(this).removeClass("tree-node-append tree-node-top tree-node-bottom");
+$(this).droppable("disable");
+_13.disabledNodes.push(this);
+}
+},onDragOver:function(e,_1d){
+if($(this).droppable("options").disabled){
+return;
+}
+var _1e=_1d.pageY;
+var top=$(this).offset().top;
+var _1f=top+$(this).outerHeight();
+_1c(_1d,true);
+$(this).removeClass("tree-node-append tree-node-top tree-node-bottom");
+if(_1e>top+(_1f-top)/2){
+if(_1f-_1e<5){
+$(this).addClass("tree-node-bottom");
+}else{
+$(this).addClass("tree-node-append");
+}
+}else{
+if(_1e-top<5){
+$(this).addClass("tree-node-top");
+}else{
+$(this).addClass("tree-node-append");
+}
+}
+if(_14.onDragOver.call(_12,this,_1b(_1d))==false){
+_1c(_1d,false);
+$(this).removeClass("tree-node-append tree-node-top tree-node-bottom");
+$(this).droppable("disable");
+_13.disabledNodes.push(this);
+}
+},onDragLeave:function(e,_20){
+_1c(_20,false);
+$(this).removeClass("tree-node-append tree-node-top tree-node-bottom");
+_14.onDragLeave.call(_12,this,_1b(_20));
+},onDrop:function(e,_21){
+var _22=this;
+var _23,_24;
+if($(this).hasClass("tree-node-append")){
+_23=_25;
+_24="append";
+}else{
+_23=_26;
+_24=$(this).hasClass("tree-node-top")?"top":"bottom";
+}
+if(_14.onBeforeDrop.call(_12,_22,_1b(_21),_24)==false){
+$(this).removeClass("tree-node-append tree-node-top tree-node-bottom");
+return;
+}
+_23(_21,_22,_24);
+$(this).removeClass("tree-node-append tree-node-top tree-node-bottom");
+}});
+function _1b(_27,pop){
+return $(_27).closest("ul.tree").tree(pop?"pop":"getData",_27);
+};
+function _1c(_28,_29){
+var _2a=$(_28).draggable("proxy").find("span.tree-dnd-icon");
+_2a.removeClass("tree-dnd-yes tree-dnd-no").addClass(_29?"tree-dnd-yes":"tree-dnd-no");
+};
+function _25(_2b,_2c){
+if(_c(_12,_2c).state=="closed"){
+_79(_12,_2c,function(){
+_2d();
+});
+}else{
+_2d();
+}
+function _2d(){
+var _2e=_1b(_2b,true);
+$(_12).tree("append",{parent:_2c,data:[_2e]});
+_14.onDrop.call(_12,_2c,_2e,"append");
+};
+};
+function _26(_2f,_30,_31){
+var _32={};
+if(_31=="top"){
+_32.before=_30;
+}else{
+_32.after=_30;
+}
+var _33=_1b(_2f,true);
+_32.data=_33;
+$(_12).tree("insert",_32);
+_14.onDrop.call(_12,_30,_33,_31);
+};
+};
+function _34(_35,_36,_37,_38){
+var _39=$.data(_35,"tree");
+var _3a=_39.options;
+if(!_3a.checkbox){
+return;
+}
+var _3b=_c(_35,_36);
+if(!_3b.checkState){
+return;
+}
+var ck=$(_36).find(".tree-checkbox");
+if(_37==undefined){
+if(ck.hasClass("tree-checkbox1")){
+_37=false;
+}else{
+if(ck.hasClass("tree-checkbox0")){
+_37=true;
+}else{
+if(_3b._checked==undefined){
+_3b._checked=$(_36).find(".tree-checkbox").hasClass("tree-checkbox1");
+}
+_37=!_3b._checked;
+}
+}
+}
+_3b._checked=_37;
+if(_37){
+if(ck.hasClass("tree-checkbox1")){
+return;
+}
+}else{
+if(ck.hasClass("tree-checkbox0")){
+return;
+}
+}
+if(!_38){
+if(_3a.onBeforeCheck.call(_35,_3b,_37)==false){
+return;
+}
+}
+if(_3a.cascadeCheck){
+_3c(_35,_3b,_37);
+_3d(_35,_3b);
+}else{
+_3e(_35,_3b,_37?"1":"0");
+}
+if(!_38){
+_3a.onCheck.call(_35,_3b,_37);
+}
+};
+function _3c(_3f,_40,_41){
+var _42=$.data(_3f,"tree").options;
+var _43=_41?1:0;
+_3e(_3f,_40,_43);
+if(_42.deepCheck){
+$.easyui.forEach(_40.children||[],true,function(n){
+_3e(_3f,n,_43);
+});
+}else{
+var _44=[];
+if(_40.children&&_40.children.length){
+_44.push(_40);
+}
+$.easyui.forEach(_40.children||[],true,function(n){
+if(!n.hidden){
+_3e(_3f,n,_43);
+if(n.children&&n.children.length){
+_44.push(n);
+}
+}
+});
+for(var i=_44.length-1;i>=0;i--){
+var _45=_44[i];
+_3e(_3f,_45,_46(_45));
+}
+}
+};
+function _3e(_47,_48,_49){
+var _4a=$.data(_47,"tree").options;
+if(!_48.checkState||_49==undefined){
+return;
+}
+if(_48.hidden&&!_4a.deepCheck){
+return;
+}
+var ck=$("#"+_48.domId).find(".tree-checkbox");
+_48.checkState=["unchecked","checked","indeterminate"][_49];
+_48.checked=(_48.checkState=="checked");
+ck.removeClass("tree-checkbox0 tree-checkbox1 tree-checkbox2");
+ck.addClass("tree-checkbox"+_49);
+};
+function _3d(_4b,_4c){
+var pd=_4d(_4b,$("#"+_4c.domId)[0]);
+if(pd){
+_3e(_4b,pd,_46(pd));
+_3d(_4b,pd);
+}
+};
+function _46(row){
+var c0=0;
+var c1=0;
+var len=0;
+$.easyui.forEach(row.children||[],false,function(r){
+if(r.checkState){
+len++;
+if(r.checkState=="checked"){
+c1++;
+}else{
+if(r.checkState=="unchecked"){
+c0++;
+}
+}
+}
+});
+if(len==0){
+return undefined;
+}
+var _4e=0;
+if(c0==len){
+_4e=0;
+}else{
+if(c1==len){
+_4e=1;
+}else{
+_4e=2;
+}
+}
+return _4e;
+};
+function _4f(_50,_51){
+var _52=$.data(_50,"tree").options;
+if(!_52.checkbox){
+return;
+}
+var _53=$(_51);
+var ck=_53.find(".tree-checkbox");
+var _54=_c(_50,_51);
+if(_52.view.hasCheckbox(_50,_54)){
+if(!ck.length){
+_54.checkState=_54.checkState||"unchecked";
+$("<span class=\"tree-checkbox\"></span>").insertBefore(_53.find(".tree-title"));
+}
+if(_54.checkState=="checked"){
+_34(_50,_51,true,true);
+}else{
+if(_54.checkState=="unchecked"){
+_34(_50,_51,false,true);
+}else{
+var _55=_46(_54);
+if(_55===0){
+_34(_50,_51,false,true);
+}else{
+if(_55===1){
+_34(_50,_51,true,true);
+}
+}
+}
+}
+}else{
+ck.remove();
+_54.checkState=undefined;
+_54.checked=undefined;
+_3d(_50,_54);
+}
+};
+function _56(_57,ul,_58,_59,_5a){
+var _5b=$.data(_57,"tree");
+var _5c=_5b.options;
+var _5d=$(ul).prevAll("div.tree-node:first");
+_58=_5c.loadFilter.call(_57,_58,_5d[0]);
+var _5e=_5f(_57,"domId",_5d.attr("id"));
+if(!_59){
+_5e?_5e.children=_58:_5b.data=_58;
+$(ul).empty();
+}else{
+if(_5e){
+_5e.children?_5e.children=_5e.children.concat(_58):_5e.children=_58;
+}else{
+_5b.data=_5b.data.concat(_58);
+}
+}
+_5c.view.render.call(_5c.view,_57,ul,_58);
+if(_5c.dnd){
+_11(_57);
+}
+if(_5e){
+_60(_57,_5e);
+}
+for(var i=0;i<_5b.tmpIds.length;i++){
+_34(_57,$("#"+_5b.tmpIds[i])[0],true,true);
+}
+_5b.tmpIds=[];
+setTimeout(function(){
+_61(_57,_57);
+},0);
+if(!_5a){
+_5c.onLoadSuccess.call(_57,_5e,_58);
+}
+};
+function _61(_62,ul,_63){
+var _64=$.data(_62,"tree").options;
+if(_64.lines){
+$(_62).addClass("tree-lines");
+}else{
+$(_62).removeClass("tree-lines");
+return;
+}
+if(!_63){
+_63=true;
+$(_62).find("span.tree-indent").removeClass("tree-line tree-join tree-joinbottom");
+$(_62).find("div.tree-node").removeClass("tree-node-last tree-root-first tree-root-one");
+var _65=$(_62).tree("getRoots");
+if(_65.length>1){
+$(_65[0].target).addClass("tree-root-first");
+}else{
+if(_65.length==1){
+$(_65[0].target).addClass("tree-root-one");
+}
+}
+}
+$(ul).children("li").each(function(){
+var _66=$(this).children("div.tree-node");
+var ul=_66.next("ul");
+if(ul.length){
+if($(this).next().length){
+_67(_66);
+}
+_61(_62,ul,_63);
+}else{
+_68(_66);
+}
+});
+var _69=$(ul).children("li:last").children("div.tree-node").addClass("tree-node-last");
+_69.children("span.tree-join").removeClass("tree-join").addClass("tree-joinbottom");
+function _68(_6a,_6b){
+var _6c=_6a.find("span.tree-icon");
+_6c.prev("span.tree-indent").addClass("tree-join");
+};
+function _67(_6d){
+var _6e=_6d.find("span.tree-indent, span.tree-hit").length;
+_6d.next().find("div.tree-node").each(function(){
+$(this).children("span:eq("+(_6e-1)+")").addClass("tree-line");
+});
+};
+};
+function _6f(_70,ul,_71,_72){
+var _73=$.data(_70,"tree").options;
+_71=$.extend({},_73.queryParams,_71||{});
+var _74=null;
+if(_70!=ul){
+var _75=$(ul).prev();
+_74=_c(_70,_75[0]);
+}
+if(_73.onBeforeLoad.call(_70,_74,_71)==false){
+return;
+}
+var _76=$(ul).prev().children("span.tree-folder");
+_76.addClass("tree-loading");
+var _77=_73.loader.call(_70,_71,function(_78){
+_76.removeClass("tree-loading");
+_56(_70,ul,_78);
+if(_72){
+_72();
+}
+},function(){
+_76.removeClass("tree-loading");
+_73.onLoadError.apply(_70,arguments);
+if(_72){
+_72();
+}
+});
+if(_77==false){
+_76.removeClass("tree-loading");
+}
+};
+function _79(_7a,_7b,_7c){
+var _7d=$.data(_7a,"tree").options;
+var hit=$(_7b).children("span.tree-hit");
+if(hit.length==0){
+return;
+}
+if(hit.hasClass("tree-expanded")){
+return;
+}
+var _7e=_c(_7a,_7b);
+if(_7d.onBeforeExpand.call(_7a,_7e)==false){
+return;
+}
+hit.removeClass("tree-collapsed tree-collapsed-hover").addClass("tree-expanded");
+hit.next().addClass("tree-folder-open");
+var ul=$(_7b).next();
+if(ul.length){
+if(_7d.animate){
+ul.slideDown("normal",function(){
+_7e.state="open";
+_7d.onExpand.call(_7a,_7e);
+if(_7c){
+_7c();
+}
+});
+}else{
+ul.css("display","block");
+_7e.state="open";
+_7d.onExpand.call(_7a,_7e);
+if(_7c){
+_7c();
+}
+}
+}else{
+var _7f=$("<ul style=\"display:none\"></ul>").insertAfter(_7b);
+_6f(_7a,_7f[0],{id:_7e.id},function(){
+if(_7f.is(":empty")){
+_7f.remove();
+}
+if(_7d.animate){
+_7f.slideDown("normal",function(){
+_7e.state="open";
+_7d.onExpand.call(_7a,_7e);
+if(_7c){
+_7c();
+}
+});
+}else{
+_7f.css("display","block");
+_7e.state="open";
+_7d.onExpand.call(_7a,_7e);
+if(_7c){
+_7c();
+}
+}
+});
+}
+};
+function _80(_81,_82){
+var _83=$.data(_81,"tree").options;
+var hit=$(_82).children("span.tree-hit");
+if(hit.length==0){
+return;
+}
+if(hit.hasClass("tree-collapsed")){
+return;
+}
+var _84=_c(_81,_82);
+if(_83.onBeforeCollapse.call(_81,_84)==false){
+return;
+}
+hit.removeClass("tree-expanded tree-expanded-hover").addClass("tree-collapsed");
+hit.next().removeClass("tree-folder-open");
+var ul=$(_82).next();
+if(_83.animate){
+ul.slideUp("normal",function(){
+_84.state="closed";
+_83.onCollapse.call(_81,_84);
+});
+}else{
+ul.css("display","none");
+_84.state="closed";
+_83.onCollapse.call(_81,_84);
+}
+};
+function _85(_86,_87){
+var hit=$(_87).children("span.tree-hit");
+if(hit.length==0){
+return;
+}
+if(hit.hasClass("tree-expanded")){
+_80(_86,_87);
+}else{
+_79(_86,_87);
+}
+};
+function _88(_89,_8a){
+var _8b=_8c(_89,_8a);
+if(_8a){
+_8b.unshift(_c(_89,_8a));
+}
+for(var i=0;i<_8b.length;i++){
+_79(_89,_8b[i].target);
+}
+};
+function _8d(_8e,_8f){
+var _90=[];
+var p=_4d(_8e,_8f);
+while(p){
+_90.unshift(p);
+p=_4d(_8e,p.target);
+}
+for(var i=0;i<_90.length;i++){
+_79(_8e,_90[i].target);
+}
+};
+function _91(_92,_93){
+var c=$(_92).parent();
+while(c[0].tagName!="BODY"&&c.css("overflow-y")!="auto"){
+c=c.parent();
+}
+var n=$(_93);
+var _94=n.offset().top;
+if(c[0].tagName!="BODY"){
+var _95=c.offset().top;
+if(_94<_95){
+c.scrollTop(c.scrollTop()+_94-_95);
+}else{
+if(_94+n.outerHeight()>_95+c.outerHeight()-18){
+c.scrollTop(c.scrollTop()+_94+n.outerHeight()-_95-c.outerHeight()+18);
+}
+}
+}else{
+c.scrollTop(_94);
+}
+};
+function _96(_97,_98){
+var _99=_8c(_97,_98);
+if(_98){
+_99.unshift(_c(_97,_98));
+}
+for(var i=0;i<_99.length;i++){
+_80(_97,_99[i].target);
+}
+};
+function _9a(_9b,_9c){
+var _9d=$(_9c.parent);
+var _9e=_9c.data;
+if(!_9e){
+return;
+}
+_9e=$.isArray(_9e)?_9e:[_9e];
+if(!_9e.length){
+return;
+}
+var ul;
+if(_9d.length==0){
+ul=$(_9b);
+}else{
+if(_9f(_9b,_9d[0])){
+var _a0=_9d.find("span.tree-icon");
+_a0.removeClass("tree-file").addClass("tree-folder tree-folder-open");
+var hit=$("<span class=\"tree-hit tree-expanded\"></span>").insertBefore(_a0);
+if(hit.prev().length){
+hit.prev().remove();
+}
+}
+ul=_9d.next();
+if(!ul.length){
+ul=$("<ul></ul>").insertAfter(_9d);
+}
+}
+_56(_9b,ul[0],_9e,true,true);
+};
+function _a1(_a2,_a3){
+var ref=_a3.before||_a3.after;
+var _a4=_4d(_a2,ref);
+var _a5=_a3.data;
+if(!_a5){
+return;
+}
+_a5=$.isArray(_a5)?_a5:[_a5];
+if(!_a5.length){
+return;
+}
+_9a(_a2,{parent:(_a4?_a4.target:null),data:_a5});
+var _a6=_a4?_a4.children:$(_a2).tree("getRoots");
+for(var i=0;i<_a6.length;i++){
+if(_a6[i].domId==$(ref).attr("id")){
+for(var j=_a5.length-1;j>=0;j--){
+_a6.splice((_a3.before?i:(i+1)),0,_a5[j]);
+}
+_a6.splice(_a6.length-_a5.length,_a5.length);
+break;
+}
+}
+var li=$();
+for(var i=0;i<_a5.length;i++){
+li=li.add($("#"+_a5[i].domId).parent());
+}
+if(_a3.before){
+li.insertBefore($(ref).parent());
+}else{
+li.insertAfter($(ref).parent());
+}
+};
+function _a7(_a8,_a9){
+var _aa=del(_a9);
+$(_a9).parent().remove();
+if(_aa){
+if(!_aa.children||!_aa.children.length){
+var _ab=$(_aa.target);
+_ab.find(".tree-icon").removeClass("tree-folder").addClass("tree-file");
+_ab.find(".tree-hit").remove();
+$("<span class=\"tree-indent\"></span>").prependTo(_ab);
+_ab.next().remove();
+}
+_60(_a8,_aa);
+}
+_61(_a8,_a8);
+function del(_ac){
+var id=$(_ac).attr("id");
+var _ad=_4d(_a8,_ac);
+var cc=_ad?_ad.children:$.data(_a8,"tree").data;
+for(var i=0;i<cc.length;i++){
+if(cc[i].domId==id){
+cc.splice(i,1);
+break;
+}
+}
+return _ad;
+};
+};
+function _60(_ae,_af){
+var _b0=$.data(_ae,"tree").options;
+var _b1=$(_af.target);
+var _b2=_c(_ae,_af.target);
+if(_b2.iconCls){
+_b1.find(".tree-icon").removeClass(_b2.iconCls);
+}
+$.extend(_b2,_af);
+_b1.find(".tree-title").html(_b0.formatter.call(_ae,_b2));
+if(_b2.iconCls){
+_b1.find(".tree-icon").addClass(_b2.iconCls);
+}
+_4f(_ae,_af.target);
+};
+function _b3(_b4,_b5){
+if(_b5){
+var p=_4d(_b4,_b5);
+while(p){
+_b5=p.target;
+p=_4d(_b4,_b5);
+}
+return _c(_b4,_b5);
+}else{
+var _b6=_b7(_b4);
+return _b6.length?_b6[0]:null;
+}
+};
+function _b7(_b8){
+var _b9=$.data(_b8,"tree").data;
+for(var i=0;i<_b9.length;i++){
+_ba(_b9[i]);
+}
+return _b9;
+};
+function _8c(_bb,_bc){
+var _bd=[];
+var n=_c(_bb,_bc);
+var _be=n?(n.children||[]):$.data(_bb,"tree").data;
+$.easyui.forEach(_be,true,function(_bf){
+_bd.push(_ba(_bf));
+});
+return _bd;
+};
+function _4d(_c0,_c1){
+var p=$(_c1).closest("ul").prevAll("div.tree-node:first");
+return _c(_c0,p[0]);
+};
+function _c2(_c3,_c4){
+_c4=_c4||"checked";
+if(!$.isArray(_c4)){
+_c4=[_c4];
+}
+var _c5=[];
+$.easyui.forEach($.data(_c3,"tree").data,true,function(n){
+if(n.checkState&&$.easyui.indexOfArray(_c4,n.checkState)!=-1){
+_c5.push(_ba(n));
+}
+});
+return _c5;
+};
+function _c6(_c7){
+var _c8=$(_c7).find("div.tree-node-selected");
+return _c8.length?_c(_c7,_c8[0]):null;
+};
+function _c9(_ca,_cb){
+var _cc=_c(_ca,_cb);
+if(_cc&&_cc.children){
+$.easyui.forEach(_cc.children,true,function(_cd){
+_ba(_cd);
+});
+}
+return _cc;
+};
+function _c(_ce,_cf){
+return _5f(_ce,"domId",$(_cf).attr("id"));
+};
+function _d0(_d1,id){
+return _5f(_d1,"id",id);
+};
+function _5f(_d2,_d3,_d4){
+var _d5=$.data(_d2,"tree").data;
+var _d6=null;
+$.easyui.forEach(_d5,true,function(_d7){
+if(_d7[_d3]==_d4){
+_d6=_ba(_d7);
+return false;
+}
+});
+return _d6;
+};
+function _ba(_d8){
+_d8.target=$("#"+_d8.domId)[0];
+return _d8;
+};
+function _d9(_da,_db){
+var _dc=$.data(_da,"tree").options;
+var _dd=_c(_da,_db);
+if(_dc.onBeforeSelect.call(_da,_dd)==false){
+return;
+}
+$(_da).find("div.tree-node-selected").removeClass("tree-node-selected");
+$(_db).addClass("tree-node-selected");
+_dc.onSelect.call(_da,_dd);
+};
+function _9f(_de,_df){
+return $(_df).children("span.tree-hit").length==0;
+};
+function _e0(_e1,_e2){
+var _e3=$.data(_e1,"tree").options;
+var _e4=_c(_e1,_e2);
+if(_e3.onBeforeEdit.call(_e1,_e4)==false){
+return;
+}
+$(_e2).css("position","relative");
+var nt=$(_e2).find(".tree-title");
+var _e5=nt.outerWidth();
+nt.empty();
+var _e6=$("<input class=\"tree-editor\">").appendTo(nt);
+_e6.val(_e4.text).focus();
+_e6.width(_e5+20);
+_e6._outerHeight(18);
+_e6.bind("click",function(e){
+return false;
+}).bind("mousedown",function(e){
+e.stopPropagation();
+}).bind("mousemove",function(e){
+e.stopPropagation();
+}).bind("keydown",function(e){
+if(e.keyCode==13){
+_e7(_e1,_e2);
+return false;
+}else{
+if(e.keyCode==27){
+_ed(_e1,_e2);
+return false;
+}
+}
+}).bind("blur",function(e){
+e.stopPropagation();
+_e7(_e1,_e2);
+});
+};
+function _e7(_e8,_e9){
+var _ea=$.data(_e8,"tree").options;
+$(_e9).css("position","");
+var _eb=$(_e9).find("input.tree-editor");
+var val=_eb.val();
+_eb.remove();
+var _ec=_c(_e8,_e9);
+_ec.text=val;
+_60(_e8,_ec);
+_ea.onAfterEdit.call(_e8,_ec);
+};
+function _ed(_ee,_ef){
+var _f0=$.data(_ee,"tree").options;
+$(_ef).css("position","");
+$(_ef).find("input.tree-editor").remove();
+var _f1=_c(_ee,_ef);
+_60(_ee,_f1);
+_f0.onCancelEdit.call(_ee,_f1);
+};
+function _f2(_f3,q){
+var _f4=$.data(_f3,"tree");
+var _f5=_f4.options;
+var ids={};
+$.easyui.forEach(_f4.data,true,function(_f6){
+if(_f5.filter.call(_f3,q,_f6)){
+$("#"+_f6.domId).removeClass("tree-node-hidden");
+ids[_f6.domId]=1;
+_f6.hidden=false;
+}else{
+$("#"+_f6.domId).addClass("tree-node-hidden");
+_f6.hidden=true;
+}
+});
+for(var id in ids){
+_f7(id);
+}
+function _f7(_f8){
+var p=$(_f3).tree("getParent",$("#"+_f8)[0]);
+while(p){
+$(p.target).removeClass("tree-node-hidden");
+p.hidden=false;
+p=$(_f3).tree("getParent",p.target);
+}
+};
+};
+$.fn.tree=function(_f9,_fa){
+if(typeof _f9=="string"){
+return $.fn.tree.methods[_f9](this,_fa);
+}
+var _f9=_f9||{};
+return this.each(function(){
+var _fb=$.data(this,"tree");
+var _fc;
+if(_fb){
+_fc=$.extend(_fb.options,_f9);
+_fb.options=_fc;
+}else{
+_fc=$.extend({},$.fn.tree.defaults,$.fn.tree.parseOptions(this),_f9);
+$.data(this,"tree",{options:_fc,tree:_1(this),data:[],tmpIds:[]});
+var _fd=$.fn.tree.parseData(this);
+if(_fd.length){
+_56(this,this,_fd);
+}
+}
+_4(this);
+if(_fc.data){
+_56(this,this,$.extend(true,[],_fc.data));
+}
+_6f(this,this);
+});
+};
+$.fn.tree.methods={options:function(jq){
+return $.data(jq[0],"tree").options;
+},loadData:function(jq,_fe){
+return jq.each(function(){
+_56(this,this,_fe);
+});
+},getNode:function(jq,_ff){
+return _c(jq[0],_ff);
+},getData:function(jq,_100){
+return _c9(jq[0],_100);
+},reload:function(jq,_101){
+return jq.each(function(){
+if(_101){
+var node=$(_101);
+var hit=node.children("span.tree-hit");
+hit.removeClass("tree-expanded tree-expanded-hover").addClass("tree-collapsed");
+node.next().remove();
+_79(this,_101);
+}else{
+$(this).empty();
+_6f(this,this);
+}
+});
+},getRoot:function(jq,_102){
+return _b3(jq[0],_102);
+},getRoots:function(jq){
+return _b7(jq[0]);
+},getParent:function(jq,_103){
+return _4d(jq[0],_103);
+},getChildren:function(jq,_104){
+return _8c(jq[0],_104);
+},getChecked:function(jq,_105){
+return _c2(jq[0],_105);
+},getSelected:function(jq){
+return _c6(jq[0]);
+},isLeaf:function(jq,_106){
+return _9f(jq[0],_106);
+},find:function(jq,id){
+return _d0(jq[0],id);
+},select:function(jq,_107){
+return jq.each(function(){
+_d9(this,_107);
+});
+},check:function(jq,_108){
+return jq.each(function(){
+_34(this,_108,true);
+});
+},uncheck:function(jq,_109){
+return jq.each(function(){
+_34(this,_109,false);
+});
+},collapse:function(jq,_10a){
+return jq.each(function(){
+_80(this,_10a);
+});
+},expand:function(jq,_10b){
+return jq.each(function(){
+_79(this,_10b);
+});
+},collapseAll:function(jq,_10c){
+return jq.each(function(){
+_96(this,_10c);
+});
+},expandAll:function(jq,_10d){
+return jq.each(function(){
+_88(this,_10d);
+});
+},expandTo:function(jq,_10e){
+return jq.each(function(){
+_8d(this,_10e);
+});
+},scrollTo:function(jq,_10f){
+return jq.each(function(){
+_91(this,_10f);
+});
+},toggle:function(jq,_110){
+return jq.each(function(){
+_85(this,_110);
+});
+},append:function(jq,_111){
+return jq.each(function(){
+_9a(this,_111);
+});
+},insert:function(jq,_112){
+return jq.each(function(){
+_a1(this,_112);
+});
+},remove:function(jq,_113){
+return jq.each(function(){
+_a7(this,_113);
+});
+},pop:function(jq,_114){
+var node=jq.tree("getData",_114);
+jq.tree("remove",_114);
+return node;
+},update:function(jq,_115){
+return jq.each(function(){
+_60(this,$.extend({},_115,{checkState:_115.checked?"checked":(_115.checked===false?"unchecked":undefined)}));
+});
+},enableDnd:function(jq){
+return jq.each(function(){
+_11(this);
+});
+},disableDnd:function(jq){
+return jq.each(function(){
+_d(this);
+});
+},beginEdit:function(jq,_116){
+return jq.each(function(){
+_e0(this,_116);
+});
+},endEdit:function(jq,_117){
+return jq.each(function(){
+_e7(this,_117);
+});
+},cancelEdit:function(jq,_118){
+return jq.each(function(){
+_ed(this,_118);
+});
+},doFilter:function(jq,q){
+return jq.each(function(){
+_f2(this,q);
+});
+}};
+$.fn.tree.parseOptions=function(_119){
+var t=$(_119);
+return $.extend({},$.parser.parseOptions(_119,["url","method",{checkbox:"boolean",cascadeCheck:"boolean",onlyLeafCheck:"boolean"},{animate:"boolean",lines:"boolean",dnd:"boolean"}]));
+};
+$.fn.tree.parseData=function(_11a){
+var data=[];
+_11b(data,$(_11a));
+return data;
+function _11b(aa,tree){
+tree.children("li").each(function(){
+var node=$(this);
+var item=$.extend({},$.parser.parseOptions(this,["id","iconCls","state"]),{checked:(node.attr("checked")?true:undefined)});
+item.text=node.children("span").html();
+if(!item.text){
+item.text=node.html();
+}
+var _11c=node.children("ul");
+if(_11c.length){
+item.children=[];
+_11b(item.children,_11c);
+}
+aa.push(item);
+});
+};
+};
+var _11d=1;
+var _11e={render:function(_11f,ul,data){
+var _120=$.data(_11f,"tree");
+var opts=_120.options;
+var _121=$(ul).prev(".tree-node");
+var _122=_121.length?$(_11f).tree("getNode",_121[0]):null;
+var _123=_121.find("span.tree-indent, span.tree-hit").length;
+var cc=_124.call(this,_123,data);
+$(ul).append(cc.join(""));
+function _124(_125,_126){
+var cc=[];
+for(var i=0;i<_126.length;i++){
+var item=_126[i];
+if(item.state!="open"&&item.state!="closed"){
+item.state="open";
+}
+item.domId="_easyui_tree_"+_11d++;
+cc.push("<li>");
+cc.push("<div id=\""+item.domId+"\" class=\"tree-node\">");
+for(var j=0;j<_125;j++){
+cc.push("<span class=\"tree-indent\"></span>");
+}
+if(item.state=="closed"){
+cc.push("<span class=\"tree-hit tree-collapsed\"></span>");
+cc.push("<span class=\"tree-icon tree-folder "+(item.iconCls?item.iconCls:"")+"\"></span>");
+}else{
+if(item.children&&item.children.length){
+cc.push("<span class=\"tree-hit tree-expanded\"></span>");
+cc.push("<span class=\"tree-icon tree-folder tree-folder-open "+(item.iconCls?item.iconCls:"")+"\"></span>");
+}else{
+cc.push("<span class=\"tree-indent\"></span>");
+cc.push("<span class=\"tree-icon tree-file "+(item.iconCls?item.iconCls:"")+"\"></span>");
+}
+}
+if(this.hasCheckbox(_11f,item)){
+var flag=0;
+if(_122&&_122.checkState=="checked"&&opts.cascadeCheck){
+flag=1;
+item.checked=true;
+}else{
+if(item.checked){
+$.easyui.addArrayItem(_120.tmpIds,item.domId);
+}
+}
+item.checkState=flag?"checked":"unchecked";
+cc.push("<span class=\"tree-checkbox tree-checkbox"+flag+"\"></span>");
+}else{
+item.checkState=undefined;
+item.checked=undefined;
+}
+cc.push("<span class=\"tree-title\">"+opts.formatter.call(_11f,item)+"</span>");
+cc.push("</div>");
+if(item.children&&item.children.length){
+var tmp=_124.call(this,_125+1,item.children);
+cc.push("<ul style=\"display:"+(item.state=="closed"?"none":"block")+"\">");
+cc=cc.concat(tmp);
+cc.push("</ul>");
+}
+cc.push("</li>");
+}
+return cc;
+};
+},hasCheckbox:function(_127,item){
+var _128=$.data(_127,"tree");
+var opts=_128.options;
+if(opts.checkbox){
+if($.isFunction(opts.checkbox)){
+if(opts.checkbox.call(_127,item)){
+return true;
+}else{
+return false;
+}
+}else{
+if(opts.onlyLeafCheck){
+if(item.state=="open"&&!(item.children&&item.children.length)){
+return true;
+}
+}else{
+return true;
+}
+}
+}
+return false;
+}};
+$.fn.tree.defaults={url:null,method:"post",animate:false,checkbox:false,cascadeCheck:true,onlyLeafCheck:false,lines:false,dnd:false,data:null,queryParams:{},formatter:function(node){
+return node.text;
+},filter:function(q,node){
+var qq=[];
+$.map($.isArray(q)?q:[q],function(q){
+q=$.trim(q);
+if(q){
+qq.push(q);
+}
+});
+for(var i=0;i<qq.length;i++){
+var _129=node.text.toLowerCase().indexOf(qq[i].toLowerCase());
+if(_129>=0){
+return true;
+}
+}
+return !qq.length;
+},loader:function(_12a,_12b,_12c){
+var opts=$(this).tree("options");
+if(!opts.url){
+return false;
+}
+$.ajax({type:opts.method,url:opts.url,data:_12a,dataType:"json",success:function(data){
+_12b(data);
+},error:function(){
+_12c.apply(this,arguments);
+}});
+},loadFilter:function(data,_12d){
+return data;
+},view:_11e,onBeforeLoad:function(node,_12e){
+},onLoadSuccess:function(node,data){
+},onLoadError:function(){
+},onClick:function(node){
+},onDblClick:function(node){
+},onBeforeExpand:function(node){
+},onExpand:function(node){
+},onBeforeCollapse:function(node){
+},onCollapse:function(node){
+},onBeforeCheck:function(node,_12f){
+},onCheck:function(node,_130){
+},onBeforeSelect:function(node){
+},onSelect:function(node){
+},onContextMenu:function(e,node){
+},onBeforeDrag:function(node){
+},onStartDrag:function(node){
+},onStopDrag:function(node){
+},onDragEnter:function(_131,_132){
+},onDragOver:function(_133,_134){
+},onDragLeave:function(_135,_136){
+},onBeforeDrop:function(_137,_138,_139){
+},onDrop:function(_13a,_13b,_13c){
+},onBeforeEdit:function(node){
+},onAfterEdit:function(node){
+},onCancelEdit:function(node){
+}};
+})(jQuery);
+

public/libs/ObjTree.js

+// ========================================================================
+//  XML.ObjTree -- XML source code from/to JavaScript object like E4X
+// ========================================================================
+
+if ( typeof(XML) == 'undefined' ) XML = function() {};
+
+//  constructor
+
+XML.ObjTree = function () {
+    return this;
+};
+
+//  class variables
+
+XML.ObjTree.VERSION = "0.23";
+
+//  object prototype
+
+XML.ObjTree.prototype.xmlDecl = '<?xml version="1.0" encoding="UTF-8" ?>\n';
+XML.ObjTree.prototype.attr_prefix = '-';
+
+//  method: parseXML( xmlsource )
+
+XML.ObjTree.prototype.parseXML = function ( xml ) {
+    var root;
+    if ( window.DOMParser ) {
+        var xmldom = new DOMParser();
+//      xmldom.async = false;           // DOMParser is always sync-mode
+        var dom = xmldom.parseFromString( xml, "application/xml" );
+        if ( ! dom ) return;
+        root = dom.documentElement;
+    } else if ( window.ActiveXObject ) {
+        xmldom = new ActiveXObject('Microsoft.XMLDOM');
+        xmldom.async = false;
+        xmldom.loadXML( xml );
+        root = xmldom.documentElement;
+    }
+    if ( ! root ) return;
+    return this.parseDOM( root );
+};
+
+//  method: parseHTTP( url, options, callback )
+
+XML.ObjTree.prototype.parseHTTP = function ( url, options, callback ) {
+    var myopt = {};
+    for( var key in options ) {
+        myopt[key] = options[key];                  // copy object
+    }
+    if ( ! myopt.method ) {
+        if ( typeof(myopt.postBody) == "undefined" &&
+             typeof(myopt.postbody) == "undefined" &&
+             typeof(myopt.parameters) == "undefined" ) {
+            myopt.method = "get";
+        } else {
+            myopt.method = "post";
+        }
+    }
+    if ( callback ) {
+        myopt.asynchronous = true;                  // async-mode
+        var __this = this;
+        var __func = callback;
+        var __save = myopt.onComplete;
+        myopt.onComplete = function ( trans ) {
+            var tree;
+            if ( trans && trans.responseXML && trans.responseXML.documentElement ) {
+                tree = __this.parseDOM( trans.responseXML.documentElement );
+            }
+            __func( tree, trans );
+            if ( __save ) __save( trans );
+        };
+    } else {
+        myopt.asynchronous = false;                 // sync-mode
+    }
+    var trans;
+    if ( typeof(HTTP) != "undefined" && HTTP.Request ) {
+        myopt.uri = url;
+        var req = new HTTP.Request( myopt );        // JSAN
+        if ( req ) trans = req.transport;
+    } else if ( typeof(Ajax) != "undefined" && Ajax.Request ) {
+        var req = new Ajax.Request( url, myopt );   // ptorotype.js
+        if ( req ) trans = req.transport;
+    }
+    if ( callback ) return trans;
+    if ( trans && trans.responseXML && trans.responseXML.documentElement ) {
+        return this.parseDOM( trans.responseXML.documentElement );
+    }
+}
+
+//  method: parseDOM( documentroot )
+
+XML.ObjTree.prototype.parseDOM = function ( root ) {
+    if ( ! root ) return;
+	
+    this.__force_array = {};
+    if ( this.force_array ) {
+        for( var i=0; i<this.force_array.length; i++ ) {
+            this.__force_array[this.force_array[i]] = 1;
+        }
+    }
+
+    var json = this.parseElement( root );   // parse root node
+    if ( this.__force_array[root.nodeName] ) {
+        json = [ json ];
+    }
+    if ( root.nodeType != 11 ) {            // DOCUMENT_FRAGMENT_NODE
+        var tmp = {};
+        tmp[root.nodeName] = json;          // root nodeName
+        json = tmp;
+    }
+    return json;
+};
+
+//  method: parseElement( element )
+
+XML.ObjTree.prototype.parseElement = function ( elem ) {
+    //  COMMENT_NODE
+    if ( elem.nodeType == 7 ) {
+        return;
+    }
+
+    //  TEXT_NODE CDATA_SECTION_NODE
+    if ( elem.nodeType == 3 || elem.nodeType == 4 ) {
+        var bool = elem.nodeValue.match( /[^\x00-\x20]/ );
+        //console.log(bool)
+        if ( bool == null ) return;     // ignore white spaces
+        
+        return elem.nodeValue;
+    }
+
+    var retval;
+    var cnt = {};
+
+    //  parse attributes
+    if ( elem.attributes && elem.attributes.length ) {
+        retval = {};
+        for ( var i=0; i<elem.attributes.length; i++ ) {
+            var key = elem.attributes[i].nodeName;
+            if ( typeof(key) != "string" ) continue;
+            var val = elem.attributes[i].nodeValue;
+            if ( ! val ) continue;
+            key = this.attr_prefix + key;
+            if ( typeof(cnt[key]) == "undefined" ) cnt[key] = 0;
+            cnt[key] ++;
+            this.addNode( retval, key, cnt[key], val );
+        }
+    }
+
+    //  parse child nodes (recursive)
+    if ( elem.childNodes && elem.childNodes.length ) {
+        var textonly = true;
+        if ( retval ) textonly = false;        // some attributes exists
+        for ( var i=0; i<elem.childNodes.length && textonly; i++ ) {
+            var ntype = elem.childNodes[i].nodeType;
+            if ( ntype == 3 || ntype == 4 ) continue;
+            textonly = false;
+        }
+        if ( textonly ) {
+            if ( ! retval ) retval = "";
+            for ( var i=0; i<elem.childNodes.length; i++ ) {
+                retval += elem.childNodes[i].nodeValue;
+            }
+        } else {
+            if ( ! retval ) retval = {};
+            for ( var i=0; i<elem.childNodes.length; i++ ) {
+                var key = elem.childNodes[i].nodeName;
+                if ( typeof(key) != "string" ) continue;
+                var val = this.parseElement( elem.childNodes[i] );
+                if ( ! val ) continue;
+                if ( typeof(cnt[key]) == "undefined" ) cnt[key] = 0;
+                cnt[key] ++;
+                this.addNode( retval, key, cnt[key], val );
+            }
+        }
+    }
+    return retval;
+};
+
+//  method: addNode( hash, key, count, value )
+
+XML.ObjTree.prototype.addNode = function ( hash, key, cnts, val ) {
+    if ( this.__force_array[key] ) {
+        if ( cnts == 1 ) hash[key] = [];
+        hash[key][hash[key].length] = val;      // push
+    } else if ( cnts == 1 ) {                   // 1st sibling
+        hash[key] = val;
+    } else if ( cnts == 2 ) {                   // 2nd sibling
+        hash[key] = [ hash[key], val ];
+    } else {                                    // 3rd sibling and more
+        hash[key][hash[key].length] = val;
+    }
+};
+
+//  method: writeXML( tree )
+
+XML.ObjTree.prototype.writeXML = function ( tree ) {
+    var xml = this.hash_to_xml( null, tree );
+    return this.xmlDecl + xml;
+};
+
+//  method: hash_to_xml( tagName, tree )
+
+XML.ObjTree.prototype.hash_to_xml = function ( name, tree ) {
+    var elem = [];
+    var attr = [];
+    for( var key in tree ) {
+        if ( ! tree.hasOwnProperty(key) ) continue;
+        var val = tree[key];
+        if ( key.charAt(0) != this.attr_prefix ) {
+            if ( typeof(val) == "undefined" || val == null ) {
+                elem[elem.length] = "<"+key+" />";
+            } else if ( typeof(val) == "object" && val.constructor == Array ) {
+                elem[elem.length] = this.array_to_xml( key, val );
+            } else if ( typeof(val) == "object" ) {
+                elem[elem.length] = this.hash_to_xml( key, val );
+            } else {
+                elem[elem.length] = this.scalar_to_xml( key, val );
+            }
+        } else {
+            attr[attr.length] = " "+(key.substring(1))+'="'+(this.xml_escape( val ))+'"';
+        }
+    }
+    var jattr = attr.join("");
+    var jelem = elem.join("");
+    if ( typeof(name) == "undefined" || name == null ) {
+        // no tag
+    } else if ( elem.length > 0 ) {
+        if ( jelem.match( /\n/ )) {
+            jelem = "<"+name+jattr+">\n"+jelem+"</"+name+">\n";
+        } else {
+            jelem = "<"+name+jattr+">"  +jelem+"</"+name+">\n";
+        }
+    } else {
+        jelem = "<"+name+jattr+" />\n";
+    }
+    return jelem;
+};
+
+//  method: array_to_xml( tagName, array )
+
+XML.ObjTree.prototype.array_to_xml = function ( name, array ) {
+    var out = [];
+    for( var i=0; i<array.length; i++ ) {
+        var val = array[i];
+        if ( typeof(val) == "undefined" || val == null ) {
+            out[out.length] = "<"+name+" />";
+        } else if ( typeof(val) == "object" && val.constructor == Array ) {
+            out[out.length] = this.array_to_xml( name, val );
+        } else if ( typeof(val) == "object" ) {
+            out[out.length] = this.hash_to_xml( name, val );
+        } else {
+            out[out.length] = this.scalar_to_xml( name, val );
+        }
+    }
+    return out.join("");
+};
+
+//  method: scalar_to_xml( tagName, text )
+
+XML.ObjTree.prototype.scalar_to_xml = function ( name, text ) {
+    if ( name == "#text" ) {
+        return this.xml_escape(text);
+    } else {
+        return "<"+name+">"+this.xml_escape(text)+"</"+name+">\n";
+    }
+};
+
+//  method: xml_escape( text )
+
+XML.ObjTree.prototype.xml_escape = function ( text ) {
+    return (text + '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+};
+
+/*
+// ========================================================================
+
+=head1 NAME
+
+XML.ObjTree -- XML source code from/to JavaScript object like E4X
+
+=head1 SYNOPSIS
+
+    var xotree = new XML.ObjTree();
+    var tree1 = {
+        root: {
+            node: "Hello, World!"
+        }
+    };
+    var xml1 = xotree.writeXML( tree1 );        // object tree to XML source
+    alert( "xml1: "+xml1 );
+
+    var xml2 = '<?xml version="1.0"?><response><error>0</error></response>';
+    var tree2 = xotree.parseXML( xml2 );        // XML source to object tree
+    alert( "error: "+tree2.response.error );
+
+=head1 DESCRIPTION
+
+XML.ObjTree class is a parser/generater between XML source code
+and JavaScript object like E4X, ECMAScript for XML.
+This is a JavaScript version of the XML::TreePP module for Perl.
+This also works as a wrapper for XMLHTTPRequest and successor to JKL.ParseXML class
+when this is used with prototype.js or JSAN's HTTP.Request class.
+
+=head2 JavaScript object tree format
+
+A sample XML source:
+
+    <?xml version="1.0" encoding="UTF-8"?>
+    <family name="Kawasaki">
+        <father>Yasuhisa</father>
+        <mother>Chizuko</mother>
+        <children>
+            <girl>Shiori</girl>
+            <boy>Yusuke</boy>
+            <boy>Kairi</boy>
+        </children>
+    </family>
+
+Its JavaScript object tree like JSON/E4X:
+
+    {
+        'family': {
+            '-name':    'Kawasaki',
+            'father':   'Yasuhisa',
+            'mother':   'Chizuko',
+            'children': {
+                'girl': 'Shiori'
+                'boy': [
+                    'Yusuke',
+                    'Kairi'
+                ]
+            }
+        }
+    };
+
+Each elements are parsed into objects:
+
+    tree.family.father;             # the father's given name.
+
+Prefix '-' is inserted before every attributes' name.
+
+    tree.family["-name"];           # this family's family name
+
+A array is used because this family has two boys.
+
+    tree.family.children.boy[0];    # first boy's name
+    tree.family.children.boy[1];    # second boy's name
+    tree.family.children.girl;      # (girl has no other sisiters)
+
+=head1 METHODS
+
+=head2 xotree = new XML.ObjTree()
+
+This constructor method returns a new XML.ObjTree object.
+
+=head2 xotree.force_array = [ "rdf:li", "item", "-xmlns" ];
+
+This property allows you to specify a list of element names
+which should always be forced into an array representation.
+The default value is null, it means that context of the elements
+will determine to make array or to keep it scalar.
+
+=head2 xotree.attr_prefix = '@';
+
+This property allows you to specify a prefix character which is
+inserted before each attribute names.
+Instead of default prefix '-', E4X-style prefix '@' is also available.
+The default character is '-'.
+Or set '@' to access attribute values like E4X, ECMAScript for XML.
+The length of attr_prefix must be just one character and not be empty.
+
+=head2 tree = xotree.parseXML( xmlsrc );
+
+This method loads an XML document using the supplied string
+and returns its JavaScript object converted.
+
+=head2 tree = xotree.parseDOM( domnode );
+
+This method parses a DOM tree (ex. responseXML.documentElement)
+and returns its JavaScript object converted.
+
+=head2 tree = xotree.parseHTTP( url, options );
+
+This method loads a XML file from remote web server
+and returns its JavaScript object converted.
+XMLHTTPRequest's synchronous mode is always used.
+This mode blocks the process until the response is completed.
+
+First argument is a XML file's URL
+which must exist in the same domain as parent HTML file's.
+Cross-domain loading is not available for security reasons.
+
+Second argument is options' object which can contains some parameters:
+method, postBody, parameters, onLoading, etc.
+
+This method requires JSAN's L<HTTP.Request> class or prototype.js's Ajax.Request class.
+
+=head2 xotree.parseHTTP( url, options, callback );
+
+If a callback function is set as third argument,
+XMLHTTPRequest's asynchronous mode is used.
+
+This mode calls a callback function with XML file's JavaScript object converted
+after the response is completed.
+
+=head2 xmlsrc = xotree.writeXML( tree );
+
+This method parses a JavaScript object tree
+and returns its XML source generated.
+
+=head1 EXAMPLES
+
+=head2 Text node and attributes
+
+If a element has both of a text node and attributes
+or both of a text node and other child nodes,
+text node's value is moved to a special node named "#text".
+
+    var xotree = new XML.ObjTree();
+    var xmlsrc = '<span class="author">Kawasaki Yusuke</span>';
+    var tree = xotree.parseXML( xmlsrc );
+    var class = tree.span["-class"];        # attribute
+    var name  = tree.span["#text"];         # text node
+
+=head2 parseHTTP() method with HTTP-GET and sync-mode
+
+HTTP/Request.js or prototype.js must be loaded before calling this method.
+
+    var xotree = new XML.ObjTree();
+    var url = "http://example.com/index.html";
+    var tree = xotree.parseHTTP( url );
+    xotree.attr_prefix = '@';                   // E4X-style
+    alert( tree.html["@lang"] );
+
+This code shows C<lang=""> attribute from a X-HTML source code.
+
+=head2 parseHTTP() method with HTTP-POST and async-mode
+
+Third argument is a callback function which is called on onComplete.
+
+    var xotree = new XML.ObjTree();
+    var url = "http://example.com/mt-tb.cgi";
+    var opts = {
+        postBody:   "title=...&excerpt=...&url=...&blog_name=..."
+    };
+    var func = function ( tree ) {
+        alert( tree.response.error );
+    };
+    xotree.parseHTTP( url, opts, func );
+
+This code send a trackback ping and shows its response code.
+
+=head2 Simple RSS reader
+
+This is a RSS reader which loads RDF file and displays all items.
+
+    var xotree = new XML.ObjTree();
+    xotree.force_array = [ "rdf:li", "item" ];
+    var url = "http://example.com/news-rdf.xml";
+    var func = function( tree ) {
+        var elem = document.getElementById("rss_here");
+        for( var i=0; i<tree["rdf:RDF"].item.length; i++ ) {
+            var divtag = document.createElement( "div" );
+            var atag = document.createElement( "a" );
+            atag.href = tree["rdf:RDF"].item[i].link;
+            var title = tree["rdf:RDF"].item[i].title;
+            var tnode = document.createTextNode( title );
+            atag.appendChild( tnode );
+            divtag.appendChild( atag );
+            elem.appendChild( divtag );
+        }
+    };
+    xotree.parseHTTP( url, {}, func );
+
+=head2  XML-RPC using writeXML, prototype.js and parseDOM
+
+If you wish to use prototype.js's Ajax.Request class by yourself:
+
+    var xotree = new XML.ObjTree();
+    var reqtree = {
+        methodCall: {
+            methodName: "weblogUpdates.ping",
+            params: {
+                param: [
+                    { value: "Kawa.net xp top page" },  // 1st param
+                    { value: "http://www.kawa.net/" }   // 2nd param
+                ]
+            }
+        }
+    };
+    var reqxml = xotree.writeXML( reqtree );       // JS-Object to XML code
+    var url = "http://example.com/xmlrpc";
+    var func = function( req ) {
+        var resdom = req.responseXML.documentElement;
+        xotree.force_array = [ "member" ];
+        var restree = xotree.parseDOM( resdom );   // XML-DOM to JS-Object
+        alert( restree.methodResponse.params.param.value.struct.member[0].value.string );
+    };
+    var opt = {
+        method:         "post",
+        postBody:       reqxml,
+        asynchronous:   true,
+        onComplete:     func
+    };
+    new Ajax.Request( url, opt );
+
+=head1 AUTHOR
+
+Yusuke Kawasaki http://www.kawa.net/
+
+=head1 COPYRIGHT AND LICENSE
+
+Copyright (c) 2005-2006 Yusuke Kawasaki. All rights reserved.
+This program is free software; you can redistribute it and/or
+modify it under the Artistic license. Or whatever license I choose,
+which I will do instead of keeping this documentation like it is.
+
+=cut
+// ========================================================================
+*/

public/libs/jquery.easyui.extension.js

+/*
+  说明：扩展EasyUI的验证规则
+*/
+$.extend($.fn.validatebox.defaults.rules, {
+    //验证身份证
+    idcard: {
+        validator: function(value) {
+            return /^\d{15}(\d{2}[A-Za-z0-9])?$/i.test(value);
+        },
+        message: '身份证号码格式不正确'
+    },
+    //最小长度
+    minLength: {
+        validator: function(value, param) {
+            return value.length >= param[0];
+        },
+        message: '请输入至少{0}个字符.'
+    },
+    maxLength: {
+        validator: function(value, param) {
+            return value.length <= param[0];
+        },
+        message: '最多只能输入{0}个字符'
+    },
+    phone: { // 验证电话号码 
+        validator: function(value) {
+            return /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/i.test(value);
+        },
+        message: '格式不正确,请使用下面格式:020-88888888'
+    },
+    mobile: { // 验证手机号码 
+        validator: function(value) {
+            return /^(13|15|18)\d{9}$/i.test(value);
+        },
+        message: '手机号码格式不正确'
+    },
+    currency: { // 验证货币 
+        validator: function(value) {
+            return /^\d+(\.\d+)?$/i.test(value);
+        },
+        message: '货币格式不正确'
+    },
+    intOrFloat: { // 验证整数或小数 
+        validator: function(value) {
+            return /^\d+(\.\d+)?$/i.test(value);
+        },
+        message: '请输入数字，并确保格式正确'
+    },
+    integer: { // 验证整数 
+        validator: function(value) {
+            return /^[+]?[1-9]+\d*$/i.test(value);
+        },
+        message: '请输入整数'
+    },
+    age: { // 验证年龄
+        validator: function(value) {
+            return /^(?:[1-9][0-9]?|1[01][0-9]|120)$/i.test(value);
+        },
+        message: '年龄必须是0到120之间的整数'
+    },
+    chinese: { // 验证中文 
+        validator: function(value) {
+            return /^[\Α-\￥]+$/i.test(value);
+        },
+        message: '请输入中文'
+    },
+    english: { // 验证英语 
+        validator: function(value) {
+            return /^[A-Za-z]+$/i.test(value);
+        },
+        message: '请输入英文'
+    },
+    username: { // 验证用户名 
+        validator: function(value) {
+            return /^[a-zA-Z][a-zA-Z0-9_]{5,15}$/i.test(value);
+        },
+        message: '用户名不合法（字母开头，允许6-16字节，允许字母数字下划线）'
+    },
+    faxno: { // 验证传真 
+        validator: function(value) {
+            //            return /^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/i.test(value); 
+            return /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/i.test(value);
+        },
+        message: '传真号码不正确'
+    },
+    zip: { // 验证邮政编码 
+        validator: function(value) {
+            return /^[1-9]\d{5}$/i.test(value);
+        },
+        message: '邮政编码格式不正确'
+    },
+    ip: { // 验证IP地址 
+        validator: function(value) {
+            return /^(?:(?:25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9]?[0-9])\.){3}(?:25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9]?[0-9])$/.test(value);
+        },
+        message: 'IP地址格式不正确'
+    },
+    mac: {
+        validator: function(value) {
+            return /^([0-9a-fA-F]{2}-?){6}$/.test(value);
+        },
+        message: 'MAC地址不正确'
+    },
+    name: { // 验证姓名，可以是中文或英文 
+        validator: function(value) {
+            return /^[\Α-\￥]+$/i.test(value) | /^\w+[\w\s]+\w+$/i.test(value);
+        },
+        message: '请输入姓名'
+    },
+    date: { // 验证姓名，可以是中文或英文 
+        validator: function(value) {
+            //格式yyyy-MM-dd或yyyy-M-d
+            return /^(?:(?!0000)[0-9]{4}([-]?)(?:(?:0?[1-9]|1[0-2])\1(?:0?[1-9]|1[0-9]|2[0-8])|(?:0?[13-9]|1[0-2])\1(?:29|30)|(?:0?[13578]|1[02])\1(?:31))|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)([-]?)0?2\2(?:29))$/i.test(value);
+        },
+        message: '日期格式不正确'
+    },
+    equals: {
+        validator: function(value, param) {
+            if ($("#" + param[0]).val() != "" && value != "") {
+                return $("#" + param[0]).val() == value;
+            } else {
+                return true;
+            }
+        },
+        message: '两次输入不匹配'
+    },
+    regex: {
+        validator: function(value, param) {
+            var regex = new RegExp(param[0]);
+            return regex.test(value);
+        },
+        message: "格式不合法"
+    },
+    longitude: {
+        validator: function(value, param) {
+            var regex = /^[\-\+]?(0?\d{1,2}(\.\d{1,6})?|1[0-7]?\d{1}(\.\d{1,6})?|180(\.0{1,6})?)$/;
+            return regex.test(value);
+        },
+        message: "经度格式不合法"
+    },
+    latitude: {
+        validator: function(value, param) {
+            var regex = /^[\-\+]?([0-8]?\d{1}(\.\d{1,6})?|90(\.0{1,6})?)$/;
+            return regex.test(value);
+        },
+        message: "纬度格式不合法"
+    },
+    //不能为空，参数为不能取的值的数组 ["","-1","全部"]
+    notEmpty: {
+        validator: function(value, param) {
+            var isValidate = true;
+            for (var i = 0; i < param.length; i++) {
+                if (value == param[i]) {
+                    return false;
+                }
+            }
+            return true;
+        },
+        message: "不能为空"
+    },
+    // 数值范围验证
+    range: {
+        validator: function(value, param) {
+            return value >= param[0] && value <= param[1];
+        },
+        message: "值必须在{0}与{1}之间"
+    }
+});
+
+//扩展Tab组件，添加遮罩
+(function() {
+    $.extend($.fn.tabs.methods, {
+        //显示遮罩
+        loading: function(jq, msg) {
+            return jq.each(function() {
+                var panel = $(this).tabs("getSelected");
+                if (msg == undefined) {
+                    msg = "正在加载数据，请稍候...";
+                }
+                $("<div class=\"datagrid-mask\"></div>").css({ display: "block", width: panel.width(), height: panel.height() + 30 }).appendTo(panel);
+                $("<div class=\"datagrid-mask-msg\"></div>").html(msg).appendTo(panel).css({ display: "block", left: (panel.width() - $("div.datagrid-mask-msg", panel).outerWidth()) / 2, top: (panel.height() - $("div.datagrid-mask-msg", panel).outerHeight()) / 2 });
+            });
+        },
+        //隐藏遮罩
+        loaded: function(jq) {
+            return jq.each(function() {
+                var panel = $(this).tabs("getSelected");
+                panel.find("div.datagrid-mask-msg").remove();
+                panel.find("div.datagrid-mask").remove();
+            });
+        }
+    });
+})(jQuery);
+
+// 扩展Datagrid 使用本地分页功能
+(function($) {
+    function pagerFilter(data) {
+        if ($.isArray(data)) { // is array
+            data = {
+                total: data.length,
+                rows: data
+            }
+        }
+        var target = this;
+        var dg = $(target);
+        var state = dg.data('datagrid');
+        var opts = dg.datagrid('options');
+        if (!state.allRows) {
+            state.allRows = (data.rows);
+        }
+        if (!opts.remoteSort && opts.sortName) {
+            var names = opts.sortName.split(',');
+            var orders = opts.sortOrder.split(',');
+            state.allRows.sort(function(r1, r2) {
+                var r = 0;
+                for (var i = 0; i < names.length; i++) {
+                    var sn = names[i];
+                    var so = orders[i];
+                    var col = $(target).datagrid('getColumnOption', sn);
+                    var sortFunc = col.sorter || function(a, b) {
+                        return a == b ? 0 : (a > b ? 1 : -1);
+                    };
+                    r = sortFunc(r1[sn], r2[sn]) * (so == 'asc' ? 1 : -1);
+                    if (r != 0) {
+                        return r;
+                    }
+                }
+                return r;
+            });
+        }
+        var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);
+        var end = start + parseInt(opts.pageSize);
+        data.rows = state.allRows.slice(start, end);
+        return data;
+    }
+
+    var loadDataMethod = $.fn.datagrid.methods.loadData;
+    var deleteRowMethod = $.fn.datagrid.methods.deleteRow;
+    $.extend($.fn.datagrid.methods, {
+        clientPaging: function(jq) {
+            return jq.each(function() {
+                var dg = $(this);
+                var state = dg.data('datagrid');
+                var opts = state.options;
+                opts.loadFilter = pagerFilter;
+                var onBeforeLoad = opts.onBeforeLoad;
+                opts.onBeforeLoad = function(param) {
+                    state.allRows = null;
+                    return onBeforeLoad.call(this, param);
+                }
+                var pager = dg.datagrid('getPager');
+                pager.pagination({
+                    onSelectPage: function(pageNum, pageSize) {
+                        opts.pageNumber = pageNum;
+                        opts.pageSize = pageSize;
+                        pager.pagination('refresh', {
+                            pageNumber: pageNum,
+                            pageSize: pageSize
+                        });
+                        dg.datagrid('loadData', state.allRows);
+                    }
+                });
+                $(this).datagrid('loadData', state.data);
+                if (opts.url) {
+                    $(this).datagrid('reload');
+                }
+            });
+        },
+        loadData: function(jq, data) {
+            jq.each(function() {
+                $(this).data('datagrid').allRows = null;
+            });
+            return loadDataMethod.call($.fn.datagrid.methods, jq, data);
+        },
+        deleteRow: function(jq, index) {
+            return jq.each(function() {
+                var row = $(this).datagrid('getRows')[index];
+                deleteRowMethod.call($.fn.datagrid.methods, $(this), index);
+                var state = $(this).data('datagrid');
+                if (state.options.loadFilter == pagerFilter) {
+                    for (var i = 0; i < state.allRows.length; i++) {
+                        if (state.allRows[i] == row) {
+                            state.allRows.splice(i, 1);
+                            break;
+                        }
+                    }
+                    $(this).datagrid('loadData', state.allRows);
+                }
+            });
+        },
+        getAllRows: function(jq) {
+            return jq.data('datagrid').allRows;
+        }
+    })
+})(jQuery);
+// 扩展编辑器
+$.extend($.fn.datagrid.defaults.editors, {
+    my97datepicker: {
+        init: function(container, options) {
+            var datepicker = $("<input class='Wdate' onclick='showDatePicker()' />").appendTo(container);
+            return input;
+
+            function showDatePicker() {
+                WdatePicker(options);
+            }
+        },
+        getValue: function(target) {
+            return $(target).val();
+        },
+        setValue: function(target, value) {
+            $(target).val(value);
+        },
+        resize: function(target, width) {
+            var input = $(target);
+            if ($.boxModel == true) {
+                input.width(width - (input.outerWidth() - input.width()));
+            } else {
+                input.width(width);
+            }
+        }
+    }
+});
\ No newline at end of file

public/libs/my97/WdatePicker.js

+/*
+ * My97 DatePicker 4.8 Beta4
+ * License: http://www.my97.net/dp/license.asp
+ */
+var $dp, WdatePicker;
+(function () {
+    var $ = {
+        $langList: [
+            {name: "en", charset: "UTF-8"},
+            {name: "zh-cn", charset: "gb2312"},
+            {name: "zh-tw", charset: "GBK"}],
+        $skinList: [
+            {name: "default", charset: "gb2312"},
+            {name: "whyGreen", charset: "gb2312"},
+            {name: "blue", charset: "gb2312"},
+            {name: "green", charset: "gb2312"},
+            {name: "simple", charset: "gb2312"},
+            {name: "ext", charset: "gb2312"},
+            {name: "blueFresh", charset: "gb2312"},
+            {name: "twoer", charset: "gb2312"},
+            {name: "YcloudRed", charset: "gb2312"}],
+        $wdate: true,
+        $crossFrame: true,
+        $preLoad: false,
+        $dpPath: "",
+        doubleCalendar: false,
+        enableKeyboard: true,
+        enableInputMask: true,
+        autoUpdateOnChanged: null,
+        weekMethod: "ISO8601",
+        position: {},
+        lang: "auto",
+        skin: "simple",
+        dateFmt: "yyyy-MM-dd",
+        realDateFmt: "yyyy-MM-dd",
+        realTimeFmt: "HH:mm:ss",
+        realFullFmt: "%Date %Time",
+        minDate: "1900-01-01 00:00:00",
+        maxDate: "2099-12-31 23:59:59",
+        startDate: "",
+        alwaysUseStartDate: false,
+        yearOffset: 1911,
+        firstDayOfWeek: 0,
+        isShowWeek: false,
+        highLineWeekDay: true,
+        isShowClear: true,
+        isShowToday: true,
+        isShowOK: true,
+        isShowOthers: true,
+        readOnly: false,
+        errDealMode: 0,
+        autoPickDate: null,
+        qsEnabled: true,
+        autoShowQS: false,
+        hmsMenuCfg: {H: [1, 6], m: [5, 6], s: [15, 4]},
+        opposite: false,
+
+        specialDates: null,
+        specialDays: null,
+        disabledDates: null,
+        disabledDays: null,
+        onpicking: null,
+        onpicked: null,
+        onclearing: null,
+        oncleared: null,
+        ychanging: null,
+        ychanged: null,
+        Mchanging: null,
+        Mchanged: null,
+        dchanging: null,
+        dchanged: null,
+        Hchanging: null,
+        Hchanged: null,
+        mchanging: null,
+        mchanged: null,
+        schanging: null,
+        schanged: null,
+        eCont: null,
+        vel: null,
+        elProp: "",
+        errMsg: "",
+        quickSel: [],
+        has: {},
+        getRealLang: function () {
+            var _ = $.$langList;
+            for (var A = 0; A < _.length; A++)if (_[A].name == this.lang) return _[A];
+            return _[0]
+        }
+    };
+    WdatePicker = U;
+    var Y = window, T = {innerHTML: ""}, N = "document", H = "documentElement", C = "getElementsByTagName", V, A, S, G, c, X = navigator.appName;
+    if (X == "Microsoft Internet Explorer")
+        S = true;
+    else if (X == "Opera") c = true;
+        else G = true;
+    A = $.$dpPath || J();
+    if ($.$wdate) K(A + "skin/WdatePicker.css");
+    V = Y;
+    if ($.$crossFrame) {
+        try {
+            while (V.parent != V && V.parent[N][C]("frameset").length == 0) V = V.parent
+        } catch (O) {
+        }
+    }
+    if (!V.$dp) V.$dp = {ff: G, ie: S, opera: c, status: 0, defMinDate: $.minDate, defMaxDate: $.maxDate};
+    B();
+    if ($.$preLoad && $dp.status == 0) E(Y, "onload", function () {
+        U(null, true)
+    });
+    if (!Y[N].docMD) {
+        E(Y[N], "onmousedown", D, true);
+        Y[N].docMD = true
+    }
+    if (!V[N].docMD) {
+        E(V[N], "onmousedown", D, true);
+        V[N].docMD = true
+    }
+    E(Y, "onunload", function () {
+        if ($dp.dd) P($dp.dd, "none")
+    });
+    function B() {
+        try {
+            V[N], V.$dp = V.$dp || {}
+        } catch ($) {
+            V = Y;
+            $dp = $dp || {}
+        }
+        var A = {
+            win: Y, $: function ($) {
+                return (typeof $ == "string") ? Y[N].getElementById($) : $
+            }, $D: function ($, _) {
+                return this.$DV(this.$($).value, _)
+            }, $DV: function (_, $) {
+                if (_ != "") {
+                    this.dt = $dp.cal.splitDate(_, $dp.cal.dateFmt);
+                    if ($) for (var B in $) if (this.dt[B] === undefined) this.errMsg = "invalid property:" + B; else {
+                        this.dt[B] += $[B];
+                        if (B == "M") {
+                            var C = $["M"] > 0 ? 1 : 0, A = new Date(this.dt["y"], this.dt["M"], 0).getDate();
+                            this.dt["d"] = Math.min(A + C, this.dt["d"])
+                        }
+                    }
+                    if (this.dt.refresh()) return this.dt
+                }
+                return ""
+            }, show: function () {
+                var A = V[N].getElementsByTagName("div"), $ = 100000;
+                for (var B = 0; B < A.length; B++) {
+                    var _ = parseInt(A[B].style.zIndex);
+                    if (_ > $) $ = _
+                }
+                this.dd.style.zIndex = $ + 2;
+                P(this.dd, "block");
+                P(this.dd.firstChild, "")
+            }, unbind: function ($) {
+                $ = this.$($);
+                if ($.initcfg) {
+                    L($, "onclick", function () {
+                        U($.initcfg)
+                    });
+                    L($, "onfocus", function () {
+                        U($.initcfg)
+                    })
+                }
+            }, hide: function () {
+                P(this.dd, "none")
+            }, attachEvent: E
+        };
+        for (var _ in A) V.$dp[_] = A[_];
+        $dp = V.$dp
+    }
+
+    function E(B, _, A, $) {
+        if (B.addEventListener) {
+            var C = _.replace(/on/, "");
+            A._ieEmuEventHandler = function ($) {
+                return A($)
+            };
+            B.addEventListener(C, A._ieEmuEventHandler, $)
+        } else B.attachEvent(_, A)
+    }
+
+    function L(A, $, _) {
+        if (A.removeEventListener) {
+            var B = $.replace(/on/, "");
+            _._ieEmuEventHandler = function ($) {
+                return _($)
+            };
+            A.removeEventListener(B, _._ieEmuEventHandler, false)
+        } else A.detachEvent($, _)
+    }
+
+    function a(_, $, A) {
+        if (typeof _ != typeof $) return false;
+        if (typeof _ == "object") {
+            if (!A) for (var B in _) {
+                if (typeof $[B] == "undefined") return false;
+                if (!a(_[B], $[B], true)) return false
+            }
+            return true
+        } else if (typeof _ == "function" && typeof $ == "function") return _.toString() == $.toString(); else return _ == $
+    }
+
+    function J() {
+        var _, A, $ = Y[N][C]("script");
+        for (var B = 0; B < $.length; B++) {
+            _ = $[B].getAttribute("src") || "";
+            _ = _.substr(0, _.toLowerCase().indexOf("wdatepicker.js"));
+            A = _.lastIndexOf("/");
+            if (A > 0) _ = _.substring(0, A + 1);
+            if (_) break
+        }
+        return _
+    }
+
+    function K(A, $, B) {
+        var D = Y[N][C]("HEAD").item(0), _ = Y[N].createElement("link");
+        if (D) {
+            _.href = A;
+            _.rel = "stylesheet";
+            _.type = "text/css";
+            if ($) _.title = $;
+            if (B) _.charset = B;
+            D.appendChild(_)
+        }
+    }
+
+    function F($) {
+        $ = $ || V;
+        var A = 0, _ = 0;
+        while ($ != V) {
+            var D = $.parent[N][C]("iframe");
+            for (var F = 0; F < D.length; F++) {
+                try {
+                    if (D[F].contentWindow == $) {
+                        var E = W(D[F]);
+                        A += E.left;
+                        _ += E.top;
+                        break
+                    }
+                } catch (B) {
+                }
+            }
+            $ = $.parent
+        }
+        return {"leftM": A, "topM": _}
+    }
+
+    function W(G, F) {
+        if (G.getBoundingClientRect) return G.getBoundingClientRect(); else {
+            var A = {
+                ROOT_TAG: /^body|html$/i,
+                OP_SCROLL: /^(?:inline|table-row)$/i
+            }, E = false, I = null, _ = G.offsetTop, H = G.offsetLeft, D = G.offsetWidth, B = G.offsetHeight, C = G.offsetParent;
+            if (C != G) while (C) {
+                H += C.offsetLeft;
+                _ += C.offsetTop;
+                if (R(C, "position").toLowerCase() == "fixed") E = true; else if (C.tagName.toLowerCase() == "body") I = C.ownerDocument.defaultView;
+                C = C.offsetParent
+            }
+            C = G.parentNode;
+            while (C.tagName && !A.ROOT_TAG.test(C.tagName)) {
+                if (C.scrollTop || C.scrollLeft) if (!A.OP_SCROLL.test(P(C))) if (!c || C.style.overflow !== "visible") {
+                    H -= C.scrollLeft;
+                    _ -= C.scrollTop
+                }
+                C = C.parentNode
+            }
+            if (!E) {
+                var $ = b(I);
+                H -= $.left;
+                _ -= $.top
+            }
+            D += H;
+            B += _;
+            return {"left": H, "top": _, "right": D, "bottom": B}
+        }
+    }
+
+    function M($) {
+        $ = $ || V;
+        var B = $[N], A = ($.innerWidth) ? $.innerWidth : (B[H] && B[H].clientWidth) ? B[H].clientWidth : B.body.offsetWidth, _ = ($.innerHeight) ? $.innerHeight : (B[H] && B[H].clientHeight) ? B[H].clientHeight : B.body.offsetHeight;
+        return {"width": A, "height": _}
+    }
+
+    function b($) {
+        $ = $ || V;
+        var B = $[N], A = B[H], _ = B.body;
+        B = (A && A.scrollTop != null && (A.scrollTop > _.scrollTop || A.scrollLeft > _.scrollLeft)) ? A : _;
+        return {"top": B.scrollTop, "left": B.scrollLeft}
+    }
+
+    function D($) {
+        try {
+            var _ = $ ? ($.srcElement || $.target) : null;
+            if ($dp.cal && !$dp.eCont && $dp.dd && _ != $dp.el && $dp.dd.style.display == "block") $dp.cal.close()
+        } catch ($) {
+        }
+    }
+
+    function Z() {
+        $dp.status = 2
+    }
+
+    var Q, _;
+
+    function U(K, C) {
+        if (!$dp) return;
+        B();
+        var L = {};
+        for (var H in K) L[H] = K[H];
+        for (H in $) if (H.substring(0, 1) != "$" && L[H] === undefined) L[H] = $[H];
+        if (C) {
+            if (!J()) {
+                _ = _ || setInterval(function () {
+                        if (V[N].readyState == "complete") clearInterval(_);
+                        U(null, true)
+                    }, 50);
+                return
+            }
+            if ($dp.status == 0) {
+                $dp.status = 1;
+                L.el = T;
+                I(L, true)
+            } else return
+        } else if (L.eCont) {
+            L.eCont = $dp.$(L.eCont);
+            L.el = T;
+            L.autoPickDate = true;
+            L.qsEnabled = false;
+            I(L)
+        } else {
+            if ($.$preLoad && $dp.status != 2) return;
+            var F = D();
+            if (Y.event != null && Y.event === F || F) {
+                L.srcEl = F.srcElement || F.target;
+                F.cancelBubble = true
+            }
+            L.el = L.el = $dp.$(L.el || L.srcEl);
+            if (!L.el || L.el["My97Mark"] === true || L.el.disabled || ($dp.dd && P($dp.dd) != "none" && $dp.dd.style.left != "-970px")) {
+                try {
+                    if (L.el["My97Mark"]) L.el["My97Mark"] = false
+                } catch (A) {
+                }
+                return
+            }
+            if (F && L.el.nodeType == 1 && !a(L.el.initcfg, K)) {
+                $dp.unbind(L.el);
+                E(L.el, F.type == "focus" ? "onclick" : "onfocus", function () {
+                    U(K)
+                });
+                L.el.initcfg = K
+            }
+            I(L)
+        }
+        function J() {
+            if (S && V != Y && V[N].readyState != "complete") return false;
+            return true
+        }
+
+        function D() {
+            if (G) {
+                func = D.caller;
+                while (func != null) {
+                    var $ = func.arguments[0];
+                    if ($ && ($ + "").indexOf("Event") >= 0) return $;
+                    func = func.caller
+                }
+                return null
+            }
+            return event;
+        }
+    }
+
+    function R(_, $) {
+        return _.currentStyle ? _.currentStyle[$] : document.defaultView.getComputedStyle(_, false)[$]
+    }
+
+    function P(_, $) {
+        if (_) if ($ != null) _.style.display = $; else return R(_, "display")
+    }
+
+    function I(G, _) {
+        var D = G.el ? G.el.nodeName : "INPUT";
+        if (_ || G.eCont || new RegExp(/input|textarea|div|span|p|a/ig).test(D)) G.elProp = D == "INPUT" ? "value" : "innerHTML"; else return;
+        if (G.lang == "auto") G.lang = S ? navigator.browserLanguage.toLowerCase() : navigator.language.toLowerCase();
+        if (!G.eCont) for (var C in G) $dp[C] = G[C];
+        if (!$dp.dd || G.eCont || ($dp.dd && (G.getRealLang().name != $dp.dd.lang || G.skin != $dp.dd.skin))) {
+            if (G.eCont) E(G.eCont, G); else {
+                $dp.dd = V[N].createElement("DIV");
+                $dp.dd.style.cssText = "position:absolute";
+                V[N].body.appendChild($dp.dd);
+                E($dp.dd, G);
+                if (_) $dp.dd.style.left = $dp.dd.style.top = "-970px"; else {
+                    $dp.show();
+                    B($dp)
+                }
+            }
+        } else if ($dp.cal) {
+            $dp.show();
+            $dp.cal.init();
+            if (!$dp.eCont) B($dp)
+        }
+        function E(K, J) {
+            var I = V[N].domain, F = false, G = "<iframe hideFocus=true width=9 height=7 frameborder=0 border=0 scrolling=no src=\"about:blank\"></iframe>";
+            K.innerHTML = G;
+            var _ = $.$langList, D = $.$skinList, H;
+            try {
+                H = K.lastChild.contentWindow[N]
+            } catch (E) {
+                F = true;
+                K.removeChild(K.lastChild);
+                var L = V[N].createElement("iframe");
+                L.hideFocus = true;
+                L.frameBorder = 0;
+                L.scrolling = "no";
+                L.src = "javascript:(function(){var d=document;d.open();d.domain='" + I + "';})()";
+                K.appendChild(L);
+                setTimeout(function () {
+                    H = K.lastChild.contentWindow[N];
+                    C()
+                }, 97);
+                return
+            }
+            C();
+            function C() {
+                var _ = J.getRealLang();
+                K.lang = _.name;
+                K.skin = J.skin;
+                var $ = ["<head><script>", "", "var doc=document, $d, $dp, $cfg=doc.cfg, $pdp = parent.$dp, $dt, $tdt, $sdt, $lastInput, $IE=$pdp.ie, $FF = $pdp.ff,$OPERA=$pdp.opera, $ny, $cMark = false;", "if($cfg.eCont){$dp = {};for(var p in $pdp)$dp[p]=$pdp[p];}else{$dp=$pdp;};for(var p in $cfg){$dp[p]=$cfg[p];}", "doc.oncontextmenu=function(){try{$c._fillQS(!$dp.has.d,1);showB($d.qsDivSel);}catch(e){};return false;};", "</script><script src=", A, "lang/", _.name, ".js charset=", _.charset, "></script>"];
+                if (F) $[1] = "document.domain=\"" + I + "\";";
+                for (var C = 0; C < D.length; C++)if (D[C].name == J.skin) $.push("<link rel=\"stylesheet\" type=\"text/css\" href=\"" + A + "skin/" + D[C].name + "/datepicker.css\" charset=\"" + D[C].charset + "\"/>");
+                $.push("<script src=\"" + A + "calendar.js\"></script>");
+                $.push("</head><body leftmargin=\"0\" topmargin=\"0\" tabindex=0></body></html>");
+                $.push("<script>var t;t=t||setInterval(function(){if(doc.ready){new My97DP();$cfg.onload();$c.autoSize();$cfg.setPos($dp);clearInterval(t);}},20);</script>");
+                J.setPos = B;
+                J.onload = Z;
+                H.write("<html>");
+                H.cfg = J;
+                H.write($.join(""));
+                H.close()
+            }
+        }
+
+        function B(J) {
+            var H = J.position.left, C = J.position.top, D = J.el;
+            if (D == T) return;
+            if (D != J.srcEl && (P(D) == "none" || D.type == "hidden")) D = J.srcEl;
+            var I = W(D), $ = F(Y), E = M(V), B = b(V), G = $dp.dd.offsetHeight, A = $dp.dd.offsetWidth;
+            if (isNaN(C)) C = 0;
+            if (($.topM + I.bottom + G > E.height) && ($.topM + I.top - G > 0)) C += B.top + $.topM + I.top - G - 2; else {
+                C += B.top + $.topM + I.bottom;
+                var _ = C - B.top + G - E.height;
+                if (_ > 0) C -= _
+            }
+            if (isNaN(H)) H = 0;
+            H += B.left + Math.min($.leftM + I.left, E.width - A - 5) - (S ? 2 : 0);
+            J.dd.style.top = C + "px";
+            J.dd.style.left = H + "px"
+        }
+    }
+})()
\ No newline at end of file

public/libs/my97/calendar.js

+/*
+ * My97 DatePicker 4.8 Beta4
+ * License: http://www.my97.net/dp/license.asp
+ */
+eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)d[e(c)]=k[c]||e(c);k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1;};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p;}('l($4o.44){$f={};1b(q p 4r $2s)l(6p $2s[p]=="6o"){$f[p]={};1b(q 4G 4r $2s[p])$f[p][4G]=$2s[p][4G]}t $f[p]=$2s[p]}t $f=$2s;1b(p 4r $4o)$f[p]=$4o[p];q $c;l($69){6x.3J.7l("6U",n($){l(!$)h.2m();u $});6x.3J.7k("5I",n(){q $=h.5B;36($.5t!=1)$=$.7b;u $})}n 5C(){$c=h;h.3n=[];$d=1L.7i("z");$d.1e="4P";$d.1M="<z 1G=7s><z Y=\\"3W 7p\\"><a></a></z><z Y=\\"3W 7r\\"><a></a></z><z 1d=\\"3q:2E\\"><z Y=\\"2T 7q\\"></z><1z Y=47></z><z 1d=\\"3q:2E\\"><z Y=\\"2T 76\\"></z><1z Y=47></z><z Y=\\"3W 78\\"><a></a></z><z Y=\\"3W 7x\\"><a></a></z><z 1d=\\"3q:62\\"></z></z><z 1d=\\"80:7W;7S:6q\\"></z><z></z><z 1G=7V><z Y=\\"2T 7U\\"></z><z Y=\\"2T 81\\"></z><z Y=\\"2T 87\\"></z><1x 2q=0 2o=0 2C=0><1j><19 8a=2><4w 1G=89></4w>&42;<1z Y=83 4s=2><1z 1i=\\":\\" Y=6K 6t><1z Y=6u 4s=2><1z 1i=\\":\\" Y=6K 6t><1z Y=6u 4s=2></19><19><1S 1G=7R></1S></19></1j><1j><19><1S 1G=7E></1S></19></1j></1x></z><z 1G=7F></z><z 1G=7C><1z Y=4v 1G=7y 3k=1S><1z Y=4v 1G=7N 3k=1S><1z Y=4v 1G=7K 3k=1S></z>";71($d,n(){3x()});A();h.5D();$f.1X=[1L,$d.1P,$d.1y,$d.2w,$d.3a,$d.2r,$d.2V,$d.2j,$d.1U];1b(q B=0;B<$f.1X.x;B++){q b=$f.1X[B];b.3e=B==$f.1X.x-1?$f.1X[1]:$f.1X[B+1];$f.3A(b,"4k",5a)}$();55("y,M,H,m,s");$d.72.1s=n(){5g(1)};$d.75.1s=n(){5g(-1)};$d.4y.1s=n(){l($d.1H.1d.2a!="6G"){$c.4Q();3G($d.1H)}t 1o($d.1H)};1L.6R.4O($d);n A(){q b=$("a");1q=$("z"),1J=$("1z"),4t=$("1S"),5G=$("4w");$d.3M=b[0];$d.3K=b[1];$d.3L=b[3];$d.3N=b[2];$d.4b=1q[9];$d.1P=1J[0];$d.1y=1J[1];$d.4A=1q[0];$d.4f=1q[4];$d.2R=1q[6];$d.1H=1q[10];$d.2Z=1q[11];$d.34=1q[12];$d.5N=1q[13];$d.6P=1q[14];$d.73=1q[15];$d.4y=1q[16];$d.4e=1q[17];$d.2w=1J[2];$d.3a=1J[4];$d.2r=1J[6];$d.2V=1J[7];$d.2j=1J[8];$d.1U=1J[9];$d.72=4t[0];$d.75=4t[1];$d.5L=5G[0];n $($){u $d.74($)}}n $(){$d.3M.1s=n(){$1O=$1O<=0?$1O-1:-1;l($1O%5==0){$d.1y.22();u}$d.1y.1i=$o.y-1;$d.1y.2x()};$d.3K.1s=n(){$o.1V("M",-1);$d.1P.2x()};$d.3L.1s=n(){$o.1V("M",1);$d.1P.2x()};$d.3N.1s=n(){$1O=$1O>=0?$1O+1:1;l($1O%5==0){$d.1y.22();u}$d.1y.1i=$o.y+1;$d.1y.2x()}}}5C.3J={5D:n(){$1O=0;$f.5b=h;l($f.3S&&$f.Z.3S!=1h){$f.Z.3S=1c;$f.Z.4M()}h.4q();$o=h.4D=1a 1D();$1C=1a 1D();$1v=h.2B=1a 1D();$f.2N=0;h.1B=h.2P($f.1B);h.2X=$f.2X==1h?($f.18.2g&&$f.18.2g?1p:1c):$f.2X;$f.3y=$f.3y==1h?($f.4z&&$f.18.d?1p:1c):$f.3y;h.4m=h.35("7L");h.6m=h.35("7I");h.6d=h.35("7J");h.5s=h.35("7M");h.20=h.3I($f.20,$f.20!=$f.5J?$f.1T:$f.2F,$f.5J);h.1Z=h.3I($f.1Z,$f.1Z!=$f.5M?$f.1T:$f.2F,$f.5M);l(h.20.2z(h.1Z)>0)$f.4u=$1l.7Q;l(h.25()){h.5y();h.3j=$f.Z[$f.1E]}t h.3p(1p,2);3H($o);$d.5L.1M=$1l.7O;$d.2V.1i=$1l.7H;$d.2j.1i=$1l.7A;$d.1U.1i=$1l.7B;$d.1U.2e=!$c.1A($1v);h.6l();h.6V();l($f.4u)7z($f.4u);h.4B();l($f.Z.5t==1&&$f.Z["3V"]===4p){$f.3A($f.Z,"4k",5a);$f.3A($f.Z,"2x",n(){l($f&&$f.1K.1d.2a=="2u"){$c.3c();l(!$f.2N&&$f.5b.3j!=$f.Z[$f.1E]&&$f.Z.7G)5l($f.Z,"7D")}});$f.Z["3V"]=1p}$c.1k=$f.Z;3x()},5y:n(){q b=h.2S();l(b!=0){q $;l(b>0)$=h.1Z;t $=h.20;l($f.18.3Y){$o.y=$.y;$o.M=$.M;$o.d=$.d}l($f.18.2g){$o.H=$.H;$o.m=$.m;$o.s=$.s}}},3h:n(K,C,R,F,B,H,G,L,M){q $;l(K&&K.25)$=K;t{$=1a 1D();l(K!=""){C=C||$f.1B;q I,D,Q=0,P,A=/3i|2H|3l|y|2I|3o|3R|M|1K|d|%2l|53|H|4V|m|4U|s|3u|D|4T|W|w/g,b=C.2J(A);A.2t=0;l(M)P=K.4c(/\\W+/);t{q E=0,N="^";36((P=A.2U(C))!==1h){l(E>=0){D=C.1F(E,P.3Z);l(D&&"-/\\\\".1n(D)>=0)D="[\\\\-/]";N+=D}E=A.2t;2Y(P[0]){1f"3i":N+="(\\\\d{4})";1g;1f"2H":N+="(\\\\d{3})";1g;1f"2I":1f"3o":1f"3u":1f"D":N+="(\\\\D+)";1g;5v:N+="(\\\\d\\\\d?)";1g}}N+=".*$";P=1a 3v(N).2U(K);Q=1}l(P){1b(I=0;I<b.x;I++){q J=P[I+Q];l(J)2Y(b[I]){1f"2I":1f"3o":$.M=O(b[I],J);1g;1f"y":1f"3l":J=3z(J,0);l(J<50)J+=5z;t J+=84;$.y=J;1g;1f"2H":$.y=3z(J,0)+$f.5w;1g;5v:$[b[I].4X(-1)]=J;1g}}}t $.d=32}}$.6Y(R,F,B,H,G,L);u $;n O(A,$){q b=A=="2I"?$1l.5u:$1l.2k;1b(q B=0;B<12;B++)l(b[B].3C()==$.5O(0,b[B].x).3C())u B+1;u-1}},35:n(b){q B,$=$f[b],A="";l($&&$.x>0){1b(B=0;B<$.x;B++){A+=h.2P($[B]);l(B!=$.x-1)A+="|"}A=A?1a 3v("(?:"+A+")"):1h}t A=1h;u A},3d:n($){l($===4p)$=h.4F();l($f.Z[$f.1E]!=$)$f.Z[$f.1E]=$;h.4l()},4l:n($){q b=$f.$($f.86),$=3r($,h.4F($f.1T));l(b)b.1i=$;$f.Z["3E"]=$},2P:n(s){q 3T="3m",1r,2v,6n=/#?\\{(.*?)\\}/;s=s+"";1b(q i=0;i<3T.x;i++)s=s.1m("%"+3T.1Q(i),h.1W(3T.1Q(i),1h,$1C));l(s.1F(0,3)=="#F{"){s=s.1F(3,s.x-1);l(s.1n("u ")<0)s="u "+s;s=$f.51.4d("1a 88(\\""+s+"\\");");s=s()}36((1r=6n.2U(s))!=1h){1r.2t=1r.3Z+1r[1].x+1r[0].x-1r[1].x-1;2v=2n(4d(1r[1]));l(2v<0)2v="2f"+(-2v);s=s.1F(0,1r.3Z)+2v+s.1F(1r.2t+1)}u s},3I:n(A,B,b){q $;A=h.2P(A);l(!A||A=="")A=b;l(6p A=="6o")$=A;t{$=h.3h(A,B,1h,1h,1,0,0,0,1c);$.y=(""+$.y).1m(/^2f/,"-");$.M=(""+$.M).1m(/^2f/,"-");$.d=(""+$.d).1m(/^2f/,"-");$.H=(""+$.H).1m(/^2f/,"-");$.m=(""+$.m).1m(/^2f/,"-");$.s=(""+$.s).1m(/^2f/,"-");l(A.1n("%2l")>=0){A=A.1m(/%2l/g,"0");$.d=0;$.M=2n($.M)+1}$.1Y()}u $},25:n(){q A=$f.Z[$f.1E],$=h.1B,b=$f.18;l($f.7T||($f.6j!=""&&A=="")){A=h.2P($f.6j);$=$f.1T}$o.2h(h.3h(A,$));l(A!=""){q B=1;l(b.3Y&&!h.4n($o)){$o.y=$1C.y;$o.M=$1C.M;$o.d=$1C.d;B=0}l(b.2g&&!h.4h($o)){$o.H=$1C.H;$o.m=$1C.m;$o.s=$1C.s;B=0}u B&&h.1A($o)}l(!b.H)$o.H=0;l(!b.m)$o.m=0;l(!b.s)$o.s=0;u 1},4n:n($){l($.y!=1h)$=2W($.y,4)+"-"+$.M+"-"+$.d;u $.2J(/^((\\d{2}(([6i][7Z])|([5V][26]))[\\-\\/\\s]?((((0?[5S])|(1[5R]))[\\-\\/\\s]?((0?[1-9])|([1-2][0-9])|(3[5Z])))|(((0?[66])|(11))[\\-\\/\\s]?((0?[1-9])|([1-2][0-9])|(30)))|(0?2[\\-\\/\\s]?((0?[1-9])|([1-2][0-9])))))|(\\d{2}(([6i][7X])|([5V][7Y]))[\\-\\/\\s]?((((0?[5S])|(1[5R]))[\\-\\/\\s]?((0?[1-9])|([1-2][0-9])|(3[5Z])))|(((0?[66])|(11))[\\-\\/\\s]?((0?[1-9])|([1-2][0-9])|(30)))|(0?2[\\-\\/\\s]?((0?[1-9])|(1[0-9])|(2[0-8]))))))(\\s(((0?[0-9])|([1-2][0-3]))\\:([0-5]?[0-9])((\\s)|(\\:([0-5]?[0-9])))))?$/)},4h:n($){l($.H!=1h)$=$.H+":"+$.m+":"+$.s;u $.2J(/^([0-9]|([0-1][0-9])|([2][0-3])):([0-9]|([0-5][0-9])):([0-9]|([0-5][0-9]))$/)},2S:n($,A){$=$||$o;q b=$.2z(h.20,A);l(b>0){b=$.2z(h.1Z,A);l(b<0)b=0}u b},1A:n($,A,B){A=A||$f.18.43;q b=h.2S($,A);l(b==0){b=1;l(A=="d"&&B==1h)B=1I.5T((1a 1u($.y,$.M-1,$.d).1N()-$f.3U+7)%7);b=!h.5W(B)&&!h.5U($,A)}t b=0;u b},65:n(){q b=$f.Z,A=h,$=$f.Z[$f.1E];l($f.3O>=0&&$f.3O<=2&&$!=1h){l($!="")A.2B.2h(A.3h($,$f.1B));l($==""||(A.4n(A.2B)&&A.4h(A.2B)&&A.1A(A.2B))){l($!=""){A.4D.2h(A.2B);A.3d()}t A.4l("")}t u 1p}u 1c},3c:n($){3x();l(h.65()){h.3p(1c);$f.1o()}t{l($){2O($);h.3p(1p,2)}t h.3p(1p);$f.21()}},4a:n(){q E,C,D,K,A,H=1a 2A(),F=$1l.6e,G=$f.3U,I="",$="",b=1a 1D($o.y,$o.M,$o.d,2,0,0),J=b.y,B=b.M;A=1-1a 1u(J,B-1,1).1N()+G;l(A>1)A-=7;H.a("<1x Y=64 33=3s% 2C=0 2q=0 2o=0>");H.a("<1j Y=61 4R=5H>");l($f.63)H.a("<19>"+F[0]+"</19>");1b(E=0;E<7;E++)H.a("<19>"+F[(G+E)%7+1]+"</19>");H.a("</1j>");1b(E=1,C=A;E<7;E++){H.a("<1j>");1b(D=0;D<7;D++){b.25(J,B,C++);b.1Y();l(b.M==B){K=1c;l(b.2z($1v,"d")==0)I="7e";t l(b.2z($1C,"d")==0)I="7d";t I=($f.67&&(0==(G+D)%7||6==(G+D)%7)?"7a":"77");$=($f.67&&(0==(G+D)%7||6==(G+D)%7)?"7o":"7v")}t l($f.5A){K=1c;I="7t";$="7h"}t K=1p;l($f.63&&D==0&&(E<4||K))H.a("<19 Y=7f>"+4E(b,$f.3U==0?1:0)+"</19>");H.a("<19 ");l(K){l(h.1A(b,"d",D)){l(h.5r(1I.5T((1a 1u(b.y,b.M-1,b.d).1N()-$f.3U+7)%7))||h.6c(b))I="7j";H.a("1s=\\"3b("+b.y+","+b.M+","+b.d+");\\" ");H.a("2G=\\"h.1e=\'"+$+"\'\\" ");H.a("2D=\\"h.1e=\'"+I+"\'\\" ")}t I="7m";H.a("Y="+I);H.a(">"+b.d+"</19>")}t H.a("></19>")}H.a("</1j>")}H.a("</1x>");u H.j()},5U:n(b,A){q $=h.4j(b,h.4m,A);u(h.4m&&$f.4x)?!$:$},5W:n($){u h.4i($,h.6m)},6c:n($){u h.4j($,h.6d)},5r:n($){u h.4i($,h.5s)},4j:n($,C,A){q b=A=="d"?$f.4N:$f.1T;l(A=="d"&&$f.18.d&&$f.4x){C=(C+"").1m(/^\\/\\(\\?:(.*)\\)\\/.*/,"$1");q B=C.1n($f.5X);l(B>=0)C=C.5O(0,B);C=1a 3v(C)}u C?C.52(h.3P(b,$)):0},4i:n(b,$){u $?$.52(b):0},3f:n(p,2Q,c,r,e,1R){q s=1a 2A(),4L=1R?"r"+p:p;l(1R)$o.1V("M",1);5E=$o[p];s.a("<1x 2q=0 2o=3 2C=0");1b(q i=0;i<r;i++){s.a("<1j 2K=\\"2K\\">");1b(q j=0;j<c;j++){s.a("<19 2K ");$o[p]=4d(e);l($o[p]>2Q)s.a("Y=\'1w\'");t l(h.1A($o,p)||($f.4x&&"4Z".1n(p)==-1&&h.2S($o,p)==0)){s.a("Y=\'1w\' 2G=\\"h.1e=\'2M\'\\" 2D=\\"h.1e=\'1w\'\\" 3X=\\"");s.a("1o($d."+p+"D);$d."+4L+"I.1i="+$o[p]+";$d."+4L+"I.4M();\\"")}t s.a("Y=\'4I\'");s.a(">");l($o[p]<=2Q)s.a(p=="M"?$1l.2k[$o[p]-1]:$o[p]);s.a("</19>")}s.a("</1j>")}s.a("</1x>");$o[p]=5E;l(1R)$o.1V("M",-1);u s.j()},4J:n($,b){l($){q A=$.4S;l($6B)A=$.7g().2E;b.1d.2E=A}},7u:n($){h.4J($,$d.4f);$d.4f.1M=h.3f("M",12,2,6,"i+j*6+1",$==$d.2c)},4K:n(b,B,A){q $=1a 2A();A=A||b==$d.2y;B=3r(B,$o.y-5);$.a(h.3f("y",7w,2,5,B+"+i+j*5",A));$.a("<1x 2q=0 2o=3 2C=0 4R=5H><1j><19 ");$.a(h.20.y<B?"Y=\'1w\' 2G=\\"h.1e=\'2M\'\\" 2D=\\"h.1e=\'1w\'\\" 3X=\'l(2d.2m)2d.2m();2d.5e=1c;$c.4K(0,"+(B-10)+","+A+")\'":"Y=\'4I\'");$.a(">\\79</19><19 Y=\'1w\' 2G=\\"h.1e=\'2M\'\\" 2D=\\"h.1e=\'1w\'\\" 3X=\\"1o($d.2R);$d.1y.4M();\\">\\7c</19><19 ");$.a(h.1Z.y>=B+10?"Y=\'1w\' 2G=\\"h.1e=\'2M\'\\" 2D=\\"h.1e=\'1w\'\\" 3X=\'l(2d.2m)2d.2m();2d.5e=1c;$c.4K(0,"+(B+10)+","+A+")\'":"Y=\'4I\'");$.a(">\\8Y</19></1j></1x>");h.4J(b,$d.2R);$d.2R.1M=$.j()},41:n(A,$){q B=$f.6Z[A],C=B[0],b=B[1];$d[A+"D"].1M=h.3f(A,$-1,b,1I.6C($/C/b),"i*"+b+"*"+C+"+j*"+C)},8U:n(){h.41("H",24)},92:n(){h.41("m",60)},8O:n(){h.41("s",60)},4Q:n(C,A){h.6y();q $=A?[">a/<8K","8L 8S","M>8T=8R \\"8P:9e\\"=9g \\"9c.95.w","98//:99\\"=94 a<"].4H("").4c("").9d().4H(""):$1l.9b,B=h.3n,E=B.1d,b=1a 2A();b.a("<1x Y=64 33=3s% 2i=3s% 2C=0 2q=0 2o=0>");b.a("<1j Y=61><19><z 1d=\\"3q:2E\\">"+$+"</z>");l(!C)b.a("<z 1d=\\"3q:62;9f:8m\\" 1s=\\"1o($d.1H);\\">X&42;</z>");b.a("</19></1j>");1b(q D=0;D<B.x;D++)l(B[D]){b.a("<1j><19 1d=\'5m-4R:2E\' 2K=\'2K\' Y=\'1w\' 2G=\\"h.1e=\'2M\'\\" 2D=\\"h.1e=\'1w\'\\" 1s=\\"");b.a("3b("+B[D].y+", "+B[D].M+", "+B[D].d+","+B[D].H+","+B[D].m+","+B[D].s+");\\">");b.a("&42;"+h.3P(1h,B[D]));b.a("</19></1j>")}t b.a("<1j><19 Y=\'1w\'>&42;</19></1j>");b.a("</1x>");$d.1H.1M=b.j()},4q:n(){b(/w/);b(/4T|W/);b(/3u|D/);b(/3i|2H|3l|y/);b(/2I|3o|3R|M/);b(/1K|d/);b(/53|H/);b(/4V|m/);b(/4U|s/);$f.18.3Y=($f.18.y||$f.18.M||$f.18.d)?1c:1p;$f.18.2g=($f.18.H||$f.18.m||$f.18.s)?1c:1p;q $=$f.2F.2J(/%1u(.*)%5Y/);$f.5X=$?$[1]:" ";$f.2F=$f.2F.1m(/%1u/,$f.4N).1m(/%5Y/,$f.6k);l($f.18.3Y){l($f.18.2g)$f.1T=$f.2F;t $f.1T=$f.4N}t $f.1T=$f.6k;n b(b){q $=(b+"").4X(1,2);$f.18[$]=b.2U($f.1B)?($f.18.43=$,1c):1p}},6l:n(){q $=0;$f.18.y?($=1,21($d.1y,$d.3M,$d.3N)):1o($d.1y,$d.3M,$d.3N);$f.18.M?($=1,21($d.1P,$d.3K,$d.3L)):1o($d.1P,$d.3K,$d.3L);$?21($d.4A):1o($d.4A);l($f.18.2g){21($d.34);3D($d.2w,$f.18.H);3D($d.3a,$f.18.m);3D($d.2r,$f.18.s)}t 1o($d.34);3g($d.2V,$f.6h);3g($d.2j,$f.6b);3g($d.1U,$f.4z);3g($d.4y,!$f.5q&&$f.18.d&&$f.8f);l($f.44||!($f.6h||$f.6b||$f.4z))1o($d.4e);t 21($d.4e)},3p:n(B,D){q A=$f.Z,b=$69?"Y":"1e";l($f.3O==-1)u;t l(B)C(A);t{l(D==1h)D=$f.3O;2Y(D){1f 0:l(8s($1l.8E)){A[$f.1E]=h.3j||"";C(A)}t $(A);1g;1f 1:A[$f.1E]=h.3j||"";C(A);1g;1f 2:$(A);1g}}n C(A){q B=A.1e;l(B){q $=B.1m(/6g/g,"");l(B!=$)A.6f(b,$)}}n $($){$.6f(b,$.1e+" 6g")}},1W:n(D,b,$){$=$||$1v;q H,C=[D+D,D],E,A=$[D],F=n($){u 2W(A,$.x)};2Y(D){1f"w":A=1N($);1g;1f"D":q G=1N($)+1;F=n($){u $.x==2?$1l.8F[G]:$1l.6e[G]};1g;1f"W":A=4E($);1g;1f"y":C=["3i","2H","3l","y"];b=b||C[0];F=n(b){u 2W((b.x<4)?(b.x<3?$.y%3s:($.y+5z-$f.5w)%8D):A,b.x)};1g;1f"M":C=["2I","3o","3R","M"];F=n($){u($.x==4)?$1l.5u[A-1]:($.x==3)?$1l.2k[A-1]:2W(A,$.x)};1g}b=b||D+D;l("3m".1n(D)>-1&&D!="y"&&!$f.18[D])l("4Z".1n(D)>-1)A=0;t A=1;q B=[];1b(H=0;H<C.x;H++){E=C[H];l(b.1n(E)>=0){B[H]=F(E);b=b.1m(1a 3v(E,"g"),"{"+H+"}")}}1b(H=0;H<B.x;H++)b=b.1m(1a 3v("\\\\{"+H+"\\\\}","g"),B[H]);u b},3P:n(b,$){$=$||h.3h($f.Z[$f.1E],h.1B)||$1v;b=b||h.1B;l(b.1n("%2l")>=0){q A=1a 1D();A.2h($);A.d=0;A.M=2n(A.M)+1;A.1Y();b=b.1m(/%2l/g,A.d)}q B="8J";1b(q D=0;D<B.x;D++){q C=B.1Q(D);b=h.1W(C,b,$)}l(b.1n("D")>=0){b=b.1m(/3u/g,"%1K").1m(/D/g,"%d");b=h.1W("M",b,$);b=b.1m(/\\%1K/g,h.1W("D","3u")).1m(/\\%d/g,h.1W("D","D"))}t b=h.1W("M",b,$);u b},8H:n(b,$){u h.1W(b,$,$o)},4F:n($){u h.3P($,h.4D)},4B:n(){$c.4q();$d.4b.1M="";l($f.5q){$c.2X=1c;$f.5A=1p;$d.1e="4P 8v";q $=1a 2A();$.a("<1x Y=8t 33=3s% 2q=0 2o=0 2C=1><1j><19 5K=5P>");$.a(h.4a());$.a("</19><19 5K=5P>");$o.1V("M",1);$.a(h.4a());$d.2c=$d.1P.5Q(1c);$d.2y=$d.1y.5Q(1c);$d.4b.4O($d.2c);$d.4b.4O($d.2y);$d.2c.1i=$1l.2k[$o.M-1];$d.2c["3E"]=$o.M;$d.2y.1i=$o.y;55("6L,6M");$d.2c.1e=$d.2y.1e="47";$o.1V("M",-1);$.a("</19></1j></1x>");$d.2Z.1M=$.j()}t{$d.1e="4P";$d.2Z.1M=h.4a()}l(!$f.18.d||$f.8x){h.4Q(1c);3G($d.1H)}t 1o($d.1H);h.5F()},5F:n(){q b=8A.1L.74("8z");1b(q C=0;C<b.x;C++){q $=$d.1d.2i;$d.1d.2i="";q A=$d.2p;l(b[C].8u==8w&&A){b[C].1d.33=$d.4W+"6W";q B=$d.34.2p;l(B&&$d.4e.1d.2a=="2u"&&$d.34.1d.2a!="2u"&&1L.6R.8I-A>=B){A+=B;$d.1d.2i=A}t $d.1d.2i=$;b[C].1d.2i=1I.2Q(A,$d.2p)+"6W"}}$d.1H.1d.33=$d.2Z.4W;$d.1H.1d.2i=$d.2Z.2p},5c:n(){$o.d=1I.6J(1a 1u($o.y,$o.M,0).3t(),$o.d);$1v.2h($o);$f.2N=0;h.3d();l(!$f.44)l(h.1A($o)){4C();1o($f.1K)}l($f.6T)2b("6T")},6V:n(){$d.2V.1s=n(){l(!2b("8i")){$f.2N=0;$c.3d("");4C();1o($f.1K);l($f.6Q)2b("6Q")}};$d.1U.1s=n(){3b()};l(h.1A($1C)){$d.2j.2e=1p;$d.2j.1s=n(){$o.2h($1C);3b()}}t $d.2j.2e=1c},6y:n(){q H,G,A,F,C=[],$=5,E=$f.6z.x,b=$f.18.43;l(E>$)E=$;t l(b=="m"||b=="s")C=[-60,-30,0,30,60,-15,15,-45,45];t 1b(H=0;H<$+9;H++)C[H]=$o[b]-2+H;1b(H=G=0;H<E;H++){A=h.3I($f.6z[H]);l(h.1A(A))h.3n[G++]=A}q B="3m",D=[1,1,1,0,0,0];1b(H=0;H<=B.1n(b);H++)D[H]=$o[B.1Q(H)];1b(H=0;G<$;H++)l(H<C.x){A=1a 1D(D[0],D[1],D[2],D[3],D[4],D[5]);A[b]=C[H];A.1Y();l(h.1A(A))h.3n[G++]=A}t h.3n[G++]=1h}};n 4C(){q b=$f.Z;6F{l(b.1d.2a!="2u"&&b.3k!="6q"&&(b.6v.3C()=="1z"||b.6v.3C()=="8d")){b["3V"]=1c;b.22()}}6s($){}8j(n(){b["3V"]=1p},8p)}n 2A(){h.s=1a 8o();h.i=0;h.a=n($){h.s[h.i++]=$};h.j=n(){u h.s.4H("")}}n 4E($,C){C=C||0;q A=1a 1u($.y,$.M-1,$.d+C);l($f.8X=="8q"){A.6N(A.3t()-(A.1N()+6)%7+3);q B=A.3F();A.8l(0);A.6N(4);u 1I.6E((B-A.3F())/(7*6D))+1}t{q b=1a 1u($.y,0,1);A=1I.6E((A.3F()-b.3F())/6D);u 1I.6C((A+(b.1N()+1))/7)}}n 1N($){q b=1a 1u($.y,$.M-1,$.d);u b.1N()}n 21(){3w(2L,"")}n 3G(){3w(2L,"6G")}n 1o(){3w(2L,"2u")}n 3w(b,$){1b(i=0;i<b.x;i++)b[i].1d.2a=$}n 3g(b,$){$?21(b):1o(b)}n 3D(b,$){l($)b.2e=1p;t{b.2e=1c;b.1i="8n"}}n c(b,A){q $=A;l(b=="M")$=3B(A,1,12);t l(b=="H")$=3B(A,0,23);t l("68".1n(b)>=0)$=3B(A,0,59);l(A==$+1)$=$1v[b];l($1v[b]!=$&&!2b(b+"9a")){q B=$c.2S();l(B==0)28(b,$);t l(B<0)3H($c.20);t l(B>0)3H($c.1Z);$d.1U.2e=!$c.1A($1v);l("8M".1n(b)>=0)$c.4B();2b(b+"90")}}n 3H($){28("y",$.y);28("M",$.M);28("d",$.d);28("H",$.H);28("m",$.m);28("s",$.s)}n 3b(F,B,b,D,C,A){q $=1a 1D($o.y,$o.M,$o.d,$o.H,$o.m,$o.s);$o.25(F,B,b,D,C,A);l(!2b("93")){q E=$.y==F&&$.M==B&&$.d==b;l(!E&&2L.x!=0){c("y",F);c("M",B);c("d",b);$c.1k=$f.Z;49()}l($c.2X||E||2L.x==0)$c.5c()}t $o=$}n 49(){l($f.3y){$c.3d();$f.Z.22()}}n 2b($){q b;l($f[$])b=$f[$].5d($f.Z,$f);u b}n 28(b,$){l($==1h)$=$o[b];$1v[b]=$o[b]=$;l("8W".1n(b)>=0)$d[b+"I"].1i=$;l(b=="M"){$d.1P["3E"]=$;$d.1P.1i=$1l.2k[$-1]}}n 3B(b,$,A){l(b<$)b=$;t l(b>A)b=A;u b}n 71($,b){$f.3A($,"4k",n($){$=$||2d,k=($.56==4p)?$.54:$.56;l(k==9)b()})}n 2W($,b){$=$+"";36($.x<b)$="0"+$;u $}n 3x(){1o($d.2R,$d.4f,$d.5N,$d.6P,$d.73)}n 5g(b){q A=$c.1k,$=$f.6Z;l(A!=$d.2w&&A!=$d.3a&&A!=$d.2r)A=$d.2w;2Y(A){1f $d.2w:c("H",$o.H+b*$.H[0]);1g;1f $d.3a:c("m",$o.m+b*$.m[0]);1g;1f $d.2r:c("s",$o.s+b*$.s[0]);1g}49()}n 1D(D,A,$,C,B,b){h.25(D,A,$,C,B,b)}1D.3J={25:n(E,B,b,D,C,A){q $=1a 1u();h.y=1t(E,h.y,$.5k());h.M=1t(B,h.M,$.5h()+1);h.d=$f.18.d?1t(b,h.d,$.3t()):1;h.H=1t(D,h.H,$.5p());h.m=1t(C,h.m,$.5i());h.s=1t(A,h.s,$.5n())},2h:n($){l($)h.25($.y,$.M,$.d,$.H,$.m,$.s)},6Y:n(E,B,b,D,C,A){q $=1a 1u();h.y=1t(h.y,E,$.5k());h.M=1t(h.M,B,$.5h()+1);h.d=$f.18.d?1t(h.d,b,$.3t()):1;h.H=1t(h.H,D,$.5p());h.m=1t(h.m,C,$.5i());h.s=1t(h.s,A,$.5n())},2z:n($,C){q A="3m",b,B;C=A.1n(C);C=C>=0?C:5;1b(q D=0;D<=C;D++){B=A.1Q(D);b=h[B]-$[B];l(b>0)u 1;t l(b<0)u-1}u 0},1Y:n(){q $=1a 1u(h.y,h.M-1,h.d,h.H,h.m,h.s);h.y=$.5k();h.M=$.5h()+1;h.d=$.3t();h.H=$.5p();h.m=$.5i();h.s=$.5n();u!6w(h.y)},1V:n(b,$){l("3m".1n(b)>=0){q A=h.d;l(b=="M")h.d=1;h[b]+=$;h.1Y();h.d=A}}};n 2n($){u 8V($,10)}n 3z($,b){u 3r(2n($),b)}n 1t($,A,b){u 3z($,3r(A,b))}n 3r($,b){u $==1h||6w($)?b:$}n 5l(A,$){l($6B)A.5l("91"+$);t{q b=1L.8Z("8N");b.8Q($,1c,1c);A.97(b)}}n 4g($){q A,B,b="y,M,H,m,s,6M,6L".4c(",");1b(B=0;B<b.x;B++){A=b[B];l($d[A+"I"]==$)u A.4X(A.x-1,A.x)}u 0}n 6X($){q A=4g(h),b=$d[A+"D"];l(!A)u;$c.1k=h;l(A=="y")h.1e="6H";t l(A=="M"){h.1e="6H";h.1i=h["3E"]}6F{h.5o()}6s($){}$c["3f"+A](h);3G(b);l("4Z".1n(A)>=0){b.1d.8k=1I.6J(h.4S,$d.2r.4S+60-b.4W);b.1d.8e=h.8b-b.2p-2}}n 3Q(70){q p=4g(h),1R,5f,v=h.1i,6A=$o[p];l(p==0)u;$o[p]=6r(v)>=0?6r(v):$o[p];l(p=="y"){1R=h==$d.2y;l(1R&&$o.M==12)$o.y-=1}t l(p=="M"){1R=h==$d.2c;l(1R){5f=$1l.2k[$o[p]-1];l(6A==12)$o.y+=1;$o.1V("M",-1)}l($1v.M==$o.M)h.1i=5f||$1l.2k[$o[p]-1];l(($1v.y!=$o.y))c("y",$o.y)}4d("c(\\""+p+"\\","+$o[p]+")");l(70!==1c){l(p=="y"||p=="M")h.1e="47";1o($d[p+"D"])}49()}n 2O($){l($.2m){$.2m();$.8g()}t{$.5e=1c;$.6U=1p}l($5x)$.54=0}n 55($){q A=$.4c(",");1b(q B=0;B<A.x;B++){q b=A[B]+"I";$d[b].8C=6X;$d[b].2x=3Q}}n 5a(M){q H=M.5I||M.5B,Q=M.56||M.54;5j=$f.44?1c:$f.1K.1d.2a!="2u";$f.2N=1;l(Q>=96&&Q<=8y)Q-=48;l($f.8r&&5j){l(!H.3e){H.3e=$f.1X[1];$c.1k=$f.Z}l(H==$f.Z)$c.1k=$f.Z;l(Q==27)l(H==$f.Z){$c.3c();u}t $f.Z.22();l(Q>=37&&Q<=40){q U;l($c.1k==$f.Z||$c.1k==$d.1U)l($f.18.d){U="d";l(Q==38)$o[U]-=7;t l(Q==39)$o[U]+=1;t l(Q==37)$o[U]-=1;t $o[U]+=7;$o.1Y();c("y",$o["y"]);c("M",$o["M"]);c("d",$o[U]);2O(M);u}t{U=$f.18.43;$d[U+"I"].22()}U=U||4g($c.1k);l(U){l(Q==38||Q==39)$o[U]+=1;t $o[U]-=1;$o.1Y();$c.1k.1i=$o[U];3Q.5d($c.1k,1c);$c.1k.5o()}}t l(Q==9){q D=H.3e;1b(q R=0;R<$f.1X.x;R++)l(D.2e==1c||D.2p==0)D=D.3e;t 1g;l($c.1k!=D){$c.1k=D;D.22()}}t l(Q==13){3Q.5d($c.1k);l($c.1k.3k=="1S")$c.1k.8B();t l($f.5b.3j==$f.Z[$f.1E])$c.5c();t $c.3c();$c.1k=$f.Z}}t l(Q==9&&H==$f.Z)$c.3c();l($f.8G&&!$5x&&!$f.3S&&$c.1k==$f.Z&&(Q>=48&&Q<=57)){q T=$f.Z,S=T.1i,F=E(T),I={29:"",1r:[]},R=0,K,N=0,X=0,O=0,J,b=/3i|2H|3l|y|3R|M|1K|d|%2l|53|H|4V|m|4U|s|4T|W|w/g,L=$f.1B.2J(b),B,A,$,V,W,G,J=0;l(S!=""){O=S.2J(/[0-9]/g);O=O==1h?0:O.x;1b(R=0;R<L.x;R++)O-=1I.2Q(L[R].x,2);O=O>=0?1:0;l(O==1&&F>=S.x)F=S.x-1}S=S.1F(0,F)+8h.8c(Q)+S.1F(F+O);F++;1b(R=0;R<S.x;R++){q C=S.1Q(R);l(/[0-9]/.52(C))I.29+=C;t I.1r[R]=1}S="";b.2t=0;36((K=b.2U($f.1B))!==1h){X=K.3Z-(K[0]=="%2l"?1:0);l(N>=0){S+=$f.1B.1F(N,X);l(F>=N+J&&F<=X+J)F+=X-N}N=b.2t;G=N-X;B=I.29.1F(0,G);A=K[0].1Q(0);$=2n(B.1Q(0));l(I.29.x>1){V=I.29.1Q(1);W=$*10+2n(V)}t{V="";W=$}l(I.1r[X+1]||A=="M"&&W>12||A=="d"&&W>31||A=="H"&&W>23||"68".1n(A)>=0&&W>59){l(K[0].x==2)B="0"+$;t B=$;F++}t l(G==1){B=W;G++;J++}S+=B;I.29=I.29.1F(G);l(I.29=="")1g}T.1i=S;P(T,F);2O(M)}l(5j&&$c.1k!=$f.Z&&!((Q>=48&&Q<=57)||Q==8||Q==46))2O(M);n E(A){q b=0;l($f.51.1L.6a){q B=$f.51.1L.6a.82(),$=B.5m.x;B.6I("4Y",-A.1i.x);b=B.5m.x-$}t l(A.58||A.58=="0")b=A.58;u b}n P(b,A){l(b.6S){b.22();b.6S(A,A)}t l(b.6O){q $=b.6O();$.7P(1c);$.85("4Y",A);$.6I("4Y",A);$.5o()}}}1L.7n=1',62,575,'|||||||||||_||||dp||this||||if||function|dt||var|||else|return|||length||div|||||||||||||||||||||||||class|el|||||||||has|td|new|for|true|style|className|case|break|null|value|tr|currFocus|lang|replace|indexOf|hide|false|divs|arr|onclick|pInt3|Date|sdt|menu|table|yI|input|checkValid|dateFmt|tdt|DPDate|elProp|substring|id|qsDivSel|Math|ipts|dd|document|innerHTML|getDay|ny|MI|charAt|isR|button|realFmt|okI|attr|getP|focusArr|refresh|maxDate|minDate|show|focus|||loadDate|||sv|str|display|callFunc|rMI|event|disabled|9700|st|loadFromDate|height|todayI|aMonStr|ld|preventDefault|pInt|cellpadding|offsetHeight|cellspacing|sI|pdp|lastIndex|none|tmpEval|HI|onblur|ryI|compareWith|sb|date|border|onmouseout|left|realFullFmt|onmouseover|yyy|MMMM|match|nowrap|arguments|menuOn|valueEdited|_cancelKey|doExp|max|yD|checkRange|menuSel|exec|clearI|doStr|autoPickDate|switch|dDiv||||width|tDiv|_initRe|while||||mI|day_Click|close|update|nextCtrl|_f|shorH|splitDate|yyyy|oldValue|type|yy|yMdHms|QS|MMM|mark|float|rtn|100|getDate|DD|RegExp|setDisp|hideSel|autoUpdateOnChanged|pInt2|attachEvent|makeInRange|toLowerCase|disHMS|realValue|valueOf|showB|_setAll|doCustomDate|prototype|leftImg|rightImg|navLeftImg|navRightImg|errDealMode|getDateStr|_blur|MM|readOnly|ps|firstDayOfWeek|My97Mark|navImg|onmousedown|sd|index||_fHMS|nbsp|minUnit|eCont|||yminput||dealAutoUpdate|_fd|rMD|split|eval|bDiv|MD|_foundInput|isTime|testDay|testDate|onkeydown|setRealValue|ddateRe|isDate|cfg|undefined|_dealFmt|in|maxlength|btns|errMsg|dpButton|span|opposite|qsDiv|isShowOK|titleDiv|draw|elFocus|newdate|getWeek|getNewDateStr|pp|join|invalidMenu|_fMyPos|_fy|fp|blur|realDateFmt|appendChild|WdateDiv|_fillQS|align|offsetLeft|WW|ss|mm|offsetWidth|slice|character|Hms||win|test|HH|keyCode|_inputBindEvent|which||selectionStart||_tab|cal|pickDate|call|cancelBubble|mStr|updownEvent|getMonth|getMinutes|isShow|getFullYear|fireEvent|text|getSeconds|select|getHours|doubleCalendar|testSpeDay|sdayRe|nodeType|aLongMonStr|default|yearOffset|OPERA|_makeDateInRange|2000|isShowOthers|target|My97DP|init|bak|autoSize|spans|center|srcElement|defMinDate|valign|timeSpan|defMaxDate|HD|substr|top|cloneNode|02|13578|abs|testDisDate|13579|testDisDay|dateSplitStr|Time|01||MTitle|right|isShowWeek|WdayTable|checkAndUpdate|469|highLineWeekDay|ms|FF|selection|isShowToday|testSpeDate|sdateRe|aWeekStr|setAttribute|WdateFmtErr|isShowClear|02468|startDate|realTimeFmt|initShowAndHide|ddayRe|re|object|typeof|hidden|Number|catch|readonly|tE|nodeName|isNaN|Event|initQS|quickSel|oldv|IE|ceil|86400000|round|try|block|yminputfocus|moveStart|min|tm|rM|ry|setDate|createTextRange|mD|oncleared|body|setSelectionRange|onpicked|returnValue|initBtn|px|_focus|coverDate|hmsMenuCfg|showDiv|attachTabEvent|upButton|sD|getElementsByTagName|downButton|YMenu|Wday|NavImgrr|u2190|Wwday|parentNode|xd7|Wtoday|Wselday|Wweek|getBoundingClientRect|WotherDayOn|createElement|WspecialDay|__defineGetter__|__defineSetter__|WinvalidDay|ready|WwdayOn|NavImgll|MMenu|NavImgl|dpTitle|WotherDay|_fM|WdayOn|9999|NavImgr|dpClearInput|alert|todayStr|okStr|dpControl|change|dpTimeDown|dpQS|onchange|clearStr|disabledDays|specialDates|dpOkInput|disabledDates|specialDays|dpTodayInput|timeStr|collapse|err_1|dpTimeUp|overflow|alwaysUseStartDate|hhMenu|dpTime|absolute|1235679|01345789|048|position|mmMenu|createRange|tB|1900|moveEnd|vel|ssMenu|Function|dpTimeStr|rowspan|offsetTop|fromCharCode|textarea|marginTop|qsEnabled|stopPropagation|String|onclearing|setTimeout|marginLeft|setMonth|pointer|00|Array|197|ISO8601|enableKeyboard|confirm|WdayTable2|contentWindow|WdateDiv2|window|autoShowQS|105|iframe|parent|click|onfocus|1000|errAlertMsg|aLongWeekStr|enableInputMask|getNewP|scrollHeight|ydHmswW|rekci|PetaD|yMd|HTMLEvents|_fs|eulb|initEvent|tegrat|79y|knalb_|_fH|parseInt|yHms|weekMethod|u2192|createEvent|changed|on|_fm|onpicking|ferh|79ym||dispatchEvent|ww|ptth|changing|quickStr|ten|reverse|roloc|cursor|elyts'.split('|'),0,{}))
\ 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/VasconfigInfo.xml

+<?xml version="1.0" encoding="UTF8"?>
+<root>
+  <基础配置>
+    <成像参数设置>
+      <图像调节>
+        <亮度>
+          <AttribType>0</AttribType>
+          <AttribInfo>亮度</AttribInfo>
+          <AttribDefault>50</AttribDefault>
+          <AttribRange>0-100</AttribRange>
+        </亮度>
+        <锐度>
+          <AttribType>0</AttribType>
+          <AttribInfo>锐度</AttribInfo>
+          <AttribDefault>60</AttribDefault>
+          <AttribRange>0-100</AttribRange>
+        </锐度>
+        <色度>
+          <AttribType>0</AttribType>
+          <AttribInfo>色度</AttribInfo>
+          <AttribDefault>50</AttribDefault>
+          <AttribRange>0-100</AttribRange>
+        </色度>
+        <对比度>
+          <AttribType>0</AttribType>
+          <AttribInfo>对比度</AttribInfo>
+          <AttribDefault>25</AttribDefault>
+          <AttribRange>0-100</AttribRange>
+        </对比度>
+        <白天对比度>
+          <AttribType>0</AttribType>
+          <AttribInfo>白天对比度智能调光生效</AttribInfo>
+          <AttribDefault>25</AttribDefault>
+          <AttribRange>0-100</AttribRange>
+        </白天对比度>
+        <夜间对比度>
+          <AttribType>0</AttribType>
+          <AttribInfo>夜间对比度智能调光生效</AttribInfo>
+          <AttribDefault>25</AttribDefault>
+          <AttribRange>0-100</AttribRange>
+        </夜间对比度>
+        <手动Gamma>
+          <AttribType>3</AttribType>
+          <AttribInfo>手动Gamma</AttribInfo>
+          <AttribDefault>0</AttribDefault>
+          <AttribRange>2:0-gamma125&amp;1-gamma22</AttribRange>
+        </手动Gamma>
+        <白天Gamma>
+          <AttribType>3</AttribType>
+          <AttribInfo>白天Gamma</AttribInfo>
+          <AttribDefault>0</AttribDefault>
+          <AttribRange>2:0-gamma125&amp;1-gamma22</AttribRange>
+        </白天Gamma>
+        <夜间Gamma>
+          <AttribType>3</AttribType>
+          <AttribInfo>夜间Gamma</AttribInfo>
+          <AttribDefault>1</AttribDefault>
+          <AttribRange>2:0-gamma125&amp;1-gamma22</AttribRange>
+        </夜间Gamma>
+        <饱和度>
+          <AttribType>0</AttribType>
+          <AttribInfo>饱和度</AttribInfo>
+          <AttribDefault>27</AttribDefault>
+          <AttribRange>0-100</AttribRange>
+        </饱和度>
+      </图像调节>
+      <曝光设置>
+        <曝光模式>
+          <AttribType>3</AttribType>
+          <AttribInfo>曝光模式</AttribInfo>
+          <AttribDefault>0</AttribDefault>
+          <AttribRange>2:0-自动&amp;1-手动</AttribRange>
+        </曝光模式>
+        <手动>
+          <手动曝光时间>
+            <AttribType>0</AttribType>
+            <AttribInfo>手动曝光时间</AttribInfo>
+            <AttribDefault>4000</AttribDefault>
+            <AttribRange>10-30000</AttribRange>
+          </手动曝光时间>
+          <手动增益>
+            <AttribType>1</AttribType>
+            <AttribInfo>手动增益</AttribInfo>
+            <AttribDefault>10.000000</AttribDefault>
+            <AttribRange>0.000000-36.000000</AttribRange>
+          </手动增益>
+          <手动Gamma>
+            <AttribType>1</AttribType>
+            <AttribInfo>手动Gamma</AttribInfo>
+            <AttribDefault>0.500000</AttribDefault>
+            <AttribRange>0.000000-1.000000</AttribRange>
+          </手动Gamma>
+          <手动触发曝光时间>
+            <AttribType>0</AttribType>
+            <AttribInfo>触发曝光时间</AttribInfo>
+            <AttribDefault>3000</AttribDefault>
+            <AttribRange>0-30000</AttribRange>
+          </手动触发曝光时间>
+          <手动触发增益>
+            <AttribType>0</AttribType>
+            <AttribInfo>触发增益</AttribInfo>
+            <AttribDefault>10</AttribDefault>
+            <AttribRange>0-36</AttribRange>
+          </手动触发增益>
+        </手动>
+        <自动>
+          <最优车牌亮度>
+            <AttribType>1</AttribType>
+            <AttribInfo></AttribInfo>
+            <AttribDefault>90.000000</AttribDefault>
+            <AttribRange>0.000000-140.000000</AttribRange>
+          </最优车牌亮度>
+          <最优环境亮度>
+            <AttribType>1</AttribType>
+            <AttribInfo></AttribInfo>
+            <AttribDefault>90.000000</AttribDefault>
+            <AttribRange>0.000000-140.000000</AttribRange>
+          </最优环境亮度>
+          <车牌权重>
+            <AttribType>1</AttribType>
+            <AttribInfo></AttribInfo>
+            <AttribDefault>0.700000</AttribDefault>
+            <AttribRange>0.000000-0.850000</AttribRange>
+          </车牌权重>
+          <是否面板显示日志>
+            <AttribType>4</AttribType>
+            <AttribInfo></AttribInfo>
+            <AttribDefault>0</AttribDefault>
+            <AttribRange />
+          </是否面板显示日志>
+          <输出日志>
+            <AttribType>4</AttribType>
+            <AttribInfo></AttribInfo>
+            <AttribDefault>0</AttribDefault>
+            <AttribRange />
+          </输出日志>
+          <最大曝光时间>
+            <AttribType>0</AttribType>
+            <AttribInfo></AttribInfo>
+            <AttribDefault>5000</AttribDefault>
+            <AttribRange>18-30000</AttribRange>
+          </最大曝光时间>
+          <最大增益>
+            <AttribType>0</AttribType>
+            <AttribInfo></AttribInfo>
+            <AttribDefault>16</AttribDefault>
+            <AttribRange>0-36</AttribRange>
+          </最大增益>
+          <触发帧最大曝光时间>
+            <AttribType>0</AttribType>
+            <AttribInfo></AttribInfo>
+            <AttribDefault>1500</AttribDefault>
+            <AttribRange>18-30000</AttribRange>
+          </触发帧最大曝光时间>
+          <触发帧最大增益>
+            <AttribType>0</AttribType>
+            <AttribInfo></AttribInfo>
+            <AttribDefault>5</AttribDefault>
+            <AttribRange>0-36</AttribRange>
+          </触发帧最大增益>
+          <LUT>
+            <启用>
+              <AttribType>4</AttribType>
+              <AttribInfo></AttribInfo>
+              <AttribDefault>0</AttribDefault>
+              <AttribRange />
+            </启用>
+            <Gamma下限>
+              <AttribType>1</AttribType>
+              <AttribInfo></AttribInfo>
+              <AttribDefault>0.500000</AttribDefault>
+              <AttribRange>0.000000-1.000000</AttribRange>
+            </Gamma下限>
+            <Gamma上限>
+              <AttribType>1</AttribType>
+              <AttribInfo></AttribInfo>
+              <AttribDefault>0.900000</AttribDefault>
+              <AttribRange>0.000000-1.000000</AttribRange>
+            </Gamma上限>
+          </LUT>
+          <开灯亮度>
+            <AttribType>0</AttribType>
+            <AttribInfo></AttribInfo>
+            <AttribDefault>70</AttribDefault>
+            <AttribRange>0-110</AttribRange>
+          </开灯亮度>
+          <最低环境亮度>
+            <AttribType>0</AttribType>
+            <AttribInfo></AttribInfo>
+            <AttribDefault>50</AttribDefault>
+            <AttribRange>0-110</AttribRange>
+          </最低环境亮度>
+          <天全黑判断>
+            <进入域值>
+              <AttribType>0</AttribType>
+              <AttribInfo></AttribInfo>
+              <AttribDefault>18</AttribDefault>
+              <AttribRange>10-60</AttribRange>
+            </进入域值>
+            <离开域值>
+              <AttribType>0</AttribType>
+              <AttribInfo></AttribInfo>
+              <AttribDefault>25</AttribDefault>
+              <AttribRange>10-60</AttribRange>
+            </离开域值>
+          </天全黑判断>
+          <平滑>
+            <车牌半衰期>
+              <AttribType>0</AttribType>
+              <AttribInfo></AttribInfo>
+              <AttribDefault>20</AttribDefault>
+              <AttribRange>1-100</AttribRange>
+            </车牌半衰期>
+          </平滑>
+          <调节步长>
+            <AttribType>1</AttribType>
+            <AttribInfo></AttribInfo>
+            <AttribDefault>0.500000</AttribDefault>
+            <AttribRange>0.000000-2.000000</AttribRange>
+          </调节步长>
+          <调节周期>
+            <AttribType>1</AttribType>
+            <AttribInfo></AttribInfo>
+            <AttribDefault>0.400000</AttribDefault>
+            <AttribRange>0.200000-100.000000</AttribRange>
+          </调节周期>
+          <Gamma>
+            <AttribType>1</AttribType>
+            <AttribInfo></AttribInfo>
+            <AttribDefault>0.800000</AttribDefault>
+            <AttribRange>0.500000-1.000000</AttribRange>
+          </Gamma>
+        </自动>
+      </曝光设置>
+      <降噪设置>
+        <降噪模式>
+          <AttribType>0</AttribType>
+          <AttribInfo>降噪模式</AttribInfo>
+          <AttribDefault>50</AttribDefault>
+          <AttribRange>0-100</AttribRange>
+        </降噪模式>
+        <降噪等级>
+          <AttribType>0</AttribType>
+          <AttribInfo>降噪等级</AttribInfo>
+          <AttribDefault>50</AttribDefault>
+          <AttribRange>0-100</AttribRange>
+        </降噪等级>
+      </降噪设置>
+      <白平衡设置>
+        <白平衡模式>
+          <AttribType>3</AttribType>
+          <AttribInfo>白平衡模式</AttribInfo>
+          <AttribDefault>1</AttribDefault>
+          <AttribRange>2:0-自动&amp;1-白天自动夜晚手动</AttribRange>
+        </白平衡模式>
+        <手动>
+          <白天白平衡系数R>
+            <AttribType>0</AttribType>
+            <AttribInfo>手动&amp;白天白平衡系数R</AttribInfo>
+            <AttribDefault>50</AttribDefault>
+            <AttribRange>0-100</AttribRange>
+          </白天白平衡系数R>
+          <白天白平衡系数B>
+            <AttribType>0</AttribType>
+            <AttribInfo>手动&amp;白天白平衡系数B</AttribInfo>
+            <AttribDefault>50</AttribDefault>
+            <AttribRange>0-100</AttribRange>
+          </白天白平衡系数B>
+          <夜间白平衡系数R>
+            <AttribType>0</AttribType>
+            <AttribInfo>手动&amp;夜间白平衡系数R</AttribInfo>
+            <AttribDefault>50</AttribDefault>
+            <AttribRange>0-100</AttribRange>
+          </夜间白平衡系数R>
+          <夜间白平衡系数B>
+            <AttribType>0</AttribType>
+            <AttribInfo>手动&amp;夜间白平衡系数B</AttribInfo>
+            <AttribDefault>50</AttribDefault>
+            <AttribRange>0-100</AttribRange>
+          </夜间白平衡系数B>
+        </手动>
+        <白天自动夜间手动>
+          <夜间白平衡系数R>
+            <AttribType>1</AttribType>
+            <AttribInfo>夜间白平衡系数R&amp;范围1-7</AttribInfo>
+            <AttribDefault>1.000000</AttribDefault>
+            <AttribRange>0.000000-7.000000</AttribRange>
+          </夜间白平衡系数R>
+          <夜间白平衡系数B>
+            <AttribType>1</AttribType>
+            <AttribInfo>夜间白平衡系数B&amp;范围1-7</AttribInfo>
+            <AttribDefault>1.000000</AttribDefault>
+            <AttribRange>0.000000-7.000000</AttribRange>
+          </夜间白平衡系数B>
+          <夜间白平衡系数G>
+            <AttribType>1</AttribType>
+            <AttribInfo>夜间白平衡系数G&amp;范围1-7</AttribInfo>
+            <AttribDefault>1.000000</AttribDefault>
+            <AttribRange>0.000000-7.000000</AttribRange>
+          </夜间白平衡系数G>
+        </白天自动夜间手动>
+        <白天手动夜间自动>
+          <白天白平衡系数R>
+            <AttribType>0</AttribType>
+            <AttribInfo>白天手动夜间自动&amp;白天白平衡系数R</AttribInfo>
+            <AttribDefault>50</AttribDefault>
+            <AttribRange>0-100</AttribRange>
+          </白天白平衡系数R>
+          <白天白平衡系数B>
+            <AttribType>0</AttribType>
+            <AttribInfo>白天手动夜间自动&amp;白天白平衡系数B</AttribInfo>
+            <AttribDefault>50</AttribDefault>
+            <AttribRange>0-100</AttribRange>
+          </白天白平衡系数B>
+        </白天手动夜间自动>
+      </白平衡设置>
+      <外设设置>
+        <同步电源开关>
+          <AttribType>3</AttribType>
+          <AttribInfo>同步电源开关</AttribInfo>
+          <AttribDefault>0</AttribDefault>
+          <AttribRange>2:0-开启&amp;1-关闭</AttribRange>
+        </同步电源开关>
+        <同步相位>
+          <AttribType>0</AttribType>
+          <AttribInfo>同步相位</AttribInfo>
+          <AttribDefault>4000</AttribDefault>
+          <AttribRange>0-19999</AttribRange>
+        </同步相位>
+        <信号频率>
+          <AttribType>0</AttribType>
+          <AttribInfo>信号频率</AttribInfo>
+          <AttribDefault>50</AttribDefault>
+          <AttribRange>0-100</AttribRange>
+        </信号频率>
+        <频闪灯开关>
+          <AttribType>3</AttribType>
+          <AttribInfo>频闪灯开关</AttribInfo>
+          <AttribDefault>2</AttribDefault>
+          <AttribRange>4:0-不启用&amp;1-一直启用&amp;2-按亮度启用&amp;3-按时间启用</AttribRange>
+        </频闪灯开关>
+        <频闪灯相位>
+          <AttribType>0</AttribType>
+          <AttribInfo>频闪灯相位</AttribInfo>
+          <AttribDefault>4000</AttribDefault>
+          <AttribRange>1-9999</AttribRange>
+        </频闪灯相位>
+        <频闪灯脉宽>
+          <AttribType>0</AttribType>
+          <AttribInfo>频闪灯脉宽</AttribInfo>
+          <AttribDefault>3000</AttribDefault>
+          <AttribRange>1-9999</AttribRange>
+        </频闪灯脉宽>
+        <频闪灯倍频>
+          <AttribType>0</AttribType>
+          <AttribInfo>频闪灯倍频</AttribInfo>
+          <AttribDefault>50</AttribDefault>
+          <AttribRange>0-100</AttribRange>
+        </频闪灯倍频>
+        <频闪灯极性>
+          <AttribType>3</AttribType>
+          <AttribInfo>频闪灯极性</AttribInfo>
+          <AttribDefault>1</AttribDefault>
+          <AttribRange>2:0-高电平&amp;1-低电平</AttribRange>
+        </频闪灯极性>
+        <频闪灯亮度阈值>
+          <AttribType>0</AttribType>
+          <AttribInfo>频闪灯亮度阈值</AttribInfo>
+          <AttribDefault>50</AttribDefault>
+          <AttribRange>0-100</AttribRange>
+        </频闪灯亮度阈值>
+        <频闪灯开启时间>
+          <AttribType>5</AttribType>
+          <AttribInfo>频闪灯开启时间</AttribInfo>
+          <AttribDefault>Time:00_00_00</AttribDefault>
+          <AttribRange>MaxTime:23_59_59-MinTime:00_00_00</AttribRange>
+        </频闪灯开启时间>
+        <频闪灯关闭时间>
+          <AttribType>5</AttribType>
+          <AttribInfo>频闪灯关闭时间</AttribInfo>
+          <AttribDefault>Time:00_00_00</AttribDefault>
+          <AttribRange>MaxTime:23_59_59-MinTime:00_00_00</AttribRange>
+        </频闪灯关闭时间>
+        <闪光灯开关>
+          <AttribType>3</AttribType>
+          <AttribInfo>闪光灯开关</AttribInfo>
+          <AttribDefault>0</AttribDefault>
+          <AttribRange>4:0-不启用&amp;1-一直启用&amp;2-按亮度启用&amp;3-按时间启用</AttribRange>
+        </闪光灯开关>
+        <闪光灯脉宽>
+          <AttribType>0</AttribType>
+          <AttribInfo>闪光灯脉宽</AttribInfo>
+          <AttribDefault>50</AttribDefault>
+          <AttribRange>0-100</AttribRange>
+        </闪光灯脉宽>
+        <闪光灯极性>
+          <AttribType>3</AttribType>
+          <AttribInfo>闪光灯极性</AttribInfo>
+          <AttribDefault>0</AttribDefault>
+          <AttribRange>2:0-高电平&amp;1-低电平</AttribRange>
+        </闪光灯极性>
+        <闪光灯亮度阀值>
+          <AttribType>0</AttribType>
+          <AttribInfo>闪光灯亮度阀值</AttribInfo>
+          <AttribDefault>50</AttribDefault>
+          <AttribRange>0-100</AttribRange>
+        </闪光灯亮度阀值>
+        <闪光灯开启时间>
+          <AttribType>5</AttribType>
+          <AttribInfo>闪光灯开启时间</AttribInfo>
+          <AttribDefault>Time:00_00_00</AttribDefault>
+          <AttribRange>MaxTime:23_59_59-MinTime:00_00_00</AttribRange>
+        </闪光灯开启时间>
+        <闪光灯关闭时间>
+          <AttribType>5</AttribType>
+          <AttribInfo>闪光灯关闭时间</AttribInfo>
+          <AttribDefault>Time:00_00_00</AttribDefault>
+          <AttribRange>MaxTime:23_59_59-MinTime:00_00_00</AttribRange>
+        </闪光灯关闭时间>
+        <偏振片开关>
+          <AttribType>3</AttribType>
+          <AttribInfo>偏振片开关</AttribInfo>
+          <AttribDefault>0</AttribDefault>
+          <AttribRange>4:0-不启用&amp;1-一直启用&amp;2-按亮度启用&amp;3-按时间启用</AttribRange>
+        </偏振片开关>
+        <偏振片开启快门>
+          <AttribType>0</AttribType>
+          <AttribInfo>偏振片开启快门</AttribInfo>
+          <AttribDefault>50</AttribDefault>
+          <AttribRange>0-100</AttribRange>
+        </偏振片开启快门>
+        <偏振片开启时间>
+          <AttribType>5</AttribType>
+          <AttribInfo>偏振片开启时间</AttribInfo>
+          <AttribDefault>Time:00_00_00</AttribDefault>
+          <AttribRange>MaxTime:23_59_59-MinTime:00_00_00</AttribRange>
+        </偏振片开启时间>
+        <偏振片关闭时间>
+          <AttribType>5</AttribType>
+          <AttribInfo>偏振片关闭时间</AttribInfo>
+          <AttribDefault>Time:00_00_00</AttribDefault>
+          <AttribRange>MaxTime:23_59_59-MinTime:00_00_00</AttribRange>
+        </偏振片关闭时间>
+        <白昼切换>
+          <AttribType>3</AttribType>
+          <AttribInfo>白昼切换</AttribInfo>
+          <AttribDefault>2</AttribDefault>
+          <AttribRange>3:0-白天模式&amp;1-夜间模式&amp;2-调光控制</AttribRange>
+        </白昼切换>
+        <偏振镜开启阈值>
+          <AttribType>1</AttribType>
+          <AttribInfo></AttribInfo>
+          <AttribDefault>10.000000</AttribDefault>
+          <AttribRange>0.000000-100.000000</AttribRange>
+        </偏振镜开启阈值>
+      </外设设置>
+    </成像参数设置>
+    <码流设置>
+      <主码流>
+        <码率>
+          <AttribType>0</AttribType>
+          <AttribInfo>码率</AttribInfo>
+          <AttribDefault>3000</AttribDefault>
+          <AttribRange>0-5000</AttribRange>
+        </码率>
+        <I帧间隔>
+          <AttribType>0</AttribType>
+          <AttribInfo>I帧间隔</AttribInfo>
+          <AttribDefault>8</AttribDefault>
+          <AttribRange>0-100</AttribRange>
+        </I帧间隔>
+        <编码格式>
+          <AttribType>3</AttribType>
+          <AttribInfo>编码格式</AttribInfo>
+          <AttribDefault>0</AttribDefault>
+          <AttribRange></AttribRange>
+        </编码格式>
+        <码流类型>
+          <AttribType>3</AttribType>
+          <AttribInfo>码流类型</AttribInfo>
+          <AttribDefault>0</AttribDefault>
+          <AttribRange>2:0-CBR&amp;1-VBR</AttribRange>
+        </码流类型>
+        <分辨率>
+          <AttribType>3</AttribType>
+          <AttribInfo>分辨率</AttribInfo>
+          <AttribDefault>0</AttribDefault>
+          <AttribRange>5:0-全分辨率&amp;1-P1080&amp;2-P720&amp;3-D1&amp;4-Cif</AttribRange>
+        </分辨率>
+      </主码流>
+      <子码流>
+        <码率>
+          <AttribType>0</AttribType>
+          <AttribInfo>码率</AttribInfo>
+          <AttribDefault>512</AttribDefault>
+          <AttribRange>0-5000</AttribRange>
+        </码率>
+        <I帧间隔>
+          <AttribType>0</AttribType>
+          <AttribInfo>I帧间隔</AttribInfo>
+          <AttribDefault>8</AttribDefault>
+          <AttribRange>0-100</AttribRange>
+        </I帧间隔>
+        <编码格式>
+          <AttribType>3</AttribType>
+          <AttribInfo>编码格式</AttribInfo>
+          <AttribDefault>0</AttribDefault>
+          <AttribRange></AttribRange>
+        </编码格式>
+        <码流类型>
+          <AttribType>3</AttribType>
+          <AttribInfo>码流类型</AttribInfo>
+          <AttribDefault>0</AttribDefault>
+          <AttribRange>2:0-CBR&amp;1-VBR</AttribRange>
+        </码流类型>
+        <分辨率>
+          <AttribType>3</AttribType>
+          <AttribInfo>分辨率</AttribInfo>
+          <AttribDefault>0</AttribDefault>
+          <AttribRange>5:0-全分辨率&amp;1-P1080&amp;2-P720&amp;3-D1&amp;4-Cif</AttribRange>
+        </分辨率>
+      </子码流>
+    </码流设置>
+    <设备配置信息>
+      <设备编号>
+        <AttribType>2</AttribType>
+        <AttribInfo>设备编号</AttribInfo>
+        <AttribDefault></AttribDefault>
+        <AttribRange>64</AttribRange>
+      </设备编号>
+      <设备名称>
+        <AttribType>2</AttribType>
+        <AttribInfo>设备名称</AttribInfo>
+        <AttribDefault></AttribDefault>
+        <AttribRange>64</AttribRange>
+      </设备名称>
+      <地点编号>
+        <AttribType>2</AttribType>
+        <AttribInfo>地点编号</AttribInfo>
+        <AttribDefault></AttribDefault>
+        <AttribRange>64</AttribRange>
+      </地点编号>
+      <地点名称>
+        <AttribType>2</AttribType>
+        <AttribInfo>地点名称</AttribInfo>
+        <AttribDefault></AttribDefault>
+        <AttribRange>64</AttribRange>
+      </地点名称>
+      <方向编号>
+        <AttribType>2</AttribType>
+        <AttribInfo>方向编号</AttribInfo>
+        <AttribDefault></AttribDefault>
+        <AttribRange>64</AttribRange>
+      </方向编号>
+      <方向名称>
+        <AttribType>2</AttribType>
+        <AttribInfo>方向名称</AttribInfo>
+        <AttribDefault></AttribDefault>
+        <AttribRange>64</AttribRange>
+      </方向名称>
+      <扩展信息1>
+        <AttribType>2</AttribType>
+        <AttribInfo>扩展信息1</AttribInfo>
+        <AttribDefault></AttribDefault>
+        <AttribRange>64</AttribRange>
+      </扩展信息1>
+      <扩展信息2>
+        <AttribType>2</AttribType>
+        <AttribInfo>扩展信息2</AttribInfo>
+        <AttribDefault></AttribDefault>
+        <AttribRange>64</AttribRange>
+      </扩展信息2>
+      <扩展信息3>
+        <AttribType>2</AttribType>
+        <AttribInfo>扩展信息3</AttribInfo>
+        <AttribDefault></AttribDefault>
+        <AttribRange>64</AttribRange>
+      </扩展信息3>
+      <扩展信息4>
+        <AttribType>2</AttribType>
+        <AttribInfo>扩展信息4</AttribInfo>
+        <AttribDefault></AttribDefault>
+        <AttribRange>64</AttribRange>
+      </扩展信息4>
+      <扩展信息5>
+        <AttribType>2</AttribType>
+        <AttribInfo>扩展信息5</AttribInfo>
+        <AttribDefault></AttribDefault>
+        <AttribRange>64</AttribRange>
+      </扩展信息5>
+      <扩展信息6>
+        <AttribType>2</AttribType>
+        <AttribInfo>扩展信息6</AttribInfo>
+        <AttribDefault></AttribDefault>
+        <AttribRange>64</AttribRange>
+      </扩展信息6>
+    </设备配置信息>
+    <存储设置>
+      <路径>
+        <AttribType>2</AttribType>
+        <AttribInfo>路径</AttribInfo>
+        <AttribDefault></AttribDefault>
+        <AttribRange>64</AttribRange>
+      </路径>
+    </存储设置>
+    <网络校时>
+      <中心校时>
+        <AttribType>4</AttribType>
+        <AttribInfo>中心校时</AttribInfo>
+        <AttribDefault>1</AttribDefault>
+        <AttribRange />
+      </中心校时>
+    </网络校时>
+    <网络设置>
+      <数据服务器>
+        <IP地址>
+          <AttribType>2</AttribType>
+          <AttribInfo>IP地址</AttribInfo>
+          <AttribDefault></AttribDefault>
+          <AttribRange>64</AttribRange>
+        </IP地址>
+        <端口>
+          <AttribType>0</AttribType>
+          <AttribInfo>端口</AttribInfo>
+          <AttribDefault>0</AttribDefault>
+          <AttribRange>1-60000</AttribRange>
+        </端口>
+      </数据服务器>
+    </网络设置>
+  </基础配置>
+  <高级配置>
+    <调试参数>
+      <JPEG压缩比>
+        <AttribType>0</AttribType>
+        <AttribInfo>JPEG压缩比-重启生效</AttribInfo>
+        <AttribDefault>60</AttribDefault>
+        <AttribRange>1-95</AttribRange>
+      </JPEG压缩比>
+      <HD-SDI>
+        <启用HD-SDI>
+          <AttribType>4</AttribType>
+          <AttribInfo>设置HD-SDI需要重启生效</AttribInfo>
+          <AttribDefault>0</AttribDefault>
+          <AttribRange />
+        </启用HD-SDI>
+      </HD-SDI>
+    </调试参数>
+    <定时抓拍>
+      <启用时间1定时抓拍>
+        <AttribType>4</AttribType>
+        <AttribInfo>启用时间1测试抓拍</AttribInfo>
+        <AttribDefault>1</AttribDefault>
+        <AttribRange />
+      </启用时间1定时抓拍>
+      <启用时间2定时抓拍>
+        <AttribType>4</AttribType>
+        <AttribInfo>启用时间2测试抓拍</AttribInfo>
+        <AttribDefault>0</AttribDefault>
+        <AttribRange />
+      </启用时间2定时抓拍>
+      <启用时间3定时抓拍>
+        <AttribType>4</AttribType>
+        <AttribInfo>启用时间3测试抓拍</AttribInfo>
+        <AttribDefault>0</AttribDefault>
+        <AttribRange />
+      </启用时间3定时抓拍>
+      <启用时间4定时抓拍>
+        <AttribType>4</AttribType>
+        <AttribInfo>启用时间4测试抓拍</AttribInfo>
+        <AttribDefault>0</AttribDefault>
+        <AttribRange />
+      </启用时间4定时抓拍>
+      <启用时间5定时抓拍>
+        <AttribType>4</AttribType>
+        <AttribInfo>启用时间5测试抓拍</AttribInfo>
+        <AttribDefault>0</AttribDefault>
+        <AttribRange />
+      </启用时间5定时抓拍>
+      <启用时间6定时抓拍>
+        <AttribType>4</AttribType>
+        <AttribInfo>启用时间6测试抓拍</AttribInfo>
+        <AttribDefault>0</AttribDefault>
+        <AttribRange />
+      </启用时间6定时抓拍>
+      <时间1>
+        <AttribType>5</AttribType>
+        <AttribInfo>时间段1</AttribInfo>
+        <AttribDefault>Time:00_00_00</AttribDefault>
+        <AttribRange>MaxTime:19585_14066_41184-MinTime:00_00_01</AttribRange>
+      </时间1>
+      <时间2>
+        <AttribType>5</AttribType>
+        <AttribInfo>时间段2</AttribInfo>
+        <AttribDefault>Time:00_00_00</AttribDefault>
+        <AttribRange>MaxTime:19585_14066_41184-MinTime:00_00_01</AttribRange>
+      </时间2>
+      <时间3>
+        <AttribType>5</AttribType>
+        <AttribInfo>时间段3</AttribInfo>
+        <AttribDefault>Time:00_00_00</AttribDefault>
+        <AttribRange>MaxTime:19585_14066_41184-MinTime:00_00_01</AttribRange>
+      </时间3>
+      <时间4>
+        <AttribType>5</AttribType>
+        <AttribInfo>时间段4</AttribInfo>
+        <AttribDefault>Time:00_00_00</AttribDefault>
+        <AttribRange>MaxTime:19585_14066_41184-MinTime:00_00_01</AttribRange>
+      </时间4>
+      <时间5>
+        <AttribType>5</AttribType>
+        <AttribInfo>时间段5</AttribInfo>
+        <AttribDefault>Time:00_00_00</AttribDefault>
+        <AttribRange>MaxTime:19585_14066_41184-MinTime:00_00_01</AttribRange>
+      </时间5>
+      <时间6>
+        <AttribType>5</AttribType>
+        <AttribInfo>时间段6</AttribInfo>
+        <AttribDefault>Time:00_00_00</AttribDefault>
+        <AttribRange>MaxTime:19585_14066_41184-MinTime:00_00_01</AttribRange>
+      </时间6>
+      <显示车牌>
+        <AttribType>2</AttribType>
+        <AttribInfo>显示车牌号码</AttribInfo>
+        <AttribDefault></AttribDefault>
+        <AttribRange>64</AttribRange>
+      </显示车牌>
+      <抓拍类型>
+        <AttribType>3</AttribType>
+        <AttribInfo>定时抓拍类型</AttribInfo>
+        <AttribDefault>0</AttribDefault>
+        <AttribRange>24:0-卡口&amp;2-占用公交车道&amp;3-异常停车&amp;4-非法停车&amp;5-压黄线&amp;6-逆行&amp;7-掉头&amp;8-直行闯红灯&amp;9-左转闯红灯&amp;10-右转闯红灯&amp;11-非法直行&amp;12-占用非机动车道&amp;13-非法右转&amp;14-非法左转&amp;21-超速&amp;22-占用应急车道&amp;23-大货车禁行&amp;24-限时单行&amp;25-压白线&amp;26-跨线变道&amp;27-禁止左转&amp;28-禁止右转&amp;29-路口滞留&amp;30-绿灯滞留</AttribRange>
+      </抓拍类型>
+    </定时抓拍>
+    <FTP服务器>
+      <FTP服务开关>
+        <AttribType>3</AttribType>
+        <AttribInfo>FTP服务开关</AttribInfo>
+        <AttribDefault>1</AttribDefault>
+        <AttribRange>2:0-开启&amp;1-关闭</AttribRange>
+      </FTP服务开关>
+      <IP地址>
+        <AttribType>2</AttribType>
+        <AttribInfo>服务器IP地址</AttribInfo>
+        <AttribDefault>192.168.111.114</AttribDefault>
+        <AttribRange>64</AttribRange>
+      </IP地址>
+      <用户名>
+        <AttribType>2</AttribType>
+        <AttribInfo>FTP用户名</AttribInfo>
+        <AttribDefault>ftp01</AttribDefault>
+        <AttribRange>64</AttribRange>
+      </用户名>
+      <密码>
+        <AttribType>2</AttribType>
+        <AttribInfo>FTP密码</AttribInfo>
+        <AttribDefault>123</AttribDefault>
+        <AttribRange>64</AttribRange>
+      </密码>
+      <端口>
+        <AttribType>0</AttribType>
+        <AttribInfo>服务器端口</AttribInfo>
+        <AttribDefault>21</AttribDefault>
+        <AttribRange>0-65535</AttribRange>
+      </端口>
+    </FTP服务器>
+  </高级配置>
+  <录像重启相机生效>
+    <开启短时录像>
+      <AttribType>4</AttribType>
+      <AttribInfo>开启短时录像</AttribInfo>
+      <AttribDefault>0</AttribDefault>
+      <AttribRange />
+    </开启短时录像>
+    <短时录像码流>
+      <AttribType>3</AttribType>
+      <AttribInfo>短时录像使用的码流</AttribInfo>
+      <AttribDefault>0</AttribDefault>
+      <AttribRange>2:0-子码流&amp;1-主码流</AttribRange>
+    </短时录像码流>
+  </录像重启相机生效>
+  <调试配置>
+    <SD卡缓存>
+      <AttribType>4</AttribType>
+      <AttribInfo>SD卡缓存</AttribInfo>
+      <AttribDefault>0</AttribDefault>
+      <AttribRange />
+    </SD卡缓存>
+    <自动删除>
+      <AttribType>4</AttribType>
+      <AttribInfo>自动删除</AttribInfo>
+      <AttribDefault>1</AttribDefault>
+      <AttribRange />
+    </自动删除>
+    <SDcard卡口存储>
+      <AttribType>4</AttribType>
+      <AttribInfo>SDcard卡口存储</AttribInfo>
+      <AttribDefault>1</AttribDefault>
+      <AttribRange />
+    </SDcard卡口存储>
+    <SDcard违章存储>
+      <AttribType>4</AttribType>
+      <AttribInfo>SDcard违章存储</AttribInfo>
+      <AttribDefault>1</AttribDefault>
+      <AttribRange />
+    </SDcard违章存储>
+    <FPGA升级模式>
+      <AttribType>4</AttribType>
+      <AttribInfo>开启后FPGA升级失败不会重启</AttribInfo>
+      <AttribDefault>0</AttribDefault>
+      <AttribRange />
+    </FPGA升级模式>
+  </调试配置>
+  <功能配置>
+    <抓拍参数配置>
+      <抓拍模式>
+        <AttribType>3</AttribType>
+        <AttribInfo>相机模式&amp;重启生效</AttribInfo>
+        <AttribDefault>0</AttribDefault>
+        <AttribRange>3:0-路口电警&amp;2-视频卡口&amp;3-移动公交</AttribRange>
+      </抓拍模式>
+      <路口电警>
+        <压线>
+          <启用>
+            <AttribType>4</AttribType>
+            <AttribInfo>重启生效</AttribInfo>
+            <AttribDefault>1</AttribDefault>
+            <AttribRange />
+          </启用>
+          <灵敏度>
+            <AttribType>0</AttribType>
+            <AttribInfo></AttribInfo>
+            <AttribDefault>50</AttribDefault>
+            <AttribRange>1-100</AttribRange>
+          </灵敏度>
+          <开启时间>
+            <AttribType>2</AttribType>
+            <AttribInfo></AttribInfo>
+            <AttribDefault></AttribDefault>
+            <AttribRange>256</AttribRange>
+          </开启时间>
+        </压线>
+        <跨线变道>
+          <启用>
+            <AttribType>4</AttribType>
+            <AttribInfo>重启生效</AttribInfo>
+            <AttribDefault>0</AttribDefault>
+            <AttribRange />
+          </启用>
+          <开启时间>
+            <AttribType>2</AttribType>
+            <AttribInfo></AttribInfo>
+            <AttribDefault></AttribDefault>
+            <AttribRange>256</AttribRange>
+          </开启时间>
+        </跨线变道>
+        <占用公交车道>
+          <启用算法>
+            <AttribType>4</AttribType>
+            <AttribInfo>重启生效</AttribInfo>
+            <AttribDefault>0</AttribDefault>
+            <AttribRange />
+          </启用算法>
+          <检测车牌类型>
+            <白牌>
+              <AttribType>4</AttribType>
+              <AttribInfo></AttribInfo>
+              <AttribDefault>1</AttribDefault>
+              <AttribRange />
+            </白牌>
+            <黑牌>
+              <AttribType>4</AttribType>
+              <AttribInfo></AttribInfo>
+              <AttribDefault>1</AttribDefault>
+              <AttribRange />
+            </黑牌>
+            <蓝牌>
+              <AttribType>4</AttribType>
+              <AttribInfo></AttribInfo>
+              <AttribDefault>1</AttribDefault>
+              <AttribRange />
+            </蓝牌>
+          </检测车牌类型>
+          <开启时间>
+            <AttribType>2</AttribType>
+            <AttribInfo></AttribInfo>
+            <AttribDefault></AttribDefault>
+            <AttribRange>256</AttribRange>
+          </开启时间>
+        </占用公交车道>
+        <占用非机动车道>
+          <启用算法>
+            <AttribType>4</AttribType>
+            <AttribInfo>重启生效</AttribInfo>
+            <AttribDefault>0</AttribDefault>
+            <AttribRange />
+          </启用算法>
+          <检测车牌类型>
+            <黄牌>
+              <AttribType>4</AttribType>
+              <AttribInfo></AttribInfo>
+              <AttribDefault>1</AttribDefault>
+              <AttribRange />
+            </黄牌>
+            <白牌>
+              <AttribType>4</AttribType>
+              <AttribInfo></AttribInfo>
+              <AttribDefault>1</AttribDefault>
+              <AttribRange />
+            </白牌>
+            <黑牌>
+              <AttribType>4</AttribType>
+              <AttribInfo></AttribInfo>
+              <AttribDefault>1</AttribDefault>
+              <AttribRange />
+            </黑牌>
+            <蓝牌>
+              <AttribType>4</AttribType>
+              <AttribInfo></AttribInfo>
+              <AttribDefault>1</AttribDefault>
+              <AttribRange />
+            </蓝牌>
+          </检测车牌类型>
+          <车牌最小置信度>
+            <AttribType>0</AttribType>
+            <AttribInfo></AttribInfo>
+            <AttribDefault>15</AttribDefault>
+            <AttribRange>0-100</AttribRange>
+          </车牌最小置信度>
+          <开启时间>
+            <AttribType>2</AttribType>
+            <AttribInfo></AttribInfo>
+            <AttribDefault></AttribDefault>
+            <AttribRange>256</AttribRange>
+          </开启时间>
+        </占用非机动车道>
+        <逆行>
+          <启用>
+            <AttribType>4</AttribType>
+            <AttribInfo>重启生效</AttribInfo>
+            <AttribDefault>1</AttribDefault>
+            <AttribRange />
+          </启用>
+          <抓拍位移>
+            <AttribType>0</AttribType>
+            <AttribInfo>单位：米</AttribInfo>
+            <AttribDefault>1</AttribDefault>
+            <AttribRange>1-30</AttribRange>
+          </抓拍位移>
+          <开启时间>
+            <AttribType>2</AttribType>
+            <AttribInfo></AttribInfo>
+            <AttribDefault></AttribDefault>
+            <AttribRange>256</AttribRange>
+          </开启时间>
+          <输出限时单行>
+            <AttribType>4</AttribType>
+            <AttribInfo></AttribInfo>
+            <AttribDefault>0</AttribDefault>
+            <AttribRange />
+          </输出限时单行>
+        </逆行>
+        <非法停车>
+          <启用算法>
+            <AttribType>4</AttribType>
+            <AttribInfo>重启生效</AttribInfo>
+            <AttribDefault>0</AttribDefault>
+            <AttribRange />
+          </启用算法>
+          <非法停车时间>
+            <AttribType>0</AttribType>
+            <AttribInfo>s</AttribInfo>
+            <AttribDefault>5</AttribDefault>
+            <AttribRange>1-3600</AttribRange>
+          </非法停车时间>
+          <与前车最小距离>
+            <AttribType>0</AttribType>
+            <AttribInfo></AttribInfo>
+            <AttribDefault>5</AttribDefault>
+            <AttribRange>1-20</AttribRange>
+          </与前车最小距离>
+          <开启时间>
+            <AttribType>2</AttribType>
+            <AttribInfo></AttribInfo>
+            <AttribDefault></AttribDefault>
+            <AttribRange>256</AttribRange>
+          </开启时间>
+        </非法停车>
+        <流量统计>
+          <启用>
+            <AttribType>4</AttribType>
+            <AttribInfo>重启生效</AttribInfo>
+            <AttribDefault>1</AttribDefault>
+            <AttribRange />
+          </启用>
+          <时间间隔>
+            <AttribType>0</AttribType>
+            <AttribInfo>单位：秒</AttribInfo>
+            <AttribDefault>60</AttribDefault>
+            <AttribRange>1-3600</AttribRange>
+          </时间间隔>
+        </流量统计>
+        <路口滞留>
+          <启用>
+            <AttribType>4</AttribType>
+            <AttribInfo>重启生效</AttribInfo>
+            <AttribDefault>0</AttribDefault>
+            <AttribRange />
+          </启用>
+          <拥堵后多少秒开始检测>
+            <AttribType>0</AttribType>
+            <AttribInfo>单位：秒</AttribInfo>
+            <AttribDefault>1</AttribDefault>
+            <AttribRange>0-10</AttribRange>
+          </拥堵后多少秒开始检测>
+          <LED屏信号延迟>
+            <AttribType>0</AttribType>
+            <AttribInfo>单位：毫秒</AttribInfo>
+            <AttribDefault>500</AttribDefault>
+            <AttribRange>100-10000</AttribRange>
+          </LED屏信号延迟>
+          <是否检测左转>
+            <AttribType>4</AttribType>
+            <AttribInfo></AttribInfo>
+            <AttribDefault>0</AttribDefault>
+            <AttribRange />
+          </是否检测左转>
+          <是否检测右转>
+            <AttribType>4</AttribType>
+            <AttribInfo></AttribInfo>
+            <AttribDefault>0</AttribDefault>
+            <AttribRange />
+          </是否检测右转>
+          <开启时间>
+            <AttribType>2</AttribType>
+            <AttribInfo></AttribInfo>
+            <AttribDefault></AttribDefault>
+            <AttribRange>256</AttribRange>
+          </开启时间>
+          <车辆阈值>
+            <AttribType>0</AttribType>
+            <AttribInfo></AttribInfo>
+            <AttribDefault>5</AttribDefault>
+            <AttribRange>1-30</AttribRange>
+          </车辆阈值>
+          <速度阈值>
+            <AttribType>0</AttribType>
+            <AttribInfo>公里每小时</AttribInfo>
+            <AttribDefault>5</AttribDefault>
+            <AttribRange>1-30</AttribRange>
+          </速度阈值>
+          <拥堵后LED屏最少亮起多少秒>
+            <AttribType>0</AttribType>
+            <AttribInfo></AttribInfo>
+            <AttribDefault>5</AttribDefault>
+            <AttribRange>1-30</AttribRange>
+          </拥堵后LED屏最少亮起多少秒>
+        </路口滞留>
+        <绿灯滞留>
+          <启用>
+            <AttribType>4</AttribType>
+            <AttribInfo>重启生效</AttribInfo>
+            <AttribDefault>0</AttribDefault>
+            <AttribRange />
+          </启用>
+          <判定滞留时间>
+            <AttribType>0</AttribType>
+            <AttribInfo>单位：秒</AttribInfo>
+            <AttribDefault>10</AttribDefault>
+            <AttribRange>1-3600</AttribRange>
+          </判定滞留时间>
+          <开启时间>
+            <AttribType>2</AttribType>
+            <AttribInfo></AttribInfo>
+            <AttribDefault></AttribDefault>
+            <AttribRange>256</AttribRange>
+          </开启时间>
+        </绿灯滞留>
+        <大货车禁行>
+          <开启>
+            <AttribType>4</AttribType>
+            <AttribInfo>重启生效</AttribInfo>
+            <AttribDefault>0</AttribDefault>
+            <AttribRange />
+          </开启>
+          <黄牌即认为是大货车>
+            <AttribType>4</AttribType>
+            <AttribInfo></AttribInfo>
+            <AttribDefault>0</AttribDefault>
+            <AttribRange />
+          </黄牌即认为是大货车>
+          <开启时间>
+            <AttribType>2</AttribType>
+            <AttribInfo></AttribInfo>
+            <AttribDefault></AttribDefault>
+            <AttribRange>256</AttribRange>
+          </开启时间>
+        </大货车禁行>
+        <行人检测>
+          <启用>
+            <AttribType>4</AttribType>
+            <AttribInfo>重启生效</AttribInfo>
+            <AttribDefault>0</AttribDefault>
+            <AttribRange />
+          </启用>
+          <灵敏度>
+            <AttribType>0</AttribType>
+            <AttribInfo></AttribInfo>
+            <AttribDefault>50</AttribDefault>
+            <AttribRange>0-100</AttribRange>
+          </灵敏度>
+        </行人检测>
+        <拥堵检测>
+          <启用>
+            <AttribType>4</AttribType>
+            <AttribInfo>重启生效</AttribInfo>
+            <AttribDefault>0</AttribDefault>
+            <AttribRange />
+          </启用>
+          <拥堵>
+            <车辆阈值>
+              <AttribType>0</AttribType>
+              <AttribInfo></AttribInfo>
+              <AttribDefault>5</AttribDefault>
+              <AttribRange>1-30</AttribRange>
+            </车辆阈值>
+            <速度阈值>
+              <AttribType>0</AttribType>
+              <AttribInfo>公里每小时</AttribInfo>
+              <AttribDefault>5</AttribDefault>
+              <AttribRange>1-30</AttribRange>
+            </速度阈值>
+          </拥堵>
+          <缓行>
+            <车辆阈值>
+              <AttribType>0</AttribType>
+              <AttribInfo></AttribInfo>
+              <AttribDefault>3</AttribDefault>
+              <AttribRange>1-30</AttribRange>
+            </车辆阈值>
+            <速度阈值>
+              <AttribType>0</AttribType>
+              <AttribInfo>公里每小时</AttribInfo>
+              <AttribDefault>10</AttribDefault>
+              <AttribRange>1-30</AttribRange>
+            </速度阈值>
+          </缓行>
+        </拥堵检测>
+        <占有率超限>
+          <启用>
+            <AttribType>4</AttribType>
+            <AttribInfo>重启生效</AttribInfo>
+            <AttribDefault>0</AttribDefault>
+            <AttribRange />
+          </启用>
+          <阈值>
+            <AttribType>0</AttribType>
+            <AttribInfo>单位：</AttribInfo>
+            <AttribDefault>80</AttribDefault>
+            <AttribRange>0-100</AttribRange>
+          </阈值>
+        </占有率超限>
+        <车辆慢行>
+          <启用>
+            <AttribType>4</AttribType>
+            <AttribInfo>重启生效</AttribInfo>
+            <AttribDefault>0</AttribDefault>
+            <AttribRange />
+          </启用>
+          <速度阈值>
+            <AttribType>0</AttribType>
+            <AttribInfo></AttribInfo>
+            <AttribDefault>10</AttribDefault>
+            <AttribRange>0-100</AttribRange>
+          </速度阈值>
+        </车辆慢行>
+        <异常停车>
+          <启用>
+            <AttribType>4</AttribType>
+            <AttribInfo>重启生效</AttribInfo>
+            <AttribDefault>0</AttribDefault>
+            <AttribRange />
+          </启用>
+          <停车时长>
+            <AttribType>0</AttribType>
+            <AttribInfo>单位：秒</AttribInfo>
+            <AttribDefault>10</AttribDefault>
+            <AttribRange>0-360</AttribRange>
+          </停车时长>
+        </异常停车>
+        <礼让行人>
+          <开启>
+            <AttribType>4</AttribType>
+            <AttribInfo>重启生效</AttribInfo>
+            <AttribDefault>0</AttribDefault>
+            <AttribRange />
+          </开启>
+          <横向检测范围>
+            <AttribType>1</AttribType>
+            <AttribInfo>单位：米</AttribInfo>
+            <AttribDefault>5.000000</AttribDefault>
+            <AttribRange>0.000000-20.000000</AttribRange>
+          </横向检测范围>
+          <纵向检测范围>
+            <AttribType>1</AttribType>
+            <AttribInfo>单位：米</AttribInfo>
+            <AttribDefault>5.000000</AttribDefault>
+            <AttribRange>0.000000-20.000000</AttribRange>
+          </纵向检测范围>
+          <速度上限>
+            <AttribType>1</AttribType>
+            <AttribInfo>单位：米每秒</AttribInfo>
+            <AttribDefault>5.000000</AttribDefault>
+            <AttribRange>0.000000-20.000000</AttribRange>
+          </速度上限>
+          <开启时间>
+            <AttribType>2</AttribType>
+            <AttribInfo></AttribInfo>
+            <AttribDefault></AttribDefault>
+            <AttribRange>256</AttribRange>
+          </开启时间>
+        </礼让行人>
+        <闯红灯>
+          <直行闯红灯>
+            <启用>
+              <AttribType>4</AttribType>
+              <AttribInfo>重启生效</AttribInfo>
+              <AttribDefault>1</AttribDefault>
+              <AttribRange />
+            </启用>
+          </直行闯红灯>
+          <左转闯红灯>
+            <启用>
+              <AttribType>4</AttribType>
+              <AttribInfo>重启生效</AttribInfo>
+              <AttribDefault>1</AttribDefault>
+              <AttribRange />
+            </启用>
+          </左转闯红灯>
+          <右转闯红灯>
+            <启用>
+              <AttribType>4</AttribType>
+              <AttribInfo>重启生效</AttribInfo>
+              <AttribDefault>1</AttribDefault>
+              <AttribRange />
+            </启用>
+          </右转闯红灯>
+          <开启时间>
+            <AttribType>2</AttribType>
+            <AttribInfo></AttribInfo>
+            <AttribDefault></AttribDefault>
+            <AttribRange>256</AttribRange>
+          </开启时间>
+          <左转兼顾直行灯>
+            <AttribType>4</AttribType>
+            <AttribInfo></AttribInfo>
+            <AttribDefault>0</AttribDefault>
+            <AttribRange />
+          </左转兼顾直行灯>
+          <第3张图限制线前抓>
+            <AttribType>4</AttribType>
+            <AttribInfo></AttribInfo>
+            <AttribDefault>0</AttribDefault>
+            <AttribRange />
+          </第3张图限制线前抓>
+          <第二张距离>
+            <AttribType>1</AttribType>
+            <AttribInfo>重启生效。第二张超过停止线多少个车身</AttribInfo>
+            <AttribDefault>0.000000</AttribDefault>
+            <AttribRange>-0.500000-2.000000</AttribRange>
+          </第二张距离>
+          <过滤闯红灯压线目标>
+            <AttribType>4</AttribType>
+            <AttribInfo>重启生效</AttribInfo>
+            <AttribDefault>0</AttribDefault>
+            <AttribRange />
+          </过滤闯红灯压线目标>
+          <输出4张全景>
+            <开启>
+              <AttribType>4</AttribType>
+              <AttribInfo></AttribInfo>
+              <AttribDefault>0</AttribDefault>
+              <AttribRange />
+            </开启>
+            <第4张延时间隔>
+              <AttribType>0</AttribType>
+              <AttribInfo>单位：毫秒</AttribInfo>
+              <AttribDefault>100</AttribDefault>
+              <AttribRange>1-1000</AttribRange>
+            </第4张延时间隔>
+          </输出4张全景>
+        </闯红灯>
+        <不按导向行使>
+          <非法直行>
+            <启用>
+              <AttribType>4</AttribType>
+              <AttribInfo>重启生效</AttribInfo>
+              <AttribDefault>1</AttribDefault>
+              <AttribRange />
+            </启用>
+          </非法直行>
+          <非法左转>
+            <启用>
+              <AttribType>4</AttribType>
+              <AttribInfo>重启生效</AttribInfo>
+              <AttribDefault>1</AttribDefault>
+              <AttribRange />
+            </启用>
+          </非法左转>
+          <非法右转>
+            <启用>
+              <AttribType>4</AttribType>
+              <AttribInfo>重启生效</AttribInfo>
+              <AttribDefault>1</AttribDefault>
+              <AttribRange />
+            </启用>
+          </非法右转>
+          <检测车牌类型>
+            <黄牌>
+              <AttribType>4</AttribType>
+              <AttribInfo></AttribInfo>
+              <AttribDefault>1</AttribDefault>
+              <AttribRange />
+            </黄牌>
+            <白牌>
+              <AttribType>4</AttribType>
+              <AttribInfo></AttribInfo>
+              <AttribDefault>1</AttribDefault>
+              <AttribRange />
+            </白牌>
+            <黑牌>
+              <AttribType>4</AttribType>
+              <AttribInfo></AttribInfo>
+              <AttribDefault>1</AttribDefault>
+              <AttribRange />
+            </黑牌>
+            <蓝牌>
+              <AttribType>4</AttribType>
+              <AttribInfo></AttribInfo>
+              <AttribDefault>1</AttribDefault>
+              <AttribRange />
+            </蓝牌>
+          </检测车牌类型>
+          <开启时间>
+            <AttribType>2</AttribType>
+            <AttribInfo></AttribInfo>
+            <AttribDefault></AttribDefault>
+            <AttribRange>256</AttribRange>
+          </开启时间>
+          <过滤变道压线目标>
+            <AttribType>4</AttribType>
+            <AttribInfo>重启生效</AttribInfo>
+            <AttribDefault>0</AttribDefault>
+            <AttribRange />
+          </过滤变道压线目标>
+        </不按导向行使>
+        <禁行>
+          <禁止左转>
+            <启用>
+              <AttribType>4</AttribType>
+              <AttribInfo>重启生效</AttribInfo>
+              <AttribDefault>0</AttribDefault>
+              <AttribRange />
+            </启用>
+            <检测车牌类型>
+              <黄牌>
+                <AttribType>4</AttribType>
+                <AttribInfo></AttribInfo>
+                <AttribDefault>1</AttribDefault>
+                <AttribRange />
+              </黄牌>
+              <白牌>
+                <AttribType>4</AttribType>
+                <AttribInfo></AttribInfo>
+                <AttribDefault>1</AttribDefault>
+                <AttribRange />
+              </白牌>
+              <黑牌>
+                <AttribType>4</AttribType>
+                <AttribInfo></AttribInfo>
+                <AttribDefault>1</AttribDefault>
+                <AttribRange />
+              </黑牌>
+              <蓝牌>
+                <AttribType>4</AttribType>
+                <AttribInfo></AttribInfo>
+                <AttribDefault>1</AttribDefault>
+                <AttribRange />
+              </蓝牌>
+            </检测车牌类型>
+            <开启时间>
+              <AttribType>2</AttribType>
+              <AttribInfo></AttribInfo>
+              <AttribDefault></AttribDefault>
+              <AttribRange>256</AttribRange>
+            </开启时间>
+          </禁止左转>
+          <禁止右转>
+            <启用>
+              <AttribType>4</AttribType>
+              <AttribInfo>root\功能配置\抓拍参数配置\路口电警\禁行\禁止右转\启用</AttribInfo>
+              <AttribDefault>0</AttribDefault>
+              <AttribRange />
+            </启用>
+            <检测车牌类型>
+              <黄牌>
+                <AttribType>4</AttribType>
+                <AttribInfo></AttribInfo>
+                <AttribDefault>1</AttribDefault>
+                <AttribRange />
+              </黄牌>
+              <白牌>
+                <AttribType>4</AttribType>
+                <AttribInfo></AttribInfo>
+                <AttribDefault>1</AttribDefault>
+                <AttribRange />
+              </白牌>
+              <黑牌>
+                <AttribType>4</AttribType>
+                <AttribInfo></AttribInfo>
+                <AttribDefault>1</AttribDefault>
+                <AttribRange />
+              </黑牌>
+              <蓝牌>
+                <AttribType>4</AttribType>
+                <AttribInfo></AttribInfo>
+                <AttribDefault>1</AttribDefault>
+                <AttribRange />
+              </蓝牌>
+            </检测车牌类型>
+            <开启时间>
+              <AttribType>2</AttribType>
+              <AttribInfo></AttribInfo>
+              <AttribDefault></AttribDefault>
+              <AttribRange>256</AttribRange>
+            </开启时间>
+          </禁止右转>
+        </禁行>
+        <检测违法时间段>
+          <AttribType>2</AttribType>
+          <AttribInfo></AttribInfo>
+          <AttribDefault></AttribDefault>
+          <AttribRange>256</AttribRange>
+        </检测违法时间段>
+        <占用紧急车道>
+          <开启时间>
+            <AttribType>2</AttribType>
+            <AttribInfo>root\功能配置\抓拍参数配置\路口电警\占用紧急车道\开启时间</AttribInfo>
+            <AttribDefault></AttribDefault>
+            <AttribRange>256</AttribRange>
+          </开启时间>
+          <启用算法>
+            <AttribType>4</AttribType>
+            <AttribInfo>重启生效</AttribInfo>
+            <AttribDefault>0</AttribDefault>
+            <AttribRange />
+          </启用算法>
+        </占用紧急车道>
+        <非法掉头>
+          <开启时间>
+            <AttribType>2</AttribType>
+            <AttribInfo></AttribInfo>
+            <AttribDefault></AttribDefault>
+            <AttribRange>256</AttribRange>
+          </开启时间>
+          <启用算法>
+            <AttribType>4</AttribType>
+            <AttribInfo>重启生效</AttribInfo>
+            <AttribDefault>0</AttribDefault>
+            <AttribRange />
+          </启用算法>
+        </非法掉头>
+        <卡口>
+          <输出卡口图片>
+            <AttribType>4</AttribType>
+            <AttribInfo></AttribInfo>
+            <AttribDefault>1</AttribDefault>
+            <AttribRange />
+          </输出卡口图片>
+          <卡口抓两张图>
+            <AttribType>4</AttribType>
+            <AttribInfo></AttribInfo>
+            <AttribDefault>0</AttribDefault>
+            <AttribRange />
+          </卡口抓两张图>
+          <下行车辆不输出卡口结果>
+            <AttribType>4</AttribType>
+            <AttribInfo></AttribInfo>
+            <AttribDefault>0</AttribDefault>
+            <AttribRange />
+          </下行车辆不输出卡口结果>
+        </卡口>
+        <违法取图间隔时间>
+          <AttribType>0</AttribType>
+          <AttribInfo>单位：毫秒&amp;&amp;适用于逆行&amp;占道</AttribInfo>
+          <AttribDefault>800</AttribDefault>
+          <AttribRange>100-10000</AttribRange>
+        </违法取图间隔时间>
+        <占道类违法取图最小行进距离>
+          <AttribType>0</AttribType>
+          <AttribInfo>单位：米</AttribInfo>
+          <AttribDefault>5</AttribDefault>
+          <AttribRange>0-30</AttribRange>
+        </占道类违法取图最小行进距离>
+        <特写图抠图比例>
+          <AttribType>1</AttribType>
+          <AttribInfo></AttribInfo>
+          <AttribDefault>2.000000</AttribDefault>
+          <AttribRange>1.000000-5.000000</AttribRange>
+        </特写图抠图比例>
+        <使用违法优先级>
+          <AttribType>4</AttribType>
+          <AttribInfo>重启生效</AttribInfo>
+          <AttribDefault>1</AttribDefault>
+          <AttribRange />
+        </使用违法优先级>
+        <虚拟线圈>
+          <显示>
+            <AttribType>4</AttribType>
+            <AttribInfo></AttribInfo>
+            <AttribDefault>0</AttribDefault>
+            <AttribRange />
+          </显示>
+          <线圈1启用>
+            <AttribType>4</AttribType>
+            <AttribInfo></AttribInfo>
+            <AttribDefault>0</AttribDefault>
+            <AttribRange />
+          </线圈1启用>
+          <线圈2启用>
+            <AttribType>4</AttribType>
+            <AttribInfo></AttribInfo>
+            <AttribDefault>0</AttribDefault>
+            <AttribRange />
+          </线圈2启用>
+          <线圈3启用>
+            <AttribType>4</AttribType>
+            <AttribInfo></AttribInfo>
+            <AttribDefault>0</AttribDefault>
+            <AttribRange />
+          </线圈3启用>
+          <线圈1位置>
+            <AttribType>1</AttribType>
+            <AttribInfo>单位：米</AttribInfo>
+            <AttribDefault>15.000000</AttribDefault>
+            <AttribRange>1.000000-100.000000</AttribRange>
+          </线圈1位置>
+          <线圈2位置>
+            <AttribType>1</AttribType>
+            <AttribInfo>单位：米</AttribInfo>
+            <AttribDefault>30.000000</AttribDefault>
+            <AttribRange>1.000000-100.000000</AttribRange>
+          </线圈2位置>
+          <线圈3位置>
+            <AttribType>1</AttribType>
+            <AttribInfo>单位：米</AttribInfo>
+            <AttribDefault>45.000000</AttribDefault>
+            <AttribRange>1.000000-100.000000</AttribRange>
+          </线圈3位置>
+        </虚拟线圈>
+      </路口电警>
+    </抓拍参数配置>
+    <相机架设>
+      <焦距>
+        <AttribType>1</AttribType>
+        <AttribInfo>单位：毫米</AttribInfo>
+        <AttribDefault>16.000000</AttribDefault>
+        <AttribRange>5.000000-50.000000</AttribRange>
+      </焦距>
+      <杆高度>
+        <AttribType>1</AttribType>
+        <AttribInfo>单位：米</AttribInfo>
+        <AttribDefault>6.500000</AttribDefault>
+        <AttribRange>1.000000-10.000000</AttribRange>
+      </杆高度>
+    </相机架设>
+  </功能配置>
+  <系统性能测试>
+    <捕获率优先>
+      <AttribType>4</AttribType>
+      <AttribInfo>PK模式</AttribInfo>
+      <AttribDefault>0</AttribDefault>
+      <AttribRange />
+    </捕获率优先>
+    <模拟红灯时全部判断为闯红灯>
+      <AttribType>4</AttribType>
+      <AttribInfo></AttribInfo>
+      <AttribDefault>0</AttribDefault>
+      <AttribRange />
+    </模拟红灯时全部判断为闯红灯>
+    <显示红绿灯定位框>
+      <AttribType>4</AttribType>
+      <AttribInfo></AttribInfo>
+      <AttribDefault>1</AttribDefault>
+      <AttribRange />
+    </显示红绿灯定位框>
+    <显示车辆跟踪框>
+      <AttribType>4</AttribType>
+      <AttribInfo></AttribInfo>
+      <AttribDefault>1</AttribDefault>
+      <AttribRange />
+    </显示车辆跟踪框>
+    <相同车牌过滤>
+      <AttribType>4</AttribType>
+      <AttribInfo></AttribInfo>
+      <AttribDefault>0</AttribDefault>
+      <AttribRange />
+    </相同车牌过滤>
+    <串口过车信号>
+      <AttribType>4</AttribType>
+      <AttribInfo></AttribInfo>
+      <AttribDefault>0</AttribDefault>
+      <AttribRange />
+    </串口过车信号>
+    <离开停止线跟踪帧数>
+      <AttribType>0</AttribType>
+      <AttribInfo></AttribInfo>
+      <AttribDefault>1000</AttribDefault>
+      <AttribRange>1-10000</AttribRange>
+    </离开停止线跟踪帧数>
+    <视频触发跟踪帧数>
+      <AttribType>0</AttribType>
+      <AttribInfo></AttribInfo>
+      <AttribDefault>10000</AttribDefault>
+      <AttribRange>1-20000</AttribRange>
+    </视频触发跟踪帧数>
+    <是否显示检测框等>
+      <AttribType>4</AttribType>
+      <AttribInfo></AttribInfo>
+      <AttribDefault>1</AttribDefault>
+      <AttribRange />
+    </是否显示检测框等>
+    <红绿灯翻转>
+      <AttribType>4</AttribType>
+      <AttribInfo></AttribInfo>
+      <AttribDefault>0</AttribDefault>
+      <AttribRange />
+    </红绿灯翻转>
+    <图像偏移过大报警开启>
+      <AttribType>4</AttribType>
+      <AttribInfo></AttribInfo>
+      <AttribDefault>0</AttribDefault>
+      <AttribRange />
+    </图像偏移过大报警开启>
+    <保存灯切换时的图片文件>
+      <AttribType>4</AttribType>
+      <AttribInfo></AttribInfo>
+      <AttribDefault>0</AttribDefault>
+      <AttribRange />
+    </保存灯切换时的图片文件>
+  </系统性能测试>
+  <算法参数设置>
+    <是否启用车头模式>
+      <AttribType>4</AttribType>
+      <AttribInfo>默认车尾模式</AttribInfo>
+      <AttribDefault>0</AttribDefault>
+      <AttribRange />
+    </是否启用车头模式>
+    <车牌识别置信度阈值>
+      <AttribType>0</AttribType>
+      <AttribInfo></AttribInfo>
+      <AttribDefault>0</AttribDefault>
+      <AttribRange>0-101</AttribRange>
+    </车牌识别置信度阈值>
+    <是否检测无牌车>
+      <AttribType>4</AttribType>
+      <AttribInfo></AttribInfo>
+      <AttribDefault>1</AttribDefault>
+      <AttribRange />
+    </是否检测无牌车>
+    <无牌车中是否检测大车>
+      <AttribType>4</AttribType>
+      <AttribInfo></AttribInfo>
+      <AttribDefault>1</AttribDefault>
+      <AttribRange />
+    </无牌车中是否检测大车>
+    <是否检测摩托车>
+      <AttribType>4</AttribType>
+      <AttribInfo></AttribInfo>
+      <AttribDefault>0</AttribDefault>
+      <AttribRange />
+    </是否检测摩托车>
+    <是否检测行人>
+      <AttribType>4</AttribType>
+      <AttribInfo></AttribInfo>
+      <AttribDefault>0</AttribDefault>
+      <AttribRange />
+    </是否检测行人>
+    <摩托与汽车的尺度比>
+      <AttribType>1</AttribType>
+      <AttribInfo></AttribInfo>
+      <AttribDefault>1.500000</AttribDefault>
+      <AttribRange>0.800000-3.000000</AttribRange>
+    </摩托与汽车的尺度比>
+    <无牌车确认距离阈值>
+      <AttribType>0</AttribType>
+      <AttribInfo>米</AttribInfo>
+      <AttribDefault>5</AttribDefault>
+      <AttribRange>0-100</AttribRange>
+    </无牌车确认距离阈值>
+    <无牌车检测灵敏度>
+      <AttribType>0</AttribType>
+      <AttribInfo></AttribInfo>
+      <AttribDefault>50</AttribDefault>
+      <AttribRange>0-100</AttribRange>
+    </无牌车检测灵敏度>
+    <行人摩托车检测灵敏度>
+      <AttribType>0</AttribType>
+      <AttribInfo></AttribInfo>
+      <AttribDefault>50</AttribDefault>
+      <AttribRange>0-100</AttribRange>
+    </行人摩托车检测灵敏度>
+    <是否保存跟踪图>
+      <AttribType>4</AttribType>
+      <AttribInfo></AttribInfo>
+      <AttribDefault>0</AttribDefault>
+      <AttribRange />
+    </是否保存跟踪图>
+    <是否发送Debugger>
+      <AttribType>4</AttribType>
+      <AttribInfo></AttribInfo>
+      <AttribDefault>0</AttribDefault>
+      <AttribRange />
+    </是否发送Debugger>
+    <车辆跟踪最远纵向距离>
+      <AttribType>1</AttribType>
+      <AttribInfo></AttribInfo>
+      <AttribDefault>150.000000</AttribDefault>
+      <AttribRange>30.000000-300.000000</AttribRange>
+    </车辆跟踪最远纵向距离>
+    <车辆跟踪最远横向距离>
+      <AttribType>1</AttribType>
+      <AttribInfo></AttribInfo>
+      <AttribDefault>3.000000</AttribDefault>
+      <AttribRange>0.000000-20.000000</AttribRange>
+    </车辆跟踪最远横向距离>
+    <车牌识别>
+      <车牌最小宽度>
+        <AttribType>0</AttribType>
+        <AttribInfo></AttribInfo>
+        <AttribDefault>90</AttribDefault>
+        <AttribRange>70-230</AttribRange>
+      </车牌最小宽度>
+      <车牌最大宽度>
+        <AttribType>0</AttribType>
+        <AttribInfo></AttribInfo>
+        <AttribDefault>130</AttribDefault>
+        <AttribRange>70-230</AttribRange>
+      </车牌最大宽度>
+      <本地汉字>
+        <AttribType>3</AttribType>
+        <AttribInfo></AttribInfo>
+        <AttribDefault>0</AttribDefault>
+        <AttribRange>31:0-京&amp;1-沪&amp;2-津&amp;3-渝&amp;4-冀&amp;5-晋&amp;6-蒙&amp;7-辽&amp;8-吉&amp;9-黑&amp;10-苏&amp;11-浙&amp;12-皖&amp;13-闽&amp;14-赣&amp;15-鲁&amp;16-豫&amp;17-鄂&amp;18-湘&amp;19-粤&amp;20-桂&amp;21-琼&amp;22-川&amp;23-贵&amp;24-云&amp;25-藏&amp;26-陕&amp;27-甘&amp;28-青&amp;29-宁&amp;30-新</AttribRange>
+      </本地汉字>
+    </车牌识别>
+  </算法参数设置>
+  <红灯设置>
+    <红灯校正>
+      <开启算法>
+        <AttribType>4</AttribType>
+        <AttribInfo></AttribInfo>
+        <AttribDefault>1</AttribDefault>
+        <AttribRange />
+      </开启算法>
+      <校正灵敏度>
+        <AttribType>0</AttribType>
+        <AttribInfo></AttribInfo>
+        <AttribDefault>50</AttribDefault>
+        <AttribRange>1-100</AttribRange>
+      </校正灵敏度>
+      <开始时间1>
+        <AttribType>5</AttribType>
+        <AttribInfo></AttribInfo>
+        <AttribDefault>Time:00_00_00</AttribDefault>
+        <AttribRange>MaxTime:23_59_59-MinTime:00_00_00</AttribRange>
+      </开始时间1>
+      <结束时间1>
+        <AttribType>5</AttribType>
+        <AttribInfo></AttribInfo>
+        <AttribDefault>Time:00_00_00</AttribDefault>
+        <AttribRange>MaxTime:23_59_59-MinTime:00_00_00</AttribRange>
+      </结束时间1>
+      <开始时间2>
+        <AttribType>5</AttribType>
+        <AttribInfo></AttribInfo>
+        <AttribDefault>Time:00_00_00</AttribDefault>
+        <AttribRange>MaxTime:23_59_59-MinTime:00_00_00</AttribRange>
+      </开始时间2>
+      <结束时间2>
+        <AttribType>5</AttribType>
+        <AttribInfo></AttribInfo>
+        <AttribDefault>Time:00_00_00</AttribDefault>
+        <AttribRange>MaxTime:23_59_59-MinTime:00_00_00</AttribRange>
+      </结束时间2>
+    </红灯校正>
+    <红灯最短时长>
+      <AttribType>0</AttribType>
+      <AttribInfo>秒，小于此时长的红灯周期作废</AttribInfo>
+      <AttribDefault>10</AttribDefault>
+      <AttribRange>0-100</AttribRange>
+    </红灯最短时长>
+    <持续状态多长时间报警>
+      <AttribType>0</AttribType>
+      <AttribInfo>秒，大于此时长的红灯周期作废，且输出警告日志</AttribInfo>
+      <AttribDefault>120</AttribDefault>
+      <AttribRange>30-86400</AttribRange>
+    </持续状态多长时间报警>
+    <红灯开始后的无效时间>
+      <AttribType>0</AttribType>
+      <AttribInfo>秒，红灯开始前多少秒不抓闯红灯</AttribInfo>
+      <AttribDefault>0</AttribDefault>
+      <AttribRange>0-10</AttribRange>
+    </红灯开始后的无效时间>
+    <红灯结束前的无效时间>
+      <AttribType>0</AttribType>
+      <AttribInfo>秒，红灯结束前多少秒不抓闯红灯</AttribInfo>
+      <AttribDefault>0</AttribDefault>
+      <AttribRange>0-10</AttribRange>
+    </红灯结束前的无效时间>
+    <是否做红灯周期波动检测>
+      <AttribType>4</AttribType>
+      <AttribInfo></AttribInfo>
+      <AttribDefault>0</AttribDefault>
+      <AttribRange />
+    </是否做红灯周期波动检测>
+    <红灯周期最大波动>
+      <AttribType>0</AttribType>
+      <AttribInfo>当前红灯时间大于或小于前一周期多少秒，则当前红灯无效</AttribInfo>
+      <AttribDefault>10</AttribDefault>
+      <AttribRange>1-100</AttribRange>
+    </红灯周期最大波动>
+    <灯色最小饱和度>
+      <AttribType>0</AttribType>
+      <AttribInfo></AttribInfo>
+      <AttribDefault>30</AttribDefault>
+      <AttribRange>1-100</AttribRange>
+    </灯色最小饱和度>
+  </红灯设置>
+</root>
\ 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>

public/xml/traffic_config_utf8.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<root>
+	<设备配置>
+		<设备名称>
+			<AttribType>2</AttribType>
+			<AttribInfo>设备名称</AttribInfo>
+			<AttribDefault></AttribDefault>
+			<AttribRange>64</AttribRange>
+		</设备名称>
+		<设备编号>
+			<AttribType>2</AttribType>
+			<AttribInfo>设备编号</AttribInfo>
+			<AttribDefault></AttribDefault>
+			<AttribRange>64</AttribRange>
+		</设备编号>
+		<地点名称>
+			<AttribType>2</AttribType>
+			<AttribInfo>地点名称</AttribInfo>
+			<AttribDefault></AttribDefault>
+			<AttribRange>64</AttribRange>
+		</地点名称>
+		<地点编号>
+			<AttribType>2</AttribType>
+			<AttribInfo>地点编号</AttribInfo>
+			<AttribDefault></AttribDefault>
+			<AttribRange>64</AttribRange>
+		</地点编号>
+		<方向名称>
+			<AttribType>2</AttribType>
+			<AttribInfo>方向名称</AttribInfo>
+			<AttribDefault></AttribDefault>
+			<AttribRange>64</AttribRange>
+		</方向名称>
+		<方向编号>
+			<AttribType>0</AttribType>
+			<AttribInfo>方向编号</AttribInfo>
+			<AttribDefault>1</AttribDefault>
+			<AttribRange>0-15</AttribRange>
+		</方向编号>
+	</设备配置>
+	<红灯设置>
+		<模拟红灯>
+			<AttribType>4</AttribType>
+			<AttribInfo></AttribInfo>
+			<AttribDefault>0</AttribDefault>
+			<AttribRange/>
+		</模拟红灯>
+		<红灯校正>
+			<开启算法>
+				<AttribType>4</AttribType>
+				<AttribInfo></AttribInfo>
+				<AttribDefault>1</AttribDefault>
+				<AttribRange/>
+			</开启算法>
+			<校正灵敏度>
+				<AttribType>0</AttribType>
+				<AttribInfo></AttribInfo>
+				<AttribDefault>50</AttribDefault>
+				<AttribRange>1-100</AttribRange>
+			</校正灵敏度>
+			<开始时间1>
+				<AttribType>5</AttribType>
+				<AttribInfo></AttribInfo>
+				<AttribDefault>Time:00_00_00</AttribDefault>
+				<AttribRange>MaxTime:23_59_59-MinTime:00_00_00</AttribRange>
+			</开始时间1>
+			<结束时间1>
+				<AttribType>5</AttribType>
+				<AttribInfo></AttribInfo>
+				<AttribDefault>Time:00_00_00</AttribDefault>
+				<AttribRange>MaxTime:23_59_59-MinTime:00_00_00</AttribRange>
+			</结束时间1>
+			<开始时间2>
+				<AttribType>5</AttribType>
+				<AttribInfo></AttribInfo>
+				<AttribDefault>Time:00_00_00</AttribDefault>
+				<AttribRange>MaxTime:23_59_59-MinTime:00_00_00</AttribRange>
+			</开始时间2>
+			<结束时间2>
+				<AttribType>5</AttribType>
+				<AttribInfo></AttribInfo>
+				<AttribDefault>Time:00_00_00</AttribDefault>
+				<AttribRange>MaxTime:23_59_59-MinTime:00_00_00</AttribRange>
+			</结束时间2>
+		</红灯校正>
+		<红灯最短时长>
+			<AttribType>0</AttribType>
+			<AttribInfo>秒，小于此时长的红灯周期作废</AttribInfo>
+			<AttribDefault>10</AttribDefault>
+			<AttribRange>0-100</AttribRange>
+		</红灯最短时长>
+		<持续状态多长时间报警>
+			<AttribType>0</AttribType>
+			<AttribInfo>秒，大于此时长的红灯周期作废，且输出警告日志</AttribInfo>
+			<AttribDefault>120</AttribDefault>
+			<AttribRange>30-86400</AttribRange>
+		</持续状态多长时间报警>
+		<红灯开始后的无效时间>
+			<AttribType>0</AttribType>
+			<AttribInfo>秒，红灯开始前多少秒不抓闯红灯</AttribInfo>
+			<AttribDefault>0</AttribDefault>
+			<AttribRange>0-10</AttribRange>
+		</红灯开始后的无效时间>
+		<红灯结束前的无效时间>
+			<AttribType>0</AttribType>
+			<AttribInfo>秒，红灯结束前多少秒不抓闯红灯</AttribInfo>
+			<AttribDefault>0</AttribDefault>
+			<AttribRange>0-10</AttribRange>
+		</红灯结束前的无效时间>
+		<是否做红灯周期波动检测>
+			<AttribType>4</AttribType>
+			<AttribInfo></AttribInfo>
+			<AttribDefault>0</AttribDefault>
+			<AttribRange/>
+		</是否做红灯周期波动检测>
+		<红灯周期最大波动>
+			<AttribType>0</AttribType>
+			<AttribInfo>当前红灯时间大于或小于前一周期多少秒，则当前红灯无效</AttribInfo>
+			<AttribDefault>10</AttribDefault>
+			<AttribRange>1-100</AttribRange>
+		</红灯周期最大波动>
+		<灯色最小饱和度>
+			<AttribType>0</AttribType>
+			<AttribInfo></AttribInfo>
+			<AttribDefault>30</AttribDefault>
+			<AttribRange>1-100</AttribRange>
+		</灯色最小饱和度>
+	</红灯设置>
+	<功能配置>
+		<抓拍参数配置>
+			<路口电警>
+				<违法检测车牌类型>
+					<黄牌>
+						<AttribType>4</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault>1</AttribDefault>
+						<AttribRange/>
+					</黄牌>
+					<白牌>
+						<AttribType>4</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault>1</AttribDefault>
+						<AttribRange/>
+					</白牌>
+					<黑牌>
+						<AttribType>4</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault>1</AttribDefault>
+						<AttribRange/>
+					</黑牌>
+					<蓝牌>
+						<AttribType>4</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault>1</AttribDefault>
+						<AttribRange/>
+					</蓝牌>
+				</违法检测车牌类型>
+				<压线>
+					<启用>
+						<AttribType>4</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault>1</AttribDefault>
+						<AttribRange/>
+					</启用>
+					<灵敏度>
+						<AttribType>0</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault>50</AttribDefault>
+						<AttribRange>1-100</AttribRange>
+					</灵敏度>
+					<开启时间>
+						<AttribType>2</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault></AttribDefault>
+						<AttribRange>256</AttribRange>
+					</开启时间>
+				</压线>
+				<跨线变道>
+					<启用>
+						<AttribType>4</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault>0</AttribDefault>
+						<AttribRange/>
+					</启用>
+					<开启时间>
+						<AttribType>2</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault></AttribDefault>
+						<AttribRange>256</AttribRange>
+					</开启时间>
+				</跨线变道>
+				<占用公交车道>
+					<启用算法>
+						<AttribType>4</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault>0</AttribDefault>
+						<AttribRange/>
+					</启用算法>
+					<检测车牌类型>
+						<黄牌>
+							<AttribType>4</AttribType>
+							<AttribInfo></AttribInfo>
+							<AttribDefault>0</AttribDefault>
+							<AttribRange/>
+						</黄牌>
+						<白牌>
+							<AttribType>4</AttribType>
+							<AttribInfo></AttribInfo>
+							<AttribDefault>1</AttribDefault>
+							<AttribRange/>
+						</白牌>
+						<黑牌>
+							<AttribType>4</AttribType>
+							<AttribInfo></AttribInfo>
+							<AttribDefault>1</AttribDefault>
+							<AttribRange/>
+						</黑牌>
+						<蓝牌>
+							<AttribType>4</AttribType>
+							<AttribInfo></AttribInfo>
+							<AttribDefault>1</AttribDefault>
+							<AttribRange/>
+						</蓝牌>
+					</检测车牌类型>
+					<开启时间>
+						<AttribType>2</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault></AttribDefault>
+						<AttribRange>256</AttribRange>
+					</开启时间>
+				</占用公交车道>
+				<占用非机动车道>
+					<启用算法>
+						<AttribType>4</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault>0</AttribDefault>
+						<AttribRange/>
+					</启用算法>
+					<检测车牌类型>
+						<黄牌>
+							<AttribType>4</AttribType>
+							<AttribInfo></AttribInfo>
+							<AttribDefault>1</AttribDefault>
+							<AttribRange/>
+						</黄牌>
+						<白牌>
+							<AttribType>4</AttribType>
+							<AttribInfo></AttribInfo>
+							<AttribDefault>1</AttribDefault>
+							<AttribRange/>
+						</白牌>
+						<黑牌>
+							<AttribType>4</AttribType>
+							<AttribInfo></AttribInfo>
+							<AttribDefault>1</AttribDefault>
+							<AttribRange/>
+						</黑牌>
+						<蓝牌>
+							<AttribType>4</AttribType>
+							<AttribInfo></AttribInfo>
+							<AttribDefault>1</AttribDefault>
+							<AttribRange/>
+						</蓝牌>
+					</检测车牌类型>
+					<车牌最小置信度>
+						<AttribType>0</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault>15</AttribDefault>
+						<AttribRange>0-100</AttribRange>
+					</车牌最小置信度>
+					<开启时间>
+						<AttribType>2</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault></AttribDefault>
+						<AttribRange>256</AttribRange>
+					</开启时间>
+				</占用非机动车道>
+				<逆行>
+					<启用>
+						<AttribType>4</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault>1</AttribDefault>
+						<AttribRange/>
+					</启用>
+					<抓拍位移>
+						<AttribType>0</AttribType>
+						<AttribInfo>单位：米</AttribInfo>
+						<AttribDefault>1</AttribDefault>
+						<AttribRange>1-30</AttribRange>
+					</抓拍位移>
+					<开启时间>
+						<AttribType>2</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault></AttribDefault>
+						<AttribRange>256</AttribRange>
+					</开启时间>
+					<输出限时单行>
+						<AttribType>4</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault>0</AttribDefault>
+						<AttribRange/>
+					</输出限时单行>
+				</逆行>
+				<非法停车>
+					<启用算法>
+						<AttribType>4</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault>0</AttribDefault>
+						<AttribRange/>
+					</启用算法>
+					<非法停车时间>
+						<AttribType>0</AttribType>
+						<AttribInfo>s</AttribInfo>
+						<AttribDefault>5</AttribDefault>
+						<AttribRange>1-3600</AttribRange>
+					</非法停车时间>
+					<与前车最小距离>
+						<AttribType>0</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault>5</AttribDefault>
+						<AttribRange>1-20</AttribRange>
+					</与前车最小距离>
+					<开启时间>
+						<AttribType>2</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault></AttribDefault>
+						<AttribRange>256</AttribRange>
+					</开启时间>
+				</非法停车>
+				<流量统计>
+					<启用>
+						<AttribType>4</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault>1</AttribDefault>
+						<AttribRange/>
+					</启用>
+					<在视频流显示>
+						<AttribType>4</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault>0</AttribDefault>
+						<AttribRange/>
+					</在视频流显示>
+					<字体大小>
+						<AttribType>0</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault>24</AttribDefault>
+						<AttribRange>10-100</AttribRange>
+					</字体大小>
+					<时间间隔>
+						<AttribType>0</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault>60</AttribDefault>
+						<AttribRange>10-100</AttribRange>
+					</时间间隔>
+				</流量统计>
+				<路口滞留>
+					<启用>
+						<AttribType>4</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault>0</AttribDefault>
+						<AttribRange/>
+					</启用>
+					<拥堵后多少秒开始检测>
+						<AttribType>0</AttribType>
+						<AttribInfo>单位：秒</AttribInfo>
+						<AttribDefault>1</AttribDefault>
+						<AttribRange>0-10</AttribRange>
+					</拥堵后多少秒开始检测>
+					<LED屏信号延迟>
+						<AttribType>0</AttribType>
+						<AttribInfo>单位：毫秒</AttribInfo>
+						<AttribDefault>500</AttribDefault>
+						<AttribRange>100-10000</AttribRange>
+					</LED屏信号延迟>
+					<是否检测左转>
+						<AttribType>4</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault>0</AttribDefault>
+						<AttribRange/>
+					</是否检测左转>
+					<是否检测右转>
+						<AttribType>4</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault>0</AttribDefault>
+						<AttribRange/>
+					</是否检测右转>
+					<开启时间>
+						<AttribType>2</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault></AttribDefault>
+						<AttribRange>256</AttribRange>
+					</开启时间>
+					<车辆阈值>
+						<AttribType>0</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault>5</AttribDefault>
+						<AttribRange>1-30</AttribRange>
+					</车辆阈值>
+					<速度阈值>
+						<AttribType>0</AttribType>
+						<AttribInfo>公里每小时</AttribInfo>
+						<AttribDefault>5</AttribDefault>
+						<AttribRange>1-30</AttribRange>
+					</速度阈值>
+					<拥堵后LED屏最少亮起多少秒>
+						<AttribType>0</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault>5</AttribDefault>
+						<AttribRange>1-30</AttribRange>
+					</拥堵后LED屏最少亮起多少秒>
+				</路口滞留>
+				<绿灯滞留>
+					<启用>
+						<AttribType>4</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault>0</AttribDefault>
+						<AttribRange/>
+					</启用>
+					<判定滞留时间>
+						<AttribType>0</AttribType>
+						<AttribInfo>单位：秒</AttribInfo>
+						<AttribDefault>10</AttribDefault>
+						<AttribRange>1-3600</AttribRange>
+					</判定滞留时间>
+					<开启时间>
+						<AttribType>2</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault></AttribDefault>
+						<AttribRange>256</AttribRange>
+					</开启时间>
+				</绿灯滞留>
+				<大货车禁行>
+					<开启>
+						<AttribType>4</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault>0</AttribDefault>
+						<AttribRange/>
+					</开启>
+					<黄牌即认为是大货车>
+						<AttribType>4</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault>0</AttribDefault>
+						<AttribRange/>
+					</黄牌即认为是大货车>
+					<车牌包含以下字符串的不报>
+						<AttribType>2</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault></AttribDefault>
+						<AttribRange>10</AttribRange>
+					</车牌包含以下字符串的不报>
+					<开启时间>
+						<AttribType>2</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault></AttribDefault>
+						<AttribRange>256</AttribRange>
+					</开启时间>
+				</大货车禁行>
+				<行人检测>
+					<启用>
+						<AttribType>4</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault>0</AttribDefault>
+						<AttribRange/>
+					</启用>
+					<灵敏度>
+						<AttribType>0</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault>50</AttribDefault>
+						<AttribRange>0-100</AttribRange>
+					</灵敏度>
+				</行人检测>
+				<拥堵检测>
+					<启用>
+						<AttribType>4</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault>0</AttribDefault>
+						<AttribRange/>
+					</启用>
+					<拥堵>
+						<车辆阈值>
+							<AttribType>0</AttribType>
+							<AttribInfo></AttribInfo>
+							<AttribDefault>5</AttribDefault>
+							<AttribRange>1-30</AttribRange>
+						</车辆阈值>
+						<速度阈值>
+							<AttribType>0</AttribType>
+							<AttribInfo>公里每小时</AttribInfo>
+							<AttribDefault>5</AttribDefault>
+							<AttribRange>1-30</AttribRange>
+						</速度阈值>
+					</拥堵>
+					<缓行>
+						<车辆阈值>
+							<AttribType>0</AttribType>
+							<AttribInfo></AttribInfo>
+							<AttribDefault>3</AttribDefault>
+							<AttribRange>1-30</AttribRange>
+						</车辆阈值>
+						<速度阈值>
+							<AttribType>0</AttribType>
+							<AttribInfo>公里每小时</AttribInfo>
+							<AttribDefault>10</AttribDefault>
+							<AttribRange>1-30</AttribRange>
+						</速度阈值>
+					</缓行>
+				</拥堵检测>
+				<占有率超限>
+					<启用>
+						<AttribType>4</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault>0</AttribDefault>
+						<AttribRange/>
+					</启用>
+					<阈值>
+						<AttribType>0</AttribType>
+						<AttribInfo>单位：%</AttribInfo>
+						<AttribDefault>80</AttribDefault>
+						<AttribRange>0-100</AttribRange>
+					</阈值>
+				</占有率超限>
+				<车辆慢行>
+					<启用>
+						<AttribType>4</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault>0</AttribDefault>
+						<AttribRange/>
+					</启用>
+					<速度阈值>
+						<AttribType>0</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault>10</AttribDefault>
+						<AttribRange>0-100</AttribRange>
+					</速度阈值>
+				</车辆慢行>
+				<异常停车>
+					<启用>
+						<AttribType>4</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault>0</AttribDefault>
+						<AttribRange/>
+					</启用>
+					<停车时长>
+						<AttribType>0</AttribType>
+						<AttribInfo>单位：秒</AttribInfo>
+						<AttribDefault>10</AttribDefault>
+						<AttribRange>0-360</AttribRange>
+					</停车时长>
+				</异常停车>
+				<按车牌限行>
+					<启用>
+						<AttribType>4</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault>0</AttribDefault>
+						<AttribRange/>
+					</启用>
+					<车牌包含以下字符串的不报>
+						<AttribType>2</AttribType>
+						<AttribInfo>可多个，以半角分号间隔，字符串最长100</AttribInfo>
+						<AttribDefault></AttribDefault>
+						<AttribRange>100</AttribRange>
+					</车牌包含以下字符串的不报>
+					<车牌汉字最小置信度>
+						<AttribType>0</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault>15</AttribDefault>
+						<AttribRange>0-100</AttribRange>
+					</车牌汉字最小置信度>
+					<开启时间>
+						<AttribType>2</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault></AttribDefault>
+						<AttribRange>256</AttribRange>
+					</开启时间>
+					<周末是否限行>
+						<AttribType>4</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault>0</AttribDefault>
+						<AttribRange/>
+					</周末是否限行>
+				</按车牌限行>
+				<礼让行人>
+					<开启>
+						<AttribType>4</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault>0</AttribDefault>
+						<AttribRange/>
+					</开启>
+					<横向检测范围>
+						<AttribType>1</AttribType>
+						<AttribInfo>单位：米</AttribInfo>
+						<AttribDefault>5.000000</AttribDefault>
+						<AttribRange>0.000000-20.000000</AttribRange>
+					</横向检测范围>
+					<纵向检测范围>
+						<AttribType>1</AttribType>
+						<AttribInfo>单位：米</AttribInfo>
+						<AttribDefault>5.000000</AttribDefault>
+						<AttribRange>0.000000-20.000000</AttribRange>
+					</纵向检测范围>
+					<速度上限>
+						<AttribType>1</AttribType>
+						<AttribInfo>单位：米每秒</AttribInfo>
+						<AttribDefault>5.000000</AttribDefault>
+						<AttribRange>0.000000-20.000000</AttribRange>
+					</速度上限>
+					<开启时间>
+						<AttribType>2</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault></AttribDefault>
+						<AttribRange>256</AttribRange>
+					</开启时间>
+				</礼让行人>
+				<闯红灯>
+					<直行闯红灯>
+						<启用>
+							<AttribType>4</AttribType>
+							<AttribInfo></AttribInfo>
+							<AttribDefault>1</AttribDefault>
+							<AttribRange/>
+						</启用>
+					</直行闯红灯>
+					<左转闯红灯>
+						<启用>
+							<AttribType>4</AttribType>
+							<AttribInfo></AttribInfo>
+							<AttribDefault>1</AttribDefault>
+							<AttribRange/>
+						</启用>
+					</左转闯红灯>
+					<右转闯红灯>
+						<启用>
+							<AttribType>4</AttribType>
+							<AttribInfo></AttribInfo>
+							<AttribDefault>1</AttribDefault>
+							<AttribRange/>
+						</启用>
+					</右转闯红灯>
+					<开启时间>
+						<AttribType>2</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault></AttribDefault>
+						<AttribRange>256</AttribRange>
+					</开启时间>
+					<左转兼顾直行灯>
+						<AttribType>4</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault>0</AttribDefault>
+						<AttribRange/>
+					</左转兼顾直行灯>
+					<第3张图限制线前抓>
+						<AttribType>4</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault>0</AttribDefault>
+						<AttribRange/>
+					</第3张图限制线前抓>
+					<第二张距离>
+						<AttribType>1</AttribType>
+						<AttribInfo>第二张超过停止线多少个车身</AttribInfo>
+						<AttribDefault>0.000000</AttribDefault>
+						<AttribRange>-0.500000-2.000000</AttribRange>
+					</第二张距离>
+					<过滤闯红灯压线目标>
+						<AttribType>4</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault>0</AttribDefault>
+						<AttribRange/>
+					</过滤闯红灯压线目标>
+					<输出4张全景>
+						<开启>
+							<AttribType>4</AttribType>
+							<AttribInfo></AttribInfo>
+							<AttribDefault>0</AttribDefault>
+							<AttribRange/>
+						</开启>
+						<第4张延时间隔>
+							<AttribType>0</AttribType>
+							<AttribInfo>单位：毫秒</AttribInfo>
+							<AttribDefault>100</AttribDefault>
+							<AttribRange>1-1000</AttribRange>
+						</第4张延时间隔>
+					</输出4张全景>
+				</闯红灯>
+				<不按导向行使>
+					<非法直行>
+						<启用>
+							<AttribType>4</AttribType>
+							<AttribInfo></AttribInfo>
+							<AttribDefault>1</AttribDefault>
+							<AttribRange/>
+						</启用>
+					</非法直行>
+					<非法左转>
+						<启用>
+							<AttribType>4</AttribType>
+							<AttribInfo></AttribInfo>
+							<AttribDefault>1</AttribDefault>
+							<AttribRange/>
+						</启用>
+					</非法左转>
+					<非法右转>
+						<启用>
+							<AttribType>4</AttribType>
+							<AttribInfo></AttribInfo>
+							<AttribDefault>1</AttribDefault>
+							<AttribRange/>
+						</启用>
+					</非法右转>
+					<检测车牌类型>
+						<黄牌>
+							<AttribType>4</AttribType>
+							<AttribInfo></AttribInfo>
+							<AttribDefault>1</AttribDefault>
+							<AttribRange/>
+						</黄牌>
+						<白牌>
+							<AttribType>4</AttribType>
+							<AttribInfo></AttribInfo>
+							<AttribDefault>1</AttribDefault>
+							<AttribRange/>
+						</白牌>
+						<黑牌>
+							<AttribType>4</AttribType>
+							<AttribInfo></AttribInfo>
+							<AttribDefault>1</AttribDefault>
+							<AttribRange/>
+						</黑牌>
+						<蓝牌>
+							<AttribType>4</AttribType>
+							<AttribInfo></AttribInfo>
+							<AttribDefault>1</AttribDefault>
+							<AttribRange/>
+						</蓝牌>
+					</检测车牌类型>
+					<开启时间>
+						<AttribType>2</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault></AttribDefault>
+						<AttribRange>256</AttribRange>
+					</开启时间>
+					<过滤变道压线目标>
+						<AttribType>4</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault>0</AttribDefault>
+						<AttribRange/>
+					</过滤变道压线目标>
+				</不按导向行使>
+				<禁行>
+					<禁止左转>
+						<启用>
+							<AttribType>4</AttribType>
+							<AttribInfo></AttribInfo>
+							<AttribDefault>0</AttribDefault>
+							<AttribRange/>
+						</启用>
+						<检测车牌类型>
+							<黄牌>
+								<AttribType>4</AttribType>
+								<AttribInfo></AttribInfo>
+								<AttribDefault>1</AttribDefault>
+								<AttribRange/>
+							</黄牌>
+							<白牌>
+								<AttribType>4</AttribType>
+								<AttribInfo></AttribInfo>
+								<AttribDefault>1</AttribDefault>
+								<AttribRange/>
+							</白牌>
+							<黑牌>
+								<AttribType>4</AttribType>
+								<AttribInfo></AttribInfo>
+								<AttribDefault>1</AttribDefault>
+								<AttribRange/>
+							</黑牌>
+							<蓝牌>
+								<AttribType>4</AttribType>
+								<AttribInfo></AttribInfo>
+								<AttribDefault>1</AttribDefault>
+								<AttribRange/>
+							</蓝牌>
+						</检测车牌类型>
+						<开启时间>
+							<AttribType>2</AttribType>
+							<AttribInfo></AttribInfo>
+							<AttribDefault></AttribDefault>
+							<AttribRange>256</AttribRange>
+						</开启时间>
+					</禁止左转>
+					<禁止右转>
+						<启用>
+							<AttribType>4</AttribType>
+							<AttribInfo>root\功能配置\抓拍参数配置\路口电警\禁行\禁止右转\启用</AttribInfo>
+							<AttribDefault>0</AttribDefault>
+							<AttribRange/>
+						</启用>
+						<检测车牌类型>
+							<黄牌>
+								<AttribType>4</AttribType>
+								<AttribInfo></AttribInfo>
+								<AttribDefault>1</AttribDefault>
+								<AttribRange/>
+							</黄牌>
+							<白牌>
+								<AttribType>4</AttribType>
+								<AttribInfo></AttribInfo>
+								<AttribDefault>1</AttribDefault>
+								<AttribRange/>
+							</白牌>
+							<黑牌>
+								<AttribType>4</AttribType>
+								<AttribInfo></AttribInfo>
+								<AttribDefault>1</AttribDefault>
+								<AttribRange/>
+							</黑牌>
+							<蓝牌>
+								<AttribType>4</AttribType>
+								<AttribInfo></AttribInfo>
+								<AttribDefault>1</AttribDefault>
+								<AttribRange/>
+							</蓝牌>
+						</检测车牌类型>
+						<开启时间>
+							<AttribType>2</AttribType>
+							<AttribInfo></AttribInfo>
+							<AttribDefault></AttribDefault>
+							<AttribRange>256</AttribRange>
+						</开启时间>
+					</禁止右转>
+				</禁行>
+				<占用紧急车道>
+					<其他车道拥堵时输出拥堵占用>
+						<AttribType>4</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault>0</AttribDefault>
+						<AttribRange/>
+					</其他车道拥堵时输出拥堵占用>
+					<开启时间>
+						<AttribType>2</AttribType>
+						<AttribInfo>root\功能配置\抓拍参数配置\路口电警\占用紧急车道\开启时间</AttribInfo>
+						<AttribDefault></AttribDefault>
+						<AttribRange>256</AttribRange>
+					</开启时间>
+					<启用算法>
+						<AttribType>4</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault>0</AttribDefault>
+						<AttribRange/>
+					</启用算法>
+				</占用紧急车道>
+				<最长二三张间隔时间>
+					<AttribType>0</AttribType>
+					<AttribInfo>单位：秒</AttribInfo>
+					<AttribDefault>15</AttribDefault>
+					<AttribRange>1-100</AttribRange>
+				</最长二三张间隔时间>
+				<最小撞线速度>
+					<AttribType>0</AttribType>
+					<AttribInfo>单位：公里每小时</AttribInfo>
+					<AttribDefault>8</AttribDefault>
+					<AttribRange>1-100</AttribRange>
+				</最小撞线速度>
+				<检测违法时间段>
+					<AttribType>2</AttribType>
+					<AttribInfo></AttribInfo>
+					<AttribDefault></AttribDefault>
+					<AttribRange>256</AttribRange>
+				</检测违法时间段>
+				<非法掉头>
+					<开启时间>
+						<AttribType>2</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault></AttribDefault>
+						<AttribRange>256</AttribRange>
+					</开启时间>
+					<启用算法>
+						<AttribType>4</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault>0</AttribDefault>
+						<AttribRange/>
+					</启用算法>
+				</非法掉头>
+				<卡口>
+					<输出卡口图片>
+						<AttribType>4</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault>1</AttribDefault>
+						<AttribRange/>
+					</输出卡口图片>
+					<卡口抓两张图>
+						<AttribType>4</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault>0</AttribDefault>
+						<AttribRange/>
+					</卡口抓两张图>
+					<下行车辆不输出卡口结果>
+						<AttribType>4</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault>0</AttribDefault>
+						<AttribRange/>
+					</下行车辆不输出卡口结果>
+					<无牌车辆不输出卡口结果>
+						<AttribType>4</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault>0</AttribDefault>
+						<AttribRange/>
+					</无牌车辆不输出卡口结果>
+				</卡口>
+				<违法取图间隔时间>
+					<AttribType>0</AttribType>
+					<AttribInfo>单位：毫秒，适用于逆行、占道</AttribInfo>
+					<AttribDefault>800</AttribDefault>
+					<AttribRange>100-10000</AttribRange>
+				</违法取图间隔时间>
+				<占道类违法取图最小行进距离>
+					<AttribType>0</AttribType>
+					<AttribInfo>单位：米</AttribInfo>
+					<AttribDefault>5</AttribDefault>
+					<AttribRange>0-30</AttribRange>
+				</占道类违法取图最小行进距离>
+				<特写图抠图比例>
+					<AttribType>1</AttribType>
+					<AttribInfo></AttribInfo>
+					<AttribDefault>2.000000</AttribDefault>
+					<AttribRange>1.000000-5.000000</AttribRange>
+				</特写图抠图比例>
+				<使用违法优先级>
+					<AttribType>4</AttribType>
+					<AttribInfo>重启生效</AttribInfo>
+					<AttribDefault>1</AttribDefault>
+					<AttribRange/>
+				</使用违法优先级>
+				<虚拟线圈>
+					<显示>
+						<AttribType>4</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault>0</AttribDefault>
+						<AttribRange/>
+					</显示>
+					<显示位置>
+						<AttribType>4</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault>0</AttribDefault>
+						<AttribRange/>
+					</显示位置>
+					<字体大小>
+						<AttribType>0</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault>24</AttribDefault>
+						<AttribRange>10-100</AttribRange>
+					</字体大小>
+					<线圈1启用>
+						<AttribType>4</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault>0</AttribDefault>
+						<AttribRange/>
+					</线圈1启用>
+					<线圈2启用>
+						<AttribType>4</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault>0</AttribDefault>
+						<AttribRange/>
+					</线圈2启用>
+					<线圈3启用>
+						<AttribType>4</AttribType>
+						<AttribInfo></AttribInfo>
+						<AttribDefault>0</AttribDefault>
+						<AttribRange/>
+					</线圈3启用>
+					<线圈1位置>
+						<AttribType>1</AttribType>
+						<AttribInfo>单位：米</AttribInfo>
+						<AttribDefault>15.000000</AttribDefault>
+						<AttribRange>1.000000-100.000000</AttribRange>
+					</线圈1位置>
+					<线圈2位置>
+						<AttribType>1</AttribType>
+						<AttribInfo>单位：米</AttribInfo>
+						<AttribDefault>30.000000</AttribDefault>
+						<AttribRange>1.000000-100.000000</AttribRange>
+					</线圈2位置>
+					<线圈3位置>
+						<AttribType>1</AttribType>
+						<AttribInfo>单位：米</AttribInfo>
+						<AttribDefault>45.000000</AttribDefault>
+						<AttribRange>1.000000-100.000000</AttribRange>
+					</线圈3位置>
+				</虚拟线圈>
+			</路口电警>
+		</抓拍参数配置>
+		<相机架设>
+			<焦距>
+				<AttribType>1</AttribType>
+				<AttribInfo>单位：毫米</AttribInfo>
+				<AttribDefault>20.000000</AttribDefault>
+				<AttribRange>5.000000-50.000000</AttribRange>
+			</焦距>
+			<杆高度>
+				<AttribType>1</AttribType>
+				<AttribInfo>单位：米</AttribInfo>
+				<AttribDefault>6.500000</AttribDefault>
+				<AttribRange>1.000000-10.000000</AttribRange>
+			</杆高度>
+		</相机架设>
+	</功能配置>
+	<系统性能测试>
+		<捕获率优先>
+			<AttribType>4</AttribType>
+			<AttribInfo>PK模式</AttribInfo>
+			<AttribDefault>0</AttribDefault>
+			<AttribRange/>
+		</捕获率优先>
+		<复杂路况去除误报>
+			<AttribType>4</AttribType>
+			<AttribInfo></AttribInfo>
+			<AttribDefault>0</AttribDefault>
+			<AttribRange/>
+		</复杂路况去除误报>
+		<模拟红灯时全部判断为闯红灯>
+			<AttribType>4</AttribType>
+			<AttribInfo></AttribInfo>
+			<AttribDefault>0</AttribDefault>
+			<AttribRange/>
+		</模拟红灯时全部判断为闯红灯>
+		<显示红绿灯定位框>
+			<AttribType>4</AttribType>
+			<AttribInfo></AttribInfo>
+			<AttribDefault>1</AttribDefault>
+			<AttribRange/>
+		</显示红绿灯定位框>
+		<显示车辆跟踪框>
+			<AttribType>4</AttribType>
+			<AttribInfo></AttribInfo>
+			<AttribDefault>1</AttribDefault>
+			<AttribRange/>
+		</显示车辆跟踪框>
+		<相同车牌过滤>
+			<AttribType>4</AttribType>
+			<AttribInfo></AttribInfo>
+			<AttribDefault>0</AttribDefault>
+			<AttribRange/>
+		</相同车牌过滤>
+		<串口过车信号>
+			<AttribType>4</AttribType>
+			<AttribInfo></AttribInfo>
+			<AttribDefault>0</AttribDefault>
+			<AttribRange/>
+		</串口过车信号>
+		<离开停止线跟踪帧数>
+			<AttribType>0</AttribType>
+			<AttribInfo></AttribInfo>
+			<AttribDefault>1000</AttribDefault>
+			<AttribRange>1-10000</AttribRange>
+		</离开停止线跟踪帧数>
+		<视频触发跟踪帧数>
+			<AttribType>0</AttribType>
+			<AttribInfo></AttribInfo>
+			<AttribDefault>10000</AttribDefault>
+			<AttribRange>1-20000</AttribRange>
+		</视频触发跟踪帧数>
+		<是否显示检测框等>
+			<AttribType>4</AttribType>
+			<AttribInfo></AttribInfo>
+			<AttribDefault>1</AttribDefault>
+			<AttribRange/>
+		</是否显示检测框等>
+		<红绿灯翻转>
+			<AttribType>4</AttribType>
+			<AttribInfo></AttribInfo>
+			<AttribDefault>0</AttribDefault>
+			<AttribRange/>
+		</红绿灯翻转>
+		<图像偏移过大报警开启>
+			<AttribType>4</AttribType>
+			<AttribInfo></AttribInfo>
+			<AttribDefault>0</AttribDefault>
+			<AttribRange/>
+		</图像偏移过大报警开启>
+		<保存灯切换时的图片文件>
+			<AttribType>4</AttribType>
+			<AttribInfo></AttribInfo>
+			<AttribDefault>0</AttribDefault>
+			<AttribRange/>
+		</保存灯切换时的图片文件>
+	</系统性能测试>
+	<算法参数设置>
+		<是否启用车头模式>
+			<AttribType>4</AttribType>
+			<AttribInfo>默认车尾模式</AttribInfo>
+			<AttribDefault>0</AttribDefault>
+			<AttribRange/>
+		</是否启用车头模式>
+		<车牌识别置信度阈值>
+			<AttribType>0</AttribType>
+			<AttribInfo></AttribInfo>
+			<AttribDefault>10</AttribDefault>
+			<AttribRange>0-101</AttribRange>
+		</车牌识别置信度阈值>
+		<是否检测无牌车>
+			<AttribType>4</AttribType>
+			<AttribInfo></AttribInfo>
+			<AttribDefault>1</AttribDefault>
+			<AttribRange/>
+		</是否检测无牌车>
+		<无牌车中是否检测大车>
+			<AttribType>4</AttribType>
+			<AttribInfo></AttribInfo>
+			<AttribDefault>1</AttribDefault>
+			<AttribRange/>
+		</无牌车中是否检测大车>
+		<是否检测摩托车>
+			<AttribType>4</AttribType>
+			<AttribInfo></AttribInfo>
+			<AttribDefault>0</AttribDefault>
+			<AttribRange/>
+		</是否检测摩托车>
+		<是否检测行人>
+			<AttribType>4</AttribType>
+			<AttribInfo></AttribInfo>
+			<AttribDefault>0</AttribDefault>
+			<AttribRange/>
+		</是否检测行人>
+		<是否对无牌车补充车牌识别>
+			<AttribType>4</AttribType>
+			<AttribInfo></AttribInfo>
+			<AttribDefault>0</AttribDefault>
+			<AttribRange/>
+		</是否对无牌车补充车牌识别>
+		<摩托与汽车的尺度比>
+			<AttribType>1</AttribType>
+			<AttribInfo></AttribInfo>
+			<AttribDefault>1.500000</AttribDefault>
+			<AttribRange>0.800000-3.000000</AttribRange>
+		</摩托与汽车的尺度比>
+		<无牌车确认距离阈值>
+			<AttribType>0</AttribType>
+			<AttribInfo>米</AttribInfo>
+			<AttribDefault>5</AttribDefault>
+			<AttribRange>0-100</AttribRange>
+		</无牌车确认距离阈值>
+		<无牌虚拟车牌大于最小车牌宽度才输出>
+			<AttribType>4</AttribType>
+			<AttribInfo></AttribInfo>
+			<AttribDefault>0</AttribDefault>
+			<AttribRange/>
+		</无牌虚拟车牌大于最小车牌宽度才输出>
+		<无牌车检测灵敏度>
+			<AttribType>0</AttribType>
+			<AttribInfo></AttribInfo>
+			<AttribDefault>50</AttribDefault>
+			<AttribRange>0-100</AttribRange>
+		</无牌车检测灵敏度>
+		<车尾大车检测灵敏度>
+			<AttribType>0</AttribType>
+			<AttribInfo></AttribInfo>
+			<AttribDefault>40</AttribDefault>
+			<AttribRange>0-100</AttribRange>
+		</车尾大车检测灵敏度>
+		<行人摩托车检测灵敏度>
+			<AttribType>0</AttribType>
+			<AttribInfo></AttribInfo>
+			<AttribDefault>50</AttribDefault>
+			<AttribRange>0-100</AttribRange>
+		</行人摩托车检测灵敏度>
+		<是否保存跟踪图>
+			<AttribType>4</AttribType>
+			<AttribInfo></AttribInfo>
+			<AttribDefault>0</AttribDefault>
+			<AttribRange/>
+		</是否保存跟踪图>
+		<是否保存大车检测图>
+			<AttribType>4</AttribType>
+			<AttribInfo></AttribInfo>
+			<AttribDefault>0</AttribDefault>
+			<AttribRange/>
+		</是否保存大车检测图>
+		<是否发送Debugger>
+			<AttribType>4</AttribType>
+			<AttribInfo></AttribInfo>
+			<AttribDefault>0</AttribDefault>
+			<AttribRange/>
+		</是否发送Debugger>
+		<车辆跟踪最远纵向距离>
+			<AttribType>1</AttribType>
+			<AttribInfo></AttribInfo>
+			<AttribDefault>100.000000</AttribDefault>
+			<AttribRange>30.000000-300.000000</AttribRange>
+		</车辆跟踪最远纵向距离>
+		<车辆跟踪最远横向距离>
+			<AttribType>1</AttribType>
+			<AttribInfo></AttribInfo>
+			<AttribDefault>3.000000</AttribDefault>
+			<AttribRange>0.000000-20.000000</AttribRange>
+		</车辆跟踪最远横向距离>
+		<车牌宽度范围设定方法>
+			<AttribType>3</AttribType>
+			<AttribInfo></AttribInfo>
+			<AttribDefault>1</AttribDefault>
+			<AttribRange>2:0-手动设置&amp;1-自动计算</AttribRange>
+		</车牌宽度范围设定方法>
+		<调试信息>
+			<字体大小>
+				<AttribType>0</AttribType>
+				<AttribInfo></AttribInfo>
+				<AttribDefault>20</AttribDefault>
+				<AttribRange>10-100</AttribRange>
+			</字体大小>
+			<是否显示Scale>
+				<AttribType>4</AttribType>
+				<AttribInfo></AttribInfo>
+				<AttribDefault>0</AttribDefault>
+				<AttribRange/>
+			</是否显示Scale>
+			<是否显示耗时>
+				<AttribType>4</AttribType>
+				<AttribInfo></AttribInfo>
+				<AttribDefault>0</AttribDefault>
+				<AttribRange/>
+			</是否显示耗时>
+			<是否显示版本>
+				<AttribType>4</AttribType>
+				<AttribInfo></AttribInfo>
+				<AttribDefault>0</AttribDefault>
+				<AttribRange/>
+			</是否显示版本>
+		</调试信息>
+	</算法参数设置>
+</root>

src/App.vue

@@ -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;

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 {
 export default {
   map,
   map,
   login,
   login,
-  task,
-  search
-}
\ No newline at end of file
+  task
+};

src/api/axios.js

@@ -54,4 +54,4 @@ service.interceptors.response.use(
  */
  */
 export default function() {
 export default function() {
   return service
   return service
-}
\ No newline at end of file
+}

src/api/index.js

@@ -44,4 +44,4 @@ export default {
     }
     }
     return instance.delete(url, options)
     return instance.delete(url, options)
   }
   }
-}
\ No newline at end of file
+}

src/api/install.js

@@ -16,4 +16,4 @@ const install = function(Vue) {
 
 
 export default {
 export default {
   install
   install
-}
\ No newline at end of file
+}

src/api/login/index.js

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

src/api/login/urls.js

-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
+  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/api/taskManage/urls.js

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

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/YtContronByVionVideo.js

+var isNavigating = false; //球机是否在巡航
+var CameraSpeed = 10
+/**
+ * 云台操作类，这里方法为视频OCX提供
+ * @author tramp
+ * @dateTime 2016 08 10
+ * @version 0.0.1
+ *
+ */
+/**
+ * 球机可提供的操作
+ * @author tramp
+ * @type {Object}
+ */
+var pzOperateType = {
+    /* 云台以SS的速度上仰 */
+    "V_PANTILT_UP": 0,
+    /* 云台以SS的速度下俯 */
+    "V_PANTILT_DOWN": 1,
+    /* 云台以SS的速度左转 */
+    "V_PANTILT_LEFT": 2,
+    /* 云台以SS的速度右转 */
+    "V_PANTILT_RIGHT": 3,
+    /* 云台以SS的速度右上转*/
+    "V_PANTILT_RIGHT_UP": 4,
+    /* 云台以SS的速度右下转 */
+    "V_PANTILT_RIGHT_DOWN": 5,
+    /* 云台以SS的速度左上转 */
+    "V_PANTILT_LEFT_UP": 6,
+    /* 云台以SS的速度左下转 */
+    "V_PANTILT_LEFT_DOWN": 7,
+    /* 焦距以速度SS变大(倍率变大) */
+    "V_ZOOM_IN": 8,
+    /* 焦距以速度SS变小(倍率变小) */
+    "V_ZOOM_OUT": 9,
+    /*云台停止运动*/
+    "V_STOP": 10
+};
+/**
+ * 设置云台转速
+ * @param {*} val
+ */
+function setCameraSpeed(val){
+    CameraSpeed = val;
+}
+function getControlParam(code) {
+    var param;
+    switch (code) {
+        case "36":
+            param = "V_PANTILT_LEFT_UP";
+            break;
+        case "38":
+            param = "V_PANTILT_UP";
+            break;
+        case "33":
+            param = "V_PANTILT_RIGHT_UP";
+            break;
+        case "37":
+            param = "V_PANTILT_LEFT";
+            break;
+        case "12":
+            param = "V_PANTILT_LEFT"; //没有巡航，用想做运动代替
+            break;
+        case "39":
+            param = "V_PANTILT_RIGHT";
+            break;
+        case "35":
+            param = "V_PANTILT_LEFT_DOWN";
+            break;
+        case "40":
+            param = "V_PANTILT_DOWN";
+            break;
+        case "34":
+            param = "V_PANTILT_RIGHT_DOWN";
+            break;
+        case "109":
+            param = "V_ZOOM_IN";
+            break;
+        case "107":
+            param = "V_ZOOM_OUT";
+            break;
+        default:
+            param = "V_STOP";
+            break;
+    }
+    return param;
+}
+//操作设备的次数
+var count = 0;
+/**
+ * 控制设备
+ * @author tramp
+ * @DateTime 2016-09-13
+ * @param    {[type]}   var    szCmd         控制参数
+ * @param    {[type]}   int    speed         速度
+ * @param    {[type]}   string para_string   预留
+ * @return   {[type]}          [description]
+ */
+function controlDevice(szCmd) {
+    var re = controlDeviceOnce(szCmd);
+    if (re == 1) {
+        // count = 0;
+        return true;
+    } else {
+        return false;
+        //    if (count < 5) {
+        //        count++;
+        //        return controlDevice(szCmd);
+        //    }
+        //    else {
+        //        return false;
+        //    }
+    }
+}
+/**
+ * 控制设备 单次
+ * @author tramp
+ * @DateTime 2016-09-13
+ * @param    {[type]}   var    szCmd         控制参数
+ * @param    {[type]}   int    speed         速度
+ * @param    {[type]}   string para_string   预留
+ * @return   {[type]}          [description]
+ */
+function controlDeviceOnce(szCmd) {
+
+    var i = VionVideo.PtzSendCmd(szCmd, CameraSpeed, "");
+    console.log(i)
+    return i;
+
+}
+/**
+ * 是否正在控制球机
+ * @type {Boolean}
+ */
+var controlIng = false;
+/**
+ * 开始控制球机
+ * @author tramp
+ * @DateTime 2016-08-11
+ * @param    {event}   evt 鼠标事件
+ */
+function ControlCameraWithMouse(evt) {
+    if (!isUseYT) {
+        var controlCode = getControlParam($(this).attr("data-code"));
+        if (!enableAction(controlCode)) {
+            return null;
+        }
+        controlDevice(controlCode);
+    }
+}
+/**
+ * 停止控制球机
+ * @author tramp
+ * @DateTime 2016-08-11
+ * @param    {event}   evt 鼠标事件
+ */
+function StopControlCamera(evt) {
+    controlIng = false;
+    controlDevice("V_STOP");
+}
+/**
+ * 临时方法，如果为右上，左上，右下，左下，则返回false，
+ * 原因是，董文佳提供的云台控制控件不支持左上等；
+ * @author tramp
+ * @DateTime 2016-08-15
+ * @param    {string}   controlCode 操作码
+ * @return   {bool}                  是否支持操作
+ */
+function enableAction(controlCode) {
+    var enable = true;
+    //     /* 云台以SS的速度右上转*/
+    // "V_PANTILT_RIGHT_UP": 4,
+    // /* 云台以SS的速度右下转 */
+    // "V_PANTILT_RIGHT_DOWN": 5,
+    // /* 云台以SS的速度左上转 */
+    // "V_PANTILT_LEFT_UP": 6,
+    // /* 云台以SS的速度左下转 */
+    // "V_PANTILT_LEFT_DOWN": 7,
+    // if (controlCode == "V_PANTILT_RIGHT_UP" || controlCode == "V_PANTILT_RIGHT_DOWN" ||
+    //  controlCode == "V_PANTILT_LEFT_UP" || controlCode == "V_PANTILT_LEFT_DOWN") {
+    //     enable = false;
+    // }
+    return enable;
+}
+/**
+ * 球机巡航
+ * @author tramp
+ * @DateTime 2016-09-13
+ * @return   {[type]}   [description]
+ */
+function toggleCameraNavigate() {
+    //alert(isNavigating);
+    //进行相应的控制
+    if (isNavigating) {
+        isNavigating = !StopControlCamera();
+    } else {
+        isNavigating = controlDevice("V_PANTILT_LEFT");
+    }
+    updateNavigateIcon();
+}
+/**
+ * 停止球机巡航
+ * @author tramp
+ * @DateTime 2016-09-13
+ * @return   {[type]}   [description]
+ */
+function stopCameraNavigate() {
+    if (isUseYT) {
+        isNavigating = !StopControlCamera();
+        updateNavigateIcon();
+    }
+}
+/**
+ * 更新球机巡航图标
+ * @author tramp
+ * @DateTime 2016-09-13
+ * @return   {[type]}   [description]
+ */
+function updateNavigateIcon() {
+    var navBtnObj = $(".cameraControl3");
+    //更新图标
+    if (isNavigating) {
+        navBtnObj.addClass("nav_activited");
+    } else navBtnObj.removeClass("nav_activited");
+}
+/**
+ * 对隐藏域中的相机信息进行赋值
+ * @author tramp
+ * @DateTime 2016-08-16
+ * @param    String   companyNum  公司代码
+ * @param    {String}   camIp       相机IP
+ * @param    {String}   port        相机端口号
+ * @param    {String}   nodeChannel 通道号
+ * @param    {String}   username    相机用户名
+ * @param    {String}   pwd         相机密码
+ * @param    {String}   id          相机标示
+ */
+function setCameraInfoForPTZ(companyNum, camIp, port, nodeChannel, username, pwd, id) {
+    $("#companyNum").val(companyNum);
+    $("#cameraIp").val(camIp);
+    $("#port").val(port);
+    $("#cameraChannel").val(nodeChannel);
+    $("#username").val(username);
+    $("#pwd").val(pwd);
+    $("#id").val(id);
+}
+/**
+ * 是否在控制云台
+ * @type {Boolean}
+ */
+var isUseYT = false;
+/**
+ * 连接相机
+ * @author tramp
+ * @DateTime 2016-09-13
+ * @param    {[type]}   var szDeviceIp    相机IP
+ * @param    {[type]}   var szUser        用户名
+ * @param    {[type]}   var szPass        密码
+ * @return   {[type]}       [description]
+ */
+function connectCamera(szDeviceIp, szUser, szPass, camType) {
+    // $.ajax({
+    //     url: '../../Ashx/Vion/Backstage/Video/pzControlHelp.ashx',
+    //     type: 'POST',
+    //     dataType: 'json',
+    //     data: {
+    //         companyNum: $("#companyNum").val(),
+    //         camip: $("#cameraIp").val(),
+    //         port: $("#port").val(),
+    //         channel: $("#cameraChannel").val(),
+    //         username: $("#username").val(),
+    //         pwd: $("#pwd").val(),
+    //         id: $("#id").val(),
+    //         operation: "connect"
+    //     }
+    // }).done(function() {
+    //     console.log("success");
+    // }).fail(function() {
+    //     console.log("error");
+    // }).always(function() {
+    //     console.log("complete");
+    // });
+    var i = 0;
+    debugger
+    switch (camType) {
+        case "0":
+            console.log("");
+            break;
+        case "-1":
+            console.log("未找到目标相机");
+            break;
+        case "rifle":
+            console.log("枪机无云台操作");
+            break;
+        case "ball":
+            i = VionVideo.PtzRegistDev(szDeviceIp, szUser, szPass);
+            console.log('云台连接状态:'+i)
+            if (i == 1) {
+                return true;
+            } else {
+                console.log("连接云台失败");
+                return false;
+            }
+            break;
+        default:
+            i = VionVideo.PtzRegistDev(szDeviceIp, szUser, szPass);
+            if (i == 1) {
+                return true;
+            } else {
+                console.log("连接云台失败");
+                return false;
+            }
+            break;
+    }
+}
+//========================辅助公共方法====================================
+/*
+ * 隐藏ocx
+ * @author tramp
+ */
+function hideVideoOcxDiv() {
+    $("#VionVideo").hide();
+}
+/**
+ * 打开OCX
+ * @author tramp
+ * @DateTime 2016-08-10
+ * @return   {void}
+ */
+function showVideoOcxDiv() {
+    $("#VionVideo").show();
+}
+/*
+ * 隐藏ocx
+ * @author tramp
+ */
+function hideOcxDiv() {
+    $("#VionVideo").hide();
+}
+/**
+ * 打开OCX
+ * @author tramp
+ * @DateTime 2016-08-10
+ * @return   {void}
+ */
+function showOcxDiv() {
+    $("#VionVideo").show();
+}
+/**
+ * 弹窗程序，封装的目的是：这里的弹窗都需要隐藏OCX
+ * @author tramp
+ * Date 2016 08 10
+ * @param  {string} msg 弹窗中的信息
+ * @return {void}
+ */
+function showMessagerInfo(msg, callback) {
+    this.hideVideoOcxDiv();
+    $.messager.alert("提示", msg, "info", function () {
+        this.showVideoOcxDiv();
+        if (typeof callback === "function") {
+            callback();
+        }
+    });
+}
+/**
+ * 错误弹窗封装，目的是封装隐藏和显示OCX
+ * @author tramp
+ * date 2016 08 10
+ */
+function showMessageError(msg, callback) {
+    this.hideVideoOcxDiv();
+    $.messager.alert("错误", msg, "error", function () {
+        this.showVideoOcxDiv();
+        if (typeof callback === "function") {
+            callback();
+        }
+    });
+}
+//显示登录窗口,并调用注册权限的方法，30秒后超时
+function showPermissionLoginWindow() {
+    //隐藏OCX插件
+    hideVideoOcxDiv();
+    //设置用户权限信息
+    var progressOptions = {
+        title: "提示",
+        msg: "权限申请中，请稍候..."
+    };
+    $.messager.progress(progressOptions);
+    var setPermission = SetPermission(pServerIP, pServerPort, loginedUserName, loginedUserPass);
+    regPermissionTimeoutTimer = setTimeout(showReloginConfirm, 30000, "连接超时,是否重试？");
+}
+/**
+ * 设置当前登录用户的权限信息
+ * @author tramp
+ * @DateTime 2016-08-11
+ * @param    {string}   serverIP        接收服务器IP
+ * @param    {string}   serverPort      接收服务器端口
+ * @param    {string}   loginedUserName 已登录用户的用户名
+ * @param    {string}   loginedUserPass 已登录用户的密码
+ * @return   {number}     0 -- 失败，1 -- 成功
+ */
+function SetPermission(serverIP, serverPort, loginedUserName, loginedUserPass) {
+    return trafficOcxObj.PermissionLogin(serverIP, serverPort, loginedUserName, loginedUserPass) == 1;
+}
+/**
+ * 显示重新登录确认框
+ * @author tramp
+ * @DateTime 2016-08-11
+ * @param    {[type]}   msg [description]
+ * @return   {[type]}       [description]
+ */
+function showReloginConfirm(msg) {
+    try {
+        $.messager.progress("close");
+    } catch (e) { }
+    if (!msg) {
+        msg = "连接超时，是否重新连接？";
+    } else {
+        msg = "出现错误：" + msg + ",是否重新连接？";
+    }
+    $.messager.confirm("提示", msg, function (r) {
+        if (r) {
+            showPermissionLoginWindow();
+        } else {
+            this.hideVideoOcxDiv();
+            $.messager.alert('错误', '注册权限失败！', 'error', function () {
+                this.showVideoOcxDiv();
+            });
+        }
+    });
+}
+/**
+ * 处理登录返回的结果，在登录窗口中显示
+ * @author tramp
+ * @DateTime 2016-08-11
+ * @param    {[type]}   resultCode OCX返回值
+ * @return   {[type]}              [description]
+ */
+function processLoginResult(resultCode) {
+    var message;
+    //关闭登录提示窗口
+    $.messager.progress('close');
+    clearTimeout(regPermissionTimeoutTimer); //清空超时对话框定时器
+    switch (resultCode) {
+        case -1:
+            message = "网络连接超时！";
+            break;
+        case 0:
+            message = "申请成功！";
+            isRegPermissionSuccess = true;
+            this.showVideoOcxDiv(); //显示OCX控件
+            //设置默认的权限时间
+            SetPermissionTime(defaultKeepPermissionInterval);
+            break;
+        case 1:
+            message = "向中心注册失败！";
+            break;
+        case 2:
+            message = "登录服务器失败";
+            break;
+        case 3:
+            message = "查询设备个数失败";
+            break;
+        case 4:
+            message = "查询设备信息失败";
+            break;
+        default:
+            message = "";
+            break;
+    }
+    //regPermissionMessage = message;
+    //如果网络连接超时，提示重新登录
+    if (resultCode != 0) {
+        showReloginConfirm(message);
+    }
+    /*
+    方法说明：
+    */
+    /**
+     * 设置默认的权限申请时间
+     * @author tramp
+     * @DateTime 2016-08-11
+     * @param    {number}   interval 默认的权限时间
+     */
+    function SetPermissionTime(interval) {
+        try {
+            return trafficOcxObj.SetPermissionTime(interval) == 1;
+        } catch (e) { }
+    }
+    //=========================================================================================
+    //
+}
+
+/**
+ * 视频事件处理器
+ * @author tramp
+ * @DateTime 2016-10-11
+ * @return   {[type]}   [description]
+ */
+function VideoEventHandle() {
+    this.Screenshot = function (imgPath) {
+        if (imgPath == "" || imgPath == null) {
+            return;
+        }
+        captureFlowManager.captureImageHandle(imgPath);
+    }
+}
+/**
+ * 根据本地路径获取图片并存放到后台，返回后台路径
+ * @author tramp
+ * @DateTime 2016-10-13
+ * @param    {[type]}   imgPath [description]
+ * @return   {[type]}           [description]
+ */
+function saveImageBase64(imgPath, cameraId) {
+    var imgBase64 = VionVideo.GetBase64DataByPath(20480000, imgPath);
+    var serverPath = "";
+    $.ajax({
+        url: 'RealTimeVideoWithYT.aspx?param=saveImage',
+        type: 'post',
+        dataType: 'json',
+        async: false,
+        data: {
+            imgBase64: imgBase64,
+            cameraId: cameraId
+        },
+        success: function (data) {
+            if (data.success) {
+                serverPath = data.imgPath;
+            } else {
+                serverPath = "";
+            }
+        }
+    });
+    imgBase64 = null;
+    endTime();
+    startTime();
+    return serverPath;
+}
+
+/**
+ * 开始计时
+ * @author tramp
+ * @DateTime 2016-10-13
+ */
+function startTime() {
+    VionVideo.SetParam("VideoShowTimer", "ON")
+}
+/**
+ * 停止计时
+ * @author tramp
+ * @DateTime 2016-10-13
+ */
+function endTime() {
+    VionVideo.SetParam("VideoShowTimer", "OFF")
+}
+
+//================================类变量声明==============================================
+//================================类变量声明==============================================
+/**
+ * 抓拍流程管理类
+ * @author tramp
+ * @DateTime 2016-10-12
+ */
+function CaptureFlowManager() {
+    var isCaptureIng = true;
+    var videoRecordTimeoutTimer = null; //检查录像时间是否超时的定时器
+    var videoRecordTimeout = 60; //录像超时时间，单位秒
+    var nextCaptureFrameId = null; //下个抓拍框的ID
+    var timerTime = 20000; //定时器间隔时间
+    var ocxForCapture; //抓拍控件的引用，这里需要测试是否能够识别
+    this.outPutPath = "C:\\temp";
+    var captureResultMap = new Map(); //存储已经抓到的图片的信息，以相机的id作为索引，因为不同窗口中可能会播放同一个相机
+    var captureResultIndex = ""; //当前处理中的抓拍结果的索引
+    var captureCameraAttribute; //当前抓拍的相机的属性信息
+    var msgInfo; //信息弹出函数；
+    var msgError; //错误弹出函数;
+    var imgBase64Handle; //base64的图片进行处理，返回一个图片的http路径
+    var pictureHandle; //对获得的图片处理的函数，需要外部初始化；
+    var deletePictureHandle; //删除图片处理函数；
+    var submitHandle; //提交图片请求
+    var isAccept = true;
+    var attributeHandle; //属性信息输入函数
+    var uploadingHandle; //上传处理器
+    //==================================需要初始化的方法=================================================
+    /**
+     * 设置OCX控件，这里为了防止OCX控件的ID变化导致本类中所有的id都改变，但是这里需要测试是否可行
+     * @author tramp
+     * @DateTime 2016-10-12
+     * @param    {[type]}   ocx [description]
+     */
+    this.setOcxForCapture = function (ocx) {
+        ocxForCapture = ocx;
+    }
+    /**
+     * 设定录像超时时间
+     * @author tramp
+     * @DateTime 2016-10-12
+     * @param    {[type]}   rtime [description]
+     */
+    this.setVideoRecordTimeout = function (rtime) {
+        videoRecordTimeout = rtime;
+    }
+    /**
+     * 设置信息弹窗程序
+     * @author tramp
+     * @DateTime 2016-10-12
+     * @param    {[type]}   fun [description]
+     */
+    this.setMsgInfo = function (fun) {
+        msgInfo = fun;
+    }
+    /**
+     * 设置错误弹窗程序
+     * @author tramp
+     * @DateTime 2016-10-12
+     * @param    {[type]}   fun [description]
+     */
+    this.setMsgError = function (fun) {
+        msgError = fun;
+    }
+    /**
+     * 设置Base64图片处理器
+     * @author tramp
+     * @DateTime 2016-10-12
+     * @param    {[type]}   handle [description]
+     */
+    this.setImgBase64Handle = function (handle) {
+        imgBase64Handle = handle;
+    }
+    /**
+     * 图片处理器，主要用作显示或者影响其他标签的操作
+     * @author tramp
+     * @DateTime 2016-10-12
+     * @param    {[type]}   handle [description]
+     */
+    this.setPictureHandle = function (handle) {
+        pictureHandle = handle;
+    }
+    /**
+     * 设置删除图片程序
+     * @author tramp
+     * @DateTime 2016-10-12
+     * @param    {[type]}   handle [description]
+     */
+    this.setDeletePictureHandle = function (handle) {
+        deletePictureHandle = handle;
+    }
+    /**
+     * 设置提交函数
+     * @author tramp
+     * @DateTime 2016-10-14
+     * @param    {[type]}   handle [description]
+     */
+    this.setSubmitHandle = function (handle) {
+        submitHandle = handle;
+    }
+    /**
+     * 设置上传函数
+     * @author tramp
+     * @DateTime 2016-10-14
+     * @param    {[type]}   handle [description]
+     */
+    this.setUploadingHandle = function (handle) {
+        uploadingHandle = handle;
+    }
+    /**
+     * 设置属性输入处理器
+     * @author tramp
+     * @DateTime 2016-10-17
+     * @param    {[type]}   handle [description]
+     */
+    this.setAttributeHandle = function (handle) {
+        attributeHandle = handle;
+    }
+    //==================================需要初始化的方法结束=================================================
+    //=====================外部调用操作类===============================
+    /**
+     * 开始抓图工作--作为备用
+     * @author tramp
+     * @DateTime 2016-10-12
+     * @return   {[type]}   [description]
+     */
+    this.startCapture = function () {
+        isCaptureIng = true;
+    }
+    /**
+     * 停止抓图 -- 作为备用
+     * @author tramp
+     * @DateTime 2016-10-12
+     * @return   {[type]}   [description]
+     */
+    this.stopCapture = function () {
+        isCaptureIng = false;
+    }
+    /**
+     * 提交
+     * @author tramp
+     * @DateTime 2016-10-14
+     * @param    {[type]}   submitType [description]
+     * @return   {[type]}              [description]
+     */
+    this.submit = function (submitType) {
+        var captureResult = captureResultMap.get(captureResultIndex);
+        submitHandle(captureResult, submitType)
+    }
+    /**
+     * 上传
+     * @author tramp
+     * @DateTime 2016-10-14
+     * @param    {[type]}   submitType [description]
+     * @return   {[type]}              [description]
+     */
+    this.uploading = function (submitType) {
+        var captureResult = captureResultMap.get(captureResultIndex);
+        return uploadingHandle(captureResult, submitType);
+    }
+    /**
+     * 执行抓图并返回存储的本地路径，js触发
+     * @author tramp
+     * @DateTime 2016-10-12
+     */
+    this.capturePictureAndGetPath = function (channel) {
+        if (cameraid == null || cameraid == "") {
+            this.showMessageError("请选择相机");
+            return false;
+        }
+        var localPath = ocxForCapture.VideoCaptureAndGetPath(channel, "");
+        var imgSvrPath = imgBase64Handle(localPath);
+        this.showPicture(imgPath, imgSvrPath);
+    }
+    /**
+     * 响应截图事件
+     * @author tramp
+     * @DateTime 2016-10-13
+     * @param    {[type]}   imgPath [description]
+     * @param    {[type]}   channel [description]
+     * @return   {Boolean}          [description]
+     */
+    this.captureImageHandle = function (imgPath) {
+        if (isAccept) {
+            var imgSvrPath = imgBase64Handle(imgPath, captureResultIndex);
+            showPicture(imgPath, imgSvrPath);
+        }
+    }
+    this.deleteImage = function (index) {
+        var captureResult = captureResultMap.get(captureResultIndex);
+        var serverPath;
+        var localPath;
+        if (captureResult != null && captureResult.cameraId != null) {
+            var imgPath = captureResult.deleteImage(index);
+            localPath = captureResult.getDeleteingImgLocalPath();
+            serverPath = captureResult.getDeleteingImgServerPath();
+        }
+        deletePictureHandle(localPath, serverPath, index);
+        this.setAccept();
+    }
+    /**
+     * 由得到图像的base64数据开始处理数据
+     * @author tramp
+     * @DateTime 2016-10-12
+     */
+    function showPicture(localPath, svrPath) {
+        var captureResult = captureResultMap.get(captureResultIndex);
+        if (captureResult != null && captureResult.cameraId != null) {
+            //            if (captureResult.cameraId == captureResultIndex) {
+            //                //do nothing
+            //            } else {
+            //                this.Result.remove(captureResultIndex); //如果存储的通道号中的相机编号与新的不同，则直接置为空
+            //            }
+        } else {
+            //开始在captureedMsgMap中创建新的内容
+            captureResult = new CaptureFlowSingle(captureResultIndex);
+            captureResult.cameraId = captureResultIndex;
+            captureResult.attribute = captureCameraAttribute;
+            captureResultMap.set(captureResultIndex, captureResult);
+        }
+        //开始添加
+        var re = captureResult.addImage(localPath, svrPath);
+        //captureResultMap.set(captureResultIndex, captureResult);
+        switch (re) {
+            case -1:
+                isAccept = false;
+                msgError("存储中已经存在图片，不能替换", this.setAccept);
+                break;
+            case -2:
+                isAccept = false;
+                msgError("图片数量总数最大值为：" + captureResult.maxPicture, this.setAccept);
+                break;
+            default:
+                pictureHandle(captureResult, "add", re, captureResultIndex);
+                break;
+        }
+    }
+    /**
+     * 设置可以接受图片信息
+     * @author tramp
+     * @DateTime 2016-10-14
+     */
+    this.setAccept = function () {
+        isAccept = true;
+    }
+    /**
+     * 向管理器注册相机
+     * @author tramp
+     * @DateTime 2016-10-13
+     * @param    {[type]}   cameraid [description]
+     * @return   {[type]}            [description]
+     */
+    this.registerCaptureFlow = function (cameraid, attribute) {
+        if (cameraid == null || cameraid == "undefined" || cameraid == "") {
+            return null;
+        }
+        var captureResult = captureResultMap.get(cameraid);
+        if (captureResult == null) {
+            captureResult = new CaptureFlowSingle(cameraid);
+            if (attribute != null) {
+                captureResult.attribute = attribute;
+                captureCameraAttribute = attribute;
+            }
+        }
+        pictureHandle(captureResult, "reset", "", cameraid);
+        captureResultIndex = cameraid;
+        captureResultMap.set(cameraid, captureResult);
+        this.setAccept();
+        return captureResult;
+    }
+    /**
+     * 改变显示窗口
+     * @author tramp
+     * @DateTime 2016-10-13
+     * @param    {[type]}   cameraId 相机ID
+     * @return   {[type]}            [description]
+     */
+    this.changeChannel = function (cameraId, attribute) {
+        var captureResult = this.registerCaptureFlow(cameraId, attribute);
+        //            pictureHandle(captureResult, "reset", "", cameraId);
+        //            this.setAccept();
+    }
+    /**
+     * 取消某个相机的抓拍流程
+     * @author tramp
+     * @DateTime 2016-10-12
+     * @param    {[type]}   channel [description]
+     * @return   {[type]}            [description]
+     */
+    this.cancleFlow = function () {
+        var captureResult = captureResultMap.get(captureResultIndex);
+        if (captureResult != null && captureResult.cameraId != null) {
+            //                for (var i = 1; i <= captureResult.getImagePathMap().size; i++) {
+            //                    var image = captureResult.getImagePathMap().get(i);
+            //                    deletePictureHandle(image.serverPath, i);
+            //                };
+            captureResult.getImagePathMap().forEach(function (item, key) {
+                //                    var image = captureResult.getImagePathMap().get(i);
+                deletePictureHandle(item.localPath, item.serverPath, key);
+            });
+            //captureResultMap.delete(captureResultIndex);
+            captureResultMap.set(captureResultIndex, null);
+        }
+        this.setAccept();
+        endTime();
+    }
+    /**
+     * 取消单个流程中单个图片信息，俗称删除单个图片
+     * @author tramp
+     * @DateTime 2016-10-12
+     * @return   {[type]}   [description]
+     */
+    this.cancleSinglePicture = function (channel, imgIndex) {
+        var captureResult = captureResultMap.get(channel);
+        if (captureResult != null && captureResult.cameraId != null) {
+            if (captureResult.nextCaptureImageIndex <= imgIndex) {
+                isAccept = false;
+                msgError("存储中未找到指定索引的图片", this.setAccept);
+            } else { }
+        } else {
+            isAccept = false;
+            msgError("并未存储本通道的信息！", this.setAccept);
+        }
+        this.setAccept();
+    }
+    /**
+     * 开始录像
+     * @author tramp
+     * @DateTime 2016-10-12
+     * @param    {[type]}   cameraid 相机id
+     * @param    {[type]}   channel  播放器的播放通道号，即多屏状态下的屏幕号
+     * @return   {[type]}            [description]
+     */
+    this.startVideoRecord = function (cameraid, channel) {
+        // body...
+    }
+    /**
+     * 停止录像
+     * @author tramp
+     * @DateTime 2016-10-12
+     * @param    {[type]}   cameraid 相机id
+     * @param    {[type]}   channel  播放器的播放通道号，即多屏状态下的屏幕号
+     * @return   {[type]}            [description]
+     */
+    this.stopVideoRecord = function (cameraid, channel) {
+        //333
+    }
+    /**
+     * 定时器处理程序，这里需要增加需要定时处理的任务
+     * @author tramp
+     * @DateTime 2016-10-12
+     * @param    {[type]}   argument [description]
+     * @return   {[type]}            [description]
+     */
+    //=====================外部调用操作类===============================
+    //=====================私有类===============================
+    function timerHandle(argument) {
+        // body...
+        //
+        // 超时的相机取消流程 需要提示；
+        // 超时的录像停止录像 不提示
+    }
+    /**
+     * 判断是否允许抓图
+     * @author tramp
+     * @DateTime 2016-10-12
+     * @return   {Boolean}  [description]
+     */
+    function isEnableCapture() {
+        try {
+            if (!isCaptureIng) {
+                this.showMessagerInfo("未开启抓图功能");
+                return false;
+            } else {
+                return true;
+            }
+        } catch (e) {
+            alert("未设定信息处理函数");
+        }
+    }
+    /**
+     * 单个相机的抓拍流程关键信息类
+     * @author tramp
+     * @DateTime 2016-10-12
+     */
+    function CaptureFlowSingle(cameraId) {
+        var obj = new Object();
+        var maxPictureCount = 4;
+        var isFull = false; //map是否已经满员；
+        obj.maxPicture = maxPictureCount;
+        obj.cameraId = cameraId; //流程相关的相机ID
+        //==========录像相关============
+        obj.isVideoRecordIng = false; //相机是否在录像;
+        obj.startTimeOfVideoRecord = null; //相机录像的开始时间
+        obj.attribute = null; //属性信息
+        /**
+         * 下一个需要抓拍的图片的序号，从1开始；
+         * @type {Number}
+         */
+        var nextCaptureImageIndex = 1;
+        obj.imageCount = 0;
+        //===========图片相关============
+        var imagesPathMap = new Map();
+        /**
+         * 图像实体中存放的内容
+         * @author tramp
+         * @DateTime 2016-10-13
+         * @return   {[type]}   [description]
+         */
+        function imgObj(localPath, serverPath) {
+            var o = {
+                localPath: localPath, //本地路径
+                serverPath: serverPath, //服务器路径
+                caputureTime: new Date() //抓拍时间
+            };
+            return o;
+        };
+        /**
+         * 获取图片操作
+         * @author tramp
+         * @DateTime 2016-10-13
+         * @return   {[type]}   [description]
+         */
+        obj.getImagePathMap = function () {
+            // if (this.imagesPathMap.length == 0) {
+            //     for (var i = 1; i <= this.maxPictureCount; i++) {
+            //         imagesPathMap.put(i, new imgObj());
+            //     }
+            // }
+            return imagesPathMap;
+        }
+        /**
+         * 对索引加1，如果返回错误，说明索引已经越界
+         * @author tramp
+         * @DateTime 2016-10-12
+         */
+        function addIndex() {
+            if (nextCaptureImageIndex >= maxPictureCount) {
+                isFull = true;
+            } else {
+                var i = nextCaptureImageIndex + 1;
+                while (imagesPathMap.get(i) != null && i <= maxPictureCount) {
+                    i++;
+                }
+                if (i > maxPictureCount) {
+                    isFull = true;
+                } else {
+                    isFull = false;
+                }
+                nextCaptureImageIndex = i;
+            }
+        }
+        /**
+         * 添加抓拍结果
+         * @author tramp
+         * @DateTime 2016-10-13
+         * @param    {[type]}   localPath  [description]
+         * @param    {[type]}   serverPath [description]
+         */
+        obj.addImage = function (localPath, serverPath) {
+            if (isFull) {
+                return -2;
+            } else {
+                var captureResult = new imgObj(localPath, serverPath);
+                if (imagesPathMap.get(nextCaptureImageIndex) == null) {
+                    var thisIndex = nextCaptureImageIndex;
+                    imagesPathMap.set(thisIndex, captureResult);
+                    this.imageCount++;
+                    addIndex();
+                    return thisIndex;
+                } else {
+                    return -1; //如果存储中已经存在图片，说明有问题，直接返回错误；
+                };
+            }
+        }
+
+        var deleteingImgLocalPath;
+        var deleteingImgServerPath;
+        obj.deleteImage = function (imageIndex) {
+            var index = Number(imageIndex);
+            if (imagesPathMap.get(index) != null) {
+                var path = imagesPathMap.get(index).serverPath;
+                deleteingImgLocalPath = imagesPathMap.get(index).localPath;
+                deleteingImgServerPath = imagesPathMap.get(index).serverPath;
+                //imagesPathMap.delete(index);
+                imagesPathMap.set(index, null);
+                if (nextCaptureImageIndex >= index) {
+                    nextCaptureImageIndex = index;
+                }
+                this.imageCount--;
+                isFull = false;
+                return path;
+            }
+            return "";
+        }
+        obj.getDeleteingImgLocalPath = function () {
+            return deleteingImgLocalPath;
+        }
+        obj.getDeleteingImgServerPath = function () {
+            return deleteingImgServerPath;
+        }
+
+        return obj;
+    }
+    //=====================私有类结束===============================
+}
+/**
+ * ocx窗口管理程序;
+ * @author tramp
+ * @DateTime 2016-10-12
+ * @return   {[type]}   [description]
+ */
+function OcxWindowsManager() {
+    var windowsElementMap = new Map(); //窗口信息的集合，其中以窗口channel为索引
+    var windowSelectedIndex = 1; //选择的窗口索引
+    var getCameraModel;
+    /**
+     * 获取摄像机信息的方法，需要初始化
+     * @author tramp
+     * @DateTime 2016-10-13
+     * @param    {[type]}   fun [description]
+     */
+    this.setGetCameraModelFunction = function (fun) {
+        this.getCameraModel = fun;
+    }
+    /**
+     * 获取正在播放的窗口的索引
+     * @author tramp
+     * @DateTime 2016-10-12
+     * @return   {[type]}   [description]
+     */
+    this.getSelectedIndex = function () {
+        return this.windowSelectedIndex;
+    }
+    /**
+     *  根据播放窗口索引获取窗口实体数据
+     * @author tramp
+     * @DateTime 2016-10-12
+     * @param    {[type]}   index [description]
+     * @return   {[type]}         [description]
+     */
+    this.getElementByIndex = function (index) {
+        return this.windowsElementMap[index];
+    }
+    /**
+     * 根据摄像机ID获取窗口实体数据
+     * @author tramp
+     * @DateTime 2016-10-12
+     * @param    {[type]}   cameraid [description]
+     * @return   {[type]}            [description]
+     */
+    this.getElementByCameraId = function (cameraid) {
+        for (var key in this.windowsElementMap) {
+            if (this.windowsElementMap[key] == cameraid) {
+                return this.windowsElementMap[i];
+            }
+        }
+    }
+    /**
+     * 获取正在播放的窗口的数据
+     * @author tramp
+     * @DateTime 2016-10-12
+     * @return   {[type]}   [description]
+     */
+    this.getElementSelected = function () {
+        this.getElementByIndex(this.windowSelectedIndex);
+    }
+    /**
+     * 播放视频时，在这里添加窗口信息
+     * @author tramp
+     * @DateTime 2016-10-12
+     * @param    {[type]}   cameraid [description]
+     * @param    {[type]}   index    [description]
+     * @return   {[type]}            [description]
+     */
+    this.addElement = function (cameraid, channel) {
+        this.windowsElementMap[channel] = this.getCameraModel(cameraId);
+    }
+    /**
+     * 删除通道中信息，一般用在停止播放时
+     * @author tramp
+     * @DateTime 2016-10-13
+     * @param    {[type]}   channel [description]
+     * @return   {[type]}           [description]
+     */
+    this.deleteElement = function (channel) {
+        this.windowsElementMap.remove(channel);
+    }
+    /**
+     * 选择窗口改变时
+     * @author tramp
+     * @DateTime 2016-10-12
+     * @param    {[type]}   channel [description]
+     * @return   {[type]}           [description]
+     */
+    this.changeWindow = function () {
+        var channel = this.getWindowsSelectedNowByOcx();
+        this.windowSelectedIndex = channel;
+    }
+    /**
+     * ocx窗口属性容器
+     * @author tramp
+     * @DateTime 2016-10-12
+     * @param    {[type]}   cameraId [description]
+     * @param    {[type]}   channel  [description]
+     * @return   {[type]}            [description]
+     */
+    function windowsElement(cameraId, channel) {
+        var winSingle = new Object();
+        winSingle.cameraid = cameraid;
+        winSingle.channel = channel;
+        winSingle.attribute;
+        return winSingle;
+    }
+    /**
+     * 获取选中的窗口
+     * @author tramp
+     * @DateTime 2016-10-13
+     * @return   {[type]}   [description]
+     */
+    function getWindowsSelectedNowByOcx() {
+        //这里需要等高略的接口
+        return 1;
+    }
+}
+/**
+ * 业务相关类管理，这里从流程管理类中提取出来的目的是，认为这里是可变的，而且与流程控制无关;这个类附属于流程类，不建议直接调用
+ * @author tramp
+ * @DateTime 2016-10-12
+ * @return   {[type]}   [description]
+ */
+function OperationManager() {
+    this.submitHandle = function (captureResult, submitType) {
+        endTime();
+        switch (submitType) {
+            case "illegal":
+                submitIllegal(captureResult);
+                break;
+            case "case":
+                submitCaseInfo(captureResult);
+                break;
+            default:
+                break;
+        }
+    }
+    /**
+     * 提交违法
+     * @author tramp
+     * @DateTime 2016-10-12
+     * @return   {[type]}   [description]
+     */
+    function submitIllegal(captureResult) {
+        showSubmitWindow(captureResult);
+    }
+    /**
+     * 提交案件信息
+     * @author tramp
+     * @DateTime 2016-10-12
+     * @return   {[type]}   [description]
+     */
+    function submitCaseInfo(captureResult) {
+        if (!captureResult) {
+            return null;
+        }
+        var urls = "";
+        captureResult.getImagePathMap().forEach(function (item, key) {
+            urls += item.serverPath + ";";
+
+        });
+        urls = urls.substring(0, urls.length - 1);
+        hideOcxDiv();
+        editCase(urls);
+    }
+    /**
+     * 上传处理器
+     * @author tramp
+     * @DateTime 2016-10-17
+     * @param    {[type]}   captureResult [description]
+     * @param    {[type]}   type          [description]
+     * @return   {[type]}                 [description]
+     */
+    this.uploadingHandle = function (captureResult, type) {
+        switch (type) {
+            case "illegal":
+                return uploadingIllegal(captureResult);
+                break;
+            case "case":
+                return uploadingCaseInfo(captureResult);
+                break;
+            default:
+                break;
+        }
+    }
+    /**
+     * 上传违法
+     * @author tramp
+     * @DateTime 2016-10-17
+     * @param    {[type]}   captureResult [description]
+     * @return   {[type]}                 [description]
+     */
+    uploadingIllegal = function (captureResult) {
+        return submitCapturedInfo(captureResult);
+    }
+    /**
+     * 上传案件
+     * @author tramp
+     * @DateTime 2016-10-17
+     * @param    {[type]}   captureResult [description]
+     * @return   {[type]}                 [description]
+     */
+    uploadingCaseInfo = function (captureResult) { }
+    /**
+     *  图片处理业务
+     * @author tramp
+     * @DateTime 2016-10-12
+     * @return   {[type]}   [description]
+     */
+    this.pictureHandle = function (captureResult, changeType, changedIndex, cameraid) {
+        switch (changeType) {
+            case "add":
+                addPictureHandle(captureResult.getImagePathMap().get(changedIndex).serverPath, changedIndex);
+                break;
+            case "reset":
+                initializationPicture(cameraid);
+                if (captureResult != null && captureResult.cameraId != null) {
+                    //                        for (var i = 0; i < captureResult.getImagePathMap().size; i++) {
+                    //                            try {
+                    //                                addPictureHandle(captureResult.getImagePathMap().get(i + 1).serverPath, i + 1);
+                    //                            } catch (e) {}
+                    //                        }
+                    captureResult.getImagePathMap().forEach(function (item, key) {
+                        addPictureHandle(item.serverPath, key);
+                    });
+                }
+                break;
+            default:
+                break;
+        }
+    }
+    /**
+     * 删除图片，并在后台删除
+     * @author tramp
+     * @DateTime 2016-10-12
+     * @param    {[type]}   imgPath， imgIndex      [description]
+     * @return   {[type]}            [description]
+     */
+    this.deletePictureHandle = function (localPath, serverPath, imgIndex) {
+        deletePicture(serverPath, imgIndex);
+        cameraController.deleteLocalFile(localPath);
+        endTime();
+        $.ajax({
+            url: 'RealTimeVideoWithYT.aspx?param=deleteImage',
+            type: 'post',
+            dataType: 'json',
+            data: {
+                imgPath: serverPath
+            },
+            success: function (data) {
+                if (data.success) {
+                    // this.showMessagerInfo()
+                    //deletePicture();
+                } else {
+                    //alert("写入后台错误");
+                }
+
+            }
+        });
+    }
+    /**
+     * 初始化显示框
+     * @author tramp
+     * @DateTime 2016-10-14
+     * @return   {[type]}   [description]
+     */
+    function initializationPicture(cameraid) {
+        for (var i = 0; i < 4; i++) {
+            deletePicture("", i + 1);
+        }
+        // $("#cancelCapture").attr("data-code", cameraid);
+        // $("#submitCapturedInfo").attr("data-code", cameraid);
+        // captureIngCameraId = cameraid;
+    }
+
+    function deletePicture(imgPath, imgIndex) {
+        $("#picContainer" + imgIndex + " img").attr("src", "");
+        $("#picContainer" + imgIndex + " img").hide();
+    }
+    /**
+     * 向容器中添加图片
+     * @author tramp
+     * @DateTime 2016-10-12
+     * @param    {[type]}   imgPath， imgIndex [description]
+     */
+    function addPictureHandle(imgPath, imgIndex) {
+        $("#picContainer" + imgIndex + " img").attr("src", imgPath);
+        $("#picContainer" + imgIndex + " img").show();
+    }
+    //---------------XML模板--------------
+    var xmlTemplate = "<?xml version=\"1.0\" encoding=\"GB2312\" ?><LPR><LogNo>{logID}</LogNo>　<UserID>{UserID}</UserID><DepartmentID>{DepartmentID}</DepartmentID><DirectionNo>{directionID}</DirectionNo>" + "<DirectionName>{directionName}</DirectionName><LocationNo>{kakouID}</LocationNo><LocationName>{kakouName}</LocationName>" + "<DeviceNo>{deviceID}</DeviceNo><DeviceName>{deviceName}</DeviceName><DeviceIP>{deviceIP}</DeviceIP>" + "<PlateText>{carPlateNumber}</PlateText><PlateType>{carPlateType}</PlateType><PlateColor>{carPlateColor}</PlateColor>" + "<VehicleColor>{carColor}</VehicleColor><VehicleType>{carType}</VehicleType><ViolationTime>{ViolationTime}</ViolationTime><ViolationValue>{ViolationValue}</ViolationValue><ViolationType>{ViolationType}</ViolationType><DataSource>{DataSource}</DataSource><InputPeople>{InputPeople}</InputPeople><StartTime>{startTime}</StartTime>" + "<EndTime>{endTime}</EndTime><Record><RecordPath>{video}</RecordPath><StartTime>{videoStartTime}</StartTime>" + "<EndTime>{videoEndTime}</EndTime></Record><FullView1><ImagePath>{pic1}</ImagePath><CaptureTime>{picTime1}</CaptureTime>" + "</FullView1><FullView2><ImagePath>{pic2}</ImagePath><CaptureTime>{picTime2}</CaptureTime></FullView2>" + "<VehicleView><ImagePath>{pic3}</ImagePath><CaptureTime>{picTime3}</CaptureTime></VehicleView>" + "<SubView><ImagePath>{pic4}</ImagePath><CaptureTime>{picTime4}</CaptureTime></SubView></LPR>";
+    /**
+     * 获取页面的需要提交的违法信息，从之前的提交方法中抽取出来，为了其他的页面使用
+     * @author tramp
+     * @DateTime 2016-10-13
+     * @return   {[type]}   [description]
+     */
+    function getIllegalResult(captureResult) {
+        var illegalResult = new Object();
+        //illegalResult.outPath = outPath;
+        illegalResult.xmlString = xmlTemplate.replace("{logID}", "12345678");
+        illegalResult.directionID = validate($("#txtDirection").combobox("getValue")); //$("#txtDirection").val();
+        illegalResult.directionName = validate($("#txtDirection").combobox("getText")); //$("#txtDirection option:selected").text();
+        //illegalResult.kakouID = $("#txtKakouID").val();
+        illegalResult.kakouID = $("#txtKakouID").combobox("getValue");
+        //illegalResult.kakouName = $("#txtKakouName").val();
+        illegalResult.kakouName = $("#txtKakouID").combobox("getText");
+        illegalResult.deviceID = $("#txtDeviceID").val();
+        illegalResult.deviceName = removePreValue($("#txtDeviceName").val());
+        illegalResult.deviceIP = $("#txtDeviceIP").val();
+        illegalResult.carPlateNumber = $("#txtCarPlateNumber").val().toUpperCase()
+        //号牌种类
+        illegalResult.carPlateType = validate($("#txtCarPlateType").combobox("getValue"));
+        //getPreValue($("#txtCarPlateType option:selected").text());
+        //号牌颜色，车身颜色，车辆类型
+        illegalResult.carPlateColor = validate($("#txtCarPlateColor").combobox("getValue")); //getPreValue($("#txtCarPlateColor option:selected").text());
+        //车身颜色
+        illegalResult.carColor = validate($("#txtCarColor").combobox("getValue")); //removePreValue($("#txtCarColor option:selected").text());
+        //车辆类型
+        illegalResult.carType = validate($("#txtCarType").combobox("getValue")); //getPreValue($("#txtCarType option:selected").text());
+        illegalResult.startTime = undefined;
+        illegalResult.videoFile = "";
+        illegalResult.videoStopTime;
+        illegalResult.userID = $("#userID").val();
+        illegalResult.departmentID = $("#departmentID").val();
+        illegalResult.violationTime = $("#txtViolationTime").val();
+        illegalResult.violationValue = $("#txtViolationValue").val();
+        illegalResult.violationType = validate($("#txtViolationType").combobox("getValue")); //removePreValue($("#txtViolationType option:selected").val());
+        illegalResult.dataSource = removePreValue($("#dataSource option:selected").text());
+        illegalResult.userName = $("#userName").val();
+        captureResult.getImagePathMap().forEach(function (item, key) {
+            illegalResult["pic" + key] = item.localPath;
+            illegalResult["picTime" + key] = item.caputureTime;
+            if (illegalResult.startTime == undefined || illegalResult.startTime > item.caputureTime) {
+                illegalResult.startTime = item.caputureTime;
+            }
+
+        });
+        //        illegalResult.pic1 = captureResult.getImagePathMap().get("1").localPath; //本地路径
+        //        illegalResult.picTime1 = captureResult.getImagePathMap().get("1").caputureTime;
+        //        illegalResult.pic2 = captureResult.getImagePathMap().get("2").localPath; //本地路径
+        //        illegalResult.picTime2 = captureResult.getImagePathMap().get("2").caputureTime;
+        //        illegalResult.pic3 = captureResult.getImagePathMap().get("3").localPath; //本地路径
+        //        illegalResult.picTime3 = captureResult.getImagePathMap().get("3").caputureTime;
+        //        illegalResult.pic4 = captureResult.getImagePathMap().get("4").localPath; //本地路径
+        //        illegalResult.picTime4 = captureResult.getImagePathMap().get("4").caputureTime;
+        return illegalResult;
+    }
+
+    function validate(value) {
+        if (value == null || value == "-1" || value == "全部") {
+            return "";
+        }
+        else {
+            return value;
+        }
+    }
+    //根据抓拍的图片等信息，生成基本的XML文件
+    function getCapturedXmlString(caputureResult) {
+        var illegalResult = getIllegalResult(caputureResult)
+        var xmlString = xmlTemplate;
+        xmlString = xmlString.replace("{directionID}", illegalResult.directionID).replace("{directionName}", illegalResult.directionName); //方向id 方向名称
+        xmlString = xmlString.replace("{kakouID}", illegalResult.kakouID).replace("{kakouName}", illegalResult.kakouName);
+        xmlString = xmlString.replace("{deviceID}", illegalResult.deviceID).replace("{deviceName}", illegalResult.deviceName);
+        xmlString = xmlString.replace("{deviceIP}", illegalResult.deviceIP);
+        xmlString = xmlString.replace("{carPlateNumber}", illegalResult.carPlateNumber);
+        xmlString = xmlString.replace("{carPlateType}", illegalResult.carPlateType);
+        xmlString = xmlString.replace("{carPlateColor}", illegalResult.carPlateColor);
+        xmlString = xmlString.replace("{carColor}", illegalResult.carColor);
+        xmlString = xmlString.replace("{carType}", illegalResult.carType);
+        //设置开始，结束时间
+        xmlString = xmlString.replace("{startTime}", formatTimeString(illegalResult.startTime)).replace("{endTime}", formatTimeString(new Date()));
+        //录像文件,如果没有录像文件则设为空
+        if (illegalResult.videoFile && illegalResult.videoFile != "") {
+            xmlString = xmlString.replace("{video}", illegalResult.videoFile);
+            xmlString = xmlString.replace("{videoStartTime}", formatTimeString(illegalResult.startTime));
+            xmlString = xmlString.replace("{videoEndTime}", formatTimeString(illegalResult.videoStopTime));
+        } else {
+            xmlString = xmlString.replace("{video}", " ");
+            xmlString = xmlString.replace("{videoStartTime}", " ");
+            xmlString = xmlString.replace("{videoEndTime}", " ");
+        }
+        // //图片信息
+        if (illegalResult.pic1 != null && illegalResult.pic1 != "" && illegalResult.pic1 != undefined) {
+            xmlString = xmlString.replace("{pic1}", changePath(illegalResult.pic1));
+            xmlString = xmlString.replace("{picTime1}", formatTimeString(illegalResult.picTime1));
+        } else {
+            xmlString = xmlString.replace("{pic1}", "");
+            xmlString = xmlString.replace("{picTime1}", "");
+        }
+        if (illegalResult.pic2 != null && illegalResult.pic2 != "" && illegalResult.pic2 != undefined) {
+            xmlString = xmlString.replace("{pic2}", changePath(illegalResult.pic2));
+            xmlString = xmlString.replace("{picTime2}", formatTimeString(illegalResult.picTime2));
+        } else {
+            xmlString = xmlString.replace("{pic2}", "");
+            xmlString = xmlString.replace("{picTime2}", "");
+        }
+        if (illegalResult.pic3 != null && illegalResult.pic3 != "" && illegalResult.pic3 != undefined) {
+            xmlString = xmlString.replace("{pic3}", changePath(illegalResult.pic3));
+            xmlString = xmlString.replace("{picTime3}", formatTimeString(illegalResult.picTime3));
+        } else {
+            xmlString = xmlString.replace("{pic3}", "");
+            xmlString = xmlString.replace("{picTime3}", "");
+        }
+        if (illegalResult.pic4 != null && illegalResult.pic4 != "" && illegalResult.pic4 != undefined) {
+            xmlString = xmlString.replace("{pic4}", changePath(illegalResult.pic4));
+            xmlString = xmlString.replace("{picTime4}", formatTimeString(illegalResult.picTime4));
+        } else {
+            xmlString = xmlString.replace("{pic4}", "");
+            xmlString = xmlString.replace("{picTime4}", "");
+        }
+        //替换违法时间，违法数值，违法行为，数据来源，录入人
+        xmlString = xmlString.replace("{UserID}", illegalResult.userID);
+        xmlString = xmlString.replace("{DepartmentID}", illegalResult.departmentID);
+        xmlString = xmlString.replace("{ViolationTime}", illegalResult.violationTime);
+        xmlString = xmlString.replace("{ViolationValue}", illegalResult.violationValue);
+        xmlString = xmlString.replace("{ViolationType}", illegalResult.violationType);
+        xmlString = xmlString.replace("{DataSource}", illegalResult.dataSource);
+        xmlString = xmlString.replace("{InputPeople}", illegalResult.userName);
+        return xmlString;
+    }
+
+    function changePath(path) {
+        //path.replace('\\','\\');
+        var re = "";
+        var p = path.split('\\');
+        for (var i = 0; i < p.length; i++) {
+            re += p[i] + "\\\\";
+        }
+        re = re.substring(0, re.length - 2);
+        return re;
+    }
+    //清除选项前的数字
+    function removePreValue(stringWithValue) {
+        return stringWithValue.replace(/\w+:/, "");
+    }
+    //获取前置的Key值
+    function getPreValue(stringWithValue) {
+        var key = stringWithValue.split(":")[0];
+        //去掉前面的"0",比如:"00"->"0","01"->"1"
+        if (/^0.+$/.test(key)) {
+            var keyStringLength = key.length;
+            return key.substr(1, keyStringLength - 1);
+        } else {
+            return key;
+        }
+    }
+    //判断同一天同一路段是否重复提交
+    function isCommonValidate() {
+        var carPlateNumber = $("#txtCarPlateNumber").val().toUpperCase(); //获取号牌号码
+        var currentNode = $("#ctree").tree("getSelected");
+        var postAllCameraId = "";
+        if (currentNode != null) {
+            var parentNode = $("#ctree").tree("getParent", currentNode.target);
+            var getAllCameraId = $("#ctree").tree("getChildren", parentNode.target);
+            for (var i = 0; i < getAllCameraId.length; i++) {
+                postAllCameraId += encodeURIComponent(getAllCameraId[i].attributes.cameraID) + ",";
+            }
+        }
+        //判断同一天同一路段是否重复提交
+        var url = "../../Ashx/Vion/Kakou/CheckSameCarPlateNumber.ashx?carPlateNumber= " + encodeURIComponent(carPlateNumber) + "&allCameraId=" + postAllCameraId + "&violationType= " + encodeURIComponent($("#txtViolationType").find("option:selected").text().split(':')[0].toString());
+        var result = 0;
+        $.ajax({
+            type: 'GET',
+            url: url,
+            dataType: 'json',
+            cache: false,
+            async: false,
+            success: function (data) {
+                if (data > 0) {
+                    result = data;
+                } else {
+                    result = 0;
+                }
+            },
+            error: function (error) {
+                result = 0;
+            }
+        });
+        return result; //在ajax之外执行return
+    }
+    //测试信息是否填完整
+    function isInfoValidate() {
+        var direction = $("#txtDirection").val();
+        if (direction == "-1") {
+            showAlert("提示", "请选择方向！");
+            return false;
+        }
+        var carPlateNumber = $("#txtCarPlateNumber").val();
+        if (carPlateNumber == "" || carPlateNumber == $("#carPlateNumberPrefix").val()) {
+            alert("请填写号牌!");
+            return false;
+        }
+        //        if (checkPlateNumber(carPlateNumber)) {
+        //            // Successful match
+        //        } else {
+        //            showAlert("提示", "请确认号牌号码是否正确!");
+        //            return false;
+        //        }
+        var carPlateType = $("#txtCarPlateType").val();
+        if (carPlateType == "-1") {
+            showAlert("提示", "请选择号牌类型!");
+            return false;
+        }
+        return true;
+    }
+    /**
+     * 显示提交窗口
+     * @author tramp
+     * @DateTime 2016-10-13
+     */
+    function showSubmitWindow(illegalResult) {
+        if (illegalResult.imageCount == 0) {
+            // hideOcxDiv();
+            // $.messager.alert("提示", "", "info", function() {
+            //     showOcxDiv();
+            // });
+            this.showMessagerInfo("必须抓拍全景图1才能提交!");
+            return false;
+        }
+        //停止录像        captureFlowManager.stopVideoRecord();
+        //
+        //
+        this.hideVideoOcxDiv(); //隐藏OCX
+        var options = {
+            title: "数据审核",
+            height: 590,
+            width: 1000,
+            modal: true,
+            collapsible: false,
+            minimizable: false,
+            maximizable: false,
+            closable: false,
+            draggable: false,
+            shadow: false,
+            border: false,
+            onClose: showVideoOcxDiv
+        };
+        //停止录像
+        captureFlowManager.stopVideoRecord();
+        //显示提交窗口
+        showCapturedInfo(illegalResult);
+        $("#CaptureSubmitWindow").css("visibility", "visible").window(options);
+        //显示图片字符
+        showPicNameString();
+    }
+    this.hideSubmitWindow = function () {
+        $("#CaptureSubmitWindow").window("close");
+        showOcxDiv();
+    }
+    /*
+    方法说明：抓拍并识别号牌号
+    参数:    要识别的图片路径
+    返回值:
+    -1 服务器未连接
+    0  图片打开失败
+    1  成功
+    2  识别失败，（不会有事件）
+    */
+    function CloseUpRecog(picPath) {
+        var returnCode = trafficOcxObj.CloseUpRecog(picPath);
+        return returnCode == 1;
+    }
+    /**
+     * 在弹出窗显示抓拍信息
+     * @author tramp
+     * @DateTime 2016-10-13
+     */
+    function showCapturedInfo(illegalResult) {
+        //进行号牌识别
+        recognizeCarPlateNumber(illegalResult);
+        //显示图片
+        showCapturedImgInSubmitWindow(illegalResult, this.outPutPath);
+        //显示地点及设备信息
+        //        $("#txtKakouID").val(illegalResult.attribute.attributes.relatedKakouId);
+        $("#txtKakouID").combobox('select', illegalResult.attribute.attributes.relatedKakouId);
+        $("#txtKakouName").val(illegalResult.attribute.attributes.relatedKakouName);
+        //球机ID已经是设备ID
+        $("#txtDeviceID").val(illegalResult.attribute.id);
+        $("#txtDeviceName").val(illegalResult.attribute.text);
+        $("#txtDeviceIP").val(illegalResult.attribute.attributes.camIp);
+        //显示当前的时间
+        var nowTime = formatTimeString(new Date());
+        $("#txtViolationTime").val(nowTime);
+        //绑定默认值
+        $('#txtViolationType').combobox('select', "04");
+        $('#txtCarPlateType').combobox('select', "02");
+    }
+    var defaultPlateImageIndex; //默认需要识别号牌的图片的索引，
+    /**
+     * 号牌识别
+     * @author tramp
+     * @DateTime 2016-10-13
+     * @return   {[type]}   [description]
+     */
+    function recognizeCarPlateNumber(illegalResult) {
+        if (illegalResult.imageCount <= 0) {
+            return;
+        }
+        var isRecognizedSuccess = false;
+        illegalResult.getImagePathMap().forEach(function (item, key) {
+            var picPath = item.localPath;
+            if (!isRecognizedSuccess) {
+                isRecognizedSuccess = CloseUpRecog(picPath);
+            }
+        });
+    }
+    /**
+     * 在提交窗口显示抓拍图片
+     * @author tramp
+     * @DateTime 2016-10-13
+     * @param    {[type]}   outPath [description]
+     * @return   {[type]}           [description]
+     */
+    function showCapturedImgInSubmitWindow(illegalResult, outPath) {
+        //清除掉滤镜
+        $("#leftPicWindow .showImg").css("filter", "");
+        illegalResult.getImagePathMap().forEach(function (item, key) {
+            if (item.serverPath) {
+                showPicByFilter("Img" + key, item.serverPath);
+            }
+        });
+    }
+    /**
+     * 使用IE滤镜的方式显示图片（优化频繁显示很多图片时的内存占用）
+     * @author tramp
+     * @DateTime 2016-10-17
+     * @param    {[type]}   containerId [description]
+     * @param    {[type]}   picPath     [description]
+     * @return   {[type]}               [description]
+     */
+    function showPicByFilter(containerId, picPath) {
+        var containerObj = document.getElementById(containerId);
+        if (containerObj) {
+            if (!-[1,]) {
+                containerObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src='" + picPath + "')";
+            } else {
+                picPath = picPath.replace(/\\/g, "\\\\");
+                $(containerObj).attr("style", "background:url('" + picPath + "') no-repeat 0 0;background-size:100% 100%;display:block;");
+            }
+            //保存图片地址，以备后用
+            containerObj.setAttribute("data-pic", picPath);
+        }
+    }
+    //this.cameraAttribute = null; //相机的属性信息
+    // this.setCameraAttribute = function(node) {
+    //     //this.cameraAttribute = node;
+    //     return node;
+    // }
+    //提交审核后的抓拍信息
+    function submitCapturedInfo(caputureResult) {
+        //首先判断用户信息是否填写完整
+        var isValidate = isInfoValidate();
+        if (isValidate) {
+            var result = isCommonValidate();
+            var xmlFileString; //要传给Ocx的XML字符串
+            if (result > 0) {
+                $.messager.progress("close");
+                var confirmCapture = confirm("今天该号牌已经抓拍过" + result + "次，再次抓拍？");
+                if (confirmCapture) {
+                    xmlFileString = getCapturedXmlString(caputureResult);
+                    return UploadData(xmlFileString) == "1";
+                } else return -1;
+            } else {
+                xmlFileString = getCapturedXmlString(caputureResult);
+                return UploadData(xmlFileString) == "1";
+            }
+        }
+        return -1;
+    }
+    /*
+    方法说明：上传抓拍信息到接收中心
+    参数:
+        captureXmlInfo : 抓拍车辆信息,包括图片及录像
+    返回值:
+        1--成功,0--失败
+*/
+    function UploadData(captureXmlInfo) {
+        return trafficOcxObj.UploadData(captureXmlInfo);
+    }
+}
+//格式化日期
+function formatTimeString(datetime) {
+    if (!datetime) {
+        return "";
+    }
+    var dateString = datetime.format("yyyy-MM-dd hh:mm:ss");
+    return dateString;
+}
+//根据录入的各项信息获取图片的字符串
+function getPictureNameString() {
+    var deviceID = $("#txtDeviceID").val();
+    //var locationID = $("#txtKakouID").val();
+    var locationID = $("#txtKakouID").combobox("getValue");
+    var directionID = $("#txtDirection").combobox("getValue");
+    var violationTime = $("#txtViolationTime").val();
+    violationTime = getShortTimeString(violationTime);
+    var violationValue = $("#txtViolationValue").val();
+    var carPlateType = $("#txtCarPlateType").combobox("getValue");
+    var carPlateNumber = $("#txtCarPlateNumber").val();
+    var violationType = $("#txtViolationType").combobox("getValue");
+    var departmentID = $("#departmentID").val();
+    var userID = $("#userID").val();
+    var dataSource = $("#dataSource").val();
+    var returnString = deviceID + "_" + locationID + "_" + directionID + "_" + violationTime;
+    returnString = returnString + "_" + violationValue + "_" + carPlateType + "_" + carPlateNumber;
+    returnString = returnString + "_" + violationType + "_" + departmentID + "_" + userID + "_" + dataSource;
+    returnString = returnString + "_3_0.JPG";
+    // var returnString = "";
+    return returnString;
+}
+
+function getShortTimeString(longTimeString) {
+    //return longTimeString.replace("-", "").replace(":", "");
+    return longTimeString.replace(/[-:\s]/g, "");
+}
+/**
+ * 显示图片的名称
+ * @author tramp
+ * @DateTime 2016-10-13
+ * @return   {[type]}   [description]
+ */
+function showPicNameString() {
+    var picString = getPictureNameString();
+    $("#picName").val(picString);
+}
+/**
+ * 初始化车身颜色
+ * @author tramp
+ * @DateTime 2016-10-17
+ * @return   {[type]}   [description]
+ */
+function initCarColor() {
+    var carColorObj = $("#txtCarColor");
+    var options = {
+        valueField: "id",
+        textField: "text",
+        width: 180,
+        url: "../../Ashx/Vion/SystemManager/TrafficDicSysTemCode.ashx?SysCode=ExteriorColor",
+        value: "-1",
+        editable: false
+    };
+    carColorObj.combobox(options);
+}
+/**
+ * 卡口方向
+ * @author tramp
+ * @DateTime 2016-10-17
+ * @return   {[type]}   [description]
+ */
+function initKaKouDirction() {
+    var carColorObj = $("#txtDirection");
+    var options = {
+        valueField: "id",
+        textField: "text",
+        width: 180,
+        url: "../../Ashx/Vion/SystemManager/TrafficDicSysTemCode.ashx?SysCode=KaKouDirction",
+        value: "-1",
+        editable: false
+    };
+    carColorObj.combobox(options);
+}
+/**
+ * 车辆类型
+ * @author tramp
+ * @DateTime 2016-10-17
+ * @return   {[type]}   [description]
+ */
+function initCarType() {
+    var carColorObj = $("#txtCarType");
+    var options = {
+        valueField: "id",
+        textField: "text",
+        width: 180,
+        url: "../../Ashx/Vion/SystemManager/TrafficDicSysTemCode.ashx?SysCode=CarType",
+        value: "-1",
+        editable: false
+    };
+    carColorObj.combobox(options);
+}
+/**
+ * 号牌种类
+ * @author tramp
+ * @DateTime 2016-10-17
+ * @return   {[type]}   [description]
+ */
+function initHapPaiType() {
+    var carColorObj = $("#txtCarPlateType");
+    var options = {
+        valueField: "id",
+        textField: "text",
+        width: 180,
+        url: "../../Ashx/Vion/SystemManager/TrafficDicSysTemCode.ashx?SysCode=HapPaiType",
+        value: "-1",
+        editable: false
+    };
+    carColorObj.combobox(options);
+}
+/**
+ * 号牌颜色
+ * @author tramp
+ * @DateTime 2016-10-17
+ * @return   {[type]}   [description]
+ */
+function initCarNumColor() {
+    var carColorObj = $("#txtCarPlateColor");
+    var options = {
+        valueField: "id",
+        textField: "text",
+        width: 180,
+        url: "../../Ashx/Vion/SystemManager/TrafficDicSysTemCode.ashx?SysCode=CarNumColor",
+        value: "-1",
+        editable: false
+    };
+    carColorObj.combobox(options);
+}
+/**
+ * 违法类型
+ * @author tramp
+ * @DateTime 2016-10-17
+ * @return   {[type]}   [description]
+ */
+function initTrafficViolationType() {
+    var carColorObj = $("#txtViolationType");
+    var options = {
+        valueField: "id",
+        textField: "text",
+        width: 180,
+        url: "../../Ashx/Vion/SystemManager/TrafficDicSysTemCode.ashx?SysCode=TrafficViolationType",
+        value: "-1",
+        editable: false
+    };
+    carColorObj.combobox(options);
+}
+
+function getUserInfo() {
+    $.ajax({
+        url: 'RealTimeVideoWithYT.aspx?param=userInfo',
+        type: 'post',
+        dataType: 'json',
+        data: {},
+        success: function (data) {
+            if (data.success) {
+                $("#departmentID").val(data.user.OrgNUM);
+                $("#userID").val(data.user.UserNUM);
+                $("#userNameCaputre").val(data.user.TrueName);
+            } else {
+                //alert("写入后台错误");
+            }
+        }
+    });
+}
+
+/**
+* 编辑case
+* @author tramp
+* @DateTime 2016-09-08
+*/
+function editCase(urls) {
+    document.getElementById("editIFrame").src = "../CriminalInvestigation/edit.aspx?pageType=addCaseByVideo&urls=" + urls + "&recorder=" + $("#userID").val() + "&recorderName=" + $("#userNameCaputre").val();
+    $('#divShowEdit').dialog({
+        title: "编辑",
+        buttons: [{
+            text: '添加',
+            iconCls: 'icon-add',
+            handler: function () {
+                try {
+                    //showOcxDiv()
+                    editIFrame.add();
+                } catch (e) { }
+            }
+        }, {
+            text: '取消',
+            iconCls: 'icon-cancel',
+            handler: function () {
+                //showOcxDiv() ;
+                $('#divShowEdit').dialog('close');
+            }
+        }],
+        onBeforeClose: function () {
+            try {
+                showOcxDiv();
+                editIFrame.clear();
+            } catch (e) { }
+            return true;
+        }
+    });
+    $('#divShowEdit').dialog('open');
+}
+//function hideOcxDiv()
+//function showOcxDiv()
+
+export {
+    setCameraSpeed,
+    controlDevice,
+    StopControlCamera,
+    getControlParam,
+    connectCamera
+}

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/mockdata.js

+var Mock = require('mockjs')
+Mock.mock('/task',(req,res) => {
+  return{
+      "total_num": 2,
+      "offset": 0,
+      "list_size": 2,
+      "list_data": [
+          {
+            "task_id": "1",
+            "task_name": "任务1",                  
+            "algo_type": "1",                   // 必填，任务算法的类型，'0':交通, '1':客流, '2':安防, '3':违停，'4':人脸
+            "run_dt": "2018-12-03 10:27:30.999",
+            "play_url": "rtsp://192.168.9.155:8554//opt/data/vedio/1543548943071.264" ,           
+            "mtasks":[                           
+               {
+                 "mtask_unid": "3ad5f28d694c46ae8febfbc9b7b86825",           
+                 "name": "xxxx",                 
+                 "type": 1,                      
+                 "time_interval": 5,             
+                 "start_time": "00:00:00",      
+                 "end_time": "22:01:20",         
+                 "progress": 30,                
+                 "scenes": [
+                    {
+                      "scene_unid": "xxxx",     
+                      "name": "xxxx",             
+                      "preset": 1,               
+                      "callibration": {          
+                            "calibration": "<?xml version=\"1.0\" encoding=\"UTF-8\"?><root></root>"
+                      },
+                      "rois": [                   
+                            {
+                              "roi": "<?xml version=\"1.0\" encoding=\"UTF-8\"?><root></root>"
+                            },
+                            {
+                              "roi": "<?xml version=\"1.0\" encoding=\"UTF-8\"?><root></root>"
+                            }
+                      ],
+                      "config": {                  
+                            "xml": "<?xml version=\"1.0\" encoding=\"UTF-8\"?><root></root>"
+                      },
+                      "basicConfig": {                  
+                            "xml": "<?xml version=\"1.0\" encoding=\"GBK\"?><root><算法参数><客流><进出人数><人头尺寸><AttribType>0</AttribType><AttribInfo>人头尺寸</AttribInfo><AttribDefault>300</AttribDefault><AttribRange>50-400</AttribRange></人头尺寸><最小人头><AttribType>0</AttribType><AttribInfo>最小人头</AttribInfo><AttribDefault>20</AttribDefault><AttribRange>0-1000</AttribRange></最小人头><最大人头><AttribType>0</AttribType><AttribInfo>最大人头</AttribInfo><AttribDefault>300</AttribDefault><AttribRange>0-1000</AttribRange></最大人头><敏感度1><AttribType>0</AttribType><AttribInfo>敏感度1</AttribInfo><AttribDefault>20</AttribDefault><AttribRange>0-100</AttribRange></敏感度1><敏感度2><AttribType>0</AttribType><AttribInfo>敏感度2</AttribInfo><AttribDefault>40</AttribDefault><AttribRange>0-100</AttribRange></敏感度2><敏感度3><AttribType>0</AttribType><AttribInfo>敏感度3</AttribInfo><AttribDefault>20</AttribDefault><AttribRange>0-100</AttribRange></敏感度3><显示模式><AttribType>0</AttribType><AttribInfo>显示模式</AttribInfo><AttribDefault>1</AttribDefault><AttribRange>0-3</AttribRange></显示模式><轨迹跟踪阈值><AttribType>0</AttribType><AttribInfo>轨迹跟踪阈值</AttribInfo><AttribDefault>300</AttribDefault><AttribRange>100-500</AttribRange></轨迹跟踪阈值><轨迹预测帧数><AttribType>0</AttribType><AttribInfo>轨迹预测帧数</AttribInfo><AttribDefault>30</AttribDefault><AttribRange>1-100</AttribRange></轨迹预测帧数><轨迹移动阈值><AttribType>0</AttribType><AttribInfo>轨迹移动阈值</AttribInfo><AttribDefault>100</AttribDefault><AttribRange>1-1000</AttribRange></轨迹移动阈值><轨迹形态阈值><AttribType>0</AttribType><AttribInfo>轨迹形态阈值</AttribInfo><AttribDefault>50</AttribDefault><AttribRange>1-100</AttribRange></轨迹形态阈值><走入参数><AttribType>0</AttribType><AttribInfo>走入参数</AttribInfo><AttribDefault>100</AttribDefault><AttribRange>1-200</AttribRange></走入参数><走出参数><AttribType>0</AttribType><AttribInfo>走出参数</AttribInfo><AttribDefault>100</AttribDefault><AttribRange>1-200</AttribRange></走出参数><模型><AttribType>0</AttribType><AttribInfo>模型</AttribInfo><AttribDefault>2</AttribDefault><AttribRange>1-5</AttribRange></模型></进出人数><区域客流><人头尺寸><AttribType>0</AttribType><AttribInfo>人头尺寸</AttribInfo><AttribDefault>300</AttribDefault><AttribRange>50-400</AttribRange></人头尺寸><最小人头><AttribType>0</AttribType><AttribInfo>最小人头</AttribInfo><AttribDefault>20</AttribDefault><AttribRange>0-1000</AttribRange></最小人头><最大人头><AttribType>0</AttribType><AttribInfo>最大人头</AttribInfo><AttribDefault>300</AttribDefault><AttribRange>0-1000</AttribRange></最大人头><敏感度1><AttribType>0</AttribType><AttribInfo>敏感度1</AttribInfo><AttribDefault>20</AttribDefault><AttribRange>0-100</AttribRange></敏感度1><敏感度2><AttribType>0</AttribType><AttribInfo>敏感度2</AttribInfo><AttribDefault>40</AttribDefault><AttribRange>0-100</AttribRange></敏感度2><敏感度3><AttribType>0</AttribType><AttribInfo>敏感度3</AttribInfo><AttribDefault>20</AttribDefault><AttribRange>0-100</AttribRange></敏感度3><显示模式><AttribType>0</AttribType><AttribInfo>显示模式</AttribInfo><AttribDefault>1</AttribDefault><AttribRange>0-3</AttribRange></显示模式><轨迹跟踪阈值><AttribType>0</AttribType><AttribInfo>轨迹跟踪阈值</AttribInfo><AttribDefault>300</AttribDefault><AttribRange>100-500</AttribRange></轨迹跟踪阈值><轨迹移动阈值><AttribType>0</AttribType><AttribInfo>轨迹移动阈值</AttribInfo><AttribDefault>100</AttribDefault><AttribRange>1-1000</AttribRange></轨迹移动阈值><区域参数><AttribType>0</AttribType><AttribInfo>区域参数</AttribInfo><AttribDefault>100</AttribDefault><AttribRange>10-1000</AttribRange></区域参数><模型><AttribType>0</AttribType><AttribInfo>模型</AttribInfo><AttribDefault>2</AttribDefault><AttribRange>1-5</AttribRange></模型></区域客流></客流></算法参数></root>\n"
+                      },
+                      "link_scenes": [],           
+                      "algo_type": 1,              
+                      "algo_args": {},            
+                      "is_record": 1,             
+                      "is_active": 1,             
+                      "vchan_refid": '',             
+                      "play_urls": {               
+                            "http": "xxxx",
+                            "rtsp": "xxxx"
+                      },
+                      "is_running": 1,            
+                      "status_reason": "xxxx"     
+                    },
+                 ]  
+               }
+            ],
+            "store_conf_unid":  "xxxx",   
+          },{
+            "task_id": "2",
+            "task_name": "任务2",                  
+            "algo_type": 2,                   // 必填，任务算法的类型，'0':交通, '1':客流, '2':安防, '3':违停，'4':人脸
+            "run_dt": "2018-12-03 10:27:30.999",
+            "play_url": "rtsp://192.168.9.155:8554//opt/data/vedio/1543548943071.264" ,           
+            "mtasks":[                           
+               {
+                 "mtask_unid": "xxxx",           
+                 "name": "xxxx",                 
+                 "type": 1,                      
+                 "time_interval": 5,             
+                 "start_time": "00:00:00",      
+                 "end_time": "22:01:20",         
+                 "progress": 30,                
+                 "scenes": [
+                    {
+                      "scene_unid": "xxxx",     
+                      "name": "xxxx",             
+                      "preset": 1,               
+                      "callibration": {          
+                            "calibration": "<?xml version=\"1.0\" encoding=\"UTF-8\"?><root></root>"
+                      },
+                      "rois": [                   
+                            {
+                              "roi": "<?xml version=\"1.0\" encoding=\"UTF-8\"?><root></root>"
+                            },
+                            {
+                              "roi": "<?xml version=\"1.0\" encoding=\"UTF-8\"?><root></root>"
+                            }
+                      ],
+                      "config": {                  
+                            "xml": "<?xml version=\"1.0\" encoding=\"UTF-8\"?><root></root>"
+                      },
+                      "basicConfig": {                  
+                            "xml": "<?xml version=\"1.0\" encoding=\"GBK\"?><root><算法参数><客流><进出人数><人头尺寸><AttribType>0</AttribType><AttribInfo>人头尺寸</AttribInfo><AttribDefault>300</AttribDefault><AttribRange>50-400</AttribRange></人头尺寸><最小人头><AttribType>0</AttribType><AttribInfo>最小人头</AttribInfo><AttribDefault>20</AttribDefault><AttribRange>0-1000</AttribRange></最小人头><最大人头><AttribType>0</AttribType><AttribInfo>最大人头</AttribInfo><AttribDefault>300</AttribDefault><AttribRange>0-1000</AttribRange></最大人头><敏感度1><AttribType>0</AttribType><AttribInfo>敏感度1</AttribInfo><AttribDefault>20</AttribDefault><AttribRange>0-100</AttribRange></敏感度1><敏感度2><AttribType>0</AttribType><AttribInfo>敏感度2</AttribInfo><AttribDefault>40</AttribDefault><AttribRange>0-100</AttribRange></敏感度2><敏感度3><AttribType>0</AttribType><AttribInfo>敏感度3</AttribInfo><AttribDefault>20</AttribDefault><AttribRange>0-100</AttribRange></敏感度3><显示模式><AttribType>0</AttribType><AttribInfo>显示模式</AttribInfo><AttribDefault>1</AttribDefault><AttribRange>0-3</AttribRange></显示模式><轨迹跟踪阈值><AttribType>0</AttribType><AttribInfo>轨迹跟踪阈值</AttribInfo><AttribDefault>300</AttribDefault><AttribRange>100-500</AttribRange></轨迹跟踪阈值><轨迹预测帧数><AttribType>0</AttribType><AttribInfo>轨迹预测帧数</AttribInfo><AttribDefault>30</AttribDefault><AttribRange>1-100</AttribRange></轨迹预测帧数><轨迹移动阈值><AttribType>0</AttribType><AttribInfo>轨迹移动阈值</AttribInfo><AttribDefault>100</AttribDefault><AttribRange>1-1000</AttribRange></轨迹移动阈值><轨迹形态阈值><AttribType>0</AttribType><AttribInfo>轨迹形态阈值</AttribInfo><AttribDefault>50</AttribDefault><AttribRange>1-100</AttribRange></轨迹形态阈值><走入参数><AttribType>0</AttribType><AttribInfo>走入参数</AttribInfo><AttribDefault>100</AttribDefault><AttribRange>1-200</AttribRange></走入参数><走出参数><AttribType>0</AttribType><AttribInfo>走出参数</AttribInfo><AttribDefault>100</AttribDefault><AttribRange>1-200</AttribRange></走出参数><模型><AttribType>0</AttribType><AttribInfo>模型</AttribInfo><AttribDefault>2</AttribDefault><AttribRange>1-5</AttribRange></模型></进出人数><区域客流><人头尺寸><AttribType>0</AttribType><AttribInfo>人头尺寸</AttribInfo><AttribDefault>300</AttribDefault><AttribRange>50-400</AttribRange></人头尺寸><最小人头><AttribType>0</AttribType><AttribInfo>最小人头</AttribInfo><AttribDefault>20</AttribDefault><AttribRange>0-1000</AttribRange></最小人头><最大人头><AttribType>0</AttribType><AttribInfo>最大人头</AttribInfo><AttribDefault>300</AttribDefault><AttribRange>0-1000</AttribRange></最大人头><敏感度1><AttribType>0</AttribType><AttribInfo>敏感度1</AttribInfo><AttribDefault>20</AttribDefault><AttribRange>0-100</AttribRange></敏感度1><敏感度2><AttribType>0</AttribType><AttribInfo>敏感度2</AttribInfo><AttribDefault>40</AttribDefault><AttribRange>0-100</AttribRange></敏感度2><敏感度3><AttribType>0</AttribType><AttribInfo>敏感度3</AttribInfo><AttribDefault>20</AttribDefault><AttribRange>0-100</AttribRange></敏感度3><显示模式><AttribType>0</AttribType><AttribInfo>显示模式</AttribInfo><AttribDefault>1</AttribDefault><AttribRange>0-3</AttribRange></显示模式><轨迹跟踪阈值><AttribType>0</AttribType><AttribInfo>轨迹跟踪阈值</AttribInfo><AttribDefault>300</AttribDefault><AttribRange>100-500</AttribRange></轨迹跟踪阈值><轨迹移动阈值><AttribType>0</AttribType><AttribInfo>轨迹移动阈值</AttribInfo><AttribDefault>100</AttribDefault><AttribRange>1-1000</AttribRange></轨迹移动阈值><区域参数><AttribType>0</AttribType><AttribInfo>区域参数</AttribInfo><AttribDefault>100</AttribDefault><AttribRange>10-1000</AttribRange></区域参数><模型><AttribType>0</AttribType><AttribInfo>模型</AttribInfo><AttribDefault>2</AttribDefault><AttribRange>1-5</AttribRange></模型></区域客流></客流></算法参数></root>\n"
+                      },
+                      "link_scenes": [],           
+                      "algo_type": 1,              
+                      "algo_args": {},            
+                      "is_record": 1,             
+                      "is_active": 1,             
+                      "vchan_refid": '',             
+                      "play_urls": {               
+                            "http": "xxxx",
+                            "rtsp": "xxxx"
+                      },
+                      "is_running": 1,            
+                      "status_reason": "xxxx"     
+                    },
+                 ]  
+               }
+            ],
+            "store_conf_unid":  "xxxx",   
+          },
+      ]
+  }
+})
\ 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 Vue from "vue";
 import App from "./App.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 router from "./router";
 import store from "./store";
 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.$echarts = echarts;
 Vue.prototype.$moment = moment;
 Vue.prototype.$moment = moment;
 Vue.prototype.$buildCode = buildCode;
 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.use(resetCss);
 
 
 Vue.config.productionTip = false;
 Vue.config.productionTip = false;

src/store/actions.js

@@ -17,4 +17,4 @@ const actions= {
     }
     }
 }
 }
 // 最后导出
 // 最后导出
-export default actions;
\ No newline at end of file
+export default actions;

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 对象
 // 导出 store 对象
 export default new Vuex.Store({
 export default new Vuex.Store({
-    getters,
-    actions,
-    modules:{
-        users
-    }
-})
\ No newline at end of file
+  getters,
+  actions,
+  mutations,
+  state,
+  modules: {
+    users
+  }
+});

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>
 <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 {
 		}
 		}
   }
   }
 };
 };
-</script>
\ No newline at end of file
+</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/eventDetail.vue

+<template>
+    <div class="pic-detail">
+        <el-dialog title="详情" :visible.sync="isShow" :before-close='beforeHideModal'>
+            <el-row>
+                <el-col :span="16">
+                    <div @mousemove='picMove' class="pic-wrap">
+                        <img v-if="curPicData.picsEmpty" :src="carImg" alt="暂无图片" title="暂无图片" slot="reference" class='pictures small' />
+                        <!-- <img v-if="curPicData.pics" :src="carImg" alt="暂无图片" slot="reference" class='pictures small' /> -->
+                        <el-popover placement="left-end" width="305" trigger="hover" v-if="!curPicData.picsEmpty">
+                            <div :style="{backgroundImage: 'url('+curPicData.pic+')',backgroundRepeat:'no-repeat'}" alt="" id="big" class='big'></div>
+                            <img :src="curPicData.pic" alt="" slot="reference" class='pictures small' />
+                        </el-popover>
+                    </div>
+                </el-col>
+                <!-- 交通 -->
+                <el-col :span="8" v-if="curPicData.event_type === 'vehicle' || curPicData.event_type === 'xcycle'|| curPicData.event_type === 'pedestrian'">
+                    <ul class="pic-info">
+                        <li v-if="curPicData.event_type === 'vehicle'" :title="curPicData.vehicle_body_type_text">
+                            <span>车辆类型:</span>
+                            <span>{{ curPicData.vehicle_body_type_text }}</span>
+                        </li>
+                        <li v-if="curPicData.event_type === 'vehicle'" :title="curPicData.vehicle_plate_text">
+                            <span>车牌号码:</span>
+                            <span>{{ curPicData.vehicle_plate_text }}</span>
+                        </li>
+                        <li v-if="curPicData.event_type === 'vehicle'" :title="curPicData.plate_type_text">
+                            <span>车牌类型:</span>
+                            <span>{{ curPicData.plate_type_text }}</span>
+                        </li>
+                        <li :title="curPicData.shoot_date">
+                            <span>经过日期:</span>
+                            <span>{{ curPicData.shoot_date }}</span>
+                        </li>
+                        <li :title="curPicData.shoot_time">
+                            <span>经过时间:</span>
+                            <span>{{ curPicData.shoot_time }}</span>
+                        </li>
+                        <li :title="curPicData.location_name">
+                            <span>经过地点:</span>
+                            <span>{{ curPicData.location_name }}</span>
+                        </li>
+                        <li v-if="curPicData.event_type === 'vehicle'" :title="curPicData.vehicle_body_logo_text">
+                            <span>车辆品牌:</span>
+                            <span>{{ curPicData.vehicle_body_logo_text }}</span>
+                        </li>
+                        <!-- <li :title="curPicData.vehicle_body_type_text">
+                            <span>车辆类型:</span>
+                            <span>{{ curPicData.vehicle_body_type_text }}</span>
+                        </li> -->
+                         <!-- 机动车 -->
+                        <li v-if="curPicData.event_type === 'vehicle'" :title="curPicData.plate_color_text">
+                            <span>车牌颜色:</span>
+                            <span>{{ curPicData.plate_color_text }}</span>
+                        </li>
+                         <li v-if="curPicData.event_type === 'vehicle'" :title="curPicData.vehicle_body_color_text">
+                            <span>车身颜色:</span>
+                            <span>{{ curPicData.vehicle_body_color_text }}</span>
+                        </li>
+                        <li v-if="curPicData.event_type === 'vehicle'" :title="curPicData.RefinedFeature_text">
+                            <span>标志物:</span>
+                            <span>{{ curPicData.RefinedFeature_text }}</span>
+                        </li>
+                        <!-- 非机动车 -->
+                                    <li v-if="curPicData.event_type === 'xcycle'" :title="curPicData.xcycle_type_text">
+                          <span>骑车类型:</span>
+                          <span>{{ curPicData.xcycle_type_text }}</span>
+                        </li>
+                        <li v-if="curPicData.event_type === 'xcycle'" :title="curPicData.xcycle_color_type">
+                          <span>车辆颜色:</span>
+                          <span>{{ curPicData.xcycle_color_type }}</span>
+                        </li>
+                        <li :title="curPicData.driver_face_sex"  v-if="curPicData.event_type === 'xcycle'">
+                          <span>性别:</span>
+                          <span>{{ curPicData.driver_face_sex }}</span>
+                        </li>
+                        <li v-if="curPicData.event_type === 'xcycle'" :title="curPicData.company">
+                          <span>运营公司:</span>
+                          <span>{{ curPicData.company }}</span>
+                        </li>
+                        <li v-if="curPicData.event_type === 'xcycle'" :title="curPicData.driver_face_upbody_text">
+                          <span>上身颜色:</span>
+                          <span>{{ curPicData.driver_face_upbody_text }}</span>
+                        </li>
+                        <li :title="curPicData.driver_face_lobody_text"  v-if="curPicData.event_type === 'xcycle'">
+                          <span>速度:</span>
+                          <span>{{ curPicData.location_speed }}</span>
+                        </li>
+                        <li :title="curPicData.driver_face_lobody_text"  v-if="curPicData.event_type === 'xcycle'">
+                          <span>戴帽子:</span>
+                          <span>{{ curPicData.driver_face_with_hats }}</span>
+                        </li>
+                                    <!-- 行人 -->
+                        <li :title="curPicData.driver_face_sex" v-if="curPicData.event_type === 'pedestrian'">
+                          <span>性别:</span>
+                          <span>{{ curPicData.driver_face_sex }}</span>
+                        </li>
+                        <li :title="curPicData.driver_face_upbody_text" v-if="curPicData.event_type === 'pedestrian'">
+                          <span>上身颜色:</span>
+                          <span>{{ curPicData.driver_face_upbody_text }}</span>
+                        </li>
+                        <li :title="curPicData.driver_face_lobody_text" v-if="curPicData.event_type === 'pedestrian'">
+                          <span>下身颜色:</span>
+                          <span>{{ curPicData.driver_face_lobody_text }}</span>
+                        </li>
+                                    <li :title="curPicData.pedestrian_height"  v-if="curPicData.event_type === 'pedestrian'">
+                          <span>身高:</span>
+                          <span>{{ curPicData.pedestrian_height }}</span>
+                        </li>
+                                    <li :title="curPicData.driver_face_lobody_text"  v-if="curPicData.event_type === 'pedestrian'">
+                          <span>速度:</span>
+                          <span>{{ curPicData.location_speed }}</span>
+                        </li>
+                                    <li :title="curPicData.driver_face_lobody_text"  v-if="curPicData.event_type === 'pedestrian'">
+                          <span>戴帽子:</span>
+                          <span>{{ curPicData.driver_face_with_hats }}</span>
+                        </li>
+                        <li v-if="curPicData.illegalType" :title="curPicData.illegalType">
+                          <span>违法类型:</span>
+                          <span>{{ curPicData.illegalType }}</span>
+                        </li>
+                                </ul>
+                            </el-col>
+                            <el-col :span="8" v-if="curPicData.event_cate === 'behavior'">
+                                <ul class="pic-info">
+                                    <li :title="curPicData.shoot_date">
+                                        <span>抓拍日期:</span>
+                                        <span>{{ curPicData.shoot_date }}</span>
+                                    </li>
+                                    <li :title="curPicData.shoot_time">
+                                        <span>抓拍时间:</span>
+                                        <span>{{ curPicData.shoot_time }}</span>
+                                    </li>
+                                    <li :title="getCode('安防事件',curPicData.event_type)">
+                                        <span>事件类型:</span>
+                          <span>{{ getCode('安防事件',String(curPicData.event_type)) }}</span>
+                        </li>
+                        <li :title="curPicData.shoot_time" v-if="curPicData.event_type == '21'">
+                            <span>区域人数:</span>
+                            <span>{{ curPicData.event_data.density.persons }}人</span>
+                        </li>
+                    </ul>
+                </el-col>
+            </el-row>
+            <span slot="footer">
+                <button class="closebtn" @click="beforeHideModal" style='width: 10%;'>关闭</button>
+            </span>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            carImg: '',
+            isShow: false,
+            curPicData:{}
+        }
+    },
+    methods: {
+        detailInfo: function (data) {
+            this.curPicData = {};
+            this.curPicData = data;
+            this.isShow = true;
+            this.$store.commit('setocxstate',0)
+        },
+        beforeHideModal: function () {
+            this.isShow = false;
+            this.$emit('closeDetailModal')
+        },
+        picMove: function (e) {
+            var e = e || window.event;
+            if (e.target.getAttribute('class').indexOf('small') > -1) {
+                let imgWidth = e.target.width;
+                let imgHeight = e.target.height;
+                let x = 150-e.offsetX/imgWidth*1800;
+                let y = 100-e.offsetY/imgHeight*1200;
+                let bigimg = document.getElementById('big');
+                bigimg.style.backgroundPosition = x +'px '+ y +'px'
+            }else{
+                return
+            }
+        }
+    }
+
+}
+</script>
+
+<style scoped>
+    .pictures {
+        width: 100%;
+        max-height: 528px;
+        cursor: zoom-in;
+        height: 500px;
+    }
+
+    .pic-info {
+        margin-bottom: 0;
+    }
+
+    .pic-info li {
+        text-align: left;
+        font-size: 18px;
+        height: 48px;
+        line-height: 48px;
+        width: 100%;
+        overflow: hidden;
+        min-width: 235px;
+    }
+
+    .pic-info li span {
+        float: left;
+    }
+
+    .pic-info li span:first-child {
+        padding-left: 3%;
+        margin-right: 10px;
+        width: 91px;
+    }
+    .pic-info li span:last-child {
+        width: 100px;       /*40%*/
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+    .big {
+		width: 300px;
+		height: 200px;
+		background-size: 1800px 1200px;
+  }
+  .closebtn{
+    height: 30px;
+    line-height: 30px;
+  }
+
+</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/index.vue

 <template>
 <template>
-  <div>
-	  <div class="contentBox">
-		<div class="leftCon">
-			<div class="titles">视频设备</div>
-			<div class="searchBox">
-				<el-input
-				  placeholder="输入关键字进行过滤"
-				  v-model="filterText">
-				</el-input>
-			</div>
-			<div class="treeBox">
-				<el-tree
-				  :data="data"
-				  :props="defaultProps"
-				  default-expand-all
-				  :filter-node-method="filterNode"
-				  ref="tree">
-				</el-tree>
-			</div>
-		</div>
-		<div class="middleCon">
-			<div class="objectCon">
-				<ocxplay ref="ocx"></ocxplay>
-			</div>
-			<div>
-				<div style="float: left;" class="">
-					<el-table
-					height="284"
-					  :data="sceneData"
-					  stripe
-					  border
-					  style="width: 775px;margin-right: 12px;">
-					  <el-table-column
-						type="index"
-						align="center"
-						width="100">
-					  </el-table-column>
-					  <el-table-column
-					  align="center"
-						prop="num"
-						label="预设位编号">
-					  </el-table-column>
-					  <el-table-column
-						  align="center"
-						prop="set"
-						label="预设位配置">
-						<template slot-scope="scope">
-							<el-tooltip content="修改" placement="bottom" effect="light" :visible-arrow=false>
-								<span class="iconfont icon-xiugai editIcon"   @click="editFun(scope.$index, scope.row)"></span>
-							</el-tooltip>
-							<span class="tableSpanBorder"></span>
-							<el-tooltip content="删除" placement="bottom" effect="light" :visible-arrow=false>
-								<span class="iconfont icon-detail delIcon"   @click="delFun(scope.$index, scope.row)"></span>
-							</el-tooltip>
-						</template>
-					  </el-table-column>
-					  <el-table-column
-						  align="center"
-						prop="type"
-						width="400"
-						label="参数设置">
-						<template slot-scope="scope">
-								<span class="tableBtn" @click="paramsSet(scope.$index, scope.row)">参数设置</span>
-							<span class="tableSpanBorder"></span>
-								<span class="tableBtn" @click="areaSet(scope.$index, scope.row)">区域设置</span>
-							<span class="tableSpanBorder"></span>
-								<span class="tableBtn" @click="markSet(scope.$index, scope.row)">标定设置</span>
-							<span class="tableSpanBorder"></span>
-								<span class="tableBtn" @click="timeSet(scope.$index, scope.row)">时间设置</span>
-						</template>
-					  </el-table-column>
-					</el-table>
-				</div>
-				<div class="handleBox">
-					<div class="handleTitle">基础操作</div>
-					<div class="operaBox">
-						<p>场景添加 <span class="iconfont icon-add-circle-s lefts"></span></p>
-						<p>轮循播放 <el-switch class="lefts" :width="22" v-model="loopStart" active-color="#0069FF" inactive-color="#cccccc"></el-switch></p>
-						<p>配置导入 <span class="iconfont icon-login lefts"></span></p>
-						<p>配置导出 <span class="iconfont icon-daochu lefts"></span></p>
-						<p>效果展示 <span class="iconfont icon-zhanshi lefts"></span></p>
-					</div>
-				</div>
-			</div>
-		</div>
-		<div class="rightCon">
-			<el-tabs v-model="activeName" @tab-click="handleClick" :stretch=true>
-			    <el-tab-pane label="全部数据" name="first">
-					<div class="tabCon">
-						<div class="cardCon">
-							<img src="../../assets/img/map/back.png" alt="">
-							<div class="imginfo">
-								<span>车牌号码：无牌</span>
-								<span>车辆类型：小型轿车</span>
-								<span>车身颜色：黑</span>
-								<span>车辆品牌：丰田</span>
-								<span>违法类型：正常</span>
-							</div>
-							<div style="clear: both;"></div>
-						</div>
-					</div>
-				</el-tab-pane>
-			    <el-tab-pane label="违法" name="second">违法</el-tab-pane>
-			    <el-tab-pane label="事件" name="third">事件</el-tab-pane>
-			  </el-tabs>
-		</div>
-		<div style="clear: both;"></div>
-	</div>
-	<paramset :visible.sync="paramshow"></paramset>
-  </div>
+  <el-row class="home-box" :gutter="10">
+    <el-col :span="3" class="ht100 tree-left">
+      <div  class="tree-box">
+				<div class="tree-title">视频设备</div>
+				<div class=""></div>
+        <div class="">
+           <el-input class="search-input"
+              prefix-icon="el-icon-search"
+              placeholder="请输入内容"
+              v-model="searchInfo"
+              >
+            </el-input>
+        </div>
+        <ul class="tasklist">
+          <li v-for="(item,index) in taskdata" :key="index" @click="selecttask(item,index)">
+           <span :class="{'task-lsit':true,'runningtask':item.status == 'Running', 'stoptask':item.status != 'Running'}" >
+              <i :class="{'el-icon-fanxin-yiyunhangrenwuliebiao':item.status == 'Running',' el-icon-fanxin-task-pause':item.status != 'Running', 'icon':true}"></i>
+              <span class="task-title">{{item.task_name}}</span>
+          </span>
+            <ol v-if="index == subindex">
+							<li @click='subTasksClick(subTask)' class="subtask" :title='subTask.subtask_name' v-for="subTask in subTasks" :key="subTask.subtask_id" :class="[{ subtaskActive: subTask.subtask_id == currentSubtaskId},{disabledColor:subTask.running_status!='Running'}]" :data-subtask='subTask.subtask_id' :id='subTask.vchan.vdev_unid+","+subTask.vchan.vchan_refid'>
+							<i class="el-icon-fanxin-yuandian icon"></i>	{{subTask.subtask_name?subTask.subtask_name:subTask.name}}
+							</li>
+						</ol>
+          </li>
+        </ul>
+      </div>
+    </el-col>
+    <el-col :span="15" class="ht100">
+      <div class="video-box">
+        <div class="play-box">
+          <videoplay ref="videoplay" :playulr="playulr"></videoplay>
+        </div>
+        <div class="">
+          <setting :taskid="taskID" ref="setting" :subtaskid="currentSubtaskId" :subtaskdata="subtaskdata"></setting>
+        </div>
+      </div>
+    </el-col>
+    <div>
+      <InfoDialog  ref="displayInfo"></InfoDialog>
+    </div>
+    <el-col :span="6" class="ht100">
+      <div class="show-box">
+        <eventtab ref="event"></eventtab>
+      </div>
+    </el-col>
+  </el-row>
 </template>
 </template>
 <script>
 <script>
-	import ocxplay from '../../components/ocxplay.vue'
-	import paramset from './paramSet.vue'
-	export default {
-		data(){
-			return{
-				paramshow:false,
-				activeName:'first',
-				loopStart:true,
-				sceneData:[
-					{
-						num:1
-					},
-					{
-						num:1
-					},{
-						num:1
-					}
-				],
-				filterText: '',
-				data: [{
-				  id: 1,
-				  label: '一级 1',
-				  children: [{
-					id: 4,
-					label: '二级 1-1',
-					children: [{
-					  id: 9,
-					  label: '三级 1-1-1'
-					}, {
-					  id: 10,
-					  label: '三级 1-1-2'
-					}]
-				  }]
-				}, {
-				  id: 2,
-				  label: '一级 2',
-				  children: [{
-					id: 5,
-					label: '二级 2-1'
-				  }, {
-					id: 6,
-					label: '二级 2-2'
-				  }]
-				}, {
-				  id: 3,
-				  label: '一级 3',
-				  children: [{
-					id: 7,
-					label: '二级 3-1'
-				  }, {
-					id: 8,
-					label: '二级 3-2'
-				  }]
-				}],
-				defaultProps: {
-				  children: 'children',
-				  label: 'label'
-				}
-			}
-		},
-		 watch: {
-		      filterText(val) {
-		        this.$refs.tree.filter(val);
-		      }
-		    },
-		components:{
-			ocxplay,paramset
-		},
-		methods:{
-			handleClick(tab, event) {
-				console.log(tab, event);
+import videoplay from './videoplay'
+import InfoDialog from '../public/infodialog'
+import setting from './setting'
+import eventtab from './eventTab'
+export default {
+    components:{
+      videoplay,
+      InfoDialog,
+      setting,
+      eventtab
+    },
+    data() {
+      return {
+        searchInfo:'',
+        taskdata: [],
+        subtaskdata:[],
+        subTasks:[],
+        subindex:-1,
+        playulr:'',
+        taskID:'',
+        currentSubtaskId:'',
+        defaultProps: {
+          children: 'children',
+          label: 'label'
+        },
+        timer:null,
+        searchstate:null
+      };
+    },
+    methods: {
+      selecttask(data,index){
+        this.subTasks = []
+        this.subindex = index;
+         this.$api.task.getSubTask(data.task_id).then(res => {
+          this.subTasks = res.list_data
+          this.taskID = data.task_id
+        })
+      },
+      subTasksClick(vdata){
+        this.$store.commit('setocxstate',1)
+        this.currentSubtaskId = vdata.subtask_id;
+        this.subtaskdata =  vdata
+        this.$refs.setting.getTaskParams()
+        if(vdata.running_status!='Running') {
+          this.$refs.displayInfo.showInfo('该任务没有运行，无法获取分析视频和抓拍信息')
+          return
+        }
+        this.pushSteam(vdata);
+        this.$refs.event.dataInit(this.currentSubtaskId,vdata.task_type);
+      },
+      getTask(data){
+        let that = this;
+        this.$api.task.getTask({
+            task_name: this.searchInfo,
+        }).then(res => {
+          that.taskdata = res.list_data
+          console.log(res)
+        })
+      },
+      //发送推流请求
+      pushSteam(vdata){
+        this.$api.task.getStream(this.dev_unid,vdata.vchan.vchan_id).then(m => {
+          console.log(m)
+           if (m.ecode) {
+              this.$message({
+                message: '发送推流请求失败：' + m.enote,
+                type: 'error'
+              });
+           } else {
+            console.log('请求推送分析流成功', JSON.stringify(m));
+						setTimeout(() => {
+							this.getPlayUrl();
+						}, 500);
+           }
+        })
+      },
+      getPlayUrl: function() {
+        this.$api.task.getPlayUrl(this.currentSubtaskId).then(res => {
+          debugger
+          this.playulr = res
+          if(this.playulr.rtsp_url) {
+            this.$message({
+              message: '获取播放地址成功，请耐心等待视频加载',
+              type: 'success'
+            });
+            setTimeout(()=> {
+              this.$refs.videoplay.videoPlay()
+            }, 2000)
+          } else {
+             this.$message({
+              message: '获取rtsp播放地址失败!请重试!',
+              type: 'error'
+            });
+            setTimeout(() => {
+              alert('获取rtsp播放地址失败!请重试!');
+            }, 0);
+          }
+        });
 			},
 			},
-			filterNode(value, data) {
-				if (!value) return true;
-				return data.label.indexOf(value) !== -1;
-			},
-			editFun(index,row){
-				  
-			},
-			delFun(index,row){
-				console.log(row)
-			},
-			paramsSet(index,row){
-				this.paramshow=true;
-				console.log(row)
-			},
-			areaSet(index,row){
-				console.log(row)
-			},
-			markSet(index,row){
-				console.log(row)
-			},
-			timeSet(index,row){
-				console.log(row)
-			}
-		},
-	}
+      getVchansIsSending(){
+        this.axios.get(this.API.task.getstream()).then(res => {
+
+        })
+      },
+     debounce(fn, wait) {
+          clearTimeout(this.timer)
+          this.timer = setTimeout(() => {
+            fn
+          }, wait);
+      },
+    },
+    watch: {
+      searchInfo(val){
+        this.debounce(this.getTask(),800)
+      }
+    },
+    created() {
+      this.getTask()
+    },
+  };
 </script>
 </script>
-<style lang="scss" scoped>
-	.tabCon{
-		padding: 8px;
-		height: 770px;
-	}
-	.cardCon{
-		background: #F1F1F1;
-		padding: 7px;
-	}
-	.cardCon img{
-		width: 237px;
-		height: 133px;
-		float: left;
-	}
-	.imginfo{
-		float: left;
-		margin-left: 10px;
-	}
-	.imginfo span{
-		display: block;
-		margin-bottom: 6px;
-	}
-	.imginfo span:first-of-type{
-		margin-top: 7px;
-	}
-	.leftCon{
-		width: 210px;
-		background: #FFFFFF;
-		float: left;
-	}
-	.middleCon{
-		display: inline-block;
-		margin-left: 12px;
-		float: left;
-	}
-	.objectCon{
-		width: 980px;
-		height: 543px;
-		margin-bottom: 12px;
-		background: #FFFFFF;
-	}
-	.handleBox{
-		float: left;
-		width: 193px;
-		border:1px solid #F0F3F9;
-	}
-	.handleTitle{
-		height:40px;
-		background:#ACC1FF;
-		color: $white-font-color;
-		font-size:14px;
-		text-align: center;
-		line-height: 40px;
-	}
-	.operaBox{
-		padding: 1px 19px;
-		background: #FFFFFF;
-	}
-	.operaBox .lefts{
-		color: #CCCCCC;
-		font-size: 16px;
-		margin-left: 70px;
-	}
-	.operaBox .iconfont{
-		margin-left: 72px;
-		cursor: pointer;
-	}
-	.operaBox .iconfont:hover{
-		color: #3BB7FF;
-	}
-	.operaBox p{
-		margin:0;
-		margin-bottom: 24px;
-	}
-	.operaBox p:first-of-type{
-		margin-top: 24px;
-	}
-	.titles{
-		height:30px;
-		background:rgba(59,183,255,1);
-		color: $white-font-color;
-		font-size:14px;
-		padding-left: 13px;
-		line-height: 30px;
-	}
-	.searchBox{
-		padding: 10px;
-	}
-	.treeBox{
-		padding: 10px;
-	}
-	.editIcon{
-		cursor: pointer;
-		color:#0069ff;
-		font-size:16px;
-	}
-	.delIcon{
-		cursor: pointer;
-		color:#f2365a;
-		font-size:16px;
-	}
-	.rightCon{
-		float: left;
-		background: #FFFFFF;
-		margin-left: 12px;
-		width: 409px;
-	}
-</style>
\ No newline at end of file
+<style lang="stylus" scoped>
+.home-box{
+  height calc(100% - 60px)
+  width 100%
+  margin 2px auto
+  color  #fff
+  overflow hidden
+	padding 10px
+}
+.tree-box{
+  border-radius 2px
+  height calc(100% - 0px)
+  overflow hidden
+	background #fff
+}
+.tree-title{
+	height 30px
+	line-height 30px
+	padding-left 30px
+	font-size 14px
+	background #3BB7FF
+}
+.tree-box:hover{
+  overflow-y auto
+}
+.tree-left{
+}
+.video-box,.show-box{
+  height calc(100% - 0px)
+  overflow hidden
+	background #fff
+}
+.show-box {
+  overflow hidden
+	padding 10px
+}
+.show-box:hover{
+  overflow-y auto
+}
+.play-box{
+  height 70%
+  background black
+  margin-bottom 10px
+}
+
+.ht100{
+  height 100%
+}
+.search-input{
+  border-radius 1px
+  width 90%
+  margin 10px
+  .search-btn{
+    background rgba(0,0,0,.3)
+    border-radius 0
+    text-align center
+  }
+}
+.vido-ifram{
+  height 100%
+  width 100%
+  border 0
+}
+.task-lsit{
+  display inline-block
+  cursor pointer
+  padding 10px 0
+  .icon {
+    padding-left 10px
+  }
+}
+.runningtask{
+    // color rgba(1, 206, 184, 0.56);
+    color #999697;
+  }
+.stoptask{
+    color #999697
+    .icon {
+      font-size 22px
+      margin-left -2px
+  }
+  }
+.task-title{
+  padding-left 10px
+}
+.tasklist{
+  padding-left 10px;
+  width 100%
+  overflow hidden
+}
+.subtask{
+  margin-bottom 10px
+  width 100%
+  height 30px
+  padding-left 30px
+  line-height 30px
+  font-size 14px
+  color #666666
+  width calc(100% - 30px);
+  overflow hidden
+  cursor pointer
+  .icon{
+    font-size 10px
+    padding-right 2px
+    transform scale(.6)
+    color #01ce82
+  }
+}
+.subtaskActive {
+  // background #0c3b87
+}
+</style>

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/ComplexCanvas.vue

+<template>
+  <div class="modal-body">
+    <div class="modal-editbox" >
+      <button v-for="(item,index) in typeData" :class="{'curmodal':index==cindex}" @click="changeLayer(index)" :key="index">{{item}}</button>
+    </div>
+    <div class="modal-left">
+      <div class="modal-lb" id="edit_list" v-if="drawState!=-1">
+        <el-radio-group v-model="canvasState" @change='changeCanvasState' :disabled='needLine||needRect'>
+          <el-radio-button :label="1">添加</el-radio-button>
+          <el-radio-button :label="0">编辑</el-radio-button>
+        </el-radio-group>
+        <div v-if="!canvasState">
+          <button @click='delShape' class="delbtn">删除</button>
+        </div>
+      </div>
+    </div>
+    <div class="modal-right">
+      <div class="pic" :style="{ backgroundImage: 'url('+ bgUrl +')', backgroundRepeat: 'no-repeat' }"><img :src="bgUrl" id='bg' /></div>
+      <div id='flowCanvas'></div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import LightCanvas from "./LightCanvas";
+  export default {
+    name: "zoneSetting",
+    data() {
+      return {
+        color: ["222,50,212", "24,0,254", "0,254,137", "255,255,0", "138,43,226"],
+        typeData: ['预览', '设置数人区域', '设置进出区域', '设置方向线','设置进入线',],
+        drawState: -1,
+        roadFlag: true,
+        needRect: false,
+        canvasState: 0,
+        needLine: false,
+        layers: [],
+        roiBody: {},
+        XMLStr: "",
+        cindex:0
+      };
+    },
+    props: ["bgUrl"],
+    components: {
+      LightCanvas
+    },
+    methods: {
+      stageInit: function(params) {
+        console.log("init");
+        document.getElementsByClassName("pic")[0].style.background =
+          'url("' + this.bgUrl + '") no-repeat';
+        document.getElementsByClassName("pic")[0].style.backgroundSize = "cover";
+        this.stage = new Kinetic.Stage({
+          container: "flowCanvas", //<div>的id
+          width: 800, //创建的舞台宽度
+          height: 500 //创建的舞台高度
+        });
+        this.shadowLayer = new Kinetic.Layer({
+          id: "shadowLayer"
+        });
+        this.testLayer = new Kinetic.Layer({
+          id: "testLayer",
+          name: "layer"
+        });
+        this.testLayer_1 = new Kinetic.Layer({
+          id: "testLayer_1",
+          name: "layer"
+        });
+        this.inLayer = new Kinetic.Layer({
+          id: "inLayer",
+          name: "layer"
+        });
+        this.dirLayer = new Kinetic.Layer({
+          id: "dirLayer",
+          name: "layer"
+        });
+        let shadow = new Kinetic.Rect({
+          x: 0, //矩形左上角x坐标
+          y: 0, //矩形左上角y坐标
+          width: 800, //矩形的宽度
+          height: 500, //矩形的高度
+          fill: "rgba(255,255,255,.2)", //矩形的填充色
+          stroke: "black", //矩形边缘线的颜色
+          strokeWidth: 3 //矩形边缘线的宽度
+        });
+        let that = this;
+        this.stage.on("click", function(evt) {
+          that.stageClick(evt, this);
+        });
+        this.stage.on("mousemove", function(evt) {
+          that.stageMouseMove(evt, this);
+        });
+        this.shadowLayer.add(shadow);
+        this.stage.add(this.shadowLayer);
+        this.stage.add(this.testLayer);
+        this.stage.add(this.testLayer_1);
+        this.stage.add(this.inLayer);
+        this.stage.add(this.dirLayer);
+        this.layers = [
+          this.testLayer,
+          this.testLayer_1,
+          this.dirLayer,
+          this.inLayer
+        ];
+      },
+      configInit: function(xml) {
+        let passengerObj = this.oParse.parseXML(xml).RoiSettings.Rules_0;
+        //检测区域
+        let testPoints = [];
+        let testPoints_1 = [];
+        let testPoints_2 = [];
+        if (passengerObj.Polygon_0) {
+          testPoints = [
+            passengerObj.Polygon_0.Point_0.split(",")[0].split("=")[1] * 8,
+            passengerObj.Polygon_0.Point_0.split(",")[1].split("=")[1] * 5,
+            passengerObj.Polygon_0.Point_1.split(",")[0].split("=")[1] * 8,
+            passengerObj.Polygon_0.Point_1.split(",")[1].split("=")[1] * 5,
+            passengerObj.Polygon_0.Point_2.split(",")[0].split("=")[1] * 8,
+            passengerObj.Polygon_0.Point_2.split(",")[1].split("=")[1] * 5,
+            passengerObj.Polygon_0.Point_3.split(",")[0].split("=")[1] * 8,
+            passengerObj.Polygon_0.Point_3.split(",")[1].split("=")[1] * 5
+          ];
+          let rect = this.drawRect("morePoints", testPoints, this.color[0]);
+          this.testLayer.add(rect);
+        }
+        if (passengerObj.Polygon_2) {
+          testPoints_2 = [
+            passengerObj.Polygon_2.Point_0.split(",")[0].split("=")[1] * 8,
+            passengerObj.Polygon_2.Point_0.split(",")[1].split("=")[1] * 5,
+            passengerObj.Polygon_2.Point_1.split(",")[0].split("=")[1] * 8,
+            passengerObj.Polygon_2.Point_1.split(",")[1].split("=")[1] * 5,
+            passengerObj.Polygon_2.Point_2.split(",")[0].split("=")[1] * 8,
+            passengerObj.Polygon_2.Point_2.split(",")[1].split("=")[1] * 5,
+            passengerObj.Polygon_2.Point_3.split(",")[0].split("=")[1] * 8,
+            passengerObj.Polygon_2.Point_3.split(",")[1].split("=")[1] * 5
+          ];
+          let rect = this.drawRect("morePoints", testPoints_2, this.color[0]);
+          this.testLayer.add(rect);
+        }
+        if (passengerObj.Polygon_1) {
+          testPoints_1 = [
+            passengerObj.Polygon_1.Point_0.split(",")[0].split("=")[1] * 8,
+            passengerObj.Polygon_1.Point_0.split(",")[1].split("=")[1] * 5,
+            passengerObj.Polygon_1.Point_1.split(",")[0].split("=")[1] * 8,
+            passengerObj.Polygon_1.Point_1.split(",")[1].split("=")[1] * 5,
+            passengerObj.Polygon_1.Point_2.split(",")[0].split("=")[1] * 8,
+            passengerObj.Polygon_1.Point_2.split(",")[1].split("=")[1] * 5,
+            passengerObj.Polygon_1.Point_3.split(",")[0].split("=")[1] * 8,
+            passengerObj.Polygon_1.Point_3.split(",")[1].split("=")[1] * 5
+          ];
+          let rect_1 = this.drawRect("morePoints", testPoints_1, this.color[1]);
+          this.testLayer_1.add(rect_1);
+        }
+
+        //方向线
+        try {
+          let dirStart = [
+            passengerObj.DirectLine_0.StartPoint.split(",")[0].split("=")[1] * 8,
+            passengerObj.DirectLine_0.StartPoint.split(",")[1].split("=")[1] * 5
+          ];
+          let dirEnd = [
+            passengerObj.DirectLine_0.EndPoint.split(",")[0].split("=")[1] * 8,
+            passengerObj.DirectLine_0.EndPoint.split(",")[1].split("=")[1] * 5
+          ];
+          let dirLine = this.drawLine(
+            { x: dirStart[0], y: dirStart[1] },
+            { x: dirEnd[0], y: dirEnd[1] },
+            this.color[2]
+          );
+          let dirGroup = new Kinetic.Group({ name: "arr" });
+          this.drawArrow(
+            dirStart,
+            dirEnd,
+            30,
+            20,
+            3,
+            this.color[2],
+            this.dirLayer,
+            dirGroup,
+            dirLine
+          );
+        } catch (err) {}
+
+        //进入线
+        try {
+          let inStart = [
+            passengerObj.InLine_0.Point_0.split(",")[0].split("=")[1] * 8,
+            passengerObj.InLine_0.Point_0.split(",")[1].split("=")[1] * 5
+          ];
+          let inEnd = [
+            passengerObj.InLine_0.Point_1.split(",")[0].split("=")[1] * 8,
+            passengerObj.InLine_0.Point_1.split(",")[1].split("=")[1] * 5
+          ];
+          let inLine = this.drawLine(
+            { x: inStart[0], y: inStart[1] },
+            { x: inEnd[0], y: inEnd[1] },
+            this.color[3]
+          );
+          let inGroup = new Kinetic.Group({ name: "arr" });
+          this.drawArrow(
+            inStart,
+            inEnd,
+            30,
+            20,
+            3,
+            this.color[3],
+            this.inLayer,
+            inGroup,
+            inLine
+          );
+        } catch (error) {}
+
+        if (passengerObj.NumberOfInLine == "2") {
+          let inStart1 = [
+            passengerObj.InLine_1.Point_0.split(",")[0].split("=")[1] * 8,
+            passengerObj.InLine_1.Point_0.split(",")[1].split("=")[1] * 5
+          ];
+          let inEnd1 = [
+            passengerObj.InLine_1.Point_1.split(",")[0].split("=")[1] * 8,
+            passengerObj.InLine_1.Point_1.split(",")[1].split("=")[1] * 5
+          ];
+          let inLine1 = this.drawLine(
+            { x: inStart1[0], y: inStart1[1] },
+            { x: inEnd1[0], y: inEnd1[1] },
+            this.color[3]
+          );
+          let inGroup1 = new Kinetic.Group({ name: "arr" });
+          this.drawArrow(
+            inStart1,
+            inEnd1,
+            30,
+            20,
+            3,
+            this.color[3],
+            this.inLayer,
+            inGroup1,
+            inLine1
+          );
+        }
+
+        this.stage.draw();
+      },
+      changeLayer: function(index) {
+        this.cindex = index;
+        if (this.needRect || this.needLine) {
+          let shape = this.needRect ? "区域" : "线段";
+          this.$message({
+            type: "error",
+            message: "当前" + shape + "配置未完成"
+          });
+          return;
+        }
+        this.layers.forEach(ele => {
+          ele.setVisible(false);
+        });
+        this.selectedShape = null;
+        if (this.drawState != -1) {
+          this.cancleSelectedGroup();
+        }
+        this.canvasState = 0;
+        this.drawState = index - 1;
+        if (this.drawState == -1) {
+          this.layers.forEach(ele => {
+            ele.setVisible(true);
+          });
+          this.stage.draw();
+        }
+        if (index) {
+          if (this.drawState == 3 || this.drawState == 2) {
+            this.layers[1].setVisible(true);
+          }
+          this.layers[this.drawState].setVisible(true);
+          this.layers[this.drawState].draw();
+        }
+      },
+      changeCanvasState: function() {
+        if (this.canvasState) {
+          this.cancleSelectedGroup();
+        }
+        this.selectedShape = null;
+      },
+      stageClick: function(evt, box) {
+        if (this.drawState == -1) {
+          this.$message({
+            type: "info",
+            message: "预览模式下无法操作！"
+          });
+          return;
+        }
+        if (this.canvasState) {
+          this.addShape(evt);
+        } else {
+          this.cancleSelectedGroup();
+          if (this.drawState == 3 && evt.target.attrs.name == "rect") {
+            return;
+          }
+          if (evt.target.className != "Rect") {
+            this.makeSelectedGroup(evt.target);
+          }
+        }
+      },
+      addShape: function(evt) {
+        let pos = {
+          x: evt.evt.offsetX,
+          y: evt.evt.offsetY
+        };
+        let layer = this.layers[this.drawState];
+        switch (this.drawState) {
+          case 0:
+            if (layer.get(".rect").length > 1 && !this.needRect) {
+              this.$message({
+                type: "error",
+                message: "只允许设置一个检测区域"
+              });
+              return;
+            }
+            break;
+          case 1:
+            if (layer.get(".rect").length && !this.needRect) {
+              this.$message({
+                type: "error",
+                message: "只允许设置一个检测区域"
+              });
+              return;
+            }
+            break;
+          case 2:
+            if (layer.get(".arr").length) {
+              this.$message({
+                type: "error",
+                message: "只允许设置一条方向线"
+              });
+              return;
+            }
+            break;
+          case 3:
+            if (layer.get(".arr").length > 1) {
+              this.$message({
+                type: "error",
+                message: "最多允许设置两条条进入线"
+              });
+              return;
+            }
+            break;
+        }
+        this.startChangeShape(pos, layer, this.color[this.drawState]);
+      },
+      makeSelectedGroup: function(shape) {
+        if (this.drawState != 0 && this.drawState != 1) {
+          let parShape = shape.getParent();
+          this.layers[this.drawState].add(shape);
+          parShape.destroy();
+        }
+        this.selectedShape = shape;
+        //xieminghui
+        console.log("selected");
+        this.roadFlag = false;
+        //xieminghui end
+        let points = shape.attrs.points;
+        for (let i = 0; i < points.length; i += 2) {
+          const pos = {
+            x: points[i],
+            y: points[i + 1]
+          };
+          let cir = this.drawCircle(pos, this.color[this.drawState], 5);
+          this.layers[this.drawState].add(cir);
+        }
+        this.layers[this.drawState].draw();
+      },
+      cancleSelectedGroup: function(isdel) {
+        if (!this.selectedShape) return;
+        let cirs = this.layers[this.drawState].get(".circle");
+        for (let i = 0; i < cirs.length; i++) {
+          const cir = cirs[i];
+          cir.destroy();
+        }
+        if (this.drawState != 0 && this.drawState != 1 && !isdel) {
+          console.log(this.selectedShape);
+          let group = new Kinetic.Group({
+            name: "arr"
+          });
+          let points = this.selectedShape.attrs.points;
+          this.drawArrow(
+            [points[0], points[1]],
+            [points[2], points[3]],
+            30,
+            20,
+            3,
+            this.color[this.drawState],
+            this.layers[this.drawState],
+            group,
+            this.selectedShape
+          );
+        }
+        this.selectedShape = null;
+        this.layers[this.drawState].draw();
+        //xieminghui
+        this.roadFlag = true;
+        console.log("cancel");
+        //xieminghui end
+      },
+      startChangeShape: function(pos, layer, col) {
+        if (this.drawState == 0 || this.drawState == 1) {
+          if (!this.needRect) {
+            this.needRect = true;
+            let rect = this.drawRect(pos, pos, col);
+            rect.moveToBottom();
+            layer.add(rect);
+          } else {
+            this.endChangeShape(layer, pos);
+          }
+        } else {
+          let ary = layer.get(".circle");
+          if (ary.length == 0 && !this.needLine) {
+            let circle = this.drawCircle(pos, "transparent");
+            layer.add(circle);
+            this.needLine = true;
+            let line = this.drawLine(pos, pos, col);
+            this.curShape = line;
+            layer.add(line);
+          } else {
+            this.endChangeShape(layer, pos);
+          }
+        }
+        layer.draw();
+      },
+      stageMouseMove: function(evt) {
+        if (!this.needLine && !this.needRect) return;
+        let pos = {
+          x: evt.evt.offsetX,
+          y: evt.evt.offsetY
+        };
+        let layer = this.layers[this.drawState];
+        if (this.needLine) {
+          let lines = layer.get(".line");
+
+          lines[lines.length - 1].attrs.points[2] = pos.x;
+          lines[lines.length - 1].attrs.points[3] = pos.y;
+        } else if (this.needRect) {
+          let rects = layer.get(".rect");
+          let rect = rects[rects.length - 1];
+          rect.moveToBottom();
+          rect.attrs.points[3] = pos.y;
+          rect.attrs.points[4] = pos.x;
+          (rect.attrs.points[5] = pos.y), pos;
+          rect.attrs.points[6] = pos.x;
+          this.curShape = rect;
+        }
+        layer.draw();
+      },
+      endChangeShape: function(layer, pos) {
+        console.log("end");
+
+        if (this.needLine) {
+          this.needLine = false;
+
+          let start = layer.get(".circle")[0];
+          let x = start.attrs.x;
+          let y = start.attrs.y;
+          start.destroy();
+          let group = new Kinetic.Group({
+            name: "arr"
+          });
+          let lines = layer.get(".line");
+          let line = lines[lines.length - 1];
+
+          this.drawArrow(
+            [x, y],
+            [pos.x, pos.y],
+            30,
+            20,
+            3,
+            this.color[this.drawState],
+            layer,
+            group,
+            line
+          );
+        } else {
+          this.needRect = false;
+        }
+      },
+      drawCircle: function(pos, col, r) {
+        let size = r || 2;
+        let circle = new Kinetic.Circle({
+          x: pos.x,
+          y: pos.y,
+          fill: "rgb(" + col + ")",
+          radius: size,
+          name: "circle",
+          draggable: true
+        });
+
+        circle.on("dragmove", evt => {
+          if (this.canvasState) return;
+          evt.cancelBubble = true;
+          this.changeRect(evt);
+        });
+
+        return circle;
+      },
+      drawLine: function(start, end, col, width) {
+        let points = [start.x, start.y, end.x, end.y];
+        let name = "line";
+        let size = width || 4;
+        let line = new Kinetic.Line({
+          x: 0,
+          points: points,
+          tension: 0.5,
+          closed: false,
+          stroke: "rgb(" + col + ")",
+          strokeWidth: size,
+          name: name
+        });
+
+        return line;
+      },
+      drawRect: function(start, end, color) {
+        let points;
+        if (start === "morePoints") {
+          points = end;
+        } else {
+          points = [
+            start.x,
+            start.y,
+            start.x,
+            end.y,
+            end.x,
+            end.y,
+            end.x,
+            start.y
+          ];
+        }
+        let rect = new Kinetic.Line({
+          x: 0,
+          points: points,
+          // tension: 0.5,
+          closed: true,
+          stroke: "rgb(" + color + ")",
+          strokeWidth: 3,
+          name: "rect",
+          fill: "rgba(" + color + ",0.3)"
+        });
+
+        return rect;
+      },
+      changeRect: function(evt) {
+        let rects = evt.target.getParent().get(".rect");
+        let cirs = evt.target.getParent().get(".circle");
+        let points = [];
+        cirs.forEach(ele => {
+          points.push(ele.attrs.x);
+          points.push(ele.attrs.y);
+        });
+
+        this.selectedShape.attrs.points = points;
+        this.layers[this.drawState].draw();
+      },
+      drawArrow: function(
+        c1,
+        c2,
+        theta,
+        headlen,
+        width,
+        color,
+        layer,
+        group,
+        line
+      ) {
+        theta = typeof theta != "undefined" ? theta : 30;
+        headlen = typeof theta != "undefined" ? headlen : 10;
+        width = typeof width != "undefined" ? width : 1;
+        color = typeof color != "color" ? color : "#000";
+
+        // 计算各角度和对应的P2,P3坐标
+        var angle = Math.atan2(c1[1] - c2[1], c1[0] - c2[0]) * 180 / Math.PI,
+          angle1 = (angle + theta) * Math.PI / 180,
+          angle2 = (angle - theta) * Math.PI / 180,
+          topX = headlen * Math.cos(angle1),
+          topY = headlen * Math.sin(angle1),
+          botX = headlen * Math.cos(angle2),
+          botY = headlen * Math.sin(angle2);
+
+        var arrowX = c1[0] - topX,
+          arrowY = c1[1] - topY;
+        arrowX = c2[0] + topX;
+        arrowY = c2[1] + topY;
+
+        let line1 = this.drawLine(
+          { x: c2[0], y: c2[1] },
+          { x: arrowX, y: arrowY },
+          color,
+          3
+        );
+        arrowX = c2[0] + botX;
+        arrowY = c2[1] + botY;
+
+        let line2 = this.drawLine(
+          { x: c2[0], y: c2[1] },
+          { x: arrowX, y: arrowY },
+          color,
+          3
+        );
+        group.add(line);
+        group.add(line1);
+        group.add(line2);
+        layer.add(group);
+        layer.draw();
+      },
+
+      delShape: function() {
+        console.log(this.selectedShape);
+        if (!this.selectedShape) {
+          return;
+        }
+        this.selectedShape.destroy();
+        this.cancleSelectedGroup(true);
+        this.selectedShape = null;
+      },
+
+      save: function() {
+        let testPoints = null;
+        let testPoints_1 = null;
+        let testPoints_2 = null;
+        let length = 0;
+        if (this.testLayer.get(".rect")[0]) {
+          testPoints = this.testLayer.get(".rect")[0].attrs.points;
+          length++;
+        }
+        if (this.testLayer.get(".rect")[1]) {
+          testPoints_2 = this.testLayer.get(".rect")[1].attrs.points;
+          length++;
+        }
+        if (this.testLayer_1.get(".rect")[0]) {
+          testPoints_1 = this.testLayer_1.get(".rect")[0].attrs.points;
+          length++;
+        }
+        let dirPoints = this.dirLayer.get(".arr");
+        let inLines = this.inLayer.get(".arr");
+        this.roiBody = {
+          RoiType: 2,
+          NumberOfRules: 1,
+          Rules_0: {
+            NumberOfPolygon: length,
+            Polygon_0: {},
+            Polygon_1: {},
+            Polygon_2: {},
+            NumberOfDirectLine: 0,
+            DirectLine_0: {},
+            NumberOfInLine: inLines.length,
+            InLine_0: {},
+            InLine_1: {},
+            MaxAngle: 80,
+            CountType: 0
+          }
+        };
+        if (testPoints) {
+          this.roiBody.Rules_0.Polygon_0 = {
+            NumberOfPoints: 4,
+            type: 0,
+            Point_0:
+              "x=" +
+              (testPoints[0] / 8).toFixed(0) +
+              ",y=" +
+              (testPoints[1] / 5).toFixed(0),
+            Point_1:
+              "x=" +
+              (testPoints[2] / 8).toFixed(0) +
+              ",y=" +
+              (testPoints[3] / 5).toFixed(0),
+            Point_2:
+              "x=" +
+              (testPoints[4] / 8).toFixed(0) +
+              ",y=" +
+              (testPoints[5] / 5).toFixed(0),
+            Point_3:
+              "x=" +
+              (testPoints[6] / 8).toFixed(0) +
+              ",y=" +
+              (testPoints[7] / 5).toFixed(0)
+          };
+        }
+        if (testPoints_2) {
+          this.roiBody.Rules_0.Polygon_2 = {
+            NumberOfPoints: 4,
+            type: 0,
+            Point_0:
+              "x=" +
+              (testPoints_2[0] / 8).toFixed(0) +
+              ",y=" +
+              (testPoints_2[1] / 5).toFixed(0),
+            Point_1:
+              "x=" +
+              (testPoints_2[2] / 8).toFixed(0) +
+              ",y=" +
+              (testPoints_2[3] / 5).toFixed(0),
+            Point_2:
+              "x=" +
+              (testPoints_2[4] / 8).toFixed(0) +
+              ",y=" +
+              (testPoints_2[5] / 5).toFixed(0),
+            Point_3:
+              "x=" +
+              (testPoints_2[6] / 8).toFixed(0) +
+              ",y=" +
+              (testPoints_2[7] / 5).toFixed(0)
+          };
+        }
+        if (testPoints_1) {
+          this.roiBody.Rules_0.Polygon_1 = {
+            NumberOfPoints: 4,
+            type: 1,
+            Point_0:
+              "x=" +
+              (testPoints_1[0] / 8).toFixed(0) +
+              ",y=" +
+              (testPoints_1[1] / 5).toFixed(0),
+            Point_1:
+              "x=" +
+              (testPoints_1[2] / 8).toFixed(0) +
+              ",y=" +
+              (testPoints_1[3] / 5).toFixed(0),
+            Point_2:
+              "x=" +
+              (testPoints_1[4] / 8).toFixed(0) +
+              ",y=" +
+              (testPoints_1[5] / 5).toFixed(0),
+            Point_3:
+              "x=" +
+              (testPoints_1[6] / 8).toFixed(0) +
+              ",y=" +
+              (testPoints_1[7] / 5).toFixed(0)
+          };
+        }
+        if (dirPoints.length) {
+          this.roiBody.Rules_0.NumberOfDirectLine = 1;
+          const point = dirPoints[0].children[0].attrs.points;
+          this.roiBody.Rules_0.DirectLine_0 = {
+            StartPoint:
+              "x=" +
+              (point[0] / 8).toFixed(0) +
+              ",y=" +
+              (point[1] / 5).toFixed(0),
+            EndPoint:
+              "x=" + (point[2] / 8).toFixed(0) + ",y=" + (point[3] / 5).toFixed(0)
+          };
+        }
+        if (inLines.length == 2) {
+          this.roiBody.Rules_0.InLine_1 = {
+            NumberOfInPoints: 2,
+            Point_0:
+              "x=" +
+              (inLines[1].children[0].attrs.points[0] / 8).toFixed(0) +
+              ",y=" +
+              (inLines[1].children[0].attrs.points[1] / 5).toFixed(0),
+            Point_1:
+              "x=" +
+              (inLines[1].children[0].attrs.points[2] / 8).toFixed(0) +
+              ",y=" +
+              (inLines[1].children[0].attrs.points[3] / 5).toFixed(0)
+          };
+        } else if (inLines.length == 1) {
+          this.roiBody.Rules_0.InLine_0 = {
+            NumberOfInPoints: 2,
+            Point_0:
+              "x=" +
+              (inLines[0].children[0].attrs.points[0] / 8).toFixed(0) +
+              ",y=" +
+              (inLines[0].children[0].attrs.points[1] / 5).toFixed(0),
+            Point_1:
+              "x=" +
+              (inLines[0].children[0].attrs.points[2] / 8).toFixed(0) +
+              ",y=" +
+              (inLines[0].children[0].attrs.points[3] / 5).toFixed(0)
+          };
+        }
+        console.log(this.roiBody);
+        return this.oParse.writeXML({ RoiSettings: this.roiBody });
+      },
+      clear: function() {
+        (this.drawState = -1), (this.needRect = false), (this.needLine = false);
+      }
+    }
+  };
+</script>
+
+<style scoped>
+button {
+  width: 10%;
+}
+
+.modal-title {
+  float: left;
+  width: 93%;
+  overflow: hidden;
+}
+
+.settingZone {
+  width: 100px;
+  float: left;
+  margin-right: 15px;
+}
+
+.settingZone > button {
+  width: 100px;
+}
+
+.modal-body {
+  height: 540px !important;
+  padding-left: 3%;
+}
+.modal-editbox{
+  width: 100%;
+  margin-bottom: 10px;
+  text-align: center;
+}
+.modal-editboxbutton {
+  width: 12%;
+  margin: 0 1%;
+}
+.modal-editboxbutton.active {
+  background: #145b93 !important;
+}
+.modal-left {
+  float: left;
+  min-height: 350px;
+  width: 15%;
+  color: #fff;
+  padding-top: 40px;
+}
+.modal-right {
+  position: relative;
+  float: left;
+  text-align: center;
+}
+
+.modal-left button {
+  display: block;
+  margin: 10px;
+}
+
+.modal-editboxbutton {
+  width: 120px;
+}
+
+.modal-lb button {
+  width: 100px;
+}
+
+.pic {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.pic img {
+  width: 800px;
+  height: 500px;
+  margin: 0;
+  padding: 0;
+}
+</style>
\ No newline at end of file

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

+<template>
+	<div class="modal-body">
+		<div class="modal-editbox">
+			<button v-for="(item,index) in typeData" :class="{'curmodal':index==cindex}" @click="changeLayer(index)" :key="index">{{item}}</button>
+		</div>
+		<div class="modal-left">
+			<div class="modal-lb" id="edit_list">
+				<el-radio-group v-model="canvasState">
+					<el-radio-button :label="1">添加</el-radio-button >
+					<el-radio-button :label="0">编辑</el-radio-button >
+				</el-radio-group>
+				<div v-if="!canvasState">
+					<button @click='delShape' class="delbtn">删除</button>
+				</div>
+			</div>
+		</div>
+		<div class="modal-right">
+			<div class="pic" :style="{ backgroundImage: 'url('+ bgUrl +')', backgroundRepeat: 'no-repeat' }"><img :src="bgUrl" id='bg' /></div>
+			<div id='safeCanvas'></div>
+		</div>
+	</div>
+</template>
+
+<script>
+	import LightCanvas from './LightCanvas'
+	export default {
+		name: 'zoneSetting',
+		data() {
+			return {
+				color: ["222,50,212", "24,0,254", "0,254,137", "255,255,0", "138,43,226"],
+				typeData:['预览','设置检测区域'],
+				drawState: -1,
+				canvasState:0,
+				needRect:false,
+				curShape:null,
+                needLine:false,
+				layers: [],
+				roiBody: {},
+				XMLStr: ''
+			}
+        },
+        props:['bgUrl'],
+		methods: {
+			stageInit: function (params) {
+				console.log('init')
+				document.getElementsByClassName('pic')[0].style.background = 'url("'+ this.bgUrl +'") no-repeat';
+				document.getElementsByClassName('pic')[0].style.backgroundSize = 'cover';
+                this.stage =  new Kinetic.Stage({
+					container: "safeCanvas", //<div>的id 
+					width: 800, //创建的舞台宽度 
+					height: 500 //创建的舞台高度 
+				});
+				this.shadowLayer = new Kinetic.Layer({  
+					id: "shadowLayer",
+				});
+				this.testLayer = new Kinetic.Layer({  
+					id: "testLayer",
+					name:'layer'  
+				});
+				let shadow = new Kinetic.Rect({
+					x: 0, //矩形左上角x坐标 
+					y: 0, //矩形左上角y坐标 
+					width: 800, //矩形的宽度 
+					height: 500, //矩形的高度 
+					fill: 'rgba(255,255,255,.2)', //矩形的填充色 
+					stroke: "black", //矩形边缘线的颜色
+					strokeWidth: 3 //矩形边缘线的宽度
+				});
+				let that = this
+				this.stage.on('click',function(evt) {
+				    that.stageClick(evt,this)
+				})
+				this.stage.on('mousemove',function (evt) {
+					that.stageMouseMove(evt,this)
+                })
+				this.shadowLayer.add(shadow)
+				this.stage.add(this.shadowLayer)
+				this.stage.add(this.testLayer)
+                this.layers = [this.testLayer]
+			},
+			configInit: function(xml) {
+				let safeObj = this.oParse.parseXML(xml).RoiSettings.roi
+				//检测区域
+				let testPoints = safeObj.points.point
+				let ary = []
+				for (let i = 0; i < testPoints.length; i++) {
+					const point = testPoints[i];
+					ary.push(point.split(',')[0].split('=')[1]*800)
+					ary.push(point.split(',')[1].split('=')[1]*500)
+				}
+				let rect = this.drawRect('morePoints',ary,this.color[0])
+				this.testLayer.add(rect)
+				this.stage.draw()
+			},
+			changeLayer: function(index) {
+                if (this.needRect || this.needLine) {
+					let shape = this.needRect ? '区域' : '线段'
+					this.$message({
+						type:'error',
+						message:'当前'+shape+'配置未完成'
+					})
+					return
+				}
+                this.layers.forEach((ele)=>{
+					ele.setVisible(false)
+				})
+				this.selectedShape = null
+				if (this.drawState!=-1) {
+					this.cancleSelectedGroup()
+				}
+				this.canvasState = 0
+				this.drawState = index - 1;
+				if (this.drawState == -1) {
+					this.layers.forEach((ele)=>{
+						ele.setVisible(true)
+					})
+					this.stage.draw()
+				}
+				if (index) {
+					this.layers[this.drawState].setVisible(true)
+					this.layers[this.drawState].draw()
+				}
+      },
+			stageClick: function (evt,box) {  
+				if (this.drawState==-1) {
+					this.$message({
+						type:'info',
+						message:'预览模式下无法操作！'
+					})
+					return
+				} 
+				if (this.canvasState) {
+          this.addShape(evt)
+				} else {
+					this.cancleSelectedGroup()
+					if (evt.target.className!='Rect') {
+            this.makeSelectedGroup(evt.target)
+					} 
+				} 
+			},
+			addShape: function (evt) {
+				let pos = {
+					x: evt.evt.offsetX,
+					y: evt.evt.offsetY
+				}
+                let layer = this.layers[this.drawState]
+				switch (this.drawState) {
+					case 0:
+						if (layer.get('.rect').length && !this.needRect) {
+							 this.$message({
+								 type:'error',
+								 message:'只允许设置一个检测区域'
+							 })
+							 return
+						 }
+						break;
+				}
+                this.startChangeShape(pos,layer,this.color[this.drawState])	
+			},
+			makeSelectedGroup: function (shape) {
+				if (this.drawState!=0) {
+					let parShape = shape.getParent()
+					this.layers[this.drawState].add(shape)
+					parShape.destroy()
+				}
+				this.selectedShape = shape
+				let points = shape.attrs.points
+				for (let i = 0; i < points.length; i+=2) {
+					const pos = {
+						x: points[i],
+						y: points[i+1]
+					};
+					let cir = this.drawCircle(pos,this.color[this.drawState],5)
+					this.layers[this.drawState].add(cir)
+				}
+				this.layers[this.drawState].draw()
+			},
+			cancleSelectedGroup: function () {
+				let cirs = this.layers[this.drawState].get('.circle')
+				for (let i = 0; i < cirs.length; i++) {
+					const cir = cirs[i];
+					cir.destroy()
+				}
+				this.selectedShape = null
+				this.layers[this.drawState].draw()
+			},
+			startChangeShape: function (pos,layer,col) {
+                if (this.drawState == 0) {
+                    if (!this.needRect) {
+						this.needRect = true
+						let rect = this.drawRect(pos,pos,col)
+						rect.moveToBottom()
+						layer.add(rect)
+					} else {
+						this.needRect = false
+						// this.endChangeShape(layer,pos)
+					}
+				} 
+				layer.draw()
+			},
+            stageMouseMove: function (evt) {  
+                if(!this.needLine && !this.needRect) return
+                let pos = {
+                    x: evt.evt.offsetX,
+                    y: evt.evt.offsetY
+                }
+                 let layer = this.layers[this.drawState]
+                if (this.needLine) {
+					let lines = layer.get('.line')
+				
+                    lines[lines.length-1].attrs.points[2]=pos.x
+                    lines[lines.length-1].attrs.points[3]=pos.y
+                } else if (this.needRect) {
+                    let rects = layer.get('.rect')
+                    let rect = rects[rects.length-1]
+                    rect.moveToBottom()
+                    rect.attrs.points[3] = pos.y
+                    rect.attrs.points[4] = pos.x
+                    rect.attrs.points[5] = pos.y,pos
+                    rect.attrs.points[6] = pos.x
+                    this.curShape = rect
+                }
+                layer.draw()
+			},
+            // endChangeShape: function (layer,pos) {
+			// 	if (this.needLine) {
+			// 		this.needLine = false
+
+			// 		let start = layer.get('.circle')[0]
+			// 		let x = start.attrs.x
+			// 		let y = start.attrs.y
+			// 		start.destroy()
+			// 		let group = new Kinetic.Group({
+			// 			name: 'arr'
+			// 		})
+			// 		let lines = layer.get('.line')
+			// 		let line = lines[lines.length-1]
+
+			// 		this.drawArrow([x,y],[pos.x,pos.y],30, 20, 3, this.color[this.drawState],layer,group,line)
+			// 	} else {
+			// 		this.needRect = false
+			// 	}
+            // },
+			drawCircle:function (pos,col,r) {
+                let size = r || 2
+				let circle = new Kinetic.Circle({
+				    x: pos.x,
+					y: pos.y,
+					fill: 'rgb('+col+')',
+				    radius: size,
+                    name: 'circle',
+                    draggable:true
+                });
+               
+                circle.on("dragmove",  (evt)=> {
+                    evt.cancelBubble = true
+                    this.changeRect(evt)
+                })
+               
+                return circle
+			},
+			drawLine: function (start,end,col) {
+				let points = [start.x,start.y,end.x,end.y]
+				let name = 'line';
+				if (this.drawState==2 && this.needLine) {
+					name = 'centerLine'
+				}
+				let line = new Kinetic.Line({
+					x: 0,
+					points: points,
+					tension: 0.5,
+					closed: false,
+					stroke: 'rgb('+col+')',
+					strokeWidth: 3,
+					name: name
+				});
+				
+				return line
+            },
+            drawRect: function (start,end,color) {
+				 let points ;
+				if (start==='morePoints') {
+					points = end
+				} else {
+					points = [start.x,start.y,start.x,end.y,end.x,end.y,end.x,start.y]
+				}
+                let rect = new Kinetic.Line({
+					x: 0,
+					points: points,
+					// tension: 0.5,
+					closed: true,
+					stroke: 'rgb('+color+')',
+					strokeWidth: 3,
+                    name:'rect',
+					fill:'rgba('+color+',0.3)',
+				});
+				
+				return rect
+            },
+            changeRect: function (evt) {
+                let rects = evt.target.getParent().get('.rect')
+				let cirs = evt.target.getParent().get('.circle')
+				let points = []
+                cirs.forEach((ele)=>{
+                   points.push(ele.attrs.x)
+                   points.push(ele.attrs.y)
+				})
+				  
+                this.selectedShape.attrs.points = points
+                this.layers[this.drawState].draw()
+            },
+			
+			delShape: function() {
+                if (!this.selectedShape) {
+					return
+				}
+				this.selectedShape.destroy()
+				this.selectedShape = null
+				this.cancleSelectedGroup()
+			},
+			save: function() {
+				let points = this.testLayer.get('.rect')[0].attrs.points
+				let ary = []
+				for (let i = 0; i < points.length; i+=2) {
+					const x = points[i];
+					const y = points[i+1];
+					ary.push('x='+(x/800).toFixed(6)+',y=' + (y/500).toFixed(6))
+				}
+				this.roiBody = {
+					roi  : {
+						type: 3,
+						points: {
+							point: ary
+						}
+					}
+				}
+				this.XMLStr = this.oParse.writeXML({
+					roilist: this.roiBody
+				})
+				console.log(this.roiBody)
+				return this.oParse.writeXML({RoiSettings: this.roiBody})
+			},
+			clear: function () {	
+				this.drawState = -1,
+                this.needRect = false,
+				this.needLine = false
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	button {
+		width: 10%;
+	}
+	
+	.modal-title {
+		float: left;
+		width: 93%;
+		overflow: hidden;
+	}
+	
+	.settingZone {
+		width: 100px;
+		float:left;
+		margin-right: 15px;
+	}
+	
+	.settingZone>button {
+		width: 100px;
+	}
+	
+	.modal-body {
+		height: 540px!important;
+		padding-left: 3%;
+	}
+	.modal-editbox{
+		width: 100%;
+		margin-bottom: 10px;
+		text-align: center;
+	}
+	.modal-editboxbutton {
+		width: 12%;
+		margin:0 1%
+	}
+	.modal-editboxbutton.active {
+        background: #145B93!important
+    }
+	.modal-left {
+		float: left;
+		min-height: 350px;
+		width: 15%;
+		color: #fff;
+		padding-top:40px
+	}
+	.modal-right {
+		position: relative;
+		float: left;
+		text-align: center;
+	}
+	
+	.modal-left button {
+		display: block;
+		margin: 10px;
+	}
+	
+	.modal-editboxbutton {
+		width: 120px;
+	}
+	
+	.modal-lb button {
+		width: 100px;
+	}
+	
+	.pic {
+		position: absolute;
+		top: 0;
+		left: 0;
+	}
+	
+	.pic img {
+		width: 800px;
+		height: 500px;
+		margin: 0;
+		padding: 0;
+	}
+</style>
\ No newline at end of file

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

+<template>
+  <div class="modal-body">
+    <div class="modal-lt">
+      <button v-for="(item,index) in typeData" :class="{'curmodal':index==cindex}" @click="changeLayer(index)" :key="index">{{item}}</button>
+    </div>
+    <div class="modal-left">
+      <div class="modal-lb" id="edit_list" v-if="drawState!=-1">
+        <el-radio-group v-model="canvasState" @change='changeCanvasState' :disabled='needLine||needRect'>
+          <el-radio-button :label="1">添加</el-radio-button>
+          <el-radio-button :label="0">编辑</el-radio-button>
+        </el-radio-group>
+        <div v-if="!canvasState">
+          <button @click='delShape' class="delbtn">删除</button>
+        </div>
+      </div>
+    </div>
+    <div class="modal-right">
+      <div class="pic" :style="{ backgroundImage: 'url('+ bgUrl +')', backgroundRepeat: 'no-repeat' }"><img :src="bgUrl" id='bg' /></div>
+      <div id='flowCanvas'></div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import LightCanvas from "./LightCanvas";
+  export default {
+    name: "zoneSetting",
+    data() {
+      return {
+        color: ["222,50,212", "24,0,254", "0,254,137", "255,255,0", "138,43,226"],
+        typeData:['预览','设置检测区域','设置方向线','设置进入线'],
+        drawState: -1,
+        roadFlag: true,
+        needRect: false,
+        canvasState: 0,
+        needLine: false,
+        layers: [],
+        roiBody: {},
+        XMLStr: "",
+        cindex:0
+      };
+    },
+    props: ["bgUrl"],
+    components: {
+      LightCanvas
+    },
+    methods: {
+      stageInit: function(params) {
+        console.log("init");
+        document.getElementsByClassName("pic")[0].style.background =
+          'url("' + this.bgUrl + '") no-repeat';
+        document.getElementsByClassName("pic")[0].style.backgroundSize = "cover";
+        this.stage = new Kinetic.Stage({
+          container: "flowCanvas", //<div>的id
+          width: 800, //创建的舞台宽度
+          height: 500 //创建的舞台高度
+        });
+        this.shadowLayer = new Kinetic.Layer({
+          id: "shadowLayer"
+        });
+        this.testLayer = new Kinetic.Layer({
+          id: "testLayer",
+          name: "layer"
+        });
+        this.inLayer = new Kinetic.Layer({
+          id: "inLayer",
+          name: "layer"
+        });
+        this.dirLayer = new Kinetic.Layer({
+          id: "dirLayer",
+          name: "layer"
+        });
+        let shadow = new Kinetic.Rect({
+          x: 0, //矩形左上角x坐标
+          y: 0, //矩形左上角y坐标
+          width: 800, //矩形的宽度
+          height: 500, //矩形的高度
+          fill: "rgba(255,255,255,.2)", //矩形的填充色
+          stroke: "black", //矩形边缘线的颜色
+          strokeWidth: 3 //矩形边缘线的宽度
+        });
+        let that = this;
+        this.stage.on("click", function(evt) {
+          that.stageClick(evt, this);
+        });
+        this.stage.on("mousemove", function(evt) {
+          that.stageMouseMove(evt, this);
+        });
+        this.shadowLayer.add(shadow);
+        this.stage.add(this.shadowLayer);
+        this.stage.add(this.testLayer);
+        this.stage.add(this.inLayer);
+        this.stage.add(this.dirLayer);
+        this.layers = [this.testLayer, this.dirLayer, this.inLayer];
+      },
+      configInit: function(xml) {
+        if (!xml) {
+          return
+        }
+        let passengerObj = this.oParse.parseXML(xml).RoiSettings.Rules_0;
+        //检测区域
+        let testPoints = [
+          passengerObj.Polygon_0.Point_0.split(",")[0].split("=")[1] * 8,
+          passengerObj.Polygon_0.Point_0.split(",")[1].split("=")[1] * 5,
+          passengerObj.Polygon_0.Point_1.split(",")[0].split("=")[1] * 8,
+          passengerObj.Polygon_0.Point_1.split(",")[1].split("=")[1] * 5,
+          passengerObj.Polygon_0.Point_2.split(",")[0].split("=")[1] * 8,
+          passengerObj.Polygon_0.Point_2.split(",")[1].split("=")[1] * 5,
+          passengerObj.Polygon_0.Point_3.split(",")[0].split("=")[1] * 8,
+          passengerObj.Polygon_0.Point_3.split(",")[1].split("=")[1] * 5
+        ];
+
+        let rect = this.drawRect("morePoints", testPoints, this.color[0]);
+        this.testLayer.add(rect);
+        //方向线
+        try {
+          let dirStart = [
+            passengerObj.DirectLine_0.StartPoint.split(",")[0].split("=")[1] * 8,
+            passengerObj.DirectLine_0.StartPoint.split(",")[1].split("=")[1] * 5
+          ];
+          let dirEnd = [
+            passengerObj.DirectLine_0.EndPoint.split(",")[0].split("=")[1] * 8,
+            passengerObj.DirectLine_0.EndPoint.split(",")[1].split("=")[1] * 5
+          ];
+          let dirLine = this.drawLine(
+            { x: dirStart[0], y: dirStart[1] },
+            { x: dirEnd[0], y: dirEnd[1] },
+            this.color[1]
+          );
+          let dirGroup = new Kinetic.Group({ name: "arr" });
+          this.drawArrow(
+            dirStart,
+            dirEnd,
+            30,
+            20,
+            3,
+            this.color[1],
+            this.dirLayer,
+            dirGroup,
+            dirLine
+          );
+        } catch (err) {}
+
+        //进入线
+        try {
+          let inStart = [
+            passengerObj.InLine_0.Point_0.split(",")[0].split("=")[1] * 8,
+            passengerObj.InLine_0.Point_0.split(",")[1].split("=")[1] * 5
+          ];
+          let inEnd = [
+            passengerObj.InLine_0.Point_1.split(",")[0].split("=")[1] * 8,
+            passengerObj.InLine_0.Point_1.split(",")[1].split("=")[1] * 5
+          ];
+          let inLine = this.drawLine(
+            { x: inStart[0], y: inStart[1] },
+            { x: inEnd[0], y: inEnd[1] },
+            this.color[2]
+          );
+          let inGroup = new Kinetic.Group({ name: "arr" });
+          this.drawArrow(
+            inStart,
+            inEnd,
+            30,
+            20,
+            3,
+            this.color[2],
+            this.inLayer,
+            inGroup,
+            inLine
+          );
+        } catch (error) {}
+
+        if (passengerObj.NumberOfInLine == "2") {
+          let inStart1 = [
+            passengerObj.InLine_1.Point_0.split(",")[0].split("=")[1] * 8,
+            passengerObj.InLine_1.Point_0.split(",")[1].split("=")[1] * 5
+          ];
+          let inEnd1 = [
+            passengerObj.InLine_1.Point_1.split(",")[0].split("=")[1] * 8,
+            passengerObj.InLine_1.Point_1.split(",")[1].split("=")[1] * 5
+          ];
+          let inLine1 = this.drawLine(
+            { x: inStart1[0], y: inStart1[1] },
+            { x: inEnd1[0], y: inEnd1[1] },
+            this.color[2]
+          );
+          let inGroup1 = new Kinetic.Group({ name: "arr" });
+          this.drawArrow(
+            inStart1,
+            inEnd1,
+            30,
+            20,
+            3,
+            this.color[2],
+            this.inLayer,
+            inGroup1,
+            inLine1
+          );
+        }
+        this.stage.draw();
+      },
+      changeLayer: function(index) {
+        this.cindex = index;
+        if (this.needRect || this.needLine) {
+          let shape = this.needRect ? "区域" : "线段";
+          this.$message({
+            type: "error",
+            message: "当前" + shape + "配置未完成"
+          });
+          return;
+        }
+        this.layers.forEach(ele => {
+          ele.setVisible(false);
+        });
+        this.selectedShape = null;
+        if (this.drawState != -1) {
+          this.cancleSelectedGroup();
+        }
+        this.canvasState = 0;
+        this.drawState = index - 1;
+        if (this.drawState == -1) {
+          this.layers.forEach(ele => {
+            ele.setVisible(true);
+          });
+          this.stage.draw();
+        }
+        if (index) {
+          if (this.drawState == 2) {
+            this.layers[0].setVisible(true);
+          }
+          this.layers[this.drawState].setVisible(true);
+          this.layers[this.drawState].draw();
+        }
+      },
+      changeCanvasState: function() {
+        if (this.canvasState) {
+          this.cancleSelectedGroup();
+        }
+        this.selectedShape = null;
+      },
+      stageClick: function(evt, box) {
+        if (this.drawState == -1) {
+          this.$message({
+            type: "info",
+            message: "预览模式下无法操作！"
+          });
+          return;
+        }
+        if (this.canvasState) {
+          this.addShape(evt);
+        } else {
+          this.cancleSelectedGroup();
+          if (this.drawState == 2 && evt.target.attrs.name == "rect") {
+            return;
+          }
+          if (evt.target.className != "Rect") {
+            this.makeSelectedGroup(evt.target);
+          }
+        }
+      },
+      addShape: function(evt) {
+        let pos = {
+          x: evt.evt.offsetX,
+          y: evt.evt.offsetY
+        };
+        let layer = this.layers[this.drawState];
+        switch (this.drawState) {
+          case 0:
+            if (layer.get(".rect").length && !this.needRect) {
+              this.$message({
+                type: "error",
+                message: "只允许设置一个检测区域"
+              });
+              return;
+            }
+            break;
+          case 1:
+            if (layer.get(".arr").length) {
+              this.$message({
+                type: "error",
+                message: "只允许设置一条方向线"
+              });
+              return;
+            }
+            break;
+          case 2:
+            if (layer.get(".arr").length > 1) {
+              this.$message({
+                type: "error",
+                message: "最多允许设置两条条进入线"
+              });
+              return;
+            }
+            break;
+        }
+        this.startChangeShape(pos, layer, this.color[this.drawState]);
+      },
+      makeSelectedGroup: function(shape) {
+        if (this.drawState != 0) {
+          let parShape = shape.getParent();
+          this.layers[this.drawState].add(shape);
+          parShape.destroy();
+        }
+        this.selectedShape = shape;
+        //xieminghui
+        console.log("selected");
+        this.roadFlag = false;
+        //xieminghui end
+        let points = shape.attrs.points;
+        for (let i = 0; i < points.length; i += 2) {
+          const pos = {
+            x: points[i],
+            y: points[i + 1]
+          };
+          let cir = this.drawCircle(pos, this.color[this.drawState], 5);
+          this.layers[this.drawState].add(cir);
+        }
+        this.layers[this.drawState].draw();
+      },
+      cancleSelectedGroup: function(isdel) {
+        if (!this.selectedShape) return;
+        let cirs = this.layers[this.drawState].get(".circle");
+        for (let i = 0; i < cirs.length; i++) {
+          const cir = cirs[i];
+          cir.destroy();
+        }
+        if (this.drawState != 0 && !isdel) {
+          console.log(this.selectedShape);
+          let group = new Kinetic.Group({
+            name: "arr"
+          });
+          let points = this.selectedShape.attrs.points;
+          this.drawArrow(
+            [points[0], points[1]],
+            [points[2], points[3]],
+            30,
+            20,
+            3,
+            this.color[this.drawState],
+            this.layers[this.drawState],
+            group,
+            this.selectedShape
+          );
+        }
+        this.selectedShape = null;
+        this.layers[this.drawState].draw();
+        //xieminghui
+        this.roadFlag = true;
+        console.log("cancel");
+        //xieminghui end
+      },
+      startChangeShape: function(pos, layer, col) {
+        if (this.drawState == 0) {
+          if (!this.needRect) {
+            this.needRect = true;
+            let rect = this.drawRect(pos, pos, col);
+            rect.moveToBottom();
+            layer.add(rect);
+          } else {
+            this.endChangeShape(layer, pos);
+          }
+        } else {
+          let ary = layer.get(".circle");
+          if (ary.length == 0 && !this.needLine) {
+            let circle = this.drawCircle(pos, "transparent");
+            layer.add(circle);
+            this.needLine = true;
+            let line = this.drawLine(pos, pos, col);
+            this.curShape = line;
+            layer.add(line);
+          } else {
+            this.endChangeShape(layer, pos);
+          }
+        }
+        layer.draw();
+      },
+      stageMouseMove: function(evt) {
+        if (!this.needLine && !this.needRect) return;
+        let pos = {
+          x: evt.evt.offsetX,
+          y: evt.evt.offsetY
+        };
+        let layer = this.layers[this.drawState];
+        if (this.needLine) {
+          let lines = layer.get(".line");
+
+          lines[lines.length - 1].attrs.points[2] = pos.x;
+          lines[lines.length - 1].attrs.points[3] = pos.y;
+        } else if (this.needRect) {
+          let rects = layer.get(".rect");
+          let rect = rects[rects.length - 1];
+          rect.moveToBottom();
+          rect.attrs.points[3] = pos.y;
+          rect.attrs.points[4] = pos.x;
+          (rect.attrs.points[5] = pos.y), pos;
+          rect.attrs.points[6] = pos.x;
+          this.curShape = rect;
+        }
+        layer.draw();
+      },
+      endChangeShape: function(layer, pos) {
+        console.log("end");
+
+        if (this.needLine) {
+          this.needLine = false;
+
+          let start = layer.get(".circle")[0];
+          let x = start.attrs.x;
+          let y = start.attrs.y;
+          start.destroy();
+          let group = new Kinetic.Group({
+            name: "arr"
+          });
+          let lines = layer.get(".line");
+          let line = lines[lines.length - 1];
+
+          this.drawArrow(
+            [x, y],
+            [pos.x, pos.y],
+            30,
+            20,
+            3,
+            this.color[this.drawState],
+            layer,
+            group,
+            line
+          );
+        } else {
+          this.needRect = false;
+        }
+      },
+      drawCircle: function(pos, col, r) {
+        let size = r || 2;
+        let circle = new Kinetic.Circle({
+          x: pos.x,
+          y: pos.y,
+          fill: "rgb(" + col + ")",
+          radius: size,
+          name: "circle",
+          draggable: true
+        });
+
+        circle.on("dragmove", evt => {
+          if (this.canvasState) return;
+          evt.cancelBubble = true;
+          this.changeRect(evt);
+        });
+
+        return circle;
+      },
+      drawLine: function(start, end, col, width) {
+        let points = [start.x, start.y, end.x, end.y];
+        let name = "line";
+        let size = width || 4;
+        let line = new Kinetic.Line({
+          x: 0,
+          points: points,
+          tension: 0.5,
+          closed: false,
+          stroke: "rgb(" + col + ")",
+          strokeWidth: size,
+          name: name
+        });
+
+        return line;
+      },
+      drawRect: function(start, end, color) {
+        let points;
+        if (start === "morePoints") {
+          points = end;
+        } else {
+          points = [
+            start.x,
+            start.y,
+            start.x,
+            end.y,
+            end.x,
+            end.y,
+            end.x,
+            start.y
+          ];
+        }
+        let rect = new Kinetic.Line({
+          x: 0,
+          points: points,
+          // tension: 0.5,
+          closed: true,
+          stroke: "rgb(" + color + ")",
+          strokeWidth: 3,
+          name: "rect",
+          fill: "rgba(" + color + ",0.3)"
+        });
+
+        return rect;
+      },
+      changeRect: function(evt) {
+        let rects = evt.target.getParent().get(".rect");
+        let cirs = evt.target.getParent().get(".circle");
+        let points = [];
+        cirs.forEach(ele => {
+          points.push(ele.attrs.x);
+          points.push(ele.attrs.y);
+        });
+
+        this.selectedShape.attrs.points = points;
+        this.layers[this.drawState].draw();
+      },
+      drawArrow: function(
+        c1,
+        c2,
+        theta,
+        headlen,
+        width,
+        color,
+        layer,
+        group,
+        line
+      ) {
+        theta = typeof theta != "undefined" ? theta : 30;
+        headlen = typeof theta != "undefined" ? headlen : 10;
+        width = typeof width != "undefined" ? width : 1;
+        color = typeof color != "color" ? color : "#000";
+
+        // 计算各角度和对应的P2,P3坐标
+        var angle = Math.atan2(c1[1] - c2[1], c1[0] - c2[0]) * 180 / Math.PI,
+          angle1 = (angle + theta) * Math.PI / 180,
+          angle2 = (angle - theta) * Math.PI / 180,
+          topX = headlen * Math.cos(angle1),
+          topY = headlen * Math.sin(angle1),
+          botX = headlen * Math.cos(angle2),
+          botY = headlen * Math.sin(angle2);
+
+        var arrowX = c1[0] - topX,
+          arrowY = c1[1] - topY;
+        arrowX = c2[0] + topX;
+        arrowY = c2[1] + topY;
+
+        let line1 = this.drawLine(
+          { x: c2[0], y: c2[1] },
+          { x: arrowX, y: arrowY },
+          color,
+          3
+        );
+        arrowX = c2[0] + botX;
+        arrowY = c2[1] + botY;
+
+        let line2 = this.drawLine(
+          { x: c2[0], y: c2[1] },
+          { x: arrowX, y: arrowY },
+          color,
+          3
+        );
+        group.add(line);
+        group.add(line1);
+        group.add(line2);
+        layer.add(group);
+        layer.draw();
+      },
+
+      delShape: function() {
+        if (!this.selectedShape) {
+          return;
+        }
+        this.selectedShape.destroy();
+        this.cancleSelectedGroup(true);
+        this.selectedShape = null;
+      },
+
+      save: function() {
+        if (!this.testLayer.get(".rect")[0]) {
+          if (this.dirLayer.get(".arr").length != 0) {
+            return 'dir'
+          }else if (this.inLayer.get(".arr").length !=0) {
+            return 'in'
+          }else return
+        }
+        let testPoints = this.testLayer.get(".rect")[0].attrs.points;
+        let dirPoints = this.dirLayer.get(".arr");
+        let inLines = this.inLayer.get(".arr");
+        this.roiBody = {
+          RoiType: 2,
+          NumberOfRules: 1,
+          Rules_0: {
+            NumberOfPolygon: 1,
+            Polygon_0: {
+              NumberOfPoints: 4,
+              Point_0:
+                "x=" +
+                (testPoints[0] / 8).toFixed(0) +
+                ",y=" +
+                (testPoints[1] / 5).toFixed(0),
+              Point_1:
+                "x=" +
+                (testPoints[2] / 8).toFixed(0) +
+                ",y=" +
+                (testPoints[3] / 5).toFixed(0),
+              Point_2:
+                "x=" +
+                (testPoints[4] / 8).toFixed(0) +
+                ",y=" +
+                (testPoints[5] / 5).toFixed(0),
+              Point_3:
+                "x=" +
+                (testPoints[6] / 8).toFixed(0) +
+                ",y=" +
+                (testPoints[7] / 5).toFixed(0)
+            },
+            NumberOfDirectLine: 0,
+            DirectLine_0: {},
+            NumberOfInLine: inLines.length,
+            InLine_0: {},
+            InLine_1: {},
+            MaxAngle: 80,
+            CountType: 0
+          }
+        };
+        if (dirPoints.length) {
+          this.roiBody.Rules_0.NumberOfDirectLine = 1;
+          const point = dirPoints[0].children[0].attrs.points;
+          this.roiBody.Rules_0.DirectLine_0 = {
+            StartPoint:
+              "x=" +
+              (point[0] / 8).toFixed(0) +
+              ",y=" +
+              (point[1] / 5).toFixed(0),
+            EndPoint:
+              "x=" + (point[2] / 8).toFixed(0) + ",y=" + (point[3] / 5).toFixed(0)
+          };
+        }
+        if (inLines.length == 2) {
+          this.roiBody.Rules_0.InLine_1 = {
+            NumberOfInPoints: 2,
+            Point_0:
+              "x=" +
+              (inLines[1].children[0].attrs.points[0] / 8).toFixed(0) +
+              ",y=" +
+              (inLines[1].children[0].attrs.points[1] / 5).toFixed(0),
+            Point_1:
+              "x=" +
+              (inLines[1].children[0].attrs.points[2] / 8).toFixed(0) +
+              ",y=" +
+              (inLines[1].children[0].attrs.points[3] / 5).toFixed(0)
+          };
+        } else if (inLines.length == 1) {
+          this.roiBody.Rules_0.InLine_0 = {
+            NumberOfInPoints: 2,
+            Point_0:
+              "x=" +
+              (inLines[0].children[0].attrs.points[0] / 8).toFixed(0) +
+              ",y=" +
+              (inLines[0].children[0].attrs.points[1] / 5).toFixed(0),
+            Point_1:
+              "x=" +
+              (inLines[0].children[0].attrs.points[2] / 8).toFixed(0) +
+              ",y=" +
+              (inLines[0].children[0].attrs.points[3] / 5).toFixed(0)
+          };
+        }
+        console.log(this.roiBody);
+        return this.oParse.writeXML({ RoiSettings: this.roiBody });
+      },
+      clear: function() {
+        (this.drawState = -1), (this.needRect = false), (this.needLine = false);
+      }
+    }
+  };
+</script>
+
+<style scoped>
+button {
+  width: 10%;
+}
+
+.modal-title {
+  float: left;
+  width: 93%;
+  overflow: hidden;
+}
+
+.settingZone {
+  width: 100px;
+  float: left;
+  margin-right: 15px;
+}
+
+.settingZone > button {
+  width: 100px;
+}
+
+.modal-body {
+  height: 540px !important;
+  padding-left: 3%;
+}
+.modal-editbox{
+  width: 100%;
+  margin-bottom: 10px;
+  text-align: center;
+}
+.modal-editboxbutton {
+  width: 12%;
+  margin: 0 1%;
+}
+.modal-editboxbutton.active {
+  background: #145b93 !important;
+}
+.modal-left {
+  float: left;
+  min-height: 350px;
+  width: 15%;
+  color: #fff;
+  padding-top: 40px;
+}
+.modal-right {
+  position: relative;
+  float: left;
+  text-align: center;
+  width: 80%;
+}
+
+.modal-left button {
+  display: block;
+  margin: 10px;
+}
+
+.modal-editboxbutton {
+  width: 120px;
+}
+
+.modal-lb button {
+  width: 100px;
+}
+
+.pic {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.pic img {
+  width: 800px;
+  height: 500px;
+  margin: 0;
+  padding: 0;
+}
+</style>
\ No newline at end of file

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

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

+<template>
+  <div class="modal-body">
+    <div class="modal-lt">
+      <button v-for="(item,index) in typeData" :class="{'curmodal':index==cindex}" @click="changeLayer(index)" :key="index">{{item}}</button>
+    </div>
+    <div class="modal-left">
+      <div class=""  v-if="(drawState==10||drawState==11||drawState==12)&&!canvasState&&selectedShape">
+				<div class="other-info">
+					<span>ID:</span><el-input class="info" disabled v-model="area_id"></el-input>
+				</div>
+				<div class="other-info">
+					<span>名称:</span><el-input class="info" disabled v-model="area_name"></el-input>
+				</div>
+			</div>
+      <div class="modal-lb" id="edit_list" v-if="drawState!=-1">
+        <el-radio-group v-model="canvasState" @change='changeCanvasState' :disabled='needLine||needRect'>
+          <el-radio-button :label="1">添加</el-radio-button>
+          <el-radio-button :label="0">编辑</el-radio-button>
+        </el-radio-group>
+        <div v-if="!canvasState">
+          <button @click='delShape' class="delbtn">删除</button>
+        </div>
+      </div>
+    </div>
+    <div class="modal-right">
+      <div class="pic"><img :src="bgUrl" id='bg' /></div>
+      <div id='traficCanvas'></div>
+    </div>
+    <div class='clear'></div>
+    <div id="line_type" class="littleModel BR active" v-if="smallWindow">
+      <div>
+        <p>线属性</p>
+        <div class='item'>
+        <div v-if="drawState==0">
+          	<span>类型：</span>
+            <el-select v-model="markLineType">
+              <el-option value="0" label="单向线"></el-option>
+              <el-option value="1" label="双线线"></el-option>
+            </el-select>
+          </div>
+					<div  v-if="drawState==1">
+						<span>类型：</span>
+            <el-select v-model="markLineType" v-if="drawState==1">
+              <el-option value="2" label="内到外"></el-option>
+              <el-option value="3" label="外到内"></el-option>
+            </el-select>
+					</div>
+					<div class="areaset" v-if="drawState==10 || drawState==11||drawState==12">
+						<div>
+							<span>区域ID：</span><el-input v-model="area_id"></el-input>
+						</div>
+						<div>
+							<span>区域名称:</span><el-input v-model="area_name"></el-input>
+						</div>
+					</div>
+      </div>
+      </div>
+      <div>
+        <button @click="lineTypeCancel">取消</button>
+        <button @click="lineTypeBtn">确定</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'zoneSetting',
+    data() {
+      return {
+        color: ["222,50,212", "24,0,254", "0,254,137", "255,255,0", "138,43,226", "31,151,181", "241,31,8", "0,255,0",
+          "125,125,255", "200,225,255",'192,161,96','235,27,37','27,177,235'
+        ],
+				drawState: -1,
+				cindex:0,
+        typeData: ['预览', '拌线', '区域入侵', '摆摊', '黑摩的', '奔跑', '人群聚集', '安全帽', '脱岗', '打架', '人脸','物品遗留','物品丢失','跨域闸机'],
+        lineRadioStyle: {
+          color: '#fff',
+          width: '40px',
+          margin: '10px 15px',
+        },
+        canvasState: 0,
+        leftType: 0,
+        needRect: false,
+        needLine: false,
+        smallWindow: false,
+        lightShootState: 0,
+        layers: [],
+        selectedShape: null,
+        markLineType: null,
+        roiBody: [],
+        area_id:'',
+				area_name:'',
+        XMLStr: ''
+      }
+    },
+    props: ['bgUrl'],
+    methods: {
+      stageInit: function (params) {
+        document.getElementsByClassName('pic')[0].style.background = 'url("' + this.bgUrl + '") no-repeat';
+        document.getElementsByClassName('pic')[0].style.backgroundSize = 'cover';
+        console.log('init1')
+        this.stage = new Kinetic.Stage({
+          container: "traficCanvas", //<div>的id 
+          width: 800, //创建的舞台宽度 
+          height: 500 //创建的舞台高度 
+        });
+        this.shadowLayer = new Kinetic.Layer({
+          id: "shadowLayer",
+        });
+        this.banLayer = new Kinetic.Layer({
+          id: "banLayer",
+          name: 'layer'
+        });
+        this.baiLayer = new Kinetic.Layer({
+          id: "baiLayer",
+          name: 'layer'
+        });
+        this.heiLayer = new Kinetic.Layer({
+          id: "heiLayer",
+          name: 'layer'
+        });
+        this.benLayer = new Kinetic.Layer({
+          id: "benLayer",
+          name: 'layer'
+        });
+        this.renLayer = new Kinetic.Layer({
+          id: "renLayer",
+          name: 'layer'
+        });
+        this.anLayer = new Kinetic.Layer({
+          id: "anLayer",
+          name: 'layer'
+        });
+        this.tuoLayer = new Kinetic.Layer({
+          id: "tuoLayer",
+          name: 'layer'
+        });
+        this.quLayer = new Kinetic.Layer({
+          id: "quLayer",
+          name: 'layer'
+        });
+        this.daLayer = new Kinetic.Layer({
+          id: "daLayer",
+          name: 'layer'
+        });
+        this.rlLayer = new Kinetic.Layer({
+          id: "rlLayer",
+          name: 'layer'
+        });
+        	// 物品遗留
+        this.remnantLayer = new Kinetic.Layer({
+          id: "remnantLayer",
+          name: 'layer'
+        });
+				// 物品丢失
+        this.loseLayer = new Kinetic.Layer({
+          id: "loseLayer",
+          name: 'layer'
+        });
+				// 跨域闸机
+        this.gateLayer = new Kinetic.Layer({
+          id: "gateLayer",
+          name: 'layer'
+        });
+        let shadow = new Kinetic.Rect({
+          x: 0, //矩形左上角x坐标 
+          y: 0, //矩形左上角y坐标 
+          width: 800, //矩形的宽度 
+          height: 500, //矩形的高度 
+          fill: 'rgba(255,255,255,.2)', //矩形的填充色 
+          stroke: "black", //矩形边缘线的颜色
+          strokeWidth: 3 //矩形边缘线的宽度
+        });
+        let that = this
+        this.stage.on('click', function (evt) {
+          that.stageClick(evt)
+        })
+        this.stage.on('dblclick', function (evt) {
+          if (that.polyline) {
+            let pos = {
+              x: evt.evt.offsetX,
+              y: evt.evt.offsetY
+            }
+            that.lineStop(that.layers[1], pos)
+            that.smallWindow = true
+          }
+        })
+        this.stage.on('mousemove', function (evt) {
+          that.stageMouseMove(evt)
+        });
+        this.shadowLayer.add(shadow)
+        this.stage.add(this.shadowLayer)
+        this.stage.add(this.banLayer)
+        this.stage.add(this.baiLayer)
+        this.stage.add(this.heiLayer)
+        this.stage.add(this.benLayer)
+        this.stage.add(this.renLayer)
+        this.stage.add(this.anLayer)
+        this.stage.add(this.tuoLayer)
+        this.stage.add(this.quLayer)
+        this.stage.add(this.daLayer)
+        this.stage.add(this.rlLayer)
+        this.stage.add(this.remnantLayer)
+				this.stage.add(this.loseLayer)
+				this.stage.add(this.gateLayer)
+        this.layers = [this.banLayer, this.quLayer, this.baiLayer, this.heiLayer, this.benLayer, this.renLayer, this.anLayer,
+          this.tuoLayer, this.daLayer, this.rlLayer,this.remnantLayer,this.loseLayer,this.gateLayer
+        ]
+      },
+      configInit: function (xml) {
+        let obj = this.oParse.parseXML(xml).root.roilist
+        let that = this;
+        if (!obj.length) {
+          obj = [obj]
+        }
+        for (let i = 0; i < obj.length; i++) {
+          const ele = obj[i];
+          let index = 0;
+          try {
+            let roiAry = ele.roi
+            if (!roiAry.length) {
+              roiAry = [roiAry]
+            }
+            switch (ele.algotype) {
+              case '0':
+                index = parseInt(roiAry[0].type) < 2 ? 0 : 1
+                break;
+              case '20':
+                index = 2
+                break;
+              case '19':
+                index = 3
+                break;
+              case '5':
+                index = 4
+                break;
+              case '32':
+                index = 5
+                break;
+              case '33':
+                index = 6
+                break;
+              case '4':
+                index = 8
+                break;
+              case '55':
+                index = 7
+              case '22':
+                index = 9
+                break;
+              	case '34':
+                index = 10
+                break;
+							case '35':
+                index = 11
+                break;
+							case '36':
+								index = 12
+                break;
+            }
+            let layer = this.layers[index]
+            roiAry.forEach((ele) => {
+              let points = ele.points.point
+              let morePoints = []
+              points.forEach((el) => {
+                let xy = el.split(',')
+                morePoints.push(xy[0].split('=')[1] * 800)
+                morePoints.push(xy[1].split('=')[1] * 500)
+              })
+              if (index == 0) {
+                let line = this.drawLine('morePoints', morePoints, this.color[index])
+                let group = new Kinetic.Group({
+                  name: 'arr'
+                })
+                line.line_type = ele.type
+                this.drawArrow([morePoints[0], morePoints[1]], [morePoints[2], morePoints[3]], 30, 10, 3, '0,0,0',
+                  this.banLayer, group, line)
+              } else {
+                let rect = this.drawRect('morePoints', morePoints, this.color[index])
+                if (index == 1) {
+                  rect.line_type = ele.type
+                }
+                if(index == 10 || index == 11 || index == 12) {
+                  rect.id = ele.id
+                  rect.name = ele.name
+                }
+                layer.add(rect)
+                layer.draw()
+              }
+            })
+          } catch (error) {
+            console.log(error)
+            continue
+          }
+        }
+        this.selectedShape = null
+        console.log(this.stage)
+        this.stage.draw()
+      },
+      changeCanvasState: function () {
+        if (this.canvasState) {
+          this.area_id = '';
+					this.area_name = '';
+          this.cancleSelectedGroup()
+        }
+        this.selectedShape = null
+      },
+      changeLayer: function (index) {
+				this.cindex = index;
+        if (this.needRect || this.needLine) {
+          let shape = this.needRect ? '区域' : '线段'
+          this.$message({
+            type: 'error',
+            message: '当前' + shape + '配置未完成'
+          })
+          return
+        }
+        if (this.smallWindow) {
+          this.$message({
+            type: 'error',
+            message: '当前属性配置未完成'
+          })
+          return
+        }
+        this.layers.forEach((ele) => {
+          ele.setVisible(false)
+        })
+        if (this.drawState != -1) {
+          this.cancleSelectedGroup()
+        }
+        this.canvasState = 0
+        this.polyline = 0
+        switch (index - 1) {
+          case -1:
+            this.layers.forEach((ele) => {
+              ele.setVisible(true)
+            })
+            this.stage.draw()
+            break;
+        }
+        this.drawState = index - 1
+        if (this.drawState == 0) {
+          this.markLineType = '0'
+        } else if (this.drawState == 1) {
+          this.markLineType = '2'
+        }
+        if (index) {
+          this.layers[this.drawState].setVisible(true)
+          this.layers[this.drawState].draw()
+        }
+      },
+      stageClick: function (evt) {
+        if (this.drawState == -1) {
+          this.$message({
+            type: 'info',
+            message: '预览模式下无法操作！'
+          })
+          return
+        }
+        if (this.canvasState) {
+          if (this.smallWindow) return
+          this.addShape(evt)
+        } else {
+          this.cancleSelectedGroup()
+          if (evt.target.className != 'Rect') {
+            this.makeSelectedGroup(evt.target)
+          }
+        }
+      },
+      addShape: function (evt) {
+        let pos = {
+          x: evt.evt.offsetX,
+          y: evt.evt.offsetY
+        }
+        let layer = this.layers[this.drawState]
+        let rects = layer.get('.rect')
+        switch (this.drawState) {
+          case 0:
+            this.startChangeShape(pos, layer, this.color[this.drawState])
+            break;
+          case 1:
+            if (rects.length > 3 && !this.needRect) {
+              this.$message({
+                type: 'error',
+                message: '最多设置4个摆摊区域'
+              })
+              return
+            }
+
+            break;
+          case 2:
+
+            break;
+          case 3:
+
+            break;
+          case 4:
+
+            break;
+          case 5:
+
+            break;
+          case 6:
+
+            break;
+          default:
+            break;
+        }
+        if (this.drawState != 0) {
+          if (this.needRect) {
+            if (this.drawState == 1||this.drawState == 10||this.drawState == 11||this.drawState == 12) {
+              this.smallWindow = true
+            }
+            this.needRect = false
+          } else {
+            this.needRect = true
+            this.startChangeShape(pos, layer, this.color[this.drawState])
+          }
+        }
+      },
+      makeSelectedGroup: function (shape) {
+        let points = shape.attrs.points
+        let lineType = shape.line_type
+        let color = this.color[this.drawState]
+        if (this.drawState == 0) {
+          let parShape = shape.getParent()
+          this.layers[this.drawState].add(shape)
+          parShape.destroy()
+        }
+        if(this.drawState == 10||this.drawState == 11||this.drawState == 12){
+					this.area_id =  shape.id
+					this.area_name = shape.name
+				}
+        this.selectedShape = shape
+        for (let i = 0; i < points.length; i += 2) {
+          const pos = {
+            x: points[i],
+            y: points[i + 1]
+          };
+
+          let cir = this.drawCircle(pos, color, 5)
+          this.layers[this.drawState].add(cir)
+        }
+        this.layers[this.drawState].draw()
+      },
+      cancleSelectedGroup: function (isdel) {
+        if (!this.selectedShape) return
+        let cirs = this.layers[this.drawState].get('.circle')
+        for (let i = 0; i < cirs.length; i++) {
+          const cir = cirs[i];
+          cir.destroy()
+        }
+        if (this.drawState == 0 && !isdel) {
+          let group = new Kinetic.Group({
+            name: 'arr'
+          })
+          let points = this.selectedShape.attrs.points
+          this.drawArrow([points[0], points[1]], [points[2], points[3]], 30, 10, 3, '0,0,0', this.banLayer, group,
+            this.selectedShape)
+        }
+        this.selectedShape = null
+        this.layers[this.drawState].draw()
+      },
+      startChangeShape: function (pos, layer, col) {
+        let ary = layer.get('.circle')
+        if (this.drawState == 0) {
+          if (ary.length == 0 && !this.needLine) {
+            let circle = this.drawCircle(pos, 'rgba(255,255,255,.2)')
+            layer.add(circle)
+            this.needLine = true
+            let line = this.drawLine(pos, pos, col)
+            this.selectedShape = line
+            layer.add(line)
+          } else {
+            this.lineStop(layer, pos)
+            this.smallWindow = true
+          }
+        } else {
+          let rect = this.drawRect(pos, pos, col)
+          this.selectedShape = rect
+          rect.moveToBottom()
+          layer.add(rect)
+        }
+        layer.draw()
+      },
+      stageMouseMove: function (evt) {
+        if (!this.needLine && !this.needRect) return
+        let pos = {
+          x: evt.evt.offsetX,
+          y: evt.evt.offsetY
+        }
+        let layer = this.layers[this.drawState]
+        if (this.needLine) {
+          let lines;
+          lines = layer.get('.line')
+          let points = lines[lines.length - 1].attrs.points
+          points[points.length - 2] = pos.x
+          points[points.length - 1] = pos.y
+        } else if (this.needRect) {
+          let rects = layer.get('.rect')
+          let rect = rects[rects.length - 1]
+          rect.moveToBottom()
+          rect.attrs.points[3] = pos.y
+          rect.attrs.points[4] = pos.x
+          rect.attrs.points[5] = pos.y, pos
+          rect.attrs.points[6] = pos.x
+        }
+        layer.draw()
+      },
+      lineStop: function (layer, pos) {
+        this.needLine = false
+        let start = layer.get('.circle')[0]
+        let x = start.attrs.x
+        let y = start.attrs.y
+        start.destroy()
+
+        layer.draw()
+      },
+      drawCircle: function (pos, col, r) {
+        let size = r || 2
+        let circle = new Kinetic.Circle({
+          x: pos.x,
+          y: pos.y,
+          fill: 'rgb(' + col + ')',
+          radius: size,
+          name: 'circle',
+          draggable: true
+        });
+
+        circle.on("dragmove", (evt) => {
+          if (this.canvasState) return
+          evt.cancelBubble = true
+          this.changeRect(evt)
+        })
+        return circle
+      },
+      drawLine: function (start, end, col, width) {
+        let points;
+        if (start === 'morePoints') {
+          points = end
+        } else {
+          points = [start.x, start.y, end.x, end.y]
+        }
+        let name = 'line';
+        let size = width || 4
+
+        let line = new Kinetic.Line({
+          x: 0,
+          points: points,
+          tension: 0,
+          closed: false,
+          stroke: 'rgb(' + col + ')',
+          strokeWidth: size,
+          name: name
+        });
+
+        return line
+      },
+      drawRect: function (start, end, color) {
+        let points;
+        if (start === 'morePoints') {
+          points = end
+        } else {
+          points = [start.x, start.y, start.x, end.y, end.x, end.y, end.x, start.y]
+        }
+        let rect = new Kinetic.Line({
+          x: 0,
+          points: points,
+          // tension: 0.5,
+          closed: true,
+          stroke: 'rgb(' + color + ')',
+          strokeWidth: 4,
+          name: 'rect',
+          fill: 'rgba(' + color + ',0.3)',
+        });
+        return rect
+      },
+      changeRect: function (evt) {
+        let rects = evt.target.getParent().get('.rect')
+        let cirs = evt.target.getParent().get('.circle')
+        let points = []
+        cirs.forEach((ele) => {
+          points.push(ele.attrs.x)
+          points.push(ele.attrs.y)
+        })
+
+        this.selectedShape.attrs.points = points
+        this.layers[this.drawState].draw()
+      },
+      delShape: function () {
+        if (!this.selectedShape) {
+          return
+        }
+        this.selectedShape.destroy()
+        this.cancleSelectedGroup(true)
+        this.selectedShape = null
+      },
+      lineTypeCancel: function () {
+        this.selectedShape.destroy()
+        this.selectedShape = null
+        this.cancleSelectedGroup()
+        this.layers[this.drawState].draw()
+        this.smallWindow = false
+        this.area_id='';
+        this.area_name = '';
+      },
+      lineTypeBtn: function () {
+        this.smallWindow = false
+        let layer = this.layers[this.drawState]
+        if (this.drawState == 0) {
+          let line = this.selectedShape
+          line.line_type = this.markLineType
+          let points = line.attrs.points
+          let group = new Kinetic.Group({
+            name: 'arr'
+          })
+          this.drawArrow([points[0], points[1]], [points[2], points[3]], 30, 10, 3, '0,0,0', layer, group, line)
+          this.markLineType = '0'
+        } else if (this.drawState == 1) {
+          this.selectedShape.line_type = this.markLineType
+          this.markLineType = '2'
+        }else if (this.drawState == 10 || this.drawState == 11 ||this.drawState == 12){
+					this.selectedShape.id = this.area_id;
+          this.selectedShape.name = this.area_name;
+          
+          this.area_id='';
+          this.area_name = '';
+				}
+        this.selectedShape = null
+      },
+      drawArrow: function (c1, c2, theta, headlen, width, color, layer, group, line) {
+        theta = typeof (theta) != 'undefined' ? theta : 30;
+        headlen = typeof (theta) != 'undefined' ? headlen : 10;
+        width = typeof (width) != 'undefined' ? width : 1;
+        color = typeof (color) != 'color' ? color : '#000';
+        //计算中点
+        let c3 = [(c1[0] + c2[0]) / 2, (c1[1] + c2[1]) / 2]
+
+
+        // 计算各角度和对应的P2,P3坐标
+        let angle = Math.atan2(c1[1] - c2[1], c1[0] - c2[0]) * 180 / Math.PI,
+          angle1 = (angle + 90) * Math.PI / 180,
+          angle2 = (angle - 90) * Math.PI / 180,
+          topX = 20 * Math.cos(angle1),
+          topY = 20 * Math.sin(angle1),
+          botX = 20 * Math.cos(angle2),
+          botY = 20 * Math.sin(angle2);
+
+        let arrowTX = c3[0] + topX,
+          arrowTY = c3[1] + topY,
+          arrowBX = c3[0] + botX,
+          arrowBY = c3[1] + botY;
+
+        let arrLine = this.drawLine({
+          x: arrowTX,
+          y: arrowTY
+        }, {
+          x: arrowBX,
+          y: arrowBY
+        }, color, 3);
+
+        angle = Math.atan2(arrowBY - arrowTY, arrowBX - arrowTX) * 180 / Math.PI,
+          angle1 = (angle + theta) * Math.PI / 180,
+          angle2 = (angle - theta) * Math.PI / 180,
+          topX = headlen * Math.cos(angle1),
+          topY = headlen * Math.sin(angle1),
+          botX = headlen * Math.cos(angle2),
+          botY = headlen * Math.sin(angle2);
+
+        let arrowX = arrowTX + topX,
+          arrowY = arrowTY + topY;
+        let line1 = this.drawLine({
+          x: arrowTX,
+          y: arrowTY
+        }, {
+          x: arrowX,
+          y: arrowY
+        }, color, 3)
+
+        arrowX = arrowTX + botX;
+        arrowY = arrowTY + botY;
+        let line2 = this.drawLine({
+          x: arrowTX,
+          y: arrowTY
+        }, {
+          x: arrowX,
+          y: arrowY
+        }, color, 3)
+
+        group.add(line)
+        group.add(arrLine)
+        group.add(line1)
+        group.add(line2)
+
+        if (line.line_type == 1) {
+          angle = Math.atan2(arrowTY - arrowBY, arrowTX - arrowBX) * 180 / Math.PI,
+            angle1 = (angle + theta) * Math.PI / 180,
+            angle2 = (angle - theta) * Math.PI / 180,
+            topX = headlen * Math.cos(angle1),
+            topY = headlen * Math.sin(angle1),
+            botX = headlen * Math.cos(angle2),
+            botY = headlen * Math.sin(angle2);
+
+          let arrowX = arrowBX + topX,
+            arrowY = arrowBY + topY;
+          let line3 = this.drawLine({
+            x: arrowBX,
+            y: arrowBY
+          }, {
+            x: arrowX,
+            y: arrowY
+          }, color, 3)
+
+          arrowX = arrowBX + botX;
+          arrowY = arrowBY + botY;
+          let line4 = this.drawLine({
+            x: arrowBX,
+            y: arrowBY
+          }, {
+            x: arrowX,
+            y: arrowY
+          }, color, 3)
+          group.add(line3)
+          group.add(line4)
+        }
+        this.selectedShape = group
+        layer.add(group)
+        layer.draw()
+      },
+      lightNext: function () {
+        this.childCirAry = this.$refs.lightCanvas.cirAry;
+      },
+      lightLast: function () {
+        let that = this;
+        setTimeout(function () {
+          that.$refs.lightCanvas.cirAry = that.childCirAry;
+          that.$refs.lightCanvas.bgUrl = that.childUrl;
+          that.$refs.lightCanvas.draw()
+        }, 0)
+      },
+      save: function () {
+        this.cancleSelectedGroup()
+        this.roiBody = []
+        try {
+          this.layers.forEach((ele, index) => {
+            let ary = []
+            let shape = index == 0 ? '.arr' : '.rect'
+            let shapes = ele.get(shape)
+            shapes.forEach((el, num) => {
+              let points = index == 0 ? el.children[0].attrs.points : el.attrs.points
+              let pointAry = []
+              for (let i = 0; i < points.length; i += 2) {
+                const point = points[i];
+                pointAry.push('x=' + (point / 800).toFixed(6) + ',y=' + (points[i + 1] / 500).toFixed(6))
+              }
+              let type = index == 0 ? el.children[0].line_type : index == 1 ? el.line_type : '2'
+              if(index == 10 || index == 11 || index == 12) {
+                ary.push({
+                  type: type,
+                  id:el.id,
+                  name:el.name,
+                  points: {
+                    point: pointAry
+                  }
+                })
+              } else {
+                ary.push({
+                  type: type,
+                  points: {
+                    point: pointAry
+                  }
+                })
+              }
+            })
+            if (shapes.length) {
+              let algotype = 0
+              switch (index) {
+                case 0:
+                  algotype = 0
+                  break;
+                case 1:
+                  algotype = 0
+                  break;
+                case 2:
+                  algotype = 20
+                  break;
+                case 3:
+                  algotype = 19
+                  break;
+                case 4:
+                  algotype = 5
+                  break;
+                case 5:
+                  algotype = 32
+                  break;
+                case 6:
+                  algotype = 33
+                  break;
+                case 7:
+                  algotype = 55
+                  break;
+                case 8:
+                  algotype = 4
+                  break;
+                case 9:
+                  algotype = 22
+                  break;
+                case 10:
+                  algotype = 34
+                  break;
+                case 11:
+                  algotype = 35
+                  break;
+                case 12:
+                  algotype = 36
+                  break;
+              }
+              
+              this.roiBody.push({
+                algotype: algotype,
+                roi: ary
+              })
+            }
+          })
+        } catch (error) {
+          console.log(error)
+        }
+
+        return this.oParse.writeXML({
+          root: {
+            roilist: this.roiBody
+          }
+        })
+      },
+      clear: function () {
+        this.drawState = -1,
+          this.smallWindow = false,
+          this.needRect = false,
+          this.needLine = false,
+          this.canvasState = 0;
+      }
+    },
+    mounted() {
+      this.stageInit()
+    }
+  }
+</script>
+
+<style scoped>
+	button {
+		width: 10%;
+	}
+	
+	.modal-title {
+		float: left;
+		width: 93%;
+		overflow: hidden;
+	}
+
+	.modal-body {
+		height: 540px!important;
+	}
+	.modal-lt {
+		width: 100%;
+		margin-bottom: 10px;
+		text-align: center;
+	}
+	.modal-lt button {
+		width: 9%;
+	}
+	.modal-lt button.active {
+        background: #145B93!important
+    }
+	.modal-left {
+		float: left;
+		min-height: 350px;
+		width: 15%;
+		color: #fff;
+		padding-top:40px
+	}
+	.modal-right {
+		position: relative;
+		float: left;
+		text-align: center;
+	}
+	
+	.modal-left button {
+		display: block;
+		margin: 10px;
+	}
+	
+	.modal-lb button {
+		width: 90px;
+		margin-left: 15px
+	}
+	
+	#zone_list button.active {
+		background: #fff;
+		color: #3d6797;
+	}
+	
+	#line_type {
+		display: none;
+		position: fixed;
+		top: 50%;
+		left: 50%;
+		width: 500px;
+		height: 300px;
+		margin-left: -250px;
+		margin-top: -150px;
+		z-index: 52;
+		color: #fff;
+		text-align: center;
+		line-height: 35px;
+		background: #409eff;
+	}
+	
+	#line_type.active {
+		display: block;
+		z-index: 1001;
+		opacity:1
+	}
+	
+	#line_type p {
+		padding: 15px;
+		font-size: 17px;
+		font-weight: bold;
+	}
+	#line_type input {
+		width: 150px;
+	}
+	el-select{
+		width:90px!important
+	}
+	#line_type button {
+		color: #fff;
+		margin: 50px 2%;
+		width: 100px;
+		height: 35px;
+		line-height: 35px;
+		background: #3a51f2;
+		color: #fff;
+		border: 0;
+	}
+	
+	#c1 {
+		position: absolute;
+		top: 0;
+		left: 0;
+	}
+	
+	.pic {
+		position: absolute;
+		top: 0;
+		left: 0;
+	}
+	
+	.pic img {
+		width: 800px;
+		height: 500px;
+		margin: 0;
+		padding: 0;
+        
+	}
+	
+	canvas {
+		margin: 0;
+		padding: 0;
+	}
+	
+	.title {
+		/*background: url('../../../assets/18.png') no-repeat;*/
+		width: 24%;
+		height: 70px;
+		line-height: 50px;
+		margin: 0;
+		margin-left: 3.5%;
+		font-size: 25px;
+		letter-spacing: 10px;
+		display: inline-block;
+	}
+	
+	.shadow {
+		display: none;
+		position: fixed;
+		left: 0;
+		top: 0;
+		z-index: 1000;
+		width: 100%;
+		height: 100%;
+		background: #000;
+		filter: alpha(opacity=50);
+		-moz-opacity: 0.5;
+		opacity: 0.5;
+	}
+	
+	ul {
+		padding: 10px;
+	}
+	
+	li {
+		width: 130px;
+		text-align: center;
+	}
+	
+	.item {
+		width: 50%;
+		margin:0 auto
+	}
+  .areaset>div{
+    width: 100%;
+  }
+	.areaset span {
+		display: inline-block;
+		width: 60px;
+		text-align: right;
+	}
+	.areaset>div>div {
+		display: inline-block;
+		width: 150px;
+    margin-top: 10px;
+	}
+  .other-info {
+		margin-bottom: 10px;
+    color:#333;
+	}
+	.other-info .info{
+		width: 100px;
+
+	}
+	.other-info span{
+		display: inline-block;
+		width: 40px;
+    color: #333;
+	}
+</style>
\ No newline at end of file

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

+<template>
+  <div class="modal-body">
+    <div class="modal-lt">
+       <button v-for="(item,index) in typeData" :class="{'curmodal':index==cindex}" @click="changeLayer(index)" :key="index">{{item}}</button>
+    </div>
+    <div class="modal-editbox">
+      <div class="modal-lb" id="edit_list" v-if="drawState!=-1">
+        <!--<button>加载图片</button>-->
+        <!--<button>修改保存路径</button>-->
+        <!--<button>删除区域</button>-->
+        <el-radio-group v-model="canvasState" @change='changeCanvasState' :disabled='needLine||needRect' v-show="drawState!=2">
+          <el-radio-button :label="1" class="editbtn">
+            <i class="el-icon-circle-plus icon"></i>
+          </el-radio-button>
+          <el-radio-button :label="0" class="editbtn">
+            <i class="el-icon-edit-outline"></i>
+          </el-radio-button>
+        </el-radio-group>
+        <div v-if="!canvasState">
+          <span @click='delShape' class="delbtn editbtn" v-show='drawState!="2"'>
+            <i class="el-icon-delete icon"></i>
+          </span>
+          <el-select v-if='drawState==1&&selectedShape' v-model="markLineType" @change="lineChange">
+            <el-option value="0" label="普通车道线"></el-option>
+            <el-option value="7" label="白实线"></el-option>
+            <el-option value="1" label="黄实线"></el-option>
+            <el-option value="2" label="停止线"></el-option>
+            <el-option value="3" label="左转判定线"></el-option>
+            <el-option value="4" label="右转判定线"></el-option>
+            <el-option value="5" label="直行判定线"></el-option>
+            <el-option value="9" label="左转弯弧度判定线"></el-option>
+          </el-select>
+          <span v-if='drawState==2&&selectedShape'>导向类型</span>
+            <el-select v-if='drawState==2&&selectedShape' v-model="guidingtype">
+              <el-option value="0" label="直行车道"></el-option>
+              <el-option value="1" label="左转车道"></el-option>
+              <el-option value="2" label="右转车道"></el-option>
+              <el-option value="3" label="直左混行"></el-option>
+              <el-option value="4" label="直右混行"></el-option>
+              <el-option value="5" label="左直右混行"></el-option>
+            </el-select>
+           <span v-if='drawState==2&&selectedShape'>使用类型</span>
+            <el-select v-if='drawState==2&&selectedShape' v-model="lanuse">
+              <el-option value="0" label="普通车道"></el-option>
+              <el-option value="1" label="公交车道"></el-option>
+              <el-option value="2" label="应急车道"></el-option>
+              <el-option value="3" label="非机动车道"></el-option>
+              <el-option value="4" label="大货车禁行车道"></el-option>
+              <el-option value="5" label="隔离带"></el-option>
+            </el-select>
+          <span v-if='drawState==2&&selectedShape'>方向</span>
+          <el-select v-if='drawState==2&&selectedShape' v-model="markLineDirect">
+            <el-option value="0" label="去向"></el-option>
+            <el-option value="1" label="来向"></el-option>
+            <el-option value="2" label="双向"></el-option>
+          </el-select>
+          <span v-if='drawState==2&&selectedShape'>车道号</span>
+          <el-input type="number" v-model="lineNum" min='1' v-if='((drawState==1&&(markLineType=="0"||markLineType=="1"||markLineType=="7"))||drawState==2)&&selectedShape'></el-input>
+          <el-select name="" v-model="lightInfo.type" v-if='drawState==3&&selectedShape'>
+            <el-option value="1" label="左转灯"></el-option>
+            <el-option value="2" label="直行灯"></el-option>
+            <el-option value="3" label="左直灯"></el-option>
+            <el-option value="4" label="右转灯"></el-option>
+            <el-option value="6" label="右直灯"></el-option>
+          </el-select>
+          <el-select v-model="lightInfo.distribute" v-if='drawState==3&&selectedShape'>
+            <el-option value="1" label="单眼灯"></el-option>
+            <el-option value="2" label="两眼灯"></el-option>
+            <el-option value="3" label="三眼灯"></el-option>
+          </el-select>
+          <el-select name="" v-model="lightInfo.shap" v-if='drawState==3&&selectedShape'>
+            <el-option value="1" label="圆形"></el-option>
+            <el-option value="2" label="箭头"></el-option>
+            <el-option value="3" label="条形"></el-option>
+          </el-select>
+        </div>
+        <div class="" v-if="!canvasState&&(drawState==6||drawState==7||drawState==8)">
+          <el-input v-model="polygon_id" disabled="disabled" type="text" class="w120" placeholder="区域ID"></el-input>
+          <el-input v-model="polygon_name"  disabled="disabled"  type="text" class="w120 mt10" placeholder="区域名称"></el-input>
+        </div>
+        <div v-if="canvasState" sytle="textAlign:center">
+          <!-- <button>撤销</button> -->
+          <el-radio-group v-model="polyline" @change="polyChang">
+            <el-radio class="radio" :label="0" :style="lineRadioStyle" v-if='drawState==1'>直线</el-radio>
+            <el-radio class="radio" :label="1" :style="lineRadioStyle" v-if='drawState==1'>折线</el-radio>
+          </el-radio-group>
+
+        </div>
+      </div>
+    </div>
+    <div class="modal-right">
+      <div class="pic" id="pic"><img :src="bgUrl" id='bg' /></div>
+      <div id='traficCanvas'></div>
+    </div>
+    <div class='clear'></div>
+    <div id="line_type" class="littleModel BR active" v-if="smallWindow">
+      <div>
+        <p v-if="typeFlag==1">线属性</p>
+        <p v-if="typeFlag==0">车道属性</p>
+        <p v-if="typeFlag==2">灯属性</p>
+        <div class='item'>
+          <span v-if='typeFlag!=3'>类型：</span>
+          <div>
+            <el-select v-if='typeFlag==1' v-model="markLineType">
+              <el-option value="0" label="普通车道线" v-if='!polyline'></el-option>
+              <el-option value="7" label="白实线" v-if='!polyline'></el-option>
+              <el-option value="1" label="黄实线" v-if='!polyline'></el-option>
+              <el-option value="2" label="停止线" v-if='!polyline'></el-option>
+              <el-option value="3" label="左转判定线" v-if='!polyline'></el-option>
+              <el-option value="4" label="右转判定线" v-if='!polyline'></el-option>
+              <el-option value="5" label="直行判定线" v-if='!polyline'></el-option>
+              <el-option value="9" label="左转弯弧度判定线"></el-option>
+            </el-select>
+            <el-select v-if='typeFlag==0' v-model="markLineType">
+              <el-option value="0" label="左转车道"></el-option>
+              <el-option value="1" label="右转车道"></el-option>
+              <el-option value="2" label="直行车道"></el-option>
+              <el-option value="3" label="直左混行"></el-option>
+              <el-option value="4" label="直右混行"></el-option>
+              <el-option value="8" label="公交车道"></el-option>
+              <el-option value="9" label="应急车道"></el-option>
+              <el-option value="10" label="非机动车道"></el-option>
+            </el-select>
+            <el-select name="" v-model="lightInfo.type" v-if='typeFlag==2'>
+              <el-option value="1" label="左转灯"></el-option>
+              <el-option value="2" label="直行灯"></el-option>
+              <el-option value="3" label="左直灯"></el-option>
+              <el-option value="4" label="右转灯"></el-option>
+              <el-option value="6" label="右直灯"></el-option>
+            </el-select>
+          </div>
+        </div>
+        <div class='item' v-if="(typeFlag==1 && (markLineType=='0'||markLineType=='1'||markLineType=='7')) || drawState==2">
+          <span>序号：</span>
+          <div>
+            <el-input type="number" v-model="lineNum" min='1'></el-input>
+          </div>
+        </div>
+        <div v-if="typeFlag==2" class='lightInfo item'>
+          <span>灯眼模式：</span>
+          <div>
+            <el-select v-model="lightInfo.distribute">
+              <el-option value="1" label="单眼灯"></el-option>
+              <el-option value="2" label="两眼灯"></el-option>
+              <el-option value="3" label="三眼灯"></el-option>
+            </el-select>
+          </div>
+        </div>
+        <div v-if="typeFlag==2" class="item">
+          <span>形状：</span>
+          <div>
+            <el-select name="" v-model="lightInfo.shap">
+              <el-option value="1" label="圆形"></el-option>
+              <el-option value="2" label="箭头"></el-option>
+              <el-option value="3" label="条形"></el-option>
+            </el-select>
+          </div>
+        </div>
+        <LightCanvas v-if="typeFlag==3" ref='lightCanvas'></LightCanvas>
+      </div>
+      <div v-if="typeFlag != 3">
+        <button @click="lineTypeCancel">取消</button>
+        <button @click="lightLast" v-if="typeFlag==2">上一步</button>
+        <button @click="lineTypeBtn">确定</button>
+      </div>
+      <div v-if="typeFlag == 3">
+        <button @click="lineTypeCancel">取消</button>
+        <button @click="childCancle" v-if="lightCancle">撤销</button>
+        <button @click="lightNext" v-if="lightNextBtn">下一步</button>
+      </div>
+    </div>
+    <div class="pedestrian-area-attr BR" v-if="curLayerstate">
+      <div class="mt40">
+        <span class="label">ID号:</span>
+        <input type="text" v-model="polygon_id">
+      </div>
+      <div class="mt10">
+        <span class="label">名称:</span>
+        <input type="text"  v-model="polygon_name">
+      </div>
+      <div class="btn-box mt40">
+        <button @click="bicyEnter">确定</button>
+        <button @click="curlayCancel">取消</button>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  import LightCanvas from "./LightCanvas";
+  export default {
+    name: "zoneSetting",
+    data() {
+      return {
+        color: [
+          "222,50,212",
+          "24,0,254",
+          "0,254,137",
+          "255,255,0",
+          "138,43,226",
+          "241,31,8",
+          "31,151,181",
+          '3,65,76',
+          "12,222,235"
+        ], //线颜色
+        typeData:['预览','车牌检测区域','车道标志线','车道属性','红绿灯区域','对向车道','违停区域','行人检测区域','行人密度区域','异物检测区域'],
+        cindex:0,
+        //laneMark:false,
+        drawState: -1, //配置项类型
+        lineRadioStyle: {
+          color: "#fff",
+          width: "40px",
+          margin: "10px 15px"
+        },
+        canvasState: 0, //控制编辑/添加
+        polyline: 0, //控制直线/折线
+        smallWindow: false, //控制属性弹窗
+        lightCancle: false, //控制属性弹窗是否显示撤销按钮
+        lightNextBtn: false, //控制属性弹窗是否显示下一步按钮
+        roadFlag: "", //标记车道线是否有修改
+        needRect: false, //标记是否处于划矩形状态
+        needLine: false, //标记是否处于划线状态
+        lightShootState: 0, //标记选择灯区域截图起止方式，用于放大图片
+        layers: [], //用于记录各个配置项的图层
+        blueLines: [], //记录用于连接车道的车道线
+        greenLines: [], //记录车道中线箭头
+        roads: [],
+        selectedShape: null, //当前选中图形
+        typeFlag: 1, //选择属性弹窗状态
+        lineNum: 1, //车道线/车道序号
+        curLayerstate:false,//行人检测区域属性设置
+        polygon_id:'',//行人检测区域id
+        polygon_name:'',//行人检测区域name
+        markLineType: "0",
+        markLineDirect: "",
+        lanuse:'',//车道属性类型
+        guidingtype:'',//车道导向类型
+        childUrl: "", //红绿灯区域截图
+        scale: {}, //红绿灯区域截图放大倍数
+        lightInfo: {
+          type: "1",
+          distribute: "1",
+          shap: "1"
+        },
+        roiBody: {},
+        XMLStr: ""
+      };
+    },
+    props: ["bgUrl"],
+    components: {
+      LightCanvas
+    },
+    methods: {
+      stageInit: function(params) {
+        console.log("init1");
+        this.drawState = -1;
+        this.stage = new Kinetic.Stage({
+          container: "traficCanvas", //<div>的id
+          width: 800, //创建的舞台宽度
+          height: 500 //创建的舞台高度
+        });
+        this.shadowLayer = new Kinetic.Layer({
+          id: "shadowLayer"
+        });
+        this.testLayer = new Kinetic.Layer({
+          id: "testLayer",
+          name: "layer"
+        });
+        this.lineLayer = new Kinetic.Layer({
+          id: "lineLayer",
+          name: "layer"
+        });
+        this.roadLayer = new Kinetic.Layer({
+          id: "roadLayer",
+          name: "layer"
+        });
+        this.lightLayer = new Kinetic.Layer({
+          id: "lightLayer",
+          name: "layer"
+        });
+        this.subtendLayer = new Kinetic.Layer({
+          id: "subtendLayer",
+          name: "layer"
+        });
+        this.noStopLayer = new Kinetic.Layer({
+          id: "noStopLayer",
+          name: "layer"
+        });
+        this.bicyLayer = new Kinetic.Layer({ //行人检测区域
+          id: "bicyLayer",
+          name: "layer"
+        });
+        this.densityLayer = new Kinetic.Layer({//密度
+          id:'densityLayer',
+          name:"layer"
+        });
+        this.foreignLayer = new Kinetic.Layer({//异物
+          id:'foreignLayer',
+          name:"layer"
+        });
+        let shadow = new Kinetic.Rect({
+          x: 0, //矩形左上角x坐标
+          y: 0, //矩形左上角y坐标
+          width: 800, //矩形的宽度
+          height: 500, //矩形的高度
+          fill: "rgba(255,255,255,.2)", //矩形的填充色
+          stroke: "black", //矩形边缘线的颜色
+          strokeWidth: 3 //矩形边缘线的宽度
+        });
+        let that = this;
+        this.stage.on("click", function(evt) {
+          that.stageClick(evt);
+        });
+        this.stage.on("dblclick", function(evt) {
+          if (that.polyline) {
+            let pos = {
+              x: evt.evt.offsetX,
+              y: evt.evt.offsetY
+            };
+            that.lineStop(that.layers[1], pos);
+            that.smallWindow = true;
+          }
+        });
+        this.stage.on("mousemove", function(evt) {
+          that.stageMouseMove(evt);
+        });
+        this.shadowLayer.add(shadow);
+        this.stage.add(this.shadowLayer);
+        this.stage.add(this.testLayer);
+        this.stage.add(this.lineLayer);
+        this.stage.add(this.roadLayer);
+        this.stage.add(this.lightLayer);
+        this.stage.add(this.bicyLayer);
+        this.stage.add(this.subtendLayer);
+        this.stage.add(this.noStopLayer);
+        this.stage.add(this.densityLayer);
+        this.stage.add(this.foreignLayer);
+        this.layers = [
+          this.testLayer,
+          this.lineLayer,
+          this.roadLayer,
+          this.lightLayer,
+          this.subtendLayer,
+          this.noStopLayer,
+          this.bicyLayer,
+          this.densityLayer,
+          this.foreignLayer
+        ];
+      },
+      //还原配置
+      configInit: function(xml) {
+        let obj = this.oParse.parseXML(xml).roi;
+        let that = this;
+        console.log(obj);
+        //检测区域
+        // console.log(obj)
+        let testAry = obj.flow_roi.flow_region.point;
+        let testRect = [];
+        try {
+          testAry.forEach((ele, index) => {
+            testRect.push(ele.x * 800);
+            testRect.push(ele.y * 500);
+          });
+          let line = this.drawRect("morePoints", testRect, this.color[0]);
+          this.testLayer.add(line);
+        } catch (error) {
+          console.log(error);
+        }
+        //车道线
+        try {
+          console.log(obj.lane_line);
+          let normalLines = obj.lane_line.line;
+          if (!normalLines.length) {
+            normalLines = [normalLines];
+          }
+          normalLines.forEach(ele => {
+            let points = ele.points.point;
+            let lineType = ele.line_type;
+            let color = "24,0,254";
+            console.log(lineType);
+            if (lineType == 1) {
+              color = "255,255,0";
+            } else if (lineType == 2) {
+              color = "255,0,0";
+            } else if (lineType == 7) {
+              color = "255,255,255";
+            } else if (
+              lineType == 3 ||
+              lineType == 4 ||
+              lineType == 5 ||
+              lineType == 9
+            ) {
+              color = "0,255,0";
+            }
+            let ary = [];
+            for (let i = 0; i < points.length; i++) {
+              ary.push(points[i].x * 800);
+              ary.push(points[i].y * 500);
+            }
+            let line = this.drawLine("morePoints", ary, color);
+            line.line_type = ele.line_type;
+            if (
+              line.line_type == 0 ||
+              line.line_type == 1 ||
+              line.line_type == 7
+            ) {
+              this.blueLines.push(line);
+            }
+            this.lineLayer.add(line);
+          });
+        } catch (e) {
+          //TODO handle the exception
+          console.log(e);
+        }
+        //车道和行人
+        if (obj.median_lines.lane_count > 0) {
+          let ary = obj.median_lines.lane;
+          if (!ary.length) {
+            ary = [ary];
+          }
+          try {
+            ary.forEach((ele, index) => {
+              // if (ele.lane_type == "12") {
+              //   let points = [];
+              //   ele.lane_polygon.point.forEach((ele, index) => {
+              //     points.push(ele.x * 800);
+              //     points.push(ele.y * 500);
+              //   });
+              //   let rect = this.drawRect("morePoints", points, this.color[4]);
+              //   this.bicyLayer.add(rect);
+              // } else
+              if (ele.lane_type == "11") {
+                let points = [];
+                ele.lane_polygon.point.forEach((ele, index) => {
+                  points.push(ele.x * 800);
+                  points.push(ele.y * 500);
+                });
+                let rect = this.drawRect("morePoints", points, this.color[5]);
+                this.subtendLayer.add(rect);
+              } else {
+                let points = ele.line.point;
+                let group = new Kinetic.Group({ name: "arr" });
+                let line = this.drawLine(
+                  { x: points[0].x * 800, y: points[0].y * 500 },
+                  { x: points[1].x * 800, y: points[1].y * 500 },
+                  this.color[2]
+                );
+                this.greenLines[ele.lane_seq - 1] = line;
+                let cPoints, direct;
+                if (points[0].y < points[1].y) {
+                  cPoints = [
+                    points[0].x * 800,
+                    points[0].y * 500,
+                    points[1].x * 800,
+                    points[1].y * 500
+                  ];
+                  direct = "1";
+                } else {
+                  cPoints = [
+                    points[1].x * 800,
+                    points[1].y * 500,
+                    points[0].x * 800,
+                    points[0].y * 500
+                  ];
+                  direct = "0";
+                }
+                this.drawArrow(
+                  [points[0].x * 800, points[0].y * 500],
+                  [points[1].x * 800, points[1].y * 500],
+                  30,
+                  20,
+                  3,
+                  this.color[2],
+                  this.roadLayer,
+                  group,
+                  line
+                );
+                let arrs = this.roadLayer.get(".arr");
+                let arr = arrs[arrs.length - 1];
+                line.index = ele.lane_no;
+                this.roads[parseInt(ele.lane_seq - 1)] = {
+                  type: ele.lane_type,
+                  index: ele.lane_no,
+                  direct: direct,
+                  lane_guiding_type:obj.lanes.lane[index].lane_guiding_type,
+                  lane_use_type:obj.lanes.lane[index].lane_use_type
+                };
+              }
+            });
+          } catch (error) {
+            console.log(error);
+          }
+        }
+        //红绿灯
+        try {
+          let ary = obj.lights.light;
+          if (!ary.length) {
+            ary = [ary];
+          }
+          ary.forEach((ele, index) => {
+            let points = ele.light_regions.light_region;
+            let left = points.left * 800;
+            let top = points.top * 500;
+            let right = points.right * 800;
+            let bottom = points.bottom * 500;
+            let pointsAry = [left, top, left, bottom, right, bottom, right, top];
+            let rect = this.drawRect("morePoints", pointsAry, this.color[3]);
+
+            let linghtRoi = {
+              light_region_seq: 1,
+              top: (top / 500).toFixed(6),
+              right: (right / 800).toFixed(6),
+              bottom: (bottom / 500).toFixed(6),
+              left: (left / 800).toFixed(6)
+            };
+            (rect.light_seq = index + 1),
+              (rect.light_type = ele.light_type),
+              (rect.light_distribute = ele.light_distribute),
+              (rect.light_shape = ele.light_shape),
+              (rect.light_regions = {
+                light_region_count: 1,
+                light_region: linghtRoi
+              });
+            this.lightLayer.add(rect);
+          });
+        } catch (error) {
+          console.log(error);
+        }
+
+        //违停区域
+        let noStopAry = obj.no_stop_region.no_stop_polygon;
+        console.log(noStopAry);
+        try {
+          if (!noStopAry.length) {
+            noStopAry = [noStopAry];
+          }
+          noStopAry.forEach(ele => {
+            let points = ele.point;
+            let noStopRect = [];
+            for (let i = 0; i < points.length; i++) {
+              const point = points[i];
+              noStopRect.push(point.x * 800);
+              noStopRect.push(point.y * 500);
+            }
+            let line = this.drawRect("morePoints", noStopRect, this.color[5]);
+            this.noStopLayer.add(line);
+          });
+        } catch (error) {
+          console.log(error);
+        }
+         //行人检测区域
+        try {
+          let bicyarr = obj.pedestrian_detection_region.polygon;
+          if (!bicyarr.length) {
+            bicyarr = [bicyarr];
+          }
+          bicyarr.forEach(ele => {
+            let points = ele.point;
+            let bicRect = [];
+            for (let i = 0; i < points.length; i++) {
+              const point = points[i];
+              bicRect.push(point.x * 800);
+              bicRect.push(point.y * 500);
+            }
+            let rect = this.drawRect("morePoints", bicRect, this.color[6]);
+            rect.polygon_name = ele.polygon_name;
+            rect.polygon_id = ele.polygon_id;
+            this.bicyLayer.add(rect);
+          });
+        } catch (error) {
+          console.log(error);
+        }
+       //行人密度区域
+        try {
+          let densityarr = obj.pedestrian_density_region.polygon;
+          if (!densityarr.length) {
+            densityarr = [densityarr];
+          }
+          densityarr.forEach(ele => {
+            let points = ele.point;
+            let densityRect = [];
+            for (let i = 0; i < points.length; i++) {
+              const point = points[i];
+              densityRect.push(point.x * 800);
+              densityRect.push(point.y * 500);
+            }
+            let rect = this.drawRect("morePoints", densityRect, this.color[7]);
+            rect.polygon_name = ele.polygon_name;
+            rect.polygon_id = ele.polygon_id;
+            this.densityLayer.add(rect);
+          });
+        } catch (error) {
+          console.log(error);
+        }
+      //异物检测区域
+        try {
+          let foreignarr = obj.foreign_detection_region.polygon;
+          if (!foreignarr.length) {
+            foreignarr = [foreignarr];
+          }
+          foreignarr.forEach(ele => {
+            let points = ele.point;
+            let foreignRect = [];
+            for (let i = 0; i < points.length; i++) {
+              const point = points[i];
+              foreignRect.push(point.x * 800);
+              foreignRect.push(point.y * 500);
+            }
+            let rect = this.drawRect("morePoints", foreignRect, this.color[8]);
+            rect.polygon_name = ele.polygon_name;
+            rect.polygon_id = ele.polygon_id;
+            this.foreignLayer.add(rect);
+          });
+        } catch (error) {
+          console.log(error);
+        }
+
+        this.selectedShape = null;
+        this.drawRoad();
+        console.log(this.stage);
+        this.stage.draw();
+      },
+      //切换编辑、添加状态
+      changeCanvasState: function() {
+        if (this.canvasState) {
+          this.cancleSelectedGroup();
+        }
+        if (this.drawState == 1) {
+          this.lineNum = this.blueLines.length + 1;
+        } else if (this.drawState == 2) {
+          this.lineNum = this.roads.length + 1;
+        }
+        this.selectedShape = null;
+        this.markLineType = "0";
+        this.lightInfo.type = "1";
+      },
+      //切换配置项
+      changeLayer: function(index) {
+        this.cindex = index;
+        if (this.needRect || this.needLine) {
+          let shape = this.needRect ? "区域" : "线段";
+          this.$message({
+            type: "error",
+            message: "当前" + shape + "配置未完成"
+          });
+          return;
+        }
+        if (this.smallWindow) {
+          this.$message({
+            type: "error",
+            message: "当前属性配置未完成"
+          });
+          return;
+        }
+        this.layers.forEach(ele => {
+          ele.setVisible(false);
+        });
+        if (this.drawState != -1) {
+          this.cancleSelectedGroup();
+        }
+        this.canvasState = 0;
+        this.polyline = 0;
+        this.polygon_name = '';
+        this.polygon_id = '';
+        var e = e || window.event;
+        debugger
+        switch (index - 1) {
+          case -1:
+            this.layers.forEach(ele => {
+              ele.setVisible(true);
+            });
+            this.drawRoad();
+            this.stage.draw();
+            break;
+          case 1:
+            this.typeFlag = 1;
+            this.lineNum = this.blueLines.length + 1 || 1;
+            break;
+          case 2:
+            this.typeFlag = 0;
+            this.drawRoad();
+            break;
+        }
+        this.drawState = index - 1;
+        // this.layers[this.drawState].moveToTop()
+
+        if (index) {
+          console.log(this.drawState);
+          this.layers[this.drawState].setVisible(true);
+          this.layers[this.drawState].draw();
+        }
+      },
+      //切换直线/折线
+      polyChang: function() {
+        if (this.polyline) {
+          this.markLineType = "9";
+        } else {
+          this.markLineType = "0";
+        }
+      },
+      //点击配置区域
+      stageClick: function(evt) {
+        if (this.drawState == -1) {
+          this.$message({
+            type: "info",
+            message: "预览模式下无法操作！"
+          });
+          return;
+        }
+        if (this.canvasState) {
+          //点中空白区域添加图形
+          if (this.smallWindow) return;
+          this.addShape(evt);
+        } else {
+          //点击图形选中
+          this.cancleSelectedGroup();
+          if (evt.target.className != "Rect") {
+            let tar = evt.target;
+            if (this.drawState == "2" && tar.attrs.name != "rect") {
+              return;
+            }
+            this.makeSelectedGroup(tar);
+          }
+        }
+      },
+      //添加图形
+      addShape: function(evt) {
+        let pos = {
+          x: evt.evt.offsetX,
+          y: evt.evt.offsetY
+        };
+        let layer = this.layers[this.drawState];
+        switch (this.drawState) {
+          case 0:
+            let testRects = layer.get(".rect");
+            if (testRects.length && !this.needRect) {
+              this.$message({
+                type: "error",
+                message: "只允许设置一个车牌检测区域"
+              });
+              return;
+            }
+
+            if (this.needRect) {
+              this.endChangeShape(evt);
+            } else {
+              this.needRect = true;
+              this.startChangeShape(pos, layer, this.color[this.drawState]);
+            }
+            break;
+          case 1:
+            if (this.roadFlag) {
+              this.roadFlag = false;
+            }
+            this.startChangeShape(pos, layer, this.color[this.drawState]);
+            break;
+          case 3:
+            if (this.needRect) {
+              this.endChangeShape(evt);
+            } else {
+              this.needRect = true;
+              this.startChangeShape(pos, layer, this.color[this.drawState]);
+            }
+            break;
+          case 4:
+              if (this.needRect) {
+                this.endChangeShape(evt)
+              } else {
+                this.needRect = true
+                this.startChangeShape(pos,layer,this.color[this.drawState])
+              }
+            break;
+          case 6:
+            let rects = layer.get(".rect");
+            if (rects.length > 1 && !this.needRect) {
+              this.$message({
+                type: "error",
+                message: "只允许设置两个行人检测区域"
+              });
+              return;
+            }
+            if (this.needRect) {
+              this.endChangeShape(evt);
+            } else {
+              this.needRect = true;
+              this.startChangeShape(pos, layer, this.color[this.drawState]);
+            }
+            break;
+          case 5:
+            if (this.needRect) {
+              this.endChangeShape(evt);
+            } else {
+              this.needRect = true;
+              this.startChangeShape(pos, layer, this.color[this.drawState]);
+            }
+            break;
+          case 7:
+            if (this.needRect) {
+              this.endChangeShape(evt);
+            } else {
+              this.needRect = true;
+              this.startChangeShape(pos, layer, this.color[this.drawState]);
+            }
+            break;
+          case 8:
+            if (this.needRect) {
+              this.endChangeShape(evt);
+            } else {
+              this.needRect = true;
+              this.startChangeShape(pos, layer, this.color[this.drawState]);
+            }
+            break;
+          default:
+            break;
+        }
+      },
+      //改变选中图形样式
+      makeSelectedGroup: function(shape) {
+        debugger
+        console.log(shape);
+        let points = shape.attrs.points;
+        let lineType = shape.line_type;
+        let color = this.color[this.drawState];
+        if (this.drawState == 2) {
+          this.lineNum = this.roads[shape.roadIndex].index;
+          this.markLineType = this.roads[shape.roadIndex].type;
+          this.markLineDirect = this.roads[shape.roadIndex].direct;
+          this.guidingtype = this.roads[shape.roadIndex].lane_guiding_type;
+          this.lanuse = this.roads[shape.roadIndex].lane_use_type;
+          shape.setFill("rgba(" + this.color[1] + ",0.3)");
+          let gLine = this.greenLines[shape.roadIndex];
+          if (gLine.getParent().attrs.name == "arr") {
+            gLine.getParent().destroy();
+            this.roadLayer.add(gLine);
+          }
+        } else {
+          if (this.drawState == 1) {
+            let index = this.blueLines.indexOf(shape);
+            if (lineType == 0) {
+              color = "0,0,255";
+            } else if (lineType == 1) {
+              color = "255,255,0";
+            } else if (lineType == 2) {
+              color = "255,0,0";
+            } else if (lineType == 7) {
+              color = "255,255,255";
+            } else {
+              color = "0,255,0";
+            }
+            if (index > -1) {
+              this.blueLines.splice(index, 1);
+            } else {
+              index = this.blueLines.length;
+            }
+            this.lineNum = index + 1;
+          }
+          for (let i = 0; i < points.length; i += 2) {
+            const pos = {
+              x: points[i],
+              y: points[i + 1]
+            };
+            let cir = this.drawCircle(pos, color, 5);
+            this.layers[this.drawState].add(cir);
+          }
+        }
+        if (this.drawState == 1) {
+          this.markLineType = shape.line_type;
+        } else if (this.drawState == 3) {
+          this.lightInfo = {
+            type: shape.light_type,
+            shap: shape.light_shape,
+            distribute: shape.light_distribute
+          };
+        } else if(this.drawState == 6 ||this.drawState == 7||this.drawState == 8){
+          this.polygon_name = shape.polygon_name;
+          this.polygon_id = shape.polygon_id;
+        }
+        this.selectedShape = shape;
+
+        this.layers[this.drawState].draw();
+      },
+      //取消选中图形样式
+      cancleSelectedGroup: function(isdel) {
+        if (!this.selectedShape) return;
+        let cirs = this.layers[this.drawState].get(".circle");
+        for (let i = 0; i < cirs.length; i++) {
+          const cir = cirs[i];
+          cir.destroy();
+        }
+        if (this.drawState == 1) {
+          if (
+            (this.markLineType == "0" ||
+              this.markLineType == "1" ||
+              this.markLineType == "7") &&
+            !isdel
+          ) {
+            this.blueLines.splice(this.lineNum - 1, 0, this.selectedShape);
+            this.lineNum++;
+          }
+          this.selectedShape.line_type = this.markLineType;
+        } else if (this.drawState == 2) {
+          console.log(this.selectedShape);
+          let road = this.roads[this.selectedShape.roadIndex];
+          road.type = this.markLineType;
+          road.index = this.lineNum;
+          road.lane_use_type = this.lanuse;
+          road.lane_guiding_type = this.guidingtype;
+          this.selectedShape.setFill("rgba(255,255,255,0)");
+          if (this.markLineDirect != undefined) {
+            road.direct = this.markLineDirect;
+            road.cPoints = this.sortLinePoints(road.cPoints)
+            let points;
+            if (this.markLineDirect == "0") {
+              points = [
+                road.cPoints[2],
+                road.cPoints[3],
+                road.cPoints[0],
+                road.cPoints[1]
+              ];
+            } else {
+              points = road.cPoints;
+            }
+
+            let line = this.greenLines[this.selectedShape.roadIndex];
+            let group = new Kinetic.Group({ name: "arr" });
+            this.drawArrow(
+              [points[0], points[1]],
+              [points[2], points[3]],
+              30,
+              20,
+              3,
+              this.color[2],
+              this.roadLayer,
+              group,
+              line
+            );
+          }
+        } else if (this.drawState == 3) {
+          this.selectedShape.light_type = this.lightInfo.type;
+          this.selectedShape.light_shape = this.lightInfo.shap;
+          this.selectedShape.light_distribute = this.lightInfo.distribute;
+        }
+
+        this.selectedShape = null;
+        this.markLineType = "0";
+        this.lightInfo = {
+          type: "1",
+          distribute: "1",
+          shap: "1"
+        };
+        this.layers[this.drawState].draw();
+      },
+      //开始绘制图形（第一次点击）
+      startChangeShape: function(pos, layer, col) {
+        let ary = layer.get(".circle");
+        if (
+          this.drawState == 0 ||
+          this.drawState == 3 ||
+          this.drawState == 4 ||
+          this.drawState == 5 ||
+          this.drawState == 6 ||
+          this.drawState == 7 ||
+          this.drawState == 8
+        ) {
+          let rect = this.drawRect(pos, pos, col);
+          rect.moveToBottom();
+          layer.add(rect);
+
+        } else {
+          if (ary.length == 0 && !this.needLine) {
+            let circle = this.drawCircle(pos, "rgba(255,255,255,.2)");
+            layer.add(circle);
+            this.needLine = true;
+            let line = this.drawLine(pos, pos, col);
+            this.selectedShape = line;
+            layer.add(line);
+          } else {
+            if (this.polyline) {
+              let lines = layer.get(".line");
+              let lastLine = lines[lines.length - 1];
+              let points = lastLine.attrs.points;
+              if (points.length >= 4) {
+                points.push(pos.x);
+                points.push(pos.y);
+              }
+              lastLine.attrs.points = points;
+            } else {
+              this.lineStop(layer, pos);
+              this.smallWindow = true;
+            }
+          }
+        }
+        layer.draw();
+      },
+      //鼠标移动生成线、矩形
+      stageMouseMove: function(evt) {
+        if (!this.needLine && !this.needRect) return;
+        let pos = {
+          x: evt.evt.offsetX,
+          y: evt.evt.offsetY
+        };
+        let layer = this.layers[this.drawState];
+        if (this.needLine) {
+          let lines;
+          if (this.drawState == 2) {
+            lines = layer.get(".centerLine");
+          } else {
+            lines = layer.get(".line");
+          }
+          let points = lines[lines.length - 1].attrs.points;
+          points[points.length - 2] = pos.x;
+          points[points.length - 1] = pos.y;
+        } else if (this.needRect) {
+          let rects = layer.get(".rect");
+          let rect = rects[rects.length - 1];
+          rect.moveToBottom();
+          rect.attrs.points[3] = pos.y;
+          rect.attrs.points[4] = pos.x;
+          (rect.attrs.points[5] = pos.y), pos;
+          rect.attrs.points[6] = pos.x;
+        }
+        layer.draw();
+      },
+      //结束一个图形配置
+      endChangeShape: function(evt) {
+        evt.cancelBubble = true;
+        if (!this.needRect) return;
+        this.needRect = false;
+        if (this.drawState == 3) {
+          let layer = this.layers[this.drawState];
+          let rects = layer.get(".rect");
+          let rect = rects[rects.length - 1];
+          let points = rect.attrs.points;
+          let canvas = document.createElement("canvas");
+          let img = document.getElementById('pic').childNodes[0]
+          console.log(img)
+          let w = Math.abs(points[0] - points[4]);
+          let h = Math.abs(points[1] - points[5]);
+          this.scale = {
+            x: 200 / w,
+            y: 200 / h
+          };
+          console.log(this.scale);
+          canvas.width = w;
+          canvas.height = h;
+          if (points[0] - points[4] > 0 && points[1] - points[5] > 0) {
+            this.lightShootState = 2;
+            canvas
+              .getContext("2d")
+              .drawImage(img, points[4], points[5], w, h, 0, 0, w, h);
+          } else if (points[0] - points[4] > 0 && points[1] - points[5] < 0) {
+            this.lightShootState = 3;
+            canvas
+              .getContext("2d")
+              .drawImage(img, points[6], points[7], w, h, 0, 0, w, h);
+          } else if (points[0] - points[4] < 0 && points[1] - points[5] > 0) {
+            this.lightShootState = 1;
+            canvas
+              .getContext("2d")
+              .drawImage(img, points[2], points[3], w, h, 0, 0, w, h);
+          } else if (points[0] - points[4] < 0 && points[1] - points[5] < 0) {
+            this.lightShootState = 0;
+            canvas
+              .getContext("2d")
+              .drawImage(img, points[0], points[1], w, h, 0, 0, w, h);
+          }
+          console.log(this.lightShootState);
+          this.typeFlag = 3;
+          // this.lineTypeShow()
+          this.smallWindow = true;
+
+          let that = this;
+          this.childUrl = canvas.toDataURL("image/webp");
+          setTimeout(function() {
+            debugger
+            that.$refs.lightCanvas.bgUrl = that.childUrl;
+            that.$refs.lightCanvas.imgSize(w, h);
+          }, 0);
+          layer.draw();
+        }
+        if(this.drawState == 6 ||
+           this.drawState == 7 ||
+           this.drawState == 8
+        ) {
+            this.curLayerstate = true;
+        }
+      },
+      lineChange: function name() {
+        let color = "blue";
+        if (this.markLineType == 1) {
+          color = "yellow";
+        } else if (this.markLineType == 2) {
+          color = "red";
+        } else if (this.markLineType == 7) {
+          color = "white";
+        } else if (
+          this.markLineType == 3 ||
+          this.markLineType == 4 ||
+          this.markLineType == 5 ||
+          this.markLineType == 9
+        ) {
+          color = "rgb(0,255,0)";
+        }
+        this.selectedShape.attrs.stroke = color;
+
+        this.lineLayer.draw();
+      },
+      lineStop: function(layer, pos) {
+        this.needLine = false;
+        let start = layer.get(".circle")[0];
+        let x = start.attrs.x;
+        let y = start.attrs.y;
+        start.destroy();
+
+        if (this.drawState == 2) {
+          let group = new Kinetic.Group({
+            name: "arr"
+          });
+          let lines = layer.get(".centerLine");
+          let line = lines[lines.length - 1];
+
+          this.drawArrow(
+            [x, y],
+            [pos.x, pos.y],
+            30,
+            20,
+            3,
+            this.color[2],
+            layer,
+            group,
+            line
+          );
+        } else {
+          layer.draw();
+        }
+      },
+      //行人检测信息/异物检测信息
+      bicyEnter(){
+        let curLayers = this.layers[this.drawState].get(".rect");
+        let curlay = curLayers[curLayers.length - 1];
+        curlay.polygon_id = this.polygon_id;
+        curlay.polygon_name = this.polygon_name;
+        this.curLayerstate = false;
+        //清空输入框
+        this.polygon_id = '';
+        this.polygon_name = '';
+      },
+      curlayCancel(){
+          let curLayers = this.layers[this.drawState].get(".rect");
+          let curlay = curLayers[curLayers.length - 1];
+          curlay.destroy();
+          console.log(curlay)
+          this.selectedShape = null;
+          this.cancleSelectedGroup();
+          this.layers[this.drawState].draw();
+          this.curLayerstate = false;
+          //清空输入框
+          this.polygon_id = '';
+          this.polygon_name = '';
+      },
+      //画圆
+      drawCircle: function(pos, col, r) {
+        let size = r || 2;
+        let circle = new Kinetic.Circle({
+          x: pos.x,
+          y: pos.y,
+          fill: "rgb(" + col + ")",
+          radius: size,
+          name: "circle",
+          draggable: true
+        });
+
+        circle.on("dragmove", evt => {
+          if (this.canvasState) return;
+          evt.cancelBubble = true;
+          this.changeRect(evt);
+        });
+
+        return circle;
+      },
+      //画线
+      drawLine: function(start, end, col, width) {
+        let points;
+        if (start === "morePoints") {
+          points = end;
+        } else {
+          points = [start.x, start.y, end.x, end.y];
+        }
+        let name = "line";
+        let size = width || 4;
+        if (this.drawState == 2 && this.needLine) {
+          name = "centerLine";
+        }
+        let line = new Kinetic.Line({
+          x: 0,
+          points: points,
+          tension: 0,
+          closed: false,
+          stroke: "rgb(" + col + ")",
+          strokeWidth: size,
+          name: name
+        });
+        return line;
+      },
+      //画矩形
+      drawRect: function(start, end, color, boo) {
+        let points,
+          isFill = true;
+        if (boo == false) {
+          isFill = boo;
+        }
+        if (start === "morePoints") {
+          points = end;
+        } else {
+          points = [
+            start.x,
+            start.y,
+            start.x,
+            end.y,
+            end.x,
+            end.y,
+            end.x,
+            start.y
+          ];
+        }
+        let rect = new Kinetic.Line({
+          x: 0,
+          points: points,
+          // tension: 0.5,
+          closed: true,
+          stroke: "rgb(" + color + ")",
+          strokeWidth: 4,
+          name: "rect",
+          fill: isFill ? "rgba(" + color + ",0.3)" : "transparent"
+        });
+        return rect;
+      },
+      //改变矩形
+      changeRect: function(evt) {
+        let rects = evt.target.getParent().get(".rect");
+        let cirs = evt.target.getParent().get(".circle");
+        let points = [];
+        cirs.forEach(ele => {
+          points.push(ele.attrs.x);
+          points.push(ele.attrs.y);
+        });
+
+        this.selectedShape.attrs.points = points;
+        this.layers[this.drawState].draw();
+      },
+      //删除图形
+      delShape: function() {
+        if (!this.selectedShape) {
+          return;
+        }
+        switch (this.drawState) {
+          case 1:
+            if (
+              this.selectedShape.line_type != 0 &&
+              this.selectedShape.line_type != 1 &&
+              this.selectedShape.line_type != 7
+            ) {
+              let index = this.blueLines.indexOf(this.selectedShape);
+              this.blueLines.splice(index, 1);
+              this.lineNum = this.blueLines.length + 1;
+            }
+            this.roadFlag = false;
+            break;
+          case 2:
+            let rindex = this.roads.indexOf(this.selectedShape);
+            console.log(rindex);
+            this.roads[rindex] = "";
+            break;
+          case 6:
+            this.polygon_name = '';
+            this.polygon_id = '';
+          default:
+            break;
+        }
+        this.selectedShape.destroy();
+        this.cancleSelectedGroup(true);
+        this.selectedShape = null;
+      },
+      //选择线/区域属性弹窗
+      lineTypeCancel: function() {
+        if (this.drawState == 3) {
+          let rects = this.lightLayer.get(".rect");
+          let rect = rects[rects.length - 1];
+          rect.destroy();
+        } else {
+          this.selectedShape.destroy();
+        }
+        this.selectedShape = null;
+        this.cancleSelectedGroup();
+        this.layers[this.drawState].draw();
+        this.smallWindow = false;
+      },
+      lineTypeBtn: function() {
+        this.smallWindow = false;
+        let layer = this.layers[this.drawState];
+        if (this.typeFlag == 1) {
+          let lines = layer.get(".line");
+          let line = lines[lines.length - 1];
+          let color = "blue";
+          line.line_type = this.markLineType;
+
+          if (this.markLineType == 1) {
+            color = "yellow";
+          } else if (this.markLineType == 2) {
+            color = "red";
+          } else if (this.markLineType == 7) {
+            color = "white";
+          } else if (
+            this.markLineType == 3 ||
+            this.markLineType == 4 ||
+            this.markLineType == 5 ||
+            this.markLineType == 9
+          ) {
+            color = "rgb(0,255,0)";
+          }
+          line.attrs.stroke = color;
+
+          layer.draw();
+          if (
+            this.markLineType == "0" ||
+            this.markLineType == "1" ||
+            this.markLineType == "7"
+          ) {
+            this.blueLines.splice(this.lineNum - 1, 0, lines[lines.length - 1]);
+            this.lineNum++;
+          }
+        } else if (this.typeFlag == 0) {
+          if (this.roads[this.lineNum - 1]) {
+            console.log(this.roads[this.lineNum - 1]);
+            this.roads[this.lineNum - 1].getParent().destroy();
+            layer.draw();
+          }
+          let arrs = layer.get(".arr");
+          let lastLine = arrs[arrs.length - 1].children[0];
+          lastLine.line_type = this.markLineType;
+          lastLine.roadsIndex = this.lineNum - 1;
+          this.roads[this.lineNum - 1] = lastLine;
+          this.lineNum++;
+        } else if (this.typeFlag == 2) {
+          let that = this;
+          let rects = layer.get(".rect");
+          let rect = rects[rects.length - 1];
+          let points = [];
+          this.childCirAry.forEach(ele => {
+            let cir = [];
+            console.log(this.lightShootState);
+            switch (this.lightShootState) {
+              case 0:
+                cir = [rect.attrs.points[0], rect.attrs.points[1]];
+                break;
+              case 1:
+                cir = [rect.attrs.points[2], rect.attrs.points[3]];
+                break;
+              case 2:
+                cir = [rect.attrs.points[4], rect.attrs.points[5]];
+                break;
+              case 3:
+                cir = [rect.attrs.points[6], rect.attrs.points[7]];
+                break;
+            }
+            let x = parseInt(ele[0] / that.scale.x) + parseInt(cir[0]);
+            let y = parseInt(ele[1] / that.scale.y) + parseInt(cir[1]);
+            points.push(x);
+            points.push(y);
+          });
+          console.log(points);
+          rect.attrs.points = points;
+          layer.draw();
+          let length = points;
+          let top = Math.min(points[1], points[3], points[5], points[7]);
+          let left = Math.min(points[0], points[2], points[4], points[6]);
+          let bottom = Math.max(points[1], points[3], points[5], points[7]);
+          let right = Math.max(points[0], points[2], points[4], points[6]);
+          let linghtRoi = {
+            light_region_seq: 1,
+            top: (top / 500).toFixed(6),
+            right: (right / 800).toFixed(6),
+            bottom: (bottom / 500).toFixed(6),
+            left: (left / 800).toFixed(6)
+          };
+
+          (rect.light_seq = this.lightLayer.get("rect").length + 1),
+            (rect.light_type = this.lightInfo.type),
+            (rect.light_distribute = this.lightInfo.distribute),
+            (rect.light_shape = this.lightInfo.shap),
+            (rect.light_regions = {
+              light_region_count: 1,
+              light_region: linghtRoi
+            });
+          this.childCirAry = [];
+        }
+        this.markLineType = "0";
+        this.lightInfo = {
+          type: "1",
+          distribute: "1",
+          shap: "1"
+        };
+        this.selectedShape = null;
+      },
+      //画箭头
+      drawArrow: function(
+        c1,
+        c2,
+        theta,
+        headlen,
+        width,
+        color,
+        layer,
+        group,
+        line
+      ) {
+        theta = typeof theta != "undefined" ? theta : 30;
+        headlen = typeof theta != "undefined" ? headlen : 10;
+        width = typeof width != "undefined" ? width : 1;
+        color = typeof color != "color" ? color : "#000";
+
+        // 计算各角度和对应的P2,P3坐标
+        var angle = Math.atan2(c1[1] - c2[1], c1[0] - c2[0]) * 180 / Math.PI,
+          angle1 = (angle + theta) * Math.PI / 180,
+          angle2 = (angle - theta) * Math.PI / 180,
+          topX = headlen * Math.cos(angle1),
+          topY = headlen * Math.sin(angle1),
+          botX = headlen * Math.cos(angle2),
+          botY = headlen * Math.sin(angle2);
+
+        var arrowX = c1[0] - topX,
+          arrowY = c1[1] - topY;
+
+        // let line = this.drawLine({x:c1[0],y:c1[1]},{x:c2[0],y:c2[1]},color)
+        line.attrs.name = "centerLine";
+        arrowX = c2[0] + topX;
+        arrowY = c2[1] + topY;
+
+        let line1 = this.drawLine(
+          { x: c2[0], y: c2[1] },
+          { x: arrowX, y: arrowY },
+          color,
+          3
+        );
+        arrowX = c2[0] + botX;
+        arrowY = c2[1] + botY;
+
+        let line2 = this.drawLine(
+          { x: c2[0], y: c2[1] },
+          { x: arrowX, y: arrowY },
+          color,
+          3
+        );
+        group.add(line);
+        group.add(line1);
+        group.add(line2);
+
+        layer.add(group);
+        layer.draw();
+      },
+      //生成车道
+      drawRoad: function() {
+        if (this.roadFlag === true) return;
+        if (this.roadFlag === false) {
+          this.$alert("车道线有修改，请逐一检查车道属性是否正确", "提示", {
+            confirmButtonText: "确定"
+          });
+        }
+        let childs = this.roadLayer.children;
+        //清空层内非中线图形
+        const num = childs.length - 1;
+        for (let i = num; i > -1; i--) {
+          const element = childs[i];
+          element.destroy();
+        }
+        this.roadLayer.draw();
+
+        try {
+          // console.log(this.blueLines)
+          this.blueLines.forEach((ele, index) => {
+            let points = this.sortLinePoints(ele.attrs.points);
+            if (index > 0) {
+              //绘制车道
+              let lastPoints = this.sortLinePoints(this.blueLines[index - 1].attrs.points);
+              let num1 =
+                Math.pow(points[0] - lastPoints[0], 2) +
+                Math.pow(points[1] - lastPoints[1], 2) +
+                Math.pow(points[2] - lastPoints[2], 2) +
+                Math.pow(points[3] - lastPoints[3], 2);
+              let num2 =
+                Math.pow(points[0] - lastPoints[2], 2) +
+                Math.pow(points[1] - lastPoints[3], 2) +
+                Math.pow(points[2] - lastPoints[0], 2) +
+                Math.pow(points[3] - lastPoints[1], 2);
+              let mPoints;
+              if (num1 < num2) {
+                mPoints = points.concat([
+                  lastPoints[2],
+                  lastPoints[3],
+                  lastPoints[0],
+                  lastPoints[1]
+                ]);
+              } else {
+                mPoints = points.concat([
+                  lastPoints[0],
+                  lastPoints[1],
+                  lastPoints[2],
+                  lastPoints[3]
+                ]);
+              }
+              let rect = this.drawRect(
+                "morePoints",
+                mPoints,
+                this.color[1],
+                false
+              );
+              rect.roadIndex = index - 1;
+              this.roadLayer.add(rect);
+              //绘制车道中线
+              if (!this.roads[index - 1]) {
+                this.roads[index - 1] = {};
+              }
+              let road = this.roads[index - 1];
+              let cPoints = [
+                (mPoints[2] + mPoints[4]) / 2,
+                (mPoints[3] + mPoints[5]) / 2,
+                (mPoints[0] + mPoints[6]) / 2,
+                (mPoints[1] + mPoints[7]) / 2
+              ];
+              road.cPoints = cPoints;
+              let cLine = this.drawLine("morePoints", cPoints, this.color[2]);
+              this.greenLines[index - 1] = cLine;
+
+              if (road.direct == undefined) {
+                this.roadLayer.add(cLine);
+              } else if (road.direct == "1") {
+                debugger
+                this.drawArrow(
+                  [cPoints[0], cPoints[1]],
+                  [cPoints[2], cPoints[3]],
+                  30,
+                  20,
+                  3,
+                  this.color[2],
+                  this.roadLayer,
+                  new Kinetic.Group({ name: "arr" }),
+                  cLine
+                );
+              } else if (road.direct == "0") {
+                this.drawArrow(
+                  [cPoints[2], cPoints[3]],
+                  [cPoints[0], cPoints[1]],
+                  30,
+                  20,
+                  3,
+                  this.color[2],
+                  this.roadLayer,
+                  new Kinetic.Group({ name: "arr" }),
+                  cLine
+                );
+              }
+            }
+          });
+          this.roadFlag = true;
+        } catch (error) {
+          console.log(error);
+        }
+        this.roadLayer.draw();
+      },
+      lightNext: function() {
+        this.childCirAry = this.$refs.lightCanvas.cirAry;
+        this.typeFlag = 2;
+      },
+      lightLast: function() {
+        this.typeFlag = 3;
+        let that = this;
+        setTimeout(function() {
+          that.$refs.lightCanvas.cirAry = that.childCirAry;
+          that.$refs.lightCanvas.bgUrl = that.childUrl;
+          that.$refs.lightCanvas.draw();
+        }, 0);
+      },
+      childCancle: function() {
+        this.$refs.lightCanvas.cancle();
+      },
+       save: function() {
+          this.cancleSelectedGroup();
+          //车牌检测区域
+          let testAry = [];
+          try {
+            const testPoints = this.testLayer.get(".rect")[0].attrs.points;
+            for (let i = 0; i < testPoints.length; i += 2) {
+              testAry.push({
+                point_seq: i / 2 + 1,
+                x: (testPoints[i] / 800).toFixed(6),
+                y: (testPoints[i + 1] / 500).toFixed(6)
+              });
+            }
+          } catch (error) {}
+
+          this.roiBody.flow_roi = {
+            flow_type: "",
+            flow_region: {
+              polygon_point_count: testAry.length,
+              point: testAry
+            }
+          };
+          //新增新增
+          this.roiBody.plate_detect_region = {
+            detect_polygon:{
+              polygon_point_count:testAry.length,
+              point: testAry
+            }
+          }
+          //车道线
+          let lineAry = [];
+          try {
+            this.blueLines.forEach((ele, index) => {
+              let points = ele.attrs.points;
+              lineAry.push({
+                line_seq: index + 1,
+                lane_no: 1,
+                line_type: ele.line_type,
+                points: {
+                  point_count: 2,
+                  point: [
+                    {
+                      point_seq: 1,
+                      x: (points[0] / 800).toFixed(6),
+                      y: (points[1] / 500).toFixed(6)
+                    },
+                    {
+                      point_seq: 2,
+                      x: (points[2] / 800).toFixed(6),
+                      y: (points[3] / 500).toFixed(6)
+                    }
+                  ]
+                }
+              });
+            });
+          } catch (error) {
+            console.log(error);
+          }
+          try {
+            this.lineLayer.get(".line").forEach((ele, index) => {
+              if (ele.line_type != 0 && ele.line_type != 1 && ele.line_type != 7) {
+                let points = ele.attrs.points;
+                let ary = [];
+                for (let i = 0; i < points.length; i += 2) {
+                  ary.push({
+                    point_seq: i / 2 + 1,
+                    x: (points[i] / 800).toFixed(6),
+                    y: (points[i + 1] / 500).toFixed(6)
+                  });
+                }
+                lineAry.push({
+                  line_seq: lineAry.length + 1,
+                  lane_no: 1,
+                  line_type: ele.line_type,
+                  points: {
+                    point_count: points.length / 2,
+                    point: ary
+                  }
+                });
+              }
+            });
+          } catch (error) {
+            console.log(error);
+          }
+          this.roiBody.lane_line = {
+            line_count: lineAry.length,
+            line: lineAry
+          };
+
+          //车道
+          let roadAry = [];
+          let lanaAry = [];
+          console.log(this.roads);
+          try {
+            console.log(this.roads);
+            this.blueLines.forEach((ele, index) => {
+
+              if (index != this.blueLines.length - 1) {
+                let midLine = this.roads[index],
+                  points =
+                    midLine.direct != "1"
+                      ? [
+                          midLine.cPoints[2],
+                          midLine.cPoints[3],
+                          midLine.cPoints[0],
+                          midLine.cPoints[1]
+                        ]
+                      : midLine.cPoints,
+                  rectPoints1 = this.sortLinePoints(ele.attrs.points),
+                  rectPoints2 = this.sortLinePoints(this.blueLines[index + 1].attrs.points);
+                let options = {
+                  lane_seq: index + 1,
+                  lane_no: midLine.index,
+                  line: {
+                    polygon_point_count: 2,
+                    point: [
+                      {
+                        point_seq: 1,
+                        x: points ? (points[0] / 800).toFixed(6) : "",
+                        y: points ? (points[1] / 500).toFixed(6) : ""
+                      },
+                      {
+                        point_seq: 2,
+                        x: points ? (points[2] / 800).toFixed(6) : "",
+                        y: points ? (points[3] / 500).toFixed(6) : ""
+                      }
+                    ]
+                  },
+                  direction_polygon: {
+                    polygon_point_count: 2,
+                    point: [
+                      {
+                        point_seq: 1,
+                        x: points ? (points[0] / 800).toFixed(6) : "",
+                        y: points ? (points[1] / 500).toFixed(6) : ""
+                      },
+                      {
+                        point_seq: 2,
+                        x: points ? (points[2] / 800).toFixed(6) : "",
+                        y: points ? (points[3] / 500).toFixed(6) : ""
+                      }
+                    ]
+                  },
+                  lane_polygon: {
+                    polygon_point_count: 4,
+                    point: [
+                      {
+                        point_seq: 1,
+                        x: (rectPoints1[2] / 800).toFixed(6),
+                        y: (rectPoints1[3] / 500).toFixed(6)
+                      },
+                      {
+                        point_seq: 2,
+                        x: (rectPoints1[0] / 800).toFixed(6),
+                        y: (rectPoints1[1] / 500).toFixed(6)
+                      },
+                      {
+                        point_seq: 3,
+                        x: (rectPoints2[0] / 800).toFixed(6),
+                        y: (rectPoints2[1] / 500).toFixed(6)
+                      },
+                      {
+                        point_seq: 4,
+                        x: (rectPoints2[2] / 800).toFixed(6),
+                        y: (rectPoints2[3] / 500).toFixed(6)
+                      }
+                    ]
+                  }
+                };
+                let linetype =''
+                if(midLine.lane_use_type == 0) {
+                // linetype = this.lanuse;
+                switch(midLine.lane_guiding_type){
+                  case '0':
+                    linetype = 2
+                    break;
+                  case '1':
+                    linetype = 0
+                    break;
+                  case '2':
+                    linetype = 1
+                    break;
+                  case '3':
+                    linetype = 3
+                    break;
+                  case '4':
+                    linetype = 4
+                    break;
+                  case '5':
+                    linetype = 5
+                    break;
+                  default:
+                    break;
+                }
+              } else if(midLine.lane_use_type != '' && midLine.lane_use_type != 0) {
+                //  linetype = this.lanuse;
+                switch(midLine.lane_use_type){
+                  case '1':
+                    linetype = 8
+                    break;
+                  case '2':
+                    linetype = 9
+                    break;
+                  case '3':
+                    linetype = 10
+                    break;
+                  case '4':
+                    linetype = ''
+                    break;
+                  case '5':
+                    linetype = ''
+                    break;
+                  default:
+                    break;
+                }
+              }
+                options.lane_type = linetype
+                roadAry.push(options)
+                //新增
+                let L = JSON.stringify(options);
+                let lanaOptions = JSON.parse(L);
+                console.log(this.lanuse)
+
+                lanaOptions.lane_use_type = midLine.lane_use_type;
+                lanaOptions.lane_guiding_type = midLine.lane_guiding_type;
+                lanaOptions.lane_type = linetype;
+                lanaOptions.lane_user_id = options.lane_no;
+                lanaOptions.lane_middle_line = {
+                   polygon_point_count: 2,
+                    "point1": {
+                      x: points ? (points[0] / 800).toFixed(6) : "",
+                      y: points ? (points[1] / 500).toFixed(6) : ""
+                    },
+                     "point2":{
+                      x: points ? (points[2] / 800).toFixed(6) : "",
+                      y: points ? (points[3] / 500).toFixed(6) : ""
+                    }
+                };
+                lanaOptions.lane_directions = {
+                  lane_direction_count:'1',
+                  lane_direction:{
+                    lane_direction_type:midLine.direct,
+                    lane_direction_time:'00:00:00-23:59:59'
+                  }
+                }
+                lanaAry.push(lanaOptions)
+              }
+            });
+          } catch (error) {
+            console.log(error);
+          }
+          console.log('#######################')
+          console.log(lanaAry)
+          console.log('#######################')
+          //对向车道
+          try {
+            this.subtendLayer.get(".rect").forEach((el, index) => {
+              let bicAry = [];
+              let points = el.attrs.points;
+              for (let i = 0; i < points.length; i += 2) {
+                bicAry.push({
+                  point_seq: i / 2 + 1,
+                  x: (points[i] / 800).toFixed(6),
+                  y: (points[i + 1] / 500).toFixed(6)
+                });
+              }
+
+              roadAry.push({
+                lane_no: 1,
+                lane_seq: roadAry.length + 1,
+                lane_type: 11,
+                lane_polygon: {
+                  polygon_point_count: bicAry.length,
+                  point: bicAry
+                }
+              });
+              lanaAry.push({
+                lane_no: 1,
+                lane_seq: roadAry.length + 1,
+                lane_use_type:6,
+                lane_type: 11,
+                lane_polygon: {
+                  polygon_point_count: bicAry.length,
+                  point: bicAry
+                }
+              });
+            });
+          } catch (error) {}
+
+
+          // 红绿灯区域
+          let lightAry = [];
+          try {
+            this.lightLayer.get(".rect").forEach((ele, index) => {
+              lightAry.push({
+                light_seq: index + 1,
+                light_type: ele.light_type,
+                light_id:ele.light_type,
+                light_distribute: ele.light_distribute,
+                light_number_type:ele.light_distribute,
+                light_shape: ele.light_shape,
+                light_shape_type:ele.light_shape,
+                light_regions: ele.light_regions,
+                light_yellow_interval:3,
+                light_yellow_delay:3
+              });
+            });
+          } catch (error) {}
+          this.roiBody.lights = {
+            light_count: lightAry.length,
+            light: lightAry
+          };
+
+          //违停区域
+          let noStopRois = this.noStopLayer.get(".rect");
+          let noStopAry = [];
+          try {
+            noStopRois.forEach((el, index) => {
+              let points = el.attrs.points;
+              let ary = [];
+              for (let i = 0; i < points.length; i += 2) {
+                ary.push({
+                  point_seq: i / 2 + 1,
+                  x: (points[i] / 800).toFixed(6),
+                  y: (points[i + 1] / 500).toFixed(6)
+                });
+              }
+              noStopAry.push({
+                polygon_seq: index + 1,
+                polygon_point_count: ary.length,
+                point: ary
+              });
+            });
+          } catch (error) {}
+
+          this.roiBody.no_stop_region = {
+            region_count: noStopAry.length,
+            no_stop_polygon: noStopAry
+          };
+
+          //行人检测区域
+          let bicArys = [];
+          try {
+            this.bicyLayer.get(".rect").forEach((el, index) => {
+              let bicAry = [];
+              let points = el.attrs.points;
+              for (let i = 0; i < points.length; i += 2) {
+                bicAry.push({
+                  point_seq: i / 2 + 1,
+                  x: (points[i] / 800).toFixed(6),
+                  y: (points[i + 1] / 500).toFixed(6)
+                });
+              }
+              roadAry.push({
+                lane_no: 1,
+                lane_seq: roadAry.length + 1,
+                lane_type: 12,
+                lane_polygon: {
+                  polygon_point_count: bicAry.length,
+                  point: bicAry
+                }
+              })
+              bicArys.push({
+                  polygon_id:el.polygon_id,
+                  polygon_name:el.polygon_name,
+                  polygon_point_count: bicAry.length,
+                  point: bicAry
+              });
+            });
+          } catch (error) {}
+
+          this.roiBody.pedestrian_detection_region = {
+            region_count: bicArys.length,
+            polygon: bicArys
+          };
+           this.roiBody.median_lines = {
+            lane_count: roadAry.length ? roadAry.length : 0,
+            lane: roadAry ? roadAry : []
+          };
+          //新增
+          this.roiBody.lanes = {
+              lane_count: lanaAry.length ? lanaAry.length : 0,
+              lane: lanaAry ? lanaAry : []
+          }
+
+        //行人密度检测区域
+       let densityAry = [];
+        try {
+          this.densityLayer.get(".rect").forEach((el, index) => {
+            let denAry = [];
+            let points = el.attrs.points;
+            for (let i = 0; i < points.length; i += 2) {
+              denAry.push({
+                point_seq: i / 2 + 1,
+                x: (points[i] / 800).toFixed(6),
+                y: (points[i + 1] / 500).toFixed(6)
+              });
+            }
+            densityAry.push({
+                polygon_id:el.polygon_id,
+                polygon_name:el.polygon_name,
+                polygon_point_count: denAry.length,
+                point: denAry
+            });
+          });
+        } catch (error) {}
+
+        this.roiBody.pedestrian_density_region = {
+          region_count: densityAry.length,
+          polygon: densityAry
+        };
+
+      //异物检测区域
+       let foreignAry = [];
+        try {
+          this.foreignLayer.get(".rect").forEach((el, index) => {
+            let foAry = [];
+            let points = el.attrs.points;
+            for (let i = 0; i < points.length; i += 2) {
+              foAry.push({
+                point_seq: i / 2 + 1,
+                x: (points[i] / 800).toFixed(6),
+                y: (points[i + 1] / 500).toFixed(6)
+              });
+            }
+            foreignAry.push({
+                polygon_id:el.polygon_id,
+                polygon_name:el.polygon_name,
+                polygon_point_count: foAry.length,
+                point: foAry
+            });
+          });
+        } catch (error) {}
+
+        this.roiBody.foreign_detection_region = {
+          region_count: foreignAry.length,
+          polygon: foreignAry
+        };
+
+        console.log(this.roiBody);
+        return this.oParse.writeXML({ roi: this.roiBody });
+      },
+      clear: function() {
+        (this.blueLines = []),
+          (this.roads = []),
+          (this.drawState = -1),
+          (this.smallWindow = false),
+          (this.roadFlag = ""),
+          (this.needRect = false),
+          (this.needLine = false),
+          (this.canvasState = 0),
+          (this.polygon_name = ''),
+          (this.polygon_id = ''),
+          (this.polyline = 0);
+      },
+       sortLinePoints(pointarr){
+        try{
+          let newpoint = [];
+          if((pointarr[1] - pointarr[3]) > 0){
+            newpoint[0] = pointarr[2]
+            newpoint[1] = pointarr[3]
+            newpoint[2] = pointarr[0]
+            newpoint[3] = pointarr[1]
+          } else {
+            newpoint = pointarr
+          }
+          return newpoint
+        }catch(err){
+            console.log(err)
+        }
+      }
+    },
+    mounted() {
+      // this.stageInit()
+    }
+  };
+</script>
+
+<style scoped>
+button {
+  cursor: pointer;
+}
+.modal-title {
+  float: left;
+  width: 93%;
+  overflow: hidden;
+}
+
+.modal-body {
+  height: 620px !important;
+}
+.modal-lt {
+  width: 100%;
+  margin-bottom: 10px;
+  text-align: center;
+  overflow: hidden;
+}
+.modal-lt button {
+  outline:none;
+  height: 30px;
+  line-height: 30px;
+  float: left;
+  padding: 0 10px;
+  border-radius: 15px;
+  margin:0 0px 10px 15px;
+  background: #D7EDFF;
+  border:1px solid rgba(59,183,255,1);
+  cursor: pointer;
+  color: #666666;
+}
+.modal-lt .curmodal {
+  background: #D7EDFF !important;
+  border: 1px solid rgba(59,183,255,1);
+  color: #3BB7FF;
+}
+
+.modal-editbox {
+  position: relative;
+  float: right;
+  min-height: 450px;
+  width: 22%;
+  color: #fff;
+}
+.modal-editbox .modal-lb{
+  position: absolute;
+  bottom: 0;
+}
+.modal-right {
+  position: relative;
+  float: left;
+  text-align: center;
+}
+
+.modal-editbox button {
+  display: block;
+  margin: 10px;
+}
+
+.modal-lb button {
+  float: left;
+  width: 90px;
+  margin-left: 15px;
+}
+
+#zone_list button.active {
+  background: #fff;
+  color: #3d6797;
+}
+
+#line_type {
+  display: none;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  width: 500px;
+  height: 340px;
+  margin-left: -250px;
+  margin-top: -150px;
+  z-index: 52;
+  color: #fff;
+  text-align: center;
+  line-height: 35px;
+  /* background: #409eff; */
+  background:rgba(1, 20, 51,.9);
+}
+
+#line_type.active {
+  display: block;
+  z-index: 1001;
+  opacity: 1;
+}
+
+#line_type p {
+  padding: 15px;
+  font-size: 17px;
+  font-weight: bold;
+}
+#line_type input {
+  width: 150px;
+}
+el-select {
+  width: 90px !important;
+}
+#line_type button {
+ 	color: #fff;
+  margin: 50px 2%;
+  width: 100px;
+  height: 35px;
+  line-height: 35px;
+  background: #3a51f2f7;
+  color: #fff;
+  border: 0;
+}
+
+#c1 {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.pic {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.pic img {
+  width: 800px;
+  height: 500px;
+  margin: 0;
+  padding: 0;
+}
+
+canvas {
+  margin: 0;
+  padding: 0;
+}
+
+.title {
+  /*background: url('../../../assets/18.png') no-repeat;*/
+  width: 24%;
+  height: 70px;
+  line-height: 50px;
+  margin: 0;
+  margin-left: 3.5%;
+  font-size: 25px;
+  letter-spacing: 10px;
+  display: inline-block;
+}
+
+.shadow {
+  display: none;
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 1000;
+  width: 100%;
+  height: 100%;
+  background: #000;
+  filter: alpha(opacity=50);
+  -moz-opacity: 0.5;
+  opacity: 0.5;
+}
+
+ul {
+  padding: 10px;
+}
+
+li {
+  width: 130px;
+  text-align: center;
+}
+
+.item {
+  width: 50%;
+  margin: 10px auto;
+}
+.item span {
+  display: inline-block;
+  width: 28%;
+  text-align: right;
+}
+.item div {
+  display: inline-block;
+  width: 70%;
+}
+.w120 {
+  width: 120px
+}
+.mt10{
+  margin-top: 10px;
+}
+.pedestrian-area-attr {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  width: 500px;
+  height: 300px;
+  margin-left: -250px;
+  margin-top: -150px;
+  z-index: 52;
+  color: #fff;
+  text-align: center;
+  line-height: 35px;
+}
+.pedestrian-area-attr .label {
+  width: 80px;
+}
+.pedestrian-area-attr input{
+  width: 200px!important;
+  opacity: .8;
+  height: 30px;
+  line-height: 30px;
+  border: 0px;
+}
+.mt40 {
+  margin-top:40px;
+}
+.btn-box button{
+  height: 30px;
+  line-height: 30px;
+  width: 100px;
+  border:0;
+  cursor: pointer;
+  background: #145b93;
+  color: #ffffff;
+}
+.editbtn {
+  display: block;
+  border-radius: 0;
+  border: 0;
+}
+.editbtn .el-radio-button:first-child .el-radio-button__inner{
+  border:0;
+}
+.delbtn{
+  color: #fff;
+  background: #E5E5E5;
+}
+</style> b

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

+<template>
+  <div class="settingZone" v-if='btnIsactive'>
+    <button @click='showModal'>区域设置</button>
+    <el-dialog title="区域配置" :visible.sync="isShow" width="30%" :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">
+        <button @click="beforeHideModal">取 消</button>
+        <button type="primary" @click="save">确 定</button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  import TraficCanvas from "./TraficCanvas";
+  import FlowCanvas from "./FlowCanvas";
+  import SafeCanvas from "./SafeCanvas";
+  import FaceCanvas from "./FaceCanvas";
+  import ComplexCanvas from "./ComplexCanvas";
+  export default {
+    name: "zoneSetting",
+    data() {
+      return {
+        isShow: false,
+        type: "",
+        btnIsactive: false,
+        showClose: false,
+        roiBody: {},
+        XMLStr: "",
+        bgUrl: ""
+      };
+    },
+    components: {
+      TraficCanvas,
+      SafeCanvas,
+      FlowCanvas,
+      FaceCanvas,
+      ComplexCanvas
+    },
+    methods: {
+      showModal: function(event) {
+        var event = event || window.event;
+        if ($(event.target).hasClass("disabled")) {
+          return;
+        }
+        // let filePath = 'C:/Program Files (x86)/screen.jpg';
+        // if(!this.testIe.isIe) {
+        // 	let canvas = document.createElement('canvas');
+        // 	let video = $('video').get(0)
+        // 	canvas.width = 800;
+        // 	canvas.height = 500;
+        // 	canvas.getContext('2d').drawImage(video, 0, 0, 800, 500);
+        // 	this.bgUrl = canvas.toDataURL('image/webp')
+        // } else {
+        //获取截图
+        this.bgUrl = "";
+        let cur_duid = this.$parent.$parent.curentVchanId[1];
+        let subtask_id = this.$parent.$parent.curentSubTaskId;
+        this.axios({
+          method: "get",
+          url:
+            this.API.IP +
+            "/tx1_box/api/v1/devconf_fx/devs/" +
+            this.dev_unid +
+            "/vchans/" +
+            cur_duid +
+            "/cut_pic?s=" +
+            new Date().getTime(),
+          headers: {
+            authorization: window.localStorage.getItem("atoken")
+          },
+          params: {
+            subtask_id: subtask_id
+          }
+        })
+          .then(res => {
+            if (!res.data.ecode) {
+              this.bgUrl = "data:image/png;base64," + res.data.pic_base64;
+              setTimeout(() => {
+                let canvas = document.createElement("canvas");
+                let img = $(".pic img").get(0);
+                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("区域设置截图失败!" + res.data.enote);
+            }
+          })
+          .catch(err => {
+            console.log("区域设置截图返回异常:", err.message);
+          });
+        // this.bgUrl = document.getElementById('VionVideo').CapturePicture(filePath) + '?stamp=' + new Date().getTime();
+        // }
+        $("#VionVideo").hide();
+        this.isShow = true;
+        setTimeout(() => {
+          this.$refs.canvas.stageInit();
+          $(".modal-lt button")
+            .eq(0)
+            .addClass("active");
+          console.log(this.$parent.$parent.mtaskInfo);
+          if (this.$parent.$parent.mtaskInfo[0].scenes[0].rois) {
+            this.$refs.canvas.configInit(
+              this.$parent.$parent.mtaskInfo[0].scenes[0].rois[0].roi
+            );
+          }
+        }, 0);
+      },
+      beforeHideModal: function() {
+        this.$refs.canvas.clear();
+        this.bgUrl = "";
+        $(".modal-lt button").removeClass("active");
+        this.isShow = false;
+        $("#VionVideo").show();
+      },
+      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.beforeHideModal();
+      }
+    }
+  };
+</script>
+
+<style scoped>
+button {
+  width: 10%;
+}
+
+.modal-title {
+  float: left;
+  width: 93%;
+  overflow: hidden;
+}
+
+.settingZone {
+  width: 100px;
+  float: left;
+  margin-right: 15px;
+}
+
+.settingZone > button {
+  width: 100px;
+}
+
+.modal-left {
+  float: left;
+  min-height: 350px;
+  width: 20%;
+  color: #fff;
+}
+
+.modal-right {
+  position: relative;
+  float: left;
+  text-align: center;
+  width: 80%;
+}
+
+.modal-left button {
+  display: block;
+  margin: 10px;
+}
+
+.modal-lt button {
+  width: 120px;
+}
+
+.modal-lb button {
+  width: 100px;
+}
+
+#zone_list button.active {
+  background: #fff;
+  color: #3d6797;
+}
+
+#line_type {
+  display: none;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  width: 500px;
+  height: 300px;
+  margin-left: -250px;
+  margin-top: -150px;
+  z-index: 52;
+  color: #fff;
+  text-align: center;
+  line-height: 35px;
+  background: #409eff;
+}
+
+#line_type.active {
+  display: block;
+  z-index: 1001;
+  opacity: 1;
+}
+
+#line_type p {
+  padding: 15px;
+  font-size: 17px;
+  font-weight: bold;
+}
+#line_type input {
+  width: 150px;
+}
+
+#line_type button {
+  color: #fff;
+  height: 35px;
+  line-height: 35px;
+  margin: 50px 2%;
+  width: 50px;
+}
+
+#c1 {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.pic {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.pic img {
+  width: 800px;
+  height: 500px;
+  margin: 0;
+  padding: 0;
+}
+
+canvas {
+  margin: 0;
+  padding: 0;
+}
+
+.title {
+  /*background: url('../../../assets/18.png') no-repeat;*/
+  width: 24%;
+  height: 70px;
+  line-height: 50px;
+  margin: 0;
+  margin-left: 3.5%;
+  font-size: 25px;
+  letter-spacing: 10px;
+  display: inline-block;
+}
+
+.shadow {
+  display: none;
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 1000;
+  width: 100%;
+  height: 100%;
+  background: #000;
+  filter: alpha(opacity=50);
+  -moz-opacity: 0.5;
+  opacity: 0.5;
+}
+
+ul {
+  padding: 10px;
+}
+
+li {
+  width: 130px;
+  text-align: center;
+}
+
+button.disabled {
+  background: #999;
+}
+
+.item {
+  width: 50%;
+  margin: 0 auto;
+}
+.item span {
+  display: inline-block;
+  width: 30%;
+  text-align: right;
+}
+.item div {
+  display: inline-block;
+  width: 70%;
+}
+</style>

src/views/sceneManage/setting/demarcate.vue

+<template>
+  <div>
+    <el-dialog title="标定设置" :visible.sync="dialogVisible" width="1100px" :before-close="handleClose">
+      <span>
+        <el-row>
+          <el-col :span="7" class="">
+            <el-col :lg="7" :md="6">
+              <span class="bdheader-title">相机高度:</span>
+            </el-col>
+            <el-col :lg="15" :md="14">
+              <el-input type="text" v-model="traffic.cameraH" @input="setChangeModel"></el-input>
+            </el-col>
+          </el-col>
+          <el-col :span="7" class="">
+            <el-col :lg="7" :md="6">
+              <span class="bdheader-title">测量线长度:</span>
+            </el-col>
+            <el-col :lg="15" :md="14">
+              <el-input type="text" v-model="traffic.lineL"  @input="setChangeModel"></el-input>
+            </el-col>
+          </el-col>
+          <el-col :span="6" class="">
+            <el-col :lg="7" :md="6">
+              <span class="bdheader-title">图像比例:</span>
+            </el-col>
+            <el-col :lg="15" :md="14">
+              <el-select v-model="traffic.ccd" @change="setChangeModel">
+                <el-option value="4:3" label="4:3"></el-option>
+                <el-option value="16:9" label="16:9"></el-option>
+              </el-select>
+            </el-col>
+          </el-col>
+        </el-row>
+        <el-row class="bdbody-box">
+          <div class="bdbody-left">
+            <div :class="{'line-type':true,'line-type-active':curType==0}" @click="changeState(0)">车辆模型线</div>
+            <div :class="{'line-type':true,'line-type-active':curType==1}" @click="changeState(1)">行人模型线</div>
+            <el-radio-group v-model="canvasState" @change='changeCanvasState'>
+              <el-radio-button :label="1">添加</el-radio-button>
+              <el-radio-button :label="0">编辑</el-radio-button>
+            </el-radio-group>
+            <div>
+              <button @click="delDraw" v-if='!canvasState' class="delBtn">删除</button>
+            </div>
+          </div>
+          <div class="bdbody-right">
+            <div class="pic2"><img :src='src' /></div>
+            <div id='CaliContainer'></div>
+          </div>
+        </el-row>
+      </span>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="handleClose">取 消</el-button>
+        <el-button type="primary" @click="save">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+  import {
+    scRTEngineCalcBaseon6Points,
+    CalcCarOutline,
+    changeModelData
+  } from "../../../assets/javscript/CalibrationCalc.js"
+  import {
+    configxml
+  } from '../../../assets/javscript/configxml.js'
+  export default {
+    data() {
+      return {
+        dialogVisible: false,
+        curType: 0,
+        canvasState: 0,
+        data: {},
+        type: '0',
+        btnIsactive: false,
+        isShow: false,
+        canvasState: 0,
+        showClose: false,
+        needLine: false,
+        stage: {},
+        traffic: {
+          cameraH: '6.5',
+          ccd: '4:3',
+          lineL: '2.5'
+        },
+        shadowLayer: {},
+        signLayer: {},
+        measureLayer: {},
+        layers: [],
+        src: '',
+        editIndex: '',
+        drawState: 0,
+        changeIdnex: 0,
+        XMLStr: '',
+        modelnum: 0, //标记模型编号
+        bgUrl:'',
+        taskData:''
+      };
+    },
+    // props: ['bgUrl'],
+    methods: {
+      checkBrower: function () {},
+      showModal: function (data) {
+        this.$store.commit('setocxstate',0)
+        this.taskData = data;
+        this.dialogVisible = true;
+        this.curType = 0;
+        // let filePath = 'C:/Program Files (x86)/screen.jpg';
+        let cur_duid = data.task_id;
+        let subtask_id = data.task_id;
+        this.src = '';
+        this.$api.task.cutpic(data.vchan.vdev_unid, data.vchan.vchan_refid,data.subtask_id).then(res => {
+          if (!res.ecode) {
+            this.src = "data:image/png;base64," + res.pic_base64;
+          } else {
+            alert('标定设置截图失败!' + res.enote);
+          }
+        }).catch(err => {
+          console.log('标定设置截图返回异常:', err.message);
+        })
+        // this.src = document.getElementById('VionVideo').CapturePicture(filePath) + '?stamp=' + new Date().getTime();
+        if (this.src) {
+          setTimeout(() => {
+            document.getElementsByClassName('pic2')[0].style.background = 'url(' + this.src + ') no-repeat';
+            document.getElementsByClassName('pic2')[0].style.backgroundSize = 'cover';
+          }, 0);
+        }
+        setTimeout(() => {
+          // console.log('截图地址为:', this.src)
+          // this.src = canvas.toDataURL('image/webp')
+          if (this.type != '1') {
+            this.stage = new Kinetic.Stage({
+              container: "CaliContainer", //<div>的id
+              width: 800, //创建的舞台宽度
+              height: 500 //创建的舞台高度
+            });
+            this.shadowLayer = new Kinetic.Layer({
+              id: "shadowLayer",
+              name: 'layer'
+            });
+            this.signLayer = new Kinetic.Layer({
+              id: "signLayer",
+              name: 'signLayer'
+            });
+            this.measureLayer = new Kinetic.Layer({
+              id: "measureLayer",
+              name: "measureLayer"
+            });
+            let shadow = new Kinetic.Rect({
+              x: 0, //矩形左上角x坐标
+              y: 0, //矩形左上角y坐标
+              width: 800, //矩形的宽度
+              height: 500, //矩形的高度
+              fill: 'rgba(255,255,255,.2)', //矩形的填充色
+              stroke: "black", //矩形边缘线的颜色
+              strokeWidth: 3 //矩形边缘线的宽度
+            });
+            let that = this
+            this.stage.on('click', function (evt) {
+              that.stageClick(evt)
+            })
+
+            this.stage.on('mousemove', function (evt) {
+              that.stageMouseMove(evt)
+            })
+            this.shadowLayer.add(shadow)
+            this.stage.add(this.shadowLayer)
+            this.stage.add(this.signLayer)
+            this.layers = [this.signLayer]
+          }
+          console.log( this.taskData.mtasks[0].scenes[0].calibration)
+          let cal = this.taskData.mtasks[0].scenes[0].calibration
+          if (cal != undefined) {
+            this.configInit(cal.calibration)
+          }
+        }, 0)
+      },
+      configInit: function (xml) {
+        if (!xml) {
+          console.log('xml 为空!');
+          xml = configxml.xml
+        }
+        let allline = [];
+        let obj = this.oParse.parseXML(xml).calibration
+        console.log(obj)
+        this.traffic.cameraH = obj.camera_height;
+        this.traffic.ccd = obj.ccd_width + ':' + obj.ccd_height;
+        this.traffic.lineL = obj.measure_line_length;
+        let lines = obj.cali_lines.cali_line
+        if (!lines) {
+          xml = configxml.xml
+          let obj = this.oParse.parseXML(xml).calibration
+          lines = obj.cali_lines.cali_line
+        }
+        lines.forEach((ele) => {
+          if (ele.lane_line_type == '6') {
+            let points = ele.line.point
+            let line = this.drawLine({
+              x: points[0].x * 800,
+              y: points[0].y * 500
+            }, {
+              x: points[1].x * 800,
+              y: points[1].y * 500
+            }, '#ff0000', 6)
+            this.signLayer.add(line)
+          } else if (ele.lane_line_type == '8') {
+            let points = ele.line.point
+            let line = this.drawLine({
+              x: points[0].x * 800,
+              y: points[0].y * 500
+            }, {
+              x: points[1].x * 800,
+              y: points[1].y * 500
+            }, 'blue', 8)
+            this.signLayer.add(line)
+          }
+        });
+        this.stage.draw()
+
+      },
+      beforeHideModal: function () {
+        this.clear()
+        this.stage.destroy()
+        this.isShow = false;
+         $('#VionVideo').show()
+      },
+      changeState: function (index) {
+        this.curType = index;
+        var e = e || window.event
+        this.drawState = index;
+        if (this.changeIdnex == index) {
+          return
+        }
+        this.changeIdnex = index;
+        //清除之前的模型和模型线
+        let allLine = this.signLayer.get('.line');
+        let allModel = this.signLayer.get('.model');
+        let allarrows = this.signLayer.get('.arrows');
+        //清除模型线
+        allLine.map(e => {
+          if (e.attrs.linetype == 11) {
+            e.destroy();
+          }
+        });
+        //清除模型
+        allModel.map(e => {
+          e.destroy();
+        });
+        //清除箭头
+        allarrows.map(e => {
+          e.destroy();
+        });
+        this.signLayer.draw();
+        //变换线模型
+        let mtype = index == 0 ? 'car' : 'person'
+        changeModelData(mtype)
+      },
+
+      changeCanvasState: function () {
+        if (this.canvasState) {
+          this.cancleSelectedGroup()
+        }
+        this.selectedShape = null
+      },
+      stageClick: function (evt) {
+        if (this.canvasState) {
+          this.addShape(evt)
+        } else {
+          this.cancleSelectedGroup()
+          if (evt.target.className != 'Rect') {
+            this.makeSelectedGroup(evt.target)
+          }
+        }
+      },
+      addShape: function (evt) {
+        this.needLine = false;
+        let pos = {
+          x: evt.evt.offsetX,
+          y: evt.evt.offsetY
+        }
+        let layer = this.signLayer;
+        this.startChangeShape(pos, this.signLayer, '#ff0000')
+
+      },
+      //选择要移动的线
+      makeSelectedGroup: function (shape) {
+        let points = shape.attrs.points
+        let color = this.drawState ? 'blue' : 'red'
+        for (let i = 0; i < points.length; i += 2) {
+          const pos = {
+            x: points[i],
+            y: points[i + 1]
+          };
+          let cir = this.drawCircle(pos, color, 5)
+          this.signLayer.add(cir)
+        }
+        this.selectedShape = shape
+        this.signLayer.draw()
+      },
+      cancleSelectedGroup: function () {
+        if (!this.selectedShape) return
+        let cirs = this.signLayer.get('.circle')
+        for (let i = 0; i < cirs.length; i++) {
+          const cir = cirs[i];
+          cir.destroy()
+        }
+        this.selectedShape = null
+        this.editIndex = '';
+        this.signLayer.draw()
+      },
+
+      startChangeShape: function (pos, layer, col, types) {
+        let ary = layer.get('.circle');
+        let modelnum = this.modelnum;
+        if (ary.length == 0 && !this.needLine) {
+          let circle = this.drawCircle(pos, 'rgba(255,255,255,.2)')
+          layer.add(circle)
+          this.needLine = true
+          let lines = layer.get('.line')
+          let linenum = lines.length;
+          this.modelnum = linenum;
+          if (this.editIndex != '') {
+            linenum = this.editIndex
+          }
+          let line = this.drawLine(pos, pos, col, 11, linenum)
+          this.selectedShape = line
+          layer.add(line)
+        } else {
+          let lines = layer.get('.line')
+          let lastLine = lines[lines.length - 1]
+          let points = lastLine.attrs.points
+          lastLine.attrs.points = points
+          layer.get('.circle')[0].destroy()
+          this.needLine = false
+          //添加模型线
+          this.getModelData(points);
+        }
+      },
+      //g
+      getModelData(mlinepoints) {
+        /**
+         * 根据平行线和一个标定距离计算相机标定
+         * @param {float} fHeight //相机高度
+         * @param {float} fRatioW2H //图像宽高比
+         * @param {Array} Points //标定的6个点的相对坐标，前四个是一组平行线；最后两点是标定好的距离
+         * @param {float} fDist //标定最后两点的距离
+         */
+        let points = [];
+        let layer = this.signLayer
+        let lines = layer.get('.line');
+        lines.map(e => {
+          if (e.attrs.linetype == 6) {
+            let p = e.attrs.points;
+            let startpoint = {};
+            startpoint.x = Number((p[0] / 800).toFixed(6));
+            startpoint.y = Number((p[1] / 500).toFixed(6));
+            points.push(startpoint);
+            let endpoint = {}
+            endpoint.x = Number((p[2] / 800).toFixed(6));;
+            endpoint.y = Number((p[3] / 500).toFixed(6));
+            points.push(endpoint);
+          }
+        });
+        lines.map(e => {
+          if (e.attrs.linetype == 8) {
+            let p = e.attrs.points;
+            let startpoint = {};
+            startpoint.x = Number((p[0] / 800).toFixed(6));
+            startpoint.y = Number((p[1] / 500).toFixed(6));
+            points.push(startpoint);
+            let endpoint = {}
+            endpoint.x = Number((p[2] / 800).toFixed(6));;
+            endpoint.y = Number((p[3] / 500).toFixed(6));
+            points.push(endpoint);
+          }
+        });
+        let ccd = this.traffic.ccd.split(':');
+        let ccdnum = Number(ccd[0]) / Number(ccd[1]);
+
+        scRTEngineCalcBaseon6Points(Number(this.traffic.cameraH), ccdnum, points, Number(this.traffic.lineL));
+        // var pointss = [{x:0.229125, y:0.783},{x:0.311625, y:0.407},{x:0.574125, y:0.797},{x:0.571625, y:0.403},{x:0.981625,y:0.565},{x:0.981625, y:0.805}]
+        // scRTEngineCalcBaseon6Points(7,1.7777,pointss,2.5);
+        /**
+         * CalcCarOutline
+         * 计算车或人的模型框点位
+         * @param {*} P1 模型线点
+         * @param {*} P2 模型线点
+         * @param {*} CarOutline 传入参数用于接收线的标注点
+         */
+        let P1 = {},
+          P2 = {};
+
+        P1.x = Number((mlinepoints[0] / 800).toFixed(6));
+        P1.y = Number((mlinepoints[1] / 500).toFixed(6));
+        P2.x = Number((mlinepoints[2] / 800).toFixed(6));
+        P2.y = Number((mlinepoints[3] / 500).toFixed(6));
+        //测试验证
+
+        let data = CalcCarOutline(P1, P2, [{}, {}, {}, {}, {}, {}, {}, {}]);
+
+        this.drawModel(data);
+
+        this.drawArrows(P1, P2)
+      },
+      //绘制模型线
+      drawModel(data) {
+        if (this.editIndex != '') {
+          this.modelnum = this.editIndex;
+        }
+        data.map(e => {
+          e.x = e.x * 800;
+          e.y = e.y * 500
+        })
+        let customShape = new Kinetic.Shape({
+          x: 0,
+          y: 0,
+          name: 'model',
+          modelnum: this.modelnum,
+          // a Kinetic.Canvas renderer is passed into the drawFunc function
+          drawFunc: function (ctx) {
+            debugger
+            ctx.beginPath();
+            ctx.lineTo(data[0].x, data[0].y);
+            ctx.lineTo(data[1].x, data[1].y);
+            ctx.lineTo(data[2].x, data[2].y);
+            ctx.lineTo(data[3].x, data[3].y);
+            ctx.lineTo(data[0].x, data[0].y);
+            ctx.stroke();
+            //
+            ctx.beginPath();
+            ctx.lineTo(data[4].x, data[4].y);
+            ctx.lineTo(data[5].x, data[5].y);
+            ctx.lineTo(data[6].x, data[6].y);
+            ctx.lineTo(data[7].x, data[7].y);
+            ctx.lineTo(data[4].x, data[4].y);
+            ctx.stroke();
+            //
+            ctx.beginPath();
+            ctx.lineTo(data[0].x, data[0].y);
+            ctx.lineTo(data[4].x, data[4].y);
+            ctx.stroke();
+            //
+            ctx.beginPath();
+            ctx.lineTo(data[1].x, data[1].y);
+            ctx.lineTo(data[5].x, data[5].y);
+            ctx.stroke();
+            //
+            ctx.beginPath();
+            ctx.lineTo(data[2].x, data[2].y);
+            ctx.lineTo(data[6].x, data[6].y);
+            ctx.stroke();
+            //
+            ctx.beginPath();
+            ctx.lineTo(data[3].x, data[3].y);
+            ctx.lineTo(data[7].x, data[7].y);
+            ctx.stroke('red');
+          }
+        });
+        this.signLayer.add(customShape)
+        this.signLayer.draw();
+
+      },
+      //绘制箭头
+      drawArrows(c1, c2) {
+        let theta = 30;
+        let headlen = 10;
+        let width = 1;
+        let color = "#000";
+        // 计算各角度和对应的P2,P3坐标
+        var angle = Math.atan2(c1.y * 500 - c2.y * 500, c1.x * 800 - c2.x * 800) * 180 / Math.PI,
+          angle1 = (angle + theta) * Math.PI / 180,
+          angle2 = (angle - theta) * Math.PI / 180,
+          topX = headlen * Math.cos(angle1),
+          topY = headlen * Math.sin(angle1),
+          botX = headlen * Math.cos(angle2),
+          botY = headlen * Math.sin(angle2);
+        var arrowX = c1.x * 800 - topX,
+          arrowY = c1.y * 500 - topY;
+        arrowX = c2.x * 800 + topX;
+        arrowY = c2.y * 500 + topY;
+        var arrowX1 = c2.x * 800 + botX;
+        var arrowY1 = c2.y * 500 + botY;
+        let Arrows = new Kinetic.Shape({
+          x: 0,
+          y: 0,
+          name: 'arrows',
+          arrowsnum: this.modelnum,
+          // a Kinetic.Canvas renderer is passed into the drawFunc function
+          drawFunc: function (context) {
+            context.save()
+            context.beginPath();
+            context.lineTo(c2.x * 800, c2.y * 500);
+            context.lineTo(arrowX, arrowY);
+            context.stroke();
+            context.fillStrokeShape(this);
+            // KineticJS specific context method
+            context.beginPath();
+            context.moveTo(c2.x * 800, c2.y * 500);
+            context.lineTo(arrowX1, arrowY1);
+            context.stroke();
+            // KineticJS specific context method
+            context.fillStrokeShape(this);
+          },
+          stroke: "blue",
+          strokeWidth: 3
+        });
+        this.signLayer.add(Arrows)
+        this.signLayer.draw();
+      },
+      stageMouseMove: function (evt) {
+        if (!this.needLine) return
+        let pos = {
+          x: evt.evt.offsetX,
+          y: evt.evt.offsetY
+        }
+        let layer = this.signLayer
+        let lines = layer.get('.line');
+        let points = lines[lines.length - 1].attrs.points
+        points[points.length - 2] = pos.x
+        points[points.length - 1] = pos.y
+        layer.draw()
+      },
+      lineStop: function (layer) {
+        let start = layer.get('.circle')[0]
+        start.destroy()
+        this.needLine = false
+      },
+      //绘制选择线的原点
+      drawCircle: function (pos, col, r) {
+        let size = r || 1
+        let cir = new Kinetic.Circle({
+          x: pos.x,
+          y: pos.y,
+          fill: col,
+          radius: size,
+          name: 'circle',
+          draggable: true
+        });
+        cir.on("dragmove", (evt) => {
+          if (this.canvasState) return
+          evt.cancelBubble = true
+          this.changeRect(evt)
+        })
+        return cir
+      },
+      changeRect: function (evt) {
+        let rects = evt.target.getParent().get('.rect')
+        let cirs = evt.target.getParent().get('.circle')
+        let points = []
+        cirs.forEach((ele) => {
+          points.push(ele.attrs.x)
+          points.push(ele.attrs.y)
+        })
+
+        this.selectedShape.attrs.points = points
+        let curmodelnun = this.selectedShape.attrs.linenum;
+        //标定线变化变换模型
+        if (this.selectedShape.attrs.linetype == 8 || this.selectedShape.attrs.linetype == 6) {
+          this.setChangeModel();
+        }
+        //模型线变化变换模型
+        if (this.selectedShape.attrs.linetype == 11) {
+          this.changeModel(curmodelnun);
+        }
+        this.signLayer.draw()
+      },
+      //根据模型线改变模型改变箭头
+      changeModel(modelnum) {
+        let mlinepoints = this.selectedShape.attrs.points;
+        let curmodel = this.signLayer.get('.model');
+        let arrows = this.signLayer.get('.arrows');
+        curmodel.map(e => {
+          this.editIndex = modelnum;
+          if (e.attrs.modelnum == modelnum) {
+            e.destroy()
+          }
+        })
+        arrows.map(e => {
+          this.editIndex = modelnum;
+          if (e.attrs.arrowsnum == modelnum) {
+            e.destroy()
+          }
+        })
+        this.getModelData(mlinepoints)
+      },
+      //根据设置参数改变模型
+      setChangeModel() {
+        let curmodel = this.signLayer.get('.model').destroy();
+        this.signLayer.draw();
+        let allline = this.signLayer.get('.line');
+        //传入数据重新构建
+        allline.map(e => {
+          if (e.attrs.linetype == 11) {
+            this.editIndex = '';
+            this.modelnum = e.attrs.linenum;
+            let mlinepoints = e.attrs.points;
+            this.getModelData(mlinepoints);
+          }
+        })
+      },
+      drawLine: function (start, end, col, types, linenum) {
+        linenum = linenum ? linenum : 0;
+        let points = [start.x, start.y, end.x, end.y]
+        let line = new Kinetic.Line({
+          x: 0,
+          points: points,
+          tension: 0.5,
+          closed: false,
+          stroke: col,
+          strokeWidth: 4,
+          name: 'line',
+          linetype: types,
+          linenum: linenum
+        });
+        let that = this
+        return line
+      },
+      delDraw: function () {
+        if (this.selectedShape.attrs.linetype == 6 || this.selectedShape.attrs.linetype == 8) {
+          return
+        }
+        let modelIndex = this.selectedShape.attrs.linenum;
+        this.selectedShape.destroy();
+        let model = this.signLayer.get('.model');
+        let allarrows = this.signLayer.get('.arrows');
+        model.map(e => {
+          if (e.attrs.modelnum == modelIndex) {
+            e.destroy();
+          }
+        });
+        allarrows.map(e => {
+          if (e.attrs.arrowsnum == modelIndex) {
+            e.destroy();
+          }
+        })
+        this.cancleSelectedGroup()
+        this.selectedShape = null
+        this.stage.draw()
+      },
+      save: function () {
+        let ary = [];
+        let that = this;
+        let signLines = this.signLayer.get('.line')
+        if (signLines.length) {
+          signLines.forEach(function (ele, index) {
+            if (ele.attrs.linetype == 6 || ele.attrs.linetype == 8) {
+              let points = ele.attrs.points
+              ary.push({
+                cali_line_seq: index + 1,
+                lane_line_type: ele.attrs.linetype,
+                lane_no: 1,
+                line: {
+                  polygon_point_count: 2,
+                  point: [{
+                    point_seq: 1,
+                    x: (points[0] / 800).toFixed(6),
+                    y: (points[1] / 500).toFixed(6)
+                  }, {
+                    point_seq: 2,
+                    x: (points[2] / 800).toFixed(6),
+                    y: (points[3] / 500).toFixed(6)
+                  }]
+                }
+              })
+            }
+          })
+        }
+        var obj = {
+          calibration: {
+            camera_height: this.traffic.cameraH,
+            ccd_width: this.traffic.ccd.split(':')[0],
+            ccd_height: this.traffic.ccd.split(':')[1],
+            measure_line_length: this.traffic.lineL,
+            cali_lines: {
+              cali_lines_count: ary.length,
+              cali_line: ary
+            }
+          }
+        }
+        this.XMLstr = this.oParse.writeXML(obj)
+        this.$parent.submit(this.XMLstr, 'calibration',this.taskData)
+        this.dialogVisible = false;
+      },
+      clear: function () {
+        this.traffic = {
+            cameraH: '6.5',
+            ccd: '4:3',
+            lineL: '2.5'
+          },
+          this.drawState = -1,
+          this.XMLstr = ''
+        console.log(this.drawState)
+      },
+
+      handleClose(done) {
+       this.dialogVisible = false;
+        this.$store.commit('setocxstate',1)
+      }
+    }
+  }
+</script>
+<style lang="stylus" scoped>
+.bdheader-title{
+  line-height 40px
+}
+.bdbody-box{
+  margin-top 20px
+}
+.bdbody-left, .bdbody-right{
+  float left
+}
+.bdbody-right{
+  positon relative
+}
+.bdbody-left{
+  width 200px
+}
+.bdbody-right {
+  height 500px
+  width 800px
+  background #f0f0f0
+}
+.line-type
+    height 35px
+    line-height 35px
+    border:1px solid #3a8ee6;
+    color: #3a8ee6;
+    background-color: #ecf5ff;
+    width 150px
+    margin 5px 0
+    text-align center
+    border-radius 2px
+    cursor pointer
+.line-type-active {
+  background #409EFF
+  color #fff
+}
+.delBtn{
+  height 35px
+  line-height 35px
+  width 100px
+  margin-top 10px
+  background #F56C6C
+  border 0px
+  color #fff
+  cursor pointer
+}
+.pic2 {
+  position: absolute;
+    img{
+      height: 500px;
+      width: 800px;
+      position: absolute;
+      top: 0;
+    }
+	}
+</style>

src/views/sceneManage/setting/index.vue

+<template>
+  <div >
+    <div class="">
+      <el-table
+        :data="taskInfo.mtasks[0].scenes"
+        border
+        stripe
+        style="width: 80%;float:left">
+        <el-table-column
+          label="序号"
+          type="index"
+          width="80">
+        </el-table-column>
+        <el-table-column
+          prop="name"
+          align="center"
+          label="预置位编号"
+          width="180">
+        </el-table-column>
+        <el-table-column
+          align="center"
+          label="预设位置配置"
+          width="180">
+          <template>
+            <div class="yzw-setbox">
+              <span class="icon el-icon-folder-add"></span>
+              <span class="icon el-icon-delete"></span>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="address"
+          align="center"
+          label="参数设置">
+          <template slot-scope="scope">
+            <div class="table-set">
+              <span @click="setParam(scope.row)">参数设置</span>
+              <span @click="setArea(scope.row)">区域设置</span>
+              <span @click="setDemarcate(scope.row)">标定设置</span>
+              <span>时间设置</span>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="setting-box">
+        <div class="set-header ">基础操作</div>
+        <div class="set-item">场景添加 <span class="set-icon  el-icon-circle-plus"></span> </div>
+        <div class="set-item">轮询播放 <span class="set-icon">
+          <el-switch
+            width="25"
+            v-model="switchstate"
+            active-color="#13ce66"
+            inactive-color="#ff4949">
+            </el-switch>
+          </span> 
+        </div>
+        <div class="set-item" @click="exportparam">配置导入  <span class="set-icon el-icon-download"></span> </div>
+        <div class="set-item" @click="uploadparam">配置导出  <span class="set-icon el-icon-upload"></span> </div>
+        <div class="set-item" @click="uploadparam">效果展示  <span class="set-icon el-icon-s-help"></span> </div>
+      </div>
+    </div>
+    <div>
+      <parameter ref="parameter"></parameter>
+    </div>
+    <div>
+        <areas ref="areas"></areas>
+    </div>
+    <div>
+        <demarcate  ref="demarcate"></demarcate>
+    </div>
+    <div>
+
+    </div>
+  </div>
+</template>
+<script>
+import areas from './area'
+import demarcate from './demarcate'
+import parameter from './parameter'
+import ytconfig from './ytconfig'
+export default {
+  data(){
+    return{
+    taskInfo:{
+      mtasks:[{
+        scenes:[]
+      }]
+    },
+    switchstate:true,
+  }
+  },
+  props:['taskid','subtaskid'],
+  components:{
+    areas,
+    demarcate,
+    parameter,
+    ytconfig
+  },
+  methods: {
+     setParam(){
+       this.$refs.parameter.init(this.taskInfo)
+      },
+      setArea(roidata){
+        this.$refs.areas.showModal(roidata,this.taskInfo)
+      },
+      setDemarcate(){
+        this.$refs.demarcate.showModal(this.taskInfo);
+      },
+      exportparam(){
+
+      },
+      uploadparam(){
+
+      },
+      getTaskParams(){
+        this.$api.task.getTaskParams(this.taskid,this.subtaskid).then(data => {
+          this.taskInfo = data
+          console.log(res.data)
+        })
+      },
+      submit: function(xml,type) {
+				let postObj = {
+						subtask_id: this.subtaskid,
+						mtasks: [{
+							mtask_unid: this.taskInfo.mtasks[0].mtask_unid,
+							// type: 0,
+							// priority: 0,
+							scenes: [{
+								scene_unid: this.taskInfo.mtasks[0].scenes[0].scene_unid,
+								play_urls: {
+									rtsp: this.vchanUrl
+								},
+								// algo_args: {}
+							}]
+						}]
+					}
+					if (type == 'roi') {
+						postObj.mtasks[0].scenes[0].rois = [
+							{
+								roi: xml
+							}
+						]
+					} else if (type == 'config') {
+						postObj.mtasks[0].scenes[0].config = {
+							xml : xml
+						}
+					} else if (type == 'calibration'){
+						console.log(xml)
+						postObj.mtasks[0].scenes[0].calibration = {
+							calibration : xml
+						}
+          }
+          this.$api.task.editRoi(this.taskid,this.subtaskid,postObj,{
+            headers: {
+						  'authorization': localStorage.getItem('atoken')
+              },
+            }
+          ).then( m => {
+            if (m.ecode == '200') {
+               this.$message({
+                message: '设置成功！' ,
+                type: 'success'
+              });
+              switch (type) {
+                case 'roi':
+                  this.taskInfo.mtasks[0].scenes[0].rois = [{
+                    roi: xml
+                  }]
+                  break;
+                case 'calibration':
+                  this.taskInfo.mtasks[0].scenes[0].calibration = {
+                    calibration:  xml
+                  }
+                  break;
+                default:
+                  break;
+              }
+            }
+          })
+			},
+  },
+  watch: {
+    subtaskid(val){
+      this.$api.task.getTaskParams(this.taskid,val).then(res => {
+        this.taskInfo = res;
+        console.log(res.data)
+      })
+    }
+  },
+}
+</script>
+<style lang="stylus" scoped>
+.yzw-setbox{
+  .icon {
+    font-size 16px
+    padding 0 10px
+  }
+}
+.setting-box{
+  width 18%;
+  float right
+}
+.table-set span{
+    padding 0 10px
+    cursor pointer
+    color #666666
+    border-right 1px solid #E5E5E5
+}
+.table-set span:last-child{
+  border-right 0
+}
+.table-set span:hover{
+  color #3BB7FF
+}
+.set-header{
+  height 3vh
+  line-height 3vh
+  text-align center
+  background #ACC1FF
+}
+.set-item{
+  height 3vh
+  line-height 3vh
+  padding:0 10px
+  color #555555
+  margin-top 1vh
+  cursor pointer
+  .set-icon{
+    display inline-block
+    float right 
+    line-height 3vh
+    font-size 20px
+    color #CCCCCC
+  }
+}
+.upload-box {
+  margin-right 20px
+}
+
+</style>

src/views/sceneManage/setting/parameter.vue

+<template>
+  <div>
+   <el-dialog
+      title="参数设置"
+      :visible.sync="dialogVisible"
+      width="50%"
+      :before-close="handleClose">
+      <span>
+         <iframe
+              id="iframe"
+              ref="iframe"
+              src="/dynamicParameters.html"
+              frameborder="0"
+              width="100%"
+              height="415"
+              scrolling="no"
+          ></iframe>
+      </span>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="handleClose">取 消</el-button>
+        <el-button type="primary" @click="save">确 定</el-button>
+      </span>
+  </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+      return {
+        dialogVisible: false,
+        XMLStr:'',
+        basicXml:'',
+        taskData:""
+      };
+    },
+  methods: {
+    init(data){
+      this.$store.commit('setocxstate',0)
+      this.dialogVisible = true;
+      this.taskData = data;
+      let that = this;
+      setTimeout(()=>{
+        that.xmlInit(data.mtasks[0].scenes[0]);
+      },800)
+    },
+    balltaskinit(data){
+      this.$store.commit('setocxstate',0)
+      this.dialogVisible = true;
+      setTimeout(()=>{
+        this.xmlInit(data);
+      },800)
+    },
+    xmlInit: function (obj) {
+
+				this.XMLStr =  obj.config.xml || '<?xml version="1.0" encoding="GBK"?><root></root>'
+				console.log('XML:'+this.XMLStr.split('@').length)
+				if (this.XMLStr.split('@').length>1) {
+					this.XMLStr =  '<?xml version="1.0" encoding="GBK"?><root></root>'
+				}
+        this.basicXml = obj.basicConfig.xml;
+        this.$refs.iframe.contentWindow.loadParameterTree(this.basicXml,this.XMLStr);
+    },
+    save:function () {
+				this.$refs.iframe.contentWindow.submit();
+        //ifram 传递回来的饿xml
+				this.XMLStr = this.$refs.iframe.contentWindow.xmlStr;
+        this.dialogVisible = false;
+        this.$parent.submit(this.XMLStr,'config')
+			},
+    handleClose(done) {
+      this.dialogVisible = false;
+      this.$store.commit('setocxstate',1)
+    }
+  }
+}
+</script>
+<style lang="stylus" scoped>
+
+</style>

src/views/sceneManage/setting/ytconfig.vue

+<template>
+  <div>
+    
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file

src/views/sceneManage/videoplay.vue

+<template>
+  <div class="ocx-box" id="ocx-box" v-show="isShow">
+    <object id="VionVideo" classid="clsid:93F960BB-5AF9-402B-A3DF-06112F14DC02" codebase="VionPlatformVideo.ocx" width="100%"
+      height="100%">
+      <!-- <param name="_Version" value="65536">
+		        <param name="_ExtentX" value="2646">
+		        <param name="_ExtentY" value="1323">
+		        <param name="_StockProps" value="0"> -->
+    </object>
+  </div>
+</template>
+<script>
+  import {
+    mapState
+  } from 'vuex'
+  export default {
+    data() {
+      return {
+        urlFlag:false,
+        isShow:true
+      };
+    },
+    props: ['playulr', 'type'],
+    methods: {
+      videoPlay: function () {
+        this.urlFlag = false
+        if (!this.playulr.sip_serv_ip) {
+          debugger
+          let url = this.playulr.rtsp_url
+          let ocxPlayRes = document.getElementById('VionVideo').StartPlay(url, 0);
+          console.log('video Ocx播放rtsp流返回值:', ocxPlayRes);
+          if (ocxPlayRes != 0) {
+            alert('播放失败!');
+          }
+        } else {
+          let OcxResponse = document.getElementById('VionVideo').StartPlaySip(this.playulr.sip_serv_id, this.playulr.sip_serv_ip,
+            this.playulr.sip_serv_port, this.playulr.sip_unid, this.playulr.sip_password, this.playulr.devId, 0)
+          console.log('video Ocx播放sip流返回值:', OcxResponse);
+          if (OcxResponse != 0 && OcxResponse != 200) {
+            alert('播放失败!');
+          }
+        }
+      },
+      downOcx: function () {
+        if (this.fileUrl !== '' && !this.installOcx) {
+          location.href = this.fileUrl;
+        }
+      },
+      installOcxInfo: function () {
+        this.$confirm('为了正常使用,是否安装OCX控件?', '友情提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          this.installOcx = false;
+          this.downOcx();
+        }).catch(() => {
+          this.installOcxInfo();
+        });
+      },
+      initocx() {
+        //  VionVideo.Init(0, 'Null', 4);
+      },
+      downloadOCx() {
+        // if (navigator.userAgent.indexOf('Trident') > -1) {
+        //   this.axios.get(IP + "/api/v1/device/dlfile", {
+        //       params: {
+        //         file_type: "video_ocx"
+        //       }
+        //     })
+        //     .then(response => {
+        //       location.href = response.data.file_url;
+        //     });
+        // } else {
+        //   this.$message.error("视频控件加载失败请用IE10及以上版本打开！");
+        // }
+      },
+      checkIE() {
+        var agent = navigator.userAgent.toLowerCase();
+        if (/(msie\s|trident.*rv:)([\w.]+)/.test(agent) && document.documentMode < 10) {
+          this.$message.error("IE 版本过低请升级到IE10级以上版本！");
+        }
+      }
+    },
+    created() {
+      // this.checkIE();
+    },
+    computed: {
+      ...mapState(['ocxstate'])
+      // this.initocx();
+    },
+    mounted() {
+      // VionVideo.Init(0, 'Null', 4);
+      // try {
+      //   if (document.getElementById("VionVideo").GetVersion()) {
+      //   }
+      // } catch (error) {
+      //   this.downloadOCx();
+      // }
+    },
+    watch: {
+      ocxstate(val) {
+        try {
+          if(val == 0){
+            this.isShow = false
+          } else {
+            this.isShow = true
+            document.getElementById("VionVideo").StartPlay(0);
+          }
+        } catch (error) {
+          console.log(error)
+        }
+
+      },
+    },
+    beforeDestroy: function () {
+      // if (this.videoplayer.techName_ == "Flash" && this.videoplayer.pause) {
+      //   this.videoplayer.pause();
+      // }
+    }
+  };
+
+</script>
+
+<style lang="stylus" scoped>
+.ocx-box{
+  height 100%
+  width 100%
+}
+</style>

vue.config.js

 module.exports = {
 module.exports = {
+  lintOnSave: false,
   // ...
   // ...
   css: {
   css: {
     loaderOptions: {
     loaderOptions: {
       sass: {
       sass: {
-        prependData:  '@import "@/assets/scss/common.scss";' 
+        prependData: '@import "@/assets/scss/common.scss";'
       }
       }
     }
     }
   }
   }
-}
\ No newline at end of file
+};