From e6409410dfc7f6563ab5fd1db85e1ca6f423b672 Mon Sep 17 00:00:00 2001
From: "lily.zhang" <daylily.zhang@akuhome.com>
Date: Sun, 21 Nov 2021 17:51:00 +0800
Subject: [PATCH] cxw-010203

---
 package.json                                  |   1 +
 src/main.js                                   |   4 +-
 src/views/BrandComparison/BrandComparison.vue | 198 ++++++++----------
 src/views/BrandComparison/index.vue           |  10 +-
 .../keyMediaCommunicationComparison/opt.js    |  10 +-
 5 files changed, 106 insertions(+), 117 deletions(-)

diff --git a/package.json b/package.json
index 08a49da..6fc3866 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@jiaminghi/data-view": "^2.10.0",
+    "@xunlei/vue-lazy-component": "^1.1.3",
     "ant-design-vue": "^1.7.8",
     "axios": "^0.23.0",
     "compression-webpack-plugin": "^9.0.0",
diff --git a/src/main.js b/src/main.js
index 1ae4e50..7dc7c69 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-10-08 08:41:57
- * @LastEditTime: 2021-11-02 17:20:09
+ * @LastEditTime: 2021-11-21 16:44:18
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/main.js
@@ -11,6 +11,7 @@ import App from './App.vue'
 import 'normalize.css/normalize.css';
 import './styles/index.less';
 import Antd from 'ant-design-vue';
+import VueLazyComponent from '@xunlei/vue-lazy-component'
 import 'ant-design-vue/dist/antd.css';
 import router from "@/permission";
 import store from "@/store";
@@ -26,6 +27,7 @@ Vue.use(dataV);
 Vue.use(selfUi);
 Vue.use(compon);
 Vue.use(mixins);
+Vue.use(VueLazyComponent);
 Vue.use(vuescroll, {ops: createOps(true, true),name: 'vue-scroll'});
 Vue.config.productionTip = false
 Vue.prototype.$vuiSize = 'small'
diff --git a/src/views/BrandComparison/BrandComparison.vue b/src/views/BrandComparison/BrandComparison.vue
index 0d310ae..908ed1f 100644
--- a/src/views/BrandComparison/BrandComparison.vue
+++ b/src/views/BrandComparison/BrandComparison.vue
@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-11-05 13:49:05
- * @LastEditTime: 2021-11-11 10:45:18
+ * @LastEditTime: 2021-11-21 17:49:43
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/BrandComparison/BrandComparison.vue
@@ -17,128 +17,116 @@
 <template>
     <div class="d-container">
         <div class="bc-outter">
-            <brandCompateHeader :data="getBComparison" @change="handlerChangeBrand"></brandCompateHeader>
-            <div class="bc-d2">
-                <informationTrend></informationTrend>
-                <overallInformation></overallInformation>
-                <overallNumberOfInteractions></overallNumberOfInteractions>
-            </div>
-            <brandTonalDistribution></brandTonalDistribution>
-            <div class="bc-d3">
-                <channelDistribution></channelDistribution>
-                <keyMediaCommunicationComparison></keyMediaCommunicationComparison>
-            </div>
-            <brandCommunicationTOPMedia></brandCommunicationTOPMedia>
-            <overallWordCloudComparison></overallWordCloudComparison>
-            <brandEventComparison></brandEventComparison>
-            <div class="bc-d4">
-                <v-label-div title="品牌微博对比"></v-label-div>
-                <div class="bc-d4-d1">
-                    <comparisonOfWeiboInformation></comparisonOfWeiboInformation>
-                    <comparisonOfTheNumberOfWeiboInteractions></comparisonOfTheNumberOfWeiboInteractions>
-                    <weiboBigVComparison></weiboBigVComparison>
+            <vue-lazy-component>
+                <brandCompateHeader :data="getBComparison" @change="handlerChangeBrand"></brandCompateHeader>
+            </vue-lazy-component>
+            <vue-lazy-component>
+                <div class="bc-d2">
+                    <informationTrend></informationTrend>
+                    <overallInformation></overallInformation>
+                    <overallNumberOfInteractions></overallNumberOfInteractions>
                 </div>
