cac-fronted/src/views/alarmRules/index.vue

<template>
  <div class="alarmRulesBox">
    <div class="leftTree">
      <h3>设备列表</h3>
      <div class="treeBox">
        <div class="searchBar">
          <el-input
            placeholder="输入关键字进行过滤"
            v-model="filterText"
            prefix-icon="el-icon-search"
            clearable
          >
          </el-input>
        </div>
        <el-tree
          ref="tree"
          :data="paramTreeData"
          :props="defaultProps"
          node-key="id"
          :filter-node-method="filterNode"
          :default-expanded-keys="defaultExpandedKeys"
          highlight-current
          :current-node-key="currentNodekey"
          :expand-on-click-node="true"
          @node-click="handleNodeClick"
          default-expand-all
        >
          <template class="custom-tree-node" slot-scope="{ node, data }">
            <!-- <span>{{ data.name || data.mc }}</span> -->
            <span v-if="data.mc">
              <span>{{ data.mc }} </span>
            </span>
            <span v-else-if="data.name">
              <span class="el-icon-document" style="margin-right: 6px"> </span>
              <span :title="data.name">{{ data.name }} </span>
            </span>
          </template>
        </el-tree>
      </div>
    </div>
    <div class="paramTable">
      <div class="paramHead">
        <h3>设置告警规则</h3>
        <el-button icon="el-icon-plus" @click="addRules" type="primary">
          添加规则
        </el-button>
      </div>
      <div class="paramContain" v-if="rulesList.length !== 0">
        <div class="rulesBox">
          <el-table
            v-loading="rulesListLoading"
            :data="rulesList"
            stripe
            border
            style="width: 100%"
            height="calc(100% - 0px)"
          >
            <el-table-column prop="id" label="ID" width="50"> </el-table-column>
            <el-table-column prop="typePoint.fieldDesc" label="属性名称">
            </el-table-column>
            <el-table-column prop="comparatorDesc" label="比较器">
            </el-table-column>
            <el-table-column prop="operatorDesc" label="触发条件">
            </el-table-column>
            <el-table-column prop="threshold" label="阈值"> </el-table-column>
            <el-table-column prop="active" label="状态">
              <template slot-scope="scope">
                <span v-if="scope.row.active == 0"
                  ><el-tag type="danger">停用</el-tag>
                </span>
                <span v-else> <el-tag type="success">启用</el-tag> </span>
              </template>
            </el-table-column>
            <el-table-column prop="notifyCom" label="硬接点告警">
              <template slot-scope="scope">
                <span v-if="scope.row.notifyCom == 0"
                  ><el-tag type="danger">否</el-tag>
                </span>
                <span v-else> <el-tag type="success">是</el-tag> </span>
              </template>
            </el-table-column>
            <el-table-column prop="level" label="告警等级">
              <template slot-scope="scope">
                <span v-if="scope.row.level == 2"
                  ><el-tag type="danger">高</el-tag>
                </span>
                <span v-else-if="scope.row.level == 1">
                  <el-tag type="warning">中</el-tag>
                </span>
                <span v-else-if="scope.row.level == 0">
                  <el-tag type="info">低</el-tag>
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="lastDTime" label="最后数据时间">
            </el-table-column>
            <el-table-column label="操作" class-name="editClass" width="260px">
              <template slot-scope="scope">
                <el-link
                  type="primary"
                  @click="handleEditClick(scope.row)"
                  size="small"
                  icon="el-icon-document"
                  >编辑</el-link
                >
                <el-link
                  type="primary"
                  @click="handleCopyClick(scope.row)"
                  size="small"
                  icon="el-icon-document"
                  >复制规则</el-link
                >
                <el-link
                  type="danger"
                  @click="handleDeleteClick(scope.row)"
                  size="small"
                  icon="el-icon-delete"
                  >删除</el-link
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="paramContain" v-else>
        <el-empty description="请先添加规则"></el-empty>
      </div>
    </div>
    <addRules
      ref="addRulesRef"
      :title="title"
      :modevtype="modevtypeVal"
      :sensorId="sensorIdVal"
    ></addRules>
    <copyRules
      ref="copyRulesRef"
      :title="title"
      :typeId="typeIdVal"
      :sensorId="sensorIdVal"
    ></copyRules>
  </div>
