feat(图表): 明细表显示图片 #10621

core/core-backend/src/main/resources/db/desktop/V2.0__core_ddl.sql

@@ -136,7 +136,7 @@ CREATE TABLE `core_dataset_table_field`
     `group_type`       varchar(50)  DEFAULT NULL COMMENT '维度/指标标识 d:维度，q:指标',
     `type`             varchar(255) NOT NULL COMMENT '原始字段类型',
     `size`             int          DEFAULT NULL,
-    `de_type`          int          NOT NULL COMMENT 'dataease字段类型：0-文本，1-时间，2-整型数值，3-浮点数值，4-布尔，5-地理位置，6-二进制',
+    `de_type`          int          NOT NULL COMMENT 'dataease字段类型：0-文本，1-时间，2-整型数值，3-浮点数值，4-布尔，5-地理位置，6-二进制，7-URL',
     `de_extract_type`  int          NOT NULL COMMENT 'de记录的原始类型',
     `ext_field`        int          DEFAULT NULL COMMENT '是否扩展字段 0原始 1复制 2计算字段...',
     `checked`          tinyint(1)   DEFAULT '1' COMMENT '是否选中',

core/core-backend/src/main/resources/db/migration/V2.0__core_ddl.sql

@@ -138,7 +138,7 @@ CREATE TABLE `core_dataset_table_field`
     `group_type`       varchar(50)  DEFAULT NULL COMMENT '维度/指标标识 d:维度，q:指标',
     `type`             varchar(255) NOT NULL COMMENT '原始字段类型',
     `size`             int          DEFAULT NULL,
-    `de_type`          int          NOT NULL COMMENT 'dataease字段类型：0-文本，1-时间，2-整型数值，3-浮点数值，4-布尔，5-地理位置，6-二进制',
+    `de_type`          int          NOT NULL COMMENT 'dataease字段类型：0-文本，1-时间，2-整型数值，3-浮点数值，4-布尔，5-地理位置，6-二进制，7-URL',
     `de_extract_type`  int          NOT NULL COMMENT 'de记录的原始类型',
     `ext_field`        int          DEFAULT NULL COMMENT '是否扩展字段 0原始 1复制 2计算字段...',
     `checked`          tinyint(1)   DEFAULT NULL DEFAULT '1' COMMENT '是否选中',

core/core-frontend/src/assets/svg/field_url.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1723456468440" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1514" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M578.133 675.627c-3.306-3.307-8.746-3.307-12.053 0L442.133 799.573c-57.386 57.387-154.24 63.467-217.6 0-63.466-63.466-57.386-160.213 0-217.6L348.48 458.027c3.307-3.307 3.307-8.747 0-12.054l-42.453-42.453c-3.307-3.307-8.747-3.307-12.054 0L170.027 527.467c-90.24 90.24-90.24 236.266 0 326.4s236.266 90.24 326.4 0L620.373 729.92c3.307-3.307 3.307-8.747 0-12.053l-42.24-42.24z m275.84-505.6c-90.24-90.24-236.266-90.24-326.4 0L403.52 293.973c-3.307 3.307-3.307 8.747 0 12.054l42.347 42.346c3.306 3.307 8.746 3.307 12.053 0l123.947-123.946c57.386-57.387 154.24-63.467 217.6 0 63.466 63.466 57.386 160.213 0 217.6L675.52 565.973c-3.307 3.307-3.307 8.747 0 12.054l42.453 42.453c3.307 3.307 8.747 3.307 12.054 0l123.946-123.947c90.134-90.24 90.134-236.266 0-326.506z" p-id="1515"></path><path d="M616.64 362.987c-3.307-3.307-8.747-3.307-12.053 0l-241.6 241.493c-3.307 3.307-3.307 8.747 0 12.053l42.24 42.24c3.306 3.307 8.746 3.307 12.053 0L658.773 417.28c3.307-3.307 3.307-8.747 0-12.053l-42.133-42.24z" p-id="1516"></path></svg>

core/core-frontend/src/components/icon-custom/src/Icon.vue

