历史数据页面

src/router/index.js

@@ -155,18 +155,18 @@ export const constantRoutes = [
         path: 'leakyCableRepair',
         name: 'leakyCableRepair',
         component: () => import('@/views/history/leakyCableRepair/index.vue'),
-        meta: { title: '漏缆监测维护状态' }
+        meta: { title: '漏缆监测维护历史' }
       },
       {
-        path: '',
-        name: 'leakyCableRepair',
-        component: () => import('@/views/history/leakyCableRepair/index.vue'),
+        path: 'deviceLinkStatus',
+        name: 'deviceLinkStatus',
+        component: () => import('@/views/history/deviceLinkStatus/index.vue'),
         meta: { title: '设备连接历史状态' }
       },
       {
-        path: '',
-        name: 'leakyCableRepair',
-        component: () => import('@/views/history/leakyCableRepair/index.vue'),
+        path: 'deviceLinkRepair',
+        name: 'deviceLinkRepair',
+        component: () => import('@/views/history/deviceLinkRepair/index.vue'),
         meta: { title: '设备连接维修历史' }
       }
     ]

src/views/history/deviceLinkRepair/index.vue

+<template>
+  <div class="leakage-cable">
+    <!-- 设备连接维修历史 -->
+    <div class="leakage-top">
+      <div style="color: #666666">共14条数据</div>
+      <div class="operate-btn">
+        <el-button
+          :type="multipleSelection.length ? 'primary' : 'info'"
+          :disabled="!multipleSelection.length"
+          >删除</el-button
+        >
+        <el-button type="primary">刷新</el-button>
+        <el-button type="primary">查询</el-button>
+        <el-button type="primary">导出</el-button>
+        <el-button type="primary">清空数据</el-button>
+      </div>
+    </div>
+    <el-table
+      :data="tableData"
+      style="width: 100%"
+      :cell-class-name="cellClassFn"
+      :header-cell-style="{ background: '#EAF1FE', color: '#666666' }"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" width="55" align="center" />
+
+      <el-table-column prop="netDevice" label="网元设备" align="center" />
+      <el-table-column
+        prop="linkStatus"
+        label="连接状态"
+        width="150"
+        align="center"
+      >
+      </el-table-column>
+      <el-table-column prop="netDevice2" label="网元设备" align="center">
+      </el-table-column>
+      <el-table-column prop="repairPerson" label="网元设备" align="center">
+      </el-table-column>
+      <el-table-column
+        prop="linkRepairDate"
+        label="链接告警维修时间"
+  
+        align="center"
+      />
+    </el-table>
+    <pagination
+      :limit="searchForm.pageSize"
+      :page="searchForm.pageNum"
+      :total="total"
+      class="pagination"
+      @pagination="handlePageChange"
+    >
+    </pagination>
+  </div>
+</template>
+<script>
+import Pagination from "@/components/Pagination";
+export default {
+  props: [],
+  components: { Pagination },
+  data() {
+    return {
+      multipleSelection: [],
+      searchForm: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+      total: 10,
+      tableData: [
+        {
+          netDevice: "监控中心LSC",
+          linkStatus: "连接异常",
+          netDevice2: "现场管理单元 K65+308",
+          repairPerson: "张三",
+          linkRepairDate: "2022/12/18 11:59:42",
+        },
+        {
+          netDevice: "现场管理单元 K65+308",
+          linkStatus: "连接正常",
+          netDevice2: "故障定位单元 K64+287",
+          linkRepairDate: "2022/12/18 11:59:42",
+          repairPerson: "张三",
+        },
+        {
+          netDevice: "监控中心LSC",
+          linkStatus: "连接异常",
+          netDevice2: "现场管理单元 K65+308",
+          linkRepairDate: "2022/12/18 11:59:42",
+          repairPerson: "张三",
+        },
+        {
+          netDevice: "监控中心LSC",
+          linkStatus: "连接异常",
+          netDevice2: "现场管理单元 K65+308",
+          linkRepairDate: "2022/12/18 11:59:42",
+          repairPerson: "张三",
+        },
+        {
+          netDevice: "监控中心LSC",
+          linkStatus: "连接异常",
+          netDevice2: "现场管理单元 K65+308",
+          linkRepairDate: "2022/12/18 11:59:42",
+          repairPerson: "张三",
+        },
+        {
+          netDevice: "现场管理单元 K65+308",
+          linkStatus: "连接正常",
+          netDevice2: "故障定位单元 K64+287",
+          linkRepairDate: "2022/12/18 11:59:42",
+          repairPerson: "张三",
+        },
+        {
+          netDevice: "监控中心LSC",
+          linkStatus: "连接异常",
+          netDevice2: "现场管理单元 K65+308",
+          linkRepairDate: "2022/12/18 11:59:42",
+          repairPerson: "张三",
+        },
+        {
+          netDevice: "监控中心LSC",
+          linkStatus: "连接异常",
+          netDevice2: "现场管理单元 K65+308",
+          linkRepairDate: "2022/12/18 11:59:42",
+          repairPerson: "张三",
+        },
+        {
+          netDevice: "现场管理单元 K65+308",
+          linkStatus: "连接正常",
+          netDevice2: "故障定位单元 K64+287",
+          linkRepairDate: "2022/12/18 11:59:42",
+          repairPerson: "张三",
+        },
+        {
+          netDevice: "监控中心LSC",
+          linkStatus: "连接异常",
+          netDevice2: "现场管理单元 K65+308",
+          linkRepairDate: "2022/12/18 11:59:42",
+          repairPerson: "张三",
+        },
+        {
+          netDevice: "监控中心LSC",
+          linkStatus: "连接异常",
+          netDevice2: "现场管理单元 K65+308",
+          linkRepairDate: "2022/12/18 11:59:42",
+          repairPerson: "张三",
+        },
+        {
+          netDevice: "现场管理单元 K65+308",
+          linkStatus: "连接正常",
+          netDevice2: "故障定位单元 K64+287",
+          linkRepairDate: "2022/12/18 11:59:42",
+          repairPerson: "张三",
+        },
+        {
+          netDevice: "监控中心LSC",
+          linkStatus: "连接异常",
+          netDevice2: "现场管理单元 K65+308",
+          linkRepairDate: "2022/12/18 11:59:42",
+          repairPerson: "张三",
+        },
+        {
+          netDevice: "监控中心LSC",
+          linkStatus: "连接异常",
+          netDevice2: "现场管理单元 K65+308",
+          linkRepairDate: "2022/12/18 11:59:42",
+          repairPerson: "张三",
+        },
+      ],
+    };
+  },
+  computed: {},
+  methods: {
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+    handlePageChange(pageData) {
+      this.searchForm.pageSize = pageData.size;
+      this.searchForm.pageNum = pageData.page;
+    },
+    cellClassFn({ row, column, rowIndex, columnIndex }) {
+      if (row.linkStatus == "连接异常" && column.label == "连接状态") {
+        return "emergency";
+      } else if (row.linkStatus == "连接正常" && column.label == "连接状态") {
+        return "normal";
+      }
+      if (rowIndex % 2 == 1) {
+        return "stripe";
+      }
+    },
+  },
+  mounted() {},
+};
+</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 .emergency {
+    background-color: #f00;
+  }
+  & ::v-deep .important {
+    background-color: #f89850;
+  }
+  & ::v-deep .normal {
+    background-color: green;
+  }
+
+  .page {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 20px 0;
+    .pageNum {
+      margin: 0 20px;
+    }
+  }
+}
+</style>
\ No newline at end of file

