人脉地图

dsk-operate-ui/src/views/relation/index.vue

+<template>
+  <div v-loading="loading" class="market-container">
+    <iframe id="companyIframe" class="market-iframe" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" width="100%" :src="src" />
+    <!--<iframe id="companyIframe" class="market-iframe" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" width="100%" src="https://www.jianchayun.com/company/56546856314e567a69/?index=true" />-->
+  </div>
+</template>
+
+<script>
+import { steerScroll } from '@/assets/js/jskplug';
+import { dskAccessToken } from '@/api/common';
+import { encodeStr } from "@/assets/js/common";
+import MaxPageSizeTip from "@/views/components/MaxPageSizeTip.vue";
+import { getUipIdByCid } from '@/api/macro/macro';
+export default {
+  name: 'Relation',
+  components: {
+    MaxPageSizeTip
+  },
+  data() {
+    return {
+      encodeStr,
+      loading: false, // 是否加载完成-当前页控制
+      iframeTimer: '',  // 是否加载中定时器-当前页控制
+      footHeight: 0,  //底部高度，若为0（页面内部嵌套或者没有底部板块）
+      iframeHight: `${window.innerHeight}px`, // iframe高度-当前页控制
+      navigation: { isFixed: true, fixedHeight: 56, totalHeight: 68 },  // iframe之外页面顶部对象，ifFixed:是否浮动；fixedHeight：浮动对象高度；totalHeight：顶部整体高度
+      src: '',  //iframe嵌套页面地址
+      domain: 'https://plug.jiansheku.com', // 插件地址
+      // domain: 'https://pre-plug.jiansheku.com', // 插件地址测试
+      domain: 'http://192.168.60.210:3400',
+      ak: 'aec7b3ff2y2q8x6t49a7e2c463ce21912', // 需要携带的sdkId
+      timelongs: 7200,//刷新token时间
+      tokentimer: null,
+      showMaxPageTip: false,
+      iframeIns: null,
+      systemCode:'ZTESJ', //每个项目传的对应参数都不一样
+    };
+  },
+  created() {
+    this.domain = process.env.VUE_APP_SUB_SYSTEM_ADDRESS;
+    this.gettokens();
+    this.iframeObserver();
+  },
+  mounted() {
+    this.iframeLoading(); // 判断iframe页面是否加载完成-当前页控制
+    // steerScroll('companyIframe', this.navigation, this.footHeight, true); // iframeId: iframe的id；navigation:页面排除iframe后剩下的顶部高度；footHeight: 页面排除iframe后剩下的底部高度；state:监听or移除监听；parentId: 父级id[不带默认就是铺满整个页面]];_this:指向当前实例（可忽略）
+  },
+  beforeDestroy() {
+    clearInterval(this.iframeTimer); // -当前页控制
+    steerScroll('companyIframe', this.navigation, this.footHeight); // iframeId: iframe的id；navigation:页面排除iframe后剩下的顶部高度；footHeight: 页面排除iframe后剩下的底部高度；state:监听or移除监听；parentId: 父级id[不带默认就是铺满整个页面]];_this:指向当前实例（可忽略）
+    clearInterval(this.tokentimer);
+    // 移除layout样式
+    this.iframeIns?.contentWindow ? this.iframeIns.contentWindow.postMessage("removeHtmlLayoutStyle", { targetOrigin: this.domain, }) : null;
+  },
+  methods: {
+    async iframeObserver() {
+      try {
+        await this.$nextTick();
+        this.iframeIns = document.querySelector(".market-iframe");
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    gettokens() {
+      dskAccessToken().then(res => {
+        if (res.code == 200) {
+          this.timelongs = res.data.expire;
+          this.ak = res.data.accessToken;
+          this.src = `${this.domain}/search/relation?ak=${this.ak}&initTime=${new Date().getTime()}&uid=${this.ak}&origin=${window.location.origin}&type=1&systemCode=${this.systemCode}&userCode=${this.$store.state.user.userId}`;
+          this.refreshtoken();
+        } else {
+          clearTimeout(this.tokentimer);
+        }
+      });
+    },
+    refreshtoken() {
+      this.tokentimer = setTimeout(() => {
+        dskAccessToken().then(res => {
+          if (res.code == 200) {
+            this.timelongs = res.data.expire;
+            this.ak = res.data.accessToken;
+            let ifam = document.getElementById('companyIframe');	//iframe的id
+            let akObj = res.data.expire;	//accessToken接口的返回值
+            let initTime = new Date().getTime(); 	//accessToken接口返回后的当前时间戳
+            ifam.contentWindow.postMessage({ 'accessToken': akObj.accessToken, 'initTime': initTime }, '*');
+          } else {
+            clearTimeout(this.tokentimer);
+          }
+        });
+      }, this.timelongs * 1000);
+    },
+    //判断iframe页面是否加载完成-当前页控制
+    iframeLoading() {
+      let iframeHeight = document.getElementById("companyIframe").clientHeight, number = 0;
+      this.iframeTimer = setInterval(() => {
+        number++;
+        if (document.getElementById("companyIframe").clientHeight != iframeHeight || number == 5000) {
+          this.loading = false;
+          clearInterval(this.iframeTimer);
+        }
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.market-container {
+  width: 100%;
+  height: 100%;
+  padding: 16px 24px;
+  padding-right: 15px;
+  box-sizing: border-box;
+  position: absolute;
+  left: 0;
+  top: 0;
+
+  .market-iframe {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>