样式调整

public/static/config.js

@@ -9,8 +9,8 @@
 
 // api 请求路径
 var PLATFROM_CONFIG = {};
-//PLATFROM_CONFIG.baseUrl = "http://172.16.120.49/securityapi/"
-PLATFROM_CONFIG.baseUrl = "http://10.21.39.1:8082" //生产
+PLATFROM_CONFIG.baseUrl = "http://172.16.120.49/securityapi/"
+    //PLATFROM_CONFIG.baseUrl = "http://10.21.39.1:8082" //生产
     //alarming WEBSOCKET
 let userInfo = window.localStorage.getItem("key");
 var PLATFROM_WEBSOCKET = {};

src/App.vue

@@ -44,7 +44,7 @@ export default {
 </script>
 <style>
 ::-webkit-scrollbar-track-piece {
-    background: #d3dce6;
+    background: #fff;
   }
 
 ::-webkit-scrollbar {
@@ -52,7 +52,7 @@ export default {
   }
 
   ::-webkit-scrollbar-thumb {
-    background: #99a9bf;
+    background: #D7000F;
     border-radius: 20px;
   }
   .el-dialog .el-form-item{

src/assets/icons/svg/刷新.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1663055880128" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2371" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M960 416V192l-73.056 73.056a447.712 447.712 0 0 0-373.6-201.088C265.92 63.968 65.312 264.544 65.312 512S265.92 960.032 513.344 960.032a448.064 448.064 0 0 0 415.232-279.488 38.368 38.368 0 1 0-71.136-28.896 371.36 371.36 0 0 1-344.096 231.584C308.32 883.232 142.112 717.024 142.112 512S308.32 140.768 513.344 140.768c132.448 0 251.936 70.08 318.016 179.84L736 416h224z" p-id="2372" fill="#bfbfbf"></path></svg>

src/assets/styles/element-variables.scss

@@ -3,29 +3,26 @@
 * So I modified the default color and you can modify it to your liking.
 **/
 
+
 /* theme color */
-$--color-primary: #1890ff;
+
+$--color-primary: #D7000F;
 $--color-success: #13ce66;
 $--color-warning: #ffba00;
 $--color-danger: #ff4949;
 // $--color-info: #1E1E1E;
-
 $--button-font-weight: 400;
-
 // $--color-text-regular: #1f2d3d;
-
 $--border-color-light: #dfe4ed;
 $--border-color-lighter: #e6ebf5;
-
-$--table-border:1px solid#dfe6ec;
+$--table-border:1px solid #dfe6ec;
 
 /* icon font path, required */
-$--font-path: '~element-ui/lib/theme-chalk/fonts';
 
+$--font-path: '~element-ui/lib/theme-chalk/fonts';
 @import "~element-ui/packages/theme-chalk/src/index";
-
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
 :export {
-  theme: $--color-primary;
-}
+    theme: $--color-primary;
+}

src/assets/styles/index.scss

@@ -197,4 +197,8 @@ aside {
 
 .info {
     color: #909399
+}
+
+.el-scrollbar__wrap {
+    margin-bottom: -16px !important;
 }

src/assets/styles/variables.scss

@@ -18,7 +18,7 @@ $menuLightBg:#ccc;
 $menuLightHover:#f0f1f5;
 $sidebarLightTitle: #001529;
 $subMenuBg:#161523;
-$subMenuHover:#004BAD;
+$subMenuHover:#D7000F;
 $sideBarWidth: 200px;
 $zfb:#44B2FF;
 $wx:#51D455;

src/assets/styles/yongtian.scss

@@ -136,7 +136,6 @@
  
  .pagination-container .el-pagination {
      right: 0;
-     position: absolute;
  }
  
  @media ( max-width: 768px) {
@@ -291,4 +290,8 @@
  .top-right-btn {
      position: relative;
      float: right;
+ }
+ 
+ .right {
+     float: right;
  }

src/components/Breadcrumb/index.vue

@@ -83,4 +83,7 @@ export default {
     cursor: text;
   }
 }
+.el-breadcrumb__inner.is-link:hover, .el-breadcrumb__inner a:hover{
+  color:#D7000F;
+}
 </style>

src/components/TimeMenu/indexHome.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="right-sec">
+    <div class="right-menu">
+      <el-dropdown class="avatar-container" trigger="click">
+        <div class="avatar-wrapper">
+          <div><strong>{{nickName}}</strong></div>
+        </div>
+        <div class="logout"  @click="logout">
+          <span>安全退出</span>
+        </div>
+      </el-dropdown>
+    </div>
+    <div class="right-time date">{{ dateFormat(date) }}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "TimeMenu",
+  data() {
+    return {
+      date: new Date(), //实时时间
+      nickName:''
+    };
+  },
+  methods: {
+    logout(){
+      localStorage.clear();
+      this.$store.dispatch('logout').then(() => {
+        this.$router.push('/login')
+      }).catch(err => {
+        this.$message.error(err); //登录失败提示错误
+      });
+    },
+    setZero(a) {
+      //设置小于10的数字在加0
+      return a < 10 ? "0" + a : a;
+    },
+    dateFormat: function (time) {
+      var date = new Date(time);
+      var year = date.getFullYear();
+      /* 在日期格式中，月份是从0开始的，因此要加0
+       * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
+       * */
+      var month =
+        date.getMonth() + 1 < 10
+          ? "0" + (date.getMonth() + 1)
+          : date.getMonth() + 1;
+      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
+      var hours =
+        date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
+      var minutes =
+        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
+      var seconds =
+        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
+      // 拼接
+      return (
+        year +
+        "年" +
+        month +
+        "月" +
+        day +
+        "日 " +
+        hours +
+        ":" +
+        minutes +
+        ":" +
+        seconds
+      );
+    },
+  },
+  created(){
+    setTimeout(()=>{
+       this.nickName = this.$store.state.nickName
+    },500)
+  },
+  mounted() {
+    var _this = this;
+    this.timer = setInterval(() => {
+      _this.date = new Date(); // 修改日期数据
+    }, 1000);
+  },
+  destroyed() {
+    if (this.timer) {
+      clearInterval(this.timer); // 在Vue实例销毁前，清除当前日期定时器
+    }
+  },
+};
+</script>
+
+
+<style lang="scss" scoped>
+.right-sec{
+    position:absolute;
+    right:0;
+    top:0;
+
+}
+.right-time {
+    float: right;
+    line-height: 50px;
+    margin-right: 50px;
+    font-size:14px
+  }
+ .right-menu {
+    float: right;
+    height: 100%;
+    line-height: 50px;
+
+    &:focus {
+      outline: none;
+    }
+
+    .right-menu-item {
+      display: inline-block;
+      padding: 0 8px;
+      height: 100%;
+      font-size: 18px;
+      margin-top:-20px;
+      vertical-align: text-bottom;
+
+      &.hover-effect {
+        cursor: pointer;
+        transition: background 0.3s;
+
+        &:hover {
+          background: rgba(0, 0, 0, 0.025);
+        }
+      }
+    }
+    .avatar-container {
+      margin-right: 10px;
+      vertical-align: top;
+      font-size: 16px;
+      color:#fff;
+      .avatar-wrapper {
+        margin-top: 0px;
+        position: relative;
+        display: inline-block;
+        cursor: default;
+
+      }
+      .logout{
+        margin: 0px 0 0 20px;
+        position: relative;
+        display: inline-block;
+        z-index: 1;
+        cursor: pointer;
+      }
+    }
+  }
+</style>
+
+<style lang="scss">
+</style>

src/icons/svg/刷新.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1663055880128" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2371" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M960 416V192l-73.056 73.056a447.712 447.712 0 0 0-373.6-201.088C265.92 63.968 65.312 264.544 65.312 512S265.92 960.032 513.344 960.032a448.064 448.064 0 0 0 415.232-279.488 38.368 38.368 0 1 0-71.136-28.896 371.36 371.36 0 0 1-344.096 231.584C308.32 883.232 142.112 717.024 142.112 512S308.32 140.768 513.344 140.768c132.448 0 251.936 70.08 318.016 179.84L736 416h224z" p-id="2372" fill="#bfbfbf"></path></svg>

src/layout/components/Sidebar/SidebarItem.vue

@@ -104,42 +104,49 @@ export default {
   @import "~@/styles/mixin.scss";
   @import "~@/styles/variables.scss";
 
-  // .app-wrapper {
-  //   @include clearfix;
-  //   position: relative;
-  //   height: 100%;
-  //   width: 100%;
-
-  //   &.mobile.openSidebar {
-  //     position: fixed;
-  //     top: 0;
-  //   }
-  // }
-
-  // .drawer-bg {
-  //   background: #000;
-  //   opacity: 0.3;
-  //   width: 100%;
-  //   top: 0;
-  //   height: 100%;
-  //   position: absolute;
-  //   z-index: 999;
-  // }
-
-  // .fixed-header {
-  //   position: fixed;
-  //   top: 0;
-  //   right: 0;
-  //   z-index: 9;
-  //   width: calc(100% - #{$sideBarWidth});
-  //   transition: width 0.28s;
-  // }
+.item2:last-child{
+    margin-bottom:80px !important
+}
+#app .sidebar-container,.sidebar-container,.sidebar-logo-container{
+    background-color: #1F1E2E;
+}
+.el-menu-item.is-active{
+  color:#D7000F !important;
+  .is-opened>.el-submenu__title svg,.is-opened>.el-submenu__title span,.is-opened>.el-submenu__title i{
+    color:#D7000F !important;
+  }
+}
+.el-submenu__title:hover{
+  .is-opened>.el-submenu__title svg,.is-opened>.el-submenu__title span,.is-opened>.el-submenu__title i{
+    color:#fff !important;
+  }
+}
 
-  // .hideSidebar .fixed-header {
-  //   width: calc(100% - 54px)
-  // }
+</style>
+<style>
+
+/* #app .sidebar-container .theme-dark .nest-menu .el-submenu > .el-submenu__title:hover, #app .sidebar-container .theme-dark .el-submenu .el-menu-item:hover{
+  color:#fff !important;
+  background: #D7000F ;
+} */
+.nest-menu:hover{
+  background: #D7000F !important ;
+  color:#fff !important;
+}
+#app .sidebar-container .scrollbar-wrapper{
+  background: rgb(31, 30, 46);
+}
+.el-submenu__title,.submenu-title-noDropdown,.sidebar-container{
+  background: rgb(31, 30, 46) !important;
+  color:#fff !important;
+}
+.el-submenu__title{
+  height:48px;
+  line-height: 48px;
+}
+#app .sidebar-container .nest-menu .el-submenu > .el-submenu__title:hover, #app .sidebar-container .el-submenu .el-menu-item:hover{
+  color:#fff !important;
+  background: #D7000F !important ;
+}
 
-  // .mobile .fixed-header {
-  //   width: 100%;
-  // }
 </style>

src/styles/index.scss

