feat: 首页

src/api/im/index.js

@@ -1,8 +1,9 @@
 import request from '@/utils/request.js';
-export const online = () => {
+export const online = (params) => {
     return request({
         url: '/im/admin/count/online',
         method: 'get',
+        params,
     });
 };
 export const hours = (params) => {

src/store/modules/im/chatHome.js

@@ -0,0 +1,45 @@
+import * as api from '@/api/im/index.js';
+import { ElMessage } from '@/plugins/element-plus';
+const state = () => ({
+    online: 0,
+    single: [],
+    range: [],
+});
+const getters = {};
+const mutations = {
+    setOnline: (state, data) => (state.online = data),
+    setSingle: (state, data) => (state.single = data),
+    setRange: (state, data) => (state.range = data),
+};
+const actions = {
+    loadOnline: async ({ commit }, data) => {
+        let res = await api.online(data);
+        commit('setOnline', res || 0);
+        if (!res) {
+            ElMessage.error('查询失败');
+        }
+        return res;
+    },
+    loadSingle: async ({ commit }, data) => {
+        let res = await api.hours(data);
+        commit('setSingle', res || []);
+        if (!res) {
+            ElMessage.error('查询失败');
+        }
+        return res;
+    },
+    loadRange: async ({ commit }, data) => {
+        let res = await api.days(data);
+        commit('setRange', res || []);
+        if (!res) {
+            ElMessage.error('查询失败');
+        }
+        return res;
+    },
+};
+export default {
+    state,
+    getters,
+    mutations,
+    actions,
+};

src/views/im/home/index.vue

@@ -1,7 +1,126 @@
 <template>
-    <div>在线人数</div>
+    <div class="home-container">
+        <el-form>
+            <el-form-item label="所属系统">
+                <el-select v-model="systemId" :config="{ label: 'name', value: 'id' }" :opts="opts.system" />
+            </el-form-item>
+        </el-form>
+        <el-card header="在线人数">{{ online }}</el-card>
+        <el-card>
+            <template #header>
+                <div class="flex">
+                    <p>单日消息量</p>
+                    <el-date-picker v-model="date1" type="date" value-format="YYYY-MM-DD" />
+                </div>
+            </template>
+            <div class="chart chart-1"></div>
+        </el-card>
+        <el-card>
+            <template #header>
+                <div class="flex">
+                    <p>历史消息量</p>
+                    <el-date-picker
+                        v-model="date2"
+                        :default-time="[new Date(0, 0, 0, 0, 0, 0), new Date(0, 0, 0, 23, 59, 59)]"
+                        type="datetimerange"
+                        value-format="x"
+                    />
+                </div>
+            </template>
+            <div class="chart chart-2"></div>
+        </el-card>
+    </div>
 </template>
 
-<script setup></script>
+<script setup>
+    const store = useStore();
+    const loading = ref(false);
+    const opts = computed(() => store.state.chatStore.opts);
+    if (!unref(opts).init) {
+        store.dispatch('chatStore/load');
+    }
 
-<style lang="less" scoped></style>
+    const systemId = ref(null);
+    watch(
+        () => unref(opts).system,
+        (value) => {
+            if (!unref(systemId)) {
+                systemId.value = value?.[0]?.id;
+            }
+        },
+        { immediate: true }
+    );
+    const online = computed(() => store.state.chatHome.online);
+    const handleLoadOnline = async () => {
+        loading.value = true;
+        if (unref(systemId)) {
+            await store.dispatch('chatHome/loadOnline', { systemId: unref(systemId) });
+        }
+        loading.value = false;
+    };
+    watch(systemId, handleLoadOnline);
+
+    const date1 = ref(null);
+    const handleLoadSingle = async () => {
+        loading.value = true;
+        if (unref(systemId)) {
+            if (unref(date1)) {
+                await store.dispatch('chatHome/loadSingle', {
+                    systemId: unref(systemId),
+                    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);
+
+    const date2 = ref([]);
+    const handleLoadRange = async () => {
+        loading.value = true;
+        if (unref(systemId)) {
+            if (unref(date2)?.length) {
+                await store.dispatch('chatHome/loadRange', {
+                    systemId: unref(systemId),
+                    start: unref(date2)[0],
+                    end: unref(date2)[1],
+                });
+            } else {
+                store.commit('setSingle', []);
+            }
+        }
+        loading.value = false;
+    };
+    watch(date2, handleLoadRange);
+
+    onActivated(() => {
+        handleLoadOnline();
+        handleLoadSingle();
+        handleLoadRange();
+    });
+</script>
+
+<style lang="less" scoped>
+    .home-container {
+        .flex {
+            display: flex;
+            align-items: center;
+            p {
+                margin-right: 20px;
+            }
+        }
+        .el-card {
+            & + .el-card {
+                margin-top: 30px;
+            }
+            .chart {
+                width: 100%;
+                height: 300px;
+                background: #eee;
+            }
+        }
+    }
+</style>