人员管理-人员分布修改

src/http/moudules/user.js

@@ -537,7 +537,8 @@ export const separationReinstatement = (data) => {
 export const queryPosition = (data) => {
   return axios({
     url: '/geography/queryPosition',
-    method: 'get',
+    method: 'post',
+    data
   })
 }
 export const queryPositionList = (data) => {
@@ -551,7 +552,8 @@ export const queryPositionList = (data) => {
 export const queryPositionLoginRecord = (data) => {
   return axios({
     url: '/sys/ipAddr/queryPosition',
-    method: 'get',
+    method: 'post',
+    data
   })
 }
 // Pc登录日志  分布点位详情列表
@@ -562,3 +564,27 @@ export const queryPositionListLoginRecord = (data) => {
     data
   })
 }
+export const queryRegionInfo = (type) => {
+  return axios({
+    url: '/sys/ipAddr/queryRegionInfo/'+type,
+    method: 'get',
+  })
+}
+export const ipAddrQueryPcNum = (type) => {
+  return axios({
+    url: '/sys/ipAddr/queryPcNum',
+    method: 'get',
+  })
+}
+export const geographyQueryPcNum = (type) => {
+  return axios({
+    url: '/geography/queryPcNum',
+    method: 'get',
+  })
+}
+export const appQueryRegionInfo = (type) => {
+  return axios({
+    url: '/geography/queryRegionInfo/'+type,
+    method: 'get',
+  })
+}

src/views/PeopleManage/PcLoginRecord.vue

@@ -1,37 +1,100 @@
 <template>
   <div>
-      <div id="containerMap" style="width: 100%; height: 100vh" v-loading="loading" element-loading-text="数据量较大，正在为您加载......"
-          element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)"></div>
-      <div v-if="infoWindowVisible" class="info-window">
-          <p class="close flex j-s">
-              <span>详情内容</span>
-              <span style="color: #c3c3c3;font-size:18px" @click="infoWindowVisible = false"> ×</span>
-          </p>
-          <el-table :data="tableData" border  style="width: 100%; height: 50vh; overflow: auto;margin-bottom:40px"
-              :header-cell-style="{
-                  background: '#F2F7FC',
-                  fontWeight: '700',
-                  color: '#606266',
-              }">
-              <el-table-column prop="userId" label="工号" width="170">
-              </el-table-column>
-              <el-table-column prop="userName" label="姓名" width="100">
-              </el-table-column>
-              <el-table-column prop="address" label="地址">
-              </el-table-column>
-          </el-table>
-          <div class="bottomFixed">
-              <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
-                  :page-sizes="[10, 20, 30, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next"
-                  :total="totalSum">
-              </el-pagination>
-          </div>
+    <div id="containerMap" style="width: 100%; height: 100vh;position: relative" v-loading="loading"
+      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">
+        <el-option v-for="(option, index) in provinceOption" :key="index" :label="option.name"
+          :value="option.code"></el-option>
+      </el-select>
+      <el-select size="small" v-model="cityName" clearable placeholder="请选择市" @change="cityChange">
+        <el-option v-for="(option, index) in cityOption" :key="index" :label="option.name"
+          :value="option.code"></el-option>
+      </el-select>
+      <el-select size="small" v-model="districtName" clearable placeholder="请选择区" @change="districtChange"
+        @clear="districtClear">
+        <el-option v-for="(option, index) in districtOption" :key="index" :label="option.name"
+          :value="option.code"></el-option>
+      </el-select>
+    </div>
+    <div class="source-window">
+      <div>
+        <span>全部</span>
+        <el-switch v-model="sourceqb" @change="sourceqbChange">
+        </el-switch>
       </div>
