修改链接

src/assets/icons/full.svg

@@ -0,0 +1,9 @@
+<?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="1684743411414" class="icon" viewBox="0 0 1024 1024" version="1.1"
+  xmlns="http://www.w3.org/2000/svg" p-id="2379" xmlns:xlink="http://www.w3.org/1999/xlink"
+  width="32" height="32">
+  <path
+    d="M358.4 768H426.666667v85.333333H213.333333v-213.333333h85.333334v68.266667l128-128 59.733333 59.733333-128 128z m345.6 0l-128-128 59.733333-59.733333 132.266667 132.266666V640h85.333333v213.333333h-213.333333v-85.333333h64zM358.4 298.666667l128 128-59.733333 59.733333-128-128V426.666667H213.333333V213.333333h213.333334v85.333334H358.4z m345.6 0H640V213.333333h213.333333v213.333334h-85.333333V354.133333l-132.266667 132.266667-59.733333-59.733333 128-128z"
+    fill="currentColor" p-id="2380"></path>
+</svg>

src/views/visualization/components/Footer.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="bg min-w-392px h-30px absolute bottom-0 left-1/2 z-999 footer flex items-end">
-    <div class="h-27px w-full flex text-white text-12px font-bold px-18px">
+  <div class="bg min-w-420px h-42px absolute bottom-0 left-1/2 z-999 footer flex items-end">
+    <div class="h-37px w-full flex text-white text-12px font-bold px-18px">
       <div class="flex-1 flex">
         <div
           class="h-full flex items-center cursor-pointer justify-center px-10px flex-none"
@@ -57,6 +57,7 @@
         </div>
       </template>
     </LinkModal>
+    <IframeModal v-model:visible="iframeModalShow" :footer="null" />
   </div>
 </template>
 
@@ -66,6 +67,7 @@
   import { getFriendLinks } from '/@/api/sys/other'
   import { onBeforeMount, ref } from 'vue'
   import LinkModal from '../LinkModal.vue'
+  import IframeModal from './IframeModal.vue'
   import { useVContext } from '../useVContext'
   const { rootEmitter } = useVContext()
   const getPopupContainer = (trigger) => {
@@ -91,6 +93,7 @@
   const rFriendlinks = ref([])
 
   const visibleModal = ref(false)
+  const iframeModalShow = ref(false)
 
   const current = ref({})
 
@@ -142,11 +145,11 @@
   }
 
   ::v-deep(.fotter-popover) {
-    top: -85px !important;
-    left: 10px !important;
+    top: -100px !important;
+    left: 12px !important;
 
     .ant-popover-inner-content {
-      width: 375px;
+      width: 400px;
       border: 1px solid rgba(57, 102, 132, 1);
     }
 

src/views/visualization/components/IframeModal.vue

@@ -0,0 +1,142 @@
+<template>
+  <div class="IframeModal">
+    <a-modal
+      v-bind="getBindValue"
+      :bodyStyle="{ background: '#233741', color: '#fff' }"
+      destroyOnClose
+      :width="isFull ? '100%' : '80%'"
+      :maskClosable="false"
+      :keyboard="false"
+      :closable="false"
+      :getContainer="getContainer"
+      :wrap-class-name="isFull ? 'full-modal' : 'default-height'"
+    >
+      <div class="flex items-center justify-end">
+        <div class="flex">
+          <div class="pr-30px">
+            <SvgIcon
+              @click="handleFull"
+              name="full-screen"
+              class="text-[#76E9F0] cursor-pointer"
+              :size="22"
+            />
+          </div>
+          <img
+            @click="closeModal"
+            class="w-22px h-22px inline text-0 cursor-pointer"
+            src="../../../assets/images/model-close-icon.png"
+            alt=""
+            srcset=""
+          />
+        </div>
+      </div>
+      <div class="h-full mt-5">
+        <iframe
+          v-if="url"
+          onload="Javascript:setHeight(this)"
+          :src="url"
+          frameborder="0"
+          width="100%"
+          height="100%"
+        ></iframe>
+      </div>
+    </a-modal>
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent, computed, ref, unref, watchEffect } from 'vue'
+  import { SvgIcon } from '/@/components/Icon'
+  import { Modal } from 'ant-design-vue'
+
+  export default defineComponent({
+    components: {
+      [Modal.name]: Modal,
+      SvgIcon,
+    },
+    props: {
+      visible: {
+        type: Boolean,
+      },
+      url: {
+        type: String,
+      },
+    },
+    setup(props, { attrs }) {
+      const modelVisible = ref(false)
+      const isFull = ref(false)
+
+      const getBindValue = computed(() => {
+        const attr = {
+          ...attrs,
+          ...unref(props),
+          visible: unref(modelVisible),
+          maskClosable: false,
+          wrapClassName: 'cu-iframe-modal',
+        }
+        return attr
+      })
+      const url = computed(() => {
+        return props.url
+      })
+      const closeModal = () => {
+        modelVisible.value = false
+      }
+
+      watchEffect(() => {
+        modelVisible.value = !!props.visible
+      })
+
+      const getContainer = () => {
+        if (document.body.clientWidth < 3000) return document.body
+        return document.body.querySelector(`.IframeModal`)
+      }
+
+      const handleFull = () => {
+        isFull.value = !isFull.value
+      }
+
+      return {
+        isFull,
+        url,
+        closeModal,
+        handleFull,
+        getBindValue,
+        getContainer,
+      }
+    },
+  })
+</script>
+
+<style lang="less">
+  .full-modal {
+    .ant-modal {
+      max-width: 100%;
+      top: 0;
+      padding-bottom: 0;
+      margin: 0;
+    }
+
+    .ant-modal-content {
+      display: flex;
+      flex-direction: column;
+      height: calc(100vh);
+    }
+
+    .ant-modal-body {
+      flex: 1;
+    }
+  }
+
+  .default-height {
+    .ant-modal-content {
+      display: flex;
+      flex-direction: column;
+      height: calc(80vh);
+    }
+
+    .ant-modal-body {
+      flex: 1;
+    }
+  }
+</style>