对接故障定义页面，修改故障树展示

wangyanshen

2023-02-01 dd6abcc7f7d3c42ef8cf82c545015f4f43379ae7

 src/views/main/istation/fault/faultSet.vue

@@ -5,6 +5,8 @@
      :treedata="treeData"
      :defaultSelectValue="defaultSelectValue"
      :selectData="selectData"
      :selectProps="selectProps"
      :defaultProps="treeProps"
      :selectIsShow="true"
      :defaultExpandedKeys="defaultExpandedKeys"
      :currentNodeKey="currentNodeKey"
@@ -15,15 +17,22 @@
    >
      <template v-slot:titleright>
        <div class="titleSlotRight">
          <fks-button icon="fks-icon-plus" @click="addGroup"></fks-button>
          <fks-button
            icon="fks-icon-plus"
            type="text"
            style="margin-right: 5px"
            @click="addFaultGroupFormVisible = true"
          ></fks-button>
        </div>
      </template>
    </left-tree>
    <div class="boxright">
      <titleBoxVue style="background-color:#fff;" :title="titleName">
      <titleBoxVue style="background-color: #fff" :title="titleName">
        <template v-slot:right>
          <div class="titleSlotRight">
            <fks-button icon="fks-icon-plus" type="primary" @click="add">添加</fks-button>
            <fks-button icon="fks-icon-plus" type="primary" @click="addFaultFormVisible = true"
              >添加</fks-button
            >
          </div>
        </template>
      </titleBoxVue>
@@ -34,23 +43,19 @@
        stripe
        tooltip-effect="dark"
        @selection-change="handleSelectionChange"
        style="width: 100%;height: calc(100% - 50px);margin-top: 10px;"
        style="width: 100%; height: calc(100% - 50px); margin-top: 10px"
      >
        <fks-table-column type="selection"></fks-table-column>
        <fks-table-column prop="name" label="故障名称" width="180">
        <fks-table-column prop="Name" label="故障名称" width="180">
        </fks-table-column>
        <fks-table-column prop="code" label="故障编码" width="180">
        <fks-table-column prop="Code" label="故障编码" width="180">
        </fks-table-column>
        <fks-table-column prop="labelName" label="标签名称" width="180">
        <fks-table-column prop="TagName" label="标签名称" width="180">
        </fks-table-column>
        <fks-table-column prop="note" label="说明"> </fks-table-column>
        <fks-table-column prop="Description" label="说明"> </fks-table-column>
        <fks-table-column label="操作" width="100">
          <template slot-scope="scope">
            <fks-button
              icon="fks-icon-edit"
              @click="editFault(scope.row)"
              type="text"
              size="small"
            <fks-button @click="editFault(scope.row)" type="text" size="small"
              >编辑</fks-button
            >
          </template>
@@ -62,14 +67,24 @@
        width="400px"
        :visible.sync="addFaultFormVisible"
      >
        <fks-form :model="addFaultForm" label-width="80px">
          <fks-form-item label="故障名称">
        <span slot="title">
          <fks-button icon="fks-icon-plus" type="text"></fks-button>
          &nbsp;
          <span class="fks-dialog__title">添加故障</span>
        </span>
        <fks-form
          :model="addFaultForm"
          ref="addFaultList"
          :rules="addFaultFormRules"
          label-width="80px"
        >
          <fks-form-item label="故障名称" prop="name">
            <fks-input
              v-model="addFaultForm.name"
              autocomplete="off"
            ></fks-input>
          </fks-form-item>
          <fks-form-item label="故障编码">
          <fks-form-item label="故障编码" prop="code">
            <fks-input
              v-model="addFaultForm.code"
              autocomplete="off"
@@ -93,7 +108,7 @@
        </fks-form>
        <div slot="footer" class="dialog-footer">
          <fks-button @click="addFaultFormVisible = false">取 消</fks-button>
          <fks-button type="primary" @click="addFaultFormVisible = false"
          <fks-button type="primary" @click="addFaultList('addFaultList')"
            >确 定</fks-button
          >
        </div>
