From bd8e90e6b69ea11fbc54b9a9301b79c72285d49e Mon Sep 17 00:00:00 2001 From: xiaoxian521 <1923740402@qq.com> Date: Thu, 4 Jan 2024 14:02:54 +0800 Subject: [PATCH 1/2] =?UTF-8?q?perf:=20=E6=89=80=E6=9C=89`search`=E6=90=9C?= =?UTF-8?q?=E7=B4=A2=E5=9B=BE=E6=A0=87=E7=BB=9F=E4=B8=80=E6=9B=BF=E6=8D=A2?= =?UTF-8?q?=E4=B8=BA=20`@iconify-icons/ri/search-line`=20=E5=AE=83?= =?UTF-8?q?=E6=AF=94=E8=BE=83=E5=B8=B8=E7=94=A8=E5=B0=86=E5=85=B6=E6=94=BE?= =?UTF-8?q?=E5=85=A5=E5=85=A8=E5=B1=80=E7=A6=BB=E7=BA=BF=E5=9B=BE=E6=A0=87?= =?UTF-8?q?=E4=B8=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ReIcon/src/offlineIcon.ts | 2 ++ src/layout/components/search/index.vue | 3 +-- src/views/list/card/index.vue | 3 +-- src/views/system/dept/index.vue | 3 +-- src/views/system/role/index.vue | 3 +-- src/views/system/user/index.vue | 3 +-- src/views/system/user/tree.vue | 3 +-- 7 files changed, 8 insertions(+), 12 deletions(-) diff --git a/src/components/ReIcon/src/offlineIcon.ts b/src/components/ReIcon/src/offlineIcon.ts index ef3183377..c74220df5 100644 --- a/src/components/ReIcon/src/offlineIcon.ts +++ b/src/components/ReIcon/src/offlineIcon.ts @@ -22,6 +22,7 @@ import FlUser from "@iconify-icons/ri/admin-line"; import Role from "@iconify-icons/ri/admin-fill"; import Setting from "@iconify-icons/ri/settings-3-line"; import Dept from "@iconify-icons/ri/git-branch-line"; +import Search from "@iconify-icons/ri/search-line"; import Lollipop from "@iconify-icons/ep/lollipop"; import Monitor from "@iconify-icons/ep/monitor"; addIcon("ubuntuFill", UbuntuFill); @@ -41,5 +42,6 @@ addIcon("flUser", FlUser); addIcon("role", Role); addIcon("setting", Setting); addIcon("dept", Dept); +addIcon("search", Search); addIcon("lollipop", Lollipop); addIcon("monitor", Monitor); diff --git a/src/layout/components/search/index.vue b/src/layout/components/search/index.vue index bfd9c6303..b3c784f59 100644 --- a/src/layout/components/search/index.vue +++ b/src/layout/components/search/index.vue @@ -1,7 +1,6 @@ - - diff --git a/src/views/welcome/components/Github.vue b/src/views/welcome/components/Github.vue deleted file mode 100644 index 37b67d2b6..000000000 --- a/src/views/welcome/components/Github.vue +++ /dev/null @@ -1,30 +0,0 @@ - - - diff --git a/src/views/welcome/components/Line.vue b/src/views/welcome/components/Line.vue deleted file mode 100644 index 67f2ea495..000000000 --- a/src/views/welcome/components/Line.vue +++ /dev/null @@ -1,187 +0,0 @@ - - - diff --git a/src/views/welcome/components/Pie.vue b/src/views/welcome/components/Pie.vue deleted file mode 100644 index 4b1ac85f3..000000000 --- a/src/views/welcome/components/Pie.vue +++ /dev/null @@ -1,81 +0,0 @@ - - - diff --git a/src/views/welcome/components/chart/bar.vue b/src/views/welcome/components/chart/bar.vue new file mode 100644 index 000000000..d0351e297 --- /dev/null +++ b/src/views/welcome/components/chart/bar.vue @@ -0,0 +1,112 @@ + + + diff --git a/src/views/welcome/components/chart/index.ts b/src/views/welcome/components/chart/index.ts new file mode 100644 index 000000000..42cd5e686 --- /dev/null +++ b/src/views/welcome/components/chart/index.ts @@ -0,0 +1,3 @@ +export { default as barChart } from "./bar.vue"; +export { default as lineChart } from "./line.vue"; +export { default as roundChart } from "./round.vue"; diff --git a/src/views/welcome/components/chart/line.vue b/src/views/welcome/components/chart/line.vue new file mode 100644 index 000000000..533842c80 --- /dev/null +++ b/src/views/welcome/components/chart/line.vue @@ -0,0 +1,61 @@ + + + diff --git a/src/views/welcome/components/chart/round.vue b/src/views/welcome/components/chart/round.vue new file mode 100644 index 000000000..ed069e5c7 --- /dev/null +++ b/src/views/welcome/components/chart/round.vue @@ -0,0 +1,72 @@ + + + diff --git a/src/views/welcome/components/columns.tsx b/src/views/welcome/components/columns.tsx deleted file mode 100644 index 3d1586ac0..000000000 --- a/src/views/welcome/components/columns.tsx +++ /dev/null @@ -1,113 +0,0 @@ -import TypeIt from "@/components/ReTypeit"; -import OfficeBuilding from "@iconify-icons/ep/office-building"; -import Tickets from "@iconify-icons/ep/tickets"; -import Location from "@iconify-icons/ep/location"; -import Iphone from "@iconify-icons/ep/iphone"; -import Notebook from "@iconify-icons/ep/notebook"; -import User from "@iconify-icons/ri/user-3-fill"; - -export function useColumns() { - const lists = [ - { type: "", label: "善良" }, - { type: "success", label: "好学" }, - { type: "info", label: "幽默" }, - { type: "danger", label: "旅游" }, - { type: "warning", label: "追剧" } - ]; - - const columnsA = [ - { - labelRenderer: () => ( -
- - - - 用户名 -
- ), - value: "乐于分享的程序员小铭" - }, - { - labelRenderer: () => ( -
- - - - 手机号 -
- ), - value: "123456789" - }, - { - labelRenderer: () => ( -
- - - - 居住地 -
- ), - value: "中国" - } - ]; - - const columnsB = [ - { - labelRenderer: () => ( -
- - - - 标签 -
- ), - cellRenderer: () => { - return lists.map(v => { - return ( - - {v.label} - - ); - }); - } - }, - { - labelRenderer: () => ( -
- - - - 联系地址 -
- ), - value: "中华人民共和国" - } - ]; - - const columnsC = [ - { - labelRenderer: () => ( -
- - - - 个性签名 -
- ), - cellRenderer: () => ( - - ) - } - ]; - - return { - columnsA, - columnsB, - columnsC - }; -} diff --git a/src/views/welcome/components/table/columns.tsx b/src/views/welcome/components/table/columns.tsx new file mode 100644 index 000000000..515ba577e --- /dev/null +++ b/src/views/welcome/components/table/columns.tsx @@ -0,0 +1,104 @@ +import { tableData } from "../../data"; +import { delay } from "@pureadmin/utils"; +import { ref, onMounted, reactive } from "vue"; +import type { PaginationProps } from "@pureadmin/table"; +import ThumbUp from "@iconify-icons/ri/thumb-up-line"; +import Hearts from "@iconify-icons/ri/hearts-line"; +import Empty from "./empty.svg?component"; + +export function useColumns() { + const dataList = ref([]); + const loading = ref(true); + const columns: TableColumnList = [ + { + sortable: true, + label: "序号", + prop: "id" + }, + { + sortable: true, + label: "需求人数", + prop: "requiredNumber", + filterMultiple: false, + // filterClassName: "pure-table-filter", // TODO：https://github.com/element-plus/element-plus/pull/15389 + filters: [ + { text: "≥16000", value: "more" }, + { text: "<16000", value: "less" } + ], + filterMethod: (value, { requiredNumber }) => { + return value === "more" + ? requiredNumber >= 16000 + : requiredNumber < 16000; + } + }, + { + sortable: true, + label: "提问数量", + prop: "questionNumber" + }, + { + sortable: true, + label: "解决数量", + prop: "resolveNumber" + }, + { + sortable: true, + label: "用户满意度", + minWidth: 100, + prop: "satisfaction", + cellRenderer: ({ row }) => ( +
+ + {row.satisfaction}% + 98 ? Hearts : ThumbUp} + color="#e85f33" + /> + +
+ ) + }, + { + sortable: true, + label: "统计日期", + prop: "date" + }, + { + label: "操作", + fixed: "right", + slot: "operation" + } + ]; + + /** 分页配置 */ + const pagination = reactive({ + pageSize: 10, + currentPage: 1, + layout: "prev, pager, next", + total: 0, + align: "center" + }); + + function onCurrentChange(page: number) { + console.log("onCurrentChange", page); + loading.value = true; + delay(300).then(() => { + loading.value = false; + }); + } + + onMounted(() => { + dataList.value = tableData; + pagination.total = dataList.value.length; + loading.value = false; + }); + + return { + Empty, + loading, + columns, + dataList, + pagination, + onCurrentChange + }; +} diff --git a/src/views/welcome/components/table/empty.svg b/src/views/welcome/components/table/empty.svg new file mode 100644 index 000000000..5c8b211ce --- /dev/null +++ b/src/views/welcome/components/table/empty.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/views/welcome/components/table/index.vue b/src/views/welcome/components/table/index.vue new file mode 100644 index 000000000..76f7f251d --- /dev/null +++ b/src/views/welcome/components/table/index.vue @@ -0,0 +1,71 @@ + + + + + + + diff --git a/src/views/welcome/data.ts b/src/views/welcome/data.ts new file mode 100644 index 000000000..3bb502116 --- /dev/null +++ b/src/views/welcome/data.ts @@ -0,0 +1,134 @@ +import { dayjs, cloneDeep, getRandomIntBetween } from "./utils"; +import GroupLine from "@iconify-icons/ri/group-line"; +import Question from "@iconify-icons/ri/question-answer-line"; +import CheckLine from "@iconify-icons/ri/chat-check-line"; +import Smile from "@iconify-icons/ri/star-smile-line"; + +const days = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"]; + +/** 需求人数、提问数量、解决数量、用户满意度 */ +const chartData = [ + { + icon: GroupLine, + bgColor: "#effaff", + color: "#41b6ff", + duration: 2200, + name: "需求人数", + value: 36000, + percent: "+88%", + data: [2101, 5288, 4239, 4962, 6752, 5208, 7450] // 平滑折线图数据 + }, + { + icon: Question, + bgColor: "#fff5f4", + color: "#e85f33", + duration: 1600, + name: "提问数量", + value: 16580, + percent: "+70%", + data: [2216, 1148, 1255, 788, 4821, 1973, 4379] + }, + { + icon: CheckLine, + bgColor: "#eff8f4", + color: "#26ce83", + duration: 1500, + name: "解决数量", + value: 16499, + percent: "+99%", + data: [861, 1002, 3195, 1715, 3666, 2415, 3645] + }, + { + icon: Smile, + bgColor: "#f6f4fe", + color: "#7846e5", + duration: 100, + name: "用户满意度", + value: 100, + percent: "+100%", + data: [100] + } +]; + +/** 分析概览 */ +const barChartData = [ + { + requireData: [2101, 5288, 4239, 4962, 6752, 5208, 7450], + questionData: [2216, 1148, 1255, 1788, 4821, 1973, 4379] + }, + { + requireData: [2101, 3280, 4400, 4962, 5752, 6889, 7600], + questionData: [2116, 3148, 3255, 3788, 4821, 4970, 5390] + } +]; + +/** 解决概率 */ +const progressData = [ + { + week: "周一", + percentage: 85, + duration: 110, + color: "#41b6ff" + }, + { + week: "周二", + percentage: 86, + duration: 105, + color: "#41b6ff" + }, + { + week: "周三", + percentage: 88, + duration: 100, + color: "#41b6ff" + }, + { + week: "周四", + percentage: 89, + duration: 95, + color: "#41b6ff" + }, + { + week: "周五", + percentage: 94, + duration: 90, + color: "#26ce83" + }, + { + week: "周六", + percentage: 96, + duration: 85, + color: "#26ce83" + }, + { + week: "周日", + percentage: 100, + duration: 80, + color: "#26ce83" + } +].reverse(); + +/** 数据统计 */ +const tableData = Array.from({ length: 30 }).map((_, index) => { + return { + id: index + 1, + requiredNumber: getRandomIntBetween(13500, 19999), + questionNumber: getRandomIntBetween(12600, 16999), + resolveNumber: getRandomIntBetween(13500, 17999), + satisfaction: getRandomIntBetween(95, 100), + date: dayjs().subtract(index, "day").format("YYYY-MM-DD") + }; +}); + +/** 最新动态 */ +const latestNewsData = cloneDeep(tableData) + .slice(0, 14) + .map((item, index) => { + return Object.assign(item, { + date: `${dayjs().subtract(index, "day").format("YYYY-MM-DD")} ${ + days[dayjs().subtract(index, "day").day()] + }` + }); + }); + +export { chartData, barChartData, progressData, tableData, latestNewsData }; diff --git a/src/views/welcome/index.vue b/src/views/welcome/index.vue index ccc32460a..d1df69c00 100644 --- a/src/views/welcome/index.vue +++ b/src/views/welcome/index.vue @@ -1,60 +1,50 @@