Skip to content

Commit

Permalink
feat(analysis): complete analysis panel
Browse files Browse the repository at this point in the history
  • Loading branch information
YDKD committed Apr 12, 2022
1 parent 4d56434 commit 2531a76
Show file tree
Hide file tree
Showing 17 changed files with 601 additions and 24 deletions.
2 changes: 1 addition & 1 deletion index.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<link rel="stylesheet" href="//at.alicdn.com/t/font_3289955_rrzu1plqg1l.css" />
<link rel="stylesheet" href="//at.alicdn.com/t/font_3289955_rx0974qunb.css" />
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500&display=swap" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
Expand Down
21 changes: 21 additions & 0 deletions src/api/getApi.ts
Original file line number Diff line number Diff line change
Expand Up @@ -74,3 +74,24 @@ export function getWorkerAttendance(params: any) {
params
})
}

export function getAddPerson() {
return defaultRequest.request<ReutrnDataType>({
url: '/analysis/person/add',
method: 'GET'
})
}

export function getLeavingPerson() {
return defaultRequest.request<ReutrnDataType>({
url: '/analysis/person/leaving',
method: 'GET'
})
}

export function getCountTotal() {
return defaultRequest.request<ReutrnDataType>({
url: '/analysis/count/total',
method: 'GET'
})
}
30 changes: 13 additions & 17 deletions src/components/Echarts/src/Echarts.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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
-->
<template>
<div ref="elRef" :class="[$attrs.class, prefixCls]" :style="styles"></div>
Expand Down Expand Up @@ -50,10 +50,8 @@ const options = computed(() => {
})
})

// eslint-disable-next-line no-undef
const elRef = ref<ElRef>()

// eslint-disable-next-line no-undef
let echartRef: Nullable<echarts.ECharts> = null

const contentEl = ref<Element>()
Expand Down Expand Up @@ -94,7 +92,7 @@ const resizeHandler = debounce(() => {
}, 100)

const contentResizeHandler = async (e: TransitionEvent) => {
if (e.propertyName === 'width') {
if (e.propertyName === 'transform') {
resizeHandler()
}
}
Expand All @@ -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(() => {
Expand Down
5 changes: 3 additions & 2 deletions src/plugins/echarts/index.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import * as echarts from 'echarts/core'

import { PieChart } from 'echarts/charts'
import { PieChart, LineChart } from 'echarts/charts'

import {
TitleComponent,
Expand All @@ -25,7 +25,8 @@ echarts.use([
ParallelComponent,
PieChart,
CanvasRenderer,
ToolboxComponent
ToolboxComponent,
LineChart
])

export default echarts
49 changes: 49 additions & 0 deletions src/store/modules/analysis.ts
Original file line number Diff line number Diff line change
@@ -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
}
30 changes: 30 additions & 0 deletions src/views/analysis/components/line.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<!--
* @Version: 1.0
* @Autor: YDKD
* @Date: 2022-04-08 13:44:52
* @LastEditors: YDKD
* @LastEditTime: 2022-04-11 16:53:48
-->
<template>
<div :class="prefixCls">
<el-skeleton :loading="lineLoading" animated>
<Echart :options="lineOptionsData" height="300px" />
</el-skeleton>
</div>
</template>

<script lang="ts" setup>
import { useDesign } from '@/hooks'
import { Echart } from '@/components/Echarts'
import { lineLoading, lineOptionsData } from '../hooks'

const prefixCls = useDesign('prefix', 'analysis-line')
</script>

<style lang="less" scoped>
@prefix-cls: ~'@{namespace}-analysis-line';

.@{prefix-cls} {
width: 100%;
}
</style>
30 changes: 30 additions & 0 deletions src/views/analysis/components/pip.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<!--
* @Version: 1.0
* @Autor: YDKD
* @Date: 2022-04-11 09:10:46
* @LastEditors: YDKD
* @LastEditTime: 2022-04-11 16:53:44
-->
<template>
<div :class="prefixCls">
<el-skeleton :loading="pipeLoading">
<Echart :options="pipeOptionsData" height="300px" />
</el-skeleton>
</div>
</template>

<script lang="ts" setup>
import { useDesign } from '@/hooks'
import { Echart } from '@/components/Echarts'

import { pipeLoading, pipeOptionsData } from '../hooks'

const prefixCls = useDesign('prefix', 'analysis-pipe')
</script>

<style lang="less" scoped>
@prefix-cls: ~'@{namespace}-analysis-pipe';

.@{prefix-cls} {
}
</style>
85 changes: 85 additions & 0 deletions src/views/analysis/components/topCount.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
<!--
* @Version: 1.0
* @Autor: YDKD
* @Date: 2022-04-11 10:30:52
* @LastEditors: YDKD
* @LastEditTime: 2022-04-12 09:37:59
-->
<template>
<div :class="[prefixCls, 'mb-2']">
<div
v-for="item in countData"
:key="item.label"
class="count-item"
:class="item.class"
>
<el-skeleton :loading="countLoading">
<div class="left">
<div class="icon">
<icon-src-icon type="iconfont" :icon="item.icon" />
</div>
<div class="label">{{ item.label }}</div>
</div>
<div :class="['right font-bold text-2xl']">{{ item.value }}</div>
</el-skeleton>
</div>
</div>
</template>

<script lang="ts" setup>
import { useDesign } from '@/hooks'
import { countData, countLoading } from '../hooks'

const prefixCls = useDesign('prefix', 'top-count')
</script>

<style lang="less" scoped>
@prefix-cls: ~'@{namespace}-top-count';

.@{prefix-cls} {
width: 100%;
color: #fff;
display: flex;
justify-content: space-between;
.count-item {
width: 23%;
height: 80px;
border-radius: 10px;
font-size: 14px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
.left {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
}
.total_workers {
background-image: linear-gradient(
to right bottom,
rgb(236, 71, 134),
rgb(185, 85, 164)
);
}
.total_developers {
background-image: linear-gradient(to right bottom, #5ebbc0, #51c178);
}
.total_leaving {
background-image: linear-gradient(
to right bottom,
rgb(252, 188, 37),
rgb(246, 128, 87)
);
}
.total_colock {
background-image: linear-gradient(
to right bottom,
rgb(86, 205, 243),
rgb(113, 157, 227)
);
}
}
</style>
72 changes: 72 additions & 0 deletions src/views/analysis/echart-options.ts
Original file line number Diff line number Diff line change
@@ -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)'
}
}
}
]
}
Loading

0 comments on commit 2531a76

Please sign in to comment.