fd_dwgz_zhyw_nx/src/views/IntegratedAlarm/deviceConfig/index.vue

<template>
  <div class="device-config">
    <div class="leftContent">
      <span>{{ pageTitle }}</span>
    </div>
    <div class="device-content">
      <div class="box-card-tree">
        <div class="btns">
          <el-button size="mini" class="buttons" round @click="handleTreeAdd()"
            >新增</el-button
          >
          <el-button
            size="mini"
            class="buttons"
            round
            @click="handleTreeDel()"
            :disabled="!state.isDel"
            >删除</el-button
          >
        </div>
        <div class="trees">
          <el-tree
            :data="state.treedata"
            :props="state.defaultProps"
            :default-expanded-keys="['23']"
            node-key="id"
            highlight-current
            :expand-on-click-node="false"
            @node-click="handleNodeClick"
          />
        </div>
      </div>
      <div class="box-card">
        <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>
      </div>

      <!-- tree add 弹出框 -->
      <el-dialog v-model="treeVisible" width="40%" destroy-on-close>
        <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="10"
              ><el-form-item label="序号">
                <el-input
                  v-model="state.treeAddFormData.orderno"
                ></el-input> </el-form-item
            ></el-col>
            <el-col :span="6">
              <el-form-item label="是否有效">
                <div style="height: 100%; display: flex; align-items: center">
                  <el-switch
                    v-model="state.treeAddFormData.enabled"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                  />
                </div> </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="footerButton">
            <el-button size="mini" round @click="treeVisible = false"
              >取 消</el-button
            >
            <el-button size="mini" round @click="saveTreeAdd">确 定</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, reactive, provide, computed, nextTick } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import faultmode from "@/views/IntegratedAlarm/deviceConfig/components/faultmode.vue";
import message from "@/views/IntegratedAlarm/deviceConfig/components/message.vue";
import ycpoint from "@/views/IntegratedAlarm/deviceConfig/components/ycpoint.vue";
import yxpoint from "@/views/IntegratedAlarm/deviceConfig/components/yxpoint.vue";
import custom from "@/views/IntegratedAlarm/deviceConfig/components/custom.vue";
import windturbine from "@/views/IntegratedAlarm/deviceConfig/components/windturbine.vue";
import { tree, treeDel, treeAdd } from "@/api/zhbj/index.js";
const pageTitle = "设备模型配置";
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="less" scoped>
.el-switch {
  display: block;
}
.device-config {
  height: 100%;
  width: 100%;
  padding: 10px 20px;
  .btns {
    display: flex;
    justify-content: flex-end;
    margin-right: 10px;
    //   position: absolute;
    //   right: 0;
    //   top: 53px;
    .el-button + .el-button {
      margin-left: 10px;
    }
  }

  .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;
    }
  }
  .leftContent {
    width: 242px;
    height: 41px;
    display: flex;
    align-items: center;
    background: url("~@/assets/imgs/title_left_bg1.png") no-repeat;

    span {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #05bb4c;
      margin-left: 25px;
    }
  }
  .device-content {
    height: calc(100% - 40px);
    width: 100%;
    display: flex;
    justify-content: space-between;
    .box-card-tree {
      width: 20%;
      margin-right: 20px;
      height: 100%;
      display: flex;
      flex-direction: column;
      background: #161f1e;
      padding: 10px;
      .btns {
        justify-content: flex-start;
      }
      .trees {
        height: calc(100% - 30px);
        overflow-y: auto;
        .el-tree {
          background: transparent !important;
        }
      }
    }
    .box-card {
      width: calc(80% - 20px);
      background: #161f1e;
      padding: 10px;
    }
  }
}
.el-tabs::v-deep {
  height: 100%;
  .el-tabs__content {
    height: calc(100% - 40px - 15px);
    .el-tab-pane {
      height: 100%;
    }
  }
  &.el-tabs--card > .el-tabs__header .el-tabs__nav {
    border: 1px solid #3b6c53;
  }
  &.el-tabs--card > .el-tabs__header .el-tabs__item {
    border-left: 1px solid #3b6c53;
  }
  &.el-tabs--card > .el-tabs__header .el-tabs__item:first-child {
    border-left: 0px;
  }
  &.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
    border-bottom-color: #05bb4c;
  }
  &.el-tabs--card > .el-tabs__header {
    border-bottom-color: #3b6c53;
  }
  .el-tabs__item {
    color: #3b6c53;
    &:hover,
    &.is-active {
      color: #05bb4c;
    }
  }
}
</style>