|
|
|
|
@ -55,35 +55,23 @@ v-model="queryParams.deviceName" placeholder="请输入设备名称" clearable @
|
|
|
|
|
@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>
|
|
|
|
|
<SingleDeviceMonitorDialog
|
|
|
|
|
v-model="monitorDialogVisible"
|
|
|
|
|
:device-id="monitorDeviceId"
|
|
|
|
|
:device-name="monitorDeviceName"
|
|
|
|
|
/>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
import { DICT_TYPE } from '@/utils/dict'
|
|
|
|
|
import { dateFormatter } from '@/utils/formatTime'
|
|
|
|
|
import { DeviceApi, LineDeviceVO } from '@/api/iot/device'
|
|
|
|
|
import SingleDeviceMonitorDialog from './SingleDeviceMonitorDialog.vue'
|
|
|
|
|
|
|
|
|
|
defineOptions({ name: 'RealTimeMonitoring' })
|
|
|
|
|
|
|
|
|
|
const message = useMessage()
|
|
|
|
|
|
|
|
|
|
const loading = ref(true)
|
|
|
|
|
const list = ref<LineDeviceVO[]>([])
|
|
|
|
|
const total = ref(0)
|
|
|
|
|
@ -100,87 +88,9 @@ const queryParams = reactive({
|
|
|
|
|
})
|
|
|
|
|
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 monitorDeviceId = ref<string | number>()
|
|
|
|
|
const monitorDeviceName = ref<string>()
|
|
|
|
|
|
|
|
|
|
const buildQueryParams = (): Parameters<typeof DeviceApi.getLineDevicePage>[0] => {
|
|
|
|
|
const params: Parameters<typeof DeviceApi.getLineDevicePage>[0] = {
|
|
|
|
|
@ -220,14 +130,14 @@ const resetQuery = () => {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const handleSingleMonitor = (row: LineDeviceVO) => {
|
|
|
|
|
monitorDialogTitle.value = row?.deviceName ? `单设备监控：${row.deviceName}` : '单设备监控'
|
|
|
|
|
monitorLoading.value = true
|
|
|
|
|
monitorDialogVisible.value = true
|
|
|
|
|
try {
|
|
|
|
|
monitorList.value = buildMockMonitorList()
|
|
|
|
|
} finally {
|
|
|
|
|
monitorLoading.value = false
|
|
|
|
|
const deviceId = (row as any)?.deviceId ?? row?.id
|
|
|
|
|
if (deviceId === undefined || deviceId === null || deviceId === '') {
|
|
|
|
|
message.error('设备信息不完整')
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
monitorDeviceId.value = deviceId
|
|
|
|
|
monitorDeviceName.value = row?.deviceName ?? ''
|
|
|
|
|
monitorDialogVisible.value = true
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let timer: any = null
|
|
|
|
|
|
