From 2531a76b127ceabe66d00ae7b8096312961e4535 Mon Sep 17 00:00:00 2001
From: YDKD <1606354057@qq.com>
Date: Tue, 12 Apr 2022 09:39:10 +0800
Subject: [PATCH] feat(analysis): complete analysis panel
---
index.html | 2 +-
src/api/getApi.ts | 21 ++++++
src/components/Echarts/src/Echarts.vue | 30 ++++----
src/plugins/echarts/index.ts | 5 +-
src/store/modules/analysis.ts | 49 +++++++++++++
src/views/analysis/components/line.vue | 30 ++++++++
src/views/analysis/components/pip.vue | 30 ++++++++
src/views/analysis/components/topCount.vue | 85 ++++++++++++++++++++++
src/views/analysis/echart-options.ts | 72 ++++++++++++++++++
src/views/analysis/hooks/index.ts | 38 ++++++++++
src/views/analysis/hooks/useCount.ts | 67 +++++++++++++++++
src/views/analysis/hooks/useLine.ts | 59 +++++++++++++++
src/views/analysis/hooks/usePipe.ts | 45 ++++++++++++
src/views/analysis/index.vue | 74 ++++++++++++++++++-
types/components.d.ts | 5 ++
types/global.d.ts | 6 +-
vite/server.ts | 7 +-
17 files changed, 601 insertions(+), 24 deletions(-)
create mode 100644 src/store/modules/analysis.ts
create mode 100644 src/views/analysis/components/line.vue
create mode 100644 src/views/analysis/components/pip.vue
create mode 100644 src/views/analysis/components/topCount.vue
create mode 100644 src/views/analysis/echart-options.ts
create mode 100644 src/views/analysis/hooks/index.ts
create mode 100644 src/views/analysis/hooks/useCount.ts
create mode 100644 src/views/analysis/hooks/useLine.ts
create mode 100644 src/views/analysis/hooks/usePipe.ts
diff --git a/index.html b/index.html
index 9ba8b3b..386262b 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
-
+
diff --git a/src/api/getApi.ts b/src/api/getApi.ts
index ffecda7..04849ec 100644
--- a/src/api/getApi.ts
+++ b/src/api/getApi.ts
@@ -74,3 +74,24 @@ export function getWorkerAttendance(params: any) {
params
})
}
+
+export function getAddPerson() {
+ return defaultRequest.request({
+ url: '/analysis/person/add',
+ method: 'GET'
+ })
+}
+
+export function getLeavingPerson() {
+ return defaultRequest.request({
+ url: '/analysis/person/leaving',
+ method: 'GET'
+ })
+}
+
+export function getCountTotal() {
+ return defaultRequest.request({
+ url: '/analysis/count/total',
+ method: 'GET'
+ })
+}
diff --git a/src/components/Echarts/src/Echarts.vue b/src/components/Echarts/src/Echarts.vue
index a5d4ab4..043c228 100644
--- a/src/components/Echarts/src/Echarts.vue
+++ b/src/components/Echarts/src/Echarts.vue
@@ -3,7 +3,7 @@
* @Autor: YDKD
* @Date: 2022-04-06 10:32:17
* @LastEditors: YDKD
- * @LastEditTime: 2022-04-07 16:12:17
+ * @LastEditTime: 2022-04-08 16:07:29
-->
@@ -50,10 +50,8 @@ const options = computed(() => {
})
})
-// eslint-disable-next-line no-undef
const elRef = ref()
-// eslint-disable-next-line no-undef
let echartRef: Nullable = null
const contentEl = ref()
@@ -94,7 +92,7 @@ const resizeHandler = debounce(() => {
}, 100)
const contentResizeHandler = async (e: TransitionEvent) => {
- if (e.propertyName === 'width') {
+ if (e.propertyName === 'transform') {
resizeHandler()
}
}
@@ -104,23 +102,21 @@ onMounted(() => {
window.addEventListener('resize', resizeHandler)
- // contentEl.value = document.getElementsByClassName(
- // `${namespace}-layout-content`
- // )[0]
- // unref(contentEl) &&
- // (unref(contentEl) as HTMLElement).addEventListener(
- // 'transitionend',
- // contentResizeHandler
- // )
+ contentEl.value = document.getElementsByClassName(`${namespace}-container`)[0]
+ unref(contentEl) &&
+ (unref(contentEl) as HTMLElement).addEventListener(
+ 'transitionend',
+ contentResizeHandler
+ )
})
onBeforeUnmount(() => {
window.removeEventListener('resize', resizeHandler)
- // unref(contentEl) &&
- // (unref(contentEl) as HTMLElement).removeEventListener(
- // 'transitionend',
- // contentResizeHandler
- // )
+ unref(contentEl) &&
+ (unref(contentEl) as HTMLElement).removeEventListener(
+ 'transitionend',
+ contentResizeHandler
+ )
})
onActivated(() => {
diff --git a/src/plugins/echarts/index.ts b/src/plugins/echarts/index.ts
index 1049a5d..7a1b5c3 100644
--- a/src/plugins/echarts/index.ts
+++ b/src/plugins/echarts/index.ts
@@ -1,6 +1,6 @@
import * as echarts from 'echarts/core'
-import { PieChart } from 'echarts/charts'
+import { PieChart, LineChart } from 'echarts/charts'
import {
TitleComponent,
@@ -25,7 +25,8 @@ echarts.use([
ParallelComponent,
PieChart,
CanvasRenderer,
- ToolboxComponent
+ ToolboxComponent,
+ LineChart
])
export default echarts
diff --git a/src/store/modules/analysis.ts b/src/store/modules/analysis.ts
new file mode 100644
index 0000000..0f23472
--- /dev/null
+++ b/src/store/modules/analysis.ts
@@ -0,0 +1,49 @@
+/*
+ * @Version: 1.0
+ * @Autor: YDKD
+ * @Date: 2022-04-11 16:54:55
+ * @LastEditors: YDKD
+ * @LastEditTime: 2022-04-12 08:59:27
+ */
+import { defineStore } from 'pinia'
+export const useAnalysisStore = defineStore({
+ id: 'analysis',
+ state: () => ({
+ totalLeaving: 0,
+ currentDayColockPeople: 0,
+ totalSystemDevelopers: 0,
+ totalWorkers: 0
+ }),
+ getters: {
+ getTotalLeaving(): number {
+ return this.totalLeaving
+ },
+ getCurrentDayColockPeople(): number {
+ return this.currentDayColockPeople
+ },
+ getTotalSystemDevelopers(): number {
+ return this.totalSystemDevelopers
+ },
+ getTotalWorkers(): number {
+ return this.totalWorkers
+ }
+ },
+ actions: {
+ setTotalLeaving(state: number) {
+ this.totalLeaving = state
+ },
+ setCurrentDayColockPeople(state: number) {
+ this.currentDayColockPeople = state
+ },
+ setTotalSystemDevelopers(state: number) {
+ this.totalSystemDevelopers = state
+ },
+ setTotalWorkers(state: number) {
+ this.totalWorkers = state
+ }
+ }
+})
+
+export const useAnalysisStoreWithOut = () => {
+ return useAnalysisStore
+}
diff --git a/src/views/analysis/components/line.vue b/src/views/analysis/components/line.vue
new file mode 100644
index 0000000..d44966f
--- /dev/null
+++ b/src/views/analysis/components/line.vue
@@ -0,0 +1,30 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/analysis/components/pip.vue b/src/views/analysis/components/pip.vue
new file mode 100644
index 0000000..1079879
--- /dev/null
+++ b/src/views/analysis/components/pip.vue
@@ -0,0 +1,30 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/analysis/components/topCount.vue b/src/views/analysis/components/topCount.vue
new file mode 100644
index 0000000..df76b29
--- /dev/null
+++ b/src/views/analysis/components/topCount.vue
@@ -0,0 +1,85 @@
+
+
+
+
+
+
+
+
+
+
{{ item.label }}
+
+ {{ item.value }}
+
+
+
+
+
+
+
+
diff --git a/src/views/analysis/echart-options.ts b/src/views/analysis/echart-options.ts
new file mode 100644
index 0000000..0d3162d
--- /dev/null
+++ b/src/views/analysis/echart-options.ts
@@ -0,0 +1,72 @@
+/*
+ * @Version: 1.0
+ * @Autor: YDKD
+ * @Date: 2022-04-08 13:53:40
+ * @LastEditors: YDKD
+ * @LastEditTime: 2022-04-11 09:43:38
+ */
+import type { EChartsOption } from 'echarts'
+import moment from 'moment'
+
+export const lineOptions: EChartsOption = {
+ title: {
+ text: 'join workers',
+ left: 'center'
+ },
+ xAxis: {
+ type: 'category',
+ data: []
+ },
+ yAxis: {
+ type: 'value'
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'cross'
+ },
+ padding: [5, 10]
+ },
+ series: [
+ {
+ data: [],
+ type: 'line',
+ smooth: true
+ }
+ ]
+}
+
+export const pipeOptions: EChartsOption = {
+ title: {
+ text: 'Attendance Pip',
+ subtext: moment().format('L'),
+ left: 'center'
+ },
+ tooltip: {
+ trigger: 'item'
+ },
+ legend: {
+ orient: 'vertical',
+ left: 'left'
+ },
+ series: [
+ {
+ type: 'pie',
+ radius: '50%',
+ data: [
+ { value: 3, name: 'Search Engine' },
+ { value: 2, name: 'Direct' },
+ { value: 0, name: 'Email' },
+ { value: 0, name: 'Union Ads' },
+ { value: 0, name: 'Video Ads' }
+ ],
+ emphasis: {
+ itemStyle: {
+ shadowBlur: 10,
+ shadowOffsetX: 0,
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
+ }
+ }
+ }
+ ]
+}
diff --git a/src/views/analysis/hooks/index.ts b/src/views/analysis/hooks/index.ts
new file mode 100644
index 0000000..2799c3c
--- /dev/null
+++ b/src/views/analysis/hooks/index.ts
@@ -0,0 +1,38 @@
+/*
+ * @Version: 1.0
+ * @Autor: YDKD
+ * @Date: 2022-04-08 16:17:51
+ * @LastEditors: YDKD
+ * @LastEditTime: 2022-04-12 09:37:20
+ */
+import {
+ lineLoading,
+ lineOptionsData,
+ getInitLineData,
+ total,
+ count_month
+} from './useLine'
+
+import { pipeLoading, pipeOptionsData, getInitPipeData } from './usePipe'
+
+import {
+ getCountTotalData,
+ setCountValue,
+ countData,
+ countLoading
+} from './useCount'
+
+export {
+ lineLoading,
+ lineOptionsData,
+ getInitLineData,
+ total,
+ count_month,
+ pipeLoading,
+ pipeOptionsData,
+ getInitPipeData,
+ getCountTotalData,
+ setCountValue,
+ countData,
+ countLoading
+}
diff --git a/src/views/analysis/hooks/useCount.ts b/src/views/analysis/hooks/useCount.ts
new file mode 100644
index 0000000..de7b364
--- /dev/null
+++ b/src/views/analysis/hooks/useCount.ts
@@ -0,0 +1,67 @@
+/*
+ * @Version: 1.0
+ * @Autor: YDKD
+ * @Date: 2022-04-11 16:50:55
+ * @LastEditors: YDKD
+ * @LastEditTime: 2022-04-12 09:35:40
+ */
+import { getCountTotal } from '@/api/getApi'
+import { useAnalysisStore } from '@/store/modules/analysis'
+import { ref } from 'vue'
+
+interface Item {
+ label: string
+ value: number
+ class: string
+ icon: string
+}
+
+const countLoading = ref(true)
+
+const analysisStore = useAnalysisStore()
+
+const getCountTotalData = async () => {
+ const { data } = await getCountTotal()
+ const { result } = await data
+ if (result) {
+ analysisStore.setTotalSystemDevelopers(result['total_system_developers'])
+ analysisStore.setTotalWorkers(result['total_workers'])
+ }
+}
+
+const countData = ref- ([])
+
+const setCountValue = () => {
+ return new Promise((resolve, reject) => {
+ resolve(
+ (countData.value = [
+ {
+ label: '职工总数',
+ value: analysisStore.getTotalWorkers,
+ class: 'total_workers',
+ icon: 'icon-suoyourenyuan'
+ },
+ {
+ label: '系统人员总数总数',
+ value: analysisStore.getTotalSystemDevelopers,
+ class: 'total_developers',
+ icon: 'icon-guanliyuan'
+ },
+ {
+ label: '当日请假人数',
+ value: analysisStore.getTotalLeaving,
+ class: 'total_leaving',
+ icon: 'icon-qingjia'
+ },
+ {
+ label: '当日出勤人数',
+ value: analysisStore.getCurrentDayColockPeople,
+ class: 'total_colock',
+ icon: 'icon-chuqin'
+ }
+ ])
+ )
+ })
+}
+
+export { getCountTotalData, setCountValue, countData, countLoading }
diff --git a/src/views/analysis/hooks/useLine.ts b/src/views/analysis/hooks/useLine.ts
new file mode 100644
index 0000000..657ca6b
--- /dev/null
+++ b/src/views/analysis/hooks/useLine.ts
@@ -0,0 +1,59 @@
+/*
+ * @Version: 1.0
+ * @Autor: YDKD
+ * @Date: 2022-04-08 16:19:17
+ * @LastEditors: YDKD
+ * @LastEditTime: 2022-04-11 09:47:38
+ */
+import { getAddPerson } from '@/api/getApi'
+import { lineOptions } from '../echart-options'
+import { reactive, ref } from 'vue'
+import { EChartsOption } from 'echarts'
+import { set } from 'lodash'
+
+interface Item {
+ days: string
+ count: number
+}
+
+const loading = ref(true)
+
+const total = ref(0)
+const count_month = ref('01')
+
+const lineOptionsData = reactive(lineOptions) as EChartsOption
+
+const getInitLineData = async () => {
+ const { data } = await getAddPerson()
+ const { code, result } = await data
+ if (code == 200) {
+ const days: string[] = []
+ const counts: number[] = []
+ result.map((item: Item) => {
+ days.push(item.days)
+ counts.push(item.count)
+ })
+
+ // set data
+ set(lineOptionsData, 'xAxis.data', days)
+ set(lineOptionsData, 'series', [
+ {
+ data: counts,
+ type: 'line',
+ smooth: true
+ }
+ ])
+ loading.value = false
+
+ total.value = counts.reduce((pre, curr) => pre + curr, 0)
+ count_month.value = days[0].split('/')[1]
+ }
+}
+
+export {
+ loading as lineLoading,
+ lineOptionsData,
+ getInitLineData,
+ total,
+ count_month
+}
diff --git a/src/views/analysis/hooks/usePipe.ts b/src/views/analysis/hooks/usePipe.ts
new file mode 100644
index 0000000..4fdcf87
--- /dev/null
+++ b/src/views/analysis/hooks/usePipe.ts
@@ -0,0 +1,45 @@
+/*
+ * @Version: 1.0
+ * @Autor: YDKD
+ * @Date: 2022-04-11 09:27:50
+ * @LastEditors: YDKD
+ * @LastEditTime: 2022-04-11 17:03:38
+ */
+import { getLeavingPerson } from '@/api/getApi'
+import { useAnalysisStore } from '@/store/modules/analysis'
+import { EChartsOption } from 'echarts'
+import { set } from 'lodash'
+import { ref, reactive } from 'vue'
+import { pipeOptions } from '../echart-options'
+
+const loading = ref(false)
+const nameMapping = {
+ total_leaving: '今日请假人数',
+ total_sick_leaving: '病假',
+ total_year_leaving: '年假',
+ total_absence_leaving: '事假',
+ current_day_colock_people: '今日出勤'
+}
+
+const pipeOptionsData = reactive(pipeOptions) as EChartsOption
+
+const analysisStore = useAnalysisStore()
+
+const getInitPipeData = async () => {
+ const { data } = await getLeavingPerson()
+ const { result } = await data
+ const pipData = []
+ for (const key in result) {
+ pipData.push({
+ value: result[key],
+ name: (nameMapping)[key]
+ })
+ }
+ set(pipeOptionsData, 'series[0].data', pipData)
+
+ // set count value
+ analysisStore.setCurrentDayColockPeople(result['current_day_colock_people'])
+ analysisStore.setTotalLeaving(result['total_leaving'])
+}
+
+export { loading as pipeLoading, pipeOptionsData, getInitPipeData }
diff --git a/src/views/analysis/index.vue b/src/views/analysis/index.vue
index e894778..40ce9bd 100644
--- a/src/views/analysis/index.vue
+++ b/src/views/analysis/index.vue
@@ -3,23 +3,93 @@
* @Autor: YDKD
* @Date: 2022-03-24 15:42:06
* @LastEditors: YDKD
- * @LastEditTime: 2022-04-06 10:53:25
+ * @LastEditTime: 2022-04-12 09:37:30
-->
-
我是analysis
+
+
+
+
+
+
+
+
+
+
+
Dashboard
+ add person line
+
+
+
{{ total }}人
+ join workers
+
+
+
{{ count_month }}月
+ count workers month
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/types/components.d.ts b/types/components.d.ts
index 5a0dfe9..2b007c8 100644
--- a/types/components.d.ts
+++ b/types/components.d.ts
@@ -9,7 +9,9 @@ declare module 'vue' {
ElAside: typeof import('element-plus/es')['ElAside']
ElAvatar: typeof import('element-plus/es')['ElAvatar']
ElButton: typeof import('element-plus/es')['ElButton']
+ ElCard: typeof import('element-plus/es')['ElCard']
ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
+ ElCol: typeof import('element-plus/es')['ElCol']
ElContainer: typeof import('element-plus/es')['ElContainer']
ElDropdown: typeof import('element-plus/es')['ElDropdown']
ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
@@ -21,8 +23,11 @@ declare module 'vue' {
ElInput: typeof import('element-plus/es')['ElInput']
ElMain: typeof import('element-plus/es')['ElMain']
ElPagination: typeof import('element-plus/es')['ElPagination']
+ ElRow: typeof import('element-plus/es')['ElRow']
+ ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
ElTable: typeof import('element-plus/es')['ElTable']
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+ ElTooltip: typeof import('element-plus/es')['ElTooltip']
FossBg: typeof import('./../src/components/foss-bg/index.vue')['default']
HeaderSrcHeader: typeof import('./../src/components/Header/src/Header.vue')['default']
IconSrcIcon: typeof import('./../src/components/Icon/src/Icon.vue')['default']
diff --git a/types/global.d.ts b/types/global.d.ts
index 3478e3b..597947d 100644
--- a/types/global.d.ts
+++ b/types/global.d.ts
@@ -3,10 +3,14 @@
* @Autor: YDKD
* @Date: 2022-03-20 08:53:25
* @LastEditors: YDKD
- * @LastEditTime: 2022-03-20 13:32:53
+ * @LastEditTime: 2022-04-11 10:12:23
*/
declare type Nullable = T | null
declare type ElRef = Nullable
declare type Recordable = Record
+
+declare interface MapStringKey {
+ [key: string]: any
+}
diff --git a/vite/server.ts b/vite/server.ts
index be1dfa6..f55c4b1 100644
--- a/vite/server.ts
+++ b/vite/server.ts
@@ -3,7 +3,7 @@
* @Autor: YDKD
* @Date: 2022-03-04 13:39:38
* @LastEditors: YDKD
- * @LastEditTime: 2022-03-30 16:44:51
+ * @LastEditTime: 2022-04-08 11:37:26
*/
import generateEnv from './utils/generateEnv'
generateEnv()
@@ -26,6 +26,11 @@ const server = {
target: process.env.VITE_REQUEST_URL,
changeOrigin: true,
rewrite: (p: string) => p.replace(/^\/sys/, '/sys')
+ },
+ '/analysis': {
+ target: process.env.VITE_REQUEST_URL,
+ changeOrigin: true,
+ rewrite: (p: string) => p.replace(/^\/analysis/, '/analysis')
}
}
}