sis_zhfx/src/views/Knowledge/Knowledge1.vue

<template>
  <div class="knowledge-1">
    <div class="query mg-b-8">
      <div class="query-items">
        <div class="query-item">
          <div class="lable">故障等级：</div>
          <div class="search-input">
            <el-select
              v-model="level"
              clearable
              placeholder="请选择"
              popper-class="select"
            >
              <el-option
                v-for="item in faultLevels"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="query-item">
          <div class="lable">停机类型：</div>
          <div class="search-input">
            <el-select
              v-model="type"
              placeholder="请选择"
              popper-class="select"
            >
              <el-option
                v-for="item in downTypes"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="query-item">
          <div class="lable">查询内容：</div>
          <div class="search-input">
            <el-input v-model="content" placeholder="请输入查询内容"></el-input>
          </div>
        </div>
      </div>
      <div class="query-actions">
        <button class="btn green" @click="onClickSearch">搜索</button>
      </div>
    </div>
    <div class="table-box">
      <ComTable :data="tableData" height="85vh"></ComTable>
    </div>
    <div class="dialog-box">
      <el-dialog
        title="详细信息"
        v-model="dialogVisible"
        custom-class="modal"
        :close-on-click-modal="false"
      >
        <know-info :data="infoData"></know-info>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import ComTable from "@com/coms/table/table.vue";
import KnowInfo from "./knowinfo.vue";

export default {
  components: { ComTable, KnowInfo },
  data() {
    const that = this;
    return {
      faultLevels: ["1级", "2级", "3级", "4级", "5级"], // 故障等级
      downTypes: ["正常停机", "快速停机", "紧急停机"], // 停机类型
      level: "",
      type: "",
      content: "",
      tableData: {
        column: [
          {
            name: "故障编码",
            field: "code",
            is_num: false,
            is_light: false,
          },
          {
            name: "故障名称",
            field: "name",
            is_num: false,
            is_light: false,
          },
          {
            name: "故障类别",
            field: "category",
            is_num: false,
            is_light: false,
          },
          {
            name: "故障级别",
            field: "faultlevel",
            is_num: false,
            is_light: false,
          },
          {
            name: "停机类型",
            field: "halttype",
            is_num: false,
            is_light: false,
          },
          {
            name: "设备类型",
            field: "devicemodel",
            is_num: false,
            is_light: false,
          },
          {
            name: "故障标识",
            field: "faultid",
            is_num: false,
            is_light: false,
          },
          {
            name: "操作",
            field: "",
            is_num: false,
            is_light: false,
            template() {
              return "<el-button type='text' style='cursor: pointer;'>详细信息</el-button>";
            },
            click(e, row) {
              that.getInformation(row);
            },
          },
        ],
        data: [],
      },
      infoData: "",
      dialogVisible: false,
    };
  },
  created() {
    this.level = this.faultLevels[0];
    this.type = this.downTypes[0];
    this.requestInfoList();
  },
  methods: {
    // 搜索按钮
    onClickSearch() {
      this.requestInfoList();
    },
    // 查看详细信息
    getInformation(item) {
      this.dialogVisible = true;
      this.infoData = item;
    },
    // 获取故障知识列表
    requestInfoList() {
      let that = this;
      this.API.requestData({
        method: "GET",
        baseURL: "http://10.155.32.4:8034/",
        subUrl: "/experienceBase/gzzs",
        data: {
          gzjb: that.level.substring(0, 1),
          tjlx: that.type,
          cxnr: that.content,
          pageNum: 1,
          pageSize: 1000,
        }, // 请求所携带参数，默认为空，可缺省
        success(res) {
          if (res.code == 200) {
            that.tableData.data = res.data;
          }
        },
      });
    },
  },
};
</script>

<style lang="less" scope>
@titleGray: #9ca5a8;
@rowGray: #606769;
@darkBack: #536268;
.knowledge-1 {
  .el-select {
    width: 200px;
  }
  .el-input {
    width: 200px;
  }
  .dialog-box {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .el-dialog {
    min-width: 500px;
    min-height: 500px;
  }
}
</style>