From 71dfc3fca0cdc5035c032f853b4bc76f96710fb6 Mon Sep 17 00:00:00 2001
From: dongzeliang <2746733890@qq.com>
Date: Sun, 21 Apr 2024 18:30:33 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B5=84=E4=BA=A7=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/icons/svg/database.svg             |   1 +
 src/assets/icons/svg/field.svg                |   1 +
 .../dashboard/OverallAssets.vue               | 178 ++++++++++
 .../dashboard/OverallSpecificAssets.vue       | 326 ++++++++++++++++++
 src/views/dataAssets/assetStructure/index.vue |  29 +-
 5 files changed, 525 insertions(+), 10 deletions(-)
 create mode 100644 src/assets/icons/svg/database.svg
 create mode 100644 src/assets/icons/svg/field.svg
 create mode 100644 src/views/dataAssets/assetStructure/dashboard/OverallAssets.vue
 create mode 100644 src/views/dataAssets/assetStructure/dashboard/OverallSpecificAssets.vue

diff --git a/src/assets/icons/svg/database.svg b/src/assets/icons/svg/database.svg
new file mode 100644
index 0000000..71c9079
--- /dev/null
+++ b/src/assets/icons/svg/database.svg
@@ -0,0 +1 @@
+<svg width="40px" height="40px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-labelledby="layersIconTitle" stroke="#2329D6" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" color="#2329D6"> <title id="layersIconTitle">Layers</title> <path d="M12 4L20 8.00004L12 12L4 8.00004L12 4Z"/> <path d="M20 12L12 16L4 12"/> <path d="M20 16L12 20L4 16"/> </svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/field.svg b/src/assets/icons/svg/field.svg
new file mode 100644
index 0000000..85faa8a
--- /dev/null
+++ b/src/assets/icons/svg/field.svg
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Electron Fiddle</title><path d="M8 0c-.6312 0-1.1429.5117-1.1429 1.1429v13.8583c-1.9716.5075-3.4285 2.2973-3.4285 4.4274C3.4286 21.9533 5.4753 24 8 24c2.5247 0 4.5714-2.0467 4.5714-4.5714 0-2.1301-1.4569-3.92-3.4285-4.4274v-4.7155h4.7346c.541 0 .9796-.5117.9796-1.1428 0-.6312-.4386-1.1429-.9796-1.1429H9.143V2.2857h10.2857c.6312 0 1.1428-.5117 1.1428-1.1428C20.5714.5117 20.0598 0 19.4286 0Zm0 17.1429c1.2624 0 2.2857 1.0233 2.2857 2.2857 0 1.2623-1.0233 2.2857-2.2857 2.2857-1.2624 0-2.2857-1.0234-2.2857-2.2857 0-1.2624 1.0233-2.2857 2.2857-2.2857z"/></svg>
\ No newline at end of file
diff --git a/src/views/dataAssets/assetStructure/dashboard/OverallAssets.vue b/src/views/dataAssets/assetStructure/dashboard/OverallAssets.vue
new file mode 100644
index 0000000..1d75a9f
--- /dev/null
+++ b/src/views/dataAssets/assetStructure/dashboard/OverallAssets.vue
@@ -0,0 +1,178 @@
+<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="4" :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="96" :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="560" :start-val="0" class="card-panel-num"/>
+        </div>
+      </div>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import CountTo from 'vue-count-to'
+
+export default {
+  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/dataAssets/assetStructure/dashboard/OverallSpecificAssets.vue b/src/views/dataAssets/assetStructure/dashboard/OverallSpecificAssets.vue
new file mode 100644
index 0000000..ca074b7
--- /dev/null
+++ b/src/views/dataAssets/assetStructure/dashboard/OverallSpecificAssets.vue
@@ -0,0 +1,326 @@
+<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-tabs v-model="activeName" type="border-card">
+        <el-tab-pane label="sys_user(用户表)" name="first">
+          <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">编辑</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-card>
+        </el-tab-pane>
+        <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
+        <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
+        <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
+      </el-tabs>
+    </el-col>
+  </el-row>
+
+</template>
+
+<script>
+import CountTo from 'vue-count-to'
+
+export default {
+  props: {
+    title: {
+      type: String,
+      default: "-"
+    }
+  },
+  data() {
+    return {
+      activeName: 'first',
+      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: "-",
+      }, ]
+    }
+  },
+  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/dataAssets/assetStructure/index.vue b/src/views/dataAssets/assetStructure/index.vue
index c9c362e..4ec4f04 100644
--- a/src/views/dataAssets/assetStructure/index.vue
+++ b/src/views/dataAssets/assetStructure/index.vue
@@ -12,13 +12,20 @@
       </el-tree>
     </el-aside>
     <el-container>
-      <el-main>Main</el-main>
+      <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 './dashboard/OverallAssets.vue'
+import OverallSpecificAssets from './dashboard/OverallSpecificAssets.vue'
+
 export default {
   name: 'assetStructure',
+  components: { OverallSpecificAssets, OverallAssets },
   data() {
     return {
       mainHeight: window.innerHeight - 85,
@@ -74,20 +81,22 @@ export default {
           type: "dataTable",
           childrenList: []
         }
-      ]
+      ],
+      showAssets: null,
+      title: null
     }
   },
   methods: {
     expandTable( node, resolve){
-      if (node.level === 0) {
-        return resolve(this.assetStructureList);
-      }
+      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(() => {
-        const data = this.childrenList;
-
-        resolve(data);
+        resolve(this.childrenList)
+        this.showAssets = data.type;
       }, 500);
     }
   }
@@ -101,6 +110,6 @@ export default {
   background-color: white;
 }
 .el-main {
-  background-color: #E9EEF3;
+  background-color: #f1f1f1;
 }
 </style>