carInsightSystem/src/views/EventInsight/industryTOPHE/index.vue

<!--
 * @Author: your name
 * @Date: 2021-10-18 09:34:53
 * @LastEditTime: 2021-11-15 11:53:37
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /data-show/src/views/EventInsight/IndustryTOPHE/index.vue
-->

<template>
    <div>
    <div class="hpo-outter" v-loading="loadTop">
        <v-label-div title="热点事件传播导向">
            <!-- <v-btn @click="goPath">事件对比</v-btn>
            <v-btn @click="goTheme">主题分析</v-btn> -->
            <v-double-button @left="goPath" @right="goTheme" :title="['事件对比','主题分析']"></v-double-button>
        </v-label-div>
        <div class="hpo-inner">
            <v-echarts @getData="clickEchars" :opt="opt"></v-echarts>
        </div>
    </div>
    <div class="itp-outter">
        <v-label-div title="行业TOP热点事件">
            <v-btn @click="goRefresh">重置</v-btn>
        </v-label-div>
        <div class="itp-inner">
            <dv-scroll-board :config="config" :style="{ width: '100%', height: '100%' }" @click="handlerSs" />
        </div>

    </div>

    </div>
</template>

<script>
import { getHotEventsList } from "@/api/EventInsight";
import {getPropagationDirection0528} from "@/api/EventInsight"
import createOpt from "./opt"
export default {
    name: "industryTOPHE",
    data() {
        return {
            loadTop: false,
            form: {
                token: "",
                sQudao: "",
                sSeriesName: ""
            },
            config: {},
            list: [],
            opt: createOpt()
        };
    },
    created() {
        this.form.token = this.getToken;
        this.getData();
        this.getDataList();
    },
    methods: {
        //- 事件列表 -//
        goDetails() {
            this.$router.push({ path: "/eventDEC" });
        },
        getDataList() {
            let obj = Object.assign({}, this.getCtime2, this.form);
            getHotEventsList(obj).then((res) => {
                let data = res.data || [];
                this.list = data;
                let arr = [];
                data.forEach((ele) => {
                    let o = [
                        `<span style="cursor: pointer;">${ele.events_title}</span>`,
                        ele.events_influence,
                        ele.events_type,
                        ele.events_brand,
                    ];
                    arr.push(o);
                });
                if(arr[0] == null) {
                    ;
                } else {
                    this.config = {
                    headerBGC: "#0c203b",
                    oddRowBGC: "#173b6d",
                    evenRowBGC: "rgba(69, 149, 244, 0)",
                    columnWidth: [900],
                    rowNum: 6,
                    header: ["事件标题", "影响力", "类型", "关联品牌"],
                    data: arr,
                    };
                }
            });
        },
        handlerSs(obj) {
          let rowIndex = obj.rowIndex;
          let row = this.list[rowIndex];
          this.$router.push({path: '/eventDEC', query: {events_id: row.events_id}})
        },
        goPath() {
            this.$router.push({path: '/eventComparison'})
        },
        goTheme() {
            this.setHeaderType(4);
            this.$router.push({path: '/themeAnalize'})
        },
        goRefresh() {
            this.form.sQudao = "";
            this.form.sSeriesName = "";
            this.getDataList();
        },
        //- 桑基图 -//
        // 获取后台数据
        getData() {
            this.loadTop = true;
            let obj = Object.assign({}, this.getCtime2, this.form);
            getPropagationDirection0528(obj).then(res => {
                let data = res.data;
                let d1 = data.data;
                let d2 = data.links;
                this.opt = createOpt(d1, d2);
                this.loadTop = false;
            })
        },
        //点击事件
        clickEchars(data) {
            let ele = data.key; //获取字段
            if(ele == "新车上市" || ele == "车展" || ele == "产品代言" || ele == "自燃") {
                this.form.sQudao = ele;
                this.form.sSeriesName = "";
            } else {
                this.form.sQudao = "";
                this.form.sSeriesName = ele;
            }
            this.getDataList();
        }
    },
};
</script>

<style lang="less" scoped>
.hpo-outter {
    width: 100%;
    height: 560px;
    border: 2px solid #0f2a4d;
    .hpo-inner {
        width: 100%;
        height: calc(100% - 48px);
    }
}
.itp-outter {
    width: 100%;
    height: 392px;
    border: 2px solid #0f2a4d;
    margin-top: 16px;
    .itp-inner {
        width: 100%;
        height: calc(100% - 48px);
    }
}
</style>