3 changed files with 283 additions and 4 deletions
@ -0,0 +1,39 @@ |
|||
import request from '@/config/axios' |
|||
export interface tdQuery { |
|||
pageNo: number // 页码
|
|||
pageSize: number // 每页数量
|
|||
|
|||
sn?: string // 设备编号
|
|||
|
|||
startTime?: string | number // 开始时间
|
|||
endTime?: string | number // 结束时间
|
|||
} |
|||
/** 历史数据 */ |
|||
export interface tdStruct { |
|||
sn?: string // 设备编号
|
|||
battery?: string // 电量
|
|||
value?: number // 数据
|
|||
longitude?: number // 经度
|
|||
latitude?: number // 纬度
|
|||
ts?: string | number // 更新时间
|
|||
name?: string // 持有人姓名
|
|||
} |
|||
|
|||
/** 原始数据 */ |
|||
export interface tdengineOriginalStruct { |
|||
sn: string // 设备编号
|
|||
payload: string //
|
|||
ts: string | number // 更新时间
|
|||
} |
|||
|
|||
// 历史记录
|
|||
export const tdengineApi = { |
|||
// 获取历史数据
|
|||
getPage: async (params: any) => { |
|||
return await request.get({ url: `/gas/tdengine/page`, params }) |
|||
}, |
|||
// 获取原始数据
|
|||
getOriginalLogPage: async (params: any) => { |
|||
return await request.get({ url: `/gas/tdengine/original-log-page`, params }) |
|||
} |
|||
} |
@ -1,4 +0,0 @@ |
|||
<template>历史数据</template> |
|||
<script setup lang="ts"> |
|||
defineOptions({ name: 'HandDeviceHistory' }) |
|||
</script> |
@ -0,0 +1,244 @@ |
|||
<template> |
|||
<ContentWrap> |
|||
<!-- 搜索工作栏 --> |
|||
<el-form |
|||
class="-mb-15px" |
|||
:model="queryParams" |
|||
ref="queryFormRef" |
|||
:inline="true" |
|||
label-width="120px" |
|||
> |
|||
<!-- <el-form-item label="持有人" prop="name"> |
|||
<el-select |
|||
v-model="queryParams.name" |
|||
placeholder="请选择持有人" |
|||
clearable |
|||
filterable |
|||
@keyup.enter="handleQuery" |
|||
class="!w-240px" |
|||
> |
|||
<el-option |
|||
v-for="item in handDetectorStore.getHandDetectorList" |
|||
:key="item.id" |
|||
:label="item.name" |
|||
:value="String(item.id)" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> --> |
|||
<el-form-item label="设备编号" prop="sn"> |
|||
<el-input |
|||
v-model="queryParams.sn" |
|||
placeholder="请输入设备编号" |
|||
clearable |
|||
@keyup.enter="handleQuery" |
|||
class="!w-240px" |
|||
/> |
|||
</el-form-item> |
|||
<!-- <el-form-item label="报警类型" prop="alarmLevel"> |
|||
<el-select |
|||
v-model="queryParams.alarmLevel" |
|||
placeholder="请选择报警类型" |
|||
clearable |
|||
class="!w-240px" |
|||
> |
|||
<el-option |
|||
v-for="item in handDetectorStore.getAlarmTypes" |
|||
:key="item.level" |
|||
:label="item.name" |
|||
:value="Number(item.level)" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> --> |
|||
<!-- 气体类型 --> |
|||
<!-- <el-form-item label="气体类型" prop="gasType"> |
|||
<el-select |
|||
v-model="queryParams.gasType" |
|||
placeholder="请选择气体类型" |
|||
clearable |
|||
class="!w-240px" |
|||
> |
|||
<el-option |
|||
v-for="item in handDetectorStore.getGasTypes" |
|||
:key="item.id" |
|||
:label="item.chemical" |
|||
:value="String(item.chemical)" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> --> |
|||
|
|||
<el-form-item label="开始时间" prop="startTime"> |
|||
<el-date-picker |
|||
v-model="queryParams.startTime" |
|||
value-format="YYYY-MM-DD HH:mm:ss" |
|||
type="date" |
|||
placeholder="选择开始时间" |
|||
clearable |
|||
class="!w-240px" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="结束时间" prop="endTime"> |
|||
<el-date-picker |
|||
v-model="queryParams.endTime" |
|||
value-format="YYYY-MM-DD 23:59:59" |
|||
type="date" |
|||
placeholder="选择结束时间" |
|||
clearable |
|||
class="!w-240px" |
|||
/> |
|||
</el-form-item> |
|||
<!-- <el-form-item label="状态" prop="status"> |
|||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable class="!w-240px"> |
|||
<el-option |
|||
v-for="item in getIntDictOptions(DICT_TYPE.HAND_DETECTOR_HANDLE_STATUS)" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> --> |
|||
|
|||
<!-- <el-form-item label="创建时间" prop="createTime"> |
|||
<el-date-picker |
|||
v-model="queryParams.createTime" |
|||
value-format="YYYY-MM-DD HH:mm:ss" |
|||
type="daterange" |
|||
start-placeholder="开始日期" |
|||
end-placeholder="结束日期" |
|||
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]" |
|||
class="!w-240px" |
|||
/> |
|||
</el-form-item> --> |
|||
|
|||
<el-form-item> |
|||
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button> |
|||
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</ContentWrap> |
|||
|
|||
<!-- 列表 --> |
|||
<ContentWrap> |
|||
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true"> |
|||
<el-table-column type="selection" width="55" /> |
|||
<el-table-column label="持有人" align="center" prop="name"> |
|||
<!-- <template #default="scope"> |
|||
{{ |
|||
handDetectorStore.getHandDetectorList.find((item) => item.id === scope.row.detectorId) |
|||
?.name |
|||
}} |
|||
</template> --> |
|||
</el-table-column> |
|||
<el-table-column label="设备编号" align="center" prop="sn" /> |
|||
<el-table-column label="经度" align="center" prop="longitude" /> |
|||
<el-table-column label="纬度" align="center" prop="latitude" /> |
|||
<el-table-column label="数值" align="center" prop="value" /> |
|||
|
|||
<!-- <el-table-column label="气体类型" align="center" prop="gasType"></el-table-column> --> |
|||
<!-- <el-table-column label="首报值" align="center" prop="vAlarmFirst" /> |
|||
<el-table-column label="最值" align="center" prop="vAlarmMaximum" /> --> |
|||
<!-- <el-table-column |
|||
label="开始时间" |
|||
align="center" |
|||
prop="tAlarmStart" |
|||
:formatter="dateFormatter" |
|||
width="180px" |
|||
/> |
|||
<el-table-column |
|||
label="结束时间" |
|||
align="center" |
|||
prop="tAlarmEnd" |
|||
:formatter="dateFormatter" |
|||
width="180px" |
|||
/> --> |
|||
|
|||
|
|||
<el-table-column |
|||
label="创建时间" |
|||
align="center" |
|||
prop="ts" |
|||
:formatter="dateFormatter" |
|||
width="180px" |
|||
/> |
|||
</el-table> |
|||
<!-- 分页 --> |
|||
<Pagination |
|||
:total="total" |
|||
v-model:page="queryParams.pageNo" |
|||
v-model:limit="queryParams.pageSize" |
|||
@pagination="getList" |
|||
/> |
|||
</ContentWrap> |
|||
|
|||
<!-- 表单弹窗:添加/修改 --> |
|||
<!-- <HandAlarmForm |
|||
ref="formRef" |
|||
@success="getList" |
|||
:handDetector="handDetectorStore.getHandDetectorList" |
|||
:gasTypes="handDetectorStore.getGasTypes" |
|||
:alarmTypes="handDetectorStore.getAlarmTypes" |
|||
/> --> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { dateFormatter } from '@/utils/formatTime' |
|||
|
|||
import { tdengineApi, tdStruct, tdQuery } from '@/api/gas/tdengine/index' |
|||
// import HandAlarmForm from './HandAlarmForm.vue' |
|||
import { useHandDetectorStore } from '@/store/modules/handDetector' |
|||
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict' |
|||
/** 手持探测器警报 列表 */ |
|||
defineOptions({ name: 'TDStruct' }) |
|||
|
|||
|
|||
const handDetectorStore = useHandDetectorStore() |
|||
const loading = ref(true) // 列表的加载中 |
|||
const list = ref<tdStruct[]>([]) // 列表的数据 |
|||
const total = ref(0) // 列表的总页数 |
|||
const queryParams = reactive<tdQuery>({ |
|||
pageNo: 1, |
|||
pageSize: 10, |
|||
|
|||
sn: undefined, |
|||
|
|||
startTime: undefined, |
|||
endTime: undefined |
|||
}) |
|||
const queryFormRef = ref() // 搜索的表单 |
|||
|
|||
/** 查询列表 */ |
|||
const getList = async () => { |
|||
loading.value = true |
|||
try { |
|||
const data = await tdengineApi.getPage(queryParams) |
|||
list.value = data.list |
|||
total.value = data.total |
|||
} finally { |
|||
loading.value = false |
|||
} |
|||
} |
|||
|
|||
/** 搜索按钮操作 */ |
|||
const handleQuery = () => { |
|||
queryParams.pageNo = 1 |
|||
getList() |
|||
} |
|||
|
|||
/** 重置按钮操作 */ |
|||
const resetQuery = () => { |
|||
queryFormRef.value.resetFields() |
|||
handleQuery() |
|||
} |
|||
|
|||
// const checkedIds = ref<number[]>([]) |
|||
// const handleRowCheckboxChange = (records: tdStruct[]) => { |
|||
// checkedIds.value = records.map((item) => item.id) |
|||
// } |
|||
|
|||
/** 初始化 **/ |
|||
onMounted(() => { |
|||
getList() |
|||
handDetectorStore.getAllHandDetector() |
|||
handDetectorStore.getAllAlarmTypes() |
|||
handDetectorStore.getAllGasTypes() |
|||
}) |
|||
</script> |
Loading…
Reference in new issue