布局修改。

.env.development

@@ -1,5 +1,5 @@
-VUE_APP_BACKEND_URL=http://wisdomhouse.sudaonline.net
-#VUE_APP_BACKEND_URL=http://127.0.0.1:8086/smart-community-server
+#VUE_APP_BACKEND_URL=http://wisdomhouse.sudaonline.net
+VUE_APP_BACKEND_URL=http://127.0.0.1:8086/smart-community-server
 #手机企业版
 VUE_APP_COMPANY_HEALTH_WECHAT_QY_URL=http://wisdomhousewechat.sudaonline.net/prevention/motemwall.html 
 #手机校园版

src/components/Sticky/index.vue

@@ -0,0 +1,104 @@
+<template>
+  <div :style="{height:height+'px',zIndex:zIndex}">
+    <div
+      :class="className"
+      :style="{top:(isSticky ? stickyTop +'px' : ''),zIndex:zIndex,position:position,width:width,height:height+'px'}"
+    >
+      <slot>
+        <div>sticky</div>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Sticky',
+  props: {
+    stickyTop: {
+      type: Number,
+      default: 0
+    },
+    zIndex: {
+      type: Number,
+      default: 1
+    },
+    className: {
+      type: String,
+      default: 'stick-panel'
+    }
+  },
+  data() {
+    return {
+      active: false,
+      position: '',
+      width: undefined,
+      height: undefined,
+      isSticky: false
+    }
+  },
+  mounted() {
+    this.height = this.$el.getBoundingClientRect().height;
+
+    var appMain = document.querySelector(".app-main");
+
+    appMain.addEventListener('scroll', this.handleScroll)
+    appMain.addEventListener('resize', this.handleResize)
+  },
+  activated() {
+    this.handleScroll()
+  },
+  destroyed() {
+    var appMain = document.querySelector(".app-main");
+
+    appMain.removeEventListener('scroll', this.handleScroll)
+    appMain.removeEventListener('resize', this.handleResize)
+  },
+  methods: {
+    sticky() {
+      if (this.active) {
+        return
+      }
+      this.position = 'fixed'
+      this.active = true
+      this.width = this.width + 'px'
+      this.isSticky = true
+    },
+    handleReset() {
+      if (!this.active) {
+        return
+      }
+      this.reset()
+    },
+    reset() {
+      this.position = ''
+      this.width = 'auto'
+      this.active = false
+      this.isSticky = false
+    },
+    handleScroll() {
+      const width = this.$el.getBoundingClientRect().width
+      this.width = width || 'auto'
+      const offsetTop = this.$el.getBoundingClientRect().top
+
+      console.log("offsetTop=" + offsetTop);
+
+      if (offsetTop < this.stickyTop) {
+        this.sticky()
+        return
+      }
+      this.handleReset()
+    },
+    handleResize() {
+      if (this.isSticky) {
+        this.width = this.$el.getBoundingClientRect().width + 'px'
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.sticky-panel{
+  background-color: #fff;
+}
+</style>

src/views/base/personDeviceLog-list.vue

@@ -339,7 +339,7 @@ export default {
           //45为分页栏的高度
           //页面高度-列表上面的高度-分页栏高度
           self.tableHeight =
-            window.innerHeight - self.$refs.formTable.$el.offsetTop - 45;
+            window.innerHeight - self.$refs.formTable.$el.offsetTop - 100;
         })
         .catch(error => {
           self.loading = false;

src/views/base/personInfo-list.vue

@@ -1,182 +1,183 @@
 <template>
-  <div>
-    <el-breadcrumb separator=">">
-      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
-      <el-breadcrumb-item>
-        <a href="#">系统管理</a>
-      </el-breadcrumb-item>
-      <el-breadcrumb-item>
-        <a href="/personInfo">人员管理</a>
-      </el-breadcrumb-item>
-    </el-breadcrumb>
-    <el-divider></el-divider>
-    <!--
-      要resetFields起作用，必须配置:model和prop
-    -->
-    <el-form ref="queryForm" :model="queryModel" inline class="demo-form-inline">
-      <div>
-        <el-form-item label="姓名" prop="name">
-          <el-input type="text" size="mini" v-model="queryModel.name"></el-input>
-        </el-form-item>
-        <el-form-item label="手机号" prop="phone">
-          <el-input type="text" size="mini" v-model="queryModel.phone"></el-input>
-        </el-form-item>
-        <el-form-item label="身份证" prop="idCard">
-          <el-input type="text" size="mini" v-model="queryModel.idCard"></el-input>
-        </el-form-item>
-        <el-form-item>
-          <el-button
-            type="primary"
-            size="mini"
-            icon="ios-search"
-            @click="changePage(1)"
-            :loading="loading"
-          >查询</el-button>&nbsp;
-          <el-button
-            type="info"
-            size="mini"
-            style="margin-left: 8px"
-            @click="handleReset('queryForm')"
-          >重置</el-button>&nbsp;
-        </el-form-item>
-      </div>
-      <div>
-        <el-form-item label="单位" prop="companyCode">
-          <!-- <el-select
-            v-model="queryModel.companyCode"
-            size="mini"
-            filterable
-            placeholder="请选择"
-            style="width:220px"
-          >
-            <el-option
-              v-for="company in companyResult"
-              :key="company.id"
-              :label="company.name"
-              :value="company.code"
-            ></el-option>
-          </el-select>-->
-          <el-select-tree
-            size="mini"
-            :props="props"
-            :options="companyResult"
-            :value="queryModel.parentId"
-            @getValue="getSelectedValue($event)"
-            height="200"
-          ></el-select-tree>&nbsp;
-          <el-checkbox v-model="queryModel.subordinate">是否包含下级单位</el-checkbox>
-        </el-form-item>
-        <el-form-item label="是否上传照片" prop="isUploadPhoto">
-          <el-select
-            v-model="queryModel.isUploadPhoto"
-            size="mini"
-            filterable
-            placeholder="请选择"
-            style="width:120px"
-          >
-            <el-option value label="全部"></el-option>
-            <el-option value="1" label="已上传"></el-option>
-            <el-option value="0" label="未上传"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="是否同步" prop="faceBound">
-          <el-select
-            v-model="queryModel.faceBound"
-            size="mini"
-            filterable
-            placeholder="请选择"
-            style="width:120px"
-          >
-            <el-option value label="全部"></el-option>
-            <el-option value="1" label="已同步"></el-option>
-            <el-option value="0" label="未同步"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="绑定设备名称" prop="derviceName">
-          <el-input type="text" size="mini" v-model="queryModel.derviceName"></el-input>
-        </el-form-item>
-      </div>
-      <div>
-        <el-form-item v-if="position1Show" :label="position1" prop="position1">
-          <el-input type="text" size="mini" v-model="queryModel.position1"></el-input>
-        </el-form-item>
-        <el-form-item v-if="position2Show" :label="position2" prop="position2">
-          <el-input type="text" size="mini" v-model="queryModel.position2"></el-input>
-        </el-form-item>
-        <el-form-item v-if="position3Show" :label="position3" prop="position3">
-          <el-input type="text" size="mini" v-model="queryModel.position3"></el-input>
-        </el-form-item>
-        <el-form-item v-if="position4Show" :label="position4" prop="position4">
-          <el-input type="text" size="mini" v-model="queryModel.position4"></el-input>
-        </el-form-item>
-        <el-form-item v-if="position5Show" :label="position5" prop="position5">
-          <el-input type="text" size="mini" v-model="queryModel.position5"></el-input>
-        </el-form-item>
-      </div>
-    </el-form>
-    <el-divider></el-divider>
-    <el-row class="button-group">
-      <el-button type="primary" size="small" plain icon="el-icon-remove" @click="handleAdd">新增</el-button>
-      <el-button
-        type="primary"
-        size="small"
-        plain
-        icon="el-icon-remove"
-        :disabled="multipleSelection.length==0"
-        @click="handleBatchDelete"
-      >删除选中项</el-button>
-      <el-button
-        type="primary"
-        size="small"
-        plain
-        icon="el-icon-upload2"
-        @click="batchImportVisible = true"
-      >导入</el-button>
-      <el-button
-        type="primary"
-        size="small"
-        plain
-        icon="el-icon-download"
-        :loading="xlsLoading"
-        @click="downloadAll"
-      >导出数据</el-button>
-      <el-button
-        type="primary"
-        size="small"
-        plain
-        icon="el-icon-refresh"
-        :disabled="multipleSelection.length==0"
-        @click="dataSync"
-      >数据同步</el-button>
-      <el-button
-        type="primary"
-        size="small"
-        plain
-        icon="el-icon-refresh"
-        :disabled="multipleSelection.length==0"
-        @click="handleBatchEnabledFace"
-      >人脸授权</el-button>
-      <el-button
-        type="primary"
-        size="small"
-        plain
-        icon="el-icon-refresh"
-        :disabled="multipleSelection.length==0"
-        @click="batchBoundDevice = true"
-      >绑定设备</el-button>
-      <el-button
-        type="primary"
-        size="small"
-        plain
-        icon="el-icon-refresh"
-        :disabled="multipleSelection.length==0"
-        @click="batchUnBoundDevice = true"
-      >解绑设备</el-button>
-    </el-row>
+  <div style="position:relative;">
+      <el-breadcrumb separator=">">
+        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+        <el-breadcrumb-item>
+          <a href="#">系统管理</a>
+        </el-breadcrumb-item>
+        <el-breadcrumb-item>
+          <a href="/personInfo">人员管理</a>
+        </el-breadcrumb-item>
+      </el-breadcrumb>
+      <el-divider></el-divider>
+      <!--
+        要resetFields起作用，必须配置:model和prop
+      -->
+      <el-form ref="queryForm" :model="queryModel" inline class="demo-form-inline">
+        <div>
+          <el-form-item label="姓名" prop="name">
+            <el-input type="text" size="mini" v-model="queryModel.name"></el-input>
+          </el-form-item>
+          <el-form-item label="手机号" prop="phone">
+            <el-input type="text" size="mini" v-model="queryModel.phone"></el-input>
+          </el-form-item>
+          <el-form-item label="身份证" prop="idCard">
+            <el-input type="text" size="mini" v-model="queryModel.idCard"></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button
+              type="primary"
+              size="mini"
+              icon="ios-search"
+              @click="changePage(1)"
+              :loading="loading"
+            >查询</el-button>&nbsp;
+            <el-button
+              type="info"
+              size="mini"
+              style="margin-left: 8px"
+              @click="handleReset('queryForm')"
+            >重置</el-button>&nbsp;
+          </el-form-item>
+        </div>
+        <div>
+          <el-form-item label="单位" prop="companyCode">
+            <!-- <el-select
+              v-model="queryModel.companyCode"
+              size="mini"
+              filterable
+              placeholder="请选择"
+              style="width:220px"
+            >
+              <el-option
+                v-for="company in companyResult"
+                :key="company.id"
+                :label="company.name"
+                :value="company.code"
+              ></el-option>
+            </el-select>-->
+            <el-select-tree
+              size="mini"
+              :props="props"
+              :options="companyResult"
+              :value="queryModel.parentId"
+              @getValue="getSelectedValue($event)"
+              height="200"
+            ></el-select-tree>&nbsp;
+            <el-checkbox v-model="queryModel.subordinate">是否包含下级单位</el-checkbox>
+          </el-form-item>
+          <el-form-item label="是否上传照片" prop="isUploadPhoto">
+            <el-select
+              v-model="queryModel.isUploadPhoto"
+              size="mini"
+              filterable
+              placeholder="请选择"
+              style="width:120px"
+            >
+              <el-option value label="全部"></el-option>
+              <el-option value="1" label="已上传"></el-option>
+              <el-option value="0" label="未上传"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="是否同步" prop="faceBound">
+            <el-select
+              v-model="queryModel.faceBound"
+              size="mini"
+              filterable
+              placeholder="请选择"
+              style="width:120px"
+            >
+              <el-option value label="全部"></el-option>
+              <el-option value="1" label="已同步"></el-option>
+              <el-option value="0" label="未同步"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="绑定设备名称" prop="derviceName">
+            <el-input type="text" size="mini" v-model="queryModel.derviceName"></el-input>
+          </el-form-item>
+        </div>
+        <div>
+          <el-form-item v-if="position1Show" :label="position1" prop="position1">
+            <el-input type="text" size="mini" v-model="queryModel.position1"></el-input>
+          </el-form-item>
+          <el-form-item v-if="position2Show" :label="position2" prop="position2">
+            <el-input type="text" size="mini" v-model="queryModel.position2"></el-input>
+          </el-form-item>
+          <el-form-item v-if="position3Show" :label="position3" prop="position3">
+            <el-input type="text" size="mini" v-model="queryModel.position3"></el-input>
+          </el-form-item>
+          <el-form-item v-if="position4Show" :label="position4" prop="position4">
+            <el-input type="text" size="mini" v-model="queryModel.position4"></el-input>
+          </el-form-item>
+          <el-form-item v-if="position5Show" :label="position5" prop="position5">
+            <el-input type="text" size="mini" v-model="queryModel.position5"></el-input>
+          </el-form-item>
+        </div>
+      </el-form>
+      <el-divider></el-divider>
+      <el-row class="button-group">
+        <el-button type="primary" size="small" plain icon="el-icon-remove" @click="handleAdd">新增</el-button>
+        <el-button
+          type="primary"
+          size="small"
+          plain
+          icon="el-icon-remove"
+          :disabled="multipleSelection.length==0"
+          @click="handleBatchDelete"
+        >删除选中项</el-button>
+        <el-button
+          type="primary"
+          size="small"
+          plain
+          icon="el-icon-upload2"
+          @click="batchImportVisible = true"
+        >导入</el-button>
+        <el-button
+          type="primary"
+          size="small"
+          plain
+          icon="el-icon-download"
+          :loading="xlsLoading"
+          @click="downloadAll"
+        >导出数据</el-button>
+        <el-button
+          type="primary"
+          size="small"
+          plain
+          icon="el-icon-refresh"
+          :disabled="multipleSelection.length==0"
+          @click="dataSync"
+        >数据同步</el-button>
+        <el-button
+          type="primary"
+          size="small"
+          plain
+          icon="el-icon-refresh"
+          :disabled="multipleSelection.length==0"
+          @click="handleBatchEnabledFace"
+        >人脸授权</el-button>
+        <el-button
+          type="primary"
+          size="small"
+          plain
+          icon="el-icon-refresh"
+          :disabled="multipleSelection.length==0"
+          @click="batchBoundDevice = true"
+        >绑定设备</el-button>
+        <el-button
+          type="primary"
+          size="small"
+          plain
+          icon="el-icon-refresh"
+          :disabled="multipleSelection.length==0"
+          @click="batchUnBoundDevice = true"
+        >解绑设备</el-button>
+      </el-row>
     <el-table
       ref="formTable"
       :data="tableData"
       v-loading="loading"
+      :height="tableHeight"
       stripe
       @sort-change="sortChange"
       @selection-change="handleSelectionChange"
@@ -695,7 +696,7 @@ export default {
 
           //页面高度-列表上面的高度-分页栏高度
           //45为分页栏的高度
-          //self.tableHeight = window.innerHeight - self.$refs.formTable.$el.offsetTop - 45;
+          self.tableHeight = window.innerHeight - self.$refs.formTable.$el.offsetTop - 110;
         })
         .catch(error => {
           self.loading = false;
@@ -1216,10 +1217,15 @@ export default {
 .demo-form-inline {
   margin-left: 10px;
   text-align: left;
+  background-color:white;
 }
 
 .button-group {
   margin-left: 10px;
   text-align: left;
 }
+
+.sticky-panel{
+  background-color:#fff;
+}
 </style>

src/views/layout/AppMain.vue

@@ -29,7 +29,8 @@ export default {
   position: absolute;
   top: 0px;
   bottom: 0px;
-  width: 100%;
+  left:5px;
+  right:0px;
   overflow-y: scroll;
   overflow-x: hidden;
 }

src/views/layout/index.vue

@@ -266,6 +266,7 @@ export default {
   color: #333;
   text-align: center;
   padding: 0px;
+  position: relative;
 }
 
 .el-menu-vertical-demo {