pc app人员分布

src/http/moudules/user.js

@@ -564,27 +564,31 @@ export const queryPositionListLoginRecord = (data) => {
     data
   })
 }
-export const queryRegionInfo = (type) => {
+export const queryRegionInfo = (data) => {
   return axios({
-    url: '/sys/ipAddr/queryRegionInfo/'+type,
-    method: 'get',
+    url: '/sys/ipAddr/queryRegionInfo',
+    method: 'post',
+    data
   })
 }
-export const ipAddrQueryPcNum = (type) => {
+export const ipAddrQueryPcNum = (data) => {
   return axios({
     url: '/sys/ipAddr/queryPcNum',
-    method: 'get',
+    method: 'post',
+    data
   })
 }
-export const geographyQueryPcNum = (type) => {
+export const geographyQueryPcNum = (data) => {
   return axios({
     url: '/geography/queryPcNum',
-    method: 'get',
+    method: 'post',
+    data
   })
 }
-export const appQueryRegionInfo = (type) => {
+export const appQueryRegionInfo = (data) => {
   return axios({
-    url: '/geography/queryRegionInfo/'+type,
-    method: 'get',
+    url: '/geography/queryRegionInfo',
+    method: 'post',
+    data
   })
 }

src/views/PeopleManage/PcLoginRecord.vue

@@ -1,14 +1,14 @@
 <template>
   <div>
-    <div id="containerMap" style="width: 100%; height: 100vh;position: relative" v-loading="loading"
+    <div id="containerMap" style="width: 100%; height: 87vh;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-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>
-      <el-select size="small" v-model="cityName" clearable placeholder="请选择市" @change="cityChange">
+      <el-select size="small" v-model="cityName" clearable placeholder="请选择市" @change="cityChange" @clear="cityClear">
         <el-option v-for="(option, index) in cityOption" :key="index" :label="option.name"
           :value="option.code"></el-option>
       </el-select>
@@ -17,6 +17,7 @@
         <el-option v-for="(option, index) in districtOption" :key="index" :label="option.name"
           :value="option.code"></el-option>
       </el-select>
+      <el-button size="small" type="primary" @click="onSearch">搜索</el-button>
     </div>
     <div class="source-window">
       <div>
@@ -87,7 +88,10 @@
         </el-table-column>
         <el-table-column prop="number" align="center" label="人数">
         </el-table-column>
-
+        <div slot="empty" class="empty">
+          <img src="../../assets/暂无数据.png"/>
+          <div class="txt">暂无数据哦</div>
+      </div>
       </el-table>
     </div>
   </div>
@@ -156,48 +160,67 @@ export default {
   methods: {
     checkPrice(index) {
       this.currentIndex = index
-      this.queryRegion(index)
+      this.queryRegion(index==0?null:index)
     },
     queryPcNum() {
       this.$api.user
-        .ipAddrQueryPcNum()
+        .ipAddrQueryPcNum(this.province )
         .then(res => {
           if (res.code == 200) {
-            this.overviewForm = res.data;
+            // 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) {
+    queryRegion(source=null) {
       this.$api.user
         // .queryRegionInfo( this.source==null?0:this.source)
-        .queryRegionInfo(type)
+        .queryRegionInfo({source,...this.province})
         .then(res => {
           if (res.code == 200) {
             this.overviewData = res.data;
           }
         });
     },
-
+    onSearch(){
+      this.currentIndex=0
+      this.queryRegion()
+      this.queryPcNum()
+      this.initMap();
+    },
     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.districtName = ''
       this.province.district = ''
-      this.initMap();
+    },
+    cityClear() {
+      this.cityName = ''
+      this.districtName = ''
+      this.province.city = ''
+      this.province.district = ''
+      this.districtOption=[]
+    },
+    provinceClear() {
+      this.cityName = ''
+      this.districtName = ''
+      this.provinceName = ''
+      this.province.city = ''
+      this.province.province = ''
+      this.province.district = ''
+      this.districtOption=[]
+      this.cityOption=[]
     },
     sourceqbChange(val) {
       if (val) {
@@ -274,8 +297,8 @@ export default {
 
         _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) {
+            if (res.code == 200 ) {
+              if (res.data && res.data.length>0) {
                 //处理后台返回要用到的数据
                 // _this.positionData = res.data.data
                 _this.positionData = res.data.map(item => ({
@@ -291,22 +314,26 @@ export default {
                   positionArr: [item.longitude, item.latitude]
                 }));
                 _this.mapPoint();
-              } else {
+              }
+              else{
+                _this.loading = false; //地图加载完成
+              }
+          } else {
+               _this.$message.error(res.msg)
                 _this.loading = false;
               }
-            }
           });
         });
       });
       //放大/缩小的工具条----地图右下角的 + 和 - 按钮
-      _this.map.plugin(["AMap.ToolBar"], function () {
-        _this.map.addControl(new AMap.ToolBar());
-      });
-      const bounds = new AMap.Bounds([
-        [112.058286, 35.243683], // 左下角坐标
-        [114.464586, 39.099962] // 右上角坐标
-      ]);
-      _this.map.limitBounds(bounds);
+      // _this.map.plugin(["AMap.ToolBar"], function () {
+      //   _this.map.addControl(new AMap.ToolBar());
+      // });
+      // const bounds = new AMap.Bounds([
+      //   [112.058286, 35.243683], // 左下角坐标
+      //   [114.464586, 39.099962] // 右上角坐标
+      // ]);
+      // _this.map.limitBounds(bounds);
       if (location.href.indexOf("&guide=1") !== -1) {
         _this.map.setStatus({ scrollWheel: false });
       }
@@ -358,26 +385,15 @@ export default {
         //   position[i].userId +
         //   "')\">查看详情</div>";
         normalMarker.content =
-          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>"
+        `
+        <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 >地址： ${position[i].address}</div>
+        <div >登录时间： ${position[i].operationTime}</div>
+        `
         normalMarker.on("click", _this.markerClick);
         normalMarker.setExtData({ id: position[i].id }); //给标注添加信息，点击时可以获取
       }
@@ -386,6 +402,7 @@ 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);
@@ -429,7 +446,7 @@ export default {
     display: inline-block;
     width: 9px;
     height: 9px;
-    background: #979797;
+    background: #fff;
     border-radius: 50%;
     margin-right: 10px;
   }
@@ -500,6 +517,9 @@ export default {
 }
 
 /deep/ {
+  .el-table__empty-text{
+    line-height: 35px;
+  }
   .amap-info-contentContainer {
     border-radius: 8px 8px 8px 8px;
     box-shadow: 0px 1px 8px #ddd;
@@ -552,4 +572,7 @@ export default {
     color: #fff;
     background-image: url(../../assets/user-map2.png);
   }
+  .txt{
+    padding: 15px 0;
+  }
 }</style>

src/views/PeopleManage/UserMap.vue

@@ -1,38 +1,38 @@
 <template>
-    <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">
-            <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="province-window">
-      <el-select size="small" v-model="provinceName" clearable placeholder="请选择省" @change="provinceChange">
+  <div>
+    <div id="container" style="width: 100%; height: 87vh" 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>
+    <div class="province-window">
+      <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>
-      <el-select size="small" v-model="cityName" clearable placeholder="请选择市" @change="cityChange">
+      <el-select size="small" v-model="cityName" clearable placeholder="请选择市" @change="cityChange" @clear="cityClear">
         <el-option v-for="(option, index) in cityOption" :key="index" :label="option.name"
           :value="option.code"></el-option>
       </el-select>
@@ -41,8 +41,9 @@
         <el-option v-for="(option, index) in districtOption" :key="index" :label="option.name"
           :value="option.code"></el-option>
       </el-select>
+      <el-button size="small" type="primary" @click="onSearch">搜索</el-button>
     </div>
-    <div class="line-window" >
+    <div class="line-window">
       <span><i style=" background: #54B569 ;"></i>在线</span>
       <span style="margin-left: 15px;"><i></i>离线</span>
     </div>
@@ -66,11 +67,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>
@@ -78,22 +80,24 @@
       </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 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>
-
+        <div slot="empty" class="empty">
+          <img src="../../assets/暂无数据.png"/>
+          <div class="txt">暂无数据哦</div>
+      </div>
       </el-table>
     </div>
-    </div>
+  </div>
 </template>
 
 <script>
@@ -160,47 +164,66 @@ export default {
   methods: {
     checkPrice(index) {
       this.currentIndex = index
-      this.queryRegion(index)
+      this.queryRegion(index==0?null:index)
     },
     queryPcNum() {
       this.$api.user
-        .geographyQueryPcNum()
+        .geographyQueryPcNum(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(type=0) {
+    queryRegion(source = null) {
       this.$api.user
-        .appQueryRegionInfo(type)
+        .appQueryRegionInfo({source,...this.province})
         .then(res => {
           if (res.code == 200) {
             this.overviewData = res.data;
           }
         });
     },
-
+    onSearch(){
+      this.currentIndex=0
+      this.queryRegion()
+      this.queryPcNum()
+      this.initMap();
+    },
     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.districtName = ''
       this.province.district = ''
-      this.initMap();
+    },
+    cityClear() {
+      this.cityName = ''
+      this.districtName = ''
+      this.province.city = ''
+      this.province.district = ''
+      this.districtOption=[]
+    },
+    provinceClear() {
+      this.cityName = ''
+      this.districtName = ''
+      this.provinceName = ''
+      this.province.city = ''
+      this.province.province = ''
+      this.province.district = ''
+      this.districtOption=[]
+      this.cityOption=[]
     },
     sourceqbChange(val) {
       if (val) {
@@ -278,8 +301,8 @@ export default {
         _this.map.on("complete", () => {
           _this.$api.user.queryPosition({ source: this.source, ...this.province }).then(res => {
             if (res.code == 200) {
+              if(res.data.list && res.data.list.length>0){
               // _this.onlineNum = res.data.manNum; //在线人数
-              if (res.data.list && res.data.list.length) {
                 //处理后台返回要用到的数据
                 // _this.positionData = res.data.data
                 _this.positionData = res.data.list.map(item => ({
@@ -289,28 +312,29 @@ export default {
                   onlineImg: item.status ? "Frame-1(2).png" : "Frame(2).png",
                   // status: item.status ? "在线" : "离线",
                   status: item.status ? "#54B569" : "#B2B2B2",
-                  createTime:item.createTime,
-                  deptName:item.deptName,
-                  source:item.source,
+                  createTime: item.createTime,
+                  deptName: item.deptName,
+                  source: item.source,
                   positionArr: [item.longitude, item.latitude]
                 }));
                 _this.mapPoint();
+              }
               } else {
+                _this.$message.error(res.msg)
                 _this.loading = false;
               }
-            }
           });
         });
       });
       //放大/缩小的工具条----地图右下角的 + 和 - 按钮
-      _this.map.plugin(["AMap.ToolBar"], function() {
-        _this.map.addControl(new AMap.ToolBar());
-      });
-      const bounds = new AMap.Bounds([
-        [112.058286, 35.243683], // 左下角坐标
-        [114.464586, 39.099962] // 右上角坐标
-      ]);
-      _this.map.limitBounds(bounds);
+      // _this.map.plugin(["AMap.ToolBar"], function () {
+      //   _this.map.addControl(new AMap.ToolBar());
+      // });
+      // const bounds = new AMap.Bounds([
+      //   [112.058286, 35.243683], // 左下角坐标
+      //   [114.464586, 39.099962] // 右上角坐标
+      // ]);
+      // _this.map.limitBounds(bounds);
       if (location.href.indexOf("&guide=1") !== -1) {
         _this.map.setStatus({ scrollWheel: false });
       }
@@ -354,39 +378,22 @@ 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: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].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>"
+          `
+        <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].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">员工姓名：' +
@@ -462,16 +469,17 @@ export default {
     width: 100px;
   }
 }
-.line-window{
+
+.line-window {
   position: absolute;
-  bottom: 150px;
+  bottom: 130px;
   left: 20px;
   z-index: 100;
   padding: 5px 10px;
   background: #fff;
   font-size: 14px;
-  
-  i{
+
+  i {
     display: inline-block;
     width: 6px;
     height: 6px;
@@ -481,6 +489,7 @@ export default {
   }
 
 }
+
 .source-window {
   position: absolute;
   bottom: 20px;
@@ -503,7 +512,7 @@ export default {
     display: inline-block;
     width: 9px;
     height: 9px;
-    background: #979797;
+    background: #fff;
     border-radius: 50%;
     margin-right: 10px;
   }
@@ -574,6 +583,9 @@ export default {
 }
 
 /deep/ {
+  .el-table__empty-text{
+    line-height: 35px;
+  }
   .amap-info-contentContainer {
     border-radius: 8px 8px 8px 8px;
     box-shadow: 0px 1px 8px #ddd;
@@ -609,6 +621,7 @@ export default {
     height: 100px;
     background-image: url(../../assets/user-map1.png);
     background-size: cover;
+
     span:first-child {
       font-size: 20px;
       line-height: 45px;
@@ -626,5 +639,9 @@ export default {
     color: #fff;
     background-image: url(../../assets/user-map2.png);
   }
+  
+  .txt{
+    padding: 15px 0;
+  }
 }
 </style>