From 62480e5c73a8d2b8e7bc78782abc3561838d96e4 Mon Sep 17 00:00:00 2001
From: Jiang Peng <2622360564@qq.com>
Date: Thu, 25 Apr 2024 14:18:34 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=8D=A2=E9=A1=B9=E7=9B=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/etl/datasource.js                     | 116 ++++
 .../auth/AuthDataSource.vue                   | 122 +++++
 .../etl/assetAuthorization/auth/AuthTable.vue | 168 ++++++
 src/views/etl/assetAuthorization/index.vue    | 105 ++++
 src/views/etl/assetStructure/index.vue        | 110 ++++
 .../dashboard/OverallAssetStructure.vue       | 290 ++++++++++
 .../etl/assets/dashboard/OverallAssets.vue    | 195 +++++++
 .../dashboard/OverallSpecificAssets.vue       | 304 +++++++++++
 src/views/etl/assets/index.vue                | 171 ++++++
 src/views/etl/datasource/index.vue            | 508 ++++++++++++++++++
 10 files changed, 2089 insertions(+)
 create mode 100644 src/api/etl/datasource.js
 create mode 100644 src/views/etl/assetAuthorization/auth/AuthDataSource.vue
 create mode 100644 src/views/etl/assetAuthorization/auth/AuthTable.vue
 create mode 100644 src/views/etl/assetAuthorization/index.vue
 create mode 100644 src/views/etl/assetStructure/index.vue
 create mode 100644 src/views/etl/assets/dashboard/OverallAssetStructure.vue
 create mode 100644 src/views/etl/assets/dashboard/OverallAssets.vue
 create mode 100644 src/views/etl/assets/dashboard/OverallSpecificAssets.vue
 create mode 100644 src/views/etl/assets/index.vue
 create mode 100644 src/views/etl/datasource/index.vue

