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"
        suffix-icon="el-icon-search"
      >
      </el-input>
      <div class="tree_container">
        <el-tree
          ref="tree"
          :data="deviceTypeList"
          :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>
      </div>
      <el-button
        class="newDevice"
        @click="newDeviceType()"
      ><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="请输入搜索内容"
          >
            <template slot="append">
              <i
                class="el-icon-search"
                style="cursor: pointer"
                @click="searchTypeEvent"
              ></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="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"
                  style="color: #2ea8e6"
                >编辑</el-button>
                <el-button
                  v-show="scope.row.deviceID == null ? false : true"
                  size="mini"
                  type="text"
                  style="color: #2ea8e6"
                  @click="deviceDelete(scope.row)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="bottom">
          <page :paginationData="paginationData"></page>
        </div>
      </div>
    </div>
    <!--弹窗-->
    <NewDeviceType
      ref="newDevice"
      v-bind="{
      update:getDeviceTypeList
    }"
    ></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";
import dropdown from "@/components/Dropdown/index";

import api from "@/api/deviceManagement/api";
export default {
  components: {
    checkbox,
    page,
    NewDeviceType,
    dataImport,
    addDevice,
    deviceEdit,
    dropdown,
  },
  data() {
    return {
      searchInput: "",
      filterText: "",
      filter: "",
      form: {
        typeName: "",
      },
      deviceTypeList: [
        // {
        //   id: 1,
        //   label: "A设备",
        // },
        // {
        //   id: 2,
        //   label: "B设备",
        // },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      menuEvents: [
        { label: "新建", funcName: "addNode" },
        { label: "上移", funcName: "moveUp" },
        { label: "下移", funcName: "moveDown" },
        { label: "编辑", funcName: "editNode" },
        { label: "删除", funcName: "removeNode" },
      ],
      subMenuEvents: [
        { label: "新建", funcName: "addNode" },
        { label: "上移", funcName: "moveUp" },
        { label: "下移", funcName: "moveDown" },
        { label: "编辑", funcName: "editNode" },
        { label: "删除", funcName: "removeNode" },
      ],
      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);
        },
      },
    };
  },
  mounted() {
    this.getDeviceTypeList();
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  methods: {
    getDeviceTypeList() {
      let that = this;
      api
        .getDeviceTypeList()
        .then((result) => {
          that.deviceTypeList = result.data.data.map(function (item) {
            item.label = item.type_name;
            return item;
          });
        })
        .catch((err) => {});
    },

    searchTypeEvent() {},
    dropDownClick() {},
    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;
    },
    deviceDelete(data) {
      // this.tableData = this.tableData.filter(()=>{
      // })
    },
    handleSelectionChange() {
      //
    },
    handleNodeClick() {
      //
    },
    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: calc(100% - 31px);
    .tree_container {
      height: calc(100% - 101px);
      margin-top: 10px;
      margin-bottom: 10px;
      overflow: hidden;
      overflow-y: auto;
      .el-tree {
        height: 100%;
        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;
          }
        }
      }
    }
    .newDevice {
      position: relative;
      // bottom: 50px;
      width: 250px;
      text-align: center;
      font-size: 16px;
      color: #fff;
      background: #3da0d6;
      margin-left: 24px;
      color: #fff; 
    }
  }

  .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__title {
  //   margin-right: 330px;
  // }

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

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