<style>
.page_VisitRecord ._scrollbar::-webkit-scrollbar{width: 4px;height: 8px;}
.page_VisitRecord ._scrollbar::-webkit-scrollbar-thumb{border-radius: 4px;-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);background: #c9c9c9;}
.page_VisitRecord ._scrollbar::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);border-radius: 4px;background: #EDEDED;}
.page_VisitRecord>div>ul{height: 650px;margin: 20px 20px;background-color: #FFFFFF;border: 1px solid #F1F2F5;padding: 20px;border-radius: 4px;padding-right: 16px;margin-bottom: 5px}
.page_VisitRecord ._vr_left{width: 630px;}
.page_VisitRecord ._vr_right{width: 1110px;}
.page_VisitRecord ._tit{padding-left: 10px;border-left: 3px solid #E95252; font-size: 14px;color: #000000;margin: 20px 0 0 20px;}
.page_VisitRecord .icon-ditu{color: #E95252;cursor: pointer;}
.page_VisitRecord>div._vr_left> ul{padding-left: 115px;overflow-x: auto}
.page_VisitRecord ._vr_left ul li{position: relative;border-left: 1px solid #F5F5F5;padding-bottom: 20px}
.page_VisitRecord ._vr_left ._time{display: inline-block;border: 1px solid #CCCCCC;position: absolute;left: -100px;padding: 2px 10px;font-size: 14px;color: #666666;border-radius: 4px}
.page_VisitRecord span._dot{font-size: 10px;width: 16px;height: 16px;border-radius: 50%;background-color: #257BF1;border: 2px solid #B7D3FA;display: inline-block;text-align: center;color: white;line-height: 11px;position: absolute;left: -8px}
.page_VisitRecord ._box{padding: 20px 10px;border: 1px solid #F1F2F5;margin-left: 16px;border-radius: 4px;font-size: 14px;color: #333333;cursor: pointer;}
.page_VisitRecord ._box p span{color: #333333;font-weight: bold}
.page_VisitRecord ._box:hover,.page_VisitRecord ._vr_right>ul li:hover{box-shadow:0px 0px 20px rgba(191,191,191,1);transition: all linear 0.5s;}
.page_VisitRecord ._vr_left ._info{display: flex;margin-top: 10px;}
.page_VisitRecord ._vr_left ._info>div{flex: 1;border-radius: 4px ;color: white;padding:10px 16px;background-color: #E95252}
.page_VisitRecord ._vr_left ._info>div:nth-child(1){margin-right: 5px}
.page_VisitRecord ._vr_left ._info>div:nth-child(2){margin-left: 5px}
.page_VisitRecord>div._vr_right>ul{padding: 0;background-color: transparent;border: none}
.page_VisitRecord ._vr_right>ul li{padding: 20px;background-color: #FFFFFF;border: 1px solid #F1F2F5;border-radius: 4px ;margin-bottom: 10px;display: flex;align-items: center}
.page_VisitRecord ._vr_right ._head{width:48px;height: 48px;border-radius: 50%;}
.page_VisitRecord ._vr_right ._info{margin-left: 10px;width: 300px;}
.page_VisitRecord ._vr_right ._info p:nth-child(1){color:#333333;font-size: 16px;margin-bottom: 5px;width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.page_VisitRecord ._vr_right ._info p:nth-child(2){font-size: 14px;color: #666666}
.page_VisitRecord ._vr_right .icon-img_dianhua{font-size:12px;color: #09D49D }
.page_VisitRecord ._vr_right ._status{margin-left: 20px;width: 100px;}
.page_VisitRecord ._vr_right ._status p{font-size: 16px;color: #333333}
.page_VisitRecord ._vr_right ._status p .icon-yiquxiao{font-size: 14px;color: #E95252}
.page_VisitRecord ._vr_right ._status p .icon-yiqueren{font-size: 14px;color: #4BCA81}
.page_VisitRecord ._vr_right ._time{margin-left: 20px}
.page_VisitRecord ._vr_right ._time p{font-size: 16px;color: #333333}
.page_VisitRecord ._vr_right ._time p .icon-qingjia{font-size: 14px;color: #CCCCCC}
.page_VisitRecord ._record{width: 300px;margin-left: 20px;font-size: 16px}
.page_VisitRecord ._record>div p:nth-child(1) .icon-dingdanhao{color: #CCCCCC;font-size: 14px}
.page_VisitRecord ._record>div p:nth-child(2){color:#666666;padding-left:25px;padding-top: 5px}
.page_VisitRecord .fixedLayer{position: fixed;width: 100%; height: 100%; left: 0; top: 0; z-index: 999; background: rgba(0,0,0,.4);}
.page_VisitRecord .fixedLayer .cont{width: 80%; height: 80%; margin:50px auto; position: relative;}
.page_VisitRecord .fixedLayer .cont .contNote{position: absolute; z-index: 5555; min-width: 300px; height: 150px; padding: 20px; background: transparent;}
.page_VisitRecord .fixedLayer .cont .contNote>img{border-radius: 32px; float: left; margin-right: 12px; width: 64px; height: 64px; border:2px solid #fff}
.page_VisitRecord .fixedLayer .cont .contNote>p{line-height: 28px;}
.page_VisitRecord .fixedLayer .tripDistanceDiv{min-width:250px; margin:10px 0 0 75px; height: 76px; padding:10px; background: #fff; border-radius: 10px;}
.page_VisitRecord .fixedLayer .tripDistanceDiv>div{float:left;margin: 5px 8px 0;}
.page_VisitRecord .fixedLayer .tripDistanceDiv>div p{line-height: 20px;}
.page_VisitRecord .fixedLayer .tripDistanceDiv ._top{font-size: 14px; color: #4d4d4d;}
.page_VisitRecord .fixedLayer .tripDistanceDiv ._bottom{font-size: 16px; color: #4d4d4d; font-weight: bold;}
</style>
<template>
<div class="page_VisitRecord clearfix">
<div class="_vr_left fl">
<p class="_tit">{{$t('salesModule.VisitRecordList')}}</p>
<ul class="clearfix _scrollbar">
<li v-for="(item,index) in VisitLineList">
<span class="_time">{{item.dateStr}}</span>
<span class="_dot"></span>
<div class="_box" @click="getTodayVisitList(item.date),thisDay=item.dateStr">
<p>{{$t('Airticket.Air_Trip')}} <span>{{item.tripDistance==null?'0':item.tripDistance}}{{$t('pub.KM')}}</span></p>
<div class="_info">
<div><i class="iconfont icon-xinzengkehu-copy"></i> {{$t('salesModule.addCustomer')}} {{item.addNewCustomerCount}}</div>
<div><i class="iconfont el-icon-view"></i> {{$t('salesModule.VisitingCustomers')}} {{item.visitOldCustomerCount}}</div>
<div style="margin-left:10px;"><i class="iconfont icon-qianming"></i> {{$t('pub.SignIN')}} {{item.signInCount}}</div>
</div>
</div>
</li>
</ul>
</div>
<div class="_vr_right fl">
<p class="_tit">{{thisDay}}{{$t('salesModule.VisitRecord')}} <i class="iconfont icon-ditu" @click="getYingyan"></i></p>
<ul>
<li v-for="(item,index) in TodayVisitList">
<img class="_head" src="../../assets/img/bg_z1@3x.png" alt="">
<div class="_info">
<div>
<p>
<el-tooltip class="item" effect="dark" :content="item.customerName" placement="top-start" popper-class="max-w250">
<span>{{item.customerName}}</span>
</el-tooltip>
</p>
<p><i class="iconfont icon-img_dianhua"></i> {{item.contact}} {{item.contactNumber}}</p>
</div>
</div>
<div class="_status">
<p v-if="item.createFromType==1&&item.visitState==1"><i class="iconfont icon-yiquxiao"></i> {{$t('salesModule.noVisited')}}</p>
<p v-if="item.createFromType==1&&item.visitState==2"><i class="iconfont icon-yiqueren"></i> {{$t('salesModule.haveGoutong')}}</p>
<p v-if="item.createFromType==2">{{$t('salesModule.addCustomer')}}</p>
</div>
<div class="_time" v-if="item.visitState==2">
<p><i class="iconfont icon-qingjia"></i> {{item.visitDateTime}}</p>
</div>
<div class="_record" v-if="item.visitState==2">
<div>
<p><i class="iconfont icon-dingdanhao"></i> {{$t('salesModule.fwRecord')}}</p>
<p>{{item.visitRecord}}</p>
</div>
</div>
</li>
<li v-show="TodayVisitList.length==0">
<div class="noData">
{{$t('system.content_noData')}}
</div>
</li>
</ul>
</div>
<div class="fixedLayer" v-show="fixedLayerShow" @click="fixedLayerShow=false">
<div class="cont" @click.stop>
<div class="contNote">
<img v-if='!headIcon' src="../../assets/img/litheader.png"/>
<img v-if='headIcon' :onerror="defaultImg" :src='headIcon'/>
<p style="font-size: 16px; color: #000; -webkit-text-stroke: 0.1px #fff;">{{name}}</p>
<p style="font-size: 14px; color: #4D4D4D; -webkit-text-stroke: 0.1px #fff;">{{DepartName}}·{{PostName}}</p>
<div class="tripDistanceDiv">
<div>
<p class="_top">{{$t('salesModule.gjx')}}</p>
<p class="_bottom">{{tripDistance=='km'?'0km':tripDistance}}</p>
</div>
<div style="width: 1px; height: 36px; background: #e6e6e6;"></div>
<div>
<p class="_top">{{$t('salesModule.ghs')}}</p>
<p class="_bottom">{{costTime}}</p>
</div>
</div>
</div>
<div style="width: 100%; height: 100%; border-radius: 10px;" id="container"></div>
</div>
</div>
</div>
</template>
<script>
import BMap from 'BMap'
export default {
data(){
return{
VisitLineList:[],
TodayVisitList:[],
defaultImg: 'this.src="' + require("../../assets/img/litheader.png") + '"',
headIcon:'',
account:'',
thisDay:'',
fixedLayerShow:false,
time:'',
lineList:[],
Point:[],
PositionList:[],
costTime:'',
tripDistance:'',
name:'',
DepartName:'',
PostName:'',
visitMsg:{
pageIndex:1,
pageSize:1000,
empId:0,
},
}
},methods:{
getYingyan(){
this.apipost('app_get_visit_line',{visitDate:this.time},res=>{
this.costTime=res.data.data.costTime
this.tripDistance=res.data.data.tripDistance
})
this.fixedLayerShow=true
let timestamp =new Date(this.time)
let start_time=timestamp.getTime()/1000
let end_time=start_time+86400
let url='?ak=L5Qw0GlbbCIMwgR4Uug3ogM40Imkd3CV&service_id=203768&entity_name='+this.account+'&start_time='+start_time+'&end_time='+end_time+'&is_processed=1&process_option=need_denoise=1,need_vacuate=1,need_mapmatch=1';
this.$http.get('https://bird.ioliu.cn/v1?url=http://yingyan.baidu.com/api/v3/track/gettrack'+url).then(res=>{
let xy=res.data.points
this.Point=[]
xy.forEach(x=>{
this.Point.push({xy:[x.latitude,x.longitude]})
})
this.creatMap()
})
},
showLocation(date){
},
getVisitLineList(){
this.apipost('app_get_visit_line_list',this.visitMsg,res=>{
if(res.data.resultCode==1){
this.VisitLineList = res.data.data.pageData
if(this.VisitLineList.length>0){
this.getTodayVisitList(this.VisitLineList[0].date)
this.thisDay = this.VisitLineList[0].dateStr
}
}else{
this.Error(res.data.message)
}
},err=>{})
},
getTodayVisitList(date){ //获取今日拜访计划
this.time=date
this.apipost('app_today_visit_list',{visitDate:date},res=>{
if(res.data.resultCode==1){
this.TodayVisitList = res.data.data;
}else{
this.Error(res.data.message)
}
},err=>{})
},
getlineList(){ // 获取数据
this.fixedLayerShow=true
this.apipost('app_get_visit_line',{visitDate:this.time},res=>{
if(res.data.resultCode==1){
this.lineList = res.data.data;
this.costTime=res.data.data.costTime
this.tripDistance=res.data.data.tripDistance
if(this.lineList){
this.Point = this.lineList.visitPoint
this.Point.forEach(x=>{
x.xy = x.point.split(',')
})
this.creatMap()
}else{
let div = document.createElement("div")
div.style.width='100%';
div.style.height='90%';
div.style.border='none';
div.style.overflow='hidden';
div.style.position='relative';
div.style.zIndex='0';
div.style.backgroundColor='rgb(243, 241, 236)';
div.style.color='rgb(0, 0, 0)';
div.style.textAlign='center';
let parent = document.getElementsByClassName('flexParent');
var map = new BMap.Map("container"); // 创建Map实例
map.centerAndZoom(new BMap.Point(104.073652,30.664369), 11); // 初始化地图,设置中心点坐标和地图级别
//添加地图类型控件
map.addControl(new BMap.MapTypeControl({
mapTypes:[
BMAP_NORMAL_MAP,
BMAP_HYBRID_MAP
]}));
map.setCurrentCity("成都"); // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
this.displatDOM()
}
}else{
this.$message.error(res.data.message)
}
},err=>{})
},
creatMap(){
var _this = this;
var map = new BMap.Map('container');
// 复杂的自定义覆盖物
function ComplexCustomOverlay(point,name,head,timeS){
this._point = point;
this._name = name;
this._head = head;
this._time = timeS;
}
ComplexCustomOverlay.prototype = new BMap.Overlay();
ComplexCustomOverlay.prototype.initialize = function(map){
this._map = map;
var div = this._div = document.createElement("div");
div.style.position = "absolute";
div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
div.style.backgroundColor = "";
// div.style.border = "1px solid #BC3B3A";
div.style.color = "#333333";
div.style.height = "auto";
div.style.padding = "5px";
div.style.lineHeight = "18px";
div.style.whiteSpace = "nowrap";
div.style.MozUserSelect = "none";
div.style.fontFamily = "PingFangSC-fine"
div.style.color="#FF6666"
div.style.fontWeight="bold"
div.style.fontSize = "12px"
var name = this._Pname = document.createElement("p");
name.style.textAlign = "center";
div.appendChild(name);
name.appendChild(document.createTextNode(this._name));
var time = this._Ptime = document.createElement("p");
time.style.textAlign = "center";
div.appendChild(time);
time.appendChild(document.createTextNode(this._time));
var headDiv = this.headDiv = document.createElement("img");
headDiv.style.backgroundColor = "#ffffff";
headDiv.style.border = "5px solid #FF6666";
headDiv.style.color = "white";
headDiv.style.height = "50px";
headDiv.style.width = "50px";
headDiv.style.borderRadius = "50%";
headDiv.style.padding = "5px";
headDiv.style.lineHeight = "18px";
headDiv.style.whiteSpace = "nowrap";
headDiv.style.MozUserSelect = "none";
headDiv.style.fontSize = "12px";
headDiv.src = this._head
div.appendChild(headDiv);
var sanjiao = document.createElement("div");
sanjiao.style.width= '0';
sanjiao.style.height= '0';
sanjiao.style.borderLeft= '3px solid transparent';
sanjiao.style.borderRight= '3px solid transparent';
sanjiao.style.borderTop= '16px solid #ff6666';
sanjiao.style.margin="0 auto";
sanjiao.style.position="relative"
sanjiao.style.top="-5px"
div.appendChild(sanjiao);
var that = this;
var arrow = this._arrow = document.createElement("div");
arrow.style.background = "url(http://map.baidu.com/fwmap/upload/r/mrep/fwmap/static/house/images/label.png) no-repeat";
arrow.style.position = "absolute";
arrow.style.width = "11px";
arrow.style.height = "10px";
arrow.style.top = "22px";
arrow.style.left = "10px";
arrow.style.overflow = "hidden";
div.appendChild(arrow);
var raduis = document.createElement("p");
raduis.style.width = "14px";
raduis.style.height = "6px";
raduis.style.borderRadius = "5px";
raduis.style.backgroundColor = "#B21C1C";
raduis.style.margin = "0 auto 0 auto"
div.appendChild(raduis);
map.getPanes().labelPane.appendChild(div);
return div;
}
ComplexCustomOverlay.prototype.draw = function(){
var map = this._map;
var pixel = map.pointToOverlayPixel(this._point);
this._div.style.left = pixel.x - parseInt(this._arrow.style.left) - 20+"px";
this._div.style.top = pixel.y - 150 + "px";
}
let centerIndex=parseInt(this.Point.length/2)
map.centerAndZoom(new BMap.Point(this.Point[centerIndex].xy[1],this.Point[centerIndex].xy[0], 32.955),15);
map.enableScrollWheelZoom();
let PositionList = []
this.Point.forEach((x,index)=>{ // 循环数据添加坐标点
if(true){
let src = "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3198678185,878755003&fm=27&gp=0.jpg"
let name = "无名大侠"
let time = "火星时间"
if(x.phtoto){
src = x.phtoto
}
if(x.name){
name = x.name
}
if(x.visitTime){
time = x.visitTime
}
PositionList.push(new BMap.Point(x.xy[1],x.xy[0]))
}
})
let curve = new BMap.Polyline(PositionList, {strokeColor:"#E95252", strokeWeight:8, strokeOpacity:1});
map.addOverlay(curve);
},
displatDOM(){
let map = document.getElementById('container')
map.style.border = "none"
},
},mounted(){
if(this.$route.query.EmployeeId){
this.visitMsg.empId=this.$route.query.EmployeeId;
}
let userInfo=this.getLocalStorage()
this.name=userInfo.emName
this.headIcon=userInfo.Icon
this.account=userInfo.ImAccount
this.DepartName=userInfo.DepartName
this.PostName=userInfo.PostName
this.getVisitLineList()
}
}
</script>