ioc-admin-ui/src/views/deviceManagement/deviceWarning.vue

<template>
  <div class="container">
    <div class="left-pane">
      <el-input placeholder="告警类别" v-model="filterText" class="left-input">
      </el-input>
      <el-tree
        ref="tree"
        :data="data"
        :props="defaultProps"
        node-key="id"
        default-expand-all
        :filter-node-method="filterNode"
        @node-click="handleNodeClick"
      >
      <span slot-scope="{node,data}">
                    <el-image :src="data.url"></el-image>
                    <span style="padding-left: 10px; vertical-align: text-bottom;">{{ node.label }}</span>
                    <span class="operate_btns">
                        <dropdown :events="data.id ? menuEvents : subMenuEvents" :data="{ node, data }"
                            @itemClick="dropDownClick"></dropdown>
                    </span>
                </span>
      </el-tree>
      <el-button class="newWarning" style="color: #fff; background: #3da0d6" @click="newAlarmType"
        ><i class="el-icon-s-order"></i>新建告警类别</el-button
      >
    </div>
    <div class="right-pane">
      <div class="right-pane-inner">
        <div class="top">
          <el-button @click="batchDelete" class="delete-btn"
            >批量删除</el-button
          >
          <el-input
            class="search-input"
            v-model="searchInput"
            placeholder="请输入搜索内容"
          >
            <template slot="append">
              <i
                class="el-icon-search"
                style="cursor: pointer"
                @click="searchEvent"
              ></i>
            </template>
          </el-input>
        </div>
        <div class="center">
          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            :header-cell-style="{ textAlign: 'center' }"
            :cell-style="{ textAlign: 'center' }"
            style="width: 100%"
            height="500"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="50"> </el-table-column>
            <el-table-column type="index" width="80" label="序号">
            </el-table-column>
            <el-table-column prop="deviceType" label="设备类别">
            </el-table-column>
            <el-table-column prop="devicewarningType" label="涵盖设备警告类别">
            </el-table-column>
            <el-table-column prop="Respon" label="责任人"> </el-table-column>
            <el-table-column prop="operation" label="操作">
              <el-button size="mini" type="text" style="color: #2ea8e6"
                >查看</el-button
              >
              <el-button size="mini" type="text" style="color: #2ea8e6"
                >编辑</el-button
              >
              <el-button size="mini" type="text" style="color: #2ea8e6"
                >删除</el-button
              >
            </el-table-column>
          </el-table>
        </div>
        <div class="bottom">
          <page :paginationData="paginationData"></page>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import checkbox from "@/components/Checkbox/index";
