ECS5 / ECS5.0Web · Files

<template>
  <div class="interfacel">

    <el-form
      :model="queryConfig"
      :rules="rules"
      ref="queryConfig"
      label-width="100px"
      class="demo-queryConfig"
    >
      <el-row :gutter="10">
        <el-col :span="3">
          <el-form-item label="设备名：" prop="name">

            <el-input
              v-model="queryConfig.equipmentCode"
              placeholder="请选择设备名"
            ></el-input>

          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label="日志分类：" prop="name">

            <el-input
              v-model="queryConfig.logType"
              placeholder="请选择日志分类"
            ></el-input>

          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label="消息：" prop="name">

            <el-input
              v-model="queryConfig.message"
              placeholder="请选择消息"
            ></el-input>

          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label="日志级别：" prop="">

            <el-select
              v-model="queryConfig.bllResultCode"
              placeholder="请选择日志级别"
            >

              <el-option

                v-for="item in optionsBllResult"

                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>

          </el-form-item>
        </el-col>
        <el-col :span="3.5">
          <el-form-item label="开始时间：" prop="">

            <el-date-picker
              v-model="form.startTime"
              type="datetime"
              placeholder="选择日期时间"
            />

          </el-form-item>
        </el-col>
        <el-col :span="3.5">
          <el-form-item label="结束时间：" prop="">

            <el-date-picker
              v-model="form.endTime"
              type="datetime"
              placeholder="选择日期时间"
            />

          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="" prop="">
            <el-button
              icon="el-icon-search"
              class="T1"
              @click="btnAction()"

              size="small"

              type="primary"
              >查询</el-button
            >

            <el-button class="T1" size="small" @click="details()"
              >查询情况</el-button
            >

            <!-- <el-button class="T1" @click="goodsTypeModify()" disabled
              >导出</el-button
            > -->
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div class="table">

      <el-table
        :data="tableData"

        border
        stripe
        :height="TableHeight"

        @selection-change="handleSelectionChange"

        :header-cell-style="{ color: '#000000' }"

      >

        <el-table-column
          type="selection"
          align="center"
          width="55"
        ></el-table-column>

        <el-table-column prop="id" label="内置id" width="180">

        </el-table-column>

        <el-table-column prop="equipmentCode" label="设备名" width="180">

        </el-table-column>

        <el-table-column prop="logType" label="日志分类"> </el-table-column>
        <el-table-column prop="message" label="消息"> </el-table-column>
        <el-table-column prop="bllResultCode" label="日志级别">
        </el-table-column>
        <el-table-column prop="errorCode" label="报警代码"> </el-table-column>
        <el-table-column prop="created" label="创建时间"> </el-table-column>

      </el-table>
      <div class="pagination-container">
        <el-pagination

          style="margin-top: 15px"
          align="center"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"

          :current-page="queryConfig.currentPage"

          :page-sizes="[20, 50, 100]"

          :page-size="queryConfig.pageSize"

          layout="total, sizes, prev, pager, next, jumper"

          :total="total"

        />

      </div>
    </div>

    <el-dialog title="系统日志详情" :visible.sync="dialogFormVisible">
      <div class="container" v-for="(item, index) in detailsData" :key="index">
        <div class="box">
          <div class="inner-left">内部id：</div>
          <div class="inner-right">{{ item.id }}</div>
        </div>
        <div class="box">
          <div class="inner-left">日志级别：</div>
          <div class="inner-right">{{ item.bllResultCode }}</div>
        </div>
        <div class="box">
          <div class="inner-left">设备编码：</div>
          <div class="inner-right">{{ item.equipmentCode }}</div>
        </div>
        <div class="box">
          <div class="inner-left">日志分类：</div>
          <div class="inner-right">{{ item.logType }}</div>
        </div>
        <div class="box">
          <div class="inner-left">开始时间：</div>
          <div class="inner-right">{{ item.created }}</div>
        </div>
        <div class="box">
          <div class="inner-left">结束时间：</div>
          <div class="inner-right">{{ item.update }}</div>
        </div>
        <div class="box">
          <div class="inner-left">报警代码：</div>
          <div class="inner-right">{{ item.errorCode }}</div>
        </div>
        <div class="box1">
          <div class="inner-left">消息：</div>
          <div class="inner-right">
            <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4 }"
              placeholder="请输入消息"
              v-model="item.message"
            />
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>