@@ -104,14 +119,24 @@
        width="400px"
        :visible.sync="editFaultFormVisible"
      >
        <fks-form :model="editFaultForm" label-width="80px">
          <fks-form-item label="故障名称">
        <span slot="title">
          <fks-button icon="fks-icon-edit" type="text"></fks-button>
          &nbsp;
          <span class="fks-dialog__title">编辑故障</span>
        </span>
        <fks-form
          :model="editFaultForm"
          ref="editFaultList"
          :rules="editFaultFormRules"
          label-width="80px"
        >
          <fks-form-item label="故障名称" prop="name">
            <fks-input
              v-model="editFaultForm.name"
              autocomplete="off"
            ></fks-input>
          </fks-form-item>
          <fks-form-item label="故障编码">
          <fks-form-item label="故障编码" prop="code">
            <fks-input
              v-model="editFaultForm.code"
              autocomplete="off"
@@ -135,7 +160,7 @@
        </fks-form>
        <div slot="footer" class="dialog-footer">
          <fks-button @click="editFaultFormVisible = false">取 消</fks-button>
          <fks-button type="primary" @click="editFaultFormVisible = false"
          <fks-button type="primary" @click="editFaultList('editFaultList')"
            >确 定</fks-button
          >
        </div>
@@ -146,10 +171,47 @@
        width="400px"
        :visible.sync="addFaultGroupFormVisible"
      >
        <fks-form :model="addFaultGroupForm" label-width="80px">
          <fks-form-item label="名称">
        <span slot="title">
          <fks-button icon="fks-icon-plus" type="text"></fks-button>
          &nbsp;
          <span class="fks-dialog__title">添加故障分组</span>
        </span>
        <fks-form
          ref="addFaultGroupForm"
          :model="addFaultGroupForm"
          :rules="addFaultGroupFormRules"
          label-width="80px"
        >
          <fks-form-item label="名称" prop="name">
            <fks-input
              v-model="addFaultGroupForm.name"
              autocomplete="off"
            ></fks-input>
          </fks-form-item>
          <fks-form-item label="父节点">
            <treeSelect
              :treeProps="selectProps"
              :options="treeData"
              v-model="addFaultGroupTreeSelectID"
              :clearable="true"
              :accordion="false"
              :expandNode="false"
              :isleafclose="false"
              size="small"
              width="100%"
              @getValue="addFaultGroupChange"
            ></treeSelect>
          </fks-form-item>

          <fks-form-item label="排序">
            <fks-input
              v-model="addFaultGroupForm.sort"
              autocomplete="off"
            ></fks-input>
          </fks-form-item>
          <fks-form-item label="标识">
            <fks-input
              v-model="addFaultGroupForm.tagname"
              autocomplete="off"
            ></fks-input>
          </fks-form-item>
@@ -167,7 +229,7 @@
          <fks-button @click="addFaultGroupFormVisible = false"
            >取 消</fks-button
          >
          <fks-button type="primary" @click="addFaultGroupFormVisible = false"
          <fks-button type="primary" @click="addFaultGroup('addFaultGroupForm')"
            >确 定</fks-button
          >
        </div>
@@ -177,10 +239,27 @@
        width="400px"
        :visible.sync="editFaultGroupFormVisible"
      >
        <fks-form :model="editFaultGroupForm" label-width="80px">
          <fks-form-item label="名称">
        <span slot="title">
          <fks-button icon="fks-icon-edit" type="text"></fks-button>
          &nbsp;
          <span class="fks-dialog__title">编辑故障分组</span>
        </span>
        <fks-form
          :model="editFaultGroupForm"
          :rules="editFaultGroupFormRules"
          ref="editFaultGroupForm"
          label-width="80px"
        >
          <fks-form-item label="名称" prop="name">
            <fks-input
              v-model="editFaultGroupForm.name"
              autocomplete="off"
            ></fks-input>
          </fks-form-item>

          <fks-form-item label="标识">
            <fks-input
              v-model="editFaultGroupForm.tagname"
              autocomplete="off"
            ></fks-input>
          </fks-form-item>
@@ -198,7 +277,9 @@
          <fks-button @click="editFaultGroupFormVisible = false"
            >取 消</fks-button
          >
          <fks-button type="primary" @click="editFaultGroupFormVisible = false"
          <fks-button
            type="primary"
            @click="editFaultGroup('editFaultGroupForm')"
            >确 定</fks-button
          >
        </div>
