Merge branch 'dev' of http://39.105.40.203/root/web-monitor into dev

src/views/monitor/equipment.vue

 <template>
   <!-- 漏缆实时状态 -->
   <div class="leakage-cable">
+    <breadcrumb />
     <div class="leakage-top">
+      <div>
+        共6条数据
+      </div>
       <div class="operate-btn">
         <el-button type="primary">刷新</el-button>
         <el-button type="primary">查询</el-button>
         <el-button type="primary">导出</el-button>
       </div>
-      <div>
-        共6条数据
-      </div>
     </div>
-    <el-table :data="tableData" style="width: 100%" :cell-class-name="cellClassFn" :header-cell-style="{background:'#EAF1FE',color:'#000'}">
+    <el-table :data="tableData" style="width: 100%" :cell-class-name="cellClassFn" :header-cell-style="{background:'#EAF1FE',color:'#666666'}">
       <el-table-column prop="equipment1" label="网元设备" align="center" />
       <el-table-column prop="state1" label="连接状态" align="center" />
       <el-table-column prop="equipment2" label="网元设备" align="center" />
@@ -19,18 +20,29 @@
       <el-table-column prop="equipment3" label="网元设备" align="center" />
       <el-table-column prop="uploadDate" label="上传时间" align="center" />
     </el-table>
-    <div class="page">
-      <el-button>上一页</el-button>
-      <span class="pageNum">2/5</span>
-      <el-button>下一页</el-button>
-    </div>
+    <pagination
+      :limit="searchForm.pageSize"
+      :page="searchForm.pageNum"
+      :total="total"
+      class="pagination"
+      @pagination="handlePageChange"
+    />
   </div>
 </template>
 
 <script>
