状态监控界面升级优化

rc_autoplc_front/.env.production

@@ -1 +1 @@
-VITE_API_URL=http://223.71.122.54:9090
+VITE_API_URL=/api/

rc_autoplc_front/src/views/statusmonitor/index.vue

@@ -124,8 +124,9 @@
                       <div class="monitor-card-main">
                         <div class="monitor-card-title">{{ getParamName(param) }}</div>
                         <div class="monitor-card-subtitle">
-                          默认值：{{ getParamDefaultValue(param) }} ｜ 单位：{{ getParamUnit(param) }}
+                          预设值：{{ getParamPresetValue(param) }} | 实际值：{{ getParamActualDisplay(param) }}
                         </div>
+                        <div class="monitor-card-subtitle">样品编号：{{ getParamSampleDisplay(param) }}</div>
                       </div>
                     </div>
                     <div v-if="group.params.length === 0" class="param-empty">暂无参数</div>
@@ -221,14 +222,17 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
 import { Bottom } from '@element-plus/icons-vue'
 import { islandInfolist } from '@/api/tb/islandinfo'
 import { devInfolist } from '@/api/tb/devinfo'
 import { devparamselect } from '@/api/tb/devparam'
+import { goodsFlowStatusselect } from '@/api/tb/goodsflowstatus'
 import { recordInfolist } from '@/api/tb/recordinfo'