@@ -210,7 +291,18 @@
  <script>
import { getDay } from "@/utils/istation/common";
import titleBoxVue from "@/views/main/components/titleBox.vue";
import leftTree from "@/views/main/components/leftTreeByData.vue";
import treeSelect from "@/views/main/components/treeSelect2.vue";

import leftTree from "@/views/main/components/leftTreeOrTreeSelectByData.vue";
import {
  GetTreeListByObjectType,
  GetFaultTreeGroupByCatalogID,
  AddFaultTreeGroup,
  EditFaultTreeGroup,
  GetFaultTreeListByGroupID,
  AddFaultTreeList,
  EditFaultTreeList,
} from "@/api/fault";
import FileSaver from "file-saver";
import XLSX from "xlsx";
const tableData = [
@@ -260,11 +352,92 @@
    ],
  },
];

/* list数据转成 dtree使用格式  */
function treeCorprationDataFormat(data) {
  if (!Array.isArray(data)) {
    return data;
  }
  let tree = [];
  const listToTree = (list, tree, parentId, length) => {
    list.forEach((org) => {
      // 判断是否为父级菜单
      if (length == 0) {
        if (org.ParentIds.length == 0) {
          let child = org;
          child.Children = [];
          // 迭代 list， 找到当前菜单相符合的所有子菜单
          listToTree(list, child.Children, org.ID, org.ParentIds.length + 1);
          // 删掉不存在 children 值的属性
          if (child.Children.length <= 0) {
            delete child.Children;
          }
          // 加入到树中
          tree.push(child);
        }
      } else {
        if (
          org.ParentIds.length == length &&
          org.ParentIds.indexOf(parentId) != -1
        ) {
          let child = org;
          child.Children = [];
          // 迭代 list， 找到当前菜单相符合的所有子菜单
          listToTree(list, child.Children, org.ID, org.ParentIds.length + 1);
          // 删掉不存在 children 值的属性
          if (child.Children.length <= 0) {
            delete child.Children;
          }
          // 加入到树中
          tree.push(child);
        }
      }
    });
  };
  listToTree(data, tree, 0, 0);
  return tree;
}

/* 根据id获取树id  用于获取默认选中高亮  */
function getTreeIdById(list, ID) {
  let obj = [];
  const getDtreeId = (obj, list, ID) => {
    if (ID != null && +ID > 0) {
      for (var i = 0; i < list.length; i++) {
        var item = list[i];
        if (item.Children == null) {
          item.Children = [];
        }
        if (item.ID == ID && item.Children.length == 0) {
          obj.push(item);
          break;
        }
        if (item.Children.length != 0) {
          getDtreeId(obj, item.Children, ID);
        }
      }
    } else {
      if (list[0].Children == null) {
        list[0].Children = [];
      }
      if (list[0].Children.length == 0) {
        obj.push(list[0]);
      }
      if (list[0].Children.length != 0) {
        getDtreeId(obj, list[0].Children, ID);
      }
    }
  };
  getDtreeId(obj, list, ID);
  return obj;
}