src/views/history/deviceLinkStatus/index.vue

+<template>
+  <div class="leakage-cable">
+    <!-- 设备连接状态 -->
+    <div class="leakage-top">
+      <div style="color: #666666">共14条数据</div>
+      <div class="operate-btn">
+            <el-button
+          :type="multipleSelection.length ? 'primary' : 'info'"
+          :disabled="!multipleSelection.length"
+          >删除</el-button
+        >
+        <el-button type="primary">刷新</el-button>
+        <el-button type="primary">查询</el-button>
+        <el-button type="primary">导出</el-button>
+        <el-button type="primary">清空数据</el-button>
+      </div>
+    </div>
+    <el-table
+      :data="tableData"
+      style="width: 100%"
+      :cell-class-name="cellClassFn"
+      :header-cell-style="{ background: '#EAF1FE', color: '#666666' }"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" width="55" align="center" />
+
+      <el-table-column
+        prop="netDevice"
+        label="网元设备"
+      
+        align="center"
+      />
+      <el-table-column
+        prop="linkStatus"
+        label="连接状态"
+        width="150"
+        align="center"
+      >
+      </el-table-column>
+      <el-table-column prop="netDevice2" label="网元设备" align="center">
+      </el-table-column>
+      <el-table-column
+        prop="uploadDate"
+        label="上传时间"
+     
+        align="center"
+      />
+      <el-table-column
+        prop="cancelDate"
+        label="取消时间"
+      
+        align="center"
+      />
+      <el-table-column
+        prop="linkCancelTime"
+        label="连接中断时长"
+     
+        align="center"
+      />
+    </el-table>
+    <pagination
+      :limit="searchForm.pageSize"
+      :page="searchForm.pageNum"
+      :total="total"
+      class="pagination"
+      @pagination="handlePageChange"
+    >
+    </pagination>
+  </div>
+</template>
+<script>
+import Pagination from "@/components/Pagination";
+export default {
+  props: [],
+  components: { Pagination },
+  data() {
+    return {
+      multipleSelection: [],
+      searchForm: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+      total: 10,
+      tableData: [
+        {
+          netDevice: "监控中心LSC",
+          linkStatus: "连接异常",
+          netDevice2: "现场管理单元 K65+308",
+          uploadDate: "2022/12/18 11:51:12",
+          cancelDate: "2022/12/18 11:59:42",
+          linkCancelTime: "5小时2分5秒",
+        },
+        {
+          netDevice: "现场管理单元 K65+308",
+          linkStatus: "连接正常",
+          netDevice2: "故障定位单元 K64+287",
+          uploadDate: "2022/12/18 11:51:12",
+          cancelDate: "2022/12/18 11:59:42",
+          linkCancelTime: "5小时2分5秒",
+        },
+          {
+          netDevice: "监控中心LSC",
+          linkStatus: "连接异常",
+          netDevice2: "现场管理单元 K65+308",
+          uploadDate: "2022/12/18 11:51:12",
+          cancelDate: "2022/12/18 11:59:42",
+          linkCancelTime: "5小时2分5秒",
+        },  {
+          netDevice: "监控中心LSC",
+          linkStatus: "连接异常",
+          netDevice2: "现场管理单元 K65+308",
+          uploadDate: "2022/12/18 11:51:12",
+          cancelDate: "2022/12/18 11:59:42",
+          linkCancelTime: "5小时2分5秒",
+        },  {
+          netDevice: "监控中心LSC",
+          linkStatus: "连接异常",
+          netDevice2: "现场管理单元 K65+308",
+          uploadDate: "2022/12/18 11:51:12",
+          cancelDate: "2022/12/18 11:59:42",
+          linkCancelTime: "5小时2分5秒",
+        },
+          {
+          netDevice: "现场管理单元 K65+308",
+          linkStatus: "连接正常",
+          netDevice2: "故障定位单元 K64+287",
+          uploadDate: "2022/12/18 11:51:12",
+          cancelDate: "2022/12/18 11:59:42",
+          linkCancelTime: "5小时2分5秒",
+        },
+          {
+          netDevice: "监控中心LSC",
+          linkStatus: "连接异常",
+          netDevice2: "现场管理单元 K65+308",
+          uploadDate: "2022/12/18 11:51:12",
+          cancelDate: "2022/12/18 11:59:42",
+          linkCancelTime: "5小时2分5秒",
+        },  {
+          netDevice: "监控中心LSC",
+          linkStatus: "连接异常",
+          netDevice2: "现场管理单元 K65+308",
+          uploadDate: "2022/12/18 11:51:12",
+          cancelDate: "2022/12/18 11:59:42",
+          linkCancelTime: "5小时2分5秒",
+        },   {
+          netDevice: "现场管理单元 K65+308",
+          linkStatus: "连接正常",
+          netDevice2: "故障定位单元 K64+287",
+          uploadDate: "2022/12/18 11:51:12",
+          cancelDate: "2022/12/18 11:59:42",
+          linkCancelTime: "5小时2分5秒",
+        },
+          {
+          netDevice: "监控中心LSC",
+          linkStatus: "连接异常",
+          netDevice2: "现场管理单元 K65+308",
+          uploadDate: "2022/12/18 11:51:12",
+          cancelDate: "2022/12/18 11:59:42",
+          linkCancelTime: "5小时2分5秒",
+        },  {
+          netDevice: "监控中心LSC",
+          linkStatus: "连接异常",
+          netDevice2: "现场管理单元 K65+308",
+          uploadDate: "2022/12/18 11:51:12",
+          cancelDate: "2022/12/18 11:59:42",
+          linkCancelTime: "5小时2分5秒",
+        },   {
+          netDevice: "现场管理单元 K65+308",
+          linkStatus: "连接正常",
+          netDevice2: "故障定位单元 K64+287",
+          uploadDate: "2022/12/18 11:51:12",
+          cancelDate: "2022/12/18 11:59:42",
+          linkCancelTime: "5小时2分5秒",
+        },
+          {
+          netDevice: "监控中心LSC",
+          linkStatus: "连接异常",
+          netDevice2: "现场管理单元 K65+308",
+          uploadDate: "2022/12/18 11:51:12",
+          cancelDate: "2022/12/18 11:59:42",
+          linkCancelTime: "5小时2分5秒",
+        },  {
+          netDevice: "监控中心LSC",
+          linkStatus: "连接异常",
+          netDevice2: "现场管理单元 K65+308",
+          uploadDate: "2022/12/18 11:51:12",
+          cancelDate: "2022/12/18 11:59:42",
+          linkCancelTime: "5小时2分5秒",
+        }, 
+      ],
+    };
+  },
+  computed: {},
+  methods: {
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+    handlePageChange(pageData) {
+      this.searchForm.pageSize = pageData.size;
+      this.searchForm.pageNum = pageData.page;
+    },
+    cellClassFn({ row, column, rowIndex, columnIndex }) {
+      if (row.linkStatus == "连接异常" && column.label == "连接状态") {
+        return "emergency";
+      } else if (row.linkStatus == "连接正常" && column.label == "连接状态") {
+        return "normal";
+      }
+      if (rowIndex % 2 == 1) {
+        return "stripe";
+      }
+    },
+  },
+  mounted() {},
+};
+</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 .emergency {
+    background-color: #f00;
+  }
+  & ::v-deep .important {
+    background-color: #f89850;
+  }
+  & ::v-deep .normal {
+    background-color: green;
+  }
+
+  .page {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 20px 0;
+    .pageNum {
+      margin: 0 20px;
+    }
+  }
+}
+</style>
\ No newline at end of file

