Merge branch 'feat/support-enum' into 'main_dev'

perf(src/packages): 自定义文本，支持枚举值显示name

See merge request yunteng/thingskit-view!253

+/**
+ * 此hook用于获取物模型
+ * @param entityId 设备id
+ * @returns
+ */
+
+import { getAttribute, getDeviceDetail } from '@/api/external/common'
+
+export function useTsl() {
+  const handleDeviceProfileAttributes = async (entityId: string) => {
+    const deviceDetailRes = await getDeviceDetail(entityId)
+    const { deviceProfileId } = deviceDetailRes
+    if (!deviceProfileId) return
+    const attributeRes = await getAttribute(deviceProfileId)
+    const dataFormat = handleDataFormat(deviceDetailRes, attributeRes)
+    return dataFormat
+  }
+
+  const handleDataFormat = (deviceDetail: Recordable, attributes: Recordable[]) => {
+    const { name, tbDeviceId } = deviceDetail
+    const attribute = attributes.map((item: Recordable) => ({
+      identifier: item.identifier,
+      name: item.name,
+      detail: item.detail
+    }))
+    return {
+      name,
+      tbDeviceId,
+      attribute
+    }
+  }
+
+  return {
+    handleDeviceProfileAttributes
+  }
+}

+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { OverrideTextEnumCommonConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+import { chartInitConfig } from '@/settings/designSetting'
+
+export enum WritingModeEnum {
+  HORIZONTAL = '水平',
+  VERTICAL = '垂直'
+}
+
+export const WritingModeObject = {
+  [WritingModeEnum.HORIZONTAL]: 'horizontal-tb',
+  [WritingModeEnum.VERTICAL]: 'vertical-rl'
+}
+
+export enum FontWeightEnum {
+  NORMAL = '常规',
+  BOLD = '加粗'
+}
+
+export const FontWeightObject = {
+  [FontWeightEnum.NORMAL]: 'normal',
+  [FontWeightEnum.BOLD]: 'bold'
+}
+
+export const option = {
+  link: '',
+  linkHead: 'http://',
+  dataset: '我是文本',
+  fontSize: 20,
+  fontColor: '#ffffff',
+  paddingX: 10,
+  paddingY: 10,
+  textAlign: 'center', // 水平对齐方式
+  fontWeight: 'normal',
+
+  // 边框
+  borderWidth: 0,
+  borderColor: '#ffffff',
+  borderRadius: 5,
+
+  // 字间距
+  letterSpacing: 5,
+  writingMode: 'horizontal-tb',
+  backgroundColor: '#00000000',
+
+  //跳转方式
+  linkMethod: 'default'
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = OverrideTextEnumCommonConfig.key
+  public attr = { ...chartInitConfig, w: 150, h: 40, zIndex: -1 }
+  public chartConfig = cloneDeep(OverrideTextEnumCommonConfig)
+  public option = cloneDeep(option)
+}

+<template>
+  <collapse-item name="信息" :expanded="true">
+    <setting-item-box name="文字" :alone="true">
+      <setting-item>
+        <n-input v-model:value="optionData.dataset" type="textarea" size="small"></n-input>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="链接" :alone="true">
+      <setting-item>
+        <n-input-group>
+          <n-select
+            v-model:value="optionData.linkHead"
+            size="small"
+            :style="{ width: '80%' }"
+            :options="linkHeadOptions"
+          />
+          <n-input v-model:value="optionData.link" size="small"></n-input>
+        </n-input-group>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="跳转方式" :alone="true">
+      <setting-item>
+        <n-input-group>
+          <n-select
+            v-model:value="optionData.linkMethod"
+            size="small"
+            :style="{ width: '80%' }"
+            :options="linkMethodOptions"
+          />
+          <n-button
+            :disabled="!optionData.linkMethod"
+            secondary
+            size="small"
+            @click="handleLinkClick(optionData.linkMethod)"
+            >跳转</n-button
+          >
+        </n-input-group>
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+
+  <collapse-item name="样式" :expanded="true">
+    <setting-item-box name="文字">
+      <setting-item name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.fontColor"></n-color-picker>
+      </setting-item>
+      <setting-item name="字体大小">
+        <n-input-number v-model:value="optionData.fontSize" size="small" placeholder="字体大小"></n-input-number>
+      </setting-item>
+      <setting-item name="字体粗细">
+        <n-select v-model:value="optionData.fontWeight" size="small" :options="fontWeightOptions" />
+      </setting-item>
+      <setting-item name="X轴内边距">
+        <n-input-number v-model:value="optionData.paddingX" size="small" placeholder="输入内边距"></n-input-number>
+      </setting-item>
+      <setting-item name="Y轴内边距">
+        <n-input-number v-model:value="optionData.paddingY" size="small" placeholder="输入内边距"></n-input-number>
+      </setting-item>
+
+      <setting-item name="水平对齐">
+        <n-select v-model:value="optionData.textAlign" size="small" :options="textAlignOptions" />
+      </setting-item>
+      <setting-item name="文本方向">
+        <n-select v-model:value="optionData.writingMode" size="small" :options="verticalOptions" />
+      </setting-item>
+
+      <setting-item name="字间距">
+        <n-input-number v-model:value="optionData.letterSpacing" size="small" placeholder="输入字间距"></n-input-number>
+      </setting-item>
+    </setting-item-box>
+
+    <setting-item-box name="边框">
+      <setting-item name="宽度">
+        <n-input-number
+          v-model:value="optionData.borderWidth"
+          size="small"
+          :min="0"
+          placeholder="宽度"
+        ></n-input-number>
+      </setting-item>
+      <setting-item name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.borderColor"></n-color-picker>
+      </setting-item>
+      <setting-item name="圆角">
+        <n-input-number
+          v-model:value="optionData.borderRadius"
+          size="small"
+          :min="0"
+          placeholder="圆角"
+        ></n-input-number>
+      </setting-item>
+    </setting-item-box>
+
+    <setting-item-box name="背景" :alone="true">
+      <setting-item name="背景颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.backgroundColor"></n-color-picker>
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { option, WritingModeEnum, WritingModeObject, FontWeightEnum, FontWeightObject } from './config'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+
+const textAlignOptions = [
+  { label: '左对齐', value: 'start' },
+  { label: '居中', value: 'center' },
+  { label: '右对齐', value: 'end' }
+]
+
+const linkMethodOptions = [
+  { label: '默认', value: 'default' },
+  { label: '新开窗口', value: 'open' }
+]
+
+const verticalOptions = [
+  {
+    label: WritingModeEnum.HORIZONTAL,
+    value: WritingModeObject[WritingModeEnum.HORIZONTAL]
+  },
+  {
+    label: WritingModeEnum.VERTICAL,
+    value: WritingModeObject[WritingModeEnum.VERTICAL]
+  }
+]
+const fontWeightOptions = [
+  {
+    label: FontWeightEnum.NORMAL,
+    value: FontWeightObject[FontWeightEnum.NORMAL]
+  },
+  {
+    label: FontWeightEnum.BOLD,
+    value: FontWeightObject[FontWeightEnum.BOLD]
+  }
+]
+const handleLinkClick = (target: string) => {
+  const hrefStr = props.optionData.linkHead + props.optionData.link
+  if (target === 'open') window.open(hrefStr)
+  else window.location.href = hrefStr
+}
+const linkHeadOptions = [
+  { label: 'http://', value: 'http://' },
+  { label: 'https://', value: 'https://' }
+]
+</script>

+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '@/packages/components/Informations/index.d'
+import { useWidgetKey } from '@/packages/external/useWidgetKey'
+
+const { key, conKey, chartKey } = useWidgetKey('OverrideTextEnumCommon', true)
+
+export const OverrideTextEnumCommonConfig: ConfigType = {
+  key,
+  chartKey,
+  conKey,
+  title: '自定义文字(支持枚举)',
+  category: ChatCategoryEnum.TEXT,
+  categoryName: ChatCategoryEnumName.TEXT,
+  package: PackagesCategoryEnum.INFORMATIONS,
+  chartFrame: ChartFrameEnum.COMMON,        
+  image: 'text_static.png'
+}

+<template>
+  <div class="go-text-box">
+    <div class="content">
+      <span style="cursor: pointer; white-space: pre-wrap" v-if="link" @click="click">{{ option.dataset }}</span>
+      <span style="white-space: pre-wrap" v-else>{{ option.dataset }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs, shallowReactive } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartDataFetch } from '@/hooks'
+import { useTsl } from '@/hooks/external/useTsl'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { option as configOption } from './config'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType & typeof option>,
+    required: true
+  }
+})
+
+const { handleDeviceProfileAttributes } = useTsl()
+
+const {
+  linkHead,
+  link,
+  fontColor,
+  fontSize,
+  letterSpacing,
+  paddingY,
+  paddingX,
+  textAlign,
+  borderWidth,
+  borderColor,
+  borderRadius,
+  writingMode,
+  backgroundColor,
+  fontWeight,
+  linkMethod
+} = toRefs(props.chartConfig.option)
+
+const option = shallowReactive({
+  dataset: configOption.dataset
+})
+
+//动态请求物模型
+const fetchTsl = (entityId: string) => {
+  return handleDeviceProfileAttributes(entityId)
+}
+
+//解构设备和属性参数
+const deconstructionParams = (chartConfig: CreateComponentType) => {
+  const { request } = chartConfig
+  const { requestParams } = request
+  const { Params } = requestParams
+  const { entityId, keys } = Params
+  return { entityId, keys }
+}
+
+//找到枚举值name，属性暂时只选择一个
+const findEnumName = (attribute: Recordable[], keys: string[], newData: Recordable) => {
+  const findCurrentAttr = attribute.find(findAttrItem => findAttrItem.identifier === keys.at(0))?.detail?.dataType
+    ?.specsList
+  return findCurrentAttr.find(
+    (findCurrentItem: Recordable) => findCurrentItem.value === Number(newData.data[keys.at(0)!][0][1])
+  )?.name
+}
+
+// 预览更新
+useChartDataFetch(props.chartConfig, useChartEditStore, async (newData: string) => {
+  const { entityId, keys } = deconstructionParams(props.chartConfig) as Recordable
+  const { attribute } = (await fetchTsl(entityId)) as unknown as Recordable
+  if (Object.prototype.toString.call(newData) !== '[object Object]') {
+    option.dataset = newData
+  } else if ('subscriptionId' in (newData as unknown as Recordable)) {
+    // ws
+    option.dataset = findEnumName(attribute, keys, newData as unknown as Recordable) || '暂无数据'
+  }
+})
+
+//打开链接
+const click = () => {
+  const hrefStr = linkHead.value + link.value
+  if (linkMethod.value === 'open') window.open(hrefStr)
+  else window.location.href = hrefStr
+}
+</script>
+
+<style lang="scss" scoped>
+@include go('text-box') {
+  display: flex;
+  align-items: center;
+  justify-content: v-bind('textAlign');
+
+  .content {
+    color: v-bind('fontColor');
+    padding: v-bind('`${paddingY}px ${paddingX}px`');
+    font-size: v-bind('fontSize + "px"');
+    letter-spacing: v-bind('letterSpacing + "px"');
+    writing-mode: v-bind('writingMode');
+    font-weight: v-bind('fontWeight');
+    border-style: solid;
+    border-width: v-bind('borderWidth + "px"');
+    border-radius: v-bind('borderRadius + "px"');
+    border-color: v-bind('borderColor');
+
+    background-color: v-bind('backgroundColor');
+  }
+}
+</style>