</template>
<script>
import addRules from "./components/addRules";
import copyRules from "./components/copyRules";
import {
  getParamTreeApi,
  AlarmRulesListApi,
  AlarmRulesDeleteRules,
} from "@/utils/api/index";
export default {
  name: "alarmRules",
  components: {
    addRules,
    copyRules,
  },
  data() {
    return {
      filterText: "", //查询字段过滤
      paramTreeData: [], // 树状图数据
      defaultExpandedKeys: [],
      currentNodeData: [], //选中的数据
      currentId: "", //选择的id
      crrrentName: "",
      currentNodekey: "", //选中的节点
      modevtypeVal: "", //选中节点的modevType
      selectedNode: null, // 当前选中的节点
      defaultProps: {
        children: "children",
        label: "mc",
      },
      rulesList: [], //规则列表
      rulesListLoading: false,
      title: "",
      sensorIdVal: "",
      typeIdVal: "",
    };
  },
  watch: {
    filterText(newVal) {
      this.handleFilter(); // 当 filterText 发生变化时执行过滤操作
    },
  },
  computed: {},
  created() {
    this.getParamTreeList();
  },
  methods: {
    handleFilter() {
      // 在输入框输入完成后的500毫秒执行过滤节点方法
      setTimeout(() => {
        this.$refs.tree.filter(this.filterText);
      }, 500);
    },
    //树状图搜索
    filterNode(value, data, node) {
      console.log(value);
      // 如果什么都没填全部匹配全部返回
      if (!value) return true;
      console.log(data);
      this.searchName = data.mc + data.name;
      console.log(this.searchName);
      // 如果传入的value和data中的label相同，匹配成功
      if (this.searchName.indexOf(value) !== -1) {
        return true;
      }
    },
    getParamTreeList() {
      getParamTreeApi()
        .then((res) => {
          console.log(res);
          this.paramTreeData = res.data;
          this.defaultExpandedKeys = [this.paramTreeData[0].id];
          this.currentNodeData =
            this.paramTreeData[0].children[0].children[0].children[0];
          this.currentNodekey =
            this.paramTreeData[0].children[0].children[0].children[0].id;
          this.$nextTick(() => {
            this.$refs.tree.setCurrentKey(this.currentNodekey); //一定要加这个选中了否则样式没有出来
            this.handleNodeClick(this.currentNodeData);
          });
        })
        .catch((err) => {
          console.log(err); //代码错误、请求失败捕获
        });
    },
    handleNodeClick(data, node) {
      console.log(data);
      if (data.hasOwnProperty("children")) {
        this.$nextTick(() => {
          this.$refs.tree.setCurrentKey(this.currentNodeKey);
        });
        return;
      }
      this.currentNodeKey = data.id;
      this.modevtypeVal = data.typeId;
      this.sensorIdVal = data.id;
      this.typeIdVal = data.typeId;
      this.getRules();
    },
    //获取规则列表
    getRules() {
      this.rulesListLoading = true;
      AlarmRulesListApi({
        sensorId: this.currentNodeKey,
      })
        .then((res) => {
          console.log(res);
          this.rulesListLoading = false;
          this.rulesList = res.data;
        })
        .catch((err) => {
          console.log(err); //代码错误、请求失败捕获
        });
    },

    //新增规则
    addRules() {
      this.title = "添加规则";
      this.$refs.addRulesRef.display();
    },
    //修改
    handleEditClick(data) {
      this.title = "编辑规则";
      this.$refs.addRulesRef.display();
      this.$refs.addRulesRef.getdataform(data);
    },
    //复制规则
    handleCopyClick(data) {
      this.title = "复制规则";
      this.$refs.copyRulesRef.display();
      this.$refs.copyRulesRef.getdataform(data);
    },
    //删除规则
    handleDeleteClick(data) {
      this.$confirm("确定要删除该规则吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          AlarmRulesDeleteRules({ id: data.id }).then((res) => {
            if (res.success) {
              this.$message({
                duration: 1500,
                showClose: true,
                type: "success",
                message: "删除成功",
              });
              this.getRules(); //刷新
            } else {
              this.$message({
                duration: 1500,
                showClose: true,
                type: "error",
                message: res.errorMsg,
              });
            }
          });
        })
        .catch(() => {});
    },
  },
};
</script>
<style lang="less">
.alarmRulesBox {
  display: flex;
  height: 100%;
  .leftTree {
    min-width: 380px;
    max-width: 380px;
    height: 100%;
    overflow: auto;
    //border: 1px solid #fff;
    margin-right: 24px;
    background: rgba(8, 9, 36, 0.28);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: inset 0 4px 44px 0 #106cde;
    padding: 0px 12px;
    h3 {
      font-size: 14px;
      color: #fff;
      font-weight: normal;
      height: 40px;
      line-height: 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .treeBox {
      width: 100%;
      height: calc(100% - 48px);
      background-color: #fff;
      padding-top: 8px;
      .searchBar {
        width: 94%;
        margin: 0px auto;
        margin-bottom: 8px;
      }
      .el-tree {
        overflow-y: auto;
        overflow-x: hidden;
        height: calc(100% - 40px);
        .el-tree-node__content {
          height: 32px;
          font-size: 12px;
        }
        .custom-tree-node {
          color: #333;
          overflow: hidden;
          span {
            display: flex;
            display: inline-table;
            overflow: hidden;
            align-items: center;
          }
          .num {
            color: #169e8c;
          }
        }
      }

      .el-tree--highlight-current
        .el-tree-node.is-current
        > .el-tree-node__content {
        // 设置颜色
        color: #fff;
        background: #3889cf;
        .custom-tree-node {
          color: #fff;
          //overflow: hidden;
          span {
            display: flex;
            //overflow: hidden;
            align-items: center;
            .num {
              color: #fff;
            }
            .iconfont {
              //width: 30px;
              display: inline-table;
            }
          }
        }
      }
      .el-tree .el-tree-node__expand-icon.expanded {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }

      .el-tree .el-tree-node__expand-icon.expanded {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }

      /* //有子节点 且未展开 */
      .el-tree .el-icon-caret-right:before {
        content: "\e783";
        display: block;
        width: 16px;
        height: 16px;
        font-size: 16px;
        background-size: 16px;
        color: #333;
      }

      /* //有子节点 且已展开 */
      .el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
        content: "\e781";
        display: block;
        width: 16px;
        height: 16px;
        font-size: 16px;
        background-size: 16px;
        color: #333;
      }

      /* //没有子节点 */
      .el-tree .el-tree-node__expand-icon.is-leaf::before {
        background: #fff;
        content: "";
        display: block;
        width: 0px;
        height: 0px;
        font-size: 16px;
        background-size: 16px;
      }
    }
  }
  .paramTable {
    flex: 1;
    overflow-x: hidden;
    background: rgba(8, 9, 36, 0.28);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: inset 0 4px 44px 0 #106cde;
    padding: 0px 12px;
    .paramHead {
      height: 40px;
      line-height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      h3 {
        font-size: 14px;
        color: #fff;
        font-weight: normal;
        height: 40px;
        line-height: 40px;
      }
      .searchMain {
        display: flex;
        align-items: center;
      }
    }
    .paramContain {
      height: calc(100% - 66px);
      padding: 12px;
      //background: #fcc;
      background: #fff;
      border: 1px solid #dcdfe6;
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
      color: #333;
      .rulesBox {
        box-shadow: 1px 0 10px 1px rgba(0, 0, 0, 0.3);
        height: 100%;
        .el-table .el-table__cell {
          text-align: center;
        }
        .editClass {
          .el-link.el-link--primary {
            margin-right: 14px;
          }
        }
      }
      .el-empty {
        height: 100%;
      }
    }
  }
}
</style>