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 @@ ...@@ -8,10 +8,15 @@
8 "build": "vue-cli-service build" 8 "build": "vue-cli-service build"
9 }, 9 },
10 "dependencies": { 10 "dependencies": {
11 "@antv/g2": "^4.2.8",
11 "@babel/polyfill": "^7.12.1", 12 "@babel/polyfill": "^7.12.1",
12 "axios": "^0.21.1", 13 "axios": "^0.21.1",
13 "babel-polyfill": "^6.26.0", 14 "babel-polyfill": "^6.26.0",
15 "bpmn-js": "^7.4.0",
16 "bpmn-js-properties-panel": "^0.37.2",
17 "bpmn-js-token-simulation": "^0.10.0",
14 "core-js": "^3.6.5", 18 "core-js": "^3.6.5",
19 "diagram-js": "^6.8.2",
15 "js-cookie": "2.2.0", 20 "js-cookie": "2.2.0",
16 "lodash": "^4.17.21", 21 "lodash": "^4.17.21",
17 "node-sass": "^4.14.1", 22 "node-sass": "^4.14.1",
...@@ -19,11 +24,7 @@ ...@@ -19,11 +24,7 @@
19 "nprogress": "0.2.0", 24 "nprogress": "0.2.0",
20 "vue": "2.6.10", 25 "vue": "2.6.10",
21 "vue-router": "3.0.2", 26 "vue-router": "3.0.2",
22 "vuex": "3.1.0", 27 "vuex": "3.1.0"
23 "bpmn-js": "^7.4.0",
24 "diagram-js": "^6.8.2",
25 "bpmn-js-properties-panel": "^0.37.2",
26 "bpmn-js-token-simulation": "^0.10.0"
27 }, 28 },
28 "devDependencies": { 29 "devDependencies": {
29 "@vue/cli-plugin-babel": "4.4.4", 30 "@vue/cli-plugin-babel": "4.4.4",
......
1
2 <template>
3 <el-calendar v-model="date">
4 <template slot="dateCell" slot-scope="{date, data}">
5 <div :class="{ selected: isSelected(date, data) }">
6 <div class="solar">{{ data.day.split('-')[2] }}</div>
7 <div class="lunar" :class="{ festival: isFestival(date, data) }">{{ solarToLunar(date, data) }}</div>
8 </div>
9 </template>
10 </el-calendar>
11 </template>
12
13 <script>
14 import calendar from './calendar'
15 export default {
16 name: 'calendar',
17 data () {
18 return {
19 date: new Date(),
20 // 根据selectedDates设置选中日期
21 selectedDates: []
22 }
23 },
24 methods: {
25 // 是否选中日期
26 isSelected: function (slotDate, slotData) {
27 return this.selectedDates.includes(slotData.day)
28 },
29 // 是否节假日
30 isFestival (slotDate, slotData) {
31 let solarDayArr = slotData.day.split('-');
32 let lunarDay = calendar.solar2lunar(solarDayArr[0], solarDayArr[1], solarDayArr[2])
33
34 // 公历节日\农历节日\农历节气
35 let festAndTerm = [];
36 festAndTerm.push(lunarDay.festival == null ? '' : ' ' + lunarDay.festival)
37 festAndTerm.push(lunarDay.lunarFestival == null ? '' : '' + lunarDay.lunarFestival)
38 festAndTerm.push(lunarDay.Term == null ? '' : '' + lunarDay.Term)
39 festAndTerm = festAndTerm.join('')
40
41 return festAndTerm != ''
42 },
43 // 公历转农历
44 solarToLunar (slotDate, slotData) {
45 let solarDayArr = slotData.day.split('-');
46 let lunarDay = calendar.solar2lunar(solarDayArr[0], solarDayArr[1], solarDayArr[2])
47
48 // 农历日期
49 let lunarMD = lunarDay.IMonthCn + lunarDay.IDayCn
50
51 // 公历节日\农历节日\农历节气
52 let festAndTerm = [];
53 festAndTerm.push(lunarDay.festival == null ? '' : ' ' + lunarDay.festival)
54 festAndTerm.push(lunarDay.lunarFestival == null ? '' : '' + lunarDay.lunarFestival)
55 festAndTerm.push(lunarDay.Term == null ? '' : '' + lunarDay.Term)
56 festAndTerm = festAndTerm.join('')
57
58 return festAndTerm == '' ? lunarMD : festAndTerm
59 }
60 }
61 }
62 </script>
63
64 <style scoped>
65 /**隐藏上一月、本月、下一月*/
66 .el-calendar__button-group {
67 display: none;
68 }
69
70 /deep/.el-calendar__body {
71 padding: 12px !important;
72 }
73
74 /deep/.el-calendar-table .el-calendar-day {
75 height: auto;
76 padding: 5px;
77 }
78
79 /**月份居中*/
80 .el-calendar__title {
81 width: 100%;
82 text-align: center;
83 }
84
85 /**日期div的样式*/
86 .el-calendar-table tr td:first-child {
87 border-left: 0px;
88 }
89
90 .el-calendar-table td {
91 min-height: 110px;
92 min-width: 110px;
93 border-right: 0px;
94 }
95
96 .el-calendar-table td.is-selected {
97 background-color: white;
98 }
99
100 .el-calendar-table .el-calendar-day {
101 padding: 0px;
102 text-align: center;
103 }
104
105 .el-calendar-table .el-calendar-day>div {
106 text-align: center
107 }
108
109 /**日期div的样式-公历*/
110 .el-calendar-table .el-calendar-day>div .solar {
111 text-align: center
112 }
113
114 /**日期div的样式-农历*/
115 .el-calendar-table .el-calendar-day>div .lunar {
116 padding-top: 5px;
117 font-size: 12px;
118 text-align: center
119 }
120
121 /**日期div的样式-选中*/
122 .el-calendar-table .el-calendar-day>div.selected {
123 background-color: #fef2f2;
124 border: 3px solid #fb0;
125 border-radius: 20px;
126 text-align: center
127 }
128
129 /**本月周末设置为红色*/
130 .el-calendar-table .current:nth-last-child(-n+2) .solar {
131 color: red;
132 }
133
134 /**本月农历设置为灰色*/
135 .el-calendar-table .current .lunar {
136 color: #606266;
137 font-size: 12px;
138 }
139
140 /**本月农历节日设置为红色*/
141 .el-calendar-table .current .lunar.festival {
142 color: red;
143 }
144
145 .el-calendar-table td {
146 border-right: none !important;
147 }
148
149 /**禁用点击效果*/
150 /*.el-calendar-table td {*/
151 /*pointer-events: none;*/
152 /*}*/
153 </style>
...\ No newline at end of file ...\ No newline at end of file
1 .home {
2 display: flex;
3 justify-content: space-between;
4
5 .flexst {
6 display: flex;
7 justify-content: space-between;
8 }
9
10 .marginZL15 {
11 margin: 0 15px;
12 }
13
14 .right15 {
15 margin-right: 15px;
16 }
17
18 .title {
19 font-size: 18px;
20 }
21
22 .marginTop10 {
23 margin-top: 7px;
24 }
25
26 .home-left {
27 width: 70%;
28 padding-right: 3px;
29
30 .list-title {
31 overflow: hidden;
32 text-overflow: ellipsis;
33 white-space: nowrap;
34 }
35
36 ul {
37 li {
38 line-height: 36px;
39
40 p {
41 white-space: nowrap;
42 }
43 }
44 }
45 }
46
47 .home-right {
48 padding-left: 4px;
49 width: 30%;
50 }
51 }
...\ No newline at end of file ...\ No newline at end of file
1 <template> 1 <template>
2 <div class="dashboard-container"> 2 <div class="home">
3 <img src="./home.png" alt=""> 3 <div class="home-left">
4 <el-row :gutter="8">
5 <el-col :span="12">
6 <el-card shadow="hover">
7 鼠标悬浮时显示
8 </el-card>
9 </el-col>
10 <el-col :span="12">
11 <el-card shadow="hover">
12 <div slot="header" class="flexst">
13 <h5 class="title">通知公告</h5>
14 <i class="el-icon-s-unfold pointer"></i>
15 </div>
16 <ul>
17 <li v-for="(item, index) in notice" :key="index" class="flexst">
18 <p class="list-title">{{ item.title }}</p>
19 <p class="marginZL15">{{ item.date }}</p>
20 <p>{{ item.state }}</p>
21 </li>
22 </ul>
23 </el-card>
24 </el-col>
25 </el-row>
26 <el-row :gutter="8" class="marginTop10">
27 <el-col :span="12">
28 <el-card shadow="hover">
29 <div slot="header" class="flexst">
30 <h5 class="title">待办事项</h5>
31 <i class="el-icon-s-unfold pointer"></i>
32 </div>
33 <ul>
34 <li v-for="(item, index) in toList" :key="index" class="flexst">
35 <p class="right15">{{ item.date }}</p>
36 <p class="list-title">{{ item.title }}</p>
37 </li>
38 </ul>
39 </el-card>
40 </el-col>
41 <el-col :span="12">
42 <el-card shadow="hover">
43 <div slot="header" class="flexst">
44 <h5 class="title">公司邮件</h5>
45 <i class="el-icon-s-unfold pointer"></i>
46 </div>
47 <ul>
48 <li v-for="(item, index) in mailList" :key="index" class="flexst">
49 <p class="right15">{{ item.date }}</p>
50 <p class="list-title">{{ item.title }}</p>
51 </li>
52 </ul>
53 </el-card>
54 </el-col>
55 </el-row>
56 <el-card shadow="hover" class="marginTop10" :body-style="{ paddingRight: '6px' }">
57 <div id="mountNode"></div>
58 </el-card>
59 </div>
60 <div class="home-right">
61 <calendar />
62 <el-card shadow="hover" class="marginTop10">
63 鼠标悬浮时显示
64 </el-card>
65 </div>
4 </div> 66 </div>
5 </template> 67 </template>
6
7 <script> 68 <script>
69 import * as G2 from '@antv/g2'
70 import calendar from '@/components/calendar/index'
8 export default { 71 export default {
9 name: 'Dashboard', 72 name: 'home',
73 components: { calendar },
10 data () { 74 data () {
11 return { 75 return {
12 currentRole: 'adminDashboard' 76 chartData: [{
77 year: '1991',
78 value: 15468
79 }, {
80 year: '1992',
81 value: 16100
82 }, {
83 year: '1993',
84 value: 15900
85 }, {
86 year: '1994',
87 value: 17409
88 }, {
89 year: '1995',
90 value: 17000
91 }, {
92 year: '1996',
93 value: 31056
94 }, {
95 year: '1997',
96 value: 31982
97 }, {
98 year: '1998',
99 value: 32040
100 }, {
101 year: '1999',
102 value: 33233
103 }],
104 notice: [
105 {
106 title: '坚持以人民为中心发展推进解决房地产历史遗房地产历史遗',
107 date: '2022-12',
108 state: '未读'
109 },
110 {
111 title: '坚持以人民为中心发展推进解决房地产历史遗房地产历史遗',
112 date: '2022-12',
113 state: '未读'
114 }
115 ],
116 toList: [
117 {
118 title: '坚持以人民为中心发展推进解决房地产历史遗房地产历史遗',
119 date: '2022-12',
120 },
121 {
122 title: '坚持以人民为中心发展推进解决房地产历史遗房地产历史遗',
123 date: '2022-12',
124 }
125 ],
126 mailList: [
127 {
128 title: '坚持以人民为中心发展推进解决房地产历史遗房地产历史遗',
129 date: '2022-12',
130 }
131 ]
13 } 132 }
14 }, 133 },
15 computed: { 134 mounted () {
16 // ...mapGetters([ 135 this.buildChart();
17 // 'roles'
18 // ])
19 },
20 created () {
21 // 可实现不同角色配置不同首页
22 // if (!this.roles.includes('admin')) {
23 // this.currentRole = 'editorDashboard'
24 // }
25 }, 136 },
26 methods: { 137 methods: {
27 138 buildChart () {
139 var chart = new G2.Chart({
140 container: 'mountNode',
141 height: 300
142 });
143 const e = document.createEvent('Event')
144 e.initEvent('resize', true, true)
145 window.dispatchEvent(e)
146 chart.source(this.chartData);
147 chart.scale({
148 value: {
149 min: 10000
150 },
151 year: {
152 range: [0, 1]
153 }
154 });
155 chart.axis('value', {
156 label: {
157 formatter: function formatter (val) {
158 return (val / 10000).toFixed(1) + 'k';
159 }
160 }
161 });
162 chart.tooltip({
163 crosshairs: true
164 })
165 chart.forceFit();
166 chart.area().position('year*value').shape('smooth');
167 chart.line().position('year*value').size(2).shape('smooth');
168 chart.render();
169 }
28 } 170 }
29 } 171 }
30 </script> 172 </script>
31 <style scoped lang="scss"> 173 <style scoped lang="scss">
32 .dashboard-container { 174 @import "./index.scss";
33 height: 100%;
34
35 img {
36 width: 100%;
37 height: 100%;
38 }
39 }
40 </style> 175 </style>
...\ No newline at end of file ...\ No newline at end of file
......