资产结构测试5 信息统计组件

资产结构测试4 左边目录已经和接口对接成功
2024-04-25 22:25:39 +08:00 · 2024-04-25 14:17:26 +08:00
5 changed files with 445 additions and 114 deletions
--- a/package.json
+++ b/package.json
@ -36,6 +36,7 @@
    "url": "https://gitee.com/y_project/MuYu-Cloud.git"
  },
  "dependencies": {
+    "@element-plus/icons-vue": "^2.3.1",
    "@riophae/vue-treeselect": "0.4.0",
    "axios": "0.24.0",
    "clipboard": "2.0.8",
--- a/src/views/etl/construction/AssetsBasic.vue
+++ b/src/views/etl/construction/AssetsBasic.vue
@ -0,0 +1,187 @@
+<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" v-if="!infoOpen">
+      <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="fundDataNum.basicNum" :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="fundDataNum.tableNum" :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="fundDataNum.structureNum" :start-val="0" class="card-panel-num"/>
+        </div>
+      </div>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import CountTo from 'vue-count-to'
+
+export default {
+  props:{
+    infoOpen:false,
+    fundDataNum: {
+      basicNum: null,
+      tableNum: null,
+      structureNum: null,
+    }
+  },
+  name: 'AssetsBasic',
+  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>
--- a/src/views/etl/construction/AssetsModel.vue
+++ b/src/views/etl/construction/AssetsModel.vue
@ -0,0 +1,147 @@
+<template>
+  <el-row :gutter="40" class="panel-group">
+    <div class="title-header">
+
+    </div>
+  </el-row>
+</template>
+
+<script>
+import CountTo from 'vue-count-to'
+
+export default {
+  props:{
+    fundDataNum: {
+      basicNum: null,
+      tableNum: null,
+      structureNum: null,
+    }
+  },
+  name: 'AssetsModel',
+  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>
--- a/src/views/etl/construction/index.vue
+++ b/src/views/etl/construction/index.vue
@ -1,136 +1,132 @@
 <template>
-    <div>
-        <el-container style="height: 1000px">
-            <el-aside>
-                <el-tree :data="assetStructureList"
-                         :props="defaultProps"
-                         @node-click="handleNodeClick"></el-tree>
-            </el-aside>
-            <el-main>
-                <AssetsBasic :infoOpen="infoOpen" :fundDataNum="fundDataNum"></AssetsBasic>
-                <AssetsModel v-if="infoOpen" :info="tableInfoForm" :list="tableInfoList"></AssetsModel>
-            </el-main>
-        </el-container>
-    </div>
+  <div>
+      <el-container style="height: 1000px">
+        <el-aside>
+
+          <el-tree :data="assetStructureList"
+                   :props="defaultProps"
+                   @node-click="handleNodeClick"></el-tree>
+        </el-aside>
+        <el-main>
+
+
+          <AssetsBasic :infoOpen="infoOpen" :fundDataNum="fundDataNum"></AssetsBasic>
+          <AssetsModel v-if=""></AssetsModel>
+        </el-main>
+      </el-container>
+  </div>
 </template>

 <script>

 import {getTableTree} from "@/api/etl/etl";
 import AssetsBasic from "@/views/etl/construction/AssetsBasic.vue";
-import AssetsModel from "@/views/etl/construction/AssetsModel.vue";

 export default {
-    name:'construction',
-    components:{AssetsModel, AssetsBasic },
-    data() {
-        return {
-            //结构标题
-            title: null,
-            //查看详细资产结构
-            infoOpen: false,
-            //资产结构与数据结构载体
-            tableInfoForm:{},
-            //当前数据库列表
-            tableInfoList:[],
-            //结构数据量
-            fundDataNum:{
-                basicNum: null,
-                tableNum: null,
-                structureNum: null,
-            },
-            childrenList: [],
-            assetStructureList: [],
-            defaultProps: {
-                children: 'children',
-                label: 'tableName'
-            },
-        };
-    },
-    created() {
-        this.getList()
-    },
-    methods: {
-        //获取数据
-        getList(){
-            this.fundDataNum ={
-                basicNum: 0,
-                tableNum: 0,
-                structureNum: 0,
-            },
-                //树级结构内信息
-                getTableTree().then(response => {
-                    this.data = []
-                    response.data.forEach(data => {
-                        //几个链接（资产接入）
-                        this.fundDataNum.basicNum+=1
-                        let child = [];
-                        let info = data.basicConfigInfo;
-                        data.children.forEach(tableInfo => {
-                            //几张表（资产模型）
-                            this.fundDataNum.tableNum +=1
-                            //多少字段（资产结构）
-                            this.fundDataNum.structureNum+=tableInfo.structureList.length
-                            child.push({
-                                'tableName':tableInfo.tableName,
-                                'info':tableInfo
-                            })
-                        })
-                        //子级存入
-                        this.assetStructureList.push({
-                            'info':info,
-                            'tableName': info.dataResourceName+'('+info.databaseName+'-'+info.dataSourcesSystemName+')',
-                            'children':child,
-                        })
-                    })
+  name:'construction',
+  components:{ AssetsBasic },
+  data() {
+    return {
+      //查看详细资产结构
+      infoOpen: false,
+      //资产结构与数据结构载体
+      tableInfoForm:{},
+      //当前数据库列表
+      tableInfoList:[],
+      //结构数据量
+      fundDataNum:{
+        basicNum: null,
+        tableNum: null,
+        structureNum: null,
+      },
+      childrenList: [],
+      assetStructureList: [],
+      defaultProps: {
+        children: 'children',
+        label: 'tableName'
+      },
+    };
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    //获取数据
+    getList(){
+      this.fundDataNum ={
+        basicNum: 0,
+        tableNum: 0,
+        structureNum: 0,
+      },
+          //树级结构内信息
+          getTableTree().then(response => {
+            this.data = []
+            response.data.forEach(data => {
+              //几个链接（资产接入）
+              this.fundDataNum.basicNum+=1
+              let child = [];
+              let info = data.basicConfigInfo;
+              data.children.forEach(tableInfo => {
+                //几张表（资产模型）
+                this.fundDataNum.tableNum +=1
+                //多少字段（资产结构）
+                this.fundDataNum.structureNum+=tableInfo.structureList.length
+                child.push({
+                  'tableName':tableInfo.tableName,
+                  'info':tableInfo
                })
-            console.log(this.assetStructureList)
-        },
-        //获取具体表相关数据
-        handleNodeClick(data) {
-            //获取assetStructureList中的对象，
-            let info = this.assetStructureList.find(assent =>
-                assent.info.id === data.info.id
-            )
-            this.infoOpen = true
-            //先将对象存入infoForm对象
-            this.tableInfoForm = data
-            //如果判断对象不存在，重新给form 和 list 赋值
-            if (info !== undefined){
-                this.tableInfoList = data.children
-                this.tableInfoForm = data.children[0]
-            }else {
-                info = this.assetStructureList.find(assent =>
-                    assent.info.id === this.tableInfoForm.info.basicId
-                )
-                this.tableInfoList = info.children
-            }
-            // console.log('tableList')
-            // console.log(this.tableInfoList)
-            // console.log('tableForm')
-            // console.log(this.tableInfoForm)
-        },
-    }
+              })
+              //子级存入
+              this.assetStructureList.push({
+                'info':info,
+                'tableName': info.dataResourceName+'('+info.databaseName+'-'+info.dataSourcesSystemName+')',
+                'children':child,
+              })
+
+            })
+
+          })
+      console.log(this.assetStructureList)
+    },
+    //获取具体表相关数据
+    handleNodeClick(data) {
+      console.log(data);
+      this.infoOpen = true
+      if (data.length()===3){
+        this.tableInfoList = data
+        this.tableInfoForm = data.children[0]
+      }else {
+        this.tableInfoForm = data
+        let info = this.assetStructureList.stream.filter(assent =>
+            assent.info.id===data.basicId
+        )
+        console.log(info)
+        this.tableInfoList = info[0].children
+      }
+      console.log(this.tableInfoList)
+      console.log(this.tableInfoForm)
+    },
+  }
 };
 </script>
 <style>

 .el-aside {
-    background-color: #ffffff;
-    color: #333;
-    text-align: center;
-    line-height: 100%;
+  background-color: #ffffff;
+  color: #333;
+  text-align: center;
+  line-height: 100%;
 }

 .el-main {
-    background-color: #E9EEF3;
-    color: #333;
-    text-align: center;
-    line-height: 100%;
+  background-color: #E9EEF3;
+  color: #333;
+  text-align: center;
+  line-height: 100%;
 }

 body > .el-container {
-    margin-bottom: 40px;
+  margin-bottom: 40px;
 }

 </style>
--- a/src/views/system/notice/index.vue
+++ b/src/views/system/notice/index.vue
@ -264,7 +264,7 @@ export default {
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.noticeId)
-      this.single = selection.length != 1
+      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
@ -287,7 +287,7 @@ export default {
    submitForm: function () {
      this.$refs["form"].validate(valid => {
        if (valid) {
-          if (this.form.noticeId != undefined) {
+          if (this.form.noticeId !== undefined) {
            updateNotice(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
Author	SHA1	Message	Date
xiaohuang	180fd905fc	资产结构测试5 信息统计组件	2024-04-25 22:25:39 +08:00
xiaohuang	6daac51b9c	资产结构测试4 左边目录已经和接口对接成功	2024-04-25 14:17:26 +08:00