carInsightSystem/src/views/Index/index.vue

<!--
 * @Author: xw
 * @Date: 2021-10-08 09:17:42
 * @LastEditTime: 2021-10-13 14:51:05
 * @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></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'}">
          <v-table :columns="columns" :data="tbData" :pagination="false"> </v-table>
     </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";
export default {
  name: "index",
  components: {
    realTimeEvent, // 实时事件
    keyCommunicationPositions, // 传播重点阵地
    salesRank, // 热销排行
    userPortrait, // 用户画像
    spreadTheSound, // 传播声量TOP10
    barometer, // 晴雨表
    tailInsight, // 尾翼洞察
    hotDiscussionGraph, // 热议图谱
    dynamicNumber, // 中间大数据
  },
  data() {
    return {
      modalObj: {
        title: "全网数据实时动态",
        visible: false,
      },
      columns: [
        {
          title: "标题",
          key: "name",
          dataIndex: "name",
        },
        {
          title: "发布时间",
          dataIndex: "age",
          key: "age",
        },
        {
          title: "作者",
          dataIndex: "address",
          key: "address",
        },
         {
          title: "来源",
          dataIndex: "laiyuan",
          key: "laiyuan",
        },
      ],
      tbData: [
          {
          key: "1",
          name: "John Brown",
          age: 32,
          address: "New York No. 1 Lake Park",
          tags: ["nice", "developer"],
        },
        {
          key: "2",
          name: "Jim Green",
          age: 42,
          address: "London No. 1 Lake Park",
          tags: ["loser"],
        },
        {
          key: "3",
          name: "Joe Black",
          age: 32,
          address: "Sidney No. 1 Lake Park",
          tags: ["cool", "teacher"],
        },
      ]
    };
  },
};
</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>