feat(frontend):数据集、视图名称通过鼠标hover事件，弹出与其关联的数据集 数据源等详情

frontend/src/lang/zh.js

@@ -779,9 +779,14 @@ export default {
     showRow: '显示行',
     add_excel_table: '添加Excel数据集',
     add_custom_table: '添加自助数据集',
-    upload_file: '上传文件'
+    upload_file: '上传文件',
+    detail: '详情',
+    type: '类型',
+    create_by: '创建者',
+    create_time: '创建时间'
   },
   datasource: {
+    datasource: '数据源',
     create: '新建数据连接',
     type: '类型',
     please_choose_type: '请选择数据源类型',

frontend/src/views/chart/view/ChartEdit.vue

@@ -2,7 +2,16 @@
   <el-row style="height: 100%;overflow-y: hidden;width: 100%;">
     <span v-show="false">{{ vId }}</span>
     <el-row style="height: 40px;background-color: white" class="padding-lr">
-      <span style="line-height: 40px;">{{ view.name }}</span>
+      <el-popover
+        placement="right-start"
+        width="400"
+        trigger="hover"
+        @show="showTab"
+        @hide="hideTab"
+      >
+        <dataset-chart-detail type="chart" :data="view" :tab-status="tabStatus" />
+        <span slot="reference" style="line-height: 40px;cursor: pointer;">{{ view.name }}</span>
+      </el-popover>
       <span style="float: right;line-height: 40px;">
         <el-button size="mini" @click="closeEdit">
           {{ $t('chart.close') }}
@@ -229,6 +238,7 @@ import QuotaItem from '../components/drag-item/QuotaItem'
 import FilterItem from '../components/drag-item/FilterItem'
 import ChartComponent from '../components/ChartComponent'
 import bus from '@/utils/bus'
+import DatasetChartDetail from '../../dataset/common/DatasetChartDetail'
 
 // shape attr,component style
 import {
@@ -255,7 +265,7 @@ import QuotaFilterEditor from '../components/filter/QuotaFilterEditor'
 
 export default {
   name: 'ChartEdit',
-  components: { QuotaFilterEditor, BackgroundColorSelector, FilterItem, XAxisSelector, YAxisSelector, TooltipSelector, LabelSelector, LegendSelector, TitleSelector, SizeSelector, ColorSelector, ChartComponent, QuotaItem, DimensionItem, draggable },
+  components: { DatasetChartDetail, QuotaFilterEditor, BackgroundColorSelector, FilterItem, XAxisSelector, YAxisSelector, TooltipSelector, LabelSelector, LegendSelector, TitleSelector, SizeSelector, ColorSelector, ChartComponent, QuotaItem, DimensionItem, draggable },
   data() {
     return {
       table: {},
@@ -296,7 +306,8 @@ export default {
         name: [
           { required: true, message: this.$t('commons.input_content'), trigger: 'change' }
         ]
-      }
+      },
+      tabStatus: false
     }
   },
   computed: {
@@ -577,6 +588,13 @@ export default {
     },
     resetRename() {
       // this.itemForm = {}
+    },
+
+    showTab() {
+      this.tabStatus = true
+    },
+    hideTab() {
+      this.tabStatus = false
     }
   }
 }

frontend/src/views/dataset/common/DatasetChartDetail.vue

@@ -0,0 +1,165 @@
+<template>
+  <el-col>
+    <el-row>
+      <span style="font-weight: 500;">{{ $t('dataset.detail') }}</span>
+    </el-row>
+    <el-col>
+      <el-tabs v-if="tabStatus" v-model="tabActive" class="info-tab">
+        <el-tab-pane v-if="type === 'chart'" :label="$t('chart.datalist')" name="chart">
+          <el-col class="info-item">
+            <p class="info-title">{{ $t('commons.name') }}</p>
+            <p class="info-content">{{ detail.chart.name }}</p>
+          </el-col>
+          <el-col class="info-item">
+            <p class="info-title">{{ $t('chart.chart_type') }}</p>
+            <svg-icon v-if="detail.chart.type" :icon-class="detail.chart.type" />
+          </el-col>
+          <el-col class="info-item">
+            <p class="info-title">{{ $t('chart.title') }}</p>
+            <p class="info-content">{{ detail.chart.title || 'N/A' }}</p>
+          </el-col>
+          <el-col class="info-item">
+            <p class="info-title">{{ $t('dataset.create_by') }}</p>
+            <p class="info-content">{{ detail.chart.createBy }}</p>
+          </el-col>
+          <el-col class="info-item">
+            <p class="info-title">{{ $t('dataset.create_time') }}</p>
+            <p class="info-content">{{ detail.chart.createTime | timestampFormatDate }}</p>
+          </el-col>
+        </el-tab-pane>
+
+        <el-tab-pane :label="$t('dataset.datalist')" name="table">
+          <el-col class="info-item">
+            <p class="info-title">{{ $t('commons.name') }}</p>
+            <p class="info-content">{{ detail.table.name }}</p>
+          </el-col>
+          <el-col class="info-item">
+            <p class="info-title">{{ $t('dataset.type') }}</p>
+            <p v-if="detail.table.type === 'db'" class="info-content">{{ $t('dataset.db_data') }}</p>
+            <p v-if="detail.table.type === 'sql'" class="info-content">{{ $t('dataset.sql_data') }}</p>
+            <p v-if="detail.table.type === 'excel'" class="info-content">{{ $t('dataset.excel_data') }}</p>
+            <p v-if="detail.table.type === 'custom'" class="info-content">{{ $t('dataset.custom_data') }}</p>
+          </el-col>
+          <el-col class="info-item">
+            <p class="info-title">{{ $t('dataset.mode') }}</p>
+            <p v-if="detail.table.mode === 0" class="info-content">{{ $t('dataset.direct_connect') }}</p>
+            <p v-if="detail.table.mode === 1" class="info-content">{{ $t('dataset.sync_data') }}</p>
+          </el-col>
+          <el-col class="info-item">
+            <p class="info-title">{{ $t('dataset.create_by') }}</p>
+            <p class="info-content">{{ detail.table.createBy }}</p>
+          </el-col>
+          <el-col class="info-item">
+            <p class="info-title">{{ $t('dataset.create_time') }}</p>
+            <p class="info-content">{{ detail.table.createTime | timestampFormatDate }}</p>
+          </el-col>
+        </el-tab-pane>
+
+        <el-tab-pane :label="$t('datasource.datasource')" name="datasource">
+          <el-col class="info-item">
+            <p class="info-title">{{ $t('commons.name') }}</p>
+            <p class="info-content">{{ detail.datasource.name }}</p>
+          </el-col>
+          <el-col class="info-item">
+            <p class="info-title">{{ $t('commons.description') }}</p>
+            <p class="info-content">{{ detail.datasource.desc || 'N/A' }}</p>
+          </el-col>
+          <el-col class="info-item">
+            <p class="info-title">{{ $t('datasource.type') }}</p>
+            <p class="info-content">{{ detail.datasource.type }}</p>
+          </el-col>
+          <el-col class="info-item">
+            <p class="info-title">{{ $t('dataset.create_time') }}</p>
+            <p class="info-content">{{ detail.datasource.createTime | timestampFormatDate }}</p>
+          </el-col>
+        </el-tab-pane>
+      </el-tabs>
+    </el-col>
+  </el-col>
+</template>
+
+<script>
+import { post } from '@/api/dataset/dataset'
+export default {
+  name: 'DatasetChartDetail',
+  props: {
+    type: {
+      type: String,
+      required: true
+    },
+    data: {
+      type: Object,
+      required: true
+    },
+    tabStatus: {
+      type: Boolean,
+      required: true
+    }
+  },
+  data() {
+    return {
+      tabActive: 'chart',
+      detail: {
+        chart: {},
+        table: {},
+        datasource: {}
+      }
+    }
+  },
+  watch: {
+    'data': function() {
+      this.init()
+    },
+    'type': function() {
+      this.typeChange()
+    },
+    'tabStatus': function() {
+      this.typeChange()
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    init() {
+      if (this.data.id) {
+        if (this.type === 'dataset') {
+          post('/dataset/table/datasetDetail/' + this.data.id, null).then(res => {
+            this.detail = res.data
+          })
+        } else if (this.type === 'chart') {
+          post('/chart/view/chartDetail/' + this.data.id, null).then(res => {
+            this.detail = res.data
+          })
+        }
+      }
+    },
+    typeChange() {
+      if (this.type === 'dataset') {
+        this.tabActive = 'table'
+      } else if (this.type === 'chart') {
+        this.tabActive = 'chart'
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .info-tab>>>.el-tabs__item{
+    font-weight: 400;
+    font-size: 12px;
+  }
+  .info-item{
+     margin: 6px 0;
+   }
+  .info-title{
+    margin: 0!important;
+    font-weight: 600;
+    font-size: 12px;
+  }
+  .info-content{
+    margin: 0!important;
+    font-size: 12px;
+  }
+</style>

frontend/src/views/dataset/data/ViewTable.vue

@@ -3,9 +3,18 @@
     <el-row>
       <el-row style="height: 26px;">
         <span v-show="false">{{ tableId }}</span>
-        <span style="line-height: 26px;">
-          {{ table.name }}
-        </span>
+        <el-popover
+          placement="right-start"
+          width="400"
+          trigger="hover"
+          @show="showTab"
+          @hide="hideTab"
+        >
+          <dataset-chart-detail type="dataset" :data="table" :tab-status="tabStatus" />
+          <span slot="reference" style="line-height: 26px;cursor: pointer;">
+            {{ table.name }}
+          </span>
+        </el-popover>
         <el-row style="float: right">
           <el-button v-if="table.type ==='sql'" size="mini" @click="editSql">
             {{ $t('dataset.edit_sql') }}
@@ -81,10 +90,11 @@
 import { getTable, getPreviewData, fieldList, batchEdit } from '@/api/dataset/dataset'
 import TabDataPreview from './TabDataPreview'
 import UpdateInfo from './UpdateInfo'
+import DatasetChartDetail from '../common/DatasetChartDetail'
 
 export default {
   name: 'ViewTable',
-  components: { UpdateInfo, TabDataPreview },
+  components: { DatasetChartDetail, UpdateInfo, TabDataPreview },
   data() {
     return {
       createViewDialog: false,
@@ -98,7 +108,8 @@ export default {
       tableFields: [],
       tableViewRowForm: {
         row: 1000
-      }
+      },
+      tabStatus: false
     }
   },
   computed: {
@@ -173,6 +184,13 @@ export default {
     reSearch(val) {
       this.tableViewRowForm = val
       this.initPreviewData()
+    },
+
+    showTab() {
+      this.tabStatus = true
+    },
+    hideTab() {
+      this.tabStatus = false
     }
   }
 }