SMO/src/views/alarm/software/index.vue

<template>
  <div class="table-box">
    <div class="card table-main">
      <!-- 表格头部 操作按钮 -->
      <div class="table-header">
        <div class="header-button-lf">
          <el-form :model="pageable" label-width="auto"  :inline="true">
            <el-form-item label="名称:">
              <el-input v-model="pageable.processName" style="width: 200px" placeholder="请输入名称" />
            </el-form-item>
            <el-form-item label="应用:">
               <el-input v-model="pageable.programName" style="width: 200px" placeholder="请输入应用" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleQuery"> 查询 </el-button>
              <el-button style="margin-left: 10px" @click="resetQuery"> 重置 </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <!-- 表格主体 -->
      <el-table stripe ref="tableRef" :border="true" :data="showList"  size="small">
        <el-table-column align="left" label="序号" width="45px" :show-overflow-tooltip="true" >
          <template #default="scope">
            {{ (pageable.pageNum - 1) * pageable.pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>
        <template v-for="item in columns" :key="item">
          <el-table-column v-bind="item" :align="item.align ?? 'left'" :reserve-selection="item.type == 'selection'" :show-overflow-tooltip="true" >
          </el-table-column>
        </template>
        <!-- 无数据 -->
        <template #empty>
          <div class="table-empty">
            <slot name="empty">
              <img src="@/assets/images/notData.png" alt="notData" />
              <div>暂无数据</div>
            </slot>
          </div>
        </template>
      </el-table>
      <!-- 分页组件 -->
      <Pagination :pageable="pageable" :handle-size-change="handleSizeChange" :handle-current-change="handleCurrentChange" />
    </div>
  </div>
</template>

<script setup lang="ts" name="useProTable">
import Pagination from "@/components/ProTable/components/Pagination.vue";
import {ref, reactive, onMounted, computed, onActivated, onDeactivated} from "vue";
import { ColumnProps } from "@/components/ProTable/interface";
import {getQueryAllSysItem} from "@/api/modules/allData";

//原始数据源
const dataList = ref([])
const pageable = ref<any>({
  programName:'',
  processName:'',
  pageNum: 1,
  pageSize: 20,
  total: 0
});

// 计算属性，根据分页参数和查询条件计算当前页的数据范围
const showList = computed(() => {
  // 过滤数据
  const filteredData = dataList.value.filter(item => {
    return (!pageable.value.programName || item.programName.includes(pageable.value.programName)) &&
      (!pageable.value.processName || item.processName.includes(pageable.value.processName));
  });

  // 更新总数
  pageable.value.total = filteredData.length;

  // 计算当前页的数据范围
  const start = (pageable.value.pageNum - 1) * pageable.value.pageSize;
  const end = start + pageable.value.pageSize;
  // 根据分页参数截取数据
  return filteredData.slice(start, end);
});

// 查询功能
const handleQuery = () => {
  pageable.value.pageNum = 1; // 重置到第一页
};

// 重置功能
const resetQuery = () => {
  pageable.value.programName = ''; // 清除查询条件
  pageable.value.processName = '';
  pageable.value.pageNum = 1; // 重置到第一页
};

// 每页条数改变
const handleSizeChange = (val: number) => {
  pageable.value.pageSize = val;
};

// 当前页改变
const handleCurrentChange = (val: number) => {
  pageable.value.pageNum = val;
};

// 表格配置项
const columns = reactive<ColumnProps[]>([
  { prop: "processName", label: "名称" },
  { prop: "programName", label: "应用" },
  { prop: "processId", label: "PID" },
  { prop: "cpuUsage", label: "内存" },
  { prop: "memoryUsage", label: "CPU" },
  { prop: "status", label: "状态",width:100},
]);

const processData = ref([]);

const getList= async ()=>{
  dataList.value = []
  const { data } = await getQueryAllSysItem();
  processData.value = data.list
  processData.value.forEach(function(item) {
    if(item.item_key==='24'||item.item_key==='25'||item.item_key==='26'||item.item_key==='27'){
      const values = item.item_value.split('|');
      const obj = {
        processName: values[0],
        programName: values[1],
        processId: values[2],
        cpuUsage: values[4],
        memoryUsage: values[3],
        statusUpdateTime: new Date(parseInt(values[5]) * 1000), // 将时间戳转换为 Date 对象
        status:''
      };

      // 获取当前时间
      const currentTime = new Date();
      // 计算时间差（以毫秒为单位）
      const timeDifference = currentTime - obj.statusUpdateTime;
      // 判断是否超过3分钟（3分钟 = 3 * 60 * 1000 毫秒）
      if (timeDifference > 3 * 60 * 1000) {
        obj.status = '停止中';
      } else {
        obj.status = '运行中';
      }
      dataList.value.push(obj);
    }
  })
  pageable.value.total = dataList.value.length
}

onMounted(() => {
  getList()
});

let intervalId;
onActivated(() => {
  getList()
  intervalId = setInterval(() => {
    getList()
  }, 30 * 1000);
});

onDeactivated(() => {
  clearInterval(intervalId);
});


</script>