修改data-visualization\utils

frontend/src/data-visualization/utils/DeShortcutKey.ts

@@ -1,6 +1,7 @@
 import eventBus from '@/data-visualization/utils/eventBus'
 import { dvMainStoreWithOut } from '@/data-visualization/store/modules/data-visualization/dvMain'
 import { snapshotStoreWithOut } from '@/data-visualization/store/modules/data-visualization/snapshot'
+import { copyStoreWithOut } from '@/data-visualization/store/modules/data-visualization/copy'
 import { composeStoreWithOut } from '@/data-visualization/store/modules/data-visualization/compose'
 import { lockStoreWithOut } from '@/data-visualization/store/modules/data-visualization/lock'
 import { storeToRefs } from 'pinia'
@@ -11,8 +12,9 @@ import { groupStyleRevert } from '@/data-visualization/utils/style'
 const dvMainStore = dvMainStoreWithOut()
 const composeStore = composeStoreWithOut()
 const snapshotStore = snapshotStoreWithOut()
+const copyStore = copyStoreWithOut()
 const lockStore = lockStoreWithOut()
-const { curComponent, isInEditor, editMode } = storeToRefs(dvMainStore)
+const { curComponent, editMode } = storeToRefs(dvMainStore)
 const { areaData } = storeToRefs(composeStore)
 
 const ctrlKey = 17,
