From ad3128bb2eed8c7ae05f30691bec655e2e5ccc04 Mon Sep 17 00:00:00 2001
From: gounaikang <gounaikang@hisense.com>
Date: Mon, 12 Dec 2022 13:06:11 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E9=87=8D=E7=82=B9=E5=8C=BA=E5=9F=9F?=
 =?UTF-8?q?=EF=BC=8C=E9=81=93=E8=B7=AF=E7=BC=BA=E9=99=B7=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/supermap/createMarkerPopup.js             |  23 +-
 .../pages/area/components/GatherAreaPop.vue   | 561 ++++++++++++++++++
 src/views/pages/area/index.vue                |   7 +-
 .../roadGovernance/components/RoadMain.vue    |   6 +-
 4 files changed, 590 insertions(+), 7 deletions(-)
 create mode 100644 src/views/pages/area/components/GatherAreaPop.vue

diff --git a/src/supermap/createMarkerPopup.js b/src/supermap/createMarkerPopup.js
index 15a0f6b..b088cd8 100644
--- a/src/supermap/createMarkerPopup.js
+++ b/src/supermap/createMarkerPopup.js
@@ -37,6 +37,7 @@ import WaterPointPop from '@/views/pages/waterPoints/components/WaterPointPop'
 import SiteRoadPop from '@/views/pages/construction/components/SiteRoadPop'
 import ImportantAreaPop from '@/views/pages/area/components/ImportantAreaPop'
 import ImportantAreaPopNew from '@/views/pages/area/components/ImportantAreaPopNew'
+import GatherAreaPop from '@/views/pages/area/components/GatherAreaPop'
 
 
 import bus from "@/views/layout/bus";
@@ -258,6 +259,25 @@ function createImportantAreaPopNew(feature) {
     })
     return popupDom.initDom()
 }
