热力图页面框变成可放大可移动的

config/dev.env.js

@@ -5,7 +5,7 @@ const prodEnv = require('./prod.env')
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
   ENV_CONFIG: '"dev"',
-  // BASE_URL: '"https://test.baoxianzhanggui.com/web-api"',//测试服务器
+  BASE_URL: '"https://test.baoxianzhanggui.com/web-api"',//测试服务器
   // BASE_URL:'"https://sxzgkj.baoxianzhanggui.com/web-api"',//正式服务器
   // BASE_URL:'"https://sxzgkj.baoxianzhanggui.com/web-api"'//正式服务器
   // BASE_URL: '"http://192.168.0.115:8080/"', //凯森
@@ -17,7 +17,7 @@ module.exports = merge(prodEnv, {
   // BASE_URL: '"http://192.168.1.101:8080/"',
   // BASE_URL: '"http://192.168.0.250:8080/"',//
   // BASE_URL: '"http:///192.168.0.103:8080/"',//霍续亮
-  BASE_URL: '"http://192.168.0.52:8080/"',//贺礼霄
+  // BASE_URL: '"http://192.168.0.52:8080/"',//贺礼霄
   // BASE_URL: '"http:///192.168.0.55:8080/"',// 董鑫
   CONSOLE_BASE_URL: '"http://localhost:8080/"', //控制台测试服务器
   // CONSOLE_BASE_URL: '"https://test.baoxianzhanggui.com/console-api"' //控制台正式服务器

config/test.env.js

@@ -6,8 +6,8 @@ module.exports = merge(prodEnv, {
   NODE_ENV: '"testing"',
   ENV_CONFIG: '"test"',
   // BASE_URL: '"http://proxy.517game.site:6100"',//测试服务器
-  // BASE_URL: '"https://test.baoxianzhanggui.com/web-api"',//测试服务器
-  BASE_URL: '"https://pre.baoxianzhanggui.com/test/"',
+  BASE_URL: '"https://test.baoxianzhanggui.com/web-api"',//测试服务器
+  // BASE_URL: '"https://pre.baoxianzhanggui.com/test/"',
   APP_BASE_URL: '"https://test.baoxianzhanggui.com/web-api"',    // app打包上传地址
   CONSOLE_BASE_URL: '"https://test.baoxianzhanggui.com/console-api"', //控制台测试服务器
   SOCKET_Url: '"wss://test.baoxianzhanggui.com/web-api/"',

src/views/PeopleManage/MobileZoomDiv.vue

@@ -0,0 +1,91 @@
+<template>
+    <div class="resizable-draggable" :style="{ transform: `scale(${scale})`, left: `${x}px`, top: `${y}px` }"
+        @mousedown="startDrag" @wheel="zoom">
+        <slot></slot>
+    </div>
+</template>  
+  
+<script>
+export default {
+    name: 'ResizableDraggable',
+    data() {
+        return {
+            dragging: false,
+            resizing: false,
+            startX: 0,
+            startY: 0,
+            scale: 1,
+            x: 0,
+            y: 0
+        };
+    },
+    methods: {
+        zoom(event) {
+                event.preventDefault();
+                const delta = event.deltaY < 0 ? 1.1 : 0.9;
+                this.scale *= delta;
+                },
+
+        startDrag(event) {
+            this.dragging = true;
+            this.startX = event.clientX - this.x;
+            this.startY = event.clientY - this.y;
+            console.log(this.startX ,this.startY,11111111111);
+            document.addEventListener('mousemove', this.drag);
+            document.addEventListener('mouseup', this.stopDrag);
+        },
+        drag(event) {
+            if (!this.dragging) return;
+            this.x = event.clientX - this.startX;
+            this.y = event.clientY - this.startY;
+            console.log(this.x ,this.y,2222222222);
+
+        },
+        stopDrag() {
+            if (!this.dragging) return;
+            this.dragging = false;
+            document.removeEventListener('mousemove', this.drag);
+            document.removeEventListener('mouseup', this.stopDrag);
+        },
+        startResize(type) {
+            this.resizing = true;
+            const num = type === 'narrow' ? -0.2 : 0.2;
+            this.scale += num;
+            this.scale = Math.max(1, Math.min(this.scale, 2)); // 限制缩放范围
+        },
+        reset() {
+            this.dragging = false;
+            this.resizing = false;
+            this.startX = 0;
+            this.startY = 0;
+            this.scale = 1;
+            this.x = 0;
+            this.y = 0;
+        }
+        // startResize(event) {
+        //   this.resizing = true;
+        //   const rect = this.$el.getBoundingClientRect();
+        //   const scaleFactor = event.clientX - rect.left > rect.width / 2 ? 1.1 : 0.9;
+        //   this.scale *= scaleFactor;
+        //   this.scale = Math.max(0.1, Math.min(this.scale, 2)); // 限制缩放范围
+        //   event.preventDefault();
+        // }
+    }
+};
+</script>  
+    
+<style scoped>
+.resizable-draggable {
+    /* width: 100%;
+    height: 100%; */
+    width: 500px;
+    height: auto;
+    position: absolute;
+    transition: transform 0.2s ease-in-out;
+    cursor: move;
+    /* 其他样式 */
+}
+
+
+</style>
+  

src/views/PeopleManage/MobileZoomDivR.vue

@@ -0,0 +1,88 @@
+<template>
+    <div class="resizable-draggable" :style="{ transform: `scale(${scale})`, right: `${x}px`, bottom: `${y}px` }"
+        @mousedown="startDrag" @wheel="zoom">
+        <slot></slot>
+    </div>
+</template>  
+  
+<script>
+export default {
+    name: 'ResizableDraggable',
+    data() {
+        return {
+            dragging: false,
+            resizing: false,
+            startX: 0,
+            startY: 0,
+            scale: 1,
+            x: 0,
+            y: 0
+        };
+    },
+    methods: {
+        zoom(event) {
+            event.preventDefault();
+            const delta = event.deltaY < 0 ? 1.1 : 0.9;
+            this.scale *= delta;
+        },
+
+        startDrag(event) {
+            this.dragging = true;
+            this.startX = event.clientX + this.x;
+            this.startY = event.clientY + this.y;
+            document.addEventListener('mousemove', this.drag);
+            document.addEventListener('mouseup', this.stopDrag);
+        },
+        drag(event) {
+            if (!this.dragging) return;
+            this.x = this.startX - event.clientX;
+            this.y = this.startY - event.clientY;
+
+        },
+        stopDrag() {
+            if (!this.dragging) return;
+            this.dragging = false;
+            document.removeEventListener('mousemove', this.drag);
+            document.removeEventListener('mouseup', this.stopDrag);
+
+        },
+        startResize(type) {
+            this.resizing = true;
+            const num = type === 'narrow' ? -0.2 : 0.2;
+            this.scale += num;
+            this.scale = Math.max(1, Math.min(this.scale, 2)); // 限制缩放范围
+        },
+        reset() {
+            this.dragging = false;
+            this.resizing = false;
+            this.startX = 0;
+            this.startY = 0;
+            this.scale = 1;
+            this.x = 0;
+            this.y = 0;
+        }
+        // startResize(event) {
+        //   this.resizing = true;
+        //   const rect = this.$el.getBoundingClientRect();
+        //   const scaleFactor = event.clientX - rect.left > rect.width / 2 ? 1.1 : 0.9;
+        //   this.scale *= scaleFactor;
+        //   this.scale = Math.max(0.1, Math.min(this.scale, 2)); // 限制缩放范围
+        //   event.preventDefault();
+        // }
+    }
+};
+</script>  
+    
+<style scoped>
+.resizable-draggable {
+    /* width: 100%;
+    height: 100%; */
+    width: 500px;
+    height: auto;
+    position: absolute;
+    transition: transform 0.2s ease-in-out;
+    cursor: move;
+    /* 其他样式 */
+}
+</style>
+  

src/views/PeopleManage/MobileZoomDivTR.vue

@@ -0,0 +1,88 @@
+<template>
+    <div class="resizable-draggable" :style="{ transform: `scale(${scale})`, right: `${x}px`, top: `${y}px` }"
+        @mousedown="startDrag" @wheel="zoom">
+        <slot></slot>
+    </div>
+</template>  
+  
+<script>
+export default {
+    name: 'ResizableDraggable',
+    data() {
+        return {
+            dragging: false,
+            resizing: false,
+            startX: 0,
+            startY: 0,
+            scale: 1,
+            x: 0,
+            y: 0
+        };
+    },
+    methods: {
+        zoom(event) {
+                event.preventDefault();
+                const delta = event.deltaY < 0 ? 1.1 : 0.9;
+                this.scale *= delta;
+                },
+
+        startDrag(event) {
+            this.dragging = true;
+            this.startX = event.clientX +this.x;
+            this.startY = event.clientY - this.y;
+            document.addEventListener('mousemove', this.drag);
+            document.addEventListener('mouseup', this.stopDrag);
+        },
+        drag(event) {
+            if (!this.dragging) return;
+            this.x = this.startX-event.clientX ;
+            this.y = event.clientY - this.startY;
+        },
+        stopDrag() {
+            if (!this.dragging) return;
+            this.dragging = false;
+            document.removeEventListener('mousemove', this.drag);
+            document.removeEventListener('mouseup', this.stopDrag);
+        },
+        startResize(type) {
+            this.resizing = true;
+            const num = type === 'narrow' ? -0.2 : 0.2;
+            this.scale += num;
+            this.scale = Math.max(1, Math.min(this.scale, 2)); // 限制缩放范围
+        },
+        reset() {
+            this.dragging = false;
+            this.resizing = false;
+            this.startX = 0;
+            this.startY = 0;
+            this.scale = 1;
+            this.x = 0;
+            this.y = 0;
+        }
+        // startResize(event) {
+        //   this.resizing = true;
+        //   const rect = this.$el.getBoundingClientRect();
+        //   const scaleFactor = event.clientX - rect.left > rect.width / 2 ? 1.1 : 0.9;
+        //   this.scale *= scaleFactor;
+        //   this.scale = Math.max(0.1, Math.min(this.scale, 2)); // 限制缩放范围
+        //   event.preventDefault();
+        // }
+    }
+};
+</script>  
+    
+<style scoped>
+.resizable-draggable {
+    /* width: 100%;
+    height: 100%; */
+    width: 500px;
+    height: auto;
+    position: absolute;
+    transition: transform 0.2s ease-in-out;
+    cursor: move;
+    /* 其他样式 */
+}
+
+
+</style>
+  

src/views/PeopleManage/PartnerExtraction.vue

@@ -93,11 +93,11 @@ export default {
           //   type: "text",
           // },
          
-          { prop: "deptId", label: "机构id", type: "text" },
+          { prop: "deptId", label: "机构编码", type: "text" },
           { prop: "deptName", label: "机构名称", type: "text" },
            { prop: "sumpremium", label: "总保费", type: "text" },
-          { prop: "proportional", label: "抽成比例", type: "text" },
-          { prop: "extractFee", label: "总保费抽成费用", type: "text" },
+          // { prop: "proportional", label: "抽成比例", type: "text" },
+          // { prop: "extractFee", label: "总保费抽成费用", type: "text" },
           { prop: "startTime", label: "核算开始时间", type: "text" },
         ],
         optBtns: [

src/views/PeopleManage/PcLoginRecord.vue

@@ -3,199 +3,211 @@
     <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"
-        @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" @clear="cityClear">
-        <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>
-      <el-button size="small" type="primary" @click="onSearch">搜索</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="source-window">
-      <div>
-        <span>全部</span>
-        <el-switch v-model="sourceqb" @change="sourceqbChange">
-        </el-switch>
+    <div class="dragContainerEl">
+      <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" @clear="cityClear">
+          <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>
+        <el-button size="small" type="primary" @click="onSearch">搜索</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>
-        <span>代理</span>
-        <el-switch v-model="sourcedl" @change="sourcedlChange">
-        </el-switch>
-        <!-- <span style="margin-left: 15px;">在线</span>
+      <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>
+          <!-- <span style="margin-left: 15px;">在线</span>
         <el-switch v-model="lineZx" @change="onLineChange">
         </el-switch> -->
-      </div>
-      <div>
-        <span>渠道</span>
-        <el-switch v-model="sourceqd" @change="sourceqdChange">
-        </el-switch>
-        <!-- <span style="margin-left: 15px;">离线</span>
+        </div>
+        <div>
+          <span>渠道</span>
+          <el-switch v-model="sourceqd" @change="sourceqdChange">
+          </el-switch>
+          <!-- <span style="margin-left: 15px;">离线</span>
         <el-switch v-model="lineLx" @change="offlineChange">
         </el-switch> -->
-      </div>
-    </div>
-    <div v-if="infoWindowVisible" class="infohis-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: 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="150">
-        </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="登录时间">
-        </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>
-    </div>
-    <div class="personnel-window ">
-      <p class="close flex j-s ">
-        <!-- <span>人员分布</span> -->
-        <el-tabs style="position: relative;width: 100%;" v-model="activeName" @tab-click="handHistory">
-          <el-tab-pane label="人员分布" name="1"></el-tab-pane>
-          <el-tab-pane label="历史在线人数" name="2"></el-tab-pane>
-        </el-tabs>
-        <span style="color: #3865E9 ; cursor: pointer; font-size: 14px;position: absolute;line-height: 40px;
-    right: 30px;" @click="isCollapse = !isCollapse;if(isCollapse)infoWindowVisible=false">{{
-      isCollapse ? '收起' : '展开' }} </span>
-      </p>
-      <div v-show="activeName == 1">
-        <div class="flex j-s">
-          <div class="info-title"><i></i>人员数量概览</div>
-          <div class="info-online"><i></i>在线人数：{{ onlineData }}</div>
-        </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 v-show="isCollapse" class="info-title"><i></i>区域人员概览</div>
-        <el-table v-show="isCollapse" :data="overviewData" border
-          style="width: 100%; max-height: 50vh; overflow: auto;margin:15px 0" :header-cell-style="{
-            background: '#F7F7F9',
-            fontWeight: '700',
-            color: '#000',
-          }">
-          <el-table-column type="index" align="center" width="50" label="序号">
-            <template slot-scope="scope">
-              <img v-if="scope.$index == 0" src="../../assets/序号1.png" />
-              <img v-else-if="scope.$index == 1" src="../../assets/序号2.png" />
-              <img v-else-if="scope.$index == 2" src="../../assets/序号3.png" />
-              <span v-else style="text-decoration-line: underline;">{{ scope.$index + 1 }}</span>
-            </template>
+      </div>
+      <MobileZoomDivTR>
+      <div v-if="infoWindowVisible"  class="infohis-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: 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="150">
           </el-table-column>
-          <el-table-column prop="districtName" align="center" label="区域">
+          <el-table-column prop="userName" label="姓名" width="80">
           </el-table-column>
-          <el-table-column prop="number" align="center" label="人数">
+          <el-table-column prop="address" label="地址">
+          </el-table-column>
+          <el-table-column prop="operationTime" label="登录时间">
           </el-table-column>
-          <div slot="empty" class="empty">
-            <img src="../../assets/暂无数据.png" />
-            <div class="txt">暂无数据哦</div>
-          </div>
         </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>
       </div>
-      <div v-show="activeName == 2">
-        <div style="margin-bottom: 10px;">
-          <span style="color: #262626;font-weight: 700;font-size: 14px;">时间筛选 </span>
-          <el-date-picker v-model="historyDate" type="daterange" size="small" @change="historyDateFun"
-            value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
-          </el-date-picker>
-          <!-- <el-date-picker size="small" @change="historyDateFun"  v-model="historyDate" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日"
+    </MobileZoomDivTR>
+      <MobileZoomDivR>
+        <div class="personnel-window ">
+          <p class="close flex j-s ">
+            <!-- <span>人员分布</span> -->
+            <el-tabs style="position: relative;width: 100%;" v-model="activeName" @tab-click="handHistory">
+              <el-tab-pane label="人员分布" name="1"></el-tab-pane>
+              <el-tab-pane label="历史在线人数" name="2"></el-tab-pane>
+            </el-tabs>
+            <span style="color: #3865E9 ; cursor: pointer; font-size: 14px;position: absolute;line-height: 40px;
+    right: 30px;" @click="isCollapse = !isCollapse; if (isCollapse) infoWindowVisible = false">{{
+      isCollapse ? '收起' : '展开' }} </span>
+          </p>
+          <div v-show="activeName == 1">
+            <div class="flex j-s">
+              <div class="info-title"><i></i>人员数量概览</div>
+              <div class="info-online"><i></i>在线人数：{{ onlineData }}</div>
+            </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 v-show="isCollapse" class="info-title"><i></i>区域人员概览</div>
+            <el-table v-show="isCollapse" :data="overviewData" border
+              style="width: 100%; max-height: 50vh; overflow: auto;margin:15px 0" :header-cell-style="{
+                background: '#F7F7F9',
+                fontWeight: '700',
+                color: '#000',
+              }">
+              <el-table-column type="index" align="center" width="50" label="序号">
+                <template slot-scope="scope">
+                  <img v-if="scope.$index == 0" src="../../assets/序号1.png" />
+                  <img v-else-if="scope.$index == 1" src="../../assets/序号2.png" />
+                  <img v-else-if="scope.$index == 2" src="../../assets/序号3.png" />
+                  <span v-else style="text-decoration-line: underline;">{{ scope.$index + 1 }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="districtName" align="center" label="区域">
+              </el-table-column>
+              <el-table-column prop="number" align="center" label="人数">
+              </el-table-column>
+              <div slot="empty" class="empty">
+                <img src="../../assets/暂无数据.png" />
+                <div class="txt">暂无数据哦</div>
+              </div>
+            </el-table>
+          </div>
+          <div v-show="activeName == 2">
+            <div style="margin-bottom: 10px;">
+              <span style="color: #262626;font-weight: 700;font-size: 14px;">时间筛选 </span>
+              <el-date-picker v-model="historyDate" type="daterange" size="small" @change="historyDateFun"
+                value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
+              </el-date-picker>
+              <!-- <el-date-picker size="small" @change="historyDateFun"  v-model="historyDate" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日"
             value-format="yyyy-MM-dd"> 
           </el-date-picker>-->
-        </div>
-        <div class="flex j-s">
-          <div class="info-title"><i></i>历史在线人数统计</div>
-          <div class="info-online"><i></i>使用人数：{{ onlineHisData }}</div>
-        </div>
-        <div id="echarts_box" v-show="isCollapse" style="width: 460px;height:300px;"></div>
+            </div>
+            <div class="flex j-s">
+              <div class="info-title"><i></i>历史在线人数统计</div>
+              <div class="info-online"><i></i>使用人数：{{ onlineHisData }}</div>
+            </div>
+            <div id="echarts_box" v-show="isCollapse" style="width: 460px;height:300px;"></div>
 
-      </div>
+          </div>
+        </div>
 
+      </MobileZoomDivR>
 
-    </div>
-    <div v-if="personnelVisible" class="info-window">
-      <p class="close flex j-s">
-        <span>人员详情</span>
-        <span style="color: #c3c3c3;font-size:18px;cursor: pointer" @click="personnelVisible = false"> ×</span>
-      </p>
-      <el-table :data="personnelData" border style="width: 100%; " :header-cell-style="{
-        background: '#F7F7F9',
-        fontWeight: '700',
-        color: '#606266',
-      }">
-        <el-table-column type="index" align="center" width="50" label="序号">
-          <template slot-scope="scope">
-            <img v-if="scope.$index == 0" src="../../assets/序号1.png" />
-            <img v-else-if="scope.$index == 1" src="../../assets/序号2.png" />
-            <img v-else-if="scope.$index == 2" src="../../assets/序号3.png" />
-            <span v-else style="text-decoration-line: underline;">{{ scope.$index + 1 }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column prop="userName" label="姓名" width="100">
-        </el-table-column>
-        <el-table-column prop="userId" label="工号">
-        </el-table-column>
-        <el-table-column prop="address" label="地址">
-        </el-table-column>
-        <el-table-column prop="operationTime" label="登录时间">
-        </el-table-column>
-        <el-table-column prop="source" label="分类">
-          <template slot-scope="scope">
-            {{ scope.row.source == '1' ? '渠道' : '代理' }}
-          </template>
-        </el-table-column>
-        <el-table-column label="操作">
-          <template slot-scope="scope">
-            <el-button style="color:#3865E9 " @click.native.prevent="historicRecords(scope.row)" type="text" size="small">
-              历史记录
-            </el-button>
-          </template>
-        </el-table-column>
-        <div slot="empty" class="empty">
-          <img src="../../assets/暂无数据.png" />
-          <div class="txt">暂无数据哦</div>
+      <MobileZoomDiv>
+        <div v-if="personnelVisible" class="info-window">
+          <p class="close flex j-s">
+            <span>人员详情</span>
+            <span style="color: #c3c3c3;font-size:18px;cursor: pointer" @click="personnelVisible = false"> ×</span>
+          </p>
+          <el-table :data="personnelData" border style="width: 100%; " :header-cell-style="{
+            background: '#F7F7F9',
+            fontWeight: '700',
+            color: '#606266',
+          }">
+            <el-table-column type="index" align="center" width="50" label="序号">
+              <template slot-scope="scope">
+                <img v-if="scope.$index == 0" src="../../assets/序号1.png" />
+                <img v-else-if="scope.$index == 1" src="../../assets/序号2.png" />
+                <img v-else-if="scope.$index == 2" src="../../assets/序号3.png" />
+                <span v-else style="text-decoration-line: underline;">{{ scope.$index + 1 }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="userName" label="姓名" width="100">
+            </el-table-column>
+            <el-table-column prop="userId" label="工号">
+            </el-table-column>
+            <el-table-column prop="address" label="地址">
+            </el-table-column>
+            <el-table-column prop="operationTime" label="登录时间">
+            </el-table-column>
+            <el-table-column prop="source" label="分类">
+              <template slot-scope="scope">
+                {{ scope.row.source == '1' ? '渠道' : '代理' }}
+              </template>
+            </el-table-column>
+            <el-table-column label="操作">
+              <template slot-scope="scope">
+                <el-button style="color:#3865E9 " @click.native.prevent="historicRecords(scope.row)" type="text"
+                  size="small">
+                  历史记录
+                </el-button>
+              </template>
+            </el-table-column>
+            <div slot="empty" class="empty">
+              <img src="../../assets/暂无数据.png" />
+              <div class="txt">暂无数据哦</div>
+            </div>
+          </el-table>
+
+          <div class="bottomFixed">
+            <el-pagination @current-change="handlePersonnelChange" :current-page="personnelPageNum" :page-size="5"
+              layout="total, prev, pager, next" :total="personnelTotalSize">
+            </el-pagination>
+          </div>
         </div>
-      </el-table>
-      <div class="bottomFixed">
-        <el-pagination @current-change="handlePersonnelChange" :current-page="personnelPageNum" :page-size="5"
-          layout="total, prev, pager, next" :total="personnelTotalSize">
-        </el-pagination>
+      </MobileZoomDiv>
+
+      <div class="info-window input-card" v-if="circle">
+        <el-button size="small" round @click="circleEditor.open()" style="margin-bottom: 5px">开始编辑</el-button>
+        <el-button size="small" round @click="circleEditor.close()" style="margin-left:0">结束编辑</el-button>
       </div>
-    </div>
-    <div class="info-window input-card" v-if="circle">
-      <el-button size="small" round @click="circleEditor.open()" style="margin-bottom: 5px">开始编辑</el-button>
-      <el-button size="small" round @click="circleEditor.close()" style="margin-left:0">结束编辑</el-button>
 
+      <!-- <div class="dragContainerEl">
+      <div id="Drag" @mousedown="mousedown($event)"  :style="{ transform: `translate(${x}px, ${y}px) scale(${scale})` }" @wheel="zoom" class="drag">可移动和放大缩小的区域</div>
+    </div> -->
     </div>
   </div>
 </template>
@@ -203,11 +215,15 @@
 <script>
 import echarts from 'echarts';
 import yongchengData from '../../assets/js/yongchengData';
+import MobileZoomDiv from './MobileZoomDiv.vue'
+import MobileZoomDivR from './MobileZoomDivR.vue'
+import MobileZoomDivTR from './MobileZoomDivTR.vue'
 import AMapLoader from "@amap/amap-jsapi-loader";
 window._AMapSecurityConfig = {
   securityJsCode: 'd62687dd438cfadd859bbab66d8e41a2',		//安全密钥
 }
 var myChart;
+
 export default {
   data() {
     return {
@@ -266,9 +282,21 @@ export default {
       lineLx: null,
       status: null,
       positionType: null,
-      historyData: []
+      historyData: [],
+      scale: 1,
+      DragEl: null,//拖动元素
+      dragContainerEl: null,//容器元素
+      // 位置差
+      // disX: 0,
+      // disY: 0,
+      // x: 0,
+      // y: 0,
+      top: 60,
+      left: 20,
+      isMoving: false,
     };
   },
+  components: { MobileZoomDiv, MobileZoomDivR,MobileZoomDivTR },
   mounted() {
     myChart = echarts.init(document.getElementById('echarts_box'))
     this.initMap();
@@ -287,18 +315,88 @@ export default {
     this.map.destroy();
   },
   methods: {
+    startMove(event) {
+      this.isMoving = true;
+      this.initialX = event.clientX;
+      this.initialY = event.clientY;
+    },
+    doMove(event) {
+      if (this.isMoving) {
+        this.left += event.clientX - this.initialX;
+        this.top += event.clientY - this.initialY;
+        this.initialX = event.clientX;
+        this.initialY = event.clientY;
+      }
+    },
+    stopMove() {
+      this.isMoving = false;
+    },
+    mousedown(event) {
+      // 1,计算位置差
+      // 因为clientX和offsetLeft的属性返回的位置不一样 要相减得到鼠标在拖动元素内实际点击的位置
+      // 后面每一次拖动时都要减去这个差值 否则就会造成你拖动的位置一直都是元素的左上角 而不是你之前点击的位置
+
+      console.log(event.clientX, this.DragEl.offsetLeft, 222222222);
+
+      this.disX = event.clientX - this.DragEl.offsetLeft;
+      this.disY = event.clientY - this.DragEl.offsetTop;
+
+      //2， 获取拖动元素的高度和容器的高度 为了下面进行限制元素拖动的范围
+      let dragHeight = this.DragEl.offsetHeight;
+      let dragWidth = this.DragEl.offsetWidth;
+      let dragContainerWidth = this.dragContainerEl.offsetWidth; //获取容器的高度和宽度
+      let dragContainerHeight = this.dragContainerEl.offsetHeight;
+
+      // 添加鼠标移动事件
+      document.onmousemove = (el) => {
+        // 3，获取鼠标移动位置
+        let moveX = el.clientX - this.disX;
+        let moveY = el.clientY - this.disY;
+
+
+        // 左边界
+        if (moveX <= 0) {
+          moveX = 0;
+        }
+        // 上边界
+        if (moveY <= 0) {
+          moveY = 0;
+        }
+        //下边界  容器高度 - 拖动元素高度
+        if (moveY >= dragContainerHeight - dragHeight) {
+          moveY = dragContainerHeight - dragHeight;
+        }
+        //右边界   容器宽度 - 拖动元素宽度
+        if (moveX >= dragContainerWidth - dragWidth) {
+          moveX = dragContainerWidth - dragWidth;
+        }
+
+        // 5, 开始移动
+        this.DragEl.style.left = moveX + "px";
+        this.DragEl.style.top = moveY + "px";
+      };
+      /* 6，鼠标抬起解除事件 */
+      document.onmouseup = () => {
+        document.onmousemove = null;
+      };
+    },
+    zoom(event) {
+      event.preventDefault();
+      const delta = event.deltaY > 0 ? 1.1 : 0.9;
+      this.scale *= delta;
+    },
     historicRecords(row) {
       this.rowId = row.userId
-      this.isCollapse=false
-      this.infoWindowVisible=true
+      this.isCollapse = false
+      this.infoWindowVisible = true
       this.detail()
     },
     handHistory(tab, event) {
       if (tab.name == '2') {
         this.queryAnalysis();
       }
-      else{
-        this.positionType=1
+      else {
+        this.positionType = 1
         this.initMap();
       }
     },
@@ -307,7 +405,7 @@ export default {
       this.queryAnalysis({ startTime: val[0], endTime: val[1] });
     },
     queryAnalysis(param) {
-      this.$api.user.ipAddrGetPcAddress({source:this.source ,...param}).then((res) => {
+      this.$api.user.ipAddrGetPcAddress({ source: this.source, ...param }).then((res) => {
         if (res.code == 200) {
           this.onlineHisData = res.data.onlineNum
           this.formatAnalysisDate(res.data.list)
@@ -324,25 +422,25 @@ export default {
           _this.map.on("complete", () => {
             //处理后台返回要用到的数据
             // _this.positionData = res.data.data
-            if (res.data.pcAddressList.length > 0){
+            if (res.data.pcAddressList.length > 0) {
 
               _this.positionType = res.data.pcAddressList[0].type
-            _this.positionData = res.data.pcAddressList.map(item => ({
-              userName: item.userName,
-              id: item.id,
-              userId: item.userId,
-              address: item.address,
-              leaderName: item.leaderName ? item.leaderName : '无',
-              // onlineImg: item.status ? "Frame-1(2).png" : "Frame(2).png",
-              onlineImg: "Frame-1(2).png",
-              operationTime: item.operationTime,
-              source: item.source,
-              status: item.status ? "#1CE247" : "#B2B2B2",
-              // status: item.status ? "在线" : "离线",
-              positionArr: [item.longitude, item.latitude]
-            }));
-            _this.mapPoint();
-          }
+              _this.positionData = res.data.pcAddressList.map(item => ({
+                userName: item.userName,
+                id: item.id,
+                userId: item.userId,
+                address: item.address,
+                leaderName: item.leaderName ? item.leaderName : '无',
+                // onlineImg: item.status ? "Frame-1(2).png" : "Frame(2).png",
+                onlineImg: "Frame-1(2).png",
+                operationTime: item.operationTime,
+                source: item.source,
+                status: item.status ? "#1CE247" : "#B2B2B2",
+                // status: item.status ? "在线" : "离线",
+                positionArr: [item.longitude, item.latitude]
+              }));
+              _this.mapPoint();
+            }
           });
           // if (location.href.indexOf("&guide=1") !== -1) {
           //   _this.map.setStatus({ scrollWheel: fal0e });
@@ -629,11 +727,11 @@ export default {
         this.sourceqd = null
       }
       this.source = null
-      if(this.positionType==1){
+      if (this.positionType == 1) {
         this.initMap();
       }
-      else{
-      this.queryAnalysis({ startTime: this.historyData[0], endTime: this.historyData[1] });
+      else {
+        this.queryAnalysis({ startTime: this.historyData[0], endTime: this.historyData[1] });
       }
     },
     sourcedlChange(val) {
@@ -642,11 +740,11 @@ export default {
         this.sourceqd = null
       }
       this.source = 2
-      if(this.positionType==1){
+      if (this.positionType == 1) {
         this.initMap();
       }
-      else{
-      this.queryAnalysis({ startTime: this.historyData[0], endTime: this.historyData[1] });
+      else {
+        this.queryAnalysis({ startTime: this.historyData[0], endTime: this.historyData[1] });
       }
     },
     sourceqdChange(val) {
@@ -655,11 +753,11 @@ export default {
         this.sourcedl = null
       }
       this.source = 1
-      if(this.positionType==1){
+      if (this.positionType == 1) {
         this.initMap();
       }
-      else{
-      this.queryAnalysis({ startTime: this.historyData[0], endTime: this.historyData[1] });
+      else {
+        this.queryAnalysis({ startTime: this.historyData[0], endTime: this.historyData[1] });
       }
     },
     onLineChange(val) {
@@ -958,15 +1056,17 @@ export default {
 }
 
 .personnel-window {
-  position: fixed;
-  bottom: 10px;
-  right: 5px;
+  position: absolute;
+  // bottom: 10px;
+  // right: 5px;
+  bottom: 0;
+  right: 0;
   z-index: 100;
   background-color: white;
   padding: 10px;
   box-shadow: 0px 5px 10px #ddd;
   box-sizing: border-box;
-    width: 500px;
+  width: 500px;
 }
 
 .bottomFixed {
@@ -1098,5 +1198,21 @@ export default {
     }
   }
 
+  .dragContainerEl {
+    // position: absolute;
+    // top: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .drag {
+    position: absolute;
+    width: 50px;
+    height: 50px;
+    border: 5px solid yellowgreen;
+    background-color: red;
+    text-align: center;
+  }
+
 }
 </style>

src/views/PeopleManage/UserMap.vue

@@ -46,6 +46,7 @@
         </el-switch> -->
       </div>
     </div>
+    <MobileZoomDivTR>
     <div v-if="infoWindowVisible" class="infohis-window">
       <p class="close flex j-s">
         <span>历史记录</span>
@@ -75,6 +76,8 @@
         </el-pagination>
       </div>
     </div>
+  </MobileZoomDivTR>
+      <MobileZoomDivR>
     <div class="personnel-window ">
       <p class="close flex j-s ">
         <!-- <span>人员分布</span> -->
@@ -144,6 +147,9 @@
           </div> -->
       </div>
     </div>
+  </MobileZoomDivR>
+
+<MobileZoomDiv>
     <div v-if="personnelVisible" class="info-window">
       <p class="close flex j-s">
         <span>人员详情</span>
@@ -195,12 +201,17 @@
         </el-pagination>
       </div>
     </div>
+  </MobileZoomDiv>
+
   </div>
 </template>
 
 <script>
 import echarts from 'echarts';
 import yongchengData from '../../assets/js/yongchengData';
+import MobileZoomDiv from './MobileZoomDiv.vue'
+import MobileZoomDivR from './MobileZoomDivR.vue'
+import MobileZoomDivTR from './MobileZoomDivTR.vue'
 import AMapLoader from "@amap/amap-jsapi-loader";
 window._AMapSecurityConfig = {
   securityJsCode: 'd62687dd438cfadd859bbab66d8e41a2',		//安全密钥
@@ -266,6 +277,7 @@ export default {
 
     };
   },
+  components: { MobileZoomDiv, MobileZoomDivR,MobileZoomDivTR },
   mounted() {
     myChart = echarts.init(document.getElementById('echarts_box'))
     this.initMap();