Skip to content

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

merge 修改分页

parents 5a568618 69956ea7
Hide whitespace changes
Inline Side-by-side
Showing with 1213 additions and 986 deletions
package-lock.json
View file @ e3b2aae7
......@@ -10226,9 +10226,10 @@
}
},
"moment": {
"version": "2.24.0",
"resolved": "https://registry.npm.taobao.org/moment/download/moment-2.24.0.tgz",
"integrity": "sha1-DQVdU/UFKqZTyfbraLtdEr9cK1s="
"version": "2.27.0",
"resolved": "https://registry.npm.taobao.org/moment/download/moment-2.27.0.tgz?cache=0&sync_timestamp=1592516084857&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmoment%2Fdownload%2Fmoment-2.27.0.tgz",
"integrity": "sha1-i/9OPiaiNiIN/j423nVrbrqgEF0=",
"dev": true
},
"move-concurrently": {
"version": "1.0.1",
......
src/views/Result.vue
View file @ e3b2aae7
......@@ -2,166 +2,160 @@
<div class="result" ref="result" v-loading="screenLoading">
<div class="box">
<!-- 查询区 -->
<el-col :span="24" class="warp-breadcrum">
<!--搜索栏-->
<el-col :span="24" class="toolbar">
<el-form :inline="true" :model="filters">
<el-form-item>
<el-select
v-model="filters.plateNo"
multiple
collapse-tags
filterable
placeholder="车牌号"
>
<el-option
v-for="item in plateNoOptions"
:key="item.code"
:label="item.plateNo"
:value="item.code">
</el-option>
</el-select>
<!-- <el-autocomplete
<el-col :span="24" class="warp-breadcrum">
<!--搜索栏-->
<el-col :span="24" class="toolbar">
<el-form :inline="true" :model="filters">
<el-form-item>
<el-select
v-model="filters.plateNo"
multiple
collapse-tags
filterable
placeholder="车牌号"
>
<el-option
v-for="item in plateNoOptions"
:key="item.code"
:label="item.plateNo"
:value="item.code"
></el-option>
</el-select>
<!-- <el-autocomplete
v-model="filters.channelName"
:fetch-suggestions="queryChannelSearchAsync"
placeholder="渠道"
@select="handleChannelSelect"
></el-autocomplete> -->
</el-form-item>
<el-form-item>
<el-date-picker
v-model="filters.dateTime"
type="daterange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
:default-time="['00:00:00', '23:59:59']"
value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="pickerOptions">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" v-loading="searchLoading" @click="queryTravel">搜索</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="exportTravel">导出结果</el-button>
</el-form-item>
</el-form>
</el-col>
</el-col>
<!-- 任务表 -->
></el-autocomplete>-->
</el-form-item>
<el-form-item>
<el-date-picker
v-model="filters.dateTime"
type="daterange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
:default-time="['00:00:00', '23:59:59']"
value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="pickerOptions"
></el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" v-loading="searchLoading" @click="queryTravel">搜索</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="exportTravel">导出结果</el-button>
</el-form-item>
</el-form>
</el-col>
</el-col>
<!-- 任务表 -->
<div class="task-table">
<el-table
:data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
style="width: calc(100vw - 240px);overflow:hidden;"
border=true
fit
highlight-current-row=true
>
<el-table-column
type="index"
width="50"
label="序号">
</el-table-column>
<el-table-column
label="车牌号"
prop="plateNo">
</el-table-column>
<el-table-column
label="起始时间 - 终止时间"
prop="startEndTime">
</el-table-column>
<el-table-column
label="起点 - 终点"
prop="startEndPoint">
</el-table-column>
<el-table-column
label="巡检里程"
prop="inspectDistance">
</el-table-column>
<el-table-column
label="巡检资产"
prop="inspectNum">
</el-table-column>
<el-table-column
label="正常资产"
width="80"
prop="normalNum">
</el-table-column>
<el-table-column
label="路面抛洒物"
prop="roadLetterNum">
</el-table-column>
<el-table-column
label="护栏弯曲"
prop="guardrailNum">
</el-table-column>
<el-table-column
label="新增资产"
prop="newInspectNum">
</el-table-column>
<el-table-column
v-if="isShowCol"
label="起始时间戳"
prop="startTime">
</el-table-column>
<el-table-column
v-if="isShowCol"
label="终止时间戳"
prop="endTime">
</el-table-column>
<el-table-column fixed="right" label="详情" >
<template slot-scope="scope">
<el-button
size="mini"
@click="linkDetail(scope.$index, scope.row)">查看</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5, 10, 20, 40]"
:page-size="pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="tableData.length">
</el-pagination>
:data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
style="width: calc(100vw - 240px);overflow:hidden;"
border
fit
highlight-current-row
>
<el-table-column width="50" align="center" prop="select">
<template slot-scope="scope">
<div
:class="(radioIndex === scope.$index) ? 'rowSelect' : 'rowUnSelect'"
:label="scope.$index"
@click="clickChange(scope.$index, scope.row)"
></div>
</template>
</el-table-column>
<el-table-column width="80" label="序号" type="index" prop="index" align="center"></el-table-column>
<el-table-column width="120" label="车牌号" prop="plateNo" align="center"></el-table-column>
<el-table-column width="240" label="起始时间 - 终止时间" prop="startEndTime" align="center"></el-table-column>
<el-table-column width="200" label="起点 - 终点" prop="startEndPoint" align="center"></el-table-column>
<el-table-column width="100" label="巡检里程" prop="inspectDistance" align="center"></el-table-column>
<el-table-column width="100" label="巡检资产" prop="inspectNum" align="center"></el-table-column>
<el-table-column width="100" label="正常资产" prop="normalNum" align="center"></el-table-column>
<!-- <el-table-column width="100" label="异常资产" prop="abNormalNum" align="center"></el-table-column> -->
<el-table-column width="100" label="新增资产" prop="newInspectNum" align="center"></el-table-column>
<el-table-column width="120" label="路面抛洒物" prop="roadLetterNum" align="center"></el-table-column>
<el-table-column width="100" label="护栏弯曲" prop="guardrailNum" align="center"></el-table-column>
<el-table-column v-if="isShowCol" label="起始时间戳" prop="startTime" align="center"></el-table-column>
<el-table-column v-if="isShowCol" label="终止时间戳" prop="endTime" align="center"></el-table-column>
<el-table-column fixed="right" label="详情" align="center">
<template slot-scope="scope">
<el-button size="mini" @click="linkDetail(scope.$index, scope.row)">查看</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5, 10, 20, 40]"
:page-size="pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="tableData.length"
></el-pagination>
</div>
<!-- 地图 -->
<div class="ov-map">
<baidu-map class="map" :center="center" :zoom="zoom" @zoomend="zoomEnd" scroll-wheel-zoom @dragend="getMapBounds" @ready="handler">
<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
<!-- <bm-polyline :path="item.polylinePath" stroke-color="orange" :stroke-opacity="1" :stroke-weight="5" :editing="false" @lineupdate="updatePolylinePath">
</bm-polyline> -->
<bml-marker-clusterer :averageCenter="true">
<div v-for="(item,index) in carPoints" :key="item">
<bm-marker :zIndex="5" :position="{lng: item.lng, lat: item.lat}" :title="item.title" :offset="{width: 0, height: -16}" :icon="{url: item.url, size: {width: 32, height: 32}}" :animation="item.markerAnim" @mouseover="addclass(index)" @mouseout="removeclass(index)" @click="showPicture(index)">
<bm-label :content="item.content" :zIndex="10" :position="{lng: item.lng, lat: item.lat}" :offset="{width: 8, height: 0}" :labelStyle="{color: 'white', border: 0, backgroundColor: 'transparent', fontSize : '14px'}"/>
</bm-marker>
</div>
</bml-marker-clusterer>
<bm-city-list anchor="BMAP_ANCHOR_BOTTOM_RIGHT" @changeBefore="changeBefore"></bm-city-list>
</baidu-map>
<baidu-map
class="map"
:center="center"
:zoom="zoom"
@zoomend="zoomEnd"
scroll-wheel-zoom
@dragend="getMapBounds"
@ready="handler"
>
<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
<!-- <bm-polyline :path="item.polylinePath" stroke-color="orange" :stroke-opacity="1" :stroke-weight="5" :editing="false" @lineupdate="updatePolylinePath">
</bm-polyline>-->
<bml-marker-clusterer :averageCenter="true">
<div v-for="(item,index) in carPoints" :key="item">
<bm-marker
:zIndex="5"
:position="{lng: item.lng, lat: item.lat}"
:title="item.title"
:offset="{width: 0, height: -16}"
:icon="{url: item.url, size: {width: 32, height: 32}}"
:animation="item.markerAnim"
@mouseover="addclass(index)"
@mouseout="removeclass(index)"
@click="showPicture(index)"
>
<bm-label
:content="item.content"
:zIndex="10"
:position="{lng: item.lng, lat: item.lat}"
:offset="{width: 6, height: 2}"
:labelStyle="{color:'rgba(0,0,255,255)', border: 0, backgroundColor: 'rgba(0, 0, 0, 0)', fontSize : '10px'}"
/>
</bm-marker>
</div>
</bml-marker-clusterer>
<bm-city-list anchor="BMAP_ANCHOR_BOTTOM_RIGHT" @changeBefore="changeBefore"></bm-city-list>
</baidu-map>
</div>
<!-- 图片 -->
<div class="picture">
<!-- <el-button type="primary" @click="exportImgInfo">导出</el-button> -->
<ul>
<li v-for="(item,index) in groupImgs" :key="item" style="padding: 5px;"
@mouseover="addActive(index)"
@mouseout="removeActive(index)"
@click="showPicture(index)">
<el-card :id="item.id" :body-style="{ padding: '0px' }"
:class="{pic_active:index == isShow}">
<li
v-for="(item,index) in groupImgs"
:key="item"
style="padding: 5px;"
@mouseover="addActive(index)"
@mouseout="removeActive(index)"
@click="showPicture(index)"
>
<el-card
:id="item.id"
:body-style="{ padding: '0px' }"
:class="{pic_active:index == isShow}"
>
<!-- <img :src="item.url" alt="#"> -->
<el-image :src="item.url" lazy></el-image>
<span class="number">{{item.number}}</span>
......@@ -174,32 +168,28 @@
</div>
</div>
<el-dialog
:visible.sync="isShowPicture"
:title="imgContent"
custom-class="customWidth"
>
<div :style="'height:' + fullHeight + 'px; position: relative;'" ref="mainW">
<img :src="bigImgUrl" ref="BGIMG" width="100%" style="height: 100%;" @load=loadBigImg>
<div v-for="(item) in customStyleArray" :key="item">
<div class="dash" :style="item" v-if="showRedBox"></div>
</div>
<el-dialog :visible.sync="isShowPicture" :title="imgContent" custom-class="customWidth">
<div :style="'height:' + fullHeight + 'px; position: relative;'" ref="mainW">
<img :src="bigImgUrl" ref="BGIMG" width="100%" style="height: 100%;" @load="loadBigImg" />
<div v-for="(item) in customStyleArray" :key="item">
<div class="dash" :style="item" v-if="showRedBox"></div>
</div>
</div>
</el-dialog>
</div>
</template>
<style lang="less" scope>
.BMapLabel{
.BMapLabel {
z-index: 10 !important;
}
.customWidth{
width: 63%
.customWidth {
width: 63%;
}
.sample {
width: 120px;
height: 40px;
line-height: 40px;
background: rgba(0,0,0,0.5);
background: rgba(0, 0, 0, 0.5);
overflow: hidden;
box-shadow: 0 0 5px #000;
color: #fff;
......@@ -207,19 +197,40 @@
padding: 10px;
position: absolute;
}
.anchorBL{display:none}
.result{
.anchorBL {
display: none;
}
.rowSelect {
height: 20px;
width: 20px;
border-radius: 10px;
background-color: #1296db;
border-color: black;
border-width: 5px;
}
.rowUnSelect {
height: 20px;
width: 20px;
border-radius: 10px;
background-color: darkgray;
border-color: black;
border-width: 5px;
}
.result {
height: 100%;
width: calc(100vw - 240px);
.box{
.box {
height: 100%;
width: calc(100vw - 240px);
float: left;
.el-col-24 {
width: 100%;
background-color: white;
width: 100%;
background-color: white;
}
.ov-map{
.ov-map {
width: calc(100vw - 600px);
height: 100%;
float: left;
......@@ -229,7 +240,7 @@
height: 100%;
}
}
.picture{
.picture {
height: 90%;
width: calc(300px);
float: left;
......@@ -240,24 +251,24 @@
margin-left: 64%;
margin-bottom: 5%;
}
ul{
ul {
width: 100%;
height: 100%;
overflow-y: scroll;
margin: 0 auto;
margin-left: 10%;
li{
li {
width: 80%;
height: auto;
float: left;
text-align: center;
.el-card{
.el-card {
position: relative;
img{
img {
width: 100%;
height: 80%;
}
.number{
.number {
position: absolute;
left: 0;
top: 0;
......@@ -274,44 +285,38 @@
}
}
}
}
.pic_active{
.pic_active {
border: 5px solid #1296db;
}
.dash{
.dash {
position: absolute;
border: 2px #EC292A dashed;
border: 2px #ec292a dashed;
}
</style>
<script>
import axios from 'axios';
import { Message } from 'element-ui';
import gcoord from 'gcoord';
import moment from 'moment';
import {
imgApi, imgAddress, address, photoAddress,
} from '../config';
import { export_json_to_excel } from '@/excel/Export2Excel';
import axios from "axios";
import { Message } from "element-ui";
import gcoord from "gcoord";
import moment from "moment";
import { imgApi, imgAddress, address, photoAddress } from "../config";
import { export_json_to_excel } from "@/excel/Export2Excel";
export default {
name: 'result',
name: "result",
data() {
return {
options: [{ value: 0, label: '全国' }],
zoom: 13,
searchData: [],
tableData: [],
options: [{ value: 0, label: "全国" }],
zoom: 13,
currentPage: 1, // 初始页
pagesize: 10, // 每页的数据
carPoints: [
],
carPoints: [],
allPoints: [],
imgs: [
],
imgs: [],
filters: {
plateNo: [],
dateTime: [],
......@@ -329,88 +334,136 @@ export default {
no: 0,
isShowCol: false,
isShowPicture: false,
bigImgUrl: '',
imgContent: '',
bigImgUrl: "",
imgContent: "",
fullHeight: document.documentElement.clientHeight / 1.5,
pickerOptions: {
shortcuts: [{
text: '最近一周',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
shortcuts: [
{
text: "最近一周",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit("pick", [start, end]);
},
},
}, {
text: '最近一个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
{
text: "最近一个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit("pick", [start, end]);
},
},
}, {
text: '最近三个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit('pick', [start, end]);
{
text: "最近三个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit("pick", [start, end]);
},
},
}],
],
},
capitalOptions: [
{
label: '路面状况',
value: 1,
}, {
label: '护栏',
label: "全部",
value: -2,
},
{
label: "其他",
value: -1,
},
{
label: "道路设施",
value: 0,
},
{
label: "抛洒物",
value: 2,
},
{
label: '龙门架',
label: "护栏",
value: 3,
},
{
label: "龙门架",
value: 101,
}, {
label: '矩形标牌',
},
{
label: "矩形标牌",
value: 201,
}, {
label: '圆形标牌',
},
{
label: "圆形标牌",
value: 202,
}, {
label: '三角标牌',
},
{
label: "三角标牌",
value: 203,
}, {
label: '其它形状标牌',
},
{
label: "其它形状标牌",
value: 209,
}, {
label: '可变信息牌（情报板）',
},
{
label: "可变信息牌（情报板）",
value: 301,
}, {
label: 'T型杆',
},
{
label: "T型杆",
value: 401,
}, {
label: 'L型杆',
},
{
label: "L型杆",
value: 402,
}, {
label: 'I型立杆',
},
{
label: "I型立杆",
value: 403,
}, {
label: '枪式摄像机',
},
{
label: "枪式摄像机",
value: 801,
}, {
label: '相机',
},
{
label: "相机",
value: 802,
}, {
label: '补光灯',
},
{
label: "补光灯",
value: 803,
}, {
label: 'RSU天线',
},
{
label: "RSU天线",
value: 804,
}, {
label: '测速雷达',
},
{
label: "测速雷达",
value: 805,
},
],
statusOptions: [
{
label: "全部",
value: -1,
},
{
label: "正常",
value: 1,
},
{
label: "异常",
value: 2,
},
{
label: "新增",
value: 3,
},
],
showRedBox: false,
customStyle: {
top: `${this.positionRight / this.hscale}px`,
......@@ -418,34 +471,40 @@ export default {
width: `${this.positionWidth / this.scale}px`,
height: `${this.positionHeight / this.hscale}px`,
},
positionLeft: '',
positionRight: '',
positionWidth: '',
positionHeight: '',
positionLeft: "",
positionRight: "",
positionWidth: "",
positionHeight: "",
scale: 0, // 适应比例 1.6608996539792387
hscale: 0, // 1.9014084507042253
searchLoading: false,
customStyleArray: [],
screenLoading: false,
currentIndex: 0,
};
},
mounted() {
if (this.$route.params.startTime && this.$route.params.endTime) {
this.filters.dateTime = [this.$route.params.startTime, this.$route.params.endTime];
this.filters.dateTime = [
this.$route.params.startTime,
this.$route.params.endTime,
];
}
if (this.$route.params.equipment) {
const { equipment } = this.$route.params;
this.filters.plateNo = equipment.split(',');
const { equipment } = this.$route.params.equipment;
this.filters.plateNo = equipment.split(",");
}
if (this.filters.dateTime.length > 0 || this.filters.plateNo.length > 0) {
// do nothing
} else {
const searchVal = sessionStorage.getItem('searchVal');
const searchVal = sessionStorage.getItem("searchVal");
if (searchVal) {
this.filters = JSON.parse(searchVal);
}
}
this.radioIndex = 0;
this.queryAllEquipment();
this.queryTravel();
},
......@@ -458,7 +517,8 @@ export default {
// console.log('---');
const newRedArray = [];
this.scale = this.$refs.BGIMG.naturalWidth / this.$refs.mainW.offsetWidth;
this.hscale = this.$refs.BGIMG.naturalHeight / this.$refs.mainW.offsetHeight;
this.hscale =
this.$refs.BGIMG.naturalHeight / this.$refs.mainW.offsetHeight;
this.customStyleArray.forEach((e) => {
const customStyle = {
top: `${e.positionRight / this.hscale}px`,
......@@ -477,22 +537,15 @@ export default {
this.carPoints = [];
this.imgs = [];
this.allPoints.forEach((item, index) => {
// eslint-disable-next-line no-undef
const point = new BMap.Point(item.lng, item.lat);
if (bounds.containsPoint(point)) {
if (index <= 100) {
this.carPoints.push(item);
this.imgs.push(this.allImgs[index]);
}
}
});
this.carPoints = this.allPoints[this.currentIndex];
this.imgs = this.allImgs[this.currentIndex];
if (this.carPoints.length > 0) {
this.center.lng = this.carPoints[0].lng;
this.center.lat = this.carPoints[0].lat;
const length = this.carPoints.length;
if (length > 0) {
this.center.lng = this.carPoints[parseInt(length / 2)].lng;
this.center.lat = this.carPoints[parseInt(length / 2)].lat;
this.carPoints.forEach((val) => {
val.title = val.titleList.join('\n');
val.title = val.titleList.join("\n");
});
}
},
......@@ -502,37 +555,75 @@ export default {
});
require.ensure([], () => {
// tHeader为存放excel表头标题的数组
const tHeader = ['序号', '车牌号', '起始时间 - 终止时间', '起点 - 终点', '巡检里程', '巡检资产', '正常资产', '路面抛洒物', '护栏弯曲', '新增资产'];
const tHeader = [
"序号",
"车牌号",
"起始时间 - 终止时间",
"起点 - 终点",
"巡检里程",
"巡检资产",
"正常资产",
"路面抛洒物",
"护栏弯曲",
"新增资产",
];
// filterVal为tHeader标题对应的键值
const filterVal = ['no', 'plateNo', 'startEndTime', 'startEndPoint', 'inspectDistance', 'inspectNum', 'normalNum', 'roadLetterNum', 'guardrailNum', 'newInspectNum'];
const filterVal = [
"no",
"plateNo",
"startEndTime",
"startEndPoint",
"inspectDistance",
"inspectNum",
"normalNum",
"roadLetterNum",
"guardrailNum",
"newInspectNum",
];
// list为要转化为excel文件的数据，是一个数组
const list = this.tableData;
// 用map方法处理list数据
const data = list.map(v => filterVal.map(j => v[j]));
const data = list.map((v) => filterVal.map((j) => v[j]));
// 自定义excel文件名
const fileName = '巡检结果';
const fileName = "巡检结果";
export_json_to_excel(tHeader, data, fileName);
});
},
exportImgInfo() {
const exportImgs = [];
this.allImgs.forEach((item) => {
const capital = item.content.split('|');
const capital = item.content.split("|");
exportImgs.push({
number: `${item.number}`, url: imgApi + item.url.split('=')[1], capitalName: capital[0], capitalStatus: capital[1], position: capital[2],
number: `${item.number}`,
url: imgApi + item.url.split("=")[1],
capitalName: capital[0],
capitalStatus: capital[1],
position: capital[2],
});
});
require.ensure([], () => {
// tHeader为存放excel表头标题的数组
const tHeader = ['图片编号', '图片链接', '资产名称', '资产状态', '资产位置'];
const tHeader = [
"图片编号",
"图片链接",
"资产名称",
"资产状态",
"资产位置",
];
// filterVal为tHeader标题对应的键值
const filterVal = ['number', 'url', 'capitalName', 'capitalStatus', 'position'];
const filterVal = [
"number",
"url",
"capitalName",
"capitalStatus",
"position",
];
// list为要转化为excel文件的数据，是一个数组
const list = exportImgs;
// 用map方法处理list数据
const data = list.map(v => filterVal.map(j => v[j]));
const data = list.map((v) => filterVal.map((j) => v[j]));
// 自定义excel文件名
const fileName = '资产图片信息';
const fileName = "资产图片信息";
export_json_to_excel(tHeader, data, fileName);
});
},
......@@ -541,10 +632,16 @@ export default {
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 ? require('../assets/img/map-marker_blue.png') : require('../assets/img/jingbao_blue.png');
val.url =
val.status === 1 || val.status === 3
? require("../assets/img/map-marker_blue.png")
: require("../assets/img/jingbao_blue.png");
} else {
// eslint-disable-next-line global-require,no-param-reassign
val.url = val.status === 1 || val.status === 3 ? require('../assets/img/map-marker_orange.png') : require('../assets/img/jingbao_red.png');
val.url =
val.status === 1 || val.status === 3
? require("../assets/img/map-marker_orange.png")
: require("../assets/img/jingbao_red.png");
}
});
this.isShow = index;
......@@ -553,7 +650,10 @@ export default {
removeclass(index) {
this.carPoints.forEach((val) => {
// eslint-disable-next-line no-param-reassign,global-require
val.url = val.status === 1 || val.status === 3 ? require('../assets/img/map-marker_orange.png') : require('../assets/img/jingbao_red.png');
val.url =
val.status === 1 || val.status === 3
? require("../assets/img/map-marker_orange.png")
: require("../assets/img/jingbao_red.png");
});
this.isShow = -1;
},
......@@ -576,7 +676,6 @@ export default {
positionRight: point[1],
positionWidth: point[2] - point[0],
positionHeight: point[3] - point[1],
};
this.customStyleArray.push(style);
......@@ -591,7 +690,6 @@ export default {
positionRight: point[1],
positionWidth: point[2] - point[0],
positionHeight: point[3] - point[1],
};
this.customStyleArray.push(style);
......@@ -600,222 +698,322 @@ export default {
}
this.isShowPicture = true;
setTimeout(() => { this.showRedBox = true; }, 300);
setTimeout(() => {
this.showRedBox = true;
}, 300);
},
addActive(index) {
this.carPoints.forEach((e) => {
e.markerAnim = '';
e.markerAnim = "";
// eslint-disable-next-line global-require
e.url = e.status === 1 || e.status === 3 ? require('../assets/img/map-marker_orange.png') : require('../assets/img/jingbao_red.png');
e.url =
e.status === 1 || e.status === 3
? require("../assets/img/map-marker_orange.png")
: require("../assets/img/jingbao_red.png");
});
this.isShow = index;
// eslint-disable-next-line global-require
this.carPoints[index].url = this.carPoints[index].status === 1 || this.carPoints[index].status === 3 ? require('../assets/img/map-marker_blue.png') : require('../assets/img/jingbao_blue.png');
this.carPoints[index].markerAnim = 'BMAP_ANIMATION_BOUNCE';
this.carPoints[index].url =
this.carPoints[index].status === 1 || this.carPoints[index].status === 3
? require("../assets/img/map-marker_blue.png")
: require("../assets/img/jingbao_blue.png");
this.carPoints[index].markerAnim = "BMAP_ANIMATION_BOUNCE";
},
removeActive(index) {
this.isShow = -1;
this.carPoints[index].markerAnim = '';
this.carPoints[index].markerAnim = "";
// eslint-disable-next-line global-require
this.carPoints[index].url = this.carPoints[index].status === 1 || this.carPoints[index].status === 3 ? require('../assets/img/map-marker_orange.png') : require('../assets/img/jingbao_red.png');
this.carPoints[index].url =
this.carPoints[index].status === 1 || this.carPoints[index].status === 3
? require("../assets/img/map-marker_orange.png")
: require("../assets/img/jingbao_red.png");
},
handler({ BMap, map }) {
console.log(BMap, map);
// console.log(BMap, map);
},
updatePolylinePath(e) {
this.polylinePath = e.target.getPath();
},
changeBefore() {
},
changeBefore() {},
zoomEnd(e) {
this.zoom = e.target.getZoom();
this.getMapBounds(e);
},
queryAllEquipment() {
axios.post(`${address}queryAllEquipment`, {
}).then((response) => {
if (response.data.code === 200) {
if (response.data.data) {
this.plateNoOptions = [];
response.data.data.forEach((item) => {
this.plateNoOptions.push(item);
axios
.post(`${address}queryAllEquipment`, {})
.then((response) => {
if (response.data.code === 200) {
if (response.data.data) {
this.plateNoOptions = [];
response.data.data.forEach((item) => {
this.plateNoOptions.push(item);
});
}
} else {
Message({
message: response.data.message,
// type: 'error',
// duration: '800',
});
}
} else {
Message({
message: response.data.message,
// type: 'error',
// duration: '800',
});
}
})
})
.catch((error) => {
console.log(error);
});
},
queryTravel() {
sessionStorage.setItem('searchVal', JSON.stringify(this.filters));
sessionStorage.setItem("searchVal", JSON.stringify(this.filters));
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`];
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 = '';
let equipmentCode = "";
if (this.filters.plateNo && this.filters.plateNo.length > 0) {
this.filters.plateNo.forEach((item) => {
if (equipmentCode === '') {
equipmentCode += item;
if (equipmentCode === "") {
equipmentCode += item.code;
} else {
equipmentCode += `,${item}`;
equipmentCode += `,${item.code}`;
}
});
}
this.searchLoading = true;
axios.post(`${address}getInspectResult`, {
startTime: this.filters.dateTime[0],
endTime: this.filters.dateTime[1],
equipment: equipmentCode,
}).then((response) => {
this.searchLoading = false;
if (response.data.code === 200) {
if (response.data.data) {
this.tableData = [];
this.allPoints = [];
this.carPoints = [];
this.imgs = [];
this.allImgs = [];
this.no = 0;
// eslint-disable-next-line no-var,no-restricted-syntax,vars-on-top
for (var key in response.data.data) {
if (response.data.data[key]) {
const gisArr = response.data.data[key];
gisArr.forEach((val) => {
if (val) {
// 计算轨迹长度
let totalDistance = 0;
val.forEach((item, index) => {
if (item.longitude && item.latitude) {
if (item.images) {
// 资产及对应图片信息
item.images.forEach((info) => {
// eslint-disable-next-line no-plusplus
this.no = ++this.no;
if (info.longitude && info.latitude) {
var that = this;
axios
.post(`${address}getInspectResultNew`, {
startTime: that.filters.dateTime[0],
endTime: that.filters.dateTime[1],
equipment: equipmentCode,
})
.then((response) => {
that.searchLoading = false;
if (response.data.code === 200) {
if (response.data.data) {
that.tableData = [];
that.allPoints = [];
that.carPoints = [];
that.imgs = [];
that.allImgs = [];
that.no = 0;
// eslint-disable-next-line no-var,no-restricted-syntax,vars-on-top
for (var 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.images) {
// 资产及对应图片信息
item.images.forEach((info) => {
// eslint-disable-next-line no-plusplus
that.no = ++that.no;
if (info.longitude && info.latitude) {
const result = gcoord.transform(
[info.longitude, info.latitude],
gcoord.WGS84,
gcoord.BD09
);
that.capitalOptions.forEach((capital) => {
if (capital.value === info.type2) {
// eslint-disable-next-line no-param-reassign
info.type2 = capital.label;
}
});
carPointsTmp.push({
// eslint-disable-next-line global-require,no-nested-ternary
lng: result[0],
lat: result[1],
markerAnim: "",
url:
info.status === 1 || info.status === 3
? require("../assets/img/map-marker_orange.png")
: require("../assets/img/jingbao_red.png"),
status: info.status,
content: that.no,
title: "",
titleList: [
`资产类型:${info.type2}`,
`资产状态:${
info.status === 1
? "正常"
: info.status === 2
? "异常"
: "新增"
}`,
`位置:${info.position}`,
],
});
carImgsTmp.push({
// eslint-disable-next-line no-nested-ternary
url: `${imgAddress}getCapitalImg?imgPath=${info.imagePath}`,
content: `${info.info} | ${
info.status === 1
? "正常"
: info.status == 2
? "异常"
: "新增"
} | ${info.position}`,
number: that.no,
id: `imageCard${that.no}`,
vector: info.vector,
});
}
});
}
if (index < val.length - 1) {
if (
val[index + 1].longitude &&
val[index + 1].latitude
) {
const result1 = gcoord.transform(
[
val[index + 1].longitude,
val[index + 1].latitude,
],
gcoord.WGS84,
gcoord.BD09
);
const result = gcoord.transform(
[info.longitude, info.latitude],
[val[index].longitude, val[index].latitude],
gcoord.WGS84,
gcoord.BD09,
gcoord.BD09
);
this.capitalOptions.forEach((capital) => {
if (capital.value === info.type2) {
// eslint-disable-next-line no-param-reassign
info.type2 = capital.label;
}
});
this.allPoints.push({
// eslint-disable-next-line global-require,no-nested-ternary
lng: result[0], lat: result[1], markerAnim: '', url: info.status === 1 || info.status === 3 ? require('../assets/img/map-marker_orange.png') : require('../assets/img/jingbao_red.png'), status: info.status, content: this.no, title: '', titleList: [`资产类型:${info.type2}`, `资产状态:${info.status === 1 ? '正常' : (info.status === 2 ? '异常' : '新增')}`, `位置:${info.position}`],
});
this.allImgs.push({
// eslint-disable-next-line no-nested-ternary
url: `${imgAddress}getCapitalImg?imgPath=${info.imagePath}`, content: `${info.info} | ${info.status === 1 ? '正常' : (info.status == 2 ? '异常' : '新增')} | ${info.position}`, number: this.no, id: `imageCard${this.no}`, vector: info.vector,
});
}
});
}
if (index < val.length - 1) {
if (val[index + 1].longitude && val[index + 1].latitude) {
const result1 = gcoord.transform(
[val[index + 1].longitude, val[index + 1].latitude],
gcoord.WGS84,
gcoord.BD09,
);
const result = gcoord.transform(
[val[index].longitude, val[index].latitude],
gcoord.WGS84,
gcoord.BD09,
);
// eslint-disable-next-line eqeqeq
if (val[index + 1].linkId == val[index].linkId) {
totalDistance += Math.abs(val[index + 1].roadEndDis - val[index].roadEndDis);
} else {
totalDistance += Math.abs(this.getDistance(result1[0], result1[1], result[0], result[1]));
// eslint-disable-next-line eqeqeq
if (val[index + 1].linkId == val[index].linkId) {
totalDistance += Math.abs(
val[index + 1].roadEndDis -
val[index].roadEndDis
);
} else {
totalDistance += Math.abs(
that.getDistance(
result1[0],
result1[1],
result[0],
result[1]
)
);
}
}
}
}
}
});
this.tableData.push({
plateNo: key,
startEndTime: `${moment(val[val.length - 1].timestamp).format('YYYY-MM-DD hh:mm')} - ${moment(val[0].timestamp).format('YYYY-MM-DD hh:mm')}`,
startEndPoint: `${val[val.length - 1].position} - ${val[0].position}`,
inspectDistance: `${(totalDistance / 1000).toFixed(1)}km`,
inspectNum: `${val[0].inspectNum ? val[0].inspectNum : 0}个`,
normalNum: `${val[0].normalNum ? val[0].normalNum : 0}个`,
roadLetterNum: `${val[0].roadLetterNum ? val[0].roadLetterNum : 0}个`,
guardrailNum: `${val[0].guardrailNum ? val[0].guardrailNum : 0}个`,
newInspectNum: `${val[0].newInspectNum ? val[0].newInspectNum : 0}个`,
startTime: val[val.length - 1].timestamp,
endTime: val[0].timestamp,
});
}
});
}
}
this.allPoints.forEach((item, index) => {
if (index <= 100) {
this.carPoints.push(item);
this.imgs.push(this.allImgs[index]);
});
that.allPoints.push(carPointsTmp);
that.allImgs.push(carImgsTmp);
that.tableData.push({
plateNo: key,
startEndTime: `${moment(
val[val.length - 1].timestamp
).format("YYYY-MM-DD hh:mm")} - ${moment(
val[0].timestamp
).format("YYYY-MM-DD hh:mm")}`,
startEndPoint: `${val[val.length - 1].position} - ${
val[0].position
}`,
inspectDistance: `${(totalDistance / 1000).toFixed(
1
)}km`,
inspectNum: `${
val[0].inspectNum ? val[0].inspectNum : 0
}个`,
normalNum: `${
val[0].normalNum ? val[0].normalNum : 0
}个`,
roadLetterNum: `${
val[0].roadLetterNum ? val[0].roadLetterNum : 0
}个`,
guardrailNum: `${
val[0].guardrailNum ? val[0].guardrailNum : 0
}个`,
newInspectNum: `${
val[0].newInspectNum ? val[0].newInspectNum : 0
}个`,
startTime: val[val.length - 1].timestamp,
endTime: val[0].timestamp,
});
}
});
}
}
});
that.carPoints = that.allPoints[0];
that.imgs = that.allImgs[0];
this.$_.forEach(this.imgs, (o) => {
o.name = o.content.split('|').length > 0 ? o.content.split('|')[0] : '';
o.type = o.content.split('|').length > 1 ? o.content.split('|')[1] : '';
});
this.$_.forEach(that.imgs, (o) => {
o.name =
o.content.split("|").length > 0
? o.content.split("|")[0]
: "";
o.type =
o.content.split("|").length > 1
? o.content.split("|")[1]
: "";
});
console.log(`lllllllllllllllllold${JSON.stringify(this.imgs)}`);
const imgsNew = this.imgs.map((item, index, arr) => {
/* const i = this.$_.findIndex(users, function(o) { return o.user == 'barney'; }); */
const i = arr.find(_item => item.type === _item.type && item.url === _item.url);
if (i !== item) {
if (item.name) {
i.content = `${item.name} ${i.content}`;
}
i.vector.push(item.vector);
return undefined;
}
i.vector = [i.vector];
return i;
}).filter(item => item !== undefined);
// console.log(`lllllllllllllllllold${JSON.stringify(that.imgs)}`);
const imgsNew = that.imgs
.map((item, index, arr) => {
/* const i = this.$_.findIndex(users, function(o) { return o.user == 'barney'; }); */
const i = arr.find(
(_item) =>
item.type === _item.type && item.url === _item.url
);
if (i !== item) {
if (item.name) {
i.content = `${item.name} ${i.content}`;
}
i.vector.push(item.vector);
return undefined;
}
i.vector = [i.vector];
return i;
})
.filter((item) => item !== undefined);
imgsNew.forEach((e, index) => {
e.number = index + 1;
});
this.groupImgs = imgsNew;
// imgsNew.forEach((e, index) => {
// e.number = index + 1;
// });
that.groupImgs = imgsNew;
console.log(`lllllllllllllllllnew${JSON.stringify(this.groupImgs)}`);
// console.log(
// `lllllllllllllllllnew${JSON.stringify(that.groupImgs)}`
// );
if (this.carPoints && this.carPoints.length > 0) {
// this.center.lng = '117.05089715211';
// this.center.lat = '32.50339615603';
this.center.lng = this.carPoints[0].lng;
this.center.lat = this.carPoints[0].lat;
this.carPoints.forEach((val) => {
val.title = val.titleList.join('\n');
});
if (that.carPoints && that.carPoints.length > 0) {
const length = that.carPoints.length;
that.center.lng = that.carPoints[parseInt(length / 2)].lng;
that.center.lat = that.carPoints[parseInt(length / 2)].lat;
that.carPoints.forEach((val) => {
val.title = val.titleList.join("\n");
});
}
}
} else {
Message({
message: response.data.message,
// type: 'error',
// duration: '800',
});
}
} else {
Message({
message: response.data.message,
// type: 'error',
// duration: '800',
});
}
})
})
.catch((error) => {
this.searchLoading = false;
console.log(error);
......@@ -827,9 +1025,16 @@ export default {
const radLat2 = this.rad(lat2);
const a = radLat1 - radLat2;
const b = this.rad(lng1) - this.rad(lng2);
let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2)
+ Math.cos(radLat1) * Math.cos(radLat2)
* Math.pow(Math.sin(b / 2), 2)));
let s =
2 *
Math.asin(
Math.sqrt(
Math.pow(Math.sin(a / 2), 2) +
Math.cos(radLat1) *
Math.cos(radLat2) *
Math.pow(Math.sin(b / 2), 2)
)
);
s *= EARTH_RADIUS;
// s = Math.round(s * 10000d) / 10000d;
s = Math.round(s * 10000) / 10000;
......@@ -837,15 +1042,15 @@ export default {
return s;
},
rad(d) {
return d * Math.PI / 180.0;
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);
// console.log(row.startTime);
// console.log(row.endTime);
this.$router.push({
name: 'resultDetail',
name: "resultDetail",
params: {
startTime: row.startTime,
endTime: row.endTime,
......@@ -853,108 +1058,44 @@ export default {
},
});
},
getCapitals() {
this.no = 0;
let capitalName = '';
if (this.filters.capitalType) {
this.filters.capitalType.forEach((val) => {
if (capitalName === '') {
capitalName += val;
} else {
capitalName = `${capitalName},${val}`;
}
});
}
axios.post(`${address}getCapitalDetails`, {
capitalName,
}).then((response) => {
if (response.data.code === 200) {
this.carPoints = [];
this.imgs = [];
this.allPoints = [];
this.allImgs = [];
if (response.data.data) {
const capitals = response.data.data;
capitals.forEach((val) => {
if (val.lng && val.lat) {
const result = gcoord.transform(
[val.lng, val.lat],
gcoord.WGS84,
gcoord.BD09,
);
this.no = ++this.no;
this.allPoints.push({
// eslint-disable-next-line global-require
lng: result[0], lat: result[1], markerAnim: '', url: require('../assets/img/map-marker_orange.png'), content: this.no, title: '', titleList: [`资产类型:${val.capitalType}`, `资产名称:${val.capitalName}`, '资产状态:正常', `位置:${val.position}`],
});
this.allImgs.push({
url: `${imgAddress}getCapitalImg?imgName=${val.imgName}`, content: `${val.capitalName} | 正常 | ${val.position}`, number: this.no, id: `imageCard${this.no}`,
});
}
});
this.allPoints.forEach((item, index) => {
if (index <= 100) {
this.carPoints.push(item);
this.imgs.push(this.allImgs[index]);
}
});
if (this.carPoints && this.carPoints.length > 0) {
this.center.lng = '117.05089715211';
this.center.lat = '32.50339615603';
this.carPoints.forEach((val) => {
val.title = val.titleList.join('\n');
});
}
}
} else {
this.allPoints = [];
this.carPoints = [];
this.imgs = [];
this.allImgs = [];
}
})
.catch((error) => {
console.log(error);
});
},
onSubmit() {
if (!this.form.region) {
Message({
message: '请输入地域',
type: 'error',
message: "请输入地域",
type: "error",
});
return;
}
if (!this.form.registration) {
Message({
message: '请先选择道路等级',
type: 'error',
message: "请先选择道路等级",
type: "error",
});
return;
}
if (!this.form.minSpeed) {
Message({
message: '请先填写最小速度',
type: 'error',
message: "请先填写最小速度",
type: "error",
});
return;
}
if (!this.form.maxSpeed) {
Message({
message: '请先填写最大速度',
type: 'error',
message: "请先填写最大速度",
type: "error",
});
return;
}
if (!this.value4) {
Message({
message: '请先选择时间',
type: 'error',
message: "请先选择时间",
type: "error",
});
return;
}
console.log(this.form.registration);
let level = '';
// console.log(this.form.registration);
let level = "";
this.form.registration.forEach((item, index) => {
// eslint-disable-next-line eqeqeq
if (index == 0) {
......@@ -963,33 +1104,35 @@ export default {
level += `,${item}`;
}
});
axios.post(`${address}generateTask`, {
area: this.form.region,
startTime: this.value4[0],
endTime: this.value4[1],
minSpeed: this.form.minSpeed,
maxSpeed: this.form.maxSpeed,
level,
distance: this.form.distance,
}).then((response) => {
if (response.data.code === 200) {
Message({
message: `${response.data.message}`,
type: 'success',
duration: '800',
});
} else {
Message({
message: `${response.data.message}`,
});
}
})
axios
.post(`${address}generateTask`, {
area: this.form.region,
startTime: this.value4[0],
endTime: this.value4[1],
minSpeed: this.form.minSpeed,
maxSpeed: this.form.maxSpeed,
level,
distance: this.form.distance,
})
.then((response) => {
if (response.data.code === 200) {
Message({
message: `${response.data.message}`,
type: "success",
duration: "800",
});
} else {
Message({
message: `${response.data.message}`,
});
}
})
.catch((error) => {
console.log(error);
});
},
listPicture() {
window.open('http://106.52.130.113:9088', '_blank');
window.open("http://106.52.130.113:9088", "_blank");
},
changeevent(value) {
this.options.forEach((item) => {
......@@ -999,6 +1142,61 @@ export default {
}
});
},
clickChange(index, row) {
// const index = row.no - 1;
console.log("*************************************** index:" + index);
console.log(
"*************************************** curindex:" + this.currentIndex
);
if (index === this.currentIndex) {
console.log("*************************************** iiiii:" + index);
} else {
this.currentIndex = index;
this.radioIndex = index;
this.changeCarPoint(index);
this.changeImgs(index);
}
},
async changeCarPoint(index) {
this.carPoints = this.allPoints[this.currentIndex];
if (that.carPoints && that.carPoints.length > 0) {
const length = that.carPoints.length;
that.center.lng = that.carPoints[parseInt(length / 2)].lng;
that.center.lat = that.carPoints[parseInt(length / 2)].lat;
}
},
async changeImgs(index) {
this.imgs = this.allImgs[this.currentIndex];
this.$_.forEach(this.imgs, (o) => {
o.name = o.content.split("|").length > 0 ? o.content.split("|")[0] : "";
o.type = o.content.split("|").length > 1 ? o.content.split("|")[1] : "";
});
// console.log(`lllllllllllllllllold${JSON.stringify(this.imgs)}`);
const imgsNew = this.imgs
.map((item, index, arr) => {
/* const i = this.$_.findIndex(users, function(o) { return o.user == 'barney'; }); */
const i = arr.find(
(_item) => item.type === _item.type && item.url === _item.url
);
if (i !== item) {
if (item.name) {
i.content = `${item.name} ${i.content}`;
}
i.vector.push(item.vector);
return undefined;
}
i.vector = [i.vector];
return i;
})
.filter((item) => item !== undefined);
// imgsNew.forEach((e, index) => {
// e.number = index + 1;
// });
this.groupImgs = imgsNew;
},
},
};
</script>
src/views/ResultDetail.vue
View file @ e3b2aae7
<template>
<div class="detail">
<div class="box">
<!-- 查询区 -->
<el-col :span="24" class="warp-breadcrum">
<!--搜索栏-->
<el-col :span="24" class="toolbar">
<el-form :inline="true" :model="filters">
<el-form-item>
<el-select
v-model="filters.capitalType"
collapse-tags
clearable
filterable
placeholder="巡检目标"
>
<el-option
v-for="item in capitalOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<!-- <el-autocomplete
<!-- 查询区 -->
<el-col :span="24" class="warp-breadcrum">
<!--搜索栏-->
<el-col :span="24" class="toolbar">
<el-form :inline="true" :model="filters">
<el-form-item>
<el-select
v-model="filters.capitalType"
collapse-tags
clearable
filterable
placeholder="巡检目标"
@change="selectCapitalType"
>
<el-option
v-for="item in capitalOptions"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
<!-- <el-autocomplete
v-model="filters.channelName"
:fetch-suggestions="queryChannelSearchAsync"
placeholder="渠道"
@select="handleChannelSelect"
></el-autocomplete> -->
</el-form-item>
<el-form-item>
<el-select
v-model="filters.status"
collapse-tags
clearable
filterable
placeholder="目标状态"
>
<el-option
v-for="item in statusOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-date-picker
v-model="filters.dateTime"
type="daterange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
:default-time="['00:00:00', '23:59:59']"
value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="pickerOptions">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" v-loading="searchLoading" @click="getImageGroups">搜索</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="exportTravel">导出</el-button>
</el-form-item>
</el-form>
</el-col>
</el-col>
<!-- 任务表 -->
></el-autocomplete>-->
</el-form-item>
<el-form-item>
<el-select
v-model="filters.status"
collapse-tags
clearable
filterable
placeholder="目标状态"
@change="selectStatus"
>
<el-option
v-for="item in statusOptions"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-date-picker
v-model="filters.dateTime"
type="daterange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
:default-time="['00:00:00', '23:59:59']"
value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="pickerOptions"
></el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" v-loading="searchLoading" @click="getImageFeatures">搜索</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="exportTravel">导出</el-button>
</el-form-item>
</el-form>
</el-col>
</el-col>
<!-- 任务表 -->
<div class="detail-table">
<el-table
:data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
style="width: calc(100vw - 240px);overflow:hidden;"
border=true
fit
highlight-current-row=true
>
<el-table-column
type="index"
label="序号"
width="50"
>
</el-table-column>
<el-table-column
label="巡检时间"
prop="imageTime">
</el-table-column>
<el-table-column
label="巡检目标"
prop="type2">
</el-table-column>
<el-table-column
label="目标位置"
prop="position">
</el-table-column>
<el-table-column
label="目标状态"
prop="status">
</el-table-column>
<el-table-column
v-if="isShowCol"
label="图片路径"
prop="imagePath">
</el-table-column>
<el-table-column
v-if="isShowCol"
label="分组ID"
prop="groupId">
</el-table-column>
<el-table-column
v-if="isShowCol"
label="显示信息"
prop="info">
</el-table-column>
<el-table-column
v-if="isShowCol"
label="图片设施边框"
prop="vector">
</el-table-column>
<el-table-column fixed="right" label="详情">
<template slot-scope="scope">
<el-button
size="mini"
@click="showPicture(scope.$index, scope.row)">查看</el-button>
</template>
</el-table-column>
</el-table>
<!-- <el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5, 10, 20, 40]"
:page-size="pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="tableData.length">
</el-pagination>-->
<el-table
:data="tableData"
style="width: calc(100vw - 240px);overflow:hidden;"
border
fit
highlight-current-row
>
<el-table-column width="80" fixed type="index" label="序号" align="center"></el-table-column>
<el-table-column width="240" fixed label="巡检时间" prop="imageTime" align="center"></el-table-column>
<el-table-column width="120" fixed label="巡检目标" prop="type2" align="center"></el-table-column>
<el-table-column width="580" fixed label="目标位置" prop="position" align="center"></el-table-column>
<el-table-column width="120" fixed label="目标状态" prop="status" align="center"></el-table-column>
<el-table-column
fixed="right"
width="180"
v-if="isShowCol"
label="图片路径"
prop="imagePath"
align="center"
></el-table-column>
<el-table-column width="120" v-if="isShowCol" label="分组ID" prop="groupId" align="center"></el-table-column>
<el-table-column width="120" v-if="isShowCol" label="显示信息" prop="info" align="center"></el-table-column>
<el-table-column width="360" v-if="isShowCol" label="图片设施边框" prop="vector" align="center"></el-table-column>
<el-table-column fixed="right" label="详情" align="center">
<template slot-scope="scope">
<el-button size="mini" @click="showPicture(scope.$index, scope.row)">查看</el-button>
</template>
</el-table-column>
</el-table>
<!--<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5, 10, 20, 40]"
:page-size="pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="tableData.length"
></el-pagination>-->
<!-- 分页 修改 -->
<el-pagination
<el-pagination
:current-page="pageOption.pageIndex"
:page-sizes="[5, 10, 20, 40]"
:page-size="pageOption.pageSize"
......@@ -147,27 +121,24 @@
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
<!-- 任务统计 -->
<!-- <div class="task-echarts">
<h3>任务统计</h3>
<div class="echarts-box" id="echarts-box"></div>
</div> -->
</div>-->
</div>
<el-dialog
v-el-drag-dialog
:visible.sync="isShowPicture"
:title="imgContent"
custom-class="customWidth"
>
<div :style="'height:' + fullHeight + 'px;position: relative;'" ref="mainW">
<img :src="bigImgUrl" ref="BGIMG" width="100%" style="height: 100%;" @load=loadBigImg>
<div class="dash" :style="customStyle" v-if="showRedBox"></div>
</div>
v-el-drag-dialog
:visible.sync="isShowPicture"
:title="imgContent"
custom-class="customWidth"
>
<div :style="'height:' + fullHeight + 'px;position: relative;'" ref="mainW">
<img :src="bigImgUrl" ref="BGIMG" width="100%" style="height: 100%;" @load="loadBigImg" />
<div class="dash" :style="customStyle" v-if="showRedBox"></div>
</div>
</el-dialog>
<el-dialog
title="确认信息"
......@@ -175,7 +146,7 @@
:visible.sync="dialogVisible1"
:modal="needModal"
width="30%"
>
>
<span>此情况是否为异常?</span>
<span slot="footer" class="dialog-footer">
<el-button @click="updatePicStatus">否</el-button>
......@@ -188,7 +159,7 @@
:visible.sync="dialogVisible2"
:modal="needModal"
width="30%"
>
>
<span>是否已经处理该异常情况?</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible2 = false">未处理</el-button>
......@@ -198,26 +169,25 @@
</div>
</template>
<style lang="less" scope>
.detail{
.box{
.detail {
.box {
width: calc(100vw - 240px);
.el-pagination{
.el-pagination {
padding: 15px;
}
}
}
.dash{
.dash {
position: absolute;
border: 2px #EC292A dashed;
border: 2px #ec292a dashed;
}
</style>
<script>
import axios from 'axios';
import { Message } from 'element-ui';
import echarts from 'echarts';
import moment from 'moment';
import { address } from '../config';
import { address, imgAddress } from '../config';
import { export_json_to_excel } from '@/excel/Export2Excel';
import elDragDialog from '@/components/el-drag-dialog';
......@@ -226,20 +196,22 @@ export default {
directives: { elDragDialog },
data() {
return {
searchData: [],
tableData: [],
startTime: null,
endTime: null,
pageOption: {
pageIndex: 1,
pageSize: 20,
pageSize: 10,
totalCount: 0,
},
currentPage: 1, // 初始页
pagesize: 10, // 每页的数据
tableData: [
],
filters: {
capitalType: '',
capitalType: null,
status: null,
dateTime: [],
equipment: '',
},
loading: false,
isShowCol: false,
......@@ -254,52 +226,78 @@ export default {
tableIndex: -1,
capitalOptions: [
{
label: '路面状况',
value: 1,
}, {
label: '护栏',
label: '全部',
value: -2,
},
{
label: '其他',
value: -1,
},
{
label: '道路设施',
value: 0,
},
{
label: '抛洒物',
value: 2,
},
{
label: '护栏',
value: 3,
},
{
label: '龙门架',
value: 101,
}, {
},
{
label: '矩形标牌',
value: 201,
}, {
},
{
label: '圆形标牌',
value: 202,
}, {
},
{
label: '三角标牌',
value: 203,
}, {
},
{
label: '其它形状标牌',
value: 209,
}, {
},
{
label: '可变信息牌（情报板）',
value: 301,
}, {
},
{
label: 'T型杆',
value: 401,
}, {
},
{
label: 'L型杆',
value: 402,
}, {
},
{
label: 'I型立杆',
value: 403,
}, {
},
{
label: '枪式摄像机',
value: 801,
}, {
},
{
label: '相机',
value: 802,
}, {
},
{
label: '补光灯',
value: 803,
}, {
},
{
label: 'RSU天线',
value: 804,
}, {
},
{
label: '测速雷达',
value: 805,
},
......@@ -312,40 +310,46 @@ export default {
{
label: '正常',
value: 1,
}, {
},
{
label: '异常',
value: 2,
}, {
},
{
label: '新增',
value: 3,
},
],
pickerOptions: {
shortcuts: [{
text: '最近一周',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
shortcuts: [
{
text: '最近一周',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
},
},
}, {
text: '最近一个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
{
text: '最近一个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
},
},
}, {
text: '最近三个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit('pick', [start, end]);
{
text: '最近三个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit('pick', [start, end]);
},
},
}],
],
},
currentdate: '',
fullHeight: document.documentElement.clientHeight / 1.5,
......@@ -365,38 +369,172 @@ export default {
searchLoading: false,
};
},
mounted() {
},
mounted() {},
created() {
let startTime = null;
let endTime = null;
let equipment = null;
const searchVal = sessionStorage.getItem('resultDetailSearchVal');
const that = this;
if (this.$route.params.startTime) {
startTime = this.$route.params.startTime;
that.startTime = this.$route.params.startTime;
}
if (this.$route.params.endTime) {
endTime = this.$route.params.endTime;
that.endTime = this.$route.params.endTime;
}
if (this.$route.params.equipment) {
equipment = this.$route.params.equipment;
that.filters.equipment = this.$route.params.equipment;
}
if (startTime || endTime || equipment) {
this.filters.dateTime = [moment(startTime).format('YYYY-MM-DD HH:mm:ss'), moment(endTime).format('YYYY-MM-DD HH:mm:ss')];
this.getImageGroupsByCon(startTime, endTime, equipment);
if (this.startTime != null && this.endTime != null) {
this.filters.dateTime = [
moment(this.startTime).format('YYYY-MM-DD HH:mm:ss'),
moment(this.endTime).format('YYYY-MM-DD HH:mm:ss'),
];
} else if (searchVal) {
this.filters = JSON.parse(searchVal);
} else {
const searchVal = sessionStorage.getItem('resultDetailSearchVal');
if (searchVal) {
this.filters = JSON.parse(searchVal);
} else {
this.filters.status = 2;
}
this.getImageGroups();
this.filters.status = -1;
}
if (this.filters.status == null) {
this.filters.status = -1;
}
if (this.filters.capitalType == null) {
this.filters.capitalType = -2;
}
this.getImageFeatures();
},
methods: {
getImageFeatures() {
if (this.filters.dateTime.length == 0) {
this.filters.dateTime[0] = `${moment(
new Date().setTime(new Date().getTime() - 3600 * 1000 * 24),
).format('YYYY-MM-DD')} 00:00:00`;
this.filters.dateTime[1] = `${moment(
new Date().setTime(new Date().getTime() - 3600 * 1000 * 24),
).format('YYYY-MM-DD')} 23:59:59`;
}
this.startTime = new Date(this.filters.dateTime[0]).getTime();
this.endTime = new Date(this.filters.dateTime[1]).getTime();
this.searchLoading = true;
const that = this;
axios
.post(`${address}getImageFeaturesByGroup`, {
startTimeMill: that.startTime,
endTimeMill: that.endTime,
equipment: that.filters.equipment,
status: that.filters.status,
pageIndex: this.pageOption.pageIndex,
pageSize: this.pageOption.pageSize,
})
.then((response) => {
that.searchLoading = false;
if (response.data.code === 200) {
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.imageTime = moment(parseInt(val.imageTime)).format(
'YYYY-MM-DD HH:mm:ss',
);
this.capitalOptions.forEach((item) => {
if (
(val.imageType == 0 || val.imageType == 1)
&& val.type2 == item.value
) {
val.type2 = item.label;
} else if (val.imageType == item.value) {
val.type2 = item.label;
}
});
});
that.searchData = response.data.data.list;
that.getTableData();
} else {
that.tableData = [];
}
} else {
that.tableData = [];
}
})
.catch((error) => {
console.log(error);
});
},
getTableData() {
let tmpTable = [];
const ct = this.filters.capitalType;
const st = this.filters.status;
let ctChinese = '';
let stChinese = '';
this.capitalOptions.forEach((item) => {
if (item.value == ct) {
ctChinese = item.label;
}
});
this.statusOptions.forEach((item) => {
if (item.value == st) {
stChinese = item.label;
}
});
if (
(ctChinese == '全部' || ctChinese == '')
&& (stChinese == '全部' || stChinese == '')
) {
tmpTable = this.searchData;
} else if (ctChinese == '全部' || ctChinese == '') {
this.searchData.forEach((element) => {
if (stChinese == element.status) {
tmpTable.push(element);
}
});
} else if (ctChinese == '道路设施') {
this.searchData.forEach((element) => {
if (
(st == -1 || st == null || element.status == stChinese)
&& element.type2 == ctChinese
) {
tmpTable.push(element);
}
});
} else if (ctChinese == '抛洒物') {
this.searchData.forEach((element) => {
if (
(st == -1 || st == null || element.status == stChinese)
&& element.type2 == ctChinese
) {
tmpTable.push(element);
}
});
} else if (ctChinese == '护栏') {
this.searchData.forEach((element) => {
if (
(st == -1 || st == null || element.status == stChinese)
&& element.type2 == ctChinese
) {
tmpTable.push(element);
}
});
} else {
this.searchData.forEach((element) => {
if (
(st == -1 || st == null || element.status == stChinese)
&& element.type2 == ctChinese
) {
tmpTable.push(element);
}
});
}
this.tableData = tmpTable;
},
loadBigImg() {
// console.log('---');
// console.log('---');
this.scale = this.$refs.BGIMG.naturalWidth / this.$refs.mainW.offsetWidth;
this.hscale = this.$refs.BGIMG.naturalHeight / this.$refs.mainW.offsetHeight;
......@@ -408,71 +546,84 @@ export default {
};
},
getImageGroupsByCon(startTime, endTime, equipment) {
axios.post(`${address}getImageGroupsByCon`, {
startTimeMill: startTime,
endTimeMill: endTime,
equipment,
}).then((response) => {
if (response.data.code === 200) {
if (response.data.data) {
response.data.data.forEach((val) => {
val.status = val.status == 1 ? '正常' : (val.status == 2 ? '异常' : '新增');
val.imageTime = moment(parseInt(val.imageTime)).format('YYYY-MM-DD HH:mm:ss');
this.capitalOptions.forEach((item) => {
if (item.value == val.type2) {
val.type2 = item.label;
}
axios
.post(`${address}getImageGroupsByCon`, {
startTimeMill: startTime,
endTimeMill: endTime,
equipment,
})
.then((response) => {
if (response.data.code === 200) {
if (response.data.data) {
response.data.data.forEach((val) => {
val.status = val.status == 1 ? '正常' : val.status == 2 ? '异常' : '新增';
val.imageTime = moment(parseInt(val.imageTime)).format(
'YYYY-MM-DD HH:mm:ss',
);
this.capitalOptions.forEach((item) => {
if (item.value == val.type2) {
val.type2 = item.label;
}
});
});
});
this.tableData = response.data.data;
this.tableData = response.data.data;
} else {
this.tableData = [];
}
} else {
this.tableData = [];
}
} else {
this.tableData = [];
}
})
})
.catch((error) => {
console.log(error);
});
},
getImageGroups() {
sessionStorage.setItem('resultDetailSearchVal', JSON.stringify(this.filters));
sessionStorage.setItem(
'resultDetailSearchVal',
JSON.stringify(this.filters),
);
if (this.filters.dateTime.length == 0) {
this.filters.dateTime[0] = `${moment((new Date()).setTime((new Date()).getTime() - 3600 * 1000 * 24)).format('YYYY-MM-DD')} 00:00:00`;
this.filters.dateTime[1] = `${moment((new Date()).setTime((new Date()).getTime() - 3600 * 1000 * 24)).format('YYYY-MM-DD')} 23:59:59`;
this.filters.dateTime[0] = `${moment(
new Date().setTime(new Date().getTime() - 3600 * 1000 * 24),
).format('YYYY-MM-DD')} 00:00:00`;
this.filters.dateTime[1] = `${moment(
new Date().setTime(new Date().getTime() - 3600 * 1000 * 24),
).format('YYYY-MM-DD')} 23:59:59`;
}
this.searchLoading = true;
axios.post(`${address}getImageGroups`, {
beginTime: this.filters.dateTime[0],
endTime: this.filters.dateTime[1],
capitalType: this.filters.capitalType,
status: this.filters.status > 0 ? this.filters.status : null,
pageIndex: this.pageOption.pageIndex,
pageSize: this.pageOption.pageSize,
}).then((response) => {
this.searchLoading = false;
if (response.data.code === 200) {
if (response.data.data) {
this.tableData = response.data.data.list;
this.pageOption.totalCount = response.data.data.total;
this.tableData.forEach((val) => {
val.status = val.status == 1 ? '正常' : (val.status == 2 ? '异常' : '新增');
val.imageTime = moment(parseInt(val.imageTime)).format('YYYY-MM-DD HH:mm:ss');
this.capitalOptions.forEach((item) => {
if (item.value == val.type2) {
val.type2 = item.label;
}
axios
.post(`${address}getImageGroups`, {
beginTime: this.filters.dateTime[0],
endTime: this.filters.dateTime[1],
capitalType: this.filters.capitalType,
status: this.filters.status > 0 ? this.filters.status : null,
})
.then((response) => {
this.searchLoading = false;
if (response.data.code === 200) {
if (response.data.data) {
this.tableData = response.data.data.list;
this.pageOption.totalCount = response.data.data.total;
this.tableData.forEach((val) => {
val.status = val.status == 1 ? '正常' : val.status == 2 ? '异常' : '新增';
val.imageTime = moment(parseInt(val.imageTime)).format(
'YYYY-MM-DD HH:mm:ss',
);
this.capitalOptions.forEach((item) => {
if (item.value == val.type2) {
val.type2 = item.label;
}
});
});
});
} else {
this.tableData = [];
}
} else {
this.tableData = [];
}
} else {
this.tableData = [];
}
console.log(`llllllllllllllll${JSON.stringify(this.tableData)}`);
})
console.log(`llllllllllllllll${JSON.stringify(this.tableData)}`);
})
.catch((error) => {
this.searchLoading = false;
console.log(error);
......@@ -498,95 +649,29 @@ export default {
handleSizeChange(size) {
this.pageOption.pageSize = size;
console.log(this.pagesize); // 每页下拉显示数据
this.getImageGroups();
this.getImageFeatures();
},
handleCurrentChange(currentPage) {
this.pageOption.pageIndex = currentPage;
console.log(this.currentPage); // 点击第几页
this.getImageGroups();
this.getImageFeatures();
},
getAllCapitals() {
axios.post(`${address}getAllCapitals`, {
}).then((response) => {
if (response.data.code === 200) {
this.capitalOptions = [];
if (response.data.data) {
console.log(response.data.data);
const { capitals } = response.data.data;
const nameSet = new Set();
capitals.forEach((val) => {
nameSet.add(val.capitalName);
});
nameSet.forEach((item) => {
if (item) {
this.capitalOptions.push({ value: item, label: item });
}
});
}
} else {
isInArray(arr, value) {
for (let i = 0; i < arr.length; i++) {
if (value === arr[i]) {
return true;
}
})
.catch((error) => {
console.log(error);
});
},
getCapitalDetails() {
this.currentPage = 1;
let capitalName = '';
if (this.filters.capitalType) {
this.filters.capitalType.forEach((val) => {
if (capitalName === '') {
capitalName += val;
} else {
capitalName = `${capitalName},${val}`;
}
});
}
axios.post(`${address}getCapitalDetails`, {
capitalName,
}).then((response) => {
if (response.data.code === 200) {
this.tableData = [];
this.no = 0;
if (response.data.data) {
const nameMap = new Map();
response.data.data.forEach((val) => {
if (val.lng && val.lat) {
// nameSet.add(val.capitalName);
let num = 1;
if (nameMap.has(val.capitalName)) {
num = nameMap.get(val.capitalName) + 1;
nameMap.set(val.capitalName, num);
} else {
nameMap.set(val.capitalName, num);
}
this.tableData.push({ no: ++this.no, name: val.capitalName + num, position: val.position });
}
});
}
}
})
.catch((error) => {
console.log(error);
});
},
isInArray(arr, value) {
for (let i = 0; i < arr.length; i++) {
if (value === arr[i]) {
return true;
}
}
return false;
return false;
},
showDialog2() {
this.dialogVisible1 = false;
this.dialogVisible2 = true;
A;
},
showPicture(index, row) {
this.imgContent = `${row.info}|${row.status}|${row.position}`;
this.bigImgUrl = `${address}getCapitalImg?imgPath=${row.imagePath}`;
this.bigImgUrl = `${imgAddress}getCapitalImg?imgPath=${row.imagePath}`;
const vectorData = JSON.parse(row.vector);
if (vectorData && vectorData.location) {
const point = vectorData.location;
......@@ -615,19 +700,18 @@ export default {
this.dialogVisible1 = false;
this.dialogVisible2 = false;
this.tableData[this.tableIndex].status = '正常';
axios.post(`${address}updateImageStatus`, {
id: this.groupId,
}).then((response) => {
if (response.data.code === 200) {
if (response.data.data) {
axios
.post(`${address}updateImageStatus`, {
id: this.groupId,
})
.then((response) => {
if (response.data.code === 200) {
if (response.data.data) {
} else {
}
} else {
}
} else {
}
})
})
.catch((error) => {
console.log(error);
});
......@@ -638,7 +722,13 @@ export default {
});
require.ensure([], () => {
// tHeader为存放excel表头标题的数组
const tHeader = ['序号', '巡检时间', '巡检目标', '目标位置', '目标状态'];
const tHeader = [
'序号',
'巡检时间',
'巡检目标',
'目标位置',
'目标状态',
];
// filterVal为tHeader标题对应的键值
const filterVal = ['no', 'imageTime', 'type2', 'position', 'status'];
// list为要转化为excel文件的数据，是一个数组
......@@ -650,6 +740,14 @@ export default {
export_json_to_excel(tHeader, data, fileName);
});
},
selectStatus(status) {
this.filters.status = status;
this.getTableData();
},
selectCapitalType(capitalType) {
this.filters.capitalType = capitalType;
this.getTableData();
},
},
};
</script>
src/views/Task.vue
View file @ e3b2aae7
......@@ -146,13 +146,8 @@
</baidu-map>
</div>
</div>
<el-dialog :visible.sync="isShowPicture" width="960px" >
<div :style="'height:' + fullHeight + 'px; position: relative;'" ref="mainW">
<img :src="bigImgUrl" ref="BGIMG" width="100%" @load="loadBigImg"/>
<div v-for="(item) in customStyleArray" :key="item">
<div class="dash" :style="item" v-if="showRedBox"></div>
</div>
</div>
<el-dialog :visible.sync="isShowPicture" width="960px">
<img :src="bigImgUrl" width="100%" />
</el-dialog>
</div>
</template>
......@@ -162,17 +157,13 @@ import axios from 'axios';
import gcoord from 'gcoord';
import moment from 'moment';
import { Message } from 'element-ui';
import { address } from '../config';
import { address, imgAddress } from '../config';
import { export_json_to_excel } from '@/excel/Export2Excel';
export default {
name: 'task',
data() {
return {
fullHeight: document.documentElement.clientHeight / 1.5,
styleItem: {
},
tableData: [],
infoWindow: {
show: false,
......@@ -249,7 +240,6 @@ export default {
],
},
searchLoading: false,
customStyleArray: [],
};
},
mounted() {},
......@@ -258,25 +248,6 @@ export default {
this.queryTravel();
},
methods: {
loadBigImg() {
const newRedArray = [];
this.scale = this.$refs.BGIMG.naturalWidth / this.$refs.mainW.offsetWidth;
this.hscale = this.$refs.BGIMG.naturalHeight / this.$refs.mainW.offsetHeight;
this.customStyleArray.forEach((e) => {
const customStyle = {
top: `${e.positionRight / this.hscale}px`,
left: `${e.positionLeft / this.scale}px`,
width: `${e.positionWidth / this.scale}px`,
height: `${e.positionHeight / this.hscale}px`,
};
newRedArray.push(customStyle);
});
this.customStyleArray = newRedArray;
this.showRedBox = true;
},
showTitle(e) {
this.infoPosition.lng = e.point.lng;
this.infoPosition.lat = e.point.lat;
......@@ -298,12 +269,9 @@ export default {
},
showPicture(e) {
this.infos.forEach((item) => {
console.log(JSON.stringify(item));
if (item.lng == e.point.lng && item.lat == e.point.lat) {
// 根据坐标信息获取图片
// 这个是描点的
this.getTrajectImgLocation(item.channel, item.plateNo, `${item.date} ${item.time}`);
this.bigImgUrl = `${address
this.bigImgUrl = `${imgAddress
}getTrajectImg?channel=${
item.channel
}&equipment=${
......@@ -327,40 +295,7 @@ export default {
equipment: plateNo,
createTime,
})
// eslint-disable-next-line no-unused-vars
.then((response) => {
})
.catch((error) => {
console.log(error);
});
},
getTrajectImgLocation(channel, plateNo, createTime) {
axios
.get(
`${address}getTrajectImgLocation?channel=${channel}&equipment=${plateNo}&createTime=${createTime}`,
)
// eslint-disable-next-line no-unused-vars
.then((response) => {
const styleArray = response.data.data;
this.customStyleArray = [];
styleArray.forEach((e) => {
const point = JSON.parse(e).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);
}
});
})
.then((response) => {})
.catch((error) => {
console.log(error);
});
......@@ -763,9 +698,4 @@ export default {
}
}
}
.dash{
position: absolute;
border: 2px #EC292A dashed;
}
</style>
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