Merge branch 'fix/configuration-component' into 'main_dev'

fix: 修复重构组态后组态链接生成方式变更

See merge request yunteng/thingskit-view!144

 import { defHttp } from '@/utils/external/http/axios'
-import { DictItem, OrganizationListItem, UploadResponse } from './model'
+import { ConfigurationItemType, DictItem, OrganizationListItem, UploadResponse } from './model'
+import { PaginationResult } from '/#/external/axios'
 
 enum Api {
   GET_DICT = '/dict_item',
@@ -54,7 +55,7 @@ export const getPlatformInfo = () => defHttp.get({ url: Api.PLATFORM })
 
 //获取组态列表
 export const getConfigurationList = (params: object) => {
-  return defHttp.get({ url: `${Api.CONFIGURATION}`, params })
+  return defHttp.get<PaginationResult<ConfigurationItemType>>({ url: `${Api.CONFIGURATION}`, params })
 }
 
 //组态设置是否公开或私有
@@ -145,4 +146,4 @@ export const getProfileAttrs = (params: { deviceProfileId: string; dataType?: st
     url: `${Api.DEVICE_ATTR}/${deviceProfileId}`,
     params: { dataType },
   });
-};
\ No newline at end of file
+};

@@ -23,4 +23,34 @@ export interface OrganizationListItem {
   name: string;
   parentId?: string;
   remark: string;
-}
\ No newline at end of file
+}
+
+export interface ConfigurationItemType {
+  id: string
+  creator: string
+  createTime: string
+  name: string
+  enabled: boolean
+  tenantId: string
+  viewType: string
+  organizationId: string
+  platform: string
+  organizationDTO: OrganizationDto
+  publicId?: string
+  productAndDevice: ProductAndDevice[]
+}
+
+export interface OrganizationDto {
+  name: string
+  enabled: boolean
+  sort: number
+  children: any[]
+}
+
+export interface ProductAndDevice {
+  name: string
+  profileId: string
+  deviceList: any
+  deviceType: string
+  transportType: string
+}

@@ -3,14 +3,19 @@ import {CreateComponentType} from '@/packages/index.d'
 import {chartInitConfig} from '@/settings/designSetting'
 import {OverrideILoadConfigurationframeConfig} from './index'
 import cloneDeep from 'lodash/cloneDeep'
