新增组件及页面

dgtis-ui/src/views/dashboard/WordCloudChart.vue

@@ -6,6 +6,7 @@
   import resize from './mixins/resize'
   import "echarts-wordcloud/dist/echarts-wordcloud";
   import "echarts-wordcloud/dist/echarts-wordcloud.min";
+  import '../../assets/js/echarts-wordcloud.min'
 
   export default {
     mixins: [resize],
@@ -40,8 +41,21 @@
         chart: null
       };
     },
+    watch: {
+      //观察option的变化
+      data: {
+        handler(newVal, oldVal) {
+          if (newVal) {
+            this.initChart();
+          }
+        },
+        deep: true //对象内部属性的监听，关键。
+      }
+    },
     mounted() {
-      this.initChart();
+      this.$nextTick(() => {
+        this.initChart();
+      })
     },
     beforeDestroy() {
       if (!this.chart) {
@@ -53,7 +67,7 @@
     methods: {
       initChart() {
         this.chart = echarts.init(document.getElementById(this.id));
-        const option = {
+        let option = {
           title: {
             text: this.title,
             x: "center"
@@ -65,6 +79,7 @@
           series: [
             {
               type: "wordCloud",
+              shape: "circle",
               //用来调整词之间的距离
               gridSize: 6,
               //用来调整字的大小范围
@@ -75,14 +90,19 @@
               //用来调整词的旋转方向，，[0,0]--代表着没有角度，也就是词为水平方向，需要设置角度参考注释内容
               // rotationRange: [-45, 0, 45, 90],
               // rotationRange: [ 0,90],
-              rotationRange: [0, 90],
+              rotationRange: [-90, 90],
               //随机生成字体颜色
               // maskImage: maskImage,
               textStyle: {
                 normal: {
                   color: function() {
-                    var colors = ['#00BBFE', '#3F96EA', '#0B5AAD', "#4198ED",'#F29901'];
-                    return colors[parseInt(Math.random() * 10)];
+                    // var colors = ['#00BBFE', '#3F96EA', '#0B5AAD', "#4198ED",'#F29901'];
+                    // return colors[parseInt(Math.random() * 10)];
+                    return 'rgb(' + [
+                      Math.round(Math.random() * 256),
+                      Math.round(Math.random() * 256),
+                      Math.round(Math.random() * 256)
+                    ].join(',') + ')';
                   }
                 }
               },

dgtis-ui/src/views/system/userInfoDetails/index.vue

@@ -165,6 +165,7 @@
 </template>
 
 <script>
+  import { getCustomerById } from "@/api/customerInformation/customerInformation.js";
   import WordCloudChart from '../../dashboard/WordCloudChart'
   import LineBarChart from '../../dashboard/LineBarChart'
   import PieChartHalf from '../../dashboard/PieChartHalf'
@@ -179,134 +180,134 @@ export default {
     return {
       chartsTitle:'',
       wordCloudChartData:[
-        {
-        "name": "美食",
-        "value": 12
-      },
-        {
-          "name": "网红店",
-          "value": 10
-        },
-        {
-          "name": "新冠肺炎疫情表彰大会",
-          "value": 10
-        },
-        {
-          "name": "打卡",
-          "value": 14
-        },
-        {
-          "name": "十一长假",
-          "value": 14
-        },
-        {
-          "name": "自由行",
-          "value": 16
-        },
-        {
-          "name": "教师节",
-          "value": 17
-        },
-        {
-          "name": "旅游景点攻略",
-          "value": 13
-        },
-        {
-          "name": "坡子街",
-          "value": 13
-        },
-        {
-          "name": "体育",
-          "value": 11
-        },
-        {
-          "name": "综艺",
-          "value": 12
-        },
-        {
-          "name": "商场",
-          "value": 15
-        },
-        {
-          "name": "衡山",
-          "value": 12
-        },
-        {
-          "name": "科学家座谈会",
-          "value": 15
-        },
-        {
-          "name": "潇湘晨报",
-          "value": 15
-        },
-        {
-          "name": "张家界",
-          "value": 15
-        },
-        {
-          "name": "橘子洲",
-          "value": 15
-        },
-        {
-          "name": "房价",
-          "value": 15
-        },
-        {
-          "name": "开学",
-          "value": 15
-        },
-        {
-          "name": "湘江",
-          "value": 15
-        },
-        {
-          "name": "繁华",
-          "value": 15
-        },
-        {
-          "name": "湖南公考",
-          "value": 14
-        },
-        {
-          "name": "中秋节",
-          "value": 14
-        },
-        {
-          "name": "天气",
-          "value": 14
-        },
-        {
-          "name": "幸福感",
-          "value": 14
-        },
-        {
-          "name": "芒果台",
-          "value": 13
-        },
-        {
-          "name": "游戏",
-          "value": 13
-        },
-        {
-          "name": "宝藏小店",
-          "value": 13
-        },
-        {
-          "name": "动漫",
-          "value": 13
-        },
-        {
-          "name": "武汉",
-          "value": 13
-        },
-        {
-          "name": "湖南大学",
-          "value": 13
-        },
-        {
-          "name": "湘西",
-          "value": 12
-        }
+      //   {
+      //   "name": "美食",
+      //   "value": 12
+      // },
+      //   {
+      //     "name": "网红店",
+      //     "value": 10
+      //   },
+      //   {
+      //     "name": "新冠肺炎疫情表彰大会",
+      //     "value": 10
+      //   },
+      //   {
+      //     "name": "打卡",
+      //     "value": 14
+      //   },
+      //   {
+      //     "name": "十一长假",
+      //     "value": 14
+      //   },
+      //   {
+      //     "name": "自由行",
+      //     "value": 16
+      //   },
+      //   {
+      //     "name": "教师节",
+      //     "value": 17
+      //   },
+      //   {
+      //     "name": "旅游景点攻略",
+      //     "value": 13
+      //   },
+      //   {
+      //     "name": "坡子街",
+      //     "value": 13
+      //   },
+      //   {
+      //     "name": "体育",
+      //     "value": 11
+      //   },
+      //   {
+      //     "name": "综艺",
+      //     "value": 12
+      //   },
+      //   {
+      //     "name": "商场",
+      //     "value": 15
+      //   },
+      //   {
+      //     "name": "衡山",
+      //     "value": 12
+      //   },
+      //   {
+      //     "name": "科学家座谈会",
+      //     "value": 15
+      //   },
+      //   {
+      //     "name": "潇湘晨报",
+      //     "value": 15
+      //   },
+      //   {
+      //     "name": "张家界",
+      //     "value": 15
+      //   },
+      //   {
+      //     "name": "橘子洲",
+      //     "value": 15
+      //   },
+      //   {
+      //     "name": "房价",
+      //     "value": 15
+      //   },
+      //   {
+      //     "name": "开学",
+      //     "value": 15
+      //   },
+      //   {
+      //     "name": "湘江",
+      //     "value": 15
+      //   },
+      //   {
+      //     "name": "繁华",
+      //     "value": 15
+      //   },
+      //   {
+      //     "name": "湖南公考",
+      //     "value": 14
+      //   },
+      //   {
+      //     "name": "中秋节",
+      //     "value": 14
+      //   },
+      //   {
+      //     "name": "天气",
+      //     "value": 14
+      //   },
+      //   {
+      //     "name": "幸福感",
+      //     "value": 14
+      //   },
+      //   {
+      //     "name": "芒果台",
+      //     "value": 13
+      //   },
+      //   {
+      //     "name": "游戏",
+      //     "value": 13
+      //   },
+      //   {
+      //     "name": "宝藏小店",
+      //     "value": 13
+      //   },
+      //   {
+      //     "name": "动漫",
+      //     "value": 13
+      //   },
+      //   {
+      //     "name": "武汉",
+      //     "value": 13
+      //   },
+      //   {
+      //     "name": "湖南大学",
+      //     "value": 13
+      //   },
+      //   {
+      //     "name": "湘西",
+      //     "value": 12
+      //   }
       ],
       lineBarChartData:{
         expectedData:{
@@ -328,10 +329,31 @@ export default {
 
   },
   mounted() {
-
+    this.getCustomerByIdData();
   },
   methods: {
-
+    getCustomerByIdData(){
+      this.loading = true;
+      var that = this;
+      let id = this.$route.query.id;
+      getCustomerById({id:id}).then(response => {
+          console.log(response);
+          that.custInfo = response.data.custInfo
+        for(var i =0 ;i< 120;i++){
+          var label = 'label'+i;
+          if(that.custInfo[label] && that.custInfo[label] != ""){
+            var data = {
+              name:that.custInfo[label],
+              value:i,
+            }
+            that.wordCloudChartData.push(data)
+          }
+        }
+        console.log(that.wordCloudChartData)
+          this.loading = false;
+        }
+      );
+    },
   }
 };
 </script>

dgtis-ui/src/views/system/userInfoList/index.vue

@@ -127,8 +127,8 @@ export default {
         ...this.queryParams
       }, `user_${new Date().getTime()}.xlsx`)
     },
-    toOverview(){
-      this.$router.push({ path:'/system/userInfoDetails'  })
+    toOverview(row){
+      this.$router.push({ path:'/system/userInfoDetails', query: {id: row.id}  })
     },
     toDetail(row){
       this.$router.push({ path:'/system/userInfo', query: {id: row.id}  })