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>
|
||||
<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>
|
||||
const store = useStore();
|
||||
const loading = ref(false);
|
||||
const opts = computed(() => store.state.chatStore.opts);
|
||||
if (!unref(opts).init) {
|
||||
store.dispatch('chatStore/load');
|
||||
}
|
||||
|
||||
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);
|
||||
|
||||
<script setup></script>
|
||||
onActivated(() => {
|
||||
handleLoadOnline();
|
||||
handleLoadSingle();
|
||||
handleLoadRange();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
<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