export default {
  name: "vibrationDemo",
  components: {
    titleBoxVue,
    leftTree,
    treeSelect,
  },
  data() {
    return {
@@ -276,19 +449,10 @@
      addFaultGroupFormVisible: false,
      editFaultGroupFormVisible: false,
      treeData: treeData,
      currentNodeKey: "3",
      currentNodeKey: "",
      defaultExpandedKeys: ["s1"],
      defaultSelectValue: "1",
      selectData: [
        {
          value: "1",
          label: "泵",
        },
        {
          value: "2",
          label: "电机",
        },
      ],
      selectData: [],
      gridData: [
        {
          date: "2016-05-02",
@@ -317,58 +481,349 @@
        labelName: "",
        note: "",
      },
      addFaultFormRules: {
        name: [{ required: true, message: "请输入名称", trigger: "change" }],
        code: [{ required: true, message: "请输入名称", trigger: "change" }],
        labelName: [
          { required: true, message: "请输入名称", trigger: "change" },
        ],
      },
      editFaultForm: {
        name: "",
        code: "",
        labelName: "",
        note: "",
      },
      editFaultFormRules: {
        name: [{ required: true, message: "请输入名称", trigger: "change" }],
        code: [{ required: true, message: "请输入名称", trigger: "change" }],
        labelName: [
          { required: true, message: "请输入名称", trigger: "change" },
        ],
      },
      addFaultGroupForm: {
        name: "",
        sort: 0,
        parentid: "",
        note: "",
        tagname: "",
      },
      addFaultGroupFormRules: {
        name: [{ required: true, message: "请输入名称", trigger: "change" }],
      },
      editFaultGroupForm: {
        name: "",
        tagname: "",
        note: "",
      },
      editFaultGroupFormRules: {
        name: [{ required: true, message: "请输入名称", trigger: "change" }],
      },
      /**下拉树 默认属性配置 */
      selectProps: {
        id: "ID",
        label: "Name",
        children: "Children",
      },
      /**树 默认属性配置 */
      treeProps: {
        id: "ID",
        label: "Name",
        children: "Children",
      },
      CorpID: 13,
      /**当前选中结构类型id */
      currentCatalogID: "",
      /**添加故障组 treeselect 选中id */
      addFaultGroupTreeSelectID: "",
      /**添加故障组 treeselect 选中node */
      addFaultGroupTreeSelectNode: null,
    };
  },
  created() {},
  mounted() {},
  mounted() {
    this.getLeftTreeSelectData();
  },
  computed: {},
  watch: {},
  methods: {
    selectchange(value) {
      console.log(value, 186);
    /**获取下拉选择数据 */
    getLeftTreeSelectData() {
      GetTreeListByObjectType({ CorpID: this.CorpID, ObjectType: "设备" })
        .then((res) => {
          console.log(res, 433);
          let resdata = [];
          if (res && res.Data) {
            resdata = res.Data;
          }
          this.selectData = resdata;
          this.defaultSelectValue = resdata[0]?.ID;
          this.currentCatalogID = this.defaultSelectValue;
          this.getLeftTreeData();
        })
        .catch((err) => {});
    },
    /**获取树结构数据 */
    getLeftTreeData() {
      let CatalogID = this.currentCatalogID;
      this.currentNodeKey = "";
      if (!CatalogID) {
        this.treeData = [];
        return;
      }
      GetFaultTreeGroupByCatalogID({
        CatalogID: CatalogID,
        CorpID: this.CorpID,
      }).then((res) => {
        console.log(res, 379);
        let resdata = [];
        if (res && res.Data) {
          resdata = res.Data;
        }
        let treedata = treeCorprationDataFormat(resdata);
        this.defaultExpandedKeys = [treedata[0]?.ID];
        let currentID = getTreeIdById(treedata, "");
        this.currentNodeKey = currentID[0]?.ID;
        this.titleName = currentID[0]?.Name;
        this.treeData = treedata;
        this.getTableData();
      });
    },
    /**下拉选择变化 */
    selectchange(label, node) {
      console.log(label, node, 186);
      if (!node) {
        this.currentCatalogID = "";
        return;
      }
      let CatalogID = node?.ID;
      this.currentCatalogID = CatalogID;
      this.getLeftTreeData();
    },
    /**树点击事件 */
    handleNodeClick(data) {
      console.log(data, 74);
      this.titleName = data.label;
      this.titleName = data.Name;
      this.currentNodeKey = data?.ID;
      this.getTableData();
    },

    getTableData(id) {},
    getTableData() {
      let GroupID = this.currentNodeKey;
      console.log(GroupID, 589);
      if (!GroupID) {
        this.tableData = [];
        return;
      }
      GetFaultTreeListByGroupID({ CorpID: this.CorpID, GroupID: GroupID }).then(
        (res) => {
          console.log(res, 581);
          let resdata = [];
          if (res && res.Data) {
            resdata = res.Data;
          }

          this.tableData = resdata;
        }
      );
    },
    /**表格复选框变化事件 */
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    addGroup() {
      this.addFaultGroupFormVisible = true;
    
    /**添加故障组 下拉树变化事件 */
    addFaultGroupChange(label, node) {
      this.addFaultGroupTreeSelectNode = node;
    },
    add() {
      this.addFaultFormVisible = true;
    /**提交故障树组 */
    addFaultGroup(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.addFaultGroupFormVisible = false;
          let formdata = this.addFaultGroupForm;

          let ParentIds = [];
          if (this.addFaultGroupTreeSelectNode) {
            ParentIds = this.addFaultGroupTreeSelectNode.ParentIds;
            ParentIds.push(this.addFaultGroupTreeSelectNode.ID);
          }

          let postdata = {
            CorpID: this.CorpID,
            CatalogID: this.currentCatalogID,
            ParentIds: ParentIds,
            Name: formdata.name,
            Flags: [""],
            TagName: formdata.tagname,
            SortCode: formdata.sort,
            Description: formdata.note,
          };
          console.log(postdata, this.addFaultGroupTreeSelectNode, 489);

          // return;
          AddFaultTreeGroup(postdata).then((res) => {
            console.log(res, 441);

            if (res.Data) {
              this.getLeftTreeData();
              this.$message({
                message: "添加成功",
                type: "success",
              });
            } else {
              this.$message({
                message: "添加失败",
                type: "error",
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    addFaultList(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.addFaultFormVisible = false;
          let formdata = this.addFaultForm;

          let postdata = {
            CorpID: this.CorpID,
            GroupID: this.currentNodeKey,
            Code: formdata.code,
            Name: formdata.name,
            Flags: [],
            TagName: formdata.labelName,
            SortCode: 0,
            Description: formdata.note,
          };
          console.log(postdata, 682);

          // return;
          AddFaultTreeList(postdata).then((res) => {
            console.log(res, 686);

            if (res.Data) {
              this.getTableData();
              this.$message({
                message: "添加成功",
                type: "success",
              });
            } else {
              this.$message({
                message: "添加失败",
                type: "error",
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    
    /**树节点编辑事件 */
    treeEdit(data, node) {
      // console.log(data,node,358)
      console.log(data, node, 358);
      this.editFaultGroupFormVisible = true;
      this.editFaultGroupForm.name = data.label;
      this.editFaultGroupForm.name = data.Name;
      this.editFaultGroupForm.tagname = data.TagName;
      this.editFaultGroupForm.note = data.Description;
      this.editFaultGroupForm.data = data;
    },
    editFaultGroup(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.editFaultGroupFormVisible = false;
          let formdata = this.editFaultGroupForm;

          console.log(formdata, 653);
          let postdata = {
            ID: formdata.data.ID,
            CorpID: this.CorpID,
            Name: formdata.name,
            Flags: [""],
            TagName: formdata.tagname,
            Description: formdata.note,
          };
          console.log(postdata, this.addFaultGroupTreeSelectNode, 489);

          // return;
          EditFaultTreeGroup(postdata).then((res) => {
            console.log(res, 666);

            if (res.Data) {
              this.getLeftTreeData();
              this.$message({
                message: "编辑成功",
                type: "success",
              });
            } else {
              this.$message({
                message: "编辑失败",
                type: "error",
              });
            }
          });
        } else {
          // console.log("error submit!!");
          return false;
        }
      });
    },
    /**表格编辑事件 */
    editFault(row) {
      this.editFaultFormVisible = true;
      this.editFaultForm.name = row.name;
      this.editFaultForm.code = row.code;
      this.editFaultForm.labelName = row.labelName;
      this.editFaultForm.note = row.note;
      this.editFaultForm.name = row.Name;
      this.editFaultForm.code = row.Code;
      this.editFaultForm.labelName = row.TagName;
      this.editFaultForm.note = row.Description;
      this.editFaultForm.data = row;
    },
    editFaultList(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.editFaultFormVisible = false;
          let formdata = this.editFaultForm;

          console.log(formdata, 653);
          let postdata = {
            ID: formdata.data.ID,
            CorpID: this.CorpID,
            Code: formdata.code,
            Name: formdata.name,
            Flags: [],
            TagName: formdata.labelName,
            Description: formdata.note,
          };
          console.log(postdata,  809);

          // return;
          EditFaultTreeList(postdata).then((res) => {
            // console.log(res, 813);

            if (res.Data) {
              this.getTableData();
              this.$message({
                message: "编辑成功",
                type: "success",
              });
            } else {
              this.$message({
                message: "编辑失败",
                type: "error",
              });
            }
          });
        } else {
          // console.log("error submit!!");
          return false;
        }
      });
    },
  },
};