diff --git a/src/components/SearchForm/index.vue b/src/components/SearchForm/index.vue
index a46055b..9ffbb14 100644
--- a/src/components/SearchForm/index.vue
+++ b/src/components/SearchForm/index.vue
@@ -2,7 +2,7 @@
   <div class="search-form">
     <a-form-model ref="form" :model="formModel" v-bind="$attrs" @keyup.enter.native="onSearch">
       <a-row :gutter="20">
-        <a-col v-for="(item, index) in items" :key="index" :span="item.span || 6">
+        <a-col class="search-form-item" v-for="(item, index) in items" :key="index" :span="item.span || 6">
           <a-form-model-item :label="item.label" :prop="item.name" :labelCol="item.labelCol">
             <component :is="item.type" v-bind="item.props" v-model="formModel[item.name]" v-on="item.on"></component>
           </a-form-model-item>
@@ -56,11 +56,14 @@ export default {
 
 <style lang="less" scoped>
 .search-form {
-  height: 50px;
   padding: 10px;
+  padding-bottom: 0;
   border-top: 1px solid rgba(12, 235, 201, 0.3);
   border-bottom: 1px solid rgba(12, 235, 201, 0.3);
   margin-bottom: 18px;
+  &-item {
+    margin-bottom: 10px;
+  }
 }
 ::v-deep .ant-form-item {
   display: flex;
diff --git a/src/main.js b/src/main.js
index acb7379..97c4542 100644
--- a/src/main.js
+++ b/src/main.js
@@ -51,6 +51,7 @@ import './style.less'
 //表单验证
 import { rules } from '@/utils/rules'
 
+import SearchForm from '@/components/SearchForm'
 import CustomSelect from '@/components/CustomSelect'
 import CustomTable from '@/components/CustomTable'
 
@@ -67,6 +68,7 @@ Vue.use(preview)
 Vue.use(vueBus);
 Vue.use(JeecgComponents);
 Vue.use(VueAreaLinkage);
+Vue.component('search-form', SearchForm)
 Vue.component('custom-select', CustomSelect)
 Vue.component('custom-table', CustomTable)
 
diff --git a/src/style.less b/src/style.less
index 695ecfc..9577dc8 100644
--- a/src/style.less
+++ b/src/style.less
@@ -90,6 +90,10 @@ body {
         color: #5b9cba;
       }
     }
+    &-children {
+      display: inline-block;
+      width: 100%;
+    }
   }
   &-horizontal {
     @{antFormSelector} {
@@ -100,6 +104,62 @@ body {
   }
 }
 
+// 日历
+.ant-calendar {
+  border-color: @formInputBorderColor;
+  border-radius: 0;
+
+  &,
+  &-time-picker-inner {
+    background-color: @modalBg;
+  }
+
+  &-picker {
+    width: 100%;
+    &-container {
+      padding-top: 2px;
+    }
+    &-clear,
+    &-icon {
+      color: #01b6e3 !important;
+      background-color: #03353f !important;
+    }
+  }
+
+  &-input {
+    background-color: transparent;
+    &-wrap {
+      border-color: @formInputBorderColor;
+      height: 32px;
+    }
+  }
+
+  &-header,
+  &-footer {
+    border-color: @formInputBgColor;
+  }
+
+  &-year-select,
+  &-month-select,
+  &-day-select {
+    color: #fff !important;
+  }
+
+  &-time-picker {
+    &-select {
+      li {
+        &:hover {
+          background-color: @primary-color !important;
+        }
+      }
+      &-option-selected {
+        background-color: @primary-color !important;
+        color: #fff !important;
+      }
+    }
+  }
+}
+
 @formInputBgColor: #03353f;
 @formInputBorderColor: #0b8c82;
 // 输入框样式
@@ -123,6 +183,25 @@ body {
   }
 }
 
+@checkboxSelector: .ant-checkbox;
+@{checkboxSelector} {
+  &-inner {
+    background-color: #03353f;
+    border-radius: 0;
+    border-color: #0a544e;
+  }
+  &-checked {
+    @{checkboxSelector} {
+      &-inner {
+        background-color: #00e9fe;
+        &::after {
+          border-color: #000 !important;
+        }
+      }
+    }
+  }
+}
+
 // 下拉框样式
 .ant-select {
   color: #fff !important;
@@ -458,6 +537,12 @@ body {
   }
 }
 
+.ant-popover {
+  &-inner {
+    background-color: @modalBg;
+  }
+}
+
 // 滚动条
 ::-webkit-scrollbar {
   width: 6px;
diff --git a/src/views/system/DataBase.vue b/src/views/system/DataBase.vue
index 51cf4bf..d51d8cb 100644
--- a/src/views/system/DataBase.vue
+++ b/src/views/system/DataBase.vue
@@ -1,15 +1,177 @@
 <template>
   <div>
-    DATABASE
+    <search-form :items="formItems" v-model="queryParam" @search="searchQuery">
+      <div style="float: right" class="btn-group" slot="additional"></div>
+    </search-form>
+    <custom-table
+      size="middle"
+      rowKey="id"
+      :columns="columns"
+      :list="dataSource"
+      :pagination="ipagination"
+      :loading="loading"
+      @change="handleTableChange"
+      :selectedRowKeys.sync="selectedRowKeys"
+    >
+      <template slot="index" slot-scope="{ index }">
+        {{ index + 1 }}
+      </template>
+    </custom-table>
   </div>
 </template>
 
 <script>
-export default {
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
 
+const formItems = [
+  {
+    label: 'SampleID',
+    type: 'a-input',
+    name: 'sampleID',
+    span: 4
+  },
+  {
+    label: 'Station',
+    type: 'custom-select',
+    name: 'station',
+    props: {
+      options: [
+        {
+          label: 'ALL',
+          value: ''
+        }
+      ]
+    },
+    span: 4
+  },
+  {
+    label: 'Detector',
+    type: 'custom-select',
+    name: 'detector',
+    props: {
+      options: [
+        {
+          label: 'ALL',
+          value: ''
+        }
+      ]
+    },
+    span: 4
+  },
+  {
+    label: 'From',
+    type: 'a-date-picker',
+    name: 'from',
+    props: {
+      showTime: { format: 'HH:mm' },
+      format: 'YYYY-MM-DD HH:mm'
+    }
+  },
+  {
+    label: 'To',
+    type: 'a-date-picker',
+    name: 'to',
+    props: {
+      showTime: { format: 'HH:mm' },
+      format: 'YYYY-MM-DD HH:mm'
+    }
+  },
+  {
+    label: '',
+    type: 'a-checkbox-group',
+    props: {
+      options: [
+        { label: 'Collect Stop', value: 'collectStop' },
+        { label: 'Acq.Start', value: 'acqDotStart' },
+        { label: 'SampleData', value: 'sampleData' },
+        { label: 'AutoResults', value: 'autoResults' },
+        { label: 'Reviewed Results', value: 'reviewedResults' }
+      ]
+    }
+  }
+]
+
+const columns = [
+  {
+    title: 'NO',
+    align: 'center',
+    width: 100,
+    scopedSlots: {
+      customRender: 'index'
+    }
+  },
+  {
+    title: 'SITE DET CODE',
+    align: 'center',
+    dataIndex: 'siteDetCode',
+    width: 100
+  },
+  {
+    title: 'STATION ID',
+    align: 'center',
+    width: 100,
+    dataIndex: 'stationId'
+  },
+  {
+    title: 'STATION',
+    align: 'center',
+    width: 100,
+    dataIndex: 'station'
+  },
+  {
+    title: 'DETECTOR',
+    align: 'center',
+    width: 100,
+    dataIndex: 'detector'
+  },
+  {
+    title: 'SAMPLE TYPE',
+    align: 'center',
+    width: 100,
+    dataIndex: 'sampleType'
+  },
+  {
+    title: 'DATA TYPE',
+    align: 'center',
+    width: 100,
+    dataIndex: 'dataType'
+  },
+  {
+    title: 'GEOMETRY',
+    align: 'center',
+    width: 100,
+    dataIndex: 'geometry'
+  },
+  {
+    title: 'QUALIFIE',
+    align: 'center',
+    width: 100,
+    dataIndex: 'qualifie'
+  },
+  {
+    title: 'TRANSMIT DTG',
+    align: 'center',
+    width: 100,
+    dataIndex: 'transmitDtg'
+  }
+]
+
+export default {
+  mixins: [JeecgListMixin],
+  data() {
+    this.formItems = formItems
+    this.columns = columns
+    return {
+      queryParam: {
+        station: '',
+        detector: ''
+      },
+      url: {
+        list: '/sys/user/list'
+      }
+    }
+  }
 }
 </script>
 
-<style>
-
-</style>
\ No newline at end of file
+<style lang="less" scoped></style>
diff --git a/src/views/system/UserList.vue b/src/views/system/UserList.vue
index d02e79b..db6e4f1 100644
--- a/src/views/system/UserList.vue
+++ b/src/views/system/UserList.vue
@@ -74,7 +74,6 @@
 
 <script>
 import { JeecgListMixin } from '@/mixins/JeecgListMixin'
-import SearchForm from '@/components/SearchForm'
 import CustomModal from '@/components/CustomModal'
 import { queryall, addUser, editUser, changePassword } from '@/api/api'
 import { cloneDeep } from 'lodash'
@@ -84,7 +83,6 @@ export default {
   name: 'UserList',
   mixins: [JeecgListMixin, FormMixin],
   components: {
-    SearchForm,
     CustomModal
   },
   data() {