sis_zhfx/src/views/device/faultmode.vue

<template>
  <div style="display: block">
    <button
       class="btn"
      style="margin-bottom: 10px"
      @click="handleEdit(state.addFormData)"
      >新增</button
    >
    <button
       class="btn"
      size="mini"
      type="primary"
      >导入</button
    >
    <button
       class="btn"
      size="mini"
      type="primary"
      @click="export2Excel"
      :disabled='state.faultmodeTableData.length==0'
      >导出</button
    >
    <el-table
      :data="state.faultmodeTableData"
      stripe
      style="width: 100%"
      height="700"
    >
      <el-table-column type="index" width="50" />
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="code" label="故障编码"></el-table-column>
      <el-table-column label="频度" width="50">
        <template #default="scope">
          {{ rank(scope.row.occurence) }}
        </template>
      </el-table-column>
      <el-table-column label="严酷度" width="70">
        <template #default="scope">
          {{ rank(scope.row.severity) }}
        </template>
      </el-table-column>
      <el-table-column label="难检度" width="70">
        <template #default="scope" >
          {{ rank(scope.row.detection) }}
        </template>
      </el-table-column>
      <el-table-column prop="cause" label="原因"></el-table-column>
      <el-table-column prop="effects" label="导致结果"></el-table-column>
      <el-table-column prop="measure" label="处理方法"></el-table-column>
      <el-table-column label="操作" width="180" align="center">
        <template #default="scope">
          <el-button
            type="text"
                  style="color: #B3BDC0"
            @click="handleEdit(scope.row)"
            >编辑</el-button
          >
          <el-button
            type="text"
                  style="color: #B3BDC0"
            @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 传感点编辑弹出框 -->
    <el-dialog v-model="editVisible" width="40%"  custom-class="modal">
      <el-form :model="editFormData" label-width="80px">
        <el-form-item label="故障编码">
          <el-input v-model="editFormData.code"></el-input>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="editFormData.name"></el-input>
        </el-form-item>
        <el-form-item label="导致结果">
          <el-input
            v-model="editFormData.effects"
            :rows="2"
            clearable
            type="textarea"
          ></el-input>
        </el-form-item>
        <el-form-item label="原因">
          <el-input
            v-model="editFormData.cause"
            :rows="2"
            clearable
            type="textarea"
          ></el-input>
        </el-form-item>
        <el-form-item label="处理方法">
          <el-input
            v-model="editFormData.measure"
            :rows="3"
            clearable
            type="textarea"
          ></el-input>
        </el-form-item>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="严酷度">
              <el-select v-model="editFormData.severity">
                <el-option
                  v-for="item in selectOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="频度">
              <el-select v-model="editFormData.occurence">
                <el-option
                  v-for="item in selectOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option
              ></el-select> </el-form-item
          ></el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12"
            ><el-form-item label="难检度">
              <el-select v-model="editFormData.detection">
                <el-option
                  v-for="item in selectOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option
              ></el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结构">
              <el-cascader
                v-model="editFormData.structurecode"
                :options="cascaderdata"
                :props="{ checkStrictly: true }"
                clearable
              /> </el-form-item
          ></el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <button   class="btn green" @click="editVisible = false">取 消</button>
          <button   class="btn green" type="primary" @click="saveEdit">确 定</button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, onMounted, reactive, inject, warn } from "vue";
import { ElMessageBox, ElMessage, ElLoading } from "element-plus";
import { outExportExcel }  from "@tools/excel/exportExcel";
import {
  faultmode_windturbine,
  faultmode_structurecode,
  faultmode_delete,
  faultmode_add_edit,
} from "@/api/api.js";
let cascaderdata = inject("cascaderdata");
console.warn(cascaderdata);
let editVisible = ref(false);
let editFormData = ref({});
onMounted(() => {
  getfaultmode();
});
const selectV = {
  1: "I",
  2: "II",
  3: "III",
  4: "IV",
  5: "V",
};
const selectOptions = [
  {
    label: "I",
    value: 1,
  },
  {
    label: "II",
    value: 2,
  },
  {
    label: "III",
    value: 3,
  },
  {
    label: "IV",
    value: 4,
  },
  {
    label: "V",
    value: 5,
  },
];
const rank = (v) => {
  return selectV[v] || "";
};
let state = reactive({
  faultmodeTableData: [],
  addFormData: {
    code: "",
    name: "",
    effects: "",
    cause: "",
    measure: "",
    severity: null,
    occurence: null,
    detection: null,
    deviceid: "windturbine",
    structurecode: "",
    models: null,
  },
});
// 新增 编辑
const handleEdit = (row) => {
  editFormData.value = row;
  editVisible.value = true;
};

// 测点 删除
const handleDelete = (row) => {
  // 二次确认删除
  ElMessageBox.confirm("确定要删除吗？", "提示", {
    type: "warning",
  })
    .then(async () => {
      console.warn(row);
      const res = await faultmode_delete(row.id);
      console.warn(res);
      if (res == 1) {
        ElMessage.success(`删除成功!`);
      } else {
        ElMessage.success("删除失败");
      }
      getfaultmode();
    })
    .catch(() => {});
};
// 保存编辑
const saveEdit = async () => {
  const res = await faultmode_add_edit(editFormData.value);
  console.warn(res);
  if (res.status == 20000) {
    ElMessage.success(`操作成功!`);
    editVisible.value = false;
    getfaultmode();
  } else {
    ElMessage.success(res.msg);
  }
};
// getData
const getfaultmode = async () => {
  const loading = ElLoading.service({
    lock: true,
    text: "数据加载中...",
    background: "rgba(0, 0, 0, 0.5)",
  });
  const res = await faultmode_windturbine();
  state.faultmodeTableData = res;
  loading.close();
  console.warn(res);
};
// 批量导出
const export2Excel = () => {
  const tableData = state.faultmodeTableData;
  const tableHeader = ["名称", "故障编码", "频度", "严酷度", "难检度", "原因", "导致结果", "处理方法"];
  const tableKey = ["name", "code", "occurence", "severity", "detection", "cause",'effects','measure'];
  outExportExcel(tableHeader,tableKey,tableData,'故障模式导出excel');
};
</script>
<style lang="scss" scoped>
</style>