Add incident management

Strides-Admin/src/http/api/error.js

@@ -1,5 +1,7 @@
 import { get, post } from '../http'
 
+const error = {
+
 // {
 //   "pageSize": 10,
 //   "pageNo": 1,
@@ -7,6 +9,12 @@ import { get, post } from '../http'
 //     "criteria": "test"
 //   }
 // }
-export function fetchErrorPages(data) {
-  return post('error/table/pages', data)
+  fetchErrorPages(data) {
+    return post('error/table/pages', data)
+  },
+  getConnectivityPages(data) {
+    return post('charger-connectivity/pages', data)
+  }
 }
+
+export default error;

Strides-Admin/src/router/IncidentRouter.js

@@ -0,0 +1,47 @@
+import Layout from '@/layout'
+
+export default {
+  path: '/incident',
+  redirect: '/incident/charger-connectivity',
+  component: Layout,
+  meta: {
+    title: 'Incident Management',
+    icon: 'error-table',
+    affix: true
+  },
+  children: [
+    {
+      path: '/incident/charger-connectivity',
+      component: () => import('@/views/incident/connectivity'),
+      name: 'charger-connectivity',
+      meta: {
+        title: 'Charger Connectivity',
+        icon: 'sidebar-submenu-item',
+        activeIcon: 'sidebar-submenu-item-active',
+        breadcrumb: true
+      }
+    },
+    {
+      path: '/incident/charger-connectivity/info/:id',
+      component: () => import('@/views/incident/info'),
+      name: 'error-table',
+      meta: {
+        title: 'View Details',
+        icon: 'sidebar-submenu-item',
+        activeMenu: '/incident/charger-connectivity',
+        hidden: true
+      }
+    },
+    {
+      path: '/incident/error-table',
+      component: () => import('@/views/incident/error_table'),
+      name: 'error-table',
+      meta: {
+        title: 'Error Table',
+        icon: 'sidebar-submenu-item',
+        activeIcon: 'sidebar-submenu-item-active',
+        breadcrumb: true
+      }
+    }
+  ]
+}

Strides-Admin/src/router/UserRouter.js

@@ -13,7 +13,6 @@ export default {
       path: '/user-management/index',
       component: () => import('@/views/user/UserManagement'),
       name: 'user-management',
-      hidden: true,
       meta: {
         title: 'Public User',
         icon: 'sidebar-submenu-item',

Strides-Admin/src/router/index.js

@@ -15,6 +15,7 @@ import CreditLimit from './CreditLimit'
 import FinancialRouter from './FinancialRouter'
 import PosRouter from './PosRouter'
 import RfidRouter from './RfidRouter'
+import IncidentRouter from './IncidentRouter'
 
 Vue.use(VueRouter)
 
@@ -101,28 +102,7 @@ const constantRoutes = [
   SiteRouter,
   ChargeRouter,
   Transactions,
-  {
-    path: '/error-table',
-    component: Layout,
-    meta: {
-      title: 'Error Table',
-      icon: 'error-table',
-      activeIcon: 'error-table-active',
-      affix: true
-    },
-    children: [
-      {
-        path: '/error-table',
-        component: () => import('@/views/transaction/error_table'),
-        name: 'error-table',
-        meta: {
-          title: 'Error Table',
-          icon: 'error-table',
-          breadcrumb: false
-        }
-      }
-    ]
-  },
+  IncidentRouter,
   ChargingProfile,
   FinancialRouter,
   UserRouter,

Strides-Admin/src/views/incident/connectivity.vue

@@ -0,0 +1,177 @@
+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <div class="radio-group">
+        <el-radio-group
+          v-model="params.tabIndex"
+          @change="changeTab">
+          <el-radio-button
+            v-for="(item,index) in dateRangeTab"
+            :key="index"
+            :label="index">
+            {{item.name + " (" + item.total + ")"}}
+          </el-radio-button>
+        </el-radio-group>
+      </div>
+      <div class="filter-view">
+        <div class="flex1" style="min-width: 300px; max-width: 350px;">
+          <el-input
+            v-model="params.pageVo.criteria"
+            placeholder="Search by Site ID, Station ID"
+            @keyup.enter.native="getTableData" />
+        </div>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          @click="getTableData">
+          Search
+        </el-button>
+      </div>
+    </div>
+    <el-table
+      v-loading="table.loading"
+      :data="table.list"
+      style="width: 100%;min-height: 65vh;">
+      <el-table-column
+        label="Site ID"
+        align="center"
+        width="100">
+          <template slot-scope="{row}">
+            <span>{{ row.sitePk }}</span>
+          </template>
+      </el-table-column>
+      <el-table-column
+        label="Site Name"
+        align="center"
+        prop="siteName"/>
+      <el-table-column
+        label="Station ID"
+        align="center"
+        prop="chargeBoxId"/>
+      <el-table-column
+        label="Timestamp"
+        align="center"
+        prop="timestamp"/>
+      <el-table-column
+        label="Latest Notification"
+        align="center"
+        prop="notification"/>
+      <el-table-column
+        label="Action"
+        align="center"
+        width="100">
+          <template slot-scope="{row}">
+            <el-dropdown
+              class="action-dropdown"
+              @command="(v) => handleCommand(v, row)">
+              <i class="el-icon-more icon-action"></i>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item
+                  command="viewDetail">
+                  View Info
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </template>
+      </el-table-column>
+    </el-table>
+    <div class="right">
+      <pagination
+        v-show="table.total > 0"
+        :total="table.total"
+        :page.sync="params.pageNo"
+        :limit.sync="params.pageSize"
+        @pagination="getTableData" />
+    </div>
+  </div>
+</template>
+
+<script>
+import Pagination from '@/components/Pagination'
+import error from '@/http/api/error'
+export default {
+  data() {
+    return {
+      params: {
+        pageNo: 1,
+        pageSize: 10,
+        pageVo: {
+          criteria: ""
+        },
+        tabIndex: 0
+      },
+      table: {
+        loading: false,
+        list: [],
+        total: 0
+      },
+      dateRangeTab: [{
+        name: "Boot Notification",
+        total: 1
+      },{
+        name: "Disconnected",
+        total: 1
+      },{
+        name: "Faulted",
+        total: 1
+      },{
+        name: "Connected",
+        total: 1
+      },{
+        name: "Charging",
+        total: 1
+      },{
+        name: "Finishing",
+        total: 1
+      }]
+    }
+  },
+  components: { Pagination },
+  created() {
+    this.getTableData()
+  },
+  methods: {
+    getTableData() {
+      this.table.loading = true;
+      error.getConnectivityPages(this.params).then(res => {
+        if (res.data) {
+          this.table.list = res.data
+          this.table.total = res.total
+        }
+      }).catch(err => {
+        this.$message({
+          type: 'error',
+          message: err
+        })
+      }).finally(() => {
+        this.table.loading = false
+      })
+    },
+    changeTab() {
+      
+    },
+    handleCommand(func, item) {
+      this[func](item)
+    },
+    viewDetail(row) {
+      this.$router.push({
+        path: "/incident/charger-connectivity/info/" + row.chargerConnectivityId
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/element-ui.scss';
+.radio-group {
+  padding-top: 5px;
+}
+.radio-group ::v-deep .el-radio-button {
+  padding: 5px;
+  .el-radio-button__inner {
+    border-radius: 4px;
+    border: 1px solid $--color-primary;
+  }
+}
+</style>

Strides-Admin/src/views/transaction/error_table.vue → Strides-Admin/src/views/incident/error_table.vue

@@ -1,32 +1,20 @@
 <template>
   <div class="app-container">
     <div class="filter-container">
-      <el-form
-        :model="filter"
-        v-bind:inline="true"
-        label-position="left"
-        label-width="100px"
-        style="width: 100%;">
-        <el-row :gutter="20">
-          <el-col :span="8">
-            <el-form-item
-              class="flex-item">
-              <el-input
-                v-model="filter.search"
-                placeholder="Search by Site ID, Station ID"
-                @keyup.enter.native="handleFilter" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="6">
-            <el-button
-              type="primary"
-              icon="el-icon-search"
-              @click="handleFilter">
-              Search
-            </el-button>
-          </el-col>
-        </el-row>
-      </el-form>
+      <div class="filter-view">
+        <div class="flex1" style="min-width: 300px; max-width: 350px;">
+          <el-input
+            v-model="filter.search"
+            placeholder="Search by Site ID, Station ID"
+            @keyup.enter.native="handleFilter" />
+        </div>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          @click="handleFilter">
+          Search
+        </el-button>
+      </div>
     </div>
     <el-table
       v-loading="listLoading"
@@ -104,7 +92,7 @@
 <script>
 import Pagination from '@/components/Pagination'
 import TableAction from '@/components/TableAction.vue'
-import { fetchErrorPages } from '@/http/api/error'
+import error from '@/http/api/error'
 
 export default {
   components: { Pagination, TableAction },
@@ -144,17 +132,20 @@ export default {
           criteria: this.filter.search,
         },
       }
-      fetchErrorPages(params)
-        .then((response) => {
-          const {success, data, total } = response
-          if (success) {
-            this.tableList = data
-            this.total = total
-          }
-        })
-        .finally(() => {
-          this.listLoading = false
+      error.fetchErrorPages(params).then((response) => {
+        const {success, data, total } = response
+        if (success) {
+          this.tableList = data
+          this.total = total
+        }
+      }).catch(err => {
+        this.$message({
+          type: 'error',
+          message: err
         })
+      }).finally(() => {
+        this.listLoading = false
+      })
     }
   }
 }

Strides-Admin/src/views/incident/info.vue

@@ -0,0 +1,192 @@
+<template>
+  <div class="card-container">
+    <div class="card-content" v-loading="loading">
+      <el-form
+        :model="form"
+        :rules="rule"
+        ref="addForm"
+        label-position="right"
+        label-width="90px">
+        <el-form-item
+          label="Site Name:">
+          <el-input
+            class="add-text"
+            v-model="form.siteName"
+            placeholder="Add text"
+            maxlength="100"
+            readonly/>
+        </el-form-item>
+        <el-form-item
+          label="Station ID:">
+          <el-input
+            class="add-text"
+            v-model="form.chargeBoxId"
+            placeholder="Add text"
+            maxlength="100"
+            readonly/>
+        </el-form-item>
+        <el-form-item
+          label="Connector: ">
+          <div class="flexcwr">
+            <el-input
+              class="add-text"
+              style="margin-bottom: 10px;"
+              v-model="form.connector"
+              placeholder="Add text"
+              maxlength="100"
+              readonly/>
+            <el-button
+              type="primary"
+              style="margin-bottom: 10px;"
+              @click="onExport">
+              Export
+            </el-button>
+          </div>
+        </el-form-item>
+      </el-form>
+      <el-table
+        class="info-table"
+        :data="tableList">
+        <el-table-column
+          label="Timestamp"
+          align="center"
+          prop="abf">
+        </el-table-column>
+        <el-table-column
+          label="Notification"
+          align="center"
+          prop="abf">
+        </el-table-column>
+        <el-table-column
+          label="Connector ID"
+          align="center"
+          prop="abf">
+        </el-table-column>
+        <el-table-column
+          label="Connector Status"
+          align="center"
+          prop="abf">
+        </el-table-column>
+        <el-table-column
+          label="Error Code"
+          align="center"
+          prop="abf">
+        </el-table-column>
+        <el-table-column
+          label="Active Transaction"
+          align="center"
+          prop="abf">
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script>
+import error from '@/http/api/error'
+export default {
+  data() {
+    return {
+      loading: false,
+      form: {
+        
+      },
+      rule: {
+        
+      },
+      tableList: []
+    }
+  },
+  created() {
+    this.getDetail();
+  },
+  methods: {
+    getDetail() {
+      
+    },
+    onExport() {
+      
+    }
+  }
+}
+</script>
+
+<style scoped="scoped" lang='scss'>
+  @import '../../styles/variables.scss';
+  
+  .card-container {
+    width: 100%;
+    padding: 20px 60px;
+    min-height: $mainAppMinHeight;
+    background-color: #F0F5FC;
+  }
+  .card-content {
+    margin: 0 8px 16px;
+    padding: 15px 30px;
+    border-radius: 6px;
+    background-color: white;
+  }
+  .section-title {
+    color: #333;
+    margin-top: 20px;
+    margin-bottom: 30px;
+    font-size: 15px;
+    user-select: none;
+    line-height: 24px;
+    font-weight: bold;
+    font-family: sans-serif;
+    text-transform: uppercase;
+  }
+  .info-table {
+    width: 100%;
+    min-height: 60vh;
+    margin-top: 20px;
+  }
+  
+  .info-table:before {
+    height: 0;
+  }
+  .add-text {
+    width: 100%;
+    max-width: 300px;
+  }
+  .add-text ::v-deep .el-textarea__inner {
+    font-family: sans-serif;
+  }
+  .hr {
+    height: 2px;
+    margin: 10px -40px;
+    background-color: #F0F5FC;
+  }
+  .hr-full {
+    height: 2px;
+    margin: 80px -80px 30px;
+    background-color: #F0F5FC;
+  }
+  .rate-list-view {
+    display: flex;
+    align-items: center;
+  }
+  .rate-text {
+    max-width: 150px;
+    padding-right: 14px;
+  }
+  .list-item-icon {
+    width: 30px;
+    height: 30px;
+    cursor: pointer;
+    margin: 0 10px 22px;
+  }
+  .buttons {
+    padding-top: 15px;
+    padding-bottom: 15px;
+  }
+  @media screen and (max-width: 500px) {
+    .card-container {
+      padding: 0px;
+    }
+    .card-content {
+      padding: 15px 30px;
+    }
+  }
+</style>

Strides-Admin/src/views/ocpp/Result.vue

@@ -37,7 +37,7 @@
         </el-row>
       </el-form>
       <el-table
-        style="width: 100%; margin-top: 20px; min-height: 65vh;"
+        class="result-table"
         :data="tableList">
         <el-table-column
           :label="item.label"
@@ -170,10 +170,10 @@
     color: #333;
     margin-top: 20px;
     margin-bottom: 30px;
-    font-size: 16px;
+    font-size: 15px;
     user-select: none;
     line-height: 24px;
-    font-weight: 500;
+    font-weight: 700;
     font-family: sans-serif;
     text-transform: uppercase;
   }
@@ -187,6 +187,16 @@
       text-decoration: none;
     }
   }
+  
+  .result-table {
+    width: 100%;
+    min-height: 65vh;
+    margin-top: 20px;
+  }
+  
+  .result-table:before {
+    height: 0;
+  }
  
   @media screen and (max-width: 500px) {
     .card-container {