Skip to content

T
traffic-front
Commit e9a63dfc authored by jiangjiaxu's avatar jiangjiaxu
Browse files
Options

debug 20200725

parent 4152bc68
Show whitespace changes
Inline Side-by-side
Showing with 887 additions and 611 deletions
src/main.js
View file @ e9a63dfc
...@@ -8,6 +8,7 @@ import _ from 'lodash'; ...@@ -8,6 +8,7 @@ import _ from 'lodash';
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';
import moment from 'moment'
Vue.use(ElementUI); Vue.use(ElementUI);
Vue.use(BaiduMap, { Vue.use(BaiduMap, {
......
src/views/Result.vue
View file @ e9a63dfc
...@@ -18,15 +18,15 @@ ...@@ -18,15 +18,15 @@
v-for="item in plateNoOptions" v-for="item in plateNoOptions"
:key="item.code" :key="item.code"
:label="item.plateNo" :label="item.plateNo"
:value="item.code"> :value="item.code"
</el-option> ></el-option>
</el-select> </el-select>
<!-- <el-autocomplete <!-- <el-autocomplete
v-model="filters.channelName" v-model="filters.channelName"
:fetch-suggestions="queryChannelSearchAsync" :fetch-suggestions="queryChannelSearchAsync"
placeholder="渠道" placeholder="渠道"
@select="handleChannelSelect" @select="handleChannelSelect"
></el-autocomplete> --> ></el-autocomplete>-->
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-date-picker <el-date-picker
...@@ -39,8 +39,8 @@ ...@@ -39,8 +39,8 @@
end-placeholder="结束时间" end-placeholder="结束时间"
:default-time="['00:00:00', '23:59:59']" :default-time="['00:00:00', '23:59:59']"
value-format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="pickerOptions"> :picker-options="pickerOptions"
</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="queryTravel">搜索</el-button>
...@@ -56,72 +56,37 @@ ...@@ -56,72 +56,37 @@
<el-table <el-table
:data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
style="width: calc(100vw - 240px);overflow:hidden;" style="width: calc(100vw - 240px);overflow:hidden;"
border=true border
fit fit
highlight-current-row=true highlight-current-row
> >
<el-table-column <el-table-column width="50" align="center" prop="select">
type="index" <template slot-scope="scope">
width="50" <div
label="序号"> :class="(radioIndex === scope.$index) ? 'rowSelect' : 'rowUnSelect'"
</el-table-column> :label="scope.$index"
<el-table-column @click="clickChange(scope.$index, scope.row)"
label="车牌号" ></div>
prop="plateNo"> </template>
</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>
<el-table-column width="80" label="序号" type="index" prop="index" align="center"></el-table-column>
<el-table-column fixed="right" label="详情" > <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"> <template slot-scope="scope">
<el-button <el-button size="mini" @click="linkDetail(scope.$index, scope.row)">查看</el-button>
size="mini"
@click="linkDetail(scope.$index, scope.row)">查看</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<el-pagination <el-pagination
@size-change="handleSizeChange" @size-change="handleSizeChange"
...@@ -130,38 +95,67 @@ ...@@ -130,38 +95,67 @@
:page-sizes="[5, 10, 20, 40]" :page-sizes="[5, 10, 20, 40]"
:page-size="pagesize" :page-size="pagesize"
layout="total, sizes, prev, pager, next, jumper" layout="total, sizes, prev, pager, next, jumper"
:total="tableData.length"> :total="tableData.length"
</el-pagination> ></el-pagination>
</div> </div>
<!-- 地图 --> <!-- 地图 -->
<div class="ov-map"> <div class="ov-map">
<baidu-map class="map" :center="center" :zoom="zoom" @zoomend="zoomEnd" scroll-wheel-zoom @dragend="getMapBounds" @ready="handler"> <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-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 :path="item.polylinePath" stroke-color="orange" :stroke-opacity="1" :stroke-weight="5" :editing="false" @lineupdate="updatePolylinePath">
</bm-polyline> --> </bm-polyline>-->
<bml-marker-clusterer :averageCenter="true"> <bml-marker-clusterer :averageCenter="true">
<div v-for="(item,index) in carPoints" :key="item"> <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-marker
<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'}"/> :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> </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>
</baidu-map> </baidu-map>
</div> </div>
<!-- 图片 --> <!-- 图片 -->
<div class="picture"> <div class="picture">
<!-- <el-button type="primary" @click="exportImgInfo">导出</el-button> --> <!-- <el-button type="primary" @click="exportImgInfo">导出</el-button> -->
<ul> <ul>
<li v-for="(item,index) in groupImgs" :key="item" style="padding: 5px;" <li
v-for="(item,index) in groupImgs"
:key="item"
style="padding: 5px;"
@mouseover="addActive(index)" @mouseover="addActive(index)"
@mouseout="removeActive(index)" @mouseout="removeActive(index)"
@click="showPicture(index)"> @click="showPicture(index)"
<el-card :id="item.id" :body-style="{ padding: '0px' }" >
:class="{pic_active:index == isShow}"> <el-card
:id="item.id"
:body-style="{ padding: '0px' }"
:class="{pic_active:index == isShow}"
>
<!-- <img :src="item.url" alt="#"> --> <!-- <img :src="item.url" alt="#"> -->
<el-image :src="item.url" lazy></el-image> <el-image :src="item.url" lazy></el-image>
<span class="number">{{item.number}}</span> <span class="number">{{item.number}}</span>
...@@ -174,13 +168,9 @@ ...@@ -174,13 +168,9 @@
</div> </div>
</div> </div>
<el-dialog <el-dialog :visible.sync="isShowPicture" :title="imgContent" custom-class="customWidth">
:visible.sync="isShowPicture"
:title="imgContent"
custom-class="customWidth"
>
<div :style="'height:' + fullHeight + 'px; position: relative;'" ref="mainW"> <div :style="'height:' + fullHeight + 'px; position: relative;'" ref="mainW">
<img :src="bigImgUrl" ref="BGIMG" width="100%" style="height: 100%;" @load=loadBigImg> <img :src="bigImgUrl" ref="BGIMG" width="100%" style="height: 100%;" @load="loadBigImg" />
<div v-for="(item) in customStyleArray" :key="item"> <div v-for="(item) in customStyleArray" :key="item">
<div class="dash" :style="item" v-if="showRedBox"></div> <div class="dash" :style="item" v-if="showRedBox"></div>
</div> </div>
...@@ -189,17 +179,17 @@ ...@@ -189,17 +179,17 @@
</div> </div>
</template> </template>
<style lang="less" scope> <style lang="less" scope>
.BMapLabel{ .BMapLabel {
z-index: 10 !important; z-index: 10 !important;
} }
.customWidth{ .customWidth {
width: 63% width: 63%;
} }
.sample { .sample {
width: 120px; width: 120px;
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
background: rgba(0,0,0,0.5); background: rgba(0, 0, 0, 0.5);
overflow: hidden; overflow: hidden;
box-shadow: 0 0 5px #000; box-shadow: 0 0 5px #000;
color: #fff; color: #fff;
...@@ -207,11 +197,32 @@ ...@@ -207,11 +197,32 @@
padding: 10px; padding: 10px;
position: absolute; position: absolute;
} }
.anchorBL{display:none} .anchorBL {
.result{ 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%; height: 100%;
width: calc(100vw - 240px); width: calc(100vw - 240px);
.box{ .box {
height: 100%; height: 100%;
width: calc(100vw - 240px); width: calc(100vw - 240px);
float: left; float: left;
...@@ -219,7 +230,7 @@ ...@@ -219,7 +230,7 @@
width: 100%; width: 100%;
background-color: white; background-color: white;
} }
.ov-map{ .ov-map {
width: calc(100vw - 600px); width: calc(100vw - 600px);
height: 100%; height: 100%;
float: left; float: left;
...@@ -229,7 +240,7 @@ ...@@ -229,7 +240,7 @@
height: 100%; height: 100%;
} }
} }
.picture{ .picture {
height: 90%; height: 90%;
width: calc(300px); width: calc(300px);
float: left; float: left;
...@@ -240,24 +251,24 @@ ...@@ -240,24 +251,24 @@
margin-left: 64%; margin-left: 64%;
margin-bottom: 5%; margin-bottom: 5%;
} }
ul{ ul {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow-y: scroll; overflow-y: scroll;
margin: 0 auto; margin: 0 auto;
margin-left: 10%; margin-left: 10%;
li{ li {
width: 80%; width: 80%;
height: auto; height: auto;
float: left; float: left;
text-align: center; text-align: center;
.el-card{ .el-card {
position: relative; position: relative;
img{ img {
width: 100%; width: 100%;
height: 80%; height: 80%;
} }
.number{ .number {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
...@@ -274,44 +285,38 @@ ...@@ -274,44 +285,38 @@
} }
} }
} }
} }
.pic_active{ .pic_active {
border: 5px solid #1296db; border: 5px solid #1296db;
} }
.dash{ .dash {
position: absolute; position: absolute;
border: 2px #EC292A dashed; border: 2px #ec292a dashed;
} }
</style> </style>
<script> <script>
import axios from 'axios'; import axios from "axios";
import { Message } from 'element-ui'; import { Message } from "element-ui";
import gcoord from 'gcoord'; import gcoord from "gcoord";
import moment from 'moment'; import moment from "moment";
import { import { imgApi, imgAddress, address, photoAddress } from "../config";
imgApi, imgAddress, address, photoAddress, import { export_json_to_excel } from "@/excel/Export2Excel";
} from '../config';
import { export_json_to_excel } from '@/excel/Export2Excel';
export default { export default {
name: 'result', name: "result",
data() { data() {
return { return {
options: [{ value: 0, label: '全国' }], searchData: [],
zoom: 13,
tableData: [], tableData: [],
options: [{ value: 0, label: "全国" }],
zoom: 13,
currentPage: 1, // 初始页 currentPage: 1, // 初始页
pagesize: 10, // 每页的数据 pagesize: 10, // 每页的数据
carPoints: [ carPoints: [],
],
allPoints: [], allPoints: [],
imgs: [ imgs: [],
],
filters: { filters: {
plateNo: [], plateNo: [],
dateTime: [], dateTime: [],
...@@ -329,88 +334,136 @@ export default { ...@@ -329,88 +334,136 @@ export default {
no: 0, no: 0,
isShowCol: false, isShowCol: false,
isShowPicture: false, isShowPicture: false,
bigImgUrl: '', bigImgUrl: "",
imgContent: '', imgContent: "",
fullHeight: document.documentElement.clientHeight / 1.5, fullHeight: document.documentElement.clientHeight / 1.5,
pickerOptions: { pickerOptions: {
shortcuts: [{ shortcuts: [
text: '最近一周', {
text: "最近一周",
onClick(picker) { onClick(picker) {
const end = new Date(); const end = new Date();
const start = new Date(); const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]); picker.$emit("pick", [start, end]);
}, },
}, { },
text: '最近一个月', {
text: "最近一个月",
onClick(picker) { onClick(picker) {
const end = new Date(); const end = new Date();
const start = new Date(); const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]); picker.$emit("pick", [start, end]);
}, },
}, { },
text: '最近三个月', {
text: "最近三个月",
onClick(picker) { onClick(picker) {
const end = new Date(); const end = new Date();
const start = new Date(); const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit('pick', [start, end]); picker.$emit("pick", [start, end]);
}, },
}], },
],
}, },
capitalOptions: [ capitalOptions: [
{ {
label: '路面状况', label: "全部",
value: 1, value: -2,
}, { },
label: '护栏', {
label: "其他",
value: -1,
},
{
label: "道路设施",
value: 0,
},
{
label: "抛洒物",
value: 2, value: 2,
}, },
{ {
label: '龙门架', label: "护栏",
value: 3,
},
{
label: "龙门架",
value: 101, value: 101,
}, { },
label: '矩形标牌', {
label: "矩形标牌",
value: 201, value: 201,
}, { },
label: '圆形标牌', {
label: "圆形标牌",
value: 202, value: 202,
}, { },
label: '三角标牌', {
label: "三角标牌",
value: 203, value: 203,
}, { },
label: '其它形状标牌', {
label: "其它形状标牌",
value: 209, value: 209,
}, { },
label: '可变信息牌（情报板）', {
label: "可变信息牌（情报板）",
value: 301, value: 301,
}, { },
label: 'T型杆', {
label: "T型杆",
value: 401, value: 401,
}, { },
label: 'L型杆', {
label: "L型杆",
value: 402, value: 402,
}, { },
label: 'I型立杆', {
label: "I型立杆",
value: 403, value: 403,
}, { },
label: '枪式摄像机', {
label: "枪式摄像机",
value: 801, value: 801,
}, { },
label: '相机', {
label: "相机",
value: 802, value: 802,
}, { },
label: '补光灯', {
label: "补光灯",
value: 803, value: 803,
}, { },
label: 'RSU天线', {
label: "RSU天线",
value: 804, value: 804,
}, { },
label: '测速雷达', {
label: "测速雷达",
value: 805, value: 805,
}, },
], ],
statusOptions: [
{
label: "全部",
value: -1,
},
{
label: "正常",
value: 1,
},
{
label: "异常",
value: 2,
},
{
label: "新增",
value: 3,
},
],
showRedBox: false, showRedBox: false,
customStyle: { customStyle: {
top: `${this.positionRight / this.hscale}px`, top: `${this.positionRight / this.hscale}px`,
...@@ -418,34 +471,40 @@ export default { ...@@ -418,34 +471,40 @@ export default {
width: `${this.positionWidth / this.scale}px`, width: `${this.positionWidth / this.scale}px`,
height: `${this.positionHeight / this.hscale}px`, height: `${this.positionHeight / this.hscale}px`,
}, },
positionLeft: '', positionLeft: "",
positionRight: '', positionRight: "",
positionWidth: '', positionWidth: "",
positionHeight: '', positionHeight: "",
scale: 0, // 适应比例 1.6608996539792387 scale: 0, // 适应比例 1.6608996539792387
hscale: 0, // 1.9014084507042253 hscale: 0, // 1.9014084507042253
searchLoading: false, searchLoading: false,
customStyleArray: [], customStyleArray: [],
screenLoading: false, screenLoading: false,
currentIndex: 0,
}; };
}, },
mounted() { mounted() {
if (this.$route.params.startTime && this.$route.params.endTime) { 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) { if (this.$route.params.equipment) {
const { equipment } = this.$route.params; const { equipment } = this.$route.params.equipment;
this.filters.plateNo = equipment.split(','); this.filters.plateNo = equipment.split(",");
} }
if (this.filters.dateTime.length > 0 || this.filters.plateNo.length > 0) { if (this.filters.dateTime.length > 0 || this.filters.plateNo.length > 0) {
// do nothing // do nothing
} else { } else {
const searchVal = sessionStorage.getItem('searchVal'); const searchVal = sessionStorage.getItem("searchVal");
if (searchVal) { if (searchVal) {
this.filters = JSON.parse(searchVal); this.filters = JSON.parse(searchVal);
} }
} }
this.radioIndex = 0;
this.queryAllEquipment(); this.queryAllEquipment();
this.queryTravel(); this.queryTravel();
}, },
...@@ -458,7 +517,8 @@ export default { ...@@ -458,7 +517,8 @@ export default {
// console.log('---'); // console.log('---');
const newRedArray = []; const newRedArray = [];
this.scale = this.$refs.BGIMG.naturalWidth / this.$refs.mainW.offsetWidth; 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) => { this.customStyleArray.forEach((e) => {
const customStyle = { const customStyle = {
top: `${e.positionRight / this.hscale}px`, top: `${e.positionRight / this.hscale}px`,
...@@ -477,22 +537,15 @@ export default { ...@@ -477,22 +537,15 @@ export default {
this.carPoints = []; this.carPoints = [];
this.imgs = []; this.imgs = [];
this.allPoints.forEach((item, index) => { this.carPoints = this.allPoints[this.currentIndex];
// eslint-disable-next-line no-undef this.imgs = this.allImgs[this.currentIndex];
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]);
}
}
});
if (this.carPoints.length > 0) { const length = this.carPoints.length;
this.center.lng = this.carPoints[0].lng; if (length > 0) {
this.center.lat = this.carPoints[0].lat; this.center.lng = this.carPoints[parseInt(length / 2)].lng;
this.center.lat = this.carPoints[parseInt(length / 2)].lat;
this.carPoints.forEach((val) => { this.carPoints.forEach((val) => {
val.title = val.titleList.join('\n'); val.title = val.titleList.join("\n");
}); });
} }
}, },
...@@ -502,37 +555,75 @@ export default { ...@@ -502,37 +555,75 @@ export default {
}); });
require.ensure([], () => { require.ensure([], () => {
// tHeader为存放excel表头标题的数组 // tHeader为存放excel表头标题的数组
const tHeader = ['序号', '车牌号', '起始时间 - 终止时间', '起点 - 终点', '巡检里程', '巡检资产', '正常资产', '路面抛洒物', '护栏弯曲', '新增资产']; const tHeader = [
"序号",
"车牌号",
"起始时间 - 终止时间",
"起点 - 终点",
"巡检里程",
"巡检资产",
"正常资产",
"路面抛洒物",
"护栏弯曲",
"新增资产",
];
// filterVal为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文件的数据，是一个数组 // list为要转化为excel文件的数据，是一个数组
const list = this.tableData; const list = this.tableData;
// 用map方法处理list数据 // 用map方法处理list数据
const data = list.map(v => filterVal.map(j => v[j])); const data = list.map((v) => filterVal.map((j) => v[j]));
// 自定义excel文件名 // 自定义excel文件名
const fileName = '巡检结果'; const fileName = "巡检结果";
export_json_to_excel(tHeader, data, fileName); export_json_to_excel(tHeader, data, fileName);
}); });
}, },
exportImgInfo() { exportImgInfo() {
const exportImgs = []; const exportImgs = [];
this.allImgs.forEach((item) => { this.allImgs.forEach((item) => {
const capital = item.content.split('|'); const capital = item.content.split("|");
exportImgs.push({ 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([], () => { require.ensure([], () => {
// tHeader为存放excel表头标题的数组 // tHeader为存放excel表头标题的数组
const tHeader = ['图片编号', '图片链接', '资产名称', '资产状态', '资产位置']; const tHeader = [
"图片编号",
"图片链接",
"资产名称",
"资产状态",
"资产位置",
];
// filterVal为tHeader标题对应的键值 // filterVal为tHeader标题对应的键值
const filterVal = ['number', 'url', 'capitalName', 'capitalStatus', 'position']; const filterVal = [
"number",
"url",
"capitalName",
"capitalStatus",
"position",
];
// list为要转化为excel文件的数据，是一个数组 // list为要转化为excel文件的数据，是一个数组
const list = exportImgs; const list = exportImgs;
// 用map方法处理list数据 // 用map方法处理list数据
const data = list.map(v => filterVal.map(j => v[j])); const data = list.map((v) => filterVal.map((j) => v[j]));
// 自定义excel文件名 // 自定义excel文件名
const fileName = '资产图片信息'; const fileName = "资产图片信息";
export_json_to_excel(tHeader, data, fileName); export_json_to_excel(tHeader, data, fileName);
}); });
}, },
...@@ -541,10 +632,16 @@ export default { ...@@ -541,10 +632,16 @@ export default {
this.carPoints.forEach((val, index_) => { this.carPoints.forEach((val, index_) => {
if (index_ === index) { if (index_ === index) {
// 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 ? 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 { } else {
// eslint-disable-next-line global-require,no-param-reassign // 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; this.isShow = index;
...@@ -553,7 +650,10 @@ export default { ...@@ -553,7 +650,10 @@ export default {
removeclass(index) { removeclass(index) {
this.carPoints.forEach((val) => { 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 ? 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; this.isShow = -1;
}, },
...@@ -576,7 +676,6 @@ export default { ...@@ -576,7 +676,6 @@ export default {
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],
}; };
this.customStyleArray.push(style); this.customStyleArray.push(style);
...@@ -591,7 +690,6 @@ export default { ...@@ -591,7 +690,6 @@ export default {
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],
}; };
this.customStyleArray.push(style); this.customStyleArray.push(style);
...@@ -600,41 +698,51 @@ export default { ...@@ -600,41 +698,51 @@ export default {
} }
this.isShowPicture = true; this.isShowPicture = true;
setTimeout(() => { this.showRedBox = true; }, 300); setTimeout(() => {
this.showRedBox = true;
}, 300);
}, },
addActive(index) { addActive(index) {
this.carPoints.forEach((e) => { 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 ? 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; this.isShow = index;
// eslint-disable-next-line global-require // 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].url =
this.carPoints[index].markerAnim = 'BMAP_ANIMATION_BOUNCE'; 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) { removeActive(index) {
this.isShow = -1; this.isShow = -1;
this.carPoints[index].markerAnim = ''; this.carPoints[index].markerAnim = "";
// eslint-disable-next-line global-require // 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 }) { handler({ BMap, map }) {
console.log(BMap, map); // console.log(BMap, map);
}, },
updatePolylinePath(e) { updatePolylinePath(e) {
this.polylinePath = e.target.getPath(); this.polylinePath = e.target.getPath();
}, },
changeBefore() { changeBefore() {},
},
zoomEnd(e) { zoomEnd(e) {
this.zoom = e.target.getZoom(); this.zoom = e.target.getZoom();
this.getMapBounds(e); this.getMapBounds(e);
}, },
queryAllEquipment() { queryAllEquipment() {
axios.post(`${address}queryAllEquipment`, { axios
.post(`${address}queryAllEquipment`, {})
}).then((response) => { .then((response) => {
if (response.data.code === 200) { if (response.data.code === 200) {
if (response.data.data) { if (response.data.data) {
this.plateNoOptions = []; this.plateNoOptions = [];
...@@ -655,35 +763,47 @@ export default { ...@@ -655,35 +763,47 @@ export default {
}); });
}, },
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) {
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) { if (this.filters.plateNo && this.filters.plateNo.length > 0) {
this.filters.plateNo.forEach((item) => { this.filters.plateNo.forEach((item) => {
if (equipmentCode === '') { if (equipmentCode === "") {
equipmentCode += item; equipmentCode += item.code;
} else { } else {
equipmentCode += `,${item}`; equipmentCode += `,${item.code}`;
} }
}); });
} }
this.searchLoading = true; this.searchLoading = true;
axios.post(`${address}getInspectResult`, { var that = this;
startTime: this.filters.dateTime[0], axios
endTime: this.filters.dateTime[1], .post(`${address}getInspectResultNew`, {
startTime: that.filters.dateTime[0],
endTime: that.filters.dateTime[1],
equipment: equipmentCode, equipment: equipmentCode,
}).then((response) => { })
this.searchLoading = false; .then((response) => {
that.searchLoading = false;
if (response.data.code === 200) { if (response.data.code === 200) {
if (response.data.data) { if (response.data.data) {
this.tableData = []; that.tableData = [];
this.allPoints = []; that.allPoints = [];
this.carPoints = []; that.carPoints = [];
this.imgs = []; that.imgs = [];
this.allImgs = []; that.allImgs = [];
this.no = 0; that.no = 0;
// 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 (var key in response.data.data) {
...@@ -691,7 +811,9 @@ export default { ...@@ -691,7 +811,9 @@ export default {
const gisArr = response.data.data[key]; const gisArr = response.data.data[key];
gisArr.forEach((val) => { gisArr.forEach((val) => {
if (val) { if (val) {
// 计算轨迹长度 // 计算轨迹长度 获取当前轨迹所有点carPoints
const carPointsTmp = [];
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) {
...@@ -699,63 +821,131 @@ export default { ...@@ -699,63 +821,131 @@ export default {
// 资产及对应图片信息 // 资产及对应图片信息
item.images.forEach((info) => { item.images.forEach((info) => {
// eslint-disable-next-line no-plusplus // eslint-disable-next-line no-plusplus
this.no = ++this.no; that.no = ++that.no;
if (info.longitude && info.latitude) { if (info.longitude && info.latitude) {
const result = gcoord.transform( const result = gcoord.transform(
[info.longitude, info.latitude], [info.longitude, info.latitude],
gcoord.WGS84, gcoord.WGS84,
gcoord.BD09, gcoord.BD09
); );
this.capitalOptions.forEach((capital) => { that.capitalOptions.forEach((capital) => {
if (capital.value === info.type2) { if (capital.value === info.type2) {
// eslint-disable-next-line no-param-reassign // eslint-disable-next-line no-param-reassign
info.type2 = capital.label; info.type2 = capital.label;
} }
}); });
this.allPoints.push({
carPointsTmp.push({
// eslint-disable-next-line global-require,no-nested-ternary // 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}`], 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}`,
],
}); });
this.allImgs.push({
carImgsTmp.push({
// eslint-disable-next-line no-nested-ternary // 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, 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 (index < val.length - 1) {
if (val[index + 1].longitude && val[index + 1].latitude) { if (
val[index + 1].longitude &&
val[index + 1].latitude
) {
const result1 = gcoord.transform( const result1 = gcoord.transform(
[val[index + 1].longitude, val[index + 1].latitude], [
val[index + 1].longitude,
val[index + 1].latitude,
],
gcoord.WGS84, gcoord.WGS84,
gcoord.BD09, gcoord.BD09
); );
const result = gcoord.transform( const result = gcoord.transform(
[val[index].longitude, val[index].latitude], [val[index].longitude, val[index].latitude],
gcoord.WGS84, gcoord.WGS84,
gcoord.BD09, gcoord.BD09
); );
// eslint-disable-next-line eqeqeq // eslint-disable-next-line eqeqeq
if (val[index + 1].linkId == val[index].linkId) { if (val[index + 1].linkId == val[index].linkId) {
totalDistance += Math.abs(val[index + 1].roadEndDis - val[index].roadEndDis); totalDistance += Math.abs(
val[index + 1].roadEndDis -
val[index].roadEndDis
);
} else { } else {
totalDistance += Math.abs(this.getDistance(result1[0], result1[1], result[0], result[1])); totalDistance += Math.abs(
that.getDistance(
result1[0],
result1[1],
result[0],
result[1]
)
);
} }
} }
} }
} }
}); });
this.tableData.push({ that.allPoints.push(carPointsTmp);
that.allImgs.push(carImgsTmp);
that.tableData.push({
plateNo: key, 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')}`, startEndTime: `${moment(
startEndPoint: `${val[val.length - 1].position} - ${val[0].position}`, val[val.length - 1].timestamp
inspectDistance: `${(totalDistance / 1000).toFixed(1)}km`, ).format("YYYY-MM-DD hh:mm")} - ${moment(
inspectNum: `${val[0].inspectNum ? val[0].inspectNum : 0}个`, val[0].timestamp
normalNum: `${val[0].normalNum ? val[0].normalNum : 0}个`, ).format("YYYY-MM-DD hh:mm")}`,
roadLetterNum: `${val[0].roadLetterNum ? val[0].roadLetterNum : 0}个`, startEndPoint: `${val[val.length - 1].position} - ${
guardrailNum: `${val[0].guardrailNum ? val[0].guardrailNum : 0}个`, val[0].position
newInspectNum: `${val[0].newInspectNum ? val[0].newInspectNum : 0}个`, }`,
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, startTime: val[val.length - 1].timestamp,
endTime: val[0].timestamp, endTime: val[0].timestamp,
}); });
...@@ -763,23 +953,29 @@ export default { ...@@ -763,23 +953,29 @@ export default {
}); });
} }
} }
this.allPoints.forEach((item, index) => {
if (index <= 100) {
this.carPoints.push(item);
this.imgs.push(this.allImgs[index]);
}
});
that.carPoints = that.allPoints[0];
that.imgs = that.allImgs[0];
this.$_.forEach(this.imgs, (o) => { this.$_.forEach(that.imgs, (o) => {
o.name = o.content.split('|').length > 0 ? o.content.split('|')[0] : ''; o.name =
o.type = o.content.split('|').length > 1 ? o.content.split('|')[1] : ''; 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)}`); // console.log(`lllllllllllllllllold${JSON.stringify(that.imgs)}`);
const imgsNew = this.imgs.map((item, index, arr) => { const imgsNew = that.imgs
.map((item, index, arr) => {
/* const i = this.$_.findIndex(users, function(o) { return o.user == 'barney'; }); */ /* const i = this.$_.findIndex(users, function(o) { return o.user == 'barney'; }); */
const i = arr.find(_item => item.type === _item.type && item.url === _item.url); const i = arr.find(
(_item) =>
item.type === _item.type && item.url === _item.url
);
if (i !== item) { if (i !== item) {
if (item.name) { if (item.name) {
i.content = `${item.name} ${i.content}`; i.content = `${item.name} ${i.content}`;
...@@ -789,22 +985,24 @@ export default { ...@@ -789,22 +985,24 @@ export default {
} }
i.vector = [i.vector]; i.vector = [i.vector];
return i; return i;
}).filter(item => item !== undefined); })
.filter((item) => item !== undefined);
imgsNew.forEach((e, index) => { imgsNew.forEach((e, index) => {
e.number = index + 1; e.number = index + 1;
}); });
this.groupImgs = imgsNew; that.groupImgs = imgsNew;
console.log(`lllllllllllllllllnew${JSON.stringify(this.groupImgs)}`); // console.log(
// `lllllllllllllllllnew${JSON.stringify(that.groupImgs)}`
// );
if (this.carPoints && this.carPoints.length > 0) { if (that.carPoints && that.carPoints.length > 0) {
// this.center.lng = '117.05089715211'; const length = that.carPoints.length;
// this.center.lat = '32.50339615603'; that.center.lng = that.carPoints[parseInt(length / 2)].lng;
this.center.lng = this.carPoints[0].lng; that.center.lat = that.carPoints[parseInt(length / 2)].lat;
this.center.lat = this.carPoints[0].lat; that.carPoints.forEach((val) => {
this.carPoints.forEach((val) => { val.title = val.titleList.join("\n");
val.title = val.titleList.join('\n');
}); });
} }
} }
...@@ -827,9 +1025,16 @@ export default { ...@@ -827,9 +1025,16 @@ export default {
const radLat2 = this.rad(lat2); const radLat2 = this.rad(lat2);
const a = radLat1 - radLat2; const a = radLat1 - radLat2;
const b = this.rad(lng1) - this.rad(lng2); const b = this.rad(lng1) - this.rad(lng2);
let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) let s =
+ Math.cos(radLat1) * Math.cos(radLat2) 2 *
* Math.pow(Math.sin(b / 2), 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 *= EARTH_RADIUS;
// s = Math.round(s * 10000d) / 10000d; // s = Math.round(s * 10000d) / 10000d;
s = Math.round(s * 10000) / 10000; s = Math.round(s * 10000) / 10000;
...@@ -837,15 +1042,15 @@ export default { ...@@ -837,15 +1042,15 @@ export default {
return s; return s;
}, },
rad(d) { rad(d) {
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 // eslint-disable-next-line no-unused-vars
const startEndTime = row.startTime; const startEndTime = row.startTime;
console.log(row.startTime); // console.log(row.startTime);
console.log(row.endTime); // console.log(row.endTime);
this.$router.push({ this.$router.push({
name: 'resultDetail', name: "resultDetail",
params: { params: {
startTime: row.startTime, startTime: row.startTime,
endTime: row.endTime, endTime: row.endTime,
...@@ -853,108 +1058,44 @@ export default { ...@@ -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() { onSubmit() {
if (!this.form.region) { if (!this.form.region) {
Message({ Message({
message: '请输入地域', message: "请输入地域",
type: 'error', type: "error",
}); });
return; return;
} }
if (!this.form.registration) { if (!this.form.registration) {
Message({ Message({
message: '请先选择道路等级', message: "请先选择道路等级",
type: 'error', type: "error",
}); });
return; return;
} }
if (!this.form.minSpeed) { if (!this.form.minSpeed) {
Message({ Message({
message: '请先填写最小速度', message: "请先填写最小速度",
type: 'error', type: "error",
}); });
return; return;
} }
if (!this.form.maxSpeed) { if (!this.form.maxSpeed) {
Message({ Message({
message: '请先填写最大速度', message: "请先填写最大速度",
type: 'error', type: "error",
}); });
return; return;
} }
if (!this.value4) { if (!this.value4) {
Message({ Message({
message: '请先选择时间', message: "请先选择时间",
type: 'error', type: "error",
}); });
return; return;
} }
console.log(this.form.registration); // console.log(this.form.registration);
let level = ''; let level = "";
this.form.registration.forEach((item, index) => { this.form.registration.forEach((item, index) => {
// eslint-disable-next-line eqeqeq // eslint-disable-next-line eqeqeq
if (index == 0) { if (index == 0) {
...@@ -963,7 +1104,8 @@ export default { ...@@ -963,7 +1104,8 @@ export default {
level += `,${item}`; level += `,${item}`;
} }
}); });
axios.post(`${address}generateTask`, { axios
.post(`${address}generateTask`, {
area: this.form.region, area: this.form.region,
startTime: this.value4[0], startTime: this.value4[0],
endTime: this.value4[1], endTime: this.value4[1],
...@@ -971,12 +1113,13 @@ export default { ...@@ -971,12 +1113,13 @@ export default {
maxSpeed: this.form.maxSpeed, maxSpeed: this.form.maxSpeed,
level, level,
distance: this.form.distance, distance: this.form.distance,
}).then((response) => { })
.then((response) => {
if (response.data.code === 200) { if (response.data.code === 200) {
Message({ Message({
message: `${response.data.message}`, message: `${response.data.message}`,
type: 'success', type: "success",
duration: '800', duration: "800",
}); });
} else { } else {
Message({ Message({
...@@ -989,7 +1132,7 @@ export default { ...@@ -989,7 +1132,7 @@ export default {
}); });
}, },
listPicture() { listPicture() {
window.open('http://106.52.130.113:9088', '_blank'); window.open("http://106.52.130.113:9088", "_blank");
}, },
changeevent(value) { changeevent(value) {
this.options.forEach((item) => { this.options.forEach((item) => {
...@@ -999,6 +1142,32 @@ export default { ...@@ -999,6 +1142,32 @@ 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];
},
}, },
}; };
</script> </script>
src/views/ResultDetail.vue
View file @ e9a63dfc
<template> <template>
<div class="detail"> <div class="detail">
<div class="box"> <div class="box">
<!-- 查询区 --> <!-- 查询区 -->
<el-col :span="24" class="warp-breadcrum"> <el-col :span="24" class="warp-breadcrum">
<!--搜索栏--> <!--搜索栏-->
...@@ -14,20 +13,21 @@ ...@@ -14,20 +13,21 @@
clearable clearable
filterable filterable
placeholder="巡检目标" placeholder="巡检目标"
@change="selectCapitalType"
> >
<el-option <el-option
v-for="item in capitalOptions" v-for="item in capitalOptions"
:key="item.value" :key="item.value"
:label="item.label" :label="item.label"
:value="item.value"> :value="item.value"
</el-option> ></el-option>
</el-select> </el-select>
<!-- <el-autocomplete <!-- <el-autocomplete
v-model="filters.channelName" v-model="filters.channelName"
:fetch-suggestions="queryChannelSearchAsync" :fetch-suggestions="queryChannelSearchAsync"
placeholder="渠道" placeholder="渠道"
@select="handleChannelSelect" @select="handleChannelSelect"
></el-autocomplete> --> ></el-autocomplete>-->
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-select <el-select
...@@ -36,13 +36,14 @@ ...@@ -36,13 +36,14 @@
clearable clearable
filterable filterable
placeholder="目标状态" placeholder="目标状态"
@change="selectStatus"
> >
<el-option <el-option
v-for="item in statusOptions" v-for="item in statusOptions"
:key="item.value" :key="item.value"
:label="item.label" :label="item.label"
:value="item.value"> :value="item.value"
</el-option> ></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
...@@ -56,11 +57,11 @@ ...@@ -56,11 +57,11 @@
end-placeholder="结束时间" end-placeholder="结束时间"
:default-time="['00:00:00', '23:59:59']" :default-time="['00:00:00', '23:59:59']"
value-format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="pickerOptions"> :picker-options="pickerOptions"
</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="getImageGroups">搜索</el-button> <el-button type="primary" v-loading="searchLoading" @click="getImageFeatures">搜索</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>
...@@ -73,72 +74,44 @@ ...@@ -73,72 +74,44 @@
<el-table <el-table
:data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
style="width: calc(100vw - 240px);overflow:hidden;" style="width: calc(100vw - 240px);overflow:hidden;"
border=true border
fit fit
highlight-current-row=true highlight-current-row
>
<el-table-column
type="index"
label="序号"
width="50"
> >
</el-table-column> <el-table-column width="80" type="index" label="序号" align="center"></el-table-column>
<el-table-column <el-table-column width="360" label="巡检时间" prop="imageTime" align="center"></el-table-column>
label="巡检时间" <el-table-column width="120" label="巡检目标" prop="type2" align="center"></el-table-column>
prop="imageTime"> <el-table-column width="480" label="目标位置" prop="position" align="center"></el-table-column>
</el-table-column> <el-table-column width="120" label="目标状态" prop="status" align="center"></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 <el-table-column
width="120"
v-if="isShowCol" v-if="isShowCol"
label="图片路径" label="图片路径"
prop="imagePath"> prop="imagePath"
</el-table-column> align="center"
<el-table-column ></el-table-column>
v-if="isShowCol" <el-table-column width="120" v-if="isShowCol" label="分组ID" prop="groupId" align="center"></el-table-column>
label="分组ID" <el-table-column width="120" v-if="isShowCol" label="显示信息" prop="info" align="center"></el-table-column>
prop="groupId"> <el-table-column width="360" v-if="isShowCol" label="图片设施边框" prop="vector" align="center"></el-table-column>
</el-table-column> <el-table-column fixed="right" label="详情" align="center">
<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"> <template slot-scope="scope">
<el-button <el-button size="mini" @click="showPicture(scope.$index, scope.row)">查看</el-button>
size="mini"
@click="showPicture(scope.$index, scope.row)">查看</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<!-- <el-pagination
<el-pagination
@size-change="handleSizeChange" @size-change="handleSizeChange"
@current-change="handleCurrentChange" @current-change="handleCurrentChange"
:current-page="currentPage" :current-page="currentPage"
:page-sizes="[5, 10, 20, 40]" :page-sizes="[5, 10, 20, 40]"
:page-size="pagesize" :page-size="pagesize"
layout="total, sizes, prev, pager, next, jumper" layout="total, sizes, prev, pager, next, jumper"
:total="tableData.length"> :total="tableData.length"
</el-pagination>--> ></el-pagination>
<!-- 分页 修改 --> <!-- 分页 修改 -->
<el-pagination <!-- <el-pagination
:current-page="pageOption.pageIndex" :current-page="pageOption.pageIndex"
:page-sizes="[5, 10, 20, 40]" :page-sizes="[5, 10, 20, 40]"
:page-size="pageOption.pageSize" :page-size="pageOption.pageSize"
...@@ -146,17 +119,14 @@ ...@@ -146,17 +119,14 @@
:total="pageOption.totalCount" :total="pageOption.totalCount"
@size-change="handleSizeChange" @size-change="handleSizeChange"
@current-change="handleCurrentChange" @current-change="handleCurrentChange"
/> />-->
</div> </div>
<!-- 任务统计 --> <!-- 任务统计 -->
<!-- <div class="task-echarts"> <!-- <div class="task-echarts">
<h3>任务统计</h3> <h3>任务统计</h3>
<div class="echarts-box" id="echarts-box"></div> <div class="echarts-box" id="echarts-box"></div>
</div> --> </div>-->
</div> </div>
<el-dialog <el-dialog
v-el-drag-dialog v-el-drag-dialog
...@@ -165,7 +135,7 @@ ...@@ -165,7 +135,7 @@
custom-class="customWidth" custom-class="customWidth"
> >
<div :style="'height:' + fullHeight + 'px;position: relative;'" ref="mainW"> <div :style="'height:' + fullHeight + 'px;position: relative;'" ref="mainW">
<img :src="bigImgUrl" ref="BGIMG" width="100%" style="height: 100%;" @load=loadBigImg> <img :src="bigImgUrl" ref="BGIMG" width="100%" style="height: 100%;" @load="loadBigImg" />
<div class="dash" :style="customStyle" v-if="showRedBox"></div> <div class="dash" :style="customStyle" v-if="showRedBox"></div>
</div> </div>
</el-dialog> </el-dialog>
...@@ -198,34 +168,37 @@ ...@@ -198,34 +168,37 @@
</div> </div>
</template> </template>
<style lang="less" scope> <style lang="less" scope>
.detail{ .detail {
.box{ .box {
width: calc(100vw - 240px); width: calc(100vw - 240px);
.el-pagination{ .el-pagination {
padding: 15px; padding: 15px;
} }
} }
} }
.dash{ .dash {
position: absolute; position: absolute;
border: 2px #EC292A dashed; border: 2px #ec292a dashed;
} }
</style> </style>
<script> <script>
import axios from 'axios'; 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 } from '../config'; 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";
export default { export default {
name: 'detail', name: "detail",
directives: { elDragDialog }, directives: { elDragDialog },
data() { data() {
return { return {
searchData: [],
tableData: [],
startTime: null,
endTime: null,
pageOption: { pageOption: {
pageIndex: 1, pageIndex: 1,
pageSize: 20, pageSize: 20,
...@@ -233,19 +206,17 @@ export default { ...@@ -233,19 +206,17 @@ export default {
}, },
currentPage: 1, // 初始页 currentPage: 1, // 初始页
pagesize: 10, // 每页的数据 pagesize: 10, // 每页的数据
tableData: [
],
filters: { filters: {
capitalType: '', capitalType: null,
status: null, status: null,
dateTime: [], dateTime: [],
equipment: "",
}, },
loading: false, loading: false,
isShowCol: false, isShowCol: false,
isShowPicture: false, isShowPicture: false,
imgContent: '', imgContent: "",
bigImgUrl: '', bigImgUrl: "",
no: 0, no: 0,
dialogVisible1: false, dialogVisible1: false,
dialogVisible2: false, dialogVisible2: false,
...@@ -254,100 +225,132 @@ export default { ...@@ -254,100 +225,132 @@ export default {
tableIndex: -1, tableIndex: -1,
capitalOptions: [ capitalOptions: [
{ {
label: '路面状况', label: "全部",
value: 1, value: -2,
}, { },
label: '护栏', {
label: "其他",
value: -1,
},
{
label: "道路设施",
value: 0,
},
{
label: "抛洒物",
value: 2, value: 2,
}, },
{ {
label: '龙门架', label: "护栏",
value: 3,
},
{
label: "龙门架",
value: 101, value: 101,
}, { },
label: '矩形标牌', {
label: "矩形标牌",
value: 201, value: 201,
}, { },
label: '圆形标牌', {
label: "圆形标牌",
value: 202, value: 202,
}, { },
label: '三角标牌', {
label: "三角标牌",
value: 203, value: 203,
}, { },
label: '其它形状标牌', {
label: "其它形状标牌",
value: 209, value: 209,
}, { },
label: '可变信息牌（情报板）', {
label: "可变信息牌（情报板）",
value: 301, value: 301,
}, { },
label: 'T型杆', {
label: "T型杆",
value: 401, value: 401,
}, { },
label: 'L型杆', {
label: "L型杆",
value: 402, value: 402,
}, { },
label: 'I型立杆', {
label: "I型立杆",
value: 403, value: 403,
}, { },
label: '枪式摄像机', {
label: "枪式摄像机",
value: 801, value: 801,
}, { },
label: '相机', {
label: "相机",
value: 802, value: 802,
}, { },
label: '补光灯', {
label: "补光灯",
value: 803, value: 803,
}, { },
label: 'RSU天线', {
label: "RSU天线",
value: 804, value: 804,
}, { },
label: '测速雷达', {
label: "测速雷达",
value: 805, value: 805,
}, },
], ],
statusOptions: [ statusOptions: [
{ {
label: '全部', label: "全部",
value: -1, value: -1,
}, },
{ {
label: '正常', label: "正常",
value: 1, value: 1,
}, { },
label: '异常', {
label: "异常",
value: 2, value: 2,
}, { },
label: '新增', {
label: "新增",
value: 3, value: 3,
}, },
], ],
pickerOptions: { pickerOptions: {
shortcuts: [{ shortcuts: [
text: '最近一周', {
text: "最近一周",
onClick(picker) { onClick(picker) {
const end = new Date(); const end = new Date();
const start = new Date(); const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]); picker.$emit("pick", [start, end]);
},
}, },
}, { {
text: '最近一个月', text: "最近一个月",
onClick(picker) { onClick(picker) {
const end = new Date(); const end = new Date();
const start = new Date(); const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]); picker.$emit("pick", [start, end]);
}, },
}, { },
text: '最近三个月', {
text: "最近三个月",
onClick(picker) { onClick(picker) {
const end = new Date(); const end = new Date();
const start = new Date(); const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit('pick', [start, end]); picker.$emit("pick", [start, end]);
}, },
}],
}, },
currentdate: '', ],
},
currentdate: "",
fullHeight: document.documentElement.clientHeight / 1.5, fullHeight: document.documentElement.clientHeight / 1.5,
showRedBox: false, showRedBox: false,
customStyle: { customStyle: {
...@@ -356,49 +359,186 @@ export default { ...@@ -356,49 +359,186 @@ export default {
width: `${this.positionWidth / this.scale}px`, width: `${this.positionWidth / this.scale}px`,
height: `${this.positionHeight / this.hscale}px`, height: `${this.positionHeight / this.hscale}px`,
}, },
positionLeft: '', positionLeft: "",
positionRight: '', positionRight: "",
positionWidth: '', positionWidth: "",
positionHeight: '', positionHeight: "",
scale: 0, // 适应比例 scale: 0, // 适应比例
hscale: 0, hscale: 0,
searchLoading: false, searchLoading: false,
}; };
}, },
mounted() { mounted() {},
},
created() { created() {
let startTime = null; const searchVal = sessionStorage.getItem("resultDetailSearchVal");
let endTime = null;
let equipment = null; var that = this;
if (this.$route.params.startTime) { if (this.$route.params.startTime) {
startTime = this.$route.params.startTime; that.startTime = this.$route.params.startTime;
} }
if (this.$route.params.endTime) { if (this.$route.params.endTime) {
endTime = this.$route.params.endTime; that.endTime = this.$route.params.endTime;
} }
if (this.$route.params.equipment) { 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')]; if (this.startTime != null && this.endTime != null) {
this.getImageGroupsByCon(startTime, endTime, equipment); this.filters.dateTime = [
moment(this.startTime).format("YYYY-MM-DD HH:mm:ss"),
moment(this.endTime).format("YYYY-MM-DD HH:mm:ss"),
];
} else { } else {
const searchVal = sessionStorage.getItem('resultDetailSearchVal');
if (searchVal) { if (searchVal) {
this.filters = JSON.parse(searchVal); this.filters = JSON.parse(searchVal);
} else { } else {
this.filters.status = 2; this.filters.status = -1;
} }
this.getImageGroups();
} }
if (this.filters.status == null) {
this.filters.status = -1;
}
if (this.filters.capitalType == null) {
this.filters.capitalType = -2;
}
this.getImageFeatures();
}, },
methods: { 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;
var that = this;
axios
.post(`${address}getImageFeaturesByGroup`, {
startTimeMill: that.startTime,
endTimeMill: that.endTime,
equipment: that.filters.equipment,
status: that.filters.status,
})
.then((response) => {
that.searchLoading = false;
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 (
(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;
that.getTableData();
} else {
that.tableData = [];
}
} else {
that.tableData = [];
}
})
.catch((error) => {
console.log(error);
});
},
getTableData() {
var tmpTable = [];
let ct = this.filters.capitalType;
let 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() { loadBigImg() {
// console.log('---'); // console.log('---');
this.scale = this.$refs.BGIMG.naturalWidth / this.$refs.mainW.offsetWidth; 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.customStyle = { this.customStyle = {
top: `${this.positionRight / this.hscale}px`, top: `${this.positionRight / this.hscale}px`,
...@@ -408,16 +548,21 @@ export default { ...@@ -408,16 +548,21 @@ export default {
}; };
}, },
getImageGroupsByCon(startTime, endTime, equipment) { getImageGroupsByCon(startTime, endTime, equipment) {
axios.post(`${address}getImageGroupsByCon`, { axios
.post(`${address}getImageGroupsByCon`, {
startTimeMill: startTime, startTimeMill: startTime,
endTimeMill: endTime, endTimeMill: endTime,
equipment, equipment,
}).then((response) => { })
.then((response) => {
if (response.data.code === 200) { if (response.data.code === 200) {
if (response.data.data) { if (response.data.data) {
response.data.data.forEach((val) => { response.data.data.forEach((val) => {
val.status = val.status == 1 ? '正常' : (val.status == 2 ? '异常' : '新增'); val.status =
val.imageTime = moment(parseInt(val.imageTime)).format('YYYY-MM-DD HH:mm:ss'); val.status == 1 ? "正常" : val.status == 2 ? "异常" : "新增";
val.imageTime = moment(parseInt(val.imageTime)).format(
"YYYY-MM-DD HH:mm:ss"
);
this.capitalOptions.forEach((item) => { this.capitalOptions.forEach((item) => {
if (item.value == val.type2) { if (item.value == val.type2) {
val.type2 = item.label; val.type2 = item.label;
...@@ -437,28 +582,40 @@ export default { ...@@ -437,28 +582,40 @@ export default {
}); });
}, },
getImageGroups() { getImageGroups() {
sessionStorage.setItem('resultDetailSearchVal', JSON.stringify(this.filters)); sessionStorage.setItem(
"resultDetailSearchVal",
JSON.stringify(this.filters)
);
if (this.filters.dateTime.length == 0) { 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[0] = `${moment(
this.filters.dateTime[1] = `${moment((new Date()).setTime((new Date()).getTime() - 3600 * 1000 * 24)).format('YYYY-MM-DD')} 23:59:59`; 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; this.searchLoading = true;
axios.post(`${address}getImageGroups`, { axios
.post(`${address}getImageGroups`, {
beginTime: this.filters.dateTime[0], beginTime: this.filters.dateTime[0],
endTime: this.filters.dateTime[1], endTime: this.filters.dateTime[1],
capitalType: this.filters.capitalType, capitalType: this.filters.capitalType,
status: this.filters.status > 0 ? this.filters.status : null, status: this.filters.status > 0 ? this.filters.status : null,
pageIndex: this.pageOption.pageIndex, pageIndex: this.pageOption.pageIndex,
pageSize: this.pageOption.pageSize, pageSize: this.pageOption.pageSize,
}).then((response) => { })
.then((response) => {
this.searchLoading = false; this.searchLoading = false;
if (response.data.code === 200) { if (response.data.code === 200) {
if (response.data.data) { if (response.data.data) {
this.tableData = response.data.data.list; this.tableData = response.data.data.list;
this.pageOption.totalCount = response.data.data.total; this.pageOption.totalCount = response.data.data.total;
this.tableData.forEach((val) => { this.tableData.forEach((val) => {
val.status = val.status == 1 ? '正常' : (val.status == 2 ? '异常' : '新增'); val.status =
val.imageTime = moment(parseInt(val.imageTime)).format('YYYY-MM-DD HH:mm:ss'); val.status == 1 ? "正常" : val.status == 2 ? "异常" : "新增";
val.imageTime = moment(parseInt(val.imageTime)).format(
"YYYY-MM-DD HH:mm:ss"
);
this.capitalOptions.forEach((item) => { this.capitalOptions.forEach((item) => {
if (item.value == val.type2) { if (item.value == val.type2) {
val.type2 = item.label; val.type2 = item.label;
...@@ -480,7 +637,7 @@ export default { ...@@ -480,7 +637,7 @@ export default {
}, },
getCurrentDate() { getCurrentDate() {
const date = new Date(); const date = new Date();
const seperator1 = '-'; const seperator1 = "-";
const year = date.getFullYear(); const year = date.getFullYear();
let month = date.getMonth() + 1; let month = date.getMonth() + 1;
let strDate = date.getDate(); let strDate = date.getDate();
...@@ -496,81 +653,16 @@ export default { ...@@ -496,81 +653,16 @@ export default {
// 初始页currentPage、初始每页数据数pagesize和数据data // 初始页currentPage、初始每页数据数pagesize和数据data
handleSizeChange(size) { handleSizeChange(size) {
this.pageOption.pageSize = size; this.pagesize = size;
// this.pageOption.pageSize = size;
console.log(this.pagesize); // 每页下拉显示数据 console.log(this.pagesize); // 每页下拉显示数据
this.getImageGroups(); // this.getImageGroups();
}, },
handleCurrentChange(currentPage) { handleCurrentChange(currentPage) {
this.pageOption.pageIndex = currentPage; this.currentPage = currentPage;
// this.pageOption.pageIndex = currentPage;
console.log(this.currentPage); // 点击第几页 console.log(this.currentPage); // 点击第几页
this.getImageGroups(); // this.getImageGroups();
},
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 {
}
})
.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) { isInArray(arr, value) {
for (let i = 0; i < arr.length; i++) { for (let i = 0; i < arr.length; i++) {
...@@ -583,10 +675,11 @@ export default { ...@@ -583,10 +675,11 @@ export default {
showDialog2() { showDialog2() {
this.dialogVisible1 = false; this.dialogVisible1 = false;
this.dialogVisible2 = true; this.dialogVisible2 = true;
A;
}, },
showPicture(index, row) { showPicture(index, row) {
this.imgContent = `${row.info}|${row.status}|${row.position}`; 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); const vectorData = JSON.parse(row.vector);
if (vectorData && vectorData.location) { if (vectorData && vectorData.location) {
const point = vectorData.location; const point = vectorData.location;
...@@ -605,7 +698,7 @@ export default { ...@@ -605,7 +698,7 @@ export default {
} }
this.showRedBox = true; this.showRedBox = true;
this.isShowPicture = true; this.isShowPicture = true;
if (row.status == '异常') { if (row.status == "异常") {
this.dialogVisible1 = true; this.dialogVisible1 = true;
this.groupId = row.groupId; this.groupId = row.groupId;
this.tableIndex = index; this.tableIndex = index;
...@@ -614,18 +707,17 @@ export default { ...@@ -614,18 +707,17 @@ export default {
updatePicStatus() { updatePicStatus() {
this.dialogVisible1 = false; this.dialogVisible1 = false;
this.dialogVisible2 = false; this.dialogVisible2 = false;
this.tableData[this.tableIndex].status = '正常'; this.tableData[this.tableIndex].status = "正常";
axios.post(`${address}updateImageStatus`, { axios
.post(`${address}updateImageStatus`, {
id: this.groupId, id: this.groupId,
}).then((response) => { })
.then((response) => {
if (response.data.code === 200) { if (response.data.code === 200) {
if (response.data.data) { if (response.data.data) {
} else { } else {
} }
} else { } else {
} }
}) })
.catch((error) => { .catch((error) => {
...@@ -638,18 +730,32 @@ export default { ...@@ -638,18 +730,32 @@ export default {
}); });
require.ensure([], () => { require.ensure([], () => {
// tHeader为存放excel表头标题的数组 // tHeader为存放excel表头标题的数组
const tHeader = ['序号', '巡检时间', '巡检目标', '目标位置', '目标状态']; const tHeader = [
"序号",
"巡检时间",
"巡检目标",
"目标位置",
"目标状态",
];
// filterVal为tHeader标题对应的键值 // filterVal为tHeader标题对应的键值
const filterVal = ['no', 'imageTime', 'type2', 'position', 'status']; const filterVal = ["no", "imageTime", "type2", "position", "status"];
// list为要转化为excel文件的数据，是一个数组 // list为要转化为excel文件的数据，是一个数组
const list = this.tableData; const list = this.tableData;
// 用map方法处理list数据 // 用map方法处理list数据
const data = list.map(v => filterVal.map(j => v[j])); const data = list.map((v) => filterVal.map((j) => v[j]));
// 自定义excel文件名 // 自定义excel文件名
const fileName = '巡检结果明细'; const fileName = "巡检结果明细";
export_json_to_excel(tHeader, data, fileName); export_json_to_excel(tHeader, data, fileName);
}); });
}, },
selectStatus(status) {
this.filters.status = status;
this.getTableData();
},
selectCapitalType(capitalType) {
this.filters.capitalType = capitalType;
this.getTableData();
},
}, },
}; };
</script> </script>
src/views/Task.vue
View file @ e9a63dfc
...@@ -157,7 +157,7 @@ import axios from 'axios'; ...@@ -157,7 +157,7 @@ import axios from 'axios';
import gcoord from 'gcoord'; import gcoord from 'gcoord';
import moment from 'moment'; import moment from 'moment';
import { Message } from 'element-ui'; import { Message } from 'element-ui';
import { address } from '../config'; import { address, imgAddress } from '../config';
import { export_json_to_excel } from '@/excel/Export2Excel'; import { export_json_to_excel } from '@/excel/Export2Excel';
export default { export default {
...@@ -271,7 +271,7 @@ export default { ...@@ -271,7 +271,7 @@ export default {
this.infos.forEach((item) => { this.infos.forEach((item) => {
if (item.lng == e.point.lng && item.lat == e.point.lat) { if (item.lng == e.point.lng && item.lat == e.point.lat) {
// 根据坐标信息获取图片 // 根据坐标信息获取图片
this.bigImgUrl = `${address this.bigImgUrl = `${imgAddress
}getTrajectImg?channel=${ }getTrajectImg?channel=${
item.channel item.channel
}&equipment=${ }&equipment=${
......
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