+      <div>
+        <span>代理</span>
+        <el-switch v-model="sourcedl" @change="sourcedlChange">
+        </el-switch>
+      </div>
+      <div>
+        <span>渠道</span>
+        <el-switch v-model="sourceqd" @change="sourceqdChange">
+        </el-switch>
+      </div>
+    </div>
+    <div v-if="infoWindowVisible" class="info-window">
+      <p class="close flex j-s">
+        <span>详情内容</span>
+        <span style="color: #c3c3c3;font-size:18px" @click="infoWindowVisible = false"> ×</span>
+      </p>
+      <el-table :data="tableData" border style="width: 100%; height: 50vh; overflow: auto;margin-bottom:40px"
+        :header-cell-style="{
+          background: '#F2F7FC',
+          fontWeight: '700',
+          color: '#606266',
+        }">
+        <el-table-column prop="userId" label="工号" width="170">
+        </el-table-column>
+        <el-table-column prop="userName" label="姓名" width="100">
+        </el-table-column>
+        <el-table-column prop="address" label="地址">
+        </el-table-column>
+      </el-table>
+      <div class="bottomFixed">
+        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
+          :page-sizes="[10, 20, 30, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next"
+          :total="totalSum">
+        </el-pagination>
+      </div>
+    </div>
+    <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>
+      </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"
+          :class="currentIndex === index ? 'overview after-img' : 'overview '" @click="checkPrice(index)">
+          <span>{{ item.active }}</span>
+          <span>{{ item.name }}</span>
+        </div>
+      </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="{
+          background: '#F7F7F9',
+          fontWeight: '700',
+          color: '#000',
+        }">
+        <el-table-column type="index" align="center" width="50" label="序号">
+        </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>
+
+      </el-table>
+    </div>
   </div>
 </template>
 
 <script>
-import axios from "axios";
+import yongchengData from '../../assets/js/yongchengData';
 import AMapLoader from "@amap/amap-jsapi-loader";
 export default {
   data() {
@@ -42,28 +105,124 @@ export default {
       tableData: [],
       marker: null,
       infoWindowVisible: false, // 控制信息窗口的显示
+      isCollapse: false,
       loading: false,
       map: null,
       infoWindow: null, //信息窗口
       positionData: [],
-      rowId: ""
+      rowId: "",
+      source: null,
+      sourceqb: true,
+      sourcedl: null,
+      sourceqd: null,
+      provinceOption: yongchengData.data,
+      cityOption: [],
+      districtOption: [],
+      province: {},
+      provinceName: '',
+      cityName: '',
+      districtName: '',
+      overviewData: [],
+      currentIndex: 0,
+      overviewOption: [{
+        name: '全部人数',
+        active: ''
+      },
+      {
+        name: '渠道人数',
+        active: ''
+      }, {
+        name: '代理人数',
+        active: ''
+      },]
     };
   },
   mounted() {
     this.initMap();
   },
   created() {
+    this.queryRegion()
+    this.queryPcNum()
     //标注文字上的点击事件
-    window.handleDetail = id => {
-      this.rowId = id;
-      this.detail();
-    };
+    // window.handleDetail = id => {
+    //   this.rowId = id;
+    //   this.detail();
+    // };
   },
   destroyed() {
     // 销毁地图，并清空地图容器.该方法执行后，地图对象被注销，内存释放，地图容器被清空。
     this.map.destroy();
   },
   methods: {
+    checkPrice(index) {
+      this.currentIndex = index
+      this.queryRegion(index)
+    },
+    queryPcNum() {
+      this.$api.user
+        .ipAddrQueryPcNum()
+        .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
+          }
+        });
+    },
+    queryRegion(type=0) {
+      this.$api.user
+        // .queryRegionInfo( this.source==null?0:this.source)
+        .queryRegionInfo(type)
+        .then(res => {
+          if (res.code == 200) {
+            this.overviewData = res.data;
+          }
+        });
+    },
+
+    provinceChange(val) {
+      this.province.province = this.provinceOption.find(e => e.code == val).name
+      this.cityOption = this.provinceOption.find(e => e.code == val).sub
+      this.initMap();
+    },
+    cityChange(val) {
+      this.province.city = this.cityOption.find(e => e.code == val).name
+      this.districtOption = this.cityOption.find(e => e.code == val).sub
+      this.initMap();
+    },
+    districtChange(val) {
+      this.province.district = this.districtOption.find(e => e.code == val).name
+      this.initMap();
+    },
+    districtClear() {
+      this.province.district = ''
+      this.initMap();
+    },
+    sourceqbChange(val) {
+      if (val) {
+        this.sourcedl = null
+        this.sourceqd = null
+      }
+      this.source = null
+      this.initMap();
+    },
+    sourcedlChange(val) {
+      if (val) {
+        this.sourceqb = null
+        this.sourceqd = null
+      }
+      this.source = 2
+      this.initMap();
+    },
+    sourceqdChange(val) {
+      if (val) {
+        this.sourceqb = null
+        this.sourcedl = null
+      }
+      this.source = 1
+      this.initMap();
+    },
     handleClose() {
       this.infoWindowVisible = false;
     },
