Merge branch 'main_dev' into 'main'

Main dev

See merge request yunteng/thingskit-view!282

 import { defHttp } from '@/utils/external/http/axios'
-import {CameraRecord, ConfigurationItemType, DictItem, OrganizationListItem, UploadResponse} from './model'
+import { CameraRecord, ConfigurationItemType, DictItem, OrganizationListItem, UploadResponse } from './model'
 import { PaginationResult } from '/#/external/axios'
 import { isShareMode } from '@/views/share/hook'
 
@@ -22,6 +22,7 @@ enum Api {
   GET_DEVICE_LATEST = '/plugins/telemetry/DEVICE/',
   DEVICE_ATTR = '/device/attributes',
   ALARM_LIST = '/alarm',
+  BASE_DELETE_URL = '/oss',
 }
 
 export const getDictItemByCode = (value: string) => {
@@ -89,7 +90,7 @@ export const getOrganizationList = (params?: OrganizationListItem) =>
 
 //获取视频列表
 export const getVideoList = (params?: object) =>
-  defHttp.get<{data: CameraRecord[]}>({
+  defHttp.get<{ data: CameraRecord[] }>({
     url: Api.VIDEO,
     params
   })
@@ -160,6 +161,17 @@ export const getAlarmList = (params?: object) =>
     url: Api.ALARM_LIST,
     params
   },
-  {
-    withShareToken: true
-  })
+    {
+      withShareToken: true
+    })
+
+
+/**
+ * 删除上传的图片
+ * @description deleteFilePath图片url
+ */
+export const deleteFilePath = (deleteFilePath?: string) => {
+  return defHttp.delete({
+    url: `${Api.BASE_DELETE_URL}?deleteFilePath=${deleteFilePath}`,
+  });
+};

@@ -67,5 +67,6 @@ export interface DateViewConfigurationInfoType {
     id: string
     enabled: boolean,
     content: string
-  }
+  },
+  thumbnail?: string
 }

@@ -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>
 

