fd_dwgz_zhyw_nx/src/views/IntegratedAlarm/alarmConfig/logs/index.vue

<template>
  <div class="logs">
    <div class="form-wrapper">
      <div class="search-wrapper">
        <el-select
          v-model="value"
          style="margin-right: 10px"
          clearable
          size="mini"
          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
          size="mini"
          placeholder="名称检索"
          style="width: 200px; margin-right: 10px"
        />
      </div>
      <div class="btns">
        <el-button round size="mini" class="buttons" @click="search"
          >搜 索</el-button
        >
      </div>
    </div>
    <div class="table-wrapper">
      <div class="leftContent">
        <span>{{ pageTitle }}</span>
      </div>
      <el-table
        :data="tableData"
        stripe
        style="width: 100%; height: calc(100% - 70px)"
      >
        <el-table-column
          prop="ruleName"
          label="规则名称"
          width="300"
          align="left"
        />
        <el-table-column
          prop="ruleType"
          label="规则类型"
          width="120"
          align="left"
        />
        <el-table-column
          prop="stationName"
          label="场站名称"
          width="140"
          align="left"
        />
        <el-table-column
          prop="modelId"
          label="风机型号"
          width="200"
          align="left"
        />
        <el-table-column label="更改内容" show-overflow-tooltip align="left">
          <template #default="scope">
            <div v-if="scope.row.infoList.length">
              <div v-for="item in scope.row.infoList" :key="item">
                {{ item.fieldName }} :更改前: {{ item.beforValue }}
                <el-divider direction="vertical" /> 更改后:
                {{ item.afterValue }}
              </div>
            </div>
            <div v-else>--</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="updateTimeName"
          label="操作时间"
          width="150"
          align="center"
        />
        <el-table-column
          prop="updateType"
          label="操作类型"
          width="100"
          align="center"
        />
        <el-table-column
          prop="updateUser"
          label="操作人"
          width="100"
          align="center"
        />
      </el-table>
      <div class="pagination">
        <el-pagination
          layout="total,sizes, prev, pager, next"
          :hide-on-single-page="false"
          :current-page="query.page"
          :page-size="query.limit"
          :page-sizes="[22, 50, 100, 200, 500]"
          :total="query.pageTotal"
          @current-change="handlePageChange"
          @size-change="
            (value) => {
              query.limit = value;
              query.page = 1;
              logsList();
            }
          "
        ></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/zhbj/index.js";
import dayjs from "dayjs";
onMounted(() => {
  logsList();
});
const pageTitle = "规则修改日志";
const query = reactive({
  page: 1,
  limit: 22,
  pageTotal: 0,
});
let tableData = ref([]);
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
  );
  if (data) {
    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="less" scoped>
.logs {
  height: 100%;
  padding: 20px;
  .form-wrapper {
    display: flex;
    padding-top: 10px;
    padding-bottom: 10px;
    .search-wrapper::v-deep {
      display: flex;
      align-items: center;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #b3b3b3;

      .search-item {
        margin-right: 10px;
        max-width: 190px;
      }
    }

    .btns {
      display: flex;
      align-items: center;
    }

    .buttons {
      background-color: rgba(5, 187, 76, 0.2);
      border: 1px solid #3b6c53;
      color: #b3b3b3;
      font-size: 14px;
      &:hover {
        background-color: rgba(5, 187, 76, 0.5);
        color: #ffffff;
      }
    }
  }
}
.table-wrapper {
  height: calc(100% - 48px);
  width: 100%;
  .leftContent {
    width: 242px;
    height: 41px;
    display: flex;
    align-items: center;
    background: url("~@/assets/imgs/title_left_bg.png") no-repeat;

    span {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #05bb4c;
      margin-left: 25px;
    }
  }
  .el-table::v-deep {
    .el-table__body-wrapper {
      height: calc(100% - 45px) !important;
    }
  }
  .pagination-wrapper ::v-deep {
    text-align: right;
    margin-top: 10px;
  }
}
</style>