feat(src/views): 新增变量图片组件，上报数据类型为枚举，根据值显示对应图片

@@ -31,6 +31,7 @@ interface uploadSizeFormatIF {
 }
 
 const props = defineProps({
+  uploadIndex: Number,
   uploadImageUrl: {
     type: String as PropType<string>,
     default: ''
@@ -60,7 +61,7 @@ const customRequest = (options: UploadCustomRequestOptions) => {
       uploadParams.append('file', newNameFile)
       const uploadRes = await uploadFile(uploadParams)
       if (!uploadRes) return
-      emit('sendFile', uploadRes?.fileStaticUri)
+      emit('sendFile', uploadRes?.fileStaticUri, props.uploadIndex)
       window['$message'].success('上传文件成功！')
     } else {
       window['$message'].error('上传文件失败，请稍后重试！')
@@ -88,7 +89,7 @@ const beforeUploadHandle = (file: UploadFileInfo) => {
 //单个点击删除
 const remove = () => {
   fileList.value = []
-  emit('removeFile', true)
+  emit('removeFile', true, props.uploadIndex)
 }
 </script>
 

 <template>
   <div>
-    <n-input :style="`width:${w}px;`" type="text"
+    <n-input :style="`width:${w}px;height:${h}px;`" type="text"
              v-model:value="option.value.dataset"
              placeholder="请输入"
-             @update="onChange">
+             @blur="onBlur">
 
     </n-input>
   </div>
@@ -25,6 +25,7 @@ const props = defineProps({
 })
 
 const { w, h } = toRefs(props.chartConfig.attr)
+
 const option = shallowReactive({
   value: {
     inputValue: props.chartConfig.option.inputValue,
@@ -32,8 +33,7 @@ const option = shallowReactive({
   }
 })
 
-const onChange = (v: string) => {
-  // if(v == undefined) return;
+const onBlur = () => {
   // 存储到联动数据
   useChartInteract(
       props.chartConfig,
@@ -49,7 +49,6 @@ watch(
     () => props.chartConfig.option,
     (newData: any) => {
       option.value = newData
-      onChange(newData.inputValue)
     },
     {
       immediate: true,

+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { chartInitConfig } from '@/settings/designSetting'
+import { VariableImageConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  dataset: '',
+  valueConfig: [
+    {
+      value: '',
+      imageUrl: ''
+    }
+  ]
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = VariableImageConfig.key
+  public attr = { ...chartInitConfig, w: 500, h: 300, zIndex: -1 }
+  public chartConfig = cloneDeep(VariableImageConfig)
+  public option = cloneDeep(option)
+}

+<template>
+  <collapse-item name="配置" :expanded="true">
+    <template v-for="(item, index) in optionData.valueConfig" :key="index">
+      <setting-item-box name="变量值" :alone="true">
+        <setting-item>
+          <n-input v-model:value="item.value"></n-input>
+        </setting-item>
+      </setting-item-box>
+      <div style="height: 10px"></div>
+      <setting-item-box name="变量图片" :alone="true">
+        <setting-item>
+          <TKUpload
+            :uploadIndex="index"
+            :uploadImageUrl="item.imageUrl"
+            @sendFile="handleSendFile"
+            @removeFile="handleRemoveFile"
+          />
+        </setting-item>
+      </setting-item-box>
+      <n-button size="small" @click="optionData.valueConfig.splice(index, 1)"> - </n-button>
+    </template>
+    <n-button
+      style="margin-left: 10px"
+      v-if="optionData.valueConfig"
+      size="small"
+      @click="
+        optionData.valueConfig.push({
+          value: '',
+          imageUrl: '',
+        })
+      "
+    >
+      +
+    </n-button>
+  </collapse-item>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { option } from './config'
+import { TKUpload } from '@/components/external/Common/TKUpload'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+
+const handleSendFile = (file: string, index: number) => {
+  if (!file) return
+  props.optionData.valueConfig[index].imageUrl = file
+}
+
+const handleRemoveFile = (status: boolean, index: number) =>
+  status ? (props.optionData.valueConfig[index].imageUrl = '') : null
+</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('VariableImage', true)
+
+export const VariableImageConfig: ConfigType = {
+  key,
+  chartKey,
+  conKey,
+  title: '变量图片（适合ws）',
+  category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
+  package: PackagesCategoryEnum.INFORMATIONS,
+  chartFrame: ChartFrameEnum.COMMON,        
+  image: 'iframe.png'
+}

+<template>
+  <div>
+    <n-image
+      preview-disabled
+      :fallback-src="requireErrorImg()"
+      :src="!dataset ? logo : dataset"
+      :width="w"
+      :height="h"
+    ></n-image>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs, watch } from 'vue'
+import { requireErrorImg } from '@/utils'
+import { useChartDataFetch } from '@/hooks'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { option } from './config'
+import logo from '@/assets/logo.png'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+
+const { dataset, valueConfig } = toRefs(props.chartConfig.option as unknown as typeof option)
+
+watch(
+  () => dataset?.value,
+  newValue => {
+    const findImageUrl = valueConfig?.value.find(
+      (valueConfigItem: typeof option['valueConfig'][0]) => String(valueConfigItem.value) === String(newValue)
+    )
+    if (findImageUrl) {
+      dataset.value = findImageUrl?.imageUrl
+    }
+  },
+  {
+    immediate: true
+  }
+)
+
+// 预览更新
+useChartDataFetch(props.chartConfig, useChartEditStore)
+</script>

@@ -8,7 +8,7 @@ export const OverrideTextEnumCommonConfig: ConfigType = {
   key,
   chartKey,
   conKey,
-  title: '自定义文字(支持枚举)',
+  title: '文字枚举（适合ws）',
   category: ChatCategoryEnum.TEXT,
   categoryName: ChatCategoryEnumName.TEXT,
   package: PackagesCategoryEnum.INFORMATIONS,

@@ -21,6 +21,7 @@ import { CameraConfig } from '@/packages/components/external/Informations/Mores/
 import { SingleCameraConfig } from '@/packages/components/external/Informations/Mores/SingleCamera'
 import { OverrideILoadConfigurationframeConfig } from '@/packages/components/external/Informations/Mores/OverrideILoadConfigurationframe'
 import { CustomEchartsConfig } from '@/packages/components/external/Informations/Mores/CustomEcharts'
+import { VariableImageConfig } from '@/packages/components/external/Informations/Mores/VariableImage'
 import { OverrideBarCommonConfig } from '@/packages/components/external/Charts/Bars/OverrideBarCommon'
 import { OverrideLineCommonConfig } from '@/packages/components/external/Charts/Lines/OverrideLineCommon'
 import { OverrideLineGradientsConfig } from '@/packages/components/external/Charts/Lines/OverrideLineGradients'
@@ -145,6 +146,7 @@ export function useInjectLib(packagesList: EPackagesType) {
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, SingleCameraConfig)//新增信息下的单个摄像头
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideILoadConfigurationframeConfig)//新增信息下的加载组态
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, CustomEchartsConfig)//新增信息下的自定义ecahrts组件
+  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, VariableImageConfig)//新增信息下的变量图片组件
   //
 
   //图表

@@ -275,7 +275,7 @@ const fnEventsOptions = (): Array<SelectOption | SelectGroupOption> => {
   const requestDataPond = chartEditStore.getRequestGlobalConfig.requestDataPond.map(item => ({
     id: item.dataPondId,
     title: item.dataPondName,
-    disabled: false,
+    disabled: true,
     type: 'requestDataPond'
   }))
   const tarArr = requestDataPond.concat(mapOptionList)