import page from "@/components/pagination/index";
import dropdown from '@/components/Dropdown/index';
export default {
  components: { checkbox, page, dropdown },
  data() {
    return {
      searchInput: "",
      filterText: "",
      input: "",
      data: [
        {
          id:1,
          label: "紧急告警",
          children: [],
        },
        {
          id:2,
          label: "重要告警",
        },
        {
          id:3,
          label: "一般告警",
        },
      ],
      menuEvents: [
                { label: '新建', funcName: 'addNode' }
            ],
            subMenuEvents: [
                { label: '新建', funcName: 'addNode' },
                { label: '上移', funcName: 'moveUp' },
                { label: '下移', funcName: 'moveDown' },
                { label: '编辑', funcName: 'editNode' },
                { label: '删除', funcName: 'removeNode' }
            ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      tableData: [
        {
          deviceType: "摄像头",
          devicewarningType: "[设备离线][设备xxx]",
          Respon: "张三",
        },
        {
          deviceType: "摄像头",
          devicewarningType: "[设备离线][设备xxx]",
          Respon: "张三",
        },
        {
          deviceType: "摄像头",
          devicewarningType: "[设备离线][设备xxx]",
          Respon: "张三",
        },
      ],
      multipleSelection: [],
      show: true,
      paginationData: {
        pageSize: 10,
        pagerCount: 5,
        currentPage: 1,
        pageSizes: [5, 10, 20, 30],
        total: 30,
        currentChange: (val) => {
          this.getTableData(val);
        },
        handleSizeChange: (val) => {
          this.handleSizeChange(val);
        },
      },
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  methods: {
    // 新建告警类别
    newAlarmType() {},
    handleClick() {
      //
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    handleNodeClick() {
      //
    },
    handleSelectionChange() {
      //
    },
    getTableData() {},
    handleSizeChange() {},
    batchDelete() {},
    searchEvent() {
      console.log("查询");
    },
  },
};
</script>
<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 1);
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  //   text-align: center;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;

  .left-pane {
        width: 300px;
        padding: 15px;
        height: calc(100% - 30px);

        .el-tree {
          
            margin-top: 10px;
            height: calc(98% - 30px);
            background-color: #FAFAFA;


            /deep/.el-tree-node__content {
                align-items: center;
                height: 30px;
                cursor: pointer;
                font-size: 16px;
                position: relative;
                color: #999999;
                padding-top: 10px;
                padding-left: 30px !important;

                .operate_btns {
                    position: absolute;
                    right: 20px;
                    display: none;
                }

                &:hover,
                :focus-within {
                    background-color: #f7fbff;

                    .operate_btns {
                        display: inline;
                    }
                }
            }

            /deep/.el-tree-node__children {
                .el-tree-node__content {
                    padding-left: 60px !important;
                }
            }
            
        }

    }
    
    .newWarning{
        position: relative;
        bottom: 50px;
        width: 250px;
        text-align: center;
        font-size: 16px;
        color: #fff;
        background: #3da0d6;
    }
  .right-pane {
    width: calc(100% - 300px);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    &-inner {
      width: calc(100% - 15px);
      height: calc(100% - 15px);
      .top {
        height: 80px;
        width: 100%;
        position: relative;
        .add-btn,
        .import-btn,
        .delete-btn {
          color: #fff;
        }
        .add-btn {
          position: absolute;
          background: #2ea8e6;
          top: 20px;
          left: 20px;
        }
        .import-btn {
          position: absolute;
          background: #2ea8e6;
          top: 20px;
          left: 130px;
        }
        .delete-btn {
          position: absolute;
          background: #b3b3b3;
          top: 20px;
          left: 20px;
        }
        .search-input {
          position: absolute;
          top: 20px;
          right: 30px;
          width: 300px;
        }
      }
      .center {
        width: 100%;
        height: calc(100% - 150px);
        .el-table {
          //   height: 100%;
          border: 1px solid #f0f2f2;
          margin-top: 10px;
          font-size: 0.95rem;
          font-family: PingFang SC;
          font-weight: 500;
          color: #b2b2b2;
          background: rgba(255, 255, 255, 0.8);
          /deep/th {
            background: #f7fbff;
          }
          /deep/.el-checkbox {
            color: #b2b2b2;
            .el-checkbox__input.is-checked + .el-checkbox__label {
              color: #2ea8e6;
            }

            .el-checkbox__input.is-checked .el-checkbox__inner::after {
              width: 70%;
              height: 70%;
              background: #2ea8e6;
              border-radius: 0;
              transform: rotate(0deg) scaleY(1);
              position: static;
              // border: 1px solid #8DD9FF;
            }

            .el-checkbox__inner {
              border: 1px solid #8dd9ff;
              background: rgba(0, 170, 255, 0);
              display: flex;
              align-items: center;
              justify-content: center;
              position: static;
              &::after {
                transition: 0ms;
              }
            }

            .el-checkbox__label {
              padding-left: 0;
              font-size: 15px;
              position: absolute;
              top: 1px;
              left: 25px;
            }
          }
        }
      }
      .bottom {
        height: 70px;
        width: 100%;
        position: relative;
      }
    }
  }
}
</style>