首页

src/const/index.js

+export const alarmLeval = {
+  1: '紧急',
+  2: '重要',
+  3: '一般',
+}
\ No newline at end of file

src/router/index.js

@@ -58,18 +58,18 @@ export const constantRoutes = [
     path: '/alarm',
     component: Layout,
     redirect: '/dashboard',
-    name: '监测实时状态',
+    name: 'alarm',
     meta: { title: '告警管理', icon: 'dashboard' },
     children: [
       {
-        path: 'leakageCable',
-        name: '漏缆实时状态',
-        component: () => import('@/views/monitor/leakageCable'),
+        path: 'cableTime',
+        name: 'cableTime',
+        component: () => import('@/views/alarm/cableTime/index'),
         meta: { title: '漏缆监测告警' }
       },
       {
         path: 'equipment',
-        name: '设备实时状态',
+        name: 'device',
         component: () => import('@/views/monitor/equipment'),
         meta: { title: '设备连接告警' }
       }

src/styles/common.scss

@@ -10,10 +10,15 @@
   margin-bottom: 10px;
 }
 
+.mb20 {
+  margin-bottom: 20px;
+}
+
 .ml20 {
   margin-left: 20px;
 }
+
 .flex_clo {
   display: flex;
   flex-direction: column;
-}
+}
\ No newline at end of file

src/views/alarm/cableTime/const.js

+import { alarmLeval } from '@/const/index'
+
+export const tableData = [
+  {
+    name: 'STATION2未开通',
+    object: '漏缆FSU2_R1下行方向',
+    level: '紧急',
+    message: {
+      red: ['距离：0米 驻波比：8.72'],
+      green: ['距离：18米 驻波比：1.07', '距离：42米 驻波比：1.02'],
+      black: ['漏缆百米损耗：2.8']
+    },
+    uploadDate: '2022/12/18 11:51:12',
+    updateDate: '2022/12/18 11:51:12',
+    confirmUser: '--',
+    confirmTime: '--',
+  },
+  {
+    name: 'STATION2未开通',
+    object: '漏缆FSU2_R1下行方向',
+    level: '紧急',
+    message: {
+      red: ['距离：0米 驻波比：8.72'],
+      green: ['距离：18米 驻波比：1.07', '距离：42米 驻波比：1.02'],
+      black: ['漏缆百米损耗：2.8']
+    },
+    uploadDate: '2022/12/18 11:51:12',
+    updateDate: '2022/12/18 11:51:12',
+    confirmUser: '--',
+    confirmTime: '--',
+  },
+  {
+    name: 'STATION2未开通',
+    object: '漏缆FSU2_R1下行方向',
+    level: '重要',
+    message: {
+      red: ['距离：0米 驻波比：8.72'],
+      green: ['距离：18米 驻波比：1.07', '距离：42米 驻波比：1.02'],
+      black: ['漏缆百米损耗：2.8']
+    },
+    uploadDate: '2022/12/18 11:51:12',
+    updateDate: '2022/12/18 11:51:12',
+    confirmUser: 'admin',
+    confirmTime: '2022/12/18 17:51:12',
+  },
+  {
+    name: 'STATION2未开通',
+    object: '漏缆FSU2_R1下行方向',
+    level: '紧急',
+    message: {
+      red: ['距离：0米 驻波比：8.72'],
+      green: ['距离：18米 驻波比：1.07', '距离：42米 驻波比：1.02'],
+      black: ['漏缆百米损耗：2.8']
+    },
+    uploadDate: '2022/12/18 11:51:12',
+    updateDate: '2022/12/18 11:51:12',
+    confirmUser: 'admin',
+    confirmTime: '2022/12/18 17:51:12',
+  },
+  {
+    name: 'STATION2未开通',
+    object: '漏缆FSU2_R1下行方向',
+    level: '重要',
+    message: {
+      red: ['距离：0米 驻波比：8.72'],
+      green: ['距离：18米 驻波比：1.07', '距离：42米 驻波比：1.02'],
+      black: ['漏缆百米损耗：2.8']
+    },
+    uploadDate: '2022/12/18 11:51:12',
+    updateDate: '2022/12/18 11:51:12',
+    confirmUser: '--',
+    confirmTime: '--'
+  },
+]
\ No newline at end of file

