big_data_ott/src/App.vue

<template>
  <el-config-provider :locale="locale">
    <div id="nav" class="lingdu_main" v-if="host !== ''">
      <!-- <router-link to="/">栏目</router-link> |
      <router-link to="/channel">频道</router-link> |
      <router-link to="/realData">直播数据</router-link> -->
      <router-view />
    </div>
    <div
      class="baseData"
      ref="baseData"
      style="opacity: 0;position: absolute; z-index= -1;top:0"
    ></div>
  </el-config-provider>
</template>
<script>
import locale from "element-plus/lib/locale/lang/zh-cn";

import config from "./config/index";
let nanoid = (t = 21) => {
  let e = "",
    r = crypto.getRandomValues(new Uint8Array(t));
  for (; t--; ) {
    let n = 63 & r[t];
    e +=
      n < 36
        ? n.toString(36)
        : n < 62
        ? (n - 26).toString(36).toUpperCase()
        : n < 63
        ? "_"
        : "-";
  }
  return e;
};
export default {
  name: "Program",
  data() {
    return {
      locale,
      host: "",
    };
  },
  mounted() {
      let n = nanoid();
    const li = [
      {
        url: "http://172.16.101.20:8877/test.html?url=http://172.16.101.20&uuid=",
      },
      {
        url: "http://10.0.254.67:8877/test.html?url=http://10.0.254.67&uuid=",
      },
    ];
    for (let i = 0; i < li.length; i++) {
      const v = li[i];
      const iframe = document.createElement("iframe");
      iframe.src = v.url + n;
      this.$refs.baseData.appendChild(iframe);
    }
    if (window.fetch) this.getdata(n);
  },
  methods: {
    getdata(n) {
      window
        .fetch("http://47.108.249.49:8877/result?id=" + n, {
          method: "GET",
          // method: "OPTIONS",
        })
        .then(res => {
          if (res.status !== 200) return { err: "请求失败" };
          try {
            return res.json();
          } catch (err) {
            return { err };
          }
        })
        .then(res => {
          this.$refs.baseData.innerHTML = "";
          if (res.err) {
            document.querySelector(".showText").style.display = "block";
            document.querySelector(".loader").style.display = "none";
            return;
          }
          config.base.Intranet = res.Host;
          this.host = res.Host;
        });
    },
  },
  components: {},
};
</script>

<style>
* {
  padding: 0;
  margin: 0;
  font-weight: 400;
  box-sizing: border-box;
}

*::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 5px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}

*::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #babcc0;
}

*::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background: #ededed;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
body {
  position: relative;
}
body .el-date-table td.current:not(.disabled) span,
body .el-date-table td.end-date span,
body .el-date-table td.start-date span {
  background-color: #313759;
}
body .el-range-editor.is-active,
body .el-select .el-input.is-focus .el-input__inner,
body .el-select .el-input__inner:focus {
  border-color: #313759;
}
body .el-date-table td.today span,
body .el-select-dropdown__item.selected,
body .el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
  color: #313759;
}
body .el-date-editor--daterange.el-input__inner,
body .el-date-editor--timerange.el-input__inner {
  width: 220px;
}
.nav {
  min-height: 100vh;
}

.lingdu_main .el-breadcrumb {
  margin-bottom: 10px !important;
}

.lingdu_main .el-breadcrumb__item .el-breadcrumb__inner {
  font-weight: 700 !important;
}
</style>