用户热力图页面优化

src/views/PeopleManage/PcLoginRecord.vue

@@ -20,10 +20,19 @@
             :value="option.code"></el-option>
         </el-select>
         <el-button size="small" type="primary" @click="onSearch">搜索</el-button>
-        <el-button size="small" type="primary" @click="getUserDeptTreeFun()">机构人员树</el-button>
         <!-- <el-button size="small" type="primary" @click="onCircular">圆形定位</el-button> -->
         <!-- <el-button size="small" type="primary" @click="map.remove(circle)">删除定位</el-button> -->
       </div>
+
+      <div class="personnel-tree" v-show="!deptPeopleVisible" @click="getUserDeptTreeFun()">
+        <img src="../../assets/机构人员.png" />
+        <span style="margin: 0 10px 0 5px;">机构人员树</span>
+        <i class="el-icon-arrow-right"></i>
+      </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>
@@ -47,8 +56,8 @@
         </el-switch> -->
         </div>
       </div>
-       <!-- <MobileZoomDiv> -->
-        <div v-if="personnelVisible">
+      <!-- <MobileZoomDiv> -->
+      <div v-if="personnelVisible">
         <vdr title="人员详情" @visiblefun="personnelVisible = false" :width="700" :height="370">
           <el-table :data="personnelData" border style="width: 100%; " :header-cell-style="{
             background: '#F7F7F9',
@@ -69,7 +78,7 @@
             </el-table-column>
             <el-table-column prop="address" label="地址">
             </el-table-column>
-            <el-table-column prop="operationTime" label="登录时间"> 
+            <el-table-column prop="operationTime" label="登录时间">
             </el-table-column>
             <el-table-column prop="source" label="分类">
               <template slot-scope="scope">
@@ -82,9 +91,9 @@
                   size="small">
                   历史记录
                 </el-button>
-                <el-button  @click.native.prevent="operatelRecords(scope.row)" type="text"
+                <el-button style="color:#E96238 " @click.native.prevent="operatelRecords(scope.row)" type="text"
                   size="small">
-                  操作记录
+                  操作统计
                 </el-button>
               </template>
             </el-table-column>
@@ -103,29 +112,84 @@
       <!-- </MobileZoomDiv> -->
       <!-- <MobileZoomDivTR> -->
       <div v-if="infoWindowVisible">
-        <vdr title="历史记录" @visiblefun="infoWindowVisible = false"  :width="600" :height="430">
-          <el-table :data="tableData" border style="width: 98%; max-height: 45vh;
+        <vdr @visiblefun="infoWindowVisible = false" :width="600" :height="320">
+          <el-tabs slot="title" style="width: 92%;" v-model="historyName" @tab-click="handHistoryoperate">
+            <el-tab-pane label="历史记录" name="1">
+            </el-tab-pane>
+            <el-tab-pane label="操作统计" name="2">
+            </el-tab-pane>
+          </el-tabs>
+          <div v-show="historyName == 1">
+            <el-table :data="tableData" border style="width: 100%; max-height: 23vh;
             overflow-y: auto; " :cell-style="{ padding: '3px 8px' }" :header-cell-style="{
               background: '#F2F7FC',
               fontWeight: '700',
               color: '#606266',
 
             }">
