alertGuardian-JinNeng/src/pages/alarmConfig/Logs.vue

<template>
  <div>
    <div class="container">
      <div class="sleBox">
        <el-select
          v-model="value"
          style="margin-right: 10px"
          clearable
          placeholder="类型"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          />
        </el-select>
        <el-input
          v-model="input"
          clearable
          placeholder="名称检索"
          style="width: 200px; margin-right: 10px"
        />
        <el-button type="primary" @click="search">确定</el-button>
      </div>
      <el-table :data="tableData" height="700" stripe style="width: 100%">
        <el-table-column prop="ruleName" label="规则名称"  width="220"/>
        <el-table-column prop="ruleType" label="规则类型" width="120" />
        <el-table-column prop="stationName" label="场站名称" width="140" />
        <el-table-column prop="modelId" label="风机型号" width="160" />
        <el-table-column label="更改内容">
          <template #default="scope">
            <div v-for="item in scope.row.infoList" :key="item">
              {{ item.fieldName }} :更改前: {{ item.beforValue }}
              <el-divider direction="vertical" /> 更改后:
              {{ item.afterValue }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="updateTimeName" label="操作时间" width="150" />
        <el-table-column prop="updateType" label="操作类型" width="100" />
        <el-table-column prop="updateUser" label="操作人" width="100" />
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          layout="total, prev, pager, next"
          hide-on-single-page
          :current-page="query.page"
          :page-size="query.limit"
          :total="query.pageTotal"
          @current-change="handlePageChange"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive, nextTick, watch, computed } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { fetchruleventLogs } from "/@/api/api.js";
import dayjs from "dayjs";
onMounted(() => {
  logsList();
});
const query = reactive({
  page: 1,
  limit: 15,
  pageTotal: null,
});
let tableData = ref(null);
let input = ref("");
let value = ref("");
let options = ref([
  {
    label: "自定义报警",
    value: "自定义报警",
  },
  {
    label: "风机报警",
    value: "风机报警",
  },
  {
    label: "升压站报警",
    value: "升压站报警",
  },
]);
//
const search = () => {
  logsList();
};
const logsList = async () => {
  const { data } = await fetchruleventLogs(
    query.page,
    query.limit,
    input.value,
    value.value
  );
  data.records.forEach((ele) => {
    ele.updateTimeName = dayjs(ele.updateTime).format("YYYY-MM-DD:HH:mm:ss");
  });
  query.pageTotal = data.total;
  tableData.value = data.records;
};
// 分页导航
const handlePageChange = (val) => {
  query.page = val;
  logsList();
};
</script>
<style lang="scss" scoped>
.container {
  padding: 20px;
  box-sizing: border-box;
}
.sleBox {
  margin-bottom: 10px;
  display: flex;
}
</style>