feat: 接口对接

src/store/modules/im/chatHome.js

@@ -15,7 +15,7 @@ const actions = {
     loadOnline: async ({ commit }, data) => {
         let res = await api.online(data);
         commit('setOnline', res || 0);
-        if (!res) {
+        if (!res && res !== 0) {
             ElMessage.error('查询失败');
         }
         return res;

src/views/im/home/index.vue

@@ -2,7 +2,12 @@
     <div class="home-container">
         <el-form>
             <el-form-item label="所属系统">
-                <el-select v-model="systemId" :config="{ label: 'name', value: 'id' }" :opts="opts.system" />
+                <el-select
+                    v-model="systemId"
+                    :clearable="false"
+                    :config="{ label: 'name', value: 'id' }"
+                    :opts="opts.system"
+                />
             </el-form-item>
         </el-form>
         <el-card header="在线人数">{{ online }}</el-card>
@@ -33,6 +38,8 @@
 </template>
 
 <script setup>
+    import dayjs from 'dayjs';
+    import * as echarts from 'echarts';
     const store = useStore();
     const loading = ref(false);
     const opts = computed(() => store.state.chatStore.opts);
@@ -60,9 +67,64 @@
     };
     watch(systemId, handleLoadOnline);
 
-    const date1 = ref(null);
+    const handleChart = (selector, name, data) => {
+        const chart = echarts.init(document.querySelector(selector));
+        const option = {
+            gradientColor: ['#1DE7FF', '#249AFF', '#6F41FA', '#6F41FA'],
+            visualMap: [
+                {
+                    show: false,
+                    type: 'continuous',
+                    dimension: 0,
+                    min: 0,
+                    max: data.length - 1,
+                },
+            ],
+            tooltip: {
+                trigger: 'axis',
+            },
+            grid: {
+                left: '0',
+                right: '0',
+                top: '5%',
+                bottom: '0',
+                containLabel: true,
+            },
+            xAxis: [
+                {
+                    data: data.map((item) => item.label),
+                },
+            ],
+            yAxis: [{}],
+            series: [
+                {
+                    type: 'line',
+                    name,
+                    showSymbol: false,
+                    smooth: true,
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                            {
+                                offset: 0,
+                                color: 'rgba(29, 231, 255, 0.3)',
+                            },
+                            {
+                                offset: 1,
+                                color: 'rgba(29, 231, 255, 0)',
+                            },
+                        ]),
+                    },
+                    data: data.map((item) => item.value),
+                },
+            ],
+        };
+        chart.setOption(option);
+    };
+
+    const date1 = ref(dayjs(new Date()).format('YYYY-MM-DD'));
     const handleLoadSingle = async () => {
         loading.value = true;
+        store.commit('chatHome/setSingle', []);
         if (unref(systemId)) {
             if (unref(date1)) {
                 await store.dispatch('chatHome/loadSingle', {
@@ -70,17 +132,37 @@
                     start: new Date(unref(date1) + ' 00:00:00').getTime(),
                     end: new Date(unref(date1) + ' 23:59:59').getTime(),
                 });
-            } else {
-                store.commit('setSingle', []);
             }
         }
         loading.value = false;
     };
-    watch(date1, handleLoadSingle);
+    watch(date1, handleLoadSingle, { immediate: true });
+    watch(systemId, handleLoadSingle);
+    watch(
+        () => store.state.chatHome.single,
+        (value) => {
+            handleChart(
+                '.chart-1',
+                '消息量',
+                value.map((item) => {
+                    return {
+                        label: item.hours,
+                        value: item.messageCount,
+                    };
+                })
+            );
+        }
+    );
 
-    const date2 = ref([]);
+    const date2 = ref([
+        new Date(
+            dayjs(new Date(Date.now() - ((new Date().getDay() || 7) - 1) * 86400000)).format('YYYY-MM-DD') + ' 00:00:00'
+        ).getTime(),
+        new Date(dayjs(new Date()).format('YYYY-MM-DD') + ' 23:59:59').getTime(),
+    ]);
     const handleLoadRange = async () => {
         loading.value = true;
+        store.commit('chatHome/setRange', []);
         if (unref(systemId)) {
             if (unref(date2)?.length) {
                 await store.dispatch('chatHome/loadRange', {
@@ -88,13 +170,29 @@
                     start: unref(date2)[0],
                     end: unref(date2)[1],
                 });
-            } else {
-                store.commit('setSingle', []);
             }
         }
         loading.value = false;
     };
-    watch(date2, handleLoadRange);
+    watch(date2, handleLoadRange, {
+        immediate: true,
+    });
+    watch(systemId, handleLoadRange);
+    watch(
+        () => store.state.chatHome.range,
+        (value) => {
+            handleChart(
+                '.chart-2',
+                '消息量',
+                value.map((item) => {
+                    return {
+                        label: item.days,
+                        value: item.messageCount,
+                    };
+                })
+            );
+        }
+    );
 
     onActivated(() => {
         handleLoadOnline();
@@ -116,10 +214,14 @@
             & + .el-card {
                 margin-top: 30px;
             }
+            &:nth-of-type(1) {
+                :deep(.el-card__body) {
+                    font-size: 32px;
+                }
+            }
             .chart {
                 width: 100%;
                 height: 300px;
-                background: #eee;
             }
         }
     }