|
|
@ -27,32 +27,38 @@
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<div>
|
|
|
|
<div>
|
|
|
|
<div>
|
|
|
|
<div>
|
|
|
|
<!-- <el-row :gutter="24">-->
|
|
|
|
<el-row :gutter="24" style="height: 30px;">
|
|
|
|
<!-- <el-col :span="12">-->
|
|
|
|
<el-col :span="12">
|
|
|
|
<!-- <el-radio-group v-model="radio">-->
|
|
|
|
<!-- <el-radio-group v-model="radio">-->
|
|
|
|
<!-- <el-radio-button label="日统计报表"></el-radio-button>-->
|
|
|
|
<!-- <el-radio-button label="日统计报表"></el-radio-button>-->
|
|
|
|
<!-- <el-radio-button label="月统计报表"></el-radio-button>-->
|
|
|
|
<!-- <el-radio-button label="月统计报表"></el-radio-button>-->
|
|
|
|
<!-- </el-radio-group>-->
|
|
|
|
<!-- </el-radio-group>-->
|
|
|
|
<!-- </el-col>-->
|
|
|
|
</el-col>
|
|
|
|
<!-- <el-col :span="12">-->
|
|
|
|
<el-col :span="12">
|
|
|
|
<!-- <div style="position: absolute; right: 30px;">-->
|
|
|
|
<div style="position: absolute; right: 30px;">
|
|
|
|
<!-- <span style="color: #fff;"> 开始时间:</span>-->
|
|
|
|
<span style="color: #fff;"> 开始时间:</span>
|
|
|
|
<!-- <div style="display: inline-block;width: 200px;margin-right: 12px;">-->
|
|
|
|
<div style="display: inline-block;width: 220px;margin-right: 12px;">
|
|
|
|
<!-- <el-date-picker placeholder="选择日期" style="width: 100%;" type="date"></el-date-picker>-->
|
|
|
|
<el-date-picker
|
|
|
|
<!-- </div>-->
|
|
|
|
v-model="date"
|
|
|
|
<!-- <el-button type="primary">搜索</el-button>-->
|
|
|
|
format="yyyy-MM-dd"
|
|
|
|
<!-- <el-button>重置</el-button>-->
|
|
|
|
placeholder="选择日期"
|
|
|
|
<!-- <el-button>导出</el-button>-->
|
|
|
|
type="date"
|
|
|
|
<!-- </div>-->
|
|
|
|
value-format="timestamp">
|
|
|
|
<!-- </el-col>-->
|
|
|
|
</el-date-picker>
|
|
|
|
<!-- </el-row>-->
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<el-button type="primary" @click="search">搜索</el-button>
|
|
|
|
|
|
|
|
<el-button @click="reset">重置</el-button>
|
|
|
|
|
|
|
|
<!-- <el-button>导出</el-button>-->
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
|
|
</el-row>
|
|
|
|
<el-table v-if="show" :cell-style="setStyle"
|
|
|
|
<el-table v-if="show" :cell-style="setStyle"
|
|
|
|
:data="tableData" :header-cell-style="{ textAlign: 'center',backgroundColor:'#0a457d' }"
|
|
|
|
:data="tableData" :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" :label="i.columnName" :prop="i.columnKey">
|
|
|
|
<el-table-column v-for="i in deviceDataColumns" :label="i.columnName" :prop="i.columnKey">
|
|
|
|
</el-table-column>
|
|
|
|
</el-table-column>
|
|
|
|
</el-table>
|
|
|
|
</el-table>
|
|
|
|
<el-pagination :currentPage="currentPage" :pageSize="5" :total="total" background
|
|
|
|
<el-pagination v-show="!isMap" :currentPage="currentPage" :pageSize="5" :total="total" background
|
|
|
|
layout="prev, pager, next" @current-change="currentChange">
|
|
|
|
layout="prev, pager, next" @current-change="currentChange">
|
|
|
|
</el-pagination>
|
|
|
|
</el-pagination>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
@ -110,7 +116,8 @@ export default {
|
|
|
|
currentPage: 1,
|
|
|
|
currentPage: 1,
|
|
|
|
deviceDataColumns: [],
|
|
|
|
deviceDataColumns: [],
|
|
|
|
show: false,
|
|
|
|
show: false,
|
|
|
|
isMap:false
|
|
|
|
isMap: false,
|
|
|
|
|
|
|
|
date: new Date().getTime()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
async mounted() {
|
|
|
|
async mounted() {
|
|
|
@ -125,6 +132,15 @@ export default {
|
|
|
|
await this.getData()
|
|
|
|
await this.getData()
|
|
|
|
},
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
methods: {
|
|
|
|
|
|
|
|
async search() {
|
|
|
|
|
|
|
|
this.currentPage = 1
|
|
|
|
|
|
|
|
await this.setHistoryData()
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
async reset() {
|
|
|
|
|
|
|
|
this.currentPage = 1
|
|
|
|
|
|
|
|
this.date = new Date().getTime()
|
|
|
|
|
|
|
|
await this.setHistoryData()
|
|
|
|
|
|
|
|
},
|
|
|
|
setPolyline(e) {
|
|
|
|
setPolyline(e) {
|
|
|
|
let polyline = new AMap.Polyline({
|
|
|
|
let polyline = new AMap.Polyline({
|
|
|
|
path: e,
|
|
|
|
path: e,
|
|
|
@ -136,7 +152,10 @@ export default {
|
|
|
|
setMarker(e, i) {
|
|
|
|
setMarker(e, i) {
|
|
|
|
let marker = new AMap.Marker({
|
|
|
|
let marker = new AMap.Marker({
|
|
|
|
position: e, // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]
|
|
|
|
position: e, // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]
|
|
|
|
title: i
|
|
|
|
title: `
|
|
|
|
|
|
|
|
经度:${e[0]}
|
|
|
|
|
|
|
|
纬度:${e[1]}
|
|
|
|
|
|
|
|
时间:${i}`
|
|
|
|
});
|
|
|
|
});
|
|
|
|
map.add(marker);
|
|
|
|
map.add(marker);
|
|
|
|
map.setFitView()
|
|
|
|
map.setFitView()
|
|
|
@ -171,9 +190,10 @@ export default {
|
|
|
|
deviceModeId: this.deviceModeId,
|
|
|
|
deviceModeId: this.deviceModeId,
|
|
|
|
"offset": this.currentPage - 1,
|
|
|
|
"offset": this.currentPage - 1,
|
|
|
|
"limit": 10,
|
|
|
|
"limit": 10,
|
|
|
|
"startTime": 0
|
|
|
|
startTime: this.date,
|
|
|
|
|
|
|
|
endTime: this.date + (1000 * 60 * 60 * 24)
|
|
|
|
})
|
|
|
|
})
|
|
|
|
let dataList = data.historyData.dataList
|
|
|
|
let dataList = data.historyData?.dataList || []
|
|
|
|
if (dataList.filter(e => (Object.keys(e).includes('longitude') || Object.keys(e).includes('longitude'))).length > 0) {
|
|
|
|
if (dataList.filter(e => (Object.keys(e).includes('longitude') || Object.keys(e).includes('longitude'))).length > 0) {
|
|
|
|
this.isMap = true
|
|
|
|
this.isMap = true
|
|
|
|
dataList.filter(e => (Object.keys(e).includes('longitude') || Object.keys(e).includes('longitude'))).forEach(e => {
|
|
|
|
dataList.filter(e => (Object.keys(e).includes('longitude') || Object.keys(e).includes('longitude'))).forEach(e => {
|
|
|
@ -182,16 +202,16 @@ export default {
|
|
|
|
this.setPolyline(dataList.filter(e => (Object.keys(e).includes('longitude') || Object.keys(e).includes('longitude'))).map(e => {
|
|
|
|
this.setPolyline(dataList.filter(e => (Object.keys(e).includes('longitude') || Object.keys(e).includes('longitude'))).map(e => {
|
|
|
|
return [e.longitude, e.latitude]
|
|
|
|
return [e.longitude, e.latitude]
|
|
|
|
}))
|
|
|
|
}))
|
|
|
|
this.tableData = data.historyData.dataList
|
|
|
|
// this.tableData = data.historyData?.dataList
|
|
|
|
this.total = data.historyData.count
|
|
|
|
// this.total = data.historyData?.count
|
|
|
|
this.currentPage = 1
|
|
|
|
// this.currentPage = 1
|
|
|
|
this.deviceDataColumns = data.deviceDataColumns
|
|
|
|
// this.deviceDataColumns = data.deviceDataColumns
|
|
|
|
this.$nextTick(() => {
|
|
|
|
// this.$nextTick(() => {
|
|
|
|
this.show = true
|
|
|
|
// this.show = true
|
|
|
|
})
|
|
|
|
// })
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
this.tableData = data.historyData.dataList
|
|
|
|
this.tableData = data.historyData?.dataList
|
|
|
|
this.total = data.historyData.count
|
|
|
|
this.total = data.historyData?.count
|
|
|
|
this.currentPage = 1
|
|
|
|
this.currentPage = 1
|
|
|
|
this.deviceDataColumns = data.deviceDataColumns
|
|
|
|
this.deviceDataColumns = data.deviceDataColumns
|
|
|
|
this.$nextTick(() => {
|
|
|
|
this.$nextTick(() => {
|
|
|
|