diff --git a/public/index.html b/public/index.html
index 4b342e0..dda247b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,13 +4,14 @@
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
-  <link rel="icon" href="<%= BASE_URL %>logo.png">
+  <!-- <link rel="icon" href="<%= BASE_URL %>logo.png"> -->
   <title>大简云服务</title>
   <style>.first-loading-wrp{display:flex;justify-content:center;align-items:center;flex-direction:column;min-height:420px;height:100%}.first-loading-wrp>h1{font-size:128px}.first-loading-wrp .loading-wrp{padding:98px;display:flex;justify-content:center;align-items:center}.dot{animation:antRotate 1.2s infinite linear;transform:rotate(45deg);position:relative;display:inline-block;font-size:32px;width:32px;height:32px;box-sizing:border-box}.dot i{width:14px;height:14px;position:absolute;display:block;background-color:#1890ff;border-radius:100%;transform:scale(.75);transform-origin:50% 50%;opacity:.3;animation:antSpinMove 1s infinite linear alternate}.dot i:nth-child(1){top:0;left:0}.dot i:nth-child(2){top:0;right:0;-webkit-animation-delay:.4s;animation-delay:.4s}.dot i:nth-child(3){right:0;bottom:0;-webkit-animation-delay:.8s;animation-delay:.8s}.dot i:nth-child(4){bottom:0;left:0;-webkit-animation-delay:1.2s;animation-delay:1.2s}@keyframes antRotate{to{-webkit-transform:rotate(405deg);transform:rotate(405deg)}}@-webkit-keyframes antRotate{to{-webkit-transform:rotate(405deg);transform:rotate(405deg)}}@keyframes antSpinMove{to{opacity:1}}@-webkit-keyframes antSpinMove{to{opacity:1}}</style>
   <!-- require cdn assets css -->
   <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
   <link rel="stylesheet" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" />
   <% } %>
+  <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3756681_vybf8xpg13s.css">
   <!-- 1.8K仔百度收录 -->
   <meta name="baidu-site-verification" content="code-QVfBYJ5laQ" />
 </head>
diff --git a/src/api/modular/main/BookingLedger.js b/src/api/modular/main/BookingLedger.js
new file mode 100644
index 0000000..84ebc9e
--- /dev/null
+++ b/src/api/modular/main/BookingLedger.js
@@ -0,0 +1,14 @@
+import { axios } from '@/utils/request'
+
+/**
+ * 分页查询订舱主表
+ * @params PageSize
+ * @params PageNo
+ */
+export function BookingOrderPage (parameter) {
+  return axios({
+    url: '/BookingOrder/page',
+    method: 'get',
+    params: parameter
+  })
+}
diff --git a/src/router/generator-routers.js b/src/router/generator-routers.js
index 0f41e2a..111d71d 100644
--- a/src/router/generator-routers.js
+++ b/src/router/generator-routers.js
@@ -24,7 +24,8 @@ const constantRouterComponents = {
   TableDemo: () => import('@/views/tableDemo/index'),
   OrderList: () => import('@/views/Booking/OrderList/index'),
   // 默认首页
-  Console: () => import('@/views/system/index/welcome')
+  Console: () => import('@/views/system/index/welcome'),
+  BookingDetail: () => import('@/views/main/BookingLedger/detail')
 }
 
 // 前端未找到页面路由（固定不用改）、原来为 /404
@@ -151,6 +152,21 @@ const userAccount = [
   }
 ]
 