@@ -232,6 +232,7 @@ import field_location from '@/assets/svg/field_location.svg'
 import field_text from '@/assets/svg/field_text.svg'
 import field_time from '@/assets/svg/field_time.svg'
 import field_value from '@/assets/svg/field_value.svg'
+import field_url from '@/assets/svg/field_url.svg'
 import filterCenter from '@/assets/svg/filter-center.svg'
 import filterHCenter from '@/assets/svg/filter-h-center.svg'
 import filterHLeft from '@/assets/svg/filter-h-left.svg'
@@ -901,6 +902,7 @@ const iconMap = {
   field_text: field_text,
   field_time: field_time,
   field_value: field_value,
+  field_url: field_url,
   'filter-center': filterCenter,
   'filter-h-center': filterHCenter,
   'filter-h-left': filterHLeft,

core/core-frontend/src/utils/attr.ts

@@ -99,8 +99,17 @@ export const selectKey = ['textAlign', 'borderStyle', 'verticalAlign']
 
 export const horizontalPosition = ['headHorizontalPosition']
 
-export const fieldType = ['text', 'time', 'value', 'value', 'value', 'location']
+export const fieldType = ['text', 'time', 'value', 'value', 'value', 'location', 'binary', 'url']
-export const fieldTypeText = ['文本', '时间', '数值', '数值(小数)', '数值', '地理位置']
+export const fieldTypeText = [
+  '文本',
+  '时间',
+  '数值',
+  '数值(小数)',
+  '数值',
+  '地理位置',
+  '文件',
+  'URL'
+]
 
 export const optionMap = {
   textAlign: textAlignOptions,

core/core-frontend/src/views/chart/components/editor/drag-item/DimensionItem.vue

@@ -198,7 +198,7 @@ onMounted(() => {
           </el-icon>
           <el-icon>
             <Icon
-              :className="`field-icon-${fieldType[item.deType]}`"
+              :className="`field-icon-${fieldType[[2, 3].includes(item.deType) ? 2 : 0]}`"
               :name="`field_${fieldType[item.deType]}`"
             />
           </el-icon>

core/core-frontend/src/views/chart/components/editor/drag-item/QuotaItem.vue

@@ -292,7 +292,7 @@ onMounted(() => {
           </el-icon>
           <el-icon>
             <Icon
-              :className="`field-icon-${fieldType[item.deType]}`"
+              :className="`field-icon-${fieldType[[2, 3].includes(item.deType) ? 2 : 0]}`"
               :name="`field_${fieldType[item.deType]}`"
             />
           </el-icon>

core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/TableThresholdEdit.vue

@@ -178,7 +178,7 @@ const init = () => {
 }
 const initOptions = item => {
   if (item.field) {
-    if (item.field.deType === 0 || item.field.deType === 5) {
+    if ([0, 5, 7].includes(item.field.deType)) {
       item.options = JSON.parse(JSON.stringify(textOptions))
     } else if (item.field.deType === 1) {
       item.options = JSON.parse(JSON.stringify(dateOptions))
@@ -270,7 +270,9 @@ init()
               >
                 <el-icon style="margin-right: 8px">
                   <Icon
-                    :className="`field-icon-${fieldType[fieldOption.deType]}`"
+                    :className="`field-icon-${
+                      fieldType[[2, 3].includes(fieldOption.deType) ? 2 : 0]
+                    }`"
                     :name="`field_${fieldType[fieldOption.deType]}`"
                   />
                 </el-icon>

core/core-frontend/src/views/chart/components/editor/index.vue

@@ -2986,7 +2986,9 @@ const deleteChartFieldItem = id => {
                     >
                       <el-icon>
                         <Icon
-                          :class-name="`field-icon-${fieldType[element.deType]}`"
+                          :class-name="`field-icon-${
+                            fieldType[[2, 3].includes(element.deType) ? 2 : 0]
+                          }`"
                           :name="`field_${fieldType[element.deType]}`"
                         />
                       </el-icon>
@@ -3059,7 +3061,9 @@ const deleteChartFieldItem = id => {
                         >
                           <el-icon>
                             <Icon
-                              :class-name="`field-icon-${fieldType[ele.deType]}`"
+                              :class-name="`field-icon-${
+                                fieldType[[2, 3].includes(ele.deType) ? 2 : 0]
+                              }`"
                               :name="`field_${fieldType[ele.deType]}`"
                             />
                           </el-icon>

core/core-frontend/src/views/chart/components/js/panel/charts/table/table-info.ts

@@ -8,7 +8,25 @@ import { isNumber } from 'lodash-es'
 import { copyContent, SortTooltip } from '@/views/chart/components/js/panel/common/common_table'
 
 const { t } = useI18n()
-
+class ImageCell extends TableDataCell {
+  protected drawTextShape(): void {
+    const img = new Image()
+    const { x, y, width, height, fieldValue } = this.meta
+    img.src = fieldValue as string
+    img.onload = () => {
+      !this.cfg.children && (this.cfg.children = [])
+      this.textShape = this.addShape('image', {
+        attrs: {
+          x,
+          y,
+          width,
+          height,
+          img
+        }
+      })
+    }
+  }
+}
 /**
  * 明细表
  */
@@ -127,14 +145,17 @@ export class TableInfo extends S2ChartView<TableSheet> {
         }
         return new TableColCell(node, sheet, config)
       }
+    }
     s2Options.dataCell = viewMeta => {
-        if (viewMeta.colIndex === 0) {
+      const deType = axisMap[viewMeta.valueField]?.deType
-          viewMeta.fieldValue =
+      if (deType === 7) {
-            pageInfo.pageSize * (pageInfo.currentPage - 1) + viewMeta.rowIndex + 1
+        return new ImageCell(viewMeta, viewMeta?.spreadsheet)
+      }
+      if (viewMeta.colIndex === 0 && s2Options.showSeriesNumber) {
+        viewMeta.fieldValue = pageInfo.pageSize * (pageInfo.currentPage - 1) + viewMeta.rowIndex + 1
       }
       return new TableDataCell(viewMeta, viewMeta?.spreadsheet)
     }
-    }
     // tooltip
     this.configTooltip(chart, s2Options)
     // 隐藏表头，保留顶部的分割线, 禁用表头横向 resize

core/core-frontend/src/views/visualized/data/dataset/form/index.vue

@@ -138,7 +138,8 @@ const fieldOptions = [
   {
     label: t('dataset.value') + '(' + t('dataset.float') + ')',
     value: 3
-  }
+  },
+  { label: 'URL', value: 7 }
 ]
 
 const fieldOptionsText = [
@@ -739,6 +740,9 @@ const getIconName = (type: number) => {
   if (type === 5) {
     return 'location'
   }
+  if (type === 7) {
+    return 'url'
+  }
 }
 
 const allfields = ref([])
@@ -1632,7 +1636,9 @@ const getDsIconName = data => {
                       <ElIcon style="margin-right: 6px">
                         <Icon
                           :name="`field_${fieldType[column.deType]}`"
-                          :className="`field-icon-${fieldType[column.deType]}`"
+                          :className="`field-icon-${
+                            fieldType[[2, 3].includes(column.deType) ? 2 : 0]
+                          }`"
                         ></Icon>
                       </ElIcon>
                       <span class="ellipsis" :title="column.title" style="width: 120px">

sdk/extensions/extensions-datasource/src/main/java/io/dataease/extensions/datasource/dto/DatasetTableFieldDTO.java

@@ -82,7 +82,7 @@ public class DatasetTableFieldDTO implements Serializable {
     private Integer scale;
 
     /**
-     * dataease字段类型：0-文本，1-时间，2-整型数值，3-浮点数值，4-布尔，5-地理位置，6-二进制
+     * dataease字段类型：0-文本，1-时间，2-整型数值，3-浮点数值，4-布尔，5-地理位置，6-二进制, 7-URL
      */
     private Integer deType;