From abb8b1cfe8949591bbbd7a72703d4109eeb334d2 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Tue, 9 Apr 2024 10:54:52 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E4=BB=AA=E8=A1=A8=E6=9D=BF):=20=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E7=BD=91=E9=A1=B5=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/assets/svg/db-more-web.svg            |   1 +
 .../component-group/DbMoreComGroup.vue        |  52 +++++++
 .../src/custom-component/component-list.ts    |  31 ++++
 .../src/custom-component/de-frame/Attr.vue    |  13 ++
 .../de-frame/ComponentFrame.vue               | 144 ++++++++++++++++++
 core/core-frontend/src/utils/components.ts    |   6 +-
 6 files changed, 246 insertions(+), 1 deletion(-)
 create mode 100644 core/core-frontend/src/assets/svg/db-more-web.svg
 create mode 100644 core/core-frontend/src/custom-component/component-group/DbMoreComGroup.vue
 create mode 100644 core/core-frontend/src/custom-component/de-frame/Attr.vue
 create mode 100644 core/core-frontend/src/custom-component/de-frame/ComponentFrame.vue

diff --git a/core/core-frontend/src/assets/svg/db-more-web.svg b/core/core-frontend/src/assets/svg/db-more-web.svg
new file mode 100644
index 0000000000..9bc701c656
--- /dev/null
+++ b/core/core-frontend/src/assets/svg/db-more-web.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1712630540622" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4351" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M885.333333 177.066667C838.4 104.533333 697.6 136.533333 652.8 149.333333c-8.533333 2.133333-19.2 4.266667-32 8.533334-40.533333-17.066667-87.466667-25.6-134.4-25.6-200.533333 0-362.666667 162.133333-362.666667 362.666666 0 51.2 10.666667 98.133333 27.733334 140.8-36.266667 117.333333-29.866667 194.133333 21.333333 234.666667 23.466667 19.2 51.2 25.6 81.066667 25.6 59.733333 0 123.733333-27.733333 157.866666-46.933333 23.466667 4.266667 49.066667 8.533333 74.666667 8.533333 130.133333 0 245.333333-68.266667 309.333333-172.8h-106.666666c-51.2 53.333333-121.6 87.466667-202.666667 87.466667-104.533333 0-194.133333-57.6-241.066667-142.933334 85.333333-241.066667 281.6-343.466667 373.333334-379.733333 68.266667 36.266667 119.466667 100.266667 136.533333 179.2H467.2v85.333333h381.866667v-19.2c0-40.533333-6.4-78.933333-19.2-115.2 49.066667-68.266667 93.866667-147.2 55.466666-202.666666z m-70.4 44.8s4.266667 17.066667-27.733333 66.133333c-17.066667-25.6-38.4-49.066667-61.866667-70.4 44.8-4.266667 81.066667-4.266667 89.6 4.266667zM298.666667 802.133333c-29.866667 8.533333-57.6 10.666667-70.4 0-4.266667-2.133333-17.066667-17.066667-10.666667-68.266666 23.466667 27.733333 51.2 49.066667 81.066667 68.266666zM209.066667 497.066667v-4.266667c0-153.6 123.733333-277.333333 277.333333-277.333333h2.133333c-93.866667 53.333333-202.666667 142.933333-279.466666 281.6z" p-id="4352"></path></svg>
diff --git a/core/core-frontend/src/custom-component/component-group/DbMoreComGroup.vue b/core/core-frontend/src/custom-component/component-group/DbMoreComGroup.vue
new file mode 100644
index 0000000000..5b89d42787
--- /dev/null
+++ b/core/core-frontend/src/custom-component/component-group/DbMoreComGroup.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { toRefs } from 'vue'
+import eventBus from '@/utils/eventBus'
+import DragComponent from '@/custom-component/component-group/DragComponent.vue'
+import { commonHandleDragEnd, commonHandleDragStart } from '@/utils/canvasUtils'
+
+const props = defineProps({
+  dvModel: {
+    type: String,
+    default: 'dv'
+  },
+  themes: {
+    type: String,
+    default: 'dark'
+  }
+})
+
+const { dvModel } = toRefs(props)
+const newComponent = () => {
+  eventBus.emit('handleNew', { componentName: 'DeFrame', innerType: 'DeFrame' })
+}
+
+const handleDragStart = e => {
+  commonHandleDragStart(e, dvModel.value)
+}
+
+const handleDragEnd = e => {
+  commonHandleDragEnd(e, dvModel.value)
+}
+</script>
+
+<template>
+  <div
+    class="group"
+    @dragstart="handleDragStart"
+    @dragend="handleDragEnd"
+    v-on:click="newComponent"
+  >
+    <drag-component
+      :themes="themes"
+      icon="db-more-web"
+      label="网页"
+      drag-info="DeFrame&DeFrame"
+    ></drag-component>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.group {
+  padding: 12px 8px;
+}
+</style>
diff --git a/core/core-frontend/src/custom-component/component-list.ts b/core/core-frontend/src/custom-component/component-list.ts
index a4ad29eecc..5969a2ec7e 100644
--- a/core/core-frontend/src/custom-component/component-list.ts
+++ b/core/core-frontend/src/custom-component/component-list.ts
@@ -8,6 +8,18 @@ export const commonStyle = {
   opacity: 1
 }
 