+
+// 重点区域聚集區弹窗
+function createGatherAreaPop(feature) {
+    bus.$emit('areaCauseAnalysis', feature.data)
+
+    const popupDom = new Dom({
+        template: '<Gather-Area-pop :feature="feature"></Gather-Area-pop>',
+        data() {
+            return {
+                feature: feature,
+            }
+        },
+        created() {},
+        components: {
+            GatherAreaPop
+        }
+    })
+    return popupDom.initDom()
+}
 /**
  * 生成专题企业信息通用弹窗Dom
  * @param resourceTitle
@@ -740,5 +760,6 @@ export {
     createWaterPointPop,
     createSiteRoadPop,
     createImportantAreaPop,
-    createImportantAreaPopNew
+    createImportantAreaPopNew,
+    createGatherAreaPop
 }
\ No newline at end of file
diff --git a/src/views/pages/area/components/GatherAreaPop.vue b/src/views/pages/area/components/GatherAreaPop.vue
new file mode 100644
index 0000000..ff9cb24
--- /dev/null
+++ b/src/views/pages/area/components/GatherAreaPop.vue
@@ -0,0 +1,561 @@
+<template>
+  <div class="pop-box">
+    <div class="title-bg"></div>
+    <div class="title">
+      <span>聚集区详情</span>
+    </div>
+    <div class="site-base-information">
+       <div class="item">
+        <p>
+          <span>总人数：</span>
+        <span>{{ feature.data.allNums || "" }}</span>
+        </p>
+       <p>
+        <span>本地人数：</span>
+        <span>{{ feature.data.localNums || "" }}</span>
+        </p>
+       </div>  
+        <div class="item">
+          <p>
+          <span>外地人数：</span>
+        <span>{{ feature.data.nonlocalNums || "" }}</span>
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "",
+  props: {
+    feature: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  mounted() {
+    
+  },
+  data() {
+    return {
+    };
+  },
+  methods: {
+   
+  },
+};
+</script>
+<style lang="scss">
+// .leaflet-popup {
+//   width: auto !important;
+// }
+  .site-popup {
+    .leaflet-popup-content-wrapper {
+      box-shadow: 0 0 10px  rgba($color: #1ffefd, $alpha: .4);
+      background: rgba(24,51,76,.95);
+      border: 1px solid rgba(50,227,235,.95);
+    }
+    .leaflet-popup-content {
+      width: 450px !important;
+      height: 250px;
+      padding: 12px 16px;
+      .pop-box {
+        width: 100%;
+        height: 100%;
+
+        .title-bg {
+          position: absolute;
+          top: 0;
+          left: 0;
+          height: 42px;
+          width: 100%;
+          opacity: .4;
+          background: linear-gradient(180deg, rgba($color: #1fa2fe, $alpha: 1) 0, rgba($color: #1fa2fe, $alpha: 0) 100%);
+        }
+
+        .title{
+            color: #fff;
+            font-size: 16px;
+             span:nth-child(1) {
+              font-weight:bold;
+             }
+            span:nth-child(2) {
+              display: inline-block;
+              width: 40px;
+              height: 22px;
+              margin-left: 8px;
+              border-radius: 2px;
+              border: 1px solid #0494ff;
+              color: #1ffefd;
+              text-align: center;
+              font-size: 14px;
+            }
+        }
+        
+        .site-base-information{
+          height: 90px;
+          margin: 6px 0;
+          padding-left: 20px;
+          color: rgba(255, 255, 255, .6);
+           padding: 10px;
+          //line-height: 26px;
+          .item{
+            width: 100%;
+            height:20px;
+            //background-color: red;
+            margin-top: 10px;
+            display: flex;
+            flex-wrap: wrap;
+            &>p{
+              margin: 0 !important;
+              width:50%;
+              flex:1;
+              color:#ffffff;
+            }
+            
+          }
+          .item:first-child{
+            margin-top: 0;
+          }
+        }
+
+        .site-content-new {
+          display: flex;
+          flex-direction: column;
+          .site-content-title{
+            width:100%;
+            height:30px;
+            //background-color:red;
+            border-bottom:solid 1px #fff ;
+            display: flex;
+            flex-wrap: wrap;
+           .item{
+              padding-top: 5px;
+              margin-left: 2px;
+              //flex:1; 
+              height:30px;
+              width:100px;
+              text-align: center;
+              //background: #abcdef;
+              line-height: 25px;
+              cursor: pointer;
+            }
+            .is-active{
+               text-decoration:underline;
+            }
+          }
+          .site-content-content{
+            display: flex;
+            flex-direction: row;
+            padding-top: 10px;
+               .site-content-left {
+            width: 372px;
+            margin-right: 15px;
+            height: 310px;
+            overflow-y: auto;
+            overflow-x: hidden;
+            .left-mid-line {
+              margin: 6px 0;
+            }
+            .area-content-left-top {
+              width: 100%;
+              height: 50px;
+              background: linear-gradient(0deg, rgba($color: #255287, $alpha: 0) 0, rgba($color: #255287, $alpha: 1) 100%);
+              display: flex;
+              justify-content: space-around;
+              align-items: center;
+              & > div {
+                text-align: center;
+                > div:first-child {
+                  color: #1ffefd;
+                }
+                > div:last-child {
+                  color: rgba(255, 255, 255,.6);
+                  font-size: 14px;
+                }
+              }
+            }
+            .site-content-left-bottom {
+              width: 100%;
+              margin-top: 16px;
+              .filter-btn-typeSelect {
+                display: flex;
+                .typeSelect-btn {
+                  border-radius: 20px;
+                  border: 1px solid rgba(0, 255, 255, .6);
+                  background: rgba(2,51,87,.6);
+                  margin-right: 5px;
+                  padding: 4px 10px;
+                  font-size: 14px;
+                  color: #fff;
+                  cursor: pointer;
+                }
+                .typeSelect-btn-active {
+                  background: #005ea3;
+                  border: 1px solid #00ffff;
+                }
+              }
+              #chart {
+                width: 100%;
+                height: 206px;
+              }
+            }
+             .el-input {
+      width: 328px;
+    }
+    .el-input__inner {
+      border: 1px solid rgba(31,254,253,.9);
+      color: #fff;
+      border-radius: unset;
+      background: rgba($color: #203b5d, $alpha: .8);
+      &::placeholder {
+        color: rgba($color: #fff, $alpha: 0.6);
+      }
+    }
+    .el-input__prefix {
+      color: rgba(31,254,253,.9);
+    }
+
+    .el-checkbox-group {
+      height: 316px;
+      width: 372px;
+      overflow-y: auto;
+      margin-top: 6px;
+      &::-webkit-scrollbar {
+      width: 8px;
+      background-color: #10335e;
+      }
+      &::-webkit-scrollbar-thumb {
+        background-color: #446dac !important;
+      }
+    }
+    .el-checkbox-button {
+      border-radius: 15px;
+      margin: 10px;
+      .el-checkbox-button__inner {
+        height: 30px;
+        line-height: 6px;
+        border-radius: 15px;
+        background: linear-gradient(0deg, rgba($color: #24517b, $alpha: 1) 0, rgba($color: #24517b, $alpha: 0) 100%);
+        border: 1px solid #1d98a0;
+        font-size: 16px;
+        color: #1ffefd;
+      }
+      .el-checkbox-button__inner:hover {
+        border: 1px solid #1ffefd;
+        background: linear-gradient(0deg, #1577d3 0%, #1251ab 100%);
+      }
+    }
+    .el-checkbox-button.is-checked {
+      .el-checkbox-button__inner{
+        color: #fff;
+        border: 1px solid #1ffefd;
+        background: linear-gradient(0deg, #1577d3 0%, #1251ab 100%);
+      }
+    }
+
+    .el-tree {
+      width: 366px;
+      height: 300px;
+      overflow-y: auto;
+      margin-top: 10px;
+      background: transparent;
+      color: #fff;
+
+      &::-webkit-scrollbar {
+      width: 8px;
+      background-color: #10335e;
+      }
+      &::-webkit-scrollbar-thumb {
+        background-color: #446dac !important;
+      }
+
+      .el-tree-node__content:hover {
+        background: rgba(27,255,255,.2);
+      }
+      .el-tree-node:focus > .el-tree-node__content {
+        background-color: rgba(27,255,255,.2);
+        color: #fff;
+      }
+    }
+          }
+          .site-content-right {
+            width: 400px;
+            .img-container {
+              width: 280px;
+              height: 158px;
+              cursor: pointer;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+            }
+            .people-total{
+              width: 310px;
+              height: 60px;
+              cursor: pointer;
+              display: -webkit-box;
+              display: -ms-flexbox;
+              display: flex;
+              -webkit-box-align: center;
+              -ms-flex-align: center;
+              align-items: center;
+              -webkit-box-pack: center;
+              -ms-flex-pack: center;
+              .year-on-year{
+                margin-left: 10px;
+              }
+            }
+            .video-table {
+              margin-top: 20px;
+              h4 {
+                color: #fff;
+              }
+              .el-table{
+                margin-top: 8px;
+                border: 1px solid #325d94;
+                .el-table__body-wrapper{
+                  height: 90px;
+                  overflow-y: auto;
+                  background: #18304c;
+                  &::-webkit-scrollbar {
+                  width: 8px;
+                  background-color: #10335e;
+                  }
+                  &::-webkit-scrollbar-thumb {
+                    background-color: #446dac !important;
+                  }
+                  .el-table__empty-block {
+                    background: rgba(24,51,76,.95);
+                  }
+                }
+                th,td {
+                  border-right: 1px solid #325d94;
+                }
+              }
+              .el-table::before {
+                display: none;
+              }
+            }
+          }
+          }
+       
+        }
+        .table-filter{
+            width:100%;
+            height:30px;
+            //background-color: red;
+            //text-align: center;
+             display: flex;
+             justify-content: "space-between";
+             width:700px;
+             margin-top: 10px;
+             .span-text{
+              line-height: 30px;
+              margin-right: 10px;
+             }
+         .el-input {
+          width: 200px;
+          }
+        .el-input__inner {
+       width: 160px;
+       height: 30px;
+       padding-left:5px;
+      border: 1px solid rgba(31,254,253,.9);
+      color: #fff;
+      background: rgba($color: #203b5d, $alpha: .8);
+      border-radius: unset;
+      &::placeholder {
+        color: rgba($color: #fff, $alpha: 0.6);
+      }
+    }
+    .el-input__prefix {
+      color: rgba(31,254,253,.9);
+      left: 130px;
+      i{
+        height: 30px;
+        line-height: 30px;
+      }
+      //width:160px;
+    }
+
+    .el-select {
+      // margin-left: 10px;
+      .el-input {
+        width: 160px;
+      }
+      .el-input__suffix-inner{
+        i{line-height: 30px;}
+      }
+    } 
+    .el-button{
+      position: absolute;
+    right: 18px;
+    //height: 30px;
+    line-height: 0;
+    background-color: #1fa2fe;
+    border:solid 1px #1fa2fe ;
+    color:#ffffff;
+    }
+          }
+       .site-content-people {
+          display: flex;
+          flex-direction: column;
+          .people-table{
+            margin-top: 10px;
+            .el-table {
+      border: 1px solid #325d94;
+      width: 100%;
+      background: transparent;
+      th,td {
+          border-right: 1px solid #325d94 !important;
+        }
+      // .descending.is-leaf.is-sortable {
+      //   .sort-caret {
+      //     border-top-color: #1dfeff;
+      //   }
+      // }
+    }
+    .cell {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      font-size: 16px;
+      font-weight: normal;
+      text-align: center;
+      height: 36px;
+      line-height: 36px;
+    }
+    .el-table th.is-leaf {
+      border: 1px solid #1f557c;
+    }
+    .el-table td {
+      border: 0;
+      padding: 5px 0;
+    }
+    .el-table th {
+      padding: 5px 0;
+    }
+    .el-table::before {
+      height: 0px;
+    }
+    .el-table__row:nth-of-type(even) > td {
+      background-color: #113660 !important;
+    }
+    .el-table__body-wrapper {
+      &::-webkit-scrollbar {
+        width: 8px;
+        background-color: #10335e;
+      }
+      &::-webkit-scrollbar-thumb {
+        background-color: #446dac !important;
+      }
+    }
+          }
+       
+        }
+         .site-content-facilities {
+          display: flex;
+          flex-direction: column;
+          .facilities-table{
+              margin-top: 10px;
+                     .el-table {
+      border: 1px solid #325d94;
+      width: 100%;
+      background: transparent;
+      th,td {
+          border-right: 1px solid #325d94 !important;
+        }
+      // .descending.is-leaf.is-sortable {
+      //   .sort-caret {
+      //     border-top-color: #1dfeff;
+      //   }
+      // }
+    }
+    .cell {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      font-size: 16px;
+      font-weight: normal;
+      text-align: center;
+      height: 36px;
+      line-height: 36px;
+    }
+    .el-table th.is-leaf {
+      border: 1px solid #1f557c;
+    }
+    .el-table td {
+      border: 0;
+      padding: 5px 0;
+    }
+    .el-table th {
+      padding: 5px 0;
+    }
+    .el-table::before {
+      height: 0px;
+    }
+    .el-table__row:nth-of-type(even) > td {
+      background-color: #113660 !important;
+    }
+    .el-table__body-wrapper {
+      &::-webkit-scrollbar {
+        width: 8px;
+        background-color: #10335e;
+      }
+      &::-webkit-scrollbar-thumb {
+        background-color: #446dac !important;
+      }
+    }
+          }
+        }
+      }
+
+    }
+
+    .leaflet-popup-close-button {
+      color: #3afefc !important;
+      font-size: 12px;
+    }
+  }
+</style>
+<style lang='scss' scoped>
+.particulars {
+  position: absolute;
+  right: 5px;
+  width: 80px;
+  height: 40px;
+  bottom: 5px;
+}
+.List-Details-pop {
+  background-color: #fff;
+  font-size: 16px;
+  padding-bottom: 20px;
+  display: flex;
+  width: 400px;
+
+  .topContent {
+    background: #000;
+    padding: 14px;
+    width: 400px;
+  }
+  .content {
+    width: 400px;
+    display: flex;
+    flex-wrap: wrap;
+    b {
+      color: #000;
+      font-size: 14px;
+    }
+    p {
+      color: #000;
+      font-size: 14px;
+    }
+  }
+  .title {
+    background-color: #000;
+    color: #fff;
+  }
+}
+</style>
diff --git a/src/views/pages/area/index.vue b/src/views/pages/area/index.vue
index 66807f8..2821cb3 100644
--- a/src/views/pages/area/index.vue
+++ b/src/views/pages/area/index.vue
@@ -113,7 +113,7 @@ import VideoPlay from './components/VideoPlay'
 import VideoList from "./components/VideoList";
 import SiteList from "./components/SiteList";
 import { selectByJdWd } from "@/api/construction/index";
-import { createSiteListPop,createCameraDetailsPop,createEventListDetailsPop,createImportantAreaPop } from "@/supermap/createMarkerPopup";
+import { createSiteListPop,createCameraDetailsPop,createEventListDetailsPop,createImportantAreaPop, createGatherAreaPop } from "@/supermap/createMarkerPopup";
 import { listPassengerFlow, listPassengerFlowByAllNums } from "@/api/civilizedCity.js";
 import { selectByAreaEvent, selectKeyArea } from "@/api/area";
 import { gcjLL2wgs84LL } from "@/utils/coordinateSystemTransform";
@@ -447,13 +447,14 @@ export default {
               hotEventListDetail.push({
                 latLng: { lat: item.latitude, lng: item.longitude },
                 data: item,
-                type: 'personHot'
+                type: 'site'
               })
             })
             this.hiMapFun.addPointsToMap(
               hotEventListDetail,
               'poi-blue.png',
-              'PersonHotDetail'
+              'PersonHotDetail',
+              createGatherAreaPop
             )
             break;
           case "公园广场":
diff --git a/src/views/pages/roadGovernance/components/RoadMain.vue b/src/views/pages/roadGovernance/components/RoadMain.vue
index 7cb289c..6ffc66b 100644
--- a/src/views/pages/roadGovernance/components/RoadMain.vue
+++ b/src/views/pages/roadGovernance/components/RoadMain.vue
@@ -59,12 +59,12 @@
             <el-table-column prop="dt" label="时间"> </el-table-column>
           </el-table>
         </el-tab-pane>
-        <el-tab-pane disabled label="市民热线" name="市民热线"
+        <!-- <el-tab-pane disabled label="市民热线" name="市民热线"
           >市民热线</el-tab-pane
         >
         <el-tab-pane disabled label="数字城管" name="数字城管"
           >数字城管</el-tab-pane
-        >
+        > -->
       </el-tabs>
     </div>
     <!-- 成因分析 -->
@@ -791,7 +791,7 @@ export default {
       })
     },
     tabsHandleClick (item) {
-      debugger
+      // debugger
       this.hiMapFun.removeLayerByLayerName('roadPoint')
       this.tableData = item.data
       this.addToMap(item.data)