alarm style

src/router/index.js

@@ -68,9 +68,9 @@ export const constantRoutes = [
         meta: { title: '漏缆监测告警' }
       },
       {
-        path: 'equipment',
+        path: 'device',
         name: 'device',
-        component: () => import('@/views/monitor/equipment'),
+        component: () => import('@/views/alarm/device/index'),
         meta: { title: '设备连接告警' }
       }
     ]

src/views/alarm/device/const.js

+export const tableData = [
+  {
+    equipment1: '监控中心LSC',
+    state1: '连接正常',
+    equipment2: '现场管理单元 K65+308',
+    uploadDate: '2022/12/18 11:51:12',
+    confirmUser: '--',
+    confirmTime: '--',
+  },
+  {
+    equipment1: '监控中心LSC',
+    state1: '连接正常',
+    equipment2: '现场管理单元 K65+308',
+    uploadDate: '2022/12/18 11:51:12',
+    confirmUser: 'admin',
+    confirmTime: '2022/12/18 11:51:12',
+  },
+  {
+    equipment1: '监控中心LSC',
+    state1: '连接正常',
+    equipment2: '现场管理单元 K65+308',
+    uploadDate: '2022/12/18 11:51:12',
+    confirmUser: '--',
+    confirmTime: '--',
+  },
+  {
+    equipment1: '监控中心LSC',
+    state1: '连接正常',
+    equipment2: '现场管理单元 K65+308',
+    uploadDate: '2022/12/18 11:51:12',
+    confirmUser: '--',
+    confirmTime: '--',
+  },
+  {
+    equipment1: '监控中心LSC',
+    state1: '连接异常',
+    equipment2: '现场管理单元 K65+308',
+    uploadDate: '2022/12/18 11:51:12',
+    confirmUser: '--',
+    confirmTime: '--',
+  },
+  {
+    equipment1: '监控中心LSC',
+    state1: '连接异常',
+    equipment2: '现场管理单元 K65+308',
+    uploadDate: '2022/12/18 11:51:12',
+    confirmUser: '--',
+    confirmTime: '--',
+  },
+  
+]
\ No newline at end of file

src/views/alarm/device/index.vue

+<template>
+  <!-- 漏缆实时状态 -->
+  <div class="leakage-cable">
+    <div class="leakage-top">
+      <el-tabs v-model="activeName" type="card">
+        <el-tab-pane label="全部" name="first">全部</el-tab-pane>
+        <el-tab-pane label="已确认" name="second">已确认</el-tab-pane>
+        <el-tab-pane label="未确认" name="third">未确认</el-tab-pane>
+      </el-tabs>
+      
+      <div class="operate-btn">
+        <el-button type="primary">刷新</el-button>
+        <el-button type="primary">查询</el-button>
+        <el-button type="primary">导出</el-button>
+      </div>
+    </div>
+    <div>
+      共6条数据
+    </div>
+    <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" />
+      <el-table-column prop="uploadDate" label="上传时间" align="center" />
+      <el-table-column prop="confirmUser" label="确认人" align="center" />
+      <el-table-column prop="confirmTime" label="确认时间" align="center" />
+      <el-table-column
+        fixed="right"
+        label="操作"
+        width="100">
+        <template slot-scope="scope">
+          <el-button type="text" size="small">确认</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination
+      :limit="searchForm.pageSize"
+      :page="searchForm.pageNum"
+      :total="total"
+      class="pagination"
+      @pagination="handlePageChange"
+    />
+  </div>
+</template>
+
+<script>
+import Pagination from '@/components/Pagination'
+import { tableData } from './const'
+export default {
+  components: { Pagination },
+  data() {
+    return {
+      searchForm: {
+        pageNum: 1,
+        pageSize: 10
+      },
+      total: 10,
+      tableData,
+      activeName: '全部',
+    };
+  },
+  methods: {
+    // 表格背景图颜色
+    cellClassFn({row, column, rowIndex, columnIndex}) {
+      if ((row.state1 == '连接正常' && column.property == 'state1')) {
+        return 'green'
+      }
+      if ((row.state1 == '连接异常' && column.property == 'state1')) {
+        return 'red'
+      }
+      if ((row.state2 == '连接正常' && column.property == 'state2')) {
+        return 'green'
+      } else if ((row.state2 == '连接异常' && column.property == 'state2')) {
+        return 'red'
+      }
+      if (rowIndex%2 == 1) {
+        return 'stripe'
+      }
+    },
+    handlePageChange(pageData) {
+      this.searchForm.pageSize = pageData.size
+      this.searchForm.pageNum = pageData.page
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.leakage-cable {
+  .leakage-top {
+    margin-bottom: 20px;
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+  }
+  & ::v-deep .cell {
+    color: #333333;
+  }
+  & ::v-deep .stripe {
+    background-color: #EAF1FE;
+  }
+  & ::v-deep .red {
+    background-color: #f00;
+  }
+  & ::v-deep .green {
+    background-color: green;
+  }
+  .page {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 20px 0;
+    .pageNum {
+      margin: 0 20px;
+    }
+  }
+}
+</style>