1.任务申请时候，所属街镇的选择调在任务类型的选择上，任务描述不是必选项

2.标记疑点需要有弹框记录。与右侧我的标记联动
3.去掉所有查看按钮

public/static/plugins/js/leaflet1.3.1/leaflet.css

@@ -10,35 +10,35 @@
 .leaflet-zoom-box,
 .leaflet-image-layer,
 .leaflet-layer {
-	position: absolute;
-	left: 0;
-	top: 0;
-	}
+  position: absolute;
+  left: 0;
+  top: 0;
+}
 .leaflet-container {
-	overflow: hidden;
-	}
+  overflow: hidden;
+}
 .leaflet-tile,
 .leaflet-marker-icon,
 .leaflet-marker-shadow {
-	-webkit-user-select: none;
-	   -moz-user-select: none;
-	        user-select: none;
-	  -webkit-user-drag: none;
-	}
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  -webkit-user-drag: none;
+}
 /* Safari renders non-retina tile on retina better with this, but Chrome is worse */
 .leaflet-safari .leaflet-tile {
-	image-rendering: -webkit-optimize-contrast;
-	}
+  image-rendering: -webkit-optimize-contrast;
+}
 /* hack that prevents hw layers "stretching" when loading new tiles */
 .leaflet-safari .leaflet-tile-container {
-	width: 1600px;
-	height: 1600px;
-	-webkit-transform-origin: 0 0;
-	}
+  width: 1600px;
+  height: 1600px;
+  -webkit-transform-origin: 0 0;
+}
 .leaflet-marker-icon,
 .leaflet-marker-shadow {
-	display: block;
-	}
+  display: block;
+}
 /* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
 /* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
 .leaflet-container .leaflet-overlay-pane svg,
@@ -46,185 +46,200 @@
 .leaflet-container .leaflet-shadow-pane img,
 .leaflet-container .leaflet-tile-pane img,
 .leaflet-container img.leaflet-image-layer {
-	max-width: none !important;
-	max-height: none !important;
-	}
+  max-width: none !important;
+  max-height: none !important;
+}
 
 .leaflet-container.leaflet-touch-zoom {
-	-ms-touch-action: pan-x pan-y;
-	touch-action: pan-x pan-y;
-	}
+  -ms-touch-action: pan-x pan-y;
+  touch-action: pan-x pan-y;
+}
 .leaflet-container.leaflet-touch-drag {
-	-ms-touch-action: pinch-zoom;
-	/* Fallback for FF which doesn't support pinch-zoom */
-	touch-action: none;
-	touch-action: pinch-zoom;
+  -ms-touch-action: pinch-zoom;
+  /* Fallback for FF which doesn't support pinch-zoom */
+  touch-action: none;
+  touch-action: pinch-zoom;
 }
 .leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
-	-ms-touch-action: none;
-	touch-action: none;
+  -ms-touch-action: none;
+  touch-action: none;
 }
 .leaflet-container {
-	-webkit-tap-highlight-color: transparent;
+  -webkit-tap-highlight-color: transparent;
 }
 .leaflet-container a {
-	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
+  -webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
 }
 .leaflet-tile {
-	filter: inherit;
-	visibility: hidden;
-	}
+  filter: inherit;
+  visibility: hidden;
+}
 .leaflet-tile-loaded {
-	visibility: inherit;
-	}
+  visibility: inherit;
+}
 .leaflet-zoom-box {
-	width: 0;
-	height: 0;
-	-moz-box-sizing: border-box;
-	     box-sizing: border-box;
-	z-index: 800;
-	}
+  width: 0;
+  height: 0;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  z-index: 800;
+}
 /* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
 .leaflet-overlay-pane svg {
-	-moz-user-select: none;
-	}
+  -moz-user-select: none;
+}
 
-.leaflet-pane         { z-index: 400; }
+.leaflet-pane {
+  z-index: 400;
+}
 
-.leaflet-tile-pane    { z-index: 200; }
-.leaflet-overlay-pane { z-index: 400; }
-.leaflet-shadow-pane  { z-index: 500; }
-.leaflet-marker-pane  { z-index: 600; }
-.leaflet-tooltip-pane   { z-index: 650; }
-.leaflet-popup-pane   { z-index: 700; }
+.leaflet-tile-pane {
+  z-index: 200;
+}
+.leaflet-overlay-pane {
+  z-index: 400;
+}
+.leaflet-shadow-pane {
+  z-index: 500;
+}
+.leaflet-marker-pane {
+  z-index: 600;
+}
+.leaflet-tooltip-pane {
+  z-index: 650;
+}
+.leaflet-popup-pane {
+  z-index: 700;
+}
 
-.leaflet-map-pane canvas { z-index: 100; }
-.leaflet-map-pane svg    { z-index: 200; }
+.leaflet-map-pane canvas {
+  z-index: 100;
+}
+.leaflet-map-pane svg {
+  z-index: 200;
+}
 
 .leaflet-vml-shape {
-	width: 1px;
-	height: 1px;
-	}
+  width: 1px;
+  height: 1px;
+}
 .lvml {
-	behavior: url(#default#VML);
-	display: inline-block;
-	position: absolute;
-	}
-
+  behavior: url(#default#VML);
+  display: inline-block;
+  position: absolute;
+}
 
 /* control positioning */
 
 .leaflet-control {
-	position: relative;
-	z-index: 800;
-	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
-	pointer-events: auto;
-	}
+  position: relative;
+  z-index: 800;
+  pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
+  pointer-events: auto;
+}
 .leaflet-top,
 .leaflet-bottom {
-	position: absolute;
-	z-index: 1000;
-	pointer-events: none;
-	}
+  position: absolute;
+  z-index: 1000;
+  pointer-events: none;
+}
 .leaflet-top {
-	top: 0;
-	}
+  top: 0;
+}
 .leaflet-right {
-	right: 0;
-	}
+  right: 0;
+}
 .leaflet-bottom {
-	bottom: 0;
-	}
+  bottom: 0;
+}
 .leaflet-left {
-	left: 0;
-	}
+  left: 0;
+}
 .leaflet-control {
-	float: left;
-	clear: both;
-	}
+  float: left;
+  clear: both;
+}
 .leaflet-right .leaflet-control {
-	float: right;
-	}
+  float: right;
+}
 .leaflet-top .leaflet-control {
-	margin-top: 10px;
-	}
+  margin-top: 10px;
+}
 .leaflet-bottom .leaflet-control {
-	margin-bottom: 10px;
-	}
+  margin-bottom: 10px;
+}
 .leaflet-left .leaflet-control {
-	margin-left: 10px;
-	}
+  margin-left: 10px;
+}
 .leaflet-right .leaflet-control {
-	margin-right: 10px;
-	}
-
+  margin-right: 10px;
+}
 
 /* zoom and fade animations */
 
 .leaflet-fade-anim .leaflet-tile {
-	will-change: opacity;
-	}
+  will-change: opacity;
+}
 .leaflet-fade-anim .leaflet-popup {
-	opacity: 0;
-	-webkit-transition: opacity 0.2s linear;
-	   -moz-transition: opacity 0.2s linear;
-	     -o-transition: opacity 0.2s linear;
-	        transition: opacity 0.2s linear;
-	}
+  opacity: 0;
+  -webkit-transition: opacity 0.2s linear;
+  -moz-transition: opacity 0.2s linear;
+  -o-transition: opacity 0.2s linear;
+  transition: opacity 0.2s linear;
+}
 .leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
