diff --git a/src/views/gatemachine/primarygatemanager/gaterecord/components/list.vue b/src/views/gatemachine/primarygatemanager/gaterecord/components/list.vue
new file mode 100644
index 0000000..8e00242
--- /dev/null
+++ b/src/views/gatemachine/primarygatemanager/gaterecord/components/list.vue
@@ -0,0 +1,156 @@
+<template>
+  <div class="app-container">
+    <div class="rightCont">
+      
+      <div>
+        <el-table
+          v-loading="listLoading"
+          ref="multipleTable"
+          :data="varList"
+          :row-key="getRowKey"
+          border
+          tooltip-effect="dark"
+          :cell-style="getPlateColor"
+          style="width: 100%">
+          <el-table-column type="index" label="序号" width="55" align="center"/>
+          <el-table-column prop="vehicle_plate_number" label="车牌号" width="100px" align="center"/>
+          <el-table-column prop="vehicle_category_name" label="车辆类型" width="150px" align="center"/>
+          <el-table-column prop="vehicle_contact_name" label="车辆联系人" width="150ox" align="center"/>
+          <el-table-column prop="vehicle_contact_phone_number" label="联系人手机号" width="120px" align="center"/>
+          <el-table-column prop="vehicle_arrival_barrier" label="入港闸口"  align="center"/>
+          <el-table-column prop="vehicle_arrival_time" label="入港时间" align="center"/>
+          <el-table-column prop="vehicle_departure_barrier" label="离港闸口"  align="center"/>
+          <el-table-column prop="vehicle_departure_time" label="离港时间"  align="center"/>
+          <el-table-column prop="vehicle_arrival_status" label="车辆在港状态" width="100px" align="center"/>
+          <el-table-column prop="vehicle_filing_info_recording_org" label="车辆备案单位"  align="center"/>
+          <el-table-column prop="vehicle_filing_method" label="车辆备案方式" width="100px" align="center"/>
+        </el-table>
+        <div class="page-btn-group">
+          <pagination
+            :total="total"
+            :page.sync="listQuery.page"
+            :limit.sync="listQuery.limit"
+            @pagination="getList"/>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Pagination from '@/components/Pagination'
+import { requestFN } from '@/utils/request'
+import waves from '@/directive/waves' // waves directive
+
+export default {
+  components: { Pagination },
+  directives: { waves },
+  data() {
+    return {
+      listQuery: {
+        page: 1,
+        limit: 20
+      },
+      total: 0,
+      KEYWORDS: '',
+      varList: [],
+      pd: [],
+    }
+  },
+  created() {
+    this.getList()
+    this.getDict()
+  },
+  methods: {
+    getPlateColor(row , column , rowIndex , columnIndex){
+      if(row.column.label == '车牌号'){
+        switch(row.row.vehicle_plate_color){
+          case '蓝牌':
+            return 'background-color: blue;color: white'
+            break
+          case '黄牌':
+            return 'background-color: yellow;color: black'
+            break
+          case '新能源':
+            return 'background-color: green;color: black'
+            break
+          case '白牌':
+            return 'background-color: gray;color: black'
+            break
+          case '黑牌':
+            return 'background-color: black;color: white'
+            break
+          case '其他':
+            return 'background-color: white;color: black'
+            break
+          default:
+            return 'background-color: white;color: black'
+        }
+      }
+    },
+    getRowKey(row) {
+      return row.id_sequence
+    },
+    
+    getQuery() {
+      this.getList()
+    },
+    // 获取列表
+    getList() {
+      this.listLoading = true
+      this.varList = []
+      requestFN(
+        '/mkmjGateLog/page?showCount=' + this.listQuery.limit + '&currentPage=' + this.listQuery.page,
+        {
+
+        }
+      ).then((data) => {
+        this.listLoading = false
+        this.varList = data.varList
+        this.total = data.page.totalResult
+        this.hasButton()
+      }).catch((e) => {
+        this.listLoading = false
+      })
+    },
+
+    getDict() {
+      requestFN(
+        '/corpinfo/getSelectByCorpInfo',
+        {
+        }
+      ).then((data) => {
+        this.corpList = JSON.parse(data.corpInfoJson)
+      }).catch((e) => {
+      })
+      requestFN(
+        'dictionaries/getLevels',
+        {
+          DICTIONARIES_ID: '6bba977985f6427e9d0b52afe8884d1a'
+        }
+      ).then((data) => {
+        this.typeData = data.list
+      })
+        .catch((e) => {
+          this.listLoading = false
+        })
+    },
+  }
+}
+</script>
+
+<style scoped>
+.returnBtn {
+  float: right;
+}
+
+.app-container {
+  display: flex; /**/
+  align-items: baseline;
+}
+
+.rightCont {
+  width: 100%
+}
+
+</style>
diff --git a/src/views/gatemachine/primarygatemanager/gaterecord/index.vue b/src/views/gatemachine/primarygatemanager/gaterecord/index.vue
new file mode 100644
index 0000000..fd4ed05
--- /dev/null
+++ b/src/views/gatemachine/primarygatemanager/gaterecord/index.vue
@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <component :is="activeName" />
+  </div>
+</template>
+
+<script>
+import List from './components/list.vue'
+export default {
+  components: {
+    List: List,
+  },
+  data() {
+    return {
+      activeName: 'List',
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
+