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