-	opacity: 1;
-	}
+  opacity: 1;
+}
 .leaflet-zoom-animated {
-	-webkit-transform-origin: 0 0;
-	    -ms-transform-origin: 0 0;
-	        transform-origin: 0 0;
-	}
+  -webkit-transform-origin: 0 0;
+  -ms-transform-origin: 0 0;
+  transform-origin: 0 0;
+}
 .leaflet-zoom-anim .leaflet-zoom-animated {
-	will-change: transform;
-	}
+  will-change: transform;
+}
 .leaflet-zoom-anim .leaflet-zoom-animated {
-	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
-	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
-	     -o-transition:      -o-transform 0.25s cubic-bezier(0,0,0.25,1);
-	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
-	}
+  -webkit-transition: -webkit-transform 0.25s cubic-bezier(0, 0, 0.25, 1);
+  -moz-transition: -moz-transform 0.25s cubic-bezier(0, 0, 0.25, 1);
+  -o-transition: -o-transform 0.25s cubic-bezier(0, 0, 0.25, 1);
+  transition: transform 0.25s cubic-bezier(0, 0, 0.25, 1);
+}
 .leaflet-zoom-anim .leaflet-tile,
 .leaflet-pan-anim .leaflet-tile {
-	-webkit-transition: none;
-	   -moz-transition: none;
-	     -o-transition: none;
-	        transition: none;
-	}
+  -webkit-transition: none;
+  -moz-transition: none;
+  -o-transition: none;
+  transition: none;
+}
 
 .leaflet-zoom-anim .leaflet-zoom-hide {
-	visibility: hidden;
-	}
-
+  visibility: hidden;
+}
 
 /* cursors */
 
 .leaflet-interactive {
-	cursor: pointer;
-	}
+  cursor: pointer;
+}
 .leaflet-grab {
-	cursor: -webkit-grab;
-	cursor:    -moz-grab;
-	}
+  cursor: -webkit-grab;
+  cursor: -moz-grab;
+}
 .leaflet-crosshair,
 .leaflet-crosshair .leaflet-interactive {
-	cursor: crosshair;
-	}
+  cursor: crosshair;
+}
 .leaflet-popup-pane,
 .leaflet-control {
-	cursor: auto;
-	}
+  cursor: auto;
+}
 .leaflet-dragging .leaflet-grab,
 .leaflet-dragging .leaflet-grab .leaflet-interactive,
 .leaflet-dragging .leaflet-marker-draggable {
-	cursor: move;
-	cursor: -webkit-grabbing;
-	cursor:    -moz-grabbing;
-	}
+  cursor: move;
+  cursor: -webkit-grabbing;
+  cursor: -moz-grabbing;
+}
 
 /* marker & overlays interactivity */
 .leaflet-marker-icon,
@@ -232,407 +247,401 @@
 .leaflet-image-layer,
 .leaflet-pane > svg path,
 .leaflet-tile-container {
-	pointer-events: none;
-	}
+  pointer-events: none;
+}
 
 .leaflet-marker-icon.leaflet-interactive,
 .leaflet-image-layer.leaflet-interactive,
 .leaflet-pane > svg path.leaflet-interactive {
-	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
-	pointer-events: auto;
-	}
+  pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
+  pointer-events: auto;
+}
 
 /* visual tweaks */
 
 .leaflet-container {
-	background: #ddd;
-	outline: 0;
-	}
+  background: #ddd;
+  outline: 0;
+}
 .leaflet-container a {
-	color: #0078A8;
-	}
+  color: #0078a8;
+}
 .leaflet-container a.leaflet-active {
-	outline: 2px solid orange;
-	}
+  outline: 2px solid orange;
+}
 .leaflet-zoom-box {
-	border: 2px dotted #38f;
-	background: rgba(255,255,255,0.5);
-	}
-
+  border: 2px dotted #38f;
+  background: rgba(255, 255, 255, 0.5);
+}
 
 /* general typography */
 .leaflet-container {
-	font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
-	}
-
+  font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
+}
 
 /* general toolbar styles */
 
 .leaflet-bar {
-	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
-	border-radius: 4px;
-	}
+  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
+  border-radius: 4px;
+}
 .leaflet-bar a,
 .leaflet-bar a:hover {
-	background-color: #fff;
-	border-bottom: 1px solid #ccc;
-	width: 26px;
-	height: 26px;
-	line-height: 26px;
-	display: block;
-	text-align: center;
-	text-decoration: none;
-	color: black;
-	}
+  background-color: #fff;
+  border-bottom: 1px solid #ccc;
+  width: 26px;
+  height: 26px;
+  line-height: 26px;
+  display: block;
+  text-align: center;
+  text-decoration: none;
+  color: black;
+}
 .leaflet-bar a,
 .leaflet-control-layers-toggle {
-	background-position: 50% 50%;
-	background-repeat: no-repeat;
-	display: block;
-	}
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+  display: block;
+}
 .leaflet-bar a:hover {
-	background-color: #f4f4f4;
-	}
+  background-color: #f4f4f4;
+}
 .leaflet-bar a:first-child {
-	border-top-left-radius: 4px;
-	border-top-right-radius: 4px;
-	}
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+}
 .leaflet-bar a:last-child {
-	border-bottom-left-radius: 4px;
-	border-bottom-right-radius: 4px;
-	border-bottom: none;
-	}
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+  border-bottom: none;
+}
 .leaflet-bar a.leaflet-disabled {
-	cursor: default;
-	background-color: #f4f4f4;
-	color: #bbb;
-	}
+  cursor: default;
+  background-color: #f4f4f4;
+  color: #bbb;
+}
 
 .leaflet-touch .leaflet-bar a {
-	width: 30px;
-	height: 30px;
-	line-height: 30px;
-	}
+  width: 30px;
+  height: 30px;
+  line-height: 30px;
+}
 .leaflet-touch .leaflet-bar a:first-child {
-	border-top-left-radius: 2px;
-	border-top-right-radius: 2px;
-	}
+  border-top-left-radius: 2px;
+  border-top-right-radius: 2px;
+}
 .leaflet-touch .leaflet-bar a:last-child {
-	border-bottom-left-radius: 2px;
-	border-bottom-right-radius: 2px;
-	}
+  border-bottom-left-radius: 2px;
+  border-bottom-right-radius: 2px;
+}
 
 /* zoom control */
 
 .leaflet-control-zoom-in,
 .leaflet-control-zoom-out {
-	font: bold 18px 'Lucida Console', Monaco, monospace;
-	text-indent: 1px;
-	}
-
-.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
-	font-size: 22px;
-	}
+  font: bold 18px "Lucida Console", Monaco, monospace;
+  text-indent: 1px;
+}
 
