image.png
<template>
<el-main class="seeeductkmonitoringy">
<div
class="center"
style=" display: flex;flex-direction: row;"
>
<div
class="center-left"
style="width: calc(22.5% - 30px);border: 1px solid #dcdcdc;padding: 10px;"
>
<el-row :span="24">
<el-col :span="24">
<div style="margin: 5px">
<el-image
v-if="carInfo.vehiclePhoto!=null&&carInfo.vehiclePhoto!=''"
:src="carInfo.vehiclePhoto"
style="width: 100%;height: 180px;"
fit="contain"
></el-image>
<el-image
v-else
:src="require('../../assets/lenglianche.jpg')"
style="width: 100%;height: 180px;"
fit="contain"
></el-image>
</div>
</el-col>
</el-row>
<div style="margin-top:10px;display: flex;align-items: center;">
<img
src="../../assets/dizhi.png"
alt=""
>
<span style="font-size:14px;margin-left:5px;">{{carInfo.address}}</span></div>
<div style="margin-top:10px;display: flex;align-items: center;">
<img
src="../../assets/clxx.png"
alt=""
>
<span style="font-size:14px;margin-left:5px">{{carInfo.plateNumber}}({{carInfo.vehicleType}}/{{carInfo.vehicleColor}})</span></div>
<div style="margin-top:10px;display: flex;align-items: center;">
<img
src="../../assets/ryxx.png"
alt=""
>
<span style="font-size:14px;margin-left:5px;">{{carInfo.driverName}}({{carInfo.driverMobile}})</span></div>
<el-row :span="24">
<el-col :span="24">
<table class="DetailTable">
<tr>
<td style="font-size: 14px;width: 50px;">速度</td>
<td style="font-size: 12px;width: 20px;color: blue">慢</td>
<td style="width: 160px">
<el-slider
v-model="sudu"
:min="0"
:max='10'
style="width: 130px"
></el-slider>
</td>
<td style="font-size: 14px;color:red;">快</td>
</tr>
</table>
</el-col>
</el-row>
<el-row
style="margin-left: 5px"
:span="24"
>
<el-form :inline="true">
<!-- <el-form-item>-->
<!-- <el-col :span="5"> <el-button size="mini" @click="SetTime(1)">前1小时</el-button></el-col>-->
<!-- </el-form-item>-->
<el-form-item>
<el-col :span="4"><el-button size="mini" @click="SetTime(2)" >今天</el-button> </el-col>
</el-form-item>
<el-form-item>
<el-col :span="5"><el-button size="mini" @click="SetTime(3)">昨天</el-button></el-col>
</el-form-item>
<el-form-item>
<el-col :span="4"> <el-button size="mini" @click="SetTime(4)" >前天</el-button></el-col>
</el-form-item>
</el-form>
</el-row>
<el-row style="margin-left: 5px;margin-top: -20px">
<el-form :inline="true">
<el-form-item>
<el-date-picker
v-model="startTime"
value-format="yyyy-MM-dd HH:mm"
format="yyyy-MM-dd HH:mm"
type="datetime"
placeholder="选择开始日期时间"
size="mini"
style="width: 180px"
align="right"
>
</el-date-picker>
</el-form-item>
</el-form>
</el-row>
<el-row style="margin-left: 5px;margin-top: -20px">
<el-form :inline="true">
<el-form-item>
<el-date-picker
v-model="endTime"
type="datetime"
value-format="yyyy-MM-dd HH:mm"
format="yyyy-MM-dd HH:mm"
placeholder="选择结束日期时间"
size="mini"
style="width: 180px"
align="right"
>
</el-date-picker>
</el-form-item>
</el-form>
</el-row>
<el-row style="margin-left: 5px;margin-top: -20px">
<el-form :inline="true">
<el-form-item>
<el-button size="mini" icon="el-icon-search" type="primary" @click="StartPlay">开始回放</el-button>
</el-form-item>
<el-form-item>
<el-button size="mini" icon="el-icon-search" type="primary" @click="StopPlay">暂停回放</el-button>
</el-form-item>
</el-form>
</el-row>
</div>
<div
class="center-right"
style="width: 76%;"
>
<div style="width:100%;height: 30px;margin:5px;border:1px solid #dcdcdc; background-color:#FFFFFF;">
<div style="float: left;line-height: 30px;width: 140px;margin-left: 5px">
<span style="font-size: 14px;" v-if="sudustartTime!=''">{{sudustartTime}}</span>
<span style="font-size: 14px;" v-else>{{startTime}}</span>
</div>
<div style="float: left;line-height: 20px;margin-left: 5px;margin-top: -5px">
<el-slider v-model="hfjd" :min="min" :max='max' style="width: 350px" @input="stopHf"></el-slider>
</div>
<div style="float: left;line-height: 30px;margin-left: 15px">
<span style="font-size: 14px;" v-if="suduendTime!=''">{{suduendTime}}</span>
<span style="font-size: 14px" v-else> {{endTime}}</span>
</div>
<div style="float: right;margin-right: 10px;line-height: 30px">
<el-button
size="mini"
style="height: 20px;line-height: 0px"
type="primary"
@click="SeekDetails"
data-type='show'
id="seek"
>明细</el-button>
<el-button
size="mini"
style="height: 20px;line-height: 0px"
type="success"
@click="ExportExcel"
>导出</el-button>
</div>
</div>
<div style="width: 100%;margin-left: 5px;margin-right: 10px;margin-top: -5px">
<div
style="border: 1px solid #dcdcdc;width: 100%;z-index: 9999;display: none;"
id="showDeatils"
>
<el-table
:data="weizhideatails"
size="mini"
ref="editTable"
@row-click="GetDataCenterm"
height="155"
:header-cell-style="tableHeaderColor"
style="width: 98%;"
>
<el-table-column
label="序号"
width="60px"
align="center"
>
<template slot-scope="scope">
{{scope.$index+1}}
</template>
</el-table-column>
<el-table-column
label="时间"
align="center"
width="140px"
prop="sysTime"
>
</el-table-column>
<el-table-column
label="(经度，纬度)"
align="center"
>
<template slot-scope="scope">
({{scope.row.jingDu}},{{scope.row.weiDu}})
</template>
</el-table-column>
<el-table-column
label="速度（km/h）"
align="center"
width="110px"
prop="su"
>
</el-table-column>
<el-table-column
label="温度(℃)"
width="80px"
align="center"
>
<template slot-scope="scope">
<span v-if="scope.row.warningType==''">
<span>{{scope.row.temperature}}</span>
</span>
<span v-else>
<span style="color: red">{{scope.row.warningTemperature}}</span>
</span>
</template>
</el-table-column>
<el-table-column
label="当前位置"
:show-overflow-tooltip="true"
align="center"
>
<template slot-scope="scope">
{{scope.row.currentPosition}}
</template>
</el-table-column>
</el-table>
</div>
<!-- <div-->
<!-- id="mapContainer"-->
<!-- style="height:530px;width:100%;"-->
<!-- ></div>-->
<baidu-map
id="seekeducationbaidumap"
class="map"
:center="center"
:zoom="zoom"
:scroll-wheel-zoom="true"
@ready="handler"
@moving="syncCenterAndZoom"
@moveend="syncCenterAndZoom"
@zoomend="syncCenterAndZoom"
>
<bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation>
<bml-marker-clusterer :averageCenter="true">
<bm-marker
v-for="(item,i) in pink"
:position="{lat: item.lat, lng: item.lng}"
:dragging="false"
:key="i"
>
<bm-label
:content="item.title"
:labelStyle="{cursor:'pointer',fontFamily:'MicrosoftYaHei',color: '#0065B3', fontSize : '14px',padding:'5px 8px',borderColor:'#159fb3',backgroundColor:'rgb(227,227,227)',borderRadius:'5px'}"
:offset="{width: -50, height: -35}"
></bm-label>
</bm-marker>
</bml-marker-clusterer>
<bm-marker v-if="bPoints.length>0" :position="{lng: bPoints[0].lng, lat: bPoints[0].lat}"
:dragging="true"
:icon="{url: 'https://ygst.etmobile.net/qi.png', size: {width: 32, height: 32}}"
>
</bm-marker>
<bm-marker v-if="bPoints.length>1" :position="{lng: bPoints[bPoints.length-1].lng, lat: bPoints[bPoints.length-1].lat}"
:dragging="true"
:icon="{url: 'https://ygst.etmobile.net/zhong.png', size: {width: 32, height: 32}}"
>
</bm-marker>
<div v-for="(item,i) in carlist" :key="i">
<bm-marker v-if="item.vehicleStatus=='1'" :position="{lng: item.jingDu, lat: item.weiDu}"
:dragging="true"
:icon="{url: 'https://ygst.etmobile.net/tinliu.png', size: {width: 32, height: 32}}"
@click="infoWindowOpen(i)"
>
<bm-info-window :position="{lng: item.jingDu, lat: item.weiDu}" :show="item.showFlag" @close="infoWindowClose(i)">
<div style='width: 300px;font-size:12px;'>
<table style='magin-top:10px;magin-left:10px;height: 100%;width: 100%;'>
<tr>
<td style='width:180px;font-size: 16px' text-align='left' >序号：P{{i}}</td>
</tr>
<tr>
<td style='width:300px;font-size: 16px' text-align='left'>停留时间：{{item.residenceTime}}</td>
</tr>
<tr>
<td style='width:300px;font-size: 16px' text-align='left' >开始时间：{{item.datetime}}</td>
</tr>
<tr>
<td style='width:180px;font-size: 16px' text-align='left' >结束时间：{{item.serverTime}}</td>
</tr>
<tr>
<td style='width:180px;font-size: 16px' text-align='left' >当前位置：{{item.currentPosition}}</td>
</tr>
</table>
</div>
</bm-info-window>
</bm-marker>
</div>
<bm-polyline :path="bPoints" stroke-color="red" :stroke-opacity="1" :stroke-weight="5" ></bm-polyline>
<bm-polyline :path="bcarlist" stroke-color="green" :stroke-opacity="1" :stroke-weight="5" ></bm-polyline>
<bm-marker :position="{lng: movecar.lng, lat: movecar.lat}"
:dragging="false"
:rotation="rotation"
:icon="{url: 'https://ygst.etmobile.net/car.png', size: {width: 32, height: 32}}"
>
<bm-label
:content="showtemp"
:labelStyle="labelStyle"
:offset="{width: 18, height: -18}"
></bm-label>
</bm-marker>
</baidu-map>
<div id="up-map-div">
<div style="width:100%;height:30px;border-bottom: 1px solid #dcdcdc;line-height: 30px">
<div style="float:left;font-size: 16px;">
<span style="color:#000;font-weight: bold;margin-left: 10px">{{vehicle.chepaihao}}</span>
<span style="margin-left: 10px">数据详情</span>
</div>
<div
style="float:right;margin-top: 3px;cursor: pointer;margin-right: 10px"
@click="changeImg(10)"
>
<img
src="../../assets/up.png"
height="20"
width="20"
id="JTdownimgUrl"
>
<img
src="../../assets/down.png"
height="20"
width="20"
id="JTupimgUrl"
style="display: none"
>
</div>
</div>
<div
style="width: 100%"
id="JTshowDiv"
>
<div style="font-size: 16px;">
<span style="margin-left:20px;color: #000;">时间：</span>
<span class="col-md-14">{{vehicle.sysTime}}</span>
</div>
<div style="margin-top: 5px;font-size: 16px;">
<span style="margin-left:20px;color: #000">速度：</span>
<span class="col-md-14">{{vehicle.su}}km/h</span>
</div>
<div style="margin-top: 5px;font-size: 16px;">
<span style="margin-left:20px;color: #000">温度：</span>
<span class="col-md-14">
<span v-if="vehicle.warningType==''||vehicle.warningType==null">
<span>{{vehicle.temperature}}℃</span>
</span>
<span v-else>
<span style="color: red">{{vehicle.warningTemperature}}℃</span>
</span>
</span>
</div>
<div style="margin-top: 5px;font-size: 16px;">
<span style="margin-left:20px;color: #000">里程：</span>
<span class="col-md-14">{{vehicle.mileage}}公里</span>
</div>
<div style="margin-top: 5px;font-size: 16px;">
<span style="margin-left:20px;color: #000">位置：</span>
<span class="col-md-14">{{vehicle.currentPosition}}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</el-main>
</template>
<script>
import axios from "axios";
import { canTeenAnalysisI } from "../../common/js/config";
// 按需引入点聚合
import { BmlMarkerClusterer } from "vue-baidu-map";
export default {
name: "seekmonitoring",
components: {
BmlMarkerClusterer
},
data() {
return {
labelStyle:{cursor:'pointer',fontFamily:'MicrosoftYaHei',color: '#0065B3', fontSize : '14px',padding:'5px 8px',borderColor:'#159fb3',backgroundColor:'rgb(227,227,227)',borderRadius:'5px'},
rotation:0,
showtemp:"0",//展示温度
zoom: 17,
center: {
lat: 31.668877,
lng: 120.645256
},
movecar:{
lat: 31.668877,
lng: 120.645256
},
simId: "",
weizhideatails: [],
hfjd: 0,
min: 0,
max: 0,
map: null,
carInfo: {
name: "",
driverName: "",
vehiclePhoto: "",
vehicleColor: "",
driverMobile: "",
vehicleBrand: "",
vehicleType: "",
plateNumber: "",
address: ""
},
vehicle: {
chepaihao: "",
currentPosition: "",
sysTime: "",
su: "",
mileage: "",
temperature: "",
warningTemperature: "",
warningType: "",
jingDu:"",
weidu:"",
},
sudu: 5,
startTime: "",
endTime: "",
sudustartTime:"",
suduendTime:"",
tableData: [
{
date: "12:12",
dw: "12"
},
{
date: "13:12",
dw: "18"
}
],
dwtime: "",
activeName: "",
activeType: "1",
count: 0,
points: [], ////原始点信息数组
bPoints: [], //百度化坐标数组。用于更新显示范围
timer: null,
timer1: null,
chepaihao: "",
carlist: [], //存放车辆信息
bcarlist: [],
hfpoints: [],
zcdata: [],
supplierId: "",
licenseNo: "",
bodyWrapper: {
scrollTop: "",
scrollHeight: ""
},
pink: [],
};
},
created() {},
mounted() {
var js= JSON.parse(sessionStorage.getItem("SunInfolocal"));
var publicdata = JSON.parse(sessionStorage.getItem("loginInfoStorage"));
console.log(publicdata)
console.log("saads",js);
this.supplierId=js.boundSupplierId;
this.licenseNo=publicdata.eiLicenseNo;
this.simId = this.$route.query.simId;
this.SetTime(2);
this.getdata();
this.getschoolMapData();
},
methods: {
//查询供应商配送的学校信息
getschoolMapData() {
var that = this;
that.$get(canTeenAnalysisI.GetSchoolInfoBySupplierid + "?" +
"supplierId=" +
that.supplierId +
"&startDate=" +
that.startTime+
"&endDate="+
that.endTime
)
.then(
function(res) {
if (res.code == 200) {
var pinkData = [];
if (res.data && res.data.length > 0) {
res.data.forEach(function(ele, ind) {
pinkData.push({
lat: ele.lat,
lng: ele.lng,
title: ele.canteenName,
address: ele.address
});
});
if (pinkData) {
that.pink = pinkData;
// console.log(that.pink, 'pinkData');
}
}
} else {
that.$message("获取数据失败");
}
},
function(err) {
that.$message("请求服务器失败");
console.log(err,'加载地图数据出错!')
}
);
},
//标注点点击打开信息窗
infoWindowOpen(index)
{
this.carlist[index].showFlag=true;
},
//关闭信息窗
infoWindowClose(index)
{
this.carlist[index].showFlag=false;
},
//百度地图初始化
handler({ BMap, map }) {
// console.log(BMap, map)
// this.center.lng = 116.404
// this.center.lat = 39.915
// this.zoom = 16
},
syncCenterAndZoom (e) {
const {lng, lat} = e.target.getCenter()
this.center.lng = lng
this.center.lat = lat
this.zoom = e.target.getZoom()
},
/*点击行事件*/
GetDataCenterm(record) {
},
/*导出历史轨迹信息*/
ExportExcel() {
var that = this;
axios
.get(
canTeenAnalysisI.ExportExcelInfo +
"?endTime=" +
this.endTime +
"&startTime=" +
this.startTime +
"&simId=" +
that.simId +
"&licenseNo=" +
that.licenseNo,
{
responseType: "blob"
}
)
.then(
function(res) {
var blob = new Blob([res.data], {
type: "application/vnd.ms-excel;charset=utf-8"
});
var downloadElement = document.createElement("a");
var href = window.URL.createObjectURL(blob); //创建下载的链接
downloadElement.href = href;
downloadElement.download =
"历史轨迹" + new Date().getTime() + ".xlsx"; //下载后文件名
document.body.appendChild(downloadElement);
downloadElement.click(); //点击下载
document.body.removeChild(downloadElement); //下载完成移除元素
window.URL.revokeObjectURL(href); //释放掉blob对象
},
function(err) {
that.$message("请求服务器失败");
}
);
},
changeImg() {
if ($("#JTshowDiv").css("display") == "none") {
$("#JTshowDiv").css("display", "");
$("#JTupimgUrl").css("display", "none");
$("#JTdownimgUrl").css("display", "");
} else {
$("#JTshowDiv").css("display", "none");
$("#JTupimgUrl").css("display", "");
$("#JTdownimgUrl").css("display", "none");
}
},
/*明细*/
SeekDetails() {
var name = $("#seek").attr("data-type");
if (name == "show") {
$("#showDeatils").show();
$("#up-map-div").hide();
$("#seek").attr("data-type", "hide");
} else {
$("#seek").attr("data-type", "show");
$("#up-map-div").show();
$("#showDeatils").hide();
}
},
/*滑块控制进度*/
stopHf() {
this.points = []; ////原始点信息数组
this.bcarlist = [];
this.hfpoints = [];
this.weizhideatails=[];
clearTimeout(this.timer1);
this.count = this.hfjd;
for (var i = 0; i < this.count; i++) {
var p = new BMap.Point(this.zcdata[i].jingDu, this.zcdata[i].weiDu);
this.points.push(p);
this.hfpoints.push(p);
this.bcarlist.push({
lng: this.zcdata[i].jingDu,
lat: this.zcdata[i].weiDu,
});
this.weizhideatails.push(
{
jingDu:this.zcdata[i].jingDu,
weiDu: this.zcdata[i].weiDu,
chepaihao: "",
currentPosition: this.zcdata[i].currentPosition,
sysTime: this.zcdata[i].sysTime,
su: this.zcdata[i].su,
mileage:this.zcdata[i].mileage,
temperature: this.zcdata[i].temperature,
warningTemperature: this.zcdata[i].warningTemperature,
warningType: this.zcdata[i].warningType,
}
)
}
this.dynamicLine();
},
/*开始回放*/
StartPlay() {
if (this.showinfo == "2") {
this.showinfo = "1";
this.dynamicLine();
} else {
this.points = []; ////原始点信息数组
this.bPoints = [];
this.carlist = [];
this.bcarlist = [];
this.hfpoints = [];
this.weizhideatails = []; // 存放详细的表格
this.vehicle.mileage = "";
this.vehicle.currentPosition = "";
this.vehicle.su = "";
this.vehicle.sysTime = "";
this.vehicle.warningTemperature = "";
this.vehicle.temperature = "";
this.vehicle.warningType = "";
this.vehicle.chepaihao = "";
clearTimeout(this.timer1);
this.count = 0;
this.getdata();
}
},
/*暂停回放*/
StopPlay() {
this.showinfo = "2";
clearTimeout(this.timer1);
},
formatter (thistime, fmt) {
let $this = new Date(thistime)
let o = {
'M+': $this.getMonth() + 1,
'd+': $this.getDate(),
'h+': $this.getHours(),
'm+': $this.getMinutes(),
's+': $this.getSeconds(),
'q+': Math.floor(($this.getMonth() + 3) / 3),
'S': $this.getMilliseconds()
}
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, ($this.getFullYear() + '').substr(4 - RegExp.$1.length))
}
for (var k in o) {
if (new RegExp('(' + k + ')').test(fmt)) {
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
}
}
return fmt
},
SetTime(val) {
var curDate = new Date();
var preDate = new Date(curDate.getTime() - 24*60*60*1000); //前一天
var nextDate = new Date(curDate.getTime() -48*60*60*1000); //前两天
if(val=="3")
{
this.startTime=this.formatter(preDate,"yyyy-MM-dd")+" "+"00"+":"+"00";
this.endTime=this.formatter(preDate,"yyyy-MM-dd")+" "+"23"+":"+"59";
}
if(val=="4")
{
this.startTime=this.formatter(nextDate,"yyyy-MM-dd")+" "+"00"+":"+"00";
this.endTime=this.formatter(nextDate,"yyyy-MM-dd")+" "+"23"+":"+"59";
}
if(val=="2")
{
this.startTime=this.formatter(curDate,"yyyy-MM-dd")+" "+"00"+":"+"00";
this.endTime=this.formatter(curDate,"yyyy-MM-dd")+" "+"23"+":"+"59";
}
},
getdata() {
//获取到的坐标点
var that = this;
that.bPoints = [];
that.carlist = [];
that
.$get(
canTeenAnalysisI.carMonitoringHistory +
"?endTime=" +
this.endTime +
"&startTime=" +
this.startTime +
"&simId=" +
that.simId +
"&licenseNo=" +
that.licenseNo
)
.then(
function(res) {
if (res.code == 200) {
that.carInfo.driverMobile = res.data.driverMobile;
that.carInfo.driverName = res.data.driverName;
that.carInfo.plateNumber = res.data.plateNumber;
that.chepaihao = res.data.plateNumber;
that.carInfo.vehicleColor = res.data.vehicleColor;
that.carInfo.vehicleBrand = res.data.vehicleBrand;
that.carInfo.vehicleType = res.data.vehicleType;
that.carInfo.name = res.data.name;
that.carInfo.address = res.data.address;
that.carInfo.vehiclePhoto = res.data.vehiclePhoto;
if (res.data.positionings.length == 0) {
that.$message("查询的时间段没有历史轨迹");
return;
}
that.max=0;
that.hfjd=0;
that.max = res.data.positionings.length;
that.zcdata = res.data.positionings;
that.sudustartTime=res.data.positionings[0].sysTime;
that.suduendTime=res.data.positionings[res.data.positionings.length-1].sysTime;
for (var i = 0; i < res.data.positionings.length; i++) {
var p = {
lng: res.data.positionings[i].jingDu,
lat: res.data.positionings[i].weiDu
}
that.bPoints.push(p);
that.carlist.push({
jingDu: res.data.positionings[i].jingDu,
weiDu: res.data.positionings[i].weiDu,
mileage: res.data.positionings[i].mileage,
currentPosition: res.data.positionings[i].currentPosition,
sysTime: res.data.positionings[i].sysTime,
su: res.data.positionings[i].su,
vehicleStatus: res.data.positionings[i].vehicleStatus,
residenceTime: res.data.positionings[i].residenceTime, //停留时长
serverTime: res.data.positionings[i].serverTime, //结束时间
datetime: res.data.positionings[i].datetime, //开始时间
gpsStatus: res.data.positionings[i].gpsStatus, //上限还是下限
warningType: res.data.positionings[i].warningType, //范围预警还是温度预警
warningTemperature:
res.data.positionings[i].warningTemperature, //预警温度
temperature: res.data.positionings[i].temperature,//温度
showFlag:false,
});
}
console.log("sadsadasd",that.bPoints);
// that.add(that.bPoints);
that.dynamicLine();
} else {
that.$message("获取数据失败");
}
},
function(err) {
that.$message("请求服务器失败");
}
);
},
tableHeaderColor({ row, column, rowIndex, columnIndex }) {
if (rowIndex === 0) {
return "color: #000;font-weight:bold;font-size:14px";
}
},
driveline() {
let adddian={
lng:this.carlist[this.count].jingDu,
lat:this.carlist[this.count].weiDu,
}
this.movecar.lng=this.carlist[this.count].jingDu,
this.movecar.lat=this.carlist[this.count].weiDu,
this.center.lng=this.carlist[this.count].jingDu,
this.center.lat=this.carlist[this.count].weiDu,
this.bcarlist.push(adddian);
this.vehicle.mileage = this.carlist[this.count].mileage;
this.vehicle.currentPosition = this.carlist[this.count].currentPosition;
this.vehicle.su = this.carlist[this.count].su;
this.vehicle.sysTime = this.carlist[this.count].sysTime;
this.vehicle.warningTemperature = this.carlist[this.count].warningTemperature;
this.vehicle.temperature = this.carlist[this.count].temperature;
this.vehicle.warningType = this.carlist[this.count].warningType;
this.vehicle.jingDu=this.carlist[this.count].jingDu;
this.vehicle.weiDu=this.carlist[this.count].weiDu;
this.weizhideatails.push(this.vehicle)
this.$refs.editTable.bodyWrapper.scrollTop = this.$refs.editTable.bodyWrapper.scrollHeight;//表格定位到最后一行
if (this.count > 0 && this.count < this.bPoints.length) {
this.rotation=parseInt(this.getAngle(this.bPoints[this.count - 1], this.bPoints[this.count]));//改变车辆的运行轨迹
}
var temp = this.carlist[this.count].warningTemperature; //用来放温度
if (this.vehicle.warningType == "") {
temp = this.carlist[this.count].temperature;
}
this.showtemp=temp+"";
this.count++;
},
/*设置小车方向*/
getAngle(n, next) {
//console.log("ssad",n)
//console.log("ssad",next)
var ret;
var w1 = (n.lat / 180) * Math.PI;
var j1 = (n.lng / 180) * Math.PI;
var w2 = (next.lat / 180) * Math.PI;
var j2 = (next.lng / 180) * Math.PI;
ret =
4 * Math.pow(Math.sin((w1 - w2) / 2), 2) -
Math.pow(Math.sin((j1 - j2) / 2) * (Math.cos(w1) - Math.cos(w2)), 2);
ret = Math.sqrt(ret);
// var temp = Math.sin(Math.abs(j1 - j2) / 2) * (Math.cos(w1) + Math.cos(w2));
var temp = Math.sin((j1 - j2) / 2) * (Math.cos(w1) + Math.cos(w2));
//console.log(temp)
ret = ret / temp;
ret = (Math.atan(ret) / Math.PI) * 180;
ret += 90;
// 这里用如此臃肿的if..else是为了判定追踪单个点的具体情况,从而调整ret的值
if (j1 - j2 < 0) {
// console.log('j1<j2')
if (w1 - w2 < 0) {
// console.log('w1<w2')
ret;
} else {
// console.log('w1>w2')
ret = -ret + 180;
}
} else {
// console.log('j1>j2')
if (w1 - w2 < 0) {
// console.log('w1<w2')
ret = 180 + ret;
} else {
// console.log('w1>w2')
ret = -ret;
}
}
return ret;
},
dynamicLine() {
this.hfjd = this.count; //进度条
if (this.count == this.bPoints.length) return;
this.driveline();
var sudutime = 10000 - this.sudu * 1000 == 0 ? 500 : 10000 - this.sudu * 1000; //控制速度
clearTimeout(this.timer1); //这不不能少
this.timer1 = setTimeout(this.dynamicLine, sudutime);
},
}
};
</script>
<style lang="less">
.seeeductkmonitoringy {
.el-table--scrollable-x,
.el-table__body-wrapper {
overflow-x: none;
}
.DetailTable {
width: 100%;
}
#seekeducationbaidumap {
width: 100%;
height: 530px;
/*
去除百度地图版权
去除右上角[地图、卫星、三维]控件
去除百度地图右上角平移缩放控件的市县区文字
*/
.anchorBL,
/*.anchorTR,*/
.BMap_zlHolder,
/*隐藏因为播放街景失败的"您未安装Flash Player播放器或者版本过低"提示图层导致无法继续点击地图*/
[id^=PanoramaFlashWraperTANGRAM] {
display: none;
visibility: hidden;
}
}
.DetailTable td {
height: 25px;
line-height: 25px;
}
#up-map-div {
width: 300px;
top: 200px;
right: 40px;
position: absolute;
z-index: 9999;
border: 1px solid #dcdcdc;
background-color: #ffffff;
}
.col-md-11 {
width: 100px;
text-align: left;
padding-left: 5px;
padding-right: 10px;
font-size: 14px;
font-family: "微软雅黑";
font-weight: 800;
}
.el-slider__button-wrapper {
z-index: 2;
}
.col-md-12 {
text-align: left;
font-size: 14px;
font-family: "微软雅黑";
color: #4e4e4e;
}
}
</style>
<style>
.BMap_cpyCtrl {
display: none;
}
.anchorBL {
display: none;
}
</style>
网友评论