会话统计

src/project/saas/AppDataStatistics/components/message.vue

@@ -1,17 +1,245 @@
 <template>
   <div class="message">
-    会话统计
+    <div class="head">
+      <span>消息回复率</span>
+    </div>
+
+    
+
+    <div class="head">
+      <span>单聊统计</span>
+    </div>
+
+    <div class="card">
+      <div class="item">
+        <div class="item_name">居民好友</div>
+        <div class="item_num">{{ (235625).toLocaleString('en-US') }}</div>
+      </div>
+      <div class="item">
+        <div class="item_name">单聊消息</div>
+        <div class="item_num">235</div>
+      </div>
+    </div>
+
+    <div class="privateChat_box">
+      <div id="privateChat"></div>
+    </div>
+
+    <div class="head">
+      <span>群聊统计</span>
+    </div>
+
+    <div class="card">
+      <div class="item">
+        <div class="item_name">活跃群聊</div>
+        <div class="item_num">111</div>
+      </div>
+      <div class="item">
+        <div class="item_name">活跃群成员</div>
+        <div class="item_num">235</div>
+      </div>
+      <div class="item">
+        <div class="item_name">群聊消息</div>
+        <div class="item_num">{{ (235625).toLocaleString('en-US') }}</div>
+      </div>
+    </div>
+
+    <div class="groupChat_box">
+      <div id="groupChat"></div>
+    </div>
+
   </div>
 </template>
 
 <script>
+import echarts from "echarts"
 export default {
+  name: 'message',
+  data() {
+    return {
 
+    }
+  },
+  mounted() {
+    this.getPrivateChat()
+    this.getGroupChat()
+  },
+  methods: {
+    getPrivateChat() {
+      let privateDom = document.getElementById('privateChat');
+      let myChart = echarts.init(privateDom);
+      let option = {
+        tooltip: {
+          trigger: "axis",
+        },
+        xAxis: {
+          type: 'category',
+          data: ['1月', '2月', '3月', '4月', '5月'],
+          axisTick: {
+            show: false,
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          }
+        },
+        series: [
+          {
+            data: [350, 230, 224, 218, 135],
+            type: 'line',
+            lineStyle: {
+              color: '#3975C6', // 折线线条颜色
+            },
+            itemStyle: {
+              color: '#3975C6', // 折角颜色
+            },
+            areaStyle: {
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [  // 渐变颜色
+                  {
+                    offset: 0,
+                    color: '#2891ff33',
+                  },
+                  {
+                    offset: 1,
+                    color: '#2891ff00',
+                  },
+                ],
+                global: false,
+              },
+            },
+          }
+        ]
+      };
+      option && myChart.setOption(option);
+    },
+    getGroupChat() {
+      let groupDom = document.getElementById('groupChat');
+      let myChart = echarts.init(groupDom);
+      let option = {
+        tooltip: {
+          trigger: "axis",
+        },
+        xAxis: {
+          type: 'category',
+          data: ['1月', '2月', '3月', '4月', '5月'],
+          axisTick: {
+            show: false,
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          }
+        },
+        series: [
+          {
+            data: [350, 230, 224, 218, 135],
+            type: 'line',
+            lineStyle: {
+              color: '#3975C6', // 折线线条颜色
+            },
+            itemStyle: {
+              color: '#3975C6', // 折角颜色
+            },
+            areaStyle: {
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [  // 渐变颜色
+                  {
+                    offset: 0,
+                    color: '#2891ff33',
+                  },
+                  {
+                    offset: 1,
+                    color: '#2891ff00',
+                  },
+                ],
+                global: false,
+              },
+            },
+          }
+        ]
+      };
+      option && myChart.setOption(option);
+    }
+  },
 }
 </script>
 
 <style lang="scss" scoped>
 .message {
+  padding: 0 32px;
+  box-sizing: border-box;
+  .head {
+    margin-top: 32px;
+    span {
+      font-size: 32px;
+      color: #333333;
+      font-weight: 600;
+    }
+  }
 
+  .card {
+    padding: 24px 0;
+    box-sizing: border-box;
+    display: flex;
+    text-align: center;
+    align-items: center;
+    background: #FFF;
+    border-radius: 16px;
+    margin-top: 24px;
+
+    .item {
+      flex: 1;
+
+      .item_name {
+        color: #666666;
+      }
+
+      .item_num {
+        color: #000000;
+        font-size: 36px;
+        font-weight: 600;
+      }
+
+      .imgs {
+        width: 30px;
+        height: 30px;
+      }
+    }
+  }
+
+  .privateChat_box,
+  .groupChat_box {
+    margin-top: 24px;
+    width: 100%;
+    height: 514px;
+    background: #FFF;
+    
+    #privateChat,
+    #groupChat {
+      width: 100%;
+      height: 100%;
+    }
+  }
 }
 </style>