|
@@ -2,20 +2,9 @@
|
|
|
<div class="home-container">
|
|
|
<el-card class="home-container__card">
|
|
|
<div>
|
|
|
-<!-- <div class="title">-->
|
|
|
-<!-- <span>-->
|
|
|
-<!-- 今日业务详情(集装箱)-->
|
|
|
-<!-- </span>-->
|
|
|
-<!-- <span>-->
|
|
|
-<!-- <i-->
|
|
|
-<!-- class="el-icon-refresh-right"-->
|
|
|
-<!-- style="cursor: pointer;font-size:20px"-->
|
|
|
-<!-- @click="refresh"-->
|
|
|
-<!-- ></i>-->
|
|
|
-<!-- </span>-->
|
|
|
-<!-- </div>-->
|
|
|
<div class="content" v-loading="loading">
|
|
|
- <avue-crud :data="tableData" :option="option" :key="key" ref="crud" @refresh-change="refresh" @resetColumn="resetColumn"
|
|
|
+ <avue-crud :data="tableData" :option="option" :key="key" ref="crud" @refresh-change="refresh"
|
|
|
+ @resetColumn="resetColumn"
|
|
|
@saveColumn="saveColumn">
|
|
|
<template slot="menuLeft">
|
|
|
<span>今日业务详情(集装箱)</span>
|
|
@@ -55,20 +44,6 @@
|
|
|
lock-scroll
|
|
|
width="80%">
|
|
|
<div id="container"></div>
|
|
|
- <div class="input-card" style="right: 10.3%;bottom: 10.3%" v-if="this.lineArr.length>0">
|
|
|
- <h4>轨迹回放控制</h4>
|
|
|
- <div class="input-item">
|
|
|
- <input type="button" class="btn" value="开始动画" id="start" @click="startAnimation()"/>
|
|
|
- <input type="button" class="btn" value="暂停动画" id="pause" @click="pauseAnimation()"/>
|
|
|
- </div>
|
|
|
- <div class="input-item">
|
|
|
- <input type="button" class="btn" value="继续动画" id="resume" @click="resumeAnimation()"/>
|
|
|
- <input type="button" class="btn" value="停止动画" id="stop" @click="stopAnimation()"/>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="input-card" style="right: 10.3%;bottom: 10.3%" v-else>
|
|
|
- <span style="color: red">暂无该车辆轨迹信息</span>
|
|
|
- </div>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
@@ -90,6 +65,7 @@ export default {
|
|
|
loading: false,
|
|
|
tableData: [],
|
|
|
map: null,
|
|
|
+ infoWindow: null,
|
|
|
marker: null,
|
|
|
lineArr: [],
|
|
|
key: 0,
|
|
@@ -283,25 +259,34 @@ export default {
|
|
|
query: {id: row.orderId},
|
|
|
});
|
|
|
} else {
|
|
|
- gaude({itemId: row.id, plateNo: row.plateNo, tenantId: '234557'}).then(res => {
|
|
|
- this.lineArr = res.data.data
|
|
|
+ // gaude({itemId: row.itemId, plateNo: row.plateNo, tenantId: '234557',color:'2'}).then(res => {
|
|
|
+ // this.lineArr = res.data.data
|
|
|
+ // this.dialogVisible = true
|
|
|
+ // let this_ = this
|
|
|
+ // setTimeout(function () {
|
|
|
+ // this_.initMap();
|
|
|
+ // }, 100)
|
|
|
+ // })
|
|
|
+ location({itemId: row.itemId, plateNo: row.plateNo, tenantId: '234557', color: '2'}).then(res => {
|
|
|
+ console.log(res.data.data)
|
|
|
+ console.log(this.lineArr[this.lineArr.length - 1])
|
|
|
this.dialogVisible = true
|
|
|
let this_ = this
|
|
|
setTimeout(function () {
|
|
|
- this_.initMap();
|
|
|
- }, 100)
|
|
|
+ this_.initMap(res.data.data, row.plateNo);
|
|
|
+ }, 1000)
|
|
|
})
|
|
|
- // location({itemId: row.id,plateNo:'陕YH0008'}).then(res => {
|
|
|
- // // console.log(res.data.data)
|
|
|
- // // console.log(this.lineArr[this.lineArr.length - 1])
|
|
|
- // })
|
|
|
}
|
|
|
},
|
|
|
- initMap() {
|
|
|
- this.map = new AMap.Map("container", {
|
|
|
- resizeEnable: true,
|
|
|
- center: this.lineArr.length > 0 ? this.lineArr[this.lineArr.length - 1] : [120.382891, 36.066460],
|
|
|
- zoom: 17
|
|
|
+ markerClick(e) {
|
|
|
+ this.infoWindow.setContent(e.target.content);
|
|
|
+ this.infoWindow.open(this.map, e.target.getPosition());
|
|
|
+ },
|
|
|
+ initMap(data, plateNo) {
|
|
|
+ this.map = new AMap.Map("container", {resizeEnable: true});
|
|
|
+ this.infoWindow = new AMap.InfoWindow({
|
|
|
+ ffset: new AMap.Pixel(0, -30),
|
|
|
+ offset: new AMap.Pixel(0, -30)
|
|
|
});
|
|
|
let icon = new AMap.Icon({
|
|
|
size: new AMap.Size(52, 26), // 图标尺寸
|
|
@@ -309,53 +294,33 @@ export default {
|
|
|
imageSize: new AMap.Size(52, 26), // 根据所设置的大小拉伸或压缩图片
|
|
|
});
|
|
|
this.marker = new AMap.Marker({
|
|
|
+ position: data.location,
|
|
|
map: this.map,
|
|
|
- position: this.lineArr.length > 0 ? this.lineArr[this.lineArr.length - 1] : [120.382891, 36.066460],
|
|
|
- // icon: "https://webapi.amap.com/images/car.png",
|
|
|
icon: icon,
|
|
|
markerMeta: new AMap.Size(28, 28),
|
|
|
offset: new AMap.Pixel(-26, -15),
|
|
|
autoRotation: true,
|
|
|
angle: -15
|
|
|
});
|
|
|
- // 绘制轨迹
|
|
|
- let polyline = new AMap.Polyline({
|
|
|
- map: this.map,
|
|
|
- path: this.lineArr,
|
|
|
- showDir: true,
|
|
|
- strokeColor: "#28F", //线颜色
|
|
|
- // strokeOpacity: 1, //线透明度
|
|
|
- strokeWeight: 6 //线宽
|
|
|
- // strokeStyle: "solid" //线样式
|
|
|
- });
|
|
|
-
|
|
|
- let passedPolyline = new AMap.Polyline({
|
|
|
- map: this.map,
|
|
|
- path: this.lineArr,
|
|
|
- strokeColor: "#AF5", //线颜色
|
|
|
- // strokeOpacity: 1, //线透明度
|
|
|
- strokeWeight: 6 //线宽
|
|
|
- // strokeStyle: "solid" //线样式
|
|
|
- });
|
|
|
-
|
|
|
- this.marker.on("moving", function (e) {
|
|
|
- passedPolyline.setPath(e.passedPath);
|
|
|
- });
|
|
|
-
|
|
|
+ this.marker.content = '<div style="width: 300px;">'
|
|
|
+ + '<p style="font-size: 22px;font-weight: bold;background-color: #2d8cf0;color: #fff;">' + plateNo + '</p>'
|
|
|
+ + '<p style="padding: 5px 0"><span style="color: #a0a0a0">最后上报时间:</span>' + new Date(Number(data.time) + 8 * 60 * 60 * 1000).toJSON().split('T').join(' ').substr(0, 19) + '</p>'
|
|
|
+ + '<div style="width: 150px;float: left;">'
|
|
|
+ + '<p style="padding: 5px 0"><span style="color: #a0a0a0">车辆状态:</span></p>'
|
|
|
+ + '<p style="padding: 5px 0"><span style="color: #a0a0a0">今日里程:</span>' + (data.distance.length > 0 ? data.distance : 0) + '</p>'
|
|
|
+ + '</div>'
|
|
|
+ + '<div style="width: 150px;float: right;">'
|
|
|
+ + '<p style="padding: 5px 0"><span style="color: #a0a0a0">速度:</span>' + data.speed + '</p>'
|
|
|
+ + '<p style="padding: 5px 0"><span style="color: #a0a0a0">总里程:</span>' + data.mileage + '</p>'
|
|
|
+ + '</div>'
|
|
|
+ + '<p><span style="color: #a0a0a0">当前位置:</span>' + data.address + '</p>'
|
|
|
+ + '<p style="padding: 5px 0"><span style="color: #a0a0a0">经纬度:</span>' + data.location.join(',') + '</p>'
|
|
|
+ + '</div>'
|
|
|
+ this.infoWindow.open(this.map, this.map.getCenter());
|
|
|
+ this.marker.on('click', this.markerClick);
|
|
|
+ this.marker.emit('click', {target: this.marker});
|
|
|
this.map.setFitView();
|
|
|
},
|
|
|
- startAnimation() {
|
|
|
- this.marker.moveAlong(this.lineArr, 100000);
|
|
|
- },
|
|
|
- pauseAnimation() {
|
|
|
- this.marker.pauseMove();
|
|
|
- },
|
|
|
- resumeAnimation() {
|
|
|
- this.marker.resumeMove();
|
|
|
- },
|
|
|
- stopAnimation() {
|
|
|
- this.marker.stopMove();
|
|
|
- },
|
|
|
init() {
|
|
|
this.getsalesTrend();
|
|
|
},
|
|
@@ -429,4 +394,12 @@ export default {
|
|
|
::v-deep .el-dialog__body {
|
|
|
padding: 0 20px 10px 20px !important;
|
|
|
}
|
|
|
+
|
|
|
+::v-deep .amap-info-close{
|
|
|
+ right: 10px!important;
|
|
|
+ top: 12px !important;
|
|
|
+}
|
|
|
+::v-deep .amap-info-content{
|
|
|
+ padding: 5px 5px 5px 5px !important;
|
|
|
+}
|
|
|
</style>
|