diff --git a/src/assets/images/activeTab.png b/src/assets/images/activeTab.png
new file mode 100644
index 0000000..d8eecd2
Binary files /dev/null and b/src/assets/images/activeTab.png differ
diff --git a/src/assets/images/icon6.png b/src/assets/images/icon6.png
new file mode 100644
index 0000000..05a20c9
Binary files /dev/null and b/src/assets/images/icon6.png differ
diff --git a/src/assets/styles/ruoyi.scss b/src/assets/styles/ruoyi.scss
index db8c29b..4a10260 100644
--- a/src/assets/styles/ruoyi.scss
+++ b/src/assets/styles/ruoyi.scss
@@ -1,129 +1,141 @@
- /**
+/**
  * 通用css样式布局处理
  * Copyright (c) 2019 ruoyi
  */
 
- /** 基础通用 **/
+/** 基础通用 **/
 .pt5 {
-	padding-top: 5px;
+  padding-top: 5px;
 }
 .pr5 {
-	padding-right: 5px;
+  padding-right: 5px;
 }
 .pb5 {
-	padding-bottom: 5px;
+  padding-bottom: 5px;
 }
 .mt5 {
-	margin-top: 5px;
+  margin-top: 5px;
 }
 .mr5 {
-	margin-right: 5px;
+  margin-right: 5px;
 }
 .mb5 {
-	margin-bottom: 5px;
+  margin-bottom: 5px;
 }
 .mb8 {
-	margin-bottom: 8px;
+  margin-bottom: 8px;
 }
 .ml5 {
-	margin-left: 5px;
+  margin-left: 5px;
 }
 .mt10 {
-	margin-top: 10px;
+  margin-top: 10px;
 }
 .mr10 {
-	margin-right: 10px;
+  margin-right: 10px;
 }
 .mb10 {
-	margin-bottom: 10px;
+  margin-bottom: 10px;
 }
 .ml10 {
-	margin-left: 10px;
+  margin-left: 10px;
 }
 .mt20 {
-	margin-top: 20px;
+  margin-top: 20px;
 }
 .mr20 {
-	margin-right: 20px;
+  margin-right: 20px;
 }
 .mb20 {
-	margin-bottom: 20px;
+  margin-bottom: 20px;
 }
 .ml20 {
-	margin-left: 20px;
+  margin-left: 20px;
 }
 
-.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
-	font-family: inherit;
-	font-weight: 500;
-	line-height: 1.1;
-	color: inherit;
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: inherit;
+  font-weight: 500;
+  line-height: 1.1;
+  color: inherit;
 }
 
-.el-message-box__status + .el-message-box__message{
-    word-break: break-word;
+.el-message-box__status + .el-message-box__message {
+  word-break: break-word;
 }
 
 .el-dialog:not(.is-fullscreen) {
-	margin-top: 6vh !important;
+  margin-top: 6vh !important;
 }
 
 .el-dialog__wrapper.scrollbar .el-dialog .el-dialog__body {
-    overflow: auto;
-	overflow-x: hidden;
-	max-height: 70vh;
-	padding: 10px 20px 0;
+  overflow: auto;
+  overflow-x: hidden;
+  max-height: 70vh;
+  padding: 10px 20px 0;
 }
 
 .el-table {
-	.el-table__header-wrapper, .el-table__fixed-header-wrapper {
-		th {
-			word-break: break-word;
-			background-color: #f8f8f9;
-			color: #515a6e;
-			height: 40px;
-			font-size: 13px;
-		}
-	}
-	.el-table__body-wrapper {
-		.el-button [class*="el-icon-"] + span {
-			margin-left: 1px;
-		}
-	}
+  .el-table__header-wrapper,
+  .el-table__fixed-header-wrapper {
+    th {
+      word-break: break-word;
+      background-color: #f8f8f9;
+      color: #515a6e;
+      height: 40px;
+      font-size: 13px;
+    }
+  }
+  .el-table__body-wrapper {
+    .el-button [class*="el-icon-"] + span {
+      margin-left: 1px;
+    }
+  }
 }
 
 /** 表单布局 **/
 .form-header {
-    font-size:15px;
-	color:#6379bb;
-	border-bottom:1px solid #ddd;
-	margin:8px 10px 25px 10px;
-	padding-bottom:5px
+  font-size: 15px;
+  color: #6379bb;
+  border-bottom: 1px solid #ddd;
+  margin: 8px 10px 25px 10px;
+  padding-bottom: 5px;
 }
 
 /** 表格布局 **/
 .pagination-container {
-	position: relative;
-	height: 25px;
-	margin-bottom: 10px;
-	margin-top: 15px;
-	padding: 10px 20px !important;
+  position: relative;
+  height: 25px;
+  margin-bottom: 10px;
+  margin-top: 15px;
+  padding: 10px 20px !important;
 }
 
 /* tree border */
 .tree-border {
-    margin-top: 5px;
-    border: 1px solid #e5e6e7;
-    background: #FFFFFF none;
-    border-radius:4px;
+  margin-top: 5px;
+  border: 1px solid #e5e6e7;
+  background: #ffffff none;
+  border-radius: 4px;
 }
 
 .pagination-container .el-pagination {
-	right: 0;
-	position: absolute;
+  right: 0;
+  position: absolute;
 }
 
-@media ( max-width : 768px) {
+@media (max-width: 768px) {
   .pagination-container .el-pagination > .el-pagination__jump {
     display: none !important;
   }
@@ -133,145 +145,147 @@
 }
 
 .el-table .fixed-width .el-button--mini {
-	padding-left: 0;
-	padding-right: 0;
-	width: inherit;
+  padding-left: 0;
+  padding-right: 0;
+  width: inherit;
 }
 
 /** 表格更多操作下拉样式 */
-.el-table .el-dropdown-link,.el-table .el-dropdown-selfdefine {
-	cursor: pointer;
-	margin-left: 5px;
+.el-table .el-dropdown-link,
+.el-table .el-dropdown-selfdefine {
+  cursor: pointer;
+  margin-left: 5px;
 }
 
-.el-table .el-dropdown, .el-icon-arrow-down {
-	font-size: 12px;
+.el-table .el-dropdown,
+.el-icon-arrow-down {
+  font-size: 12px;
 }
 
 .el-tree-node__content > .el-checkbox {
-	margin-right: 8px;
+  margin-right: 8px;
 }
 
 .list-group-striped > .list-group-item {
-	border-left: 0;
-	border-right: 0;
-	border-radius: 0;
-	padding-left: 0;
-	padding-right: 0;
+  border-left: 0;
+  border-right: 0;
+  border-radius: 0;
+  padding-left: 0;
+  padding-right: 0;
 }
 
 .list-group {
-	padding-left: 0px;
-	list-style: none;
+  padding-left: 0px;
+  list-style: none;
 }
 
 .list-group-item {
-	border-bottom: 1px solid #e7eaec;
-	border-top: 1px solid #e7eaec;
-	margin-bottom: -1px;
-	padding: 11px 0px;
-	font-size: 13px;
+  border-bottom: 1px solid #e7eaec;
+  border-top: 1px solid #e7eaec;
+  margin-bottom: -1px;
+  padding: 11px 0px;
+  font-size: 13px;
 }
 
 .pull-right {
-	float: right !important;
+  float: right !important;
 }
 
 .el-card__header {
-	padding: 14px 15px 7px;
-	min-height: 40px;
+  padding: 14px 15px 7px;
+  min-height: 40px;
 }
 
 .el-card__body {
-	padding: 15px 20px 20px 20px;
+  padding: 15px 20px 20px 20px;
 }
 
 .card-box {
-	padding-right: 15px;
-	padding-left: 15px;
-	margin-bottom: 10px;
+  padding-right: 15px;
+  padding-left: 15px;
+  margin-bottom: 10px;
 }
 
 /* button color */
 .el-button--cyan.is-active,
 .el-button--cyan:active {
-  background: #20B2AA;
-  border-color: #20B2AA;
-  color: #FFFFFF;
+  background: #20b2aa;
+  border-color: #20b2aa;
+  color: #ffffff;
 }
 
 .el-button--cyan:focus,
 .el-button--cyan:hover {
-  background: #48D1CC;
-  border-color: #48D1CC;
-  color: #FFFFFF;
+  background: #48d1cc;
+  border-color: #48d1cc;
+  color: #ffffff;
 }
 
 .el-button--cyan {
-  background-color: #20B2AA;
-  border-color: #20B2AA;
-  color: #FFFFFF;
+  background-color: #20b2aa;
+  border-color: #20b2aa;
+  color: #ffffff;
 }
 
 /* text color */
 .text-navy {
-	color: #1ab394;
+  color: #1ab394;
 }
 
 .text-primary {
-	color: inherit;
+  color: inherit;
 }
 
 .text-success {
-	color: #1c84c6;
+  color: #1c84c6;
 }
 
 .text-info {
-	color: #23c6c8;
+  color: #23c6c8;
 }
 
 .text-warning {
-	color: #f8ac59;
+  color: #f8ac59;
 }
 
 .text-danger {
-	color: #ed5565;
+  color: #ed5565;
 }
 
 .text-muted {
-	color: #888888;
+  color: #888888;
 }
 
 /* image */
 .img-circle {
-	border-radius: 50%;
+  border-radius: 50%;
 }
 
 .img-lg {
-	width: 120px;
-	height: 120px;
+  width: 120px;
+  height: 120px;
 }
 
 .avatar-upload-preview {
-	position: relative;
-	top: 50%;
-	left: 50%;
-	transform: translate(-50%, -50%);
-	width: 200px;
-	height: 200px;
-	border-radius: 50%;
-	box-shadow: 0 0 4px #ccc;
-	overflow: hidden;
+  position: relative;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 200px;
+  height: 200px;
+  border-radius: 50%;
+  box-shadow: 0 0 4px #ccc;
+  overflow: hidden;
 }
 
 /* 拖拽列样式 */
-.sortable-ghost{
-	opacity: .8;
-	color: #fff!important;
-	background: #42b983!important;
+.sortable-ghost {
+  opacity: 0.8;
+  color: #fff !important;
+  background: #42b983 !important;
 }
 
 .top-right-btn {
-	position: relative;
-	float: right;
+  position: relative;
+  float: right;
 }
diff --git a/src/utils/mapJson/point.json b/src/utils/mapJson/point.json
index 1972a99..20b339c 100644
--- a/src/utils/mapJson/point.json
+++ b/src/utils/mapJson/point.json
@@ -172,6 +172,17 @@
         ],
         "type": "Point"
       }
+    },
+    {
+      "type": "Feature",
+      "properties": {"name":"沿街商铺分布"},
+      "geometry": {
+        "coordinates": [
+          118.82115278916302,
+          31.914036628233447
+        ],
+        "type": "Point"
+      }
     }
   ]
 }
\ No newline at end of file
diff --git a/src/views/bigScreen/components/mapCentre.vue b/src/views/bigScreen/components/mapCentre.vue
index 4d074f4..e98db3e 100644
--- a/src/views/bigScreen/components/mapCentre.vue
+++ b/src/views/bigScreen/components/mapCentre.vue
@@ -9,62 +9,60 @@
 <template>
   <div class="map-middle">
     <div class="middle-middle">
