feat(src/packages): 信息里新增加载组态

@@ -6,7 +6,8 @@ enum Api {
   UPLOAD = '/oss/upload',
   DOWNLOAD = '/oss/download_file/',
   AREALIST = '/area/list',
-  PLATFORM = '/platform/get'
+  PLATFORM = '/platform/get',
+  CONFIGURATION = '/configuration/center'
 }
 
 export const getDictItemByCode = (value: string) => {
@@ -39,3 +40,8 @@ export const getAreaList = (data: object) => {
 
 //获取企业定制
 export const getPlatformInfo = () => defHttp.get({ url: Api.PLATFORM })
+
+//获取组态列表
+export const getConfigurationList = (params: object) => {
+  return defHttp.get({ url: `${Api.CONFIGURATION}`, params })
+}

+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { chartInitConfig } from '@/settings/designSetting'
+import { OverrideILoadConfigurationframeConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  // 网站路径
+  dataset: "",
+  // 圆角
+  borderRadius: 10
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType
+{
+  public key = OverrideILoadConfigurationframeConfig.key
+  public attr = { ...chartInitConfig, w: 1200, h: 800, zIndex: -1 }
+  public chartConfig = cloneDeep(OverrideILoadConfigurationframeConfig)
+  public option = cloneDeep(option)
+}

+<template>
+  <collapse-item name="属性" :expanded="true">
+    <setting-item-box name="路径" :alone="true">
+      <setting-item name="请选择要加载的组态">
+        <n-select size="small" v-model:value="optionData.dataset" :options="configurationOptions" />
+      </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>
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+</template>
+
+<script setup lang="ts">
+import { PropType, onMounted, ref } from 'vue'
+import { option } from './config'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { getConfigurationList } from '@/api/external/common/index'
+
+defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+
+const configurationOptions = ref([])
+
+const getConfigurationOptions = async (params: object) => {
+  const { items } = await getConfigurationList(params)
+  if (items) {
+    configurationOptions.value = items.map((item: Record<string, string>) => ({ label: item.name, value: item.id }))
+  }
+}
+
+onMounted(() => {
+  getConfigurationOptions({ page: 1, pageSize: 10 })
+})
+</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('OverrideILoadConfigurationframe', true)
+
+export const OverrideILoadConfigurationframeConfig: ConfigType = {
+  key,
+  chartKey,
+  conKey,
+  title: '加载组态',
+  category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
+  package: PackagesCategoryEnum.INFORMATIONS,
+  chartFrame: ChartFrameEnum.COMMON,        
+  image: 'iframe.png'
+}

+<template>
+  <div class="iframe-content" :style="getStyle(borderRadius)">
+    <div v-show="isShowSvg" @click="handleFullScreen" id="fullscreenButton">
+      <svg
+        focusable="false"
+        class=""
+        data-icon="fullscreen"
+        width="4vw"
+        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>
+      </svg>
+    </div>
+    <iframe
+      @mouseenter="handleMouseenter"
+      @mouseleave="handleMouseleave"
+      id="iframeContent"
+      :src="option.dataset"
+      :width="w"
+      :height="h"
+      :allowfullscreen="allowfullscreen"
+      style="border-width: 0"
+    ></iframe>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, shallowReactive, watch, toRefs, ref } from 'vue'
+import { useChartDataFetch } from '@/hooks'
+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';
+
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const isShowSvg = ref(false)
+
+const allowfullscreen = ref(false)
+
+const { w, h } = toRefs(props.chartConfig.attr)
+const { borderRadius } = toRefs(props.chartConfig.option)
+
+const option = shallowReactive({
+  dataset: ''
+})
+
+const getStyle = (radius: number) => {
+  return {
+    borderRadius: `${radius}px`,
+    overflow: 'hidden'
+  }
+}
+
+const isDev = isDevMode();
+
+// 编辑更新
+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`
+  },
+  {
+    immediate: true
+  }
+)
+
+// 预览更新
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => {
+  option.dataset = newData
+})
+
+const handleFullScreen = () => {
+  const domName = document.getElementById('iframeContent') as HTMLElement
+  const htmlName = document.querySelector('html') as HTMLHtmlElement
+  useFullScreen(domName, htmlName)
+}
+
+const handleMouseenter = () => {
+  isShowSvg.value = true
+  allowfullscreen.value = true
+}
+
+const handleMouseleave = () => (isShowSvg.value = false)
+</script>
+<style lang="scss" scoped>
+.iframe-content {
+  #fullscreenButton {
+    color: white;
+    cursor: pointer;
+    position: absolute;
+    z-index: 999999;
+    top: 3%;
+    right: 0.1vw;
+  }
+}
+</style>

@@ -19,6 +19,7 @@ import { OverrideLineGradientsConfig } from '@/packages/components/external/Char
 import { OverrideProcessConfig } from '@/packages/components/external/Charts/Mores/OverrideProcess'
 import { OverridePieCircleConfig } from '@/packages/components/external/Charts/Pies/OverridePieCircle'
 import { OverrideMapBaseConfig } from '@/packages/components/external/Charts/Maps/OverrideMapBase'
+import { OverrideILoadConfigurationframeConfig } from '@/packages/components/external/Informations/Mores/OverrideILoadConfigurationframe'
 
 export function useInjectLib(packagesList: EPackagesType) {
   packagesList[EPackagesCategoryEnum.COMPOSES] = ComposesList
@@ -41,6 +42,7 @@ export function useInjectLib(packagesList: EPackagesType) {
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideProcessConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverridePieCircleConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideMapBaseConfig)
+  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideILoadConfigurationframeConfig)
 }
 
 /**