heli-mes/mes-ui/mes-ui-admin-vue3/src/views/heli/dataacquisition/index.vue

<template>
  <div class="JNPF-common-layout">
    <div class="JNPF-common-layout-center">
      <div class="JNPF-common-layout-main JNPF-flex-main">
        <div class="JNPF-common-head">
          <div>
            每5秒自动刷新一次
          </div>
        </div>
        <el-table v-loading="listLoading" :data="list" border height="900px">
          <el-table-column prop="code" label="设备编码" align="center" >
            <template #default="scope">
              <span :style="{ color: getStatusColor(scope.row.runningStatus) }">
                {{ scope.row.code }}
              </span>
            </template>
          </el-table-column>
          <el-table-column  label="当前运行程序号" align="center" >
            <template #default="scope">
              <span :style="{ color: getStatusColor(scope.row.runningStatus) }" v-if="scope.row.runningStatus!=4">
                {{ scope.row.programNumber }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="设备刀具号" align="center" >
            <template #default="scope">
              <span :style="{ color: getStatusColor(scope.row.runningStatus) }" v-if="scope.row.runningStatus!=4">
                {{ scope.row.toolNumber }}
              </span>
            </template>
          </el-table-column>
          <el-table-column  label="运行时长" align="center" >
            <template #default="scope">
              <span :style="{ color: getStatusColor(scope.row.runningStatus) }" v-if="scope.row.runningStatus!=4">
                {{ scope.row.runningDuration }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="runningStatus" label="运行状态" align="center">
            <template #default="scope">
              <span :style="{ color: getStatusColor(scope.row.runningStatus) }">
                {{ getStatusText(scope.row.runningStatus) }}
              </span>
            </template>
          </el-table-column>
          <el-table-column  label="采集时间" align="center" >
            <template #default="scope">
              <span :style="{ color: getStatusColor(scope.row.runningStatus) }" v-if="scope.row.runningStatus!=4" >
              {{ dateFormatter(scope.row,"createTime",scope.row.createTime) }}
              </span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue'
import * as UserApi from "@/api/system/user";
import * as DataAcquisitionApi from '@/api/heli/dataacquisition'
import {dateFormatter} from "@/utils/formatTime";
import {formatDate} from "@vueuse/core";

defineOptions({ name: 'DataAcquisition' })

interface DataItem {
  id: number
  code: string
  programNumber: string
  toolNumber: string
  runningDuration: string
  runningStatus: number
  speedOfMainshaft: string
  feedSpeed: string
  status: string
  createTime: string
}


const timer = ref<NodeJS.Timeout | null>(null)
const list = ref<DataItem[]>([])
const listLoading = ref(false)

/** 获取运行状态颜色 */
const getStatusColor = (status: number): string => {
  const colorMap: Record<number, string> = {
    1: '#67C23A', // 运行 - 绿色
    2: '#E6A23C', // 待机 - 黄色
    3: '#F56C6C', // 报警 - 红色
    4: '#909399', // 离线 - 灰色
  }
  return colorMap[status] || '#909399'
}

/** 获取运行状态文本 */
const getStatusText = (status: number): string => {
  const textMap: Record<number, string> = {
    1: '运行',
    2: '待机',
    3: '报警',
    4: '离线',
  }
  return textMap[status] || '未知'
}

/** 启动定时器 */
const startTimer = () => {
  timer.value = setInterval(() => {
    getList()
  }, 1000)
}

/** 清除定时器 */
const clearTimer = () => {
  if (timer.value) {
    clearInterval(timer.value)
    timer.value = null
  }
}



/** 初始化数据 */
const getList = async () => {
  // listLoading.value = true
  try {
    const data = await DataAcquisitionApi.getList()
    list.value = data
  } finally {
    // listLoading.value = false
  }
}
onMounted(async () => {
  await getList()
})
onMounted(() => {
  startTimer()

})

onUnmounted(() => {
  clearTimer()
})
</script>

<style scoped>
.JNPF-common-layout {
  padding: 10px;
  height: 100%;
}
.JNPF-common-layout-center {
  height: 100%;
}
.JNPF-common-layout-main {
  background: #fff;
  padding: 10px;
  border-radius: 4px;
}
.JNPF-flex-main {
  display: flex;
  flex-direction: column;
}
.JNPF-common-head {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>