Skip to content

T
traffic-front
Commit 42544e6b authored by wangxiaoming's avatar wangxiaoming
Browse files
Options

merge 没有视频 其他bug修复

parent 2b17445f
Show whitespace changes
Inline Side-by-side
Showing with 402 additions and 235 deletions
package-lock.json
View file @ 42544e6b
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json
View file @ 42544e6b
......@@ -10,36 +10,37 @@
},
"dependencies": {
"axios": "^0.18.1",
"core-js": "^2.6.5",
"echarts": "^4.2.1",
"element-ui": "^2.9.0",
"core-js": "^2.6.11",
"echarts": "^4.8.0",
"element-ui": "^2.13.2",
"file-saver": "^2.0.2",
"gcoord": "^0.2.3",
"js-cookie": "^2.2.1",
"vue": "^2.6.10",
"vue": "^2.6.11",
"vue-baidu-map": "^0.21.22",
"vue-router": "^3.0.3",
"vuex": "^3.0.1",
"xlsx": "^0.16.1"
"vue-router": "^3.3.4",
"vue-video-player": "^5.0.2",
"vuex": "^3.5.1",
"xlsx": "^0.16.5"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.8.0",
"@vue/cli-plugin-eslint": "^3.8.0",
"@vue/cli-plugin-unit-jest": "^3.8.0",
"@vue/cli-service": "^3.8.0",
"@vue/eslint-config-airbnb": "^4.0.0",
"@vue/cli-plugin-babel": "^3.12.1",
"@vue/cli-plugin-eslint": "^3.12.1",
"@vue/cli-plugin-unit-jest": "^3.12.1",
"@vue/cli-service": "^3.12.1",
"@vue/eslint-config-airbnb": "^4.0.1",
"@vue/test-utils": "1.0.0-beta.29",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"babel-eslint": "^10.1.0",
"babel-jest": "^23.6.0",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"less": "^3.0.4",
"eslint-plugin-vue": "^5.2.3",
"less": "^3.12.2",
"less-loader": "^4.1.0",
"lodash": "^4.17.19",
"moment": "^2.27.0",
"script-loader": "^0.7.2",
"vue-template-compiler": "^2.6.10"
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
......
src/assets/img/video.png
View replaced file @ 2b17445f View file @ 42544e6b
src/assets/img/video.png

1.74 KB | W: | H:

src/assets/img/video.png

422 Bytes | W: | H:

src/assets/img/video.png
src/assets/img/video.png
src/assets/img/video.png
src/assets/img/video.png
  • 2-up
  • Swipe
  • Onion skin
src/config.js
View file @ 42544e6b
// const address = 'http://152.136.233.116:8083/roadlinks/';
// const address = '/roadlinks/';
const address = 'http://127.0.0.1:8088/roadlinks/';
const address = 'http://127.0.0.1:8088/roadlinks/'; // 本地
// const address = '/roadlinks/'; // 测试环境
// const address = 'http://vmax.corp.roadlinks.cn:8088/roadlinks/';
// const address = 'http://127.0.0.1:8088/roadlinks/';
// const address = 'http://193.112.197.170:8080/roadlinks/';
// const address = 'http://172.16.40.196:29980/roadlinks/';
const photoAddress = 'http://106.52.130.113:9088/';
const imgAddress = 'http://152.136.233.116:8083/roadlinks/';
const imgApi = 'http://152.136.233.116:8083/roadlinks/getCapitalImg?imgName=';
const videoAddress = 'http://152.136.233.116:8000';
const photoAddress = 'http://152.136.233.116:8000';
// const imgAddress = '/roadlinks/';// 测试环境
const imgAddress = 'http://152.136.233.116:8083/roadlinks/'; // 本地
// const imgApi = 'http://152.136.233.116:8083/roadlinks/getCapitalImg?imgName='; //这个没用到啊
export {
address, photoAddress, imgApi, imgAddress,
address, photoAddress, imgAddress, videoAddress,
};
src/main.js
View file @ 42544e6b
......@@ -6,10 +6,15 @@ import BaiduMap from 'vue-baidu-map';
import 'element-ui/lib/theme-chalk/index.css';
import _ from 'lodash';
import moment from 'moment';
import VideoPlayer from 'vue-video-player';
import App from './App.vue';
import router from './router';
import store from './store';
require('video.js/dist/video-js.css');
require('vue-video-player/src/custom-theme.css');
Vue.use(VideoPlayer);
Vue.use(ElementUI);
Vue.use(BaiduMap, {
ak: 'AZzMTSKLP4lVHphRauTBdINZUFnpWTcu',
......
src/views/Home.vue
View file @ 42544e6b
......@@ -48,6 +48,24 @@
<span slot="title" style="font-size: 16px">巡检结果明细</span>
</el-menu-item>
</el-submenu>
<!--<el-submenu index="4">
<span slot="title" class="submenu_parent">视频查看入口</span>
<el-menu-item
index="4-1"
@click="goTo('/result')"
style="background:#252639 !important"
>
<span slot="title" style="font-size: 16px">实时视频查看</span>
</el-menu-item>
<el-menu-item
index="4-2"
@click="goTo('/resultDetail')"
style="background:#252639 !important"
>
<span slot="title" style="font-size: 16px">停车视频查看</span>
</el-menu-item>
</el-submenu>-->
</el-menu>
</el-aside>
<el-container>
......
src/views/Result.vue
View file @ 42544e6b
<template >
<div class="result" ref="result" >
<div class="box">
<!-- 查询区 -->
<el-col :span="24" class="warp-breadcrum">
......@@ -43,7 +44,7 @@
></el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" v-loading="searchLoading" @click="queryTravel">搜索</el-button>
<el-button type="primary" v-loading="searchLoading" @click="queryData">搜索</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="exportTravel">导出结果</el-button>
......@@ -104,7 +105,7 @@
<!-- 地图 -->
<div class="ov-map" >
<baidu-map
class="map"
class="bm-view"
:center="center"
:zoom="zoom"
@zoomend="zoomEnd"
......@@ -114,8 +115,53 @@
>
<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
<!--具体的坐标点-->
<bm-point-collection
:points="carPoints"
shape="BMAP_POINT_SHAPE_CIRCLE"
color="Red"
size="BMAP_POINT_SIZE_NORMAL"
@mouseover="addclass"
@mouseout="removeclass"
></bm-point-collection>
<!--起点和终点的标志-->
<!-- <div v-for="(item1, index) in tableData" :key="index">
<bm-marker
:position="{lng: item1.startLng, lat: item1.startLat}"
:offset="{width: 0, height: -24}"
:icon="{url: item1.startUrl, size: {width: 48, height: 48}}"
></bm-marker>
<bm-marker
:position="{lng: item1.endLng, lat: item1.endLat}"
:offset="{width: 0, height: -24}"
:icon="{url: item1.endUrl, size: {width: 48, height: 48}}"
></bm-marker>
</div>-->
<bm-marker
@click="showPictureForMap(markObj.lng,markObj.lat)"
:zIndex="5"
:title="markObj.title"
:position="{lng: markObj.lng, lat:markObj.lat}"
:icon="{url: markObj.url, size: {width: 36, height: 36}}"
>
<bm-label
:content="markObj.index"
:zIndex="10"
:position="{lng: markObj.lng, lat: markObj.lat}"
:offset="{width: 6, height: 2}"
:labelStyle="{color:'white', border: 0,
backgroundColor: 'rgba(0, 0, 0, 0)', fontSize : '10px'}"
/>
</bm-marker>
<!--<bml-marker-clusterer :averageCenter="true">-->
<div v-for="(item,index) in carPoints" :key="index">
<!-- <div v-for="(item,index) in carPoints" :key="index">
<bm-marker
:zIndex="5"
:position="{lng: item?item.lng:'', lat: item?item.lat:''}"
......@@ -137,7 +183,7 @@
backgroundColor: 'rgba(0, 0, 0, 0)', fontSize : '10px'}"
/>
</bm-marker>
</div>
</div>-->
<!--</bml-marker-clusterer>-->
<bm-city-list anchor="BMAP_ANCHOR_BOTTOM_RIGHT" @changeBefore="changeBefore"></bm-city-list>
......@@ -181,9 +227,14 @@
</div>
</div>
</el-dialog>
</div>
</template>
<style lang="less" scope>
.bm-view {
width: 100%;
height: 600px;
}
.BMapLabel {
z-index: 10 !important;
}
......@@ -237,7 +288,7 @@
}
.ov-map {
width: calc(100vw - 600px);
height: 100%;
height: 600px;
float: left;
background: #888;
.map {
......@@ -246,7 +297,7 @@
}
}
.picture {
height: 90%;
height: 600px;
width: calc(300px);
float: left;
.el-button--primary {
......@@ -307,16 +358,27 @@ import { Message } from 'element-ui';
import gcoord from 'gcoord';
// eslint-disable-next-line import/no-extraneous-dependencies
import moment from 'moment';
import { export_json_to_excel } from '@/excel/Export2Excel';
import {
imgApi, imgAddress, address,
address, photoAddress,
} from '../config';
import { export_json_to_excel } from '@/excel/Export2Excel';
export default {
name: 'result',
data() {
return {
contentstr: '',
isShowMark: false,
markObj: {
index: '',
title: '',
lng: '',
lat: '',
// eslint-disable-next-line global-require
url: require('../assets/img/map-marker_blue.png'),
},
searchData: [],
tableData: [],
options: [{ value: 0, label: '全国' }],
......@@ -490,6 +552,7 @@ export default {
screenLoading: false,
currentIndex: 0,
markers: [],
radioIndex: 0,
};
},
mounted() {
......@@ -515,6 +578,7 @@ export default {
}
this.radioIndex = 0;
this.queryAllEquipment();
this.getInspectResultForTableData();
this.queryTravel();
},
updated() {
......@@ -523,73 +587,6 @@ export default {
methods: {
/* initBaiduMap() {
const map = new BMap.Map('allmap');
map.centerAndZoom(new BMap.Point(116.404, 39.915), 5);
// 启用滑轮控制地图大小
map.enableScrollWheelZoom();
// 创建标记数组
this.markers = [];
this.bindPoint(116.493895, 29.859667, '大光村');
this.bindPoint(121.386816, 29.859667, '李广村');
this.bindPoint(121.286816, 29.859667, '李广村');
this.bindPoint(121.186816, 29.859667, '李广村');
this.bindPoint(121.086816, 29.859667, '李广村');
let lon;
let lat;
const randomPoint = 50000;
// 循环生成randomPoint个点
for (let k = 0; k < randomPoint; k++) {
lon = this.randomNum(115.1, 115.3);
lat = this.randomNum(35.7, 36.0);
console.log(`${lon}, ${lat}`);
this.bindPoint(lon, lat, k);
}
// 调用API聚合函数将标记数组显示在地图上
const markerClusterer = new BMapLib.MarkerClusterer(map, { markers: this.markers });
console.log(markerClusterer);
},
// 生成随机数
randomNum(minNum, maxNum) {
switch (arguments.length) {
case 1:
return (Math.random() * minNum).toFixed(6);
break;
case 2:
return (Math.random() * (maxNum - minNum) + minNum).toFixed(6);
break;
default:
return 0;
break;
}
},
// 输入经纬度和名称，标记
bindPoint(longti, lati, name) {
// map.clearOverlays();//清空原来的标注
let pt = null;
// 创建点
pt = new BMap.Point(longti, lati);
// 创建标记
const marker = new BMap.Marker(pt);
// 定义文本内容
const content = `${name}<br/><br/>经度：${longti}<br/>纬度：${lati}`;
// 添加显示文本
const infoWindow = new BMap.InfoWindow(`<p style='font-size:14px;'>${content}</p>`);
// 添加鼠标放置事件
marker.addEventListener('mouseover', function () { this.openInfoWindow(infoWindow); });
// 添加点击事件
marker.addEventListener('click', () => { alert(name); });
// 将标记放入标记数组
this.markers.push(marker);
}, */
// 初始页currentPage、初始每页数据数pagesize和数据data
handleSizeChange(size) {
this.pagesize = size;
},
......@@ -683,7 +680,7 @@ export default {
});
},
// 这个也是导出？ 没用到
exportImgInfo() {
/* exportImgInfo() {
const exportImgs = [];
this.allImgs.forEach((item) => {
const capital = item.content.split('|');
......@@ -720,35 +717,48 @@ export default {
const fileName = '资产图片信息';
export_json_to_excel(tHeader, data, fileName);
});
},
}, */
// 点击地图或者图片修改地图样式
addclass(index) {
if (document.getElementById(this.groupImgs[index].id)) {
document.getElementById(this.groupImgs[index].id).scrollIntoView();
addclass(e) {
// eslint-disable-next-line global-require
this.markObj.lng = e.point.lng;
this.markObj.lat = e.point.lat;
this.groupImgs.forEach((item, index) => {
// eslint-disable-next-line eqeqeq
if (e.point && (item.lng == e.point.lng && item.lat == e.point.lat)) {
if (document.getElementById(item.id)) {
document.getElementById(item.id).scrollIntoView();
}
this.isShow = index;
this.markObj.index = (index + 1).toString();
this.markObj.title = `序号:${index + 1
} \n资产:${
item.contentImgTip
}\n时间:${this.$moment(
item.timestamp,
).format('YYYY-MM-DD HH:mm:ss')
}\n位置:${
item.position}`;
}
});
},
this.carPoints.forEach((val, index_) => {
if (index_ === index) {
// eslint-disable-next-line no-param-reassign,global-require
val.url = val.status === 1 || val.status === 3
// eslint-disable-next-line global-require
? require('../assets/img/map-marker_blue.png')
// eslint-disable-next-line global-require
: require('../assets/img/jingbao_blue.png');
} else {
// eslint-disable-next-line global-require,no-param-reassign
val.url = val.status === 1 || val.status === 3
// eslint-disable-next-line global-require
? require('../assets/img/map-marker_orange.png')
// eslint-disable-next-line global-require
: require('../assets/img/jingbao_red.png');
showPictureForMap(lng, lat) {
this.groupImgs.forEach((item, index) => {
// eslint-disable-next-line eqeqeq
if (item.lng == lng && item.lat == lat) {
this.showPicture(index);
}
});
this.isShow = index;
},
// 移除地图的样式
removeclass() {
this.carPoints.forEach((val) => {
this.markObj.lat = '';
this.markObj.lng = '';
this.markObj.index = '';
this.isShow = -1;
/* this.carPoints.forEach((val) => {
// eslint-disable-next-line no-param-reassign,global-require
val.url = val.status === 1 || val.status === 3
// eslint-disable-next-line global-require
......@@ -756,63 +766,103 @@ export default {
// eslint-disable-next-line global-require
: require('../assets/img/jingbao_red.png');
});
this.isShow = -1;
this.isShow = -1; */
},
// 展示图片
showPicture(index) {
this.screenLoading = true;
const that = this;
// eslint-disable-next-line eqeqeq
if (this.bigImgUrl == this.groupImgs[index].bigImgUrl) {
const imagePath = this.groupImgs[index].url.replace('/small_image/', '/image/');
// eslint-disable-next-line eqeqeq
if (this.bigImgUrl == imagePath) {
this.isShowPicture = true;
this.screenLoading = false;
return;
}
that.customStyleArray = [];
this.bigImgUrl = this.groupImgs[index].bigImgUrl;
this.imgContent = this.groupImgs[index].contentDetail;
let vectorData = this.groupImgs[index].vector;
if (this.groupImgs[index].vector.length === 1) {
vectorData = JSON.parse(this.groupImgs[index].vector);
}
if (vectorData && vectorData.location) {
const point = vectorData.location;
// 描点并且展示图片
axios
.get(
`${address}getTrajectImgLocationByImageId?imageId=${this.groupImgs[index].imageId}&status=${this.groupImgs[index].status}`,
)
// eslint-disable-next-line no-unused-vars
.then((response) => {
const styleArray = response.data.data;
this.bigImgUrl = imagePath;
this.customStyleArray = [];
let contentstr = '';
// 拼接 展示的资产信息
styleArray.forEach((e, styleIndex) => {
e.index = styleIndex + 1;
const point = JSON.parse(e.vector).location;
if (point.length === 4) {
const style = {
positionLeft: point[0],
positionRight: point[1],
positionWidth: point[2] - point[0],
positionHeight: point[3] - point[1],
};
that.customStyleArray.push(style);
}
} else if (vectorData && vectorData.length > 0) {
vectorData.forEach((e) => {
vectorData = JSON.parse(e);
const point = vectorData.location;
if (point.length === 4) {
const style = {
positionLeft: point[0],
positionRight: point[1],
positionWidth: point[2] - point[0],
positionHeight: point[3] - point[1],
};
that.customStyleArray.push(style);
this.customStyleArray.push(style);
}
});
// eslint-disable-next-line no-underscore-dangle
let groupedItems = that.$_(styleArray)
.groupBy(item => item.type2);
groupedItems = JSON.parse(JSON.stringify(groupedItems));
// eslint-disable-next-line no-underscore-dangle
let info = '';
// eslint-disable-next-line no-underscore-dangle
that.$_.forEach(groupedItems, (value, key) => {
that.capitalOptions.forEach((capital) => {
// eslint-disable-next-line eqeqeq
if (capital.value == key) {
// eslint-disable-next-line no-param-reassign
info = capital.label;
}
});
contentstr += `${info}:`;
value.forEach((ex) => {
contentstr += `${ex.index}、`;
});
contentstr = `${contentstr.substring(0, contentstr.lastIndexOf('、'))}, `;
});
this.imgContent = `${contentstr}|${this.groupImgs[index].content}`;
this.screenLoading = true;
this.isShowPicture = true;
})
.catch((error) => {
console.log(error);
});
},
// 图片 鼠标悬浮
addActive(index) {
this.carPoints.forEach((e) => {
this.isShow = index;
this.markObj.lng = this.groupImgs[index].lng;
this.markObj.lat = this.groupImgs[index].lat;
this.markObj.index = index + 1;
this.center.lng = this.markObj.lng;
this.center.lat = this.markObj.lat;
this.markObj.title = `序号:${index + 1
} \n资产:${
this.groupImgs[index].contentImgTip
}\n时间:${this.$moment(
this.groupImgs[index].timestamp,
).format('YYYY-MM-DD HH:mm:ss')
}\n位置:${
this.groupImgs[index].position}`;
/* this.carPoints.forEach((e) => {
e.markerAnim = '';
// eslint-disable-next-line global-require
e.url = e.status === 1 || e.status === 3
......@@ -830,21 +880,12 @@ export default {
? require('../assets/img/map-marker_blue.png')
// eslint-disable-next-line global-require
: require('../assets/img/jingbao_blue.png');
this.carPoints[index].markerAnim = 'BMAP_ANIMATION_BOUNCE';
this.carPoints[index].markerAnim = 'BMAP_ANIMATION_BOUNCE'; */
},
// 图片鼠标移除
removeActive(index) {
removeActive() {
this.isShow = -1;
this.carPoints[index].markerAnim = '';
// eslint-disable-next-line global-require,eqeqeq
this.carPoints[index].url = this.carPoints[index].status == 1
// eslint-disable-next-line eqeqeq
|| this.carPoints[index].status == 3
// eslint-disable-next-line global-require
? require('../assets/img/map-marker_orange.png')
// eslint-disable-next-line global-require
: require('../assets/img/jingbao_red.png');
},
// eslint-disable-next-line no-unused-vars
handler({ BMap, map }) {
......@@ -881,6 +922,89 @@ export default {
console.log(error);
});
},
getInspectResultForTableData() {
if (this.filters.dateTime.length === 0) {
this.filters.dateTime = [
`${moment(
new Date().setTime(new Date().getTime() - 3600 * 1000 * 24),
).format('YYYY-MM-DD')} 00:00:00`,
`${moment(
new Date().setTime(new Date().getTime() - 3600 * 1000 * 24),
).format('YYYY-MM-DD')} 23:59:59`,
];
}
let equipmentCode = '';
if (this.filters.plateNo && this.filters.plateNo.length > 0) {
this.filters.plateNo.forEach((item) => {
if (equipmentCode === '') {
equipmentCode += item.code;
} else {
equipmentCode += `,${item.code}`;
}
});
}
this.searchLoading = true;
const that = this;
axios
.post(`${address}getInspectResultForTableData`, {
startTime: that.filters.dateTime[0],
endTime: that.filters.dateTime[1],
equipment: equipmentCode,
})
.then((response) => {
that.tableData = [];
if (response.data.code === 200) {
response.data.data.forEach((val) => {
that.tableData.push({
startUrl: require('../assets/img/qidian.png'),
endUrl: require('../assets/img/zhongdian.png'),
startLng: val.startLng,
startLat: val.startLat,
endLng: val.endLng,
endLat: val.endLat,
plateNo: val.plateNo,
startEndTime: `${this.$moment(
val.startTimeMill,
).format('YYYY-MM-DD HH:mm:ss')} 至 ${this.$moment(
val.endTimeMill,
).format('YYYY-MM-DD HH:mm:ss')}`,
startEndPoint: `${val.startPosition} - ${
val.endPosition
}`,
inspectDistance: `${(val.totalDistance / 1000).toFixed(
1,
)}km`,
inspectNum: `${
val.inspectNum ? val.inspectNum : 0
}个`,
normalNum: `${
(val.normalNum ? val.normalNum : 0) + (val.newInspectNum ? val.newInspectNum : 0)
}个`,
roadLetterNum: `${
0
}个`, /* val.roadLetterNum ? val.roadLetterNum : 0 */
guardrailNum: `${
0
}个`, /* val.guardrailNum ? val.guardrailNum : 0 */
newInspectNum: `${0}个`, /* `${val.newInspectNum ? val.newInspectNum : 0} */
startTime: val.timestamp,
endTime: val.timestamp,
});
});
}
})
.catch((error) => {
console.log(error);
});
},
queryData() {
this.getInspectResultForTableData();
this.queryTravel();
},
queryTravel() {
sessionStorage.setItem('searchVal', JSON.stringify(this.filters));
if (this.filters.dateTime.length === 0) {
......@@ -917,9 +1041,10 @@ export default {
that.searchLoading = false;
if (response.data.code === 200) {
if (response.data.data) {
that.tableData = [];
/* that.tableData = []; */
// 分页用的吗
that.allPoints = [];
that.groupImgs = [];
// 地图展示的点 TODO 优化
that.carPoints = [];
that.imgs = [];
......@@ -928,19 +1053,20 @@ export default {
// eslint-disable-next-line no-var,no-restricted-syntax,vars-on-top
// 循环 轨迹信息
for (var key in response.data.data) {
for (const key in response.data.data) {
if (response.data.data[key]) {
const gisArr = response.data.data[key];
// 按照车 循环
gisArr.forEach((val) => {
if (val) {
// 计算轨迹长度 获取当前轨迹所有点carPoints
const carPointsTmp = [];
const carImgsTmp = [];
let totalDistance = 0;
// 循环一个轨迹多少个点
val.forEach((item, index) => {
if (item.longitude && item.latitude) {
/* if (item.longitude && item.latitude) { */
// 循环他的images
if (item.images) {
// 资产及对应图片信息
......@@ -986,7 +1112,7 @@ export default {
? '正常'
: info.status === 2
? '异常'
: '新增'
: '正常'
}`,
`位置:${info.position}`,
],
......@@ -994,9 +1120,14 @@ export default {
// 这个应该是右边的图片
carImgsTmp.push({
timestamp: info.imageTime,
position: info.position,
status: info.status,
lng: result[0],
lat: result[1],
imageId: info.imageId,
// eslint-disable-next-line no-nested-ternary
url: `${imgAddress}getCapitalImg?imgPath=${info.smallImagePath}`,
bigImgUrl: `${imgAddress}getCapitalImg?imgPath=${info.imagePath}`,
url: photoAddress + info.smallImagePath,
content: `${info.info} | ${
// eslint-disable-next-line no-nested-ternary
info.status === 1
......@@ -1004,7 +1135,7 @@ export default {
// eslint-disable-next-line eqeqeq
: info.status == 2
? '异常'
: '新增'
: '正常'
} | ${info.position}`,
number: that.no,
id: `imageCard${that.no}`,
......@@ -1049,7 +1180,7 @@ export default {
);
}
}
}
/* } */
}
});
......@@ -1057,7 +1188,7 @@ export default {
that.allPoints.push(carPointsTmp);
// 右边图片
that.allImgs.push(carImgsTmp);
that.tableData.push({
/* that.tableData.push({
plateNo: key,
startEndTime: `${this.$moment(
val[val.length - 1].timestamp,
......@@ -1087,7 +1218,7 @@ export default {
}个`,
startTime: val[val.length - 1].timestamp,
endTime: val[0].timestamp,
});
}); */
}
});
}
......@@ -1095,6 +1226,8 @@ export default {
// eslint-disable-next-line prefer-destructuring
that.carPoints = that.allPoints[0];
/* console.log(JSON.stringify(that.carPoints)); */
// eslint-disable-next-line prefer-destructuring
// 分组之前的
that.imgs = that.allImgs[0];
......@@ -1111,15 +1244,16 @@ export default {
o.content = o.content.split('|').length > 2
? `${o.content.split('|')[1]}|${o.content.split('|')[2]}` : o.content;
});
/* console.log(`111111${JSON.stringify(that.carPoints)}`); */
const carPointsNew = [];
const imgsContent = [];
// 图片分组
const imgsNew = that.imgs
.map((item, index, arr) => {
imgsContent.push({ contentUrl: item.type + item.url, name: item.name });
const i = arr.find(
_item => item.type === _item.type && item.url === _item.url,
_item => item.status === _item.status && item.url === _item.url,
);
if (i !== item) {
i.vector.push(item.vector);
......@@ -1159,6 +1293,7 @@ export default {
contentstr = `${contentstr.substring(0, contentstr.lastIndexOf(','))} `;
const contentImg = firstContent + (contents.length > 1 ? `等${contents.length}个资产` : '');
e.contentImgTip = contentImg;
e.contentDetail = `${contentstr}|${e.content}`;
e.contentImg = `${contentImg}|${e.content}`;
......@@ -1175,7 +1310,7 @@ export default {
? '正常'
: e.status === 2
? '异常'
: '新增'
: '正常'
}`,
`位置:${e.position}`,
];
......@@ -1238,15 +1373,11 @@ export default {
return (d * Math.PI) / 180.0;
},
linkDetail(index, row) {
// eslint-disable-next-line no-unused-vars
const startEndTime = row.startTime;
// console.log(row.startTime);
// console.log(row.endTime);
this.$router.push({
name: 'resultDetail',
params: {
startTime: row.startTime,
endTime: row.endTime,
startTime: this.filters.dateTime[0],
endTime: this.filters.dateTime[1],
equipment: row.plateNo,
},
});
......@@ -1335,12 +1466,7 @@ export default {
});
},
clickChange(index) {
console.log(`*************************************** index:${index}`);
console.log(
`*************************************** curindex:${this.currentIndex}`,
);
if (index === this.currentIndex) {
console.log(`*************************************** iiiii:${index}`);
} else {
this.currentIndex = index;
this.radioIndex = index;
......@@ -1375,7 +1501,7 @@ export default {
.map((item, index, arr) => {
const i = arr.find(
// eslint-disable-next-line eqeqeq
_item => item.type == _item.type && item.url == _item.url,
_item => item.status == _item.status && item.url == _item.url,
);
if (i !== item) {
if (item.name) {
......
src/views/ResultDetail.vue
View file @ 42544e6b
......@@ -188,9 +188,9 @@ import axios from 'axios';
import { Message } from 'element-ui';
import echarts from 'echarts';
import moment from 'moment';
import { address, imgAddress } from '../config';
import { export_json_to_excel } from '@/excel/Export2Excel';
import elDragDialog from '@/components/el-drag-dialog';
import { address, imgAddress } from '../config';
export default {
name: 'detail',
......@@ -385,10 +385,10 @@ export default {
that.filters.equipment = this.$route.params.equipment;
}
if (this.startTime != null && this.endTime != null) {
if (that.startTime && that.endTime) {
this.filters.dateTime = [
moment(this.startTime).format('YYYY-MM-DD HH:mm:ss'),
moment(this.endTime).format('YYYY-MM-DD HH:mm:ss'),
this.$route.params.startTime,
this.$route.params.endTime,
];
} else if (searchVal) {
this.filters = JSON.parse(searchVal);
......@@ -438,7 +438,7 @@ export default {
if (response.data.data) {
this.pageOption.totalCount = response.data.data.total;
response.data.data.list.forEach((val) => {
val.status = val.status == 1 ? '正常' : val.status == 2 ? '异常' : '新增';
val.status = val.status == 1 ? '正常' : val.status == 2 ? '异常' : '正常';
val.imageTime = moment(parseInt(val.imageTime)).format(
'YYYY-MM-DD HH:mm:ss',
);
......
src/views/Task.vue
View file @ 42544e6b
......@@ -93,7 +93,7 @@
<!-- 任务统计 -->
<div class="ov-map" id="ov-map">
<baidu-map
class="map"
class="bm-view"
:center="center"
:zoom="zoom"
@zoomend="zoomEnd"
......@@ -163,8 +163,8 @@ import gcoord from 'gcoord';
// eslint-disable-next-line import/no-extraneous-dependencies
import moment from 'moment';
import { Message } from 'element-ui';
import { address } from '../config';
import { export_json_to_excel } from '@/excel/Export2Excel';
import { address } from '../config';
export default {
name: 'task',
......@@ -353,6 +353,51 @@ export default {
// 描点并且展示图片
getTrajectImgLocationByImageId(id) {
axios
.get(
`${address}getTrajectImgLocationByImageId?imageId=${id}`,
)
// eslint-disable-next-line no-unused-vars
.then((response) => {
const styleArray = response.data.data;
const nowBigImgUrl = `${address
}getTrajectImgByImageId?imageId=${id}`;
this.screenLoading = true;
// eslint-disable-next-line eqeqeq
if (this.bigImgUrl == nowBigImgUrl) {
this.screenLoading = false;
this.isShowPicture = true;
return;
}
this.bigImgUrl = nowBigImgUrl;
this.customStyleArray = [];
console.log(JSON.stringify(styleArray));
// 拼接 展示的资产信息
styleArray.forEach((e, styleIndex) => {
e.index = styleIndex + 1;
const point = JSON.parse(e.vector).location;
if (point.length === 4) {
const style = {
positionLeft: point[0],
positionRight: point[1],
positionWidth: point[2] - point[0],
positionHeight: point[3] - point[1],
};
this.customStyleArray.push(style);
}
});
this.isShowPicture = true;
})
.catch((error) => {
console.log(error);
});
/* axios
.get(
`${address}getTrajectImgLocationByImageId?imageId=${id}`,
)
......@@ -390,7 +435,7 @@ export default {
})
.catch((error) => {
console.log(error);
});
}); */
},
......@@ -834,7 +879,12 @@ export default {
this.trajectoryWithLinkId = [];
this.no = 0;
const resData = response.data.data;
// console.log(`travellog${JSON.stringify(resData)}`);
console.log(`travellog${JSON.stringify(resData)}`);
/* travellog{"zjhn_ZJHN20070701":[{"plateNo":"皖ALA827","startTime":1596415382242,
"endTime":1596424458181,"startPoint":"淮南收费站","endPoint":"淮南收费站",
"inspectDistance":"146.7km","inspectTime":"2.5h","averageSpeed":"58183.5km / h",
"trajectorys":null,"totalDistance":null}]} */
// eslint-disable-next-line no-restricted-syntax
for (const key in resData) { // 这里是遍历车辆信息 车辆会有多个轨迹 在遍历
if (resData[key]) {
......@@ -846,11 +896,6 @@ export default {
const points = [];
let linkIds = [];
// 距离
let distance = 0;
// eslint-disable-next-line no-unused-vars
let totalDistance = 0;
// 根据几条轨迹遍历
gis.trajectorys.forEach((item, index) => {
if (item) {
......@@ -876,34 +921,6 @@ export default {
gcoord.BD09,
);
// eslint-disable-next-line eqeqeq
if (gis.trajectorys[index + 1].linkId == gis.trajectorys[index].linkId) {
distance += Math.abs(
gis.trajectorys[index + 1].roadEndDis
- gis.trajectorys[index].roadEndDis,
);
totalDistance += Math.abs(
gis.trajectorys[index + 1].roadEndDis
- gis.trajectorys[index].roadEndDis,
);
} else {
distance += Math.abs(
this.getDistance(
result1[0],
result1[1],
result[0],
result[1],
),
);
totalDistance += Math.abs(
this.getDistance(
result1[0],
result1[1],
result[0],
result[1],
),
);
}
// poly 画红线
poly.push({
......@@ -944,16 +961,10 @@ export default {
),
startPoint: gis.startPoint,
endPoint: gis.endPoint,
inspectDistance: `${(totalDistance / 1000).toFixed(1)}km`,
inspectDistance: gis.inspectDistance,
inspectTime: gis.inspectTime,
averageSpeed: `${(
totalDistance
/ 1000
/ ((gis.endTime
- gis.startTime)
/ (1000 * 3600))
).toFixed(1)}km/h`,
averageSpeed: gis.averageSpeed,
});
if (points) {
// eslint-disable-next-line global-require
......@@ -1119,6 +1130,10 @@ export default {
</script>
<style lang="less" scope>
.bm-view {
width: 100%;
height: 600px;
}
.BMap_Marker {
z-index: 10 !important;
}
......@@ -1137,16 +1152,16 @@ export default {
}
.ov-map {
width: 100%;
height: 100%;
height: 600px;
background: #888;
.map {
width: 100%;
height: 100%;
height: 600px;
}
}
}
.picture {
height: 100%;
height: 600px;
width: 30%;
float: left;
ul {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment