carInsightSystem/src/views/Index/index.vue

<!--
 * @Author: xw
 * @Date: 2021-10-08 09:17:42
 * @LastEditTime: 2021-10-23 15:07:04
 * @LastEditors: Please set LastEditors
 * @Description: 行业洞察
 * @FilePath: /data-show/src/views/Index/index.vue
-->
<template>
    <div class="d-container">
        <div class="In-body">
            <div class="d1">
                <real-time-event></real-time-event>
                <key-communication-positions></key-communication-positions>
                <spread-the-sound></spread-the-sound>
            </div>
            <div class="d2">
                <div class="d2-top">
                    <dynamic-number @allData="handlerAllData"></dynamic-number>
                </div>
                <div class="d2-bottom">
                    <barometer></barometer>
                    <tail-insight></tail-insight>
                </div>
            </div>
            <div class="d3">
                <sales-rank></sales-rank>
                <user-portrait></user-portrait>
                <hot-discussion-graph></hot-discussion-graph>
            </div>
        </div>
        <!--对话框-->
        <v-modal :eleStyle="{ width: '1200px', height: '720px' }" :visible.sync="modalObj.visible" :title="modalObj.title">
            <div slot="body" :style="{padding: '16px'}">
                <dv-scroll-board :config="config" style="width:1168px;height:640px" />
            </div>
        </v-modal>
    </div>
</template>

<script>
import realTimeEvent from "./realTimeEvent";
import keyCommunicationPositions from "./keyCommunicationPositions";
import salesRank from "./salesRank";
import userPortrait from "./userPortrait";
import spreadTheSound from "./spreadTheSound";
import barometer from "./barometer";
import tailInsight from "./tailInsight";
import hotDiscussionGraph from "./hotDiscussionGraph";
import dynamicNumber from "./dynamicNumber";
import { getHomeList0528 } from "@/api/home";
export default {
    name: "index",
    components: {
        realTimeEvent, // 实时事件
        keyCommunicationPositions, // 传播重点阵地
        salesRank, // 热销排行
        userPortrait, // 用户画像
        spreadTheSound, // 传播声量TOP10
        barometer, // 晴雨表
        tailInsight, // 尾翼洞察
        hotDiscussionGraph, // 热议图谱
        dynamicNumber, // 中间大数据
    },
    data() {
        return {
            modalObj: {
                title: "全网数据实时动态",
                visible: false,
            },
            config: {
                headerBGC: "#0F2A4D",
                oddRowBGC: "rgba(69, 149, 244, 0);",
                evenRowBGC: "#0F2A4D;",
                columnWidth: [460],
                rowNum: 10,
                header: ["标题", "发布时间", "作者", "来源"],
                data: [],
            },
        };
    },
    created() {
       this.getTableList();
    },
    mounted() {
      
      
    },
    methods: {
        handlerAllData() {
            this.modalObj.visible = true;
        },
        getTableList() {
            getHomeList0528(this.getCommTime).then((res) => {
                let arr = [];
                if (Array.isArray(res.data)) {
                    res.data.forEach((ele) => {
                        let a = [
                            ele._source.title,
                            ele._source.estime,
                            ele._source.user_author,
                            ele._source.source,
                        ];
                        arr.push(a);
                    });
                    this.config = {
                        headerBGC: "#0F2A4D",
                        oddRowBGC: "rgba(69, 149, 244, 0);",
                        evenRowBGC: "#0F2A4D;",
                        columnWidth: [460],
                        rowNum: 10,
                        header: ["标题", "发布时间", "作者", "来源"],
                        data: arr,
                    };
                }
            });
        },
    },
};
</script>

<style lang="less" scoped>
.In-body {
    padding: 0px 16px 16px 16px;
    display: flex;
    justify-content: flex-start;
    .d2 {
        width: 936px;
        margin-left: 16px;
        .d2-top {
            width: 100%;
            height: 644px;
        }
        .d2-bottom {
            display: flex;
            justify-content: flex-start;
        }
    }
}
</style>