+// 超链接配置
+export const HYPERLINKS = {
+  openMode: '_blank',
+  enable: false,
+  content: 'http://'
+}
+
+// 嵌套页面信息
+export const FRAMELINKS = {
+  src: ''
+}
+
 export const defaultStyleValue = {
   ...commonStyle,
   color: '',
@@ -132,6 +144,25 @@ const list = [
     },
     matrixStyle: {}
   },
+  {
+    id: '30002',
+    component: 'de-frame',
+    type: 'de-frame',
+    label: '',
+    icon: 'iconfont icon-iframe',
+    defaultClass: 'text-filter',
+    hyperlinks: HYPERLINKS,
+    style: {
+      width: 400,
+      height: 200
+    },
+    frameLinks: FRAMELINKS,
+    x: 1,
+    y: 1,
+    sizeX: 10,
+    sizeY: 5,
+    matrixStyle: {}
+  },
   {
     component: 'DeTimeClock',
     name: '时间组件',
diff --git a/core/core-frontend/src/custom-component/de-frame/Attr.vue b/core/core-frontend/src/custom-component/de-frame/Attr.vue
new file mode 100644
index 0000000000..50031ca63e
--- /dev/null
+++ b/core/core-frontend/src/custom-component/de-frame/Attr.vue
@@ -0,0 +1,13 @@
+<template>
+  <div class="attr-list de-collapse-style">
+    <CommonAttr :element="curComponent"></CommonAttr>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
+import CommonAttr from '@/custom-component/common/CommonAttr.vue'
+import { storeToRefs } from 'pinia'
+const dvMainStore = dvMainStoreWithOut()
+const { curComponent } = storeToRefs(dvMainStore)
+</script>
diff --git a/core/core-frontend/src/custom-component/de-frame/ComponentFrame.vue b/core/core-frontend/src/custom-component/de-frame/ComponentFrame.vue
new file mode 100644
index 0000000000..20d0ec93d8
--- /dev/null
+++ b/core/core-frontend/src/custom-component/de-frame/ComponentFrame.vue
@@ -0,0 +1,144 @@
+<template>
+  <el-row class="main-frame">
+    <div v-if="element.frameLinks.src" class="main-frame">
+      <iframe
+        v-if="state.frameShow"
+        id="iframe"
+        :src="element.frameLinks.src"
+        scrolling="auto"
+        frameborder="0"
+        class="main-frame main-de-iframe"
+      />
+      <div v-if="editMode === 'edit'" class="frame-mask edit-mask">
+        <span style="opacity: 1">
+          <span style="font-weight: bold; color: lawngreen">{{
+            t('visualization.edit_web_tips')
+          }}</span>
+        </span>
+      </div>
+      <!--Here are three 15px wide masks(left top right) for easy clicking on the display jump button-->
+      <div v-if="editMode !== 'edit'" class="frame-mask preview-top-mask" />
+      <div v-if="editMode !== 'edit'" class="frame-mask preview-right-mask" />
+      <div v-if="editMode !== 'edit'" class="frame-mask preview-left-mask" />
+      <div v-if="screenShot" class="frame-mask" />
+    </div>
+    <div v-else class="info-class">
+      <span>{{ t('visualization.link_add_tips_pre') }}</span>
+      <el-icon><Link /></el-icon>
+      <span>{{ t('visualization.web_add_tips_suf') }}</span>
+    </div>
+  </el-row>
+</template>
+
+<script setup lang="ts">
+import { nextTick, onMounted, reactive, toRefs } from 'vue'
+import { useEmitt } from '@/hooks/web/useEmitt'
+import { useI18n } from '@/hooks/web/useI18n'
+import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
+import { storeToRefs } from 'pinia'
+const dvMainStore = dvMainStoreWithOut()
+const { canvasStyleData } = storeToRefs(dvMainStore)
+
+const { t } = useI18n()
+
+const props = defineProps({
+  propValue: {
+    type: String,
+    require: true
+  },
+  element: {
+    type: Object
+  },
+  editMode: {
+    type: String,
+    require: false,
+    default: 'edit'
+  },
+  active: {
+    type: Boolean,
+    require: false,
+    default: false
+  },
+  screenShot: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const { propValue, element, editMode, active, screenShot } = toRefs(props)
+
+const state = reactive({
+  pOption: {},
+  frameShow: true
+})
+
+const frameLinksChange = () => {
+  state.frameShow = false
+  nextTick(() => {
+    state.frameShow = true
+  })
+}
+
+onMounted(() => {
+  useEmitt({
+    name: 'frameLinksChange-' + element.value.id,
+    callback: function () {
+      frameLinksChange()
+    }
+  })
+})
+</script>
+
+<style lang="less" scoped>
+.info-class {
+  text-align: center;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(255, 255, 255, 0.3);
+  font-size: 12px;
+  color: #9ea6b2;
+}
+
+.main-frame {
+  height: 100%;
+  width: 100%;
+}
+
+.frame-mask {
+  display: flex;
+  opacity: 0.5;
+  position: absolute;
+  top: 0px;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.edit-mask {
+  left: 0px;
+  background-color: #5c5e61;
+  height: 100% !important;
+  width: 100% !important;
+}
+
+.preview-top-mask {
+  left: 0px;
+  height: 15px !important;
+  width: 100% !important;
+}
+
+.preview-right-mask {
+  right: 0px;
+  height: 100% !important;
+  width: 15px !important;
+}
+
+.preview-left-mask {
+  left: 0px;
+  height: 100% !important;
+  width: 15px !important;
+}
+</style>
diff --git a/core/core-frontend/src/utils/components.ts b/core/core-frontend/src/utils/components.ts
index c0f16138c1..5abe75b2e4 100644
--- a/core/core-frontend/src/utils/components.ts
+++ b/core/core-frontend/src/utils/components.ts
@@ -25,6 +25,8 @@ import DeTimeClock from '@/custom-component/de-time-clock/Component.vue'
 import DeTimeClockAttr from '@/custom-component/de-time-clock/Attr.vue'
 import GroupArea from '@/custom-component/group-area/Component.vue'
 import GroupAreaAttr from '@/custom-component/group-area/Attr.vue'
+import DeFrame from '@/custom-component/de-frame/ComponentFrame.vue'
+import DeFrameAttr from '@/custom-component/de-frame/Attr.vue'
 export const componentsMap = {
   VText: VText,
   VQuery,
@@ -52,7 +54,9 @@ export const componentsMap = {
   DeTimeClock: DeTimeClock,
   DeTimeClockAttr: DeTimeClockAttr,
   GroupArea: GroupArea,
-  GroupAreaAttr: GroupAreaAttr
+  GroupAreaAttr: GroupAreaAttr,
+  DeFrame: DeFrame,
+  DeFrameAttr: DeFrameAttr
 }
 
 export default function findComponent(key) {