From 5bccf3401b33522a07b33543bba0cb1bea1ee9bd Mon Sep 17 00:00:00 2001
From: sunshine7058 <2564255161@qq.com>
Date: Wed, 24 Apr 2024 15:09:07 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E5=AE=8C=E6=88=90=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E5=90=8C=E6=AD=A5=E5=88=9D=E7=89=88):?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/data/assset.js                        |  11 +
 src/api/data/source.js                        |  49 ++-
 .../dashboard/OverallAssetStructure.vue       | 271 ++++++++++++++++
 .../dashboard/OverallAssets.vue               | 186 +++++++++++
 .../dashboard/OverallSpecificAssets.vue       | 289 ++++++++++++++++++
 src/views/data/assetStructure/index.vue       | 129 ++++++++
 src/views/data/source/index.vue               |  20 ++
 7 files changed, 952 insertions(+), 3 deletions(-)
 create mode 100644 src/api/data/assset.js
 create mode 100644 src/views/data/assetStructure/dashboard/OverallAssetStructure.vue
 create mode 100644 src/views/data/assetStructure/dashboard/OverallAssets.vue
 create mode 100644 src/views/data/assetStructure/dashboard/OverallSpecificAssets.vue
 create mode 100644 src/views/data/assetStructure/index.vue

diff --git a/src/api/data/assset.js b/src/api/data/assset.js
new file mode 100644
index 0000000..ecb0aa3
--- /dev/null
+++ b/src/api/data/assset.js
@@ -0,0 +1,11 @@
+import request from '@/utils/request'
+
+
+// 同步数据库
+export function getsync(data) {
+  return request({
+    url: '/data/source/sync/',
+    method: 'post',
+    data:data
+  })
+}
diff --git a/src/api/data/source.js b/src/api/data/source.js
index aebbdaa..3d5e29e 100644
--- a/src/api/data/source.js
+++ b/src/api/data/source.js
@@ -43,9 +43,52 @@ export function delSource(id) {
   })
 }
 // 测试连接数据库
