forked from huangdaju/cloud-ui
Merge remote-tracking branch 'origin/master'
# Conflicts: # src/api/business/records.js # src/views/business/faultLogs/index.vue # src/views/business/fence/map.vue # src/views/business/records/history.vuemaster
commit
99e4f3e912
10
README.md
10
README.md
|
@ -17,6 +17,16 @@ npm install --registry=https://registry.npmmirror.com
|
|||
npm run dev
|
||||
```
|
||||
|
||||
```bash
|
||||
# 建议不要直接使用 cnpm 安装依赖,会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
|
||||
npm install --registry=https://registry.npmmirror.com
|
||||
```
|
||||
|
||||
```bash
|
||||
# 安装高德地图依赖
|
||||
npm i @amap/amap-jsapi-loader--save
|
||||
```
|
||||
|
||||
浏览器访问 http://localhost:80
|
||||
|
||||
## 发布
|
||||
|
|
|
@ -5,13 +5,10 @@
|
|||
<div id="container"></div>
|
||||
</div>
|
||||
|
||||
{{ this.vehicle }}
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import AMapLoader from "@amap/amap-jsapi-loader";
|
||||
import {getPosition, vehicleData} from "@/api/business/records";
|
||||
|
||||
export default {
|
||||
name: "map-view",
|
||||
|
@ -19,30 +16,17 @@ export default {
|
|||
return {
|
||||
carPosition: ["116.397428", "39.90923"], // 初始化小汽车位置
|
||||
carMarker: null, // 存储小汽车Marker
|
||||
animationInterval: null,//存储动画定时器
|
||||
lineArr: [],
|
||||
recordsId: 0,
|
||||
vehicle: {}
|
||||
animationInterval:null//存储动画定时器
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.recordsId = this.$route.query.recordsId;
|
||||
this.getFindVD()
|
||||
},
|
||||
mounted() {
|
||||
this.initAMap();
|
||||
// 初始化 echarts
|
||||
this.initBarChart();
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearInterval(this.animationInterval);//清除定时器
|
||||
this.map?.destroy();
|
||||
},
|
||||
methods: {
|
||||
getFindVD() {
|
||||
vehicleData(this.recordsId)
|
||||
},
|
||||
|
||||
initAMap() {
|
||||
AMapLoader.load({
|
||||
key: "ce38a6b072b603934f6270bd9e97ed49", // 申请好的Web端开发者Key,首次调用 load 时必填
|
||||
|
@ -56,14 +40,12 @@ export default {
|
|||
zoom: 11, // 初始化地图级别
|
||||
center: [116.397428, 39.90923], // 初始化地图中心点位置
|
||||
});
|
||||
|
||||
// 车辆初始化
|
||||
this.carMarker = new AMap.Marker({
|
||||
position: this.carPosition,
|
||||
icon: 'https://webapi.amap.com/images/car.png',
|
||||
map: this.map, // 将Marker添加到地图上
|
||||
});
|
||||
|
||||
// 在地图初始化完成后启动小车动画
|
||||
this.startCarAnimation();
|
||||
})
|
||||
|
@ -71,97 +53,13 @@ export default {
|
|||
console.log(e);
|
||||
});
|
||||
},
|
||||
|
||||
startCarAnimation() {
|
||||
this.animationInterval = setInterval(() => {
|
||||
this.getRealTimeDataAndUpdatePosition();
|
||||
|
||||
}, 1000);
|
||||
},
|
||||
|
||||
getRealTimeDataAndUpdatePosition() {
|
||||
getPosition(this.recordsId)
|
||||
.then(response => {
|
||||
this.vehicle = response.data
|
||||
//更新小汽车位置
|
||||
this.carPosition = [this.vehicle.longitude, this.vehicle.latitude];
|
||||
//更新小汽车Marker的位置
|
||||
this.carMarker.setPosition(this.carPosition);
|
||||
})
|
||||
},
|
||||
|
||||
// initBarChart() {
|
||||
// // 通过 $ref 进行挂载
|
||||
// let myChart = this.$echarts.init(this.$refs.barChart);
|
||||
// let option = {
|
||||
// series: [
|
||||
// {
|
||||
// type: 'gauge',
|
||||
// axisLine: {
|
||||
// lineStyle: {
|
||||
// width: 30,
|
||||
// color: [
|
||||
// [0.3, '#67e0e3'],
|
||||
// [0.7, '#37a2da'],
|
||||
// [1, '#fd666d']
|
||||
// ]
|
||||
// }
|
||||
// },
|
||||
// pointer: {
|
||||
// itemStyle: {
|
||||
// color: 'auto'
|
||||
// }
|
||||
// },
|
||||
// axisTick: {
|
||||
// distance: -30,
|
||||
// length: 8,
|
||||
// lineStyle: {
|
||||
// color: '#fff',
|
||||
// width: 2
|
||||
// }
|
||||
// },
|
||||
// splitLine: {
|
||||
// distance: -30,
|
||||
// length: 30,
|
||||
// lineStyle: {
|
||||
// color: '#fff',
|
||||
// width: 4
|
||||
// }
|
||||
// },
|
||||
// axisLabel: {
|
||||
// color: 'inherit',
|
||||
// distance: 40,
|
||||
// fontSize: 20
|
||||
// },
|
||||
// detail: {
|
||||
// valueAnimation: true,
|
||||
// formatter: '{value} km/h',
|
||||
// color: 'inherit'
|
||||
// },
|
||||
// data: [
|
||||
// {
|
||||
// value: 70
|
||||
// }
|
||||
// ]
|
||||
// }
|
||||
// ]
|
||||
// };
|
||||
// setInterval(function () {
|
||||
// myChart.setOption({
|
||||
// series: [
|
||||
// {
|
||||
// data: [
|
||||
// {
|
||||
// value: +(Math.random() * 100).toFixed(2)
|
||||
// }
|
||||
// ]
|
||||
// }
|
||||
// ]
|
||||
// });
|
||||
// }, 2000);
|
||||
// myChart.setOption(option);
|
||||
// },
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
#container{
|
||||
|
@ -174,16 +72,4 @@ export default {
|
|||
border: none !important; /* 移除Marker的边框 */
|
||||
box-shadow: none !important; /* 移除Marker的阴影 */
|
||||
}
|
||||
.home {
|
||||
width: 500px;
|
||||
height: 400px;
|
||||
margin: auto;
|
||||
border: 3px solid lightcoral;
|
||||
|
||||
// 宽高是必须给的,可以给百分比、具体的像素等....
|
||||
.barChart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -218,7 +218,7 @@ export default {
|
|||
// 查询参数
|
||||
voEnterpriseInfo: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
pageSize: 30,
|
||||
dictName: undefined,
|
||||
dictType: undefined,
|
||||
status: undefined
|
||||
|
|
Loading…
Reference in New Issue