diff --git a/src/api/monitor/projectApi.js b/src/api/monitor/projectApi.js
new file mode 100644
index 0000000..f28c603
--- /dev/null
+++ b/src/api/monitor/projectApi.js
@@ -0,0 +1,39 @@
+import request from '@/utils/request'
+export function pageProjectList(data) {
+  console.log('data==', data)
+  return request({
+    url: '/salpa/subject/project/pageList',
+    method: 'post',
+    data: data
+  })
+}
+export function addProject(data) {
+  return request({
+    url: '/salpa/subject/project/addProject',
+    method: 'post',
+    data: data
+  })
+}
+
+export function getProjectById(id) {
+  return request({
+    url: '/salpa/subject/project/getNewProjectById?id=' + id,
+    method: 'get'
+  })
+}
+
+export function updateProject(data) {
+  return request({
+    url: '/salpa/subject/project/updateNewProject',
+    method: 'post',
+    data: data
+  })
+}
+
+export function delNewProject(id) {
+  return request({
+    url: '/salpa/subject/project/deleteNewProject?id=' + id,
+    method: 'delete'
+  })
+}
+
diff --git a/src/views/monitor/project/index.vue b/src/views/monitor/project/index.vue
new file mode 100644
index 0000000..6ba09cb
--- /dev/null
+++ b/src/views/monitor/project/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="app-container">
+    <transition name="el-zoom-in-center">
+      <data-source-list v-if="options.showList" @showCard="showCard" />
+    </transition>
+    <transition name="el-zoom-in-top">
+      <data-source-add v-if="options.showAdd" :data="options.data" @showCard="showCard" />
+    </transition>
+    <transition name="el-zoom-in-top">
+      <data-source-edit v-if="options.showEdit" :data="options.data" @showCard="showCard" />
+    </transition>
+    <transition name="el-zoom-in-bottom">
+      <data-source-detail v-if="options.showDetail" :data="options.data" @showCard="showCard" />
+    </transition>
+  </div>
+</template>
+
+<script>
+import DataSourceList from './projectList'
+import DataSourceAdd from './projectAdd'
+import DataSourceEdit from './projectEdit'
+import DataSourceDetail from './projectDetail'
+
+export default {
+  name: 'Project',
+  components: { DataSourceList, DataSourceAdd, DataSourceEdit, DataSourceDetail },
+  data() {
+    return {
+      options: {
+        data: {},
+        showList: true,
+        showAdd: false,
+        showEdit: false,
+        showDetail: false
+      }
+    }
+  },
+  methods: {
+    showCard(data) {
+      Object.assign(this.options, data)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/views/monitor/project/projectAdd.vue b/src/views/monitor/project/projectAdd.vue
new file mode 100644
index 0000000..0894d34
--- /dev/null
+++ b/src/views/monitor/project/projectAdd.vue
@@ -0,0 +1,119 @@
+<template>
+  <el-card class="box-card" shadow="always">
+    <div slot="header" class="clearfix">
+      <span>{{ title }}</span>
+      <el-button-group style="float: right;">
+        <el-button type="primary" size="mini" icon="el-icon-finished" :loading="loadingOptions.loading" :disabled="loadingOptions.isDisabled" @click="submitForm">{{ loadingOptions.loadingText }}</el-button>
+        <el-button size="mini" icon="el-icon-back" @click="showCard">返回</el-button>
+      </el-button-group>
+    </div>
+    <div class="body-wrapper">
+      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+        <div style="padding: 20px 200px">
+          <el-form-item label="项目名称" prop="projectName">
+            <el-input v-model="form.projectName" placeholder="请输入项目名称" />
+          </el-form-item>
+
+          <el-form-item label="项目描述" prop="projectDescription">
+            <el-input v-model="form.projectDescription" type="textarea" placeholder="请输入项目描述" />
+          </el-form-item>
+        </div>
+      </el-form>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import { addProject } from '@/api/monitor/projectApi'
+
+export default {
+  name: 'ProjectAdd',
+  props: {
+    data: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      title: '项目新增',
+      // 展示切换
+      showOptions: {
+        data: {},
+        showList: true,
+        showAdd: false,
+        showEdit: false,
+        showDetail: false
+      },
+      // 保存按钮
+      loadingOptions: {
+        loading: false,
+        loadingText: '保存',
+        isDisabled: false
+      },
+      // 表单参数
+      form: {
+        id: undefined,
+        projectName: undefined,
+        projectDescription: undefined,
+        subjectId: undefined,
+        deleted: undefined
+      },
+      // 表单校验
+      rules: {
+        projectName: [
+          { required: true, message: '项目名称不能为空', trigger: 'change' }
+        ]
+      }
+    }
+  },
+  created() {
+  },
+  methods: {
+    showCard() {
+      this.$emit('showCard', this.showOptions)
+    },
+    /** 提交按钮 */
+    submitForm: function() {
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+          this.form.dbSchema = this.form2
+          this.loadingOptions.loading = true
+          this.loadingOptions.loadingText = '保存中...'
+          this.loadingOptions.isDisabled = true
+          addProject(this.form).then(response => {
+            if (response.code === 200) {
+              this.$message.success('保存成功')
+              setTimeout(() => {
+                // 2秒后跳转列表页
+                this.$emit('showCard', this.showOptions)
+              }, 2000)
+            } else {
+              this.$message.error('保存失败')
+              this.loadingOptions.loading = false
+              this.loadingOptions.loadingText = '保存'
+              this.loadingOptions.isDisabled = false
+            }
+          }).catch(() => {
+            this.loadingOptions.loading = false
+            this.loadingOptions.loadingText = '保存'
+            this.loadingOptions.isDisabled = false
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.el-card ::v-deep .el-card__body {
+  height: calc(100vh - 230px);
+  overflow-y: auto;
+}
+.choosedDbType{
+  border: 1px solid #165DFF;
+}
+</style>
diff --git a/src/views/monitor/project/projectDetail.vue b/src/views/monitor/project/projectDetail.vue
new file mode 100644
index 0000000..d749bf6
--- /dev/null
+++ b/src/views/monitor/project/projectDetail.vue
@@ -0,0 +1,100 @@
+<template>
+  <el-card class="box-card" shadow="always">
+    <div slot="header" class="clearfix">
+      <span>{{ title }}</span>
+      <el-button-group style="float: right;">
+        <el-button size="mini" icon="el-icon-back" @click="showCard">返回</el-button>
+      </el-button-group>
+    </div>
+    <div class="body-wrapper">
+      <el-form ref="form" :model="form" :rules="rules" label-width="120px" disabled>
+        <div style="padding: 20px 200px">
+          <el-form-item label="项目名称" prop="projectName">
+            <el-input v-model="form.projectName" placeholder="请输入项目名称" />
+          </el-form-item>
+
+          <el-form-item label="项目描述" prop="projectDescription">
+            <el-input v-model="form.projectDescription" type="textarea" placeholder="请输入项目描述" />
+          </el-form-item>
+        </div>
+      </el-form>
+    </div>
+  </el-card>
+</template>
+
+<script>
+  import { getProjectById } from '@/api/monitor/projectApi'
+
+  export default {
+    name: 'ProjectDetail',
+    props: {
+      data: {
+        type: Object,
+        default: function() {
+          return {}
+        }
+      }
+    },
+    data() {
+      return {
+        title: '项目新增',
+        // 展示切换
+        showOptions: {
+          data: {},
+          showList: true,
+          showAdd: false,
+          showEdit: false,
+          showDetail: false
+        },
+        // 保存按钮
+        loadingOptions: {
+          loading: false,
+          loadingText: '保存',
+          isDisabled: false
+        },
+        // 表单参数
+        form: {
+          id: undefined,
+          projectName: undefined,
+          projectDescription: undefined,
+          subjectId: undefined,
+          deleted: undefined
+        },
+        // 表单校验
+        rules: {
+          projectName: [
+            { required: true, message: '项目名称不能为空', trigger: 'change' }
+          ]
+        }
+      }
+    },
+    created() {
+    },
+    mounted() {
+      this.getProjectById(this.data.id)
+    },
+    methods: {
+      showCard() {
+        this.$emit('showCard', this.showOptions)
+      },
+      /** 获取详情 */
+      async getProjectById(id) {
+        this.form = await getProjectById(id).then(response => {
+          if (response.code === 200) {
+            return response.data
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .el-card ::v-deep .el-card__body {
+    height: calc(100vh - 230px);
+    overflow-y: auto;
+  }
+  .choosedDbType{
+    border: 1px solid #165DFF;
+  }
+</style>
diff --git a/src/views/monitor/project/projectEdit.vue b/src/views/monitor/project/projectEdit.vue
new file mode 100644
index 0000000..6316015
--- /dev/null
+++ b/src/views/monitor/project/projectEdit.vue
@@ -0,0 +1,129 @@
+<template>
+  <el-card class="box-card" shadow="always">
+    <div slot="header" class="clearfix">
+      <span>{{ title }}</span>
+      <el-button-group style="float: right;">
+        <el-button type="primary" size="mini" icon="el-icon-finished" :loading="loadingOptions.loading" :disabled="loadingOptions.isDisabled" @click="submitForm">{{ loadingOptions.loadingText }}</el-button>
+        <el-button size="mini" icon="el-icon-back" @click="showCard">返回</el-button>
+      </el-button-group>
+    </div>
+    <div class="body-wrapper">
+      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+        <div style="padding: 20px 200px">
+          <el-form-item label="项目名称" prop="projectName">
+            <el-input v-model="form.projectName" placeholder="请输入项目名称" />
+          </el-form-item>
+
+          <el-form-item label="项目描述" prop="projectDescription">
+            <el-input v-model="form.projectDescription" type="textarea" placeholder="请输入项目描述" />
+          </el-form-item>
+        </div>
+      </el-form>
+    </div>
+  </el-card>
+</template>
+
+<script>
+  import { getProjectById, updateProject } from '@/api/monitor/projectApi'
+
+  export default {
+    name: 'ProjectEdit',
+    props: {
+      data: {
+        type: Object,
+        default: function() {
+          return {}
+        }
+      }
+    },
+    data() {
+      return {
+        title: '项目修改',
+        // 展示切换
+        showOptions: {
+          data: {},
+          showList: true,
+          showAdd: false,
+          showEdit: false,
+          showDetail: false
+        },
+        // 保存按钮
+        loadingOptions: {
+          loading: false,
+          loadingText: '保存',
+          isDisabled: false
+        },
+        // 表单参数
+        form: {
+          id: undefined,
+          projectName: undefined,
+          projectDescription: undefined,
+          subjectId: undefined,
+          deleted: undefined
+        },
+        // 表单校验
+        rules: {
+          projectName: [
+            { required: true, message: '项目名称不能为空', trigger: 'change' }
+          ]
+        }
+      }
+    },
+    created() {
+    },
+    mounted() {
+      this.getProjectById(this.data.id)
+    },
+    methods: {
+      showCard() {
+        this.$emit('showCard', this.showOptions)
+      },
+      /** 获取详情 */
+      async getProjectById(id) {
+        this.form = await getProjectById(id).then(response => {
+          if (response.code === 200) {
+            return response.data
+          }
+        })
+      },
+      /** 提交按钮 */
+      submitForm: function() {
+        this.$refs['form'].validate(valid => {
+          if (valid) {
+            this.loadingOptions.loading = true
+            this.loadingOptions.loadingText = '保存中...'
+            this.loadingOptions.isDisabled = true
+            updateProject(this.form).then(response => {
+              if (response.code === 200) {
+                this.$message.success('保存成功')
+                setTimeout(() => {
+                  // 2秒后跳转列表页
+                  this.$emit('showCard', this.showOptions)
+                }, 2000)
+              } else {
+                this.$message.error('保存失败')
+                this.loadingOptions.loading = false
+                this.loadingOptions.loadingText = '保存'
+                this.loadingOptions.isDisabled = false
+              }
+            }).catch(() => {
+              this.loadingOptions.loading = false
+              this.loadingOptions.loadingText = '保存'
+              this.loadingOptions.isDisabled = false
+            })
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .el-card ::v-deep .el-card__body {
+    height: calc(100vh - 230px);
+    overflow-y: auto;
+  }
+  .choosedDbType{
+    border: 1px solid #165DFF;
+  }
+</style>
diff --git a/src/views/monitor/project/projectList.vue b/src/views/monitor/project/projectList.vue
new file mode 100644
index 0000000..f922319
--- /dev/null
+++ b/src/views/monitor/project/projectList.vue
@@ -0,0 +1,300 @@
+<template>
+  <el-card class="box-card" shadow="always">
+    <el-form ref="queryForm" :model="queryParams" :inline="true">
+      <el-form-item label="数据源名称" prop="sourceName">
+        <el-input
+          v-model="queryParams.sourceName"
+          placeholder="请输入数据源名称"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row type="flex" justify="space-between">
+      <el-col :span="12">
+        <el-button-group>
+          <el-button
+            type="primary"
+            icon="el-icon-plus"
+            size="mini"
+            @click="handleAdd"
+          >新增</el-button>
+        </el-button-group>
+      </el-col>
+      <el-col :span="12">
+        <div class="right-toolbar">
+          <el-tooltip content="密度" effect="dark" placement="top">
+            <el-dropdown trigger="click" @command="handleCommand">
+              <el-button circle size="mini">
+                <i class="el-icon-s-grid"></i>
+              </el-button>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item command="medium">正常</el-dropdown-item>
+                <el-dropdown-item command="small">中等</el-dropdown-item>
+                <el-dropdown-item command="mini">紧凑</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </el-tooltip>
+          <el-tooltip content="刷新" effect="dark" placement="top">
+            <el-button circle size="mini" @click="handleRefresh">
+              <i class="el-icon-refresh"></i>
+            </el-button>
+          </el-tooltip>
+          <el-tooltip content="列设置" effect="dark" placement="top">
+            <el-popover placement="bottom" width="100" trigger="click">
+              <el-checkbox-group v-model="checkedTableColumns" @change="handleCheckedColsChange">
+                <el-checkbox
+                  v-for="(item, index) in tableColumns"
+                  :key="index"
+                  :label="item.prop"
+                >{{ item.label }}</el-checkbox>
+              </el-checkbox-group>
+              <span slot="reference">
+                <el-button circle size="mini">
+                  <i class="el-icon-setting"></i>
+                </el-button>
+              </span>
+            </el-popover>
+          </el-tooltip>
+        </div>
+      </el-col>
+    </el-row>
+
+    <el-table
+      v-loading="loading"
+      :data="dataSourceList"
+      border
+      tooltip-effect="dark"
+      :size="tableSize"
+      :height="tableHeight"
+      style="width: 100%;margin: 15px 0;"
+    >
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="序号" width="55" align="center">
+        <template slot-scope="scope">
+          <span>{{ scope.$index +1 }}</span>
+        </template>
+      </el-table-column>
+      <template v-for="(item, index) in tableColumns">
+        <el-table-column
+          v-if="item.show"
+          :key="index"
+          :prop="item.prop"
+          :label="item.label"
+          :formatter="item.formatter"
+          align="center"
+          show-overflow-tooltip
+        />
+      </template>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit-outline"
+            @click="handleEdit(scope.row)"
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-view"
+            @click="handleDetail(scope.row)"
+          >详情</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+          >删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-pagination
+      :page-sizes="[10, 20, 50, 100]"
+      layout="total, sizes, prev, pager, next, jumper"
+      :current-page.sync="queryParams.pageNum"
+      :page-size.sync="queryParams.pageSize"
+      :total="total"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+  </el-card>
+</template>
+
+<script>
+import { pageProjectList, delNewProject } from '@/api/monitor/projectApi'
+export default {
+  name: 'ProjectList',
+  data() {
+    return {
+      tableHeight: document.body.offsetHeight - 330 + 'px',
+      // 展示切换
+      showOptions: {
+        data: {},
+        showList: true,
+        showAdd: false,
+        showEdit: false,
+        showDetail: false
+      },
+      // 遮罩层
+      loading: true,
+      // 表格头
+      tableColumns: [
+        {
+          prop: 'projectName',
+          label: '项目名称',
+          show: true, width: '90px'
+        },
+        { prop: 'createAt', label: '创建时间', show: false }
+      ],
+      // 默认选择中表格头
+      checkedTableColumns: [],
+      tableSize: 'medium',
+      // 状态数据字典
+      statusOptions: [],
+      dbTypeOptions: [],
+      // 数据源表格数据
+      dataSourceList: [],
+      // 总数据条数
+      total: 0,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 20,
+        projectName: ''
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  mounted() {
+    this.initCols()
+  },
+  methods: {
+    /** 查询数据源列表 */
+    getList() {
+      this.loading = true
+      // pageDataSource(this.queryParams).then(response => {
+      //   this.loading = false
+      //   if (response.success) {
+      //     const { data } = response
+      //     this.dataSourceList = data.data
+      //     this.total = data.total
+      //   }
+      // })
+      pageProjectList(this.queryParams).then(response => {
+        this.loading = false
+        if (response.code === 200) {
+          this.dataSourceList = response.rows
+          this.total = response.total
+        }
+        console.log('response==', response)
+      })
+    },
+    initCols() {
+      this.checkedTableColumns = this.tableColumns.map(col => col.prop)
+    },
+    handleCheckedColsChange(val) {
+      this.tableColumns.forEach(col => {
+        if (!this.checkedTableColumns.includes(col.prop)) {
+          col.show = false
+        } else {
+          col.show = true
+        }
+      })
+    },
+    handleCommand(command) {
+      this.tableSize = command
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.queryParams = {
+        pageNum: 1,
+        pageSize: 20,
+        sourceName: ''
+      }
+      this.handleQuery()
+    },
+    /** 刷新列表 */
+    handleRefresh() {
+      this.getList()
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.showOptions.data = {}
+      this.showOptions.showList = false
+      this.showOptions.showAdd = true
+      this.showOptions.showEdit = false
+      this.showOptions.showDetail = false
+      this.$emit('showCard', this.showOptions)
+    },
+    /** 修改按钮操作 */
+    handleEdit(row) {
+      this.showOptions.data.id = row.id
+      this.showOptions.showList = false
+      this.showOptions.showAdd = false
+      this.showOptions.showEdit = true
+      this.showOptions.showDetail = false
+      this.$emit('showCard', this.showOptions)
+    },
+    /** 详情按钮操作 */
+    handleDetail(row) {
+      this.showOptions.data.id = row.id
+      this.showOptions.showList = false
+      this.showOptions.showAdd = false
+      this.showOptions.showEdit = false
+      this.showOptions.showDetail = true
+      this.$emit('showCard', this.showOptions)
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      this.$confirm('选中数据将被永久删除, 是否继续？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        delNewProject(row.id).then(response => {
+          if (response.code === 200) {
+            this.$message.success('删除成功')
+            this.getList()
+          }
+        })
+      }).catch(() => {
+      })
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`)
+      this.queryParams.pageNum = 1
+      this.queryParams.pageSize = val
+      this.getList()
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`)
+      this.queryParams.pageNum = val
+      this.getList()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.right-toolbar {
+  float: right;
+}
+.el-card ::v-deep .el-card__body {
+  height: calc(100vh - 170px);
+}
+</style>