+.leaflet-touch .leaflet-control-zoom-in,
+.leaflet-touch .leaflet-control-zoom-out {
+  font-size: 22px;
+}
 
 /* layers control */
 
 .leaflet-control-layers {
-	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
-	background: #fff;
-	border-radius: 5px;
-	}
+  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
+  background: #fff;
+  border-radius: 5px;
+}
 .leaflet-control-layers-toggle {
-	background-image: url(images/layers.png);
-	width: 36px;
-	height: 36px;
-	}
+  background-image: url(images/layers.png);
+  width: 36px;
+  height: 36px;
+}
 .leaflet-retina .leaflet-control-layers-toggle {
-	background-image: url(images/layers-2x.png);
-	background-size: 26px 26px;
-	}
+  background-image: url(images/layers-2x.png);
+  background-size: 26px 26px;
+}
 .leaflet-touch .leaflet-control-layers-toggle {
-	width: 44px;
-	height: 44px;
-	}
+  width: 44px;
+  height: 44px;
+}
 .leaflet-control-layers .leaflet-control-layers-list,
 .leaflet-control-layers-expanded .leaflet-control-layers-toggle {
-	display: none;
-	}
+  display: none;
+}
 .leaflet-control-layers-expanded .leaflet-control-layers-list {
-	display: block;
-	position: relative;
-	}
+  display: block;
+  position: relative;
+}
 .leaflet-control-layers-expanded {
-	padding: 6px 10px 6px 6px;
-	color: #333;
-	background: #fff;
-	}
+  padding: 6px 10px 6px 6px;
+  color: #333;
+  background: #fff;
+}
 .leaflet-control-layers-scrollbar {
-	overflow-y: scroll;
-	overflow-x: hidden;
-	padding-right: 5px;
-	}
+  overflow-y: scroll;
+  overflow-x: hidden;
+  padding-right: 5px;
+}
 .leaflet-control-layers-selector {
-	margin-top: 2px;
-	position: relative;
-	top: 1px;
-	}
+  margin-top: 2px;
+  position: relative;
+  top: 1px;
+}
 .leaflet-control-layers label {
-	display: block;
-	}
+  display: block;
+}
 .leaflet-control-layers-separator {
-	height: 0;
-	border-top: 1px solid #ddd;
-	margin: 5px -10px 5px -6px;
-	}
+  height: 0;
+  border-top: 1px solid #ddd;
+  margin: 5px -10px 5px -6px;
+}
 
 /* Default icon URLs */
 .leaflet-default-icon-path {
-	background-image: url(images/marker-icon.png);
-	}
-
+  background-image: url(images/marker-icon.png);
+}
 
 /* attribution and scale controls */
 
 .leaflet-container .leaflet-control-attribution {
-	background: #fff;
-	background: rgba(255, 255, 255, 0.7);
-	margin: 0;
-	}
+  background: #fff;
+  background: rgba(255, 255, 255, 0.7);
+  margin: 0;
+}
 .leaflet-control-attribution,
 .leaflet-control-scale-line {
-	padding: 0 5px;
-	color: #333;
-	}
+  padding: 0 5px;
+  color: #333;
+}
 .leaflet-control-attribution a {
-	text-decoration: none;
-	}
+  text-decoration: none;
+}
 .leaflet-control-attribution a:hover {
-	text-decoration: underline;
-	}
+  text-decoration: underline;
+}
 .leaflet-container .leaflet-control-attribution,
 .leaflet-container .leaflet-control-scale {
-	font-size: 11px;
-	}
+  font-size: 11px;
+}
 .leaflet-left .leaflet-control-scale {
-	margin-left: 5px;
-	}
+  margin-left: 5px;
+}
 .leaflet-bottom .leaflet-control-scale {
-	margin-bottom: 5px;
-	}
+  margin-bottom: 5px;
+}
 .leaflet-control-scale-line {
-	border: 2px solid #777;
-	border-top: none;
-	line-height: 1.1;
-	padding: 2px 5px 1px;
-	font-size: 11px;
-	white-space: nowrap;
-	overflow: hidden;
-	-moz-box-sizing: border-box;
-	     box-sizing: border-box;
-
-	background: #fff;
-	background: rgba(255, 255, 255, 0.5);
-	}
+  border: 2px solid #777;
+  border-top: none;
+  line-height: 1.1;
+  padding: 2px 5px 1px;
+  font-size: 11px;
+  white-space: nowrap;
+  overflow: hidden;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+
+  background: #fff;
+  background: rgba(255, 255, 255, 0.5);
+}
 .leaflet-control-scale-line:not(:first-child) {
-	border-top: 2px solid #777;
-	border-bottom: none;
-	margin-top: -2px;
-	}
+  border-top: 2px solid #777;
+  border-bottom: none;
+  margin-top: -2px;
+}
 .leaflet-control-scale-line:not(:first-child):not(:last-child) {
-	border-bottom: 2px solid #777;
-	}
+  border-bottom: 2px solid #777;
+}
 
 .leaflet-touch .leaflet-control-attribution,
 .leaflet-touch .leaflet-control-layers,
 .leaflet-touch .leaflet-bar {
-	box-shadow: none;
-	}
+  box-shadow: none;
+}
 .leaflet-touch .leaflet-control-layers,
 .leaflet-touch .leaflet-bar {
-	border: 2px solid rgba(0,0,0,0.2);
-	background-clip: padding-box;
-	}
-
+  border: 2px solid rgba(0, 0, 0, 0.2);
+  background-clip: padding-box;
+}
 
 /* popup */
 
 .leaflet-popup {
-	position: absolute;
-	text-align: center;
-	margin-bottom: 20px;
-	}
+  position: absolute;
+  text-align: center;
+  margin-bottom: 20px;
+}
 .leaflet-popup-content-wrapper {
-	/* padding: 1px; */
-	text-align: left;
-	border-radius: 12px;
-	}
+  /* padding: 1px; */
+  text-align: left;
+  border-radius: 12px;
+}
 .leaflet-popup-content {
-	line-height: 1.4;
-	min-width: 300px;
-	height: 320px;
-	min-height: 320px;
-	}
+  line-height: 1.4;
+  min-width: 300px;
+  height: 320px;
+  min-height: 320px;
+}
 .leaflet-popup-content p {
-	margin: 18px 0;
-	}
+  margin: 18px 0;
+}
 .leaflet-popup-tip-container {
-	width: 40px;
-	height: 20px;
-	position: absolute;
-	left: 50%;
-	margin-left: -20px;
-	overflow: hidden;
-	pointer-events: none;
-	}
+  width: 40px;
+  height: 20px;
+  position: absolute;
+  left: 50%;
+  margin-left: -20px;
+  overflow: hidden;
+  pointer-events: none;
+}
 .leaflet-popup-tip {
-	width: 17px;
-	height: 17px;
-	padding: 1px;
-
-	margin: -10px auto 0;
-
-	-webkit-transform: rotate(45deg);
-	   -moz-transform: rotate(45deg);
-	    -ms-transform: rotate(45deg);
-	     -o-transform: rotate(45deg);
-	        transform: rotate(45deg);
-	}
+  width: 17px;
+  height: 17px;
+  padding: 1px;
+
+  margin: -10px auto 0;
+
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  -o-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
 .leaflet-popup-content-wrapper,
 .leaflet-popup-tip {
-	background: white;
-	color: #333;
-	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
-	}
+  background: white;
+  color: #333;
+  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
+}
 .leaflet-container a.leaflet-popup-close-button {
-	position: absolute;
-	top: 0;
-	right: 0;
-	padding: 4px 4px 0 0;
-	border: none;
-	text-align: center;
-	width: 18px;
-	height: 14px;
-	font: 16px/14px Tahoma, Verdana, sans-serif;
-	color: #c3c3c3;
-	text-decoration: none;
-	font-weight: bold;
-	background: transparent;
-	}
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 4px 4px 0 0;
+  border: none;
+  text-align: center;
+  width: 18px;
+  height: 14px;
+  font: 16px/14px Tahoma, Verdana, sans-serif;
+  color: #c3c3c3;
+  text-decoration: none;
+  font-weight: bold;
+  background: transparent;
+}
 .leaflet-container a.leaflet-popup-close-button:hover {
-	color: #999;
-	}
+  color: #999;
+}
 .leaflet-popup-scrolled {
-	overflow: auto;
-	border-bottom: 1px solid #ddd;
-	border-top: 1px solid #ddd;
-	}
+  overflow: auto;
+  border-bottom: 1px solid #ddd;
+  border-top: 1px solid #ddd;
+}
 
 .leaflet-oldie .leaflet-popup-content-wrapper {
-	zoom: 1;
-	}
+  zoom: 1;
+}
 .leaflet-oldie .leaflet-popup-tip {
-	width: 24px;
-	margin: 0 auto;
+  width: 24px;
+  margin: 0 auto;
 
-	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
-	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
-	}
+  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
+  filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
+}
 .leaflet-oldie .leaflet-popup-tip-container {
-	margin-top: -1px;
-	}
+  margin-top: -1px;
+}
 
 .leaflet-oldie .leaflet-control-zoom,
 .leaflet-oldie .leaflet-control-layers,
 .leaflet-oldie .leaflet-popup-content-wrapper,
 .leaflet-oldie .leaflet-popup-tip {
-	border: 1px solid #999;
-	}
-
+  border: 1px solid #999;
+}
 
 /* div icon */
 
 .leaflet-div-icon {
-	background: #fff;
-	border: 1px solid #666;
-	}
-
+  background: #fff;
+  border: 1px solid #666;
+}
 
 /* Tooltip */
 /* Base styles for the element that has a tooltip */
 .leaflet-tooltip {
-	position: absolute;
-	padding: 6px;
-	background-color: #fff;
-	border: 1px solid #fff;
-	border-radius: 3px;
-	color: #222;
-	white-space: nowrap;
-	-webkit-user-select: none;
-	-moz-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-	pointer-events: none;
-	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
-	}
+  position: absolute;
+  padding: 6px;
+  background-color: #fff;
+  border: 1px solid #fff;
+  border-radius: 3px;
+  color: #222;
+  white-space: nowrap;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  pointer-events: none;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+}
 .leaflet-tooltip.leaflet-clickable {
-	cursor: pointer;
-	pointer-events: auto;
-	}
+  cursor: pointer;
+  pointer-events: auto;
+}
 .leaflet-tooltip-top:before,
 .leaflet-tooltip-bottom:before,
 .leaflet-tooltip-left:before,
 .leaflet-tooltip-right:before {
-	position: absolute;
-	pointer-events: none;
-	border: 6px solid transparent;
-	background: transparent;
-	content: "";
-	}
+  position: absolute;
+  pointer-events: none;
+  border: 6px solid transparent;
+  background: transparent;
+  content: "";
+}
 
 /* Directions */
 
 .leaflet-tooltip-bottom {
-	margin-top: 6px;
+  margin-top: 6px;
 }
 .leaflet-tooltip-top {
-	margin-top: -6px;
+  margin-top: -6px;
 }
 .leaflet-tooltip-bottom:before,
 .leaflet-tooltip-top:before {
-	left: 50%;
-	margin-left: -6px;
-	}
+  left: 50%;
+  margin-left: -6px;
+}
 .leaflet-tooltip-top:before {
-	bottom: 0;
-	margin-bottom: -12px;
-	border-top-color: #fff;
-	}
+  bottom: 0;
+  margin-bottom: -12px;
+  border-top-color: #fff;
+}
 .leaflet-tooltip-bottom:before {
-	top: 0;
-	margin-top: -12px;
-	margin-left: -6px;
-	border-bottom-color: #fff;
-	}
+  top: 0;
+  margin-top: -12px;
+  margin-left: -6px;
+  border-bottom-color: #fff;
+}
 .leaflet-tooltip-left {
-	margin-left: -6px;
+  margin-left: -6px;
 }
 .leaflet-tooltip-right {
-	margin-left: 6px;
+  margin-left: 6px;
 }
 .leaflet-tooltip-left:before,
 .leaflet-tooltip-right:before {
-	top: 50%;
-	margin-top: -6px;
-	}
+  top: 50%;
+  margin-top: -6px;
+}
 .leaflet-tooltip-left:before {
-	right: 0;
-	margin-right: -12px;
-	border-left-color: #fff;
-	}
+  right: 0;
+  margin-right: -12px;
+  border-left-color: #fff;
+}
 .leaflet-tooltip-right:before {
-	left: 0;
-	margin-left: -12px;
-	border-right-color: #fff;
-	}
+  left: 0;
+  margin-left: -12px;
+  border-right-color: #fff;
+}

