xingyuv
2 years ago
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> |
||||
<div>开发中</div> |
||||
<!-- <template> |
||||
<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> |
||||
<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> |
||||
<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> |
||||
<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