+import Breadcrumb from '@/components/Breadcrumb'
+import Pagination from '@/components/Pagination'
+
 export default {
+  components: { Pagination, Breadcrumb },
   data() {
     return {
+      searchForm: {
+        pageNum: 1,
+        pageSize: 10
+      },
+      total: 10,
       tableData: [
         {
           equipment1: '监控中心LSC',
@@ -149,8 +161,6 @@ export default {
   methods: {
     // 表格背景图颜色
     cellClassFn({row, column, rowIndex, columnIndex}) {
-      console.log(row, 'row')
-      console.log(column, 'column')
       if ((row.state1 == '连接正常' && column.property == 'state1')) {
         return 'green'
       }
@@ -166,11 +176,9 @@ export default {
         return 'stripe'
       }
     },
-    handleSizeChange(val) {
-      console.log(`每页 ${val} 条`);
-    },
-    handleCurrentChange(val) {
-      console.log(`当前页: ${val}`);
+    handlePageChange(pageData) {
+      this.searchForm.pageSize = pageData.size
+      this.searchForm.pageNum = pageData.page
     }
   }
 };
@@ -179,13 +187,13 @@ export default {
 <style lang="scss" scoped>
 .leakage-cable {
   .leakage-top {
-    margin: 20px;
+    margin-bottom: 20px;
     display: flex;
-    align-items: center;
+    align-items: flex-end;
     justify-content: space-between;
   }
   & ::v-deep .cell {
-    color: #000;
+    color: #333333;
   }
   & ::v-deep .stripe {
     background-color: #EAF1FE;

src/views/monitor/leakageCable.vue

 <template>
   <!-- 漏缆实时状态 -->
   <div class="leakage-cable">
+    <breadcrumb />
     <div class="leakage-top">
+      <div style="color: #666666">
+        共6条数据
+      </div>
       <div class="operate-btn">
         <el-button type="primary">刷新</el-button>
         <el-button type="primary">查询</el-button>
         <el-button type="primary">导出</el-button>
       </div>
-      <div>
-        共6条数据
-      </div>
     </div>
-    <el-table :data="tableData" style="width: 100%" :cell-class-name="cellClassFn" :header-cell-style="{background:'#EAF1FE',color:'#000'}">
+    <el-table :data="tableData" style="width: 100%" :cell-class-name="cellClassFn" :header-cell-style="{background:'#EAF1FE',color:'#666666'}">
       <el-table-column type="index" label="序列号" width="100" align="center" />
       <el-table-column prop="name" label="基站名称" width="180" align="center" />
       <el-table-column prop="object" label="告警对象" width="180" align="center" />
       <el-table-column prop="level" label="告警级别" width="150" align="center">
         <template slot-scope="scope">
-          <div :class="scope.row.level == '重要'?'red':'orange'">
+          <div>
             {{ scope.row.level }}
           </div>
         </template>
@@ -27,28 +28,39 @@
           <div v-for="(item, index) in scope.row.message.red" :key="index+'red'" class="red message">
             {{ item }}
           </div>
-          <div v-for="(item, index) in scope.row.message.green" :key="index+'red'" class="green message">
+          <div v-for="(item, index) in scope.row.message.green" :key="index+'green'" class="green message">
             {{ item }}
           </div>
-          <div v-for="(item, index) in scope.row.message.black" :key="index+'red'" class="black message">
+          <div v-for="(item, index) in scope.row.message.black" :key="index+'black'" class="black message">
             {{ item }}
           </div>
         </template>
       </el-table-column>
       <el-table-column prop="uploadDate" label="最新上传时间" align="center" />
     </el-table>
-    <div class="page">
-      <el-button>上一页</el-button>
-      <span class="pageNum">2/5</span>
-      <el-button>下一页</el-button>
-    </div>
+    <pagination
+      :limit="searchForm.pageSize"
+      :page="searchForm.pageNum"
+      :total="total"
+      class="pagination"
+      @pagination="handlePageChange"
+    />
   </div>
 </template>
 
 <script>
+import Breadcrumb from '@/components/Breadcrumb'
+import Pagination from '@/components/Pagination'
+
 export default {
+  components: { Pagination, Breadcrumb },
   data() {
     return {
+      searchForm: {
+        pageNum: 1,
+        pageSize: 10
+      },
+      total: 10,
       tableData: [
         {
           name: 'STATION2未开通',
@@ -127,11 +139,9 @@ export default {
         return 'stripe'
       }
     },
-    handleSizeChange(val) {
-      console.log(`每页 ${val} 条`);
-    },
-    handleCurrentChange(val) {
-      console.log(`当前页: ${val}`);
+    handlePageChange(pageData) {
+      this.searchForm.pageSize = pageData.size
+      this.searchForm.pageNum = pageData.page
     }
   }
 };
@@ -140,13 +150,13 @@ export default {
 <style lang="scss" scoped>
 .leakage-cable {
   .leakage-top {
-    margin: 20px;
+    margin-bottom: 20px;
     display: flex;
-    align-items: center;
+    align-items: flex-end;
     justify-content: space-between;
   }
   & ::v-deep .cell {
-    color: #000;
+    color: #333333;
   }
   .message {
     line-height: 32px;

src/views/user/updateUser/components/baseInfo.vue

 <template>
   <div>
+    <div class="title">修改基本信息</div>
     <el-form ref="form" :model="form" label-width="100px" :rules="rules">
       <el-form-item label="用户名:" prop="name">
         <el-input v-model="form.name" />
@@ -55,4 +56,19 @@ export default {
   margin-top: 50px;
   text-align: center;
 }
+.title {
+  width: 100%;
+  height: 60px;
+  background: rgba(226, 235, 255, 0.39);
+  line-height: 60px;
+  font-size: 18px;
+  color: #333;
+  font-weight: 500;
+  text-align: center;
+  margin-bottom: 30px;
+}
+.el-form {
+  width: 500px;
+  margin: 0 auto;
+}
 </style>

src/views/user/updateUser/components/password.vue

 <template>
   <div>
+    <div class="title">修改密码</div>
     <el-form ref="form" :model="form" label-width="100px" :rules="rules">
       <el-form-item label="用户名:" prop="name">
         <el-input v-model="form.name" />
@@ -67,4 +68,19 @@ export default {
   margin-top: 50px;
   text-align: center;
 }
+.el-form {
+  width: 500px;
+  margin: 0 auto;
+}
+.title {
+  width: 100%;
+  height: 60px;
+  background: rgba(226, 235, 255, 0.39);
+  line-height: 60px;
+  font-size: 18px;
+  color: #333;
+  font-weight: 500;
+  text-align: center;
+  margin-bottom: 30px;
+}
 </style>

src/views/user/updateUser/index.vue

@@ -43,31 +43,21 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-.update-user-container {
-    width: 500px;
-    margin: 0 auto;
-}
+
 .header {
     display: flex;
     justify-content: center;
-    margin: 30px 0 50px 0;
+    margin-bottom: 30px;
     .tab {
-      background: #f3f3f3;
       display: flex;
-      height: 40px;
-      border-radius: 10px;
       cursor: pointer;
       .tab-item {
-        width: 130px;
-        line-height: 40px;
-        text-align: center;
-        font-size: 14px;
-        color: #666666;
+        margin: 0 50px;
+        padding-bottom: 10px;
       }
       .tab-active {
-        color: #fff;
-        background: #409eff;
-        border-radius: 10px;
+        color: #038ed7;
+        border-bottom: 1px solid #038ed7;
       }
     }
   }