五大图层

src/assets/scss/modules/visual/fiveLayerMap.scss

@@ -52,59 +52,6 @@
     flex: 0 0 600px;
     margin-left: 12px;
 
-    .div_search {
-      width: 100%;
-      height: 56px;
-      text-align: center;
-      background-color: #011168;
-      border-radius: 4px 0 0 4px;
-      border: none;
-      box-shadow: 0 0 10px inset #1a5afd;
-      font-size: 18px;
-      font-family: PingFang SC;
-      font-weight: 400;
-      color: #ffffff;
-      opacity: 0.7;
-      display: flex;
-      justify-content: space-between;
-      .div_search_left {
-        display: flex;
-        justify-content: flex-start;
-        .icon {
-          display: flex;
-          align-items: center;
-          margin-left: 29px;
-
-          > img {
-            width: 24px;
-            height: 24px;
-          }
-        }
-
-        > span {
-          line-height: 56px;
-          margin-left: 10px;
-        }
-      }
-
-      .btn {
-        text-align: center;
-        flex: 0 0 113px;
-        height: 56px;
-        background: linear-gradient(90deg, #1a5afd, #26c4ff);
-        font-size: 20px;
-        font-family: PingFang SC;
-        font-weight: 400;
-        color: #ffffff;
-        line-height: 56px;
-        border-radius: 0 4px 4px 0;
-      }
-    }
-
-    .div_search:hover {
-      cursor: pointer;
-    }
-
     .div_tips{
       box-sizing: border-box;
       width: 100%;
@@ -167,16 +114,15 @@
             }
             .item_content{
               width:100px;
-        
               margin-left:8px;
               font-size: 16px;
               font-family: PingFang SC;
               font-weight: 400;
-              color: #D2E7FF;
+              color: #e5effa;
             }
 
             .item_content_sel{
-              color: #99c7fb;
+              color: #5da8fd;
             }
            
           }
