内嵌网站

路径：/src/components/iframe/index.vue

使用

1.在网站菜单管理中，地址一栏中填入目标页面路径，并加上参数?。目前支持charging,fire,energy，分别为充电桩，智慧消防，工业能耗。按钮类型选内嵌网站。

2.智慧消防，工业能耗的token和userInfo从/public/iframeConfig.js中获取，目前是写死的永久token。

3.充电桩内嵌完成度更高，目前如果在iframeConfig中配置了token，则使用此token。若没配置，则使用eiot的token，充电桩的内嵌页面会使用此token获取用户登录数据。

说明

1.查看/src/layout/components/Sidebar/Link.vue，会根据不同的菜单类型，跳转不同的内嵌组件。此处将跳转的目标网址进行base64编码，然后通过路由传递，是为了避免浏览器对url进行urlEncode导致数据难处理。

 linkProps(to) {
      // 4:内嵌网站
      // 5:内嵌页面
      // 6:内嵌大屏

      if (this.item.menuType === 4) {
        // 内嵌外链，跳转iframe页面
        // console.log(this.item)

        return {
          to: '/iframe/web' + '?src=' + window.btoa(to)
        }
      } else if (this.item.menuType === 5) {
        return {
          to: '/iframe/normal' + '?src=' + window.btoa(to)
        }
      } else if (this.item.menuType === 6) {
        return {
          to: '/iframe/screen' + '?src=' + window.btoa(to)
        }
      }
 }

2.对于内嵌网站，主要使用postMessage传值。postInt()做基础数据传值以及路由跳转。

   postMessage(type, data) {
      console.log('postMessage', { type, data })
      this.iframeWin.postMessage({ type, data }, '*')
    }

3.支持多语言和主题色切换。

  // 多语言，值:"zh-CN","en-US"
    langChange() {
      this.postMessage('lang', this.lang)
    },
    //主题，值："lightTheme","darkTheme"
    themeChange() {
      this.postMessage('theme', this.currentTheme)
    }