carInsightSystem/src/views/ThemeBoard/index.vue

<template>
  <div class="d-container">
      <div class="d-outter">
          <div class="d-outter-d1">
              <v-label-div title="主题概述">
                  <v-btn @click="goDownload">下载</v-btn>
                  <v-btn @click="goBack">返回</v-btn>
              </v-label-div>
              <div class="s1">
                  {{themeObj.title}}
              </div>
              <!-- <div class="s2">
                  <span v-html="msg"></span>
              </div> -->
          </div>
          <totalVolume></totalVolume>
          <eventTransform></eventTransform>
          <transformAnalize></transformAnalize>
          <totalSource></totalSource>
          <div class="d5">
              <sourceDivide></sourceDivide>
              <userTopic></userTopic>
          </div>
          <div class="d6">
              <themeSource></themeSource>
              <wordCloud></wordCloud>
          </div>
          <!-- <div class="d8">
              <peopleGender></peopleGender>
              <peopleAuthen></peopleAuthen>
          </div> -->
          <div class="wb-analize">
              <weiboAnalize></weiboAnalize>
          </div>
      </div>
  </div>
</template>

<script>
import {getSummarizeMerge} from "@/api/ThemeAnalizeDec"
import totalVolume from "./TotalVolume" //总声量趋势
import eventTransform from "./EventTransform" //事件传播历程
import transformAnalize from "./TransformAnalize" //传播分析
import totalSource from "./TotalSource" //渠道分布
import sourceDivide from "./SourceDivide" //渠道分布占比
import userTopic from "./UserTopic" //用户热议话题
import themeSource from "./ThemeSource" //主题调性分布
import wordCloud from "./WordCloud" //词云
import peopleGender from "./PeopleGender" //人群画像性别分析
import peopleAuthen from "./PeopleAuthen" //人群画像认证分析
import weiboAnalize from "./WeiboAnalize" //微博分析
import {getToPptTask} from "@/api/ThemeAnalizeDec" //ppt导出
export default {
    name: "ThemeBoard",
    components: {
        totalVolume,
        eventTransform,
        transformAnalize,
        sourceDivide,
        userTopic,
        totalSource,
        themeSource,
        wordCloud,
        peopleGender,
        peopleAuthen,
        weiboAnalize
    },
    data() {
        return {
            themeObj: {
                title: '',
                content: ''
            },
            form: {
                token: ''
            },
            msg: '',
            downloadForm: {
                sType: 'ZhuTiFenXiBl',
                sGuid: '',
                sData: {
                    getSummarize: '',
                    getAffections: {Msg: '',sBase64: ''},
                }
            }
        }
    },
    created() {
        this.form = Object.assign({},{token: this.getToken},this.$route.query)
        this.downloadForm.sGuid = this.$route.query.sGuid;
        this.getTitleData();
    },
    methods: {
        goBack() {
            this.$router.go(-1);
        },
        getTitleData() {
            let obj = Object.assign({}, this.form);
            getSummarizeMerge(obj).then(res => {
                let data = res.data;
                this.downloadForm.sData.getSummarize = data.Summarize;
                this.downloadForm.sData.getAffections.Msg = data.AffectionsMsg;
                let o = {
                    title: data.Summarize,
                    content: data.AffectionsMsg
                };  
                this.themeObj = o;
                let redMsg = data.AffectionsMsg.replace(/<font>/g,"<font style='color: rgb(225,1,22)'>");
                this.msg = redMsg;
            })
        },
        goDownload() {
            let obj = Object.assign({}, this.form);
            obj.sType = 'ToZhuTiPptV6';
            getToPptTask(obj).then(() => {
                this.$notification.open({
                    message: `数据生成中`,
                    description: '请前往个人中心查看下载进度',
                    placement: 'bottomRight',
                });
            })
        },
    }
}
</script>

<style lang="less">
.d-outter {
    padding: 0px 16px 16px 16px;
}
.d-outter-d1 {
    width: 100%;
    // height: 195px;
    border: 2px solid #0f2a4d;
    overflow: hidden;
    .s1 {
        color: rgb(255, 255, 255);
        font-size: 20px;
        padding: 16px;
    }
    .s2 {
        color: rgba(255, 255, 255, 0.6);
        font-size: 14px;
        padding: 0px 16px 16px 16px;
    }
}
.d5 {
    width: 100%;
    height: 460px;
    margin-top: 16px;
    display: flex;
    justify-content: space-between;
}
.d6 {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-start;
  margin-top: 16px;
}
.d7 {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-start;
  margin-top: 16px;
}
.d8 {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-start;
  margin-top: 16px;
}
.wb-analize {
  width: 100%;
  height: auto;
  display: flex;
  border: 2px solid #0f2a4d;
  justify-content: flex-start;
  margin-top: 16px;
  .wb-inner {
        width: 100%;
        height: calc(100% - 48px);
        display: flex;
        justify-content: flex-start;
  }
}
</style>