suojin
/
physical_distribution
14
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

车辆定位

Browse Source
main
xuechunyuan 3 years ago
parent cd0639fc06
commit 47da1e3b0c
4 changed files with 140 additions and 93 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      src/views/components/carMile.vue
  2. 35
      src/views/components/pathMap.vue
  3. 192
      src/views/dashboard/homepage.vue
  4. 2
      vue.config.js

4
src/views/components/carMile.vue
Unescape View File

@ -27,7 +27,7 @@
<tbody>
<tr v-for="(item, index) in carMile" :key="'car' + index">
<td>{{ index+ 1}}</td>
<td @click="queryMap(item)"><a href="javascript:;">{{ item.cardNo }}</a></td>
<td title="点击定位到该车辆位置" @click="queryMap(item)"><a href="javascript:;">{{ item.cardNo }}</a></td>
<td>{{ item.mile }}</td>
<td><a :href="`https://lcrm3.lunz.cn/#/Equipment/LocatMonitor/Path/${item.key}`" target="_blank">查询</a></td>
</tr>
@ -52,7 +52,7 @@ export default {
methods: {
//定位
queryMap(item) {
this.$emit('queryLunz')
this.$emit('doMap',item);
},
//昨日里程
queryYesterdayMile() {

35
src/views/components/pathMap.vue
Unescape View File

@ -51,9 +51,9 @@ export default {
this.baiduMap.setMapStyleV2({
styleId: 'ec6ebc8ad35bcfbd56a424a29f325360'//'ef4f05652d24d0f23332710fbacad245'//
});
this.view = new mapvgl.View({
map: this.baiduMap
});
// this.view = new mapvgl.View({
// map: this.baiduMap
// });
var bdary = new BMapGL.Boundary();
bdary.get("日照市莒县", rs => {
var count = rs.boundaries.length;
@ -84,11 +84,14 @@ export default {
})
this.baiduMap.addEventListener('tilesloaded', () => {
this.carList.map((item, index) => {
this.markList.map(mark => {
this.baiduMap.removeOverlay(mark);
})
this.markList = [];
this.queryLunz(item.deviceId, item.key, item.cardNo, index);
})
this.setInterval = setInterval(() => {
this.view.removeAllLayers();
// this.view.removeAllLayers();
this.markList.map(mark => {
this.baiduMap.removeOverlay(mark);
})
@ -102,6 +105,15 @@ export default {
})
},
//单个设备定位聚焦放大
queryDingwei(deviceId) {
lunzApi.getCurrentDeviceInfoByIMEI(this.appKey, deviceId).then(res => {
let lng = res.Data.BaiduLng;
let lat = res.Data.BaiduLat;
let pt = new BMapGL.Point(lng, lat);
this.baiduMap.centerAndZoom(pt, 18);
})
},
//查询定位
queryLunz(deviceId, key, carNo, index) {
// lunzApi.getCarUserSimpleByImei(this.appKey, deviceId).then(res1 => {
@ -133,13 +145,13 @@ export default {
<div>最后定位时间：${res.Data.GPSTimeStamp.replace("T", " ")}</div>
<div>状态：${this.locationStatus[res.Data.SbcStatus]}</div>
<div>时速：${res.Data.spd}km/h</div>
<div style="display: inline-block;border: 1px solid #eee;border-radius: 3px;padding: 3px 8px;color: #0e94eb;cursor: pointer;" id="btnPath_${key}">行车轨迹</div>
<div style="display: inline-block;border: 1px solid #eee;border-radius: 3px;padding: 3px 8px;color: #0e94eb;cursor: pointer;" id="btnPath_${deviceId}">行车轨迹</div>
</div>`;
let infoWindow = new BMapGL.InfoWindow(sContent);
// marker添加点击事件
infoWindow.addEventListener('open', () => {
document.getElementById('btnPath_' + key).addEventListener('click', () => {
this.queryPath(key)
document.getElementById('btnPath_' + deviceId).addEventListener('click', () => {
this.queryPath(deviceId)
})
});
marker.addEventListener('click', () => {
@ -221,6 +233,13 @@ export default {
"MaxValue": 500
}
lunzApi.getLocationsByImei(this.key, param).then(res => {
if (res.Data == null) {
this.$message({
message: '未查询到今日行车轨迹',
type: 'warning'
});
return;
}
let point = [];
res.Data.map(item => {
point.push(new BMapGL.Point(item.Lng, item.Lat));
@ -231,6 +250,8 @@ export default {
}
this.polyline = new BMapGL.Polyline(point, { strokeColor: '#F5533D', strokeWeight: 5, strokeOpacity: 1, })
this.baiduMap.addOverlay(this.polyline);
this.baiduMap.centerAndZoom(point[0], 15);
this.baiduMap.closeInfoWindow();
// this.polyline = new BMapGL.Polyline(point, {
// strokeColor: '#F5533D',
// strokeWeight: 5,

192
src/views/dashboard/homepage.vue
Unescape View File

@ -43,39 +43,39 @@
<div class="table_con">
<div class="table_line" v-for="item1 in item.arr" :key="item1.no">
<div class="table_item" :class="item1.no <= 3 ? 'ac_no' : ''">
{{ item1.no <= 3 ? "top" : "" }}
{{ item1.no <= 3 ? "top" : "" }} </div>
<div class="table_item">{{ item1.no }}</div>
<div class="table_item">{{ item1.name }}</div>
<div class="table_item">{{ item1.count }}</div>
</div>
<div class="table_item">{{ item1.no }}</div>
<div class="table_item">{{ item1.name }}</div>
<div class="table_item">{{ item1.count }}</div>
</div>
</div>
<!-- </table> -->
<!-- </table> -->
</div>
<!-- <div class="swiper-slide">Slide 2</div> -->
</div>
<!-- <div class="swiper-slide">Slide 2</div> -->
</div>
</div>
</div>
</div>
<div class="left_bot">
<div class="title_box">
<div class="tit">村点信息</div>
</div>
<div class="table_box">
<div class="table_line">
<div class="table_item">站点名称</div>
<div class="table_item">上行</div>
<div class="table_item">下行</div>
<div class="left_bot">
<div class="title_box">
<div class="tit">村点信息</div>
</div>
<div class="swiper-container swiper2">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item, index) in villList" :key="index">
<div class="table_con" :class="item.arr.length < 5 ? 'tab_con' : ''">
<div class="table_line" v-for="item1 in item.arr" :key="item1.name">
<div class="table_item">{{ item1.name }}</div>
<div class="table_item">{{ item1.upData }}</div>
<div class="table_item">{{ item1.downData }}</div>
<div class="table_box">
<div class="table_line">
<div class="table_item">站点名称</div>
<div class="table_item">上行</div>
<div class="table_item">下行</div>
</div>
<div class="swiper-container swiper2">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item, index) in villList" :key="index">
<div class="table_con" :class="item.arr.length < 5 ? 'tab_con' : ''">
<div class="table_line" v-for="item1 in item.arr" :key="item1.name">
<div class="table_item">{{ item1.name }}</div>
<div class="table_item">{{ item1.upData }}</div>
<div class="table_item">{{ item1.downData }}</div>
</div>
</div>
</div>
</div>
@ -83,79 +83,78 @@
</div>
</div>
</div>
</div>
<div class="center_box">
<div class="center_top">
<div class="top_tit">莒县物流服务中心</div>
</div>
<div class="cen_data">
<div class="data_top">
<div class="left_btn">
<div class="txt txt_left" :class="active == 1 ? 'active' : ''" @click="changeData(1)">
按日
</div>
<div class="txt txt_right" :class="active == 2 ? 'active' : ''" @click="changeData(2)">
按月
<div class="center_box">
<div class="center_top">
<div class="top_tit">莒县物流服务中心</div>
</div>
<div class="cen_data">
<div class="data_top">
<div class="left_btn">
<div class="txt txt_left" :class="active == 1 ? 'active' : ''" @click="changeData(1)">
按日
</div>
<div class="txt txt_right" :class="active == 2 ? 'active' : ''" @click="changeData(2)">
按月
</div>
</div>
<div class="right_time">数据更新时间:{{ dateTime }}</div>
</div>
<div class="right_time">数据更新时间:{{ dateTime }}</div>
</div>
<div class="data_bot">
<div class="data_box" v-for="item in totalData" :key="item.name">
<div class="data_txt">{{ item.name }}</div>
<div class="data_txt" style="font-size: 0.38rem">{{ item.data }}</div>
<div class="data_txt">环比{{ item.huanbi }}</div>
<div class="data_bot">
<div class="data_box" v-for="item in totalData" :key="item.name">
<div class="data_txt">{{ item.name }}</div>
<div class="data_txt" style="font-size: 0.38rem">{{ item.data }}</div>
<div class="data_txt">环比{{ item.huanbi }}</div>
</div>
</div>
</div>
</div>
<div class="center_cen">
<PathMap></PathMap>
</div>
<div class="cen_bot">
<div class="echarts">
<!-- <ShowMap :mapData="mapData" :data1="datas"></ShowMap> -->
<div class="map_box" id="chart_map"></div>
<div class="center_cen">
<PathMap ref="pathMap"></PathMap>
</div>
<div class="echarts">
<div id="trendChart" class="trend_box"></div>
<div class="cen_bot">
<div class="echarts">
<!-- <ShowMap :mapData="mapData" :data1="datas"></ShowMap> -->
<div class="map_box" id="chart_map"></div>
</div>
<div class="echarts">
<div id="trendChart" class="trend_box"></div>
</div>
</div>
</div>
</div>
<div class="right_box">
<div class="full_btn">
<img v-show="!isFullFlag" src="~@/assets/images/full.png" @click="clickFun" alt="" />
<img v-show="isFullFlag" src="~@/assets/images/nofull.png" @click="clickFun" alt="" />
</div>
<div class="right_top">
<div class="title_box">
<div class="tit">派件入库量占比</div>
<div class="right_box">
<div class="full_btn">
<img v-show="!isFullFlag" src="~@/assets/images/full.png" @click="clickFun" alt="" />
<img v-show="isFullFlag" src="~@/assets/images/nofull.png" @click="clickFun" alt="" />
</div>
<div class="chart_box">
<div class="pie_box" id="pieChart"></div>
<div class="pie_data">
<div class="data_txt" v-for="(item, index) in pieData" :key="item.name">
<div class="pie_color" :style="{ background: startColor[index] }"></div>
<div class="pie_txt">{{ item.name }}</div>
<div class="pie_txt">{{ item.value }}</div>
<div class="pie_txt">{{ item.percent }}%</div>
<div class="right_top">
<div class="title_box">
<div class="tit">派件入库量占比</div>
</div>
<div class="chart_box">
<div class="pie_box" id="pieChart"></div>
<div class="pie_data">
<div class="data_txt" v-for="(item, index) in pieData" :key="item.name">
<div class="pie_color" :style="{ background: startColor[index] }"></div>
<div class="pie_txt">{{ item.name }}</div>
<div class="pie_txt">{{ item.value }}</div>
<div class="pie_txt">{{ item.percent }}%</div>
</div>
</div>
</div>
</div>
</div>
<div class="right_center">
<div class="title_box">
<div class="tit">车辆行驶里程</div>
<div class="right_center">
<div class="title_box">
<div class="tit">车辆行驶里程</div>
</div>
<CarMile @doMap="doMap"></CarMile>
</div>
<CarMile></CarMile>
</div>
<div class="right_bot">
<div class="title_box">
<div class="tit">车辆报警</div>
<div class="right_bot">
<div class="title_box">
<div class="tit">车辆报警</div>
</div>
<CarWarn></CarWarn>
</div>
<CarWarn></CarWarn>
</div>
</div>
</div>
</template>
<script>
@ -286,6 +285,10 @@ export default {
});
},
methods: {
//触发定位地图
doMap(item) {
this.$refs.pathMap.queryDingwei(item.deviceId);
},
run() {
this.mySwiper = new Swiper(".swiper1", {
loop: true, // 循环模式选项
@ -983,6 +986,7 @@ export default {
padding: 0.1rem 0;
font-weight: 500;
}
td {
font-size: 0.18rem;
color: #fff;
@ -1043,6 +1047,7 @@ export default {
height: 45%;
margin: 0 auto;
margin-top: 0.1rem;
.title_box {
width: 100%;
height: 0.42rem;
@ -1060,6 +1065,7 @@ export default {
align-items: center;
font-size: 0.2rem;
}
.right_tit {
width: 65%;
color: #fff;
@ -1088,6 +1094,7 @@ export default {
border-top-right-radius: 0.2rem;
border-bottom-right-radius: 0.2rem;
}
&:first-child {
border-top-left-radius: 0.2rem;
border-bottom-left-radius: 0.2rem;
@ -1099,6 +1106,7 @@ export default {
}
}
}
.cen_con {
width: 100%;
height: 89%;
@ -1106,6 +1114,7 @@ export default {
.swiper1 {
width: 100%;
height: 100%;
.swiper-wrapper {
width: 100%;
height: 100%;
@ -1140,6 +1149,7 @@ export default {
align-items: center;
color: #fff;
font-size: 0.18rem;
&:first-child {
width: 5%;
}
@ -1159,12 +1169,14 @@ export default {
table {
width: 100%;
tr {
th {
&:first-child {
width: 8%;
}
}
.ac_no {
width: 0.25rem;
height: 0.2rem;
@ -1204,6 +1216,7 @@ export default {
padding-left: 0.4rem;
}
}
.table_box {
width: 100%;
height: 88%;
@ -1257,6 +1270,7 @@ export default {
color: #fff;
}
}
table {
width: 100%;
@ -1270,6 +1284,7 @@ export default {
width: 40%;
}
}
td {
font-size: 0.18rem;
color: #fff;
@ -1279,6 +1294,7 @@ export default {
}
}
}
.center_box {
width: 45%;
height: 100%;
@ -1297,6 +1313,7 @@ export default {
font-size: 0.52rem;
}
}
.cen_data {
width: 100%;
height: 15%;
@ -1338,6 +1355,7 @@ export default {
border-top-left-radius: 0.2rem;
border-bottom-left-radius: 0.2rem;
}
.txt_right {
border-top-right-radius: 0.2rem;
border-bottom-right-radius: 0.2rem;
@ -1347,6 +1365,7 @@ export default {
background: #0e94ea;
}
}
.right_time {
width: 25%;
height: 100%;
@ -1385,6 +1404,7 @@ export default {
height: 46%;
background: red;
}
.cen_bot {
width: 100%;
height: 30%;
@ -1394,10 +1414,12 @@ export default {
.echarts {
width: 50%;
height: 100%;
.map_box {
width: 100%;
height: 100%;
}
.trend_box {
width: 100%;
height: 100%;
@ -1405,6 +1427,7 @@ export default {
}
}
}
.right_box {
width: 30%;
height: 100%;
@ -1474,6 +1497,7 @@ export default {
border-radius: 30%;
}
}
.pie_txt {
color: #fff;
font-size: 0.18rem;
@ -1487,6 +1511,7 @@ export default {
height: 45%;
// background: red;
margin: 0 auto;
.title_box {
width: 100%;
height: 0.42rem;
@ -1510,6 +1535,7 @@ export default {
height: 20%;
// background: green;
margin: 0 auto;
.title_box {
width: 100%;
height: 0.42rem;

2
vue.config.js
Unescape View File

@ -21,7 +21,7 @@ module.exports = defineConfig({
changeOrigin: true,
ws: true,
pathRewrite: {
'^/gatewayapi': ''
'/gatewayapi': ''
}
},
'/weather': {

Write Preview
Loading…
Cancel
Save