126 lines
3.2 KiB
Vue
126 lines
3.2 KiB
Vue
<script setup lang="tsx">
|
|
import SuperTable from '~/components/SuperTable.vue';
|
|
import * as echarts from 'echarts';
|
|
import type { TableProps, TableRowData } from 'tdesign-vue-next';
|
|
import { useWindowSize } from '@vueuse/core';
|
|
|
|
const store = useArticleStore();
|
|
const { pagination, articleList } = storeToRefs(store);
|
|
|
|
const columns = ref<TableProps['columns']>([
|
|
{
|
|
colKey: 'index',
|
|
title: '序号',
|
|
cell: (_, { rowIndex }: { rowIndex: number }) => (
|
|
<div>
|
|
{(pagination.value!.current! - 1) * pagination.value!.pageSize! +
|
|
rowIndex +
|
|
1}
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
colKey: 'name',
|
|
title: '作者姓名',
|
|
},
|
|
{
|
|
colKey: 'amount',
|
|
title: '文章数量',
|
|
},
|
|
{
|
|
colKey: 'operator',
|
|
title: '操作',
|
|
cell: (_, { row }) => (
|
|
<div class="w-40 flex flex-row justify-evenly">
|
|
<t-button onClick={() => manageArticle(row)}>进入文章管理</t-button>
|
|
</div>
|
|
),
|
|
},
|
|
]);
|
|
|
|
function pageChange(x: { current: number; pageSize: number }) {
|
|
if (pagination.value) {
|
|
pagination.value.current = x.current;
|
|
pagination.value.pageSize = x.pageSize;
|
|
store.getArticleList();
|
|
}
|
|
}
|
|
|
|
function manageArticle(row: TableRowData) {
|
|
const router = useRouter();
|
|
router.push(`/base/articleManage/${row.id}`);
|
|
// router.push()
|
|
}
|
|
|
|
onMounted(async () => {
|
|
await store.getTotal();
|
|
await store.getArticleList();
|
|
const chartDom = document.getElementById('echarts')!;
|
|
const chart = echarts.init(chartDom);
|
|
|
|
const option = {
|
|
title: {
|
|
text: '柱状图示例',
|
|
left: 'center',
|
|
},
|
|
tooltip: {},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: articleList.value.map((item: ArticleUser) => item.name),
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
},
|
|
series: [
|
|
{
|
|
data: articleList.value.map((item: ArticleUser) => item.amount),
|
|
type: 'bar',
|
|
itemStyle: {
|
|
color: (params: { dataIndex: number }) => {
|
|
const colors = [
|
|
'#f1dbc3',
|
|
'#7493a8',
|
|
'#edc5ac',
|
|
'#cdaba2',
|
|
'#abb0b3',
|
|
'#cfc2b9',
|
|
'#a2979f',
|
|
];
|
|
return colors[params.dataIndex % colors.length];
|
|
},
|
|
},
|
|
},
|
|
],
|
|
};
|
|
chart.setOption(option);
|
|
watch(useWindowSize().width, (_val) => {
|
|
chart.resize();
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="p-6">
|
|
<div class="flex md:flex-row flex-col">
|
|
<div
|
|
class="flex-[1] m-2 p-6 bg-white rounded-xl dark:bg-zinc-800 border-2 dark:border-zinc-600"
|
|
>
|
|
<SuperTable
|
|
v-model:pagination="pagination"
|
|
:data="articleList"
|
|
:columns="columns"
|
|
:loading="false"
|
|
@page-change="pageChange"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="m-2 flex-[1] p-6 bg-white dark:bg-zinc-800 border-2 dark:border-zinc-600 rounded-xl"
|
|
>
|
|
<div id="echarts" class="w-full h-96"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="less"></style>
|