-export function getConnect(databaseId) {
+export function getConnect(data) {
   return request({
-    url: '/data/source/test/'+databaseId,
-    method: 'post'
+    url: '/data/source/test',
+    method: 'post',
+    data:data
+  })
+}
+
+// 查询数据源
+export function getAssetList() {
+  return request({
+    url: '/source/data/getAssetList',
+    method: 'get'
+  })
+}
+
+// 查询数据库下的表
+export function getChildrenList(data) {
+  return request({
+    url: '/source/data/getChildrenList',
+    method: 'post',
+    data: data
+  })
+}
+
+// 添加表结构
+export function addTableData(data) {
+  return request({
+    url: '/source/data/addTableData',
+    method: 'post',
+    data: data
+  })
+}
+
+// 查询表结构
+export function selectTableList() {
+  return request({
+    url: '/source/data/selectTableList',
+    method: 'get'
+  })
+}
+
+// 查询表数据总数
+export function selectTableDataCount() {
+  return request({
+    url: '/source/data/selectTableDataCount',
+    method: 'get'
   })
 }
diff --git a/src/views/data/assetStructure/dashboard/OverallAssetStructure.vue b/src/views/data/assetStructure/dashboard/OverallAssetStructure.vue
new file mode 100644
index 0000000..164c218
--- /dev/null
+++ b/src/views/data/assetStructure/dashboard/OverallAssetStructure.vue
@@ -0,0 +1,271 @@
+<template>
+  <div>
+    <el-card>
+      <div slot="header" class="clearfix">
+        <span>资产模型基本信息</span>
+      </div>
+      <el-descriptions border :column="2">
+        <el-descriptions-item label="表名称">sys_user</el-descriptions-item>
+        <el-descriptions-item label="表备注">用户表</el-descriptions-item>
+        <el-descriptions-item label="数据量">12536</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>
+export default {
+  name: 'OverallAssetStructure',
+  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/data/assetStructure/dashboard/OverallAssets.vue b/src/views/data/assetStructure/dashboard/OverallAssets.vue
new file mode 100644
index 0000000..05d6277
--- /dev/null
+++ b/src/views/data/assetStructure/dashboard/OverallAssets.vue
@@ -0,0 +1,186 @@
+<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="this.count.assetStructureCount" :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="this.count.assetStructureTableCount" :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="this.count.assetStructureTableDataCount" :start-val="0" class="card-panel-num"/>
+        </div>
+      </div>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import CountTo from 'vue-count-to'
+
+export default {
+  props: {
+    count:{
+      assetStructureCount: null,
+      assetStructureTableCount: null,
+      assetStructureTableDataCount: null
+    }
+  },
+  components: {
+    CountTo
+  },
+  methods: {
+    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/data/assetStructure/dashboard/OverallSpecificAssets.vue b/src/views/data/assetStructure/dashboard/OverallSpecificAssets.vue
new file mode 100644
index 0000000..0fa1d2b
--- /dev/null
+++ b/src/views/data/assetStructure/dashboard/OverallSpecificAssets.vue
@@ -0,0 +1,289 @@
+<template>
+  <el-row :gutter="40" class="panel-group">
+    <div class="title-header">
+      {{title}} - 资产结构概述
+    </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="15" :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="230" :start-val="0" class="card-panel-num"/>
+        </div>
+      </div>
+    </el-col>
+    <el-col :span="24">
+      <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>
+    <el-col :span="24" style="margin-top: 20px">
+      <el-tabs v-model="activeName" type="border-card">
+        <el-tab-pane label="sys_user(用户表)" name="first">
+          <overall-asset-structure/>
+        </el-tab-pane>
+        <el-tab-pane label="sys_dept(部门表)" name="second">sys_dept(部门表)</el-tab-pane>
+      </el-tabs>
+    </el-col>
+  </el-row>
+
+</template>
+
+<script>
+import CountTo from 'vue-count-to'
+import OverallAssetStructure from './OverallAssetStructure.vue'
+
+export default {
+  props: {
+    title: {
+      type: String,
+      default: "-"
+    }
+  },
+  data() {
+    return {
+      activeName: 'first',
+      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/data/assetStructure/index.vue b/src/views/data/assetStructure/index.vue
new file mode 100644
index 0000000..6c24c96
--- /dev/null
+++ b/src/views/data/assetStructure/index.vue
@@ -0,0 +1,129 @@
+<template>
+  <el-container :style="{height: mainHeight + 'px'}">
+    <el-aside>
+      <el-tree :data="assetStructureList"
+               :expand-on-click-node="false"
+               :load="expandTable"
+               lazy
+               @node-click="showAssetsFun"
+               :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>
+        <OverallAssets v-if="showAssets == null" :count="count"/>
+        <overall-specific-assets v-if="showAssets === 'dataSource'" :title="title"/>
+        <overall-asset-structure v-if="showAssets === 'dataTable'" :title="title"/>
+      </el-main>
+    </el-container>
+  </el-container>
+</template>
+<script>
+import OverallAssets from './dashboard/OverallAssets.vue'
+import OverallSpecificAssets from './dashboard/OverallSpecificAssets.vue'
+import OverallAssetStructure from './dashboard/OverallAssetStructure.vue'
+import {addTableData, getAssetList, getChildrenList, selectTableDataCount, selectTableList} from "@/api/data/source";
+
+export default {
+  name: 'assetStructure',
+  components: {OverallAssetStructure, OverallSpecificAssets, OverallAssets},
+  data() {
+    return {
+      mainHeight: window.innerHeight - 85,
+      defaultProps: {
+        children: 'childrenList',
+        label: 'name'
+      },
+      assetStructureList: [],
+      childrenList: [],
+      tableDataList: [],
+      showAssets: null,
+      title: null,
+      showTable: {
+        assetStructure: {},
+        tableName: null
+      },
+      count: {
+        assetStructureCount: null,
+        assetStructureTableCount: null,
+        assetStructureTableDataCount: null
+      }
+    }
+  },
+  methods: {
+    expandTable(node, resolve) {
+      console.log(node)
+      console.log(resolve)
+      if (node.level === 0) return resolve(this.assetStructureList);
+      const {data} = node;
+      getChildrenList(data).then(res => {
+        console.log(res)
+        this.childrenList = res.data
+        resolve(this.childrenList)
+        this.childrenList.forEach(children => {
+          this.showTable.assetStructure = data
+          this.showTable.tableName = children.name
+          addTableData(this.showTable).then(res => {
+            // console.log(res)
+          })
+        })
+        selectTableList().then(res => {
+          this.tableDataList = res.data
+          console.log(this.tableDataList)
+        })
+      })
+      this.showAssets = data.type;
+      if (data.type === 'dataTable') {
+        console.log(data)
+        return resolve([])
+      }
+      setTimeout(() => {
+        resolve(this.childrenList)
+      }, 500);
+    },
+    showAssetsFun(data) {
+      this.title = data.name + '(' + data.databaseName + '-' + data.systemName + ')'
+      this.showAssets = data.type;
+    },
+    getAssetStructureList() {
+      getAssetList().then(res => {
+        this.assetStructureList = res.data
+      })
+    },
+    tableDataCount() {
+      selectTableDataCount().then(res => {
+        this.count.assetStructureCount = res.data.assetStructureCount
+        this.count.assetStructureTableCount = res.data.assetStructureTableCount
+        this.count.assetStructureTableDataCount = res.data.assetStructureTableDataCount
+      })
+    }
+  },
+  created() {
+    this.getAssetStructureList()
+    this.tableDataCount()
+  }
+}
+</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/data/source/index.vue b/src/views/data/source/index.vue
index b191e13..e5fc1cf 100644
--- a/src/views/data/source/index.vue
+++ b/src/views/data/source/index.vue
@@ -112,6 +112,14 @@
             @click="handleconnect(scope.row)"
             v-hasPermi="['data:source:edit']"
           >测试连接</el-button>
+          <el-button
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handlesync(scope.row)"
+            v-hasPermi="['data:source:edit']"
+          >同步数据</el-button>
           <el-button
             size="mini"
             type="text"
@@ -276,6 +284,7 @@
 import {listSource, getSource, delSource, addSource, updateSource, getConnect} from "@/api/data/source";
 import {getDataBaseType} from "@/api/data/type";
 import log from "@/views/monitor/job/log.vue";
+import {getsync} from "@/api/data/assset";
 
 export default {
   name: "Source",
@@ -327,6 +336,17 @@ export default {
     this.getList();
   },
   methods: {
+    //同步数据
+    handlesync(row){
+      getsync(row).then(response=>{
+        console.log(response)
+        if (response.data){
+          this.$message.success("同步成功")
+        }else {
+          this.$message.error("同步失败")
+        }
+      })
+    },
     //连接
     handleconnect(row){
       const id = row.databaseType