forked from TALL/check-work
7 changed files with 776 additions and 87 deletions
@ -0,0 +1,137 @@ |
|||
<template> |
|||
<div id="linBarbox" :style="{ width: '100%', height: '200px' }" class="chart-box"> |
|||
<div :id="id" style="width: 100%; height: 100%"></div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
name: 'LineBar', |
|||
props: { |
|||
id: { |
|||
default: '', |
|||
type: String, |
|||
}, |
|||
color: { |
|||
default: () => [], |
|||
type: Array, |
|||
}, |
|||
}, |
|||
data() { |
|||
return {}; |
|||
}, |
|||
computed: { |
|||
// 定义option |
|||
option() { |
|||
return { |
|||
grid: { |
|||
left: '0', |
|||
right: '5%', |
|||
bottom: '0', |
|||
top: '20px', |
|||
containLabel: true, |
|||
}, |
|||
xAxis: [ |
|||
{ |
|||
type: 'value', |
|||
splitLine: { show: false }, |
|||
// boundaryGap: false, |
|||
// show: true, |
|||
// axisLine: { show: false }, |
|||
// axisTick: { show: false }, |
|||
}, |
|||
], |
|||
yAxis: [ |
|||
{ |
|||
// show: true, |
|||
type: 'category', |
|||
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], |
|||
axisLine: { show: false }, |
|||
axisTick: { show: false }, |
|||
// splitLine: { show: false }, |
|||
// data: ['0', '10', '20'], |
|||
}, |
|||
// { |
|||
// show: false, |
|||
// type: 'value', |
|||
// }, |
|||
], |
|||
series: [ |
|||
{ |
|||
type: 'bar', |
|||
// yAxisIndex: 1, |
|||
color: `${this.color[0]}`, |
|||
barWidth: '10', |
|||
data: [ |
|||
{ |
|||
value: 200, |
|||
itemStyle: { color: `${this.color[0]}` }, |
|||
}, |
|||
{ |
|||
value: 232, |
|||
itemStyle: { color: `${this.color[1]}` }, |
|||
}, |
|||
{ |
|||
value: 101, |
|||
itemStyle: { color: `${this.color[2]}` }, |
|||
}, |
|||
{ |
|||
value: 264, |
|||
itemStyle: { color: `${this.color[3]}` }, |
|||
}, |
|||
{ |
|||
value: 90, |
|||
itemStyle: { color: `${this.color[0]}` }, |
|||
}, |
|||
{ |
|||
value: 340, |
|||
itemStyle: { color: `${this.color[1]}` }, |
|||
}, |
|||
{ |
|||
value: 250, |
|||
itemStyle: { color: `${this.color[2]}` }, |
|||
}, |
|||
], |
|||
}, |
|||
// { |
|||
// type: 'line', |
|||
// stack: '总量', |
|||
// smooth: true, |
|||
// lineStyle: { |
|||
// width: 2, |
|||
// color: `rgba(105,207,76,1)`, |
|||
// boxShadow: '10px 10px 10px #000', |
|||
// }, |
|||
// showSymbol: false, |
|||
// areaStyle: { |
|||
// opacity: 0.8, |
|||
// color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|||
// { |
|||
// offset: 0, |
|||
// color: `rgba(105,207,76,0.4)`, |
|||
// }, |
|||
// { |
|||
// offset: 1, |
|||
// color: `rgba(105,207,76,0)`, |
|||
// }, |
|||
// ]), |
|||
// }, |
|||
// emphasis: { focus: 'series' }, |
|||
// data: [140, 232, 101, 264, 90, 340, 250], |
|||
// }, |
|||
], |
|||
}; |
|||
}, |
|||
}, |
|||
mounted() { |
|||
this.drawLine(); |
|||
}, |
|||
methods: { |
|||
drawLine() { |
|||
// 基于准备好的dom，初始化echarts实例 |
|||
let myChart = this.$echarts.init(document.getElementById(this.id)); |
|||
// 绘制图表 |
|||
myChart.setOption(this.option); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
@ -0,0 +1,105 @@ |
|||
<template> |
|||
<div id="linBarbox" :style="{ width: '100%', height: '200px' }" class="chart-box"> |
|||
<div :id="id" style="width: 100%; height: 100%"></div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
name: 'LineBar', |
|||
props: { |
|||
id: { |
|||
default: '', |
|||
type: String, |
|||
}, |
|||
color: { |
|||
default: () => [], |
|||
type: Array, |
|||
}, |
|||
}, |
|||
data() { |
|||
return {}; |
|||
}, |
|||
computed: { |
|||
// 定义option |
|||
option() { |
|||
return { |
|||
grid: { |
|||
left: '5%', |
|||
right: '1%', |
|||
bottom: '0', |
|||
top: '20px', |
|||
containLabel: true, |
|||
}, |
|||
xAxis: [ |
|||
{ |
|||
type: 'category', |
|||
// boundaryGap: false, |
|||
// show: true, |
|||
axisLine: { show: false }, |
|||
axisTick: { show: false }, |
|||
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], |
|||
}, |
|||
], |
|||
yAxis: [ |
|||
{ |
|||
// show: true, |
|||
type: 'value', |
|||
splitLine: { show: false }, |
|||
data: ['0', '10', '20'], |
|||
}, |
|||
// { |
|||
// show: false, |
|||
// type: 'value', |
|||
// }, |
|||
], |
|||
series: [ |
|||
// { |
|||
// type: 'bar', |
|||
// yAxisIndex: 1, |
|||
// color: `rgba(105,207,76,0.4)`, |
|||
// barWidth: '10', |
|||
// data: [null, 140, 232, 101, 264, 90, 340, 250, null], |
|||
// }, |
|||
{ |
|||
type: 'line', |
|||
stack: '总量', |
|||
smooth: true, |
|||
lineStyle: { |
|||
width: 2, |
|||
color: `rgba(105,207,76,1)`, |
|||
boxShadow: '10px 10px 10px #000', |
|||
}, |
|||
showSymbol: false, |
|||
areaStyle: { |
|||
opacity: 0.8, |
|||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|||
{ |
|||
offset: 0, |
|||
color: `rgba(105,207,76,0.4)`, |
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: `rgba(105,207,76,0)`, |
|||
}, |
|||
]), |
|||
}, |
|||
emphasis: { focus: 'series' }, |
|||
data: [140, 232, 101, 264, 90, 340, 250], |
|||
}, |
|||
], |
|||
}; |
|||
}, |
|||
}, |
|||
mounted() { |
|||
this.drawLine(); |
|||
}, |
|||
methods: { |
|||
drawLine() { |
|||
// 基于准备好的dom，初始化echarts实例 |
|||
let myChart = this.$echarts.init(document.getElementById(this.id)); |
|||
// 绘制图表 |
|||
myChart.setOption(this.option); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
@ -0,0 +1,391 @@ |
|||
<template> |
|||
<div class="salary-summary"> |
|||
<!-- 日期选择 --> |
|||
<div class="date-box px-4 white flex justify-between items-center"> |
|||
<div class="flex items-center"><a-icon class="icon" type="left" />上个月</div> |
|||
<!-- <div class="flex items-center">2021年11月<a-icon class="icon" type="down" /></div> --> |
|||
<div> |
|||
<a-month-picker |
|||
:default-value="$moment(currDate, monthFormat)" |
|||
:format="monthFormat" |
|||
@change="onChange" |
|||
:getCalendarContainer="getCalendarContainer()" |
|||
> |
|||
<a-icon slot="suffixIcon" type="down" /> |
|||
</a-month-picker> |
|||
</div> |
|||
<div class="next-btn flex items-center" :style="{ color: isCurr ? '#BFBFBF' : '#595959' }"> |
|||
下个月<a-icon class="icon" type="right" /> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 金额汇总 --> |
|||
<div class="salary-total mt-3 white"> |
|||
<div class="table-total"> |
|||
<a-table :columns="columns" :data-source="data" :pagination="false" size="middle" /> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 工资汇总表 --> |
|||
<div class="salary-table mt-3 p-4 white"> |
|||
<div class="title-box flex items-center justify-between"> |
|||
<div class="title">薪资明细</div> |
|||
<div class="right flex items-center color-gray"><span>更多</span><a-icon class="icon" type="right" /></div> |
|||
</div> |
|||
|
|||
<div class="summary-table"> |
|||
<a-table :columns="columns_all" :data-source="data_all" :pagination="false" size="middle" bordered :scroll="{ y: 140, x: 100 }" /> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 近半年工资总额折线图 --> |
|||
<div class="echarts mt-3 py-4 white"> |
|||
<div class="title-box px-4 flex items-center justify-between"> |
|||
<div class="title">薪资总额</div> |
|||
<div class="right"> |
|||
<a-dropdown> |
|||
<a class="ant-dropdown-link flex items-center"> |
|||
<span>{{ companyName }}</span> |
|||
<a-icon class="icon" type="down" /> |
|||
</a> |
|||
<a-menu slot="overlay" @click="handleMenuClick"> |
|||
<a-menu-item v-for="item in companyList" :key="item.key">{{ item.name }}</a-menu-item> |
|||
</a-menu> |
|||
</a-dropdown> |
|||
</div> |
|||
</div> |
|||
|
|||
<div> |
|||
<LineChart :id="'salaryTotalLine'" :color="['#69CF4C']" /> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 近半年各部门薪资总额折线图 --> |
|||
<div class="echarts mt-3 p-4 white"> |
|||
<div class="title-box flex items-center justify-between"> |
|||
<div class="title">部门薪资概览</div> |
|||
<div class="right flex items-center"> |
|||
<a-dropdown> |
|||
<a class="ant-dropdown-link flex items-center"> |
|||
<span>{{ branchOfficeName }}</span> |
|||
<a-icon class="icon" type="down" /> |
|||
</a> |
|||
<a-menu slot="overlay" @click="handleMenuClick"> |
|||
<a-menu-item v-for="item in companyList" :key="item.key">{{ item.name }}</a-menu-item> |
|||
</a-menu> |
|||
</a-dropdown> |
|||
|
|||
<a-dropdown class="ml-3"> |
|||
<a class="ant-dropdown-link flex items-center"> |
|||
<span>{{ departmentName }}</span> |
|||
<a-icon class="icon" type="down" /> |
|||
</a> |
|||
<a-menu slot="overlay" @click="handleMenuClickDepartment"> |
|||
<a-menu-item v-for="item in departmentList" :key="item.key">{{ item.name }}</a-menu-item> |
|||
</a-menu> |
|||
</a-dropdown> |
|||
|
|||
<a-dropdown class="ml-3"> |
|||
<a class="ant-dropdown-link flex items-center"> |
|||
<span>{{ projectName }}</span> |
|||
<a-icon class="icon" type="down" /> |
|||
</a> |
|||
<a-menu slot="overlay" @click="handleMenuClickProject"> |
|||
<a-menu-item v-for="item in projectList" :key="item.key">{{ item.name }}</a-menu-item> |
|||
</a-menu> |
|||
</a-dropdown> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 员工薪资排行 --> |
|||
<div class="echarts mt-3 p-4 white"> |
|||
<div class="title-box flex items-center justify-between"> |
|||
<div class="title">薪资top排行榜</div> |
|||
</div> |
|||
|
|||
<div> |
|||
<BarChart :id="'staffBar'" :color="['#0263FF', '#FF7723', '#8E30FF', '#247884']" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import LineChart from '@/components/LineChart/LineChart.vue'; |
|||
import BarChart from '@/components/BarChart/BarChart.vue'; |
|||
|
|||
const columns = [ |
|||
{ |
|||
title: '月份', |
|||
dataIndex: 'month', |
|||
width: 120, |
|||
align: 'center', |
|||
}, |
|||
{ |
|||
title: '总人数', |
|||
dataIndex: 'num', |
|||
width: 100, |
|||
align: 'center', |
|||
}, |
|||
{ |
|||
title: '薪资总额（元）', |
|||
dataIndex: 'salaryTotal', |
|||
align: 'center', |
|||
}, |
|||
]; |
|||
|
|||
const data = [ |
|||
{ |
|||
key: '1', |
|||
month: '10月份薪资', |
|||
num: 25, |
|||
salaryTotal: '200000', |
|||
}, |
|||
]; |
|||
|
|||
const columns_all = [ |
|||
{ |
|||
title: '姓名', |
|||
dataIndex: 'name', |
|||
width: 100, |
|||
align: 'center', |
|||
}, |
|||
{ |
|||
title: '工资', |
|||
dataIndex: 'salary', |
|||
width: 100, |
|||
align: 'center', |
|||
}, |
|||
{ |
|||
title: '所在部门', |
|||
dataIndex: 'department', |
|||
width: 100, |
|||
align: 'center', |
|||
}, |
|||
{ |
|||
title: '职务', |
|||
dataIndex: 'position', |
|||
width: 100, |
|||
align: 'center', |
|||
}, |
|||
{ |
|||
title: '工资卡号', |
|||
dataIndex: 'payrollCard', |
|||
width: 200, |
|||
align: 'center', |
|||
}, |
|||
]; |
|||
|
|||
const data_all = [ |
|||
{ |
|||
key: '1', |
|||
name: '张三', |
|||
salary: 5000, |
|||
department: '技术', |
|||
position: '前端', |
|||
payrollCard: '111111111111111111', |
|||
}, |
|||
{ |
|||
key: '2', |
|||
name: '张三', |
|||
salary: 5000, |
|||
department: '技术', |
|||
position: '前端', |
|||
payrollCard: '111111111111111111', |
|||
}, |
|||
{ |
|||
key: '3', |
|||
name: '张三', |
|||
salary: 5000, |
|||
department: '技术', |
|||
position: '前端', |
|||
payrollCard: '111111111111111111', |
|||
}, |
|||
{ |
|||
key: '4', |
|||
name: '张三', |
|||
salary: 5000, |
|||
department: '技术', |
|||
position: '前端', |
|||
payrollCard: '111111111111111111', |
|||
}, |
|||
{ |
|||
key: '5', |
|||
name: '张三', |
|||
salary: 5000, |
|||
department: '技术', |
|||
position: '前端', |
|||
payrollCard: '111111111111111111', |
|||
}, |
|||
]; |
|||
|
|||
export default { |
|||
components: { LineChart, BarChart }, |
|||
|
|||
data() { |
|||
return { |
|||
monthFormat: 'YYYY年MM月', |
|||
today: this.$moment(new Date()).format('YYYY年MM月'), |
|||
isCurr: true, |
|||
columns, |
|||
data, |
|||
columns_all, |
|||
data_all, |
|||
companyName: '公司名称', |
|||
branchOfficeName: '公司名称', |
|||
companyList: [ |
|||
{ key: 1, name: '公司名称' }, |
|||
{ key: 2, name: '子公司1' }, |
|||
{ key: 3, name: '子公司2' }, |
|||
], |
|||
departmentName: '全部', |
|||
departmentList: [ |
|||
{ key: 1, name: '全部' }, |
|||
{ key: 2, name: '部门1' }, |
|||
{ key: 3, name: '部门2' }, |
|||
], |
|||
projectName: '全部', |
|||
projectList: [ |
|||
{ key: 1, name: '全部' }, |
|||
{ key: 2, name: '项目1' }, |
|||
{ key: 3, name: '项目2' }, |
|||
], |
|||
}; |
|||
}, |
|||
|
|||
computed: { |
|||
currDate() { |
|||
var myDate = new Date(); |
|||
var tYear = myDate.getFullYear(); |
|||
var tMonth = myDate.getMonth(); |
|||
let m = tMonth === 0 ? 12 : tMonth; |
|||
let y = tMonth === 0 ? tYear - 1 : tYear; |
|||
let data = y + '年' + m + '月'; |
|||
return data; |
|||
}, |
|||
}, |
|||
|
|||
methods: { |
|||
// 选择日期 |
|||
onChange(date, dateString) { |
|||
if (dateString == this.today) { |
|||
isCurr = true; |
|||
} else { |
|||
isCurr = false; |
|||
} |
|||
}, |
|||
|
|||
// 改变日期选择面板位置 |
|||
getCalendarContainer() { |
|||
return triggerNode => triggerNode.parentNode; |
|||
}, |
|||
|
|||
// 下拉菜单点击事件 -- 公司 |
|||
handleMenuClick(e) { |
|||
this.companyList.forEach((item, index) => { |
|||
if (e.key == item.key) { |
|||
this.companyName = item.name; |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
// 下拉菜单点击事件 -- 部门 |
|||
handleMenuClickDepartment(e) { |
|||
this.departmentList.forEach((item, index) => { |
|||
if (e.key == item.key) { |
|||
this.departmentName = item.name; |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
// 下拉菜单点击事件 -- 项目 |
|||
handleMenuClickProject(e) { |
|||
this.projectList.forEach((item, index) => { |
|||
if (e.key == item.key) { |
|||
this.projectName = item.name; |
|||
} |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.salary-summary { |
|||
width: 100%; |
|||
min-height: 100vh; |
|||
padding-bottom: 70px; |
|||
background: #f3f3f3; |
|||
color: #595959; |
|||
} |
|||
|
|||
.icon { |
|||
margin-left: 5px; |
|||
font-size: 12px; |
|||
} |
|||
|
|||
.date-box { |
|||
height: 32px; |
|||
|
|||
.ant-calendar-picker { |
|||
width: 120px; |
|||
} |
|||
|
|||
/deep/ .ant-input { |
|||
border: none; |
|||
} |
|||
|
|||
.next-btn { |
|||
color: #bfbfbf; |
|||
} |
|||
} |
|||
|
|||
/deep/ .ant-calendar-picker-container { |
|||
left: -80px !important; |
|||
top: 32px !important; |
|||
} |
|||
|
|||
.table-total { |
|||
/deep/ .ant-table-thead > tr > th { |
|||
border-top: 1px solid #e5e5e5; |
|||
} |
|||
} |
|||
|
|||
/deep/ .ant-table-thead > tr > th { |
|||
background: #f2f2f2; |
|||
} |
|||
|
|||
/deep/ .ant-table-thead > tr > th, |
|||
/deep/ .ant-table-tbody > tr > td { |
|||
border-bottom: 1px solid #e5e5e5; |
|||
} |
|||
|
|||
.title-box { |
|||
height: 20px; |
|||
|
|||
.title { |
|||
color: #262626; |
|||
font-weight: bold; |
|||
} |
|||
} |
|||
|
|||
.salary-table { |
|||
.summary-table { |
|||
margin-top: 10px; |
|||
} |
|||
} |
|||
|
|||
.ant-dropdown-link { |
|||
font-size: 12px; |
|||
color: #595959; |
|||
} |
|||
|
|||
.color-gray { |
|||
color: #929292; |
|||
} |
|||
|
|||
/deep/ .ant-modal { |
|||
top: calc(~'50vh - 130px'); |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue