diff --git a/.env.development b/.env.development
index 8f5856d..6d08777 100644
--- a/.env.development
+++ b/.env.development
@@ -4,6 +4,9 @@ ENV = 'development'
 # base api
 VUE_APP_BASE_API = '/dev-api'
 
+# no mock api
+VUE_APP_API = '/dev-api/api'
+
 # vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
 # to control whether the babel-plugin-dynamic-import-node plugin is enabled.
 # It only does one thing by converting all import() to require().
diff --git a/src/api/datax-job.js b/src/api/datax-job.js
new file mode 100644
index 0000000..fa680b0
--- /dev/null
+++ b/src/api/datax-job.js
@@ -0,0 +1,19 @@
+import request from '@/utils/request'
+
+// 任务管理
+
+export function runJob(data) {
+  return request({
+    url: '/api/runJob',
+    method: 'post',
+    data
+  })
+}
+
+export function runJobLog(data) {
+  return request({
+    url: '/api/runJobLog',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/api/datax-jobConfig.js b/src/api/datax-jobConfig.js
new file mode 100644
index 0000000..11f5d9a
--- /dev/null
+++ b/src/api/datax-jobConfig.js
@@ -0,0 +1,50 @@
+import request from '@/utils/request'
+
+// 抽取任务
+
+export function paged(params) {
+  return request({
+    url: '/api/jobConfig',
+    method: 'get',
+    params
+  })
+}
+
+export function fetch(params) {
+  return request({
+    url: '/api/jobConfig/' + params,
+    method: 'get'
+  })
+}
+
+export function updated(data) {
+  return request({
+    url: '/api/jobConfig/',
+    method: 'put',
+    data
+  })
+}
+
+export function created(data) {
+  return request({
+    url: '/api/jobConfig/',
+    method: 'post',
+    data
+  })
+}
+
+export function deleted(data) {
+  return request({
+    url: '/api/jobConfig/',
+    method: 'delete',
+    params: data
+  })
+}
+
+export function viewJobLog(params) {
+  return request({
+    url: '/api/viewJobLog',
+    method: 'get',
+    params
+  })
+}
diff --git a/src/api/datax-plugin.js b/src/api/datax-plugin.js
new file mode 100644
index 0000000..c538215
--- /dev/null
+++ b/src/api/datax-plugin.js
@@ -0,0 +1,42 @@
+import request from '@/utils/request'
+
+// datax插件api
+
+export function getList(params) {
+  return request({
+    url: '/api/dataxPlugin',
+    method: 'get',
+    params
+  })
+}
+
+export function fetchPlugin(params) {
+  return request({
+    url: '/api/dataxPlugin/' + params,
+    method: 'get'
+  })
+}
+
+export function updatePlugin(data) {
+  return request({
+    url: '/api/dataxPlugin/',
+    method: 'put',
+    data
+  })
+}
+
+export function createPlugin(data) {
+  return request({
+    url: '/api/dataxPlugin/',
+    method: 'post',
+    data
+  })
+}
+
+export function deletePlugin(data) {
+  return request({
+    url: '/api/dataxPlugin/',
+    method: 'delete',
+    params: data
+  })
+}
diff --git a/src/router/index.js b/src/router/index.js
index c923da9..1b1b222 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -130,6 +130,33 @@ export const asyncRoutes = [
       }
     ]
   },
+  {
+    path: '/datax',
+    component: Layout,
+    redirect: '/datax/job',
+    name: 'Example',
+    meta: { title: 'datax', icon: 'example' },
+    children: [
+      {
+        path: 'job',
+        name: '同步任务',
+        component: () => import('@/views/datax/job/index'),
+        meta: { title: '同步任务', icon: 'table', affix: true }
+      },
+      {
+        path: 'plugin',
+        name: 'DataxPlugin',
+        component: () => import('@/views/datax/plugin/index'),
+        meta: { title: '插件查看', icon: 'table' }
+      },
+      {
+        path: 'jobConfig',
+        name: 'jobConfig',
+        component: () => import('@/views/datax/jobConfig/index'),
+        meta: { title: '作业配置', icon: 'table' }
+      }
+    ]
+  },
   toolRouter,
   // 404 page must be placed at the end !!!
   { path: '*', redirect: '/404', hidden: true }
diff --git a/src/utils/request.js b/src/utils/request.js
index 2fb95ac..9e6501e 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -44,9 +44,8 @@ service.interceptors.response.use(
    */
   response => {
     const res = response.data
-
     // if the custom code is not 20000, it is judged as an error.
-    if (res.code !== 20000) {
+    if (res.code !== 20000 && res.code !== 0) {
       Message({
         message: res.message || 'Error',
         type: 'error',
@@ -68,7 +67,16 @@ service.interceptors.response.use(
       }
       return Promise.reject(new Error(res.message || 'Error'))
     } else {
-      return res
+      const { data } = response
+      const { code } = data
+      // 状态码为0表示api成功
+      if (code === 0) {
+        const { data: res } = data
+        return res
+      } else {
+        // 返回数据
+        return res
+      }
     }
   },
   error => {
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 1720ea8..058f46c 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,31 +1,11 @@
 <template>
-  <div class="dashboard-container">
-    <component :is="currentRole" />
+  <div class="app-container">
+    nothing here
   </div>
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
-import adminDashboard from './admin'
-import editorDashboard from './editor'
-
 export default {
-  name: 'Dashboard',
-  components: { adminDashboard, editorDashboard },
-  data() {
-    return {
-      currentRole: 'adminDashboard'
-    }
-  },
-  computed: {
-    ...mapGetters([
-      'roles'
-    ])
-  },
-  created() {
-    if (!this.roles.includes('admin')) {
-      this.currentRole = 'editorDashboard'
-    }
-  }
+  name: 'Dashboard'
 }
 </script>
diff --git a/src/views/dashboard/index_copy.vue b/src/views/dashboard/index_copy.vue
new file mode 100644
index 0000000..1720ea8
--- /dev/null
+++ b/src/views/dashboard/index_copy.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="dashboard-container">
+    <component :is="currentRole" />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import adminDashboard from './admin'
+import editorDashboard from './editor'
+
+export default {
+  name: 'Dashboard',
+  components: { adminDashboard, editorDashboard },
+  data() {
+    return {
+      currentRole: 'adminDashboard'
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'roles'
+    ])
+  },
+  created() {
+    if (!this.roles.includes('admin')) {
+      this.currentRole = 'editorDashboard'
+    }
+  }
+}
+</script>
diff --git a/src/views/datax/job/index.vue b/src/views/datax/job/index.vue
new file mode 100644
index 0000000..34b4ed0
--- /dev/null
+++ b/src/views/datax/job/index.vue
@@ -0,0 +1,189 @@
+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <el-button class="filter-item" type="primary" icon="el-icon-refresh" @click="handleRunJob">
+        启动任务
+      </el-button>
+      <el-select v-model="jobId" placeholder="Type" class="filter-item" style="width: 200px" clearable @change="handleJobChange" @clear="handleJobClear">
+        <el-option v-for="item in pluginList" :key="item.id" :label="item.name" :value="item.id" />
+      </el-select>
+      <el-button class="filter-item" type="primary" icon="el-icon-refresh" @click="getJobList">
+        刷新任务
+      </el-button>
+      <el-button class="filter-item" type="primary" icon="el-icon-trash" @click="templateJson={}">
+        清空json
+      </el-button>
+      <el-button v-show="jobId" class="filter-item" type="primary" icon="el-icon-document" @click="handleViewJobLog">
+        查看日志
+      </el-button>
+    </div>
+
+    <div class="editor-container">
+      <json-editor ref="jsonEditor" v-model="templateJson" />
+    </div>
+
+    <el-dialog title="日志查看" :visible.sync="logShow">
+      <div class="log-container">
+        <pre :loading="logLoading" v-text="logContent" />
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="loadLog()">
+          刷新日志
+        </el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { runJob, runJobLog } from '@/api/datax-job'
+import { paged as jobConfigPaged, viewJobLog } from '@/api/datax-jobConfig'
+import JsonEditor from '@/components/JsonEditor'
+
+export default {
+  components: { JsonEditor },
+  data() {
+    return {
+      templateJson: {},
+      // 查询参数
+      listQuery: {
+        current: 1,
+        size: 200
+      },
+      pluginList: [1, 2],
+      jobId: undefined,
+      // 日志查询参数
+      jobLogQuery: {
+        id: undefined,
+        fromLineNum: 0
+      },
+      // 日志内容
+      logContent: undefined,
+      // 显示日志
+      logShow: false,
+      // 日志显示加载中效果
+      logLoading: false
+    }
+  },
+  created() {
+    // 获取所有模板，取200条，差不多了吧~
+    // todo 先全部加载出来, 后面改成分组
+    this.getJobList()
+  },
+  methods: {
+    // 获取模板
+    getJobList() {
+      jobConfigPaged(this.listQuery).then(response => {
+        console.log(response)
+        this.jobId = undefined
+        this.jobLogQuery.fromLineNum = 0
+        this.logContent = undefined
+        const { records } = response
+        this.pluginList = records
+      })
+    },
+    // 启动任务
+    handleRunJob() {
+      const obj = {
+        jobConfigId: this.jobId,
+        jobJson: this.templateJson
+      }
+      // 根据是否有 jobId 调不同的接口
+      if (this.jobId === undefined) {
+        runJob(this.templateJson).then(response => {
+          this.$notify({
+            title: 'Success',
+            message: '启动成功',
+            type: 'success',
+            duration: 2000
+          })
+          // 显示日志
+          this.handleViewJobLog()
+        })
+      } else {
+        runJobLog(obj).then(response => {
+          this.$notify({
+            title: 'Success',
+            message: '启动成功',
+            type: 'success',
+            duration: 2000
+          })
+        })
+      }
+    },
+    // 查看日志
+    handleViewJobLog() {
+      if (this.jobId === undefined) {
+        return
+      }
+      this.jobLogQuery.id = this.jobId
+      if (this.logShow === false) {
+        this.logShow = true
+      }
+      this.loadLog()
+    },
+    // 加载日志
+    loadLog() {
+      this.logLoading = true
+      viewJobLog(this.jobLogQuery).then(response => {
+        // console.log(response)
+        // 判断是否是 '\n'，如果是表示显示完成，不重新加载
+        if (response.logContent === '\n') {
+          // this.jobLogQuery.fromLineNum = response.toLineNum - 20;
+          // 重新加载
+          // setTimeout(() => {
+          //   this.loadLog()
+          // }, 2000);
+        } else {
+          // 后续改进
+          // this.jobLogQuery.fromLineNum = response.toLineNum
+          this.logContent = response.logContent
+        }
+        this.logLoading = false
+      })
+    },
+    // 选择任务事件
+    handleJobChange(e) {
+      this.jobId = e
+      this.jobLogQuery.fromLineNum = 0
+      for (const v of this.pluginList) {
+        if (v.id === this.jobId) {
+          this.templateJson = JSON.parse(v.configJson)
+          break
+        }
+      }
+    },
+    // 清空选项事件
+    handleJobClear() {
+      this.jobId = undefined
+      this.logShow = false
+      this.logContent = undefined
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.editor-container{
+  position: relative;
+  height: 100%;
+}
+.log-container{
+  margin-bottom: 20px;
+  background: #f5f5f5;
+  width: 100%;
+  height: 500px;
+  overflow: scroll;
+  pre {
+    display: block;
+    padding: 10px;
+    margin: 0 0 10.5px;
+    word-break: break-all;
+    word-wrap: break-word;
+    color: #334851;
+    background-color: #f5f5f5;
+    // border: 1px solid #ccd1d3;
+    border-radius: 1px;
+  }
+}
+</style>
diff --git a/src/views/datax/jobConfig/index.vue b/src/views/datax/jobConfig/index.vue
new file mode 100644
index 0000000..90d1a7c
--- /dev/null
+++ b/src/views/datax/jobConfig/index.vue
@@ -0,0 +1,225 @@
+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <el-input v-model="listQuery.name" placeholder="作业名" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
+      <el-input v-model="listQuery.jobGroup" placeholder="分组" style="width: 200px;" class="filter-item" />
+      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="fetchData">
+        Search
+      </el-button>
+      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
+        Add
+      </el-button>
+      <!-- <el-checkbox v-model="showReviewer" class="filter-item" style="margin-left:15px;" @change="tableKey=tableKey+1">
+        reviewer
+      </el-checkbox> -->
+    </div>
+    <el-table
+      v-loading="listLoading"
+      :data="list"
+      element-loading-text="Loading"
+      border
+      fit
+      highlight-current-row
+    >
+      <el-table-column align="center" label="序号" width="95">
+        <template slot-scope="scope">{{ scope.$index }}</template>
+      </el-table-column>
+      <el-table-column label="作业名" width="110" align="center">
+        <template slot-scope="scope">{{ scope.row.name }}</template>
+      </el-table-column>
+      <el-table-column label="分组" width="110" align="center">
+        <template slot-scope="scope">{{ scope.row.jobGroup }}</template>
+      </el-table-column>
+      <el-table-column label="configJson" width="110" align="center" :show-overflow-tooltip="true">
+        <template slot-scope="scope">{{ scope.row.configJson }}</template>
+      </el-table-column>
+      <el-table-column label="Actions" align="center" width="230" class-name="small-padding fixed-width">
+        <template slot-scope="{row}">
+          <el-button type="primary" size="mini" @click="handleUpdate(row)">
+            编辑
+          </el-button>
+          <el-button v-if="row.status!='deleted'" size="mini" type="danger" @click="handleDelete(row)">
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination v-show="total>0" :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size" @pagination="fetchData" />
+
+    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
+      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
+        <el-form-item label="分组" prop="jobGroup">
+          <el-input v-model="temp.jobGroup" placeholder="分组" />
+        </el-form-item>
+        <el-form-item label="作业名" prop="name">
+          <el-input v-model="temp.name" placeholder="作业名" />
+        </el-form-item>
+      </el-form>
+
+      <json-editor ref="jsonEditor" v-model="configJson" />
+
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">
+          Cancel
+        </el-button>
+        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
+          Confirm
+        </el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import * as Api from '@/api/datax-jobConfig'
+import waves from '@/directive/waves' // waves directive
+import Pagination from '@/components/Pagination' // secondary package based on el-pagination
+import JsonEditor from '@/components/JsonEditor'
+
+export default {
+  name: 'DataxJobLog',
+  components: { Pagination, JsonEditor },
+  directives: { waves },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'gray',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      list: null,
+      listLoading: true,
+      total: 0,
+      listQuery: {
+        current: 1,
+        size: 10,
+        name: undefined,
+        jobGroup: undefined
+      },
+      editJsonVisible: false,
+      pluginData: [],
+      dialogFormVisible: false,
+      dialogStatus: '',
+      textMap: {
+        update: 'Edit',
+        create: 'Create'
+      },
+      rules: {
+        name: [{ required: true, message: 'name is required', trigger: 'blur' }],
+        jobGroup: [{ required: true, message: 'jobGroup is required', trigger: 'blur' }]
+      },
+      temp: {
+        id: undefined,
+        name: undefined,
+        jobGroup: undefined,
+        configJson: undefined
+      },
+      configJson: ''
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.listLoading = true
+      Api.paged(this.listQuery).then(response => {
+        const { records } = response
+        const { total } = response
+        this.total = total
+        this.list = records
+        this.listLoading = false
+      })
+    },
+    resetTemp() {
+      this.temp = {
+        id: undefined,
+        name: undefined,
+        jobGroup: undefined,
+        configJson: undefined
+      }
+      this.configJson = {}
+    },
+    handleCreate() {
+      this.resetTemp()
+      this.dialogStatus = 'create'
+      this.dialogFormVisible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].clearValidate()
+      })
+    },
+    createData() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          this.temp.configJson = this.configJson
+          Api.created(this.temp).then(() => {
+            this.fetchData()
+            this.dialogFormVisible = false
+            this.$notify({
+              title: 'Success',
+              message: 'Created Successfully',
+              type: 'success',
+              duration: 2000
+            })
+          })
+        }
+      })
+    },
+    handleUpdate(row) {
+      this.temp = Object.assign({}, row) // copy obj
+      this.configJson = JSON.parse(row.configJson)
+      this.dialogStatus = 'update'
+      this.dialogFormVisible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].clearValidate()
+      })
+    },
+    updateData() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const tempData = Object.assign({}, this.temp)
+          tempData.configJson = this.configJson
+          Api.updated(tempData).then(() => {
+            this.fetchData()
+            this.dialogFormVisible = false
+            this.$notify({
+              title: 'Success',
+              message: 'Update Successfully',
+              type: 'success',
+              duration: 2000
+            })
+          })
+        }
+      })
+    },
+    handleDelete(row) {
+      console.log('删除')
+      const idList = []
+      idList.push(row.id)
+      // 拼成 idList=xx
+      // 多个比较麻烦，这里不处理
+      Api.deleted({ idList: row.id }).then(response => {
+        this.fetchData()
+        this.$notify({
+          title: 'Success',
+          message: 'Delete Successfully',
+          type: 'success',
+          duration: 2000
+        })
+      })
+      // const index = this.list.indexOf(row)
+    },
+    handleFetchPv(id) {
+      Api.fetch(id).then(response => {
+        this.pluginData = response
+        this.dialogPvVisible = true
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/datax/jobLog/index.vue b/src/views/datax/jobLog/index.vue
new file mode 100644
index 0000000..5e75c32
--- /dev/null
+++ b/src/views/datax/jobLog/index.vue
@@ -0,0 +1,254 @@
+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <el-input v-model="listQuery.pluginName" placeholder="插件名" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
+      <el-select v-model="listQuery.pluginType" placeholder="插件类型" clearable style="width: 120px" class="filter-item">
+        <el-option v-for="item in pluginTypeOptions" :key="item" :label="item" :value="item" />
+      </el-select>
+      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="fetchData">
+        Search
+      </el-button>
+      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
+        Add
+      </el-button>
+      <!-- <el-checkbox v-model="showReviewer" class="filter-item" style="margin-left:15px;" @change="tableKey=tableKey+1">
+        reviewer
+      </el-checkbox> -->
+    </div>
+    <el-table
+      v-loading="listLoading"
+      :data="list"
+      element-loading-text="Loading"
+      border
+      fit
+      highlight-current-row
+    >
+      <el-table-column align="center" label="序号" width="95">
+        <template slot-scope="scope">{{ scope.$index }}</template>
+      </el-table-column>
+      <el-table-column label="pluginType" width="110" align="center">
+        <template slot-scope="scope">{{ scope.row.pluginType }}</template>
+      </el-table-column>
+      <el-table-column label="pluginName" width="110" align="center">
+        <template slot-scope="scope">
+          <span>{{ scope.row.pluginName }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="templateJson" width="150" align="center">
+        <template slot-scope="scope">{{ scope.row.templateJson }}</template>
+      </el-table-column>
+      <el-table-column label="comments" width="110" align="center">
+        <template slot-scope="scope">{{ scope.row.comments }}</template>
+      </el-table-column>
+      <el-table-column label="Actions" align="center" width="230" class-name="small-padding fixed-width">
+        <template slot-scope="{row}">
+          <el-button type="primary" size="mini" @click="handleUpdate(row)">
+            Edit
+          </el-button>
+          <el-button v-if="row.status!='deleted'" size="mini" type="danger" @click="handleDelete(row)">
+            Delete
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination v-show="total>0" :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size" @pagination="fetchData" />
+
+    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
+      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
+        <el-form-item label="类型" prop="pluginType">
+          <el-select v-model="temp.pluginType" class="filter-item" placeholder="插件类型">
+            <el-option v-for="item in pluginTypeOptions" :key="item.key" :label="item" :value="item" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="名称" prop="pluginName">
+          <el-input v-model="temp.pluginName" placeholder="插件名称" />
+        </el-form-item>
+        <el-form-item label="模板">
+          <el-input v-model="temp.templateJson" :autosize="{ minRows: 2, maxRows: 8}" type="textarea" placeholder="Please input" />
+        </el-form-item>
+        <el-form-item label="注释">
+          <el-input v-model="temp.comments" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="Please input" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">
+          Cancel
+        </el-button>
+        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
+          Confirm
+        </el-button>
+      </div>
+    </el-dialog>
+    <el-dialog :visible.sync="dialogPluginVisible" title="Reading statistics">
+      <el-table :data="pluginData" border fit highlight-current-row style="width: 100%">
+        <el-table-column prop="key" label="Channel" />
+        <el-table-column prop="pv" label="Pv" />
+      </el-table>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="dialogPvVisible = false">Confirm</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import Api from "@/api/datax-jobConfig";
+import waves from '@/directive/waves' // waves directive
+import { parseTime } from '@/utils'
+import Pagination from '@/components/Pagination' // secondary package based on el-pagination
+
+export default {
+  name: "DataxJobLog",
+  components: { Pagination },
+  directives: { waves },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: "success",
+        draft: "gray",
+        deleted: "danger"
+      };
+      return statusMap[status];
+    }
+  },
+  data() {
+    return {
+      list: null,
+      listLoading: true,
+      total: 0,
+      listQuery: {
+        current: 1,
+        size: 10,
+        pluginName: undefined
+      },
+      pluginTypeOptions: ['reader', 'writer'],
+      dialogPluginVisible: false,
+      pluginData: [],
+      dialogFormVisible: false,
+      dialogStatus: '',
+      textMap: {
+        update: 'Edit',
+        create: 'Create'
+      },
+      rules: {
+        pluginType: [{ required: true, message: 'type is required', trigger: 'change' }],
+        pluginName: [{ required: true, message: 'title is required', trigger: 'blur' }]
+      },
+      temp: {
+        id: undefined,
+        pluginName: '',
+        pluginType: '',
+        templateJson: '',
+        comments: ''
+      }
+    };
+  },
+  created() {
+    this.fetchData();
+  },
+  methods: {
+    fetchData() {
+      this.listLoading = true;
+      Api.paged(this.listQuery).then(response => {
+        const { records } = response
+        const { total } = response
+        this.total = total
+        this.list = records;
+        this.listLoading = false;
+      });
+    },
+    resetTemp() {
+      this.temp = {
+        id: undefined,
+        importance: 1,
+        remark: '',
+        timestamp: new Date(),
+        title: '',
+        status: 'published',
+        type: ''
+      }
+    },
+    handleCreate() {
+      this.resetTemp()
+      this.dialogStatus = 'create'
+      this.dialogFormVisible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].clearValidate()
+      })
+    },
+    createData() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          Api.created(this.temp).then(() => {
+            this.fetchData()
+            this.dialogFormVisible = false
+            this.$notify({
+              title: 'Success',
+              message: 'Created Successfully',
+              type: 'success',
+              duration: 2000
+            })
+          })
+        }
+      })
+    },
+    handleUpdate(row) {
+      this.temp = Object.assign({}, row) // copy obj
+      this.dialogStatus = 'update'
+      this.dialogFormVisible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].clearValidate()
+      })
+    },
+    updateData() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const tempData = Object.assign({}, this.temp)
+          Api.updated(tempData).then(() => {
+            this.fetchData()
+            this.dialogFormVisible = false
+            this.$notify({
+              title: 'Success',
+              message: 'Update Successfully',
+              type: 'success',
+              duration: 2000
+            })
+          })
+        }
+      })
+    },
+    handleDelete(row) {
+      console.log('删除')
+      const idList = []
+      idList.push(row.id)
+      // 拼成 idList=xx
+      // 多个比较麻烦，这里不处理
+      Api.deleted({ idList: row.id }).then(response => {
+        this.fetchData()
+        this.$notify({
+          title: 'Success',
+          message: 'Delete Successfully',
+          type: 'success',
+          duration: 2000
+        })
+      })
+      // const index = this.list.indexOf(row)
+    },
+    handleFetchPv(id) {
+      Api.fetch(id).then(response => {
+        this.pluginData = response
+        this.dialogPvVisible = true
+      })
+    },
+    formatJson(filterVal, jsonData) {
+      return jsonData.map(v => filterVal.map(j => {
+        if (j === 'timestamp') {
+          return parseTime(v[j])
+        } else {
+          return v[j]
+        }
+      }))
+    }
+  }
+};
+</script>
diff --git a/src/views/datax/plugin/index.vue b/src/views/datax/plugin/index.vue
new file mode 100644
index 0000000..edc4867
--- /dev/null
+++ b/src/views/datax/plugin/index.vue
@@ -0,0 +1,254 @@
+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <el-input v-model="listQuery.pluginName" placeholder="插件名" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
+      <el-select v-model="listQuery.pluginType" placeholder="插件类型" clearable style="width: 120px" class="filter-item">
+        <el-option v-for="item in pluginTypeOptions" :key="item" :label="item" :value="item" />
+      </el-select>
+      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="fetchData">
+        Search
+      </el-button>
+      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
+        Add
+      </el-button>
+      <!-- <el-checkbox v-model="showReviewer" class="filter-item" style="margin-left:15px;" @change="tableKey=tableKey+1">
+        reviewer
+      </el-checkbox> -->
+    </div>
+    <el-table
+      v-loading="listLoading"
+      :data="list"
+      element-loading-text="Loading"
+      border
+      fit
+      highlight-current-row
+    >
+      <el-table-column align="center" label="序号" width="95">
+        <template slot-scope="scope">{{ scope.$index }}</template>
+      </el-table-column>
+      <el-table-column label="pluginType" width="110" align="center">
+        <template slot-scope="scope">{{ scope.row.pluginType }}</template>
+      </el-table-column>
+      <el-table-column label="pluginName" width="110" align="center">
+        <template slot-scope="scope">
+          <span>{{ scope.row.pluginName }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="templateJson" width="150" align="center">
+        <template slot-scope="scope">{{ scope.row.templateJson }}</template>
+      </el-table-column>
+      <el-table-column label="comments" width="110" align="center">
+        <template slot-scope="scope">{{ scope.row.comments }}</template>
+      </el-table-column>
+      <el-table-column label="Actions" align="center" width="230" class-name="small-padding fixed-width">
+        <template slot-scope="{row}">
+          <el-button type="primary" size="mini" @click="handleUpdate(row)">
+            Edit
+          </el-button>
+          <el-button v-if="row.status!='deleted'" size="mini" type="danger" @click="handleDelete(row)">
+            Delete
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination v-show="total>0" :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size" @pagination="fetchData" />
+
+    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
+      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
+        <el-form-item label="类型" prop="pluginType">
+          <el-select v-model="temp.pluginType" class="filter-item" placeholder="插件类型">
+            <el-option v-for="item in pluginTypeOptions" :key="item.key" :label="item" :value="item" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="名称" prop="pluginName">
+          <el-input v-model="temp.pluginName" placeholder="插件名称" />
+        </el-form-item>
+        <el-form-item label="模板">
+          <el-input v-model="temp.templateJson" :autosize="{ minRows: 2, maxRows: 8}" type="textarea" placeholder="Please input" />
+        </el-form-item>
+        <el-form-item label="注释">
+          <el-input v-model="temp.comments" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="Please input" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">
+          Cancel
+        </el-button>
+        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
+          Confirm
+        </el-button>
+      </div>
+    </el-dialog>
+    <el-dialog :visible.sync="dialogPluginVisible" title="Reading statistics">
+      <el-table :data="pluginData" border fit highlight-current-row style="width: 100%">
+        <el-table-column prop="key" label="Channel" />
+        <el-table-column prop="pv" label="Pv" />
+      </el-table>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="dialogPvVisible = false">Confirm</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getList, fetchPlugin, createPlugin, updatePlugin, deletePlugin } from '@/api/datax-plugin'
+import waves from '@/directive/waves' // waves directive
+import { parseTime } from '@/utils'
+import Pagination from '@/components/Pagination' // secondary package based on el-pagination
+
+export default {
+  name: 'DataxPlugin',
+  components: { Pagination },
+  directives: { waves },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'gray',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      list: null,
+      listLoading: true,
+      total: 0,
+      listQuery: {
+        current: 1,
+        size: 10,
+        pluginName: undefined
+      },
+      pluginTypeOptions: ['reader', 'writer'],
+      dialogPluginVisible: false,
+      pluginData: [],
+      dialogFormVisible: false,
+      dialogStatus: '',
+      textMap: {
+        update: 'Edit',
+        create: 'Create'
+      },
+      rules: {
+        pluginType: [{ required: true, message: 'type is required', trigger: 'change' }],
+        pluginName: [{ required: true, message: 'title is required', trigger: 'blur' }]
+      },
+      temp: {
+        id: undefined,
+        pluginName: '',
+        pluginType: '',
+        templateJson: '',
+        comments: ''
+      }
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.listLoading = true
+      getList(this.listQuery).then(response => {
+        const { records } = response
+        const { total } = response
+        this.total = total
+        this.list = records
+        this.listLoading = false
+      })
+    },
+    resetTemp() {
+      this.temp = {
+        id: undefined,
+        importance: 1,
+        remark: '',
+        timestamp: new Date(),
+        title: '',
+        status: 'published',
+        type: ''
+      }
+    },
+    handleCreate() {
+      this.resetTemp()
+      this.dialogStatus = 'create'
+      this.dialogFormVisible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].clearValidate()
+      })
+    },
+    createData() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          createPlugin(this.temp).then(() => {
+            this.fetchData()
+            this.dialogFormVisible = false
+            this.$notify({
+              title: 'Success',
+              message: 'Created Successfully',
+              type: 'success',
+              duration: 2000
+            })
+          })
+        }
+      })
+    },
+    handleUpdate(row) {
+      this.temp = Object.assign({}, row) // copy obj
+      this.dialogStatus = 'update'
+      this.dialogFormVisible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].clearValidate()
+      })
+    },
+    updateData() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const tempData = Object.assign({}, this.temp)
+          updatePlugin(tempData).then(() => {
+            this.fetchData()
+            this.dialogFormVisible = false
+            this.$notify({
+              title: 'Success',
+              message: 'Update Successfully',
+              type: 'success',
+              duration: 2000
+            })
+          })
+        }
+      })
+    },
+    handleDelete(row) {
+      console.log('删除')
+      const idList = []
+      idList.push(row.id)
+      // 拼成 idList=xx
+      // 多个比较麻烦，这里不处理
+      deletePlugin({ idList: row.id }).then(response => {
+        this.fetchData()
+        this.$notify({
+          title: 'Success',
+          message: 'Delete Successfully',
+          type: 'success',
+          duration: 2000
+        })
+      })
+      // const index = this.list.indexOf(row)
+    },
+    handleFetchPv(id) {
+      fetchPlugin(id).then(response => {
+        this.pluginData = response
+        this.dialogPvVisible = true
+      })
+    },
+    formatJson(filterVal, jsonData) {
+      return jsonData.map(v => filterVal.map(j => {
+        if (j === 'timestamp') {
+          return parseTime(v[j])
+        } else {
+          return v[j]
+        }
+      }))
+    }
+  }
+}
+</script>
diff --git a/vue.config.js b/vue.config.js
index 2b8bdd1..3d93261 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -6,11 +6,11 @@ function resolve(dir) {
   return path.join(__dirname, dir)
 }
 
-const name = defaultSettings.title || 'Z-TOOLBOX' // page title
+const name = defaultSettings.title || 'DATAX-ADMIN' // page title
 // If your port is set to 80,
 // use administrator privileges to execute the command line.
 // For example, Mac: sudo npm run
-const port = 9666 // dev port
+const port = 8081 // dev port
 
 // All configuration item explanations can be find in https://cli.vuejs.org/config/
 module.exports = {
@@ -34,8 +34,17 @@ module.exports = {
       errors: true
     },
     proxy: {
-      // change xxx-api/login => mock/login
       // detail: https://cli.vuejs.org/config/#devserver-proxy
+      //代理 /dev-api/api 到 http://localhost:8066/api
+      [process.env.VUE_APP_API]: {
+        target: `http://localhost:8066/api`,
+        changeOrigin: true,
+        pathRewrite: {
+          ['^' + process.env.VUE_APP_API]: ''
+        }
+      },
+      // mock 的代理
+      // change xxx-api/login => mock/login
       [process.env.VUE_APP_BASE_API]: {
         target: `http://localhost:${port}/mock`,
         changeOrigin: true,