parent
e2f84193cd
commit
56a45fb9bf
@ -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,
|
||||||
|
};
|
@ -1,7 +1,126 @@
|
|||||||
<template>
|
<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>
|
</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>
|
||||||
|
Loading…
Reference in new issue