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

<template>
  <div class="container">
    <div class="left-pane">
      <el-input placeholder="告警类别" v-model="filterText" class="left-input">
        <template slot="append">
          <i
            class="el-icon-search"
            style="cursor: pointer"
            @click="searchTypeEvent"
          ></i>
        </template>
      </el-input>
      <el-tree
        ref="tree"
        :data="data"
        :props="defaultProps"
        node-key="id"
        default-expand-all
        :filter-node-method="filterNode"
        @node-click="handleNodeClick"
      >
      </el-tree>
      <el-button
        @click="newDeviceType()"
        style="color: #fff; background: #3da0d6"
        ><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="addDevice()" class="add-btn">添加设备</el-button>
          <el-button @click="dataImport()" class="import-btn"
            >批量导入</el-button
          >
          <el-button @click="batchDelete" class="delete-btn"
            >批量删除</el-button
          >
          <el-input
            class="search-input"
            v-model="searchInput"
            placeholder="请输入"
            suffix-icon="el-icon-search"
          ></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="deviceName" label="设备名称">
            </el-table-column>
            <el-table-column prop="deviceID" label="设备ID"> </el-table-column>
            <el-table-column prop="deviceUse" label="设备用途">
            </el-table-column>
            <el-table-column prop="devicePosition" label="设备位置">
            </el-table-column>
            <el-table-column prop="deviceLife" label="设备使用年限">
            </el-table-column>
            <el-table-column prop="company" label="设备单位"> </el-table-column>
            <el-table-column prop="deviceRespon" label="设备责任人">
            </el-table-column>
            <el-table-column prop="operation" label="操作">
              <template slot-scope="scope">
                <el-button
                  v-show="scope.row.deviceID == null ? false : true"
                  size="mini"
                  type="text"
                  @click="deviceEdit()"
                  >编辑</el-button
                >
                <el-button
                  v-show="scope.row.deviceID == null ? false : true"
                  size="mini"
                  type="text"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="bottom">
          <page :paginationData="paginationData"></page>
        </div>
      </div>
    </div>
    <!--弹窗-->
    <NewDeviceType ref="newDevice"></NewDeviceType>
    <addDevice ref="addDevice"></addDevice>
    <dataImport ref="dataImport"></dataImport>
    <deviceEdit ref="deviceEdit"></deviceEdit>
  </div>
</template>

<script>
import checkbox from "@/components/Checkbox/index";
import page from "@/components/pagination/index";
import NewDeviceType from "./messageDailog/newDeviceType";
import dataImport from "./messageDailog/dataImport";
import addDevice from "./messageDailog/addDevice";
import deviceEdit from "./messageDailog/deviceEdit";
export default {
  components: {
    checkbox,
    page,
    NewDeviceType,
    dataImport,
    addDevice,
    deviceEdit,
  },
  data() {
    return {
      searchInput: "",
      filterText: "",
      filter: "",
      form: {
        typeName: "",
      },
      data: [
        {
          label: "楼层",
          children: [
            {
              label: "A设备",
            },
            {
              label: "B设备",
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      tableData: [
        {
          deviceName: "摄像头",
          deviceID: "SXT-001",
          deviceUse: "监控摄像头",
          devicePosition: "1层101",
          deviceLife: "3年6个月",
          company: "北京电信规划院",
          deviceRespon: "张三",
        },
        {
          deviceName: "摄像头",
          deviceID: "SXT-001",
          deviceUse: "监控摄像头",
          devicePosition: "1层101",
          deviceLife: "3年6个月",
          company: "北京电信规划院",
          deviceRespon: "张三",
        },
        {
          deviceName: "摄像头",
          deviceID: "SXT-001",
          deviceUse: "监控摄像头",
          devicePosition: "1层101",
          deviceLife: "3年6个月",
          company: "北京电信规划院",
          deviceRespon: "张三",
        },
      ],
      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: {
    searchTypeEvent() {},
    getTableData(val) {},
    handleSizeChange(val) {},
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    newDeviceType() {
      this.$refs.newDevice.dialogVisible = true;
    },
    dataImport() {
      this.$refs.dataImport.dialogVisible = true;
    },
    addDevice() {
      this.$refs.addDevice.dialogVisible = true;
    },
    deviceEdit() {
      this.$refs.deviceEdit.dialogVisible = true;
    },
    handleSelectionChange() {
      //
    },
    handleNodeClick() {
      //
    },
    cancelChecked() {
      //
    },
    batchDelete() {},
  },
};
</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: 90%;
    position: relative;
    .left-input {
      height: 30px;
      width: 98%;
      /deep/.el-input-group__append {
        cursor: pointer;
      }
    }
    .el-tree {
      margin-top: 10px;
      height: calc(98% - 30px);
      background-color: rgb(247, 245, 243);
    }

    .el-button {
      position: absolute;
      left: 25px;
      bottom: 40px;
      width: 250px;
      background-color: rgb(131, 208, 243);
      text-align: center;
      font-size: 16px;
    }
  }

  .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: 250px;
        }
        .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;
      }
    }
  }

  .el-form {
    margin: 30px 0 0 0;

    .el-form-item {
      margin-inline: 20px;
      margin-bottom: 0;
    }

    /deep/.el-form-item__label {
      padding: 0;
    }

    /deep/.el-form-item__content {
      display: flex;
    }

    /deep/.el-input__inner {
      width: 300px;
    }
  }

  /deep/.el-dialog {
    height: 30vh;
  }

  /deep/.el-dialog__title {
    margin-right: 330px;
  }

  /deep/.el-dialog__headerbtn {
    font-size: 25px;
  }

  /deep/.el-dialog__body {
    padding: 0;
  }
}
</style>