-          <el-table-column prop="userId" label="工号" width="130">
-          </el-table-column>
-          <el-table-column prop="userName" label="姓名" width="80">
-          </el-table-column>
-          <el-table-column prop="address" label="地址" >
-          </el-table-column>
-          <el-table-column prop="operationTime" label="登录时间" width="120">
-          </el-table-column>
-        </el-table>
-        <div class="bottomFixed">
-          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
-            :page-sizes="[5, 10, 20, 30, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next"
-            :total="totalSum">
-          </el-pagination>
-        </div>
+              <el-table-column prop="userId" label="工号" width="130">
+              </el-table-column>
+              <el-table-column prop="userName" label="姓名" width="80">
+              </el-table-column>
+              <el-table-column prop="address" label="地址">
+              </el-table-column>
+              <el-table-column prop="operationTime" label="登录时间" width="120">
+              </el-table-column>
+            </el-table>
+            <div class="bottomFixed">
+              <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
+                :page-sizes="[3,5, 10, 20, 30, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next"
+                :total="totalSum">
+              </el-pagination>
+            </div>
+          </div>
+          <div v-show="historyName == 2">
+              <div style="margin-bottom: 10px;">
+                <span style="color: #262626;font-weight: 700;font-size: 14px;">时间筛选 </span>
+                <el-date-picker v-model="operateDate" type="datetimerange" size="small" @change="operateDateFun"
+                  :default-time="['00:00:01', '23:59:59']" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至"
+                  start-placeholder="开始日期" end-placeholder="结束日期">
+                </el-date-picker>
+              </div>
+              <el-table :data="tableoperateData" border style="width: 100%" :cell-style="{ padding: '3px 8px' }" :header-cell-style="{
+                background: '#F2F7FC',
+                fontWeight: '700',
+                color: '#606266',
+
+              }">
+                <el-table-column prop="userId" label="工号">
+                </el-table-column>
+                <el-table-column prop="userName" label="姓名">
+                </el-table-column>
+                <el-table-column prop="carNumber" label="车险录单">
+                  <template slot-scope="scope">
+                    <el-tooltip v-if="scope.row.carNumber" class="item" effect="dark" :content="scope.row.carNumberTime"
+                      placement="bottom">
+                      <span>{{ scope.row.carNumber }}</span>
+                    </el-tooltip>
+                    <span v-else>{{ scope.row.carNumber }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="orderNumber" label="订单查询">
+                  <template slot-scope="scope">
+                    <el-tooltip v-if="scope.row.orderNumber" class="item" effect="dark"
+                      :content="scope.row.orderNumberTime" placement="bottom">
+                      <span>{{ scope.row.orderNumber }}</span>
+                    </el-tooltip>
+                    <span v-else>{{ scope.row.orderNumber }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="walletNumber" label="钱包">
+                  <template slot-scope="scope">
+                    <el-tooltip v-if="scope.row.walletNumber" class="item" effect="dark"
+                      :content="scope.row.walletNumberTime" placement="bottom">
+                      <span>{{ scope.row.walletNumber }}</span>
+                    </el-tooltip>
+                    <span v-else>{{ scope.row.walletNumber }}</span>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </div>
         </vdr>
       </div>
       <!-- </MobileZoomDivTR> -->
@@ -201,84 +265,20 @@
         </div>
 
       </MobileZoomDivR>
-     
-      <div v-if="operatelVisible">
-        <vdr title="操作记录" @visiblefun="operatelVisible = false"  :width="600"  :height="250">
-          <div style="margin-bottom: 10px;">
-            <span style="color: #262626;font-weight: 700;font-size: 14px;">时间筛选 </span>
-            <el-date-picker v-model="operateDate" type="datetimerange" size="small" @change="operateDateFun"
-              :default-time="['00:00:01', '23:59:59']" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至"
-              start-placeholder="开始日期" end-placeholder="结束日期">
-            </el-date-picker>
-          </div>
-          <el-table :data="tableoperateData" border style="width: 98%; max-height: 45vh;
-              overflow-y: auto; " :cell-style="{ padding: '3px 8px' }" :header-cell-style="{
-                background: '#F2F7FC',
-                fontWeight: '700',
-                color: '#606266',
-
-              }">
-            <el-table-column prop="userId" label="工号">
-            </el-table-column>
-            <el-table-column prop="userName" label="姓名">
-            </el-table-column>
-            <el-table-column prop="carNumber" label="车险录单">
-              <template slot-scope="scope">
-              <el-tooltip v-if="scope.row.carNumber" class="item" effect="dark" :content="scope.row.carNumberTime" placement="bottom">
-                  <span >{{ scope.row.carNumber }}</span>
-                </el-tooltip>
-              <span v-else>{{ scope.row.carNumber }}</span>
-              </template > 
-            </el-table-column>
-            <el-table-column prop="orderNumber" label="订单查询">
-              <template slot-scope="scope">
-              <el-tooltip v-if="scope.row.orderNumber" class="item" effect="dark" :content="scope.row.orderNumberTime" placement="bottom">
-                  <span >{{ scope.row.orderNumber }}</span>
-                </el-tooltip>
-                <span v-else>{{ scope.row.orderNumber }}</span>
-              </template > 
-            </el-table-column>
-            <el-table-column prop="walletNumber" label="钱包">
-              <template slot-scope="scope">
-              <el-tooltip v-if="scope.row.walletNumber" class="item" effect="dark" :content="scope.row.walletNumberTime" placement="bottom">
-                  <span >{{ scope.row.walletNumber }}</span>
-                </el-tooltip>
-                <span v-else>{{ scope.row.walletNumber }}</span>
-              </template > 
-            </el-table-column>  
-          </el-table>
-          <!-- <div class="bottomFixed">
-            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
-              :page-sizes="[5, 10, 20, 30, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next"
-              :total="totalSum">
-            </el-pagination>
-          </div> -->
-        </vdr>
-      </div>
 
       <div class="info-window" v-if="deptPeopleVisible">
-          <!-- <p class="close flex j-s">
-          <span>历史记录</span>
-          <span style="color: #c3c3c3;font-size:18px" @click="infoWindowVisible = false"> ×</span>
-        </p> -->
-        <div class="close flex j-s" style="padding:10px 0" >
-          <el-switch
-          v-model="deptPeopleValue"
-          @change="deptPeopleFun"
-          size="small"
-          active-text="机构树"
-          :disabled="ztreeNodeAll.type==1"
-          inactive-text="人员树">
-        </el-switch>
-        <span class="el-icon-close" style="color: #c3c3c3;cursor: pointer" @click="deptPeopleVisible = false"> </span>
+        <div class="info-box">
+          <i class="el-icon-arrow-left close-button" @click="deptPeopleVisible = false"></i>
+          <el-tabs style="width: 100%;" v-model="deptPeopleName" @tab-click="deptPeopleFun">
+            <el-tab-pane label="机构树" name="1"></el-tab-pane>
+            <el-tab-pane label="人员树" name="2" :disabled="ztreeNodeAll.type == 1"></el-tab-pane>
+          </el-tabs>
+          <div style=" height: 70vh;
+    overflow-y: auto;">
+            <el-tree :data="ztreeNodes" :props="{ children: 'children', label: 'name' }" node-key="id"
+              :default-expanded-keys="['9']" @node-click="onZTreeClick"></el-tree>
+          </div>
         </div>
-        <el-tree
-            :data="ztreeNodes"
-            :props="{ children: 'children', label: 'name' }"
-            node-key="id"
-            :default-expanded-keys="['9']"
-            @node-click="onZTreeClick"
-          ></el-tree>
       </div>
       <div class="info-window input-card" v-if="circle">
         <el-button size="small" round @click="circleEditor.open()" style="margin-bottom: 5px">开始编辑</el-button>
@@ -304,14 +304,14 @@ var myChart;
 export default {
   data() {
     return {
-      deptPeopleVisible:false,
-      deptPeopleType:0,
-      deptPeopleId:'',
-      ztreeNodes:[],
-      ztreeNodeAll:{},
-      deptPeopleValue:true,
+      deptPeopleVisible: false,
+      deptPeopleType: 0,
+      deptPeopleId: '',
+      ztreeNodes: [],
+      ztreeNodeAll: {},
+      deptPeopleValue: true,
       pageNum: 1, //当前页面
-      pageSize: 5, //每页显示条数
+      pageSize: 3, //每页显示条数
       totalSum: 0, //全部的数据条数
       tableData: [],
       marker: null,
@@ -366,9 +366,10 @@ export default {
       status: null,
       positionType: null,
       historyData: [],
-      operatelVisible: false,
       tableoperateData: [],
       operateDate: [],
+      deptPeopleName: '1',
+      historyName: '1',
     };
   },
   components: { MobileZoomDiv, MobileZoomDivR, MobileZoomDivTR, vdr },
@@ -385,40 +386,51 @@ export default {
     window.personnelclick = () => {
       this.personnelVisible = true;
     };
-   
+
   },
   destroyed() {
     // 销毁地图，并清空地图容器.该方法执行后，地图对象被注销，内存释放，地图容器被清空。
     this.map.destroy();
   },
   methods: {
-    getUserDeptTreeFun(){
+    handHistoryoperate(tab) {
+      if (tab.name == '1') {
+        this.detail()
+      }
+      else {
+        this.sysMenuRecordGetClick()
+      }
+    },
+    getUserDeptTreeFun() {
       this.$api.user
         .getUserDeptTree()
         .then(res => {
           if (res.code == 200) {
             this.ztreeNodes = res.data.deptList;
             this.ztreeNodeAll = res.data;
-            this.deptPeopleVisible=true;
+            this.deptPeopleVisible = true;
+            this.deptPeopleName = '1'
           }
         });
     },
-    deptPeopleFun(val){
-     if(val){
-      this.ztreeNodes = this.ztreeNodeAll.deptList;
-     }
-     else{
-      this.ztreeNodes = this.ztreeNodeAll.userList;
-     }
+    deptPeopleFun(tab) {
+      if (tab.name == '1') {
+        this.ztreeNodes = this.ztreeNodeAll.deptList;
+        this.deptPeopleType = 1
+      }
+      else {
+        this.ztreeNodes = this.ztreeNodeAll.userList;
+        this.deptPeopleType = 2
+      }
     },
     onZTreeClick: function (evt, treeId, treeNode) {
-      if(this.deptPeopleValue){
-        this.deptPeopleType=1
+      if (this.deptPeopleValue) {
+        this.deptPeopleType = 1
       }
-      else{
-        this.deptPeopleType=2
+      else {
+        this.deptPeopleType = 2
       }
-      this.deptPeopleId=evt.id
+      this.deptPeopleId = evt.id
       this.initMap();
     },
     operateDateFun(val) {
@@ -440,13 +452,14 @@ export default {
     },
     historicRecords(row) {
       this.rowId = row.userId
-      this.isCollapse = false
       this.infoWindowVisible = true
+      this.historyName='1'
       this.detail()
     },
     operatelRecords(row) {
       this.rowId = row.userId
-      this.operatelVisible = true
+      this.infoWindowVisible = true
+      this.historyName='2'
       this.sysMenuRecordGetClick()
     },
 
@@ -815,7 +828,7 @@ export default {
         this.initMap();
       }
       else {
-          this.queryAnalysis({ startTime: this.historyData[0], endTime: this.historyData[1] });
+        this.queryAnalysis({ startTime: this.historyData[0], endTime: this.historyData[1] });
       }
     },
     onLineChange(val) {
@@ -903,7 +916,7 @@ export default {
           mapStyle: "amap://styles/normal" //地图样式，彩色
         });
         _this.map.on("complete", () => {
-          _this.$api.user.queryPositionLoginRecord({ source: this.source,queryId: this.deptPeopleId,type: this.deptPeopleType, ...this.province }).then(res => {
+          _this.$api.user.queryPositionLoginRecord({ source: this.source, queryId: this.deptPeopleId, type: this.deptPeopleType, ...this.province }).then(res => {
             if (res.code == 200) {
               if (res.data && res.data.length > 0) {
                 //处理后台返回要用到的数据
@@ -1003,7 +1016,7 @@ export default {
     },
     markerClick(e,) {
       let _this = this
-      _this.personnelPageNum=1
+      _this.personnelPageNum = 1
       this.position = e.target._position
       // _this.morelFun()
       let data = {
@@ -1040,6 +1053,30 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.personnel-tree {
+  position: absolute;
+  background: #fff;
+  top: 70px;
+  left: 0;
+  padding: 15px 10px;
+  font-weight: 700;
+  color: #3355FF;
+  display: flex;
+  align-items: center;
+  box-shadow: 0px 5px 10px #ddd;
+  cursor: pointer;
+
+  i {
+    color: #fff;
+    background: #7189FE;
+    border-radius: 50%;
+    border: 1px solid #E6EBF3;
+    padding: 4px;
+    font-size: 10px;
+  }
+
+}
+
 .province-window {
   position: absolute;
   top: 20px;
@@ -1053,12 +1090,13 @@ export default {
 
 .source-window {
   position: absolute;
-  bottom: 20px;
-  left: 20px;
+  right: 20px;
+  top: 20px;
   z-index: 100;
   padding: 5px 10px;
   background: #fff;
   font-size: 14px;
+  display: flex;
 
   .el-switch {
     zoom: .8
@@ -1094,14 +1132,15 @@ export default {
 .info-window {
   position: absolute;
   top: 60px;
-  left: 20px;
+  left: 0;
   z-index: 100;
+}
+
+.info-box {
   background-color: white;
   padding: 10px;
-  width: 22vw;
   box-shadow: 0px 5px 10px #ddd;
-  height: 45vh;
-    overflow-y: auto;
+  width: 20vw
 }
 
 .infohis-window {
@@ -1154,6 +1193,37 @@ export default {
   }
 }
 
+.close-button {
+  color: #fff;
+  background: #7189FE;
+  border-radius: 50%;
+  border: 1px solid #E6EBF3;
+  padding: 4px;
+  font-size: 10px;
+  position: absolute;
+  right: -13px;
+  top: 20px;
+  cursor: pointer
+}
+.line-window {
+  position: absolute;
+  top: 20px;
+  right: 380px;
+  z-index: 100;
+  background: #fff;
+  font-size: 14px;
+  padding: 9px 10px;
+  i {
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    background: #979797;
+    border-radius: 50%;
+    margin-right: 10px;
+  }
+
+}
+
 .close {
   color: #333;
   font-size: 16px;
@@ -1282,5 +1352,4 @@ export default {
     // background: none;
     // border: 1px solid transparent;
   }
-}
-</style>
+}</style>

src/views/PeopleManage/UserMap.vue

@@ -18,8 +18,12 @@
           :value="option.code"></el-option>
       </el-select>
       <el-button size="small" type="primary" @click="onSearch">搜索</el-button>
-      <el-button size="small" type="primary" @click="getUserDeptTreeFun()">机构人员树</el-button>
     </div>
+    <div class="personnel-tree" v-show="!deptPeopleVisible" @click="getUserDeptTreeFun()">
+        <img src="../../assets/机构人员.png" />
+        <span style="margin: 0 10px 0 5px;">机构人员树</span>
+        <i class="el-icon-arrow-right"></i>
+      </div>
     <div class="line-window">
       <span><i style=" background: #54B569 ;"></i>在线</span>
       <span style="margin-left: 15px;"><i></i>离线</span>
@@ -50,8 +54,9 @@
      <!-- <MobileZoomDiv> -->
       <!-- 人员详情 -->
       <div v-if="personnelVisible">
-      <vdr title="人员详情" @visiblefun="personnelVisible = false" :width="900" :height="350">
-        <el-table :data="personnelData" border style="width: 100%; " :header-cell-style="{
+      <vdr title="人员详情" @visiblefun="personnelVisible = false" :width="1000" :height="300">
+        <el-table :data="personnelData" border style="width: 100%; max-height: 21vh;
+            overflow-y: auto; "  :header-cell-style="{
           background: '#F7F7F9',
           fontWeight: '700',
           color: '#606266',
@@ -70,13 +75,13 @@
           </el-table-column>
           <el-table-column prop="deptName" label="所属机构" width="220" >
           </el-table-column>
-          <el-table-column prop="leaderName" label="管理人" >
+          <el-table-column prop="leaderName" label="管理人" width="80">
           </el-table-column>
-          <el-table-column prop="address" label="地址" >
+          <el-table-column prop="address" label="地址" width="150">
           </el-table-column>
           <el-table-column prop="createTime" label="登录时间" >
           </el-table-column>
-          <el-table-column prop="source" label="分类" >
+          <el-table-column prop="source" label="分类"  >
             <template slot-scope="scope">
               {{ scope.row.source == '1' ? '渠道' : '代理' }}
             </template>
@@ -87,9 +92,9 @@
                 size="small">
                 历史记录
               </el-button>
-              <el-button  @click.native.prevent="operatelRecords(scope.row)" type="text"
+              <el-button style="color:#E96238 "   @click.native.prevent="operatelRecords(scope.row)" type="text"
                 size="small">
-                操作记录
+                操作统计
               </el-button>
             </template>
           </el-table-column>
@@ -108,16 +113,24 @@
     <!-- </MobileZoomDiv> -->
     <!-- <MobileZoomDivTR> -->
     <div v-if="infoWindowVisible">
-      <vdr title="历史记录" @visiblefun="infoWindowVisible = false"  :width="800" :height="420">
-        <el-table :data="tableData" border style="width: 98%; max-height: 45vh;
-          overflow-y: auto;" :cell-style="{ padding: '3px 8px' }" :header-cell-style="{
-            background: '#F2F7FC',
-            fontWeight: '700',
-            color: '#606266',
-          }">
-          <el-table-column prop="userId" label="工号" width="130">
+      <vdr @visiblefun="infoWindowVisible = false" :width="803" :height="430">
+          <el-tabs slot="title" style="width: 92%;" v-model="historyName" @tab-click="handHistoryoperate">
+            <el-tab-pane label="历史记录" name="1">
+            </el-tab-pane>
+            <el-tab-pane label="操作统计" name="2">
+            </el-tab-pane>
+          </el-tabs>
+          <div v-show="historyName == 1">
+            <el-table :data="tableData" border style="width: 100%; max-height: 35vh;
+            overflow-y: auto; " :cell-style="{ padding: '3px 8px' }" :header-cell-style="{
+              background: '#F2F7FC',
+              fontWeight: '700',
+              color: '#606266',
+
+            }">
+            <el-table-column prop="userId" label="工号" width="110">
           </el-table-column>
-          <el-table-column prop="userName" label="姓名" width="100">
+          <el-table-column prop="userName" label="姓名" width="110">
           </el-table-column>
           <el-table-column prop="deptName" label="所属机构"  >
           </el-table-column>
@@ -125,14 +138,77 @@
           </el-table-column>
           <el-table-column prop="createTime" label="登录时间" width="120">
           </el-table-column>
+            </el-table>
+            <div class="bottomFixed">
+              <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
+                :page-sizes="[3,5, 10, 20, 30, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next"
+                :total="totalSum">
+              </el-pagination>
+            </div>
+          </div>
+          <div v-show="historyName == 2">
+              <div style="margin-bottom: 10px;">
+                <span style="color: #262626;font-weight: 700;font-size: 14px;">时间筛选 </span>
+                <el-date-picker v-model="operateDate" type="datetimerange" size="small" @change="operateDateFun"
+                  :default-time="['00:00:01', '23:59:59']" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至"
+                  start-placeholder="开始日期" end-placeholder="结束日期">
+                </el-date-picker>
+              </div>
+              <el-table :data="tableoperateData" border style="width: 100%;" :cell-style="{ padding: '3px 8px' }" :header-cell-style="{
+                background: '#F2F7FC',
+                fontWeight: '700',
+                color: '#606266',
+
+              }">
+          <el-table-column prop="userId" label="工号">
+          </el-table-column>
+          <el-table-column prop="userName" label="姓名">
+          </el-table-column>
+          <el-table-column prop="deptName" label="所属机构"  width="220" >
+          </el-table-column>
+          <el-table-column prop="carNumber" label="车险录单">
+            <template slot-scope="scope">
+              <el-tooltip v-if="scope.row.carNumber" class="item" effect="dark" :content="scope.row.carNumberTime" placement="bottom">
+                  <span >{{ scope.row.carNumber }}</span>
+                </el-tooltip>
+              <span v-else>{{ scope.row.carNumber }}</span>
+              </template > 
+          </el-table-column>
+          <el-table-column prop="memberNumber" label="会员分享">
+            <template  slot-scope="scope">
+              <el-tooltip v-if="scope.row.memberNumber" class="item" effect="dark" :content="scope.row.memberNumberTime" placement="bottom">
+                  <span >{{ scope.row.memberNumber }}</span>
+                </el-tooltip>
+              <span v-else>{{ scope.row.memberNumber }}</span>
+              </template > 
+          </el-table-column>
+          <el-table-column prop="managementNumber" label="会员管理">
+            <template slot-scope="scope">
+              <el-tooltip v-if="scope.row.managementNumber" class="item" effect="dark" :content="scope.row.managementNumberTime" placement="bottom">
+                  <span >{{ scope.row.managementNumber }}</span>
+                </el-tooltip>
+              <span v-else>{{ scope.row.managementNumber }}</span>
+              </template > 
+          </el-table-column>
+          <el-table-column prop="walletNumber" label="钱包">
+            <template slot-scope="scope">
+              <el-tooltip v-if="scope.row.walletNumber" class="item" effect="dark" :content="scope.row.walletNumberTime" placement="bottom">
+                  <span >{{ scope.row.walletNumber }}</span>
+                </el-tooltip>
+              <span v-else>{{ scope.row.walletNumber }}</span>
+              </template > 
+          </el-table-column>
+          <el-table-column prop="posterNumber" label="海报管理">
+            <template slot-scope="scope">
+              <el-tooltip v-if="scope.row.posterNumber" class="item" effect="dark" :content="scope.row.posterNumberTime" placement="bottom">
+                  <span >{{ scope.row.posterNumber }}</span>
+                </el-tooltip>
+                <span v-else>{{ scope.row.posterNumber }}</span>
+              </template > 
+          </el-table-column>
         </el-table>
-        <div class="bottomFixed">
-          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
-            :page-sizes="[3,5, 10, 20, 30, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next"
-            :total="totalSum">
-          </el-pagination>
-        </div>
-      </vdr>
+            </div>
+        </vdr>
     </div>
     <!-- </MobileZoomDivTR> -->
     <MobileZoomDivR>
@@ -207,94 +283,26 @@
       </div>
     </MobileZoomDivR>
 
-   
-    <div v-if="operatelVisible">
-      <vdr title="操作记录" @visiblefun="operatelVisible = false" :width="820" :height="300">
-        <div style="margin-bottom: 10px;">
-          <span style="color: #262626;font-weight: 700;font-size: 14px;">时间筛选 </span>
-          <el-date-picker v-model="operateDate" type="datetimerange" size="small" @change="operateDateFun"
-            :default-time="['00:00:01', '23:59:59']" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至"
-            start-placeholder="开始日期" end-placeholder="结束日期">
-          </el-date-picker>
-        </div>
-        <el-table :data="tableoperateData" border style="width: 98%; max-height: 45vh;
-              overflow-y: auto; " :cell-style="{ padding: '3px 8px' }" :header-cell-style="{
-                background: '#F2F7FC',
-                fontWeight: '700',
-                color: '#606266',
-
-              }">
-          <el-table-column prop="userId" label="工号">
-          </el-table-column>
-          <el-table-column prop="userName" label="姓名">
-          </el-table-column>
-          <el-table-column prop="deptName" label="所属机构"  width="220" >
-          </el-table-column>
-          <el-table-column prop="carNumber" label="车险录单">
-            <template slot-scope="scope">
-              <el-tooltip v-if="scope.row.carNumber" class="item" effect="dark" :content="scope.row.carNumberTime" placement="bottom">
-                  <span >{{ scope.row.carNumber }}</span>
-                </el-tooltip>
-              <span v-else>{{ scope.row.carNumber }}</span>
-              </template > 
-          </el-table-column>
-          <el-table-column prop="memberNumber" label="会员分享">
-            <template  slot-scope="scope">
-              <el-tooltip v-if="scope.row.memberNumber" class="item" effect="dark" :content="scope.row.memberNumberTime" placement="bottom">
-                  <span >{{ scope.row.memberNumber }}</span>
-                </el-tooltip>
-              <span v-else>{{ scope.row.memberNumber }}</span>
-              </template > 
-          </el-table-column>
-          <el-table-column prop="managementNumber" label="会员管理">
-            <template slot-scope="scope">
-              <el-tooltip v-if="scope.row.managementNumber" class="item" effect="dark" :content="scope.row.managementNumberTime" placement="bottom">
-                  <span >{{ scope.row.managementNumber }}</span>
-                </el-tooltip>
-              <span v-else>{{ scope.row.managementNumber }}</span>
-              </template > 
-          </el-table-column>
-          <el-table-column prop="walletNumber" label="钱包">
-            <template slot-scope="scope">
-              <el-tooltip v-if="scope.row.walletNumber" class="item" effect="dark" :content="scope.row.walletNumberTime" placement="bottom">
-                  <span >{{ scope.row.walletNumber }}</span>
-                </el-tooltip>
-              <span v-else>{{ scope.row.walletNumber }}</span>
-              </template > 
-          </el-table-column>
-          <el-table-column prop="posterNumber" label="海报管理">
-            <template slot-scope="scope">
-              <el-tooltip v-if="scope.row.posterNumber" class="item" effect="dark" :content="scope.row.posterNumberTime" placement="bottom">
-                  <span >{{ scope.row.posterNumber }}</span>
-                </el-tooltip>
-                <span v-else>{{ scope.row.posterNumber }}</span>
-              </template > 
-          </el-table-column>
-        </el-table>
-      </vdr>
-
-    </div>
-    <div class="info-window" v-if="deptPeopleVisible">
-        <div class="close flex j-s" style="padding:15px 0" >
-          <el-switch
-          v-model="deptPeopleValue"
-          @change="deptPeopleFun"
-          size="small"
-          active-text="机构树"
-          :disabled="ztreeNodeAll.type==1"
-          inactive-text="人员树">
-        </el-switch>
-        <span class="el-icon-close" style="color: #c3c3c3;cursor: pointer" @click="deptPeopleVisible = false"> </span>
+    <div class="info-window"  v-if="deptPeopleVisible">
+      <div class="info-box" >
+        <i class="el-icon-arrow-left close-button" @click="deptPeopleVisible = false"></i>
+        <el-tabs style="width: 100%;" v-model="deptPeopleName" @tab-click="deptPeopleFun" >
+              <el-tab-pane label="机构树" name="1"></el-tab-pane>
+              <el-tab-pane label="人员树" name="2"  :disabled="ztreeNodeAll.type==1"></el-tab-pane>
+            </el-tabs>
+        <div style=" height: 70vh;overflow-y: auto;">
+          <el-tree
+              :data="ztreeNodes"
+              :props="{ children: 'children', label: 'name' }"
+              node-key="id"
+              :default-expanded-keys="['9']"
+              @node-click="onZTreeClick"
+            ></el-tree>
         </div>
-        <el-tree
-            :data="ztreeNodes"
-            :props="{ children: 'children', label: 'name' }"
-            node-key="id"
-            :default-expanded-keys="['9']"
-            @node-click="onZTreeClick"
-          ></el-tree>
       </div>
+    </div>
   </div>
+
 </template>
 
 <script>
@@ -374,13 +382,11 @@ export default {
       status: null,
       positionType: null,
       historyData: [],
-      operatelVisible: false,
       tableoperateData: [],
       operateDate: [],
-      operateWidth: 600,
-      operateHight: 285,
-      operateX: 0,
-      operateY: 0,
+      deptPeopleName:'1',
+      historyName: '1',
+
     };
   },
   components: { MobileZoomDiv, MobileZoomDivR, MobileZoomDivTR, vdr },
@@ -401,6 +407,14 @@ export default {
     this.map.destroy();
   },
   methods: {
+    handHistoryoperate(tab) {
+      if (tab.name == '1') {
+        this.detail()
+      }
+      else {
+        this.sysMenuRecordGetClick()
+      }
+    },
     getUserDeptTreeFun(){
       this.$api.user
         .getUserDeptTree()
@@ -409,15 +423,18 @@ export default {
             this.ztreeNodes = res.data.deptList;
             this.ztreeNodeAll = res.data;
             this.deptPeopleVisible=true;
+            this.deptPeopleName='1'
           }
         });
     },
-    deptPeopleFun(val){
-     if(val){
+    deptPeopleFun(tab){
+      if (tab.name == '1') {
       this.ztreeNodes = this.ztreeNodeAll.deptList;
+      this.deptPeopleType=1
      }
      else{
       this.ztreeNodes = this.ztreeNodeAll.userList;
+      this.deptPeopleType=2
      }
     },
     onZTreeClick: function (evt, treeId, treeNode) {
@@ -432,15 +449,10 @@ export default {
     },
     operatelRecords(row) {
       this.rowId = this.positionType == 1 ? row.id : row.userId
-      this.operatelVisible = true
+      this.infoWindowVisible = true
+      this.historyName='2'
       this.sysMenuRecordGetClick()
     },
-    operateWidthFun() {
-      this.operateWidth = window.innerWidth - 240
-      this.operateHight = window.innerHeight - 120
-      this.operateX = 0
-      this.operateY = 0
-    },
     operateDateFun(val) {
       this.operateDate = val
       this.sysMenuRecordGetClick({ beginTime: val[0], endTime: val[1] });
@@ -460,8 +472,8 @@ export default {
     },
     historicRecords(row) {
       this.rowId = this.positionType == 1 ? row.id : row.userId
-      this.isCollapse = false
       this.infoWindowVisible = true
+      this.historyName='1'
       this.detail()
     },
     handHistory(tab, event) {
@@ -976,7 +988,28 @@ export default {
 //     margin-right: 5px;
 //   }
 // }
-
+.personnel-tree{
+  position: absolute;
+  background: #fff;
+  top: 70px;
+  left:0;
+  padding: 15px 10px;
+  font-weight: 700;
+  color: #3355FF;
+  display: flex;
+    align-items: center;
+    box-shadow: 0px 5px 10px #ddd;
+    cursor: pointer;
+  i{
+      color: #fff;
+    background: #7189FE;
+    border-radius: 50%;
+    border: 1px solid #E6EBF3;
+    padding: 4px;
+    font-size: 10px;
+  }
+  
+}
 .province-window {
   position: absolute;
   top: 20px;
@@ -987,16 +1020,26 @@ export default {
     width: 100px;
   }
 }
-
+.close-button {
+  color: #fff;
+  background: #7189FE;
+  border-radius: 50%;
+  border: 1px solid #E6EBF3;
+  padding: 4px;
+  font-size: 10px;
+  position: absolute;
+  right: -13px;
+  top: 20px;
+  cursor: pointer
+}
 .line-window {
   position: absolute;
-  bottom: 130px;
-  left: 20px;
+  top: 20px;
+  right: 380px;
   z-index: 100;
-  padding: 5px 10px;
   background: #fff;
   font-size: 14px;
-
+  padding: 9px 10px;
   i {
     display: inline-block;
     width: 6px;
@@ -1010,12 +1053,13 @@ export default {
 
 .source-window {
   position: absolute;
-  bottom: 20px;
-  left: 20px;
+  right: 20px;
+  top: 20px;
   z-index: 100;
   padding: 5px 10px;
   background: #fff;
   font-size: 14px;
+  display: flex;
 
   .el-switch {
     zoom: .8
@@ -1051,14 +1095,14 @@ export default {
 .info-window {
   position: absolute;
   top: 60px;
-  left: 20px;
+  left: 0;
   z-index: 100;
+}
+.info-box{
   background-color: white;
   padding: 10px;
-  width: 22vw;
   box-shadow: 0px 5px 10px #ddd;
-  height: 45vh;
-    overflow-y: auto;
+  width:20vw
 }
 
 .infohis-window {

src/views/PeopleManage/vdr.vue

@@ -3,9 +3,10 @@
     @resizing="onResize"  :x="operateX" :y="operateY"
     @dragging="onDrag" style="z-index:999" class-name="my-class" class="infohis-window"
         >
-        <div class="close flex j-s" style="padding:15px 0" v-if="title">
-            <span>{{ title }}</span>
-            <div>
+        <div class="close flex j-s"  >
+            <span v-if="title" style="padding:15px 0">{{ title }}</span>
+             <slot name="title" v-else></slot>
+            <div style="padding:10px 0">
                 <span v-if="isOperate==false" style="color: #c3c3c3;font-size:18px;cursor: pointer"
                     @click="operateWidthFun()" class="el-icon-rank"> </span>
                 <span v-else style="color: #c3c3c3;font-size:18px;cursor: pointer"