From cdc15312939212697a12fd13a5fd0fc8cc4f0593 Mon Sep 17 00:00:00 2001
From: liuye <liuye@sinoecare.com>
Date: Wed, 21 Jun 2023 15:54:43 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=9F=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   3 +-
 .../components/sensitive.vue                  | 170 +++++++++++-------
 .../pidu/AppSensitive/AppSensitive.vue        |  12 +-
 3 files changed, 116 insertions(+), 69 deletions(-)

diff --git a/package.json b/package.json
index b0069def..d1aafa78 100644
--- a/package.json
+++ b/package.json
@@ -56,7 +56,8 @@
     "vuedraggable": "^2.24.3",
     "vuex": "^3.2.0",
     "vuex-persistedstate": "^4.0.0-beta.3",
-    "wangeditor": "^4.7.10"
+    "wangeditor": "^4.7.10",
+    "wordcloud": "^1.2.2"
   },
   "devDependencies": {
     "@babel/runtime": "~7.12.0",
diff --git a/src/project/pidu/AppDataStatistics/components/sensitive.vue b/src/project/pidu/AppDataStatistics/components/sensitive.vue
index 157aa41c..6864509d 100644
--- a/src/project/pidu/AppDataStatistics/components/sensitive.vue
+++ b/src/project/pidu/AppDataStatistics/components/sensitive.vue
@@ -7,12 +7,12 @@
       </div>
       <div class="item">
         <div class="item_name">群聊敏感词</div>
-        <div class="item_num">{{ Number(info.groupRecordSum)}}</div>
+        <div class="item_num">{{ Number(info.groupRecordSum) }}</div>
       </div>
       <div class="item">
         <div class="item_name">私聊敏感词</div>
-        <div class="item_num">{{ Number(info.personRecordSum)}}</div>
-          <!-- <img src="../img/down.png" alt="" class="imgs" v-show="info.personRecordSum !=0"> -->
+        <div class="item_num">{{ Number(info.personRecordSum) }}</div>
+        <!-- <img src="../img/down.png" alt="" class="imgs" v-show="info.personRecordSum !=0"> -->
       </div>
     </div>
 
@@ -21,7 +21,11 @@
     </div>
     <div class="friends_box">
       <div id="group" v-if="groupData.length > 0"></div>
-      <AiEmpty style="padding-top: 10px;" description="暂无数据" v-else></AiEmpty>
+      <AiEmpty
+        style="padding-top: 10px"
+        description="暂无数据"
+        v-else
+      ></AiEmpty>
     </div>
 
     <div class="head">
@@ -29,173 +33,208 @@
     </div>
     <div class="groups_box">
       <div id="user" v-if="userData.length > 0"></div>
-      <AiEmpty style="padding-top: 10px;" description="暂无数据" v-else></AiEmpty>
+      <AiEmpty
+        style="padding-top: 10px"
+        description="暂无数据"
+        v-else
+      ></AiEmpty>
     </div>
+
+    <div class="groups_box" v-if="wordData">
+      <canvas id="main"></canvas>
+    </div>
+   
   </div>
 </template>
 
 <script>
-import echarts from 'echarts';
+import echarts from "echarts";
+import WordCloud from 'wordcloud';
 export default {
   name: "sensitive",
   props: {
-    departmentId: String
+    departmentId: String,
   },
   data() {
     return {
       info: {},
       groupData: [],
-      userData: []
-    }
+      userData: [],
+      wordData: []
+    };
   },
   created() {
-    this.getData()
+    this.getData();
   },
   methods: {
     getData() {
       // 居民好友
-      this.$http.post(`/app/appsessionarchivekeywordrecord/getKeywordRecordStatistic?departmentId=${this.departmentId}`).then(res=> {
-        if(res?.data) {
-          this.info = {...res.data}
-          var groupMonth = res.data.groupRecordListMap.map(e=> e.dateDay)
-          this.groupData = res.data.groupRecordListMap.map(e=> e.cnt)
+      this.$http
+        .post(
+          `/app/appsessionarchivekeywordrecord/getKeywordRecordStatistic?departmentId=${this.departmentId}`
+        )
+        .then((res) => {
+          if (res?.data) {
+            this.info = { ...res.data };
+            var groupMonth = res.data.groupRecordListMap.map((e) => e.dateDay);
+            this.groupData = res.data.groupRecordListMap.map((e) => e.cnt);
 
-          var userMonth = res.data.personRecordListMap.map(e=> e.dateDay)
-          this.userData = res.data.personRecordListMap.map(e=> e.cnt)
+            var userMonth = res.data.personRecordListMap.map((e) => e.dateDay);
+            this.userData = res.data.personRecordListMap.map((e) => e.cnt);
 
-          this.$nextTick(()=> {
-            this.getGroupEcharts(groupMonth, this.groupData)
-            this.getUserEcharts(userMonth, this.userData)
-          })
-        }
-      })
+            res.data.wordNames.map((item) => {
+              var i = [item.wordName, item.wordCount*8]
+              this.wordData.push(i)
+            })
+            this.$nextTick(() => {
+              this.getGroupEcharts(groupMonth, this.groupData);
+              this.getUserEcharts(userMonth, this.userData);
+              if(this.wordData) {
+                this.getKeyWordEcharts(this.wordData)
+              }
+            });
+          }
+        });
     },
     getGroupEcharts(groupMonth, groupData) {
-      let groupDom = document.getElementById('group');
+      let groupDom = document.getElementById("group");
       let groupChart = echarts.init(groupDom);
       let option = {
         tooltip: {
           trigger: "axis",
         },
         xAxis: {
-          type: 'category',
+          type: "category",
           data: groupMonth,
           axisTick: {
             show: false,
-          }
+          },
         },
         yAxis: {
-          type: 'value',
+          type: "value",
           axisLine: {
             show: false,
           },
           axisTick: {
             show: false,
-          }
+          },
+        },
+        grid: {
+          x: 50,
+          y: 50,
         },
-        grid:{
-          x:50,
-          y:50,
-	      },
         series: [
           {
             data: groupData,
-            type: 'line',
+            type: "line",
             lineStyle: {
-              color: '#3975C6', // 折线线条颜色
+              color: "#3975C6", // 折线线条颜色
             },
             itemStyle: {
-              color: '#3975C6', // 折角颜色
+              color: "#3975C6", // 折角颜色
             },
             areaStyle: {
               color: {
-                type: 'linear',
+                type: "linear",
                 x: 0,
                 y: 0,
                 x2: 0,
                 y2: 1,
-                colorStops: [  // 渐变颜色
+                colorStops: [
+                  // 渐变颜色
                   {
                     offset: 0,
-                    color: '#2891ff33',
+                    color: "#2891ff33",
                   },
                   {
                     offset: 1,
-                    color: '#2891ff00',
+                    color: "#2891ff00",
                   },
                 ],
                 global: false,
               },
             },
-          }
-        ]
+          },
+        ],
       };
       option && groupChart.setOption(option);
     },
     getUserEcharts(userMonth, userData) {
-      let userDom = document.getElementById('user');
+      let userDom = document.getElementById("user");
       let userChart = echarts.init(userDom);
       let option = {
         tooltip: {
           trigger: "axis",
         },
         xAxis: {
-          type: 'category',
+          type: "category",
           data: userMonth,
           axisTick: {
             show: false,
-          }
+          },
         },
         yAxis: {
-          type: 'value',
+          type: "value",
           axisLine: {
             show: false,
           },
           axisTick: {
             show: false,
-          }
+          },
+        },
+        grid: {
+          x: 50,
+          y: 50,
         },
