-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(analysis): complete analysis panel
- Loading branch information
Showing
17 changed files
with
601 additions
and
24 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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)' | ||
} | ||
} | ||
} | ||
] | ||
} |
Oops, something went wrong.