Merge branch 'main' of https://git.ngsk.tech/linweidong/besure_web
kkk-ops
1 month ago
commit
0df1124747
@ -0,0 +1,290 @@
|
||||
<template>
|
||||
<ContentWrap>
|
||||
<el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
|
||||
<el-form-item label="产线编码" prop="lineNode">
|
||||
<el-input
|
||||
v-model="queryParams.lineNode"
|
||||
placeholder="请输入产线编码"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="产线名称" prop="lineName">
|
||||
<el-input
|
||||
v-model="queryParams.lineName"
|
||||
placeholder="请输入产线名称"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备编码" prop="deviceCode">
|
||||
<el-input
|
||||
v-model="queryParams.deviceCode"
|
||||
placeholder="请输入设备编码"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备名称" prop="deviceName">
|
||||
<el-input
|
||||
v-model="queryParams.deviceName"
|
||||
placeholder="请输入设备名称"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
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"
|
||||
row-key="id"
|
||||
>
|
||||
<el-table-column label="产线编码" align="left" prop="lineNode" min-width="140px" />
|
||||
<el-table-column label="产线名称" align="left" prop="lineName" min-width="160px" />
|
||||
<el-table-column label="设备编码" align="left" prop="deviceCode" min-width="140px" />
|
||||
<el-table-column label="设备名称" align="left" prop="deviceName" min-width="160px" />
|
||||
<el-table-column label="连接状态" align="center" prop="status" width="120px">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.IOT_GATEWAY_STATUS" :value="scope.row.status" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="最新采集时间"
|
||||
align="center"
|
||||
prop="collectionTime"
|
||||
:formatter="dateFormatter"
|
||||
width="180px"
|
||||
/>
|
||||
<el-table-column label="操作" align="center" fixed="right" width="150px">
|
||||
<template #default="scope">
|
||||
<el-button link type="primary" @click="handleSingleMonitor(scope.row)">单设备监控</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<Pagination
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNo"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</ContentWrap>
|
||||
|
||||
<Dialog v-model="monitorDialogVisible" :title="monitorDialogTitle" width="900">
|
||||
<ContentWrap>
|
||||
<el-table
|
||||
v-loading="monitorLoading"
|
||||
:data="monitorList"
|
||||
:stripe="true"
|
||||
:show-overflow-tooltip="true"
|
||||
row-key="pointCode"
|
||||
>
|
||||
<el-table-column label="点位编码" align="left" prop="pointCode" min-width="140px" />
|
||||
<el-table-column label="点位名称" align="left" prop="pointName" min-width="160px" />
|
||||
<el-table-column label="数据类型" align="center" prop="dataType" width="120px" />
|
||||
<el-table-column label="最新值" align="center" prop="latestValue" width="120px">
|
||||
<template #default="scope">
|
||||
{{ scope.row.latestValue === null ? 'null' : scope.row.latestValue }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="单位" align="center" prop="unit" width="100px" />
|
||||
<el-table-column
|
||||
label="最新采集时间"
|
||||
align="center"
|
||||
prop="latestCollectTime"
|
||||
:formatter="dateFormatter"
|
||||
width="180px"
|
||||
/>
|
||||
</el-table>
|
||||
</ContentWrap>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DICT_TYPE } from '@/utils/dict'
|
||||
import { dateFormatter } from '@/utils/formatTime'
|
||||
import { DeviceApi, LineDeviceVO } from '@/api/iot/device'
|
||||
|
||||
defineOptions({ name: 'RealTimeMonitoring' })
|
||||
|
||||
const loading = ref(true)
|
||||
const list = ref<LineDeviceVO[]>([])
|
||||
const total = ref(0)
|
||||
const queryParams = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
id: undefined,
|
||||
lineNode: undefined,
|
||||
lineName: undefined,
|
||||
deviceCode: undefined,
|
||||
deviceName: undefined,
|
||||
status: undefined,
|
||||
collectionTime: undefined
|
||||
})
|
||||
const queryFormRef = ref() // 搜索的表单
|
||||
|
||||
type MonitorRow = {
|
||||
pointCode: string
|
||||
pointName: string
|
||||
dataType: string
|
||||
latestValue: any
|
||||
unit: string
|
||||
latestCollectTime: string
|
||||
}
|
||||
|
||||
const monitorDialogVisible = ref(false)
|
||||
const monitorDialogTitle = ref('单设备监控')
|
||||
const monitorLoading = ref(false)
|
||||
const monitorList = ref<MonitorRow[]>([])
|
||||
|
||||
const buildMockCollectTime = (hour: number, minute: number, second: number) => {
|
||||
const hh = String(hour).padStart(2, '0')
|
||||
const mm = String(minute).padStart(2, '0')
|
||||
const ss = String(second).padStart(2, '0')
|
||||
return `2025-11-25 ${hh}:${mm}:${ss}`
|
||||
}
|
||||
|
||||
const buildMockMonitorList = () => {
|
||||
return [
|
||||
{
|
||||
pointCode: 'state',
|
||||
pointName: '运行状态',
|
||||
dataType: 'bool',
|
||||
latestValue: 100,
|
||||
unit: '',
|
||||
latestCollectTime: buildMockCollectTime(9, 16, 12)
|
||||
},
|
||||
{
|
||||
pointCode: 'faultCode',
|
||||
pointName: '故障代码',
|
||||
dataType: 'int',
|
||||
latestValue: null,
|
||||
unit: '',
|
||||
latestCollectTime: buildMockCollectTime(9, 16, 18)
|
||||
},
|
||||
{
|
||||
pointCode: 'machineOutp',
|
||||
pointName: '产量',
|
||||
dataType: 'long',
|
||||
latestValue: 100,
|
||||
unit: '',
|
||||
latestCollectTime: buildMockCollectTime(9, 16, 25)
|
||||
},
|
||||
{
|
||||
pointCode: 'cycleTime',
|
||||
pointName: '节拍(秒)',
|
||||
dataType: 'int',
|
||||
latestValue: 45,
|
||||
unit: '',
|
||||
latestCollectTime: buildMockCollectTime(9, 16, 31)
|
||||
},
|
||||
{
|
||||
pointCode: 'goodCount',
|
||||
pointName: '良品数',
|
||||
dataType: 'long',
|
||||
latestValue: 980,
|
||||
unit: '',
|
||||
latestCollectTime: buildMockCollectTime(9, 16, 36)
|
||||
},
|
||||
{
|
||||
pointCode: 'rejectCount',
|
||||
pointName: '不良数',
|
||||
dataType: 'long',
|
||||
latestValue: 12,
|
||||
unit: '',
|
||||
latestCollectTime: buildMockCollectTime(9, 16, 42)
|
||||
},
|
||||
{
|
||||
pointCode: 'alarmFlag',
|
||||
pointName: '报警标识',
|
||||
dataType: 'bool',
|
||||
latestValue: 0,
|
||||
unit: '',
|
||||
latestCollectTime: buildMockCollectTime(9, 16, 49)
|
||||
}
|
||||
] as MonitorRow[]
|
||||
}
|
||||
|
||||
const buildQueryParams = () => {
|
||||
const params: Record<string, any> = {
|
||||
pageNo: queryParams.pageNo,
|
||||
pageSize: queryParams.pageSize
|
||||
}
|
||||
const keys = ['id', 'lineNode', 'lineName', 'deviceCode', 'deviceName', 'status', 'collectionTime']
|
||||
for (const key of keys) {
|
||||
const value = (queryParams as any)[key]
|
||||
if (value === undefined || value === null || value === '') {
|
||||
continue
|
||||
}
|
||||
params[key] = value
|
||||
}
|
||||
return params
|
||||
}
|
||||
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const data = await DeviceApi.getLineDevicePage(buildQueryParams())
|
||||
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 handleSingleMonitor = (row: LineDeviceVO) => {
|
||||
monitorDialogTitle.value = row?.deviceName ? `单设备监控：${row.deviceName}` : '单设备监控'
|
||||
monitorLoading.value = true
|
||||
monitorDialogVisible.value = true
|
||||
try {
|
||||
monitorList.value = buildMockMonitorList()
|
||||
} finally {
|
||||
monitorLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
let timer: any = null
|
||||
|
||||
onMounted(() => {
|
||||
getList()
|
||||
timer = setInterval(async () => {
|
||||
try {
|
||||
const data = await DeviceApi.getLineDevicePage(buildQueryParams())
|
||||
list.value = data.list
|
||||
total.value = data.total
|
||||
} catch {}
|
||||
}, 5000)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if (timer) {
|
||||
clearInterval(timer)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
Loading…
Reference in New Issue