-      <img src="@/assets/images/action-left.png" alt="">
-      <img src="@/assets/images/action-right.png" alt="">
+      <img src="@/assets/images/action-left.png" alt="" />
+      <img src="@/assets/images/action-right.png" alt="" />
     </div>
     <div class="middle-top-left">
       <div class="input-keyword">
-        <el-input
-          placeholder="请输入关键字"
-          v-model="input">
+        <el-input placeholder="请输入关键字" v-model="input">
           <i slot="suffix" class="el-icon-search" @click="search"></i>
         </el-input>
       </div>
       <div class="laser-positioning" @click="positioning()">
         <span>地图扎点</span>
-        <img src="@/assets/images/positioning.png" alt="">
+        <img src="@/assets/images/positioning.png" alt="" />
       </div>
       <div class="creation-task" @click="createdTask()">
         <span>任务创建</span>
-        <img src="@/assets/images/createdTask.png" alt="">
+        <img src="@/assets/images/createdTask.png" alt="" />
       </div>
     </div>
     <div class="middle-bottom-left">
       <div class="list" @click="changeMap(1)">
-        <div class="leftbg" :class="actionMap == 1 ? 'action-map':''">
-          <img src="@/assets/images/icon1.png" alt="">
+        <div class="leftbg" :class="actionMap == 1 ? 'action-map' : ''">
+          <img src="@/assets/images/icon1.png" alt="" />
         </div>
         <div class="rightbg" v-show="actionMap == 1">
           <span>执法人员</span>
         </div>
       </div>
       <div class="list" @click="changeMap(2)">
-        <div class="leftbg" :class="actionMap == 2 ? 'action-map':''">
-          <img src="@/assets/images/icon2.png" alt="">
+        <div class="leftbg" :class="actionMap == 2 ? 'action-map' : ''">
+          <img src="@/assets/images/icon2.png" alt="" />
         </div>
         <div class="rightbg" v-show="actionMap == 2">
           <span>普通事件</span>
         </div>
       </div>
       <div class="list" @click="changeMap(2)">
-        <div class="leftbg" :class="actionMap == 2 ? 'action-map':''">
-          <img src="@/assets/images/icon3.png" alt="">
+        <div class="leftbg" :class="actionMap == 2 ? 'action-map' : ''">
+          <img src="@/assets/images/icon3.png" alt="" />
         </div>
         <div class="rightbg" v-show="actionMap == 2">
           <span>重点事件</span>
         </div>
       </div>
       <div class="list" @click="changeMap(3)">
-        <div class="leftbg" :class="actionMap == 3 ? 'action-map':''">
-          <img src="@/assets/images/icon4.png" alt="">
+        <div class="leftbg" :class="actionMap == 3 ? 'action-map' : ''">
+          <img src="@/assets/images/icon4.png" alt="" />
         </div>
         <div class="rightbg" v-show="actionMap == 3">
           <span>执法车辆</span>
         </div>
       </div>
       <div class="list" @click="changeMap(4)">
-        <div class="leftbg" :class="actionMap == 4 ? 'action-map':''">
-          <img src="@/assets/images/icon5.png" alt="">
+        <div class="leftbg" :class="actionMap == 4 ? 'action-map' : ''">
+          <img src="@/assets/images/icon5.png" alt="" />
         </div>
         <div class="rightbg" v-show="actionMap == 4">
           <span>监控视频</span>
@@ -73,8 +71,12 @@
     </div>
     <div class="middle-bottom-right">
       <div class="btn-action">
-        <span :class="action == 1? 'action':''" @click="actionBtn(1)">电子地图</span>
-        <span :class="action == 2? 'action':''" @click="actionBtn(2)">卫星地图</span>
+        <span :class="action == 1 ? 'action' : ''" @click="actionBtn(1)"
+          >电子地图</span
+        >
+        <span :class="action == 2 ? 'action' : ''" @click="actionBtn(2)"
+          >卫星地图</span
+        >
       </div>
     </div>
     <personage-track ref="personageTrack"></personage-track>
@@ -83,48 +85,44 @@
   </div>
 </template>
 <script>
-import personageTrack from "../../components/personagetrack/index.vue"
-import crewAssign from "../../components/crewAssign/index.vue"
-import videoWall from "../../components/videoWall/index.vue"
+import personageTrack from "../../components/personagetrack/index.vue";
+import crewAssign from "../../components/crewAssign/index.vue";
+import videoWall from "../../components/videoWall/index.vue";
 export default {
-  components:{personageTrack,crewAssign,videoWall},
+  components: { personageTrack, crewAssign, videoWall },
   data() {
     return {
-      action:1,
-      lawExecutor:true,               // 执法人员
-      generalEvent:false,             // 普通事件
-      emphasisEvent:false,            // 重点事件
-      lawCar:false,                   // 执法车辆
-      surveillanceVideo:false,        // 监控视频
-      input:'',                       // 输入框的值
-      actionMap:1,                    // 默认选中执法人员地图
-    }
+      action: 1,
+      lawExecutor: true, // 执法人员
+      generalEvent: false, // 普通事件
+      emphasisEvent: false, // 重点事件
+      lawCar: false, // 执法车辆
+      surveillanceVideo: false, // 监控视频
+      input: "", // 输入框的值
+      actionMap: 1, // 默认选中执法人员地图
+    };
   },