-                <weiboTuneComparison></weiboTuneComparison>
-                <weiboContentDirectionComparison></weiboContentDirectionComparison>
-                <div class="bc-d4-d2">
-                    <userAreaDistribution></userAreaDistribution>
-                    <weiboUserPortrait></weiboUserPortrait>
+            </vue-lazy-component>
+            <vue-lazy-component>
+                <brandTonalDistribution></brandTonalDistribution>
+            </vue-lazy-component>
+            <vue-lazy-component>
+                <div class="bc-d3">
+                    <channelDistribution></channelDistribution>
+                    <keyMediaCommunicationComparison></keyMediaCommunicationComparison>
                 </div>
-            </div>
-            <div class="bc-d5">
-                <v-label-div title="品牌论坛对比"></v-label-div>
-                <div class="bc-d5-dd1">
-                    <summaryAndComparisonOfForumInformation></summaryAndComparisonOfForumInformation>
-                    <comparisonOfForumPostingTrends></comparisonOfForumPostingTrends>
+            </vue-lazy-component>
+            <vue-lazy-component>
+                <brandCommunicationTOPMedia></brandCommunicationTOPMedia>
+            </vue-lazy-component>
+            <vue-lazy-component>
+                <overallWordCloudComparison></overallWordCloudComparison>
+            </vue-lazy-component>
+            <vue-lazy-component>
+                <brandEventComparison></brandEventComparison>
+            </vue-lazy-component>
+            <vue-lazy-component>
+                <div class="bc-d4">
+                    <v-label-div title="品牌微博对比"></v-label-div>
+                    <div class="bc-d4-d1">
+                        <comparisonOfWeiboInformation></comparisonOfWeiboInformation>
+                        <comparisonOfTheNumberOfWeiboInteractions></comparisonOfTheNumberOfWeiboInteractions>
+                        <weiboBigVComparison></weiboBigVComparison>
+                    </div>
+                    <weiboTuneComparison></weiboTuneComparison>
+                    <weiboContentDirectionComparison></weiboContentDirectionComparison>
+                    <div class="bc-d4-d2">
+                        <userAreaDistribution></userAreaDistribution>
+                        <weiboUserPortrait></weiboUserPortrait>
+                    </div>
                 </div>
-                 <forumTonalComparison></forumTonalComparison>
-                 <comparisonOfPositiveTopicsInTheForum></comparisonOfPositiveTopicsInTheForum>
-                 <comparisonOfNegativeTopicsInForums></comparisonOfNegativeTopicsInForums>
-            </div>
-            <div class="bc-d6">
-               <v-label-div title="品牌尾翼对比"></v-label-div> 
-                <div class="bc-d6-dd1">
-                    <brandRearWingComparison></brandRearWingComparison>
-                    <informationVolumeByChannel></informationVolumeByChannel>
+            </vue-lazy-component>
+            <vue-lazy-component>
+                <div class="bc-d5">
+                    <v-label-div title="品牌论坛对比"></v-label-div>
+                    <div class="bc-d5-dd1">
+                        <summaryAndComparisonOfForumInformation></summaryAndComparisonOfForumInformation>
+                        <comparisonOfForumPostingTrends></comparisonOfForumPostingTrends>
+                    </div>
+                    <forumTonalComparison></forumTonalComparison>
+                    <comparisonOfPositiveTopicsInTheForum></comparisonOfPositiveTopicsInTheForum>
+                    <comparisonOfNegativeTopicsInForums></comparisonOfNegativeTopicsInForums>
                 </div>
-                <tailTOPMedia></tailTOPMedia>
-            </div>
-
+            </vue-lazy-component>
+            <vue-lazy-component>
+                <div class="bc-d6">
+                    <v-label-div title="品牌尾翼对比"></v-label-div>
+                    <div class="bc-d6-dd1">
+                        <brandRearWingComparison></brandRearWingComparison>
+                        <informationVolumeByChannel></informationVolumeByChannel>
+                    </div>
+                    <tailTOPMedia></tailTOPMedia>
+                </div>
+            </vue-lazy-component>
         </div>
     </div>
 </template>
 
 <script>