import {
  GetDictWithDetailsLangs,
  GetEquipmentExecutedLog,

  GetEquipmentExecutedLogById,

} from "@/api/logManage/index";

export default {
  data() {
    return {

      tableData: [],

      queryConfig: {
        currentPage: 1,
        pageSize: 20,

        equipmentCode: "",
        logType: "",
        message: "",
        bllResultCode: "",

      },
      total: 0,
      form: {
        startTime: this.$moment()
          .subtract(3, "days")
          .format("YYYY-MM-DD 00:00:00"),
        endTime: this.$moment().add(1, "days").format("YYYY-MM-DD 23:59:59"),
      },

      optionsBllResult: [
        {
          value: "",
          label: "全部",
        },
      ],

      dialogFormVisible: false,
      multipleSelection: [],
      detailsData: [],

    };
  },

  created() {
    this.getFlag("LogLevelFlag");
    this.getTableList();
  },

  computed: {
    TableHeight() {

      return `calc(100vh - 390px )`;

    },
  },

  methods: {
    btnAction() {
      this.getTableList();
    },
    getFlag(data) {
      let params = { Code: data };
      GetDictWithDetailsLangs(params).then((response) => {
        response.data.dictDetails.forEach((x) => {
          this.optionsBllResult.push({ value: x.code, label: x.name });
        });
      });
    },
    getTableList() {
      const params = {
        pageNumber: this.queryConfig.currentPage,
        perPageCount: this.queryConfig.pageSize,
        queryConfig: {
          equipmentCode: this.queryConfig.equipmentCode,
          logType: this.queryConfig.logType,
          message: this.queryConfig.message,
          bllResultCode: this.queryConfig.bllResultCode,
          begin: this.form.startTime,
          end: this.form.endTime,
        },
      };
      this.listLoading = true;
      GetEquipmentExecutedLog(params).then((response) => {
        this.total = response.data.totalCount;
        this.tableData = response.data.data;
        this.listLoading = false;
      });
    },
    //   详情
    details() {
      if (this.multipleSelection.length == 0) {
        this.$alert("请选择一条数据！", "标题名称", {
          confirmButtonText: "确定",
        });
      } else {

        this.detailsData = [];
        let params = {
          id: this.multipleSelection[0].id,
        };
        GetEquipmentExecutedLogById(params).then((response) => {
          this.detailsData.push(response.data);
        });

        this.dialogFormVisible = true;
      }
    },
    //获取表格行数据
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //分页

    handleSizeChange(val) {
      this.queryConfig.pageSize = val;
      this.queryConfig.currentPage = 1;
      this.getTableList();
    },

    handleCurrentChange(val) {
      this.queryConfig.currentPage = val;

      this.getTableList();
    },
    validateNumber() {
      const regex = /^[0-9]*$/;
      this.numberError = regex.test(this.number) ? "" : "只能输入数字";
    },
  },

};
</script>
<style scoped lang="scss">
.interfacel {
  width: 100%;
}
.el-row {
  margin-bottom: 5px;
}
.interfacel-content {
  display: flex;
  border-radius: 4px;
  min-height: 46px;
  margin-bottom: 10px;
  align-items: center;
}
.table {
  border: 1px solid #e5e9f2;
}
.T1 {
  border: 1px solid #b3d8ff;
}
.pagination-container {
  text-align: center; /* 使分页组件靠右 */
  margin-top: 20px; /* 添加顶部间距 */
}
</style>