+import { goodsInfolist } from '@/api/tb/goodsinfo'
+import { stepInfolist } from '@/api/tb/stepinfo'
 
 interface AnyItem {
   id?: string | number
@@ -265,6 +269,9 @@ const detailLoading = ref(false)
 const islands = ref<AnyItem[]>([])
 const actions = ref<AnyItem[]>([])
 const params = ref<AnyItem[]>([])
+const stepList = ref<AnyItem[]>([])
+const goodsFlowStatusList = ref<AnyItem[]>([])
+const goodsInfoList = ref<AnyItem[]>([])
 const abnormalRecords = ref<AnyItem[]>([])
 
 const selectedIslandId = ref<string | number | ''>('')
@@ -275,6 +282,10 @@ const actionDialogVisible = ref(false)
 const dialogIsland = ref<AnyItem>({})
 const dialogAction = ref<AnyItem>({})
 
+const refreshTimer = ref<number | null>(null)
+const isInitialLoaded = ref(false)
+const isRefreshing = ref(false)
+
 const selectedIsland = computed(() => islands.value.find(item => String(getItemId(item)) === String(selectedIslandId.value)) || null)
 
 const getResponseList = (res: any) => {
@@ -283,6 +294,21 @@ const getResponseList = (res: any) => {
   return data.records || data.list || data.rows || data.items || data.data || []
 }
 
+const getGoodsIdText = (item?: AnyItem | null) => {
+  const value = item?.goodsId ?? item?.goodsid ?? item?.goodsNo ?? item?.goodsCode ?? item?.sampleNo
+  return value !== undefined && value !== null && value !== '' ? String(value) : '暂无'
+}
+
+const getGoodsStatusText = (item?: AnyItem | null) => {
+  const value = item?.status
+  return value !== undefined && value !== null && value !== '' ? String(value) : '暂无'
+}
+
+const isUnprocessedGoods = (item?: AnyItem | null) => {
+  const status = item?.status ?? item?.goodsStatus ?? item?.dealStatus ?? item?.processStatus
+  return status === 0 || status === '0' || status === '未处理' || status === false || status === 'false'
+}
+
 const isUnprocessedRecord = (item: AnyItem) => {
   const value = item?.recordStatus ?? item?.status ?? item?.dealStatus
   return value === false || value === 0 || value === '0' || value === '待处理' || value === 'false'
@@ -294,15 +320,66 @@ const getIslandDesc = (item?: AnyItem | null) => item?.desc || item?.islandDesc
 const getActionName = (item?: AnyItem | null) => item?.devName || item?.actionName || item?.name || '未命名动作'
 const getActionDesc = (item?: AnyItem | null) => item?.devDesc || item?.actionDesc || item?.desc || '暂无描述'
 const getParamName = (item?: AnyItem | null) => item?.paramName || item?.parName || item?.name || '未命名参数'
-const getParamDefaultValue = (item?: AnyItem | null) => {
+const getParamPresetValue = (item?: AnyItem | null) => {
   const value = item?.paramValue ?? item?.parValue ?? item?.value ?? item?.defaultValue ?? item?.defaultVal ?? item?.initValue
-  return value !== undefined && value !== null && value !== '' ? String(value) : '—'
+  return value !== undefined && value !== null && value !== '' ? String(value) : '暂无'
 }
-const getParamUnit = (item?: AnyItem | null) => item?.paramUnit || item?.parUnit || item?.unit || '—'
 const getParamIconText = (item?: AnyItem | null) => {
   const name = getParamName(item)
   return name ? name.slice(0, 1) : '参'
 }
+
+const getParamStepOrders = (param?: AnyItem | null) => {
+  const paramId = String(getItemId(param ?? {}) ?? '')
+  const paramName = getParamName(param)
+
+  const matchedSteps = stepList.value.filter(step => {
+    const stepParamIds = String(step?.paramId ?? step?.devId ?? step?.actionId ?? step?.paramIds ?? '')
+      .split(/[;,，]/)
+      .map(id => id.trim())
+      .filter(Boolean)
+
+    return (
+      stepParamIds.includes(paramId) ||
+      String(step?.paramName ?? step?.name ?? '') === paramName ||
+      String(step?.paramId ?? '') === paramId
+    )
+  })
+
+  return matchedSteps
+    .map(step => Number(step?.stepOrder ?? step?.order ?? step?.sort ?? 0))
+    .filter(order => order > 0)
+}
+
+const getParamFlowRecords = (param?: AnyItem | null) => {
+  const stepOrders = getParamStepOrders(param)
+  if (stepOrders.length === 0) return []
+
+  const matchedRecords = (goodsFlowStatusList.value || [])
+    .filter(record => stepOrders.includes(Number(record.flowSort ?? 0)))
+    .filter(record => isUnprocessedGoods(goodsInfoList.value.find(item => String(getItemId(item)) === String(record.goodsId ?? record.goodsid ?? record.goodsNo ?? record.goodsCode ?? record.sampleNo ?? ''))))
+    .sort((a, b) => Number(a.flowSort ?? 0) - Number(b.flowSort ?? 0))
+
+  return matchedRecords.map((record, index) => ({
+    ...record,
+    __flowKey: `${String(record.id ?? record.goodsFlowStatusId ?? record.goodsId ?? index)}-${index}`,
+    goodsIdText: getGoodsIdText(record),
+    statusText: getGoodsStatusText(record),
+  }))
+}
+
+const getParamActualDisplay = (param?: AnyItem | null) => {
+  const records = getParamFlowRecords(param)
+  if (records.length === 0) return '暂无'
+  return records.map(record => record.statusText || '暂无').join('，') || '暂无'
+}
+
+const getParamSampleDisplay = (param?: AnyItem | null) => {
+  const records = getParamFlowRecords(param)
+  if (records.length === 0) return '暂无'
+  return records.map(record => record.goodsIdText || '暂无').join('，') || '暂无'
+}
+
 const getIslandDisplayIndex = (item?: AnyItem | null) => {
   const index = islands.value.findIndex(island => String(getItemId(island)) === String(getItemId(item ?? {})))
   return index >= 0 ? String(index + 1).padStart(3, '0') : '000'
@@ -335,26 +412,55 @@ const getStatusTag = (status?: number) => {
   return 'info'
 }
 
-const loadData = async () => {
-  islandLoading.value = true
-  detailLoading.value = true
-  try {
-    const [islandRes, actionRes, paramRes, recordRes] = await Promise.all([
-      islandInfolist({ pageNum: 1, pageSize: 1000 }),
-      devInfolist({ pageNum: 1, pageSize: 1000, devModelNot: 'PLC' }),
-      devparamselect({ pageNum: 1, pageSize: 5000 }),
-      recordInfolist({ pageNum: 1, pageSize: 5000 }),
-    ])
+const applyLoadedData = (islandRes: any, actionRes: any, paramRes: any, stepRes: any, goodsFlowRes: any, goodsRes: any, recordRes: any, keepSelection = true) => {
+  const nextIslands = getResponseList(islandRes)
+  const nextActions = getResponseList(actionRes)
+  const nextParams = getResponseList(paramRes)
+  const nextSteps = getResponseList(stepRes)
+  const nextGoodsFlowStatus = getResponseList(goodsFlowRes)
+  const nextGoodsInfo = getResponseList(goodsRes)
+  const nextRecords = getResponseList(recordRes).filter((item: AnyItem) => isUnprocessedRecord(item))
 
-    islands.value = getResponseList(islandRes)
-    actions.value = getResponseList(actionRes)
-    params.value = getResponseList(paramRes)
-    abnormalRecords.value = getResponseList(recordRes).filter((item: AnyItem) => isUnprocessedRecord(item))
+  islands.value = nextIslands
+  actions.value = nextActions
+  params.value = nextParams
+  stepList.value = nextSteps
+  goodsFlowStatusList.value = nextGoodsFlowStatus
+  goodsInfoList.value = nextGoodsInfo
+  abnormalRecords.value = nextRecords
 
-    const firstIsland = islands.value[0]
+  if (!keepSelection || !selectedIslandId.value) {
+    const firstIsland = nextIslands[0]
     if (firstIsland) {
       selectedIslandId.value = getItemId(firstIsland)
     }
+  }
+
+  if (selectedActionId.value) {
+    const exists = nextActions.some((item: AnyItem) => String(getItemId(item)) === String(selectedActionId.value))
+    if (!exists) {
+      selectedActionId.value = ''
+      activeDialogType.value = ''
+    }
+  }
+}
+
+const loadInitialData = async () => {
+  islandLoading.value = true
+  detailLoading.value = true
+  try {
+    const [islandRes, actionRes, paramRes, stepRes, goodsFlowRes, goodsRes, recordRes] = await Promise.all([
+      islandInfolist({ pageNum: 1, pageSize: 1000 }),
+      devInfolist({ pageNum: 1, pageSize: 1000, devModelNot: 'PLC' }),
+      devparamselect({ pageNum: 1, pageSize: 5000 }),
+      stepInfolist({ pageNum: 1, pageSize: 5000 }),
+      goodsFlowStatusselect({ pageNum: 1, pageSize: 5000 }),
+      goodsInfolist({ pageNum: 1, pageSize: 5000 }),
+      recordInfolist({ pageNum: 1, pageSize: 5000 }),
+    ])
+
+    applyLoadedData(islandRes, actionRes, paramRes, stepRes, goodsFlowRes, goodsRes, recordRes, false)
+    isInitialLoaded.value = true
   } catch (error: any) {
     console.error(error)
     ElMessage.error(error?.message || '获取状态监控数据失败')
@@ -364,6 +470,40 @@ const loadData = async () => {
   }
 }
 
+const refreshRealtimeData = async () => {
+  if (!isInitialLoaded.value || isRefreshing.value) return
+  isRefreshing.value = true
+  try {
+    const [islandRes, actionRes, goodsFlowRes, goodsRes, recordRes] = await Promise.all([
+      islandInfolist({ pageNum: 1, pageSize: 1000 }),
+      devInfolist({ pageNum: 1, pageSize: 1000, devModelNot: 'PLC' }),
+      goodsFlowStatusselect({ pageNum: 1, pageSize: 5000 }),
+      goodsInfolist({ pageNum: 1, pageSize: 5000 }),
+      recordInfolist({ pageNum: 1, pageSize: 5000 }),
+    ])
+
+    applyLoadedData(islandRes, actionRes, params.value, stepList.value, goodsFlowRes, goodsRes, recordRes, true)
+  } catch (error) {
+    console.error(error)
+  } finally {
+    isRefreshing.value = false
+  }
+}
+
+const startRefreshTimer = () => {
+  stopRefreshTimer()
+  refreshTimer.value = window.setInterval(() => {
+    void refreshRealtimeData()
+  }, 2000)
+}
+
+const stopRefreshTimer = () => {
+  if (refreshTimer.value !== null) {
+    window.clearInterval(refreshTimer.value)
+    refreshTimer.value = null
+  }
+}
+
 const selectIsland = (item: AnyItem) => {
   selectedIslandId.value = getItemId(item)
   selectedActionId.value = ''
@@ -427,7 +567,8 @@ const goToExceptionRecords = () => {
   if (activeDialogType.value === 'island' && dialogIsland.value) {
     query.islandId = String(getItemId(dialogIsland.value))
   }
-  if (activeDialogType.value === 'action' && dialogAction.value) {
+  if (activeDialogType.value === 'action' && dialogAction.value) 
+  {
     query.devId = String(getItemId(dialogAction.value))
   }
   router.push({ path: '/record-info', query })
@@ -435,13 +576,25 @@ const goToExceptionRecords = () => {
 
 const actionsToRender = computed(() => getIslandRelatedActions(selectedIslandId.value).map(action => ({
   action,
-  params: getParamsForAction(action),
+  params: getParamsForAction(action).map(param => ({
+    ...param,
+    stepOrder: stepList.value.find(step => String(step.paramId ?? step.id ?? step.stepParamId ?? '') === String(getItemId(param)))?.stepOrder ?? param.stepOrder,
+  })),
 })))
 
 const dialogIslandRecords = computed(() => getAbnormalRecordsByIsland(dialogIsland.value))
 const dialogActionRecords = computed(() => getAbnormalRecordsByAction(dialogAction.value))
 
-onMounted(loadData)
+onMounted(async () => {
+  await loadInitialData()
+  if (isInitialLoaded.value) {
+    startRefreshTimer()
+  }
+})
+
+onBeforeUnmount(() => {
+  stopRefreshTimer()
+})
 </script>
 
 <style scoped>