|
|
@ -41,8 +41,7 @@
|
|
|
|
<span style="color: #fff;"> 起止时间:</span>
|
|
|
|
<span style="color: #fff;"> 起止时间:</span>
|
|
|
|
<div style="display: inline-block;margin-right: 12px;">
|
|
|
|
<div style="display: inline-block;margin-right: 12px;">
|
|
|
|
<el-date-picker v-model="date" end-placeholder="结束日期" format="yyyy-MM-dd hh:ss:mm"
|
|
|
|
<el-date-picker v-model="date" end-placeholder="结束日期" format="yyyy-MM-dd hh:ss:mm"
|
|
|
|
range-separator="至" start-placeholder="开始日期" type="datetimerange"
|
|
|
|
range-separator="至" start-placeholder="开始日期" type="datetimerange" value-format="timestamp">
|
|
|
|
value-format="timestamp">
|
|
|
|
|
|
|
|
</el-date-picker>
|
|
|
|
</el-date-picker>
|
|
|
|
<!-- - -->
|
|
|
|
<!-- - -->
|
|
|
|
<!-- <el-date-picker-->
|
|
|
|
<!-- <el-date-picker-->
|
|
|
@ -60,14 +59,14 @@
|
|
|
|
</el-col>
|
|
|
|
</el-col>
|
|
|
|
</el-row>
|
|
|
|
</el-row>
|
|
|
|
<el-table v-if="show" :cell-style="setStyle" :data="tableData"
|
|
|
|
<el-table v-if="show" :cell-style="setStyle" :data="tableData"
|
|
|
|
:header-cell-style="{ textAlign: 'center', backgroundColor: '#0a457d' }"
|
|
|
|
:header-cell-style="{ textAlign: 'center', backgroundColor: '#0a457d' }"
|
|
|
|
style="width: 100%;margin-top: 12px;">
|
|
|
|
style="width: 100%;margin-top: 12px;">
|
|
|
|
<el-table-column v-for="i in deviceDataColumns" :key="i.columnName" :label="i.columnName"
|
|
|
|
<el-table-column v-for="i in deviceDataColumns" :key="i.columnName" :label="i.columnName"
|
|
|
|
:prop="i.columnKey">
|
|
|
|
:prop="i.columnKey">
|
|
|
|
<template slot-scope="scope">
|
|
|
|
<template slot-scope="scope">
|
|
|
|
<el-image v-if="scope.row[i.columnKey].toString().includes('http')"
|
|
|
|
<el-image v-if="scope.row[i.columnKey].toString().includes('http')"
|
|
|
|
:preview-src-list="[scope.row[i.columnKey]]" :src="scope.row[i.columnKey]"
|
|
|
|
:preview-src-list="[scope.row[i.columnKey]]" :src="scope.row[i.columnKey]"
|
|
|
|
style="width: 100px; height: 100px">
|
|
|
|
style="width: 100px; height: 100px">
|
|
|
|
</el-image>
|
|
|
|
</el-image>
|
|
|
|
<span v-else>{{ scope.row[i.columnKey] }}</span>
|
|
|
|
<span v-else>{{ scope.row[i.columnKey] }}</span>
|
|
|
|
|
|
|
|
|
|
|
@ -75,7 +74,7 @@
|
|
|
|
</el-table-column>
|
|
|
|
</el-table-column>
|
|
|
|
</el-table>
|
|
|
|
</el-table>
|
|
|
|
<el-pagination v-show="!isMap" :currentPage="currentPage" :pageSize="10" :total="total" background
|
|
|
|
<el-pagination v-show="!isMap" :currentPage="currentPage" :pageSize="10" :total="total" background
|
|
|
|
layout="prev, pager, next" @current-change="currentChange">
|
|
|
|
layout="prev, pager, next" @current-change="currentChange">
|
|
|
|
</el-pagination>
|
|
|
|
</el-pagination>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
@ -105,28 +104,26 @@
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div style="text-align: center;margin: 8px 0;">
|
|
|
|
<div style="text-align: center;margin: 8px 0;">
|
|
|
|
<el-button v-if="isMap" disabled type="primary"
|
|
|
|
<el-button type="primary" v-if="isMap" @click="continueMap"
|
|
|
|
@click="continueMap">已加载: {{ (mapOffset + 1) * 100 }} 总计: {{ mapTotal }}
|
|
|
|
disabled>已加载: {{(mapOffset + 1) * 100}} 总计: {{mapTotal}}</el-button>
|
|
|
|
</el-button>
|
|
|
|
<el-button type="primary" v-if="isMap" @click="continueMap"
|
|
|
|
<el-button v-if="isMap" :disabled="mapTotal < (mapOffset + 1) * 100" type="primary"
|
|
|
|
:disabled="mapTotal < (mapOffset + 1) * 100">继续加载</el-button>
|
|
|
|
@click="continueMap">继续加载
|
|
|
|
|
|
|
|
</el-button>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<el-table v-show="isMap" :data="mapData" :max-height="40 * vh" highlight-current-row style="width: 100%"
|
|
|
|
<el-table v-show="isMap" :data="mapData" :max-height="40 * vh" highlight-current-row style="width: 100%"
|
|
|
|
@current-change="mapTableChange">
|
|
|
|
@current-change="mapTableChange">
|
|
|
|
<el-table-column type="index" width="50">
|
|
|
|
<el-table-column type="index" width="50">
|
|
|
|
</el-table-column>
|
|
|
|
</el-table-column>
|
|
|
|
<el-table-column label="日期" property="date" width="120">
|
|
|
|
<el-table-column label="日期" property="date" width="120">
|
|
|
|
<template slot-scope="scope">
|
|
|
|
<template slot-scope="scope">
|
|
|
|
{{
|
|
|
|
{{
|
|
|
|
parseTime(scope.row.ts, '{y}-{m}-{d}')
|
|
|
|
parseTime(scope.row.ts, '{y}-{m}-{d}')
|
|
|
|
}}
|
|
|
|
}}
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
</el-table-column>
|
|
|
|
</el-table-column>
|
|
|
|
<el-table-column label="时间" property="time" width="120">
|
|
|
|
<el-table-column label="时间" property="time" width="120">
|
|
|
|
<template slot-scope="scope">
|
|
|
|
<template slot-scope="scope">
|
|
|
|
{{
|
|
|
|
{{
|
|
|
|
parseTime(scope.row.ts, '{h}:{i}:{s}')
|
|
|
|
parseTime(scope.row.ts, '{h}:{i}:{s}')
|
|
|
|
}}
|
|
|
|
}}
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
</el-table-column>
|
|
|
|
</el-table-column>
|
|
|
@ -216,8 +213,8 @@ export default {
|
|
|
|
console.log(polyline1);
|
|
|
|
console.log(polyline1);
|
|
|
|
polyline1 = new AMap.Polyline({
|
|
|
|
polyline1 = new AMap.Polyline({
|
|
|
|
path: e,
|
|
|
|
path: e,
|
|
|
|
strokeColor: '#000',
|
|
|
|
strokeColor:'#000',
|
|
|
|
strokeWeight: 10,
|
|
|
|
strokeWeight:10,
|
|
|
|
borderWeight: 2, // 线条宽度,默认为 1
|
|
|
|
borderWeight: 2, // 线条宽度,默认为 1
|
|
|
|
});
|
|
|
|
});
|
|
|
|
map.add(polyline1);
|
|
|
|
map.add(polyline1);
|
|
|
@ -251,7 +248,7 @@ export default {
|
|
|
|
endMarkerhs = e.target.hS
|
|
|
|
endMarkerhs = e.target.hS
|
|
|
|
let hs1 = startMarkerhs
|
|
|
|
let hs1 = startMarkerhs
|
|
|
|
let hs2 = endMarkerhs
|
|
|
|
let hs2 = endMarkerhs
|
|
|
|
if (startMarkerhs > endMarkerhs) {
|
|
|
|
if(startMarkerhs>endMarkerhs){
|
|
|
|
hs1 = endMarkerhs
|
|
|
|
hs1 = endMarkerhs
|
|
|
|
hs2 = startMarkerhs
|
|
|
|
hs2 = startMarkerhs
|
|
|
|
}
|
|
|
|
}
|
|
|
@ -323,13 +320,13 @@ export default {
|
|
|
|
},
|
|
|
|
},
|
|
|
|
setStyle(e) {
|
|
|
|
setStyle(e) {
|
|
|
|
if (e.rowIndex % 2 === 0) {
|
|
|
|
if (e.rowIndex % 2 === 0) {
|
|
|
|
return {textAlign: 'center', backgroundColor: '#08406f', color: '#05aaba'}
|
|
|
|
return { textAlign: 'center', backgroundColor: '#08406f', color: '#05aaba' }
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
return {textAlign: 'center', backgroundColor: '#063468', color: '#05aaba'}
|
|
|
|
return { textAlign: 'center', backgroundColor: '#063468', color: '#05aaba' }
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
async setDeviceInfo() {
|
|
|
|
async setDeviceInfo() {
|
|
|
|
const {data} = await getDeviceInfo(this.deviceId)
|
|
|
|
const { data } = await getDeviceInfo(this.deviceId)
|
|
|
|
this.topData = data || {}
|
|
|
|
this.topData = data || {}
|
|
|
|
if (this.topData.gpsFlag !== '1') {
|
|
|
|
if (this.topData.gpsFlag !== '1') {
|
|
|
|
this.date = null
|
|
|
|
this.date = null
|
|
|
@ -342,7 +339,7 @@ export default {
|
|
|
|
this.show = false
|
|
|
|
this.show = false
|
|
|
|
this.mapOffset = 0
|
|
|
|
this.mapOffset = 0
|
|
|
|
}
|
|
|
|
}
|
|
|
|
const {data} = await getHistoryData({
|
|
|
|
const { data } = await getHistoryData({
|
|
|
|
"sceneId": this.$store.getters.sceneId,
|
|
|
|
"sceneId": this.$store.getters.sceneId,
|
|
|
|
"deviceId": this.deviceId,
|
|
|
|
"deviceId": this.deviceId,
|
|
|
|
deviceModeId: this.deviceModeId,
|
|
|
|
deviceModeId: this.deviceModeId,
|
|
|
@ -351,13 +348,11 @@ export default {
|
|
|
|
startTime: this.date?.[0],
|
|
|
|
startTime: this.date?.[0],
|
|
|
|
endTime: this.date?.[1],
|
|
|
|
endTime: this.date?.[1],
|
|
|
|
})
|
|
|
|
})
|
|
|
|
console.log(data)
|
|
|
|
|
|
|
|
let deviceDataColumns = data.deviceDataColumns
|
|
|
|
|
|
|
|
let dataList = data.historyData?.dataList || []
|
|
|
|
let dataList = data.historyData?.dataList || []
|
|
|
|
if (deviceDataColumns.filter(e => e.columnKey === 'longitude' || e.columnKey === '"latitude"').length >0) {
|
|
|
|
if (dataList.filter(e => (Object.keys(e).includes('longitude') || Object.keys(e).includes('longitude'))).length > 0) {
|
|
|
|
this.isMap = true
|
|
|
|
|
|
|
|
this.mapTotal = data.historyData.count
|
|
|
|
this.mapTotal = data.historyData.count
|
|
|
|
let mapData = dataList.filter(e => (Object.keys(e).includes('longitude') || Object.keys(e).includes('"latitude"'))).map(e => {
|
|
|
|
this.isMap = true
|
|
|
|
|
|
|
|
let mapData = dataList.filter(e => (Object.keys(e).includes('longitude') || Object.keys(e).includes('longitude'))).map(e => {
|
|
|
|
let [lng, lat] = wgs84togcj02(e.longitude, e.latitude)
|
|
|
|
let [lng, lat] = wgs84togcj02(e.longitude, e.latitude)
|
|
|
|
return {
|
|
|
|
return {
|
|
|
|
...e,
|
|
|
|
...e,
|
|
|
@ -385,7 +380,7 @@ export default {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
async setLinkDevices() {
|
|
|
|
async setLinkDevices() {
|
|
|
|
const {data} = await getLinkDevices(this.deviceId)
|
|
|
|
const { data } = await getLinkDevices(this.deviceId)
|
|
|
|
this.bottomData = data
|
|
|
|
this.bottomData = data
|
|
|
|
},
|
|
|
|
},
|
|
|
|
mapTableChange(e) {
|
|
|
|
mapTableChange(e) {
|
|
|
@ -448,46 +443,47 @@ export default {
|
|
|
|
background-color: #FFF0 !important;
|
|
|
|
background-color: #FFF0 !important;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/deep/ .el-table th.el-table__cell.is-leaf, {
|
|
|
|
/deep/ .el-table th.el-table__cell.is-leaf,
|
|
|
|
border-color: #0000;
|
|
|
|
{
|
|
|
|
}
|
|
|
|
border-color: #0000;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/deep/ .el-table::before,
|
|
|
|
/deep/ .el-table::before,
|
|
|
|
.el-table--group::after,
|
|
|
|
.el-table--group::after,
|
|
|
|
.el-table--border::after {
|
|
|
|
.el-table--border::after {
|
|
|
|
background-color: #0000;
|
|
|
|
background-color: #0000;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/deep/ .el-table .el-table__header-wrapper th,
|
|
|
|
/deep/ .el-table .el-table__header-wrapper th,
|
|
|
|
.el-table .el-table__fixed-header-wrapper th {
|
|
|
|
.el-table .el-table__fixed-header-wrapper th {
|
|
|
|
background-color: #0000;
|
|
|
|
background-color: #0000;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/deep/ .el-collapse-item__header {
|
|
|
|
/deep/ .el-collapse-item__header {
|
|
|
|
background-color: #0000;
|
|
|
|
background-color: #0000;
|
|
|
|
border-color: #0000;
|
|
|
|
border-color: #0000;
|
|
|
|
height: auto;
|
|
|
|
height: auto;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/deep/ .el-collapse {
|
|
|
|
/deep/ .el-collapse {
|
|
|
|
border-color: #0000;
|
|
|
|
border-color: #0000;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/deep/ .el-table td.el-table__cell {
|
|
|
|
/deep/ .el-table td.el-table__cell {
|
|
|
|
border-color: #0000;
|
|
|
|
border-color: #0000;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/deep/ .el-table .el-table__header-wrapper th {
|
|
|
|
/deep/ .el-table .el-table__header-wrapper th {
|
|
|
|
color: #05ecf3;
|
|
|
|
color: #05ecf3;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/deep/ .el-table .current-row {
|
|
|
|
/deep/ .el-table .current-row {
|
|
|
|
color: #000;
|
|
|
|
color: #000;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/deep/ .el-table .el-table__row:hover {
|
|
|
|
/deep/ .el-table .el-table__row:hover {
|
|
|
|
color: #000;
|
|
|
|
color: #000;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|