+import { Platform } from './help'
 
 export const enum shareEnum {
     PRIVATE_VIEW = "PRIVATE_VIEW",
+    PUBLIC_VIEW = 'PUBLIC_VIEW'
 }
 
 export const option = {
     // 网站路径
     dataset: '',
+    organizationId: '',
+    platform: Platform.PC,
+    publicId: '' as (undefined | string),
     // 圆角
     borderRadius: 10,
     pages: {

@@ -3,24 +3,19 @@
     <setting-item-box name="路径" :alone="true">
       <setting-item name="请选择要加载的组态">
         <n-select label-in-value @change="handleUpdateValue" filterable size="small" v-model:value="optionData.dataset"
-                  :options="configurationOptions"/>
+          :options="configurationOptions" />
       </setting-item>
     </setting-item-box>
     <setting-item-box name="是否公开">
       <setting-item>
         <div style="display:flex">
-          <n-switch @change="handleChange" v-model:value="optionData.isShare" size="small"/>
+          <n-switch @change="handleChange" v-model:value="optionData.isShare" size="small" />
         </div>
       </setting-item>
     </setting-item-box>
     <setting-item-box name="样式">
       <setting-item name="圆角">
-        <n-input-number
-            v-model:value="optionData.borderRadius"
-            size="small"
-            :min="0"
-            placeholder="圆角"
-        ></n-input-number>
+        <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="分页">
@@ -28,13 +23,8 @@
         <n-input-number v-model:value="optionData.pages.page" size="small" :min="1" placeholder="页码"></n-input-number>
       </setting-item>
       <setting-item name="页数">
-        <n-input-number
-            disabled
-            v-model:value="optionData.pages.pageSize"
-            size="small"
-            :min="10"
-            placeholder="页数"
-        ></n-input-number>
+        <n-input-number disabled v-model:value="optionData.pages.pageSize" size="small" :min="10"
+          placeholder="页数"></n-input-number>
       </setting-item>
     </setting-item-box>
     <setting-item-box name="颜色" :alone="true">
@@ -49,11 +39,12 @@
 </template>
 
 <script setup lang="ts">
-import {PropType, onMounted, ref, watch} from 'vue'
-import {option, shareEnum} from './config'
-import {CollapseItem, SettingItemBox, SettingItem} from '@/components/Pages/ChartItemSetting'
-import {getConfigurationList, setConfigurationIsShare} from '@/api/external/common/index'
-import {SelectOption} from 'naive-ui'
+import { PropType, onMounted, ref, watch } from 'vue'
+import { option, shareEnum } from './config'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { getConfigurationList, setConfigurationIsShare } from '@/api/external/common/index'
+import { ConfigurationItemType } from '@/api/external/common/model'
+import { Platform } from './help'
 
 const props = defineProps({
   optionData: {
@@ -62,44 +53,40 @@ const props = defineProps({
   }
 })
 
-const configurationOptions = ref([])
+const configurationOptions = ref<ConfigurationItemType[]>([])
 
 const configurationId = ref('')
 
 const getConfigurationOptions = async (params: object) => {
-  const {items} = await getConfigurationList(params)
+  const { items } = await getConfigurationList(params)
   if (items) {
-    configurationOptions.value = items.map((item: SelectOption) => ({
+    configurationOptions.value = items.map((item) => ({
       label: item.name,
       value: item.id,
-      viewType: item.viewType
+      ...item
     }))
   }
 }
 
 watch(
-    () => props.optionData.pages,
-    (newData: any) => {
-      getConfigurationOptions({page: newData.page, pageSize: newData.pageSize})
-    },
-    {
-      deep: true,
-      immediate: true
-    }
+  () => props.optionData.pages,
+  (newData: any) => {
+    getConfigurationOptions({ page: newData.page, pageSize: newData.pageSize })
+  },
+  {
+    deep: true,
+    immediate: true
+  }
 )
 
 onMounted(() => {
-  getConfigurationOptions({page: props.optionData.pages.page, pageSize: props.optionData.pages.pageSize})
+  getConfigurationOptions({ page: props.optionData.pages.page, pageSize: props.optionData.pages.pageSize })
 })
 
-const handleUpdateValue = (value: string, options: SelectOption) => {
-  const {viewType} = options
+const handleUpdateValue = (value: string, options: ConfigurationItemType) => {
+  const { viewType, organizationId, publicId, platform } = options
   configurationId.value = value
-  if (viewType === shareEnum.PRIVATE_VIEW) {
-    props.optionData.isShare = false
-  } else {
-    props.optionData.isShare = true
-  }
+  Object.assign(props.optionData, { isShare: viewType === shareEnum.PUBLIC_VIEW, organizationId, platform, publicId } as typeof option)
 }
 
 const handleChange = async (value: boolean) => {
@@ -108,7 +95,7 @@ const handleChange = async (value: boolean) => {
   })
   if (res) {
     window.$message.success('操作成功！')
-    await getConfigurationOptions({page: props.optionData.pages.page, pageSize: props.optionData.pages.pageSize})
+     await getConfigurationOptions({ page: props.optionData.pages.page, pageSize: props.optionData.pages.pageSize })
   }
 }
 </script>

+ 
+export enum ScadaModeEnum {
+  LIGHTBOX = 'lightbox',
+  DESIGN = 'design',
+  SHARE = 'share',
+}
+
+export enum Platform {
+  PHONE = 'phone',
+  PC = 'pc',
+}
+
+interface ScadaLinkParamsType {
+  configurationId: string;
+  organizationId: string;
+  mode: ScadaModeEnum;
+  platform: Platform;
+  publicId?: string;
+}
+
+const getRandomString = () => Number(Math.random().toString().substring(2)).toString(36);
+
+export const encode = (record: Recordable) => {
+  let hash = JSON.stringify(record);
+  const mixinString = getRandomString()
+    .slice(0, 10)
+    .padEnd(10, getRandomString())
+    .split('')
+    .map((item) => (Math.random() > 0.5 ? item.toUpperCase() : item))
+    .join('');
+  hash = window.btoa(hash);
+  hash = hash.substring(0, 6) + mixinString + hash.substring(6);
+  hash = window.btoa(hash);
+  return hash;
+};
+
+
+export const createScadaPageLink = (
+  record: Partial<Record<'id' | 'organizationId' | 'platform' | 'publicId', string>>,
+  mode: ScadaModeEnum = ScadaModeEnum.DESIGN,
+  open = true
+) => { 
+  const params: ScadaLinkParamsType = {
+    configurationId: record.id!,
+    organizationId: record.organizationId!,
+    mode: mode,
+    platform: record.platform as Platform,
+  };
+
+  if (mode === ScadaModeEnum.SHARE) {
+    params.publicId = record.publicId;
+  }
+
+  const href = new URL(location.origin);
+  href.pathname = '/thingskit-scada';
+  href.hash = encode(params);
+  open && window.open(href.href);
+  return href.href;
+};

 <template>
-  <div
-    @mouseenter="handleMouseenter"
-    @mouseleave="handleMouseleave"
-    class="iframe-content"
-    :style="getStyle(borderRadius)"
-  >
+  <div @mouseenter="handleMouseenter" @mouseleave="handleMouseleave" class="iframe-content"
+    :style="getStyle(borderRadius)">
     <div v-show="isShowSvg" @click="handleFullScreen" id="fullscreenButton">
-      <svg
-        focusable="false"
-        data-icon="fullscreen"
-        width="4vw"
-        :style="`color:${color}`"
-        height="4vh"
-        fill="currentColor"
-        aria-hidden="true"
-        viewBox="64 64 896 896"
-      >
+      <svg focusable="false" data-icon="fullscreen" width="4vw" :style="`color:${color}`" height="4vh" fill="currentColor"
+        aria-hidden="true" viewBox="64 64 896 896">
         <path
-          d="M290 236.4l43.9-43.9a8.01 8.01 0 00-4.7-13.6L169 160c-5.1-.6-9.5 3.7-8.9 8.9L179 329.1c.8 6.6 8.9 9.4 13.6 4.7l43.7-43.7L370 423.7c3.1 3.1 8.2 3.1 11.3 0l42.4-42.3c3.1-3.1 3.1-8.2 0-11.3L290 236.4zm352.7 187.3c3.1 3.1 8.2 3.1 11.3 0l133.7-133.6 43.7 43.7a8.01 8.01 0 0013.6-4.7L863.9 169c.6-5.1-3.7-9.5-8.9-8.9L694.8 179c-6.6.8-9.4 8.9-4.7 13.6l43.9 43.9L600.3 370a8.03 8.03 0 000 11.3l42.4 42.4zM845 694.9c-.8-6.6-8.9-9.4-13.6-4.7l-43.7 43.7L654 600.3a8.03 8.03 0 00-11.3 0l-42.4 42.3a8.03 8.03 0 000 11.3L734 787.6l-43.9 43.9a8.01 8.01 0 004.7 13.6L855 864c5.1.6 9.5-3.7 8.9-8.9L845 694.9zm-463.7-94.6a8.03 8.03 0 00-11.3 0L236.3 733.9l-43.7-43.7a8.01 8.01 0 00-13.6 4.7L160.1 855c-.6 5.1 3.7 9.5 8.9 8.9L329.2 845c6.6-.8 9.4-8.9 4.7-13.6L290 787.6 423.7 654c3.1-3.1 3.1-8.2 0-11.3l-42.4-42.4z"
-        ></path>
+          d="M290 236.4l43.9-43.9a8.01 8.01 0 00-4.7-13.6L169 160c-5.1-.6-9.5 3.7-8.9 8.9L179 329.1c.8 6.6 8.9 9.4 13.6 4.7l43.7-43.7L370 423.7c3.1 3.1 8.2 3.1 11.3 0l42.4-42.3c3.1-3.1 3.1-8.2 0-11.3L290 236.4zm352.7 187.3c3.1 3.1 8.2 3.1 11.3 0l133.7-133.6 43.7 43.7a8.01 8.01 0 0013.6-4.7L863.9 169c.6-5.1-3.7-9.5-8.9-8.9L694.8 179c-6.6.8-9.4 8.9-4.7 13.6l43.9 43.9L600.3 370a8.03 8.03 0 000 11.3l42.4 42.4zM845 694.9c-.8-6.6-8.9-9.4-13.6-4.7l-43.7 43.7L654 600.3a8.03 8.03 0 00-11.3 0l-42.4 42.3a8.03 8.03 0 000 11.3L734 787.6l-43.9 43.9a8.01 8.01 0 004.7 13.6L855 864c5.1.6 9.5-3.7 8.9-8.9L845 694.9zm-463.7-94.6a8.03 8.03 0 00-11.3 0L236.3 733.9l-43.7-43.7a8.01 8.01 0 00-13.6 4.7L160.1 855c-.6 5.1 3.7 9.5 8.9 8.9L329.2 845c6.6-.8 9.4-8.9 4.7-13.6L290 787.6 423.7 654c3.1-3.1 3.1-8.2 0-11.3l-42.4-42.4z">
+        </path>
       </svg>
     </div>
-    <iframe id="iframeContent" :src="option.dataset" :width="w" :height="h" style="border-width: 0"></iframe>
+    <iframe id="iframeContent" :src="iframeLink" :width="w" :height="h" style="border-width: 0"></iframe>
   </div>
 </template>
 
@@ -32,6 +20,8 @@ import { CreateComponentType } from '@/packages/index.d'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useFullScreen } from '@/packages/components/external/Charts/utls/fullScreen'
 import { isDevMode } from '@/utils/external/env'
+import { createScadaPageLink, ScadaModeEnum } from './help'
+import { option as typeOption } from './config'
 
 const props = defineProps({
   chartConfig: {
@@ -60,16 +50,14 @@ const getStyle = (radius: number) => {
 
 const isDev = isDevMode()
 
+const iframeLink = ref('')
+
 // 编辑更新
 watch(
   () => props.chartConfig.option.dataset,
   (newData: string) => {
-    const currentHost = window.location.host
-    const currentProtocol = window.location.protocol
-    //预览
-    option.dataset = `${currentProtocol}//${currentHost}/thingskit-scada/${
-      isDev ? '?dev=1&' : '?'
-    }configurationId=${newData}&lightbox=1`
+    const { dataset, publicId, organizationId, platform, isShare } = props.chartConfig.option as typeof typeOption
+    iframeLink.value = createScadaPageLink({ id: dataset, platform, publicId, organizationId, }, isShare ? ScadaModeEnum.SHARE : ScadaModeEnum.LIGHTBOX, false)
   },
   {
     immediate: true