样式同步

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;