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 @@ ...@@ -10,36 +10,37 @@
}, },
"dependencies": { "dependencies": {
"axios": "^0.18.1", "axios": "^0.18.1",
"core-js": "^2.6.5", "core-js": "^2.6.11",
"echarts": "^4.2.1", "echarts": "^4.8.0",
"element-ui": "^2.9.0", "element-ui": "^2.13.2",
"file-saver": "^2.0.2", "file-saver": "^2.0.2",
"gcoord": "^0.2.3", "gcoord": "^0.2.3",
"js-cookie": "^2.2.1", "js-cookie": "^2.2.1",
"vue": "^2.6.10", "vue": "^2.6.11",
"vue-baidu-map": "^0.21.22", "vue-baidu-map": "^0.21.22",
"vue-router": "^3.0.3", "vue-router": "^3.3.4",
"vuex": "^3.0.1", "vue-video-player": "^5.0.2",
"xlsx": "^0.16.1" "vuex": "^3.5.1",
"xlsx": "^0.16.5"
}, },
"devDependencies": { "devDependencies": {
"@vue/cli-plugin-babel": "^3.8.0", "@vue/cli-plugin-babel": "^3.12.1",
"@vue/cli-plugin-eslint": "^3.8.0", "@vue/cli-plugin-eslint": "^3.12.1",
"@vue/cli-plugin-unit-jest": "^3.8.0", "@vue/cli-plugin-unit-jest": "^3.12.1",
"@vue/cli-service": "^3.8.0", "@vue/cli-service": "^3.12.1",
"@vue/eslint-config-airbnb": "^4.0.0", "@vue/eslint-config-airbnb": "^4.0.1",
"@vue/test-utils": "1.0.0-beta.29", "@vue/test-utils": "1.0.0-beta.29",
"babel-core": "7.0.0-bridge.0", "babel-core": "7.0.0-bridge.0",
"babel-eslint": "^10.0.1", "babel-eslint": "^10.1.0",
"babel-jest": "^23.6.0", "babel-jest": "^23.6.0",
"eslint": "^5.16.0", "eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0", "eslint-plugin-vue": "^5.2.3",
"less": "^3.0.4", "less": "^3.12.2",
"less-loader": "^4.1.0", "less-loader": "^4.1.0",
"lodash": "^4.17.19", "lodash": "^4.17.19",
"moment": "^2.27.0", "moment": "^2.27.0",
"script-loader": "^0.7.2", "script-loader": "^0.7.2",
"vue-template-compiler": "^2.6.10" "vue-template-compiler": "^2.6.11"
}, },
"eslintConfig": { "eslintConfig": {
"root": true, "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 = 'http://152.136.233.116:8083/roadlinks/';
// const address = '/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://vmax.corp.roadlinks.cn:8088/roadlinks/';
// const address = 'http://127.0.0.1:8088/roadlinks/'; // const address = 'http://127.0.0.1:8088/roadlinks/';
// const address = 'http://193.112.197.170:8080/roadlinks/'; // const address = 'http://193.112.197.170:8080/roadlinks/';
// const address = 'http://172.16.40.196:29980/roadlinks/'; // const address = 'http://172.16.40.196:29980/roadlinks/';
const videoAddress = 'http://152.136.233.116:8000';
const photoAddress = 'http://106.52.130.113:9088/'; const photoAddress = 'http://152.136.233.116:8000';
const imgAddress = 'http://152.136.233.116:8083/roadlinks/'; // const imgAddress = '/roadlinks/';// 测试环境
const imgApi = 'http://152.136.233.116:8083/roadlinks/getCapitalImg?imgName='; const imgAddress = 'http://152.136.233.116:8083/roadlinks/'; // 本地
// const imgApi = 'http://152.136.233.116:8083/roadlinks/getCapitalImg?imgName='; //这个没用到啊
export { 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'; ...@@ -6,10 +6,15 @@ import BaiduMap from 'vue-baidu-map';
import 'element-ui/lib/theme-chalk/index.css'; import 'element-ui/lib/theme-chalk/index.css';
import _ from 'lodash'; import _ from 'lodash';
import moment from 'moment'; import moment from 'moment';
import VideoPlayer from 'vue-video-player';
import App from './App.vue'; import App from './App.vue';
import router from './router'; import router from './router';
import store from './store'; 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(ElementUI);
Vue.use(BaiduMap, { Vue.use(BaiduMap, {
ak: 'AZzMTSKLP4lVHphRauTBdINZUFnpWTcu', ak: 'AZzMTSKLP4lVHphRauTBdINZUFnpWTcu',
......
src/views/Home.vue
View file @ 42544e6b
...@@ -48,6 +48,24 @@ ...@@ -48,6 +48,24 @@
<span slot="title" style="font-size: 16px">巡检结果明细</span> <span slot="title" style="font-size: 16px">巡检结果明细</span>
</el-menu-item> </el-menu-item>
</el-submenu> </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-menu>
</el-aside> </el-aside>
<el-container> <el-container>
......
src/views/Result.vue
View file @ 42544e6b
<template > <template >
<div class="result" ref="result" > <div class="result" ref="result" >
<div class="box"> <div class="box">
<!-- 查询区 --> <!-- 查询区 -->
<el-col :span="24" class="warp-breadcrum"> <el-col :span="24" class="warp-breadcrum">
...@@ -43,7 +44,7 @@ ...@@ -43,7 +44,7 @@
></el-date-picker> ></el-date-picker>
</el-form-item> </el-form-item>
<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-form-item> <el-form-item>
<el-button type="primary" @click="exportTravel">导出结果</el-button> <el-button type="primary" @click="exportTravel">导出结果</el-button>
...@@ -104,7 +105,7 @@ ...@@ -104,7 +105,7 @@
<!-- 地图 --> <!-- 地图 -->
<div class="ov-map" > <div class="ov-map" >
<baidu-map <baidu-map
class="map" class="bm-view"
:center="center" :center="center"
:zoom="zoom" :zoom="zoom"
@zoomend="zoomEnd" @zoomend="zoomEnd"
...@@ -114,8 +115,53 @@ ...@@ -114,8 +115,53 @@
> >
<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation> <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">--> <!--<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 <bm-marker
:zIndex="5" :zIndex="5"
:position="{lng: item?item.lng:'', lat: item?item.lat:''}" :position="{lng: item?item.lng:'', lat: item?item.lat:''}"
...@@ -137,7 +183,7 @@ ...@@ -137,7 +183,7 @@
backgroundColor: 'rgba(0, 0, 0, 0)', fontSize : '10px'}" backgroundColor: 'rgba(0, 0, 0, 0)', fontSize : '10px'}"
/> />
</bm-marker> </bm-marker>
</div> </div>-->
<!--</bml-marker-clusterer>--> <!--</bml-marker-clusterer>-->
<bm-city-list anchor="BMAP_ANCHOR_BOTTOM_RIGHT" @changeBefore="changeBefore"></bm-city-list> <bm-city-list anchor="BMAP_ANCHOR_BOTTOM_RIGHT" @changeBefore="changeBefore"></bm-city-list>
...@@ -181,9 +227,14 @@ ...@@ -181,9 +227,14 @@
</div> </div>
</div> </div>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<style lang="less" scope> <style lang="less" scope>
.bm-view {
width: 100%;
height: 600px;
}
.BMapLabel { .BMapLabel {
z-index: 10 !important; z-index: 10 !important;
} }
...@@ -237,7 +288,7 @@ ...@@ -237,7 +288,7 @@
} }
.ov-map { .ov-map {
width: calc(100vw - 600px); width: calc(100vw - 600px);
height: 100%; height: 600px;
float: left; float: left;
background: #888; background: #888;
.map { .map {
...@@ -246,7 +297,7 @@ ...@@ -246,7 +297,7 @@
} }
} }
.picture { .picture {
height: 90%; height: 600px;
width: calc(300px); width: calc(300px);
float: left; float: left;
.el-button--primary { .el-button--primary {
...@@ -307,16 +358,27 @@ import { Message } from 'element-ui'; ...@@ -307,16 +358,27 @@ import { Message } from 'element-ui';
import gcoord from 'gcoord'; import gcoord from 'gcoord';
// eslint-disable-next-line import/no-extraneous-dependencies // eslint-disable-next-line import/no-extraneous-dependencies
import moment from 'moment'; import moment from 'moment';
import { export_json_to_excel } from '@/excel/Export2Excel';
import { import {
imgApi, imgAddress, address, address, photoAddress,
} from '../config'; } from '../config';
import { export_json_to_excel } from '@/excel/Export2Excel';
export default { export default {
name: 'result', name: 'result',
data() { data() {
return { return {
contentstr: '',
isShowMark: false,
markObj: {
index: '',
title: '',
lng: '',
lat: '',
// eslint-disable-next-line global-require
url: require('../assets/img/map-marker_blue.png'),
},
searchData: [], searchData: [],
tableData: [], tableData: [],
options: [{ value: 0, label: '全国' }], options: [{ value: 0, label: '全国' }],
...@@ -490,6 +552,7 @@ export default { ...@@ -490,6 +552,7 @@ export default {
screenLoading: false, screenLoading: false,
currentIndex: 0, currentIndex: 0,
markers: [], markers: [],
radioIndex: 0,
}; };
}, },
mounted() { mounted() {
...@@ -515,6 +578,7 @@ export default { ...@@ -515,6 +578,7 @@ export default {
} }
this.radioIndex = 0; this.radioIndex = 0;
this.queryAllEquipment(); this.queryAllEquipment();
this.getInspectResultForTableData();
this.queryTravel(); this.queryTravel();
}, },
updated() { updated() {
...@@ -523,73 +587,6 @@ export default { ...@@ -523,73 +587,6 @@ export default {
methods: { 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) { handleSizeChange(size) {
this.pagesize = size; this.pagesize = size;
}, },
...@@ -683,7 +680,7 @@ export default { ...@@ -683,7 +680,7 @@ export default {
}); });
}, },
// 这个也是导出？ 没用到 // 这个也是导出？ 没用到
exportImgInfo() { /* exportImgInfo() {
const exportImgs = []; const exportImgs = [];
this.allImgs.forEach((item) => { this.allImgs.forEach((item) => {
const capital = item.content.split('|'); const capital = item.content.split('|');
...@@ -720,35 +717,48 @@ export default { ...@@ -720,35 +717,48 @@ export default {
const fileName = '资产图片信息'; const fileName = '资产图片信息';
export_json_to_excel(tHeader, data, fileName); export_json_to_excel(tHeader, data, fileName);
}); });
}, }, */
// 点击地图或者图片修改地图样式 // 点击地图或者图片修改地图样式
addclass(index) { addclass(e) {
if (document.getElementById(this.groupImgs[index].id)) { // eslint-disable-next-line global-require
document.getElementById(this.groupImgs[index].id).scrollIntoView(); 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_) => { showPictureForMap(lng, lat) {
if (index_ === index) { this.groupImgs.forEach((item, index) => {
// eslint-disable-next-line no-param-reassign,global-require // eslint-disable-next-line eqeqeq
val.url = val.status === 1 || val.status === 3 if (item.lng == lng && item.lat == lat) {
// eslint-disable-next-line global-require this.showPicture(index);
? 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');
} }
}); });
this.isShow = index;
}, },
// 移除地图的样式 // 移除地图的样式
removeclass() { 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 // eslint-disable-next-line no-param-reassign,global-require
val.url = val.status === 1 || val.status === 3 val.url = val.status === 1 || val.status === 3
// eslint-disable-next-line global-require // eslint-disable-next-line global-require
...@@ -756,63 +766,103 @@ export default { ...@@ -756,63 +766,103 @@ export default {
// eslint-disable-next-line global-require // eslint-disable-next-line global-require
: require('../assets/img/jingbao_red.png'); : require('../assets/img/jingbao_red.png');
}); });
this.isShow = -1; this.isShow = -1; */
}, },
// 展示图片 // 展示图片
showPicture(index) { showPicture(index) {
this.screenLoading = true; this.screenLoading = true;
const that = this; const that = this;
// eslint-disable-next-line eqeqeq // 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.isShowPicture = true;
this.screenLoading = false; this.screenLoading = false;
return; return;
} }
that.customStyleArray = []; that.customStyleArray = [];
this.bigImgUrl = this.groupImgs[index].bigImgUrl; // 描点并且展示图片
this.imgContent = this.groupImgs[index].contentDetail; axios
let vectorData = this.groupImgs[index].vector; .get(
`${address}getTrajectImgLocationByImageId?imageId=${this.groupImgs[index].imageId}&status=${this.groupImgs[index].status}`,
if (this.groupImgs[index].vector.length === 1) { )
vectorData = JSON.parse(this.groupImgs[index].vector); // eslint-disable-next-line no-unused-vars
} .then((response) => {
const styleArray = response.data.data;
if (vectorData && vectorData.location) { this.bigImgUrl = imagePath;
const point = vectorData.location; this.customStyleArray = [];
let contentstr = '';
// 拼接 展示的资产信息
styleArray.forEach((e, styleIndex) => {
e.index = styleIndex + 1;
const point = JSON.parse(e.vector).location;
if (point.length === 4) { if (point.length === 4) {
const style = { const style = {
positionLeft: point[0], positionLeft: point[0],
positionRight: point[1], positionRight: point[1],
positionWidth: point[2] - point[0], positionWidth: point[2] - point[0],
positionHeight: point[3] - point[1], 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.screenLoading = true;
this.isShowPicture = true; this.isShowPicture = true;
})
.catch((error) => {
console.log(error);
});
}, },
// 图片 鼠标悬浮 // 图片 鼠标悬浮
addActive(index) { 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 = ''; e.markerAnim = '';
// eslint-disable-next-line global-require // eslint-disable-next-line global-require
e.url = e.status === 1 || e.status === 3 e.url = e.status === 1 || e.status === 3
...@@ -830,21 +880,12 @@ export default { ...@@ -830,21 +880,12 @@ export default {
? require('../assets/img/map-marker_blue.png') ? require('../assets/img/map-marker_blue.png')
// eslint-disable-next-line global-require // eslint-disable-next-line global-require
: require('../assets/img/jingbao_blue.png'); : 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.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 // eslint-disable-next-line no-unused-vars
handler({ BMap, map }) { handler({ BMap, map }) {
...@@ -881,6 +922,89 @@ export default { ...@@ -881,6 +922,89 @@ export default {
console.log(error); 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() { queryTravel() {
sessionStorage.setItem('searchVal', JSON.stringify(this.filters)); sessionStorage.setItem('searchVal', JSON.stringify(this.filters));
if (this.filters.dateTime.length === 0) { if (this.filters.dateTime.length === 0) {
...@@ -917,9 +1041,10 @@ export default { ...@@ -917,9 +1041,10 @@ export default {
that.searchLoading = false; that.searchLoading = false;
if (response.data.code === 200) { if (response.data.code === 200) {
if (response.data.data) { if (response.data.data) {
that.tableData = []; /* that.tableData = []; */
// 分页用的吗 // 分页用的吗
that.allPoints = []; that.allPoints = [];
that.groupImgs = [];
// 地图展示的点 TODO 优化 // 地图展示的点 TODO 优化
that.carPoints = []; that.carPoints = [];
that.imgs = []; that.imgs = [];
...@@ -928,19 +1053,20 @@ export default { ...@@ -928,19 +1053,20 @@ export default {
// eslint-disable-next-line no-var,no-restricted-syntax,vars-on-top // 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]) { if (response.data.data[key]) {
const gisArr = response.data.data[key]; const gisArr = response.data.data[key];
// 按照车 循环 // 按照车 循环
gisArr.forEach((val) => { gisArr.forEach((val) => {
if (val) { if (val) {
// 计算轨迹长度 获取当前轨迹所有点carPoints // 计算轨迹长度 获取当前轨迹所有点carPoints
const carPointsTmp = []; const carPointsTmp = [];
const carImgsTmp = []; const carImgsTmp = [];
let totalDistance = 0; let totalDistance = 0;
// 循环一个轨迹多少个点 // 循环一个轨迹多少个点
val.forEach((item, index) => { val.forEach((item, index) => {
if (item.longitude && item.latitude) { /* if (item.longitude && item.latitude) { */
// 循环他的images // 循环他的images
if (item.images) { if (item.images) {
// 资产及对应图片信息 // 资产及对应图片信息
...@@ -986,7 +1112,7 @@ export default { ...@@ -986,7 +1112,7 @@ export default {
? '正常' ? '正常'
: info.status === 2 : info.status === 2
? '异常' ? '异常'
: '新增' : '正常'
}`, }`,
`位置:${info.position}`, `位置:${info.position}`,
], ],
...@@ -994,9 +1120,14 @@ export default { ...@@ -994,9 +1120,14 @@ export default {
// 这个应该是右边的图片 // 这个应该是右边的图片
carImgsTmp.push({ 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 // eslint-disable-next-line no-nested-ternary
url: `${imgAddress}getCapitalImg?imgPath=${info.smallImagePath}`, url: photoAddress + info.smallImagePath,
bigImgUrl: `${imgAddress}getCapitalImg?imgPath=${info.imagePath}`,
content: `${info.info} | ${ content: `${info.info} | ${
// eslint-disable-next-line no-nested-ternary // eslint-disable-next-line no-nested-ternary
info.status === 1 info.status === 1
...@@ -1004,7 +1135,7 @@ export default { ...@@ -1004,7 +1135,7 @@ export default {
// eslint-disable-next-line eqeqeq // eslint-disable-next-line eqeqeq
: info.status == 2 : info.status == 2
? '异常' ? '异常'
: '新增' : '正常'
} | ${info.position}`, } | ${info.position}`,
number: that.no, number: that.no,
id: `imageCard${that.no}`, id: `imageCard${that.no}`,
...@@ -1049,7 +1180,7 @@ export default { ...@@ -1049,7 +1180,7 @@ export default {
); );
} }
} }
} /* } */
} }
}); });
...@@ -1057,7 +1188,7 @@ export default { ...@@ -1057,7 +1188,7 @@ export default {
that.allPoints.push(carPointsTmp); that.allPoints.push(carPointsTmp);
// 右边图片 // 右边图片
that.allImgs.push(carImgsTmp); that.allImgs.push(carImgsTmp);
that.tableData.push({ /* that.tableData.push({
plateNo: key, plateNo: key,
startEndTime: `${this.$moment( startEndTime: `${this.$moment(
val[val.length - 1].timestamp, val[val.length - 1].timestamp,
...@@ -1087,7 +1218,7 @@ export default { ...@@ -1087,7 +1218,7 @@ export default {
}个`, }个`,
startTime: val[val.length - 1].timestamp, startTime: val[val.length - 1].timestamp,
endTime: val[0].timestamp, endTime: val[0].timestamp,
}); }); */
} }
}); });
} }
...@@ -1095,6 +1226,8 @@ export default { ...@@ -1095,6 +1226,8 @@ export default {
// eslint-disable-next-line prefer-destructuring // eslint-disable-next-line prefer-destructuring
that.carPoints = that.allPoints[0]; that.carPoints = that.allPoints[0];
/* console.log(JSON.stringify(that.carPoints)); */
// eslint-disable-next-line prefer-destructuring // eslint-disable-next-line prefer-destructuring
// 分组之前的 // 分组之前的
that.imgs = that.allImgs[0]; that.imgs = that.allImgs[0];
...@@ -1111,15 +1244,16 @@ export default { ...@@ -1111,15 +1244,16 @@ export default {
o.content = o.content.split('|').length > 2 o.content = o.content.split('|').length > 2
? `${o.content.split('|')[1]}|${o.content.split('|')[2]}` : o.content; ? `${o.content.split('|')[1]}|${o.content.split('|')[2]}` : o.content;
}); });
/* console.log(`111111${JSON.stringify(that.carPoints)}`); */
const carPointsNew = []; const carPointsNew = [];
const imgsContent = []; const imgsContent = [];
// 图片分组 // 图片分组
const imgsNew = that.imgs const imgsNew = that.imgs
.map((item, index, arr) => { .map((item, index, arr) => {
imgsContent.push({ contentUrl: item.type + item.url, name: item.name }); imgsContent.push({ contentUrl: item.type + item.url, name: item.name });
const i = arr.find( 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) { if (i !== item) {
i.vector.push(item.vector); i.vector.push(item.vector);
...@@ -1159,6 +1293,7 @@ export default { ...@@ -1159,6 +1293,7 @@ export default {
contentstr = `${contentstr.substring(0, contentstr.lastIndexOf(','))} `; contentstr = `${contentstr.substring(0, contentstr.lastIndexOf(','))} `;
const contentImg = firstContent + (contents.length > 1 ? `等${contents.length}个资产` : ''); const contentImg = firstContent + (contents.length > 1 ? `等${contents.length}个资产` : '');
e.contentImgTip = contentImg; e.contentImgTip = contentImg;
e.contentDetail = `${contentstr}|${e.content}`; e.contentDetail = `${contentstr}|${e.content}`;
e.contentImg = `${contentImg}|${e.content}`; e.contentImg = `${contentImg}|${e.content}`;
...@@ -1175,7 +1310,7 @@ export default { ...@@ -1175,7 +1310,7 @@ export default {
? '正常' ? '正常'
: e.status === 2 : e.status === 2
? '异常' ? '异常'
: '新增' : '正常'
}`, }`,
`位置:${e.position}`, `位置:${e.position}`,
]; ];
...@@ -1238,15 +1373,11 @@ export default { ...@@ -1238,15 +1373,11 @@ export default {
return (d * Math.PI) / 180.0; return (d * Math.PI) / 180.0;
}, },
linkDetail(index, row) { 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({ this.$router.push({
name: 'resultDetail', name: 'resultDetail',
params: { params: {
startTime: row.startTime, startTime: this.filters.dateTime[0],
endTime: row.endTime, endTime: this.filters.dateTime[1],
equipment: row.plateNo, equipment: row.plateNo,
}, },
}); });
...@@ -1335,12 +1466,7 @@ export default { ...@@ -1335,12 +1466,7 @@ export default {
}); });
}, },
clickChange(index) { clickChange(index) {
console.log(`*************************************** index:${index}`);
console.log(
`*************************************** curindex:${this.currentIndex}`,
);
if (index === this.currentIndex) { if (index === this.currentIndex) {
console.log(`*************************************** iiiii:${index}`);
} else { } else {
this.currentIndex = index; this.currentIndex = index;
this.radioIndex = index; this.radioIndex = index;
...@@ -1375,7 +1501,7 @@ export default { ...@@ -1375,7 +1501,7 @@ export default {
.map((item, index, arr) => { .map((item, index, arr) => {
const i = arr.find( const i = arr.find(
// eslint-disable-next-line eqeqeq // 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 (i !== item) {
if (item.name) { if (item.name) {
......
src/views/ResultDetail.vue
View file @ 42544e6b
...@@ -188,9 +188,9 @@ import axios from 'axios'; ...@@ -188,9 +188,9 @@ import axios from 'axios';
import { Message } from 'element-ui'; import { Message } from 'element-ui';
import echarts from 'echarts'; import echarts from 'echarts';
import moment from 'moment'; import moment from 'moment';
import { address, imgAddress } from '../config';
import { export_json_to_excel } from '@/excel/Export2Excel'; import { export_json_to_excel } from '@/excel/Export2Excel';
import elDragDialog from '@/components/el-drag-dialog'; import elDragDialog from '@/components/el-drag-dialog';
import { address, imgAddress } from '../config';
export default { export default {
name: 'detail', name: 'detail',
...@@ -385,10 +385,10 @@ export default { ...@@ -385,10 +385,10 @@ export default {
that.filters.equipment = this.$route.params.equipment; that.filters.equipment = this.$route.params.equipment;
} }
if (this.startTime != null && this.endTime != null) { if (that.startTime && that.endTime) {
this.filters.dateTime = [ this.filters.dateTime = [
moment(this.startTime).format('YYYY-MM-DD HH:mm:ss'), this.$route.params.startTime,
moment(this.endTime).format('YYYY-MM-DD HH:mm:ss'), this.$route.params.endTime,
]; ];
} else if (searchVal) { } else if (searchVal) {
this.filters = JSON.parse(searchVal); this.filters = JSON.parse(searchVal);
...@@ -438,7 +438,7 @@ export default { ...@@ -438,7 +438,7 @@ export default {
if (response.data.data) { if (response.data.data) {
this.pageOption.totalCount = response.data.data.total; this.pageOption.totalCount = response.data.data.total;
response.data.data.list.forEach((val) => { 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( val.imageTime = moment(parseInt(val.imageTime)).format(
'YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD HH:mm:ss',
); );
......
src/views/Task.vue
View file @ 42544e6b
...@@ -93,7 +93,7 @@ ...@@ -93,7 +93,7 @@
<!-- 任务统计 --> <!-- 任务统计 -->
<div class="ov-map" id="ov-map"> <div class="ov-map" id="ov-map">
<baidu-map <baidu-map
class="map" class="bm-view"
:center="center" :center="center"
:zoom="zoom" :zoom="zoom"
@zoomend="zoomEnd" @zoomend="zoomEnd"
...@@ -163,8 +163,8 @@ import gcoord from 'gcoord'; ...@@ -163,8 +163,8 @@ import gcoord from 'gcoord';
// eslint-disable-next-line import/no-extraneous-dependencies // eslint-disable-next-line import/no-extraneous-dependencies
import moment from 'moment'; import moment from 'moment';
import { Message } from 'element-ui'; import { Message } from 'element-ui';
import { address } from '../config';
import { export_json_to_excel } from '@/excel/Export2Excel'; import { export_json_to_excel } from '@/excel/Export2Excel';
import { address } from '../config';
export default { export default {
name: 'task', name: 'task',
...@@ -353,6 +353,51 @@ export default { ...@@ -353,6 +353,51 @@ export default {
// 描点并且展示图片 // 描点并且展示图片
getTrajectImgLocationByImageId(id) { getTrajectImgLocationByImageId(id) {
axios 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( .get(
`${address}getTrajectImgLocationByImageId?imageId=${id}`, `${address}getTrajectImgLocationByImageId?imageId=${id}`,
) )
...@@ -390,7 +435,7 @@ export default { ...@@ -390,7 +435,7 @@ export default {
}) })
.catch((error) => { .catch((error) => {
console.log(error); console.log(error);
}); }); */
}, },
...@@ -834,7 +879,12 @@ export default { ...@@ -834,7 +879,12 @@ export default {
this.trajectoryWithLinkId = []; this.trajectoryWithLinkId = [];
this.no = 0; this.no = 0;
const resData = response.data.data; 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 // eslint-disable-next-line no-restricted-syntax
for (const key in resData) { // 这里是遍历车辆信息 车辆会有多个轨迹 在遍历 for (const key in resData) { // 这里是遍历车辆信息 车辆会有多个轨迹 在遍历
if (resData[key]) { if (resData[key]) {
...@@ -846,11 +896,6 @@ export default { ...@@ -846,11 +896,6 @@ export default {
const points = []; const points = [];
let linkIds = []; let linkIds = [];
// 距离
let distance = 0;
// eslint-disable-next-line no-unused-vars
let totalDistance = 0;
// 根据几条轨迹遍历 // 根据几条轨迹遍历
gis.trajectorys.forEach((item, index) => { gis.trajectorys.forEach((item, index) => {
if (item) { if (item) {
...@@ -876,34 +921,6 @@ export default { ...@@ -876,34 +921,6 @@ export default {
gcoord.BD09, 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 画红线
poly.push({ poly.push({
...@@ -944,16 +961,10 @@ export default { ...@@ -944,16 +961,10 @@ export default {
), ),
startPoint: gis.startPoint, startPoint: gis.startPoint,
endPoint: gis.endPoint, endPoint: gis.endPoint,
inspectDistance: `${(totalDistance / 1000).toFixed(1)}km`, inspectDistance: gis.inspectDistance,
inspectTime: gis.inspectTime, inspectTime: gis.inspectTime,
averageSpeed: `${( averageSpeed: gis.averageSpeed,
totalDistance
/ 1000
/ ((gis.endTime
- gis.startTime)
/ (1000 * 3600))
).toFixed(1)}km/h`,
}); });
if (points) { if (points) {
// eslint-disable-next-line global-require // eslint-disable-next-line global-require
...@@ -1119,6 +1130,10 @@ export default { ...@@ -1119,6 +1130,10 @@ export default {
</script> </script>
<style lang="less" scope> <style lang="less" scope>
.bm-view {
width: 100%;
height: 600px;
}
.BMap_Marker { .BMap_Marker {
z-index: 10 !important; z-index: 10 !important;
} }
...@@ -1137,16 +1152,16 @@ export default { ...@@ -1137,16 +1152,16 @@ export default {
} }
.ov-map { .ov-map {
width: 100%; width: 100%;
height: 100%; height: 600px;
background: #888; background: #888;
.map { .map {
width: 100%; width: 100%;
height: 100%; height: 600px;
} }
} }
} }
.picture { .picture {
height: 100%; height: 600px;
width: 30%; width: 30%;
float: left; float: left;
ul { 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