fd_dwgz_zhyw/src/views/IntegratedAlarm/deviceConfig/components/faultmode.vue

<template>
  <div style="width: 100%; height: 100%">
    <div class="btns">
      <el-button
        size="mini"
        class="buttons"
        round
        @click="handleEdit(state.addFormData)"
        >新增</el-button
      >
      <el-upload
        style="display: inline-block; margin: 0 10px 10px 10px"
        class="upload-demo"
        action="/sharding/device/faultmode/input"
        :show-file-list="false"
        :on-success="handleSuccess"
        :on-progress="handleProgress"
        :on-error="handleError"
      >
        <el-button
          size="mini"
          class="buttons"
          round
          :disabled="state.faultmodeTableData.length == 0"
          >导入</el-button
        >
      </el-upload>
      <el-button
        size="mini"
        class="buttons"
        round
        @click="export2Excel"
        :disabled="state.faultmodeTableData.length == 0"
        >导出</el-button
      >
    </div>

    <el-table
      :data="state.faultmodeTableData"
      stripe
      style="width: 100%"
      height="calc(100% - 38px)"
    >
      <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: #05bb4c"
            @click="handleEdit(scope.row)"
            >编辑</el-button
          >
          <el-button
            type="text"
            style="color: red"
            @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 传感点编辑弹出框 -->
    <el-dialog v-model="editVisible" width="40%">
      <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, emitPath: false }"
                clearable
              /> </el-form-item
          ></el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="footerButton">
          <el-button size="mini" round @click="editVisible = false"
            >取 消</el-button
          >
          <el-button size="mini" round type="primary" @click="saveEdit"
            >确 定</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, onMounted, reactive, inject, watch } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import { outExportExcel } from "@/tools/excel/exportExcel.js"; //引入文件
import {
  faultmode_windturbine,
  faultmode_structurecode,
  faultmode_delete,
  faultmode_add_edit,
} from "@/api/zhbj/index.js";
let cascaderdata = inject("cascaderdata");
let desc = inject("desc");
let treeId = inject("treeId");
watch(
  () => treeId,
  (val, old) => {
    getfaultmode(desc.value.code);
  },
  {
    deep: true,
  }
);
let editVisible = ref(false);
let editFormData = ref({});
onMounted(() => {
  getfaultmode(desc.value.code);
});
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 () => {
      const res = await faultmode_delete(row.id);
      if (res == 1) {
        ElMessage.success(`删除成功!`);
      } else {
        ElMessage.success("删除失败");
      }
      getfaultmode(desc.value.code);
    })
    .catch(() => {});
};
// 保存编辑
const saveEdit = async () => {
  const res = await faultmode_add_edit(editFormData.value);
  if (res.code === 200) {
    ElMessage.success(`操作成功!`);
    editVisible.value = false;
    getfaultmode(desc.value.code);
  } else {
    ElMessage.success(res.msg);
  }
};
// getData
const getfaultmode = async (code) => {
  const res = await faultmode_structurecode(code);
  state.faultmodeTableData = res;
};

// 批量导入
const handleSuccess = (response, file, fileList) => {
  ElMessage.success(response.msg);
  getfaultmode(desc.value.code);
};
const handleProgress = (response, file, fileList) => {};
const handleError = (response, file, fileList) => {
  ElMessage.success("导入失败!");
};
// 批量导出
const export2Excel = () => {
  const tableData = state.faultmodeTableData;
  // loading.close();
  ElMessage.success(`导出成功!`);
  const tableHeader = [
    "上级结构编码",
    "名称",
    "故障编码",
    "频度",
    "严酷度",
    "难检度",
    "原因",
    "导致结果",
    "处理方法",
  ];
  const tableKey = [
    "structurecode",
    "name",
    "code",
    "occurence",
    "severity",
    "detection",
    "cause",
    "effects",
    "measure",
  ];
  outExportExcel(tableHeader, tableKey, tableData, "故障模式导出excel");
};
</script>
<style lang="less" scoped>
.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;
  }
}
</style>