Skip to content

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

页面修改

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