pc app人员分布

src/http/moudules/user.js

@@ -592,3 +592,17 @@ export const appQueryRegionInfo = (data) => {
     data
   })
 }
+export const queryPcAddressInfo = (data) => {
+  return axios({
+    url: '/sys/ipAddr/queryPcAddressInfo',
+    method: 'post',
+    data
+  })
+}
+export const queryGeographyInfo = (data) => {
+  return axios({
+    url: '/geography/queryGeographyInfo',
+    method: 'post',
+    data
+  })
+}

src/views/PeopleManage/PcLoginRecord.vue

@@ -4,7 +4,8 @@
       element-loading-text="数据量较大，正在为您加载......" element-loading-spinner="el-icon-loading"
       element-loading-background="rgba(0, 0, 0, 0.8)"></div>
     <div class="province-window">
-      <el-select size="small" v-model="provinceName" clearable placeholder="请选择省" @change="provinceChange"  @clear="provinceClear">
+      <el-select size="small" v-model="provinceName" clearable placeholder="请选择省" @change="provinceChange"
+        @clear="provinceClear">
         <el-option v-for="(option, index) in provinceOption" :key="index" :label="option.name"
           :value="option.code"></el-option>
       </el-select>
@@ -64,11 +65,12 @@
     <div class="personnel-window ">
       <p class="close flex j-s ">
         <span>人员分布</span>
-        <span style="color: #3865E9 ; cursor: pointer; font-size: 14px;" @click="isCollapse=!isCollapse">{{ isCollapse?'收起':'展开' }} </span>
+        <span style="color: #3865E9 ; cursor: pointer; font-size: 14px;" @click="isCollapse = !isCollapse">{{
+          isCollapse ? '收起' : '展开' }} </span>
       </p>
       <div class="info-title"><i></i>人员数量概览</div>
       <div style="padding: 10px 0;" class="flex j-s">
-        <div  v-for="(item, index) in overviewOption" :key="index"
+        <div v-for="(item, index) in overviewOption" :key="index"
           :class="currentIndex === index ? 'overview after-img' : 'overview '" @click="checkPrice(index)">
           <span>{{ item.active }}</span>
           <span>{{ item.name }}</span>
@@ -76,24 +78,72 @@
       </div>
       <div class="info-title"><i></i>区域人员概览</div>
 
-      <el-table v-if="isCollapse" :data="overviewData" border style="width: 100%;margin: 10px 0px;"
-        :header-cell-style="{
+      <el-table v-if="isCollapse" :data="overviewData" border
+        style="width: 100%; max-height: 50vh; overflow: auto;margin:15px 0" :header-cell-style="{
           background: '#F7F7F9',
           fontWeight: '700',
           color: '#000',
         }">
         <el-table-column type="index" align="center" width="50" label="序号">
+          <template slot-scope="scope">
+            <img v-if="scope.$index == 0" src="../../assets/序号1.png" />
+            <img v-else-if="scope.$index == 1" src="../../assets/序号2.png" />
+            <img v-else-if="scope.$index == 2" src="../../assets/序号3.png" />
+            <span v-else style="text-decoration-line: underline;">{{ scope.$index + 1 }}</span>
+          </template>
         </el-table-column>
         <el-table-column prop="districtName" align="center" label="区域">
         </el-table-column>
         <el-table-column prop="number" align="center" label="人数">
         </el-table-column>
         <div slot="empty" class="empty">
-          <img src="../../assets/暂无数据.png"/>
+          <img src="../../assets/暂无数据.png" />
           <div class="txt">暂无数据哦</div>
-      </div>
+        </div>
       </el-table>
     </div>
