lyl-事件详情页

src/api/EventDetails/index.js

@@ -0,0 +1,61 @@
+import httpService from "@/request"
+// 热点事件传播导向
+export function getPropagationDirection0528(params) {
+    let obj =  Object.assign({action: 'getPropagationDirection0528', sType: 'HotEvent0528'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+// 事件洞察列表
+export function getHotEventsList(params) {
+    let obj =  Object.assign({action: 'getHotEventsList', sType: 'HotEvent'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+// 热点事件top车型分布
+export function getHotEventSseries(params) {
+    let obj =  Object.assign({action: 'getHotEventSseries', sType: 'HotEvent0528'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+// 热点事件渠道分布
+export function getEventsSourceTypeByEventsType0528(params) {
+    let obj =  Object.assign({action: 'getEventsSourceTypeByEventsType0528', sType: 'HotEvent0528'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+// 品牌数据-数据传播总量
+export function getBrandOverviewCount0528(params) {
+    let obj =  Object.assign({action: 'getBrandOverviewCount0528', sType: 'BrandOverview'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}

src/views/EventDetails/distributionOfHotEventChannels/index.vue

@@ -16,15 +16,43 @@
 </template>
 
 <script>
+import {getEventsSourceTypeByEventsType0528} from '@/api/EventDetails'
 import createOpt from "./opt";
 export default {
     name: "distributionOfHotEventChannels",
     data() {
         return {
-            opt: createOpt(),
+            opt: {},
-        };
+            form: {
+                sBrand: "",
+                token: ""
+            }
+        }
     },
-};
+    created() {
+        this.form.token = this.getToken;
+        this.form.sBrand = this.getBrand.brandname || '奥迪';
+        this.getDdta();
+    },
+    methods:{
+        getDdta(){
+            let obj = Object.assign({}, this.getCtime2, this.form);
+            getEventsSourceTypeByEventsType0528(obj).then(res => {
+                let data = res.data || [];
+                let dx = [];
+                let ds = [];
+                data.forEach(ele => {
+                    let key = ele.key;
+                    let value = ele.value;
+                    dx.push(key);
+                    ds.push(value);
+                })
+                this.opt = createOpt(dx, ds);
+            })
+        }
+    }
+}
+
 </script>
 
 <style lang="less" scoped>

src/views/EventDetails/distributionOfHotEventChannels/opt.js

@@ -1,18 +1,71 @@
 /*
  * @Author: your name
  * @Date: 2021-10-09 11:01:19
- * @LastEditTime: 2021-10-13 14:21:44
+ * @LastEditTime: 2021-10-29 15:52:04
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/Index/spreadTheSound/opt.js
  */
-export default function createOpt() {
+import * as echarts from "echarts";
+import { bigNumberTransform } from "@/utils/gol/dataTool"
+let colors = ['rgba(203,118,58,1)', 'rgba(202,156,17,1)', 'rgba(90,203,156,1)', 'rgba(99,173,204,1)', 'rgba(55,113,190,1)', "rgba(138,191,66,1)", 'rgba(181,191,67,1)', 'rgba(203,91,65,1)']
+let colors2 = ['rgba(203,118,58,0.6)', 'rgba(202,156,17,0.6)', 'rgba(90,203,156,0.6)', 'rgba(99,173,204,0.6)', 'rgba(55,113,190,0.6)', "rgba(138,191,66,0.6)", 'rgba(181,191,67,0.6)', 'rgba(203,91,65,0.6)']
+function createData(ds = []) {
+  let arr = [];
+  for (let i = 0; i < ds.length; i++) {
+    let arr1 = ds[i];
+    for (let j = 0; j < arr1.length; j++) {
+      let n = arr.findIndex(ele => {
+        return ele.name === arr1[j].key;
+      })
+      if (n === -1) {
+        let obj =
+        {
+          name: arr1[j].key,
+          type: 'bar',
+          stack: 'total',
+          barWidth: 22,
+          barGap: "-100%",
+          emphasis: {
+            focus: 'series'
+          },
+          itemStyle: {
+            normal: {
+              //柱体的颜色
+              //右，下，左，上（1，0，0，0）表示从正右开始向左渐变
+              color: function () {
+                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: colors[j]
+                  },
+                  {
+                    offset: 1,
+                    color: colors2[j]
+                  }
+                ], false);
+              }
+            }
+
+          },
+          data: [arr1[j].value]
+        }
+        arr.push(obj)
+      } else {
+        arr[n].data.push(arr1[j].value)
+      }
+    }
+  }
+  return arr;
+}
+export default function createOpt(dx = [], ds = []) {
+  const data = createData(ds);
   return {
     grid: {
-            left: '3%',
+      left: 10,
-            right: '6%',
+      right: 10,
-            bottom: '3%',
+      bottom: 10,
-            top: '16%',
+      top: 46,
       containLabel: true
     },
     tooltip: {
@@ -25,12 +78,16 @@ export default function createOpt() {
       },
       extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
     },
+    color: colors,
     legend: {
       textStyle: { //图例文字的样式
-                color: '#fff'
+        color: '#fff',
+        fontSize:10
       },
-            y: 'top',
+      y: 10,
-            x: 23
+      x: 10,
+      itemWidth: 10,
+      itemHeight: 10,
     },
     xAxis: {
       type: 'category',
@@ -43,7 +100,7 @@ export default function createOpt() {
           color: "#fff",
         },
       },
-            data: ['产品代言', '新车上市', '新品发布', '领导人', '维权']
+      data: dx
     },
     yAxis: {
       type: 'value',
@@ -53,6 +110,12 @@ export default function createOpt() {
           color: "#fff",
         },
       },
+      axisLabel: {
+        formatter: (value) => {
+          let str = bigNumberTransform(value);
+          return str;
+        }
+      },
       splitLine: {
         lineStyle: {
           type: "dashed", // y轴分割线类型
@@ -60,58 +123,7 @@ export default function createOpt() {
         },
       },
     },
-        series: [
+    series: data
-            {
-              name: '新闻',
-              type: 'bar',
-              stack: 'total',
-              barWidth: 24,
-              emphasis: {
-                focus: 'series'
-              },
-              data: [320, 302, 301, 334, 390]
-            },
-            {
-              name: '论坛',
-              type: 'bar',
-              stack: 'total',
-              barWidth: 24,
-              emphasis: {
-                focus: 'series'
-              },
-              data: [120, 132, 101, 134, 90]
-            },
-            {
-              name: '微信',
-              type: 'bar',
-              stack: 'total',
-              barWidth: 24,
-              emphasis: {
-                focus: 'series'
-              },
-              data: [220, 182, 191, 234, 290]
-            },
-            {
-              name: '微博',
-              type: 'bar',
-              stack: 'total',
-              barWidth: 24,
-              emphasis: {
-                focus: 'series'
-              },
-              data: [150, 212, 201, 154, 190]
-            },
-            {
-              name: 'APP',
-              type: 'bar',
-              stack: 'total',
-              barWidth: 24,
-              emphasis: {
-                focus: 'series'
-              },
-              data: [820, 832, 901, 934, 1290]
-            }
-          ]
   }
 
 }

src/views/EventDetails/distributionOfTOPModelsOfHotEvents/index.vue

@@ -18,12 +18,44 @@
 </template>
 
 <script>
+import {getHotEventSseries} from '@/api/EventDetails'
 import createOpt from "./opt"
 export default {
     name: "distributionOfTOPModelsOfHotEvents",
     data() {
         return {
-           opt: createOpt() 
+           opt: {},
+           form: {
+                sQueryType: 1,
+                sBrand: "",
+                token: ""
+            }
+        }
+    },
+    created() {
+         this.form.token = this.getToken;
+        this.form.sBrand = this.getBrand.brandname || '奥迪';
+        this.getDdta();
+    },
+    methods:{
+        getDdta() {
+        let obj = Object.assign({}, this.getCtime2, this.form);
+            getHotEventSseries(obj).then(res => {
+                let data = res.data || [];
+                let dx = [];
+                let ds = [];
+                console.log(data);
+                data.forEach(ele => {
+                    let key = ele.key;
+                    let value = ele.data;
+                    dx.push(key);
+                    ds.push(value);
+                });
+                this.opt = createOpt(dx, ds);
+                // this.opt = createOpt()
+                
+            })
+
     }
     }
 }

src/views/EventDetails/distributionOfTOPModelsOfHotEvents/opt.js

@@ -1,18 +1,71 @@
 /*
  * @Author: your name
  * @Date: 2021-10-09 11:01:19
- * @LastEditTime: 2021-10-13 14:08:29
+ * @LastEditTime: 2021-10-29 15:52:04
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/Index/spreadTheSound/opt.js
  */
-export default function createOpt() {
+import * as echarts from "echarts";
+import { bigNumberTransform } from "@/utils/gol/dataTool"
+let colors = ['rgba(203,118,58,1)', 'rgba(202,156,17,1)', 'rgba(90,203,156,1)', 'rgba(99,173,204,1)', 'rgba(55,113,190,1)', "rgba(138,191,66,1)", 'rgba(181,191,67,1)', 'rgba(203,91,65,1)']
+let colors2 = ['rgba(203,118,58,0.6)', 'rgba(202,156,17,0.6)', 'rgba(90,203,156,0.6)', 'rgba(99,173,204,0.6)', 'rgba(55,113,190,0.6)', "rgba(138,191,66,0.6)", 'rgba(181,191,67,0.6)', 'rgba(203,91,65,0.6)']
+function createData(ds = []) {
+  let arr = [];
+  for (let i = 0; i < ds.length; i++) {
+    let arr1 = ds[i];
+    for (let j = 0; j < arr1.length; j++) {
+      let n = arr.findIndex(ele => {
+        return ele.name === arr1[j].key;
+      })
+      if (n === -1) {
+        let obj =
+        {
+          name: arr1[j].key,
+          type: 'bar',
+          stack: 'total',
+          barWidth: 22,
+          barGap: "-100%",
+          emphasis: {
+            focus: 'series'
+          },
+          itemStyle: {
+            normal: {
+              //柱体的颜色
+              //右，下，左，上（1，0，0，0）表示从正右开始向左渐变
+              color: function () {
+                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: colors[j]
+                  },
+                  {
+                    offset: 1,
+                    color: colors2[j]
+                  }
+                ], false);
+              }
+            }
+
+          },
+          data: [arr1[j].value]
+        }
+        arr.push(obj)
+      } else {
+        arr[n].data.push(arr1[j].value)
+      }
+    }
+  }
+  return arr;
+}
+export default function createOpt(dx = [], ds = []) {
+  const data = createData(ds);
   return {
     grid: {
-            left: '3%',
+      left: 10,
-            right: '6%',
+      right: 10,
-            bottom: '3%',
+      bottom: 10,
-            top: '16%',
+      top: 46,
       containLabel: true
     },
     tooltip: {
@@ -25,12 +78,16 @@ export default function createOpt() {
       },
       extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
     },
+    color: colors,
     legend: {
       textStyle: { //图例文字的样式
-                color: '#fff'
+        color: '#fff',
+        fontSize:10
       },
-            y: 'top',
+      y: 10,
-            x: 23
+      x: 10,
+      itemWidth: 10,
+      itemHeight: 10,
     },
     xAxis: {
       type: 'category',
@@ -43,7 +100,7 @@ export default function createOpt() {
           color: "#fff",
         },
       },
-            data: ['奥迪A4', '奥迪A3', '奥迪A6', '奥迪A8', '奥迪Q3']
+      data: dx
     },
     yAxis: {
       type: 'value',
@@ -53,6 +110,12 @@ export default function createOpt() {
           color: "#fff",
         },
       },
+      axisLabel: {
+        formatter: (value) => {
+          let str = bigNumberTransform(value);
+          return str;
+        }
+      },
       splitLine: {
         lineStyle: {
           type: "dashed", // y轴分割线类型
@@ -60,58 +123,7 @@ export default function createOpt() {
         },
       },
     },
-        series: [
+    series: data
-            {
-              name: '产品代言',
-              type: 'bar',
-              stack: 'total',
-              barWidth: 24,
-              emphasis: {
-                focus: 'series'
-              },
-              data: [320, 302, 301, 334, 390]
-            },
-            {
-              name: '新车上市',
-              type: 'bar',
-              stack: 'total',
-              barWidth: 24,
-              emphasis: {
-                focus: 'series'
-              },
-              data: [120, 132, 101, 134, 90]
-            },
-            {
-              name: '新品发布',
-              type: 'bar',
-              stack: 'total',
-              barWidth: 24,
-              emphasis: {
-                focus: 'series'
-              },
-              data: [220, 182, 191, 234, 290]
-            },
-            {
-              name: '领导人',
-              type: 'bar',
-              stack: 'total',
-              barWidth: 24,
-              emphasis: {
-                focus: 'series'
-              },
-              data: [150, 212, 201, 154, 190]
-            },
-            {
-              name: '维权',
-              type: 'bar',
-              stack: 'total',
-              barWidth: 24,
-              emphasis: {
-                focus: 'series'
-              },
-              data: [820, 832, 901, 934, 1290]
-            }
-          ]
   }
 
 }

src/views/EventDetails/eventCorrelation/index.vue

@@ -12,29 +12,59 @@
             <v-btn @click="goback">返回品牌洞察</v-btn>
         </div>
         <div class="ec-inner">
-            <span class="ec-label">奥迪</span>
+            <span class="ec-label">{{brand}}</span>
             <div class="ec-footer">
                 <img class="m1" src="../../../assets/images/BrandInsight/ic_glsl.png" />
+                <a-popover title="事件关联数量">
+                    <template slot="content">
+                        <div class="pd-item" v-for="(item,index) in list" :key="index">
+                            <span>{{item.key}}</span>
+                            <span>{{item.value}}</span>
+                        </div>
+                    </template>
                     <div class="d1">
-                    <span class="s1">74,073,195</span>
+                        <span class="s1">{{zolNum}}</span>
                         <span class="s2">事件关联数量(条)</span>
                     </div>
+                </a-popover>
             </div>
         </div>
     </div>
 </template>
 
 <script>
+import { getBrandOverviewCount0528 } from "@/api/EventDetails";
 export default {
     name: "eventCorrelation",
     data() {
-        return {};
+        return {
+            brand: "",
+            form: {
+                sBrand: "",
+                token: "",
+            },
+            zolNum: 0,
+            list: [],
+        };
+    },
+    created() {
+        this.form.token = this.getToken;
+        this.brand = this.getBrand.brandname || "奥迪";
+        this.getDdta();
     },
     methods: {
+        getDdta() {
+            let obj = Object.assign({}, this.getCtime2, this.form);
+            getBrandOverviewCount0528(obj).then((res) => {
+                let data = res.data;
+                this.zolNum = data.count;
+                this.list = data.data;
+            });
+        },
         goback() {
             this.$router.go(-1);
-        }
+        },
-    }
+    },
 };
 </script>
 
@@ -97,4 +127,11 @@ export default {
         }
     }
 }
+.pd-item {
+    display: flex;
+    justify-content: space-between;
+    color: #fff;
+    border-bottom: 1px solid #173b6d;
+    padding: 10px;
+}
 </style>

src/views/EventDetails/hotEventPropagationOriented/index.vue

@@ -17,12 +17,35 @@
 </template>
 
 <script>
+import {getPropagationDirection0528} from '@/api/EventDetails'
 import createOpt from "./opt"
 export default {
     name: "hotEventPropagationOriented",
+    props: ["brand"],
     data() {
         return {
-            opt: createOpt()
+            opt: createOpt(),
+            form: {
+                sBrand: "",
+                token: ""
+            }
+        }
+    },
+    created() {
+        this.form.token = this.getToken;
+        this.form.sBrand = this.getBrand.brandname || '奥迪';
+        this.getDdta();
+    },
+    methods:{
+        getDdta() {
+            let obj = Object.assign({}, this.getCtime2, this.form);
+            getPropagationDirection0528(obj).then(res => {
+                let data = res.data;
+                let population = data.links;
+                let citylist = data.data;
+                this.opt = createOpt(citylist, population)
+            })
+
         }
     }
 }

src/views/EventDetails/hotEventPropagationOriented/opt.js

@@ -1,62 +1,62 @@
 /*
  * @Author: your name
  * @Date: 2021-10-13 09:09:51
- * @LastEditTime: 2021-10-13 11:05:48
+ * @LastEditTime: 2021-10-27 17:32:39
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/EventDetails/hotEventPropagationOriented/opt.js
  */
-const citylist = [
+// const citylist = [
-    {name: '领导人'},
+//     {name: '领导人'},
-    {name: '自然'},
+//     {name: '自然'},
-    {name: '明星代言人'},
+//     {name: '明星代言人'},
-    {name: '车展'},
+//     {name: '车展'},
-    {name: '新车上市'},
+//     {name: '新车上市'},
-    {name: '新闻'},
+//     {name: '新闻'},
-    {name: '论坛'},
+//     {name: '论坛'},
-    {name: '微博'},
+//     {name: '微博'},
-    {name: 'APP'},
+//     {name: 'APP'},
-    {name: '短视频'},
+//     {name: '短视频'},
-    {name: '吉利'},
+//     {name: '吉利'},
-    {name: '奔驰'},
+//     {name: '奔驰'},
-    {name: '宝马'},
+//     {name: '宝马'},
-    {name: '特斯拉'},
+//     {name: '特斯拉'},
-    {name: '奥迪'},
+//     {name: '奥迪'},
-    {name: '女车主表态'},
+//     {name: '女车主表态'},
-    {name: '广州车展'},
+//     {name: '广州车展'},
-    {name: '销量大增'},
+//     {name: '销量大增'},
-];
+// ];
-const population=[
+// const population=[
-    {source: "领导人", target: "APP", value: 2000},
+//     {source: "领导人", target: "APP", value: 2000},
-    {source: "APP", target: "宝马", value: 3000},
+//     {source: "APP", target: "宝马", value: 3000},
-    //
+//     //
-    {source: "明星代言人", target: "论坛", value: 1000},
+//     {source: "明星代言人", target: "论坛", value: 1000},
-    //
+//     //
-    {source: "自然", target: "论坛", value: 2100},
+//     {source: "自然", target: "论坛", value: 2100},
-    {source: "论坛", target: "宝马", value: 3100},
+//     {source: "论坛", target: "宝马", value: 3100},
-    {source: "宝马", target: "广州车展", value: 5100},
+//     {source: "宝马", target: "广州车展", value: 5100},
-    //
+//     //
-    {source: "自然", target: "新闻", value: 3234},
+//     {source: "自然", target: "新闻", value: 3234},
-    {source: "新闻", target: "吉利", value: 3000},
+//     {source: "新闻", target: "吉利", value: 3000},
-    {source: "吉利", target: "销量大增", value: 6000},
+//     {source: "吉利", target: "销量大增", value: 6000},
-    // 
+//     // 
-    {source: "车展", target: "微博", value: 1234},
+//     {source: "车展", target: "微博", value: 1234},
-    {source: "微博", target: "特斯拉", value: 3234},
+//     {source: "微博", target: "特斯拉", value: 3234},
-    {source: "特斯拉", target: "销量大增", value: 4234},
+//     {source: "特斯拉", target: "销量大增", value: 4234},
-    // 
+//     // 
-    {source: "新车上市", target: "APP", value: 1234},
+//     {source: "新车上市", target: "APP", value: 1234},
-    {source: "APP", target: "宝马", value: 1234},
+//     {source: "APP", target: "宝马", value: 1234},
-    //
+//     //
-    {source: "新车上市", target: "短视频", value: 2234},
+//     {source: "新车上市", target: "短视频", value: 2234},
-    {source: "短视频", target: "奔驰", value: 2234},
+//     {source: "短视频", target: "奔驰", value: 2234},
-    {source: "奔驰", target: "广州车展", value: 2234},
+//     {source: "奔驰", target: "广州车展", value: 2234},
-    //
+//     //
-    {source: "APP", target: "奥迪", value: 2234},
+//     {source: "APP", target: "奥迪", value: 2234},
-    {source: "奥迪", target: "销量大增", value: 2234},
+//     {source: "奥迪", target: "销量大增", value: 2234},
-    //
+//     //
-    {source: "奔驰", target: "女车主表态", value: 5234},
+//     {source: "奔驰", target: "女车主表态", value: 5234},
-];
+// ];
-export default function createOpt() {
+export default function createOpt(citylist=[],population=[]) {
     return {
         tooltip: {
             trigger: "item",
@@ -75,6 +75,10 @@ export default function createOpt() {
                  data: citylist,
                  links: population,
                  focusNodeAdjacency: 'allEdges',    //鼠标悬停到节点或边上，相邻接的节点和边高亮显示
+                 left: 16,
+                 right: 120,
+                 top: 16,
+                 bottom: 16,
                  itemStyle: {
                      borderWidth: 1,
                  },
@@ -86,7 +90,7 @@ export default function createOpt() {
                  label: {
                      color: "#fff",
                      fontWeight: 'bold',
-                     fontSize: 14
+                     fontSize: 10
                  }
              }
          ]

src/views/EventDetails/hotOther/index.vue

@@ -13,89 +13,70 @@
             <dv-scroll-board :config="config" :style="{ width: '100%', height: '27rem' }" />
         </div>
         <div class="ho-footer">
-            <span class="ho-f-s1">共 <span style="color: #2c66b5;">26785</span> 条</span>
+            <span class="ho-f-s1">共 <span style="color: #2c66b5;">{{total}}</span> 条</span>
-            <a-pagination v-model="currentPage" :total="50" show-less-items />
+            <a-pagination v-model="form.iPageIndex" :total="total" show-less-items  @change="handlerPagnation"/>
         </div>
     </div>
 </template>
 
 <script>
+import { getHotEventsList } from "@/api/EventDetails";
 export default {
     name: "hotOther",
     data() {
         return {
             currentPage: 1,
+            form: {
+                token: "",
+                ssBrand: "",
+                iPageIndex: 1,
+                iPageSize: 20,
+            },
+            total: 0,
             config: {
+            },
+        };
+    },
+    created() {
+        this.form.token = this.getToken;
+        this.form.sBrand = this.getBrand.brandname || "奥迪";
+        this.getDdta();
+    },
+    methods: {
+        // 获取后台数据
+        getDdta() {
+            let obj = Object.assign({}, this.getCtime2, this.form);
+            getHotEventsList(obj).then((res) => {
+                let data = res.data || [];
+                let totalNum = res.totalNum || 0;
+                this.total = totalNum;
+                let arr = [];
+                data.forEach((ele) => {
+                    let a = [
+                        ele.events_title,
+                        ele.events_influence,
+                        ele.maxSourcetime,
+                        ele.events_brand,
+                    ];
+                    arr.push(a);
+                });
+                this.config = {
                     headerBGC: "#0c203b",
                     oddRowBGC: "#173b6d",
                     evenRowBGC: "rgba(69, 149, 244, 0)",
                     rowNum: 10,
-                columnWidth: [224,'', 160],
+                    columnWidth: [170,60,160],
-                header: ["事件列表", "影响力", "时间", "关联车型"],
+                    header: ["事件列表", "影响力", "时间", "关联品牌"],
-                data: [
+                    data: arr,
-                    [
-                        "2021广州车展，现场更多你没…",
-                        "40.90",
-                        "2021-08-17 12:00:00",
-                        "A3",
-                    ],
-                    [
-                        "丰田威兰达高性能版配置曝光...",
-                        "39.90",
-                        "2021-08-17 12:00:00",
-                        "Q3",
-                    ],
-                    [
-                        "广州车展，15分钟抢空的限定…",
-                        "38.20",
-                        "2021-08-17 12:00:00",
-                        "A4",
-                    ],
-                    [
-                        "2021广州车展，现场更多你没…",
-                        "37.50",
-                        "2021-08-17 12:00:00",
-                        "Q4",
-                    ],
-                    [
-                        "全新本田思域发布动力提升内…",
-                        "36.50",
-                        "2021-08-17 12:00:00",
-                        "A5",
-                    ],
-                    [
-                        "全新本田思域发布动力提升内…",
-                        "36.50",
-                        "2021-08-17 12:00:00",
-                        "Q5",
-                    ],
-                    [
-                        "全新本田思域发布动力提升内…",
-                        "36.50",
-                        "2021-08-17 12:00:00",
-                        "A6",
-                    ],
-                    [
-                        "全新本田思域发布动力提升内…",
-                        "36.50",
-                        "2021-08-17 12:00:00",
-                        "Q6",
-                    ],
-                    [
-                        "全新本田思域发布动力提升内…",
-                        "36.50",
-                        "2021-08-17 12:00:00",
-                        "Q7",
-                    ],
-                    [
-                        "全新本田思域发布动力提升内…",
-                        "36.50",
-                        "2021-08-17 12:00:00",
-                        "A7",
-                    ],
-                ],
-            },
                 };
+                console.log(data);
+            });
+        },
+        // 分页处理
+        handlerPagnation(page) {
+            this.form.iPageIndex = page;
+            this.getDdta()
+        }
     },
 };
 </script>

src/views/EventDetails/index.vue

@@ -33,12 +33,20 @@ import distributionOfTOPModelsOfHotEvents from "./distributionOfTOPModelsOfHotEv
 import distributionOfHotEventChannels from "./distributionOfHotEventChannels"
 export default {
     name: "event-details",
+    data() {
+        return {
+          
+        }
+    },
     components: {
         hotEventPropagationOriented, // 热点事件传播导向桑基图
         eventCorrelation, // 中间
         hotOther, // 热点事件传播导向列表
         distributionOfTOPModelsOfHotEvents, // 热点事件TOP车型分布
         distributionOfHotEventChannels // 热点事件渠道分布
+    },
+    created() {
+         
     }
 }
 </script>