-import informationTrend from "./informationTrend";
-import overallInformation from "./overallInformation";
-import overallNumberOfInteractions from "./overallNumberOfInteractions";
-import brandTonalDistribution from "./brandTonalDistribution";
-import channelDistribution from "./channelDistribution";
-import keyMediaCommunicationComparison from "./keyMediaCommunicationComparison";
-import brandCommunicationTOPMedia from "./brandCommunicationTOPMedia";
-import overallWordCloudComparison from "./overallWordCloudComparison";
-import brandEventComparison from "./brandEventComparison";
-import comparisonOfWeiboInformation from "./comparisonOfWeiboInformation";
-import comparisonOfTheNumberOfWeiboInteractions from "./comparisonOfTheNumberOfWeiboInteractions";
-import weiboBigVComparison from "./weiboBigVComparison";
-import weiboTuneComparison from "./weiboTuneComparison";
-import weiboContentDirectionComparison from "./weiboContentDirectionComparison";
-import userAreaDistribution from "./userAreaDistribution";
-import weiboUserPortrait from "./weiboUserPortrait";
-import summaryAndComparisonOfForumInformation from "./summaryAndComparisonOfForumInformation"
-import comparisonOfForumPostingTrends from "./comparisonOfForumPostingTrends"
-import forumTonalComparison from "./forumTonalComparison"
-import comparisonOfPositiveTopicsInTheForum from "./comparisonOfPositiveTopicsInTheForum"
-import comparisonOfNegativeTopicsInForums from "./comparisonOfNegativeTopicsInForums"
-import brandRearWingComparison from "./brandRearWingComparison"
-import informationVolumeByChannel from "./informationVolumeByChannel"
-import tailTOPMedia from "./tailTOPMedia"
-import brandCompateHeader from "./brandCompateHeader"
 export default {
     name: "brandComparison",
-    inject: ['reload'],
+    inject: ["reload"],
     components: {
-        informationTrend, // 信息量趋势
-        overallInformation, // 整体信息量
-        overallNumberOfInteractions, // 整体互动人数
-        brandTonalDistribution, // 品牌调性分布
-        channelDistribution, // 渠道分布
-        keyMediaCommunicationComparison, // 重点媒体传播对比
-        brandCommunicationTOPMedia, // 品牌传播TOP媒体
-        overallWordCloudComparison, // 整体词云对比
-        brandEventComparison, //品牌事件对比
-        comparisonOfWeiboInformation, // 微博信息量对比
-        comparisonOfTheNumberOfWeiboInteractions, // 微博互动人数对比
-        weiboBigVComparison, // 微博大V对比
-        weiboTuneComparison, // 微博调性对比
-        weiboContentDirectionComparison, // 微博内容方向对比
-        userAreaDistribution, //用户区域分布
-        weiboUserPortrait, // 微博用户画像
-        summaryAndComparisonOfForumInformation, // 论坛信息概括对比
-        comparisonOfForumPostingTrends, // 论坛发帖趋势对比
-        forumTonalComparison, // 论坛调性对比
-        comparisonOfPositiveTopicsInTheForum, // 论坛正面话题对比
-        comparisonOfNegativeTopicsInForums, // 论坛负面话题对比
-        brandRearWingComparison, // 尾翼趋势对比
-        informationVolumeByChannel, // 分渠道信息量
-        tailTOPMedia, // 尾翼TOP媒体
-        brandCompateHeader // 选择品牌
-        
+        informationTrend: (resolve) => require(['./informationTrend'], resolve),
+        overallInformation: (resolve) => require(['./overallInformation'], resolve), // 整体信息量
+        overallNumberOfInteractions: (resolve) => require(['./overallNumberOfInteractions'], resolve), // 整体互动人数
+        brandTonalDistribution: (resolve) => require(['./brandTonalDistribution'], resolve), // 品牌调性分布
+        channelDistribution: (resolve) => require(['./channelDistribution'], resolve), // 渠道分布
+        keyMediaCommunicationComparison: (resolve) => require(['./keyMediaCommunicationComparison'], resolve), // 重点媒体传播对比
+        brandCommunicationTOPMedia: (resolve) => require(['./brandCommunicationTOPMedia'], resolve), // 品牌传播TOP媒体
+        overallWordCloudComparison: (resolve) => require(['./overallWordCloudComparison'], resolve), // 整体词云对比
+        brandEventComparison: (resolve) => require(['./brandEventComparison'], resolve), //品牌事件对比
+        comparisonOfWeiboInformation: (resolve) => require(['./comparisonOfWeiboInformation'], resolve), // 微博信息量对比
+        comparisonOfTheNumberOfWeiboInteractions: (resolve) => require(['./comparisonOfTheNumberOfWeiboInteractions'], resolve), // 微博互动人数对比
+        weiboBigVComparison: (resolve) => require(['./weiboBigVComparison'], resolve), // 微博大V对比
+        weiboTuneComparison: (resolve) => require(['./weiboTuneComparison'], resolve), // 微博调性对比
+        weiboContentDirectionComparison: (resolve) => require(['./weiboContentDirectionComparison'], resolve), // 微博内容方向对比
+        userAreaDistribution: (resolve) => require(['./userAreaDistribution'], resolve), //用户区域分布
+        weiboUserPortrait: (resolve) => require(['./weiboUserPortrait'], resolve), // 微博用户画像
+        summaryAndComparisonOfForumInformation: (resolve) => require(['./summaryAndComparisonOfForumInformation'], resolve), // 论坛信息概括对比
+        comparisonOfForumPostingTrends: (resolve) => require(['./comparisonOfForumPostingTrends'], resolve), // 论坛发帖趋势对比
+        forumTonalComparison: (resolve) => require(['./forumTonalComparison'], resolve), // 论坛调性对比
+        comparisonOfPositiveTopicsInTheForum: (resolve) => require(['./comparisonOfPositiveTopicsInTheForum'], resolve), // 论坛正面话题对比
+        comparisonOfNegativeTopicsInForums: (resolve) => require(['./comparisonOfNegativeTopicsInForums'], resolve), // 论坛负面话题对比
+        brandRearWingComparison: (resolve) => require(['./brandRearWingComparison'], resolve), // 尾翼趋势对比
+        informationVolumeByChannel: (resolve) => require(['./informationVolumeByChannel'], resolve), // 分渠道信息量
+        tailTOPMedia: (resolve) => require(['./tailTOPMedia'], resolve), // 尾翼TOP媒体
+        brandCompateHeader: (resolve) => require(['./brandCompateHeader'], resolve), // 选择品牌
     },
     data() {
-        return {
-            
-        };	
-    },
-    beforeMount() {
-       
+        return {};
     },
+    beforeMount() {},
     methods: {
         handlerChangeBrand(arr) {
             this.setBComparison(arr);
-            this.reload()
-        }
-       
+            this.reload();
+        },
     },
 };
 </script>
