1. 设备管理设备配置和设备告警界面调整; 2. 修改分页组件

src/views/deviceManagement/deviceConfig.vue

@@ -1,278 +1,464 @@
 <template>
-    <div class="container">
-        <div class="left-pane">
-            <el-input placeholder="告警类别" suffix-icon="el-icon-search" v-model="filterText"></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()"><i class="el-icon-s-order"></i>新建设备类别</el-button>
+  <div class="container">
+    <div class="left-pane">
+      <el-input
+        placeholder="告警类别"
+        suffix-icon="el-icon-search"
+        v-model="filterText"
+      ></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="right-pane">
-            <div style="margin:20px 1100px 20px 0 ;">
-                <div style="display: flex;">
-                    <el-button @click="addDevice()">添加设备</el-button>
-                    <el-button style="margin-left:20px" @click="dataImport()">批量导入</el-button>
-                </div>
-                <el-input class="search" v-model="filter" placeholder="请输入" suffix-icon="el-icon-search"></el-input>
-            </div>
-            <el-table ref="multipleTable" border :data="tableData" tooltip-effect="dark"
-                :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }" style="width: 100%"
-                @selection-change="handleSelectionChange">
-                <el-table-column type="selection" width="50">
-                </el-table-column>
-                <el-table-column type="index" width="50" 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 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">
-            <div>
-                <checkbox class="checkbox"></checkbox>
-                <el-button class="check-cancel" size="mini" type="text" @click="cancelChecked">取消</el-button>
-            </div>
-            <div class="bottom_button" v-show="show">
-                <el-button class="delete" type="text">批量删除</el-button>
-            </div>
-            <page></page>
+          <page :paginationData="paginationData"></page>
         </div>
-        <!--弹窗-->
-        <NewDeviceType ref="newDevice"></NewDeviceType>
-        <addDevice ref="addDevice"></addDevice>
-        <dataImport ref="dataImport"></dataImport>
-        <deviceEdit ref="deviceEdit"></deviceEdit>
+      </div>
     </div>