@@ -86,7 +88,10 @@ const checkDialog = () => {
     }
   })
   document.querySelectorAll('.ed-popper').forEach(element => {
-    if (window.getComputedStyle(element).getPropertyValue('display') != 'none') {
+    if (
+      !element.classList?.contains('template-popper-tips') &&
+      window.getComputedStyle(element).getPropertyValue('display') != 'none'
+    ) {
       haveDialog = true
     }
   })
@@ -172,10 +177,11 @@ function releaseKeyCheck(keyType) {
 }
 
 function copy() {
-
+  copyStore.copy()
 }
 
 function paste() {
+  copyStore.paste(false)
   snapshotStore.recordSnapshotCache('key-paste')
 }
 
@@ -218,6 +224,7 @@ function groupAreaAdaptor(leftOffset = 0, topOffset = 0) {
 }
 
 function cut() {
+  copyStore.cut()
 }
 
 function redo() {

frontend/src/data-visualization/utils/RemoteJs.ts

@@ -0,0 +1,22 @@
+export const loadScript = (url: string, jsId?: string) => {
+  return new Promise(function (resolve, reject) {
+    const scriptId = jsId || 'de-fit2cloud-script-id'
+    let dom = document.getElementById(scriptId)
+    if (dom) {
+      dom.parentElement?.removeChild(dom)
+      dom = null
+    }
+    const script = document.createElement('script')
+
+    script.id = scriptId
+    script.onload = function () {
+      return resolve(null)
+    }
+    script.onerror = function () {
+      return reject(new Error('Load script from '.concat(url, ' failed')))
+    }
+    script.src = url
+    const head = document.head || document.getElementsByTagName('head')[0]
+    ;(document.body || head).appendChild(script)
+  })
+}

frontend/src/data-visualization/utils/canvasStyle.ts

@@ -6,6 +6,7 @@ import {
 } from '@/data-visualization/chart/components/editor/util/chart'
 
 import { dvMainStoreWithOut } from '@/data-visualization/store/modules/data-visualization/dvMain'
+import { useEmitt } from '@/data-visualization/hooks/web/useEmitt'
 import { defaultTo, merge } from 'lodash-es'
 const dvMainStore = dvMainStoreWithOut()
 
@@ -157,6 +158,9 @@ export const customStyleTrans = {
     axisLabel: ['fontSize'],
     splitLine: {
       lineStyle: ['width']
+    },
+    axisLine: {
+      lineStyle: ['width']
     }
   },
   yAxis: {
@@ -164,6 +168,9 @@ export const customStyleTrans = {
     axisLabel: ['fontSize'],
     splitLine: {
       lineStyle: ['width']
+    },
+    axisLine: {
+      lineStyle: ['width']
     }
   },
   yAxisExt: {
@@ -171,6 +178,9 @@ export const customStyleTrans = {
     axisLabel: ['fontSize'],
     splitLine: {
       lineStyle: ['width']
+    },
+    axisLine: {
+      lineStyle: ['width']
     }
   },
   misc: {
@@ -283,7 +293,14 @@ export const THEME_ATTR_TRANS_MAIN = {
     color: 'color',
     proportionSeriesFormatter: ['color']
   },
-  tooltip: ['color']
+  tooltip: ['color'],
+  misc: {
+    bullet: {
+      bar: {
+        target: ['fill']
+      }
+    }
+  }
 }
 
 export const THEME_ATTR_TRANS_MAIN_SYMBOL = {
@@ -450,7 +467,32 @@ export function adaptTitleFontFamily(fontFamily, viewInfo) {
 }
 
 export function adaptTitleFontFamilyAll(fontFamily) {
-  
+  const componentData = dvMainStore.componentData
+  componentData.forEach(item => {
+    if (item.component === 'UserView') {
+      const viewDetails = dvMainStore.canvasViewInfo[item.id]
+      adaptTitleFontFamily(fontFamily, viewDetails)
+      useEmitt().emitter.emit('renderChart-' + item.id, viewDetails)
+    } else if (item.component === 'Group') {
+      item.propValue.forEach(groupItem => {
+        if (groupItem.component === 'UserView') {
+          const viewDetails = dvMainStore.canvasViewInfo[groupItem.id]
+          adaptTitleFontFamily(fontFamily, viewDetails)
+          useEmitt().emitter.emit('renderChart-' + groupItem.id, viewDetails)
+        }
+      })
+    } else if (item.component === 'DeTabs') {
+      item.propValue.forEach(tabItem => {
+        tabItem.componentData.forEach(tabComponent => {
+          if (tabComponent.component === 'UserView') {
+            const viewDetails = dvMainStore.canvasViewInfo[tabComponent.id]
+            adaptTitleFontFamily(fontFamily, viewDetails)
+            useEmitt().emitter.emit('renderChart-' + tabComponent.id, viewDetails)
+          }
+        })
+      })
+    }
+  })
 }
 
 export function adaptCurThemeCommonStyle(component) {
@@ -460,9 +502,16 @@ export function adaptCurThemeCommonStyle(component) {
   // 背景融合-Begin 如果是大屏['CanvasBoard', 'CanvasIcon', 'Picture']组件不需要设置背景
   if (
     dvMainStore.dvInfo.type === 'dataV' &&
-    ['CanvasBoard', 'CanvasIcon', 'Picture', 'Group', 'SvgTriangle', 'SvgStar'].includes(
-      component.component
-    )
+    [
+      'CanvasBoard',
+      'CanvasIcon',
+      'Picture',
+      'Group',
+      'SvgTriangle',
+      'SvgStar',
+      'RectShape',
+      'CircleShape'
+    ].includes(component.component)
   ) {
     component.commonBackground['backgroundColorSelect'] = false
     component.commonBackground['innerPadding'] = 0
@@ -485,7 +534,7 @@ export function adaptCurThemeCommonStyle(component) {
     // 图表-Begin
     const curViewInfo = dvMainStore.canvasViewInfo[component.id]
     adaptCurTheme(curViewInfo.customStyle, curViewInfo.customAttr)
-
+    useEmitt().emitter.emit('renderChart-' + component.id, curViewInfo)
     // 图表-Begin
   } else if (component.component === 'Group') {
     component.propValue.forEach(groupItem => {

frontend/src/data-visualization/utils/changeComponentsSizeWithScale.ts

@@ -2,7 +2,7 @@ import { deepCopy } from './utils'
 import { divide, multiply } from 'mathjs'
 import { dvMainStoreWithOut } from '@/data-visualization/store/modules/data-visualization/dvMain'
 import { storeToRefs } from 'pinia'
-import { groupSizeStyleAdaptor } from '@/data-visualization/utils/style'
+import { groupItemStyleAdaptor, groupSizeStyleAdaptor } from '@/data-visualization/utils/style'
 import { nextTick } from 'vue'
 
 const dvMainStore = dvMainStoreWithOut()
@@ -53,7 +53,17 @@ function changeComponentsSizeWithScaleCircle(componentDataCopy, scale) {
     })
 
     if (['Group'].includes(component.component)) {
-      changeComponentsSizeWithScaleCircle(component.propValue, scale)
+      groupSizeStyleAdaptor(component)
+      const parentStyle = component.style
+      component.propValue.forEach(componentInner => {
+        if (['DeTabs'].includes(componentInner.component)) {
+          componentInner.propValue.forEach(tabItem => {
+            changeComponentsSizeWithScaleCircle(tabItem.componentData, scale)
+          })
+        } else {
+          groupItemStyleAdaptor(componentInner, parentStyle)
+        }
+      })
     } else if (['DeTabs'].includes(component.component)) {
       component.propValue.forEach(tabItem => {
         changeComponentsSizeWithScaleCircle(tabItem.componentData, scale)

frontend/src/data-visualization/utils/components.ts

@@ -51,32 +51,32 @@ export const componentsMap = {
   CanvasBoardAttr: CanvasBoardAttr,
   CanvasIcon: CanvasIcon,
   CanvasIconAttr: CanvasIconAttr,
-  // DeTabs: DeTabs,
-  // DeTabsAttr: DeTabsAttr,
-  // DeGraphical: DeGraphical,
-  // DeGraphicalAttr: DeGraphicalAttr,
-  // CircleShape: CircleShape,
-  // CircleShapeAttr: CircleShapeAttr,
-  // RectShape: RectShape,
-  // RectShapeAttr: RectShapeAttr,
-  // SvgTriangle: SvgTriangle,
-  // SvgTriangleAttr: SvgTriangleAttr,
-  // DeTimeClock: DeTimeClock,
-  // DeTimeClockAttr: DeTimeClockAttr,
-  // GroupArea: GroupArea,
-  // GroupAreaAttr: GroupAreaAttr,
-  // DeFrame: DeFrame,
-  // DeFrameAttr: DeFrameAttr,
-  // DeVideo: DeVideo,
-  // DeVideoAttr: DeVideoAttr,
-  // DeStreamMedia: DeStreamMedia,
-  // DeStreamMediaAttr: DeStreamMediaAttr,
-  // ScrollText: ScrollText,
-  // ScrollTextAttr: ScrollTextAttr,
-  // PopArea: PopArea,
-  // PopAreaAttr: PopAreaAttr,
-  // PictureGroup: PictureGroup,
-  // PictureGroupAttr: PictureGroupAttr
+  DeTabs: DeTabs,
+  DeTabsAttr: DeTabsAttr,
+  DeGraphical: DeGraphical,
+  DeGraphicalAttr: DeGraphicalAttr,
+  CircleShape: CircleShape,
+  CircleShapeAttr: CircleShapeAttr,
+  RectShape: RectShape,
+  RectShapeAttr: RectShapeAttr,
+  SvgTriangle: SvgTriangle,
+  SvgTriangleAttr: SvgTriangleAttr,
+  DeTimeClock: DeTimeClock,
+  DeTimeClockAttr: DeTimeClockAttr,
+  GroupArea: GroupArea,
+  GroupAreaAttr: GroupAreaAttr,
+  DeFrame: DeFrame,
+  DeFrameAttr: DeFrameAttr,
+  DeVideo: DeVideo,
+  DeVideoAttr: DeVideoAttr,
+  DeStreamMedia: DeStreamMedia,
+  DeStreamMediaAttr: DeStreamMediaAttr,
+  ScrollText: ScrollText,
+  ScrollTextAttr: ScrollTextAttr,
+  PopArea: PopArea,
+  PopAreaAttr: PopAreaAttr,
+  PictureGroup: PictureGroup,
+  PictureGroupAttr: PictureGroupAttr
 }
 
 export default function findComponent(key) {

frontend/src/data-visualization/utils/decomposeComponent.ts

@@ -3,11 +3,20 @@ export default function decomposeComponent(
   component,
   editorRect,
   parentStyle,
-  canvasId = 'canvas-main'
+  canvasId = 'canvas-main',
+  parentGroupStyle?
 ) {
   // 计算出元素新的 top left 坐标
   component.style.left = component.style.left + parentStyle.left
   component.style.top = component.style.top + parentStyle.top
-  component.groupStyle = {}
+  if (parentGroupStyle && component.groupStyle) {
+    const originLeftScale = component.groupStyle['left'] / component.groupStyle['width']
+    const originTopScale = component.groupStyle['top'] / component.groupStyle['height']
+    component.groupStyle['width'] = component.groupStyle['width'] * parentGroupStyle['width']
+    component.groupStyle['height'] = component.groupStyle['height'] * parentGroupStyle['height']
+    component.groupStyle['left'] =
+      parentStyle.left + component.groupStyle['width'] * originLeftScale
+    component.groupStyle['top'] = parentStyle.top + component.groupStyle['height'] * originTopScale
+  }
   component.canvasId = canvasId
 }

frontend/src/data-visualization/utils/imgUtils.ts

@@ -1,15 +1,17 @@
 import html2canvas from 'html2canvas'
 import JsPDF from 'jspdf'
-import { dvMainStoreWithOut } from '@/data-visualization/store/modules/data-visualization/dvMain'
-import { useEmbedded } from '@/data-visualization/store/modules/embedded'
+import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
+import { useEmbedded } from '@/store/modules/embedded'
 import { storeToRefs } from 'pinia'
-import { findResourceAsBase64 } from '@/api/data-visualization/staticResource'
+import { findResourceAsBase64 } from '@/api/staticResource'
+import FileSaver from 'file-saver'
+import { deepCopy } from '@/utils/utils'
 import { toPng } from 'html-to-image'
 const embeddedStore = useEmbedded()
 const dvMainStore = dvMainStoreWithOut()
 const { canvasStyleData, componentData, canvasViewInfo, canvasViewDataInfo, dvInfo } =
   storeToRefs(dvMainStore)
-const basePath = import.meta.env.VITE_API_BASE_URL
+const basePath = import.meta.env.VITE_API_BASEPATH
 
 export function formatterUrl(url: string) {
   return url.replace('//de2api', '/de2api')
@@ -35,7 +37,39 @@ export function imgUrlTrans(url) {
 
 export function download2AppTemplate(downloadType, canvasDom, name, attachParams, callBack?) {
   try {
-  
+    findStaticSource(function (staticResource) {
+      html2canvas(canvasDom).then(canvas => {
+        const canvasViewDataTemplate = deepCopy(canvasViewInfo.value)
+        Object.keys(canvasViewDataTemplate).forEach(viewId => {
+          canvasViewDataTemplate[viewId].data = canvasViewDataInfo.value[viewId]
+        })
+        const snapshot = canvas.toDataURL('image/jpeg', 0.1) // 0.1是图片质量
+        if (snapshot !== '') {
+          const templateInfo = {
+            name: name,
+            templateType: 'self',
+            snapshot: snapshot,
+            dvType: dvInfo.value.type,
+            nodeType: downloadType,
+            version: 3,
+            canvasStyleData: JSON.stringify(canvasStyleData.value),
+            componentData: JSON.stringify(componentData.value),
+            dynamicData: JSON.stringify(canvasViewDataTemplate),
+            staticResource: JSON.stringify(staticResource || {}),
+            appData: attachParams ? JSON.stringify(attachParams) : null
+          }
+          const blob = new Blob([JSON.stringify(templateInfo)], { type: '' })
+          if (downloadType === 'template') {
+            FileSaver.saveAs(blob, name + '-TEMPLATE.DET2')
+          } else if (downloadType === 'app') {
+            FileSaver.saveAs(blob, name + '-APP.DET2APP')
+          }
+        }
+        if (callBack) {
+          callBack()
+        }
+      })
+    })
   } catch (e) {
     if (callBack) {
       callBack()
@@ -140,7 +174,8 @@ function findStaticSourceInner(componentDataInfo, staticResource) {
     ) {
       staticResource.push(item.propValue['url'])
     } else if (
-      item.component === 'picture-group' &&
+      item.component === 'UserView' &&
+      item.innerType === 'picture-group' &&
       item.propValue['urlList'] &&
       item.propValue['urlList'].length > 0
     ) {

frontend/src/data-visualization/utils/style.ts

@@ -267,11 +267,14 @@ function dataVTabSizeStyleAdaptor(tabComponent) {
   tabComponent.propValue.forEach(tabItem => {
     tabItem.componentData.forEach(tabComponent => {
       groupItemStyleAdaptor(tabComponent, parentStyleAdaptor)
+      if (['Group'].includes(tabComponent.component)) {
+        groupSizeStyleAdaptor(tabComponent)
+      }
     })
   })
 }
 
-function groupItemStyleAdaptor(component, parentStyle) {
+export function groupItemStyleAdaptor(component, parentStyle) {
   // 分组还原逻辑
   // 当发上分组缩放是，要将内部组件按照比例转换
   const styleScale = component.groupStyle

frontend/src/data-visualization/utils/timeUitils.ts

@@ -75,23 +75,6 @@ const getSecondEnd = timestamp => {
   return [+new Date(timestamp), +new Date(timestamp) + 999]
 }
 
-const getYearBegin = timestamp => {
-  const time = new Date(timestamp)
-  return +new Date(time.getFullYear(), 0, 1)
-}
-
-const getMonthBegin = timestamp => {
-  const time = new Date(timestamp)
-  const date = new Date(time.getFullYear(), time.getMonth(), 1)
-  date.setDate(1)
-  date.setMonth(date.getMonth() + 1)
-  return +new Date(time.getFullYear(), time.getMonth(), 1)
-}
-
-const getDayBegin = timestamp => {
-  return +new Date(timestamp)
-}
-
 const getUtcTime = timestamp => {
   if (timestamp) {
     const time = new Date(timestamp)

frontend/src/data-visualization/utils/utils.ts

@@ -1,8 +1,13 @@
-export function deepCopy(target: any) {
+import { useCache } from '@/data-visualization/hooks/web/useCache'
+import { loadScript } from '@/data-visualization/utils/RemoteJs'
+import { ElMessage } from 'element-plus-secondary'
+
+const { wsCache } = useCache()
+export function deepCopy(target) {
   if (target === null || target === undefined) {
     return target
   } else if (typeof target == 'object') {
-    const result: any = Array.isArray(target) ? [] : {}
+    const result = Array.isArray(target) ? [] : {}
     for (const key in target) {
       if (target[key] === null || target[key] === undefined) {
         result[key] = target[key]
@@ -20,26 +25,26 @@ export function deepCopy(target: any) {
   return target
 }
 
-export function swap(arr: any, i: any, j: any) {
+export function swap(arr, i, j) {
   const temp = arr[i]
   arr[i] = arr[j]
   arr[j] = temp
 }
 
-export function _$(selector: any) {
+export function _$(selector) {
   return document.querySelector(selector)
 }
 
-export function $(selector: any) {
+export function $(selector) {
   return document.querySelector(selector)
 }
 
 const components = ['VText', 'RectShape', 'CircleShape']
-export function isPreventDrop(component: any) {
+export function isPreventDrop(component) {
   return !components.includes(component) && !component.startsWith('SVG')
 }
 
-export function checkAddHttp(url: any) {
+export function checkAddHttp(url) {
   if (!url) {
     return url
   } else if (/^(http(s)?:\/\/)/.test(url.toLowerCase())) {
@@ -101,6 +106,8 @@ export const checkPlatform = () => {
   return true
 }
 export const cleanPlatformFlag = () => {
+  const platformKey = 'out_auth_platform'
+  wsCache.delete(platformKey)
   return false
 }
 export const isInIframe = () => {
@@ -135,6 +142,33 @@ export function isISOMobile() {
 
 export const isDingTalk = window.navigator.userAgent.toLowerCase().includes('dingtalk')
 
+export const setTitle = (title?: string) => {
+  if (!isDingTalk) {
+    document.title = title || 'DataEase'
+    return
+  }
+  const jsUrl = 'https://g.alicdn.com/dingding/dingtalk-jsapi/3.0.25/dingtalk.open.js'
+  const jsId = 'fit2cloud-dataease-v2-platform-client-dingtalk'
+  if (window['dd'] && window['dd'].biz?.navigation?.setTitle) {
+    window['dd'].biz.navigation.setTitle({
+      title: title
+    })
+    return
+  }
+  const awaitMethod = loadScript(jsUrl, jsId)
+  awaitMethod
+    .then(() => {
+      window['dd'].ready(() => {
+        window['dd'].biz.navigation.setTitle({
+          title: title
+        })
+      })
+    })
+    .catch(() => {
+      document.title = title || 'DataEase'
+    })
+}
+
 export function isTablet() {
   const userAgent = navigator.userAgent
   const tabletRegex = /iPad|Silk|Galaxy Tab|PlayBook|BlackBerry|(tablet|ipad|playbook)/i
@@ -199,8 +233,76 @@ export const getBrowserLocale = () => {
   }
   return language
 }
-
-
-export const nameTrim = (target: {}, msg = '名称字段长度1-64个字符') => {
- 
+export const getLocale = () => {
+  return wsCache.get('user.language') || getBrowserLocale() || 'zh-CN'
+}
+
+export const isFreeFolder = (node, flag) => {
+  const oid = wsCache.get('user.oid')
+  if (!oid) {
+    return false
+  }
+  const freeRootId = (Number(oid) + flag).toString()
+  let cNode = node
+  while (cNode) {
+    const data = cNode.data
+    const id = data['id']
+    if (id === freeRootId) {
+      return true
+    }
+    cNode = cNode['parent']
+  }
+  return false
+}
+
+export const filterFreeFolder = (list, flagText) => {
+  const flagArray = ['dashboard', 'dataV', 'dataset', 'datasource']
+  const index = flagArray.findIndex(item => item === flagText)
+  const oid = wsCache.get('user.oid')
+  if (!oid || index < 0) {
+    return
+  }
+  const freeRootId = (Number(oid) + index + 1).toString()
+  let len = list.length
+  while (len--) {
+    const node = list[len]
+    if (node['id'] === freeRootId) {
+      list.splice(len, 1)
+      return
+    }
+    if (node['id'] === '0') {
+      const children = node['children']
+      let innerLen = children?.length
+      while (innerLen--) {
+        const kid = children[innerLen]
+        if (kid['id'] === freeRootId) {
+          children.splice(innerLen, 1)
+          return
+        }
+      }
+    }
+  }
+}
+export const nameTrim = (target: {}, msg = '名称字段长度1-64个字符') => {
+  if (target.name) {
+    target.name = target.name.trim()
+    if (target.name.length < 1 || target.name.length > 64) {
+      ElMessage.warning(msg)
+      throw new Error(msg)
+    }
+  }
+}
+
+export const getActiveCategories = contents => {
+  const result = ['最近使用']
+  if (contents) {
+    contents.forEach(item => {
+      if (item.showFlag) {
+        item.categories.forEach(category => {
+          result.push(category.name)
+        })
+      }
+    })
+  }
+  return new Set(result)
 }

frontend/src/data-visualization/utils/viewUtils.ts

@@ -10,25 +10,25 @@ export function viewFieldTimeTrans(viewDataInfo, params) {
       : []
 
     const idNameMap = fields.reduce((pre, next) => {
-      pre[next['id']] = next['dataeaseName']
+      pre[next['id']] = next['gisbiName']
       return pre
     }, {})
 
     const nameTypeMap = fields.reduce((pre, next) => {
-      pre[next['dataeaseName']] = next['deType']
+      pre[next['gisbiName']] = next['deType']
       return pre
     }, {})
 
     const nameDateStyleMap = fields.reduce((pre, next) => {
-      pre[next['dataeaseName']] = next['dateStyle']
+      pre[next['gisbiName']] = next['dateStyle']
       return pre
     }, {})
 
     params.dimensionList.forEach(dimension => {
-      const dataeaseName = idNameMap[dimension.id]
+      const gisbiName = idNameMap[dimension.id]
       // deType === 1 表示是时间类型
-      if (nameTypeMap[dataeaseName] === 1) {
-        dimension['timeValue'] = getRange(dimension.value, nameDateStyleMap[dataeaseName])
+      if (nameTypeMap[gisbiName] === 1) {
+        dimension['timeValue'] = getRange(dimension.value, nameDateStyleMap[gisbiName])
       }
     })
   }