Skip to content

S
SuperMan
Commit 93f75dfd authored by 黄奎's avatar 黄奎
Browse files
Options

页面修改

parent 7ee65b70
Hide whitespace changes
Inline Side-by-side
Showing with 1317 additions and 947 deletions
src/components/SalesModule/yingyanMap.vue
View file @ 93f75dfd
<template>
<div style="position: relative;width: 100%; height: 100%;">
<div style="position: absolute; left: -20px; top: 0; width: 300px; color: #fff; line-height: 40px; text-align: center; height: 40px; background:#0a8cff; z-index: 50;border-bottom: 1px solid #2f9dff">
<!-- <input type="button" value="1" @click="playGj"/> --> {{$t('salesModule.SalesGuiji')}}
<span @click="toggleDiv" style="float: right; width: 40px; height: 40px; text-align: center; color: #fff; cursor: pointer;">
<i v-show="isToggle==1" class="el-icon-caret-top"></i>
<i v-show="isToggle==2" class="el-icon-caret-bottom"></i>
</span>
</div>
<div class="yingyanMeta" id='yingyanMeta'>
<div class="title">
<div @click="getType(1)">
<i class="iconfont icon-shipinjiankong"></i>{{$t('fnc.dqzhuangtai')}}
<div v-show="mapType==1" class="titleSjx"></div>
</div>
<div @click="getType(2)">
<i class="iconfont icon-guijitu"></i> {{$t('fnc.dqzhuangtai')}} {{$t('salesModule.GuijiSearch')}}
<div v-show="mapType==2" class="titleSjx"></div>
</div>
</div>
<div>
<div v-show="mapType==1">
<div class="isOnlineType">
<li @click="online=1">
{{$t('advmanager.v_all')}}（{{personData.length}}）
<div class="cked" v-show="online==1"></div>
</li>
<li @click="online=2,filterText1=''">{{$t('salesModule.OnLine')}}（{{onlinePerson}}）
<div class="cked" v-show="online==2"></div>
</li>
<li @click="online=3,filterText1=''">{{$t('salesModule.OutLine')}}（{{personData.length-onlinePerson}}）
<div class="cked" v-show="online==3"></div>
</li>
</div>
<p v-show="online==1" style="margin:14px 0; padding: 0 14px; ">
<el-input class='w272' :placeholder="$t('salesModule.EmployeeSearch')" v-model="filterText1"><i slot="prefix" class="el-input__icon el-icon-search"></i> </el-input>
</p>
<div class="yingyanMetacont">
<div style="margin-bottom:70px;" v-if="online==1">
<el-tree :data='treeData' ref="tree1" :filter-node-method="filterNode1" v-show="online==1" :props="defaultProps1">
<span class="custom-tree-node" style="width: 100%;" slot-scope="{ node, data }">
<span class="fz14" v-if="data.Type==0">{{ node.label }}</span>
<span class="fz14" v-if="data.Type==2" style="width: 100%; display: inline-block;" @click="getOneMarker(data)">
<img v-if='!data.EmPhoto':title="info(data.Phone,data.Type)!='离线'?(info(data.Phone,data.Type)!='未开通定位'?'在线':'未开通定位'):'离线'" src="../../assets/img/litheader.png" class="yingyanIcon"/>
<img v-if='data.EmPhoto' :title="info(data.Phone,data.Type)!='离线'?(info(data.Phone,data.Type)!='未开通定位'?'在线':'未开通定位'):'离线'" :onerror="defaultImg" :src='data.EmPhoto' class="yingyanIcon" :class="{notOnlineStyle:info(data.Phone,data.Type)=='未开通定位'||info(data.Phone,data.Type)=='离线'}"/>
{{ node.label }}
</span>
</span>
</el-tree>
</div>
<div class="yingyanMsgList" v-show="online==2">
<ul>
<li v-for='item in onlineTypeList' @click="getOnlineMarker(item)">
<img v-if='!item.EmPhoto' src="../../assets/img/litheader.png" class="yingyanIcon"/>
<img v-if='item.EmPhoto' :onerror="defaultImg" :src="item.EmPhoto" class="yingyanIcon"> {{item.EmName}}
<span>{{info(item.entity_name,2)}}</span>
</li>
</ul>
</div>
<div class="yingyanMsgList" v-show="online==3">
<ul>
<li v-for='item in leaveLineTypeList' @click="getOnlineMarker(item)" >
<img v-if='!item.EmPhoto' src="../../assets/img/litheader.png" class="yingyanIcon"/>
<img v-if='item.EmPhoto' :onerror="defaultImg" :src="item.EmPhoto" class="yingyanIcon notOnlineStyle" > {{item.EmName}}
<span style="font-size: 12px;">{{item.DepartmentName}}</span>
</li>
</ul>
</div>
</div>
</div>
<div v-show="mapType==2">
<p style="margin:14px 0; padding: 0 14px;">
<el-date-picker class='w272' value-format="yyyy-MM-dd" v-model='dateTime' type="date" @change='getPersonListByTime'></el-date-picker>
</p>
<p style="margin:14px 0; padding: 0 14px; ">
<el-input class='w272' :placeholder="$t('salesModule.EmployeeSearch')" v-model="filterText"><i slot="prefix" class="el-input__icon el-icon-search"></i> </el-input>
</p>
<!-- -->
<div v-if="FinalYingYan" class="yingyanMetacont">
<div style="margin-bottom:70px;">
<el-tree :data='trackTreeData' ref="tree" :filter-node-method="filterNode" :props="defaultProps">
<span class="custom-tree-node" style="width: 100%;" slot-scope="{ node, data }">
<span class="fz14" v-if="data.Type==0" >{{ node.label }}</span>
<span class="fz14" v-if="data.Type==2" style="width: 100%; display: inline-block;" @click="getPersonList(data)">
<img v-if='!data.EmPhoto' :title="info(data.Phone,data.Type)!='离线'?(info(data.Phone,data.Type)!='未开通定位'?'在线':'未开通定位'):'离线'" src="../../assets/img/litheader.png" class="yingyanIcon"/>
<img v-if='data.EmPhoto' :title="info(data.Phone,data.Type)!='离线'?(info(data.Phone,data.Type)!='未开通定位'?'在线':'未开通定位'):'离线'" :onerror="defaultImg" :src='data.EmPhoto' class="yingyanIcon" :class="{notOnlineStyle:info(data.Phone,data.Type)=='未开通定位'||info(data.Phone,data.Type)=='离线'}"/>
{{ node.label }}
<em style="float: right; font-size:12px; font-style: normal; margin-right: 10px;">{{getDistance(data)}}{{data.distance|FileSizeFormat(data.distance)}}</em>
</span>
</span>
</el-tree>
</div>
</div>
</div>
</div>
</div>
<div class="yingyanRightMeta" v-show='mapType==1'>
<p>
{{$t('salesModule.ShowAll')}}：
<el-switch v-model="isShowAll" active-value="1" inactive-value="0" @change='isShowAllMarkers'></el-switch>
</p>
<p>
{{$t('salesModule.EquipNum')}}:{{totalNum}}
</p>
</div>
<div class="yingyanRightMeta" v-show='mapType==2'>
<p>{{$t('salesModule.GuijiJP')}}
<el-switch v-model="isjiuzheng" active-value="1" inactive-value="0" @change='isJZ'></el-switch>
</p>
<p v-show="isjiuzheng==1">
<label><input value="need_denoise" v-model="isCkedAll" type="checkbox" @change="isJZ">{{$t('salesModule.QZ')}}</label>
<label><input value="need_vacuate" v-model="isCkedAll" type="checkbox" @change="isJZ">{{$t('salesModule.CX')}}</label>
<label><input value="need_mapmatch" v-model="isCkedAll" type="checkbox" @change="isJZ">{{$t('salesModule.BL')}}</label>
</p>
<p v-show="isjiuzheng==1">{{$t('salesModule.MoveStyle')}}：
<label><input type="radio" v-model="transportMode" value="auto" @change="isJZ">{{$t('salesModule.Auto')}}</label>
<label><input type="radio" v-model="transportMode" value="driving" @change="isJZ">{{$t('salesModule.Drive')}}</label>
<label><input type="radio" v-model="transportMode" value="riding" @change="isJZ">{{$t('salesModule.Cycling')}}</label>
<label><input type="radio" v-model="transportMode" value="walking" @change="isJZ">{{$t('salesModule.Walk')}}</label>
</p>
</div>
<div style="width:100%;height:100%; border：1px solid #eee" id="container"></div>
</div>
<div style="position: relative;width: 100%; height: 100%;">
<div
style="position: absolute; left: -20px; top: 0; width: 300px; color: #fff; line-height: 40px; text-align: center; height: 40px; background:#0a8cff; z-index: 50;border-bottom: 1px solid #2f9dff"
>
<!-- <input type="button" value="1" @click="playGj"/> -->
{{ $t("salesModule.SalesGuiji") }}
<span
@click="toggleDiv"
style="float: right; width: 40px; height: 40px; text-align: center; color: #fff; cursor: pointer;"
>
<i v-show="isToggle == 1" class="el-icon-caret-top"></i>
<i v-show="isToggle == 2" class="el-icon-caret-bottom"></i>
</span>
</div>
<div class="yingyanMeta" id="yingyanMeta">
<div class="title">
<div @click="getType(1)">
<i class="iconfont icon-shipinjiankong"></i
>{{ $t("fnc.dqzhuangtai") }}
<div v-show="mapType == 1" class="titleSjx"></div>
</div>
<div @click="getType(2)">
<i class="iconfont icon-guijitu"></i> {{ $t("fnc.dqzhuangtai") }}
{{ $t("salesModule.GuijiSearch") }}
<div v-show="mapType == 2" class="titleSjx"></div>
</div>
</div>
<div>
<div v-show="mapType == 1">
<div class="isOnlineType">
<li @click="online = 1">
{{ $t("advmanager.v_all") }}（{{ personData.length }}）
<div class="cked" v-show="online == 1"></div>
</li>
<li @click="(online = 2), (filterText1 = '')">
{{ $t("salesModule.OnLine") }}（{{ onlinePerson }}）
<div class="cked" v-show="online == 2"></div>
</li>
<li @click="(online = 3), (filterText1 = '')">
{{ $t("salesModule.OutLine") }}（{{
personData.length - onlinePerson
}}）
<div class="cked" v-show="online == 3"></div>
</li>
</div>
<p v-show="online == 1" style="margin:14px 0; padding: 0 14px; ">
<el-input
class="w272"
:placeholder="$t('salesModule.EmployeeSearch')"
v-model="filterText1"
><i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>
</p>
<div class="yingyanMetacont">
<div style="margin-bottom:70px;" v-if="online == 1">
<el-tree
:data="treeData"
ref="tree1"
:filter-node-method="filterNode1"
v-show="online == 1"
:props="defaultProps1"
>
<span
class="custom-tree-node"
style="width: 100%;"
slot-scope="{ node, data }"
>
<span class="fz14" v-if="data.Type == 0">{{
node.label
}}</span>
<span
class="fz14"
v-if="data.Type == 2"
style="width: 100%; display: inline-block;"
@click="getOneMarker(data)"
>
<img
v-if="!data.EmPhoto"
:title="
info(data.Phone, data.Type) != '离线'
? info(data.Phone, data.Type) != '未开通定位'
? '在线'
: '未开通定位'
: '离线'
"
src="../../assets/img/litheader.png"
class="yingyanIcon"
/>
<img
v-if="data.EmPhoto"
:title="
info(data.Phone, data.Type) != '离线'
? info(data.Phone, data.Type) != '未开通定位'
? '在线'
: '未开通定位'
: '离线'
"
:onerror="defaultImg"
:src="data.EmPhoto"
class="yingyanIcon"
:class="{
notOnlineStyle:
info(data.Phone, data.Type) == '未开通定位' ||
info(data.Phone, data.Type) == '离线'
}"
/>
{{ node.label }}
</span>
</span>
</el-tree>
</div>
<div class="yingyanMsgList" v-show="online == 2">
<ul>
<li
v-for="item in onlineTypeList"
@click="getOnlineMarker(item)"
>
<img
v-if="!item.EmPhoto"
src="../../assets/img/litheader.png"
class="yingyanIcon"
/>
<img
v-if="item.EmPhoto"
:onerror="defaultImg"
:src="item.EmPhoto"
class="yingyanIcon"
/>
{{ item.EmName }}
<span>{{ info(item.entity_name, 2) }}</span>
</li>
</ul>
</div>
<div class="yingyanMsgList" v-show="online == 3">
<ul>
<li
v-for="item in leaveLineTypeList"
@click="getOnlineMarker(item)"
>
<img
v-if="!item.EmPhoto"
src="../../assets/img/litheader.png"
class="yingyanIcon"
/>
<img
v-if="item.EmPhoto"
:onerror="defaultImg"
:src="item.EmPhoto"
class="yingyanIcon notOnlineStyle"
/>
{{ item.EmName }}
<span style="font-size: 12px;">{{
item.DepartmentName
}}</span>
</li>
</ul>
</div>
</div>
</div>
<div v-show="mapType == 2">
<p style="margin:14px 0; padding: 0 14px;">
<el-date-picker
class="w272"
value-format="yyyy-MM-dd"
v-model="dateTime"
type="date"
@change="getPersonListByTime"
></el-date-picker>
</p>
<p style="margin:14px 0; padding: 0 14px; ">
<el-input
class="w272"
:placeholder="$t('salesModule.EmployeeSearch')"
v-model="filterText"
><i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>
</p>
<!-- -->
<div v-if="FinalYingYan" class="yingyanMetacont">
<div style="margin-bottom:70px;">
<el-tree
:data="trackTreeData"
ref="tree"
:filter-node-method="filterNode"
:props="defaultProps"
>
<span
class="custom-tree-node"
style="width: 100%;"
slot-scope="{ node, data }"
>
<span class="fz14" v-if="data.Type == 0">{{
node.label
}}</span>
<span
class="fz14"
v-if="data.Type == 2"
style="width: 100%; display: inline-block;"
@click="getPersonList(data)"
>
<img
v-if="!data.EmPhoto"
:title="
info(data.Phone, data.Type) != '离线'
? info(data.Phone, data.Type) != '未开通定位'
? '在线'
: '未开通定位'
: '离线'
"
src="../../assets/img/litheader.png"
class="yingyanIcon"
/>
<img
v-if="data.EmPhoto"
:title="
info(data.Phone, data.Type) != '离线'
? info(data.Phone, data.Type) != '未开通定位'
? '在线'
: '未开通定位'
: '离线'
"
:onerror="defaultImg"
:src="data.EmPhoto"
class="yingyanIcon"
:class="{
notOnlineStyle:
info(data.Phone, data.Type) == '未开通定位' ||
info(data.Phone, data.Type) == '离线'
}"
/>
{{ node.label }}
<em
style="float: right; font-size:12px; font-style: normal; margin-right: 10px;"
>{{ getDistance(data)
}}{{ data.distance | FileSizeFormat(data.distance) }}</em
>
</span>
</span>
</el-tree>
</div>
</div>
</div>
</div>
</div>
<div class="yingyanRightMeta" v-show="mapType == 1">
<p>
{{ $t("salesModule.ShowAll") }}：
<el-switch
v-model="isShowAll"
active-value="1"
inactive-value="0"
@change="isShowAllMarkers"
></el-switch>
</p>
<p>{{ $t("salesModule.EquipNum") }}:{{ totalNum }}</p>
</div>
<div class="yingyanRightMeta" v-show="mapType == 2">
<p>
{{ $t("salesModule.GuijiJP") }}
<el-switch
v-model="isjiuzheng"
active-value="1"
inactive-value="0"
@change="isJZ"
></el-switch>
</p>
<p v-show="isjiuzheng == 1">
<label
><input
value="need_denoise"
v-model="isCkedAll"
type="checkbox"
@change="isJZ"
/>{{ $t("salesModule.QZ") }}</label
>
<label
><input
value="need_vacuate"
v-model="isCkedAll"
type="checkbox"
@change="isJZ"
/>{{ $t("salesModule.CX") }}</label
>
<label
><input
value="need_mapmatch"
v-model="isCkedAll"
type="checkbox"
@change="isJZ"
/>{{ $t("salesModule.BL") }}</label
>
</p>
<p v-show="isjiuzheng == 1">
{{ $t("salesModule.MoveStyle") }}：
<label
><input
type="radio"
v-model="transportMode"
value="auto"
@change="isJZ"
/>{{ $t("salesModule.Auto") }}</label
>
<label
><input
type="radio"
v-model="transportMode"
value="driving"
@change="isJZ"
/>{{ $t("salesModule.Drive") }}</label
>
<label
><input
type="radio"
v-model="transportMode"
value="riding"
@change="isJZ"
/>{{ $t("salesModule.Cycling") }}</label
>
<label
><input
type="radio"
v-model="transportMode"
value="walking"
@change="isJZ"
/>{{ $t("salesModule.Walk") }}</label
>
</p>
</div>
<div
style="width:100%;height:100%; border：1px solid #eee"
id="container"
></div>
</div>
</template>
<script>
import BMap from 'BMap'
export default {
data() {
return {
mapX:'104.073652',
mapY:'30.664369',
playPoints:[],
MapObj:{},
playIndex:0,
isToggle:1,
filterText: "",
filterText1: "",
online: 1,
isCkedAll: [],
transportMode: 'auto',
isShowAll: '1',
isjiuzheng: '0',
defaultProps: {
children: "ChildList",
label: "DepartmentName",
disabled: "Disabled"
},
defaultProps1: {
children: "ChildList",
label: "DepartmentName",
disabled: "Disabled"
},
defaultImg: 'this.src="' + require("../../assets/img/litheader.png") + '"',
mapType: '1',
keys: '?ak=ZzGBZF6L0sgFDLlDohyvYhCnWy4dwksX&service_id=203768',
dateTime: '',
entity_name: '',
msg: {
Status: '0'
},
onlineType: 4,
onlineTypeList: [],
leaveLineTypeList: [],
totalNum: 0,
lastLocation: {},
locationStatus: '',
locationPhoto: '',
locationLastTime: '',
locationName: '',
loctionArr: {},
markersList: [],
list: [],
Point: [],
PositionList: [],
treeData: [],
trackTreeData: [],
personData: [],
onlinePerson: 0,
gettrackPageIndex:0,
getlistIndex:0,
FinalYingYan:true,
datainfo:{},
page_size100:100,
page_size:1000,
page_size2:5000,
}
},
beforeDestroy() {
if(this.intervalid) { //如果定时器还在运行 或者直接关闭，不用判断
clearInterval(this.intervalid); //关闭
}
},
watch: {
filterText(val) {
this.$refs.tree.filter(val);
},
filterText1(val) {
this.$refs.tree1.filter(val);
}
},
filters: {
FileSizeFormat(value) {
return(value / 1000).toFixed(2) + 'Km'
}
},
created(){
},
methods: {
getPerson(id) {
this.apipost('admin_get_EmployeeGet', {
Id: id
}, res => {
if(res.data.resultCode == 1) {
this.datainfo=res.data.data;
this.filterText=this.datainfo.EmName;
let obj={};
obj.Phone=this.datainfo.EmLoginMobile
this.getPersonList(obj);
}
}, err => {})
},
toggleDiv(){
if(this.isToggle==1){
this.isToggle=2
document.getElementById('yingyanMeta').style.height='0'
}else{
this.isToggle=1
document.getElementById('yingyanMeta').style.height='500px'
}
},
filterNode(value, data) {
if(!value) return true;
return data.DepartmentName.indexOf(value) !== -1;
},
filterNode1(value, data) {
if(!value) return true;
return data.DepartmentName.indexOf(value) !== -1;
},
getType(val){
this.mapType=val
this.filterText1=''
if(val==1)
{ this.Point=[]
}
this.creatMap()
},
isJZ() {
let timestamp = new Date(this.dateTime)
let start_time = timestamp.getTime() / 1000
let end_time = start_time + 86400
let canshu = "need_denoise=0,need_vacuate=0,need_mapmatch=0";
this.isCkedAll.forEach(item => {
if(this.isCkedAll.findIndex(item => item == 'need_denoise') != -1) {
canshu = canshu.replace('need_denoise=0', 'need_denoise=1')
}
if(this.isCkedAll.findIndex(item => item == 'need_vacuate') != -1) {
canshu = canshu.replace('need_vacuate=0', 'need_vacuate=1')
}
if(this.isCkedAll.findIndex(item => item == 'need_mapmatch') != -1) {
canshu = canshu.replace('need_mapmatch=0', 'need_mapmatch=1')
}
})
this.gettrackPageIndex=1;
let url = this.keys + '&entity_name=' + this.entity_name + '&start_time=' + start_time + '&end_time=' + end_time + '&page_size=5000&is_processed=' + this.isjiuzheng +
'&process_option=' + canshu + ',transport_mode=' + this.transportMode;
this.gettrackPage(url);
this.Point = []
},
isShowAllMarkers() {
if(this.isShowAll == 0) {
this.totalNum = 0
this.lastLocation = {}
this.creatMap()
} else {
this.creatMap()
}
},
getOnlineMarker(treeObj) {
let obj = this.markersList.find(item => item.entity_name == treeObj.entity_name)
if(obj) {
this.loctionArr = obj.latest_location
if(obj.latest_location) {
this.lastLocation.log = obj.latest_location.longitude
this.lastLocation.lat = obj.latest_location.latitude
this.locationLastTime = obj.latest_location.loc_time
this.locationPhoto = treeObj.EmPhoto
this.locationName = treeObj.EmName
if(this.getOnlineStatus(obj.latest_location.loc_time) === 0) {
obj.latest_location.speed = obj.latest_location.speed || 0;
this.locationStatus = this.getSpeed(obj.latest_location.speed);
} else {
this.locationStatus = '离线';
}
this.creatMap()
}
}else{
this.Error('暂无定位数据');
}
},
getDistance(data) {
if(data.Phone) {
let timestamp = new Date(this.dateTime)
let start_time = timestamp.getTime() / 1000
let end_time = start_time + 86400
let canshu = "need_denoise=0,need_vacuate=0,need_mapmatch=0";
this.isCkedAll.forEach(item => {
if(this.isCkedAll.findIndex(item => item == 'need_denoise') != -1) {
canshu = canshu.replace('need_denoise=0', 'need_denoise=1')
}
if(this.isCkedAll.findIndex(item => item == 'need_vacuate') != -1) {
canshu = canshu.replace('need_vacuate=0', 'need_vacuate=1')
}
if(this.isCkedAll.findIndex(item => item == 'need_mapmatch') != -1) {
canshu = canshu.replace('need_mapmatch=0', 'need_mapmatch=1')
}
})
let url = this.keys + '&entity_name=' + data.Phone + '&start_time=' + start_time + '&end_time=' + end_time + '&page_index=1&page_size=1&is_processed=' + this.isjiuzheng +
'&process_option=' + canshu + ',transport_mode=' + this.transportMode;
this.$http.get('https://bird.ioliu.cn/v1?url=http://yingyan.baidu.com/api/v3/track/gettrack' + url).then(res => {
if(res.data.distance == undefined) {
data.distance = '0'
} else {
data.distance = res.data.distance
}
})
}
},
getOneMarker(treeObj) {
let obj = this.markersList.find(item => item.entity_name == treeObj.Phone)
if(obj) {
this.loctionArr = obj.latest_location
if(obj.latest_location) {
this.lastLocation.log = obj.latest_location.longitude
this.lastLocation.lat = obj.latest_location.latitude
this.locationLastTime = obj.latest_location.loc_time
this.locationPhoto = treeObj.EmPhoto
this.locationName = treeObj.DepartmentName
if(this.getOnlineStatus(obj.latest_location.loc_time) === 0) {
obj.latest_location.speed = obj.latest_location.speed || 0;
this.locationStatus = this.getSpeed(obj.latest_location.speed);
} else {
this.locationStatus = '离线';
}
this.creatMap()
}
}else{
this.Error('暂无定位数据');
}
},
/**
* 判断当前设备是否在线，规则是最后上传的轨迹点
* 时间在当前系统时间十分钟内判断为在线，否则为离线
*
* @param {number} time UNIX时间戳
* @return {number} 在线状态 0在线 1离线
*/
getOnlineStatus(time) {
var status = 0;
var timestamp = new Date().getTime() / 1000;
var timeDiff = (timestamp - time) / 60;
status = timeDiff >= 10 ? 1 : 0;
return status;
},
/**
* 判断当前设备是否为静止，规则是速度小于1km/h返回静止，
* 否则返回速度
*
* @param {number} speed 速度 单位为 km/h
* @return {string} 速度
*/
getSpeed(speed) {
var speedDesc
if(speed >= 150) {
speedDesc = ' - - ';
} else if(speed >= 1 && speed < 150) {
speedDesc = speed.toFixed(1) + 'km/h';
} else {
speedDesc = '静止';
}
return speedDesc;
},
info(phone, Type) {
if(Type == 2) {
if(phone != undefined && phone.length > 0) {
var eitem = this.markersList.find(item => item.entity_name == phone);
if(eitem) {
if(this.getOnlineStatus(eitem.latest_location.loc_time) === 0) {
eitem.latest_location.speed = eitem.latest_location.speed || 0;
return this.getSpeed(eitem.latest_location.speed);
} else {
return '离线';
}
} else {
return '未开通定位';
}
} else {
return '未开通定位';
}
}
},
getTrackTreeData() {
this.apipost('TaskManagemnet_get_GetEmpForNowDepartmentForPath', {
StartTime: this.dateTime
}, res => {
if(res.data.resultCode == 1) {
this.trackTreeData = res.data.data
}
}, err => {})
},
getData() {
this.apipost('TaskManagemnet_get_GetEmpForNowDepartment', this.msg, res => {
if(res.data.resultCode == 1) {
this.treeData = res.data.data.List
this.personData = res.data.data.entitiesR
this.creatMap()
} else {
}
}, err => {})
},
getlist() {
this.onlineTypeList = []
this.leaveLineTypeList = []
this.markersList=[]
let timestamp = new Date()
let start_time = timestamp.getTime() / 1000
let url = this.keys + '&timeStamp=' + start_time
this.getlistIndex=1
this.getlistPage(url)
},
getlistPage(url){
let that=this
this.$http.get('https://bird.ioliu.cn/v1?url=http://yingyan.baidu.com/api/v3/entity/search' + url+'&page_index='+this.getlistIndex+'&page_size'+this.page_size100).then(res => {
this.markersList=this.markersList.concat(res.data.entities)
if(that.getlistIndex*this.page_size100<res.data.total){
that.getlistIndex+=1;
that.getlistPage(url);
}
else{
that.onlinePerson=0
that.personData.forEach(person => {
let item = that.markersList.find(markers => markers.entity_name == person.entity_name)
if(item) {
if(that.getOnlineStatus(item.latest_location.loc_time) === 0) {
that.onlineTypeList.push(person);
that.onlinePerson += 1;
} else {
that.leaveLineTypeList.push(person)
}
} else {
that.leaveLineTypeList.push(person)
}
});
}
});
},
// 轨迹请求
getPersonList(obj) {
this.entity_name = obj.Phone;
let timestamp = new Date(this.dateTime)
let start_time = timestamp.getTime() / 1000
let end_time = start_time + 86400
let canshu = "need_denoise=0,need_vacuate=0,need_mapmatch=0";
this.isCkedAll.forEach(item => {
if(this.isCkedAll.findIndex(item => item == 'need_denoise') != -1) {
canshu = canshu.replace('need_denoise=0', 'need_denoise=1')
}
if(this.isCkedAll.findIndex(item => item == 'need_vacuate') != -1) {
canshu = canshu.replace('need_vacuate=0', 'need_vacuate=1')
}
if(this.isCkedAll.findIndex(item => item == 'need_mapmatch') != -1) {
canshu = canshu.replace('need_mapmatch=0', 'need_mapmatch=1')
}
})
this.gettrackPageIndex=1;
let url = this.keys + '&entity_name=' + obj.Phone + '&start_time=' + start_time + '&end_time=' + end_time +'&page_size='+this.page_size2+'&is_processed=' + this.isjiuzheng +
'&process_option=' + canshu + ',transport_mode=' + this.transportMode;
this.gettrackPage(url);
this.Point = []
},
gettrackPage(url){
this.$http.get('https://bird.ioliu.cn/v1?url=http://yingyan.baidu.com/api/v3/track/gettrack' + url+'&page_index='+this.gettrackPageIndex).then(res => {
let xy = res.data.points
if(xy != undefined) {
xy.forEach(x => {
this.Point.push({
xy: [x.latitude, x.longitude],time:x.loc_time
})
})
}
if(this.gettrackPageIndex*this.page_size2<res.data.total){
this.gettrackPageIndex+=1;
this.gettrackPage(url);
}
else{
this.creatMap();
}
});
},
getPersonListByTime() {
if(this.$route.query.EmployeeId){
let obj={};
obj.Phone=this.datainfo.EmLoginMobile
this.getPersonList(obj);
}
else{
this.filterText=''
this.getTrackTreeData();
}
},
formatDate(now) {
let dateTime = new Date(now * 1000)
　　 var year = dateTime.getFullYear(),
　　month = dateTime.getMonth() + 1>=10?dateTime.getMonth() + 1:'0'+(dateTime.getMonth() + 1),
　　date = dateTime.getDate()>=10?dateTime.getDate():'0'+dateTime.getDate(),
　　hour = dateTime.getHours()>=10?dateTime.getHours():'0'+dateTime.getHours(),
　　minute = dateTime.getMinutes()>=10?dateTime.getMinutes():'0'+dateTime.getMinutes(),
　　second = dateTime.getSeconds()>=10?dateTime.getSeconds():'0'+dateTime.getSeconds();　　
return year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;
},
playGj(){
let point = this.playPoints[this.playIndex];
if(this.playIndex > 0) {
this.MapObj.addOverlay(new BMap.Polyline([this.playPoints[this.playIndex - 1], this.playIndex], {strokeColor: "#ffffff", strokeWeight: 1, strokeOpacity: 1}));
}
this.playIndex++
if(this.playIndex < this.playPoints.length) {
this.playGj(this.playIndex)
} else {
}
},
creatMap() {
let map
map = new BMap.Map("container"); // 创建Map实例
//alert(typeof map)
this.MapObj=map
map.setCurrentCity("成都"); // 设置地图默认显示城市 此项是必须设置的
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
map.centerAndZoom(new BMap.Point(this.mapX,this.mapY), 18); // 初始化地图,设置中心点坐标和地图级别
let PositionList = []
this.Point.forEach((x, index) => { //添加轨迹点
PositionList.push(new BMap.Point(x.xy[1], x.xy[0]))
})
this.playPoints=PositionList
if(this.Point.length > 0) {
let centerIndex = parseInt(this.Point.length / 2)
map.centerAndZoom(new BMap.Point(this.Point[centerIndex].xy[1], this.Point[centerIndex].xy[0]), 18);
let curve = new BMap.Polyline(PositionList, {
strokeColor: "#E95252",
strokeWeight:'8',//折线的宽度，以像素为单位
strokeOpacity: 1,//折线的透明度，取值范围0 - 1
});
//画轨迹图
map.addOverlay(curve);
}
if(this.markersList.length > 0&& this.mapType==1) {
this.personData.forEach(person => {
let item = this.markersList.find(markers => markers.entity_name == person.entity_name)
if(item) {
let myIcon = new BMap.Icon(this.domainManager().ViittoFileUrl+"/Upload/Icon/Common/positioning.png", new BMap.Size(32,40));
let point = new BMap.Point(item.latest_location.longitude, item.latest_location.latitude)
let marker
if(this.getOnlineStatus(item.latest_location.loc_time) === 0){
marker = new BMap.Marker(point)
}else{
marker = new BMap.Marker(point,{icon:myIcon})
}
map.addOverlay(marker);
let that = this
if(this.isShowAll==0){
marker.hide()
}
marker.addEventListener("click", function(e) {
let status
if(that.getOnlineStatus(item.latest_location.loc_time) === 0) {
item.latest_location.speed = item.latest_location.speed || 0;
status = that.getSpeed(item.latest_location.speed);
} else {
status = '离线';
}
let myGeo = new BMap.Geocoder();
myGeo.getLocation(point, function(res) {
let address
if(res) {
address = res.address
} else {
address = '无法定位'
}
let content = "<div class='mapLayer'>" +
"<p><img onerror='"+that.defaultImg+"' style='width:24px;height:24px;border-radius:12px;vertical-align: middle;' src='" + person.EmPhoto + "'>&nbsp;&nbsp;&nbsp;" + person.EmName + "</p>" +
"<p>状态：" + status + "</p>" +
"<p>地址：" + address + "</p>" +
"<p>定位：" + item.latest_location.longitude + ',' + item.latest_location.latitude + "</p>" +
"<p>时间：" + that.formatDate(item.latest_location.loc_time) + "</p>"
"</div>"
let infoWindow = new BMap.InfoWindow(content);
map.openInfoWindow(infoWindow, point); //开启信息窗口
})
});
}
});
}
if(this.mapType==2){
this.lastLocation = {}
// map.clearOverlays();
}
if(this.lastLocation.log && this.lastLocation.lat) { //单机打开弹窗
this.mapX=this.lastLocation.log
this.mapY=this.lastLocation.lat
let a = this.lastLocation.log
let b = this.lastLocation.lat
let point = new BMap.Point(this.lastLocation.log, this.lastLocation.lat);
if(this.isShowAll==0){
let myIcon = new BMap.Icon(this.domainManager().ViittoFileUrl+"/Upload/Icon/Common/positioning.png", new BMap.Size(32,40));
let marker = new BMap.Marker(point)
if(this.getOnlineStatus(this.locationLastTime) === 0){
marker = new BMap.Marker(point)
}else{
marker = new BMap.Marker(point,{icon:myIcon})
}
map.addOverlay(marker);
}
map.centerAndZoom(point, 18);
let myGeo = new BMap.Geocoder();
let that = this
myGeo.getLocation(point, function(res) {
let address
if(res) {
address = res.address
} else {
address = '无法定位'
}
let content = "<div class='mapLayer'>" +
"<p><img onerror='"+that.defaultImg+"' style='width:24px;height:24px;border-radius:12px;vertical-align: middle;' src='" + that.locationPhoto + "'>&nbsp;&nbsp;&nbsp;" + that.locationName + "</p>" +
"<p>状态：" + that.locationStatus + "</p>" +
"<p>地址：" + address + "</p>" +
"<p>定位：" + a + ',' + b + "</p>" +
"<p>时间：" + that.formatDate(that.locationLastTime) + "</p>"
"</div>"
let infoWindow = new BMap.InfoWindow(content);
map.openInfoWindow(infoWindow, point); //开启信息窗口
})
}
map.closeInfoWindow()
if(this.isShowAll == 1) {  // 获取经纬度范围参数
var  bs  =  map.getBounds();    //获取可视区域
var  bssw  =  bs.getSouthWest();    //可视区域左下角
var  bsne  =  bs.getNorthEast();    //可视区域右上角
var  topLat  =  bsne.lat;    
var  bottomLat  =  bssw.lat;    
var  leftLng  =  bssw.lng;    
var  rightLng  =  bsne.lng;
let timestamp = new Date()
let start_time = timestamp.getTime() / 1000
let url = this.keys + '&bounds=' + bottomLat + ',' + leftLng + ';' + topLat + ',' + rightLng + '&filter=&page_index=1&page_size='+this.page_size+'&timeStamp=' + start_time;
this.totalNum = 0
let that = this
this.$http.get('https://bird.ioliu.cn/v1?url=http://yingyan.baidu.com/api/v3/entity/boundsearch' + url).then(res => {
if(res.data.status==0){
this.personData.forEach(person => {
let item = res.data.entities.find(markers => markers.entity_name == person.entity_name)
if(item&&that.isShowAll==1) {
that.totalNum += 1
}
});
}else{
this.Error("请刷新重试！")
}
})
map.addEventListener("zoomend", function(evt) { //缩放地图
bs  =  map.getBounds();    //获取可视区域
bssw  =  bs.getSouthWest();    //可视区域左下角
bsne  =  bs.getNorthEast();    //可视区域右上角
topLat  =  bsne.lat;     
bottomLat  =  bssw.lat;     
leftLng  =  bssw.lng;     
rightLng  =  bsne.lng;
let url = that.keys + '&bounds=' + bottomLat + ',' + leftLng + ';' + topLat + ',' + rightLng + '&filter=&page_index=1&page_size='+this.page_size+'&timeStamp=' + start_time;
that.$http.get('https://bird.ioliu.cn/v1?url=http://yingyan.baidu.com/api/v3/entity/boundsearch' + url).then(res => {
that.totalNum = 0
if(res.data.entities) {
that.personData.forEach(person => {
let item = res.data.entities.find(markers => markers.entity_name == person.entity_name)
if(item&&that.isShowAll==1) {
that.totalNum += 1
}
});
}
})
})
map.addEventListener("moveend", function(evt) { //拖拽地图
bs  =  map.getBounds();    //获取可视区域
bssw  =  bs.getSouthWest();    //可视区域左下角
bsne  =  bs.getNorthEast();    //可视区域右上角
topLat  =  bsne.lat;     
bottomLat  =  bssw.lat;     
leftLng  =  bssw.lng;     
rightLng  =  bsne.lng;
let url = that.keys + '&bounds=' + bottomLat + ',' + leftLng + ';' + topLat + ',' + rightLng + '&filter=&page_index=1&page_size='+this.page_size+'&timeStamp=' + start_time;
that.$http.get('https://bird.ioliu.cn/v1?url=http://yingyan.baidu.com/api/v3/entity/boundsearch' + url).then(res => {
that.totalNum = 0
that.personData.forEach(person => {
let item = res.data.entities.find(markers => markers.entity_name == person.entity_name)
if(item&&that.isShowAll==1) {
that.totalNum += 1
}
});
})
});
}
},
},
mounted() {
let date = new Date();
let _y = date.getFullYear()
let _m = date.getMonth() + 1 >= 10 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1)
let _d = date.getDate()
this.dateTime = _y + '-' + _m + '-' + _d
this.getlist()
this.getTrackTreeData()
this.getData()
this.intervalid = setInterval(() => {
this.getlist()
}, 60000)
if(this.$route.query.EmployeeId){
let id=this.$route.query.EmployeeId;
this.FinalYingYan=false;
this.getPerson(id);
this.mapType=2;
}
}
}
import BMap from "BMap";
export default {
data() {
return {
mapX: "104.073652",
mapY: "30.664369",
playPoints: [],
MapObj: {},
playIndex: 0,
isToggle: 1,
filterText: "",
filterText1: "",
online: 1,
isCkedAll: [],
transportMode: "auto",
isShowAll: "1",
isjiuzheng: "0",
defaultProps: {
children: "ChildList",
label: "DepartmentName",
disabled: "Disabled"
},
defaultProps1: {
children: "ChildList",
label: "DepartmentName",
disabled: "Disabled"
},
defaultImg:
'this.src="' + require("../../assets/img/litheader.png") + '"',
mapType: "1",
keys: "?ak=ZzGBZF6L0sgFDLlDohyvYhCnWy4dwksX&service_id=203768",
dateTime: "",
entity_name: "",
msg: {
Status: "0"
},
onlineType: 4,
onlineTypeList: [],
leaveLineTypeList: [],
totalNum: 0,
lastLocation: {},
locationStatus: "",
locationPhoto: "",
locationLastTime: "",
locationName: "",
loctionArr: {},
markersList: [],
list: [],
Point: [],
PositionList: [],
treeData: [],
trackTreeData: [],
personData: [],
onlinePerson: 0,
gettrackPageIndex: 0,
getlistIndex: 0,
FinalYingYan: true,
datainfo: {},
page_size100: 100,
page_size: 1000,
page_size2: 5000
};
},
beforeDestroy() {
if (this.intervalid) {
//如果定时器还在运行 或者直接关闭，不用判断
clearInterval(this.intervalid); //关闭
}
},
watch: {
filterText(val) {
this.$refs.tree.filter(val);
},
filterText1(val) {
this.$refs.tree1.filter(val);
}
},
filters: {
FileSizeFormat(value) {
return (value / 1000).toFixed(2) + "Km";
}
},
created() {},
methods: {
getPerson(id) {
this.apipost(
"admin_get_EmployeeGet",
{
Id: id
},
res => {
if (res.data.resultCode == 1) {
this.datainfo = res.data.data;
this.filterText = this.datainfo.EmName;
let obj = {};
obj.Phone = this.datainfo.EmLoginMobile;
this.getPersonList(obj);
}
},
err => {}
);
},
toggleDiv() {
if (this.isToggle == 1) {
this.isToggle = 2;
document.getElementById("yingyanMeta").style.height = "0";
} else {
this.isToggle = 1;
document.getElementById("yingyanMeta").style.height = "500px";
}
},
filterNode(value, data) {
if (!value) return true;
return data.DepartmentName.indexOf(value) !== -1;
},
filterNode1(value, data) {
if (!value) return true;
return data.DepartmentName.indexOf(value) !== -1;
},
getType(val) {
this.mapType = val;
this.filterText1 = "";
if (val == 1) {
this.Point = [];
}
this.creatMap();
},
isJZ() {
let timestamp = new Date(this.dateTime);
let start_time = timestamp.getTime() / 1000;
let end_time = start_time + 86400;
let canshu = "need_denoise=0,need_vacuate=0,need_mapmatch=0";
this.isCkedAll.forEach(item => {
if (this.isCkedAll.findIndex(item => item == "need_denoise") != -1) {
canshu = canshu.replace("need_denoise=0", "need_denoise=1");
}
if (this.isCkedAll.findIndex(item => item == "need_vacuate") != -1) {
canshu = canshu.replace("need_vacuate=0", "need_vacuate=1");
}
if (this.isCkedAll.findIndex(item => item == "need_mapmatch") != -1) {
canshu = canshu.replace("need_mapmatch=0", "need_mapmatch=1");
}
});
this.gettrackPageIndex = 1;
let url =
this.keys +
"&entity_name=" +
this.entity_name +
"&start_time=" +
start_time +
"&end_time=" +
end_time +
"&page_size=5000&is_processed=" +
this.isjiuzheng +
"&process_option=" +
canshu +
",transport_mode=" +
this.transportMode;
this.gettrackPage(url);
this.Point = [];
},
isShowAllMarkers() {
if (this.isShowAll == 0) {
this.totalNum = 0;
this.lastLocation = {};
this.creatMap();
} else {
this.creatMap();
}
},
getOnlineMarker(treeObj) {
let obj = this.markersList.find(
item => item.entity_name == treeObj.entity_name
);
if (obj) {
this.loctionArr = obj.latest_location;
if (obj.latest_location) {
this.lastLocation.log = obj.latest_location.longitude;
this.lastLocation.lat = obj.latest_location.latitude;
this.locationLastTime = obj.latest_location.loc_time;
this.locationPhoto = treeObj.EmPhoto;
this.locationName = treeObj.EmName;
if (this.getOnlineStatus(obj.latest_location.loc_time) === 0) {
obj.latest_location.speed = obj.latest_location.speed || 0;
this.locationStatus = this.getSpeed(obj.latest_location.speed);
} else {
this.locationStatus = "离线";
}
this.creatMap();
}
} else {
this.Error("暂无定位数据");
}
},
getDistance(data) {
if (data.Phone) {
let timestamp = new Date(this.dateTime);
let start_time = timestamp.getTime() / 1000;
let end_time = start_time + 86400;
let canshu = "need_denoise=0,need_vacuate=0,need_mapmatch=0";
this.isCkedAll.forEach(item => {
if (this.isCkedAll.findIndex(item => item == "need_denoise") != -1) {
canshu = canshu.replace("need_denoise=0", "need_denoise=1");
}
if (this.isCkedAll.findIndex(item => item == "need_vacuate") != -1) {
canshu = canshu.replace("need_vacuate=0", "need_vacuate=1");
}
if (this.isCkedAll.findIndex(item => item == "need_mapmatch") != -1) {
canshu = canshu.replace("need_mapmatch=0", "need_mapmatch=1");
}
});
let url =
this.keys +
"&entity_name=" +
data.Phone +
"&start_time=" +
start_time +
"&end_time=" +
end_time +
"&page_index=1&page_size=1&is_processed=" +
this.isjiuzheng +
"&process_option=" +
canshu +
",transport_mode=" +
this.transportMode;
this.$http
.get(
"https://bird.ioliu.cn/v1?url=http://yingyan.baidu.com/api/v3/track/gettrack" +
url
)
.then(res => {
if (res.data.distance == undefined) {
data.distance = "0";
} else {
data.distance = res.data.distance;
}
});
}
},
getOneMarker(treeObj) {
let obj = this.markersList.find(
item => item.entity_name == treeObj.Phone
);
if (obj) {
this.loctionArr = obj.latest_location;
if (obj.latest_location) {
this.lastLocation.log = obj.latest_location.longitude;
this.lastLocation.lat = obj.latest_location.latitude;
this.locationLastTime = obj.latest_location.loc_time;
this.locationPhoto = treeObj.EmPhoto;
this.locationName = treeObj.DepartmentName;
if (this.getOnlineStatus(obj.latest_location.loc_time) === 0) {
obj.latest_location.speed = obj.latest_location.speed || 0;
this.locationStatus = this.getSpeed(obj.latest_location.speed);
} else {
this.locationStatus = "离线";
}
this.creatMap();
}
} else {
this.Error("暂无定位数据");
}
},
/**
* 判断当前设备是否在线，规则是最后上传的轨迹点
* 时间在当前系统时间十分钟内判断为在线，否则为离线
*
* @param {number} time UNIX时间戳
* @return {number} 在线状态 0在线 1离线
*/
getOnlineStatus(time) {
var status = 0;
var timestamp = new Date().getTime() / 1000;
var timeDiff = (timestamp - time) / 60;
status = timeDiff >= 10 ? 1 : 0;
return status;
},
/**
* 判断当前设备是否为静止，规则是速度小于1km/h返回静止，
* 否则返回速度
*
* @param {number} speed 速度 单位为 km/h
* @return {string} 速度
*/
getSpeed(speed) {
var speedDesc;
if (speed >= 150) {
speedDesc = " - - ";
} else if (speed >= 1 && speed < 150) {
speedDesc = speed.toFixed(1) + "km/h";
} else {
speedDesc = "静止";
}
return speedDesc;
},
info(phone, Type) {
if (Type == 2) {
if (phone != undefined && phone.length > 0) {
var eitem = this.markersList.find(item => item.entity_name == phone);
if (eitem) {
if (this.getOnlineStatus(eitem.latest_location.loc_time) === 0) {
eitem.latest_location.speed = eitem.latest_location.speed || 0;
return this.getSpeed(eitem.latest_location.speed);
} else {
return "离线";
}
} else {
return "未开通定位";
}
} else {
return "未开通定位";
}
}
},
getTrackTreeData() {
this.apipost(
"TaskManagemnet_get_GetEmpForNowDepartmentForPath",
{
StartTime: this.dateTime
},
res => {
if (res.data.resultCode == 1) {
this.trackTreeData = res.data.data;
}
},
err => {}
);
},
getData() {
this.apipost(
"TaskManagemnet_get_GetEmpForNowDepartment",
this.msg,
res => {
if (res.data.resultCode == 1) {
this.treeData = res.data.data.List;
this.personData = res.data.data.entitiesR;
this.creatMap();
} else {
}
},
err => {}
);
},
getlist() {
this.onlineTypeList = [];
this.leaveLineTypeList = [];
this.markersList = [];
let timestamp = new Date();
let start_time = timestamp.getTime() / 1000;
let url = this.keys + "&timeStamp=" + start_time;
this.getlistIndex = 1;
this.getlistPage(url);
},
getlistPage(url) {
let that = this;
this.$http
.get(
"https://bird.ioliu.cn/v1?url=http://yingyan.baidu.com/api/v3/entity/search" +
url +
"&page_index=" +
this.getlistIndex +
"&page_size" +
this.page_size100
)
.then(res => {
this.markersList = this.markersList.concat(res.data.entities);
if (that.getlistIndex * this.page_size100 < res.data.total) {
that.getlistIndex += 1;
that.getlistPage(url);
} else {
that.onlinePerson = 0;
that.personData.forEach(person => {
let item = that.markersList.find(
markers => markers.entity_name == person.entity_name
);
if (item) {
if (that.getOnlineStatus(item.latest_location.loc_time) === 0) {
that.onlineTypeList.push(person);
that.onlinePerson += 1;
} else {
that.leaveLineTypeList.push(person);
}
} else {
that.leaveLineTypeList.push(person);
}
});
}
});
},
// 轨迹请求
getPersonList(obj) {
this.entity_name = obj.Phone;
let timestamp = new Date(this.dateTime);
let start_time = timestamp.getTime() / 1000;
let end_time = start_time + 86400;
let canshu = "need_denoise=0,need_vacuate=0,need_mapmatch=0";
this.isCkedAll.forEach(item => {
if (this.isCkedAll.findIndex(item => item == "need_denoise") != -1) {
canshu = canshu.replace("need_denoise=0", "need_denoise=1");
}
if (this.isCkedAll.findIndex(item => item == "need_vacuate") != -1) {
canshu = canshu.replace("need_vacuate=0", "need_vacuate=1");
}
if (this.isCkedAll.findIndex(item => item == "need_mapmatch") != -1) {
canshu = canshu.replace("need_mapmatch=0", "need_mapmatch=1");
}
});
this.gettrackPageIndex = 1;
let url =
this.keys +
"&entity_name=" +
obj.Phone +
"&start_time=" +
start_time +
"&end_time=" +
end_time +
"&page_size=" +
this.page_size2 +
"&is_processed=" +
this.isjiuzheng +
"&process_option=" +
canshu +
",transport_mode=" +
this.transportMode;
this.gettrackPage(url);
this.Point = [];
},
gettrackPage(url) {
this.$http
.get(
"https://bird.ioliu.cn/v1?url=http://yingyan.baidu.com/api/v3/track/gettrack" +
url +
"&page_index=" +
this.gettrackPageIndex
)
.then(res => {
let xy = res.data.points;
if (xy != undefined) {
xy.forEach(x => {
this.Point.push({
xy: [x.latitude, x.longitude],
time: x.loc_time
});
});
}
if (this.gettrackPageIndex * this.page_size2 < res.data.total) {
this.gettrackPageIndex += 1;
this.gettrackPage(url);
} else {
this.creatMap();
}
});
},
getPersonListByTime() {
if (this.$route.query.EmployeeId) {
let obj = {};
obj.Phone = this.datainfo.EmLoginMobile;
this.getPersonList(obj);
} else {
this.filterText = "";
this.getTrackTreeData();
}
},
formatDate(now) {
let dateTime = new Date(now * 1000);
var year = dateTime.getFullYear(),
month =
dateTime.getMonth() + 1 >= 10
? dateTime.getMonth() + 1
: "0" + (dateTime.getMonth() + 1),
date =
dateTime.getDate() >= 10
? dateTime.getDate()
: "0" + dateTime.getDate(),
hour =
dateTime.getHours() >= 10
? dateTime.getHours()
: "0" + dateTime.getHours(),
minute =
dateTime.getMinutes() >= 10
? dateTime.getMinutes()
: "0" + dateTime.getMinutes(),
second =
dateTime.getSeconds() >= 10
? dateTime.getSeconds()
: "0" + dateTime.getSeconds();
return (
year +
"-" +
month +
"-" +
date +
" " +
hour +
":" +
minute +
":" +
second
);
},
playGj() {
let point = this.playPoints[this.playIndex];
if (this.playIndex > 0) {
this.MapObj.addOverlay(
new BMap.Polyline(
[this.playPoints[this.playIndex - 1], this.playIndex],
{ strokeColor: "#ffffff", strokeWeight: 1, strokeOpacity: 1 }
)
);
}
this.playIndex++;
if (this.playIndex < this.playPoints.length) {
this.playGj(this.playIndex);
} else {
}
},
creatMap() {
let map;
map = new BMap.Map("container"); // 创建Map实例
this.MapObj = map;
map.setCurrentCity("成都"); // 设置地图默认显示城市 此项是必须设置的
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
map.centerAndZoom(new BMap.Point(this.mapX, this.mapY), 18); // 初始化地图,设置中心点坐标和地图级别
let PositionList = [];
this.Point.forEach((x, index) => {
//添加轨迹点
PositionList.push(new BMap.Point(x.xy[1], x.xy[0]));
});
this.playPoints = PositionList;
if (this.Point.length > 0) {
let centerIndex = parseInt(this.Point.length / 2);
map.centerAndZoom(
new BMap.Point(
this.Point[centerIndex].xy[1],
this.Point[centerIndex].xy[0]
),
18
);
let curve = new BMap.Polyline(PositionList, {
strokeColor: "#E95252",
strokeWeight: "8", //折线的宽度，以像素为单位
strokeOpacity: 1 //折线的透明度，取值范围0 - 1
});
//画轨迹图
map.addOverlay(curve);
}
let that = this;
if (this.markersList.length > 0 && this.mapType == 1) {
this.personData.forEach(person => {
let item = this.markersList.find(
markers => markers.entity_name == person.entity_name
);
if (item) {
let myIcon = new BMap.Icon(
this.domainManager().ViittoFileUrl +
"/Upload/Icon/Common/positioning.png",
new BMap.Size(32, 40)
);
let point = new BMap.Point(
item.latest_location.longitude,
item.latest_location.latitude
);
let marker;
if (this.getOnlineStatus(item.latest_location.loc_time) === 0) {
marker = new BMap.Marker(point);
} else {
marker = new BMap.Marker(point, { icon: myIcon });
}
map.addOverlay(marker);
if (this.isShowAll == 0) {
marker.hide();
}
marker.addEventListener("click", function(e) {
let status;
if (that.getOnlineStatus(item.latest_location.loc_time) === 0) {
item.latest_location.speed = item.latest_location.speed || 0;
status = that.getSpeed(item.latest_location.speed);
} else {
status = "离线";
}
let myGeo = new BMap.Geocoder();
myGeo.getLocation(point, function(res) {
let address;
if (res) {
address = res.address;
} else {
address = "无法定位";
}
let content =
"<div class='mapLayer'>" +
"<p><img onerror='" +
that.defaultImg +
"' style='width:24px;height:24px;border-radius:12px;vertical-align: middle;' src='" +
person.EmPhoto +
"'>&nbsp;&nbsp;&nbsp;" +
person.EmName +
"</p>" +
"<p>状态：" +
status +
"</p>" +
"<p>地址：" +
address +
"</p>" +
"<p>定位：" +
item.latest_location.longitude +
"," +
item.latest_location.latitude +
"</p>" +
"<p>时间：" +
that.formatDate(item.latest_location.loc_time) +
"</p>";
("</div>");
let infoWindow = new BMap.InfoWindow(content);
map.openInfoWindow(infoWindow, point); //开启信息窗口
});
});
}
});
}
if (this.mapType == 2) {
this.lastLocation = {};
}
if (this.lastLocation.log && this.lastLocation.lat) {
//单机打开弹窗
this.mapX = this.lastLocation.log;
this.mapY = this.lastLocation.lat;
let a = this.lastLocation.log;
let b = this.lastLocation.lat;
let point = new BMap.Point(
this.lastLocation.log,
this.lastLocation.lat
);
if (this.isShowAll == 0) {
let myIcon = new BMap.Icon(
this.domainManager().ViittoFileUrl +
"/Upload/Icon/Common/positioning.png",
new BMap.Size(32, 40)
);
let marker = new BMap.Marker(point);
if (this.getOnlineStatus(this.locationLastTime) === 0) {
marker = new BMap.Marker(point);
} else {
marker = new BMap.Marker(point, { icon: myIcon });
}
map.addOverlay(marker);
}
map.centerAndZoom(point, 18);
let myGeo = new BMap.Geocoder();
let that = this;
myGeo.getLocation(point, function(res) {
let address;
if (res) {
address = res.address;
} else {
address = "无法定位";
}
let content =
"<div class='mapLayer'>" +
"<p><img onerror='" +
that.defaultImg +
"' style='width:24px;height:24px;border-radius:12px;vertical-align: middle;' src='" +
that.locationPhoto +
"'>&nbsp;&nbsp;&nbsp;" +
that.locationName +
"</p>" +
"<p>状态：" +
that.locationStatus +
"</p>" +
"<p>地址：" +
address +
"</p>" +
"<p>定位：" +
a +
"," +
b +
"</p>" +
"<p>时间：" +
that.formatDate(that.locationLastTime) +
"</p>";
("</div>");
let infoWindow = new BMap.InfoWindow(content);
map.openInfoWindow(infoWindow, point); //开启信息窗口
});
}
map.closeInfoWindow();
let start_time;
if (this.isShowAll == 1) {
// 获取经纬度范围参数
var bs = map.getBounds(); //获取可视区域
var bssw = bs.getSouthWest(); //可视区域左下角
var bsne = bs.getNorthEast(); //可视区域右上角
var topLat = bsne.lat;
var bottomLat = bssw.lat;
var leftLng = bssw.lng;
var rightLng = bsne.lng;
let timestamp = new Date();
start_time = timestamp.getTime() / 1000;
that.getboundsearch(bottomLat, leftLng, topLat, rightLng, start_time);
map.addEventListener("zoomend", function(evt) {
//缩放地图
bs = map.getBounds(); //获取可视区域
bssw = bs.getSouthWest(); //可视区域左下角
bsne = bs.getNorthEast(); //可视区域右上角
topLat = bsne.lat;
bottomLat = bssw.lat;
leftLng = bssw.lng;
rightLng = bsne.lng;
that.getboundsearch(bottomLat, leftLng, topLat, rightLng, start_time);
});
map.addEventListener("moveend", function(evt) {
//拖拽地图
bs = map.getBounds(); //获取可视区域
bssw = bs.getSouthWest(); //可视区域左下角
bsne = bs.getNorthEast(); //可视区域右上角
topLat = bsne.lat;
bottomLat = bssw.lat;
leftLng = bssw.lng;
rightLng = bsne.lng;
that.getboundsearch(bottomLat, leftLng, topLat, rightLng, start_time);
});
}
},
getboundsearch(bottomLat, leftLng, topLat, rightLng, start_time) {
var that = this;
let url =
that.keys +
"&bounds=" +
bottomLat +
"," +
leftLng +
";" +
topLat +
"," +
rightLng +
"&filter=&page_index=1&page_size=" +
this.page_size +
"&timeStamp=" +
start_time;
that.$http
.get(
"https://bird.ioliu.cn/v1?url=http://yingyan.baidu.com/api/v3/entity/boundsearch" +
url
)
.then(res => {
var tempArray = res.data.entities;
that.totalNum = 0;
if (tempArray && tempArray != null && tempArray.length > 0) {
that.personData.forEach(person => {
let item = res.data.entities.find(
markers => markers.entity_name == person.entity_name
);
if (item && that.isShowAll == 1) {
that.totalNum += 1;
}
});
}
});
}
},
mounted() {
let date = new Date();
let _y = date.getFullYear();
let _m =
date.getMonth() + 1 >= 10
? date.getMonth() + 1
: "0" + (date.getMonth() + 1);
let _d = date.getDate();
this.dateTime = _y + "-" + _m + "-" + _d;
this.getlist();
this.getTrackTreeData();
this.getData();
this.intervalid = setInterval(() => {
this.getlist();
}, 60000);
if (this.$route.query.EmployeeId) {
let id = this.$route.query.EmployeeId;
this.FinalYingYan = false;
this.getPerson(id);
this.mapType = 2;
}
}
};
</script>
<style>
.notOnlineStyle{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
}
.yingyanIcon {
width: 24px;
height: 24px;
border-radius: 12px;
display: inline-block;
vertical-align: middle;
}
.yingyanMeta .el-tree-node__content{height: 32px!important; line-height: 32px!important;}
.yingyanMeta {
color: #333;
position: absolute;
left: -20px;
top: 40px;
background: rgba(255, 255, 255, 1);
width: 300px;
height: 500px;
overflow: hidden;
z-index: 500;
transition: height .3s;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.09);
}
.yingyanMeta .el-tree{color: #333!important;}
.yingyanMeta .title {
background: #2398ff;
height: 50px;
line-height: 50px;
font-size: 14px;
color: #fff;
}
.yingyanMeta .title>div {
float: left;
width: 150px;
text-align: center;
cursor: pointer;
position: relative;
}
.yingyanMeta .el-tree-node__content>.el-tree-node__expand-icon{
padding: 0!important; margin: 3px 3px 0 3px!important;
color: #666;
}
.yingyanMeta .el-tree-node__content>.el-tree-node__expand-icon.is-leaf{
color: transparent;
}
.yingyanMeta .title .titleSjx {
width: 0;
height: 0;
border-width: 10px;
border-style: solid;
position: absolute;
left: 65px;
bottom: 0;
border-color: transparent transparent #f5f5f5 transparent;
}
.yingyanMeta .yingyanMetacont {
overflow-y: auto;
max-height: 430px;
padding-bottom:20px;
margin-top: 1px;
}
.yingyanMeta .isOnlineType {
width: 300px;
height: 40px;
line-height: 40px;
background: #f5f5f5;
}
.yingyanMeta .isOnlineType li {
float: left;
font-size: 14px;
color: #666;
height: 40px;
width: 100px;
text-align: center;
position: relative;
cursor: pointer;
}
.yingyanMeta .isOnlineType .cked {
position: absolute;
bottom: 0;
left: 0;
width:100px;height: 2px; background: #2AAFF3;
}
.yingyanMeta .yingyanMsgList {
height: 410px;
/* overflow-y: auto; */
font-size: 14px;
color: #666;
}
.yingyanMeta .yingyanMsgList li {
height: 40px;
line-height: 40px;
text-indent: 10px;
cursor: pointer;
}
.yingyanMeta .yingyanMsgList li >img{margin-right: 4px;}
.yingyanMeta .yingyanMsgList li>span {
float: right;
margin-right: 10px;
}
.yingyanMeta .yingyanMsgList li:hover {
background: #f1f1f1;
}
.yingyanRightMeta {
position: absolute;
right: 10px;
top: 10px;
background: rgba(255, 255, 255, 1);
box-shadow: 2px 2px 2px rgba(0, 0, 0, .2);
line-height: 24px;
border-radius: 4px;
padding: 10px 20px;
overflow: hidden;
z-index: 500;
font-size: 14px;
color: #333;
}
.yingyanRightMeta input {
vertical-align: sub;
margin-top: -2px;
}
.yingyanRightMeta>p {
margin-bottom: 5px;
}
.ul-container {
padding: 0 20px 0 10px;
font-size: 14px;
color: #333;
cursor: pointer;
}
.ul-container ul li {
line-height: 28px;
}
.ul-container ul li ul {
margin-left: 20px;
}
.yingyanMsgList::-webkit-scrollbar,
.yingyanMetacont::-webkit-scrollbar {
width: 4px;
height: 8px;
}
.yingyanMsgList::-webkit-scrollbar-thumb,
.yingyanMetacont::-webkit-scrollbar-thumb {
border-radius: 4px;
-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
background: #c9c9c9;
}
.mapLayer {
font-size: 12px;
width: 300px;
}
.mapLayer>p {
line-height: 20px;
}
.notOnlineStyle {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
}
.yingyanIcon {
width: 24px;
height: 24px;
border-radius: 12px;
display: inline-block;
vertical-align: middle;
}
.yingyanMeta .el-tree-node__content {
height: 32px !important;
line-height: 32px !important;
}
.yingyanMeta {
color: #333;
position: absolute;
left: -20px;
top: 40px;
background: rgba(255, 255, 255, 1);
width: 300px;
height: 500px;
overflow: hidden;
z-index: 500;
transition: height 0.3s;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.09);
}
.yingyanMeta .el-tree {
color: #333 !important;
}
.yingyanMeta .title {
background: #2398ff;
height: 50px;
line-height: 50px;
font-size: 14px;
color: #fff;
}
.yingyanMeta .title > div {
float: left;
width: 150px;
text-align: center;
cursor: pointer;
position: relative;
}
.yingyanMeta .el-tree-node__content > .el-tree-node__expand-icon {
padding: 0 !important;
margin: 3px 3px 0 3px !important;
color: #666;
}
.yingyanMeta .el-tree-node__content > .el-tree-node__expand-icon.is-leaf {
color: transparent;
}
.yingyanMeta .title .titleSjx {
width: 0;
height: 0;
border-width: 10px;
border-style: solid;
position: absolute;
left: 65px;
bottom: 0;
border-color: transparent transparent #f5f5f5 transparent;
}
.yingyanMeta .yingyanMetacont {
overflow-y: auto;
max-height: 430px;
padding-bottom: 20px;
margin-top: 1px;
}
.yingyanMeta .isOnlineType {
width: 300px;
height: 40px;
line-height: 40px;
background: #f5f5f5;
}
.yingyanMeta .isOnlineType li {
float: left;
font-size: 14px;
color: #666;
height: 40px;
width: 100px;
text-align: center;
position: relative;
cursor: pointer;
}
.yingyanMeta .isOnlineType .cked {
position: absolute;
bottom: 0;
left: 0;
width: 100px;
height: 2px;
background: #2aaff3;
}
.yingyanMeta .yingyanMsgList {
height: 410px;
/* overflow-y: auto; */
font-size: 14px;
color: #666;
}
.yingyanMeta .yingyanMsgList li {
height: 40px;
line-height: 40px;
text-indent: 10px;
cursor: pointer;
}
.yingyanMeta .yingyanMsgList li > img {
margin-right: 4px;
}
.yingyanMeta .yingyanMsgList li > span {
float: right;
margin-right: 10px;
}
.yingyanMeta .yingyanMsgList li:hover {
background: #f1f1f1;
}
.yingyanRightMeta {
position: absolute;
right: 10px;
top: 10px;
background: rgba(255, 255, 255, 1);
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
line-height: 24px;
border-radius: 4px;
padding: 10px 20px;
overflow: hidden;
z-index: 500;
font-size: 14px;
color: #333;
}
.yingyanRightMeta input {
vertical-align: sub;
margin-top: -2px;
}
.yingyanRightMeta > p {
margin-bottom: 5px;
}
.ul-container {
padding: 0 20px 0 10px;
font-size: 14px;
color: #333;
cursor: pointer;
}
.ul-container ul li {
line-height: 28px;
}
.ul-container ul li ul {
margin-left: 20px;
}
.yingyanMsgList::-webkit-scrollbar,
.yingyanMetacont::-webkit-scrollbar {
width: 4px;
height: 8px;
}
.yingyanMsgList::-webkit-scrollbar-thumb,
.yingyanMetacont::-webkit-scrollbar-thumb {
border-radius: 4px;
-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
background: #c9c9c9;
}
.mapLayer {
font-size: 12px;
width: 300px;
}
.mapLayer > p {
line-height: 20px;
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment