cxw-010203

src/router/index.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-10-08 09:26:29
- * @LastEditTime: 2021-10-15 10:51:46
+ * @LastEditTime: 2021-10-18 09:23:27
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/router/index.js
@@ -25,6 +25,7 @@ import ForumDetails from "@/views/ForumDetails"
 import TailInsightDetails from "@/views/TailInsightDetails"
 import WeiboDetails from "@/views/WeiboDetails"
 import BrandComparison from "@/views/BrandComparison"
+import EventInsight from "@/views/EventInsight"
 const router = [
     {
         path: "/",
@@ -86,6 +87,12 @@ const router = [
                 desc: "品牌洞察-品牌对比",
                 component: BrandComparison
             },
+            {
+                path: '/eventInsight',
+                name: "eventInsight",
+                desc: "事件洞察",
+                component: EventInsight
+            },
         ]
     },
    

src/views/EventComparison/index.vue

@@ -0,0 +1,24 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-18 09:55:16
+ * @LastEditTime: 2021-10-18 09:56:18
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/EventComparison/index.vue
+-->
+
+<template>
+    <div class="d-container">
+
+    </div>
+</template>
+
+<script>
+export default {
+    name: "EventComparison"
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>

src/views/EventInsight/hotEventPO/index.vue

@@ -0,0 +1,43 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-18 09:07:18
+ * @LastEditTime: 2021-10-18 09:21:37
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/EventInsight/hotEventPropagationOriented/index.vue
+-->
+<template>
+    <div class="hpo-outter">
+        <v-label-div title="热点事件传播导向">
+            <v-btn >事件对比</v-btn>
+        </v-label-div>
+        <div class="hpo-inner">
+            <v-echarts :opt="opt"></v-echarts>
+        </div>
+    </div>
+</template>
+
+<script>
+
+import createOpt from "./opt"
+export default {
+    name: "hotEventPO",
+    data() {
+        return {
+            opt: createOpt()
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.hpo-outter {
+    width: 100%;
+    height: 560px;
+    border: 2px solid #0f2a4d;
+    .hpo-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+    }
+}
+</style>

src/views/EventInsight/hotEventPO/opt.js

@@ -0,0 +1,98 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-13 09:09:51
+ * @LastEditTime: 2021-10-18 09:32:36
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/EventDetails/hotEventPropagationOriented/opt.js
+ */
+const citylist = [
+    {name: '领导人'},
+    {name: '自然'},
+    {name: '明星代言人'},
+    {name: '车展'},
+    {name: '新车上市'},
+    {name: '新闻'},
+    {name: '论坛'},
+    {name: '微博'},
+    {name: 'APP'},
+    {name: '短视频'},
+    {name: '吉利'},
+    {name: '奔驰'},
+    {name: '宝马'},
+    {name: '特斯拉'},
+    {name: '奥迪'},
+    {name: '女车主表态'},
+    {name: '广州车展'},
+    {name: '销量大增'},
+];
+const population=[
+    {source: "领导人", target: "APP", value: 2000},
+    {source: "APP", target: "宝马", value: 3000},
+    //
+    {source: "明星代言人", target: "论坛", value: 1000},
+    //
+    {source: "自然", target: "论坛", value: 2100},
+    {source: "论坛", target: "宝马", value: 3100},
+    {source: "宝马", target: "广州车展", value: 5100},
+    //
+    {source: "自然", target: "新闻", value: 3234},
+    {source: "新闻", target: "吉利", value: 3000},
+    {source: "吉利", target: "销量大增", value: 6000},
+    // 
+    {source: "车展", target: "微博", value: 1234},
+    {source: "微博", target: "特斯拉", value: 3234},
+    {source: "特斯拉", target: "销量大增", value: 4234},
+    // 
+    {source: "新车上市", target: "APP", value: 1234},
+    {source: "APP", target: "宝马", value: 1234},
+    //
+    {source: "新车上市", target: "短视频", value: 2234},
+    {source: "短视频", target: "奔驰", value: 2234},
+    {source: "奔驰", target: "广州车展", value: 2234},
+    //
+    {source: "APP", target: "奥迪", value: 2234},
+    {source: "奥迪", target: "销量大增", value: 2234},
+    //
+    {source: "奔驰", target: "女车主表态", value: 5234},
+];
+export default function createOpt() {
+    return {
+        tooltip: {
+            trigger: "item",
+            backgroundColor: "#08182F",
+            color: "#fff",
+            borderColor: "#3373CC",
+            textStyle: {
+                color: "#fff", //设置文字颜色
+            },
+            triggerOn: 'mousemove',
+            extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
+        },
+        series: [
+            {
+                 type: 'sankey',
+                 data: citylist,
+                 links: population,
+                 focusNodeAdjacency: 'allEdges',    //鼠标悬停到节点或边上，相邻接的节点和边高亮显示
+                 left: 16,
+                 right: 120,
+                 top: 16,
+                 bottom: 16,
+                 itemStyle: {
+                     borderWidth: 1,
+                 },
+                 lineStyle: {
+                     color: 'target',
+                     curveness: 0.5,
+                     opacity:0.5
+                 },
+                 label: {
+                     color: "#fff",
+                     fontWeight: 'bold',
+                     fontSize: 14
+                 }
+             }
+         ]
+    }
+}

src/views/EventInsight/index.vue

@@ -0,0 +1,33 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-18 09:04:31
+ * @LastEditTime: 2021-10-18 09:40:33
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/EventInsight/index.vue
+-->
+<template>
+    <div class="d-container">
+        <div class="ei-outter">
+            <hotEventPO></hotEventPO>
+            <industryTOPHE></industryTOPHE>
+        </div>
+    </div>
+</template>
+
+<script>
+import hotEventPO from "./hotEventPO"
+import industryTOPHE from "./industryTOPHE"
+export default {
+    name: "eventInsight",
+    components: {
+        hotEventPO, // 热点事件传播导向
+        industryTOPHE // 行业TOP热点事件
+    }
+}
+</script>
+<style lang="less" scoped>
+.ei-outter {
+   padding: 0px 16px 16px 16px;
+}
+</style>

src/views/EventInsight/industryTOPHE/index.vue

@@ -0,0 +1,67 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-18 09:34:53
+ * @LastEditTime: 2021-10-18 09:52:35
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/EventInsight/IndustryTOPHE/index.vue
+-->
+
+<template>
+    <div class="itp-outter">
+        <v-label-div title="行业TOP热点事件">
+        </v-label-div>
+        <v-table :columns="columns" :data="tbData" :pagination="false"></v-table>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "industryTOPHE",
+    data() {
+        return {
+            columns: [
+                {
+                    title: "事件标题",
+                    dataIndex: "a",
+                    key: "a",
+                    width: "55%"
+                },
+                {
+                    title: "影响力",
+                    dataIndex: "b",
+                    key: "b",
+                },
+                {
+                    title: "类型",
+                    dataIndex: "c",
+                    key: "c",
+                },
+                {
+                    title: "关联品牌",
+                    dataIndex: "d",
+                    key: "d",
+                    width: 180
+                }
+            ],
+            tbData: [
+                {
+                    a: "为了研究长城吉利谁更强，我们砸了台吉利",
+                    b: '20.2',
+                    c: '2021-08-18 12:00:00',
+                    d: '奥迪'
+                }
+            ]
+        };
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.itp-outter {
+    width: 100%;
+    height: 392px;
+    border: 2px solid #0f2a4d;
+    margin-top: 16px;
+}
+</style>