linweidong
/
besure_web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat：历史记录查询-弹框对接接口

Browse Source
main
黄伟杰 1 month ago
parent 7102032c70
commit bc719acbcf
3 changed files with 169 additions and 152 deletions
Show Stats Download Patch File Download Diff File

10
src/api/iot/device/index.ts
Unescape Escape View File

@ -59,6 +59,12 @@ export interface SingleDeviceParams {
deviceId: string | number
}
export interface HistoryRecordParams {
deviceId: string | number
collectionStartTime?: string
collectionEndTime?: string
}
// 物联设备 API
export const DeviceApi = {
// 查询物联设备分页
@ -111,6 +117,10 @@ export const DeviceApi = {
return await request.get({ url: `/iot/device/singleDevice`, params })
},
getHistoryRecord: async (params: HistoryRecordParams) => {
return await request.get({ url: `/iot/device/historyRecord`, params })
},
// ==================== 子表（设备属性） ====================
// 获得设备属性分页

263
src/views/iot/historyData/HistorySingleDeviceDialog.vue
Unescape Escape View File

@ -1,38 +1,34 @@
<template>
<Dialog v-model="dialogVisible" :title="title" width="1100">
<div class="history-device-dialog">
<div class="history-device-dialog__header">
<div class="history-device-dialog__header-main">
<span>设备名称：{{ deviceName || '-' }}</span>
<Dialog v-model="dialogVisible" :title="dialogTitle" width="900" :scroll="true" max-height="80vh" align-center>
<div class="single-device-dialog">
<el-form class="-mb-15px" :inline="true" label-width="80px">
<el-form-item label="采集时间">
<el-date-picker v-model="collectionTimeRange" value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange"
start-placeholder="开始时间" end-placeholder="结束时间"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]" class="!w-360px" />
</el-form-item>
<el-form-item>
<el-button @click="handleQuery">查询</el-button>
<el-button @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<ContentWrap v-loading="loading">
<div v-if="recordGroups.length" class="single-device-dialog__record-list">
<div v-for="group in recordGroups" :key="group.key" class="single-device-dialog__record">
<div class="single-device-dialog__record-title">
采集时间：{{ group.collectTime || '-' }}
</div>
<div class="history-device-dialog__header-sub">
<span>采集时间：{{ displayTime }}</span>
</div>
</div>
<ContentWrap>
<div class="history-device-dialog__table-grid">
<div
v-for="(section, index) in sections"
:key="index"
class="history-device-dialog__section"
>
<div class="history-device-dialog__section-title">
<div v-if="group.sections.length" class="single-device-dialog__table-grid">
<div v-for="section in group.sections" :key="`${group.key}-${section.key}`"
class="single-device-dialog__section">
<div class="single-device-dialog__section-title">
{{ section.title }}
</div>
<el-table
:data="section.rows"
:border="true"
:header-cell-style="headerCellStyle"
:cell-style="bodyCellStyle"
size="small"
>
<el-table-column
v-for="col in section.columns"
:key="col.prop"
:prop="col.prop"
:label="col.label"
align="center"
>
<el-empty v-if="!section.columns.length" description="暂无数据" />
<el-table v-else :data="section.rows" :border="true" :header-cell-style="headerCellStyle"
:cell-style="bodyCellStyle" size="small">
<el-table-column v-for="col in section.columns" :key="col.prop" :prop="col.prop" :label="col.label"
align="center">
<template #default="scope">
<span>{{ formatCell(scope.row[col.prop]) }}</span>
</template>
@ -40,13 +36,17 @@
</el-table>
</div>
</div>
<el-empty v-else description="暂无数据" />
</div>
</div>
<el-empty v-else description="暂无数据" />
</ContentWrap>
</div>
</Dialog>
</template>
<script setup lang="ts">
import { formatDate } from '@/utils/formatTime'
import { DeviceApi } from '@/api/iot/device'
type SectionColumn = {
prop: string
@ -56,15 +56,22 @@ type SectionColumn = {
type SectionRow = Record<string, string | number | null>
type Section = {
key: string
title: string
columns: SectionColumn[]
rows: SectionRow[]
}
type RecordGroup = {
key: string
collectTime?: string
sections: Section[]
}
const props = defineProps<{
modelValue: boolean
deviceId?: string | number
deviceName?: string
collectionTime?: string | number
}>()
const emit = defineEmits<{
@ -80,24 +87,32 @@ const dialogVisible = computed({
}
})
const title = computed(() => {
return '工艺参数'
const dialogTitle = computed(() => {
const name = props.deviceName ? props.deviceName : '-'
return `历史记录：${name}`
})
const displayTime = computed(() => {
if (!props.collectionTime) {
return '-'
const loading = ref(false)
const recordGroups = ref<RecordGroup[]>([])
const collectionTimeRange = ref<string[]>([])
const toGroupMap = (value: any): Record<string, any[]> => {
if (!value || typeof value !== 'object' || Array.isArray(value)) {
return {}
}
const value = props.collectionTime
if (typeof value === 'number') {
return formatDate(new Date(value))
const entries = Object.entries(value).filter(([, v]) => Array.isArray(v))
if (!entries.length) {
return {}
}
const date = new Date(value)
if (Number.isNaN(date.getTime())) {
return value
const map: Record<string, any[]> = {}
for (const [k, v] of entries) {
map[k] = v as any[]
}
return formatDate(date)
})
return map
}
const formatCell = (value: string | number | null | undefined) => {
if (value === null || value === undefined) {
@ -119,117 +134,123 @@ const bodyCellStyle = () => {
}
}
const createSection = (title: string, baseName: string, units: string[]): Section => {
const columns: SectionColumn[] = [
{ prop: 'position', label: '' }
]
for (let i = 0; i < units.length; i++) {
columns.push({ prop: `col${i + 1}`, label: `${baseName}${i + 1}${units[i] ? `(${units[i]})` : ''}` })
const buildSectionsFromGroups = (groups: Record<string, any[]>): Section[] => {
const result: Section[] = []
for (const [key, list] of Object.entries(groups)) {
const columns: SectionColumn[] = []
const row: SectionRow = {}
if (Array.isArray(list) && list.length) {
list.forEach((item: any, index: number) => {
const prop = `col${index}`
const label = item?.attributeName ?? `字段${index + 1}`
columns.push({ prop, label })
row[prop] = item?.addressValue ?? ''
})
}
const rows: SectionRow[] = [
{
position: '上段',
col1: 175.5,
col2: 181.2,
col3: 176.8,
col4: 179.0,
col5: 180.3,
col6: 177.9,
col7: 176.1,
col8: 178.4
},
{
position: '中段',
col1: 168.2,
col2: 170.0,
col3: 171.5,
col4: 169.8,
col5: 170.2,
col6: 169.1,
col7: 168.9,
col8: 170.0
},
{
position: '下段',
col1: 160.0,
col2: 161.2,
col3: 162.5,
col4: 161.8,
col5: 162.0,
col6: 161.3,
col7: 160.9,
col8: 161.5
result.push({
key,
title: key,
columns,
rows: columns.length ? [row] : []
})
}
]
return result
}
const fetchHistory = async () => {
if (props.deviceId === undefined || props.deviceId === null || props.deviceId === '') {
recordGroups.value = []
return
}
loading.value = true
try {
const params: Parameters<typeof DeviceApi.getHistoryRecord>[0] = { deviceId: props.deviceId }
if (Array.isArray(collectionTimeRange.value) && collectionTimeRange.value.length === 2) {
params.collectionStartTime = collectionTimeRange.value[0]
params.collectionEndTime = collectionTimeRange.value[1]
}
const res: any = await DeviceApi.getHistoryRecord(params)
const list = res?.data?.data ?? res?.data ?? res
const records = Array.isArray(list) ? list : []
recordGroups.value = records.map((item: any, index: number) => {
const groups = toGroupMap(item)
return {
title,
columns,
rows
key: `${item?.collectTime ?? index}-${index}`,
collectTime: item?.collectTime,
sections: buildSectionsFromGroups(groups)
}
})
} finally {
loading.value = false
}
}
const sections = ref<Section[]>([])
const handleQuery = () => {
fetchHistory()
}
const buildMockSections = () => {
const result: Section[] = []
result.push(createSection('烘箱温度(℃)', '区', ['', '', '', '', '', '', '', '']))
result.push(createSection('冷却温度(℃)', '区', ['', '', '', '', '', '', '', '']))
result.push(createSection('线速度(m/min)', '段', ['', '']))
result.push(createSection('张力(bar)', '段', ['', '', '', '']))
sections.value = result
const resetQuery = () => {
collectionTimeRange.value = []
fetchHistory()
}
watch(
() => props.modelValue,
(visible) => {
() => [props.modelValue, props.deviceId],
([visible]) => {
if (!visible) {
return
}
buildMockSections()
fetchHistory()
}
)
onMounted(() => {
if (props.modelValue) {
buildMockSections()
}
})
</script>
<style scoped>
.history-device-dialog {
.single-device-dialog {
display: flex;
flex-direction: column;
gap: 12px;
}
.history-device-dialog__header {
.single-device-dialog__table-grid {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 12px;
}
.single-device-dialog__record-list {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
color: var(--el-text-color-primary);
flex-direction: column;
gap: 12px;
}
.history-device-dialog__header-sub {
color: var(--el-text-color-secondary);
.single-device-dialog__record {
padding: 12px;
border: 1px solid var(--el-border-color);
border-radius: 6px;
background: var(--el-bg-color-overlay);
}
.history-device-dialog__table-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
.single-device-dialog__section {
padding: 10px;
border: 1px solid var(--el-border-color);
border-radius: 6px;
background: var(--el-fill-color-lighter);
}
.single-device-dialog__record-title {
font-size: 13px;
margin-bottom: 6px;
color: var(--el-text-color-secondary);
}
.history-device-dialog__section-title {
.single-device-dialog__section-title {
font-size: 13px;
margin-bottom: 4px;
color: var(--el-text-color-primary);
}
.history-device-dialog__section :deep(.el-table__inner-wrapper) {
.single-device-dialog__section :deep(.el-table__inner-wrapper) {
border-radius: 0;
}
</style>

32
src/views/iot/historyData/index.vue
Unescape Escape View File

@ -43,17 +43,6 @@
class="!w-240px"
/>
</el-form-item>
<el-form-item label="采集时间" prop="collectionTimeRange">
<el-date-picker
v-model="queryParams.collectionTimeRange"
value-format="YYYY-MM-DD HH:mm:ss"
type="datetimerange"
start-placeholder="开始时间"
end-placeholder="结束时间"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
class="!w-360px"
/>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery">
<Icon icon="ep:search" class="mr-5px" /> 搜索
@ -87,7 +76,7 @@
<el-table-column label="操作" align="center" fixed="right" width="150px">
<template #default="scope">
<el-button link type="primary" @click="handleSingleView(scope.row)">
单设备查看
历史记录
</el-button>
</template>
</el-table-column>
@ -102,8 +91,8 @@
<HistorySingleDeviceDialog
v-model="singleDialogVisible"
:device-id="singleDeviceId"
:device-name="singleDeviceName"
:collection-time="singleCollectionTime"
/>
</template>
@ -125,15 +114,14 @@ const queryParams = reactive({
lineName: undefined as string | undefined,
deviceCode: undefined as string | undefined,
deviceName: undefined as string | undefined,
status: undefined as string | number | undefined,
collectionTimeRange: [] as string[]
status: undefined as string | number | undefined
})
const queryFormRef = ref()
const singleDialogVisible = ref(false)
const singleDeviceId = ref<string | number>()
const singleDeviceName = ref<string>('')
const singleCollectionTime = ref<string | number | undefined>()
const buildQueryParams = (): LineDevicePageParams => {
const params: LineDevicePageParams = {
@ -154,11 +142,6 @@ const buildQueryParams = (): LineDevicePageParams => {
params.deviceName = queryParams.deviceName
}
if (Array.isArray(queryParams.collectionTimeRange) && queryParams.collectionTimeRange.length === 2) {
params.collectionTimeStart = queryParams.collectionTimeRange[0]
params.collectionTimeEnd = queryParams.collectionTimeRange[1]
}
return params
}
@ -180,13 +163,16 @@ const handleQuery = () => {
const resetQuery = () => {
queryFormRef.value?.resetFields()
queryParams.collectionTimeRange = []
handleQuery()
}
const handleSingleView = (row: LineDeviceVO) => {
const deviceId = (row as any)?.deviceId ?? row?.id
if (deviceId === undefined || deviceId === null || deviceId === '') {
return
}
singleDeviceId.value = deviceId
singleDeviceName.value = row.deviceName || ''
singleCollectionTime.value = (row as any).collectionTime
singleDialogVisible.value = true
}

Write Preview
Loading…
Cancel
Save