big_data_ott/src/views/Activity/Activity.vue

<template>
  <div class="activity">
    <el-loading></el-loading>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>新媒体</el-breadcrumb-item>
      <el-breadcrumb-item>重大活动传播数据</el-breadcrumb-item>
    </el-breadcrumb>
    <br />
    <el-tabs
      tab-position="top"
      style="max-height: 100%;"
      @tab-click="selectTab"
    >
      <el-tab-pane
        :label="item.name"
        v-for="(item, i) in activitys"
        :key="i"
        :name="i + ''"
      >
        <component
          :is="item.component"
          v-if="item.componentReal === select || selectA[item.componentReal]"
          :item="item"
        ></component>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
// @ is an alias to /src
let sha256 = require("js-sha256").sha256;
import { guijiLogin, guijiActivity, defaultAjax } from "@/api/index";
import derunsanqin from "./views/derunsanqin.vue";
import defaultComponent from "./views/defaultComponent.vue";
import huashanyunhai from "./views/huashanyunhai.vue";
import mianmianjiedao from "./views/mianmianjiedao.vue";
import zhongqiuzhiye from "./views/zhongqiuzhiye.vue";
import shanxijiaoao1 from "./views/shanxijiaoao1.vue";
import shanxijiaoao2 from "./views/shanxijiaoao2.vue";

export default {
  name: "Activity",
  data() {
    return {
      activitys: [],
      select: "",
      selectA: {},
    };
  },
  mounted() {
    if (localStorage.getItem("chinaMap")) this.init();
    else this.getMap();
  },
  computed: {},
  methods: {
    init() {
      let from = new FormData();
      from.append("username", "admin");
      from.append("sign", sha256("adminabc123456").toLowerCase());
      if (localStorage.guijiToken) {
        return guijiActivity().then(topic => {
          this.getTab(topic);
        });
      }
      guijiLogin(from).then(res => {
        localStorage.guijiToken = res.token || "";
        guijiActivity().then(topic => {
          this.getTab(topic);
        });
      });
    },
    getMap() {
      defaultAjax({
        url:
          "https://dangjian-web.oss-accelerate-overseas.aliyuncs.com/dj/static/chinaMap.json",
      }).then(map => {
        localStorage.setItem("chinaMap", JSON.stringify(map.json));
        this.init();
      });
    },
    getTab(topic) {
      let activitys = [];
      (topic || []).map(v => {
        activitys.push({
          isCollectPlatform: v.isCollectPlatform,
          component: "defaultComponent",
          componentReal: "defaultComponent" + v.activityId,
          activityId: v.activityId,
          realName: v.name,
          sortNo: v.sortNo,
          name: v.alias,
        });
      });
      activitys = activitys.concat([
        {
          name: "德润三秦",
          url: ["https://djweb.smcic.net/dj/static/t.json?" + Date.now()],
          component: "derunsanqin",
          componentReal: "derunsanqin",
        },
        {
          name: "华山云海音乐会",
          component: "huashanyunhai",
          componentReal: "huashanyunhai",
        },
        {
          name: "面面皆道",
          componentReal: "mianmianjiedao",
          component: "mianmianjiedao",
        },
        {
          name: "2021中秋之夜",
          component: "zhongqiuzhiye",
          componentReal: "zhongqiuzhiye",
        },
        {
          name: "我爱我的家乡第二季：陕西骄傲",
          component: "shanxijiaoao2",
          componentReal: "shanxijiaoao2",
        },
        {
          name: "我爱我的家乡第一季",
          component: "shanxijiaoao1",
          componentReal: "shanxijiaoao1",
        },
      ]);
      this.activitys = activitys;
      this.select = (this.activitys[0] || {}).componentReal;
      this.selectA[this.select] = true;
    },
    selectTab(tab) {
      try {
        this.select = this.activitys[tab.index].component;
        this.selectA[this.select] = true;
      } catch (err) {
        console.log(err);
      }
    },
  },
  beforeUnmount: function() {},
  components: {
    derunsanqin,
    huashanyunhai,
    mianmianjiedao,
    zhongqiuzhiye,
    shanxijiaoao1,
    shanxijiaoao2,
    defaultComponent,
  },
};
</script>

<style>
.activity {
  padding: 10px 15px;
  box-sizing: border-box;
}

.activity .num {
  font-size: 42px;
  color: #91afc8;
}
.titleNum {
  text-align: center;
}
.chart {
  padding: 5px 3px;
}

.subtitle {
  font-size: 16px;
  font-weight: 600;
}

.wumen {
  height: 1.5em;
  overflow: hidden;
  border-radius: 3px;
  background-color: #f47f92;
  text-align: right;
}
.men {
  width: 50%;
  background-color: #11a0f8;
  height: 100%;
}
</style>