28 changed files with 2570 additions and 2138 deletions
Before Width: | Height: | Size: 144 KiB |
After Width: | Height: | Size: 144 KiB |
@ -0,0 +1,70 @@ |
|||||||
|
<!-- <template> |
||||||
|
<Card title="接口分析数据" :loading="loading"> |
||||||
|
<div ref="chartRef" :style="{ width, height }"></div> |
||||||
|
</Card> |
||||||
|
</template> |
||||||
|
<script lang="ts" setup> |
||||||
|
import { Ref, ref, watch } from 'vue' |
||||||
|
import { Card } from 'ant-design-vue' |
||||||
|
import { useECharts } from '@/hooks/web/useECharts' |
||||||
|
import { propTypes } from '@/utils/propTypes' |
||||||
|
|
||||||
|
const props = defineProps({ |
||||||
|
loading: Boolean, |
||||||
|
newUser: propTypes.array, |
||||||
|
cancelUser: propTypes.array, |
||||||
|
width: propTypes.string.def('100%'), |
||||||
|
height: propTypes.string.def('300px') |
||||||
|
}) |
||||||
|
|
||||||
|
const chartRef = ref<HTMLDivElement | null>(null) |
||||||
|
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>) |
||||||
|
|
||||||
|
const newUserData = ref<any[]>(props.newUser) |
||||||
|
const cancelUserData = ref<any[]>(props.cancelUser) |
||||||
|
|
||||||
|
watch( |
||||||
|
() => props.loading, |
||||||
|
() => { |
||||||
|
if (props.loading) { |
||||||
|
return |
||||||
|
} |
||||||
|
setOptions({ |
||||||
|
color: ['#67C23A', '#e5323e', '#E6A23C', '#409EFF'], |
||||||
|
legend: { |
||||||
|
data: ['被动回复用户消息的次数', '失败次数', '最大耗时', '总耗时'] |
||||||
|
}, |
||||||
|
tooltip: {}, |
||||||
|
xAxis: { |
||||||
|
data: [] // X 轴的日期范围 |
||||||
|
}, |
||||||
|
yAxis: {}, |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
name: '被动回复用户消息的次数', |
||||||
|
type: 'bar', |
||||||
|
barGap: 0, |
||||||
|
data: [] // 被动回复用户消息的次数的数据 |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '失败次数', |
||||||
|
type: 'bar', |
||||||
|
data: [] // 失败次数的数据 |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '最大耗时', |
||||||
|
type: 'bar', |
||||||
|
data: [] // 最大耗时的数据 |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '总耗时', |
||||||
|
type: 'bar', |
||||||
|
data: [] // 总耗时的数据 |
||||||
|
} |
||||||
|
] |
||||||
|
}) |
||||||
|
}, |
||||||
|
{ immediate: true } |
||||||
|
) |
||||||
|
</script> --> |
||||||
|
<template><div>开发中</div></template> |
@ -0,0 +1,63 @@ |
|||||||
|
<!-- <template> |
||||||
|
<Card title="消息概况数据" :loading="loading"> |
||||||
|
<div ref="chartRef" :style="{ width, height }"></div> |
||||||
|
</Card> |
||||||
|
</template> |
||||||
|
<script lang="ts" setup> |
||||||
|
import { Ref, ref, watch } from 'vue' |
||||||
|
import { Card } from 'ant-design-vue' |
||||||
|
import { useECharts } from '@/hooks/web/useECharts' |
||||||
|
import { propTypes } from '@/utils/propTypes' |
||||||
|
|
||||||
|
const props = defineProps({ |
||||||
|
loading: Boolean, |
||||||
|
newUser: propTypes.array, |
||||||
|
cancelUser: propTypes.array, |
||||||
|
width: propTypes.string.def('100%'), |
||||||
|
height: propTypes.string.def('300px') |
||||||
|
}) |
||||||
|
|
||||||
|
const chartRef = ref<HTMLDivElement | null>(null) |
||||||
|
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>) |
||||||
|
|
||||||
|
const newUserData = ref<any[]>(props.newUser) |
||||||
|
const cancelUserData = ref<any[]>(props.cancelUser) |
||||||
|
|
||||||
|
watch( |
||||||
|
() => props.loading, |
||||||
|
() => { |
||||||
|
if (props.loading) { |
||||||
|
return |
||||||
|
} |
||||||
|
setOptions({ |
||||||
|
color: ['#67C23A', '#e5323e'], |
||||||
|
legend: { |
||||||
|
data: ['用户发送人数', '用户发送条数'] |
||||||
|
}, |
||||||
|
tooltip: {}, |
||||||
|
xAxis: { |
||||||
|
data: [] // X 轴的日期范围 |
||||||
|
}, |
||||||
|
yAxis: { |
||||||
|
minInterval: 1 |
||||||
|
}, |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
name: '用户发送人数', |
||||||
|
type: 'line', |
||||||
|
smooth: true, |
||||||
|
data: newUserData.value // 用户发送人数的数据 |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '用户发送条数', |
||||||
|
type: 'line', |
||||||
|
smooth: true, |
||||||
|
data: cancelUserData.value // 用户发送条数的数据 |
||||||
|
} |
||||||
|
] |
||||||
|
}) |
||||||
|
}, |
||||||
|
{ immediate: true } |
||||||
|
) |
||||||
|
</script> --> |
||||||
|
<template><div>开发中</div></template> |
@ -0,0 +1,74 @@ |
|||||||
|
<!-- <template> |
||||||
|
<Card title="累计用户数据" :loading="loading"> |
||||||
|
<div ref="chartRef" :style="{ width, height }"></div> |
||||||
|
</Card> |
||||||
|
</template> |
||||||
|
<script lang="ts" setup> |
||||||
|
import { Ref, onMounted, ref, watch } from 'vue' |
||||||
|
import { Card } from 'ant-design-vue' |
||||||
|
import { useECharts } from '@/hooks/web/useECharts' |
||||||
|
import { propTypes } from '@/utils/propTypes' |
||||||
|
import { getUserCumulate } from '@/api/mp/statistics' |
||||||
|
import { beginOfDay, endOfDay, formatToDateTime } from '@/utils/dateUtil' |
||||||
|
|
||||||
|
const props = defineProps({ |
||||||
|
loading: Boolean, |
||||||
|
accountId: propTypes.number, |
||||||
|
dataTime: { |
||||||
|
type: Array as PropType<Date[]>, |
||||||
|
default: () => [ |
||||||
|
beginOfDay(new Date(new Date().getTime() - 3600 * 1000 * 24 * 7)), // -7 天 |
||||||
|
endOfDay(new Date(new Date().getTime() - 3600 * 1000 * 24)) |
||||||
|
] |
||||||
|
}, |
||||||
|
width: propTypes.string.def('100%'), |
||||||
|
height: propTypes.string.def('300px') |
||||||
|
}) |
||||||
|
|
||||||
|
const chartRef = ref<HTMLDivElement | null>(null) |
||||||
|
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>) |
||||||
|
|
||||||
|
const optionsData = ref() |
||||||
|
|
||||||
|
async function initData() { |
||||||
|
const res = await getUserCumulate({ |
||||||
|
accountId: props.accountId, |
||||||
|
date: [formatToDateTime(props.dataTime[0]), formatToDateTime(props.dataTime[1])] |
||||||
|
}) |
||||||
|
optionsData.value = res.cumulateUser |
||||||
|
} |
||||||
|
watch( |
||||||
|
() => props.loading, |
||||||
|
() => { |
||||||
|
if (props.loading) { |
||||||
|
return |
||||||
|
} |
||||||
|
setOptions({ |
||||||
|
legend: { |
||||||
|
data: ['累计用户量'] |
||||||
|
}, |
||||||
|
xAxis: { |
||||||
|
type: 'category', |
||||||
|
data: optionsData.value |
||||||
|
}, |
||||||
|
yAxis: { |
||||||
|
minInterval: 1 |
||||||
|
}, |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
name: '累计用户量', |
||||||
|
data: [], // 累计用户量的数据 |
||||||
|
type: 'line', |
||||||
|
smooth: true |
||||||
|
} |
||||||
|
] |
||||||
|
}) |
||||||
|
}, |
||||||
|
{ immediate: true } |
||||||
|
) |
||||||
|
|
||||||
|
onMounted(async () => { |
||||||
|
await initData() |
||||||
|
}) |
||||||
|
</script> --> |
||||||
|
<template><div>开发中</div></template> |
@ -0,0 +1,87 @@ |
|||||||
|
<!-- <template> |
||||||
|
<Card title="用户增减数据" :loading="loading"> |
||||||
|
<div ref="chartRef" :style="{ width, height }"></div> |
||||||
|
</Card> |
||||||
|
</template> |
||||||
|
<script lang="ts" setup> |
||||||
|
import { Ref, onMounted, ref, watch } from 'vue' |
||||||
|
import { Card } from 'ant-design-vue' |
||||||
|
import { useECharts } from '@/hooks/web/useECharts' |
||||||
|
import { propTypes } from '@/utils/propTypes' |
||||||
|
import { getUserSummary } from '@/api/mp/statistics' |
||||||
|
import { addTime, beginOfDay, betweenDay, endOfDay, formatDate, formatToDateTime } from '@/utils/dateUtil' |
||||||
|
|
||||||
|
const props = defineProps({ |
||||||
|
loading: Boolean, |
||||||
|
accountId: propTypes.number, |
||||||
|
dataTime: { |
||||||
|
type: Array as PropType<Date[]>, |
||||||
|
default: () => [ |
||||||
|
beginOfDay(new Date(new Date().getTime() - 3600 * 1000 * 24 * 7)), // -7 天 |
||||||
|
endOfDay(new Date(new Date().getTime() - 3600 * 1000 * 24)) |
||||||
|
] |
||||||
|
}, |
||||||
|
width: propTypes.string.def('100%'), |
||||||
|
height: propTypes.string.def('300px') |
||||||
|
}) |
||||||
|
|
||||||
|
const chartRef = ref<HTMLDivElement | null>(null) |
||||||
|
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>) |
||||||
|
|
||||||
|
const optionsData = ref() |
||||||
|
|
||||||
|
const xAxisDate = ref() |
||||||
|
|
||||||
|
async function initData() { |
||||||
|
const res = await getUserSummary({ |
||||||
|
accountId: props.accountId, |
||||||
|
date: [formatToDateTime(props.dataTime[0]), formatToDateTime(props.dataTime[1])] |
||||||
|
}) |
||||||
|
optionsData.value = res |
||||||
|
xAxisDate.value = [] |
||||||
|
const days = betweenDay(props.dataTime[0], props.dataTime[1]) // 相差天数 |
||||||
|
for (let i = 0; i <= days; i++) { |
||||||
|
xAxisDate.value.push(formatDate(addTime(props.dataTime[0], 3600 * 1000 * 24 * i), 'yyyy-MM-dd')) |
||||||
|
} |
||||||
|
} |
||||||
|
watch( |
||||||
|
() => props.loading, |
||||||
|
() => { |
||||||
|
if (props.loading) { |
||||||
|
return |
||||||
|
} |
||||||
|
setOptions({ |
||||||
|
color: ['#67C23A', '#e5323e'], |
||||||
|
legend: { |
||||||
|
data: ['新增用户', '取消关注的用户'] |
||||||
|
}, |
||||||
|
tooltip: {}, |
||||||
|
xAxis: { |
||||||
|
data: xAxisDate.value // X 轴的日期范围 |
||||||
|
}, |
||||||
|
yAxis: { |
||||||
|
minInterval: 1 |
||||||
|
}, |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
name: '新增用户', |
||||||
|
type: 'bar', |
||||||
|
barGap: 0, |
||||||
|
data: optionsData.value.newUserData // 新增用户的数据 |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '取消关注的用户', |
||||||
|
type: 'bar', |
||||||
|
data: optionsData.value.cancelUserData // 取消关注的用户的数据 |
||||||
|
} |
||||||
|
] |
||||||
|
}) |
||||||
|
}, |
||||||
|
{ immediate: true } |
||||||
|
) |
||||||
|
|
||||||
|
onMounted(async () => { |
||||||
|
await initData() |
||||||
|
}) |
||||||
|
</script> --> |
||||||
|
<template><div>开发中</div></template> |
@ -1,3 +1,20 @@ |
|||||||
<template> |
<!-- <template> |
||||||
<div>开发中</div> |
<div> |
||||||
|
<UserSummaryChart class="md:w-1/2 w-full" :loading="loading" :accountId="accountId" /> |
||||||
|
<UserCumulateChart class="md:w-1/2 w-full" :loading="loading" :accountId="accountId" /> |
||||||
|
<UpstreamMessageChart class="md:w-1/2 w-full" :loading="loading" :accountId="accountId" /> |
||||||
|
<InterfaceSummaryChart class="md:w-1/2 w-full" :loading="loading" :accountId="accountId" /> |
||||||
|
</div> |
||||||
</template> |
</template> |
||||||
|
<script lang="ts" setup name="Statistics"> |
||||||
|
import { ref } from 'vue' |
||||||
|
import UserSummaryChart from './components/UserSummaryChart.vue' |
||||||
|
import UserCumulateChart from './components/UserCumulateChart.vue' |
||||||
|
import UpstreamMessageChart from './components/UpstreamMessageChart.vue' |
||||||
|
import InterfaceSummaryChart from './components/InterfaceSummaryChart.vue' |
||||||
|
|
||||||
|
const loading = ref(true) |
||||||
|
|
||||||
|
const accountId = ref(1) |
||||||
|
</script> --> |
||||||
|
<template><div>开发中</div></template> |
||||||
|
@ -0,0 +1,49 @@ |
|||||||
|
<template> |
||||||
|
<BasicModal v-bind="$attrs" @register="registerModal" :title="isUpdate ? '编辑' : '新增'" @ok="handleSubmit"> |
||||||
|
<BasicForm @register="registerForm" /> |
||||||
|
</BasicModal> |
||||||
|
</template> |
||||||
|
<script lang="ts" setup name="PostModal"> |
||||||
|
import { ref, unref } from 'vue' |
||||||
|
import { BasicModal, useModalInner } from '@/components/Modal' |
||||||
|
import { BasicForm, useForm } from '@/components/Form' |
||||||
|
import { formSchema } from './tag.data' |
||||||
|
import { createTag, updateTag, getTag } from '@/api/mp/tag' |
||||||
|
|
||||||
|
const emit = defineEmits(['success', 'register']) |
||||||
|
const isUpdate = ref(true) |
||||||
|
|
||||||
|
const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({ |
||||||
|
labelWidth: 120, |
||||||
|
baseColProps: { span: 24 }, |
||||||
|
schemas: formSchema, |
||||||
|
showActionButtonGroup: false, |
||||||
|
actionColOptions: { span: 23 } |
||||||
|
}) |
||||||
|
|
||||||
|
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => { |
||||||
|
resetFields() |
||||||
|
setModalProps({ confirmLoading: false }) |
||||||
|
isUpdate.value = !!data?.isUpdate |
||||||
|
if (unref(isUpdate)) { |
||||||
|
const res = await getTag(data.record.id) |
||||||
|
setFieldsValue({ ...res }) |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
async function handleSubmit() { |
||||||
|
try { |
||||||
|
const values = await validate() |
||||||
|
setModalProps({ confirmLoading: true }) |
||||||
|
if (unref(isUpdate)) { |
||||||
|
await updateTag(values) |
||||||
|
} else { |
||||||
|
await createTag(values) |
||||||
|
} |
||||||
|
closeModal() |
||||||
|
emit('success') |
||||||
|
} finally { |
||||||
|
setModalProps({ confirmLoading: false }) |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
@ -1,3 +1,90 @@ |
|||||||
<template> |
<template> |
||||||
<div>开发中</div> |
<div> |
||||||
|
<BasicTable @register="registerTable"> |
||||||
|
<template #toolbar> |
||||||
|
<a-button type="primary" v-auth="['mp:tag:create']" :preIcon="IconEnum.ADD" @click="handleCreate"> |
||||||
|
{{ t('action.create') }} |
||||||
|
</a-button> |
||||||
|
<a-button type="warning" v-auth="['mp:tag:sync']" :preIcon="IconEnum.RESET" @click="handleSync"> |
||||||
|
{{ t('action.sync') }} |
||||||
|
</a-button> |
||||||
|
</template> |
||||||
|
<template #bodyCell="{ column, record }"> |
||||||
|
<template v-if="column.key === 'action'"> |
||||||
|
<TableAction |
||||||
|
:actions="[ |
||||||
|
{ icon: IconEnum.EDIT, label: t('action.edit'), auth: 'mp:tag:update', onClick: handleEdit.bind(null, record) }, |
||||||
|
{ |
||||||
|
icon: IconEnum.DELETE, |
||||||
|
color: 'error', |
||||||
|
label: t('action.delete'), |
||||||
|
auth: 'mp:tag:delete', |
||||||
|
popConfirm: { |
||||||
|
title: t('common.delMessage'), |
||||||
|
placement: 'left', |
||||||
|
confirm: handleDelete.bind(null, record) |
||||||
|
} |
||||||
|
} |
||||||
|
]" |
||||||
|
/> |
||||||
|
</template> |
||||||
|
</template> |
||||||
|
</BasicTable> |
||||||
|
<TagModal @register="registerModal" @success="reload()" /> |
||||||
|
</div> |
||||||
</template> |
</template> |
||||||
|
<script lang="ts" setup name="Tag"> |
||||||
|
import { useI18n } from '@/hooks/web/useI18n' |
||||||
|
import { useMessage } from '@/hooks/web/useMessage' |
||||||
|
import { useModal } from '@/components/Modal' |
||||||
|
import TagModal from './TagModal.vue' |
||||||
|
import { IconEnum } from '@/enums/appEnum' |
||||||
|
import { BasicTable, useTable, TableAction } from '@/components/Table' |
||||||
|
import { deleteTag, getTagPage, syncTag } from '@/api/mp/tag' |
||||||
|
import { columns, searchFormSchema } from './tag.data' |
||||||
|
|
||||||
|
const { t } = useI18n() |
||||||
|
const { createConfirm, createMessage } = useMessage() |
||||||
|
const [registerModal, { openModal }] = useModal() |
||||||
|
|
||||||
|
const [registerTable, { getForm, reload }] = useTable({ |
||||||
|
title: '标签列表', |
||||||
|
api: getTagPage, |
||||||
|
columns, |
||||||
|
formConfig: { labelWidth: 120, schemas: searchFormSchema }, |
||||||
|
useSearchForm: true, |
||||||
|
showTableSetting: true, |
||||||
|
actionColumn: { |
||||||
|
width: 140, |
||||||
|
title: t('common.action'), |
||||||
|
dataIndex: 'action', |
||||||
|
fixed: 'right' |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
function handleCreate() { |
||||||
|
openModal(true, { isUpdate: false }) |
||||||
|
} |
||||||
|
|
||||||
|
function handleEdit(record: Recordable) { |
||||||
|
openModal(true, { record, isUpdate: true }) |
||||||
|
} |
||||||
|
|
||||||
|
async function handleSync() { |
||||||
|
createConfirm({ |
||||||
|
title: t('action.sync'), |
||||||
|
iconType: 'warning', |
||||||
|
content: t('common.exportMessage'), |
||||||
|
async onOk() { |
||||||
|
await syncTag(getForm().getFieldsValue().accountId) |
||||||
|
createMessage.success(t('common.exportSuccessText')) |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
async function handleDelete(record: Recordable) { |
||||||
|
await deleteTag(record.id) |
||||||
|
createMessage.success(t('common.delSuccessText')) |
||||||
|
reload() |
||||||
|
} |
||||||
|
</script> |
||||||
|
@ -0,0 +1,63 @@ |
|||||||
|
import { getSimpleAccounts } from '@/api/mp/account' |
||||||
|
import { BasicColumn, FormSchema, useRender } from '@/components/Table' |
||||||
|
|
||||||
|
export const columns: BasicColumn[] = [ |
||||||
|
{ |
||||||
|
title: '编号', |
||||||
|
dataIndex: 'id', |
||||||
|
width: 100 |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '标签名称', |
||||||
|
dataIndex: 'name', |
||||||
|
width: 180 |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '粉丝数', |
||||||
|
dataIndex: 'count', |
||||||
|
width: 100 |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '创建时间', |
||||||
|
dataIndex: 'createTime', |
||||||
|
width: 180, |
||||||
|
customRender: ({ text }) => { |
||||||
|
return useRender.renderDate(text) |
||||||
|
} |
||||||
|
} |
||||||
|
] |
||||||
|
|
||||||
|
export const searchFormSchema: FormSchema[] = [ |
||||||
|
{ |
||||||
|
label: '公众号', |
||||||
|
field: 'accountId', |
||||||
|
component: 'ApiSelect', |
||||||
|
componentProps: { |
||||||
|
api: () => getSimpleAccounts(), |
||||||
|
labelField: 'name', |
||||||
|
valueField: 'id' |
||||||
|
}, |
||||||
|
colProps: { span: 8 } |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: '标签名称', |
||||||
|
field: 'name', |
||||||
|
component: 'Input', |
||||||
|
colProps: { span: 8 } |
||||||
|
} |
||||||
|
] |
||||||
|
|
||||||
|
export const formSchema: FormSchema[] = [ |
||||||
|
{ |
||||||
|
label: '编号', |
||||||
|
field: 'id', |
||||||
|
show: false, |
||||||
|
component: 'Input' |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: '标签名称', |
||||||
|
field: 'name', |
||||||
|
required: true, |
||||||
|
component: 'Input' |
||||||
|
} |
||||||
|
] |
Reference in new issue