-  methods:{
-    actionBtn(id){
+  methods: {
+    actionBtn(id) {
       this.action = id;
-      console.log(id)
-      this.$emit('actionBtn',id);
-      if(id == 1){
+      console.log(id);
+      this.$emit("actionBtn", id);
+      if (id == 1) {
         this.$refs.personageTrack.open();
       } else {
         this.$refs.crewAssign.open();
       }
     },
     // 输入框的搜索框点击事件
-    search(){
-      
-    },
+    search() {},
     // 创建任务的点击事件
-    createdTask(){
-
-    },
+    createdTask() {},
     // 地图扎点的点击事件
-    positioning(){
+    positioning() {
       this.$refs.videoWall.open();
     },
     // 切换地图事件
-    changeMap(id){
+    changeMap(id) {
       // 往左切换
       // if(id == 1) {
       //   this.actionMap <= 1 ? this.actionMap = 4 : this.actionMap--
@@ -133,10 +131,10 @@ export default {
       //   this.actionMap >= 4 ? this.actionMap = 1 : this.actionMap++
       // }
       this.actionMap = id;
-      this.$emit('actionMap',this.actionMap);
+      this.$emit("actionMap", this.actionMap);
     },
   },
-}
+};
 </script>
 <style lang="scss" scoped>
 ::v-deep .el-dialog:not(.is-fullscreen) {
@@ -168,10 +166,10 @@ export default {
     display: flex;
     .input-keyword {
       ::v-deep .el-input {
-        background: rgba(0,60,116,0.2);
-        box-shadow: inset 0px 0px 6px 0px #00C2FF;
+        background: rgba(0, 60, 116, 0.2);
+        box-shadow: inset 0px 0px 6px 0px #00c2ff;
         border-radius: 2px;
-        border: 1px solid rgba(181,207,255,0.5);
+        border: 1px solid rgba(181, 207, 255, 0.5);
         .el-input__inner {
           background-color: transparent;
           width: 222px;
@@ -182,30 +180,31 @@ export default {
         .el-input__inner::placeholder {
           /* 在这里添加你想要修改的 placeholder 样式 */
           font-size: 14px;
-          font-family: 'Source Han Sans CN-Regular';
+          font-family: "Source Han Sans CN-Regular";
           font-weight: 400;
-          color: #D3EEF2;
+          color: #d3eef2;
           line-height: 20px;
         }
       }
       ::v-deep .el-input__suffix {
         line-height: 44px;
-        color: #D3EEF2;
+        color: #d3eef2;
         right: 10px;
         cursor: pointer;
         .el-icon-search:before {
           font-size: 24px;
-          color: #D3EEF2;
+          color: #d3eef2;
         }
       }
     }
-    .laser-positioning,.creation-task {
+    .laser-positioning,
+    .creation-task {
       // height: 38px;
       margin-left: 8px;
-      background: rgba(0,60,116,0.6);
-      box-shadow: inset 0px 0px 6px 0px #00C2FF;
+      background: rgba(0, 60, 116, 0.6);
+      box-shadow: inset 0px 0px 6px 0px #00c2ff;
       border-radius: 2px;
-      border: 1px solid rgba(181,207,255,0.5);
+      border: 1px solid rgba(181, 207, 255, 0.5);
       display: flex;
       align-items: center;
       justify-content: center;
@@ -213,9 +212,9 @@ export default {
       cursor: pointer;
       span {
         font-size: 14px;
-        font-family: 'Source Han Sans CN-Regular';
+        font-family: "Source Han Sans CN-Regular";
         font-weight: 400;
-        color: #D3EEF2;
+        color: #d3eef2;
         line-height: 20px;
         margin-right: 12px;
       }
@@ -232,7 +231,7 @@ export default {
     padding: 5px 10px;
     display: flex;
     flex-direction: column;
-    .list{
+    .list {
       margin-top: 10px;
       display: flex;
       align-items: center;
@@ -240,7 +239,7 @@ export default {
         display: flex;
         align-items: center;
         justify-content: center;
-        background-image: url('../../../assets/images/iconbg2.png');
+        background-image: url("../../../assets/images/iconbg2.png");
         background-size: 100% 100%;
         width: 36px;
         height: 36px;
@@ -250,29 +249,28 @@ export default {
         }
       }
       .action-map {
-        background-image: url('../../../assets/images/iconbg1.png');
+        background-image: url("../../../assets/images/iconbg1.png");
       }
       .rightbg {
         padding-left: 6px;
         margin-left: 2px;
-        background-image: url('../../../assets/images/right-icon.png');
+        background-image: url("../../../assets/images/right-icon.png");
         width: 115px;
         height: 36px;
         display: flex;
         align-items: center;
         span {
           font-size: 16px;
-          font-family: 'Source Han Sans CN-Bold';
+          font-family: "Source Han Sans CN-Bold";
           font-weight: 700;
-          color: #FFFFFF;
+          color: #ffffff;
           line-height: 26px;
-          text-shadow: 0px 0px 5px #0077FF;
+          text-shadow: 0px 0px 5px #0077ff;
         }
       }
     }
   }
   .middle-bottom-right {
-    
     .btn-action {
       display: flex;
       span {
@@ -281,25 +279,25 @@ export default {
         text-align: center;
         padding: 10px 33px;
         font-size: 16px;
-        font-family: 'Source Han Sans CN-Regular';
+        font-family: "Source Han Sans CN-Regular";
         font-weight: 400;
-        color: #D3EEF2;
+        color: #d3eef2;
         cursor: pointer;
         background: transparent;
-        box-shadow: inset 0px 0px 6px 0px #00C2FF;
+        box-shadow: inset 0px 0px 6px 0px #00c2ff;
         border-radius: 2px 2px 2px 2px;
         opacity: 1;
-        border: 1px solid rgba(181,207,255,0.5);
+        border: 1px solid rgba(181, 207, 255, 0.5);
         &:nth-child(1) {
           margin-right: 10px;
         }
       }
       .action {
         color: #fff;
-        background-color: rgba(255,125,64,0.8);
-        box-shadow: inset 0px 0px 13px 0px #F6B463;
+        background-color: rgba(255, 125, 64, 0.8);
+        box-shadow: inset 0px 0px 13px 0px #f6b463;
         border-radius: 2px 2px 2px 2px;
-        border: 1px solid rgba(181,207,255,0.5);
+        border: 1px solid rgba(181, 207, 255, 0.5);
       }
     }
   }
diff --git a/src/views/bigScreen/map/index.vue b/src/views/bigScreen/map/index.vue
index 803d440..568ea2f 100644
--- a/src/views/bigScreen/map/index.vue
+++ b/src/views/bigScreen/map/index.vue
@@ -9,79 +9,118 @@
         <map-left></map-left>
       </div>
     </transition>
-    
-    <img :src="leftAnimationData ? require('@/assets/images/action-left.png'):require('@/assets/images/action-right.png')" alt="" :class="!leftAnimationData ? 'left-image2':'left-image'"  @click="leftAnimation()">
-    <div class="middle-top-left" :class="!leftAnimationData ? 'middle-top-left2':'middle-top-left'">
+
+    <img
+      :src="
+        leftAnimationData
+          ? require('@/assets/images/action-left.png')
+          : require('@/assets/images/action-right.png')
+      "
+      alt=""
+      :class="!leftAnimationData ? 'left-image2' : 'left-image'"
+      @click="leftAnimation()"
+    />
+    <div
+      class="middle-top-left"
+      :class="!leftAnimationData ? 'middle-top-left2' : 'middle-top-left'"
+    >
       <div class="input-keyword">
-        <el-input
-          placeholder="请输入关键字"
-          v-model="input">
+        <el-input placeholder="请输入关键字" v-model="input">
           <i slot="suffix" class="el-icon-search" @click="search"></i>
         </el-input>
       </div>
       <div class="laser-positioning">
         <span>地图扎点</span>
-        <img src="@/assets/images/positioning.png" alt="">
+        <img src="@/assets/images/positioning.png" alt="" />
       </div>
       <div class="creation-task">
         <span>任务创建</span>
-        <img src="@/assets/images/createdTask.png" alt="">
+        <img src="@/assets/images/createdTask.png" alt="" />
       </div>
     </div>
-    <div class="middle-bottom-left" :class="!leftAnimationData ? 'middle-bottom-left2' : 'middle-bottom-left'">
+    <div
+      class="middle-bottom-left"
+      :class="!leftAnimationData ? 'middle-bottom-left2' : 'middle-bottom-left'"
+    >
       <div class="list" @click="changeMap(1)">
-        <div class="leftbg" :class="actionMap == 1 ? 'action-map':''">
-          <img src="@/assets/images/icon1.png" alt="">
+        <div class="leftbg" :class="actionMap == 1 ? 'action-map' : ''">
+          <img src="@/assets/images/icon1.png" alt="" />
         </div>
         <div class="rightbg" v-show="actionMap == 1">
           <span>执法人员</span>
         </div>
       </div>
       <div class="list" @click="changeMap(2)">
-        <div class="leftbg" :class="actionMap == 2 ? 'action-map':''">
-          <img src="@/assets/images/icon2.png" alt="">
+        <div class="leftbg" :class="actionMap == 2 ? 'action-map' : ''">
+          <img src="@/assets/images/icon2.png" alt="" />
         </div>
         <div class="rightbg" v-show="actionMap == 2">
           <span>普通事件</span>
         </div>
       </div>
       <div class="list" @click="changeMap(2)">
-        <div class="leftbg" :class="actionMap == 2 ? 'action-map':''">
-          <img src="@/assets/images/icon3.png" alt="">
+        <div class="leftbg" :class="actionMap == 2 ? 'action-map' : ''">
+          <img src="@/assets/images/icon3.png" alt="" />
         </div>
         <div class="rightbg" v-show="actionMap == 2">
           <span>重点事件</span>
         </div>
       </div>
       <div class="list" @click="changeMap(3)">
-        <div class="leftbg" :class="actionMap == 3 ? 'action-map':''">
-          <img src="@/assets/images/icon4.png" alt="">
+        <div class="leftbg" :class="actionMap == 3 ? 'action-map' : ''">
+          <img src="@/assets/images/icon4.png" alt="" />
         </div>
         <div class="rightbg" v-show="actionMap == 3">
           <span>执法车辆</span>
         </div>
       </div>
       <div class="list" @click="changeMap(4)">
-        <div class="leftbg" :class="actionMap == 4 ? 'action-map':''">
-          <img src="@/assets/images/icon5.png" alt="">
+        <div class="leftbg" :class="actionMap == 4 ? 'action-map' : ''">
+          <img src="@/assets/images/icon5.png" alt="" />
         </div>
         <div class="rightbg" v-show="actionMap == 4">
           <span>监控视频</span>
         </div>
       </div>
+      <div class="list" @click="changeMap(5)">
+        <div class="leftbg" :class="actionMap == 5 ? 'action-map' : ''">
+          <img src="@/assets/images/icon6.png" alt="" />
+        </div>
+        <div class="rightbg" v-show="actionMap == 5">
+          <span>沿街商铺分布</span>
+        </div>
+      </div>
     </div>
     <transition name="right-animationMap">
       <div class="map-right" v-if="rightAnimationData">
         <map-right></map-right>
       </div>
     </transition>
-    
-    <img :src="rightAnimationData ? require('@/assets/images/action-right.png') : require('@/assets/images/action-left.png')" alt="" :class="!rightAnimationData ? 'right-image2' : 'right-image'" @click="rightAnimation()">
-  
-    <div class="middle-bottom-right" :class="!rightAnimationData ? 'middle-bottom-right2' : 'middle-bottom-right'">
+
+    <img
+      :src="
+        rightAnimationData
+          ? require('@/assets/images/action-right.png')
+          : require('@/assets/images/action-left.png')
+      "
+      alt=""
+      :class="!rightAnimationData ? 'right-image2' : 'right-image'"
+      @click="rightAnimation()"
+    />
+
+    <div
+      class="middle-bottom-right"
+      :class="
+        !rightAnimationData ? 'middle-bottom-right2' : 'middle-bottom-right'
+      "
+    >
       <div class="btn-action">
-        <span :class="action == 1? 'action':''" @click="actionBtn(1)">电子地图</span>
-        <span :class="action == 2? 'action':''" @click="actionBtn(2)">卫星地图</span>
+        <span :class="action == 1 ? 'action' : ''" @click="actionBtn(1)"
+          >电子地图</span
+        >
+        <span :class="action == 2 ? 'action' : ''" @click="actionBtn(2)"
+          >卫星地图</span
+        >
       </div>
     </div>
     <div class="right-bg">
@@ -93,14 +132,35 @@
     <personage-track ref="personageTrack"></personage-track>
     <crew-assign ref="crewAssign"></crew-assign>
     <video-wall ref="videoWall"></video-wall>
-    <person-popup v-if="personPopup" v-on:personClose="personClose" v-on:getRoute="presoninfo" :point="mypoint"></person-popup>
-    <event-popup v-if="eventPopup" v-on:eventClose="eventClose" v-on:zhipai="personzhipai" :point="mypoint"></event-popup>
-    <car-popup v-if="carPopup" v-on:carClose="carClose" v-on:carinfo="carinfo" :point="mypoint"></car-popup>
-    <monitoring-popup v-if="monitoringPopup" v-on:monitoringClose="monitoringClose" v-on:monitoringInfo="monitoringInfo" :point="mypoint"></monitoring-popup>
+    <shop ref="shop" width="60%" title="商铺详情查看" />
+    <person-popup
+      v-if="personPopup"
+      v-on:personClose="personClose"
+      v-on:getRoute="presoninfo"
+      :point="mypoint"
+    ></person-popup>
+    <event-popup
+      v-if="eventPopup"
+      v-on:eventClose="eventClose"
+      v-on:zhipai="personzhipai"
+      :point="mypoint"
+    ></event-popup>
+    <car-popup
+      v-if="carPopup"
+      v-on:carClose="carClose"
+      v-on:carinfo="carinfo"
+      :point="mypoint"
+    ></car-popup>
+    <monitoring-popup
+      v-if="monitoringPopup"
+      v-on:monitoringClose="monitoringClose"
+      v-on:monitoringInfo="monitoringInfo"
+      :point="mypoint"
+    ></monitoring-popup>
   </div>
 </template>
 <script>
-import L from 'leaflet'
+import L from "leaflet";
 //引入坐标系转换插件
 // import 'proj4'
 // import 'proj4leaflet'
@@ -112,72 +172,84 @@ import L from 'leaflet'
 // import shijianfenbu from "@/utils/mapJson/shijianfenbu.json"
 // import zhifacheliang from "@/utils/mapJson/zhifacheliang.json"
 // import jiankongshipin from "@/utils/mapJson/jiankongshipin.json"
-import point from "@/utils/mapJson/point.json"
+import point from "@/utils/mapJson/point.json";
 
-import jiangninggeo from "@/utils/mapJson/jiangningjingkaiqugeo.json"
-import detachment1 from "@/utils/mapJson/detachment1.json"
-import detachment2 from "@/utils/mapJson/detachment2.json"
-import detachment3 from "@/utils/mapJson/detachment3.json"
-import detachment4 from "@/utils/mapJson/detachment4.json"
+import jiangninggeo from "@/utils/mapJson/jiangningjingkaiqugeo.json";
+import detachment1 from "@/utils/mapJson/detachment1.json";
+import detachment2 from "@/utils/mapJson/detachment2.json";
+import detachment3 from "@/utils/mapJson/detachment3.json";
+import detachment4 from "@/utils/mapJson/detachment4.json";
 
-import zhongdianluduan from "@/utils/mapJson/zhongdianluduan.json"
-import zhongdianquyu from "@/utils/mapJson/zhongdianquyu.json"
+import zhongdianluduan from "@/utils/mapJson/zhongdianluduan.json";
+import zhongdianquyu from "@/utils/mapJson/zhongdianquyu.json";
 
-import mapLeft from "../components/mapLeftContent.vue"
-import mapRight from "../components/mapRightContent.vue"
+import mapLeft from "../components/mapLeftContent.vue";
+import mapRight from "../components/mapRightContent.vue";
 // import mapCentre from "../components/mapCentre.vue"
 // 弹窗
-import personageTrack from "../../components/personagetrack/index.vue"
-import crewAssign from "../../components/crewAssign/index.vue"
-import videoWall from "../../components/videoWall/index.vue"
-import personPopup from "../../components/personPopup/index.vue"
-import eventPopup from "../../components/eventPopup/index.vue"
-import carPopup from "../../components/carPopup/index.vue"
-import monitoringPopup from "../../components/monitoringPopup/index.vue"
+import personageTrack from "../../components/personagetrack/index.vue";
+import crewAssign from "../../components/crewAssign/index.vue";
+import videoWall from "../../components/videoWall/index.vue";
+import shop from "../../components/shop/index.vue";
+import personPopup from "../../components/personPopup/index.vue";
+import eventPopup from "../../components/eventPopup/index.vue";
+import carPopup from "../../components/carPopup/index.vue";
+import monitoringPopup from "../../components/monitoringPopup/index.vue";
 export default {
-  name: 'myMap',
-  components:{mapLeft,mapRight,personageTrack,crewAssign,videoWall,personPopup,eventPopup,carPopup,monitoringPopup},
+  name: "myMap",
+  components: {
+    mapLeft,
+    mapRight,
+    personageTrack,
+    crewAssign,
+    videoWall,
+    shop,
+    personPopup,
+    eventPopup,
+    carPopup,
+    monitoringPopup,
+  },
   data() {
     return {
-      globalMap:null,
-      basemap:null,
+      globalMap: null,
+      basemap: null,
       townCenter: [31.863971, 118.835418],
-      myZoom:12,
-      mapLayers:{
-        mapLayer1:null,
-        mapLayer2:null,
-        mapLayer3:null,
-        mapLayer4:null,
-        mapLayer5:null,
-        mapLayer6:null,
-        mapLayer7:null,
+      myZoom: 12,
+      mapLayers: {
+        mapLayer1: null,
+        mapLayer2: null,
+        mapLayer3: null,
+        mapLayer4: null,
+        mapLayer5: null,
+        mapLayer6: null,
+        mapLayer7: null,
       },
-      mapEvent:{
-        mapEvent1:null,
-        mapEvent2:null,
-        mapEvent3:null,
-        mapEvent4:null,
+      mapEvent: {
+        mapEvent1: null,
+        mapEvent2: null,
+        mapEvent3: null,
+        mapEvent4: null,
       },
-      mapLayer1:null,
-      mapLayer2:null,
-      mapLayer3:null,
-      mapLayer4:null,
-      mapLayer5:null,
-      input:'',                       // 输入框的值
-      actionMap:1,                    // 默认选中执法人员地图
-      action:1,                       // 切换执法人员/车辆/事件分类/监控视频控制的值
-      personPopup:false,
-      eventPopup:false,
-      carPopup:false,
-      monitoringPopup:false,
-      mypoint:{},
-      leftAnimationData:true,
-      rightAnimationData:true,
-    }
+      mapLayer1: null,
+      mapLayer2: null,
+      mapLayer3: null,
+      mapLayer4: null,
+      mapLayer5: null,
+      input: "", // 输入框的值
+      actionMap: 1, // 默认选中执法人员地图
+      action: 1, // 切换执法人员/车辆/事件分类/监控视频控制的值
+      personPopup: false,
+      eventPopup: false,
+      carPopup: false,
+      monitoringPopup: false,
+      mypoint: {},
+      leftAnimationData: true,
+      rightAnimationData: true,
+    };
   },
-  methods:{
-    initMap(){
-      this.globalMap = L.map('showMap', {
+  methods: {
+    initMap() {
+      this.globalMap = L.map("showMap", {
         center: this.townCenter, // 地图中心[纬度，经度]
         zoom: this.myZoom, // 地图层级
         zoomControl: false,
@@ -185,66 +257,65 @@ export default {
         doubleClickZoom: false, // 双击放大
         scrollWheelZoom: true, // 滚轮放大
         dragging: true,
-      })
+      });
 
       // 电子底图/百度
       this.basemap = L.tileLayer(
-        'https://api.mapbox.com/styles/v1/sharealex/cllg9dw1i00iz01oj9zmu6iv7/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1Ijoic2hhcmVhbGV4IiwiYSI6ImNsaXNhZmRjbTFhbnczZmxib3h1OW05YXYifQ.PhlKv60ar3K359d8x2yBPw',
+        "https://api.mapbox.com/styles/v1/sharealex/cllg9dw1i00iz01oj9zmu6iv7/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1Ijoic2hhcmVhbGV4IiwiYSI6ImNsaXNhZmRjbTFhbnczZmxib3h1OW05YXYifQ.PhlKv60ar3K359d8x2yBPw",
         {
           maxZoom: 18,
           minZoom: 9,
-          subdomains: ['0', '1', '2', '3', '4', '5', '6', '7']
+          subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"],
         }
-      )
+      );
       this.globalMap.addLayer(this.basemap);
 
-      this.globalMap.createPane('mapLayer1')
-      this.globalMap.getPane('mapLayer1').style.zIndex = 501
-      this.globalMap.getPane('mapLayer1').style.pointerEvents = 'none'
+      this.globalMap.createPane("mapLayer1");
+      this.globalMap.getPane("mapLayer1").style.zIndex = 501;
+      this.globalMap.getPane("mapLayer1").style.pointerEvents = "none";
 
-      this.globalMap.createPane('mapLayer2')
-      this.globalMap.getPane('mapLayer2').style.zIndex = 502
-      this.globalMap.getPane('mapLayer2').style.pointerEvents = 'none'
+      this.globalMap.createPane("mapLayer2");
+      this.globalMap.getPane("mapLayer2").style.zIndex = 502;
+      this.globalMap.getPane("mapLayer2").style.pointerEvents = "none";
 
-      this.globalMap.createPane('mapLayer3')
-      this.globalMap.getPane('mapLayer3').style.zIndex = 502
-      this.globalMap.getPane('mapLayer3').style.pointerEvents = 'none'
+      this.globalMap.createPane("mapLayer3");
+      this.globalMap.getPane("mapLayer3").style.zIndex = 502;
+      this.globalMap.getPane("mapLayer3").style.pointerEvents = "none";
 
-      this.globalMap.createPane('mapLayer4')
-      this.globalMap.getPane('mapLayer4').style.zIndex = 502
-      this.globalMap.getPane('mapLayer4').style.pointerEvents = 'none'
+      this.globalMap.createPane("mapLayer4");
+      this.globalMap.getPane("mapLayer4").style.zIndex = 502;
+      this.globalMap.getPane("mapLayer4").style.pointerEvents = "none";
 
-      this.globalMap.createPane('mapLayer5')
-      this.globalMap.getPane('mapLayer5').style.zIndex = 502
-      this.globalMap.getPane('mapLayer5').style.pointerEvents = 'none'
+      this.globalMap.createPane("mapLayer5");
+      this.globalMap.getPane("mapLayer5").style.zIndex = 502;
+      this.globalMap.getPane("mapLayer5").style.pointerEvents = "none";
 
-      this.globalMap.createPane('mapLayer6')
-      this.globalMap.getPane('mapLayer6').style.zIndex = 502
-      this.globalMap.getPane('mapLayer6').style.pointerEvents = 'none'
+      this.globalMap.createPane("mapLayer6");
+      this.globalMap.getPane("mapLayer6").style.zIndex = 502;
+      this.globalMap.getPane("mapLayer6").style.pointerEvents = "none";
 
-      this.globalMap.createPane('mapLayer7')
-      this.globalMap.getPane('mapLayer7').style.zIndex = 502
-      this.globalMap.getPane('mapLayer7').style.pointerEvents = 'none'
+      this.globalMap.createPane("mapLayer7");
+      this.globalMap.getPane("mapLayer7").style.zIndex = 502;
+      this.globalMap.getPane("mapLayer7").style.pointerEvents = "none";
 
-      this.globalMap.createPane('mapEvent1')
-      this.globalMap.getPane('mapEvent1').style.zIndex = 503
-      this.globalMap.getPane('mapEvent1').style.pointerEvents = 'none'
+      this.globalMap.createPane("mapEvent1");
+      this.globalMap.getPane("mapEvent1").style.zIndex = 503;
+      this.globalMap.getPane("mapEvent1").style.pointerEvents = "none";
 
-      this.mapEvent.mapEvent1 = L.featureGroup().addTo(this.globalMap)
+      this.mapEvent.mapEvent1 = L.featureGroup().addTo(this.globalMap);
 
+      this.mapLayers.mapLayer1 = L.featureGroup().addTo(this.globalMap);
+      this.mapLayers.mapLayer2 = L.featureGroup().addTo(this.globalMap);
+      this.mapLayers.mapLayer3 = L.featureGroup().addTo(this.globalMap);
+      this.mapLayers.mapLayer4 = L.featureGroup().addTo(this.globalMap);
+      this.mapLayers.mapLayer5 = L.featureGroup().addTo(this.globalMap);
+      this.mapLayers.mapLayer6 = L.featureGroup().addTo(this.globalMap);
+      this.mapLayers.mapLayer7 = L.featureGroup().addTo(this.globalMap);
 
-      this.mapLayers.mapLayer1 = L.featureGroup().addTo(this.globalMap)
-      this.mapLayers.mapLayer2 = L.featureGroup().addTo(this.globalMap)
-      this.mapLayers.mapLayer3 = L.featureGroup().addTo(this.globalMap)
-      this.mapLayers.mapLayer4 = L.featureGroup().addTo(this.globalMap)
-      this.mapLayers.mapLayer5 = L.featureGroup().addTo(this.globalMap)
-      this.mapLayers.mapLayer6 = L.featureGroup().addTo(this.globalMap)
-      this.mapLayers.mapLayer7 = L.featureGroup().addTo(this.globalMap)
-
-      this.globalMap.on('zoomend', e => {
-        let zoom = this.globalMap.getZoom()
-        console.log('层级：', zoom)
-      })
+      this.globalMap.on("zoomend", (e) => {
+        let zoom = this.globalMap.getZoom();
+        console.log("层级：", zoom);
+      });
       // this.addLayer2();
       this.addLayer1();
       this.addMark("执法人员");
@@ -255,54 +326,64 @@ export default {
       this.addLayer6();
       this.addLayer7();
     },
-    addLayer1(){
-      this.mapLayers.mapLayer1.clearLayers()
+    addLayer1() {
+      this.mapLayers.mapLayer1.clearLayers();
       // this.mapLayers.mapLayer2.clearLayers()
-      let geojson = L.geoJSON(jiangninggeo,{
-          pane: 'mapLayer1',
+      let geojson = L.geoJSON(
+        jiangninggeo,
+        {
+          pane: "mapLayer1",
           style: function (feature) {
             return {
-              color: '#00C5EC',
+              color: "#00C5EC",
               weight: 1,
-              fillColor: 'rgba(64,175,255,0.4)',
+              fillColor: "rgba(64,175,255,0.4)",
               fillOpacity: 1,
-            }
+            };
           },
-        },{ className: 'jack-s' }
-      ).addTo(this.mapLayers.mapLayer1)
+        },
+        { className: "jack-s" }
+      ).addTo(this.mapLayers.mapLayer1);
       // this.addMark()
       // 获取json文件的中心位置
-      this.mapLayer1 = geojson.getBounds()
+      this.mapLayer1 = geojson.getBounds();
       // 居中加载json文件
-      this.globalMap.fitBounds(this.mapLayer1)
+      this.globalMap.fitBounds(this.mapLayer1);
     },
-    addMark(name){
-      this.mapEvent.mapEvent1.clearLayers()
+    addMark(name) {
+      this.mapEvent.mapEvent1.clearLayers();
       let ico1 = L.icon({
-        iconUrl: require('../../../assets/images/icon/icon1.png'),
+        iconUrl: require("../../../assets/images/icon/icon1.png"),
         iconSize: [52, 81],
-      })
+      });
       let ico2 = L.icon({
-        iconUrl: require('../../../assets/images/icon/icon2.png'),
+        iconUrl: require("../../../assets/images/icon/icon2.png"),
         iconSize: [44, 91],
-      })
+      });
       let ico3 = L.icon({
-        iconUrl: require('../../../assets/images/icon/icon3.png'),
+        iconUrl: require("../../../assets/images/icon/icon3.png"),
         iconSize: [44, 91],
-      })
+      });
       let ico4 = L.icon({
-        iconUrl: require('../../../assets/images/icon/icon4.png'),
+        iconUrl: require("../../../assets/images/icon/icon4.png"),
         iconSize: [45, 95],
-      })
+      });
       let ico5 = L.icon({
-        iconUrl: require('../../../assets/images/icon/icon5.png'),
+        iconUrl: require("../../../assets/images/icon/icon5.png"),
         iconSize: [52, 81],
-      })
-      point.features.map((item,index)=>{
-        if(this.actionMap == 1) {
-          if(item.properties.name == "执法人员"){
-            let marker = L.marker({lng:item.geometry.coordinates[0],lat:item.geometry.coordinates[1]},{icon:ico1}).bindPopup(
-              `
+      });
+      point.features.map((item, index) => {
+        if (this.actionMap == 1) {
+          if (item.properties.name == "执法人员") {
+            let marker = L.marker(
+              {
+                lng: item.geometry.coordinates[0],
+                lat: item.geometry.coordinates[1],
+              },
+              { icon: ico1 }
+            )
+              .bindPopup(
+                `
               <div class="person-popup">
                 <div class="person-title">
                   <div class="title">人员信息</div>
@@ -323,19 +404,26 @@ export default {
                 </div>
               </div>
               `,
-              {
-                  className: 'popup-pc-person'
-              }
-            ).openPopup();
-            marker.addTo(this.mapEvent.mapEvent1)
-            this.markerClick(marker,index)
+                {
+                  className: "popup-pc-person",
+                }
+              )
+              .openPopup();
+            marker.addTo(this.mapEvent.mapEvent1);
+            this.markerClick(marker, index);
           }
-        } else if(this.actionMap == 2) {
-          let marker
-          if(item.properties.name == "普通事件") {
-            marker = L.marker({lng:item.geometry.coordinates[0],lat:item.geometry.coordinates[1]},{icon:ico2})
-            .bindPopup(
-              `
+        } else if (this.actionMap == 2) {
+          let marker;
+          if (item.properties.name == "普通事件") {
+            marker = L.marker(
+              {
+                lng: item.geometry.coordinates[0],
+                lat: item.geometry.coordinates[1],
+              },
+              { icon: ico2 }
+            )
+              .bindPopup(
+                `
               <div class="event-popup">
                 <div class="event-title">
                   <div class="title">事件信息</div>
@@ -368,15 +456,23 @@ export default {
                 </div>
               </div>
               `,
+                {
+                  className: "popup-pc-common",
+                }
+              )
+              .openPopup();
+            marker.addTo(this.mapEvent.mapEvent1);
+            this.markerClick(marker, index);
+          } else if (item.properties.name == "重点事件") {
+            marker = L.marker(
               {
-                  className: 'popup-pc-common'
-              }
-            ).openPopup();
-            marker.addTo(this.mapEvent.mapEvent1)
-            this.markerClick(marker,index)
-          } else if(item.properties.name == "重点事件"){
-            marker = L.marker({lng:item.geometry.coordinates[0],lat:item.geometry.coordinates[1]},{icon:ico3}).bindPopup(
-              `
+                lng: item.geometry.coordinates[0],
+                lat: item.geometry.coordinates[1],
+              },
+              { icon: ico3 }
+            )
+              .bindPopup(
+                `
               <div class="event-popup">
                 <div class="event-title">
                   <div class="title">事件信息</div>
@@ -409,17 +505,25 @@ export default {
                 </div>
               </div>
               `,
-              {
-                  className: 'popup-pc-emphasis'
-              }
-            ).openPopup();
-            marker.addTo(this.mapEvent.mapEvent1)
-            this.markerClick(marker,index)
+                {
+                  className: "popup-pc-emphasis",
+                }
+              )
+              .openPopup();
+            marker.addTo(this.mapEvent.mapEvent1);
+            this.markerClick(marker, index);
           }
-        } else if(this.actionMap == 3) {
-          if(item.properties.name == "执法车辆"){
-            let marker = L.marker({lng:item.geometry.coordinates[0],lat:item.geometry.coordinates[1]},{icon:ico4}).bindPopup(
-              `
+        } else if (this.actionMap == 3) {
+          if (item.properties.name == "执法车辆") {
+            let marker = L.marker(
+              {
+                lng: item.geometry.coordinates[0],
+                lat: item.geometry.coordinates[1],
+              },
+              { icon: ico4 }
+            )
+              .bindPopup(
+                `
               <div class="car-popup">
                 <div class="car-title">
                   <div class="title">车辆信息</div>
@@ -435,17 +539,25 @@ export default {
                 </div>
               </div>
               `,
-              {
-                  className: 'popup-pc-car'
-              }
-            ).openPopup();
-            marker.addTo(this.mapEvent.mapEvent1)
-            this.markerClick(marker,index)
+                {
+                  className: "popup-pc-car",
+                }
+              )
+              .openPopup();
+            marker.addTo(this.mapEvent.mapEvent1);
+            this.markerClick(marker, index);
           }
-        } else if(this.actionMap == 4) {
-          if(item.properties.name == "监控视频"){
-            let marker = L.marker({lng:item.geometry.coordinates[0],lat:item.geometry.coordinates[1]},{icon:ico5}).bindPopup(
-              `
+        } else if (this.actionMap == 4) {
+          if (item.properties.name == "监控视频") {
+            let marker = L.marker(
+              {
+                lng: item.geometry.coordinates[0],
+                lat: item.geometry.coordinates[1],
+              },
+              { icon: ico5 }
+            )
+              .bindPopup(
+                `
               <div class="monitoring-popup">
                 <div class="monitoring-title">
                   <div class="title">监控视频</div>
@@ -462,52 +574,118 @@ export default {
                 </div>
               </div>
               `,
+                {
+                  className: "popup-pc-monitoring",
+                }
+              )
+              .openPopup();
+            marker.addTo(this.mapEvent.mapEvent1);
+            this.markerClick(marker, index);
+          }
+        } else if (this.actionMap == 5) {
+          if (item.properties.name == "沿街商铺分布") {
+            let marker = L.marker(
               {
-                  className: 'popup-pc-monitoring'
-              }
-            ).openPopup();
-            marker.addTo(this.mapEvent.mapEvent1)
-            this.markerClick(marker,index)
+                lng: item.geometry.coordinates[0],
+                lat: item.geometry.coordinates[1],
+              },
+              { icon: ico2 }
+            )
+              .bindPopup(
+                `
+              <div class="event-popup">
+                <div class="event-title">
+                  <div class="title">主体基本信息</div>
+                  <div class="mask" id='monitoring${index}'></div>
+                </div>
+                <div class="event-main">
+                <div class="event-info">
+                    <div class="dot"></div>
+                    <div class="name">商铺名称：</div>
+                    <div class="position">xxx商铺</div>
+                  </div>
+                  <div class="event-info">
+                    <div class="dot"></div>
+                    <div class="name">商铺类型：</div>
+                    <div class="position">餐饮店</div>
+                  </div>
+                  <div class="event-info">
+                    <div class="dot"></div>
+                    <div class="name">所在地址：</div>
+                    <div class="position">XX街道XX小区</div>
+                  </div>
+                  <div class="event-info">
+                    <div class="dot"></div>
+                    <div class="name">描述：</div>
+                    <div class="position">xxxxxxxxxxxxxxxxxxxxxxxx</div>
+                  </div>
+                
+                  <div class="btn" id="shopInfo">
+                    查看载体详情
+                  </div>
+                </div>
+              </div>
+              `,
+                {
+                  className: "popup-pc-common",
+                }
+              )
+              .openPopup();
+            marker.addTo(this.mapEvent.mapEvent1);
+            this.markerClick(marker, index);
           }
         }
-        
-      })
+      });
     },
-    markerClick(marker,index){
-      
+    markerClick(marker, index) {
       // document.getElementsByName('monitoring').addEventListener("click",function(){//通过个体ElementsById()方法获得的element对象中的addEventListener()方法用于添加事件监听器，第一个参数设置事件类型，第二个参数可用来设置具体事件
-			// 	console.log("点击");
-			// })
-      console.log(marker)
-      marker.on('click', e => {
+      // 	console.log("点击");
+      // })
+      console.log(marker);
+      marker.on("click", (e) => {
         console.log(e);
-        this.$nextTick(()=>{
-          document.querySelector('#monitoring' + index).addEventListener("click",function(){//通过个体ElementsById()方法获得的element对象中的addEventListener()方法用于添加事件监听器，第一个参数设置事件类型，第二个参数可用来设置具体事件
-            marker.closePopup();
-          })
-          if(this.actionMap == 1) {
-            document.querySelector('#personClick' + index).addEventListener("click",()=>{
-              this.$refs.personageTrack.open('person');
-            })
-          } else if(this.actionMap == 2) {
-            document.querySelector('#zhipai' + index).addEventListener("click",()=>{
-              this.$refs.crewAssign.open();
-            })
+        this.$nextTick(() => {
+          document
+            .querySelector("#monitoring" + index)
+            .addEventListener("click", function () {
+              //通过个体ElementsById()方法获得的element对象中的addEventListener()方法用于添加事件监听器，第一个参数设置事件类型，第二个参数可用来设置具体事件
+              marker.closePopup();
+            });
+          if (this.actionMap == 1) {
+            document
+              .querySelector("#personClick" + index)
+              .addEventListener("click", () => {
+                this.$refs.personageTrack.open("person");
+              });
+          } else if (this.actionMap == 2) {
+            document
+              .querySelector("#zhipai" + index)
+              .addEventListener("click", () => {
+                this.$refs.crewAssign.open();
+              });
             // document.querySelector('#zhipai2' + index).addEventListener("click",()=>{
             //   this.$refs.crewAssign.open();
             // })
-          } else if(this.actionMap == 3) {
-            document.querySelector('#carinfo' + index).addEventListener("click",()=>{
-              this.$refs.personageTrack.open('car');
-            })
-          } else if(this.actionMap == 4){
-            document.querySelector('#monitoringInfo' + index).addEventListener("click",()=>{
-              this.$refs.videoWall.open();
-            })
+          } else if (this.actionMap == 3) {
+            document
+              .querySelector("#carinfo" + index)
+              .addEventListener("click", () => {
+                this.$refs.personageTrack.open("car");
+              });
+          } else if (this.actionMap == 4) {
+            document
+              .querySelector("#monitoringInfo" + index)
+              .addEventListener("click", () => {
+                this.$refs.videoWall.open();
+              });
+          } else if (this.actionMap == 5) {
+            document
+              .querySelector("#shopInfo")
+              .addEventListener("click", () => {
+                this.$refs.shop.open();
+              });
           }
-          
-         
-        })
+        });
         // this.mypoint = e.containerPoint;
         // if(this.actionMap == 1) {
         //   // this.personPopup = true;
@@ -519,18 +697,18 @@ export default {
         // } else if(this.actionMap == 4){
         //   // this.monitoringPopup = true;
         // }
-      })
+      });
     },
-    personClose(){
+    personClose() {
       this.personPopup = false;
     },
-    eventClose(){
+    eventClose() {
       this.eventPopup = false;
     },
-    carClose(){
+    carClose() {
       this.carPopup = false;
     },
-    monitoringClose(){
+    monitoringClose() {
       this.monitoringPopup = false;
     },
     // personzhipai(){
@@ -545,148 +723,165 @@ export default {
     // monitoringInfo(){
     //   this.$refs.videoWall.open();
     // },
-    addLayer2(){
-      this.mapLayers.mapLayer2.clearLayers()
-      let geojson = L.geoJSON(detachment1,{
-          pane: 'mapLayer2',
+    addLayer2() {
+      this.mapLayers.mapLayer2.clearLayers();
+      let geojson = L.geoJSON(
+        detachment1,
+        {
+          pane: "mapLayer2",
           style: function (feature) {
             return {
-              color: '#00C5EC',
+              color: "#00C5EC",
               weight: 1,
-              fillColor: 'rgba(255,0,0,0.38)',
+              fillColor: "rgba(255,0,0,0.38)",
               fillOpacity: 1,
-            }
+            };
           },
           onEachFeature: (feature, layer) => {
-            console.log(feature.properties.name)
+            console.log(feature.properties.name);
             let polygon = L.polygon(layer._latlngs, {
               text: feature.properties.name,
               textStyle: {
-                strokeStyle: '#ffffff',//描边颜色
-                fillStyle: '#00000',//文字颜色
+                strokeStyle: "#ffffff", //描边颜色
+                fillStyle: "#00000", //文字颜色
                 // eslint-disable-next-line quotes
                 font: "18px 'PuHuiTi-Medium'",
-                lineWidth: 1,//描边粗细
-                offsetX: -36,//-字号*4个字/2
-                offsetY: 9,//字号/2
-              }
-            })
-            polygon.addTo(this.mapLayers.mapLayer2)
-          }
-        },{ className: 'jack-s2' }
-      ).addTo(this.mapLayers.mapLayer2)
-      this.mapLayer2 = geojson.getBounds()
+                lineWidth: 1, //描边粗细
+                offsetX: -36, //-字号*4个字/2
+                offsetY: 9, //字号/2
+              },
+            });
+            polygon.addTo(this.mapLayers.mapLayer2);
+          },
+        },
+        { className: "jack-s2" }
+      ).addTo(this.mapLayers.mapLayer2);
+      this.mapLayer2 = geojson.getBounds();
     },
-    addLayer3(){
-      this.mapLayers.mapLayer3.clearLayers()
-      let geojson = L.geoJSON(detachment2,{
-          pane: 'mapLayer3',
+    addLayer3() {
+      this.mapLayers.mapLayer3.clearLayers();
+      let geojson = L.geoJSON(
+        detachment2,
+        {
+          pane: "mapLayer3",
           style: function (feature) {
             return {
-              color: '#00C5EC',
+              color: "#00C5EC",
               weight: 1,
-              fillColor: 'rgba(255,0,0,0.38)',
+              fillColor: "rgba(255,0,0,0.38)",
               fillOpacity: 1,
-            }
+            };
           },
-        },{ className: 'jack-s3' }
-      ).addTo(this.mapLayers.mapLayer3)
-      this.mapLayer3 = geojson.getBounds()
+        },
+        { className: "jack-s3" }
+      ).addTo(this.mapLayers.mapLayer3);
+      this.mapLayer3 = geojson.getBounds();
     },
-    addLayer4(){
-      this.mapLayers.mapLayer4.clearLayers()
-      let geojson = L.geoJSON(detachment3,{
-          pane: 'mapLayer4',
+    addLayer4() {
+      this.mapLayers.mapLayer4.clearLayers();
+      let geojson = L.geoJSON(
+        detachment3,
+        {
+          pane: "mapLayer4",
           style: function (feature) {
             return {
-              color: '#00C5EC',
+              color: "#00C5EC",
               weight: 1,
-              fillColor: 'rgba(255,0,0,0.38)',
+              fillColor: "rgba(255,0,0,0.38)",
               fillOpacity: 1,
-            }
+            };
           },
-        },{ className: 'jack-s4' }
-      ).addTo(this.mapLayers.mapLayer4)
+        },
+        { className: "jack-s4" }
+      ).addTo(this.mapLayers.mapLayer4);
       // 获取json文件的中心位置
-      this.mapLayer4 = geojson.getBounds()
+      this.mapLayer4 = geojson.getBounds();
     },
-    addLayer5(){
-      this.mapLayers.mapLayer5.clearLayers()
-      let geojson = L.geoJSON(detachment4,{
-          pane: 'mapLayer5',
+    addLayer5() {
+      this.mapLayers.mapLayer5.clearLayers();
+      let geojson = L.geoJSON(
+        detachment4,
+        {
+          pane: "mapLayer5",
           style: function (feature) {
             return {
-              color: 'rgba(255,0,0,0.38)',
+              color: "rgba(255,0,0,0.38)",
               weight: 1,
-              fillColor: 'rgba(255,0,0,0.38)',
+              fillColor: "rgba(255,0,0,0.38)",
               fillOpacity: 1,
-            }
+            };
           },
-        },{ className: 'jack-s5' }
-      ).addTo(this.mapLayers.mapLayer5)
+        },
+        { className: "jack-s5" }
+      ).addTo(this.mapLayers.mapLayer5);
       // 获取json文件的中心位置
-      this.mapLayer5 = geojson.getBounds()
+      this.mapLayer5 = geojson.getBounds();
     },
-    addLayer6(){
-      this.mapLayers.mapLayer5.clearLayers()
-      let geojson = L.geoJSON(zhongdianquyu,{
-          pane: 'mapLayer6',
+    addLayer6() {
+      this.mapLayers.mapLayer5.clearLayers();
+      let geojson = L.geoJSON(
+        zhongdianquyu,
+        {
+          pane: "mapLayer6",
           style: function (feature) {
             return {
-              color: 'rgba(255,0,0,0.38)',
+              color: "rgba(255,0,0,0.38)",
               weight: 1,
-              fillColor: 'rgba(255,0,0,0.38)',
+              fillColor: "rgba(255,0,0,0.38)",
               fillOpacity: 1,
-            }
+            };
           },
-          
-        },{ className: 'jack-s6' }
-      ).addTo(this.mapLayers.mapLayer6)
+        },
+        { className: "jack-s6" }
+      ).addTo(this.mapLayers.mapLayer6);
       // 获取json文件的中心位置
-      let bounds = geojson.getBounds()
-      let latlng = bounds.getCenter()
+      let bounds = geojson.getBounds();
+      let latlng = bounds.getCenter();
 
       let myIcon1 = L.divIcon({
-          className: 'region-name1',
-          html: '重点区域',
-          iconSize: [120, 68],
-        })
-        L.marker(latlng, {
-          pane: 'mapLayer4',
-          icon: myIcon1,
-        }).addTo(this.mapLayers.mapLayer6)
+        className: "region-name1",
+        html: "重点区域",
+        iconSize: [120, 68],
+      });
+      L.marker(latlng, {
+        pane: "mapLayer4",
+        icon: myIcon1,
+      }).addTo(this.mapLayers.mapLayer6);
       // this.mapLayer5 = geojson.getBounds()
     },
-    addLayer7(){
-      this.mapLayers.mapLayer7.clearLayers()
-      let geojson = L.geoJSON(zhongdianluduan,{
-          pane: 'mapLayer7',
+    addLayer7() {
+      this.mapLayers.mapLayer7.clearLayers();
+      let geojson = L.geoJSON(
+        zhongdianluduan,
+        {
+          pane: "mapLayer7",
           style: function (feature) {
             return {
-              color: '#00C5EC',
+              color: "#00C5EC",
               weight: 0,
-              fillColor: 'rgba(70,255,119,0.38)',
+              fillColor: "rgba(70,255,119,0.38)",
               fillOpacity: 1,
-            }
+            };
           },
-        },{ className: 'jack-s7' }
-      ).addTo(this.mapLayers.mapLayer7)
+        },
+        { className: "jack-s7" }
+      ).addTo(this.mapLayers.mapLayer7);
       // 获取json文件的中心位置
       // this.mapLayer5 = geojson.getBounds()
-      let bounds = geojson.getBounds()
-      let latlng = bounds.getCenter()
-      
+      let bounds = geojson.getBounds();
+      let latlng = bounds.getCenter();
+
       let myIcon1 = L.divIcon({
-          className: 'region-name2',
-          html: '重点路段',
-          iconSize: [120, 68],
-        })
-        L.marker(latlng, {
-          pane: 'mapLayer4',
-          icon: myIcon1,
-        }).addTo(this.mapLayers.mapLayer7)
+        className: "region-name2",
+        html: "重点路段",
+        iconSize: [120, 68],
+      });
+      L.marker(latlng, {
+        pane: "mapLayer4",
+        icon: myIcon1,
+      }).addTo(this.mapLayers.mapLayer7);
     },
-    actionBtn(id){
+    actionBtn(id) {
       this.action = id;
       // console.log(id)
       // this.$emit('actionBtn',id);
@@ -697,82 +892,84 @@ export default {
       // }
     },
     // 输入框的搜索框点击事件
-    search(){
-      
-    },
+    search() {},
     // 创建任务的点击事件
-    createdTask(){
-
-    },
+    createdTask() {},
     // 地图扎点的点击事件
-    positioning(){
+    positioning() {
       // this.$refs.videoWall.open();
     },
     // 切换地图事件
-    changeMap(id){
+    changeMap(id) {
       this.actionMap = id;
       this.personPopup = false;
       this.eventPopup = false;
       this.carPopup = false;
       this.monitoringPopup = false;
-      this.addMark()
-      switch(id){
+      this.addMark();
+      switch (id) {
         case 1:
-          this.addMark("执法人员")
+          this.addMark("执法人员");
           break;
         case 2:
-          this.addMark("普通事件")
+          this.addMark("普通事件");
           break;
         case 3:
-          this.addMark("执法车辆")
+          this.addMark("执法车辆");
           break;
         case 4:
-          this.addMark("监控视频")
+          this.addMark("监控视频");
+          break;
+        case 5:
+          this.addMark("沿街商铺分布");
           break;
         default:
           return;
       }
     },
-    leftAnimation(){
-      setTimeout(()=>{
+    leftAnimation() {
+      setTimeout(() => {
         this.leftAnimationData = !this.leftAnimationData;
-      },800)
-      this.$emit('leftAnimationAction')
+      }, 800);
+      this.$emit("leftAnimationAction");
     },
-    rightAnimation(){
-      setTimeout(()=>{
+    rightAnimation() {
+      setTimeout(() => {
         this.rightAnimationData = !this.rightAnimationData;
-      },1000)
-      this.$emit('rightAnimationAction')
+      }, 1000);
+      this.$emit("rightAnimationAction");
     },
   },
-  mounted(){
-    this.$nextTick(()=>{
-      this.initMap()
-    })
-  }
-}
+  mounted() {
+    this.$nextTick(() => {
+      this.initMap();
+    });
+  },
+};
 </script>
 <style lang="scss" scoped>
-
 .map-main {
   width: 100%;
   height: 100%;
   position: relative;
-  .left-animationMap-enter-active, .left-animationMap-leave-active {
+  .left-animationMap-enter-active,
+  .left-animationMap-leave-active {
     transition: all 1s;
   }
-  .left-animationMap-enter, .left-animationMap-leave-to {
-  /* 进入的初始状态和离开的最终状态 */
+  .left-animationMap-enter,
+  .left-animationMap-leave-to {
+    /* 进入的初始状态和离开的最终状态 */
     opacity: 0;
     transform: translateX(-510px);
   }
 
-  .right-animationMap-enter-active, .right-animationMap-leave-active {
+  .right-animationMap-enter-active,
+  .right-animationMap-leave-active {
     transition: all 1s;
   }
-  .right-animationMap-enter, .right-animationMap-leave-to {
-  /* 进入的初始状态和离开的最终状态 */
+  .right-animationMap-enter,
+  .right-animationMap-leave-to {
+    /* 进入的初始状态和离开的最终状态 */
     opacity: 0;
     transform: translateX(510px);
   }
@@ -788,7 +985,7 @@ export default {
     .bgt {
       width: 100%;
       height: 100%;
-      background-image: url('../../../assets/images/broadside-bg.png');
+      background-image: url("../../../assets/images/broadside-bg.png");
       background-size: 100% 100%;
     }
   }
@@ -803,7 +1000,7 @@ export default {
     .bgt {
       width: 100%;
       height: 100%;
-      background-image: url('../../../assets/images/broadside2-bg.png');
+      background-image: url("../../../assets/images/broadside2-bg.png");
       background-size: 100% 100%;
     }
   }
@@ -818,7 +1015,7 @@ export default {
     .bgt {
       width: 100%;
       height: 100%;
-      background-image: url('../../../assets/images/bottom-bg.png');
+      background-image: url("../../../assets/images/bottom-bg.png");
       background-size: 100% 100%;
     }
   }
@@ -883,7 +1080,7 @@ export default {
     display: flex;
     .input-keyword {
       ::v-deep .el-input {
-        background-image: url('../../../assets/images/bgtongyong.png');
+        background-image: url("../../../assets/images/bgtongyong.png");
         background-size: 100% 100%;
         .el-input__inner {
           background-color: transparent;
@@ -895,28 +1092,29 @@ export default {
         .el-input__inner::placeholder {
           /* 在这里添加你想要修改的 placeholder 样式 */
           font-size: 14px;
-          font-family: 'Source Han Sans CN-Regular';
+          font-family: "Source Han Sans CN-Regular";
           font-weight: 400;
-          color: #D3EEF2;
+          color: #d3eef2;
           line-height: 20px;
         }
       }
       ::v-deep .el-input__suffix {
         line-height: 44px;
-        color: #D3EEF2;
+        color: #d3eef2;
         right: 10px;
         cursor: pointer;
         .el-icon-search:before {
           font-size: 24px;
-          color: #D3EEF2;
+          color: #d3eef2;
         }
       }
     }
-    .laser-positioning,.creation-task {
+    .laser-positioning,
+    .creation-task {
       // height: 38px;
       width: 130px;
       margin-left: 8px;
-      background-image: url('../../../assets/images/bgtongyong.png');
+      background-image: url("../../../assets/images/bgtongyong.png");
       background-size: 100% 100%;
       display: flex;
       align-items: center;
@@ -925,9 +1123,9 @@ export default {
       cursor: pointer;
       span {
         font-size: 14px;
-        font-family: 'Source Han Sans CN-Regular';
+        font-family: "Source Han Sans CN-Regular";
         font-weight: 400;
-        color: #D3EEF2;
+        color: #d3eef2;
         line-height: 20px;
         margin-right: 12px;
       }
@@ -949,7 +1147,7 @@ export default {
     padding: 5px 10px;
     display: flex;
     flex-direction: column;
-    .list{
+    .list {
       margin-top: 10px;
       display: flex;
       align-items: center;
@@ -957,7 +1155,7 @@ export default {
         display: flex;
         align-items: center;
         justify-content: center;
-        background-image: url('../../../assets/images/iconbg2.png');
+        background-image: url("../../../assets/images/iconbg2.png");
         background-size: 100% 100%;
         width: 36px;
         height: 36px;
@@ -967,23 +1165,23 @@ export default {
         }
       }
       .action-map {
-        background-image: url('../../../assets/images/iconbg1.png');
+        background-image: url("../../../assets/images/iconbg1.png");
       }
       .rightbg {
         padding-left: 6px;
         margin-left: 2px;
-        background-image: url('../../../assets/images/right-icon.png');
+        background-image: url("../../../assets/images/right-icon.png");
         width: 115px;
         height: 36px;
         display: flex;
         align-items: center;
         span {
           font-size: 16px;
-          font-family: 'Source Han Sans CN-Bold';
+          font-family: "Source Han Sans CN-Bold";
           font-weight: 700;
-          color: #FFFFFF;
+          color: #ffffff;
           line-height: 26px;
-          text-shadow: 0px 0px 5px #0077FF;
+          text-shadow: 0px 0px 5px #0077ff;
         }
       }
     }
@@ -1004,14 +1202,14 @@ export default {
         flex: 1;
         display: inline-block;
         text-align: center;
-        background-image: url('../../../assets/images/changeBtn2.png');
+        background-image: url("../../../assets/images/changeBtn2.png");
         background-size: 100% 100%;
         padding: 10px 33px;
         font-size: 16px;
-        font-family: 'Source Han Sans CN-Regular';
+        font-family: "Source Han Sans CN-Regular";
         font-weight: 400;
         line-height: 20px;
-        color: #D3EEF2;
+        color: #d3eef2;
         cursor: pointer;
         // background: transparent;
         // box-shadow: inset 0px 0px 6px 0px #00C2FF;
@@ -1024,7 +1222,7 @@ export default {
       }
       .action {
         color: #fff;
-        background-image: url('../../../assets/images/changeBtn1.png.png');
+        background-image: url("../../../assets/images/changeBtn1.png.png");
         background-size: 100% 100%;
       }
     }
@@ -1032,14 +1230,11 @@ export default {
   .middle-bottom-right2 {
     right: 67px;
   }
-  
 
   .showMap {
     width: 100%;
     height: 100%;
     background-color: #00192e;
   }
-  
 }
-
 </style>
diff --git a/src/views/components/crewAssign/index.vue b/src/views/components/crewAssign/index.vue
index f7a722a..b106477 100644
--- a/src/views/components/crewAssign/index.vue
+++ b/src/views/components/crewAssign/index.vue
@@ -11,21 +11,15 @@
     <div class="crew-assign">
       <div class="item">
         <div class="ball"></div>
-        <div class="content">
-          事件名称：<span>xx小区乱堆杂物</span>
-        </div>
+        <div class="content">事件名称：<span>xx小区乱堆杂物</span></div>
       </div>
       <div class="item">
         <div class="ball"></div>
-        <div class="content">
-          事件类别：<span>暴露垃圾</span>
-        </div>
+        <div class="content">事件类别：<span>暴露垃圾</span></div>
       </div>
       <div class="item">
         <div class="ball"></div>
-        <div class="content">
-          事件地址：<span>xx街道xx小区</span>
-        </div>
+        <div class="content">事件地址：<span>xx街道xx小区</span></div>
       </div>
       <div class="itemtwo">
         <div class="left">
@@ -38,7 +32,8 @@
               v-for="item in options"
               :key="item.value"
               :label="item.label"
-              :value="item.value">
+              :value="item.value"
+            >
             </el-option>
           </el-select>
         </div>
@@ -52,9 +47,10 @@
           <el-date-picker
             v-model="dateTime"
             type="datetime"
-            placeholder="选择日期时间">
+            placeholder="选择日期时间"
+          >
           </el-date-picker>
-          <img class="data_icon" src="@/assets/images/timeIcon.png" alt="">
+          <img class="data_icon" src="@/assets/images/timeIcon.png" alt="" />
         </div>
       </div>
       <div class="btns">
@@ -65,45 +61,51 @@
   </dia-log>
 </template>
 <script>
-import diaLog from "../../components/dialog/index.vue"
+import diaLog from "../../components/dialog/index.vue";
 export default {
-  components:{diaLog},
+  components: { diaLog },
   data() {
     return {
-      dateTime:'',
-      options: [{
-          value: '选项1',
-          label: '李飞'
-        }, {
-          value: '选项2',
-          label: '李飞'
-        }, {
-          value: '选项3',
-          label: '李飞'
-        }, {
-          value: '选项4',
-          label: '李飞'
-        }, {
-          value: '选项5',
-          label: '李飞'
-        }],
-        value: ''
-    }
+      dateTime: "",
+      options: [
+        {
+          value: "选项1",
+          label: "李飞",
+        },
+        {
+          value: "选项2",
+          label: "李飞",
+        },
+        {
+          value: "选项3",
+          label: "李飞",
+        },
+        {
+          value: "选项4",
+          label: "李飞",
+        },
+        {
+          value: "选项5",
+          label: "李飞",
+        },
+      ],
+      value: "",
+    };
   },
-  methods:{
+  methods: {
     open() {
-      this.$refs.dialog2.open('2');
+      this.$refs.dialog2.open("2");
     },
     Close() {
       this.$refs.dialog2.Close();
     },
     // 取消
-    cancel(){
+    cancel() {
       this.$refs.dialog2.Close();
     },
-    confirm(){}
+    confirm() {},
   },
-}
+};
 </script>
 <style lang="scss" scoped>
 ::v-deep .el-dialog__body {
@@ -121,22 +123,23 @@ export default {
     .ball {
       width: 4px;
       height: 4px;
-      background: #DAEBFF;
-      box-shadow: 0px 0px 10px 5px rgba(0,119,255,0.25), 0px 0px 5px 0px rgba(229,241,255,0.25);
+      background: #daebff;
+      box-shadow: 0px 0px 10px 5px rgba(0, 119, 255, 0.25),
+        0px 0px 5px 0px rgba(229, 241, 255, 0.25);
       border-radius: 20px 20px 20px 20px;
       margin-right: 15px;
     }
     .content {
       font-size: 14px;
-      font-family: 'Source Han Sans CN-Medium';
+      font-family: "Source Han Sans CN-Medium";
       font-weight: 500;
-      color: #CCCCCC;
+      color: #cccccc;
       line-height: 20px;
       span {
         font-size: 14px;
-        font-family: 'Source Han Sans CN-Medium';
+        font-family: "Source Han Sans CN-Medium";
         font-weight: 500;
-        color: #E9F4FF;
+        color: #e9f4ff;
         line-height: 20px;
       }
     }
@@ -150,21 +153,22 @@ export default {
       .ball {
         width: 4px;
         height: 4px;
-        background: #DAEBFF;
-        box-shadow: 0px 0px 10px 5px rgba(0,119,255,0.25), 0px 0px 5px 0px rgba(229,241,255,0.25);
+        background: #daebff;
+        box-shadow: 0px 0px 10px 5px rgba(0, 119, 255, 0.25),
+          0px 0px 5px 0px rgba(229, 241, 255, 0.25);
         border-radius: 20px 20px 20px 20px;
         margin-right: 15px;
       }
       .content {
         font-size: 14px;
-        font-family: 'Source Han Sans CN-Medium';
+        font-family: "Source Han Sans CN-Medium";
         font-weight: 500;
-        color: #CCCCCC;
+        color: #cccccc;
         line-height: 20px;
       }
     }
     .right {
-      background-image: url('../../../assets/images/timebg.png');
+      background-image: url("../../../assets/images/timebg.png");
       width: 350px;
       height: 35px;
       background-size: 100% 100%;
@@ -181,27 +185,31 @@ export default {
           width: 100%;
           height: 35px;
           font-size: 14px;
-          font-family: 'Source Han Sans CN-Medium';
+          font-family: "Source Han Sans CN-Medium";
           font-weight: 500;
-          color: #E9F4FF;
+          color: #e9f4ff;
           padding-left: 12px;
         }
         .el-input__inner::placeholder {
           /* 在这里添加你想要修改的 placeholder 样式 */
           font-size: 14px;
-          font-family: 'Source Han Sans CN-Regular';
+          font-family: "Source Han Sans CN-Regular";
           font-weight: 400;
-          color: #D3EEF2;
+          color: #d3eef2;
           -webkit-background-clip: text;
-          -webkit-text-fill-color: rgba(211,238,242,0.2);
+          -webkit-text-fill-color: rgba(211, 238, 242, 0.2);
         }
       }
       ::v-deep .el-select {
         background-color: transparent;
         width: 350px;
-        .el-input .el-input__suffix .el-input__suffix-inner .el-icon-arrow-up::before {
+        .el-input
+          .el-input__suffix
+          .el-input__suffix-inner
+          .el-icon-arrow-up::before {
           content: "";
-          background: url(../../../assets/images/pull-down.png) center center no-repeat;
+          background: url(../../../assets/images/pull-down.png) center center
+            no-repeat;
           background-size: 100% 100%;
           position: absolute;
           width: 100%;
@@ -222,18 +230,18 @@ export default {
           width: 100%;
           height: 35px;
           font-size: 14px;
-          font-family: 'Source Han Sans CN-Medium';
+          font-family: "Source Han Sans CN-Medium";
           font-weight: 500;
-          color: #E9F4FF;
+          color: #e9f4ff;
         }
         .el-input__inner::placeholder {
           /* 在这里添加你想要修改的 placeholder 样式 */
           font-size: 14px;
-          font-family: 'Source Han Sans CN-Regular';
+          font-family: "Source Han Sans CN-Regular";
           font-weight: 400;
-          color: #D3EEF2;
+          color: #d3eef2;
           -webkit-background-clip: text;
-          -webkit-text-fill-color: rgba(211,238,242,0.2);
+          -webkit-text-fill-color: rgba(211, 238, 242, 0.2);
         }
       }
       .data_icon {
@@ -252,18 +260,18 @@ export default {
     .btn {
       width: 91px;
       height: 30px;
-      background: rgba(0,60,116,0.6);
-      box-shadow: inset 0px 0px 6px 0px #00C2FF;
+      background: rgba(0, 60, 116, 0.6);
+      box-shadow: inset 0px 0px 6px 0px #00c2ff;
       border-radius: 2px 2px 2px 2px;
       opacity: 1;
-      border: 1px solid rgba(181,207,255,0.5);
+      border: 1px solid rgba(181, 207, 255, 0.5);
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 14px;
-      font-family: 'Source Han Sans CN-Regular';
+      font-family: "Source Han Sans CN-Regular";
       font-weight: 400;
-      color: #D3EEF2;
+      color: #d3eef2;
       line-height: 20px;
       cursor: pointer;
     }
diff --git a/src/views/components/shop/components/index.js b/src/views/components/shop/components/index.js
new file mode 100644
index 0000000..24629f0
--- /dev/null
+++ b/src/views/components/shop/components/index.js
@@ -0,0 +1,4 @@
+export { default as tab1 } from "./tab1.vue";
+export { default as tab2 } from "./tab2.vue";
+export { default as tab3 } from "./tab3.vue";
+export { default as tab4 } from "./tab4.vue";
diff --git a/src/views/components/shop/components/tab1.vue b/src/views/components/shop/components/tab1.vue
new file mode 100644
index 0000000..60265f6
--- /dev/null
+++ b/src/views/components/shop/components/tab1.vue
@@ -0,0 +1,7 @@
+<template></template>
+
+<script>
+export default {};
+</script>
+
+<style></style>
diff --git a/src/views/components/shop/components/tab2.vue b/src/views/components/shop/components/tab2.vue
new file mode 100644
index 0000000..60265f6
--- /dev/null
+++ b/src/views/components/shop/components/tab2.vue
@@ -0,0 +1,7 @@
+<template></template>
+
+<script>
+export default {};
+</script>
+
+<style></style>
diff --git a/src/views/components/shop/components/tab3.vue b/src/views/components/shop/components/tab3.vue
new file mode 100644
index 0000000..60265f6
--- /dev/null
+++ b/src/views/components/shop/components/tab3.vue
@@ -0,0 +1,7 @@
+<template></template>
+
+<script>
+export default {};
+</script>
+
+<style></style>
diff --git a/src/views/components/shop/components/tab4.vue b/src/views/components/shop/components/tab4.vue
new file mode 100644
index 0000000..60265f6
--- /dev/null
+++ b/src/views/components/shop/components/tab4.vue
@@ -0,0 +1,7 @@
+<template></template>
+
+<script>
+export default {};
+</script>
+
+<style></style>
diff --git a/src/views/components/shop/index.vue b/src/views/components/shop/index.vue
new file mode 100644
index 0000000..797dfe3
--- /dev/null
+++ b/src/views/components/shop/index.vue
@@ -0,0 +1,112 @@
+<!--
+ * @Descripttion: 
+ * @version: 
+ * @Author: JC9527
+ * @Date: 2023-08-17 10:41:06
+ * @LastEditors: JC9527
+ * @LastEditTime: 2023-08-17 19:08:16
+-->
+<template>
+  <dia-log ref="dialog5" :width="width" :title="title">
+    <div class="tab-list">
+      <div
+        class="tab-item"
+        v-for="(item, index) in list"
+        :key="index"
+        :class="currentIndex == index ? 'activeTab' : ''"
+        @click="changeTab(index)"
+      >
+        {{ item.name }}
+      </div>
+    </div>
+    <div class="tab-page"></div>
+  </dia-log>
+</template>
+<script>
+import { tab1, tab2, tab3, tab4 } from "./components/index.js";
+import diaLog from "../../components/dialog/index.vue";
+export default {
+  components: {
+    tab1,
+    tab2,
+    tab3,
+    tab4,
+  },
+  props: {
+    width: {
+      type: String,
+      default: "565px",
+    },
+    title: {
+      type: String,
+      default: "视频墙",
+    },
+  },
+  components: { diaLog },
+  data() {
+    return {
+      currentIndex: 0,
+      list: [
+        { name: "主体工商信息" },
+        { name: "安全生产模版" },
+        { name: "整改过程信息" },
+        { name: "过期未整改告警" },
+      ],
+    };
+  },
+  methods: {
+    changeTab(index) {
+      if (this.currentIndex == index) return;
+      this.currentIndex = index;
+    },
+    open() {
+      this.$refs.dialog5.open("5");
+    },
+    Close() {
+      this.$refs.dialog3.Close();
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+::v-deep .el-dialog__body {
+  padding: 30px !important;
+}
+.video-main {
+  display: grid;
+  grid-template-columns: repeat(3, 200px);
+  grid-column-gap: 10px;
+  grid-row-gap: 15px;
+  .main-item {
+    // width: 248px;
+    height: 100px;
+    width: 100%;
+    background-image: url("../../../assets/images/videoImg.png");
+    background-size: 100% 100%;
+  }
+}
+.tab-list {
+  display: flex;
+  align-items: center;
+  .tab-item {
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 400;
+    color: #d3eef2;
+    margin-right: 15px;
+    padding: 6px 10px;
+    background: url("~@/assets/images/changeBtn2.png");
+    background-size: 100% 100%;
+  }
+  .activeTab {
+    color: #ffffff;
+    font-weight: 700;
+    background: url("~@/assets/images/activeTab.png");
+    background-size: 100% 100%;
+  }
+}
+.tab-page {
+  min-height: 500px;
+  padding-top: 20px;
+}
+</style>
diff --git a/src/views/tool/build/IconsDialog.vue b/src/views/tool/build/IconsDialog.vue
index 958be50..f82e62b 100644
--- a/src/views/tool/build/IconsDialog.vue
+++ b/src/views/tool/build/IconsDialog.vue
@@ -13,7 +13,7 @@
         <el-input
           v-model="key"
           size="mini"
-          :style="{width: '260px'}"
+          :style="{ width: '260px' }"
           placeholder="请输入图标名称"
           prefix-icon="el-icon-search"
           clearable
@@ -23,7 +23,7 @@
         <li
           v-for="icon in iconList"
           :key="icon"
-          :class="active===icon?'active-item':''"
+          :class="active === icon ? 'active-item' : ''"
           @click="onSelect(icon)"
         >
           <i :class="icon" />
@@ -34,42 +34,42 @@
   </div>
 </template>
 <script>
-import iconList from '@/utils/generator/icon.json'
+import iconList from "@/utils/generator/icon.json";
 
-const originList = iconList.map(name => `el-icon-${name}`)
+const originList = iconList.map((name) => `el-icon-${name}`);
 
 export default {
   inheritAttrs: false,
-  props: ['current'],
+  props: ["current"],
   data() {
     return {
       iconList: originList,
       active: null,
-      key: ''
-    }
+      key: "",
+    };
   },
   watch: {
     key(val) {
       if (val) {
-        this.iconList = originList.filter(name => name.indexOf(val) > -1)
+        this.iconList = originList.filter((name) => name.indexOf(val) > -1);
       } else {
-        this.iconList = originList
+        this.iconList = originList;
       }
-    }
+    },
   },
   methods: {
     onOpen() {
-      this.active = this.current
-      this.key = ''
+      this.active = this.current;
+      this.key = "";
     },
     onClose() {},
     onSelect(icon) {
-      this.active = icon
-      this.$emit('select', icon)
-      this.$emit('update:visible', false)
-    }
-  }
-}
+      this.active = icon;
+      this.$emit("select", icon);
+      this.$emit("update:visible", false);
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
 .icon-ul {
@@ -90,9 +90,9 @@ export default {
     &:hover {
       background: #f2f2f2;
     }
-    &.active-item{
+    &.active-item {
       background: #e1f3fb;
-      color: #7a6df0
+      color: #7a6df0;
     }
     > i {
       font-size: 30px;