+// 订舱
+const booking = [
+  {
+    name: 'BookingDetail',
+    path: '/BookingDetail',
+    pid: 0,
+    id: 10031,
+    meta: {
+      title: '订舱详情',
+      show: false
+    },
+    component: 'BookingDetail'
+  }
+]
+
 // 根级菜单
 const rootRouter = {
   key: '',
@@ -182,6 +198,7 @@ export const generatorDynamicRouter = data => {
      * 增加静态网页
      */
     listToTree(userAccount, childrenNav, 0)
+    listToTree(booking, childrenNav, 0)
     rootRouter.children = childrenNav
     menuNav.push(rootRouter)
     const routers = generator(menuNav)
diff --git a/src/views/main/BookingLedger/detail/index.vue b/src/views/main/BookingLedger/detail/index.vue
new file mode 100644
index 0000000..e8f1997
--- /dev/null
+++ b/src/views/main/BookingLedger/detail/index.vue
@@ -0,0 +1,25 @@
+<template>
+	<div>
+		详情
+	</div>
+</template>
+  <script>
+  import { BookingOrderPage } from '@/api/modular/main/BookingLedger'
+  export default {
+    name: 'BookingLedger',
+    components: {},
+    data() {
+      return {
+        
+      }
+    },
+    created() {
+    },
+    methods: {
+
+		}
+  }
+  </script>
+  <style lang="less">
+  </style>
+  
\ No newline at end of file
diff --git a/src/views/main/BookingLedger/list/index.vue b/src/views/main/BookingLedger/list/index.vue
new file mode 100644
index 0000000..41ec2eb
--- /dev/null
+++ b/src/views/main/BookingLedger/list/index.vue
@@ -0,0 +1,455 @@
+<template>
+  <div>
+    <!-- <a-page-header
+      style="margin: -24px -24px 24px"
+      title="订舱台账"
+      :backIcon="false"
+      :ghost="false"
+      @back="() => null"
+    /> -->
+    <a-row :gutter="24">
+      <a-col :md="24" :sm="24" style="padding: 0 0 0 0">
+        <div class="nav-box">
+          <div class="nav" @click="addBooking"><i class="iconfont icon-jiahao2fill"></i>新建</div>
+          <div class="nav"><i class="iconfont icon-fuzhi"></i>复制</div>
+          <div class="nav"><i class="iconfont icon-fuzhi1"></i>复制多票</div>
+          <div class="nav"><i class="iconfont icon-bianjiwenjian"></i>批量编辑</div>
+          <div class="nav"><i class="iconfont icon-shujushangchuan-shixin"></i>批量VGM</div>
+          <div class="nav"><i class="iconfont icon-shishijifei"></i>定时订舱</div>
+          <div class="nav"><i class="iconfont icon-xiaopiaodayin"></i>小票状态</div>
+        </div>
+        <a-card :bordered="false" :bodyStyle="tstyle">
+          <div class="table-page-search-wrapper">
+            <a-form layout="inline" :form="form">
+              <a-row :gutter="48">
+                <a-col :md="6" :sm="24">
+                  <a-form-item label="提单号">
+                    <a-input
+                      placeholder="请输入提单号"
+                      v-decorator="['MBLNO', { rules: [{ required: false, message: '请输入提单号' }] }]"
+                    />
+                  </a-form-item>
+                </a-col>
+                <a-col :md="6" :sm="24">
+                  <a-form-item label="ETD">
+                    <a-range-picker
+                      format="YYYY-MM-DD"
+                      :placeholder="['开始时间', '结束时间']"
+                      v-decorator="['ETD', { rules: [{ required: false }] }]"
+                    />
+                  </a-form-item>
+                </a-col>
+                <a-col :md="6" :sm="24" v-if="advanced">
+                  <a-form-item label="航名">
+                    <a-input
+                      placeholder="请输入航名"
+                      v-decorator="['VESSEL', { rules: [{ required: false, message: '请输入航名' }] }]"
+                    />
+                  </a-form-item>
+                </a-col>
+
+                <template v-if="advanced">
+                  <a-col :md="6" :sm="24">
+                    <a-form-item label="航次">
+                      <a-input
+                        placeholder="请输入航次"
+                        v-decorator="['VOYNO', { rules: [{ required: false, message: '请输入航次' }] }]"
+                      />
+                    </a-form-item>
+                  </a-col>
+                  <a-col :md="6" :sm="24">
+                    <a-form-item label="截单状态">
+                      <a-select
+                        style="width: 160px"
+                        placeholder="请选择截单状态"
+                        v-decorator="['CLOSEDOC', { rules: [{ required: false, message: '请选择截单状态!' }] }]"
+                      >
+                        <a-select-option value="1"> 全部 </a-select-option>
+                        <a-select-option value="0"> 已截单 </a-select-option>
+                        <a-select-option value="0"> 未截单 </a-select-option>
+                      </a-select>
+                    </a-form-item>
+                  </a-col>
+                  <a-col :md="6" :sm="24">
+                    <a-form-item label="订舱状态">
+                      <a-select
+                        style="width: 160px"
+                        placeholder="请选择订舱状态"
+                        v-decorator="['FORWARDER', { rules: [{ required: false, message: '请选择订舱状态!' }] }]"
+                      >
+                        <a-select-option value="1"> 未订舱 </a-select-option>
+                        <a-select-option value="0"> 已订舱无BC </a-select-option>
+                        <a-select-option value="0"> 有BC未放舱 </a-select-option>
+                        <a-select-option value="0"> 已放舱 </a-select-option>
+                        <a-select-option value="0"> 无下货纸 </a-select-option>
+                        <a-select-option value="0"> 有下货纸 </a-select-option>
+                      </a-select>
+                    </a-form-item>
+                  </a-col>
+                  <a-col :md="6" :sm="24">
+                    <a-form-item label="VGM状态">
+                      <a-select
+                        style="width: 160px"
+                        placeholder="请选择VGM状态"
+                        v-decorator="['isDebugOutput', { rules: [{ required: false, message: '请选择VGM状态!' }] }]"
+                      >
+                        <a-select-option value="1"> 未提交 </a-select-option>
+                        <a-select-option value="0"> 提交成功 </a-select-option>
+                        <a-select-option value="0"> 成功 </a-select-option>
+                      </a-select>
+                    </a-form-item>
+                  </a-col>
+                  <a-col :md="6" :sm="24">
+                    <a-form-item>
+                      <a-checkbox v-decorator="['isDebugOutput']"> 包含退舱 </a-checkbox>
+                    </a-form-item>
+                  </a-col>
+                </template>
+                <a-col :md="(!advanced && 12) || 24" :sm="24">
+                  <span
+                    class="table-page-search-submitButtons"
+                    :style="(advanced && { float: 'right', overflow: 'hidden' }) || {}"
+                  >
+                    <a-button type="primary" @click="tableRefresh">查询</a-button>
+                    <a-button style="margin-left: 8px" @click="tableReset">重置</a-button>
+                    <a-button style="margin-left: 8px" @click="tableMoreRefresh">多提单号查询</a-button>
+                    <a @click="toggleAdvanced" style="margin-left: 8px">
+                      {{ advanced ? '收起' : '展开' }}
+                      <a-icon :type="advanced ? 'up' : 'down'" />
+                    </a>
+                  </span>
+                </a-col>
+              </a-row>
+            </a-form>
+          </div>
+        </a-card>
+        <a-card :bordered="false" :bodyStyle="tstyle">
+          <div class="table-page-search-wrapper">
+            <vxe-grid ref="xGrid" v-bind="gridOptions" @page-change="handlePageChange">
+              <template #operate="{ row }">
+                <vxe-button type="text" icon="vxe-icon-edit" @click="editColumns(row)"></vxe-button>
+              </template>
+            </vxe-grid>
+          </div>
+        </a-card>
+      </a-col>
+    </a-row>
+
+    <a-modal
+      title="新增船公司"
+      :width="200"
+      :visible="addVisible"
+      :confirmLoading="confirmLoading"
+    >
+      <a-radio-group v-model="carrierRadio" @change="onChange">
+        <a-radio :style="radioStyle" :value="1">
+          CMA
+        </a-radio>
+        <a-radio :style="radioStyle" :value="2">
+          ONE
+        </a-radio>
+        <a-radio :style="radioStyle" :value="3">
+          ESL
+        </a-radio>
+        <a-radio :style="radioStyle" :value="4">
+          MAC
+        </a-radio>
+      </a-radio-group>
+    </a-modal>
+  </div>
+</template>
+<script>
+import { BookingOrderPage } from '@/api/modular/main/BookingLedger'
+import initData from './modules/initData'
+export default {
+  name: 'BookingLedger',
+  components: {},
+  data() {
+    return {
+      tstyle: { 'padding-bottom': '0px', 'margin-bottom': '10px' },
+      // 高级搜索 展开/关闭
+      advanced: false,
+      // 查询参数
+      form: this.$form.createForm(this),
+      // 表格
+      setVisible: false,
+      showColumns: null,
+      gridOptions: {
+        border: true,
+        resizable: true,
+        showOverflow: true,
+        // height: 530,
+        loading: true,
+        stripe: true,
+        round: true,
+        autoResize: true,
+        columnConfig: { resizable: true },
+        importConfig: {},
+        exportConfig: {},
+        pagerConfig: {
+          total: 0,
+          currentPage: 1,
+          pageSize: 10,
+          pageSizes: [10, 20, 50, 100, 200, 500]
+        },
+        columns: JSON.parse(JSON.stringify(initData.columns)),
+        data: [],
+        treeConfig: {
+          transform: true,
+          rowField: 'id',
+          parentField: 'parentId'
+        }
+      },
+      addVisible: false,
+      carrierRadio: 1,
+      radioStyle: {
+        display: 'block',
+        height: '30px',
+        lineHeight: '30px'
+      }
+    }
+  },
+  created() {
+		this.showColumns = JSON.parse(JSON.stringify(initData.columns))
+		this.getList()
+	},
+  methods: {
+		init (queryParam = {}) {
+      this.gridOptions.pagerConfig = {
+        total: 0,
+        currentPage: 1,
+        pageSize: 10,
+        pageSizes: [10, 20, 50, 100, 200, 500]
+      }
+      this.gridOptions.data = []
+      this.getList(queryParam)
+    },
+
+    handlePageChange ({ currentPage, pageSize }) {
+      console.log(currentPage, pageSize)
+      this.gridOptions.pagerConfig.currentPage = currentPage
+      this.gridOptions.pagerConfig.pageSize = pageSize
+      this.getList()
+    },
+
+		// from
+    toggleAdvanced() {
+      this.advanced = !this.advanced
+    },
+    tableRefresh() {
+      const {
+        form: { validateFields }
+      } = this
+      validateFields((err, values) => {
+        if (!err) {
+          if (values.genDate) {
+            const time = values.genDate.map((item, index) => {
+              const str = this.dateFtt('YYYY-MM-DD', item._d)
+              return str
+            })
+            console.log(time)
+            values.genDate = time
+          }
+          if (values.upDate) {
+            const _time = values.upDate.map((item, index) => {
+              const str = this.dateFtt('YYYY-MM-DD', item._d)
+              return str
+            })
+            console.log(_time)
+            values.upDate = _time
+          }
+          if (values.entryDate) {
+            const _time = values.entryDate.map((item, index) => {
+              const str = this.dateFtt('YYYY-MM-DD', item._d)
+              return str
+            })
+            console.log(_time)
+            values.entryDate = _time
+          }
+          if (values.publishDate) {
+            const _time = values.publishDate.map((item, index) => {
+              const str = this.dateFtt('YYYY-MM-DD', item._d)
+              return str
+            })
+            console.log(_time)
+            values.publishDate = _time
+          }
+          console.log('== 获取到的values == ', values)
+          this.init(values)
+        }
+      })
+    },
+
+		tableMoreRefresh () {
+
+		},
+
+    dateFtt(fmt, date) {
+      const o = {
+        'Y+': date.getFullYear(),
+        'M+': date.getMonth() + 1,
+        'D+': date.getDate(),
+        'h+': date.getHours(),
+        'm+': date.getMinutes(),
+        's+': date.getSeconds(),
+      }
+      for (const k in o) {
+        if (new RegExp(`(${k})`).test(fmt)) {
+          const str = o[k] + ''
+          fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : this.padZero(str))
+        }
+      }
+      return fmt
+    },
+
+    padZero(num) {
+      return new RegExp(/^\d$/g).test(num) ? `0${num}` : num
+    },
+
+    tableReset() {
+      this.form.resetFields()
+      // this.init()
+    },
+
+		// table
+		getList (queryParam = {}) {
+			const { currentPage, pageSize } = this.gridOptions.pagerConfig
+      BookingOrderPage({
+        PageNo: currentPage,
+        PageSize: pageSize,
+				sort: '',
+				order: '', // asc - desc
+				MBLNO: '',
+				ETD_START: '',
+				ETD_END: '',
+				PORTDISCHARGE: '',
+				VESSEL: '',
+				VOYNO: '',
+				SISTATUS: '',
+				BusinessStatus: '',
+				VgmStatus: '',
+				UnBook: false
+      }).then(res => {
+        const _data = res.data.rows.map((item, index) => {
+          item.id = (currentPage - 1) * pageSize + index
+          return item
+        })
+        this.$set(this.gridOptions.pagerConfig, 'total', res.data.totalPage)
+        this.$set(this.gridOptions, 'data', JSON.parse(JSON.stringify(_data)))
+        this.$set(this.gridOptions, 'loading', false)
+				debugger
+        this.$forceUpdate()
+      }).catch(err => {
+        console.log(err)
+      })
+		},
+
+    addBooking () {
+      // this.addVisible = true
+      this.$router.push({ name: 'BookingDetail' })
+    }
+  }
+}
+</script>
+<style lang="less">
+.nav-box {
+  margin-bottom: 10px;
+  padding: 0 10px;
+
+  .nav {
+    display: inline-block;
+    margin-right: 8px;
+    cursor: pointer;
+    border: 1px solid rgba(255, 255, 255, 0);
+    padding: 0 10px;
+    height: 28px;
+    line-height: 26px;
+
+    .iconfont {
+      margin-right: 6px;
+    }
+
+    &:hover {
+      border: 1px solid rgba(255, 255, 255, 0);
+      border-radius: 4px;
+    }
+
+    &:nth-of-type(1) {
+      .iconfont {
+        color: #2095f2;
+      }
+      &:hover {
+        background: #fff;
+        box-shadow: 0 0 10px #eee;
+      }
+    }
+
+    &:nth-of-type(2) {
+      .iconfont {
+        color: #404dbd;
+      }
+      &:hover {
+        background: #fff;
+        box-shadow: 0 0 10px #eee;
+      }
+    }
+
+    &:nth-of-type(3) {
+      .iconfont {
+        color: #ff9702;
+      }
+      &:hover {
+        background: #fff;
+        box-shadow: 0 0 10px #eee;
+      }
+    }
+
+    &:nth-of-type(4) {
+      .iconfont {
+        color: #f9cf23;
+      }
+      &:hover {
+        background: #fff;
+        box-shadow: 0 0 10px #eee;
+      }
+    }
+
+    &:nth-of-type(5) {
+      .iconfont {
+        color: #ff1062;
+      }
+      &:hover {
+        background: #fff;
+        box-shadow: 0 0 10px #eee;
+      }
+    }
+
+    &:nth-of-type(6) {
+      .iconfont {
+        color: #1ebeca;
+      }
+      &:hover {
+        background: #fff;
+        box-shadow: 0 0 10px #eee;
+      }
+    }
+
+    &:nth-of-type(7) {
+      .iconfont {
+        color: #82c93d;
+      }
+      &:hover {
+        background: #fff;
+        box-shadow: 0 0 10px #eee;
+      }
+    }
+  }
+}
+
+.tab-btn {
+  margin-right: 10px;
+}
+.table-page-search-submitButtons {
+  text-align: right;
+}
+</style>
diff --git a/src/views/main/BookingLedger/list/modules/initData.js b/src/views/main/BookingLedger/list/modules/initData.js
new file mode 100644
index 0000000..9797bc0
--- /dev/null
+++ b/src/views/main/BookingLedger/list/modules/initData.js
@@ -0,0 +1,18 @@
+export default {
+	columns: [
+    { type: 'checkbox', width: 60, noDraggable: true },
+		{ field: 'YARD', title: '场站', showHeaderOverflow: true, sortable: true },
+		{ field: 'MBLNO', title: '提单号', showHeaderOverflow: true, sortable: true },
+		{ field: 'nameVoyage', title: '船名航次', showHeaderOverflow: true, sortable: true },
+		{ field: 'ETD', title: '开船日期', showHeaderOverflow: true, sortable: true },
+		{ field: 'wharf', title: '海关码头', showHeaderOverflow: true },
+		{ field: 'bookingStatus', title: '定舱状态', showHeaderOverflow: true },
+		{ field: 'VGM', title: 'VGM', showHeaderOverflow: true },
+		{ field: 'billStatus', title: '提单状态', showHeaderOverflow: true },
+		{ field: 'PORTDISCHARGE', title: '卸货港', showHeaderOverflow: true, sortable: true },
+		{ field: 'createdBy', title: '创建人', showHeaderOverflow: true, sortable: true },
+		{ field: 'createdTime', title: '创建时间', showHeaderOverflow: true, sortable: true },
+		{ field: 'boxType', title: '箱型箱量', showHeaderOverflow: true, sortable: true },
+		{ title: '操作', width: 80, noDraggable: true, slots: { default: 'operate' }, fixed: 'right' }
+	]
+}