src/views/history/leakyCableRepair/index.vue

+<template>
+  <div class="leakage-cable">
+    <!-- 设备维护历史 -->
+    <div class="leakage-top">
+      <div style="color: #666666">共8条数据</div>
+      <div class="operate-btn">
+        <el-button
+          :type="multipleSelection.length ? 'primary' : 'info'"
+          :disabled="!multipleSelection.length"
+          >删除</el-button
+        >
+        <el-button type="primary">刷新</el-button>
+        <el-button type="primary">查询</el-button>
+        <el-button type="primary">导出</el-button>
+      </div>
+    </div>
+    <el-table
+      :data="tableData"
+      style="width: 100%"
+      :cell-class-name="cellClassFn"
+      :header-cell-style="{ background: '#EAF1FE', color: '#666666' }"
+        @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" width="55" 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">
+        <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>
+    <pagination
+      :limit="searchForm.pageSize"
+      :page="searchForm.pageNum"
+      :total="total"
+      class="pagination"
+      @pagination="handlePageChange"
+    >
+    </pagination>
+  </div>
+</template>
+<script>
+import Pagination from "@/components/Pagination";
+export default {
+  props: [],
+  components: { Pagination },
+  data() {
+    return {
+      multipleSelection: [],
+      searchForm: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+      total: 10,
+      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",
+        },
+        {
+          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",
+        },
+        {
+          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",
+        },
+        {
+          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",
+        },
+        {
+          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",
+        },
+        {
+          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",
+        },
+         {
+          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",
+        }, {
+          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",
+        },
+      ],
+    };
+  },
+  computed: {},
+  methods: {
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+    handlePageChange(pageData) {
+      this.searchForm.pageSize = pageData.size;
+      this.searchForm.pageNum = pageData.page;
+    },
+      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'
+      }
+    },
+  },
+  mounted() {},
+};
+</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: 22px;
+  }
+  .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>