@@ -7,7 +7,7 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, toRefs, watch, ref, computed, unref } from 'vue'
+import { PropType, toRefs, watch, ref } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useChartDataFetch } from '@/hooks'
@@ -25,16 +25,19 @@ const props = defineProps({
 
 const { w, h } = toRefs(props.chartConfig.attr)
 
-const { targetData, chartEditStore } = useTargetData()
+const { targetData } = useTargetData()
 
+/** 
+ * 递归判断是否是ws会造成页面崩溃，浏览器无法点击
+ * 
 const isWebsocket = computed(() => {
-  const result = query(chartEditStore.getComponentList)
+  const result = query(chartEditStore.getComponentList) as unknown as any
   if (result === false) return false
-
-  if (result.id === targetData.value.id)
+  if (!targetData.value) return
+  if (result?.id === targetData.value.id)
     return targetData.value.request.requestContentType as RequestContentTypeEnum === RequestContentTypeEnum.WEB_SOCKET
   else {
-    return result.request.requestContentType as RequestContentTypeEnum === RequestContentTypeEnum.WEB_SOCKET
+    return result?.request.requestContentType as RequestContentTypeEnum === RequestContentTypeEnum.WEB_SOCKET
   }
 })
 
@@ -42,19 +45,20 @@ function query(list: CreateComponentType[]) {
   if (!list || !list?.length) return false
 
   for (const item of list) {
+    if (!targetData.value) return
     if (item.id === targetData.value.id) {
       return item
     }
     if (item.groupList && item.groupList?.length) {
-      const flag = query(list)
+      const flag = query(item.groupList) // 不能使用list递归，页面报内存溢出
       if (flag) {
         return item
       }
     }
   }
-
   return false
 }
+*/
 
 const {
   flipperLength,
@@ -97,7 +101,7 @@ watch(
 )
 
 useChartDataFetch(props.chartConfig, useChartEditStore, (newVal: string | number) => {
-  if (unref(isWebsocket)) return
+  if(targetData.value?.request?.requestContentType === RequestContentTypeEnum.WEB_SOCKET) return //请求类型是ws，则终止
   updateDatasetHandler(newVal)
 })
 </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,

@@ -123,9 +123,14 @@ const createInfoWindow = async (extraInfo: dataExtraInfoType) => {
     devicePartInfo.name = name
     devicePartInfo.deviceProfileId = deviceProfileId
     if (tbDeviceId.startsWith('@')) return //假的模拟数据则终止
+    let deviceLastUpdateTs = null
     const res = await getDeviceActiveTime(tbDeviceId) //查询设备最后离线时间
-    let { lastUpdateTs } = res[0]
-    const lastUpdateFormatTs = dayjs(lastUpdateTs).format('YYYY-MM-DD HH:mm:ss')
+    if (!res) {
+      deviceLastUpdateTs = null
+    } else {
+      deviceLastUpdateTs = res[0]['lastUpdateTs']
+    }
+    const lastUpdateFormatTs = deviceLastUpdateTs ? dayjs(deviceLastUpdateTs).format('YYYY-MM-DD HH:mm:ss'): ''
     //以render方式渲染小组件里的边框组件
     const BorderInstance = await import(`../../../../Decorates/Borders/${mpBorderConfig.value.value}/index.vue`)
     const config = await import(`../../../../Decorates/Borders/${mpBorderConfig.value.value}/config.ts`)
@@ -194,11 +199,11 @@ const handleOpenDrawer = async () => {
 }
 
 onMounted(() => {
-  ;(window as any).handleOpenDrawer = handleOpenDrawer
+  (window as any).handleOpenDrawer = handleOpenDrawer
 })
 
 onUnmounted(() => {
-  ;(window as any).handleOpenDrawer = null
+  (window as any).handleOpenDrawer = null
 })
 
 //地图鼠标hover
@@ -233,13 +238,15 @@ const dataHandle = (newData: dataJsonType) => {
     // 记录新标记
     if (mapMarkerType.value === MarkerEnum.MARKER) {
       newData.markers.forEach((markerItem: dataJsonMarkersType) => {
+        console.log("🚀 ~ newData.markers.forEach ~ markerItem:", markerItem.extraInfo.deviceState)
         const markerInstance = new AMapIns.Marker({
           position: [markerItem.position[0], markerItem.position[1]],
           offset: new AMapIns.Pixel(-13, 5),
           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版本的

+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)//新增信息下的变量图片组件
   //
 
   //图表

@@ -50,7 +50,7 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, watch, ref, Ref, computed, nextTick } from 'vue'
+import { PropType, watch, ref, Ref, computed, nextTick, onMounted } from 'vue'
 import { MacOsControlBtn } from '@/components/Tips/MacOsControlBtn/index'
 import { ChartGlobImage } from '@/components/Pages/ChartGlobImage'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
@@ -166,6 +166,18 @@ watch(
     }
   }
 )
+
+/**
+ * 修复vue draggable拖拽插件在火狐浏览器上确实会存在拖拽会新开一个窗口，属于官方问题，其他浏览器不存在此问题。
+ * 解决代码如下
+ */
+onMounted(() => {
+  document.body.ondrop = function (event) {
+    event.preventDefault()
+    event.stopPropagation()
+  }
+})
+//
 </script>
 
 <style lang="scss" scoped>

@@ -451,6 +451,8 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => {
     params[BuiltInVariable.SELECT_TIME_AGGREGATION].agg = null 
     params[BuiltInVariable.SELECT_TIME_AGGREGATION].limit = 7 
     params[BuiltInVariable.SELECT_TIME_AGGREGATION].interval = null 
+    params.page = null
+    params.pageSize = null
     getSelectDeviceAttr.value.value = null
     getSelectOrgTree.value.value = null
     getSelectDeviceProfile.value.value = null

@@ -163,7 +163,6 @@ const setConfigurationData = async (request: ExtraRequestConfigType) => {
    * 源代码 selectedPublicInterface.value = requestDataPondId
    * 修改后代码 selectedPublicInterface.value = publicInterfaceList.value.find(it=>it.id === requestDataPondId)?.id||''
    */
-  console.log(publicInterfaceList.value)
   selectedPublicInterface.value = publicInterfaceList.value.find(it => it.id === publicInterfaceSelectId)?.id || ''
   //ft
   requestContentTypeRef.value = requestContentType

@@ -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)

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

@@ -13,14 +13,16 @@
           {{ props.componentData.chartConfig.title }}
         </span>
       </n-ellipsis>
-      <layers-status :isGroup="isGroup" :hover="hover" :status="status"></layers-status>
+      <div class="list-layers">
+        <layers-status :isGroup="isGroup" :hover="hover" :status="status"></layers-status>
+      </div>
     </div>
     <div :class="{ 'select-modal': select }"></div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, PropType, ref } from 'vue'
+import { computed, PropType, ref } from 'vue'
 import { requireErrorImg } from '@/utils'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
@@ -141,8 +143,24 @@ $textSize: 10px;
   }
 
   .list-text {
+    position: absolute;
+    z-index: 99;
+    left: 70px;
+    top: 20px;
     padding-left: 6px;
+    width: 60px;
     font-size: $textSize;
+    overflow: hidden;
+    text-align: left;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .list-layers {
+    position: absolute;
+    z-index: 99;
+    left: 140px;
+    top: 15px;
   }
 
   /* 选中样式 */

@@ -11,6 +11,7 @@ import { useSync } from '../useSync.hook'
 import { BaseUpdateContentParams, DateViewConfigurationInfoType } from '@/api/external/contentSave/model/contentModel'
 import { useRole } from './business/useRole'
 import { ChartEditStoreType, PageChartEditStoreType } from '@/store/modules/chartEditStore/chartEditStore.d'
+import { deleteFilePath } from '@/api/external/common'
 
 /**
  * * base64转file
@@ -180,7 +181,8 @@ export const useSyncRemote = () => {
 
   //thumbnailSyncUpdate 缩略图保存
   const thumbnailSyncUpdate = throttle(async (updateImg = true) => {
-    const { state, organizationId, dataViewName } = projectInfoStore.getProjectInfo
+    console.log(projectInfoStore.getProjectInfo, 'projectInfoStore.getProjectInfo')
+    const { state, organizationId, dataViewName, thumbnail } = projectInfoStore.getProjectInfo
     if (updateImg) {
       // 获取缩略图片
       const range = document.querySelector('.go-edit-range') as HTMLElement
@@ -198,6 +200,9 @@ export const useSyncRemote = () => {
         base64toFile(canvasImage.toDataURL(), `${fetchRouteParamsLocation()}_index_preview.png`)
       )
       const uploadRes = await uploadFile(uploadParams)
+      if (thumbnail) {
+        await deleteFilePath(thumbnail)
+      }
       // 保存预览图
       if (uploadRes) {
         await saveDataViewList({

@@ -13,13 +13,18 @@ import Preview from './index.vue'
 
 let key = ref(Date.now())
 
-// 数据变更 -> 组件销毁重建
-;[SavePageEnum.JSON, SavePageEnum.CHART_TO_PREVIEW].forEach((saveEvent: string) => {
-  if (!window.opener && !window.opener.addEventListener) return
-  window.opener.addEventListener(saveEvent, async (e: any) => {
-    const localStorageInfo: ChartEditStorageType = await getSessionStorageInfo() as unknown as ChartEditStorageType
-    setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, [{ ...e.detail, id: localStorageInfo.id }])
-    key.value = Date.now()
-  })
-})
+// 数据变更 -> 组件销毁重建
+try {
+  const listenerArr = [SavePageEnum.JSON, SavePageEnum.CHART_TO_PREVIEW]
+  listenerArr.forEach((saveEvent: string) => {
+    if (!window.opener || !window.opener.addEventListener) return
+    window.opener.addEventListener(saveEvent, async (e: any) => {
+      const localStorageInfo: ChartEditStorageType = (await getSessionStorageInfo()) as unknown as ChartEditStorageType
+      setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, [{ ...e.detail, id: localStorageInfo.id }])
+      key.value = Date.now()
+    })
+  })
+} catch (error) {
+  console.log(error)
+}
 </script>