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
|
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
|
浏览器访问 http://localhost:80
|
||||||
|
|
||||||
## 发布
|
## 发布
|
||||||
|
|
|
@ -5,13 +5,10 @@
|
||||||
<div id="container"></div>
|
<div id="container"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{{ this.vehicle }}
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import AMapLoader from "@amap/amap-jsapi-loader";
|
import AMapLoader from "@amap/amap-jsapi-loader";
|
||||||
import {getPosition, vehicleData} from "@/api/business/records";
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "map-view",
|
name: "map-view",
|
||||||
|
@ -19,30 +16,17 @@ export default {
|
||||||
return {
|
return {
|
||||||
carPosition: ["116.397428", "39.90923"], // 初始化小汽车位置
|
carPosition: ["116.397428", "39.90923"], // 初始化小汽车位置
|
||||||
carMarker: null, // 存储小汽车Marker
|
carMarker: null, // 存储小汽车Marker
|
||||||
animationInterval: null,//存储动画定时器
|
animationInterval:null//存储动画定时器
|
||||||
lineArr: [],
|
|
||||||
recordsId: 0,
|
|
||||||
vehicle: {}
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
created() {
|
|
||||||
this.recordsId = this.$route.query.recordsId;
|
|
||||||
this.getFindVD()
|
|
||||||
},
|
|
||||||
mounted() {
|
mounted() {
|
||||||
this.initAMap();
|
this.initAMap();
|
||||||
// 初始化 echarts
|
|
||||||
this.initBarChart();
|
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
clearInterval(this.animationInterval);//清除定时器
|
clearInterval(this.animationInterval);//清除定时器
|
||||||
this.map?.destroy();
|
this.map?.destroy();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getFindVD() {
|
|
||||||
vehicleData(this.recordsId)
|
|
||||||
},
|
|
||||||
|
|
||||||
initAMap() {
|
initAMap() {
|
||||||
AMapLoader.load({
|
AMapLoader.load({
|
||||||
key: "ce38a6b072b603934f6270bd9e97ed49", // 申请好的Web端开发者Key,首次调用 load 时必填
|
key: "ce38a6b072b603934f6270bd9e97ed49", // 申请好的Web端开发者Key,首次调用 load 时必填
|
||||||
|
@ -56,14 +40,12 @@ export default {
|
||||||
zoom: 11, // 初始化地图级别
|
zoom: 11, // 初始化地图级别
|
||||||
center: [116.397428, 39.90923], // 初始化地图中心点位置
|
center: [116.397428, 39.90923], // 初始化地图中心点位置
|
||||||
});
|
});
|
||||||
|
|
||||||
// 车辆初始化
|
// 车辆初始化
|
||||||
this.carMarker = new AMap.Marker({
|
this.carMarker = new AMap.Marker({
|
||||||
position: this.carPosition,
|
position: this.carPosition,
|
||||||
icon: 'https://webapi.amap.com/images/car.png',
|
icon: 'https://webapi.amap.com/images/car.png',
|
||||||
map: this.map, // 将Marker添加到地图上
|
map: this.map, // 将Marker添加到地图上
|
||||||
});
|
});
|
||||||
|
|
||||||
// 在地图初始化完成后启动小车动画
|
// 在地图初始化完成后启动小车动画
|
||||||
this.startCarAnimation();
|
this.startCarAnimation();
|
||||||
})
|
})
|
||||||
|
@ -71,97 +53,13 @@ export default {
|
||||||
console.log(e);
|
console.log(e);
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
startCarAnimation() {
|
startCarAnimation() {
|
||||||
this.animationInterval = setInterval(() => {
|
this.animationInterval = setInterval(() => {
|
||||||
this.getRealTimeDataAndUpdatePosition();
|
|
||||||
}, 1000);
|
}, 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>
|
</script>
|
||||||
<style scoped>
|
<style scoped>
|
||||||
#container{
|
#container{
|
||||||
|
@ -174,16 +72,4 @@ export default {
|
||||||
border: none !important; /* 移除Marker的边框 */
|
border: none !important; /* 移除Marker的边框 */
|
||||||
box-shadow: 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>
|
</style>
|
||||||
|
|
|
@ -218,7 +218,7 @@ export default {
|
||||||
// 查询参数
|
// 查询参数
|
||||||
voEnterpriseInfo: {
|
voEnterpriseInfo: {
|
||||||
pageNum: 1,
|
pageNum: 1,
|
||||||
pageSize: 10,
|
pageSize: 30,
|
||||||
dictName: undefined,
|
dictName: undefined,
|
||||||
dictType: undefined,
|
dictType: undefined,
|
||||||
status: undefined
|
status: undefined
|
||||||
|
|
Loading…
Reference in New Issue