feat: 监控和日志 iframe 修改

packages/common/utils/url.ts

@@ -0,0 +1,18 @@
+export function appendParamsToUrl(url: string, pathname: string, params: Record<string, string>) {
+  // 创建一个新的URL对象，在末尾添加 pathname
+  const urlObject = new URL(pathname, url)
+
+  // 获取该URL的查询参数对象
+  const searchParams = new URLSearchParams(urlObject.search)
+
+  // 添加新的参数
+  for (const key in params) {
+    searchParams.append(key, params[key])
+  }
+
+  // 设置URL的查询参数
+  urlObject.search = searchParams.toString()
+
+  // 返回处理后的URL字符串
+  return urlObject.toString()
+}

webs/log-web/src/views/iframe.vue

@@ -1,31 +1,43 @@
 <template>
-  <div>
+  <div v-if="iframeUrl">
     <iframe :src="iframeUrl" frameborder="0" class="iframe-box"></iframe>
   </div>
 </template>
 
 <script>
 import { getToken } from '@cmp/cmp-element'
-function addParamsToUrl(url, params) {
-  const queryString = Object.keys(params)
-    .map(key => key + '=' + params[key])
-    .join('&')
-
-  // 检查原url中是否已存在查询字符串
-  const separator = url.includes('?') ? '&' : '?'
-  return url + separator + queryString
-}
+import { appendParamsToUrl } from '@cmp/cmp-common/utils/url.ts'
+import { getSystemTreeConfigs } from '@cmp/cmp-api/system'
 
 export default {
+  data() {
+    return {
+      url: ''
+    }
+  },
+  created() {
+    this.getUrl()
+  },
   computed: {
+    // 取系统配置里面的动态地址, 与菜单的 [路由地址] 进行拼接, params 为地址传参
     iframeUrl() {
+      if (!this.url) return ''
       const params = {
         token: getToken(),
         ...(this.$route.query || {})
       }
-      const url = addParamsToUrl(this.$route.meta.url, params)
+      const url = appendParamsToUrl(this.url, this.$route.path, params)
+      console.log('iframeUrl: ', url.toString())
       return url.toString()
     }
+  },
+  methods: {
+    async getUrl() {
+      const res = await getSystemTreeConfigs({ category: '系统对接' })
+      if (res.success) {
+        this.url = (res.data.find(item => item.name === '日志管理系统')?.values || []).find(({ code }) => code === 'LOGURL')?.value || ''
+      }
+    }
   }
 }
 </script>

webs/oms-web/src/router/index.js

@@ -1,3 +1,3 @@
 export default {
-  OmsDashbaord: () => import('views/iframe.vue')
+  LogIframe: () => import('views/iframe.vue')
 }

webs/oms-web/src/views/iframe.vue

@@ -1,31 +1,43 @@
 <template>
-  <div>
+  <div v-if="iframeUrl">
     <iframe :src="iframeUrl" frameborder="0" class="iframe-box"></iframe>
   </div>
 </template>
 
 <script>
 import { getToken } from '@cmp/cmp-element'
-function addParamsToUrl(url, params) {
-  const queryString = Object.keys(params)
-    .map(key => key + '=' + params[key])
-    .join('&')
-
-  // 检查原url中是否已存在查询字符串
-  const separator = url.includes('?') ? '&' : '?'
-  return url + separator + queryString
-}
+import { appendParamsToUrl } from '@cmp/cmp-common/utils/url.ts'
+import { getSystemTreeConfigs } from '@cmp/cmp-api/system'
 
 export default {
+  data() {
+    return {
+      url: ''
+    }
+  },
+  created() {
+    this.getUrl()
+  },
   computed: {
+    // 取系统配置里面的动态地址, 与菜单的 [路由地址] 进行拼接, params 为地址传参
     iframeUrl() {
+      if (!this.url) return ''
       const params = {
         token: getToken(),
         ...(this.$route.query || {})
       }
-      const url = addParamsToUrl(this.$route.meta.url, params)
+      const url = appendParamsToUrl(this.url, this.$route.path, params)
+      console.log('iframeUrl: ', url.toString())
       return url.toString()
     }
+  },
+  methods: {
+    async getUrl() {
+      const res = await getSystemTreeConfigs({ category: '系统对接' })
+      if (res.success) {
+        this.url = (res.data.find(item => item.name === '基础监控系统')?.values || []).find(({ code }) => code === 'MONITORURL')?.value || ''
+      }
+    }
   }
 }
 </script>