@@ -207,90 +153,89 @@
     .div_info {
       box-sizing: border-box;
       width: 100%;
-
+      margin-top:10px;
       height: calc(88vh - 302px - 10px);
       color: #fff;
       background: url('../../../img/modules/visual/warning-box.png') no-repeat
         center;
       background-size: 100% 100%;
-      // padding: 45px 21px 35px 24px;
+      padding: 32px 21px 20px 20px;
 
-      .info_loading {
+      .div_search_list {
-        margin-top: 50px;
+        margin: 0 auto;
-      }
+        text-align: center;
-      .info_tip {
+        width: 559px;
-        padding: 31px 0 0 19px;
+        height: 48px;
+        background: #01106800;
+        border-radius: 8px;
         display: flex;
-        > img {
+        justify-content: flex-end;
-          height: 34px;
+      
-          width: 46px;
+        .icon {
+          display: flex;
+          align-items: center;
+          margin-left: 29px;
+          margin-top: 16px;
+      
+          > img {
+            width: 24px;
+            height: 24px;
+          }
         }
       
-        .tip_title {
+        .btn {
-          line-height: 34px;
+          text-align: center;
-          margin-left: 7px;
+          flex: 0 0 113px;
-          font-size: 22px;
+          height: 53px;
+          background: #0082fb;
+          border-radius: 0px 8px 8px 0px;
+          font-size: 20px;
           font-family: PingFang SC;
-          font-weight: 800;
+          font-weight: 400;
           color: #ffffff;
+          line-height: 53px;
+        }
+        .btn:hover {
+          cursor: pointer;
         }
       }
      
-      .info_list {
-        margin-top: 9px;
-
-        .item {
-          .item_line {
-            margin-top: 13px;
-            margin-left: 24px;
-            width: 517px;
-            height: 0px;
-            border: 1px dotted #1797ff31;
-            border-width: 0.5px;
-          }
-          .last_line {
-            border: 1px dotted #1797ff00;
-          }
-          .list_item {
-            display: flex;
-            padding: 18px 59px 0;
-            justify-content: space-between;         
      
-            > img {
+      .tb {
-              height: 36px;
+        height: calc(88vh - 302px - 10px);
-              width: 36px;
+        overflow-y: auto;
-            }
+        @include scrollBar;
+        margin-top:20px;
+      }
   
-            .item_content {
+      .m-pagination {
-              margin-left: 10px;
+        position: absolute;
-              height: 76px;
+        box-sizing: border-box;
-              display: flex;
+        right: 5px;
-              flex-direction: column;
+        bottom: 5px;
-              justify-content: center;
+        width: 100%;
-
+        height: 40px;
-              .item_label {
+        display: flex;
-                font-size: 18px;
+        justify-content: flex-end;
-                font-family: PingFang SC;
-                font-weight: 400;
-                color: #ffffff;
-              }
-              .item_count {
-                margin-top: 10px;
-                font-size: 28px;
-                font-family: PingFang SC;
-                font-weight: bold;
-                color: #00fffc;
-              }
-            }
   
-          }
+        /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
+          background: #0266d1;
+          color: #000d3f;
+        }
   
-          ::v-deep .el-popper {
+        /deep/ .el-pagination .el-pager li {
-            padding: 0px;
+          background: #002e74;
-          }
+        }
-          //
+  
+        /deep/ .el-pagination .btn-prev {
+          background: #002e74;
+        }
+  
+        /deep/ .el-pagination .btn-next {
+          background: #002e74;
         }
       }
+      
     }
 
     

src/views/modules/visual/communityGovern/fivelayers/mapIndex.vue

@@ -59,48 +59,61 @@
             </el-scrollbar>
           </div>
         </div>
+
         <div class="div_info">
-          <!-- <el-scrollbar style="height:98%">
+          <div class="div_search_list">
-            <div class="info_tip">
+            <el-input size="mini"
-              <img src="../../../../../assets/img/shuju/title-tip.png"
+                      WarningColor='warning'
-                   alt />
+                      placeholder="请输入搜索内容"
-              <div class="tip_title">分类列表</div>
+                      v-model="search">
-            </div>
+              <i slot="prefix"
+                 class="icon">
+                <img src="../../../../../assets/img/modules/visual/sousuo.png"
+                     alt />
+              </i>
+            </el-input>
+
+            <div class="btn"
+                 @click="handleSearch">搜索</div>
 
-            <div class="info_loading"
+          </div>
-                 v-if="infoLoading">
+          <div class="m-tb">
-              <screen-loading>加载中</screen-loading>
-            </div>
 
-            <div v-if="!infoLoading"
+            <div class="tb">
-                 class="info_list">
+              <cpt-tb :col-list="demand.colList"
-              <div v-for="(item,index) in listDatashow"
+                      :loading="demand.loading"
-                   :key="index"
+                      :header="demand.header"
-                   class="item">
+                      :list="demand.list"
-                <div class="list_item">
+                      @handleClickRow="handleClickRow"></cpt-tb>
-                  <div v-for="(colItem,colIndex) in item"
-                       :key="colIndex"
-                       class="list_item_col"
-                       @click="handleTo(colItem)">
-                    <img :src="colItem.dataIcon"
-                         alt />
-                    <div class="item_content">
-                      <div class="item_label">{{colItem.label}}</div>
-                      <div class="item_count">{{colItem.count}}</div>
-                    </div>
-
-                  </div>
-                </div>
-                <div :class="['item_line',{'last_line':index==(listDatashow.length-1)}]"></div>
-              </div>
 
             </div>
-          </el-scrollbar> -->
+            <div class="m-pagination">
+              <el-pagination :current-page="demand.pageNo"
+                             :page-size="demand.pageSize"
+                             :total="demand.total"
+                             background
+                             layout="prev, pager, next,total"
+                             @current-change="handlePageNoChange_demand">
+              </el-pagination>
+            </div>
+          </div>
+
         </div>
 
       </div>
     </div>
-
+    <div id="popup"
+         style="display: none;"
+         class="ol-popup">
+      <a href="#"
+         id="popup-closer"
+         class="ol-popup-closer"></a>
+      <div id="popup-content"
+           class="popup-content"></div>
+      <a href="#"
+         id="popup-goMore"
+         class="popup-goMore">更多>>>></a>
+    </div>
   </div>
 
 </template>
@@ -126,7 +139,7 @@ import { Loading } from 'element-ui'; //引入Loading服务
 import { requestPost } from "@/js/dai/request";
 
 
-
+import cptTb from "@/views/modules/visual/cpts/tb";
 import cptCard from "@/views/modules/visual/cpts/card";
 import ScreenLoading from "@/views/modules/visual/cpts/loading";
 
@@ -296,7 +309,39 @@ const vueGis = {
       categoryKeys: [],
       search: '',
       pageNo: 1,
-      pageSize: 10
+      pageSize: 10,
+
+      demand: {
+        loading: true,
+        colList: [
+          {
+            align: "center",
+            width: "5%",
+          },
+          {
+            align: "center",
+            width: "10%",
+          },
+
+        ],
+        header: ["分类", "名称"],
+        list: [],
+        pageSize: 10,
+        pageNo: 1,
+        total: 0,
+      },
+
+      iconUrlArray: {
+        'volunteer1': require('../../../../../assets/img/shuju/volunteer1.png'),
+        'volunteer2': require('../../../../../assets/img/shuju/volunteer2.png'),
+        'volunteer3': require('../../../../../assets/img/shuju/volunteer3.png'),
+        'volunteer4': require('../../../../../assets/img/shuju/volunteer4.png'),
+        'volunteer5': require('../../../../../assets/img/shuju/volunteer5.png'),
+      },
+      iconArrays: [],
+      overlay: null,
+      showPopup: false,
+
 
     }
   },
@@ -319,13 +364,186 @@ const vueGis = {
 
     //加载当前园区的标注
     this.loadPolygon(this.subAgencyArray)
+
+
     this.setMapLocation()
     await this.loadCategoryList()
+    this.getTable();
+    await this.getMapTable();
+
+
+    //初始化icon图层
+    this.addOverlay()
+
+    this.addMapClick()
 
   },
   methods: {
+
+    //添加覆盖层
+    addOverlay () {
+      // 使用变量存储弹窗所需的 DOM 对象
+      var container = document.getElementById("popup");
+      var closer = document.getElementById("popup-closer");
+      var content = document.getElementById("popup-content");
+      var goMore = document.getElementById("popup-goMore") ? document.getElementById("popup-goMore") : null
+
+      // 创建一个弹窗 Overlay 对象
+      this.overlay = new Overlay({
+        element: container, //绑定 Overlay 对象和 DOM 对象的
+        autoPan: true, // 定义弹出窗口在边缘点击时候可能不完整 设置自动平移效果
+        autoPanAnimation: {
+          duration: 250 //自动平移效果的动画时间 9毫秒
+        },
+        zIndex: 100
+      });
+      // 将弹窗添加到 map 地图中
+      map.addOverlay(this.overlay);
+      let _that = this;
+
+      /**
+       * 为弹窗添加一个响应关闭的函数
+       */
+      closer.onclick = function () {
+        _that.overlay.setPosition(undefined);
+        closer.blur();
+        return false;
+      };
+      if (goMore) {
+        goMore.onclick = function () {
+          _that.$emit('lookMore')
+        };
+      }
+    },
+
+    //注册地图点击事件
+    addMapClick () {
+      let _that = this
+
+      map.on("click", function (evt) {
+        const feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) {
+          return feature;
+        });
+        if (feature) {
+          console.log(feature)
+          _that.clickMapVolunteer(feature.values_.properties)
+
+        }
+
+      });
+    },
+
+    //点击项目
+    async clickMapVolunteer (info) {
+
+
+      if (!info.id) {
+        return false
+      }
+
+      const url = "/epmetuser/icresiuser/resi-brief/" + 'dd0bd55db0ca4b629c40bc914a08368e'
+      // const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyunit/distribution"
+
+      let params = {}
+
+      const { data, code, msg } = await requestPost(url, params)
+
+      if (code === 0) {
+        let coordinate = [info.longitude, info.latitude]
+        data.gridName = data.gridName ? data.gridName : '--'
+        data.villageName = data.villageName ? data.villageName : '--'
+        data.icUserName = data.icUserName ? data.icUserName : '--'
+        data.mobile = data.mobile ? data.mobile : '--'
+        data.idCard = data.idCard ? data.idCard : '--'
+        data.birthday = data.birthday ? data.birthday : '--'
+        data.contacts = data.contacts ? data.contacts : '--'
+        data.contactsMobile = data.contactsMobile ? data.contactsMobile : '--'
+
+        data.isBdhjShow = data.isBdhj ? data.isBdhj === '0' ? '否' : '是' : '--'
+        data.genderShow = data.gender ? data.gender === '0' ? '女' : '男' : '--'
+        let categoriesArray = []
+
+        for (let key in data.volunteerCategories) {
+          categoriesArray.push(data.volunteerCategories[key])
+
+        }
+
+
+        if (categoriesArray.length > 0) {
+          data.categories = categoriesArray.join(',')
+        } else {
+          data.categories = '--'
+        }
+
+        let showData = `
+                <div style='font-size:16px; color:#FFFFFF;'>居民信息</div>
+                <div style='font-size:12px; color:#FFFFFF;margin-top:10px'>所属网格：
+                  <span>`+ data.gridName + `</span>
+                </div>
+                <div style='font-size:12px; color:#FFFFFF;margin-top:5px'>所属小区：
+                  <span>`+ data.villageName + `</span>
+                </div>
+                <div style='font-size:12px; color:#FFFFFF;margin-top:5px'>本地户籍：
+                  <span>`+ data.isBdhjShow + `</span>
+                </div>
+                <div style='font-size:12px; color:#FFFFFF;margin-top:5px'>姓名：
+                  <span>`+ data.icUserName + `</span>
+                </div> 
+                <div style='font-size:12px; color:#FFFFFF;margin-top:5px'>手机：
+                  <span>`+ data.mobile + `</span>
+                </div> 
+                <div style='font-size:12px; color:#FFFFFF;margin-top:5px'>性别：
+                  <span>`+ data.genderShow + `</span>
+                </div> 
+                <div style='font-size:12px; color:#FFFFFF;margin-top:5px'>身份证号：
+                  <span>`+ data.idCard + `</span>
+                </div> 
+                <div style='font-size:12px; color:#FFFFFF;margin-top:5px'>出生日期：
+                  <span>`+ data.birthday + `</span>
+                </div> 
+                <div style='font-size:12px; color:#FFFFFF;margin-top:5px'>联系人：
+                  <span>`+ data.contacts + `</span>
+                </div> 
+                <div style='font-size:12px; color:#FFFFFF;margin-top:5px'>联系人手机：
+                  <span>`+ data.contactsMobile + `</span>
+                </div> 
+                <div style='font-size:12px; color:#FFFFFF;margin-top:5px'>志愿者类别：
+                  <span>`+ data.categories + `</span>
+                </div> 
+                `
+        // console.log(showData)
+        this.handleShowPopup(showData, coordinate, true)
+
+      } else {
+        this.$message.error(msg)
+      }
+    },
+
+    handleShowPopup (showData, coordinate, isShowMore) {
+      if (isShowMore) {
+        document.getElementById("popup-goMore").style.display = 'block'
+      } else {
+        document.getElementById("popup-goMore").style.display = 'none'
+      }
+      console.log(this.overlay.getElement())
+      let content = document.getElementById("popup-content");
+      this.overlay.getElement().style.display = 'block'
+      this.overlay.getElement().parentNode.style.display = 'block'
+      this.overlay.getElement().parentNode.parentNode.style.display = 'block'
+      content.innerHTML = showData;
+      this.overlay.setPosition(coordinate);
+      //把 overlay 显示到指定的 x,y坐标
+
+    },
+    // 关闭弹窗
+    handleClosePopup () {
+      this.overlay.setPosition(undefined);
+      document.getElementById("popup-closer").blur();
+      return false;
+    },
+
     //点击图层
-    handleClickCoverage (index) {
+    async handleClickCoverage (index) {
       this.coverageTypesList[index].select = !this.coverageTypesList[index].select
       let item = this.coverageTypesList[index]
 
@@ -338,23 +556,51 @@ const vueGis = {
           this.coverageTypes.push(element.value)
         }
       });
+
+      await this.loadCategoryList()
+      this.getTable();
+      this.getMapTable();
     },
 
     //点击类别
-    handleClickCategory (index, colIndex) {
+    async handleClickCategory (index, colIndex) {
-      this.categoryListshow[index][colIndex].sel = !this.coverageTypesList[index].sel
-      this.categoryList[index].sel = !this.coverageTypesList[index].sel
-      let item = this.coverageTypesList[index]
 
-      this.$set(this.coverageTypesList, index, item)
+      this.categoryListshow[index][colIndex].sel = !this.categoryListshow[index][colIndex].sel
 
-      this.coverageTypes = []
+      // this.categoryList[index * 4 + colIndex].sel = !this.categoryList[index * 4 + colIndex].sel
 
-      this.coverageTypesList.forEach(element => {
+      let array = this.categoryListshow[index]
-        if (element.select) {
+      let item = this.categoryListshow[index][colIndex]
-          this.coverageTypes.push(element.value)
+
+
+      this.$set(this.categoryListshow[index], colIndex, item)
+      this.$set(this.categoryListshow, index, array)
+
+      this.categoryKeys = []
+
+      this.categoryList.forEach(element => {
+        if (element.sel) {
+          this.categoryKeys.push(element.categoryKey)
         }
       });
+
+      this.getTable();
+      this.getMapTable();
+    },
+    handleSearch () {
+
+    },
+    //
+    handleClickRow (index) {
+      let selData = this.tableList[index]
+      mapView.setCenter([selData.longitude, selData.latitude]);
+      this.clickMapVolunteer(selData)
+      // alert(index)
+    },
+
+    handlePageNoChange_demand (val) {
+      this.demand.pageNo = val;
+      this.getTable();
     },
 
     async loadCategoryList () {
@@ -370,14 +616,7 @@ const vueGis = {
       if (code === 0) {
         // this.categoryList = data
         this.categoryList = [
-          {
+
-            categoryKey: "0",
-            categoryName: "deserunt"
-          },
-          {
-            categoryKey: "1",
-            categoryName: "deserunt"
-          },
           {
             categoryKey: "2",
             categoryName: "deserunt"
@@ -531,6 +770,7 @@ const vueGis = {
             categoryName: "deserunt"
           },
         ]
+        this.categoryKeys = []
 
         this.categoryListshow = []
         let itemArray = []
@@ -541,6 +781,7 @@ const vueGis = {
           }
 
           item.sel = true
+          this.categoryKeys.push(item.categoryKey)
 
         });
 
@@ -551,12 +792,181 @@ const vueGis = {
 
 
         console.log(this.categoryListshow)
+        console.log(this.categoryList)
 
       } else {
         this.$message.error(msg)
       }
     },
 
+    //加载组织数据
+    async getTable (isPage) {
+      this.demand.loading = true
+      // const url = "/data/aggregator/coverage/dataList";
+      const url = "http://yapi.elinkservice.cn/mock/245/data/aggregator/coverage/dataList";
+      let params = {
+        coverageTypes: this.coverageTypes,
+        categoryKeys: this.categoryKeys,
+        search: this.search,
+        pageNo: this.demand.pageNo,
+        pageSize: this.demand.pageSize,
+        isPage: true
+      };
+
+      const { data, code, msg } = await requestPost(url, params);
+      this.demand.loading = false;
+
+      if (code === 0) {
+
+        this.demand.total = data.total;
+        this.tableList = data.list
+        this.tableList = [
+          {
+            categoryKey: "volunteer1",
+            content: "volunteer1",
+            id: "123",
+            latitude: "36.082230",
+            longitude: "120.3868167667315",
+          },
+          {
+            categoryKey: "volunteer2",
+            content: "volunteer2",
+            id: "123",
+            latitude: "36.062227",
+            longitude: "120.389455",
+          },
+          {
+            categoryKey: "volunteer3",
+            content: "volunteer3",
+            id: "123",
+            latitude: "36.072214",
+            longitude: "120.389455",
+          },
+          {
+            categoryKey: "volunteer4",
+            content: "volunteer4",
+            id: "123",
+            latitude: "36.07394505338441",
+            longitude: "120.3868167667315",
+          }
+        ]
+        this.demand.list = data.list.map((item) => {
+          return [
+            item.categoryKey ? item.categoryKey : '--',
+            item.content ? item.content : '',
+
+          ];
+        });
+      } else {
+        this.$message.error(msg);
+      }
+    },
+    //加载组织数据
+    async getMapTable () {
+
+      // const url = "/data/aggregator/coverage/dataList";
+      const url = "http://yapi.elinkservice.cn/mock/245/data/aggregator/coverage/dataList";
+      let params = {
+        coverageTypes: this.coverageTypes,
+        categoryKeys: this.categoryKeys,
+        search: this.search,
+
+        isPage: false
+      };
+
+      const { data, code, msg } = await requestPost(url, params);
+
+      if (code === 0) {
+        this.iconArrays = data.list
+        this.iconArrays = [
+          {
+            categoryKey: "volunteer1",
+            content: "volunteer1",
+            id: "123",
+            latitude: "36.082230",
+            longitude: "120.3868167667315",
+          },
+          {
+            categoryKey: "volunteer2",
+            content: "volunteer2",
+            id: "123",
+            latitude: "36.062227",
+            longitude: "120.389455",
+          },
+          {
+            categoryKey: "volunteer3",
+            content: "volunteer3",
+            id: "123",
+            latitude: "36.072214",
+            longitude: "120.389455",
+          },
+          {
+            categoryKey: "volunteer4",
+            content: "volunteer4",
+            id: "123",
+            latitude: "36.07394505338441",
+            longitude: "120.3868167667315",
+          }
+        ]
+        this.iconArrays.forEach((item, index) => {
+
+          item.url = this.iconUrlArray[item.categoryKey]
+
+        });
+        console.log(this.iconArrays)
+        this.loadIcon()
+      } else {
+        this.$message.error(msg);
+      }
+    },
+
+    //加载icon图标
+    loadIcon () {
+
+      iconSource.clear()//清空多边形标注
+      if (this.iconArrays && this.iconArrays.length > 0) {
+
+        let iconFeatures = [];
+
+        this.iconArrays.forEach((oneIcon, index) => {
+          //添加标注
+
+          let iconItem = new Feature({
+            geometry: new Point([oneIcon.longitude, oneIcon.latitude]),
+            id: oneIcon.id,
+            properties: {
+              type: "icon",
+              info: { ...oneIcon }
+            }
+          });
+          // console.log('oneIcon----', this.iconUrlArray[oneIcon.urlIndex])
+          let iconStyle = new Style({
+            image: new Icon({
+              // anchor: [0.5, 0.5],
+              // imgSize: [32, 32],
+              // scale: 0.5,
+              // src: oneIcon.urlIndex && this.iconUrlArray[oneIcon.urlIndex] || this.iconUrlArray[0] || this.iconUrlArray[0]
+              src: oneIcon.url
+            }),
+            // text: createTextStyle(oneIcon)
+          });
+
+          iconItem.setStyle(iconStyle);
+
+          // if (this.distanceMax) {
+          //   if (this.computedDistance(oneIcon.longitude, oneIcon.latitude, this.distanceMax)) {
+          //     iconFeatures.push(iconItem);
+          //   }
+          // } else {
+          iconFeatures.push(iconItem);
+          // }
+
+
+        });
+
+        iconSource.addFeatures(iconFeatures);
+      }
+    },
 
     //刷新地图
     async refreshMap (isRefreshView) {
@@ -572,11 +982,11 @@ const vueGis = {
       //重置地图中心点
 
       // if (isRefreshView) {
-      this.setMapLocation()
+      // this.setMapLocation()
 
       // }
 
-      await this.loadList()
+      await this.getTable(false);
 
     },
 
@@ -629,8 +1039,6 @@ const vueGis = {
       }
       mapView.setZoom(this.zoom);
 
-
-
     },
 
     //返回所选组织
@@ -650,15 +1058,12 @@ const vueGis = {
       this.center = this.orgData.center
       this.zoom = this.orgData.zoom
 
-
-
       this.$nextTick(() => {
         this.refreshMap(true)
         this.$forceUpdate()
       });
 
 
-
     },
 
     //加载组织数据
@@ -862,7 +1267,6 @@ const vueGis = {
 
     },
 
-
     //根据组织层级设置缩放级别
     setZoom (agencyLevel) {
       if (agencyLevel === 'district') {
@@ -922,10 +1326,6 @@ const vueGis = {
         //目标加载到map中
       })
 
-      map.on('singleclick', function (e) {
-        // console.log(e.coordinate)
-        // console.log(transform(e.coordinate, 'EPSG:3857', 'EPSG:4326'));
-      })
 
       //去除双击放大效果
       const dblClickInteraction = map
@@ -1000,11 +1400,11 @@ const vueGis = {
 
 
       map.addLayer(polygonLayer)
-      map.addInteraction(select);
+      // map.addInteraction(select);
 
-      select.on('select', e => {
+      // select.on('select', e => {
 
-      });
+      // });
 
     },
 
@@ -1022,11 +1422,6 @@ const vueGis = {
 
     },
 
-    //取随机数
-    getRndBetween (lowerLimit, upperLimit) {
-      return Math.floor(Math.random() * (upperLimit - lowerLimit + 1)) + lowerLimit;
-    },
-
     //开启加载动画
     startLoading () {
       loading = Loading.service({
@@ -1074,7 +1469,7 @@ const vueGis = {
     ...mapGetters(["clientHeight"])
 
   },
-  components: { cptCard, ScreenLoading },
+  components: { cptTb, cptCard, ScreenLoading },
 }
 export default vueGis;
 </script>
@@ -1096,5 +1491,70 @@ export default vueGis;
 }
 </style>  
 
-<style lang="scss" scoped>
+<style lang="scss" >
+.div_search_list {
+  .el-input__inner[WarningColor="warning"] {
+    border-radius: 8px 0 0 8px;
+    height: 53px;
+    background-color: #01106800;
+    border: 2px solid #0082fb;
+    padding-left: 70px;
+    font-size: 18px;
+    font-family: PingFang SC;
+    font-weight: 400;
+    color: #ffffff;
+  }
+}
+
+.ol-popup {
+  position: absolute;
+  background-color: #1257c9;
+  -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
+  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
+  padding: 15px;
+  border-radius: 10px;
+  border: 1px solid #1257c9;
+  bottom: 12px;
+  left: -50px;
+  text-align: left;
+}
+.ol-popup:after,
+.ol-popup:before {
+  top: 100%;
+  border: solid transparent;
+  content: " ";
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+}
+.ol-popup:after {
+  border-top-color: 1257c9;
+  border-width: 10px;
+  left: 48px;
+  margin-left: -10px;
+}
+.ol-popup:before {
+  border-top-color: #1257c9;
+  border-width: 11px;
+  left: 48px;
+  margin-left: -11px;
+}
+.ol-popup-closer {
+  text-decoration: none;
+  position: absolute;
+  top: 2px;
+  right: 8px;
+}
+.popup-content {
+  width: 300px;
+}
+.popup-goMore {
+  margin: 20px 0;
+}
+.ol-popup-closer:after {
+  content: "✖";
+  // color: rgba(1, 17, 104, 1);
+  color: #fff;
+}
 </style>

src/views/modules/visual/cpts/tb.vue

@@ -1,68 +1,67 @@
 <template>
   <div class="m-table">
-    <table class="table" border="0" cellspacing="0" cellpadding="0">
+    <table class="table"
-      <col
+           border="0"
-        :align="item.align"
+           cellspacing="0"
-        :width="item.width"
+           cellpadding="0">
-        :key="'col' + index"
+      <col :align="item.align"
-        v-for="(item, index) in colList"
+           :width="item.width"
-      />
+           :key="'col' + index"
+           v-for="(item, index) in colList" />
 
       <thead>
         <tr class="table-header">
-          <th class="table-header-th" v-for="item in header" :key="item">
+          <th class="table-header-th"
+              v-for="item in header"
+              :key="item">
             {{ item }}
           </th>
         </tr>
       </thead>
       <tbody class="table-body">
-        <tr class="table-body-tr" v-for="(value, index) in list" :key="index">
+        <tr class="table-body-tr"
-          <td class="td" v-for="(item, indexs) in value" :key="indexs">
+            v-for="(value, index) in list"
+            :key="index"
+            @click="handleClickRow(index)">
+          <td class="td"
+              v-for="(item, indexs) in value"
+              :key="indexs">
             <div v-if="typeof item === 'string' || typeof item === 'number'">
               {{ item }}
             </div>
             <div v-if="typeof item === 'object' && item && item.type == 'index'">
-              <img
+              <img v-if="highlightTop3 && index == 0"
-                v-if="highlightTop3 && index == 0"
+                   src="@/assets/img/shuju/top/1.png"
-                src="@/assets/img/shuju/top/1.png"
+                   alt="" />
-                alt=""
+              <img v-else-if="highlightTop3 && index == 1"
-              />
+                   src="@/assets/img/shuju/top/2.png"
-              <img
+                   alt="" />
-                v-else-if="highlightTop3 && index == 1"
+              <img v-else-if="highlightTop3 && index == 2"
-                src="@/assets/img/shuju/top/2.png"
+                   src="@/assets/img/shuju/top/3.png"
-                alt=""
+                   alt="" />
-              />
-              <img
-                v-else-if="highlightTop3 && index == 2"
-                src="@/assets/img/shuju/top/3.png"
-                alt=""
-              />
               <span v-else>{{ index + 1 }}</span>
             </div>
-            <a
+            <a v-else-if="typeof item === 'object' && item  && item.type == 'operate'"
-              v-else-if="typeof item === 'object' && item  && item.type == 'operate'"
+               v-for="btn in item.list"
-              v-for="btn in item.list"
+               :key="'operate' + index + btn"
-              :key="'operate' + index + btn"
+               @click="handleClickBtn(index, btn)">{{ btn }}</a>
-              @click="handleClickBtn(index, btn)"
+            <a v-else-if="typeof item === 'object' && item && item.type == 'people'"
-              >{{ btn }}</a
+               @click="handleClickPeople(item)">{{ item.name }}</a>
-            >
-            <a
-              v-else-if="typeof item === 'object' && item && item.type == 'people'"
-              @click="handleClickPeople(item)"
-              >{{ item.name }}</a
-            >
           </td>
         </tr>
       </tbody>
     </table>
 
-    <div class="table-status" v-if="loading">
+    <div class="table-status"
+         v-if="loading">
       <screen-loading>加载中</screen-loading>
     </div>
 
-    <div class="table-status" v-if="list.length == 0 && !loading">
+    <div class="table-status"
+         v-if="list.length == 0 && !loading">
       <div class="no-data">
-        <img src="@/assets/img/modules/visual/noData.png" class="no-data-img" />
+        <img src="@/assets/img/modules/visual/noData.png"
+             class="no-data-img" />
       </div>
     </div>
   </div>
@@ -131,20 +130,24 @@ export default {
       default: false,
     },
   },
-  data() {
+  data () {
     return {};
   },
   watch: {},
 
-  mounted() {},
+  mounted () { },
 
-  created() {},
+  created () { },
 
   methods: {
-    handleClickBtn(index, type) {
+    //点击某一行
+    handleClickRow (index) {
+      this.$emit("handleClickRow", index);
+    },
+    handleClickBtn (index, type) {
       this.$emit("operate", index, type);
     },
-    handleClickPeople(item) {
+    handleClickPeople (item) {
       this.$router.push({
         path: `/main-shuju/visual-basicinfo-people/${item.uid}`,
       });