+    <div v-if="personnelVisible" class="info-window">
+      <p class="close flex j-s">
+        <span>人员详情</span>
+        <span style="color: #c3c3c3;font-size:18px;cursor: pointer" @click="personnelVisible = false"> ×</span>
+      </p>
+      <el-table :data="personnelData" border style="width: 100%; " :header-cell-style="{
+        background: '#F7F7F9',
+        fontWeight: '700',
+        color: '#606266',
+      }">
+        <el-table-column type="index" align="center" width="50" label="序号">
+          <template slot-scope="scope">
+            <img v-if="scope.$index == 0" src="../../assets/序号1.png" />
+            <img v-else-if="scope.$index == 1" src="../../assets/序号2.png" />
+            <img v-else-if="scope.$index == 2" src="../../assets/序号3.png" />
+            <span v-else style="text-decoration-line: underline;">{{ scope.$index + 1 }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="userName" label="姓名" width="100">
+        </el-table-column>
+        <el-table-column prop="userId" label="工号">
+        </el-table-column>
+        <el-table-column prop="address" label="地址">
+        </el-table-column>
+        <el-table-column prop="operationTime" label="登录时间">
+        </el-table-column>
+        <el-table-column prop="source" label="分类">
+          <template slot-scope="scope">
+            {{ scope.row.source == '1' ? '渠道' : '代理' }}
+          </template>
+        </el-table-column>
+        <div slot="empty" class="empty">
+          <img src="../../assets/暂无数据.png" />
+          <div class="txt">暂无数据哦</div>
+        </div>
+      </el-table>
+      <div class="bottomFixed">
+        <el-pagination @current-change="handlePersonnelChange" :current-page="personnelPageNum" :page-size="5"
+          layout="total, prev, pager, next" :total="personnelTotalSize">
+        </el-pagination>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -128,6 +178,7 @@ export default {
       districtName: '',
       overviewData: [],
       currentIndex: 0,
+      center: '',
       overviewOption: [{
         name: '全部人数',
         active: ''
@@ -138,7 +189,12 @@ export default {
       }, {
         name: '代理人数',
         active: ''
-      },]
+      },],
+      personnelVisible: false,
+      personnelData: [],
+      personnelTotalSize: 0,
+      personnelPageNum: 1,
+      position: []
     };
   },
   mounted() {
@@ -147,45 +203,60 @@ export default {
   created() {
     this.queryRegion()
     this.queryPcNum()
+
     //标注文字上的点击事件
     // window.handleDetail = id => {
     //   this.rowId = id;
     //   this.detail();
     // };
+
+    window.personnelclick = () => {
+      this.personnelVisible = true;
+    };
   },
   destroyed() {
     // 销毁地图，并清空地图容器.该方法执行后，地图对象被注销，内存释放，地图容器被清空。
     this.map.destroy();
   },
   methods: {
+    morelFun() {
+      this.$api.user
+        .queryPcAddressInfo({ lng: this.position[0], lat: this.position[1], pageSize: 5, pageNum: this.personnelPageNum })
+        .then(res => {
+          if (res.code == 200) {
+            this.personnelTotalSize = res.data.totalSize
+            this.personnelData = res.data.content
+          }
+        });
+    },
     checkPrice(index) {
       this.currentIndex = index
-      this.queryRegion(index==0?null:index)
+      this.queryRegion(index == 0 ? null : index)
     },
     queryPcNum() {
       this.$api.user
-        .ipAddrQueryPcNum(this.province )
+        .ipAddrQueryPcNum(this.province)
         .then(res => {
           if (res.code == 200) {
             // this.overviewForm = res.data;
-            this.overviewOption[0].active=res.data.allNum
-            this.overviewOption[1].active=res.data.channelNum
-            this.overviewOption[2].active=res.data.proxyNum
+            this.overviewOption[0].active = res.data.allNum
+            this.overviewOption[1].active = res.data.channelNum
+            this.overviewOption[2].active = res.data.proxyNum
           }
         });
     },
-    queryRegion(source=null) {
+    queryRegion(source = null) {
       this.$api.user
         // .queryRegionInfo( this.source==null?0:this.source)
-        .queryRegionInfo({source,...this.province})
+        .queryRegionInfo({ source, ...this.province })
         .then(res => {
           if (res.code == 200) {
             this.overviewData = res.data;
           }
         });
     },
-    onSearch(){
-      this.currentIndex=0
+    async onSearch() {
+      this.currentIndex = 0
       this.queryRegion()
       this.queryPcNum()
       this.initMap();
@@ -210,7 +281,7 @@ export default {
       this.districtName = ''
       this.province.city = ''
       this.province.district = ''
-      this.districtOption=[]
+      this.districtOption = []
     },
     provinceClear() {
       this.cityName = ''
@@ -219,8 +290,8 @@ export default {
       this.province.city = ''
       this.province.province = ''
       this.province.district = ''
-      this.districtOption=[]
-      this.cityOption=[]
+      this.districtOption = []
+      this.cityOption = []
     },
     sourceqbChange(val) {
       if (val) {
@@ -276,14 +347,31 @@ export default {
       this.pageNum = val;
       this.detail();
     },
+    handlePersonnelChange(val) {
+      this.personnelPageNum = val;
+      this.morelFun();
+    },
     initMap() {
       var _this = this;
       // https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png
       AMapLoader.load({
         key: "262c17c813cdaab1bf93bfeb9873a6c8", // 申请好的Web端开发者Key，首次调用 load 时必填
         version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
-        plugins: ["AMap.LineSearch"] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+        plugins: ["AMap.Geocoder"] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
       }).then(AMap => {
+        // AMap.plugin('AMap.Geocoder', function() {
+        //   var geocoder = new AMap.Geocoder({
+        //     // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
+        //     city: '010'
+        //   })
+
+        //   geocoder.getLocation('北京市海淀区苏州街', function(status, result) {
+        //     if (status === 'complete' && result.info === 'OK') {
+        //       // result中对应详细地理坐标信息
+        //     }
+        //   })
+        // })
+
         _this.map = new AMap.Map("containerMap", {
           //设置地图容器id
           viewMode: "3D", //是否为3D地图模式
@@ -294,11 +382,10 @@ export default {
           // mapStyle: 'amap://styles/blue',
           mapStyle: "amap://styles/normal" //地图样式，彩色
         });
-
         _this.map.on("complete", () => {
           _this.$api.user.queryPositionLoginRecord({ source: this.source, ...this.province }).then(res => {
-            if (res.code == 200 ) {
-              if (res.data && res.data.length>0) {
+            if (res.code == 200) {
+              if (res.data && res.data.length > 0) {
                 //处理后台返回要用到的数据
                 // _this.positionData = res.data.data
                 _this.positionData = res.data.map(item => ({
@@ -315,13 +402,13 @@ export default {
                 }));
                 _this.mapPoint();
               }
-              else{
+              else {
                 _this.loading = false; //地图加载完成
               }
-          } else {
-               _this.$message.error(res.msg)
-                _this.loading = false;
-              }
+            } else {
+              _this.$message.error(res.msg)
+              _this.loading = false;
+            }
           });
         });
       });
@@ -355,7 +442,7 @@ export default {
       //将 LabelsLayer 添加到地图实例
       _this.map.add(labelsLayer);
 
-      _this.infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -4) }); //信息窗口
+      _this.infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -4), closeWhenClickMap: true, }); //信息窗口
       var position = JSON.parse(JSON.stringify(_this.positionData));
       for (var i = 0; i < position.length; i++) {
         var labelMarker = new AMap.LabelMarker({
@@ -366,8 +453,8 @@ export default {
         var normalMarker = new AMap.Marker({
           position: position[i].positionArr,
           map: _this.map,
-          content: position[i].source==1?'<div style="width:10px;height:10px;background: #FA866D;border-radius: 50%"></div>'
-          :'<div style="width:10px;height:10px;background: #767EE2;border-radius: 50%"></div>',
+          content: position[i].source == 1 ? '<div style="width:14px;height:14px;background: #FF3D00;border-radius: 50%;border: 1px solid #FFFFFF;"></div>'
+            : '<div style="width:14px;height:14px;background: #00C2FF;border-radius: 50%;border: 1px solid #FFFFFF;"></div>',
           // icon: require("@/assets/" + position[i].onlineImg)
         });
         // normalMarker.content =
@@ -385,12 +472,9 @@ export default {
         //   position[i].userId +
         //   "')\">查看详情</div>";
         normalMarker.content =
-        `
-        <div  style="font-weight: 700;display: flex; justify-content: space-between"> 
-            <span>${position[i].source == 1 ? "渠道姓名：" : "代理人姓名："} ${position[i].userName}</span>
-            <i style="width: 10px;height: 10px;border-radius: 50%;background-color:${position[i].status}"></i>
-        </div>
-        <div >${position[i].source == 1 ? "渠道工号：" : "代理人工号："}${position[i].userId}</div>
+          `
+        <div style="font-weight: 700;border-bottom: 1px solid rgba(255, 255, 255, 0.85); padding: 5px 0 8px 0;"> ${position[i].source == 1 ? "渠道姓名：" : "代理人姓名："} ${position[i].userName}</div>
+        <div style="padding: 8px 0 5px 0;">${position[i].source == 1 ? "渠道工号：" : "代理人工号："}${position[i].userId}</div>
         <div >地址： ${position[i].address}</div>
         <div >登录时间： ${position[i].operationTime}</div>
         `
@@ -402,11 +486,27 @@ export default {
       this.loading = false; //地图加载完成
     },
     markerClick(e) {
-      console.log(e,9999999);
-      //这个只是标注的点击事件
-      // this.map.setZoomAndCenter(8,e.target.getPosition()); //点击标点放大地图-缺点，不管放大/缩小多少倍，点击标点都会被缩放到8倍
-      this.infoWindow.setContent(e.target.content);
-      this.infoWindow.open(this.map, e.target.getPosition());
+      let _this = this
+      this.position = e.target._position
+      // _this.morelFun()
+      this.$api.user
+        .queryPcAddressInfo({ lng: e.target._position[0], lat: e.target._position[1], pageSize: 5, pageNum: this.personnelPageNum })
+        .then(res => {
+          if (res.code == 200) {
+            this.personnelTotalSize = res.data.totalSize
+            this.personnelData = res.data.content
+            let content = e.target.content
+            content= _this.personnelTotalSize==1?content:content+ `<div style="font-weight: 700;display: flex; justify-content: space-between;align-items: center;"> 
+          <span>共${_this.personnelTotalSize}人信息</span>
+           <div style="background: linear-gradient( 270deg, #225FFE 0%, #23CAFF 100%);padding:4px 8px;color:#fff;border-radius: 4px 4px 4px 4px;" onclick="personnelclick()">查看更多</div>
+          </div>`
+            //这个只是标注的点击事件
+            // this.map.setZoomAndCenter(8,e.target.getPosition()); //点击标点放大地图-缺点，不管放大/缩小多少倍，点击标点都会被缩放到8倍
+            this.infoWindow.setContent(content);
+            this.infoWindow.open(this.map, e.target.getPosition());
+          }
+        });
+
     }
   }
 };
@@ -452,11 +552,11 @@ export default {
   }
 
   div:nth-child(2)>span::before {
-    background: #767EE2;
+    background: #00C2FF;
   }
 
   div:nth-child(3)>span::before {
-    background: #FA866D;
+    background: #FF3D00;
   }
 
   span {
@@ -465,9 +565,9 @@ export default {
 }
 
 .info-window {
-  position: fixed;
-  top: 20%;
-  right: 10px;
+  position: absolute;
+  top: 60px;
+  left: 20px;
   z-index: 100;
   background-color: white;
   padding: 10px;
@@ -487,9 +587,7 @@ export default {
 }
 
 .bottomFixed {
-  height: 50px;
-  position: absolute;
-  bottom: 0;
+  text-align: right;
   width: 100%;
   background: #fff;
   margin-top: 10px;
@@ -517,9 +615,10 @@ export default {
 }
 
 /deep/ {
-  .el-table__empty-text{
+  .el-table__empty-text {
     line-height: 35px;
   }
+
   .amap-info-contentContainer {
     border-radius: 8px 8px 8px 8px;
     box-shadow: 0px 1px 8px #ddd;
@@ -532,6 +631,10 @@ export default {
   .amap-info-content {
     // padding: 0;
     padding: 20px;
+    background: rgba(0, 0, 0, 0.8);
+    color: rgba(255, 255, 255, 0.8);
+    border: 1px solid #E6EBF3;
+    font-weight: 400;
 
     div {
       padding: 5px 0;
@@ -555,6 +658,7 @@ export default {
     height: 100px;
     background-image: url(../../assets/user-map1.png);
     background-size: cover;
+
     span:first-child {
       font-size: 20px;
       line-height: 45px;
@@ -572,7 +676,9 @@ export default {
     color: #fff;
     background-image: url(../../assets/user-map2.png);
   }
-  .txt{
+
+  .txt {
     padding: 15px 0;
   }
-}</style>
+}
+</style>

src/views/PeopleManage/UserMap.vue

@@ -85,7 +85,13 @@
         fontWeight: '700',
         color: '#000',
       }">
-        <el-table-column type="index" align="center" width="50" label="序号">
+      <el-table-column type="index" align="center" width="50" label="序号">
+          <template slot-scope="scope">
+            <img v-if="scope.$index == 0" src="../../assets/序号1.png" />
+            <img v-else-if="scope.$index == 1" src="../../assets/序号2.png" />
+            <img v-else-if="scope.$index == 2" src="../../assets/序号3.png" />
+            <span v-else style="text-decoration-line: underline;">{{ scope.$index + 1 }}</span>
+          </template>
         </el-table-column>
         <el-table-column prop="districtName" align="center" label="区域">
         </el-table-column>
@@ -97,6 +103,48 @@
       </div>
       </el-table>
     </div>
+    <div v-if="personnelVisible" class="info-window">
+      <p class="close flex j-s">
+        <span>人员详情</span>
+        <span style="color: #c3c3c3;font-size:18px;cursor: pointer" @click="personnelVisible = false"> ×</span>
+      </p>
+      <el-table :data="personnelData" border style="width: 100%; " :header-cell-style="{
+        background: '#F7F7F9',
+        fontWeight: '700',
+        color: '#606266',
+      }">
+        <el-table-column type="index" align="center" width="50" label="序号">
+          <template slot-scope="scope">
+            <img v-if="scope.$index == 0" src="../../assets/序号1.png" />
+            <img v-else-if="scope.$index == 1" src="../../assets/序号2.png" />
+            <img v-else-if="scope.$index == 2" src="../../assets/序号3.png" />
+            <span v-else style="text-decoration-line: underline;">{{ scope.$index + 1 }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="userName" label="姓名" width="100">
+        </el-table-column>
+        <el-table-column prop="userId" label="工号">
+        </el-table-column>
+        <el-table-column prop="address" label="地址">
+        </el-table-column>
+        <el-table-column prop="operationTime" label="登录时间">
+        </el-table-column>
+        <el-table-column prop="source" label="分类">
+          <template slot-scope="scope">
+            {{ scope.row.source == '1' ? '渠道' : '代理' }}
+          </template>
+        </el-table-column>
+        <div slot="empty" class="empty">
+          <img src="../../assets/暂无数据.png" />
+          <div class="txt">暂无数据哦</div>
+        </div>
+      </el-table>
+      <div class="bottomFixed">
+        <el-pagination @current-change="handlePersonnelChange" :current-page="personnelPageNum" :page-size="5"
+          layout="total, prev, pager, next" :total="personnelTotalSize">
+        </el-pagination>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -142,7 +190,12 @@ export default {
       }, {
         name: '代理人数',
         active: ''
-      },]
+      },],
+      personnelVisible: false,
+      personnelData: [],
+      personnelTotalSize: 0,
+      personnelPageNum: 1,
+      position: []
     };
   },
   mounted() {
@@ -156,12 +209,29 @@ export default {
     //   this.rowId = id;
     //   this.detail();
     // };
+    window.personnelclick = () => {
+      this.personnelVisible = true;
+    };
   },
   destroyed() {
     // 销毁地图，并清空地图容器.该方法执行后，地图对象被注销，内存释放，地图容器被清空。
     this.map.destroy();
   },
   methods: {
+    handlePersonnelChange(val) {
+      this.personnelPageNum = val;
+      this.morelFun();
+    },
+    morelFun() {
+      this.$api.user
+        .queryGeographyInfo({ lng: this.position[0], lat: this.position[1], pageSize: 5, pageNum: this.personnelPageNum })
+        .then(res => {
+          if (res.code == 200) {
+            this.personnelTotalSize = res.data.totalSize
+            this.personnelData = res.data.content
+          }
+        });
+    },
     checkPrice(index) {
       this.currentIndex = index
       this.queryRegion(index==0?null:index)
@@ -311,7 +381,7 @@ export default {
                   address: item.address,
                   onlineImg: item.status ? "Frame-1(2).png" : "Frame(2).png",
                   // status: item.status ? "在线" : "离线",
-                  status: item.status ? "#54B569" : "#B2B2B2",
+                  status: item.status ? "#1CE247" : "#B2B2B2",
                   createTime: item.createTime,
                   deptName: item.deptName,
                   source: item.source,
@@ -367,7 +437,7 @@ export default {
       //     imageSize: new AMap.Size(30, 37)
       // });
 
-      _this.infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -4) }); //信息窗口
+      _this.infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -4),closeWhenClickMap: true, }); //信息窗口
       var position = JSON.parse(JSON.stringify(_this.positionData));
       for (var i = 0; i < position.length; i++) {
         var labelMarker = new AMap.LabelMarker({
@@ -378,17 +448,17 @@ export default {
         var normalMarker = new AMap.Marker({
           position: position[i].positionArr,
           map: _this.map,
-          content: position[i].source == 1 ? '<div style="width:10px;height:10px;background: #FA866D;border-radius: 50%"></div>'
-            : '<div style="width:10px;height:10px;background: #767EE2;border-radius: 50%"></div>',
+          content: position[i].source==1?'<div style="width:14px;height:14px;background: #FF3D00;border-radius: 50%;border: 1px solid #FFFFFF;"></div>'
+          :'<div style="width:14px;height:14px;background: #00C2FF;border-radius: 50%;border: 1px solid #FFFFFF;"></div>',
           // icon: require("@/assets/" + position[i].onlineImg)
         });
         normalMarker.content =
           `
-        <div  style="font-weight: 700;display: flex; justify-content: space-between"> 
+        <div  style="font-weight: 700;border-bottom: 1px solid rgba(255, 255, 255, 0.85); padding: 5px 0 8px 0;"> 
+            <i style="display: inline-block;margin-right:5px;width: 8px;height: 8px;border-radius: 50%;background-color:${position[i].status}"></i>
             <span>${position[i].source == 1 ? "渠道姓名：" : "代理人姓名："} ${position[i].userName}</span>
-            <i style="width: 10px;height: 10px;border-radius: 50%;background-color:${position[i].status}"></i>
         </div>
-        <div >${position[i].source == 1 ? "渠道工号：" : "代理人工号："}${position[i].id}</div>
+        <div style="padding: 8px 0 5px 0;">${position[i].source == 1 ? "渠道工号：" : "代理人工号："}${position[i].id}</div>
         <div >所属机构：${position[i].deptName}</div>
         <div >地址： ${position[i].address}</div>
         <div >登录时间： ${position[i].createTime}</div>
@@ -434,10 +504,26 @@ export default {
       this.loading = false; //地图加载完成
     },
     markerClick(e) {
-      //这个只是标注的点击事件
-      // this.map.setZoomAndCenter(8,e.target.getPosition()); //点击标点放大地图-缺点，不管放大/缩小多少倍，点击标点都会被缩放到8倍
-      this.infoWindow.setContent(e.target.content);
-      this.infoWindow.open(this.map, e.target.getPosition());
+      let _this = this
+      this.position = e.target._position
+      this.$api.user
+        .queryGeographyInfo({ lng: e.target._position[0], lat: e.target._position[1], pageSize: 5, pageNum: this.personnelPageNum })
+        .then(res => {
+          if (res.code == 200) {
+            this.personnelTotalSize = res.data.totalSize
+            this.personnelData = res.data.content
+            let content = e.target.content
+            content= _this.personnelTotalSize==1?content:content+ `<div style="font-weight: 700;display: flex; justify-content: space-between;align-items: center;"> 
+          <span>共${_this.personnelTotalSize}人信息</span>
+           <div style="background: linear-gradient( 270deg, #225FFE 0%, #23CAFF 100%);padding:4px 8px;color:#fff;border-radius: 4px 4px 4px 4px;" onclick="personnelclick()">查看更多</div>
+          </div>`
+            //这个只是标注的点击事件
+            // this.map.setZoomAndCenter(8,e.target.getPosition()); //点击标点放大地图-缺点，不管放大/缩小多少倍，点击标点都会被缩放到8倍
+            this.infoWindow.setContent(content);
+            this.infoWindow.open(this.map, e.target.getPosition());
+          }
+        });
+
     }
   }
 };
@@ -518,11 +604,11 @@ export default {
   }
 
   div:nth-child(2)>span::before {
-    background: #767EE2;
+    background: #00C2FF;
   }
 
   div:nth-child(3)>span::before {
-    background: #FA866D;
+    background: #FF3D00;
   }
 
   span {
@@ -531,9 +617,9 @@ export default {
 }
 
 .info-window {
-  position: fixed;
-  top: 20%;
-  right: 10px;
+  position: absolute;
+  top: 60px;
+  left: 20px;
   z-index: 100;
   background-color: white;
   padding: 10px;
@@ -596,8 +682,11 @@ export default {
   }
 
   .amap-info-content {
-    // padding: 0;
     padding: 20px;
+    background: rgba(0, 0, 0, 0.8);
+    color: rgba(255, 255, 255, 0.8);
+    border: 1px solid #E6EBF3;
+    font-weight: 400;
 
     div {
       padding: 5px 0;