Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
39d91ee3 by 任超
Options

style:首页

1 parent 2fc1abcc
Expand all
Inline Side-by-side
Showing 6 changed files with 369 additions and 29 deletions
......@@ -8,10 +8,15 @@
"build": "vue-cli-service build"
},
"dependencies": {
"@antv/g2": "^4.2.8",
"@babel/polyfill": "^7.12.1",
"axios": "^0.21.1",
"babel-polyfill": "^6.26.0",
"bpmn-js": "^7.4.0",
"bpmn-js-properties-panel": "^0.37.2",
"bpmn-js-token-simulation": "^0.10.0",
"core-js": "^3.6.5",
"diagram-js": "^6.8.2",
"js-cookie": "2.2.0",
"lodash": "^4.17.21",
"node-sass": "^4.14.1",
......@@ -19,11 +24,7 @@
"nprogress": "0.2.0",
"vue": "2.6.10",
"vue-router": "3.0.2",
"vuex": "3.1.0",
"bpmn-js": "^7.4.0",
"diagram-js": "^6.8.2",
"bpmn-js-properties-panel": "^0.37.2",
"bpmn-js-token-simulation": "^0.10.0"
"vuex": "3.1.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "4.4.4",
......
<template>
<el-calendar v-model="date">
<template slot="dateCell" slot-scope="{date, data}">
<div :class="{ selected: isSelected(date, data) }">
<div class="solar">{{ data.day.split('-')[2] }}</div>
<div class="lunar" :class="{ festival: isFestival(date, data) }">{{ solarToLunar(date, data) }}</div>
</div>
</template>
</el-calendar>
</template>
<script>
import calendar from './calendar'
export default {
name: 'calendar',
data () {
return {
date: new Date(),
// 根据selectedDates设置选中日期
selectedDates: []
}
},
methods: {
// 是否选中日期
isSelected: function (slotDate, slotData) {
return this.selectedDates.includes(slotData.day)
},
// 是否节假日
isFestival (slotDate, slotData) {
let solarDayArr = slotData.day.split('-');
let lunarDay = calendar.solar2lunar(solarDayArr[0], solarDayArr[1], solarDayArr[2])
// 公历节日\农历节日\农历节气
let festAndTerm = [];
festAndTerm.push(lunarDay.festival == null ? '' : ' ' + lunarDay.festival)
festAndTerm.push(lunarDay.lunarFestival == null ? '' : '' + lunarDay.lunarFestival)
festAndTerm.push(lunarDay.Term == null ? '' : '' + lunarDay.Term)
festAndTerm = festAndTerm.join('')
return festAndTerm != ''
},
// 公历转农历
solarToLunar (slotDate, slotData) {
let solarDayArr = slotData.day.split('-');
let lunarDay = calendar.solar2lunar(solarDayArr[0], solarDayArr[1], solarDayArr[2])
// 农历日期
let lunarMD = lunarDay.IMonthCn + lunarDay.IDayCn
// 公历节日\农历节日\农历节气
let festAndTerm = [];
festAndTerm.push(lunarDay.festival == null ? '' : ' ' + lunarDay.festival)
festAndTerm.push(lunarDay.lunarFestival == null ? '' : '' + lunarDay.lunarFestival)
festAndTerm.push(lunarDay.Term == null ? '' : '' + lunarDay.Term)
festAndTerm = festAndTerm.join('')
return festAndTerm == '' ? lunarMD : festAndTerm
}
}
}
</script>
<style scoped>
/**隐藏上一月、本月、下一月*/
.el-calendar__button-group {
display: none;
}
/deep/.el-calendar__body {
padding: 12px !important;
}
/deep/.el-calendar-table .el-calendar-day {
height: auto;
padding: 5px;
}
/**月份居中*/
.el-calendar__title {
width: 100%;
text-align: center;
}
/**日期div的样式*/
.el-calendar-table tr td:first-child {
border-left: 0px;
}
.el-calendar-table td {
min-height: 110px;
min-width: 110px;
border-right: 0px;
}
.el-calendar-table td.is-selected {
background-color: white;
}
.el-calendar-table .el-calendar-day {
padding: 0px;
text-align: center;
}
.el-calendar-table .el-calendar-day>div {
text-align: center
}
/**日期div的样式-公历*/
.el-calendar-table .el-calendar-day>div .solar {
text-align: center
}
/**日期div的样式-农历*/
.el-calendar-table .el-calendar-day>div .lunar {
padding-top: 5px;
font-size: 12px;
text-align: center
}
/**日期div的样式-选中*/
.el-calendar-table .el-calendar-day>div.selected {
background-color: #fef2f2;
border: 3px solid #fb0;
border-radius: 20px;
text-align: center
}
/**本月周末设置为红色*/
.el-calendar-table .current:nth-last-child(-n+2) .solar {
color: red;
}
/**本月农历设置为灰色*/
.el-calendar-table .current .lunar {
color: #606266;
font-size: 12px;
}
/**本月农历节日设置为红色*/
.el-calendar-table .current .lunar.festival {
color: red;
}
.el-calendar-table td {
border-right: none !important;
}
/**禁用点击效果*/
/*.el-calendar-table td {*/
/*pointer-events: none;*/
/*}*/
</style>
\ No newline at end of file
.home {
display: flex;
justify-content: space-between;
.flexst {
display: flex;
justify-content: space-between;
}
.marginZL15 {
margin: 0 15px;
}
.right15 {
margin-right: 15px;
}
.title {
font-size: 18px;
}
.marginTop10 {
margin-top: 7px;
}
.home-left {
width: 70%;
padding-right: 3px;
.list-title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
ul {
li {
line-height: 36px;
p {
white-space: nowrap;
}
}
}
}
.home-right {
padding-left: 4px;
width: 30%;
}
}
\ No newline at end of file
<template>
<div class="dashboard-container">
<img src="./home.png" alt="">
<div class="home">
<div class="home-left">
<el-row :gutter="8">
<el-col :span="12">
<el-card shadow="hover">
鼠标悬浮时显示
</el-card>
</el-col>
<el-col :span="12">
<el-card shadow="hover">
<div slot="header" class="flexst">
<h5 class="title">通知公告</h5>
<i class="el-icon-s-unfold pointer"></i>
</div>
<ul>
<li v-for="(item, index) in notice" :key="index" class="flexst">
<p class="list-title">{{ item.title }}</p>
<p class="marginZL15">{{ item.date }}</p>
<p>{{ item.state }}</p>
</li>
</ul>
</el-card>
</el-col>
</el-row>
<el-row :gutter="8" class="marginTop10">
<el-col :span="12">
<el-card shadow="hover">
<div slot="header" class="flexst">
<h5 class="title">待办事项</h5>
<i class="el-icon-s-unfold pointer"></i>
</div>
<ul>
<li v-for="(item, index) in toList" :key="index" class="flexst">
<p class="right15">{{ item.date }}</p>
<p class="list-title">{{ item.title }}</p>
</li>
</ul>
</el-card>
</el-col>
<el-col :span="12">
<el-card shadow="hover">
<div slot="header" class="flexst">
<h5 class="title">公司邮件</h5>
<i class="el-icon-s-unfold pointer"></i>
</div>
<ul>
<li v-for="(item, index) in mailList" :key="index" class="flexst">
<p class="right15">{{ item.date }}</p>
<p class="list-title">{{ item.title }}</p>
</li>
</ul>
</el-card>
</el-col>
</el-row>
<el-card shadow="hover" class="marginTop10" :body-style="{ paddingRight: '6px' }">
<div id="mountNode"></div>
</el-card>
</div>
<div class="home-right">
<calendar />
<el-card shadow="hover" class="marginTop10">
鼠标悬浮时显示
</el-card>
</div>
</div>
</template>
<script>
import * as G2 from '@antv/g2'
import calendar from '@/components/calendar/index'
export default {
name: 'Dashboard',
name: 'home',
components: { calendar },
data () {
return {
currentRole: 'adminDashboard'
chartData: [{
year: '1991',
value: 15468
}, {
year: '1992',
value: 16100
}, {
year: '1993',
value: 15900
}, {
year: '1994',
value: 17409
}, {
year: '1995',
value: 17000
}, {
year: '1996',
value: 31056
}, {
year: '1997',
value: 31982
}, {
year: '1998',
value: 32040
}, {
year: '1999',
value: 33233
}],
notice: [
{
title: '坚持以人民为中心发展推进解决房地产历史遗房地产历史遗',
date: '2022-12',
state: '未读'
},
{
title: '坚持以人民为中心发展推进解决房地产历史遗房地产历史遗',
date: '2022-12',
state: '未读'
}
],
toList: [
{
title: '坚持以人民为中心发展推进解决房地产历史遗房地产历史遗',
date: '2022-12',
},
{
title: '坚持以人民为中心发展推进解决房地产历史遗房地产历史遗',
date: '2022-12',
}
],
mailList: [
{
title: '坚持以人民为中心发展推进解决房地产历史遗房地产历史遗',
date: '2022-12',
}
]
}
},
computed: {
// ...mapGetters([
// 'roles'
// ])
},
created () {
// 可实现不同角色配置不同首页
// if (!this.roles.includes('admin')) {
// this.currentRole = 'editorDashboard'
// }
mounted () {
this.buildChart();
},
methods: {
buildChart () {
var chart = new G2.Chart({
container: 'mountNode',
height: 300
});
const e = document.createEvent('Event')
e.initEvent('resize', true, true)
window.dispatchEvent(e)
chart.source(this.chartData);
chart.scale({
value: {
min: 10000
},
year: {
range: [0, 1]
}
});
chart.axis('value', {
label: {
formatter: function formatter (val) {
return (val / 10000).toFixed(1) + 'k';
}
}
});
chart.tooltip({
crosshairs: true
})
chart.forceFit();
chart.area().position('year*value').shape('smooth');
chart.line().position('year*value').size(2).shape('smooth');
chart.render();
}
}
}
</script>
<style scoped lang="scss">
.dashboard-container {
height: 100%;
img {
width: 100%;
height: 100%;
}
}
@import "./index.scss";
</style>
\ No newline at end of file
......