alertGuardian-JinNeng/src/pages/baseData/device.vue

<template>
  <div class="main">
    <el-card class="box-card-tree">
      <el-button size="mini" type="primary" @click="handleTreeAdd()"
        >新增</el-button
      >
      <el-button
        size="mini"
        type="primary"
        @click="handleTreeDel()"
        :disabled="!state.isDel"
        >删除</el-button
      >
      <el-tree
        style="margin-top: 10px"
        :data="state.treedata"
        :props="state.defaultProps"
        :default-expanded-keys="['23']"
        node-key="id"
        highlight-current
        :expand-on-click-node="false"
        @node-click="handleNodeClick"
      />
    </el-card>
    <el-card class="box-card" style="overflow-y: auto; max-height: 90vh">
      <el-tabs type="card">
        <!-- <el-tab-pane label="传感点">
          <point />
        </el-tab-pane> -->
        <el-tab-pane label="遥测点">
          <ycpoint />
        </el-tab-pane>
        <el-tab-pane label="遥信点">
          <yxpoint />
        </el-tab-pane>


        <el-tab-pane label="设备报警">
          <windturbine />
        </el-tab-pane>
        <el-tab-pane label="故障预警">
          <custom />
        </el-tab-pane>


        <el-tab-pane label="故障原因">
          <faultmode />
        </el-tab-pane>

        <el-tab-pane label="基本信息">
          <message />
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <!-- tree add 弹出框 -->
    <el-dialog v-model="treeVisible" width="40%">
      <el-form :model="state.treeAddFormData" label-width="80px">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="结构编码">
              <el-input
                v-model="state.treeAddFormData.code"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="上级节点" label-width="100px">
              <el-cascader
                v-model="state.treeAddFormData.parentcode"
                :options="state.cascaderdata"
                :props="{ checkStrictly: true, emitPath: false }"
                :show-all-levels="false"
                clearable
              /> </el-form-item
          ></el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="结构名称">
              <el-input
                v-model="state.treeAddFormData.name"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="结构英文名称" label-width="100px">
              <el-input
                v-model="state.treeAddFormData.enname"
              ></el-input> </el-form-item
          ></el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12"
            ><el-form-item label="序号">
              <el-input
                v-model="state.treeAddFormData.orderno"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="4">
            <el-form-item label="是否有效">
              <el-switch
                v-model="state.treeAddFormData.enabled"
                active-color="#13ce66"
                inactive-color="#ff4949"
              /> </el-form-item
          ></el-col>
          <el-col :span="8">
            <el-form-item label="设备ID">
              <el-input
                v-model="state.treeAddFormData.deviceid"
                disabled
              ></el-input> </el-form-item
          ></el-col>
        </el-row>
        <el-form-item label="描述">
          <el-input
            v-model="state.treeAddFormData.description"
            :rows="4"
            clearable
            type="textarea"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="treeVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveTreeAdd">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, onMounted, reactive, provide, computed, nextTick } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import faultmode from "./fan_components/faultmode.vue";
import message from "./fan_components/message.vue";
import ycpoint from "./fan_components/ycpoint.vue";
import yxpoint from "./fan_components/yxpoint.vue";
import custom from "./fan_components/custom.vue";
import windturbine from "./fan_components/windturbine.vue";
import { tree, treeDel, treeAdd } from "/@/api/api.js";
let treeVisible = ref(false);
let editFormData = ref({});
onMounted(async () => {
  await getData();
});
let state = reactive({
  isDel: false, //是否能被删除
  treedata: [],
  cascaderdata: [],
  defaultProps: {
    children: "children",
    label: (a) => {
      return a.node.name;
    },
  },
  textarea: "",
  addFormData: {
    categorydata: "AI",
    categoryres1: null,
    categoryres2: null,
    categoryres3: null,
    categoryres4: null,
    categoryres5: null,
    categorysci: null,
    categorysys: null,
    description: null,
    deviceid: "windturbine",
    enname: null,
    id: null,
    metriccode: "",
    name: "",
    structurecode: "101010205",
    unitname: null,
    unitnamecn: null,
    deviceModelMetrics: [],
  },
  treeAddFormData: {
    code: "",
    parentcode: "",
    deviceid: "windturbine",
    name: "",
    enname: "",
    description: "",
    orderno: "",
    enabled: true,
  },
  options: [
    {
      value: "AI",
      label: "AI",
    },
    {
      value: "DI",
      label: "DI",
    },
    {
      value: "CI",
      label: "CI",
    },
  ],
  desc: {
    code: "",
    parentcode: "",
    deviceid: "",
    name: "",
    enname: "",
    description: "",
    orderno: "",
    enabled: true,
  },
  treeDelVal: "",
  deviceModel: [],
  deviceModelSel: "",
  treeId: "",
});

// 父子传参
provide(
  "cascaderdata",
  computed(() => state.cascaderdata)
);
provide(
  "desc",
  computed(() => state.desc)
);
provide(
  "treeId",
  computed(() => state.treeId)
);

// tree click
const handleNodeClick = (data) => {
  state.isDel = data.children ? false : true;
  state.treeId = data.id;
  state.desc = data.node;
  state.addFormData.structurecode = data.node.code;
};

// tree add
const handleTreeAdd = () => {
  treeVisible.value = true;
};
// tree Del
const handleTreeDel = () => {
  if (!state.isDel) {
    ElMessage.error(`不能删除该节点!!`);
    return;
  }
  ElMessageBox.confirm(`确定要删除 ${state.desc.name} 吗？`, "提示", {
    type: "warning",
  })
    .then(async () => {
      const res = await treeDel(state.desc.id);
      if (res == 1) {
        ElMessage.success(`删除成功!`);
        getData();
      } else {
        ElMessage.warning(`删除失败!`);
      }
    })
    .catch(() => {});
};
// delTreeBtn
const delTreeBtn = async () => {
  const res = await treeDel(state.treeDelVal);
  if (res == 1) {
    ElMessage.success(`删除成功!`);
    getData();
  } else {
    ElMessage.warning(`删除失败!`);
  }
  state.treeDelVal = "";
};
//保存tree add
const saveTreeAdd = async () => {
  const res = await treeAdd(state.treeAddFormData);
  if (res.status == 20000) {
    ElMessage.success(`操作成功!`);
    treeVisible.value = false;
    getData();
  } else {
    ElMessage.warning(res.msg);
  }
};

// getData
const getData = async () => {
  const res = await tree();
  state.treedata = res.children.reverse();
  state.cascaderdata = cascaderforEach(res);
};

// 递归解析基础数据
const cascaderforEach = (val) => {
  if (val.children != null) {
    val.children.forEach((v) => {
      v["value"] = v.node.code;
      v["label"] = v.node.name;
      v["id"] = v.node.id;
      cascaderforEach(v);
    });
    return val.children;
  }
};
</script>
<style lang="scss" scoped>
.main {
  display: flex;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  justify-content: space-between;
  .box-card-tree {
    width: 20%;
    margin-right: 1%;
    overflow: auto;
  }
  .box-card {
    flex: 1;
    .desc {
      display: flex;
      margin-bottom: 30px;
      span {
        width: 100px;
      }
    }
  }
}
</style>
<style lang="scss" >
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  background-color: #bbdbff !important;
}
.deviceModelClass {
  .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 40px;
  }
  .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 40px;
  }
}
</style>