src/assets/global.css

@@ -291,6 +291,7 @@ body iframe {
   position: fixed;
   left: 21%;
 }
+
 /* ChartCard组件中的Empty组件样式 */
 .el-empty {
   width: 100%;

src/components/common/BottomForm/CreateTaskForm.vue

@@ -1,35 +1,84 @@
 <template>
   <!-- 申请任务弹窗 -->
-  <el-dialog :visible.sync="dialogVisible" :show-close="false" width="400px" :before-close="handleClose">
+  <el-dialog
+    :visible.sync="dialogVisible"
+    :show-close="false"
+    width="400px"
+    :before-close="handleClose"
+  >
     <template slot="title">
       <div class="dialogTitle">
         <div class="dialogTitleIcon"></div>
         新建任务
       </div>
     </template>
-    <el-form ref="createTaskForm" :model="createTaskForm" :rules="createTaskRrules" label-width="80px">
+    <el-form
+      ref="createTaskForm"
+      :model="createTaskForm"
+      :rules="createTaskRrules"
+      label-width="80px"
+    >
       <el-form-item label="任务名称" prop="taskName">
-        <el-input v-model="createTaskForm.taskName" placeholder="请输入任务名称"></el-input>
+        <el-input
+          v-model="createTaskForm.taskName"
+          placeholder="请输入任务名称"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="所属街道" prop="streetOfOwnership">
+        <el-select
+          v-model="createTaskForm.streetOfOwnership"
+          filterable
+          placeholder="请选择"
+          width="100%"
+        >
+          <el-option
+            v-for="item in streetOfOwnershipOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
       </el-form-item>
       <el-form-item label="任务类型" prop="taskType">
-        <el-select v-model="createTaskForm.taskType" filterable placeholder="请选择" width="100%">
-          <el-option-group v-for="group in taskTypeOptions" :key="group.label" :label="group.label">
-            <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+        <el-select
+          v-model="createTaskForm.taskType"
+          filterable
+          placeholder="请选择"
+          width="100%"
+        >
+          <el-option-group
+            v-for="group in taskTypeOptions"
+            :key="group.label"
+            :label="group.label"
+          >
+            <el-option
+              v-for="item in group.options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
           </el-option-group>
         </el-select>
       </el-form-item>
       <el-form-item label="关联项目" prop="associatedItems">
-        <el-select v-model="createTaskForm.associatedItems" filterable placeholder="请选择" width="100%">
-          <el-option v-for="item in associatedItemsOptions" :key="item.value" :label="item.label" :value="item.value">
-          </el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="所属街道" prop="streetOfOwnership">
-        <el-select v-model="createTaskForm.streetOfOwnership" filterable placeholder="请选择" width="100%">
-          <el-option v-for="item in streetOfOwnershipOptions" :key="item.value" :label="item.label" :value="item.value">
+        <el-select
+          v-model="createTaskForm.associatedItems"
+          filterable
+          placeholder="请选择"
+          width="100%"
+        >
+          <el-option
+            v-for="item in associatedItemsOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
           </el-option>
         </el-select>
       </el-form-item>
+
       <el-form-item label="任务描述" prop="taskDescription">
         <el-input
           type="textarea"
@@ -42,7 +91,9 @@
     </el-form>
     <span slot="footer" class="dialog-footer">
       <el-button @click="clearDialogVisible('createTaskForm')">取 消</el-button>
-      <el-button type="primary" @click="subMitDialogVisible('createTaskForm')">确 定</el-button>
+      <el-button type="primary" @click="subMitDialogVisible('createTaskForm')"
+        >确 定</el-button
+      >
     </span>
   </el-dialog>
 </template>
@@ -66,21 +117,43 @@ export default {
         taskType: "",
         associatedItems: "",
         streetOfOwnership: "",
-        taskDescription: ""
+        taskDescription: "",
       },
       // 新建任务form表单校验
       createTaskRrules: {
         taskName: [
           { required: true, message: "请输入活动名称", trigger: "blur" },
-          { min: 3, max: 20, message: "长度在 3 到 20 个字符", trigger: "blur" }
+          {
+            min: 3,
+            max: 20,
+            message: "长度在 3 到 20 个字符",
+            trigger: "blur",
+          },
         ],
-        taskType: { required: true, message: "请选择任务类型", trigger: "change" },
-        associatedItems: { required: true, message: "请选择关联项目", trigger: "change" },
-        streetOfOwnership: { required: true, message: "请选择所属街道", trigger: "change" },
+        taskType: {
+          required: true,
+          message: "请选择任务类型",
+          trigger: "change",
+        },
+        associatedItems: {
+          required: true,
+          message: "请选择关联项目",
+          trigger: "change",
+        },
+        streetOfOwnership: {
+          required: true,
+          message: "请选择所属街道",
+          trigger: "change",
+        },
         taskDescription: [
-          { required: true, message: "请输入任务描述", trigger: "blur" },
-          { min: 1, max: 255, message: "长度在 1 到 255 个字符", trigger: "blur" }
-        ]
+          { required: false, message: "请输入任务描述", trigger: "blur" },
+          {
+            min: 1,
+            max: 255,
+            message: "长度在 1 到 255 个字符",
+            trigger: "blur",
+          },
+        ],
       },
       // 任务类型options
       taskTypeOptions: [
@@ -89,79 +162,79 @@ export default {
           options: [
             {
               value: "all",
-              label: "全部类型"
-            }
-          ]
+              label: "全部类型",
+            },
+          ],
         },
         {
           label: "基本类型",
           options: [
             {
               value: "landResources",
-              label: "土地资源"
+              label: "土地资源",
             },
             {
               value: "ecologicalResources",
-              label: "生态资源"
+              label: "生态资源",
             },
             {
               value: "forestLandResources",
-              label: "林地资源"
+              label: "林地资源",
             },
             {
               value: "waterResources",
-              label: "水资源"
+              label: "水资源",
             },
             {
               value: "townAreaTopic",
-              label: "镇域专题"
-            }
-          ]
+              label: "镇域专题",
+            },
+          ],
         },
         {
           label: "土地资源",
           options: [
             {
               value: "lr_bfm",
-              label: "基本农田监控"
+              label: "基本农田监控",
             },
             {
               value: "lr_soclr",
-              label: "建设用地减量化监管"
-            }
-          ]
-        }
+              label: "建设用地减量化监管",
+            },
+          ],
+        },
       ],
       // 关联项目options
       associatedItemsOptions: [
         {
           value: "1",
-          label: "项目1"
+          label: "项目1",
         },
         {
           value: "2",
-          label: "项目2"
-        }
+          label: "项目2",
+        },
       ],
       // 所属街道Options
       streetOfOwnershipOptions: [
         {
           value: "0",
-          label: "全部街道"
+          label: "全部街道",
         },
         {
           value: "1",
-          label: "花木街道"
+          label: "花木街道",
         },
         {
           value: "2",
-          label: "陆家嘴街道"
+          label: "陆家嘴街道",
         },
         {
           value: "3",
-          label: "……"
-        }
-      ]
+          label: "……",
+        },
+      ],
     };
   },
   mounted() {
@@ -196,10 +269,10 @@ export default {
     handleClose() {
       if (this.dialogVisible) {
         this.$confirm("确认关闭？")
-          .then(_ => {
+          .then((_) => {
             this.clearDialogVisible("createTaskForm");
           })
-          .catch(_ => {});
+          .catch((_) => {});
       }
     },
     // 申请任务取消
@@ -214,18 +287,18 @@ export default {
     // 申请任务提交
     subMitDialogVisible(formName) {
       // 表单校验
-      this.$refs[formName].validate(valid => {
+      this.$refs[formName].validate((valid) => {
         if (valid) {
           console.log("申请任务提交表单内容：", this.createTaskForm);
           this.$confirm("您已成功提交任务，请等待管理员审核。", "系统提示", {
             confirmButtonText: "确定",
             cancelButtonText: "撤回",
-            type: "success"
+            type: "success",
           })
             .then(() => {
               this.$message({
                 type: "success",
-                message: "提交成功!"
+                message: "提交成功!",
               });
               // 检验成功后关闭弹窗
               this.clearDialogVisible(formName);
@@ -233,15 +306,15 @@ export default {
             .catch(() => {
               this.$message({
                 type: "info",
-                message: "已撤回提交!"
+                message: "已撤回提交!",
               });
             });
         } else {
           return false;
         }
       });
-    }
+    },
   },
-  watch: {}
+  watch: {},
 };
 </script>

src/components/common/BottomForm/MyMission.vue

@@ -16,20 +16,47 @@
     </template>
     <el-form :inline="true" ref="myTaskForm" :model="formInline">
       <el-form-item label="任务类型">
-        <el-select size="mini" v-model="formInline.taskType" placeholder="任务类型">
-          <el-option-group v-for="group in taskTypeOptions" :key="group.label" :label="group.label">
-            <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+        <el-select
+          size="mini"
+          v-model="formInline.taskType"
+          placeholder="任务类型"
+        >
+          <el-option-group
+            v-for="group in taskTypeOptions"
+            :key="group.label"
+            :label="group.label"
+          >
+            <el-option
+              v-for="item in group.options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
           </el-option-group>
         </el-select>
       </el-form-item>
       <el-form-item label="关联项目">
-        <el-select size="mini" v-model="formInline.associatedItems" placeholder="关联项目">
-          <el-option v-for="item in associatedItemsOptions" :key="item.value" :label="item.label" :value="item.value">
+        <el-select
+          size="mini"
+          v-model="formInline.associatedItems"
+          placeholder="关联项目"
+        >
+          <el-option
+            v-for="item in associatedItemsOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
           </el-option>
         </el-select>
       </el-form-item>
       <el-form-item label="审计状态">
-        <el-select size="mini" v-model="formInline.auditStatus" placeholder="审计状态">
+        <el-select
+          size="mini"
+          v-model="formInline.auditStatus"
+          placeholder="审计状态"
+        >
           <el-option label="已审核" value="ReviewedAndApproved"></el-option>
           <el-option label="未审核" value="NotReviewed"></el-option>
         </el-select>
@@ -39,22 +66,27 @@
         <el-button @click="resetForm()">重置</el-button>
       </el-form-item>
     </el-form>
-    <el-table :data="tableData" style="width: 100%" height="calc(80vh - 400px)" stripe>
+    <el-table
+      :data="tableData"
+      style="width: 100%"
+      height="calc(80vh - 400px)"
+      stripe
+      @click="ToView"
+    >
       <el-table-column type="index" width="50"> </el-table-column>
       <el-table-column prop="taskId" label="任务编号"> </el-table-column>
       <el-table-column prop="taskName" label="任务名称"> </el-table-column>
       <el-table-column prop="createDate" label="创建时间"> </el-table-column>
       <el-table-column prop="state" label="状态">
         <template slot-scope="scope">
-          <el-tag :type="scope.row.state === '已审核' ? 'success' : 'info'" disable-transitions>{{ scope.row.state }}</el-tag>
+          <el-tag
+            :type="scope.row.state === '已审核' ? 'success' : 'info'"
+            disable-transitions
+            >{{ scope.row.state }}</el-tag
+          >
         </template>
       </el-table-column>
       <el-table-column prop="taskType" label="任务类型"> </el-table-column>
-      <el-table-column fixed="right" label="操作">
-        <template slot-scope="scope">
-          <el-button size="mini" icon="el-icon-search" @click="ToView(scope.$index, tableData)">查看</el-button>
-        </template>
-      </el-table-column>
     </el-table>
     <span slot="footer" class="dialog-footer">
       <Pagination :paginationData="paginationData" />
@@ -80,7 +112,7 @@ export default {
       formInline: {
         taskType: "",
         associatedItems: "",
-        auditStatus: ""
+        auditStatus: "",
       },
       // 分页组件（根据后台返回结果赋值）
       paginationData: {
@@ -89,12 +121,12 @@ export default {
         pageSizes: [5, 10, 20, 50],
         total: 200,
         currentPage: 1,
-        currentChange: val => {
+        currentChange: (val) => {
           this.handleCurrentChange(val);
         },
-        handleSizeChange: val => {
+        handleSizeChange: (val) => {
           this.handleSizeChange(val);
-        }
+        },
       },
       // 任务类型options
       taskTypeOptions: [
@@ -103,59 +135,59 @@ export default {
           options: [
             {
               value: "all",
-              label: "全部类型"
-            }
-          ]
+              label: "全部类型",
+            },
+          ],
         },
         {
           label: "基本类型",
           options: [
             {
               value: "landResources",
-              label: "土地资源"
+              label: "土地资源",
             },
             {
               value: "ecologicalResources",
-              label: "生态资源"
+              label: "生态资源",
             },
             {
               value: "forestLandResources",
-              label: "林地资源"
+              label: "林地资源",
             },
             {
               value: "waterResources",
-              label: "水资源"
+              label: "水资源",
             },
             {
               value: "townAreaTopic",
-              label: "镇域专题"
-            }
-          ]
+              label: "镇域专题",
+            },
+          ],
         },
         {
           label: "土地资源",
           options: [
             {
               value: "lr_bfm",
-              label: "基本农田监控"
+              label: "基本农田监控",
             },
             {
               value: "lr_soclr",
-              label: "建设用地减量化监管"
-            }
-          ]
-        }
+              label: "建设用地减量化监管",
+            },
+          ],
+        },
       ],
       // 关联项目options
       associatedItemsOptions: [
         {
           value: "1",
-          label: "项目1"
+          label: "项目1",
         },
         {
           value: "2",
-          label: "项目2"
-        }
+          label: "项目2",
+        },
       ],
       // 我的任务form表单
       tableData: [
@@ -164,37 +196,37 @@ export default {
           taskName: "任务名称",
           taskId: "任务编号",
           state: "已审核",
-          taskType: "土地资源"
+          taskType: "土地资源",
         },
         {
           createDate: "2016-05-03",
           taskName: "任务名称",
           taskId: "任务编号",
           state: "未审核",
-          taskType: "土地资源"
+          taskType: "土地资源",
         },
         {
           createDate: "2016-05-03",
           taskName: "任务名称",
           taskId: "任务编号",
           state: "已审核",
-          taskType: "土地资源"
+          taskType: "土地资源",
         },
         {
           createDate: "2016-05-03",
           taskName: "任务名称",
           taskId: "任务编号",
           state: "已审核",
-          taskType: "土地资源"
+          taskType: "土地资源",
         },
         {
           createDate: "2016-05-03",
           taskName: "任务名称",
           taskId: "任务编号",
           state: "已审核",
-          taskType: "土地资源"
-        }
-      ]
+          taskType: "土地资源",
+        },
+      ],
     };
   },
   mounted() {
@@ -235,13 +267,13 @@ export default {
       this.formInline = {
         taskType: "",
         associatedItems: "",
-        auditStatus: ""
+        auditStatus: "",
       };
       this.onSubmit();
     },
-    // 查看
-    ToView(index, rows) {
-      console.log(rows, index);
+    // 单击table item
+    ToView(val) {
+      console.log(val, "click MyMission table item");
     },
     // 当用户点击svg底座时，切换底部菜单显示隐藏状态。
     changeShowBottomMenusStatus() {
@@ -257,10 +289,10 @@ export default {
     handleClose() {
       if (this.dialogVisible) {
         this.$confirm("确认关闭？")
-          .then(_ => {
+          .then((_) => {
             this.clearDialogVisible();
           })
-          .catch(_ => {});
+          .catch((_) => {});
       }
     },
     // 我的任务取消
@@ -269,8 +301,8 @@ export default {
       this.dialogVisible = false;
       // 修改父级菜单变量（弹窗显示状态和显示底部菜单）
       this.$emit("changeShowBottomMenusStatus", true);
-    }
+    },
   },
-  watch: {}
+  watch: {},
 };
 </script>

src/components/map/BasemapChange.vue

@@ -88,7 +88,7 @@ export default {
     },
     menuChange: {
       handler(val) {
-        console.log(val, "切换底图组件 -- 监听当前菜单");
+        // console.log(val, "切换底图组件 -- 监听当前菜单");
         if (val === "镇域专题") {
           this.$store.state.baseMapRight = 40;
         } else if (val === "土地资源") {

src/components/map/MapHolder.vue

@@ -1,6 +1,7 @@
 <template>
   <div id="map2DViewer">
-    <CaseAuditPopup v-show="auditPopupShow" ref="auditPopup" />
+    <CaseAuditPopup v-show="auditPopupShow" ref="auditRef" />
+    <LabelCasePopup v-show="labelDetailsPopupShow" ref="labelRef" />
     <BasemapChange />
   </div>
 </template>
@@ -17,12 +18,19 @@ export default {
     return {
       // 卷帘对比开关
       JLControlShowStatus: false,
+
       town: "祝桥镇,南汇新城镇,川沙新镇,老港镇,惠南镇,航头镇,泥城镇,书院镇,新场镇,大团镇,唐镇,曹路镇,宣桥镇,张江镇,合庆镇,周浦镇,康桥镇,三林镇,高桥镇,高东镇,金桥镇,北蔡镇,万祥镇,高行镇",
       auditPopupShow: false,
+      labelDetailsPopupShow: false,
       auditPopupStatus: "normal",
       popup: null,
+      labelPopup: null,
+      // 疑点审计
       currentCid: null,
       currentHtml: null,
+      // 标记疑点
+      currentLabelCid: null,
+      currentLabelHtml: null,
     };
   },
   mounted() {
@@ -36,11 +44,7 @@ export default {
 
     //地图初始化
     this.mapInit();
-    // 初始化绘制工具
-    // 可视化区域图
-    this.getJSonData();
-    // 地图常用渲染方法
-    // console.log(this.$store.state.mapMethodsCollection,"methods");
+
     this.$store.state.mapMethodsCollection.set("RENDER", {
       addPolygonLayer: this.addPolygonLayer,
       setView: this.setView,
@@ -54,13 +58,17 @@ export default {
     this.$bus.$off("caseAuditEvent");
   },
   computed: {
-    // 获取标记疑点按钮的状态
+    // 监听底部菜单栏的状态
     getLabelCaseBtnStatus() {
       //疑点审计 1,0
       let index = this.$store.state.bottomMenuIndexs.index;
       let subIndex = this.$store.state.bottomMenuIndexs.subIndex;
       return { index, subIndex };
     },
+    // 监听当前菜单
+    getCurrentMenu() {
+      return this.$store.state.navSelect;
+    },
   },
   watch: {
     getLabelCaseBtnStatus(val) {
@@ -73,6 +81,21 @@ export default {
         this.stopLabelCase();
       }
     },
+    getCurrentMenu: {
+      handler(val) {
+        console.log(val, "currentMenu -- test");
+        if (val.index !== "3") {
+          this.stopLabelCase();
+          this.$store.state.bottomMenuIndexs.index = -1;
+          this.$store.state.bottomMenuIndexs.subIndex = -1;
+        }
+        // 切换页面时判断是否需要显示区域图
+        this.$nextTick(() => {
+          this.getJSonData();
+        });
+      },
+      immediate: true,
+    },
   },
   methods: {
     // 开始标记疑点事件
@@ -85,15 +108,15 @@ export default {
         action: "remove",
       });
     },
-    // 地图弹窗修改
-    createDynamicDiv(str) {
+    // 常规图层弹窗
+    createAuditDiv(str) {
       // 相关属性数据
       // 表格里的数据
-      let popuppef = this.$refs.auditPopup;
+      let popuppef = this.$refs.auditRef;
       let tableArr = popuppef.tableArr;
-      console.log(tableArr, "shuju");
+      // console.log(tableArr, "shuju");
       // 根据ref获取组件的dom元素
-      this.currentHtml = this.$refs.auditPopup.$el.innerHTML;
+      this.currentHtml = this.$refs.auditRef.$el.innerHTML;
       console.log($(`#${str}_id`), "8888");
       if (this.currentHtml) {
         let div = document.createElement("div");
@@ -126,13 +149,64 @@ export default {
         return div;
       }
     },
+    /**
+     * 标记疑点完成时保存描述信息的弹窗
+     * @str -- id
+     * @coord -- 坐标信息
+     * @data -- 其余数据
+     */
+    createLabelDiv(str, coord, data) {
+      console.log(str, "label - str");
+      this.currentLabelHtml = this.$refs.labelRef.$el.innerHTML;
+      if (this.currentLabelHtml) {
+        let div = document.createElement("div");
+        div.id = `${str}_id`;
+        div.className = "label-case";
+        // 动态创建div后赋值模板样式
+        div.innerHTML = this.currentLabelHtml;
+        $(() => {
+          console.log($(`#${str}_id textarea`).val(), "textarea");
+          $(`#${str}_id`).css("height", "100%");
+          $(`#${str}_id input`).click((e) => {
+            console.log(e.target.defaultValue);
+            switch (e.target.defaultValue) {
+              case "删除":
+                this.deleteBtnEvent(str);
+                break;
+              case "保存":
+                this.saveBtnEvent(str, coord, data);
+                break;
+            }
+          });
+        });
+        return div;
+      }
+    },
     modifyBtnEvent() {
       console.log("用户点击了地图中的修改按钮！");
     },
     confirmBtnEvent() {
       console.log("用户点击地图中的确认按钮");
     },
+    deleteBtnEvent() {
+      console.log("delete btn");
+    },
 
+    // 点击保存事件时保存点数据
+    saveBtnEvent(str, coord, data) {
+      console.log("save btn");
+      let type = $(`#${str}_id select`).val();
+      let des = $(`#${str}_id textarea`).val();
+
+      this.$store.state.myLabelPointsArr.push({
+        id: publicFun.buildGuid("myLabel"),
+        coord: coord,
+        type: type,
+        des: des,
+        data: data,
+      });
+      map2DViewer.map.closePopup();
+    },
     // 卷帘对比
     JLControl() {
       this.JLControlShowStatus = !this.JLControlShowStatus;
@@ -157,7 +231,7 @@ export default {
       if (this.currentHtml && this.currentCid) {
         setTimeout(() => {
           this.popup
-            .setContent(this.createDynamicDiv(this.currentCid))
+            .setContent(this.createAuditDiv(this.currentCid))
             .openOn(map2DViewer.map);
         }, 300);
       }
@@ -165,8 +239,19 @@ export default {
     // 初始化引入绘制工具
     initDraw() {
       // 引入疑点标记绘制方法
-      map2DViewer.drawToolFire = function (data) {
-        console.log(data, "绘制的图形");
+      map2DViewer.drawToolFire = (data) => {
+        // 纬经度
+        if (data.points.length > 0) {
+          console.log(data.points[data.points.length - 1], "绘制的图形");
+          let coord = data.points[data.points.length - 1];
+          let newCoord = { lat: coord[0], lng: coord[1] };
+          this.labelDetailsPopupShow = true;
+          this.labelPopup = L.popup({ maxWidth: 700, maxHeight: 600 })
+            .setLatLng(newCoord)
+            .setContent(this.createLabelDiv("label", coord, data))
+            .openOn(map2DViewer.map);
+          this.labelDetailsPopupShow = false;
+        }
       };
       map2DViewer.setDrawTool({
         action: "add",
@@ -225,34 +310,46 @@ export default {
       let imageryLayer = L.tileLayer(systemConfig.imageryLayer);
       map2DViewer.layers["imagery"] = imageryLayer;
     },
-    // 读取浦东新区GeoJSON格式的区域数据
+    // 传入街道参数，重新渲染区域图层
+    getJSonDataToStreet(url, param) {
+      // 先删除历史图层
+      if (map2DViewer.map.hasLayer(map2DViewer.groups["district_polygon"])) {
+        map2DViewer.groups["district_label"].remove();
+        map2DViewer.groups["district_polygon"].remove();
+      }
+      // 请求并渲染新的区域图层
+      get("./static/json/pdgeojson.json", "").then((geoJson) => {
+        map2DViewer.groups["district_polygon"] = L.featureGroup();
+        map2DViewer.groups["district_label"] = L.featureGroup();
+        // console.log(map2DViewer.groups["district_polygon"], "district_polygon group");
+        map2DViewer.groups["district_polygon"].addTo(map2DViewer.map);
+        map2DViewer.groups["district_label"].addTo(map2DViewer.map);
+        geoJson.features.map((feature) => {
+          if (
+            this.town.indexOf(feature.properties.NAME.replace("镇", "")) > -1
+          ) {
+            let center = turf.center(feature.geometry);
+            this.renderPolygon(feature);
+          }
+        });
+      });
+    },
     getJSonData() {
       if (!map2DViewer.map) {
         this.mapInit();
-      } else {
-        get("./static/json/pdgeojson.json", "").then((geoJson) => {
-          map2DViewer.groups["district_polygon"] = L.featureGroup();
-          map2DViewer.groups["district_label"] = L.featureGroup();
-          // console.log(map2DViewer.groups["district_polygon"], "district_polygon group");
-          map2DViewer.groups["district_polygon"].addTo(map2DViewer.map);
-          map2DViewer.groups["district_label"].addTo(map2DViewer.map);
-          geoJson.features.map((feature) => {
-            if (
-              this.town.indexOf(feature.properties.NAME.replace("镇", "")) > -1
-            ) {
-              let center = turf.center(feature.geometry);
-              this.renderPolygon(feature);
-            }
-          });
-
-          // map2DViewer.groups["district_label"].remove()
-          // map2DViewer.groups["district_label"].addTo(map2DViewer.map)
-
-          // map2DViewer.groups["district_polygon"].setStyle({
-          //   opacity: 0,
-          //   fillOpacity: 0,
-          // });
-        });
+      } else if (
+        // 切换到首页和疑点筛查页且图层不存在时重新渲染区域图
+        (this.$ifMenu("1", "") || this.$ifMenu("2", "")) &&
+        !map2DViewer.map.hasLayer(map2DViewer.groups["district_polygon"])
+      ) {
+        this.getJSonDataToStreet("", "");
+      } else if (
+        !(this.$ifMenu("1", "") || this.$ifMenu("2", "")) &&
+        map2DViewer.map.hasLayer(map2DViewer.groups["district_polygon"])
+      ) {
+        // 当前页不是首页和疑点筛查页时移除区域图且图层存在时
+        map2DViewer.groups["district_label"].remove();
+        map2DViewer.groups["district_polygon"].remove();
       }
     },
     setView: function (coord, zoom) {
@@ -340,17 +437,17 @@ export default {
         polygon.on("click", (e) => {
           // console.log(e, "polygon");
           this.auditPopupShow = true;
+          console.log(e.latlng, "获取当前弹窗坐标111");
 
           this.popup = L.popup({ maxWidth: 700, maxHeight: 600 })
             .setLatLng(e.latlng)
-            .setContent(this.createDynamicDiv("cid"));
+            .setContent(this.createAuditDiv("cid"));
           // .openOn(map2DViewer.map);
           this.auditPopupShow = false;
           this.popup.openOn(map2DViewer.map);
           this.currentCid = cid;
         });
       });
-      // console.log(map2DViewer.polygons[`${cid}_layer`]);
     },
 
     //综合分析 - 标记疑点 - 删除面

src/components/popup/AttributePopup.vue

@@ -4,18 +4,26 @@
     :style="{ width: boxWidth + 'px', height: boxHeight + 'px' }"
   >
     <div class="close-btn" @click="closeEvent"></div>
-    <el-table :header-cell-style="{'text-align':'center'}" :data="tableData" v-if="tableType === 'normal'" height="100%">
-      
+    <el-table
+      :header-cell-style="{ 'text-align': 'center' }"
+      :data="tableData"
+      v-if="tableType === 'normal'"
+      height="100%"
+    >
       <el-table-column label="版本" prop="version"></el-table-column>
       <el-table-column label="shape-long" prop="long"></el-table-column>
       <el-table-column label="shape-area" prop="area"></el-table-column>
-      <el-table-column label="性质" prop="nature" align="center"></el-table-column>
+      <el-table-column
+        label="性质"
+        prop="nature"
+        align="center"
+      ></el-table-column>
       <el-table-column label="面积" prop="area"></el-table-column>
     </el-table>
-    <el-table height="100%" v-if="tableType === 'personal'">
-      <el-table-column label="名称"></el-table-column>
-      <el-table-column label="类别"></el-table-column>
-      <el-table-column label="描述"></el-table-column>
+    <el-table height="100%" v-if="tableType === 'personal'" :data="tableData">
+      <el-table-column label="名称" prop="name"></el-table-column>
+      <el-table-column label="类别" prop="type"></el-table-column>
+      <el-table-column label="描述" prop="des"></el-table-column>
     </el-table>
   </div>
 </template>

src/components/popup/LabelCasePopup.vue

@@ -1,23 +1,18 @@
 <template>
-  <MenuCard class="label-case" :menuData="menuData">
+  <MenuCard class="label-case" :menuData="menuData" v-drag>
     <div class="label-case-inner">
       <div class="top">
         <div class="top-title">标记点分类 :</div>
-        <NewSelect
-          v-model="selectVal"
-          :options="selectOptions"
-          :value="selectVal"
-        />
+        <select class="top-select">
+          <option value="土地资源">土地资源</option>
+          <option value="林业资源">林业资源</option>
+          <option value="水资源">水资源</option>
+        </select>
       </div>
       <div class="center">
         <div class="center-title">描述:</div>
-        <div>
-          <el-input
-            type="textarea"
-            :rows="5"
-            placeholder="请输入详细信息"
-            v-model="textarea"
-          ></el-input>
+        <div class="center-text">
+          <textarea placeholder="请输入详细信息"></textarea>
         </div>
       </div>
       <div class="footer">
@@ -43,8 +38,8 @@ export default {
       menuData: {
         type: "chart",
         title: "添加标记",
-        boxWidth: "436",
-        boxHeight: "341",
+        boxWidth: "500",
+        boxHeight: "361",
       },
       selectVal: "土地资源",
       selectOptions: [
@@ -76,35 +71,62 @@ export default {
 </script>
 <style lang="less" scoped>
 .label-case {
+  position: relative;
   cursor: auto;
   &-inner {
-    width: 90%;
+    width: 100%;
     height: 100%;
     font-size: 16px;
     font-family: PingFang SC;
     font-weight: 300;
     color: #e6e6e6;
-    margin: 0 auto;
     // line-height: 36px;
     .top {
       height: 15%;
+      width: 100%;
       display: flex;
       align-items: center;
+      justify-content: flex-start;
       &-title {
-        width: 30%;
+        width: 35%;
+        height: 100%;
+        line-height: 37px;
+      }
+      &-select {
+        width: 60%;
+        height: 30px;
+        border: 1px solid #818ca4;
+        border-radius: 4px;
+        background: transparent;
+        color: rgba(230, 230, 230, 1);
+        cursor: pointer;
+        &:focus {
+          border: none;
+          border-radius: 1px;
+        }
+        option {
+          cursor: pointer;
+          background-color: rgba(0, 39, 77, 0.8);
+          box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
+          border: 1px solid rgba(47, 184, 255, 0.7);
+        }
       }
     }
     .center {
       height: 65%;
+      width: 100%;
       &-title {
+        width: 100%;
+        height: 40px;
         line-height: 40px;
       }
-      /deep/ .el-textarea__inner {
-        color: #f2f6fc;
-        font-family: PingFang SC;
-        font-weight: 300;
-        color: #e6e6e6;
-        font-size: 16px;
+      &-text {
+        width: 100%;
+        height: calc(95% - 50px);
+        & textarea {
+          width: 100%;
+          height: 100%;
+        }
       }
     }
     .footer {

src/components/popup/LawPopup.vue

@@ -81,7 +81,7 @@
         highlight-current-row
         style="width: 100%"
         :data="tableData"
-        @current-change="handleCurrentChange"
+        @current-change="handleRowChange"
       >
         <el-table-column prop="name" label="名称" align="center">
         </el-table-column>
@@ -184,7 +184,7 @@ export default {
       this.lawDetailsPopupShow = false;
     },
     // 选中当前行
-    handleCurrentChange(val) {
+    handleRowChange(val) {
       console.log(val, "currentRow");
       this.currentRow = val;
       this.lawDetailsPopupShow = true;

src/store/index.js

@@ -30,6 +30,8 @@ export default new Vuex.Store({
     lawPopupShow: false,
     // 底图切换距离右侧的位置
     baseMapRight: 23,
+    // 我的标记中的疑点数据
+    myLabelPointsArr: [],
   },
   getters: {
     customModelsArr: (state) => state.customModelsArr,
@@ -71,6 +73,9 @@ export default new Vuex.Store({
     changeModelStatus: (state, data) => {
       state.modelStatus = data;
     },
+    changeMyLabelData: (state, data) => {
+      state.myLabelPointsArr = data;
+    },
   },
   actions: {},
   modules: {},

src/utils/request.js

@@ -1,4 +1,5 @@
-// import Vue from 'vue'
+import Vue from 'vue'
+import store from "../store";
 import axios from 'axios'
 import {
   VueAxios

src/views/ComprehensiveAnalysis.vue

@@ -207,37 +207,36 @@ export default {
       activeNames: ["myLabel"],
       rightPanelTitle: "",
       rightPanelDataMap: new Map(),
-      // rightLabelDataMap: new Map(),
       originalData: {},
       rightLabelData: [
-        {
-          id: publicFun.buildGuid(),
-          name: "疑点1",
-        },
-        {
-          id: publicFun.buildGuid(),
-          name: "疑点2",
-        },
-        {
-          id: publicFun.buildGuid(),
-          name: "疑点3",
-        },
-        {
-          id: publicFun.buildGuid(),
-          name: "疑点4",
-        },
-        {
-          id: publicFun.buildGuid(),
-          name: "疑点5",
-        },
-        {
-          id: publicFun.buildGuid(),
-          name: "疑点6",
-        },
-        {
-          id: publicFun.buildGuid(),
-          name: "疑点7",
-        },
+        // {
+        //   id: publicFun.buildGuid(),
+        //   name: "疑点1",
+        // },
+        // {
+        //   id: publicFun.buildGuid(),
+        //   name: "疑点2",
+        // },
+        // {
+        //   id: publicFun.buildGuid(),
+        //   name: "疑点3",
+        // },
+        // {
+        //   id: publicFun.buildGuid(),
+        //   name: "疑点4",
+        // },
+        // {
+        //   id: publicFun.buildGuid(),
+        //   name: "疑点5",
+        // },
+        // {
+        //   id: publicFun.buildGuid(),
+        //   name: "疑点6",
+        // },
+        // {
+        //   id: publicFun.buildGuid(),
+        //   name: "疑点7",
+        // },
       ],
       // searchInput: "",,
       showLeftBox: true,
@@ -258,6 +257,8 @@ export default {
       treeIdMap: new Map(),
       isLeftLock: true,
       isRightLock: true,
+      // firstPolygon: null,
+      // coordinates: null,
     };
   },
   computed: {
@@ -267,6 +268,9 @@ export default {
     getLeftMenuTitle() {
       return this.$store.state.leftMenuTitle;
     },
+    getMyLabelData() {
+      return this.$store.state.myLabelPointsArr;
+    },
   },
   watch: {
     getLeftMenuTitle: {
@@ -276,6 +280,9 @@ export default {
             console.log(val, "678");
             // 设置默认勾选项
             this.$refs.tree.setCheckedKeys([this.treeIdMap.get(val)]);
+            // this.$store.state.mapMethodsCollection
+            //   .get("RENDER")
+            //   .setView(coordinates, 16);
           }
         });
       },
@@ -317,6 +324,25 @@ export default {
       },
       deep: true,
     },
+    getMyLabelData: {
+      handler(val) {
+        // console.log(val, "获取我的疑点数组");
+        if (val.length > 0) {
+          this.rightLabelData = val.map((v, i) => {
+            return {
+              id: v.id,
+              name: `疑点 ${i}`,
+              coord: v.coord,
+              data: v.data,
+              type: v.type,
+              des: v.des,
+            };
+          });
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
   },
   created() {
     this.modelData = [];
@@ -351,6 +377,7 @@ export default {
 
     // console.log(this.treeIdMap, "treeIdMap");
   },
+
   mounted() {
     map2DViewer.map.on("move", (e) => {
       if (!this.isLeftLock) {
@@ -363,11 +390,28 @@ export default {
         this.rightBoxBtn = true;
       }
     });
+
+    // console.log(
+    //   map2DViewer.groups["district_polygon"],
+    //   "检测是否存在地区图层group"
+    // );
+
+    // if (map2DViewer.groups["district_polygon"]) {
+    //   map2DViewer.groups["district_polygon"].remove();
+    //   map2DViewer.groups["district_label"].remove();
+    // }
+    // 不显示区域图
+    // if (map2DViewer.groups["district_polygon"].remove()) {
+    //   map2DViewer.groups["district_polygon"].remove();
+    //   map2DViewer.groups["district_label"].remove();
+    // }
   },
   beforeDestroy() {
     // 销毁前清空存放tree ID 的map
     this.treeIdMap.clear();
     map2DViewer.map.off("move");
+    // map2DViewer.groups["district_polygon"].addTo(map2DViewer.map);
+    // map2DViewer.groups["district_label"].addTo(map2DViewer.map);
   },
   methods: {
     // 回退事件
@@ -487,14 +531,14 @@ export default {
       });
     },
     listItemClick(type, data) {
-      let coord = data.geometry.coordinates[0][0][0];
-      this.$store.state.mapMethodsCollection.get("RENDER").setView(coord, 16);
-      this.tableData = [];
       // data
       // id: "default_1669007689253APblgwSrDZlV1kSFim";
       // name: "疑点1";
       this.attrTableShow = true;
+      this.tableData = [];
       if (type === "default") {
+        let coord = data.geometry.coordinates[0][0][0];
+        this.$store.state.mapMethodsCollection.get("RENDER").setView(coord, 16);
         this.tableType = "normal";
         this.boxWidth = "600";
         this.boxHeight = "200";
@@ -505,21 +549,21 @@ export default {
           area: data.properties["面积"],
           long: data.properties["周长"] || "--",
         });
-        // this.tableData = data.map((v) => {
-        //   return {
-        //     version:v.properties['版本'],
-        //     nature:v.properties['性质'],
-        //     area:v.properties['面积'],
-        //     long:v.properties['周长'] || "--"
-        //   };
-        // });
         console.log(this.tableData);
       }
       if (type === "new") {
         this.tableType = "personal";
         this.boxWidth = "300";
         this.boxHeight = "300";
-        // console.log(data, "newTable");
+        this.$store.state.mapMethodsCollection
+          .get("RENDER")
+          .setView(data.coord, 16);
+        this.tableData.push({
+          name: data.name,
+          type:data.type,
+          des:data.des
+        });
+        console.log(data, "myLabelTable");
       }
     },
     closeEvent() {

src/views/LawView.vue

@@ -42,7 +42,7 @@
         <div class="query-btn" @click="queryEvent">查询</div>
       </div>
       <div class="center">
-        <el-table :data="tableData" style="width: 100%">
+        <el-table :data="tableData" style="width: 100%" @current-change="handleClick">
           <el-table-column type="index" width="70"> </el-table-column>
           <el-table-column prop="code" label="编号" align="center" width="150">
           </el-table-column>
@@ -52,13 +52,6 @@
           </el-table-column>
           <el-table-column prop="date" label="日期" align="center">
           </el-table-column>
-          <el-table-column label="操作" align="center">
-            <template slot-scope="scope">
-              <el-button @click="handleClick(scope.row)" size="small"
-                >查看</el-button
-              >
-            </template>
-          </el-table-column>
         </el-table>
       </div>
       <div class="footer">