统计

2023-06-21 15:54:43 +08:00
parent 09a9ffd3a1
commit cdc1531293
3 changed files with 116 additions and 69 deletions
--- 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",
--- 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%;
    }
--- 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