carInsightSystem/src/views/EventDEC/index.vue

<!--
 * @Author: your name
 * @Date: 2021-10-19 15:57:11
 * @LastEditTime: 2021-11-16 17:16:55
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /data-show/src/views/EventDEC/index.vue
-->
<template>
    <div class="d-container">
        <div class="edec-outter">
            <div class="edec-d1">
                <v-label-div title="事件详情">
                    <v-btn @click="goback">返回</v-btn>
                </v-label-div>
                <div class="edec-d1-dd1">
                    <div class="d1">{{eventObj.events_type}}</div>
                    <div class="d2">
                        <div class="s1">{{eventObj.events_title}}</div>
                        <div class="s2">{{eventObj.description}}</div>
                    </div>
                </div>
                <div class="edec-d1-dd2">
                    <div class="d1" style="margin-left: 16px">
                        <img class="m1" src="../../assets/images/EventInsight/ic_kssj.png" />
                        <span class="s1">开始时间：</span>
                        <span class="s2">{{eventObj.source_time}}</span>
                    </div>
                    <div class="d1">
                        <img class="m1" src="../../assets/images/EventInsight/ic_yxl.png" />
                        <span class="s1">影响力指数：</span>
                        <span class="s2">{{eventObj.Effect}}</span>
                    </div>
                    <div class="d1">
                        <img class="m1" src="../../assets/images/EventInsight/ic_cbl.png" />
                        <span class="s1">传播总量：</span>
                        <span class="s2">{{eventObj.events_count}}</span>
                    </div>
                </div>
            </div>
            <incidentSpreadSituation :id="events_id"></incidentSpreadSituation>
            <tonalCommunicationPosture :id="events_id"></tonalCommunicationPosture>
            <esprocess :id="events_id"></esprocess>
            <mediaInterpretationEc :id="events_id"></mediaInterpretationEc>
            <mediaInterpretationED :id="events_id"></mediaInterpretationED>
            <wbUserEDE :id="events_id"></wbUserEDE>
            <div class="edec-d2">
                <v-label-div title="尾翼分析">
                </v-label-div>
                <tailAnalysisED :id="events_id"></tailAnalysisED>
                <div class="edec-dd1">
                    <kmdED :id="events_id"></kmdED>
                    <pnwcWord :id="events_id"></pnwcWord>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import incidentSpreadSituation from "./incidentSpreadSituation";
import tonalCommunicationPosture from "./tonalCommunicationPosture";
import esprocess from "./esprocess";
import mediaInterpretationEc from "./mediaInterpretationEc";
import mediaInterpretationED from "./mediaInterpretationED";
import wbUserEDE from "./wbUserEDE";
import tailAnalysisED from "./tailAnalysisED";
import kmdED from "./kmdED"
import pnwcWord from "./pnwcWord"
import {getEventData} from '@/api/EventdEC'
export default {
    name: "eventDEC",
    components: {
        incidentSpreadSituation, // 事件传播态势
        tonalCommunicationPosture, // 调性传播态势
        esprocess, // 事件传播历程
        mediaInterpretationEc, // 事件传播历程-媒体解读
        mediaInterpretationED, // 媒体解读
        wbUserEDE, // 微博用户画像
        tailAnalysisED, // 尾翼分析
        kmdED, // 重点媒体分布
        pnwcWord // 正负词云
    },
    data() {
        return {
            gValue: 0,
            total: 0,
            Time: "",
            events_id: "",
            eventObj: {
                events_type: "",
                events_title: "",
                description: "",
                source_time: "",
                events_count: 0,
                Effect: ""
            },
            form: {
                sRele: "",
                token: "",
            }
        }
    },
    created() {
        this.form.token = this.getToken;
        this.events_id = this.$route.query.events_id || "";
        this.form.sRele = this.events_id;
        this.getDdta();
    },
    methods: {
        getDdta(){
             let obj = Object.assign({},this.form);
             this.load = true;
             getEventData(obj).then(res => {
                let data = res.data || [];
                this.eventObj = {...data[0]._source};
                this.load = false;
            })
        },
        goback() {
            this.$router.go(-1);
        },
    },
};
</script>
<style lang="less" scoped>
.edec-outter {
    padding: 0px 16px 16px 16px;
}
.edec-d1 {
    width: 100%;
    height: 245px;
    border: 2px solid #0f2a4d;
    overflow: hidden;
    .edec-d1-dd1 {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: flex-start;
        .d1 {
            width: 120px;
            height: 120px;
            background-image: url("../../assets/images/EventInsight/img_xlq.png");
            background-repeat: no-repeat;
            background-size: cover;
            margin-left: 16px;
            margin-top: 16px;
            line-height: 120px;
            text-align: center;
            color: #006dff;
        }
        .d2 {
            width: 1714px;
            margin-left: 16px;
            .s1 {
                font-size: 20px;
                color: #fff;
                margin-top: 36px;
            }
            .s2 {
                width: 100%;
                color: #828990;
                font-size: 14px;
                margin-top: 6px;
                height: 40px;
                word-break: break-all;
                text-overflow: ellipsis;
                overflow: hidden;
            }
        }
    }
    .edec-d1-dd2 {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .d1 {
            width: 620px;
            margin-top: 15px;
            .m1 {
                width: 44px;
                height: 44px;
            }
            .s1 {
                display: inline-block;
                font-size: 12px;
                color: #878887;
                margin-left: 4px;
            }
            .s2 {
                display: inline-block;
                font-size: 12px;
                font-family: Bebas;
                color: #ffffff;
            }
        }
    }
}
.edec-d2 {
    width: 100%;
    height: auto;
    border: 2px solid #0f2a4d;
    margin-top: 16px;
    .edec-dd1 {
        width: 100%;
        display: flex;
        justify-content: flex-start;
    }
}
</style>