@@ -63,8 +63,8 @@ div:focus {
 }
 
 .el-button--primary {
-    background-color: #5C88FA;
-    border-color: #5C88FA;
+    background-color: #D7000F;
+    border-color: #D7000F;
 }
 
 .el-button--success {
@@ -91,7 +91,7 @@ div:focus {
     font-size: 16px;
 }
 
-// 筛选条件样式 
+// 筛选条件样式
 .filter-container {
     // margin: 20px 0;
     font-size: 14px;
@@ -209,7 +209,7 @@ div:focus {
     max-height: calc(100% - 30px);
     max-width: calc(100% - 30px);
     .el-form-item {
-        margin-bottom: 20px
+        //margin-bottom: 20px
     }
     .el-form-item__content,
     .el-form-item__label {
@@ -275,8 +275,8 @@ div:focus {
 //分页重置样式
 .el-pagination {
     position: absolute;
-    bottom: 10px;
-    right: 10px;
+    margin-top: 20px;
+    right: 5px;
     z-index: 11
 }
 
@@ -288,12 +288,26 @@ div:focus {
     color: #606266
 }
 
+.el-pagination.is-background .btn-next:hover,
+.el-pagination.is-background .btn-prev:hover,
+.el-pagination.is-background .el-pager li:hover {
+    background-color: #fff;
+    border: 1px solid #D7000F;
+    color: #606266
+}
+
+.el-pagination.is-background .el-pager li:not(.disabled).active {
+    background-color: #D7000F;
+    border: 1px solid #D7000F !important;
+    color: #fff;
+}
+
 // 日期选择器样式重置
 .el-range-editor.el-input__inner {
     padding: 0 10px
 }
 
-// 选择文件样式重置 
+// 选择文件样式重置
 // .chooseFile {
 //     background: #aaa;
 //     border-color: rgba(0, 0, 0, 0);
@@ -339,4 +353,34 @@ div:focus {
 
 .el-dialog__headerbtn .el-dialog__close {
     color: #303133
+}
+
+.lans {
+    color: #016de7;
+}
+
+.lvs {
+    color: #1abc5e;
+}
+
+.chengs {
+    color: #ff9500;
+}
+
+.hongs {
+    color: #ff3b30;
+}
+
+.right {
+    float: right;
+}
+
+.el-table--border {
+    border: 1px solid #dfe6ec !important;
+    //  border-bottom: 1px solid #dfe6ec !important;
+    border-right: none !important;
+}
+
+.el-form-item {
+    margin-bottom: 0px !important;
 }

src/styles/variables.scss

@@ -1,10 +1,10 @@
 // sidebar
-$menuText:#bfcbd9;
+$menuText:#fff;
 $menuActiveText:#5C88FA;
 $subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
 $menuBg:#031E55;
-$menuHover:#263445;
-$subMenuBg:#021640;
+$menuHover:#D7000F;
+$subMenuBg:#13131C;
 $subMenuHover:#001528;
 $sideBarWidth: 210px;
 // the :export directive is the magic sauce for webpack

src/views/MochaITOM/crew/index.vue

@@ -1,17 +1,16 @@
 <template>
   <div class="app-container">
     <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" >
-      <el-form-item label="班组名称：" prop="name">
+      <el-form-item label="班组名称:" prop="name">
         <el-input
           v-model.trim="queryParams.name"
           placeholder="请输入班组名称"
           clearable
           size="small"
-          style="width: 160px"
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="责任人：" prop="dutyName">
+      <el-form-item label="责任人:" prop="dutyName">
         <el-select v-model="queryParams.dutyName"   placeholder="请选择责任人" style="width: 140px" >
           <el-option
             v-for="item in zrr"
@@ -22,19 +21,18 @@
           ></el-option>
         </el-select>
       </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-        <el-button
-          type="success"
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-        >新增</el-button>
+      <el-form-item class="right">
+        <el-button plain size="mini" @click="resetQuery">重置</el-button>
+        <el-button type="primary" size="mini" @click="handleQuery">搜索</el-button>
       </el-form-item>
+      <br>
+      <el-button
+        type="primary"
+        size="mini"
+        @click="handleAdd"
+      >新增</el-button>
     </el-form>
-
-    <el-table v-loading="loading" :data="adminList" :max-height="tableHeight">
+    <el-table v-loading="loading" :data="adminList" style="margin-top:20px;" border>
       <el-table-column label="班组名称" align="center" prop="name"  show-overflow-tooltip />
       <el-table-column label="责任人" align="center" prop="dutyName"  show-overflow-tooltip />
       <el-table-column label="联系方式" align="center" prop="dutyPhone"  show-overflow-tooltip />
@@ -46,14 +44,12 @@
         <template slot-scope="scope">
           <el-button
             size="mini"
-            type="text"
-            icon="el-icon-edit"
+            class="lans"
             @click="handleUpdate(scope.row)"
           >修改</el-button>
           <el-button
             size="mini"
-            type="text"
-            icon="el-icon-delete"
+            class="hongs"
             @click="handleDelete(scope.row)"
           >删除</el-button>
         </template>
@@ -70,7 +66,7 @@
             </el-form-item>
           </el-col>
           <div class="btn" style="text-align: left;margin:0 auto 30px;float:right">
-            <el-button type="primary" icon="el-icon-plus" size="mini" @click="addItem">新增人员</el-button>
+            <el-button type="primary"  size="mini" @click="addItem">新增人员</el-button>
           </div>
           <el-table :data="list" border   stripe height="200" :rules="rules2" >
             <el-table-column label="序号" width="80px" align='center'>
@@ -82,8 +78,6 @@
               <template slot-scope="scope">
                 <el-switch
                   v-model="scope.row.switch"
-                  active-color="#13ce66"
-                  inactive-color="#ff4949"
                   @change="handleStatusChange(scope.row,scope.$index)"
                 ></el-switch>
               </template>
@@ -112,7 +106,7 @@
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
+        <el-button @click="cancel" plain>取 消</el-button>
       </div>
     </el-dialog>
     <el-pagination
@@ -205,17 +199,7 @@ export default {
     this.getList();//初始化table
   },
   mounted() {
-    // table高度
-    if(window.innerWidth <1920){
-      this.tableHeight = window.innerHeight - 300
-    }else{
-      this.tableHeight = window.innerHeight - 295
-    }
-    // 监听窗口大小变化
-    let self = this;
-    window.onresize = function() {
-      self.tableHeight = window.innerHeight - 300
-    }
+
   },
   methods: {
     //分页查询

src/views/MochaITOM/plan/index.vue

@@ -1,28 +1,27 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="90px">
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" >
       <el-form-item label="计划名称：" prop="name">
         <el-input
           v-model.trim="queryParams.name"
           placeholder="请输入计划名称"
           clearable
           size="small"
-          style="width: 160px"
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-        <el-button
-          type="success"
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-        >新增</el-button>
+      <el-form-item class="right">
+        <el-button plain size="mini" @click="resetQuery">重置</el-button>
+        <el-button type="primary" size="mini" @click="handleQuery">搜索</el-button>
       </el-form-item>
+      <br>
+      <el-button
+        type="primary"
+        size="mini"
+        @click="handleAdd"
+      >新增</el-button>
     </el-form>
-    <el-table v-loading="loading" :data="adminList" :max-height="tableHeight">
+    <el-table v-loading="loading" :data="adminList" style="margin-top:20px;" border>
       <el-table-column label="计划名称" align="center" prop="name"  show-overflow-tooltip />
       <el-table-column label="周期" align="center" prop="cycle"  show-overflow-tooltip >
         <template slot-scope="scope">
@@ -38,14 +37,12 @@
         <template slot-scope="scope">
           <el-button
             size="mini"
-            type="text"
-            icon="el-icon-edit"
+            class="lans"
             @click="handleUpdate(scope.row)"
           >修改</el-button>
           <el-button
             size="mini"
-            type="text"
-            icon="el-icon-delete"
+            class="hongs"
             @click="handleDelete(scope.row)"
           >删除</el-button>
         </template>
@@ -174,7 +171,7 @@
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
+        <el-button @click="cancel" plain>取 消</el-button>
       </div>
     </el-dialog>
     <el-pagination
@@ -281,17 +278,7 @@ export default {
     this.zxtimeEnd()
   },
   mounted() {
-    // table高度
-    if(window.innerWidth <1920){
-      this.tableHeight = window.innerHeight - 300
-    }else{
-      this.tableHeight = window.innerHeight - 295
-    }
-    // 监听窗口大小变化
-    let self = this;
-    window.onresize = function() {
-      self.tableHeight = window.innerHeight - 300
-    }
+
   },
   methods: {
     //分页查询

src/views/MochaITOM/point/index.vue

@@ -1,13 +1,12 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="90px">
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" >
       <el-form-item label="点位名称：" prop="name">
         <el-input
           v-model.trim="queryParams.name"
           placeholder="请输入点位名称"
           clearable
           size="small"
-          style="width: 160px"
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
@@ -17,32 +16,22 @@
           placeholder="请输入点位地址"
           clearable
           size="small"
-          style="width: 160px"
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-        <el-button
-          type="success"
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-        >新增</el-button>
-        <!-- <el-button
-          type="warning"
-          plain
-          icon="el-icon-download"
-          size="mini"
-          :loading="exportLoading"
-          @click="handleExport"
-          v-hasPermi="['system:admin:export']"
-        >导出</el-button> -->
+      <el-form-item class="right">
+        <el-button plain size="mini" @click="resetQuery">重置</el-button>
+        <el-button type="primary"  size="mini" @click="handleQuery">搜索</el-button>
       </el-form-item>
+      <br>
+      <el-button
+        type="primary"
+        size="mini"
+        @click="handleAdd"
+      >新增</el-button>
     </el-form>
 
-    <el-table v-loading="loading" :data="adminList"  :max-height="tableHeight">
+    <el-table v-loading="loading" :data="adminList"  style="margin-top:20px;" border>
       <el-table-column label="点位名称" align="center" prop="name"  show-overflow-tooltip />
       <el-table-column label="点位地址" align="center" prop="address"  show-overflow-tooltip />
       <el-table-column label="摄像头名称" align="center" prop="dhDeviceName"  show-overflow-tooltip />
@@ -65,14 +54,12 @@
         <template slot-scope="scope">
           <el-button
             size="mini"
-            type="text"
-            icon="el-icon-edit"
+            class="lans"
             @click="handleUpdate(scope.row)"
           >修改</el-button>
           <el-button
             size="mini"
-            type="text"
-            icon="el-icon-delete"
+            class="lans"
             @click="handleDelete(scope.row)"
           >删除</el-button>
         </template>
@@ -110,7 +97,7 @@
               </el-select>
             </el-form-item>
           </el-col>
-          
+
           <!-- <el-col :span="12">
             <el-form-item label="设备类型" prop="dwtype">
               <el-select v-model="form.dwtype"   placeholder="请选择设备类型">
@@ -141,7 +128,7 @@
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
+        <el-button @click="cancel" plain>取 消</el-button>
       </div>
     </el-dialog>
     <!-- <pagination
@@ -231,17 +218,7 @@ export default {
     this.getList();//初始化table
   },
   mounted() {
-    // table高度
-    if(window.innerWidth <1920){
-      this.tableHeight = window.innerHeight - 300
-    }else{
-      this.tableHeight = window.innerHeight - 295
-    }
-    // 监听窗口大小变化
-    let self = this;
-    window.onresize = function() {
-      self.tableHeight = window.innerHeight - 300
-    }
+
   },
   methods: {
     //分页查询
@@ -279,7 +256,7 @@ export default {
         }
       })
     },
-    
+
     creatQrCode(text) {//二维码
       var qrcode = new QRCode(this.$refs.qrCodeUrl, {
           text: "点位编号:" + text, // 需要转换为二维码的内容
@@ -439,7 +416,7 @@ export default {
         document.getElementById("xz").click()
       })
     }
-    
+
   }
 };
 </script>

src/views/MochaITOM/record/index.vue

@@ -18,21 +18,12 @@
           <el-option value="1" label="已完成"></el-option>
         </el-select>
       </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-        <!-- <el-button
-          type="warning"
-          plain
-          icon="el-icon-download"
-          size="mini"
-          :loading="exportLoading"
-          @click="handleExport"
-          v-hasPermi="['system:admin:export']"
-        >导出</el-button> -->
+      <el-form-item class="right">
+        <el-button plain size="mini" @click="resetQuery">重置</el-button>
+        <el-button type="primary"  size="mini" @click="handleQuery">搜索</el-button>
       </el-form-item>
     </el-form>
-    <el-row :gutter="20" v-loading="loading2">
+    <el-row :gutter="20" v-loading="loading2" style="margin-top:10px">
       <el-col :span="2.4">
         <el-col class="event">
             记录数量<span class="color1 colorc">{{collectList.total}}</span>
@@ -55,7 +46,7 @@
         </el-col>
       </el-col>
     </el-row>
-    <el-table v-loading="loading" :data="adminList" style="margin-top:20px;" :max-height="tableHeight">
+    <el-table v-loading="loading" :data="adminList" style="margin-top:20px;" border>
       <el-table-column label="任务名称" align="center" prop="planName" show-overflow-tooltip />
       <el-table-column label="维保点位" align="center" prop="pointName" show-overflow-tooltip />
       <el-table-column label="应完成时间" align="center" prop="endDate" show-overflow-tooltip />
@@ -70,14 +61,12 @@
       <el-table-column label="操作" width="190" fixed="right" >
         <template slot-scope="scope">
           <el-button v-if="scope.row.isComplete && scope.row.updateTime"
-            icon="el-icon-video-play"
-            style="color: #406ce5"
+            class="lans"
             @click="play(scope.row)"
             >视频回放</el-button
           >
           <el-button v-else
-            icon="el-icon-video-play"
-            style="color: #406ce5"
+            class="lans"
             @click="play(scope.row)"
             disabled
             >视频回放</el-button
@@ -171,17 +160,7 @@ export default {
     // this.getCollect();//初始化table
   },
   mounted() {
-    // table高度
-    if(window.innerWidth <1920){
-      this.tableHeight = window.innerHeight - 300
-    }else{
-      this.tableHeight = window.innerHeight - 295
-    }
-    // 监听窗口大小变化
-    let self = this;
-    window.onresize = function() {
-      self.tableHeight = window.innerHeight - 300
-    }
+
   },
   methods: {
     //分页查询

src/views/MochaITOM/route/index.vue

@@ -1,28 +1,27 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="90px">
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" >
       <el-form-item label="路线名称：" prop="name">
         <el-input
           v-model.trim="queryParams.name"
           placeholder="请输入路线名称"
           clearable
           size="small"
-          style="width: 160px"
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      <el-form-item class="right">
+        <el-button plain size="mini" @click="resetQuery">重置</el-button>
+        <el-button type="primary" size="mini" @click="handleQuery">搜索</el-button>
+      </el-form-item>
+      <br>
         <el-button
-          type="success"
-          icon="el-icon-plus"
+         type="primary"
           size="mini"
           @click="handleAdd"
         >新增</el-button>
-      </el-form-item>
     </el-form>
-    <el-table v-loading="loading" :data="adminList" :max-height="tableHeight">
+    <el-table v-loading="loading" :data="adminList" style="margin-top:20px;" border>
       <el-table-column label="路线名称" align="center" prop="name"  show-overflow-tooltip />
       <el-table-column label="创建时间" align="center" prop="createTime"  show-overflow-tooltip />
       <el-table-column label="创建人" align="center" prop="createBy"  show-overflow-tooltip />
@@ -30,14 +29,12 @@
         <template slot-scope="scope">
           <el-button
             size="mini"
-            type="text"
-            icon="el-icon-edit"
+            class="lans"
             @click="handleUpdate(scope.row)"
           >修改</el-button>
           <el-button
             size="mini"
-            type="text"
-            icon="el-icon-delete"
+            class="lans"
             @click="handleDelete(scope.row)"
           >删除</el-button>
         </template>
@@ -75,7 +72,7 @@
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
+        <el-button @click="cancel" plain>取 消</el-button>
       </div>
     </el-dialog>
     <el-pagination
@@ -147,17 +144,7 @@ export default {
     this.getList();//初始化table
   },
   mounted() {
-    // table高度
-    if(window.innerWidth <1920){
-      this.tableHeight = window.innerHeight - 300
-    }else{
-      this.tableHeight = window.innerHeight - 295
-    }
-    // 监听窗口大小变化
-    let self = this;
-    window.onresize = function() {
-      self.tableHeight = window.innerHeight - 300
-    }
+
   },
   methods: {
     //分页查询
@@ -265,7 +252,7 @@ export default {
           }
           this.getList2(row)
           this.open = true;
-      })  
+      })
     },
     /** 新增按钮操作 */
     handleAdd() {

src/views/alarm/alarm-log/index.vue

@@ -1,47 +1,41 @@
 <template>
   <div class="app-container">
-    <div class="filter-container">
-      <div class="filter-left">
-        <div class="filter-item">
-          防区名:
-          <el-input
-            v-model="query.guardCode"
+    <el-form :model="query" ref="query" :inline="true"  >
+      <el-form-item label="防区名:" >
+        <el-input
+          v-model="query.guardCode"
             placeholder="请输入防区名"
-            style="width: 150px"
             clearable
-          ></el-input>
-        </div>
-        <div class="filter-item">
-          处理状态:
-          <el-select v-model="status_value" placeholder="请选择处理状态" style="width: 160px" @change="select_status" clearable>
-            <el-option
-              v-for="item in status"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-
-            >
-            </el-option>
-          </el-select>
-        </div>
+        />
+      </el-form-item>
+      <el-form-item label="处理状态:" >
+        <el-select v-model="status_value" placeholder="请选择处理状态"  @change="select_status" clearable>
+          <el-option
+            v-for="item in status"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item class="right">
+        <el-button  plain size="mini" @click="resetQuery">重置</el-button>
         <el-button
           type="primary"
-          icon="el-icon-search"
           size="mini"
           @click="getData()"
-          >查询</el-button
+          >搜索</el-button
         >
-        <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </div>
-    </div>
-    <!-- <el-divider></el-divider> -->
+      </el-form-item>
+    </el-form>
     <el-table
       id="out-table"
       :data="tableData"
       stripe
       @selection-change="handleSelectionChange"
-      :max-height="tableHeight"
-      style="margin-top:10px"
+      border
+      style="margin-top:20px"
     >
       <el-table-column prop="cidcode" label="设防码" show-overflow-tooltip></el-table-column>
       <el-table-column prop="cidlevel" label="设防级别" show-overflow-tooltip></el-table-column>
@@ -79,14 +73,12 @@
       <el-table-column label="操作" width="160" fixed="right">
         <template slot-scope="scope">
           <el-button v-if="scope.row.status == '0'"
-            icon="el-icon-edit"
-            style="color: #406ce5"
+            class="lans"
             @click="handleUpdate(scope.$index, scope.row)"
             >处置</el-button
           >
           <el-button
-            icon="el-icon-delete"
-            style="color: #f27979"
+            class="hongs"
             @click="handleDelete(scope.$index, scope.row)"
             >删除</el-button
           >
@@ -106,7 +98,7 @@
       <div slot="footer" class="dialog-footer">
         <el-button
           @click="dialogFormVisible = false"
-          style="background: #f6f6f6"
+          plain
           >关 闭</el-button
         >
         <el-button type="primary" @click="updatePerimeterAlarm()"
@@ -114,7 +106,7 @@
         >
       </div>
     </el-dialog>
-    <el-pagination
+    <el-pagination v-if="paginationStatus"
       background
       @current-change="handleCurrentChange"
       :page-sizes="[10, 15, 20, 30]"
@@ -188,20 +180,11 @@ export default {
       },
       //表格自适应高度
       tableHeight:undefined,
+      paginationStatus:false,
     };
   },
   mounted() {
-    // table高度
-    if(window.innerWidth <1920){
-      this.tableHeight = window.innerHeight - 300
-    }else{
-      this.tableHeight = window.innerHeight - 295
-    }
-    // 监听窗口大小变化
-    let self = this;
-    window.onresize = function() {
-      self.tableHeight = window.innerHeight - 240
-    }
+
     this.getData()
   },
   methods: {
@@ -245,6 +228,7 @@ export default {
       api.queryPerimeterAlarm(this.query).then((Response) => {
         this.tableData = Response.data.pageList;
         this.totalCount = Response.data.totalCount;
+        this.paginationStatus = true
       });
     },
     formatJson(filterVal, data) {

src/views/alarm/alarm-task/index.vue

@@ -1,53 +1,46 @@
 <template>
   <div class="app-container">
-    <div class="filter-container">
-      <div class="filter-left">
-        <div class="filter-item">
-          实际班组:
-          <el-input
-            v-model="query.UserName"
+    <el-form :model="query" ref="query" :inline="true"  >
+      <!-- <el-form-item label="实际班组:" >
+        <el-input
+          v-model="query.eTeamName"
             placeholder="请输入实际班组"
-            style="width: 150px"
             clearable
-          ></el-input>
-        </div>
-        <div class="filter-item">
-          实际巡更人:
-          <el-input
-            v-model="query.eTeamName"
+        />
+      </el-form-item> -->
+      <el-form-item label="实际巡更人:" >
+        <el-input
+          v-model="query.eUserName"
             placeholder="请输入实际巡更人"
-            style="width: 160px"
             clearable
-          ></el-input>
-        </div>
-        <div class="filter-item">
-          线路名称:
-          <el-input
-            v-model="query.eLName"
+        />
+      </el-form-item>
+      <el-form-item label="线路名称:" >
+        <el-input
+          v-model="query.eLName"
             placeholder="请输入线路名称"
-            style="width: 150px"
             clearable
-          ></el-input>
-        </div>
+        />
+      </el-form-item>
+      <el-form-item class="right">
+        <el-button  plain size="mini" @click="resetQuery">重置</el-button>
         <el-button
           type="primary"
-          icon="el-icon-search"
           size="mini"
           @click="getData('query')"
           >搜索</el-button
         >
-        <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </div>
-    </div>
+      </el-form-item>
+    </el-form>
     <!-- <el-divider></el-divider> -->
     <el-table
       v-loading="loading"
       :data="tableData"
       stripe
-      style="width: 100%;margin-top:10px"
       id="out-table"
       @selection-change="handleSelectionChange"
-      :max-height="tableHeight"
+      border
+      style="margin-top:20px"
     >
       <el-table-column prop="eBindDevice" label="计划巡更设备" show-overflow-tooltip></el-table-column>
       <el-table-column prop="eBindTeam" label="计划绑定班组" show-overflow-tooltip></el-table-column>
@@ -73,7 +66,7 @@
       <el-table-column prop="eTeamName" label="实际班组" show-overflow-tooltip></el-table-column>
       <el-table-column prop="eUserName" label="实际巡更人" show-overflow-tooltip></el-table-column>
     </el-table>
-    <el-pagination
+    <el-pagination v-if="paginationStatus"
       background
       @current-change="handleCurrentChange"
       :page-sizes="[10, 15, 20, 30]"
@@ -129,20 +122,11 @@ export default {
       },
       //表格自适应高度
       tableHeight:undefined,
+      paginationStatus:false,
     };
   },
   mounted(){
-    // table高度
-    if(window.innerWidth <1920){
-      this.tableHeight = window.innerHeight - 300
-    }else{
-      this.tableHeight = window.innerHeight - 295
-    }
-    // 监听窗口大小变化
-    let self = this;
-    window.onresize = function() {
-      self.tableHeight = window.innerHeight - 300
-    }
+
   },
   created() {
     this.getData();
@@ -170,6 +154,7 @@ export default {
         api.queryPatrollingPlanStatus(this.query).then((Response) => {
           this.tableData = Response.data.pageList;
           this.totalCount = Response.data.totalCount;
+          this.paginationStatus = true
           this.loading = false
           if(this.tableData.length<1){
             setTimeout(() =>{
@@ -181,6 +166,7 @@ export default {
         api.queryPatrollingPlanStatus(this.form).then((Response) => {
           this.tableData = Response.data.pageList;
           this.totalCount = Response.data.totalCount;
+          this.paginationStatus = true
           this.loading = false
           if(this.tableData.length<1){
             setTimeout(() =>{

src/views/device/camera/index.vue

@@ -1,95 +1,85 @@
 <template>
   <div class="app-container">
-    <div class="filter-container">
-      <div class="filter-left">
-        <div class="filter-item">
-          设备id:
-          <el-input
-            v-model="query.deviceId"
-            placeholder="请输入设备id"
-            style="width: 150px"
-            clearable
-          ></el-input>
-        </div>
-        <div class="filter-item">
-          通道id:
-          <el-input
-            v-model="query.id"
-            placeholder="请输入通道id"
-            style="width: 150px"
-            clearable
-          ></el-input>
-        </div>
-        <div class="filter-item">
-          通道名称:
-          <el-input
-            v-model="query.name"
-            placeholder="请输入通道名称"
+    <el-form :model="query" ref="query" :inline="true"  >
+      <el-form-item label="设备id:" >
+        <el-input
+          v-model="query.deviceId"
+          placeholder="请输入设备id"
+          clearable
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="通道id:" >
+        <el-input
+          v-model="query.id"
+          placeholder="请输入通道id"
+          clearable
+        ></el-input>
+      </el-form-item>
+       <el-form-item label="通道名称:" >
+        <el-input
+          v-model="query.name"
+          placeholder="请输入通道名称"
+          clearable
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="通道状态:" >
+        <el-select
+          v-model="query.status"
+          placeholder="请选择通道状态"
+          clearable
+          size="small"
+          style="width: 150px"
+        >
+          <el-option
+            v-for="dict in statusOptions"
+            :key="dict.dictValue"
+            :label="dict.dictLabel"
+            :value="dict.dictValue"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="通道类型:" >
+        <el-select
+          v-model="query.cameraType"
+          placeholder="请选择通道类型"
+          clearable
+          size="small"
             style="width: 150px"
-            clearable
-          ></el-input>
-        </div>
-        <div class="filter-item">
-          通道状态:
-         <el-select
-              v-model="query.status"
-              placeholder="请选择通道状态"
-              clearable
-              size="small"
-              style="width: 150px"
-            >
-              <el-option
-                v-for="dict in statusOptions"
-                :key="dict.dictValue"
-                :label="dict.dictLabel"
-                :value="dict.dictValue"
-              />
-            </el-select>
-        </div>
-        <div class="filter-item">
-          通道类型:
-         <el-select
-              v-model="query.cameraType"
-              placeholder="请选择通道类型"
-              clearable
-              size="small"
-               style="width: 150px"
-            >
-              <el-option
-                v-for="dict in cameraTypeOptions"
-                :key="dict.dictValue"
-                :label="dict.dictLabel"
-                :value="dict.dictValue"
-              />
-            </el-select>
-        </div>
+        >
+          <el-option
+            v-for="dict in cameraTypeOptions"
+            :key="dict.dictValue"
+            :label="dict.dictLabel"
+            :value="dict.dictValue"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item class="right">
+        <el-button plain size="mini" @click="resetQuery">重置</el-button>
         <el-button
           type="primary"
-          icon="el-icon-search"
           size="mini"
           @click="getData()"
           >搜索</el-button
         >
-        <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-        <el-button
-          type="primary"
-          class="search-button"
-          @click="getDhDeviceListNew()"
-          >同步摄像头信息</el-button
-        >
-      </div>
-      <div class="handle-button-right">
-      </div>
-    </div>
+      </el-form-item>
+      <br>
+      <el-button
+        type="primary"
+        size="mini"
+        @click="getDhDeviceListNew()"
+        >同步摄像头信息</el-button
+      >
+    </el-form>
     <!-- <el-divider></el-divider> -->
     <div ref="table">
       <el-table
       :data="tableData"
-      style="width: 100%;margin-top:10px"
       row-key="id"
       :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
       v-loading="loading"
-      :max-height="tableHeight"
+      border
+      style="margin-top:20px"
     >
       <el-table-column prop="{deviceName}" label="设备名称"  show-overflow-tooltip>
         <template  slot-scope="scope">
@@ -134,14 +124,14 @@
       <el-table-column label="操作" width="190" fixed="right">
         <template slot-scope="scope">
           <el-button
-            icon="el-icon-video-play"
-            style="color: #406ce5"
+            class="lans"
+            plain
             @click="play(scope.row)"
             >播放</el-button
           >
           <el-button
-            icon="el-icon-video-play"
-            style="color: #406ce5"
+            class="lans"
+            plain
             @click="Hplay(scope.row)"
             >回放</el-button
           >
@@ -212,7 +202,7 @@
       <div slot="footer" class="dialog-footer">
         <el-button
           @click="dialogFormVisible = false"
-          style="background: #f6f6f6"
+          plain
           >取 消</el-button
         >
         <el-button type="primary" @click="registerLocalDevice()">{{

src/views/device/camera2/index.vue

@@ -1,55 +1,48 @@
 <template>
   <div class="app-container">
     <!-- 搜索 增加 -->
-    <div class="filter-container">
-      <div class="filter-left">
-        <div class="filter-item">
-          设备id:
+    <el-form :model="query" ref="query" :inline="true"  >
+      <el-form-item label="设备id:" >
           <el-input
             v-model="query.code"
             placeholder="请输入设备id"
-            style="width: 150px"
             clearable
           ></el-input>
-        </div>
-        <div class="filter-item">
-          设备名称:
+      </el-form-item>
+      <el-form-item label="设备名称:" >
           <el-input
             v-model="query.name"
             placeholder="请输入设备名称"
-            style="width: 150px"
             clearable
           ></el-input>
-        </div>
-        <div class="filter-item">
-          单位名称:
+      </el-form-item>
+      <el-form-item label="单位名称" >
           <el-input
             v-model="query.unit"
             placeholder="请输入单位名称"
-            style="width: 150px"
             clearable
           ></el-input>
-        </div>
+      </el-form-item>
+      <el-form-item class="right" >
+        <el-button plain size="mini" @click="resetQuery">重置</el-button>
         <el-button
           type="primary"
-          icon="el-icon-search"
           size="mini"
           @click="getData()"
           >搜索</el-button>
-          <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-        <el-button icon="el-icon-plus" type="success" size="mini" @click="AddoOrEdit()">新增</el-button>
-      </div>
-
-    </div>
+      </el-form-item>
+      <br>
+      <el-button type="primary" size="mini" @click="AddoOrEdit()">新增</el-button>
+   </el-form>
     <!-- <el-divider></el-divider> -->
     <!-- 初始化数据 -->
     <el-table
       :data="tableData"
-      style="width: 100%;margin-top:10px"
+      style="width: 100%;margin-top:20px"
       row-key="id"
       :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
       v-loading="loading"
-      :max-height="tableHeight"
+      border
     >
       <el-table-column prop="id" label="id" show-overflow-tooltip></el-table-column>
       <el-table-column prop="code" label="设备id" show-overflow-tooltip></el-table-column>
@@ -64,20 +57,17 @@
       <el-table-column label="操作" width="250" fixed="right">
         <template slot-scope="scope">
           <el-button
-            icon="el-icon-video-play"
-            style="color: #406ce5"
+            class="lans"
             @click="playListOperation(scope.row)"
             >画面列表</el-button
           >
           <el-button
-            icon="el-icon-video-play"
-            style="color: #406ce5"
+            class="lans"
             @click="AddoOrEdit(scope.row)"
             >编辑</el-button
           >
           <el-button
-            icon="el-icon-delete"
-            style="color: #f27979"
+            class="hongs"
             @click="handleDelete(scope.$index, scope.row)"
             >删除</el-button
           >
@@ -189,7 +179,7 @@
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm" v-if="!loading">确 定</el-button>
         <el-button :loading="loading" type="primary"  v-else>提交中...</el-button>
-        <el-button @click="cancel">取 消</el-button>
+        <el-button @click="cancel" plain>取 消</el-button>
       </div>
     </el-dialog>
     <!-- 播放列表 -->
@@ -207,15 +197,13 @@
         <el-table-column label="操作" width="190" fixed="right">
         <template slot-scope="scope">
           <el-button
-            icon="el-icon-video-play"
-            style="color: #406ce5"
+            class="lans"
             @click="play(scope.row)"
             >播放</el-button
           >
           <el-button
             v-if="NoHplay"
-            icon="el-icon-video-play"
-            style="color: #406ce5"
+            class="lans"
             @click="Hplay(scope.row)"
             >回放</el-button
           >

src/views/device/guard/index.vue

@@ -1,44 +1,21 @@
 <template>
   <div class="app-container">
-    <div class="filter-container">
-      <div class="filter-left">
-        <div class="filter-item">
-          分区名称:
+    <el-form :model="query" ref="query" :inline="true"  >
+      <el-form-item label="分区名称:" >
           <el-input
             v-model="query.dkAreaName"
             placeholder="请输入分区名称"
-            style="width: 150px"
             clearable
           ></el-input>
-        </div>
-        <div class="filter-item">
-          防区名称:
+      </el-form-item>
+      <el-form-item label="防区名称:" >
           <el-input
             v-model="query.dkZoneName"
             placeholder="请输入防区名称"
-            style="width: 150px"
             clearable
           ></el-input>
-        </div>
-        <!-- <div class="filter-item">
-          设备状态:
-          <el-select
-            v-model="query.dkZoneStatus"
-            placeholder="请选择设备状态"
-            clearable
-            size="small"
-            style="width: 150px"
-          >
-            <el-option
-              v-for="dict in deviceStatus"
-              :key="dict.dictValue"
-              :label="dict.dictLabel"
-              :value="dict.dictValue"
-            />
-          </el-select>
-        </div> -->
-        <div class="filter-item">
-          布防状态:
+      </el-form-item>
+       <el-form-item label="布防状态:" >
           <el-select
             v-model="query.dkZoneStatus"
             placeholder="请选择布防状态"
@@ -53,11 +30,11 @@
               :value="dict.dictValue"
             />
           </el-select>
-        </div>
-
+      </el-form-item>
+      <el-form-item class="right" >
+        <el-button  plain size="mini" @click="resetQuery">重置</el-button>
         <el-button
           type="primary"
-          icon="el-icon-search"
           size="mini"
           @click="
             queryPerimeterDevice({
@@ -65,26 +42,21 @@
               pageSize: pageSize,
               dkAreaName: query.dkAreaName,
               dkZoneName: query.dkZoneName,
-              dkZoneStatus: query.dkZoneStatus,
-
-            })
-          "
+              dkZoneStatus: query.dkZoneStatus,})"
           >搜索</el-button
         >
-        <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-        <el-button icon="el-icon-plus" type="success" size="mini"  @click="handleAdd()"
-          >新增</el-button
-        >
-      </div>
-    </div>
+      </el-form-item>
+      <br>
+      <el-button type="primary" size="mini"  @click="handleAdd()" >新增</el-button>
+    </el-form>
     <!-- <el-divider></el-divider> -->
     <el-table
       v-loading="loading"
       :data="tableData"
       stripe
-      style="width: 100%;margin-top:10px"
+      style="margin-top:20px"
       id="out-table"
-      :max-height="tableHeight"
+      border
     >
       <el-table-column label="序号" align="center" prop="index"  show-overflow-tooltip >
         <template slot-scope="scop">
@@ -102,29 +74,21 @@
       </el-table-column>
       <el-table-column label="布防状态" align="center" prop="dkZoneStatus"  show-overflow-tooltip >
         <template slot-scope="scope">
-          <span  :class="scope.row.dkZoneStatus == '布防' ? 'success' :  scope.row.dkZoneStatus == '撤防' ? 'warning' : 'info' ">{{scope.row.dkZoneStatus}}</span>
+          <span :class="scope.row.dkZoneStatus == '布防' ? 'success' :  scope.row.dkZoneStatus == '撤防' ? 'warning' : 'info'">{{scope.row.dkZoneStatus}}</span>
         </template>
       </el-table-column>
       <el-table-column label="创建时间" align="center" prop="createTime"  show-overflow-tooltip />
       <el-table-column label="操作" width="150" fixed="right" >
         <template slot-scope="scope">
+          <el-button class="lans" @click="handleUpdate(scope.row)" :disabled="scope.row.status != '1' || scope.row.dkZoneStatus != '布防' && scope.row.dkZoneStatus != '撤防'">编辑</el-button>
           <el-button
-            icon="el-icon-edit"
-            style="color: #406ce5"
-            @click="handleUpdate(scope.row)"
-            :disabled="scope.row.status != '1' || scope.row.dkZoneStatus != '布防' && scope.row.dkZoneStatus != '撤防' "
-            >编辑</el-button
-          >
-          <el-button
-            icon="el-icon-delete"
-            style="color: #f27979"
+           class="hongs"
             @click="handleDelete(scope.$index, scope.row)"
             >删除</el-button
           >
         </template>
       </el-table-column>
     </el-table>
-
     <el-pagination
       background
       @current-change="handleCurrentChange"
@@ -192,7 +156,7 @@
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
+        <el-button @click="cancel" plain>取 消</el-button>
       </div>
     </el-dialog>
     <!-- 修改对话框 -->
@@ -251,7 +215,7 @@
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
+        <el-button @click="cancel" plain>取 消</el-button>
       </div>
     </el-dialog>
     <!-- 确认对话框 -->
@@ -262,7 +226,7 @@
       </el-row>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm2">确 定</el-button>
-        <el-button @click="cancel2">取 消</el-button>
+        <el-button @click="cancel2" plain>取 消</el-button>
       </div>
     </el-dialog>
 
@@ -405,17 +369,7 @@ export default {
     });
   },
   mounted() {
-    // table高度
-    if (window.innerWidth < 1920) {
-      this.tableHeight = window.innerHeight - 300;
-    } else {
-      this.tableHeight = window.innerHeight - 295;
-    }
-    // 监听窗口大小变化
-    let self = this;
-    window.onresize = function () {
-      self.tableHeight = window.innerHeight - 300;
-    };
+
   },
   methods: {
     // 表单重置

src/views/index/components/navHeader.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="nav-header">
     安防综合管理平台
-
     <div class="home-nav">
       <el-menu
         :default-active="activeMenu"
@@ -25,29 +24,11 @@
       <time-menu></time-menu>
     </div>
   </div>
-
-  <!-- <div class="home-nav">
-    <el-menu
-      :default-active="activeMenu"
-      :collapse="isCollapse"
-      :text-color="variables.menuText"
-      :unique-opened="false"
-      :active-text-color="variables.menuActiveText"
-      mode="horizontal"
-    >
-      <sidebar-item
-        v-for="route in routes"
-        :key="route.path"
-        :item="route"
-        :base-path="route.path"
-      />
-    </el-menu>
-  </div> -->
 </template>
 
 <script>
 import SidebarItem from "./SidebarItem2";
-import TimeMenu from "@/components/TimeMenu";
+import TimeMenu from "@/components/TimeMenu/indexHome.vue";
 
 import { mapGetters } from "vuex";
 import variables from "@/styles/variables.scss";
@@ -90,22 +71,7 @@ export default {
 };
 </script>
 <style  lang="scss">
-//将video播放按钮去除
-// *::-webkit-media-controls-panel {
-//   display: none!important;
-//   -webkit-appearance: none;
-// }
-
-// *::--webkit-media-controls-play-button {
-//   display: none!important;
-//   -webkit-appearance: none;
-// }
-
-
-// *::-webkit-media-controls-start-playback-button {
-//   display: none!important;
-//   -webkit-appearance: none;
-// }
+
 .home-nav {
   left: 1rem;
   display: inline-block;
@@ -123,11 +89,6 @@ export default {
       color: rgb(92, 136, 250);
       text-align: center;
     }
-    //  i{
-
-    //    color:rgb(92, 136, 250)
-
-    //    }
   }
 
   .el-menu.el-menu--horizontal {

src/views/index/index.vue

@@ -6,7 +6,7 @@
         <transition name="fade">
           <sbjk v-if="show"></sbjk>
         </transition>
-        <monitor :width="width"  v-if="monitorStatus" @monitorChange="monitorChange"></monitor>
+        <!-- <monitor :width="width"  v-if="monitorStatus" @monitorChange="monitorChange"></monitor> -->
       </div>
       <transition name="fade1">
         <div class="column2" v-if="show">

src/views/login/index.vue

@@ -1,24 +1,38 @@
 <template>
   <div class="login-container">
-    <div class="bg" v-if="erp"><img :src="bg" alt=""></div>
+    <div class="bg" v-if="erp"><img :src="bg" alt="" /></div>
     <div class="logo" v-if="erp">
-      <img :src="logo" alt="">
+      <img :src="logo" alt="" />
       <span class="logo_txt">东信综合安防管理系统</span>
     </div>
-    <el-form class="login-form" auto-complete="on"  ref="loginForm" :model="loginForm" :rules="loginRules" v-if="erp">
+    <el-form
+      class="login-form"
+      auto-complete="on"
+      ref="loginForm"
+      :model="loginForm"
+      :rules="loginRules"
+      v-if="erp"
+    >
       <h3 class="title">用户登录 <span>LOGIN</span></h3>
       <el-form-item prop="username" width="460px">
-        <el-input v-model="loginForm.username"
+        <el-input
+          v-model="loginForm.username"
           ref="username"
           placeholder="请输入用户名"
           name="username"
           @keyup.enter.native="login_info()"
-          type="text" auto-complete="off" >
-          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
+          type="text"
+          auto-complete="off"
+        >
+          <svg-icon
+            slot="prefix"
+            icon-class="user"
+            class="el-input__icon input-icon"
+          />
         </el-input>
       </el-form-item>
 
-      <el-form-item prop="password">
+      <el-form-item prop="password" style="margin-top:15px">
         <el-input
           class="inputs"
           ref="password"
@@ -26,203 +40,259 @@
           name="password"
           @keyup.enter.native="login_info()"
           :type="passwordtxt"
-          v-model="loginForm.password" >
-          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
-        <svg-icon slot="prefix" icon-class="eye"  class="el-input__icon input-icon"  style="position:absolute;right:-340px"  @click="eyeTab" v-show="passwordtxt =='password'" />
-        <svg-icon slot="prefix" icon-class="eye-open"  class="el-input__icon input-icon"  style="position:absolute;right:-340px"  @click="eyeTab" v-show="passwordtxt =='text'" />
+          v-model="loginForm.password"
+        >
+          <template #prefix>
+            <svg-icon
+              slot="prefix"
+              icon-class="password"
+              class="el-input__icon input-icon"
+            />
+          </template>
         </el-input>
-
+        <div class="eyeWrap">
+          <svg-icon
+            slot="prefix"
+            icon-class="eye"
+            class="el-input__icon input-icon eye"
+            style="file: currentColor"
+            @click="eyeTab"
+            v-show="passwordtxt == 'password'"
+          />
+          <svg-icon
+            slot="prefix"
+            icon-class="eye-open"
+            class="el-input__icon input-icon eye"
+            style="file: currentColor"
+            @click="eyeTab"
+            v-show="passwordtxt == 'text'"
+          />
+        </div>
       </el-form-item>
-      <el-form-item prop="code">
+      <el-form-item prop="code" style="margin-top:5px">
         <el-input
           v-model="loginForm.code"
           auto-complete="off"
           placeholder="验证码"
-          style="width: 63%"
+          style="width: 61%"
         >
-          <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
+          <svg-icon
+            slot="prefix"
+            icon-class="validCode"
+            class="el-input__icon input-icon"
+          />
         </el-input>
         <div class="login-code">
-          <img :src="codeUrl" @click="getCode" class="login-code-img"/>
+          <img :src="codeUrl" @click="getCode" class="login-code-img" />
+        </div>
+        <div class="shuaxin" :class="xuan ? 'xuanz' : ''">
+          <svg-icon slot="prefix" icon-class="刷新" @click="getCode" />
         </div>
       </el-form-item>
-      <el-checkbox v-model="loginForm.rememberMe"   style="margin:0px 0px 25px 0px;" @change="memory">记住密码</el-checkbox>
+      <el-checkbox
+        v-model="loginForm.rememberMe"
+        style="margin: 0px 0px 25px 0px"
+        @change="memory"
+        >记住密码</el-checkbox
+      >
       <el-button
         type="primary"
         @click.native.prevent="login_info()"
-        @keyup.enter = "login_info()"
-        >
-        <span v-if="!loading" >登 录</span>
+        @keyup.enter="login_info()"
+      >
+        <span v-if="!loading">登 录</span>
         <span v-else>登 录 中...</span></el-button
       >
     </el-form>
-     <div id="loader-wrapper" v-if="ERPloading">
-        <div id="loader"></div>
-        <div class="loader-section section-left"></div>
-        <div class="loader-section section-right"></div>
-        <div class="load_title">正在加载系统资源，请耐心等待</div>
+    <div id="loader-wrapper" v-if="ERPloading">
+      <div id="loader"></div>
+      <div class="loader-section section-left"></div>
+      <div class="loader-section section-right"></div>
+      <div class="load_title">正在加载系统资源，请耐心等待</div>
     </div>
   </div>
 </template>
 <script>
 // import { validUsername } from "@/utils/validate";
-import { getCodeImg } from '@/api/user'
+import { getCodeImg } from "@/api/user";
 import TimeMenu from "@/components/TimeMenu";
 import navHeader from "../index/components/navHeader";
-import $ from 'jquery'
+import $ from "jquery";
 // import {Menu_List} from "../../router/index";
 import bgImg from "../../assets/bg-login.png";
 import logoImg from "../../assets/logo-b.png";
 import Cookies from "js-cookie";
-import { encrypt, decrypt } from '../../utils/jsencrypt';
+import { encrypt, decrypt } from "../../utils/jsencrypt";
 export default {
-  name: 'Login',
+  name: "Login",
   components: {
     TimeMenu,
     navHeader,
   },
   data() {
     return {
-      erp:false,
-      ERPloading:true,
-      loading:false,
-      passwordtxt:"password",
-      bg:bgImg,
-      logo:logoImg,
+      erp: false,
+      ERPloading: true,
+      loading: false,
+      passwordtxt: "password",
+      bg: bgImg,
+      logo: logoImg,
       codeUrl: "",
       cookiePassword: "",
-      show_num:[],
+      show_num: [],
       // 验证码开关
-        // captchaOnOff: true,
+      // captchaOnOff: true,
       loginForm: {
         username: "",
         password: "",
         rememberMe: true,
         code: "",
-        uuid: ""
+        uuid: "",
       },
       loginRules: {
         username: [
-          { required: true, trigger: "blur", message: "请输入您的账号" }
+          { required: true, trigger: "blur", message: "请输入您的账号" },
         ],
         password: [
-          { required: true, trigger: "blur", message: "请输入您的密码" }
+          { required: true, trigger: "blur", message: "请输入您的密码" },
         ],
-        code: [{ required: true, trigger: "change", message: "请输入验证码" }]
+        code: [{ required: true, trigger: "change", message: "请输入验证码" }],
       },
+      xuan: false,
     };
   },
-  mounted(){
-    $('.el-menu').css("display","none");
-    $('.right-menu').css("display","none");
+  mounted() {
+    $(".el-menu").css("display", "none");
+    $(".right-menu").css("display", "none");
   },
   created() {
-    this.keyupEnter()
-    this.getUrl()
+    this.keyupEnter();
+    this.getUrl();
   },
   methods: {
-    getUrl(){
-      let url = this.$route.query
-      if(url.username && url.password){
-        let data = {username:url.username,password:url.password}
-        this.handleLoginERP(data)
-      }else{
+    getUrl() {
+      let url = this.$route.query;
+      if (url.username && url.password) {
+        let data = { username: url.username, password: url.password };
+        this.handleLoginERP(data);
+      } else {
         this.getCode();
         this.getCookie();
-        this.zddl();//自动登录
+        this.zddl(); //自动登录
       }
     },
-    keyupEnter(){
-      let _this = this
-      document.onkeydown = function(e){
+    keyupEnter() {
+      let _this = this;
+      document.onkeydown = function (e) {
         var key = window.event.keyCode;
-        if(key == 13){
-          _this.login_info()
+        if (key == 13) {
+          _this.login_info();
         }
-      }
+      };
     },
-    eyeTab(){//密码显示开关
-      if(this.passwordtxt == "password"){
-        this.passwordtxt = "text"
-      }else{
-        this.passwordtxt = "password"
+    eyeTab() {
+      //密码显示开关
+      if (this.passwordtxt == "password") {
+        this.passwordtxt = "text";
+      } else {
+        this.passwordtxt = "password";
       }
     },
-    getCode() {//获取验证码
-      getCodeImg().then(res => {
+    getCode() {
+      //获取验证码
+      this.xuan = true;
+      getCodeImg().then((res) => {
         this.codeUrl = "data:image/gif;base64," + res.data.img;
         this.loginForm.uuid = res.data.uuid;
-        this.erp = true
-        setTimeout(()=>{
-          this.ERPloading = false
-        },)
+        this.erp = true;
+        setTimeout(() => {
+          this.ERPloading = false;
+        });
+        this.xuan = false;
       });
     },
-    getCookie() {//缓存数据
+    getCookie() {
+      //缓存数据
       const username = Cookies.get("username");
       const password = Cookies.get("password");
-      const rememberMe = Cookies.get('rememberMe')
+      const rememberMe = Cookies.get("rememberMe");
       this.loginForm = {
         username: username === undefined ? this.loginForm.username : username,
-        password: password === undefined ? this.loginForm.password : decrypt(password),
-        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
+        password:
+          password === undefined ? this.loginForm.password : decrypt(password),
+        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
       };
     },
-    login_info() {//登录
-      this.$refs.loginForm.validate(valid => {
+    login_info() {
+      //登录
+      this.$refs.loginForm.validate((valid) => {
         if (valid) {
           this.loading = true;
-          this.$store.dispatch('login', this.loginForm).then(() => {
-            this.$router.push('/index?name='+this.loginForm.username)
+          this.$store
+            .dispatch("login", this.loginForm)
+            .then(() => {
+              this.$router.push("/index?name=" + this.loginForm.username);
 
-            this.loading=false
-          }).catch(()=>{
-            this.loading=false
-            this.getCode()
-          })
+              this.loading = false;
+            })
+            .catch(() => {
+              this.loading = false;
+              this.getCode();
+            });
         }
       });
     },
-    memory(){
+    memory() {
       if (this.loginForm.rememberMe) {
         Cookies.set("username429", this.loginForm.username, { expires: 300 });
-        Cookies.set("password429", encrypt(this.loginForm.password), { expires: 300 });
-        Cookies.set('rememberMe429', this.loginForm.rememberMe, { expires: 300 });
+        Cookies.set("password429", encrypt(this.loginForm.password), {
+          expires: 300,
+        });
+        Cookies.set("rememberMe429", this.loginForm.rememberMe, {
+          expires: 300,
+        });
       } else {
         Cookies.remove("username429");
         Cookies.remove("password429");
-        Cookies.remove('rememberMe429');
+        Cookies.remove("rememberMe429");
       }
     },
-    handleLoginERP(data) {//erp登录
+    handleLoginERP(data) {
+      //erp登录
       Cookies.set("username429", data.name);
-      this.$store.dispatch("LoginERP", data).then((res) => {
-        this.$router.push({ path: "/index?name=" + data.id}).catch(()=>{});
-      }).catch((err) => {
-        location.href = '/#/';
-      });
+      this.$store
+        .dispatch("LoginERP", data)
+        .then((res) => {
+          this.$router.push({ path: "/index?name=" + data.id }).catch(() => {});
+        })
+        .catch((err) => {
+          location.href = "/#/";
+        });
     },
-    zddl(){//自动登录
-      if(Cookies.get("vue_admin_template_token1708") && localStorage.getItem("key")){
-        this.$router.push('/index?name=' + localStorage.getItem("key"))
+    zddl() {
+      //自动登录
+      if (
+        Cookies.get("vue_admin_template_token1708") &&
+        localStorage.getItem("key")
+      ) {
+        this.$router.push("/index?name=" + localStorage.getItem("key"));
       }
-    }
+    },
   },
-  watch:{
-    password:function(){
-      this.password=this.password.replace(/[\W]/g,'');
+  watch: {
+    password: function () {
+      this.password = this.password.replace(/[\W]/g, "");
     },
-    username:function(){
-      this.username=this.username.replace(/[\W]/g,'');
+    username: function () {
+      this.username = this.username.replace(/[\W]/g, "");
     },
-    code:function(){
-      this.code=this.code.replace(/[\W]/g,'');
+    code: function () {
+      this.code = this.code.replace(/[\W]/g, "");
     },
   },
 };
 </script>
 
-
 <style lang="scss" scoped>
 .code-verify {
   top: 3px;
@@ -230,35 +300,35 @@ export default {
   right: -108px;
   width: 82px;
 }
-.bg{
-  width:100%;
-  height:100%;
+.bg {
+  width: 100%;
+  height: 100%;
   overflow: hidden;
   position: fixed;
-  top:0;
-  left:0;
+  top: 0;
+  left: 0;
   z-index: -1;
-  .bgimg{
-    width:100%;
-    height:100%;
+  .bgimg {
+    width: 100%;
+    height: 100%;
     position: absolute;
-    top:0;
-    left:0;
+    top: 0;
+    left: 0;
     z-index: -1;
   }
 }
-.logo{
-  width:100%;
+.logo {
+  width: 100%;
   position: fixed;
-  top:0;
-  img{
-    width:152px;
-    margin:10px 20px 0 20px;
+  top: 0;
+  img {
+    width: 152px;
+    margin: 10px 20px 0 20px;
     vertical-align: middle;
   }
-  .logo_txt{
+  .logo_txt {
     font-size: 20px;
-    color:#fff;
+    color: #fff;
     vertical-align: middle;
     letter-spacing: 4px;
   }
@@ -267,26 +337,27 @@ export default {
   border-radius: 6px;
   background: #ffffff;
   width: 456px;
-  padding: 63px 35px;
+  padding: 48px;
   position: absolute;
-  top:25%;
-  left:50%;
-  margin-left:-228px;
+  top: 25%;
+  left: 50%;
+  margin-left: -228px;
   .title {
     margin: 0px auto 30px auto;
     text-align: left;
     color: #000000;
     font-size: 20px;
-    span{
-      margin-left:10px;
+    font-weight: 700;
+    span {
+      margin-left: 10px;
       opacity: 0.25;
     }
   }
   .el-input {
     height: 40px;
     input {
-      height:100%;
-      padding:10px 0;
+      height: 100%;
+      padding: 10px 0;
       display: inline-block;
     }
   }
@@ -296,8 +367,8 @@ export default {
     margin-left: 2px;
   }
 }
-.el-form-item__content{
-  height:40px;
+.el-form-item__content {
+  height: 40px;
 }
 .login-tip {
   font-size: 13px;
@@ -305,14 +376,39 @@ export default {
   color: #bfbfbf;
 }
 .login-code {
-  width: 33%;
-  height: 38px;
-  float: right;
-  margin-top:-2px;
-  text-align: right;
+  width: 30%;
+  height: 36px;
+  display: inline-block;
+  margin: 10px 0 0 10px !important;
   img {
-    cursor: pointer;
     vertical-align: middle;
+    height: 36px;
+    margin-top: -4px;
+    width:auto;
+  }
+}
+
+.shuaxin {
+  font-size: 20px;
+  float: right;
+  margin-top: 10px;
+  cursor: pointer;
+}
+.xuanz {
+  animation: mymove 2s 1;
+  -webkit-animation: mymove 2s 1; /* Safari and Chrome */
+}
+@keyframes mymove {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@-webkit-keyframes mymove {
+  /* Safari and Chrome */
+
+  100% {
+    transform: rotate(360deg);
   }
 }
 .el-login-footer {
@@ -329,197 +425,207 @@ export default {
 }
 .login-code-img {
   height: 36px;
-  width:100%;
+  width: 100%;
 }
 
-.el-button--primary{
-  width:100%;
-  margin-top:10px;
+.el-button--primary {
+  width: 100%;
+  margin-top: 10px;
   color: #fff;
   background-color: #1890ff;
   border-color: #1890ff;
   border-radius: 4px;
 }
-body,html{
-  width:100%;
-  height:100%;
-  background: #7171C6;
+body,
+html {
+  width: 100%;
+  height: 100%;
+  background: #7171c6;
 }
-::v-deep .el-input__inner{
-  height:36px !important;
+::v-deep .el-input__inner {
+  height: 36px !important;
   line-height: 36px !important;
 }
 
-        #loader-wrapper {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            z-index: 999999;
-        }
+#loader-wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 999999;
+}
 
-        #loader {
-            display: block;
-            position: relative;
-            left: 50%;
-            top: 50%;
-            width: 150px;
-            height: 150px;
-            margin: -75px 0 0 -75px;
-            border-radius: 50%;
-            border: 3px solid transparent;
-            border-top-color: #FFF;
-            -webkit-animation: spin 2s linear infinite;
-            -ms-animation: spin 2s linear infinite;
-            -moz-animation: spin 2s linear infinite;
-            -o-animation: spin 2s linear infinite;
-            animation: spin 2s linear infinite;
-            z-index: 1001;
-        }
+#loader {
+  display: block;
+  position: relative;
+  left: 50%;
+  top: 50%;
+  width: 150px;
+  height: 150px;
+  margin: -75px 0 0 -75px;
+  border-radius: 50%;
+  border: 3px solid transparent;
+  border-top-color: #fff;
+  -webkit-animation: spin 2s linear infinite;
+  -ms-animation: spin 2s linear infinite;
+  -moz-animation: spin 2s linear infinite;
+  -o-animation: spin 2s linear infinite;
+  animation: spin 2s linear infinite;
+  z-index: 1001;
+}
 
-        #loader:before {
-            content: "";
-            position: absolute;
-            top: 5px;
-            left: 5px;
-            right: 5px;
-            bottom: 5px;
-            border-radius: 50%;
-            border: 3px solid transparent;
-            border-top-color: #FFF;
-            -webkit-animation: spin 3s linear infinite;
-            -moz-animation: spin 3s linear infinite;
-            -o-animation: spin 3s linear infinite;
-            -ms-animation: spin 3s linear infinite;
-            animation: spin 3s linear infinite;
-        }
+#loader:before {
+  content: "";
+  position: absolute;
+  top: 5px;
+  left: 5px;
+  right: 5px;
+  bottom: 5px;
+  border-radius: 50%;
+  border: 3px solid transparent;
+  border-top-color: #fff;
+  -webkit-animation: spin 3s linear infinite;
+  -moz-animation: spin 3s linear infinite;
+  -o-animation: spin 3s linear infinite;
+  -ms-animation: spin 3s linear infinite;
+  animation: spin 3s linear infinite;
+}
 
-        #loader:after {
-            content: "";
-            position: absolute;
-            top: 15px;
-            left: 15px;
-            right: 15px;
-            bottom: 15px;
-            border-radius: 50%;
-            border: 3px solid transparent;
-            border-top-color: #FFF;
-            -moz-animation: spin 1.5s linear infinite;
-            -o-animation: spin 1.5s linear infinite;
-            -ms-animation: spin 1.5s linear infinite;
-            -webkit-animation: spin 1.5s linear infinite;
-            animation: spin 1.5s linear infinite;
-        }
+#loader:after {
+  content: "";
+  position: absolute;
+  top: 15px;
+  left: 15px;
+  right: 15px;
+  bottom: 15px;
+  border-radius: 50%;
+  border: 3px solid transparent;
+  border-top-color: #fff;
+  -moz-animation: spin 1.5s linear infinite;
+  -o-animation: spin 1.5s linear infinite;
+  -ms-animation: spin 1.5s linear infinite;
+  -webkit-animation: spin 1.5s linear infinite;
+  animation: spin 1.5s linear infinite;
+}
 
-        @-webkit-keyframes spin {
-            0% {
-                -webkit-transform: rotate(0deg);
-                -ms-transform: rotate(0deg);
-                transform: rotate(0deg);
-            }
-            100% {
-                -webkit-transform: rotate(360deg);
-                -ms-transform: rotate(360deg);
-                transform: rotate(360deg);
-            }
-        }
+@-webkit-keyframes spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
 
-        @keyframes spin {
-            0% {
-                -webkit-transform: rotate(0deg);
-                -ms-transform: rotate(0deg);
-                transform: rotate(0deg);
-            }
-            100% {
-                -webkit-transform: rotate(360deg);
-                -ms-transform: rotate(360deg);
-                transform: rotate(360deg);
-            }
-        }
+@keyframes spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
 
-        #loader-wrapper .loader-section {
-            position: fixed;
-            top: 0;
-            width: 51%;
-            height: 100%;
-            background: #7171C6;
-            z-index: 1000;
-            -webkit-transform: translateX(0);
-            -ms-transform: translateX(0);
-            transform: translateX(0);
-        }
+#loader-wrapper .loader-section {
+  position: fixed;
+  top: 0;
+  width: 51%;
+  height: 100%;
+  background: #7171c6;
+  z-index: 1000;
+  -webkit-transform: translateX(0);
+  -ms-transform: translateX(0);
+  transform: translateX(0);
+}
 
-        #loader-wrapper .loader-section.section-left {
-            left: 0;
-        }
+#loader-wrapper .loader-section.section-left {
+  left: 0;
+}
 
-        #loader-wrapper .loader-section.section-right {
-            right: 0;
-        }
+#loader-wrapper .loader-section.section-right {
+  right: 0;
+}
 
-        .loaded #loader-wrapper .loader-section.section-left {
-            -webkit-transform: translateX(-100%);
-            -ms-transform: translateX(-100%);
-            transform: translateX(-100%);
-            -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
-            transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
-        }
+.loaded #loader-wrapper .loader-section.section-left {
+  -webkit-transform: translateX(-100%);
+  -ms-transform: translateX(-100%);
+  transform: translateX(-100%);
+  -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
 
-        .loaded #loader-wrapper .loader-section.section-right {
-            -webkit-transform: translateX(100%);
-            -ms-transform: translateX(100%);
-            transform: translateX(100%);
-            -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
-            transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
-        }
+.loaded #loader-wrapper .loader-section.section-right {
+  -webkit-transform: translateX(100%);
+  -ms-transform: translateX(100%);
+  transform: translateX(100%);
+  -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
 
-        .loaded #loader {
-            opacity: 0;
-            -webkit-transition: all 0.3s ease-out;
-            transition: all 0.3s ease-out;
-        }
+.loaded #loader {
+  opacity: 0;
+  -webkit-transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out;
+}
 
-        .loaded #loader-wrapper {
-            visibility: hidden;
-            -webkit-transform: translateY(-100%);
-            -ms-transform: translateY(-100%);
-            transform: translateY(-100%);
-            -webkit-transition: all 0.3s 1s ease-out;
-            transition: all 0.3s 1s ease-out;
-        }
+.loaded #loader-wrapper {
+  visibility: hidden;
+  -webkit-transform: translateY(-100%);
+  -ms-transform: translateY(-100%);
+  transform: translateY(-100%);
+  -webkit-transition: all 0.3s 1s ease-out;
+  transition: all 0.3s 1s ease-out;
+}
 
-        .no-js #loader-wrapper {
-            display: none;
-        }
+.no-js #loader-wrapper {
+  display: none;
+}
 
-        .no-js h1 {
-            color: #222222;
-        }
+.no-js h1 {
+  color: #222222;
+}
 
-        #loader-wrapper .load_title {
-            font-family: 'Open Sans';
-            color: #FFF;
-            font-size: 19px;
-            width: 100%;
-            text-align: center;
-            z-index: 9999999999999;
-            position: absolute;
-            top: 60%;
-            opacity: 1;
-            line-height: 30px;
-        }
+#loader-wrapper .load_title {
+  font-family: "Open Sans";
+  color: #fff;
+  font-size: 19px;
+  width: 100%;
+  text-align: center;
+  z-index: 9999999999999;
+  position: absolute;
+  top: 60%;
+  opacity: 1;
+  line-height: 30px;
+}
 
-        #loader-wrapper .load_title span {
-            font-weight: normal;
-            font-style: italic;
-            font-size: 13px;
-            color: #FFF;
-            opacity: 0.5;
-        }
+#loader-wrapper .load_title span {
+  font-weight: normal;
+  font-style: italic;
+  font-size: 13px;
+  color: #fff;
+  opacity: 0.5;
+}
+.eyeWrap {
+  position: relative;
+}
+.eye {
+  position: absolute;
+  right: 10px;
+  top: -40px;
+  fill: #ccc;
+}
 </style>
 <style>
-.el-input__inner{
-  height:40px;
+.el-input__inner {
+  height: 40px;
 }
 </style>

src/views/patrol/elect-partol/index.vue

@@ -1,54 +1,46 @@
 <template>
   <div class="app-container">
-    <div class="filter-container">
-      <div class="filter-left">
-        <div class="filter-item">
-          实际班组:
+    <el-form :model="query" ref="query" :inline="true"  >
+       <el-form-item label="实际班组:" >
           <el-input
             v-model="query.eTeamName"
             placeholder="请输入实际班组"
-            style="width: 150px"
             clearable
           ></el-input>
-        </div>
-        <div class="filter-item">
-          实际巡更人:
+        </el-form-item>
+         <el-form-item label="实际巡更人:" >
           <el-input
             v-model="query.UserName"
             placeholder="请输入实际巡更人"
-            style="width: 150px"
             clearable
           ></el-input>
-        </div>
-        <div class="filter-item">
-          线路名称:
+        </el-form-item>
+        <el-form-item label="线路名称:" >
           <el-input
             v-model="query.eLName"
             placeholder="请输入线路名称"
-            style="width: 150px"
             clearable
           ></el-input>
-        </div>
-
-        <el-button
-          type="primary"
-          icon="el-icon-search"
-          size="mini"
-          @click="getData('query')"
+        </el-form-item>
+        <el-form-item class="right" >
+          <el-button  plain size="mini" @click="resetQuery">重置</el-button>
+          <el-button
+            type="primary"
+            size="mini"
+            @click="getData('query')"
           >搜索</el-button
         >
-        <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </div>
-    </div>
+        </el-form-item>
+      </el-form>
     <!-- <el-divider></el-divider> -->
     <el-table
       v-loading="loading"
       :data="tableData"
       stripe
-      style="width: 100%; margin-bottom: 5rem;margin-top:10px"
       id="out-table"
       @selection-change="handleSelectionChange"
-      :max-height="tableHeight"
+      border
+      style="margin-top:20px"
     >
       <el-table-column prop="eBindDevice" label="巡更设备" show-overflow-tooltip></el-table-column>
       <el-table-column prop="eBindTeam" label="绑定班组" show-overflow-tooltip></el-table-column>
@@ -136,17 +128,7 @@ export default {
     };
   },
   mounted(){
-    // table高度
-    if(window.innerWidth <1920){
-      this.tableHeight = window.innerHeight - 300
-    }else{
-      this.tableHeight = window.innerHeight - 295
-    }
-    // 监听窗口大小变化
-    let self = this;
-    window.onresize = function() {
-      self.tableHeight = window.innerHeight - 300
-    }
+
     this.getData();
   },
   created() {

src/views/patrol/partol-plan/index.vue

@@ -1,43 +1,42 @@
 <template>
   <div class="app-container">
-    <div class="filter-container">
-      <div class="filter-left">
-        <div class="filter-item">
-          计划模式:
-          <el-select
-            v-model="pMode_value"
-            placeholder="请选择计划模式"
-            @change="select"
-            style="width: 150px"
-            clearable
+    <el-form :model="query" ref="query" :inline="true"  >
+      <el-form-item label="计划模式:" >
+        <el-select
+          v-model="pMode_value"
+          placeholder="请选择计划模式"
+          @change="select"
+          style="width: 150px"
+          clearable
+        >
+          <el-option
+            v-for="(item, index) in pMode_list"
+            :key="index"
+            :label="item.label"
+            :value="item.value"
           >
-            <el-option
-              v-for="(item, index) in pMode_list"
-              :key="index"
-              :label="item.label"
-              :value="item.value"
-            >
-            </el-option>
-          </el-select>
-        </div>
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item class="right" >
+        <el-button plain size="mini" @click="resetQuery">重置</el-button>
         <el-button
           type="primary"
-          icon="el-icon-search"
           size="mini"
           @click="getData('query')"
           >搜索</el-button
         >
-        <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </div>
-    </div>
+      </el-form-item>
+    </el-form>
     <!-- <el-divider></el-divider> -->
     <el-table
       v-loading="loading"
       :data="tableData"
       stripe
-      style="width: 100%; margin-bottom: 5rem;margin-top:10px"
+      border
       id="out-table"
       :max-height="tableHeight"
+      style="margin-top:20px"
     >
       <el-table-column prop="lineId" label="巡更线路id" show-overflow-tooltip></el-table-column>
       <el-table-column prop="pCreateTime" label="计划创建时间" show-overflow-tooltip></el-table-column>

src/views/patrol/patrol-point/index.vue

@@ -1,35 +1,32 @@
 <template>
   <div class="app-container">
-    <div class="filter-container">
-      <div class="filter-left" :model="query">
-        <div class="filter-item">
-          点位名称:
-          <el-input
-            v-model="query.ptName"
-            placeholder="请输入点位名称"
-            style="width: 160px"
-            clearable
-          ></el-input>
-        </div>
+    <el-form :model="query" ref="query" :inline="true"  >
+      <el-form-item label="点位名称:" >
+        <el-input
+          v-model="query.ptName"
+          placeholder="请输入点位名称"
+          clearable
+        ></el-input>
+      </el-form-item>
+      <el-form-item class="right">
+        <el-button plain size="mini" @click="resetQuery">重置</el-button>
         <el-button
           type="primary"
-          icon="el-icon-search"
           size="mini"
           @click="getData('query')"
           >搜索</el-button
         >
-        <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </div>
-    </div>
+      </el-form-item>
+    </el-form>
     <!-- <el-divider></el-divider> -->
     <el-table
       v-loading="loading"
       :data="tableData"
       stripe
-      style="width: 100%; margin-bottom: 5rem;margin-top:10px"
+      border
       id="out-table"
       @selection-change="handleSelectionChange"
-      :max-height="tableHeight"
+      style="margin-top:20px"
     >
       <el-table-column prop="ptName" label="点位名称" show-overflow-tooltip></el-table-column>
       <el-table-column prop="ptCard" label="点位钮号" show-overflow-tooltip></el-table-column>
@@ -113,17 +110,6 @@ export default {
     };
   },
   mounted(){
-    // table高度
-    if(window.innerWidth <1920){
-      this.tableHeight = window.innerHeight - 300
-    }else{
-      this.tableHeight = window.innerHeight - 295
-    }
-    // 监听窗口大小变化
-    let self = this;
-    window.onresize = function() {
-      self.tableHeight = window.innerHeight - 300
-    }
     this.getData();
   },
   created() {

src/views/patrol/patrol-route/index.vue

@@ -1,35 +1,33 @@
 <template>
   <div class="app-container">
-    <div class="filter-container">
-      <div class="filter-left">
-        <div class="filter-item">
-          路线名称:
+    <el-form :model="query" ref="query" :inline="true"  >
+      <el-form-item label="路线名称:" >
           <el-input
             v-model="query.lName"
             placeholder="请输入路线名称"
             style="width: 160px"
             clearable
           ></el-input>
-        </div>
+       </el-form-item>
+       <el-form-item class="right" >
+        <el-button plain size="mini" @click="resetQuery">重置</el-button>
         <el-button
           type="primary"
-          icon="el-icon-search"
           size="mini"
           @click="getData('query')"
           >搜索</el-button
         >
-        <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </div>
-    </div>
+       </el-form-item>
+    </el-form>
     <!-- <el-divider></el-divider> -->
     <el-table
       v-loading="loading"
       :data="tableData"
       stripe
-      style="width: 100%; margin-bottom: 5rem;margin-top:10px"
+      border
       id="out-table"
       @selection-change="handleSelectionChange"
-      :max-height="tableHeight"
+      style="margin-top:20px"
     >
       <el-table-column prop="placeId" label="巡检点ID" show-overflow-tooltip></el-table-column>
       <el-table-column prop="lName" label="路线名称" show-overflow-tooltip></el-table-column>
@@ -96,17 +94,6 @@ export default {
     };
   },
   mounted(){
-    // table高度
-    if(window.innerWidth <1920){
-      this.tableHeight = window.innerHeight - 300
-    }else{
-      this.tableHeight = window.innerHeight - 295
-    }
-    // 监听窗口大小变化
-    let self = this;
-    window.onresize = function() {
-      self.tableHeight = window.innerHeight - 300
-    }
     this.getData();
   },
   created() {

src/views/system/security/index.vue

@@ -1,19 +1,15 @@
 <template>
   <div class="app-container">
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
+    <el-form  :inline="true"  >
+      <el-form-item>
         <el-button
           type="primary"
-          plain
-          icon="el-icon-plus"
           size="mini"
           @click="handleAdd"
-        
         >新增</el-button>
-      </el-col>
-    </el-row>
-
-    <el-table v-loading="loading" :data="adminList" >
+      </el-form-item>
+    </el-form>
+    <el-table v-loading="loading" :data="adminList" border style="margin-top:20px;">
       <el-table-column label="编号" prop="id"  />
       <el-table-column label="密码长度不少于" prop="pwdLength" >
         <template slot-scope="scope">
@@ -23,8 +19,8 @@
       <el-table-column label="账号锁定次数" prop="lockNumber" />
       <el-table-column label="锁定时间" prop="loseDate" >
         <template slot-scope="scope">
-          <span>{{scope.row.loseDate == 1 ? "1分钟" : scope.row.loseDate == 5 ? "5分钟" 
-            : scope.row.loseDate == 15 ? "15分钟" : scope.row.loseDate == 30 ? "30分钟" : scope.row.loseDate == 120 ? "2小时" 
+          <span>{{scope.row.loseDate == 1 ? "1分钟" : scope.row.loseDate == 5 ? "5分钟"
+            : scope.row.loseDate == 15 ? "15分钟" : scope.row.loseDate == 30 ? "30分钟" : scope.row.loseDate == 120 ? "2小时"
             : scope.row.loseDate == 1440 ? "1天" : ""}}</span>
         </template>
       </el-table-column>
@@ -32,13 +28,11 @@
         <template slot-scope="scope">
           <el-switch
             v-model="scope.row.isEnable"
-            active-color="#13ce66"
-            inactive-color="#ff4949"
              @change="handleStatusChange(scope.row)"
           ></el-switch>
         </template>
       </el-table-column>
-      
+
       <!-- <el-table-column label="大小写敏感" align="center" width="100">
         <template slot-scope="scope">
           <el-switch
@@ -57,14 +51,12 @@
         <template slot-scope="scope" v-if="scope.row.roleId !== 1">
           <el-button
             size="mini"
-            type="text"
-            icon="el-icon-edit"
+            class="lans"
             @click="handleUpdate(scope.row)"
           >修改</el-button>
           <el-button
             size="mini"
-            type="text"
-            icon="el-icon-delete"
+            class="hongs"
             @click="handleDelete(scope.row)"
           >删除</el-button>
         </template>
@@ -116,8 +108,7 @@
             <el-form-item label="默认账户" prop="isEnable">
               <el-switch
                 v-model="form.isEnable"
-                active-color="#13ce66"
-                inactive-color="#ff4949">
+                >
               </el-switch>
             </el-form-item>
           </el-col>
@@ -126,7 +117,7 @@
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm" v-if="!loading">确 定</el-button>
         <el-button :loading="loading" type="primary"  v-else>提交中...</el-button>
-        <el-button @click="cancel">取 消</el-button>
+        <el-button @click="cancel" plain>取 消</el-button>
       </div>
     </el-dialog>
   </div>
@@ -219,14 +210,10 @@ export default {
     // 取消按钮
     cancel() {
       this.open = false;
-      this.reset();
     },
     // 表单重置
     reset() {
-      this.form = {
-        name: undefined
-      };
-      // this.resetForm("form");
+
     },
     /** 搜索按钮操作 */
     handleQuery() {

src/views/system/unit-info/index.vue

@@ -1,32 +1,29 @@
 <template>
   <div class="app-container">
-    <div class="filter-container">
-      <div class="filter-left">
-        <div class="filter-item">
-          单位名称:
-          <el-input v-model="name"  placeholder="请输入单位名称" style="width: 160px" clearable></el-input>
-        </div>
-        <el-button type="primary" icon="el-icon-search" size="mini"  @click="getList()">搜索</el-button>
-        <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-        <el-button
-          icon="el-icon-plus"
-          type="success"
-          size="mini"
-          @click="add"
-          >新增</el-button
-        >
-      </div>
-    </div>
-    <!-- <el-divider></el-divider> -->
+    <el-form  :inline="true"  >
+      <el-form-item label="单位名称:" >
+        <el-input v-model="name"  placeholder="请输入单位名称" style="width: 160px" clearable></el-input>
+      </el-form-item>
+      <el-form-item class="right">
+        <el-button plain size="mini" @click="resetQuery">重置</el-button>
+        <el-button type="primary"  size="mini"  @click="getList()">搜索</el-button>
+      </el-form-item>
+      <br>
+      <el-button
+        type="primary"
+        size="mini"
+        @click="add"
+        >新增</el-button
+      >
+    </el-form>
     <el-table
       v-loading="loading"
       :data="tableData"
       stripe
-      style="width: 100%;margin-top:10px;"
+      style="margin-top:20px;"
       @selection-change="handleSelectionChange"
-      :max-height="tableHeight"
+      border
     >
-
       <el-table-column prop="name" label="单位名称" show-overflow-tooltip></el-table-column>
       <el-table-column prop="introduce" label="单位介绍" show-overflow-tooltip> </el-table-column>
       <el-table-column prop="logo" label="公司logo">
@@ -45,14 +42,12 @@
       <el-table-column label="操作">
         <template slot-scope="scope">
           <el-button
-            icon="el-icon-edit"
-            style="color: #406ce5"
+            class="lans"
             @click="handleEdit(scope.$index, scope.row)"
             >编辑</el-button
           >
           <el-button
-            icon="el-icon-delete"
-            style="color: #f27979"
+            class="hongs"
             @click="handleDelete(scope.$index, scope.row)"
             >删除</el-button
           >
@@ -99,7 +94,7 @@
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm" v-if="!loading">确 定</el-button>
         <el-button :loading="loading" type="primary"  v-else>提交中...</el-button>
-        <el-button @click="cancel">取 消</el-button>
+        <el-button @click="cancel" plain>取 消</el-button>
       </div>
     </el-dialog>
     <el-pagination
@@ -173,17 +168,7 @@ export default {
     this.getList()
   },
   mounted() {
-    // table高度
-    if(window.innerWidth <1920){
-      this.tableHeight = window.innerHeight - 300
-    }else{
-      this.tableHeight = window.innerHeight - 295
-    }
-    // 监听窗口大小变化
-    let self = this;
-    window.onresize = function() {
-      self.tableHeight = window.innerHeight - 300
-    }
+
   },
   methods: {
     //文件上传

src/views/user/account-manage/index.vue

@@ -25,33 +25,30 @@
       </el-col>
       <!--用户数据-->
       <el-col :span="20" :xs="24">
-        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="90px">
-          <el-form-item label="登录账户：" prop="loginName">
+        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" >
+          <el-form-item label="登录账户:" prop="loginName">
             <el-input
               v-model="queryParams.loginName"
               placeholder="请输入登录账户"
               clearable
               size="small"
-              style="width: 150px"
               @keyup.enter.native="handleQuery"
             />
           </el-form-item>
-          <el-form-item label="手机号码：" prop="phonenumber">
+          <el-form-item label="手机号码:" prop="phonenumber">
             <el-input
               v-model="queryParams.phonenumber"
               placeholder="请输入手机号码"
               clearable
               size="small"
-              style="width: 150px"
               @keyup.enter.native="handleQuery"
             />
           </el-form-item>
-          <el-form-item label="用户状态：" prop="status">
+          <el-form-item label="用户状态:" prop="status">
             <el-select
               v-model="queryParams.status"
               placeholder="用户状态"
               size="small"
-              style="width: 150px"
             >
               <el-option
                 v-for="dict in statusOptions"
@@ -61,7 +58,7 @@
               />
             </el-select>
           </el-form-item>
-          <el-form-item label="创建时间：" >
+          <el-form-item label="创建时间:" >
             <el-date-picker
               v-model="dateRange"
               size="small"
@@ -73,25 +70,18 @@
               style="margin-left:0px;"
             ></el-date-picker>
           </el-form-item>
-          <el-form-item>
-            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-            <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-            <el-col :span="1.5">
-            <el-button
-              type="success"
-              icon="el-icon-plus"
-              size="mini"
-              @click="handleAdd"
-            >新增</el-button>
-          </el-col>
+          <el-form-item class="right">
+            <el-button plain size="mini" @click="resetQuery">重置</el-button>
+            <el-button type="primary"  size="mini" @click="handleQuery">搜索</el-button>
           </el-form-item>
+          <br>
+          <el-button
+              type="primary"
+            size="mini"
+            @click="handleAdd"
+          >新增</el-button>
         </el-form>
-
-        <!-- <el-row :gutter="10" class="mb8">
-
-          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
-        </el-row> -->
-        <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange" :max-height="tableHeight">
+        <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange" border style="margin-top:20px;">
           <el-table-column label="用户ID" align="center" key="userId" prop="userId" v-if="columns[0].visible" show-overflow-tooltip />
           <el-table-column label="登录账户" align="center" key="userName" prop="userName" v-if="columns[1].visible" show-overflow-tooltip />
           <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" v-if="columns[1].visible" show-overflow-tooltip />
@@ -121,20 +111,17 @@
             <template slot-scope="scope" v-if="scope.row.userId !== 1">
               <el-button
                 size="mini"
-                type="text"
-                icon="el-icon-edit"
+                class="lans"
                 @click="handleUpdate(scope.row)"
               >修改</el-button>
               <el-button
                 size="mini"
-                type="text"
-                icon="el-icon-delete"
+                class="hongs"
                 @click="handleDelete(scope.row)"
               >删除</el-button>
               <el-button
                 size="mini"
-                type="text"
-                icon="el-icon-key"
+                class="lans"
                 @click="handleResetPwd(scope.row)"
               >重置密码</el-button>
             </template>
@@ -249,7 +236,7 @@
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm" v-if="!loading">确 定</el-button>
         <el-button :loading="loading" type="primary"  v-else>提交中...</el-button>
-        <el-button @click="cancel">取 消</el-button>
+        <el-button @click="cancel" plain>取 消</el-button>
       </div>
     </el-dialog>
     <el-pagination
@@ -264,40 +251,8 @@
       style="position:fixed;"
     >
     </el-pagination>
-
-    <!-- 用户导入对话框 -->
-    <!-- <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body :before-close="cancel" :close-on-click-modal="false">
-      <el-upload
-        ref="upload"
-        :limit="1"
-        accept=".xlsx, .xls"
-        :headers="upload.headers"
-        :action="upload.url + '?updateSupport=' + upload.updateSupport"
-        :disabled="upload.isUploading"
-        :on-progress="handleFileUploadProgress"
-        :on-success="handleFileSuccess"
-        :auto-upload="false"
-        drag
-      >
-        <i class="el-icon-upload"></i>
-        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
-        <div class="el-upload__tip text-center" slot="tip">
-          <div class="el-upload__tip" slot="tip">
-            <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据
-          </div>
-          <span>仅允许导入xls、xlsx格式文件。</span>
-          <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link>
-        </div>
-      </el-upload>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitFileForm" v-if="!loading">确 定</el-button>
-        <el-button :loading="loading" type="primary"  v-else>提交中...</el-button>
-        <el-button @click="upload.open = false">取 消</el-button>
-      </div>
-    </el-dialog> -->
   </div>
 </template>
-
 <script>
 import {userList, userEdit, resetPwd, userAdd, userRemove,getOne} from "@/api/system/user";
 import { roleList } from '@/api/system/auth-manage'
@@ -482,17 +437,7 @@ export default {
     }
   },
   mounted() {
-    // table高度
-    if(window.innerWidth <1920){
-      this.tableHeight = window.innerHeight - 300
-    }else{
-      this.tableHeight = window.innerHeight - 295
-    }
-    // 监听窗口大小变化
-    let self = this;
-    window.onresize = function() {
-      self.tableHeight = window.innerHeight - 300
-    }
+
   },
   created() {
     this.getList();

src/views/user/log-manage/index.vue

@@ -1,29 +1,27 @@
 <template>
   <div class="app-container">
-    <div class="filter-container">
-      <div class="filter-left">
-        <div class="filter-item">操作内容：
-          <el-input v-model="operation" placeholder="请输入操作内容" clearable style="width: 160px"></el-input>
-        </div>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="getList()">搜索</el-button>
-        <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </div>
-    </div>
-    <!-- <el-divider></el-divider> -->
+    <el-form  :inline="true" >
+      <el-form-item label="操作内容:">
+        <el-input v-model="operation" placeholder="请输入操作内容" clearable ></el-input>
+      </el-form-item>
+      <el-form-item class="right">
+        <el-button plain size="mini" @click="resetQuery">重置</el-button>
+        <el-button type="primary" size="mini" @click="getList()">搜索</el-button>
+      </el-form-item>
+    </el-form>
     <el-table
       :data="tableData"
       stripe
-      style="width: 100%;margin-top:10px;"
+      style="margin-top:20px;"
       id="out-table"
       @selection-change="handleSelectionChange"
-      :height="tableHeight"
+      border
     >
       <el-table-column prop="id" label="序号" show-overflow-tooltip></el-table-column>
       <el-table-column prop="operation" label="操作内容" show-overflow-tooltip> </el-table-column>
       <el-table-column prop="ip" label="请求ip" show-overflow-tooltip> </el-table-column>
       <el-table-column prop="userName" label="操作人员" show-overflow-tooltip> </el-table-column>
       <el-table-column prop="creatDate" label="操作时间" show-overflow-tooltip></el-table-column>
-
     </el-table>
     <el-pagination
       background
@@ -128,15 +126,7 @@ export default {
     this.getList();
   },
   mounted(){
-    // table高度
-    if(window.innerWidth <1920){
-      this.tableHeight = window.innerHeight - 300
-    }
-    // 监听窗口大小变化
-    let self = this;
-    window.onresize = function() {
-      self.tableHeight = window.innerHeight - 300
-    }
+
   },
   methods: {
     /** 重置按钮操作 */