事件炮筒

src/assets/scss/modules/visual/c/common.scss

@@ -17,3 +17,23 @@
         background: darken(#0c81fe, 20);
     }
 }
+
+@mixin scrollBar2 {
+    &::-webkit-scrollbar {
+        /*滚动条整体样式*/
+        width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
+        height: 1px;
+    }
+    &::-webkit-scrollbar-thumb {
+        /*滚动条里面小方块*/
+        border-radius: 8px;
+        box-shadow: inset 0 0 5px rgba(#000, 0.1);
+        background: linear-gradient(270deg, #999, #ddd);
+    }
+    &::-webkit-scrollbar-track {
+        /*滚动条里面轨道*/
+        box-shadow: inset 0 0 5px rgba(#000, 0.1);
+        border-radius: 8px;
+        background: darken(#999, 20);
+    }
+}

src/views/modules/visual/command/cpts/map.vue

@@ -10,7 +10,11 @@
     </div>
     <div class="btn" v-else @click="shiftMapStyle('light')">切换浅色模式</div>
 
-    <cpt-popup ref="popup" />
+    <cpt-popup
+      ref="popup"
+      @clickListItem="handleClickDotListItem"
+      @operate="handleClickDotBtn"
+    />
   </div>
 </template>
 
@@ -564,10 +568,20 @@ export default {
 
       dotLayer2.on("click", (e) => {
         console.log("--------clickDot2", e);
-        this.handleClickDot(
-          e.feature.properties,
-          e.feature.geometry.coordinates
-        );
+        if (
+          e.feature.properties.dataList &&
+          e.feature.properties.dataList.length == 1
+        ) {
+          this.handleClickDot(
+            { ...e.feature.properties, ...e.feature.properties.dataList[0] },
+            e.feature.geometry.coordinates
+          );
+        } else {
+          this.handleClickDot(
+            { ...e.feature.properties, placeType: "list" },
+            e.feature.geometry.coordinates
+          );
+        }
       });
 
       dotLayer2.on("mousemove", (e) => {
@@ -577,6 +591,19 @@ export default {
       dotLayer2.on("unmousemove", (e) => {});
     },
 
+    handleClickDotBtn(type, info) {
+      console.log(type, info);
+      this.$emit("clickDotBtn", type, info);
+    },
+
+    handleClickDotListItem(item) {
+      console.log("handleClickDotListItem", item);
+      this.handleClickDot(item, [
+        parseFloat(item.longitude),
+        parseFloat(item.latitude),
+      ]);
+    },
+
     async handleClickDot(item, posArr) {
       console.log("handleClickDot", item, posArr);
       const res = await this.$refs.popup.show(item);

src/views/modules/visual/command/cpts/popup.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="m-pop" v-show="!hidden">
     <div class="info">
-      <div v-show="placeType === 'resi' || placeType === 'special_resi'">
+      <div v-if="placeType === 'resi' || placeType === 'special_resi'">
         <div class="info-title">居民信息</div>
         <div class="item">
           姓名：
@@ -46,11 +46,14 @@
           <span>{{ info.resiCategoryNames || "--" }}</span>
         </div>
         <div class="operate">
-          <div @click="toPeople" class="btn">更多</div>
+          <div @click="handleClickBtn('watch-resi')" class="btn">查看更多</div>
+          <div @click="handleClickBtn('create-demand')" class="btn">
+            发布需求
+          </div>
         </div>
       </div>
 
-      <div v-show="placeType === 'dangerous_chemicals'">
+      <div v-if="placeType === 'dangerous_chemicals'">
         <div class="info-title">企业信息</div>
         <div class="item">
           企业名称：
@@ -87,7 +90,7 @@
       </div>
 
       <div
-        v-show="
+        v-if="
           placeType === 'public_service' ||
           placeType === 'city_management' ||
           placeType === 'superior_resource'
@@ -116,7 +119,7 @@
         </div>
       </div>
 
-      <div v-show="placeType === 'event'">
+      <div v-if="placeType === 'event'">
         <div class="info-title">难点痛点</div>
         <div class="item">
           所属网格：
@@ -184,9 +187,13 @@
           身份证号：
           <span>{{ info.idCard || "--" }}</span>
         </div>
+
+        <div class="operate">
+          <div @click="handleClickBtn('watch-event')" class="btn">查看详情</div>
+        </div>
       </div>
 
-      <div v-show="placeType === 'community_org'">
+      <div v-if="placeType === 'community_org'">
         <div class="info-title">组织信息</div>
         <div class="item">
           组织名称：
@@ -222,7 +229,7 @@
         </div>
       </div>
 
-      <div v-show="placeType === 'group_rent'">
+      <div v-if="placeType === 'group_rent'">
         <div class="info-title">房屋信息</div>
         <div class="item">
           房屋名称：
@@ -254,7 +261,7 @@
         </div>
       </div>
 
-      <div v-show="placeType === 'enterprise_patrol'">
+      <div v-if="placeType === 'enterprise_patrol'">
         <div class="info-title">企事业信息</div>
         <div class="item">
           场所类型：
@@ -286,7 +293,7 @@
         </div>
       </div>
 
-      <div v-show="placeType === 'party_unit'">
+      <div v-if="placeType === 'party_unit'">
         <div class="info-title">联建单位信息</div>
         <div class="item">
           单位名称：
@@ -321,6 +328,28 @@
           <span>{{ info.address || "--" }}</span>
         </div>
       </div>
+
+      <div v-if="placeType === 'grid'">
+        <div class="operate">
+          <div @click="handleClickBtn('create-service')" class="btn">
+            发起服务
+          </div>
+        </div>
+      </div>
+
+      <div v-if="placeType === 'list'">
+        <div class="info-title">列表</div>
+        <div class="list">
+          <div
+            class="item"
+            @click="handleClickListItem(item)"
+            :key="'list' + item.id"
+            v-for="(item, index) in list"
+          >
+            {{ index + 1 }}、{{ item.content }}
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -343,7 +372,7 @@ export default {
       hidden: true,
       placeType: "",
       info: {},
-      eventInfo: {},
+      list: [],
     };
   },
 
@@ -353,19 +382,30 @@ export default {
   mounted() {},
 
   methods: {
-    toPeople() {
-      //   this.showPeopleInfo = true;
+    handleClickBtn(type) {
+      this.$emit("operate", type, this.info);
+    },
+
+    handleClickListItem(item) {
+      console.log("handleClickListItem", item);
+      this.$emit("clickListItem", item);
     },
 
     async show(item) {
-      const { placeType, id, latitude, longitude } = item;
-      if (!id || !placeType) {
+      console.log("-----------------show");
+      const { placeType, latitude, longitude } = item;
+      if (!placeType) {
         return false;
       }
       if (!latitude || !longitude) {
         this.$message.warning("请先完善坐标位置");
         return false;
       }
+
+      if (placeType === "list") {
+        this.list = item.dataList;
+      }
+
       if (placeType === "resi" || placeType === "special_resi") {
         await this.loadResi(item);
       }
@@ -411,10 +451,6 @@ export default {
       return true;
     },
 
-    confirm() {
-      console.log(1111111);
-    },
-
     async loadResi(info) {
       const url = "/epmetuser/icresiuser/resi-brief/" + info.id;
       // const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyunit/distribution"
@@ -696,11 +732,18 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "@/assets/scss/c/config";
+@import "@/assets/scss/c/function";
+@import "@/assets/scss/modules/visual/c/common";
+
 .m-pop {
+  @include scrollBar2;
   width: 380px;
   color: #333;
   font-size: 14px;
   line-height: 20px;
+  max-height: 600px;
+  overflow-y: auto;
 
   .info {
     .info-title {
@@ -721,8 +764,17 @@ export default {
       }
     }
   }
+  .item {
+    @include toe;
+  }
+
+  .operate {
+    display: flex;
+  }
+
   .btn {
     margin-top: 20px;
+    margin-right: 20px;
     width: 100px;
     line-height: 30px;
     border: 1px solid #eee;