diff --git a/src/api/etl/datasource.js b/src/api/etl/datasource.js
new file mode 100644
index 0000000..90db7be
--- /dev/null
+++ b/src/api/etl/datasource.js
@@ -0,0 +1,116 @@
+import request from '@/utils/request'
+
+// 查询数据源列表
+export function listDatasource(query) {
+  return request({
+    url: '/etl/source/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询数据源详细
+export function getDatasource(id) {
+  return request({
+    url: '/etl/source/' + id,
+    method: 'get'
+  })
+}
+
+
+
+// 新增数据源
+export function addDatasource(data) {
+  return request({
+    url: '/etl/source',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改数据源
+export function updateDatasource(data) {
+  return request({
+    url: '/etl/source',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除数据源
+export function delDatasource(id) {
+  return request({
+    url: '/etl/source/' + id,
+    method: 'delete'
+  })
+}
+export function test(data) {
+  return request({
+    url: '/etl/source/test',
+    method: 'post',
+    data
+  })
+}
+export function assetsList(data) {
+  return request({
+    url: '/etl/source/assetsList',
+    method: 'post',
+    data
+  })
+}
+
+
+export function structureList(data) {
+  return request({
+    url: '/etl/source/structureList',
+    method: 'post',
+    data
+  })
+}
+
+export function selectDept() {
+  return request({
+    url: '/etl/source/selectDept',
+    method: 'post'
+  })
+}
+
+export function synchronization(data) {
+  return request({
+    url: '/etl/source/synchronization',
+    method: 'post',
+    data
+  })
+}
+
+export function dataAssetList(data) {
+  return request({
+    url: '/etl/source/dataAssetList',
+    method: 'post',
+    data
+  })
+}
+export function assetModelList(data) {
+  return request({
+    url: '/etl/source/assetModelList',
+    method: 'post',
+    data
+  })
+}
+
+export function assetList(data) {
+  return request({
+    url: '/etl/model/list',
+    method: 'get',
+    data
+  })
+}
+
+export function statisticsInfo(data) {
+  return request({
+    url: '/etl/source/statisticsInfo',
+    method: 'post',
+    data
+  })
+}
+
diff --git a/src/views/etl/assetAuthorization/auth/AuthDataSource.vue b/src/views/etl/assetAuthorization/auth/AuthDataSource.vue
new file mode 100644
index 0000000..9c4930e
--- /dev/null
+++ b/src/views/etl/assetAuthorization/auth/AuthDataSource.vue
@@ -0,0 +1,122 @@
+<template>
+  <div class="app-container">
+    <h4 class="form-header h4">基本信息</h4>
+    <el-form ref="form" :model="baseInfo" label-width="120px">
+      <el-row>
+        <el-col :offset="2" :span="8">
+          <el-form-item label="数据接入名称" prop="nickName">
+            <el-input v-model="baseInfo.name" disabled/>
+          </el-form-item>
+        </el-col>
+        <el-col :offset="2" :span="8">
+          <el-form-item label="系统名称" prop="userName">
+            <el-input v-model="baseInfo.systemName" disabled/>
+          </el-form-item>
+        </el-col>
+        <el-col :offset="2" :span="8">
+          <el-form-item label="数据库名称" prop="nickName">
+            <el-input v-model="baseInfo.databaseName" disabled/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+
+    <el-tabs type="border-card" v-model="activeName">
+      <el-tab-pane label="部门授权" name="dept">
+        <el-table
+          ref="deptTable"
+          v-loading="loading"
+          :data="deptList"
+          :default-expand-all="true"
+          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+          row-key="deptId"
+        >
+          <el-table-column label="部门名称" prop="deptName" ></el-table-column>
+          <el-table-column label="部门负责人" prop="leader" ></el-table-column>
+          <el-table-column label="邮箱" prop="email" ></el-table-column>
+          <el-table-column align="center" label="创建时间" prop="createTime" >
+            <template slot-scope="scope">
+              <span>{{ parseTime(scope.row.createTime) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column align="center" label="操作" prop="createTime" >
+            <template slot-scope="scope">
+              <el-switch
+                style="display: block"
+                v-model="scope.row.isAuth"
+                active-color="#13ce66"
+                inactive-color="#ff4949"
+                active-text="已授权"
+                inactive-text="未授权">
+              </el-switch>
+            </template>
+          </el-table-column>
+        </el-table>
+        <pagination v-show="total> 0" :limit.sync="pageSize" :page.sync="pageNum" :total="total"/>
+      </el-tab-pane>
+      <el-tab-pane label="用户授权" name="user">
+        <el-table ref="table" v-loading="loading" :data="userList">
+          <el-table-column align="center" label="用户名称" prop="userName"/>
+          <el-table-column align="center" label="用户昵称" prop="nickName"/>
+          <el-table-column align="center" label="用户部门" prop="dept.deptName"/>
+          <el-table-column align="center" label="用户邮箱" prop="email"/>
+          <el-table-column align="center" label="用户手机号" prop="phonenumber"/>
+          <el-table-column align="center" label="创建时间" prop="createTime" />
+          <el-table-column align="center" label="操作" prop="createTime" >
+            <template slot-scope="scope">
+              <el-switch
+                style="display: block"
+                v-model="scope.row.isAuth"
+                active-color="#13ce66"
+                inactive-color="#ff4949"
+                active-text="已授权"
+                inactive-text="未授权">
+              </el-switch>
+            </template>
+          </el-table-column>
+        </el-table>
+        <pagination v-show="total> 0" :limit.sync="pageSize" :page.sync="pageNum" :total="total"/>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+
+import { parseTime } from '@/utils/muyu'
+
+export default {
+  name: "AuthDataSource",
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      activeName: "dept",
+      // 分页信息
+      total: 0,
+      pageNum: 1,
+      pageSize: 1,
+      // 基本信息
+      baseInfo: {
+        name: "测试1",
+        systemName: "云计算系统",
+        databaseName: "yunjisuan",
+      },
+      // 部门列表
+      deptList: [],
+      // 用户列表
+      userList: []
+    };
+  },
+  created() {
+    this.loading = true;
+    setTimeout(() => this.loading = false, 200)
+    this.init()
+  },
+  methods: {
+    parseTime,
+    init() {
+    }
+  },
+};
+</script>
diff --git a/src/views/etl/assetAuthorization/auth/AuthTable.vue b/src/views/etl/assetAuthorization/auth/AuthTable.vue
new file mode 100644
index 0000000..19eab1f
--- /dev/null
+++ b/src/views/etl/assetAuthorization/auth/AuthTable.vue
@@ -0,0 +1,168 @@
+<template>
+  <div class="app-container">
+    <h4 class="form-header h4">基本信息</h4>
+    <el-form ref="form" :model="baseInfo" label-width="120px">
+      <el-row>
+        <el-col :offset="2" :span="8">
+          <el-form-item label="数据接入名称" prop="nickName">
+            <el-input v-model="baseInfo.name" disabled/>
+          </el-form-item>
+        </el-col>
+        <el-col :offset="2" :span="8">
+          <el-form-item label="系统名称" prop="userName">
+            <el-input v-model="baseInfo.systemName" disabled/>
+          </el-form-item>
+        </el-col>
+        <el-col :offset="2" :span="8">
+          <el-form-item label="数据库名称" prop="nickName">
+            <el-input v-model="baseInfo.databaseName" disabled/>
+          </el-form-item>
+        </el-col>
+        <el-col :offset="2" :span="8">
+          <el-form-item label="表名称" prop="nickName">
+            <el-input v-model="baseInfo.tableName" disabled/>
+          </el-form-item>
+        </el-col>
+        <el-col :offset="2" :span="8">
+          <el-form-item label="表中文名" prop="nickName">
+            <el-input v-model="baseInfo.tableAsName" disabled/>
+          </el-form-item>
+        </el-col>
+        <el-col :offset="2" :span="8">
+          <el-form-item label="数据量" prop="nickName">
+            <el-input v-model="baseInfo.total" disabled/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+
+    <el-tabs type="border-card" v-model="activeName">
+      <el-tab-pane label="部门授权" name="dept">
+        <el-table
+          ref="deptTable"
+          v-loading="loading"
+          :data="deptList"
+          :default-expand-all="true"
+          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+          row-key="deptId"
+        >
+          <el-table-column label="部门名称" prop="deptName" ></el-table-column>
+          <el-table-column label="部门负责人" prop="leader" ></el-table-column>
+          <el-table-column label="邮箱" prop="email" ></el-table-column>
+          <el-table-column align="center" label="创建时间" prop="createTime" >
+            <template slot-scope="scope">
+              <span>{{ parseTime(scope.row.createTime) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column align="center" label="操作" prop="createTime" >
+            <template slot-scope="scope">
+              <el-switch
+                style="display: block"
+                v-model="scope.row.isAuth"
+                active-color="#13ce66"
+                inactive-color="#ff4949"
+                active-text="已授权"
+                inactive-text="未授权">
+              </el-switch>
+            </template>
+          </el-table-column>
+        </el-table>
+        <pagination v-show="total> 0" :limit.sync="pageSize" :page.sync="pageNum" :total="total"/>
+      </el-tab-pane>
+      <el-tab-pane label="用户授权" name="user">
+        <el-table ref="table" v-loading="loading" :data="userList">
+          <el-table-column align="center" label="用户名称" prop="userName"/>
+          <el-table-column align="center" label="用户昵称" prop="nickName"/>
+          <el-table-column align="center" label="用户部门" prop="dept.deptName"/>
+          <el-table-column align="center" label="用户邮箱" prop="email"/>
+          <el-table-column align="center" label="用户手机号" prop="phonenumber"/>
+          <el-table-column align="center" label="创建时间" prop="createTime" />
+          <el-table-column align="center" label="操作" prop="createTime" >
+            <template slot-scope="scope">
+              <el-switch
+                style="display: block"
+                v-model="scope.row.isAuth"
+                active-color="#13ce66"
+                inactive-color="#ff4949"
+                active-text="已授权"
+                inactive-text="未授权">
+              </el-switch>
+            </template>
+          </el-table-column>
+        </el-table>
+        <pagination v-show="total> 0" :limit.sync="pageSize" :page.sync="pageNum" :total="total"/>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+
+import { parseTime } from '@/utils/muyu';
+import {listDept} from "@/api/system/dept";
+import {listRole} from "@/api/system/role";
+import {listDatasource} from "@/api/etl/datasource";
+import {listUser} from "@/api/system/user";
+
+export default {
+  name: "AuthTable",
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      activeName: "dept",
+      // 分页信息
+      total: 0,
+      pageNum: 1,
+      pageSize: 1,
+      // 基本信息
+      baseInfo: {
+        name: "1",
+        systemName: "111",
+        databaseName: "ry_cloud",
+        tableName: "sys_user",
+        tableAsName: "用户表",
+        total: "3条",
+      },
+      // 部门列表
+      deptList: [],
+      // 用户列表
+      userList: [],
+      arr:[],
+      source:{}
+    };
+  },
+  created() {
+    this.loading = true;
+    setTimeout(() => this.loading = false, 200)
+    this.init()
+    this.getListDept()
+    this.getListRole()
+    this.getSource()
+  },
+  methods: {
+    getSource(){
+      listDatasource(this.source).then(res=>{
+        console.log(res)
+        this.arr=res.data.rows
+      })
+    },
+    getListDept(){
+      listDept().then(res=>{
+        this.deptList=res.data
+        console.log(res)
+      })
+    },
+    getListRole(){
+      listUser().then(res=>{
+        console.log(res)
+        this.userList=res.data.rows
+      })
+    },
+    parseTime,
+    init(){
+
+    }
+  },
+};
+</script>
diff --git a/src/views/etl/assetAuthorization/index.vue b/src/views/etl/assetAuthorization/index.vue
new file mode 100644
index 0000000..6665b72
--- /dev/null
+++ b/src/views/etl/assetAuthorization/index.vue
@@ -0,0 +1,105 @@
+<template>
+  <el-container :style="{height: mainHeight + 'px'}">
+    <el-aside>
+      <el-tree :data="assetStructureList"
+               :load="expandTable"
+               :expand-on-click-node="false"
+               lazy
+               @node-click="(data) => showAuth=data.type"
+               :props="defaultProps">
+<!--        <div class="custom-tree-node" slot-scope="{ node, data }">-->
+<!--          <div v-if="data.type === 'dataSource'">{{ data.name + '('+data.databaseName + '-' + data.systemName+')' }}</div>-->
+<!--          <div v-if="data.type === 'dataTable'">{{ data.name + '-'+data.as + '(' + data.dataTotal+'条)' }}</div>-->
+<!--        </div>-->
+      </el-tree>
+    </el-aside>
+    <el-container>
+      <el-main>
+        <auth-data-source v-if="showAuth === 'dataSource'"/>
+        <auth-table v-else-if="showAuth === 'dataTable'"/>
+      </el-main>
+    </el-container>
+  </el-container>
+</template>
+<script>
+
+import AuthDataSource from './auth/AuthDataSource.vue'
+import AuthTable from './auth/AuthTable.vue'
+import {selectDept} from "@/api/etl/datasource";
+
+export default {
+  name: 'assetStructure',
+  components: { AuthTable, AuthDataSource },
+  data() {
+    return {
+      mainHeight: window.innerHeight - 85,
+      defaultProps: {
+        children: 'childrenList',
+        label: 'name'
+      },
+      showAuth: null,
+      assetStructureList: [
+        {
+          name: "测试1",
+          //系统名称
+          systemName: "云计算系统",
+          //数据库名称
+          databaseName: "yunjisuan",
+          type: "dataSource"
+        },
+
+      ],
+      childrenList: [
+        {
+          name: "sys_user",
+          as: "用户表",
+          dataTotal: 635847,
+          type: "dataTable",
+          childrenList: []
+        },
+        {
+          name: "sys_dept",
+          as: "部门表",
+          dataTotal: 362548,
+          type: "dataTable",
+          childrenList: []
+        },
+        {
+          name: "sys_notice",
+          as: "通知公告",
+          dataTotal: 6347,
+          type: "dataTable",
+          childrenList: []
+        }
+      ]
+    }
+  },
+  methods: {
+
+    expandTable( node, resolve){
+      if (node.level === 0) return resolve(this.assetStructureList);
+      const {data} = node;
+      if (data.type === 'dataTable') {
+        return resolve([])
+      }
+      setTimeout(() => {
+        resolve(this.childrenList)
+      }, 500);
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+.el-aside {
+  margin: 0;
+  padding: 0;
+  width: 400px;
+  background-color: white;
+}
+.el-main {
+  background-color: #f1f1f1;
+}
+.custom-tree-node{
+  height: 30px;
+}
+</style>
diff --git a/src/views/etl/assetStructure/index.vue b/src/views/etl/assetStructure/index.vue
new file mode 100644
index 0000000..e369082
--- /dev/null
+++ b/src/views/etl/assetStructure/index.vue
@@ -0,0 +1,110 @@
+<template>
+  <el-container :style="{height: mainHeight + 'px'}">
+    <el-aside>
+      <el-tree :data="assetStructureList" :load="expandTable" lazy :props="defaultProps">
+        <div class="custom-tree-node" slot-scope="{ node, data }">
+          <div v-if="data.type === 'dataSource'">{{ data.name }}</div>
+          <div v-if="data.type === 'dataTable'">{{ data.name + '-'+data.as + '(' + data.dataTotal+'条)' }}</div>
+        </div>
+      </el-tree>
+    </el-aside>
+    <el-container>
+      <el-main>
+        <OverallAssets v-if="showAssets == null"/>
+        <overall-specific-assets v-if="showAssets === 'dataSource'" :title="title"/>
+      </el-main>
+    </el-container>
+  </el-container>
+</template>
+<script>
+import OverallAssets from '../assets/dashboard/OverallAssets.vue'
+import OverallSpecificAssets from '../assets/dashboard/OverallSpecificAssets.vue'
+import {assetsList, structureList} from "@/api/etl/datasource";
+
+export default {
+  name: 'assetStructure',
+  components: { OverallSpecificAssets, OverallAssets },
+  data() {
+    return {
+      mainHeight: window.innerHeight - 85,
+      defaultProps: {
+        children: 'childrenList',
+        label: 'name'
+      },
+      sourceList:[],
+      assetsList:[],
+      structureList:[],
+      dataSource:{
+        sql:""
+      },
+      assetStructureList: [
+        {
+          name: "本地",
+          systemName: "云计算系统",
+          databaseName: "yunjisuan",
+          type: "dataSource"
+        },
+
+      ],
+      childrenList: [
+        {
+          name: "sys_user",
+          as: "用户表",
+          dataTotal: 635847,
+          type: "dataTable",
+          childrenList: []
+        },
+        {
+          name: "sys_dept",
+          as: "部门表",
+          dataTotal: 362548,
+          type: "dataTable",
+          childrenList: []
+        },
+        {
+          name: "sys_notice",
+          as: "通知公告",
+          dataTotal: 6347,
+          type: "dataTable",
+          childrenList: []
+        }
+      ],
+      showAssets: null,
+      title: null
+    }
+  },
+  created() {
+    this.getTableList();
+  },
+  methods: {
+    getTableList(){
+      assetsList(this.dataSource).then(res=>{
+        console.log(res)
+      })
+    },
+    expandTable( node, resolve){
+      if (node.level === 0) return resolve(this.assetStructureList);
+      if (node.level > 1) return resolve([]);
+      const {data} = node;
+      if (data.type === 'dataSource') {
+        this.title = data.name + '('+data.databaseName + '-' + data.systemName+')'
+      }
+      setTimeout(() => {
+        resolve(this.childrenList)
+        this.showAssets = data.type;
+      }, 500);
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+.el-aside {
+  margin: 0;
+  padding: 0;
+  width: 400px;
+  background-color: white;
+}
+.el-main {
+  background-color: #f1f1f1;
+}
+</style>
diff --git a/src/views/etl/assets/dashboard/OverallAssetStructure.vue b/src/views/etl/assets/dashboard/OverallAssetStructure.vue
new file mode 100644
index 0000000..ba3d412
--- /dev/null
+++ b/src/views/etl/assets/dashboard/OverallAssetStructure.vue
@@ -0,0 +1,290 @@
+<template>
+  <div>
+    <el-card>
+      <div slot="header" class="clearfix">
+        <span>资产模型基本信息</span>
+      </div>
+      <el-descriptions border :column="2">
+        <el-descriptions-item label="表名称">{{title.tableName}}</el-descriptions-item>
+        <el-descriptions-item label="表备注">{{title.tableComment}}</el-descriptions-item>
+        <el-descriptions-item label="数据量">{{title.tableCount}}</el-descriptions-item>
+        <el-descriptions-item label="是否核心">
+          <el-tag size="small">是</el-tag>
+        </el-descriptions-item>
+      </el-descriptions>
+    </el-card>
+    <el-card style=" margin-top: 20px;">
+      <div slot="header" class="clearfix">
+        <span>资产模型详细信息</span>
+      </div>
+      <el-table
+        :data="tableData"
+        style="width: 100%;">
+        <el-table-column prop="name" label="名称" />
+        <el-table-column prop="comment" label="注释" />
+        <el-table-column prop="isPrimaryKey" label="是否主键" >
+          <template slot-scope="scope">
+            <el-tag size="small" :type="scope.row.isPrimaryKey === 'Y' ? 'success' : ''">
+              {{scope.row.isPrimaryKey}}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="type" label="类型" />
+        <el-table-column prop="mappingType" label="映射类型" />
+        <el-table-column prop="length" label="长度" />
+        <el-table-column prop="decimalPlaces" label="小数位" />
+        <el-table-column prop="isNull" label="是否为空"  >
+          <template slot-scope="scope">
+            <el-tag size="small" :type="scope.row.isNull === 'Y' ? 'success' : 'danger'">
+              {{scope.row.isNull}}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="defaultValue" label="默认值" />
+        <el-table-column prop="isDict" label="是否字典" >
+          <template slot-scope="scope">
+            <el-tag v-if="scope.row.isDict === 'Y'" size="small" type="success">
+              {{scope.row.isDict}}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="dictKey" label="映射字典" >
+          <template slot-scope="scope">
+            <el-popover
+              v-if="scope.row.isDict === 'Y'"
+              placement="left"
+              width="200"
+              trigger="hover">
+              <el-table :data="[
+                      { label: '男', value: '1' },
+                      { label: '女', value: '2' },
+                      { label: '未知', value: '0' },
+                    ]">
+                <el-table-column property="label" label="字典标签"/>
+                <el-table-column property="value" label="字典值"/>
+              </el-table>
+              <el-tag slot="reference">{{scope.row.dictKey}}</el-tag>
+            </el-popover>
+          </template>
+        </el-table-column>
+        <el-table-column prop="id" label="操作" >
+          <template slot-scope="scope">
+            <el-button type="text" @click="update(scope.row)">编辑</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+    <el-dialog title="资产结构修改" width="80%" :visible.sync="formStatus">
+      <el-form :model="form" label-width="120px">
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="名称">
+              <el-input v-model="form.name" readonly autocomplete="off"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="注释">
+              <el-input v-model="form.comment" readonly autocomplete="off"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="是否主键">
+              <el-tag size="small" :type="form.isPrimaryKey === 'Y' ? 'success' : 'danger'">
+                {{form.isPrimaryKey}}
+              </el-tag>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="数据类型">
+              <el-input v-model="form.type" readonly autocomplete="off"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="数据长度">
+              <el-input v-model="form.length" readonly autocomplete="off"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="小数位">
+              <el-input v-model="form.decimalPlaces" readonly autocomplete="off"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="是否为空">
+              <el-tag size="small" :type="form.isNull === 'Y' ? 'success' : 'danger'">
+                {{form.isNull}}
+              </el-tag>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="默认值">
+              <el-input v-model="form.defaultValue" readonly autocomplete="off"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="映射字段">
+              <el-input v-model="form.mappingType" readonly autocomplete="off"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="是否字典">
+              <el-switch
+                v-model="form.isDict"
+                active-value="Y"
+                inactive-value="N"
+                active-color="#13ce66"
+                inactive-color="#ff4949">
+              </el-switch>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row v-if="form.isDict === 'Y'">
+          <el-col :span="24">
+            <el-form-item label="字典">
+              <el-select v-model="form.dictKey">
+                <el-option v-for="(value, key) in dictMap" :key="key" :label="key" :value="key"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item>
+              <el-table :data="dictMap[form.dictKey]" striped border>
+                <el-table-column property="label" label="字典标签"/>
+                <el-table-column property="val" label="字典值"/>
+              </el-table>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="formStatus = false">取 消</el-button>
+        <el-button type="primary" @click="formStatus = false">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import {assetModelList} from "@/api/etl/datasource";
+
+export default {
+  name: 'OverallAssetStructure',
+  watch:{
+    'title':{
+      handler(val){
+        console.log(val)
+        assetModelList(val).then(res=>{
+
+          this.tableData = res.data
+        })
+      },
+      immediate:true
+    }
+  },
+  props:{
+    title:{
+
+    }
+  },
+  data() {
+    return {
+      tableData: [
+        {
+          id: 1,
+          name: "id",
+          comment: "主键",
+          isPrimaryKey: "Y",
+          type: "bigint",
+          mappingType: "Long",
+          length: "-",
+          decimalPlaces: "-",
+          isNull: "N",
+          defaultValue: "-",
+          isDict: "N",
+          dictKey: "-",
+        }, {
+          id: 2,
+          name: "name",
+          comment: "姓名",
+          isPrimaryKey: "N",
+          type: "varchar",
+          mappingType: "String",
+          length: "64",
+          decimalPlaces: "-",
+          isNull: "N",
+          defaultValue: "-",
+          isDict: "N",
+          dictKey: "-",
+        }, {
+          id: 3,
+          name: "sex",
+          comment: "性别",
+          isPrimaryKey: "N",
+          type: "char",
+          mappingType: "String",
+          length: "1",
+          decimalPlaces: "-",
+          isNull: "N",
+          defaultValue: "-",
+          isDict: "Y",
+          dictKey: "system_sex",
+        }, {
+          id: 4,
+          name: "price",
+          comment: "金额",
+          isPrimaryKey: "N",
+          type: "double",
+          mappingType: "BigDecimal",
+          length: "10",
+          decimalPlaces: "2",
+          isNull: "N",
+          defaultValue: "0.00",
+          isDict: "N",
+          dictKey: "-",
+        }, {
+          id: 5,
+          name: "create_time",
+          comment: "创建时间",
+          isPrimaryKey: "N",
+          type: "datetime",
+          mappingType: "Date",
+          length: "-",
+          decimalPlaces: "-",
+          isNull: "Y",
+          defaultValue: "-",
+          isDict: "N",
+          dictKey: "-",
+        }, ],
+      form: {},
+      formStatus: false,
+      dictMap: {
+        "system_sex": [
+          { label: '男', val: '1', isEdit: false },
+          { label: '女', val: '2', isEdit: false },
+          { label: '未知', val: '0', isEdit: false },
+        ],
+        "system_y_n": [
+          { label: '是', val: '1', isEdit: false },
+          { label: '否', val: '0', isEdit: false }
+        ],
+      }
+    }
+  },
+  methods: {
+    update(row) {
+      this.form = row;
+      this.formStatus = true;
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+
+</style>
diff --git a/src/views/etl/assets/dashboard/OverallAssets.vue b/src/views/etl/assets/dashboard/OverallAssets.vue
new file mode 100644
index 0000000..47eb92d
--- /dev/null
+++ b/src/views/etl/assets/dashboard/OverallAssets.vue
@@ -0,0 +1,195 @@
+<template>
+  <el-row :gutter="40" class="panel-group">
+    <div class="title-header">
+      整体数据资产结构概述
+    </div>
+    <el-col :lg="8" :sm="12" :xs="12" class="card-panel-col">
+      <div class="card-panel" @click="handleSetLineChartData('newVisitis')">
+        <div class="card-panel-icon-wrapper icon-people">
+          <svg-icon class-name="card-panel-icon" icon-class="database"/>
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text">
+            数据接入
+          </div>
+          <count-to :duration="2600" :end-val="statisticsInfo.dataAsset" :start-val="0" class="card-panel-num"/>
+        </div>
+      </div>
+    </el-col>
+    <el-col :lg="8" :sm="12" :xs="12" class="card-panel-col">
+      <div class="card-panel" @click="handleSetLineChartData('messages')">
+        <div class="card-panel-icon-wrapper icon-message">
+          <svg-icon class-name="card-panel-icon" icon-class="table"/>
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text">
+            资产模型
+          </div>
+          <count-to :duration="3000" :end-val="statisticsInfo.assetModel" :start-val="0" class="card-panel-num"/>
+        </div>
+      </div>
+    </el-col>
+    <el-col :lg="8" :sm="12" :xs="12" class="card-panel-col">
+      <div class="card-panel" @click="handleSetLineChartData('purchases')">
+        <div class="card-panel-icon-wrapper icon-money">
+          <svg-icon class-name="card-panel-icon" icon-class="field"/>
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text">
+            数据模型
+          </div>
+          <count-to :duration="3200" :end-val="statisticsInfo.dataModel" :start-val="0" class="card-panel-num"/>
+        </div>
+      </div>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import CountTo from 'vue-count-to'
+import {statisticsInfo} from "@/api/etl/datasource";
+
+export default {
+  data(){
+  return{
+    statisticsInfo:{}
+  }
+  },
+
+  components: {
+    CountTo
+  },
+  methods: {
+    handleSetLineChartData(type) {
+      this.$emit('handleSetLineChartData', type)
+    },
+    getStatisticsInfo() {
+      statisticsInfo().then(response => {
+        console.log(response)
+        this.statisticsInfo = response.data
+      })
+    }
+  },
+  created() {
+    this.getStatisticsInfo()
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+.panel-group {
+  margin-top: 18px;
+
+  .card-panel-col {
+    margin-bottom: 32px;
+  }
+
+  .card-panel {
+    height: 108px;
+    cursor: pointer;
+    font-size: 12px;
+    position: relative;
+    overflow: hidden;
+    color: #666;
+    background: #fff;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+
+    &:hover {
+      .card-panel-icon-wrapper {
+        color: #fff;
+      }
+
+      .icon-people {
+        background: #40c9c6;
+      }
+
+      .icon-message {
+        background: #36a3f7;
+      }
+
+      .icon-money {
+        background: #f4516c;
+      }
+
+      .icon-shopping {
+        background: #34bfa3
+      }
+    }
+
+    .icon-people {
+      color: #40c9c6;
+    }
+
+    .icon-message {
+      color: #36a3f7;
+    }
+
+    .icon-money {
+      color: #f4516c;
+    }
+
+    .icon-shopping {
+      color: #34bfa3
+    }
+
+    .card-panel-icon-wrapper {
+      float: left;
+      margin: 14px 0 0 14px;
+      padding: 16px;
+      transition: all 0.38s ease-out;
+      border-radius: 6px;
+    }
+
+    .card-panel-icon {
+      float: left;
+      font-size: 48px;
+    }
+
+    .card-panel-description {
+      float: right;
+      font-weight: bold;
+      margin: 26px;
+      margin-left: 0px;
+
+      .card-panel-text {
+        line-height: 18px;
+        color: rgba(0, 0, 0, 0.45);
+        font-size: 16px;
+        margin-bottom: 12px;
+      }
+
+      .card-panel-num {
+        font-size: 20px;
+      }
+    }
+  }
+}
+
+@media (max-width: 550px) {
+  .card-panel-description {
+    display: none;
+  }
+
+  .card-panel-icon-wrapper {
+    float: none !important;
+    width: 100%;
+    height: 100%;
+    margin: 0 !important;
+
+    .svg-icon {
+      display: block;
+      margin: 14px auto !important;
+      float: none !important;
+    }
+  }
+}
+.title-header{
+  text-align: center;
+  width: 100%;
+  font-size: 46px;
+  font-weight: 600;
+  line-height: 100px;
+}
+</style>
diff --git a/src/views/etl/assets/dashboard/OverallSpecificAssets.vue b/src/views/etl/assets/dashboard/OverallSpecificAssets.vue
new file mode 100644
index 0000000..4209124
--- /dev/null
+++ b/src/views/etl/assets/dashboard/OverallSpecificAssets.vue
@@ -0,0 +1,304 @@
+<template>
+  <el-row :gutter="40" class="panel-group">
+    <div class="title-header">
+      {{title.dataSourceName + '('+title.databaseName + '-' + title.systemName+')'}} - 资产结构概述
+    </div>
+    <el-col :sm="12" :xs="12" class="card-panel-col">
+      <div class="card-panel" @click="handleSetLineChartData('messages')">
+        <div class="card-panel-icon-wrapper icon-message">
+          <svg-icon class-name="card-panel-icon" icon-class="table"/>
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text">
+            资产模型
+          </div>
+          <count-to :duration="3000" :end-val="assetModel" :start-val="0" class="card-panel-num"/>
+        </div>
+      </div>
+    </el-col>
+    <el-col :sm="12" :xs="12" class="card-panel-col">
+      <div class="card-panel" @click="handleSetLineChartData('purchases')">
+        <div class="card-panel-icon-wrapper icon-money">
+          <svg-icon class-name="card-panel-icon" icon-class="field"/>
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text">
+            数据模型
+          </div>
+          <count-to :duration="3200" :end-val="dataModel" :start-val="0" class="card-panel-num"/>
+        </div>
+      </div>
+    </el-col>
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span>基础字典</span>
+        <el-popover
+          placement="top-start"
+          title="基础字典"
+          width="200"
+          trigger="hover"
+          content="这个字典是数据资产项目当中的字典内容，而不是本项目当中的字典内容。主要作用为数据清洗过程中数据字典映射作用">
+          <i class="el-icon-question" slot="reference"></i>
+        </el-popover>
+        <el-popover
+          placement="right"
+          width="400"
+          trigger="click">
+          <el-row :gutter="20">
+            <el-col :span="18">
+              <el-input v-model="dictAddName"></el-input>
+            </el-col>
+            <el-col :span="6">
+              <el-button @click="addDict">确定</el-button>
+            </el-col>
+          </el-row>
+          <el-button style="float: right; padding: 3px 0" type="text" slot="reference">新增字典</el-button>
+        </el-popover>
+      </div>
+      <el-row :gutter="20">
+        <el-col v-for="(val,key) in dictMap" :md="8" :sm="24" :xs="12">
+          <el-card class="box-card" style="height: 300px">
+            <div slot="header" class="clearfix">
+              <span>{{key}}</span>
+              <el-button style="float: right; padding: 3px 0"
+                         type="text"
+                         @click="val.push({ label: null, val: null, isEdit: true })"
+              >新增</el-button>
+            </div>
+            <el-table :data="val" style="width: 100%" height="280px">
+              <el-table-column prop="label" label="标签">
+                <template slot-scope="scope">
+                  <span v-if="!scope.row.isEdit">{{scope.row.label}}</span>
+                  <el-input v-if="scope.row.isEdit" v-model="scope.row.label" size="mini"></el-input>
+                </template>
+              </el-table-column>
+              <el-table-column prop="val" label="值">
+                <template slot-scope="scope">
+                  <span v-if="!scope.row.isEdit">{{scope.row.val}}</span>
+                  <el-input v-if="scope.row.isEdit" v-model="scope.row.val" size="mini"></el-input>
+                </template>
+              </el-table-column>
+              <el-table-column prop="val" label="操作">
+                <template slot-scope="scope">
+                  <el-button
+                    v-if="!scope.row.isEdit"
+                    size="mini"
+                    type="text"
+                    icon="el-icon-edit"
+                    @click="scope.row.isEdit = true"
+                  >修改</el-button>
+                  <el-button
+                    v-if="scope.row.isEdit"
+                    @click="editConfirm(scope.row)"
+                    size="mini"
+                    type="text"
+                    icon="el-icon-finished"
+                  >确定</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-card>
+        </el-col>
+      </el-row>
+    </el-card>
+    <el-col :span="24">
+      <el-tabs v-model="activeName" type="card">
+        <el-tab-pane v-for="tableAsset in title.tableList" :label="tableAsset.tableName+'('+tableAsset.tableComment+')'" :name="tableAsset.tableName">
+              <overall-asset-structure v-if="activeName == tableAsset.tableName" :title="tableAsset"></overall-asset-structure>
+        </el-tab-pane>
+      </el-tabs>
+
+    </el-col>
+
+  </el-row>
+</template>
+
+<script>
+import CountTo from 'vue-count-to'
+import OverallAssetStructure from './OverallAssetStructure.vue'
+
+export default {
+  watch:{
+    'title':{
+      handler(val){
+        console.log(val)
+          this.activeName = val.tableList[0].tableName
+          this.assetModel = 0
+          this.dataModel = 0
+        val.tableList.forEach(t =>{
+          if (t.tableCount !=null){
+            this.dataModel = parseInt(this.dataModel) + parseInt(t.tableCount)
+          }
+          if (t.fields != null){
+            this.assetModel = this.assetModel + t.fields
+          }
+        })
+      },
+    },
+  },
+  props: {
+    title: {
+    }
+  },
+  data() {
+    return {
+      assetModel:0,
+      dataModel:0,
+      activeName: '',
+      dictAddName: null,
+      dictMap: {
+        "性别(system_sex)": [
+          { label: '男', val: '1', isEdit: false },
+          { label: '女', val: '2', isEdit: false },
+          { label: '未知', val: '0', isEdit: false },
+        ],
+        "开关(system_y_n)": [
+          { label: '是', val: '1', isEdit: false },
+          { label: '否', val: '0', isEdit: false }
+        ],
+      }
+    }
+  },
+  components: {
+    OverallAssetStructure,
+    CountTo
+  },
+  methods: {
+    editConfirm(row){
+      if (!row.label || !row.val) {
+        this.$message.error('字典标签或字典值，不可为空');
+        return;
+      }
+      row.isEdit = false;
+    },
+    addDict(){
+      if (!this.dictAddName){
+        this.$message.error('数据字典，不可为空');
+        return;
+      }
+      this.dictMap[this.dictAddName] = []
+      this.dictAddName = null
+    },
+    handleSetLineChartData(type) {
+      this.$emit('handleSetLineChartData', type)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.panel-group {
+  margin-top: 18px;
+
+  .card-panel-col {
+    margin-bottom: 32px;
+  }
+
+  .card-panel {
+    height: 108px;
+    cursor: pointer;
+    font-size: 12px;
+    position: relative;
+    overflow: hidden;
+    color: #666;
+    background: #fff;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+
+    &:hover {
+      .card-panel-icon-wrapper {
+        color: #fff;
+      }
+
+      .icon-people {
+        background: #40c9c6;
+      }
+
+      .icon-message {
+        background: #36a3f7;
+      }
+
+      .icon-money {
+        background: #f4516c;
+      }
+
+      .icon-shopping {
+        background: #34bfa3
+      }
+    }
+
+    .icon-people {
+      color: #40c9c6;
+    }
+
+    .icon-message {
+      color: #36a3f7;
+    }
+
+    .icon-money {
+      color: #f4516c;
+    }
+
+    .icon-shopping {
+      color: #34bfa3
+    }
+
+    .card-panel-icon-wrapper {
+      float: left;
+      margin: 14px 0 0 14px;
+      padding: 16px;
+      transition: all 0.38s ease-out;
+      border-radius: 6px;
+    }
+
+    .card-panel-icon {
+      float: left;
+      font-size: 48px;
+    }
+
+    .card-panel-description {
+      float: right;
+      font-weight: bold;
+      margin: 26px;
+      margin-left: 0px;
+
+      .card-panel-text {
+        line-height: 18px;
+        color: rgba(0, 0, 0, 0.45);
+        font-size: 16px;
+        margin-bottom: 12px;
+      }
+
+      .card-panel-num {
+        font-size: 20px;
+      }
+    }
+  }
+}
+
+@media (max-width: 550px) {
+  .card-panel-description {
+    display: none;
+  }
+
+  .card-panel-icon-wrapper {
+    float: none !important;
+    width: 100%;
+    height: 100%;
+    margin: 0 !important;
+
+    .svg-icon {
+      display: block;
+      margin: 14px auto !important;
+      float: none !important;
+    }
+  }
+}
+.title-header{
+  text-align: center;
+  width: 100%;
+  font-size: 46px;
+  font-weight: 600;
+  line-height: 100px;
+}
+</style>
diff --git a/src/views/etl/assets/index.vue b/src/views/etl/assets/index.vue
new file mode 100644
index 0000000..4b7f66c
--- /dev/null
+++ b/src/views/etl/assets/index.vue
@@ -0,0 +1,171 @@
+<template>
+  <div>
+    <el-container style="height: 80%; border: 1px solid #eee">
+      <el-aside width="300px" style="background-color: rgb(238, 241, 246)">
+        <el-tree :data="sourceList"
+                 @node-click="handleNodeClick"
+                 :props="defaultProps">
+          </el-tree>
+      </el-aside>
+      <el-container>
+        <el-main>
+          <el-tabs v-model="activeName">
+            <el-tab-pane label="资产结构" name="structure">
+              <OverallAssets v-if="showAssets == null"/>
+              <overall-specific-assets v-if="showAssets === 'dataSource'" :title="title"/>
+              <overall-asset-structure v-if="showAssets === 'dataTable'" :title="title"/>
+            </el-tab-pane>
+            <el-tab-pane label="资产数据" name="data">
+              <el-card style="height: 280px">
+                <div slot="header" class="clearfix">
+                  <span>查询语句</span>
+                </div>
+                <el-input type="textarea" v-model="source.sql" style="width: 1080px;" :rows="6"></el-input>
+                <el-button style="float: right;margin-top: 20px" @click="sql()">查询</el-button>
+
+              </el-card>
+              <br>
+              <el-card>
+                <div slot="header" class="clearfix">
+                  <span>数据资产</span>
+                </div>
+                <el-table :data="structureList" v-if="structureList!=null">
+                  <el-table-column v-for="(assets,index) in assetsList" :label="index+' ('+assets+')'" width="140">
+                    <template slot-scope="scope">
+                      {{scope.row[index].value}}
+                    </template>
+                  </el-table-column>
+                </el-table>
+              </el-card>
+
+            </el-tab-pane>
+          </el-tabs>
+
+        </el-main>
+      </el-container>
+    </el-container>
+  </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
+//例如：import 《组件名称》 from '《组件路径》,
+import {dataAssetList, listDatasource, structureList} from "@/api/etl/datasource";
+import OverallSpecificAssets from "@/views/etl/assets/dashboard/OverallSpecificAssets.vue";
+import OverallAssets from "@/views/etl/assets/dashboard/OverallAssets.vue";
+import OverallAssetStructure from "@/views/etl/assets/dashboard/OverallAssetStructure.vue";
+export default {
+  components: { OverallSpecificAssets, OverallAssets,OverallAssetStructure},
+
+  //import引入的组件需要注入到对象中才能使用"
+  props: {},
+  data() {
+    return {
+      mainHeight: window.innerHeight - 85,
+      assetsCompute:{
+        assetsModuleSum: 0,
+        dataModuleSum: 0,
+        dataSourceSum: 0
+      },
+      showAssets: null,
+      title: {},
+      activeName: 'structure',
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        dataSourceName: null,
+        linkAddress: null
+      },
+      // 总条数
+      total: 0,
+      // 【请填写功能名称】表格数据
+      datasourceList:[
+
+      ],
+      sourceList: [],
+      assetsList:[],
+      structureList:[],
+      tableAssets:[],
+      defaultProps: {
+        children: 'tableList',
+        label: 'label'
+      },
+      sourceData:{},
+      source:{
+        sql:''
+      },
+      statisticsInfo:{}
+    };
+  },
+  //计算属性 类似于data概念",
+  computed: {},
+  //监控data中的数据变化",
+  watch: {},
+  //方法集合",
+  methods: {
+
+    handleNodeClick(data) {
+      if (data.dataType === 'dataSource'){
+        dataAssetList(data).then(res => {
+          res.data.forEach(table => {
+            table.dataType = "dataTable"
+            table.label=table.tableName+"-"+table.tableComment+"("+table.tableCount+"条)"
+          })
+          data.tableList = res.data
+          this.sourceList[this.sourceList.indexOf(data)].tableList = res.data
+          this.title = data
+        })
+
+      }else{
+        this.title= data
+      }
+      this.showAssets = data.dataType
+    },
+    sql(){
+      structureList(this.source).then(res => {
+        this.structureList = res.data.kvtList
+      })
+    },
+    getList() {
+      listDatasource(this.queryParams).then(response => {
+        this.sourceList = response.data.rows;
+        console.log(this.sourceList)
+        this.sourceList.forEach(source => {
+          if (source.type=='PostGre'){
+            source.label=source.dataSourceName+'('+source.databaseName+'-'+source.modeName+'-'+source.systemName+')'
+          }else{
+            source.label=source.dataSourceName+'('+source.databaseName+'-'+source.systemName+')'
+          }
+
+          source.dataType = 'dataSource'
+          if (source.tableList!=null){
+            source.tableList.forEach(table => {
+              table.label = table.tableName+'-'+table.tableComment+'('+table.tableCount+'条)'
+              table.dataType = 'dataTable'
+            })
+          }
+        })
+        this.total = response.data.total;
+      });
+    }
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）",
+  created() {
+    this.getList()
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）",
+  mounted() {
+  }
+};
+</script>
+<style scoped>
+.el-header {
+  background-color: #B3C0D1;
+  color: #333;
+  line-height: 60px;
+}
+
+.el-aside {
+  color: #333;
+}
+</style>
diff --git a/src/views/etl/datasource/index.vue b/src/views/etl/datasource/index.vue
new file mode 100644
index 0000000..5ea28f5
--- /dev/null
+++ b/src/views/etl/datasource/index.vue
@@ -0,0 +1,508 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="数据源名称" prop="dataSourceName" label-width="100px">
+        <el-input
+          v-model="queryParams.dataSourceName"
+          placeholder="请输入数据源名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="数据源链接地址" prop="linkAddress" label-width="120px">
+        <el-input
+          v-model="queryParams.linkAddress"
+          placeholder="请输入数据源链接地址"
+          clearable
+          @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 :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['system:source:add']"
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="el-icon-edit"
+          size="mini"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['system:source:edit']"
+        >修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['system:source:remove']"
+        >删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['system:source:export']"
+        >导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="datasourceList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="主键" align="center" prop="id" />
+      <el-table-column label="端口" align="center" prop="port" />
+      <el-table-column label="用户名" align="center" prop="username" />
+      <el-table-column label="密码" align="center" prop="password" />
+      <el-table-column label="连接地址" align="center" prop="linkAddress" />
+      <el-table-column label="数据源名称" align="center" prop="dataSourceName" />
+      <el-table-column label="数据库名" align="center" prop="databaseName" />
+      <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-link"
+            @click="test(scope.row)"
+          >测试连接</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-s-open"
+            @click="synchronization(scope.row)"
+          >同步资产结构</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['etl:datasource:edit']"
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['etl:datasource:remove']"
+          >删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改【请填写功能名称】对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="1150px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="140px">
+        <el-card>
+          <div slot="header" class="clearfix">
+            <span>基础配置信息</span>
+          </div>
+          <el-row>
+            <el-col :md="12" :sm="24">
+              <el-form-item label="接入源名称" prop="dataSourceName">
+                <el-input v-model="form.dataSourceName" placeholder="请输入接入源名称" />
+              </el-form-item>
+            </el-col>
+            <el-col :md="12" :sm="24">
+              <el-form-item label="数据来源系统名称" prop="systemName">
+                <el-input v-model="form.systemName" placeholder="请输入数据来源系统名称" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :md="12" :sm="24">
+              <el-form-item label="主机IP" prop="linkAddress">
+                <el-input v-model="form.linkAddress" placeholder="请输入主机地址" />
+              </el-form-item>
+            </el-col>
+            <el-col :md="12" :sm="24">
+              <el-form-item label="主机地址" prop="port">
+                <el-input v-model="form.port" placeholder="请输入主机地址" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :md="12" :sm="24">
+              <el-form-item label="数据接入类型" prop="type">
+                <el-select style="width: 100%" v-model="form.type">
+                  <el-option label="MySql" value="MySql">MySql</el-option>
+                  <el-option label="Oracle" value="Oracle">Oracle</el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :md="12" :sm="24">
+              <el-form-item label="数据库名称" prop="databaseName">
+                <el-input v-model="form.databaseName" placeholder="请输入数据库名称" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :md="12" :sm="24">
+              <el-form-item label="连接用户名" prop="username">
+                <el-input v-model="form.username" placeholder="请输入连接用户名" />
+              </el-form-item>
+            </el-col>
+            <el-col :md="12" :sm="24">
+              <el-form-item label="连接密码" prop="password">
+                <el-input v-model="form.password" placeholder="请输入连接密码" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-card>
+              <div slot="header" class="clearfix">
+                <span>数据连接参数</span>
+              </div>
+              <el-col :sm="24">
+                <el-form-item label="数据连接参数" prop="connectionParam">
+                  <el-input v-model="form.connectionParam" placeholder="请输入内容" />
+                </el-form-item>
+              </el-col>
+              <el-row :gutter="10" style="margin: 10px 0">
+                <el-col :span="2">
+                  <el-button type="primary" @click="addParam()">新增参数</el-button>
+                </el-col>
+                <el-col :span="2">
+                  <el-button type="danger" @click="deleteParam(null)">清空参数</el-button>
+                </el-col>
+              </el-row>
+              <el-row :gutter="10">
+                <el-col :md="8" :xs="12" style="margin: 10px 0" v-for="(dataSourceParam, dataSourceParamIndex) in dataSourceParamList">
+                  <el-col :span="10">
+                    <el-input v-model="dataSourceParam.name" placeholder="请输入参数键" @keyup.native="processParam"/>
+                  </el-col>
+                  <el-col :span="1"><span style="font-size: 28px; margin: 0 3px 0 0;">:</span></el-col>
+                  <el-col :span="10">
+                    <el-input v-model="dataSourceParam.val" placeholder="请输入参数值" @keyup.native="processParam"/>
+                  </el-col>
+                  <el-col :span="3">
+                    <el-button type="danger" @click="deleteParam(dataSourceParamIndex)">删除</el-button>
+                  </el-col>
+                </el-col>
+              </el-row>
+            </el-card>
+          </el-row>
+        </el-card>
+        <el-card style="margin-top: 20px">
+          <div slot="header" class="clearfix">
+            <span>连接池配置</span>
+          </div>
+          <el-row>
+            <el-col :md="12" :sm="24">
+              <el-form-item label="初始连接数量" prop="initNum">
+                <el-input v-model="form.initNum" placeholder="请输入初始连接数量" />
+              </el-form-item>
+            </el-col>
+            <el-col :md="12" :sm="24">
+              <el-form-item label="最大连接数量" prop="maxNum">
+                <el-input v-model="form.maxNum" placeholder="请输入最大连接数量" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :md="12" :sm="24">
+              <el-form-item label="最大等待时间" prop="maxWaitTime">
+                <el-input v-model="form.maxWaitTime" placeholder="请输入最大等待时间" />
+              </el-form-item>
+            </el-col>
+            <el-col :md="12" :sm="24">
+              <el-form-item label="最大等待次数" prop="maxWaitSize">
+                <el-input v-model="form.maxWaitSize" placeholder="请输入最大等待次数" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-card>
+
+        <el-card style="margin-top: 20px">
+          <div slot="header" class="clearfix">
+            <span>其他信息</span>
+          </div>
+          <el-form-item label="备注" prop="remark">
+            <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+          </el-form-item>
+        </el-card>
+      </el-form>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+
+
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  listDatasource,
+  getDatasource,
+  addDatasource,
+  updateDatasource,
+  delDatasource,
+  test,
+  synchronization
+} from "@/api/etl/datasource";
+
+export default {
+  name: "Source",
+  data() {
+    return {
+      datasourceList:[],
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 数据源表格数据
+      sourceList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      datasource:{},
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        dataSourceName: null,
+        linkAddress: null
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        dataSourceName: [
+          {required: true, message: "接入源名称不能为空", trigger: "blur"}
+        ],
+        systemName: [
+          {required: true, message: "数据来源系统名称不能为空", trigger: "blur"}
+        ],
+        type: [
+          {required: true, message: "数据接入类型不能为空", trigger: "blur"}
+        ],
+        host: [
+          {required: true, message: "主机地址不能为空", trigger: "blur"}
+        ],
+        port: [
+          {required: true, message: "主机地址不能为空", trigger: "blur"}
+        ],
+        databaseName: [
+          {required: true, message: "数据库名称不能为空", trigger: "blur"}
+        ],
+        connectionParam: [
+          {required: true, message: "数据连接参数不能为空", trigger: "blur"}
+        ],
+        initNum: [
+          {required: true, message: "初始连接数量不能为空", trigger: "blur"}
+        ],
+        maxNum: [
+          {required: true, message: "最大连接数量不能为空", trigger: "blur"}
+        ],
+        maxWaitTime: [
+          {required: true, message: "最大等待时间不能为空", trigger: "blur"}
+        ],
+        maxWaitSize: [
+          {required: true, message: "最大等待次数不能为空", trigger: "blur"}
+        ],
+        modeName:[
+          {required: true, message: "数据源模式不能为空", trigger: "blur"}
+        ]
+      },
+      dataSourceParamList: [
+        {
+          name: null,
+          val: null
+        }
+      ],
+
+    };
+  },
+  created() {
+    this.getList();
+
+  },
+  methods: {
+
+    synchronization(data){
+      synchronization(data).then(res=>{
+        console.log(res)
+        if (res.code == 200){
+          this.$message({
+            message:("成功")
+          })
+        }else{
+          this.$message({
+            message:("失败")
+          })
+        }
+      })
+    },
+    addParam(){
+      this.dataSourceParamList.push({
+      name:null,
+      val:null
+      })
+    },
+    deleteParam(){
+      if (index!=null){
+        this.dataSourceParamList.splice(index,1)
+      }else{
+        this.dataSourceParamList = []
+      }
+      this.processParam()
+    },
+    processParam(){
+      this.form.connectionParam= this.dataSourceParamList
+        .filter(item=>item.name !=null || item .val!=null)
+        .map(ite =>{
+          return ite.name + "=" + ite.val
+      }).join("&")
+    },
+    //测试
+    test(datasource){
+      test(datasource).then(res=>{
+        if (res.code == 200){
+          this.$message({
+            message:("成功")
+          })
+        }else{
+          this.$message({
+            message:("失败")
+          })
+        }
+      })
+    },
+    /** 查询数据源列表 */
+    getList() {
+      this.loading = true;
+      listDatasource(this.queryParams).then(response => {
+        console.log(response)
+        this.datasourceList = response.data.rows;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        port: null,
+        username: null,
+        password: null,
+        linkAddress: null,
+        dataSourceName: null,
+        databaseName: null
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id)
+      this.single = selection.length!==1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加数据源";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id || this.ids
+      getDatasource(id).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改数据源";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.id != null) {
+            updateDatasource(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addDatasource(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids;
+      this.$modal.confirm('是否确认删除数据源编号为"' + ids + '"的数据项？').then(function() {
+        return delDatasource(ids);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('etl/datasource/export', {
+        ...this.queryParams
+      }, `datasource_${new Date().getTime()}.xlsx`)
+    }
+  }
+};
+</script>