-        grid:{
-          x:50,
-          y:50,
-	      },
         series: [
           {
             data: userData,
-            type: 'line',
+            type: "line",
             lineStyle: {
-              color: '#3975C6', // 折线线条颜色
+              color: "#3975C6", // 折线线条颜色
             },
             itemStyle: {
-              color: '#3975C6', // 折角颜色
+              color: "#3975C6", // 折角颜色
             },
             areaStyle: {
               color: {
-                type: 'linear',
+                type: "linear",
                 x: 0,
                 y: 0,
                 x2: 0,
                 y2: 1,
-                colorStops: [  // 渐变颜色
+                colorStops: [
+                  // 渐变颜色
                   {
                     offset: 0,
-                    color: '#2891ff33',
+                    color: "#2891ff33",
                   },
                   {
                     offset: 1,
-                    color: '#2891ff00',
+                    color: "#2891ff00",
                   },
                 ],
                 global: false,
               },
             },
-          }
-        ]
+          },
+        ],
       };
       option && userChart.setOption(option);
-    }
+    },
+    getKeyWordEcharts(list) {
+      WordCloud(document.getElementById('main'), {
+        list: list 
+        // [
+        //   ['foo', 50],
+        //   ['bar', 6],
+        //   // ...
+        // ],
+        // 其他自定义选项
+      });
+    },
   },
-}
+};
 </script>
 
 <style lang="scss" scoped>
@@ -221,7 +260,7 @@ export default {
     display: flex;
     text-align: center;
     align-items: center;
-    background: #FFF;
+    background: #fff;
     border-radius: 16px;
     margin-top: 24px;
 
@@ -250,10 +289,11 @@ export default {
     margin-top: 24px;
     width: 100%;
     height: 514px;
-    background: #FFF;
-    
+    background: #fff;
+
     #user,
-    #group {
+    #group,
+    #main {
       width: 100%;
       height: 100%;
     }
diff --git a/src/project/pidu/AppSensitive/AppSensitive.vue b/src/project/pidu/AppSensitive/AppSensitive.vue
index 1b8b056e..98e483ec 100644
--- a/src/project/pidu/AppSensitive/AppSensitive.vue
+++ b/src/project/pidu/AppSensitive/AppSensitive.vue
@@ -26,7 +26,8 @@
         <img src="./img/user-img.png" alt="" v-if="item.type != 1 && !item.userAvatar">
         <div class="item-right">
           <div class="name-flex">
-            <p>{{item.userName}}</p>
+            <p v-if="item.type == 1">{{item.toName}}</p>
+            <p v-else>{{item.userName}}</p>
             <div class="time">{{item.createTime.substring(0, 16)}}</div>
           </div>
           <div v-html="item.text" class="item-content"></div>
@@ -71,14 +72,19 @@ export default {
       this.$http.post(`/app/appsessionarchivekeywordrecord/list`, null, {
         params: {
           current: this.current,
-          size: 10,
+          size: 15,
           content: this.keyword,
           departmentId: this.deptUserList.length ? this.deptUserList[0].id : ''
         }
       }).then(res=> {
         if(res?.data) {
           res.data.records.map((item) => {
-            item.text = this.changeKeyRed(item.content, item.wordName)
+            if(item.type == 1) {
+              item.text = item.userName + ':' + this.changeKeyRed(item.content, item.wordName)
+            }else {
+              item.text = this.changeKeyRed(item.content, item.wordName)
+            }
+            
           })
           this.list = this.current > 1 ? [...this.list, ...res.data.records] : res.data.records
           this.pages = res.data.pages