+    <!-- <div class="right-pane">
+      <div style="margin: 20px 1100px 20px 0">
+        <div style="display: flex">
+          <el-button @click="addDevice()">添加设备</el-button>
+          <el-button style="margin-left: 20px" @click="dataImport()"
+            >批量导入</el-button
+          >
+          <el-button @click="batchDelete">批量删除</el-button>
+        </div>
+        <el-input
+          class="search"
+          v-model="filter"
+          placeholder="请输入"
+          suffix-icon="el-icon-search"
+        ></el-input>
+      </div>
+      <el-table
+        ref="multipleTable"
+        border
+        :data="tableData"
+        tooltip-effect="dark"
+        :header-cell-style="{ textAlign: 'center' }"
+        :cell-style="{ textAlign: 'center' }"
+        style="width: 100%"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="50"> </el-table-column>
+        <el-table-column type="index" width="50" 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> -->
+    <!--弹窗-->
+    <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'
+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 {
-            filterText: '',
-            filter: '',
-            form: {
-                typeName: ''
+  components: {
+    checkbox,
+    page,
+    NewDeviceType,
+    dataImport,
+    addDevice,
+    deviceEdit,
+  },
+  data() {
+    return {
+      searchInput: "",
+      filterText: "",
+      filter: "",
+      form: {
+        typeName: "",
+      },
+      data: [
+        {
+          label: "楼层",
+          children: [
+            {
+              label: "A设备",
             },
-            data: [{
-                label: '楼层',
-                children: [
-                    {
-                        label: 'A设备'
-                    }, {
-                        label: 'B设备'
-                    }
-                ]
+            {
+              label: "B设备",
             },
-            ],
-            defaultProps: {
-                children: 'children',
-                label: 'label'
-            },
-            tableData: [{
-                deviceName: '摄像头',
-                deviceID: 'SXT-001',
-                deviceUse: '监控摄像头',
-                devicePosition: '1层101',
-                deviceLife: '3年6个月',
-                company: '北京电信规划院',
-                deviceRespon: '张三',
-            }, {
-
-            }, {
-
-            }],
-            multipleSelection: [],
-            show: true
-        }
-    },
-    watch: {
-        filterText(val) {
-            this.$refs.tree.filter(val);
-        }
-    },
-    methods: {
-        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;
+      ],
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+      tableData: [
+        {
+          deviceName: "摄像头",
+          deviceID: "SXT-001",
+          deviceUse: "监控摄像头",
+          devicePosition: "1层101",
+          deviceLife: "3年6个月",
+          company: "北京电信规划院",
+          deviceRespon: "张三",
         },
-        addDevice() {
-            this.$refs.addDevice.dialogVisible = true;
+        {
+          deviceName: "摄像头",
+          deviceID: "SXT-001",
+          deviceUse: "监控摄像头",
+          devicePosition: "1层101",
+          deviceLife: "3年6个月",
+          company: "北京电信规划院",
+          deviceRespon: "张三",
         },
-        deviceEdit() {
-            this.$refs.deviceEdit.dialogVisible = true;
+        {
+          deviceName: "摄像头",
+          deviceID: "SXT-001",
+          deviceUse: "监控摄像头",
+          devicePosition: "1层101",
+          deviceLife: "3年6个月",
+          company: "北京电信规划院",
+          deviceRespon: "张三",
         },
-        handleSelectionChange() {
-            //
+      ],
+      multipleSelection: [],
+      show: true,
+      paginationData: {
+        pageSize: 10,
+        pagerCount: 5,
+        currentPage: 1,
+        pageSizes: [5, 10, 20, 30],
+        total: 30,
+        currentChange: (val) => {
+          this.getTableData(val);
         },
-        handleNodeClick() {
-            //
+        handleSizeChange: (val) => {
+          this.handleSizeChange(val);
         },
-        cancelChecked() {
-            //
-        }
-    }
-}
+      },
+    };
+  },
+  watch: {
+    filterText(val) {
+      this.$refs.tree.filter(val);
+    },
+  },
+  methods: {
+    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 {
-    position: absolute;
-    left: 218px;
-    top: 77px;
-    right: 16px;
-    height: -webkit-fill-available;
-    margin-bottom: 20px;
-    line-height: 20px;
-    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);
-
-    .left-pane {
-        width: 300px;
-        padding: 15px;
-
-        .el-tree {
-
-            height: 700px;
-            margin-top: 15px;
-            background-color: rgb(247, 245, 243);
-        }
+  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;
 
-        .el-button {
-            position: absolute;
-            left: 35px;
-            bottom: 40px;
-            width: 250px;
-            background-color: rgb(131, 208, 243);
-            text-align: center;
-            font-size: 16px;
-        }
+  .left-pane {
+    width: 300px;
+    padding: 15px;
+    height: 90%;
+    position: relative;
+    .left-input {
+      height: 30px;
+      width: 98%;
     }
-
-    .right-pane {
-        width: 1340px;
-        position: absolute;
-        margin-left: 330px;
-        top: 0;
-        margin-right: 20px;
+    .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;
+    }
+  }
 
-    .bottom {
-        position: absolute;
-        left: 330px;
-        right: 16px;
-        bottom: 20px;
-        height: 50px;
-        line-height: 20px;
-        background-color: rgba(255, 255, 255, 1);
-        text-align: center;
-
-        .checkbox {
-            position: absolute;
-            left: 29px;
-            top: 15px;
-            font-size: 14px;
+  .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;
         }
-
-        .check-cancel {
-            position: absolute;
-            // line-height: 20px;
-            font-size: 14px;
-            text-align: center;
-            left: 140px;
-            top: 10px;
+        .add-btn {
+          position: absolute;
+          background: #2ea8e6;
+          top: 20px;
+          left: 20px;
         }
-
-        .bottom_button {
-            position: absolute;
-            left: 200px;
-            margin-top: 15px;
-
-            .delete {
-                font-size: 14px;
-                text-align: center;
-                padding: 1px;
-            }
+        .import-btn {
+          position: absolute;
+          background: #2ea8e6;
+          top: 20px;
+          left: 130px;
         }
-    }
-
-    .el-form {
-        margin: 30px 0 0 0;
-
-        .el-form-item {
-            margin-inline: 20px;
-            margin-bottom: 0;
+        .delete-btn {
+          position: absolute;
+          background: #b3b3b3;
+          top: 20px;
+          left: 250px;
         }
-
-        /deep/.el-form-item__label {
-            padding: 0;
+        .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;
+            }
 
-        /deep/.el-form-item__content {
-            display: flex;
-        }
+            .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;
+              }
+            }
 
-        /deep/.el-input__inner {
-            width: 300px;
+            .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;
 
-    /deep/.el-dialog {
-        height: 30vh;
+    .el-form-item {
+      margin-inline: 20px;
+      margin-bottom: 0;
     }
 
-    /deep/.el-dialog__title {
-        margin-right: 330px;
+    /deep/.el-form-item__label {
+      padding: 0;
     }
 
-    /deep/.el-dialog__headerbtn {
-        font-size: 25px;
+    /deep/.el-form-item__content {
+      display: flex;
     }
 
-    /deep/.el-dialog__body {
-        padding: 0;
+    /deep/.el-input__inner {
+      width: 300px;
     }
+  }
 
-}
+  /deep/.el-dialog {
+    height: 30vh;
+  }
 
-.search {
-    position: absolute;
-    width: 300px;
-    top: 20px;
-    right: 20px;
+  /deep/.el-dialog__title {
+    margin-right: 330px;
+  }
+
+  /deep/.el-dialog__headerbtn {
+    font-size: 25px;
+  }
+
+  /deep/.el-dialog__body {
+    padding: 0;
+  }
 }
-</style>
+</style>

src/views/deviceManagement/deviceWarning.vue

@@ -1,205 +1,301 @@
 <template>
-    <div class="container">
-        <div class="left-pane">
-            <el-input placeholder="告警类别" suffix-icon="el-icon-search" v-model="filterText"></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><i class="el-icon-s-order"></i>新建告警类别</el-button>
+  <div class="container">
+    <div class="left-pane">
+      <el-input
+        placeholder="告警类别"
+        suffix-icon="el-icon-search"
+        v-model="filterText"
+      ></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 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="请输入"
+            suffix-icon="el-icon-search"
+          ></el-input>
         </div>
-        <div class="right-pane">
-            <div style="margin:20px 1100px 20px 0 ;">
-                <el-input class="search" v-model="input" placeholder="请输入" suffix-icon="el-icon-search"></el-input>
-            </div>
-            <el-table ref="multipleTable" border :data="tableData" tooltip-effect="dark"
-                :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }" style="width: 100%"
-                @selection-change="handleSelectionChange">
-                <el-table-column type="selection" width="50">
-                </el-table-column>
-                <el-table-column type="index" width="50" 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">查看</el-button>
-                    <el-button size="mini" type="text">编辑</el-button>
-                    <el-button size="mini" type="text">删除</el-button>
-                </el-table-column>
-            </el-table>
+        <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">查看</el-button>
+              <el-button size="mini" type="text">编辑</el-button>
+              <el-button size="mini" type="text">删除</el-button>
+            </el-table-column>
+          </el-table>
         </div>
         <div class="bottom">
-                <div>
-                    <checkbox class="checkbox"></checkbox>
-                    <el-button class="check-cancel" size="mini" type="text" @click="cancleChecked">取消</el-button>
-                </div>
-                <div class="bottom_button" v-show="show">
-                    <el-button class="delete" type="text">批量删除</el-button>
-                </div>
-                <page class="page"></page>
-            </div>
+          <page :paginationData="paginationData"></page>
+        </div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
-import checkbox from '@/components/Checkbox/index'
-import page from '@/components/pagination/index'
+import checkbox from "@/components/Checkbox/index";
+import page from "@/components/pagination/index";
 export default {
-    components: { checkbox, page },
-    data() {
-        return {
-            filterText: '',
-            input: '',
-            data: [{
-                label: '紧急告警',
-                children: [
-                ]
-            }, {
-                label: '重要告警'
-            }, {
-                label: '一般告警'
-            }],
-            defaultProps: {
-                children: 'children',
-                label: 'label'
-            },
-            tableData: [{
-                deviceType: '摄像头',
-                devicewarningType: '[设备离线][设备xxx]',
-                Respon: '张三',
-            }, {
-                deviceType: '摄像头',
-                devicewarningType: '[设备离线][设备xxx]',
-                Respon: '张三',
-            }, {
-                deviceType: '摄像头',
-                devicewarningType: '[设备离线][设备xxx]',
-                Respon: '张三',
-            }],
-            multipleSelection: [],
-            show: true
-        }
-    },
-    watch: {
-        filterText(val) {
-            this.$refs.tree.filter(val);
-        }
-    },
-    methods: {
-        cancleChecked() {
-            //
+  components: { checkbox, page },
+  data() {
+    return {
+      searchInput: "",
+      filterText: "",
+      input: "",
+      data: [
+        {
+          label: "紧急告警",
+          children: [],
         },
-        handleClick() {
-            //
+        {
+          label: "重要告警",
         },
-        filterNode(value, data) {
-            if (!value) return true;
-            return data.label.indexOf(value) !== -1;
+        {
+          label: "一般告警",
         },
-        handleNodeClick(){
-            //
+      ],
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+      tableData: [
+        {
+          deviceType: "摄像头",
+          devicewarningType: "[设备离线][设备xxx]",
+          Respon: "张三",
         },
-        handleSelectionChange(){
-            //
-        }
-    }
-}
+        {
+          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() {},
+  },
+};
 </script>
 <style lang="less" scoped>
 .container {
-    position: absolute;
-    left: 218px;
-    top: 77px;
-    right: 16px;
-    height: -webkit-fill-available;
-    margin-bottom: 20px;
-    line-height: 20px;
-    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);
-
-    .left-pane {
-        width: 300px;
-        padding: 15px;
+  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;
 
-        .el-tree {
-            height: 700px;
-            margin-top: 15px;
-            background-color: rgb(247, 245, 243);
-        }
-
-        .el-button {
-            position: absolute;
-            left: 35px;
-            bottom: 40px;
-            width: 250px;
-            background-color: rgb(131, 208, 243);
-            text-align: center;
-            font-size: 16px;
-        }
+  .left-pane {
+    width: 300px;
+    padding: 15px;
+    height: 90%;
+    position: relative;
+    .left-input {
+      height: 30px;
+      width: 98%;
+    }
+    .el-tree {
+      margin-top: 10px;
+      height: calc(98% - 30px);
+      background-color: rgb(247, 245, 243);
     }
 
-    .right-pane {
-        width: 1340px;
-        position: absolute;
-        margin-left: 330px;
-        top: 0;
-        margin-right: 20px;
-
-        .el-table{
-            top:60px;
-        }
+    .el-button {
+      position: absolute;
+      left: 25px;
+      bottom: 40px;
+      width: 250px;
+      background-color: rgb(131, 208, 243);
+      text-align: center;
+      font-size: 16px;
     }
-}
+  }
 
-.bottom {
-        position: absolute;
-        left: 330px;
-        right: 16px;
-        bottom: 20px;
-        height: 50px;
-        line-height: 20px;
-        background-color: rgba(255, 255, 255, 1);
-        text-align: center;
+  .right-pane {
+    width: calc(100% - 300px);
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
-        .checkbox {
-            position: absolute;
-            left: 29px;
-            top: 15px;
-            font-size: 14px;
+    &-inner {
+      width: calc(100% - 15px);
+      height: calc(100% - 15px);
+      .top {
+        height: 80px;
+        width: 100%;
+        position: relative;
+        .add-btn,
+        .import-btn,
+        .delete-btn {
+          color: #fff;
         }
-
-        .check-cancel {
-            position: absolute;
-            // line-height: 20px;
-            font-size: 14px;
-            text-align: center;
-            left: 140px;
-            top: 10px;
+        .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;
+            }
 
-        .bottom_button {
-            position: absolute;
-            left: 200px;
-            margin-top: 15px;
+            .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;
+            }
 
-            .delete {
-                font-size: 14px;
-                text-align: center;
-                padding: 1px;
+            .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;
+      }
     }
-
-.search {
-    position: absolute;
-    width: 300px;
-    top: 20px;
-    right: 20px;
+  }
 }
-</style>
+
+</style>

src/views/deviceManagement/index.vue

@@ -1,18 +1,20 @@
 <template>
-    <div>
-        <router-view></router-view>
-    </div>
+  <div class="outer">
+    <router-view></router-view>
+  </div>
 </template>
 
-<script >
+<script>
 export default {
-    data() {
-        return {
-        }
-    },
-    methods: {
-    }
+  data() {
+    return {};
+  },
+  methods: {},
 };
 </script>
 <style lang="less" scoped>
-</style>
+.outer {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/views/securityManagement/logMonitor.vue

@@ -12,10 +12,6 @@
                 :value="item.value"
               ></el-option>
             </el-select>
-            <!-- <el-input
-              v-model="form.moduleInput"
-              placeholder="请输入模块名称"
-            ></el-input> -->
           </el-form-item>
           <el-form-item label="人员姓名：">
             <el-input
@@ -109,28 +105,6 @@
       </el-table>
     </div>
     <div class="bottom">
-      <!-- <div style="width: 100%; height: 100%; position: absolute">
-        <el-button
-          class="check-cancel"
-          size="mini"
-          type="text"
-          @click="cancleChecked"
-          >取消</el-button
-        >
-      </div>
-      <div class="bottom_button">
-        <el-button class="delete" type="text" @click="batchDelete"
-          >批量删除</el-button
-        >
-        <el-divider direction="vertical"></el-divider>
-        <el-button class="disabled" type="text" @click="batchActivate"
-          >批量激活</el-button
-        >
-        <el-divider direction="vertical"></el-divider>
-        <el-button class="export" type="text" @click="exportData"
-          >导出数据</el-button
-        >
-      </div> -->
       <page class="page" :paginationData="paginationData"></page>
     </div>
   </div>
@@ -357,7 +331,7 @@ export default {
     },
     searchEvent() {
       console.log(this.form);
-      this.getTableData(this.currentPage)
+      this.getTableData(this.currentPage);
     },
     exportEvent() {
       console.log("导出事件");
@@ -516,61 +490,6 @@ export default {
     background-color: rgba(255, 255, 255, 1);
     text-align: center;
 
-    .checkbox {
-      position: absolute;
-      left: 29px;
-      top: 15px;
-      font-size: 14px;
-      color: #2ea8e6;
-    }
-
-    .check-cancel {
-      position: absolute;
-      // line-height: 20px;
-      font-size: 14px;
-      text-align: center;
-      left: 140px;
-      top: 10px;
-      color: #2ea8e6;
-    }
-
-    /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_button {
       position: absolute;
       left: 200px;

src/views/securityManagement/systemMonitor/periodicTask.vue

@@ -103,22 +103,6 @@
       </el-table>
     </div>
     <div class="bottom">
-      <!-- <div style="width: 100%; height: 100%; position: absolute">
-        <el-button
-          class="check-cancel"
-          size="mini"
-          type="text"
-          @click="cancleChecked"
-          >取消</el-button
-        >
-      </div>
-      <div class="bottom_button" v-show="show">
-        <el-button class="delete" type="text">批量删除</el-button>
-        <el-divider direction="vertical"></el-divider>
-        <el-button class="disabled" type="text">批量激活</el-button>
-        <el-divider direction="vertical"></el-divider>
-        <el-button class="export" type="text">导出数据</el-button>
-      </div> -->
       <page class="page" :paginationData="paginationData"></page>
     </div>
     <alterTask ref="altertask"></alterTask>
@@ -441,85 +425,5 @@ export default {
   line-height: 20px;
   background-color: rgba(255, 255, 255, 1);
   text-align: center;
-
-  .checkbox {
-    position: absolute;
-    left: 29px;
-    top: 15px;
-    font-size: 14px;
-  }
-
-  .check-cancel {
-    position: absolute;
-    // line-height: 20px;
-    font-size: 14px;
-    text-align: center;
-    left: 140px;
-    top: 10px;
-  }
-
-  /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_button {
-    position: absolute;
-    left: 200px;
-    margin-top: 15px;
-
-    .delete {
-      font-size: 14px;
-      text-align: center;
-      padding: 1px;
-      color: #2ea8e6;
-    }
-
-    .disabled {
-      font-size: 14px;
-      text-align: center;
-      padding: 1px;
-      color: #2ea8e6;
-    }
-
-    .export {
-      font-size: 14px;
-      text-align: center;
-      padding: 1px;
-      color: #2ea8e6;
-    }
-  }
 }
 </style>