Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
4b496d79 by 任超
Options

style:首页完成修改

1 parent 6b2f5c56
Expand all
Inline Side-by-side
Showing 9 changed files with 128 additions and 402 deletions
<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: 8px;
}
/deep/.el-calendar-table .el-calendar-day {
height: auto;
padding: 5px;
}
/**月份居中*/
.el-calendar__title {
width: 100%;
text-align: center;
}
/deep/.el-calendar-table thead th {
padding: 0 0 6px 0 !important;
}
/deep/.el-calendar-day {
padding: 3px !important;
}
/deep/.el-calendar-table td.is-today {
font-weight: 700;
}
/deep/.el-calendar-table td.is-selected {
background-color: rgb(179, 216, 255);
}
/deep/.el-calendar__header {
padding: 8px 15px;
}
/**日期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;
margin-top: 3px;
}
/**日期div的样式-农历*/
.el-calendar-table .el-calendar-day>div .lunar {
padding-top: 5px;
font-size: 12px;
text-align: center;
margin-bottom: 5px;
}
/**日期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
<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: 8px;
}
/deep/.el-calendar-table .el-calendar-day {
height: auto;
padding: 5px;
}
/**月份居中*/
.el-calendar__title {
width: 100%;
text-align: center;
}
/deep/.el-calendar-table thead th {
padding: 0 0 6px 0 !important;
}
/deep/.el-calendar-day {
padding: 3px !important;
}
/deep/.el-calendar-table td.is-today {
font-weight: 700;
}
/deep/.el-calendar-table td.is-selected {
background-color: rgb(179, 216, 255);
}
/deep/.el-calendar__header {
padding: 8px 15px;
}
/**日期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;
margin-top: 3px;
}
/**日期div的样式-农历*/
.el-calendar-table .el-calendar-day>div .lunar {
padding-top: 5px;
font-size: 12px;
text-align: center;
margin-bottom: 5px;
}
/**日期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
......@@ -38,13 +38,7 @@ export const constantRoutes = [
name: 'workFrameView',
hidden: true,
meta: { title: '发起申请' }
}
]
/**
* asyncRoutes
* the routes that need to be dynamically loaded based on user roles
*/
export const asyncRoutes = [
},
{
path: '/',
component: Layout,
......@@ -59,6 +53,12 @@ export const asyncRoutes = [
}
]
},
]
/**
* asyncRoutes
* the routes that need to be dynamically loaded based on user roles
*/
export const asyncRoutes = [
{
path: '/ywbl',
id: '2',
......
......@@ -20,7 +20,8 @@ const actions = {
return new Promise(resolve => {
// 将权限菜单数组转成路由树数据结构
let permission_tree = asyncRouter(getMenuInfo)
commit('SET_ROUTES', permission_tree)
const mergeResult = _.cloneDeep(constantRoutes).concat(permission_tree);
commit('SET_ROUTES', mergeResult)
resolve(permission_tree)
})
},
......
<template>
<dialogBox title="配置常办项目" @submitForm="submitForm" saveButton="保存" :isFullscreen="false" width="50%"
@closeDialog="closeDialog" v-model="value">
<el-form ref="ruleForm" :model="ruleForm" label-width="100px" >
<el-tree
:data="projectList"
show-checkbox
node-key="id"
ref="tree"
check-strictly
:highlight-current='true'
:check-on-click-node="true"
:accordion="true"
:props="defaultProps"
:default-expand-all="true"
@check-change="handleClick"
></el-tree>
<el-form ref="ruleForm" :model="ruleForm" label-width="100px">
<el-tree :data="projectList" show-checkbox node-key="id" ref="tree" default-expand-all :props="defaultProps"
@check-change="handleClick"></el-tree>
</el-form>
</dialogBox>
</template>
<script>
import { getMenuInfo} from "@/api/user.js";
import { getMenuInfo } from "@/api/user.js";
import { saveFrequentProjectsList } from "@/api/home.js";
export default {
props: {
value: { type: Boolean, default: false },
bindItem: {type:Array, default: []}
bindItem: { type: Array, default: [] }
},
data () {
return {
......@@ -36,15 +25,15 @@ export default {
defaultProps: {
children: "children",
label: "name",
disabled:function(data,node){
if(data.children && data.children.length > 0){
disabled: function (data, node) {
if (data.children && data.children.length > 0) {
return true
}else{
} else {
return false
}
}
},
uniqueValue:''//最后拿到的唯一选择的moduldCode值,相当于id
uniqueValue: ''//最后拿到的唯一选择的moduldCode值,相当于id
}
},
mounted () {
......@@ -54,35 +43,35 @@ export default {
methods: {
submitForm () {
var checkedNodes = this.$refs.tree.getCheckedNodes();
if(checkedNodes.length > 6){
if (checkedNodes.length > 6) {
this.$message.error("最多选择6个项目！");
return
}
saveFrequentProjectsList(checkedNodes).then(res => {
if(res.code == 200){
if (res.code == 200) {
this.$parent.queryProjectList();
this.$message.success("保存成功");
this.$emit("input", false);
}else{
} else {
this.$message.error(res.message);
}
})
},
queryClick(){
queryClick () {
getMenuInfo().then(res => {
this.projectList = res.result
})
},
dealCheckedItem(){
dealCheckedItem () {
},
//关闭窗口
closeDialog () {
this.$emit("input", false);
},
//节点选择状态发生改变时
handleClick(data,checked, node){
handleClick (data, checked, node) {
var checkedNodes = this.$refs.tree.getCheckedNodes();
if(checked){
if (checked) {
checkedNodes.push(data);
}
this.$refs.tree.setCheckedNodes(checkedNodes);
......@@ -92,4 +81,8 @@ export default {
}
</script>
<style scoped lang='scss'>
/deep/.el-tree-node.is-expanded>.el-tree-node__children {
display: flex;
flex-wrap: wrap;
}
</style>
\ No newline at end of file
......
......@@ -14,7 +14,7 @@
li {
width: 32.5%;
height: 118px;
height: 90px;
@include flex-center;
flex-direction: column;
color: #fff;
......@@ -71,7 +71,7 @@
.box-mountNode {
flex: 1;
height: calc(100% - 510px);
height: calc(100% - 490px);
}
.home-right {
......
......@@ -3,14 +3,14 @@
<div class="home-left">
<el-row :gutter="8">
<el-col :span="12">
<el-card shadow="hover" :body-style="{ padding: '0' }" style="height:302px">
<el-card shadow="hover" :body-style="{ padding: '0' }" style="height:260px">
<div slot="header" class="flexst">
<h5 class="title">常办项目</h5>
<el-button type="primary" @click="setFrequencyProject()">配置常办</el-button>
</div>
<ul class="workbench flexst">
<li v-for="(item, index) in projectList" class="pointer" :key="index"
:style="{ backgroundColor: newsListData[index] }">
:style="{ backgroundColor: newsListColor[index] }">
<i class="el-icon-s-claim"></i>
{{ item.name }}
</li>
......@@ -18,7 +18,7 @@
</el-card>
</el-col>
<el-col :span="12">
<el-card shadow="hover" style="height:302px">
<el-card shadow="hover" style="height:260px">
<div slot="header" class="flexst">
<h5 class="title">系统通知</h5>
<el-popover placement="right" width="50" trigger="hover">
......@@ -81,8 +81,13 @@
</el-card>
</div>
<div class="home-right">
<calendar />
<el-card shadow="hover" class="marginTop10" style="height:345px">
<el-card shadow="hover" style="height:345px">
<div slot="header" class="flexst">
<h5 class="title">用户登录时间</h5>
</div>
<div id="loginTime"></div>
</el-card>
<el-card class="marginTop10" shadow="hover" style="height:395px">
<div slot="header" class="flexst">
<h5 class="title">动态信息</h5>
<i class="el-icon-s-unfold pointer"></i>
......@@ -95,22 +100,47 @@
</ul>
</el-card>
</div>
<addDialog ref="addProject" v-model="projectDialog" :bindItem="projectList"/>
<addDialog ref="addProject" v-model="projectDialog" :bindItem="projectList" />
</div>
</template>
<script>
import * as G2 from '@antv/g2'
import calendar from '@/components/Calendar/index'
import vueSeamlessScroll from "vue-seamless-scroll"
import { getHomeNoticeList, getHomeTodoList, getHomeDoneList,getHomeFrequentProjects } from "@/api/home.js";
import { getHomeNoticeList, getHomeTodoList, getHomeDoneList, getHomeFrequentProjects } from "@/api/home.js";
import { setReadStatus } from "@/api/notice.js";
import addDialog from "./components/addProject.vue";
export default {
name: 'home',
components: { calendar, vueSeamlessScroll,addDialog },
components: { vueSeamlessScroll, addDialog },
data () {
return {
newsListData: ['#61AEFF','#43DEB3','#F3C143','#F09936','#9C92FF','#589FFF',],
listData: [
{
icon: '',
title: '任务'
},
{
icon: '',
title: '邮件'
},
{
icon: '',
title: '消息'
},
{
icon: '',
title: '日历'
},
{
icon: '',
title: '常用功能'
},
{
icon: '',
title: '申请'
}
],
newsListColor: ['#61AEFF', '#43DEB3', '#F3C143', '#F09936', '#9C92FF', '#589FFF',],
chartData: [{
year: '1991',
value: 15468
......@@ -151,6 +181,7 @@ export default {
},
mounted () {
this.buildChart();//构建图标
this.loginTimeChart()
this.queryTodoList();//获取待办列表
this.queryDoneList();//获取已办列表
this.queryNoticeList();//获取通知、法律法规列表
......@@ -190,10 +221,12 @@ export default {
})
},
//获取常办项目列表
queryProjectList(){
queryProjectList () {
getHomeFrequentProjects().then(res => {
if(res.result){
if (res.result && res.result.length > 0) {
this.projectList = res.result
} else {
this.projectList = this.listData
}
})
},
......@@ -241,13 +274,62 @@ export default {
chart.line().position('year*value').size(2).shape('smooth');
chart.render();
},
loginTimeChart () {
var data = [{
item: '用户1',
count: 40,
percent: 0.4
}, {
item: '用户2',
count: 21,
percent: 0.21
}, {
item: '用户3',
count: 17,
percent: 0.17
}]
var chart = new G2.Chart({
container: 'loginTime',
height: 260
});
chart.source(data, {
percent: {
formatter: function formatter (val) {
val = val * 100 + '%';
return val;
}
}
});
chart.coord('theta');
chart.tooltip({
showTitle: false
});
chart.interval().position('percent').color('item').label('percent', {
offset: -40,
textStyle: {
textAlign: 'center',
shadowBlur: 2,
shadowColor: 'rgba(0, 0, 0, .45)'
}
}).tooltip('item*percent', function (item, percent) {
percent = percent * 100 + '%';
return {
name: item,
value: percent
};
}).style({
lineWidth: 1,
stroke: '#fff'
});
chart.forceFit();
chart.render();
},
//跳转到更多通知列表页面
jumpToMoreNotice(){
jumpToMoreNotice () {
console.log(this.$route);
},
//配置常办项目
setFrequencyProject(){
setFrequencyProject () {
this.projectDialog = true;
},
handleNotice (item) {
......