@@ -9,6 +9,7 @@ import { OverrideInputsDateConfig } from '@/packages/components/external/Informa
 import { OverrideInputsTabConfig } from '@/packages/components/external/Informations/Inputs/OverrideInputsTab'
 import { OverrideIframeConfig } from '@/packages/components/external/Informations/Mores/OverrideIframe'
 import { OverrideTextCommonConfig } from '@/packages/components/external/Informations/Texts/OverrideTextCommon'
+import { OverrideTextEnumCommonConfig } from '@/packages/components/external/Informations/Texts/OverrideTextEnumCommon'
 import { OverrideTextBarrageConfig } from '@/packages/components/external/Informations/Texts/OverrideTextBarrage'
 import { OverrideTextGradientConfig } from '@/packages/components/external/Informations/Texts/OverrideTextGradient'
 import { OverrideVideoConfig } from '@/packages/components/external/Informations/Mores/OverrideVideo'
@@ -136,6 +137,7 @@ export function useInjectLib(packagesList: EPackagesType) {
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideInputsDateConfig)//重写信息下的日期
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideInputsTabConfig)//重写信息下的tab
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideTextCommonConfig)//重写信息下的文字
+  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideTextEnumCommonConfig)//重写信息下的文字（支持枚举）
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideTextBarrageConfig)//重写信息下的弹幕文字
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideTextGradientConfig)//重写信息下的渐变文字
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideVideoConfig)//重写信息下的视频