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