sis_zhfx/src/views/faultManual/index.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="processType"
              clearable
              placeholder="请选择"
              popper-class="select"
              @change="getWidgetArray"
            >
              <el-option
                v-for="item in processTypeArray"
                :key="item.category"
                :label="item.name"
                :value="item.category"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="query-item">
          <div class="lable">故障类型：</div>
          <div class="search-input">
            <el-select
              v-model="WidgetType"
              clearable
              placeholder="请选择"
              popper-class="select"
              @change="getTableData"
            >
              <el-option
                v-for="item in WidgetArray"
                :key="item.code"
                :label="item.widget"
                :value="item.code"
              >
              </el-option>
            </el-select>
          </div>
        </div>
      </div>
      <div class="query-actions">
        <button class="btn green" @click="getTableData">搜索</button>
      </div>
    </div>
    <div class="table-box">
      <ComTable :data="tableData" height="85vh"></ComTable>
    </div>
    <div class="dialog-box">
      <el-dialog
        title="详细信息"
        v-model="showDetails"
        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 {
      processTypeArray: [],
      processType: "",
      WidgetArray: [],
      WidgetType: "",
      nameArray: [],
      nameType: "",
      showDetails: false,
      infoData: [],
      tableData: {
        column: [
          {
            name: "故障分类",
            field: "widget",
            width: '200px',
            is_num: false,
            is_light: false,
          },
          {
            name: "故障名称",
            field: "name",
            width: '350px',
            is_num: false,
            is_light: false,
          },
          {
            name: "故障原因",
            field: "cause",
            width: '500px',
            is_num: false,
            is_light: false,
          },
          {
            name: "处理方法",
            field: "process",
            is_num: false,
            is_light: false,
          },
          {
            name: "操作",
            field: "",
            width: '200px',
            is_num: false,
            is_light: false,
            template() {
              return "<el-button type='text' style='cursor: pointer;'>查看详情</el-button>";
            },
            click(e, row) {
              that.getDetails(row);
            },
          },
        ],
        data: [],
      },
    };
  },
  created() {
    this.getProcessType();
  },
  methods: {
    getProcessType() {
      const that = this;
      that.API.requestData({
        method: "GET",
        baseURL: "http://192.168.1.18:9002/",
        subUrl: "know/process/type",
        data: {},
        success(res) {
          that.processTypeArray = res.data;
          that.processType = res?.data[0]?.category;
          that.getWidgetArray();
        },
      });
    },
    getWidgetArray() {
      const that = this;
      that.WidgetType = [];
      if (that.processType) {
        that.API.requestData({
          method: "GET",
          baseURL: "http://192.168.1.18:9002/",
          subUrl: "know/process/widget/list",
          data: {
            category: that.processType,
          },
          success(res) {
            that.WidgetArray = res.data;
            that.WidgetType = res?.data[0]?.code;
            that.getTableData();
          },
        });
      }
    },
    getTableData() {
      const that = this;
      that.API.requestData({
        method: "GET",
        baseURL: "http://192.168.1.18:9002/",
        subUrl: "know/process/name/list",
        data: {
          category: that.processType,
          code: that.WidgetType,
        },
        success(res) {
          that.tableData.data = res.data;
        },
      });
    },
    getDetails(row) {
      const that = this;
      that.API.requestData({
        method: "GET",
        baseURL: "http://192.168.1.18:9002/",
        subUrl: "know/process/list",
        data: {
          id: row.id,
        },
        success(res) {
          console.log(111, res.data);
          if (res.data?.length) {
            that.infoData = res.data;
            that.showDetails = true;
          } else {
            that.BASE.showMsg({
              msg: "暂无数据",
            });
          }
        },
      });
    },
  },
};
</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>