位置管理
This commit is contained in:
parent
735d238a49
commit
2b1462e1e6
|
|
@ -3,7 +3,7 @@ import request from '@/utils/request'
|
||||||
// 设备管理->位置管理->查询位置列表
|
// 设备管理->位置管理->查询位置列表
|
||||||
export function locationListAPI(params) {
|
export function locationListAPI(params) {
|
||||||
return request({
|
return request({
|
||||||
url: '/smartCar/device/location/getLocationList',
|
url: '/smartCar/data/location/getLocationList',
|
||||||
method: 'GET',
|
method: 'GET',
|
||||||
params
|
params
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -232,7 +232,7 @@ export default {
|
||||||
// 表格最大高度(像素),默认700px
|
// 表格最大高度(像素),默认700px
|
||||||
tableMaxHeight: {
|
tableMaxHeight: {
|
||||||
type: [Number, String],
|
type: [Number, String],
|
||||||
default: 650,
|
default: 700,
|
||||||
},
|
},
|
||||||
// 是否自动加载数据 默认自动加载
|
// 是否自动加载数据 默认自动加载
|
||||||
autoLoad: {
|
autoLoad: {
|
||||||
|
|
|
||||||
|
|
@ -1,31 +0,0 @@
|
||||||
export const formLabel = [
|
|
||||||
{
|
|
||||||
isShow: true, // 是否展示label
|
|
||||||
f_type: 'sel',
|
|
||||||
f_label: '车辆类型',
|
|
||||||
f_model: 'vehicleType',
|
|
||||||
f_width: '250px',
|
|
||||||
f_selList: [
|
|
||||||
{ label: '油车', value: '油车' },
|
|
||||||
{ label: '货车', value: '货车' },
|
|
||||||
{ label: '客车', value: '客车' },
|
|
||||||
{ label: '小车', value: '小车' },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
isShow: true, // 是否展示label
|
|
||||||
f_type: 'dateTimeRange',
|
|
||||||
f_label: '时间选择',
|
|
||||||
f_model: 'timeRange',
|
|
||||||
f_width: '400px',
|
|
||||||
dateType: ['startTime', 'endTime'],
|
|
||||||
valueFormat: 'yyyy-MM-dd HH:mm',
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
||||||
export const columnsList = [
|
|
||||||
{ t_props: 'imageUrl', t_label: '图像' },
|
|
||||||
{ t_props: 'location', t_label: '位置' },
|
|
||||||
{ t_props: 'detectTime', t_label: '检测时间' },
|
|
||||||
{ t_props: 'vehicleType', t_label: '车辆类型' },
|
|
||||||
]
|
|
||||||
|
|
@ -1,6 +1,33 @@
|
||||||
export const formLabel = []
|
export const formLabel = [
|
||||||
|
{
|
||||||
|
isShow: false, // 是否展示label
|
||||||
|
f_type: 'dateTimeRange',
|
||||||
|
f_label: '时间选择',
|
||||||
|
f_model: 'timeRange',
|
||||||
|
f_width: '400px',
|
||||||
|
dateType: ['startTime', 'endTime'],
|
||||||
|
valueFormat: 'yyyy-MM-dd HH:mm',
|
||||||
|
// 默认时间设置,可以是数组 [startTime, endTime] 或函数返回数组
|
||||||
|
// 函数形式:() => [startTime, endTime],支持动态计算
|
||||||
|
defaultValue: () => {
|
||||||
|
// 默认设置为当天00:00到23:59
|
||||||
|
const now = new Date()
|
||||||
|
const todayStart = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0)
|
||||||
|
const todayEnd = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59)
|
||||||
|
const formatTime = (date) => {
|
||||||
|
const year = date.getFullYear()
|
||||||
|
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||||||
|
const day = String(date.getDate()).padStart(2, '0')
|
||||||
|
const hours = String(date.getHours()).padStart(2, '0')
|
||||||
|
const minutes = String(date.getMinutes()).padStart(2, '0')
|
||||||
|
return `${year}-${month}-${day} ${hours}:${minutes}`
|
||||||
|
}
|
||||||
|
return [formatTime(todayStart), formatTime(todayEnd)]
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
export const columnsList = [
|
export const columnsList = [
|
||||||
{ t_props: 'time', t_label: '时间' },
|
{ t_props: 'locationTime', t_label: '时间' },
|
||||||
{ t_props: 'location', t_label: '地点' },
|
{ t_props: 'locationName', t_label: '地点' },
|
||||||
]
|
]
|
||||||
|
|
@ -1,25 +1,11 @@
|
||||||
<template>
|
<template>
|
||||||
<!-- 设备管理-位置管理 -->
|
<!-- 设备管理-位置管理 -->
|
||||||
<el-card class="location-container">
|
<el-card class="location-container">
|
||||||
<!-- 顶部过滤器 -->
|
|
||||||
<el-card v-show="showSearch" class="search-card">
|
|
||||||
<el-form :inline="true" ref="queryFormRef" :model="queryParams" label-width="auto">
|
|
||||||
<el-form-item>
|
|
||||||
<el-date-picker v-model="timeRange" type="datetimerange" range-separator=" ~ "
|
|
||||||
start-placeholder="开始时间" end-placeholder="结束时间" value-format="yyyy-MM-dd HH:mm"
|
|
||||||
format="yyyy-MM-dd HH:mm" style="width: 400px" @change="handleTimeRangeChange" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button class="query-btn" @click="handleQuery">查询</el-button>
|
|
||||||
<el-button class="reset-btn" @click="handleReset">重置</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</el-card>
|
|
||||||
|
|
||||||
<!-- 数据列表 -->
|
<!-- 数据列表 -->
|
||||||
<div class="table-container">
|
<div class="table-container">
|
||||||
<TableModel :formLabel="[]" :showOperation="false" :showRightTools="false" ref="locationTableRef"
|
<TableModel :formLabel="formLabel" :showOperation="false" :showRightTools="false" ref="locationTableRef"
|
||||||
:columnsList="columnsList" :request-api="wrappedAPI" :handleColWidth="250" :showSearch="false">
|
:columnsList="columnsList" :request-api="locationListAPI" :handleColWidth="250" :showSearch="true">
|
||||||
<template slot="tableTitle">
|
<template slot="tableTitle">
|
||||||
<h3>数据列表</h3>
|
<h3>数据列表</h3>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -30,7 +16,7 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import TableModel from '@/components/TableModel2'
|
import TableModel from '@/components/TableModel2'
|
||||||
import { columnsList } from './config'
|
import { columnsList, formLabel } from './config'
|
||||||
import { locationListAPI } from '@/api/device/location'
|
import { locationListAPI } from '@/api/device/location'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
|
@ -41,135 +27,17 @@ export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
showSearch: true,
|
showSearch: true,
|
||||||
|
formLabel,
|
||||||
columnsList,
|
columnsList,
|
||||||
wrappedAPI: null,
|
locationListAPI
|
||||||
timeRange: null,
|
|
||||||
queryParams: {
|
|
||||||
pageNum: 1,
|
|
||||||
pageSize: 10,
|
|
||||||
startTime: '',
|
|
||||||
endTime: '',
|
|
||||||
},
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
created() {
|
|
||||||
// 包装API函数以支持测试数据
|
|
||||||
this.wrappedAPI = this.wrapAPIWithTestData(locationListAPI)
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
/** 包装API函数,支持测试数据 */
|
|
||||||
wrapAPIWithTestData(apiFunc) {
|
|
||||||
return async (params) => {
|
|
||||||
try {
|
|
||||||
// 尝试调用真实API
|
|
||||||
const res = await apiFunc(params)
|
|
||||||
if (res.code === 200) {
|
|
||||||
return res
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.log('API调用失败,使用测试数据:', error)
|
|
||||||
}
|
|
||||||
|
|
||||||
// 使用测试数据
|
/* 搜索操作 */
|
||||||
const allTestData = this.getTestData()
|
|
||||||
|
|
||||||
// 应用过滤条件
|
|
||||||
let filteredData = allTestData
|
|
||||||
if (params.startTime) {
|
|
||||||
filteredData = filteredData.filter(item => {
|
|
||||||
const itemTime = new Date(item.time.replace(/\//g, '-'))
|
|
||||||
const startTime = new Date(params.startTime.replace(' ', 'T'))
|
|
||||||
return itemTime >= startTime
|
|
||||||
})
|
|
||||||
}
|
|
||||||
if (params.endTime) {
|
|
||||||
filteredData = filteredData.filter(item => {
|
|
||||||
const itemTime = new Date(item.time.replace(/\//g, '-'))
|
|
||||||
const endTime = new Date(params.endTime.replace(' ', 'T'))
|
|
||||||
return itemTime <= endTime
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 分页处理
|
|
||||||
const pageNum = params.pageNum || 1
|
|
||||||
const pageSize = params.pageSize || 10
|
|
||||||
const start = (pageNum - 1) * pageSize
|
|
||||||
const end = start + pageSize
|
|
||||||
|
|
||||||
return {
|
|
||||||
code: 200,
|
|
||||||
rows: filteredData.slice(start, end),
|
|
||||||
total: filteredData.length,
|
|
||||||
msg: 'success'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
/** 获取测试数据 */
|
|
||||||
getTestData() {
|
|
||||||
const locations = ['合肥市蜀山区xxxxxx', '合肥市包河区xxxxxx', '合肥市庐阳区xxxxxx']
|
|
||||||
const testData = []
|
|
||||||
|
|
||||||
// 生成1000条测试数据
|
|
||||||
for (let i = 0; i < 1000; i++) {
|
|
||||||
const date = new Date()
|
|
||||||
date.setDate(date.getDate() - Math.floor(i / 50))
|
|
||||||
date.setHours(8 + (i % 12), (i % 60), 0, 0)
|
|
||||||
const time = this.formatDateTime(date)
|
|
||||||
|
|
||||||
testData.push({
|
|
||||||
serialNo: i + 1,
|
|
||||||
time: time,
|
|
||||||
location: locations[i % locations.length],
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
return testData
|
|
||||||
},
|
|
||||||
|
|
||||||
/** 格式化日期时间 */
|
|
||||||
formatDateTime(date) {
|
|
||||||
const year = date.getFullYear()
|
|
||||||
const month = String(date.getMonth() + 1).padStart(2, '0')
|
|
||||||
const day = String(date.getDate()).padStart(2, '0')
|
|
||||||
const hours = String(date.getHours()).padStart(2, '0')
|
|
||||||
const minutes = String(date.getMinutes()).padStart(2, '0')
|
|
||||||
return `${year}/${month}/${day} ${hours}:${minutes}`
|
|
||||||
},
|
|
||||||
|
|
||||||
/** 查询操作 */
|
|
||||||
handleQuery() {
|
handleQuery() {
|
||||||
if (this.$refs.locationTableRef) {
|
this.$refs.locationTableRef.getTableList()
|
||||||
// 合并查询参数
|
|
||||||
Object.assign(this.$refs.locationTableRef.queryParams, this.queryParams)
|
|
||||||
this.$refs.locationTableRef.queryParams.pageNum = 1
|
|
||||||
this.$refs.locationTableRef.getTableList()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
/** 重置操作 */
|
|
||||||
handleReset() {
|
|
||||||
this.queryParams.startTime = ''
|
|
||||||
this.queryParams.endTime = ''
|
|
||||||
this.timeRange = null
|
|
||||||
if (this.$refs.locationTableRef) {
|
|
||||||
Object.assign(this.$refs.locationTableRef.queryParams, this.queryParams)
|
|
||||||
this.$refs.locationTableRef.queryParams.pageNum = 1
|
|
||||||
this.$refs.locationTableRef.getTableList()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
/** 时间范围变化 */
|
|
||||||
handleTimeRangeChange(value) {
|
|
||||||
if (value && value.length === 2) {
|
|
||||||
this.queryParams.startTime = value[0]
|
|
||||||
this.queryParams.endTime = value[1]
|
|
||||||
} else {
|
|
||||||
this.queryParams.startTime = ''
|
|
||||||
this.queryParams.endTime = ''
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
@ -225,7 +93,7 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-container {
|
.table-container {
|
||||||
height: calc(100vh - 200px);
|
height: calc(100vh - 100px);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue