|
|
@@ -47,35 +47,35 @@
|
|
|
</div>
|
|
|
</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;
|
|
|
+ <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>
|
|
|
+ <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>
|
|
|
- </MobileZoomDivTR>
|
|
|
+ </MobileZoomDivTR>
|
|
|
<MobileZoomDivR>
|
|
|
<div class="personnel-window ">
|
|
|
<p class="close flex j-s ">
|
|
|
@@ -84,9 +84,11 @@
|
|
|
<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>
|
|
|
+ <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">
|
|
|
@@ -191,7 +193,6 @@
|
|
|
<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">
|
|
|
@@ -204,10 +205,6 @@
|
|
|
<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 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>
|
|
|
@@ -223,7 +220,6 @@ window._AMapSecurityConfig = {
|
|
|
securityJsCode: 'd62687dd438cfadd859bbab66d8e41a2', //安全密钥
|
|
|
}
|
|
|
var myChart;
|
|
|
-
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
@@ -283,28 +279,19 @@ export default {
|
|
|
status: null,
|
|
|
positionType: null,
|
|
|
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 },
|
|
|
+ components: { MobileZoomDiv, MobileZoomDivR, MobileZoomDivTR },
|
|
|
mounted() {
|
|
|
myChart = echarts.init(document.getElementById('echarts_box'))
|
|
|
this.initMap();
|
|
|
},
|
|
|
created() {
|
|
|
+ // 区域人员概览数据
|
|
|
this.queryRegion()
|
|
|
+ // 人员数量概览
|
|
|
this.queryPcNum()
|
|
|
-
|
|
|
//标注文字上的点击事件
|
|
|
window.personnelclick = () => {
|
|
|
this.personnelVisible = true;
|
|
|
@@ -315,76 +302,6 @@ 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
|
|
|
@@ -423,7 +340,6 @@ export default {
|
|
|
//处理后台返回要用到的数据
|
|
|
// _this.positionData = res.data.data
|
|
|
if (res.data.pcAddressList.length > 0) {
|
|
|
-
|
|
|
_this.positionType = res.data.pcAddressList[0].type
|
|
|
_this.positionData = res.data.pcAddressList.map(item => ({
|
|
|
userName: item.userName,
|
|
|
@@ -458,7 +374,6 @@ export default {
|
|
|
const valueList = data.map(function (item) {
|
|
|
return item.countNum;
|
|
|
});
|
|
|
-
|
|
|
let option = {
|
|
|
visualMap: {
|
|
|
show: false,
|
|
|
@@ -467,7 +382,6 @@ export default {
|
|
|
min: 0,
|
|
|
max: 400
|
|
|
},
|
|
|
-
|
|
|
tooltip: {
|
|
|
trigger: 'axis'
|
|
|
},
|
|
|
@@ -498,7 +412,7 @@ export default {
|
|
|
y: 0,
|
|
|
x2: 0,
|
|
|
y2: 1,
|
|
|
- colorStops: [
|
|
|
+ colorStops: [//折线图线条颜色
|
|
|
{ offset: 0, color: '#3865E9' },
|
|
|
{ offset: 1, color: '#A6D2F3' },
|
|
|
],
|
|
|
@@ -507,7 +421,6 @@ export default {
|
|
|
}],
|
|
|
}
|
|
|
myChart.setOption(option)
|
|
|
-
|
|
|
},
|
|
|
morelFun() {
|
|
|
let data = {
|
lihongxiao