Merge branch 'perf/view-06-03' into 'main_dev'

perf(src/views): 设备地理位置组件，设备在线时显示为绿色，离线时显示为红色，待激活为黄色标，不然全是灰色，而且不注意还不好发现

See merge request yunteng/thingskit-view!273

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

@@ -30,7 +30,7 @@ const { targetData, chartEditStore } = useTargetData()
 const isWebsocket = computed(() => {
 const isWebsocket = computed(() => {
   const result = query(chartEditStore.getComponentList)
   const result = query(chartEditStore.getComponentList)
   if (result === false) return false
   if (result === false) return false
-
+  if (!targetData.value) return
   if (result.id === targetData.value.id)
   if (result.id === targetData.value.id)
     return targetData.value.request.requestContentType as RequestContentTypeEnum === RequestContentTypeEnum.WEB_SOCKET
     return targetData.value.request.requestContentType as RequestContentTypeEnum === RequestContentTypeEnum.WEB_SOCKET
   else {
   else {
@@ -42,6 +42,7 @@ function query(list: CreateComponentType[]) {
   if (!list || !list?.length) return false
   if (!list || !list?.length) return false
 
 
   for (const item of list) {
   for (const item of list) {
+    if (!targetData.value) return
     if (item.id === targetData.value.id) {
     if (item.id === targetData.value.id) {
       return item
       return item
     }
     }

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

@@ -233,13 +233,15 @@ const dataHandle = (newData: dataJsonType) => {
     // 记录新标记
     // 记录新标记
     if (mapMarkerType.value === MarkerEnum.MARKER) {
     if (mapMarkerType.value === MarkerEnum.MARKER) {
       newData.markers.forEach((markerItem: dataJsonMarkersType) => {
       newData.markers.forEach((markerItem: dataJsonMarkersType) => {
+        console.log("🚀 ~ newData.markers.forEach ~ markerItem:", markerItem.extraInfo.deviceState)
         const markerInstance = new AMapIns.Marker({
         const markerInstance = new AMapIns.Marker({
           position: [markerItem.position[0], markerItem.position[1]],
           position: [markerItem.position[0], markerItem.position[1]],
           offset: new AMapIns.Pixel(-13, 5),
           offset: new AMapIns.Pixel(-13, 5),
           icon: new AMapIns.Icon({
           icon: new AMapIns.Icon({
-            image: iconMarker.value,
-            size: new AMapIns.Size(22, 22), //图标所处区域大小
-            imageSize: new AMapIns.Size(22, 22) //图标大小
+            // image: iconMarker.value,
+            image: markerItem.extraInfo.deviceState === 'ONLINE' ? online : markerItem.extraInfo.deviceState === 'INACTIVE' ? inactive : offline,
+            size: new AMapIns.Size(35, 35), //图标所处区域大小
+            imageSize: new AMapIns.Size(35, 35) //图标大小
           })
           })
         })
         })
         // 原作者这种方式添加，属于JS API 1.4.8版本的
         // 原作者这种方式添加，属于JS API 1.4.8版本的

+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,
   key,
   chartKey,
   chartKey,
   conKey,
   conKey,
-  title: '自定义文字(支持枚举)',
+  title: '文字枚举（适合ws）',
   category: ChatCategoryEnum.TEXT,
   category: ChatCategoryEnum.TEXT,
   categoryName: ChatCategoryEnumName.TEXT,
   categoryName: ChatCategoryEnumName.TEXT,
   package: PackagesCategoryEnum.INFORMATIONS,
   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 { SingleCameraConfig } from '@/packages/components/external/Informations/Mores/SingleCamera'
 import { OverrideILoadConfigurationframeConfig } from '@/packages/components/external/Informations/Mores/OverrideILoadConfigurationframe'
 import { OverrideILoadConfigurationframeConfig } from '@/packages/components/external/Informations/Mores/OverrideILoadConfigurationframe'
 import { CustomEchartsConfig } from '@/packages/components/external/Informations/Mores/CustomEcharts'
 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 { OverrideBarCommonConfig } from '@/packages/components/external/Charts/Bars/OverrideBarCommon'
 import { OverrideLineCommonConfig } from '@/packages/components/external/Charts/Lines/OverrideLineCommon'
 import { OverrideLineCommonConfig } from '@/packages/components/external/Charts/Lines/OverrideLineCommon'
 import { OverrideLineGradientsConfig } from '@/packages/components/external/Charts/Lines/OverrideLineGradients'
 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, SingleCameraConfig)//新增信息下的单个摄像头
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideILoadConfigurationframeConfig)//新增信息下的加载组态
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideILoadConfigurationframeConfig)//新增信息下的加载组态
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, CustomEchartsConfig)//新增信息下的自定义ecahrts组件
   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 => ({
   const requestDataPond = chartEditStore.getRequestGlobalConfig.requestDataPond.map(item => ({
     id: item.dataPondId,
     id: item.dataPondId,
     title: item.dataPondName,
     title: item.dataPondName,
-    disabled: false,
+    disabled: true,
     type: 'requestDataPond'
     type: 'requestDataPond'
   }))
   }))
   const tarArr = requestDataPond.concat(mapOptionList)
   const tarArr = requestDataPond.concat(mapOptionList)

@@ -193,13 +193,13 @@ const btnList: BtnListType[] = [
     icon: DownloadIcon,
     icon: DownloadIcon,
     handle: exportHandle
     handle: exportHandle
   },
   },
-  {
-    key: 'edit',
-    type: TypeEnum.BUTTON,
-    name: '编辑',
-    icon: CreateIcon,
-    handle: editHandle
-  },
+  // {
+  //   key: 'edit',
+  //   type: TypeEnum.BUTTON,
+  //   name: '编辑',
+  //   icon: CreateIcon,
+  //   handle: editHandle
+  // },
   {
   {
     key: 'setting',
     key: 'setting',
     type: TypeEnum.BUTTON,
     type: TypeEnum.BUTTON,