diff --git a/src/views/BrandComparison/index.vue b/src/views/BrandComparison/index.vue
index e69cbfd..cbf642c 100644
--- a/src/views/BrandComparison/index.vue
+++ b/src/views/BrandComparison/index.vue
@@ -1,15 +1,15 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-15 10:39:43
- * @LastEditTime: 2021-11-05 19:31:43
+ * @LastEditTime: 2021-11-21 17:03:47
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/BrandComparison/index.vue
 -->
 <template>
     <div class="d-container">
-        <BrandComparison v-if="hasData"></BrandComparison>
-        <BrandBeginComparte v-else></BrandBeginComparte>
+            <BrandComparison v-if="hasData"></BrandComparison>
+            <BrandBeginComparte v-else></BrandBeginComparte>
     </div>
 </template>
 
@@ -30,9 +30,7 @@ export default {
     created() {
         this.hasData = this.getBComparison.length > 0 ? true : false;
     },
-    mounted() {
-       
-    },
+    mounted() {},
     methods: {},
 };
 </script>
diff --git a/src/views/BrandComparison/keyMediaCommunicationComparison/opt.js b/src/views/BrandComparison/keyMediaCommunicationComparison/opt.js
index b03e520..ca0abf7 100644
--- a/src/views/BrandComparison/keyMediaCommunicationComparison/opt.js
+++ b/src/views/BrandComparison/keyMediaCommunicationComparison/opt.js
@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-10-09 11:01:19
- * @LastEditTime: 2021-11-18 11:33:20
+ * @LastEditTime: 2021-11-21 16:51:55
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/views/Index/spreadTheSound/opt.js
@@ -92,7 +92,7 @@ function createData(dataList = [],dx) {
   return arr;
 }
 
-export default function createOpt(dx = [], dataList = []) {
+export default function createOpt(dx = [], dataList = [], n = 4) {
   let info = createData(dataList, dx);
   return {
     grid: {
@@ -130,9 +130,9 @@ export default function createOpt(dx = [], dataList = []) {
       },
       axisLabel: {
         interval: 0,
-        with: 1 / dx.length * 100 + '%',
-        overflow: 'truncate',
-        ellipsis: '...' 
+        formatter: function (value) {
+          return (value.length > n ? (value.slice(0,n)+"...") : value )
+        },
       },
       axisLine: {
         show: false,