src/views/alarm/cableTime/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" size="small">刷新</el-button>
+        <el-button type="primary" size="small">查询</el-button>
+        <el-button type="primary" size="small">导出</el-button>
+      </div>
+    </div>
+    <div style="color: #666666">
+      共5条数据
+    </div>
+    <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>
+            {{ scope.row.level }}
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="message" label="告警信息" align="center" width="300">
+        <template slot-scope="scope">
+          <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+'green'" class="green message">
+            {{ item }}
+          </div>
+          <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-column prop="updateDate" 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 {
+      activeName: '全部',
+      searchForm: {
+        pageNum: 1,
+        pageSize: 10
+      },
+      total: 10,
+      tableData
+    };
+  },
+  methods: {
+    // 表格背景图颜色
+    cellClassFn({row, column, rowIndex, columnIndex}) {
+      if (row.level == '紧急' && column.label == '告警级别') {
+        return 'emergency'
+      } else if (row.level == '重要' && column.label == '告警级别') {
+        return 'important'
+      }
+      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;
+  }
+  .message {
+    line-height: 32px;
+  }
+  .red {
+    color: red;
+  }
+  .green {
+    color: green;
+  }
+  .black {
+    color: black;
+  }
+  & ::v-deep .stripe {
+    background-color: #EAF1FE;
+  }
+  & ::v-deep .emergency {
+    background-color: #f00;
+  }
+  & ::v-deep .important {
+    background-color: #f89850;
+  }
+  .page {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 20px 0;
+    .pageNum {
+      margin: 0 20px;
+    }
+  }
+}
+</style>

src/views/dashboard/const.js

+export const listData = [
+  {
+    title: '服务器信息',
+    list: [
+      {
+        name: '服务器IP',
+        value: '192.168.1.110',
+      },
+      {
+        name: '操作系统',
+        value: 'Red Hat EnterpiseLin...',
+      },
+      {
+        name: '系统软件版本',
+        value: '192.168.1.110',
+      },
+    ]
+  },
+  {
+    title: '当前状态',
+    list: [
+      {
+        handle: true,
+        name: '设备状态',
+        value: '告警',
+      },
+      {
+        handle: true,
+        name: '漏缆状态',
+        value: '紧急告警',
+      },
+      {
+        name: '',
+        value: '',
+      },
+    ]
+  },
+  {
+    title: '管理员(admin)管理范围',
+    list: [
+      {
+        name: '基站',
+        value: '20个',
+      },
+      {
+        name: 'FSU',
+        value: '20台',
+      },
+      {
+        name: '监测设备',
+        value: '81台',
+      },
+      {
+        name: '混缆',
+        value: '142根',
+      },
+    ]
+  },
+  {
+    title: '服务器信息',
+    option: true,
+    list: [
+      {
+        name: '铁路名称',
+        value: '张呼铁路客运专线',
+      },
+      {
+        name: '铁路起点站名',
+        value: '张家口',
+      },
+      {
+        name: '铁路终点站名',
+        value: '呼和浩特',
+      },
+      {
+        name: '铁路总长度(公里)',
+        value: '286.8',
+      },
+    ]
+  },
+
+  
+
+]
\ No newline at end of file

src/views/dashboard/index.vue

 <template>
   <div class="dashboard-container">
-    <!-- <OrgTree /> -->
-
+    <!-- 首页 -->
+    <el-row :gutter="24">
+      <el-col :span="12" v-for="item in listData" class="mb20">
+        <el-card shadow="never">
+          <div slot="header" class="clearfix">
+            <span>{{ item.title }}</span>
+            <el-button v-if="item.option" style="float: right; padding: 3px 0" type="text">保存</el-button>
+          </div>
+          <div v-for="k in item.list" :key="k.name" class="text">
+            <el-row :gutter="24">
+              <el-col :span="10">
+                <div class="item_name">{{ k.name }}</div>
+              </el-col>
+              <el-col :span="14">
+                <div v-if="item.option">
+                  <el-input v-model="k.value" clearable placeholder="请输入内容">{{ k.value }}</el-input>
+                </div>
+                <el-row :gutter="20" v-else-if="k.handle">
+                  <el-col :span="10" class="value_handle">{{ k.value }}</el-col>
+                  <el-col :span="10"><el-button size="mini" type="primary">处理告警</el-button></el-col>
+                </el-row>
+                <div v-else>{{ k.value }}</div>
+              </el-col>
+            </el-row>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+    <div>
+      
+    </div>
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
-import OrgTree from '@/components/orgTree.vue'
+import { listData } from './const'
+
 export default {
   name: 'Dashboard',
-  components: {
-    OrgTree
+  data() {
+    return {
+      listData
+    }
   },
   computed: {
     ...mapGetters([
@@ -22,13 +54,35 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.dashboard {
-  &-container {
-    margin: 0px;
+::v-deep.el-card {
+  border: 1px solid #E3E3E3;
+  border-radius: 8px;
+  min-height: 300px;
+  .el-card__header {
+    font-size: 18px;
+    color: #333333;
+    font-weight: 500;
+    text-align: center;
+    background: rgba(226, 235, 255, 0.39);
+    opacity: 1;
+  }
+}
+// .el-col {
+//   margin-bottom: 20px;
+// }
+.text {
+  // display: flex;
+  padding: 20px;
+  border-bottom: 1px solid #E3E3E3;
+  &:last-child {
+    border-bottom: none;
+  }
+  .item_name {
+    width: 262px;
   }
-  &-text {
-    font-size: 30px;
-    line-height: 46px;
+  .value_handle {
+    color:red;
+    margin-right: 10px;
   }
 }
 </style>