@@ -114,7 +273,7 @@ export default {
         });
 
         _this.map.on("complete", () => {
-          _this.$api.user.queryPositionLoginRecord().then(res => {
+          _this.$api.user.queryPositionLoginRecord({ source: this.source, ...this.province }).then(res => {
             if (res.code == 200) {
               if (res.data && res.data.length) {
                 //处理后台返回要用到的数据
@@ -126,6 +285,8 @@ export default {
                   address: item.address,
                   // onlineImg: item.status ? "Frame-1(2).png" : "Frame(2).png",
                   onlineImg: "Frame-1(2).png",
+                  operationTime: item.operationTime,
+                  source: item.source,
                   // status: item.status ? "在线" : "离线",
                   positionArr: [item.longitude, item.latitude]
                 }));
@@ -138,7 +299,7 @@ export default {
         });
       });
       //放大/缩小的工具条----地图右下角的 + 和 - 按钮
-      _this.map.plugin(["AMap.ToolBar"], function() {
+      _this.map.plugin(["AMap.ToolBar"], function () {
         _this.map.addControl(new AMap.ToolBar());
       });
       const bounds = new AMap.Bounds([
@@ -169,7 +330,6 @@ export default {
 
       _this.infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -4) }); //信息窗口
       var position = JSON.parse(JSON.stringify(_this.positionData));
-      console.log(position, "position");
       for (var i = 0; i < position.length; i++) {
         var labelMarker = new AMap.LabelMarker({
           position: position[i].positionArr
@@ -179,23 +339,45 @@ export default {
         var normalMarker = new AMap.Marker({
           position: position[i].positionArr,
           map: _this.map,
-          icon: require("@/assets/" + position[i].onlineImg)
-          // icon: require("@/assets/api.png")
+          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>',
+          // icon: require("@/assets/" + position[i].onlineImg)
         });
+        // normalMarker.content =
+        //   '<div style="font-weight: 700;padding:20px 20px 6px 20px">员工姓名：' +
+        //   position[i].userName +
+        //   "</div>" +
+        //   '<div  style="padding:6px 20px">员工工号：' +
+        //   position[i].userId +
+        //   "</div>" +
+        //   "</div>" +
+        //   '<div style="padding:6px 20px 20px 20px">地址：' +
+        //   position[i].address +
+        //   "</div>" +
+        //   '<div style="height: 32px;line-height:30px;text-align: center;background: rgba(218,59,15,0.15);color: #DA3B0F;cursor:pointer;" onclick="handleDetail(\'' +
+        //   position[i].userId +
+        //   "')\">查看详情</div>";
         normalMarker.content =
-          '<div style="font-weight: 700;padding:20px 20px 6px 20px">员工姓名：' +
-          position[i].userName +
-          "</div>" +
-          '<div  style="padding:6px 20px">员工工号：' +
-          position[i].userId +
-          "</div>" +
-          "</div>" +
-          '<div style="padding:6px 20px 20px 20px">地址：' +
-          position[i].address +
-          "</div>" +
-          '<div style="height: 32px;line-height:30px;text-align: center;background: rgba(218,59,15,0.15);color: #DA3B0F;cursor:pointer;" onclick="handleDetail(\'' +
-          position[i].userId +
-          "')\">查看详情</div>";
+          position[i].source == 1 ?
+            '<div  style="font-weight: 700">渠道姓名： ' +
+            position[i].userName +
+            "</div><div >渠道工号：" +
+            position[i].userId +
+            "</div><div>地址：" +
+            position[i].address +
+            "</div><div >登录时间：" +
+            position[i].operationTime +
+            "</div>"
+            :
+            '<div  style="font-weight: 700">代理人姓名： ' +
+            position[i].userName +
+            "</div><div >代理人工号：" +
+            position[i].userId +
+            "</div><div>地址：" +
+            position[i].address +
+            "</div><div >登录时间：" +
+            position[i].operationTime +
+            "</div>"
         normalMarker.on("click", _this.markerClick);
         normalMarker.setExtData({ id: position[i].id }); //给标注添加信息，点击时可以获取
       }
@@ -214,6 +396,57 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.province-window {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  z-index: 100;
+
+  .el-select {
+    width: 100px;
+  }
+}
+
+.source-window {
+  position: absolute;
+  bottom: 20px;
+  left: 20px;
+  z-index: 100;
+  padding: 5px 10px;
+  background: #fff;
+  font-size: 14px;
+
+  .el-switch {
+    zoom: .8
+  }
+
+  div {
+    padding: 3px;
+  }
+
+  span::before {
+    content: '';
+    display: inline-block;
+    width: 9px;
+    height: 9px;
+    background: #979797;
+    border-radius: 50%;
+    margin-right: 10px;
+  }
+
+  div:nth-child(2)>span::before {
+    background: #767EE2;
+  }
+
+  div:nth-child(3)>span::before {
+    background: #FA866D;
+  }
+
+  span {
+    margin-right: 15px;
+  }
+}
+
 .info-window {
   position: fixed;
   top: 20%;
@@ -225,6 +458,17 @@ export default {
   box-shadow: 0px 5px 10px #ddd;
 }
 
+.personnel-window {
+  position: fixed;
+  bottom: 10px;
+  right: 10px;
+  z-index: 100;
+  background-color: white;
+  padding: 10px;
+  width: 460px;
+  box-shadow: 0px 5px 10px #ddd;
+}
+
 .bottomFixed {
   height: 50px;
   position: absolute;
@@ -234,11 +478,25 @@ export default {
   margin-top: 10px;
 }
 
+.info-title {
+  font-size: 14px;
+  line-height: 30px;
+  font-weight: 700;
+
+  i {
+    display: inline-block;
+    width: 2px;
+    height: 14px;
+    background: #3865E9;
+    margin-right: 10px;
+  }
+}
+
 .close {
   color: #333;
-  cursor: pointer;
-  font-size: 15px;
+  font-size: 16px;
   font-weight: bold;
+  // border-bottom: 1px solid rgba(0,0,0,0.2);
 }
 
 /deep/ {
@@ -248,16 +506,50 @@ export default {
     padding-bottom: 0;
     font-size: 14px;
     color: rgba(0, 0, 0, 0.85);
-    width: 310px;
+    width: 275px;
   }
+
   .amap-info-content {
-    padding: 0;
+    // padding: 0;
+    padding: 20px;
+
+    div {
+      padding: 5px 0;
+    }
   }
+
   .bottom-center .amap-info-sharp {
     display: none;
   }
+
   //     .el-pager li.active{
   //     color: #000;
   // }
-}
-</style>
+  .overview {
+    text-align: center;
+    // color: #fff;
+    font-size: 14px;
+    cursor: pointer;
+    color: rgba(0, 0, 0, 0.85);
+    width: 100%;
+    height: 100px;
+    background-image: url(../../assets/user-map1.png);
+    background-size: cover;
+    span:first-child {
+      font-size: 20px;
+      line-height: 45px;
+      padding-top: 14px;
+      font-weight: 700;
+    }
+
+    span {
+      display: block;
+    }
+  }
+
+
+  .after-img {
+    color: #fff;
+    background-image: url(../../assets/user-map2.png);
+  }
+}</style>

src/views/PeopleManage/UserMap.vue

@@ -1,6 +1,5 @@
 <template>
     <div>
-      <div class="online-title"><span :style="{'background': onlineNum > 0 ? '#ff0000' : '#00ff00'}"></span>在线人数：{{ onlineNum }}</div>
         <div id="container" style="width: 100%; height: 100vh" v-loading="loading" element-loading-text="数据量较大，正在为您加载......"
             element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)"></div>
         <div v-if="infoWindowVisible" class="info-window">
@@ -28,11 +27,77 @@
                 </el-pagination>
             </div>
         </div>
+        <div class="province-window">
+      <el-select size="small" v-model="provinceName" clearable placeholder="请选择省" @change="provinceChange">
+        <el-option v-for="(option, index) in provinceOption" :key="index" :label="option.name"
+          :value="option.code"></el-option>
+      </el-select>
+      <el-select size="small" v-model="cityName" clearable placeholder="请选择市" @change="cityChange">
+        <el-option v-for="(option, index) in cityOption" :key="index" :label="option.name"
+          :value="option.code"></el-option>
+      </el-select>
+      <el-select size="small" v-model="districtName" clearable placeholder="请选择区" @change="districtChange"
+        @clear="districtClear">
+        <el-option v-for="(option, index) in districtOption" :key="index" :label="option.name"
+          :value="option.code"></el-option>
+      </el-select>
+    </div>
+    <div class="line-window" >
+      <span><i style=" background: #54B569 ;"></i>在线</span>
+      <span style="margin-left: 15px;"><i></i>离线</span>
+    </div>
+    <div class="source-window">
+      <div>
+        <span>全部</span>
+        <el-switch v-model="sourceqb" @change="sourceqbChange">
+        </el-switch>
+      </div>
+      <div>
+        <span>代理</span>
+        <el-switch v-model="sourcedl" @change="sourcedlChange">
+        </el-switch>
+      </div>
+      <div>
+        <span>渠道</span>
+        <el-switch v-model="sourceqd" @change="sourceqdChange">
+        </el-switch>
+      </div>
+    </div>
+    <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>
+      </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"
+          :class="currentIndex === index ? 'overview after-img' : 'overview '" @click="checkPrice(index)">
+          <span>{{ item.active }}</span>
+          <span>{{ item.name }}</span>
+        </div>
+      </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="{
+          background: '#F7F7F9',
+          fontWeight: '700',
+          color: '#000',
+        }">
+        <el-table-column type="index" align="center" width="50" label="序号">
+        </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>
+
+      </el-table>
+    </div>
     </div>
 </template>
 
 <script>
-import axios from "axios";
+import yongchengData from '../../assets/js/yongchengData';
 import AMapLoader from "@amap/amap-jsapi-loader";
 export default {
   data() {
@@ -48,24 +113,119 @@ export default {
       infoWindow: null, //信息窗口
       positionData: [],
       rowId: "",
-      onlineNum: 0 //在线默认人数
+      onlineNum: 0, //在线默认人数
+      source: null,
+      sourceqb: true,
+      sourcedl: null,
+      sourceqd: null,
+      provinceOption: yongchengData.data,
+      cityOption: [],
+      districtOption: [],
+      province: {},
+      provinceName: '',
+      cityName: '',
+      districtName: '',
+      overviewData: [],
+      currentIndex: 0,
+      isCollapse: false,
+      overviewOption: [{
+        name: '全部人数',
+        active: ''
+      },
+      {
+        name: '渠道人数',
+        active: ''
+      }, {
+        name: '代理人数',
+        active: ''
+      },]
     };
   },
   mounted() {
     this.initMap();
   },
   created() {
+    this.queryRegion()
+    this.queryPcNum()
     //标注文字上的点击事件
-    window.handleDetail = id => {
-      this.rowId = id;
-      this.detail();
-    };
+    // window.handleDetail = id => {
+    //   this.rowId = id;
+    //   this.detail();
+    // };
   },
   destroyed() {
     // 销毁地图，并清空地图容器.该方法执行后，地图对象被注销，内存释放，地图容器被清空。
     this.map.destroy();
   },
   methods: {
+    checkPrice(index) {
+      this.currentIndex = index
+      this.queryRegion(index)
+    },
+    queryPcNum() {
+      this.$api.user
+        .geographyQueryPcNum()
+        .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
+          }
+        });
+    },
+    queryRegion(type=0) {
+      this.$api.user
+        .appQueryRegionInfo(type)
+        .then(res => {
+          if (res.code == 200) {
+            this.overviewData = res.data;
+          }
+        });
+    },
+
+    provinceChange(val) {
+      this.province.province = this.provinceOption.find(e => e.code == val).name
+      this.cityOption = this.provinceOption.find(e => e.code == val).sub
+      this.initMap();
+    },
+    cityChange(val) {
+      this.province.city = this.cityOption.find(e => e.code == val).name
+      this.districtOption = this.cityOption.find(e => e.code == val).sub
+      this.initMap();
+    },
+    districtChange(val) {
+      this.province.district = this.districtOption.find(e => e.code == val).name
+      this.initMap();
+    },
+    districtClear() {
+      this.province.district = ''
+      this.initMap();
+    },
+    sourceqbChange(val) {
+      if (val) {
+        this.sourcedl = null
+        this.sourceqd = null
+      }
+      this.source = null
+      this.initMap();
+    },
+    sourcedlChange(val) {
+      if (val) {
+        this.sourceqb = null
+        this.sourceqd = null
+      }
+      this.source = 2
+      this.initMap();
+    },
+    sourceqdChange(val) {
+      if (val) {
+        this.sourceqb = null
+        this.sourcedl = null
+      }
+      this.source = 1
+      this.initMap();
+    },
     handleClose() {
       this.infoWindowVisible = false;
     },
@@ -116,9 +276,9 @@ export default {
         });
 
         _this.map.on("complete", () => {
-          _this.$api.user.queryPosition().then(res => {
+          _this.$api.user.queryPosition({ source: this.source, ...this.province }).then(res => {
             if (res.code == 200) {
-              _this.onlineNum = res.data.manNum; //在线人数
+              // _this.onlineNum = res.data.manNum; //在线人数
               if (res.data.list && res.data.list.length) {
                 //处理后台返回要用到的数据
                 // _this.positionData = res.data.data
@@ -127,7 +287,11 @@ export default {
                   id: item.id,
                   address: item.address,
                   onlineImg: item.status ? "Frame-1(2).png" : "Frame(2).png",
-                  status: item.status ? "在线" : "离线",
+                  // status: item.status ? "在线" : "离线",
+                  status: item.status ? "#54B569" : "#B2B2B2",
+                  createTime:item.createTime,
+                  deptName:item.deptName,
+                  source:item.source,
                   positionArr: [item.longitude, item.latitude]
                 }));
                 _this.mapPoint();
@@ -168,6 +332,17 @@ export default {
       //将 LabelsLayer 添加到地图实例
       _this.map.add(labelsLayer);
 
+      // oldIcon = new AMap.Icon({
+      //     image: "****old.png",
+      //     size: new AMap.Size(30, 37), //图标大小
+      //     imageSize: new AMap.Size(30, 37)
+      // });
+      // newIcon = new AMap.Icon({
+      //     image: "@/assets/Frame-1(2).png",
+      //     size: new AMap.Size(30, 37), //图标大小
+      //     imageSize: new AMap.Size(30, 37)
+      // });
+
       _this.infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -4) }); //信息窗口
       var position = JSON.parse(JSON.stringify(_this.positionData));
       for (var i = 0; i < position.length; i++) {
@@ -179,41 +354,71 @@ export default {
         var normalMarker = new AMap.Marker({
           position: position[i].positionArr,
           map: _this.map,
-          icon: require("@/assets/" + position[i].onlineImg)
-          // icon: require("@/assets/api.png")
+          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>',
+          // icon: require("@/assets/" + position[i].onlineImg)
         });
         normalMarker.content =
-          position[i].status == "在线"
-            ? '<div style="font-weight: 700;padding:20px 20px 6px 20px">员工姓名：' +
-              position[i].userName +
-              "</div>" +
-              '<div  style="padding:6px 20px">员工工号：' +
-              position[i].id +
-              "</div>" +
-              '<div style="color: #DA3B0F;padding:6px 20px"><span style="color: rgba(0,0,0,0.85);">在线状态：</span>' +
-              position[i].status +
-              "</div>" +
-              '<div style="padding:6px 20px 20px 20px">地址：' +
-              position[i].address +
-              "</div>" +
-              '<div style="height: 32px;line-height:30px;text-align: center;background: rgba(218,59,15,0.15);color: #DA3B0F;cursor:pointer;" onclick="handleDetail(\'' +
-              position[i].id +
-              "')\">查看详情</div>"
-            : '<div style="font-weight: 700;padding:20px 20px 6px 20px">员工姓名：' +
-              position[i].userName +
-              "</div>" +
-              '<div  style="padding:6px 20px">员工工号：' +
-              position[i].id +
-              "</div>" +
-              '<div style="color: #009900;padding:6px 20px"><span style="color: rgba(0,0,0,0.85);">在线状态：</span>' +
-              position[i].status +
-              "</div>" +
-              '<div style="padding:6px 20px 20px 20px">地址：' +
-              position[i].address +
-              "</div>" +
-              '<div style="height: 32px;line-height:30px;text-align: center;background: rgba(0,153,0,0.15);color: #009900;cursor:pointer;" onclick="handleDetail(\'' +
-              position[i].id +
-              "')\">查看详情</div>";
+          position[i].source == 1 ?
+            '<div  style="font-weight: 700;display: flex; justify-content: space-between"> <span>渠道姓名： ' +
+            position[i].userName +
+            '</span><i style="width: 10px;height: 10px;border-radius: 50%;background-color:'+
+            position[i].status+
+            '"></i></div><div >渠道工号：' +
+            position[i].id +
+            "</div><div >所属机构：" +
+            position[i].deptName +
+            "</div><div>地址：" +
+            position[i].address +
+            "</div><div >登录时间：" +
+            position[i].createTime +
+            "</div>"
+            :
+            '<div  style="font-weight: 700;display: flex; justify-content: space-between"> <span>代理人姓名： ' +
+            position[i].userName +
+            '</span><i style="width: 10px;height: 10px;border-radius: 50%;background-color:'+
+            position[i].status+
+            '"></i></div><div >代理人工号：' +
+            position[i].id +
+            "</div><div >所属机构：" +
+            position[i].deptName +
+            "</div><div>地址：" +
+            position[i].address +
+            "</div><div >登录时间：" +
+            position[i].createTime +
+            "</div>"
+        // normalMarker.content =
+        //   position[i].status == "在线"
+        //     ? '<div style="font-weight: 700;padding:20px 20px 6px 20px">员工姓名：' +
+        //       position[i].userName +
+        //       "</div>" +
+        //       '<div  style="padding:6px 20px">员工工号：' +
+        //       position[i].id +
+        //       "</div>" +
+        //       '<div style="color: #DA3B0F;padding:6px 20px"><span style="color: rgba(0,0,0,0.85);">在线状态：</span>' +
+        //       position[i].status +
+        //       "</div>" +
+        //       '<div style="padding:6px 20px 20px 20px">地址：' +
+        //       position[i].address +
+        //       "</div>" +
+        //       '<div style="height: 32px;line-height:30px;text-align: center;background: rgba(218,59,15,0.15);color: #DA3B0F;cursor:pointer;" onclick="handleDetail(\'' +
+        //       position[i].id +
+        //       "')\">查看详情</div>"
+        //     : '<div style="font-weight: 700;padding:20px 20px 6px 20px">员工姓名：' +
+        //       position[i].userName +
+        //       "</div>" +
+        //       '<div  style="padding:6px 20px">员工工号：' +
+        //       position[i].id +
+        //       "</div>" +
+        //       '<div style="color: #009900;padding:6px 20px"><span style="color: rgba(0,0,0,0.85);">在线状态：</span>' +
+        //       position[i].status +
+        //       "</div>" +
+        //       '<div style="padding:6px 20px 20px 20px">地址：' +
+        //       position[i].address +
+        //       "</div>" +
+        //       '<div style="height: 32px;line-height:30px;text-align: center;background: rgba(0,153,0,0.15);color: #009900;cursor:pointer;" onclick="handleDetail(\'' +
+        //       position[i].id +
+        //       "')\">查看详情</div>";
         normalMarker.on("click", _this.markerClick);
         normalMarker.setExtData({ id: position[i].id }); //给标注添加信息，点击时可以获取
       }
@@ -232,20 +437,90 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.online-title {
+// .online-title {
+//   position: absolute;
+//   top: 20px;
+//   left: 20px;
+//   z-index: 100;
+//   span {
+//     width: 10px;
+//     height: 10px;
+//     border-radius: 50%;
+//     background: red;
+//     display: inline-block;
+//     margin-right: 5px;
+//   }
+// }
+
+.province-window {
   position: absolute;
   top: 20px;
   left: 20px;
   z-index: 100;
-  span {
-    width: 10px;
-    height: 10px;
+
+  .el-select {
+    width: 100px;
+  }
+}
+.line-window{
+  position: absolute;
+  bottom: 150px;
+  left: 20px;
+  z-index: 100;
+  padding: 5px 10px;
+  background: #fff;
+  font-size: 14px;
+  
+  i{
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    background: #979797;
     border-radius: 50%;
-    background: red;
+    margin-right: 10px;
+  }
+
+}
+.source-window {
+  position: absolute;
+  bottom: 20px;
+  left: 20px;
+  z-index: 100;
+  padding: 5px 10px;
+  background: #fff;
+  font-size: 14px;
+
+  .el-switch {
+    zoom: .8
+  }
+
+  div {
+    padding: 3px;
+  }
+
+  span::before {
+    content: '';
     display: inline-block;
-    margin-right: 5px;
+    width: 9px;
+    height: 9px;
+    background: #979797;
+    border-radius: 50%;
+    margin-right: 10px;
+  }
+
+  div:nth-child(2)>span::before {
+    background: #767EE2;
+  }
+
+  div:nth-child(3)>span::before {
+    background: #FA866D;
+  }
+
+  span {
+    margin-right: 15px;
   }
 }
+
 .info-window {
   position: fixed;
   top: 20%;
@@ -257,6 +532,17 @@ export default {
   box-shadow: 0px 5px 10px #ddd;
 }
 
+.personnel-window {
+  position: fixed;
+  bottom: 10px;
+  right: 10px;
+  z-index: 100;
+  background-color: white;
+  padding: 10px;
+  width: 460px;
+  box-shadow: 0px 5px 10px #ddd;
+}
+
 .bottomFixed {
   height: 50px;
   position: absolute;
@@ -266,11 +552,25 @@ export default {
   margin-top: 10px;
 }
 
+.info-title {
+  font-size: 14px;
+  line-height: 30px;
+  font-weight: 700;
+
+  i {
+    display: inline-block;
+    width: 2px;
+    height: 14px;
+    background: #3865E9;
+    margin-right: 10px;
+  }
+}
+
 .close {
   color: #333;
-  cursor: pointer;
-  font-size: 15px;
+  font-size: 16px;
   font-weight: bold;
+  // border-bottom: 1px solid rgba(0,0,0,0.2);
 }
 
 /deep/ {
@@ -280,16 +580,51 @@ export default {
     padding-bottom: 0;
     font-size: 14px;
     color: rgba(0, 0, 0, 0.85);
-    width: 310px;
+    width: 275px;
   }
+
   .amap-info-content {
-    padding: 0;
+    // padding: 0;
+    padding: 20px;
+
+    div {
+      padding: 5px 0;
+    }
   }
+
   .bottom-center .amap-info-sharp {
     display: none;
   }
+
   //     .el-pager li.active{
   //     color: #000;
   // }
+  .overview {
+    text-align: center;
+    // color: #fff;
+    font-size: 14px;
+    cursor: pointer;
+    color: rgba(0, 0, 0, 0.85);
+    width: 100%;
+    height: 100px;
+    background-image: url(../../assets/user-map1.png);
+    background-size: cover;
+    span:first-child {
+      font-size: 20px;
+      line-height: 45px;
+      padding-top: 14px;
+      font-weight: 700;
+    }
+
+    span {
+      display: block;
+    }
+  }
+
+
+  .after-img {
+    color: #fff;
+    background-image: url(../../assets/user-map2.png);
+  }
 }
 </style>