style:首页样式修改
Showing
1 changed file
with
243 additions
and
244 deletions
... | @@ -87,7 +87,7 @@ | ... | @@ -87,7 +87,7 @@ |
87 | </div> | 87 | </div> |
88 | <div id="loginTime"></div> | 88 | <div id="loginTime"></div> |
89 | </el-card> | 89 | </el-card> |
90 | <el-card class="marginTop10" shadow="hover"> | 90 | <el-card class="marginTop10" shadow="hover" style="height:60%"> |
91 | <div slot="header" class="flexst"> | 91 | <div slot="header" class="flexst"> |
92 | <h5 class="title">动态信息</h5> | 92 | <h5 class="title">动态信息</h5> |
93 | <i class="el-icon-s-unfold pointer"></i> | 93 | <i class="el-icon-s-unfold pointer"></i> |
... | @@ -104,259 +104,258 @@ | ... | @@ -104,259 +104,258 @@ |
104 | </div> | 104 | </div> |
105 | </template> | 105 | </template> |
106 | <script> | 106 | <script> |
107 | import * as G2 from '@antv/g2' | 107 | import * as G2 from '@antv/g2' |
108 | import vueSeamlessScroll from "vue-seamless-scroll" | 108 | import vueSeamlessScroll from "vue-seamless-scroll" |
109 | import { getHomeNoticeList, getHomeTodoList, getHomeDoneList, getHomeFrequentProjects } from "@/api/user.js"; | 109 | import { getHomeNoticeList, getHomeTodoList, getHomeDoneList, getHomeFrequentProjects } from "@/api/user.js"; |
110 | import { setReadStatus } from '@/api/system' | 110 | import { setReadStatus } from '@/api/system' |
111 | import addDialog from "./components/addProject.vue"; | 111 | import addDialog from "./components/addProject.vue"; |
112 | export default { | 112 | export default { |
113 | name: 'home', | 113 | name: 'home', |
114 | components: { vueSeamlessScroll, addDialog }, | 114 | components: { vueSeamlessScroll, addDialog }, |
115 | data () { | 115 | data () { |
116 | return { | 116 | return { |
117 | listData: [ | 117 | listData: [ |
118 | { | 118 | { |
119 | icon: '', | 119 | icon: '', |
120 | title: '任务' | 120 | title: '任务' |
121 | }, | 121 | }, |
122 | { | 122 | { |
123 | icon: '', | 123 | icon: '', |
124 | title: '邮件' | 124 | title: '邮件' |
125 | }, | 125 | }, |
126 | { | 126 | { |
127 | icon: '', | 127 | icon: '', |
128 | title: '消息' | 128 | title: '消息' |
129 | }, | 129 | }, |
130 | { | 130 | { |
131 | icon: '', | 131 | icon: '', |
132 | title: '日历' | 132 | title: '日历' |
133 | }, | 133 | }, |
134 | { | 134 | { |
135 | icon: '', | 135 | icon: '', |
136 | title: '常用功能' | 136 | title: '常用功能' |
137 | }, | ||
138 | { | ||
139 | icon: '', | ||
140 | title: '申请' | ||
141 | } | ||
142 | ], | ||
143 | newsListColor: ['#61AEFF', '#43DEB3', '#F3C143', '#F09936', '#9C92FF', '#589FFF',], | ||
144 | chartData: [{ | ||
145 | year: '1991', | ||
146 | value: 15468 | ||
147 | }, { | ||
148 | year: '1992', | ||
149 | value: 16100 | ||
150 | }, { | ||
151 | year: '1993', | ||
152 | value: 15900 | ||
153 | }, { | ||
154 | year: '1994', | ||
155 | value: 17409 | ||
156 | }, { | ||
157 | year: '1995', | ||
158 | value: 17000 | ||
159 | }, { | ||
160 | year: '1996', | ||
161 | value: 31056 | ||
162 | }, { | ||
163 | year: '1996', | ||
164 | value: 31056 | ||
165 | }], | ||
166 | // 系统通知 | ||
167 | noticeData: {}, | ||
168 | noticeList: [],//通知列表 | ||
169 | todoList: [],//待办列表 | ||
170 | doneList: [],//已办列表 | ||
171 | policyList: [],//法律法规列表 | ||
172 | projectList: [],//常办项目列表 | ||
173 | projectDialog: false, | ||
174 | moreNotice: { | ||
175 | fullPath: '/system/xttz/xttzview', | ||
176 | name: '系统通知', | ||
177 | path: '/system/xttz/xttzview', | ||
178 | meta: { title: '系统通知' } | ||
137 | }, | 179 | }, |
138 | { | 180 | } |
139 | icon: '', | ||
140 | title: '申请' | ||
141 | } | ||
142 | ], | ||
143 | newsListColor: ['#61AEFF', '#43DEB3', '#F3C143', '#F09936', '#9C92FF', '#589FFF',], | ||
144 | chartData: [{ | ||
145 | year: '1991', | ||
146 | value: 15468 | ||
147 | }, { | ||
148 | year: '1992', | ||
149 | value: 16100 | ||
150 | }, { | ||
151 | year: '1993', | ||
152 | value: 15900 | ||
153 | }, { | ||
154 | year: '1994', | ||
155 | value: 17409 | ||
156 | }, { | ||
157 | year: '1995', | ||
158 | value: 17000 | ||
159 | }, { | ||
160 | year: '1996', | ||
161 | value: 31056 | ||
162 | }, { | ||
163 | year: '1996', | ||
164 | value: 31056 | ||
165 | }], | ||
166 | // 系统通知 | ||
167 | noticeData: {}, | ||
168 | noticeList: [],//通知列表 | ||
169 | todoList: [],//待办列表 | ||
170 | doneList: [],//已办列表 | ||
171 | policyList: [],//法律法规列表 | ||
172 | projectList: [],//常办项目列表 | ||
173 | projectDialog: false, | ||
174 | moreNotice: { | ||
175 | fullPath: '/system/xttz/xttzview', | ||
176 | name: '系统通知', | ||
177 | path: '/system/xttz/xttzview', | ||
178 | meta: { title: '系统通知' } | ||
179 | }, | ||
180 | } | ||
181 | }, | ||
182 | mounted () { | ||
183 | this.buildChart();//构建图标 | ||
184 | this.loginTimeChart() | ||
185 | this.queryTodoList();//获取待办列表 | ||
186 | this.queryDoneList();//获取已办列表 | ||
187 | this.queryNoticeList();//获取通知、法律法规列表 | ||
188 | this.queryProjectList();//获取常办项目列表 | ||
189 | }, | ||
190 | methods: { | ||
191 | handleProject (item) { | ||
192 | let url = item.uri.split('/').slice(0, 3).join('/') | ||
193 | this.$router.push(url) | ||
194 | }, | ||
195 | handleView (pdfUrl) { | ||
196 | const href = pdfUrl | ||
197 | window.open(href, '_blank'); | ||
198 | }, | ||
199 | //获取待办事项列表 | ||
200 | queryTodoList () { | ||
201 | getHomeTodoList().then(res => { | ||
202 | if (res.result) { | ||
203 | this.todoList = res.result | ||
204 | } | ||
205 | }) | ||
206 | }, | ||
207 | //获取已办事项列表 | ||
208 | queryDoneList () { | ||
209 | getHomeDoneList().then(res => { | ||
210 | if (res.result) { | ||
211 | this.doneList = res.result | ||
212 | } | ||
213 | }) | ||
214 | }, | 181 | }, |
215 | //获取通知列表 | 182 | mounted () { |
216 | queryNoticeList () { | 183 | this.buildChart();//构建图标 |
217 | getHomeNoticeList().then(res => { | 184 | this.loginTimeChart() |
218 | if (res.result) { | 185 | this.queryTodoList();//获取待办列表 |
219 | this.noticeList = res.result.noticeList | 186 | this.queryDoneList();//获取已办列表 |
220 | this.noticeList.forEach(item => { | 187 | this.queryNoticeList();//获取通知、法律法规列表 |
221 | item.noticePublishTime = this._timedate(item.noticePublishTime) | 188 | this.queryProjectList();//获取常办项目列表 |
222 | }) | ||
223 | this.policyList = res.result.policyList | ||
224 | } | ||
225 | }) | ||
226 | }, | 189 | }, |
227 | //获取常办项目列表 | 190 | methods: { |
228 | queryProjectList () { | 191 | handleProject (item) { |
229 | getHomeFrequentProjects().then(res => { | 192 | let url = item.uri.split('/').slice(0, 3).join('/') |
230 | if (res.result && res.result.length > 0) { | 193 | this.$router.push(url) |
231 | this.projectList = res.result | 194 | }, |
195 | handleView (pdfUrl) { | ||
196 | const href = pdfUrl | ||
197 | window.open(href, '_blank'); | ||
198 | }, | ||
199 | //获取待办事项列表 | ||
200 | queryTodoList () { | ||
201 | getHomeTodoList().then(res => { | ||
202 | if (res.result) { | ||
203 | this.todoList = res.result | ||
204 | } | ||
205 | }) | ||
206 | }, | ||
207 | //获取已办事项列表 | ||
208 | queryDoneList () { | ||
209 | getHomeDoneList().then(res => { | ||
210 | if (res.result) { | ||
211 | this.doneList = res.result | ||
212 | } | ||
213 | }) | ||
214 | }, | ||
215 | //获取通知列表 | ||
216 | queryNoticeList () { | ||
217 | getHomeNoticeList().then(res => { | ||
218 | if (res.result) { | ||
219 | this.noticeList = res.result.noticeList | ||
220 | this.noticeList.forEach(item => { | ||
221 | item.noticePublishTime = this._timedate(item.noticePublishTime) | ||
222 | }) | ||
223 | this.policyList = res.result.policyList | ||
224 | } | ||
225 | }) | ||
226 | }, | ||
227 | //获取常办项目列表 | ||
228 | queryProjectList () { | ||
229 | getHomeFrequentProjects().then(res => { | ||
230 | if (res.result && res.result.length > 0) { | ||
231 | this.projectList = res.result | ||
232 | } else { | ||
233 | this.projectList = this.listData | ||
234 | } | ||
235 | }) | ||
236 | }, | ||
237 | _timedate (d) { | ||
238 | var td = new Date(); | ||
239 | td = new Date(td.getFullYear(), td.getMonth(), td.getDate()); | ||
240 | var od = new Date(d); | ||
241 | od = new Date(od.getFullYear(), od.getMonth(), od.getDate()); | ||
242 | var xc = (od - td) / 1000 / 60 / 60 / 24; | ||
243 | if (xc == -1) { | ||
244 | return "昨天"; | ||
245 | } else if (xc == 0) { | ||
246 | return "今天"; | ||
232 | } else { | 247 | } else { |
233 | this.projectList = this.listData | 248 | return d |
234 | } | 249 | } |
235 | }) | 250 | }, |
236 | }, | 251 | buildChart () { |
237 | _timedate (d) { | 252 | let height = document.getElementById("mountNodeCon").offsetHeight - 20 |
238 | var td = new Date(); | 253 | var chart = new G2.Chart({ |
239 | td = new Date(td.getFullYear(), td.getMonth(), td.getDate()); | 254 | container: 'mountNode', |
240 | var od = new Date(d); | 255 | height: height |
241 | od = new Date(od.getFullYear(), od.getMonth(), od.getDate()); | 256 | }); |
242 | var xc = (od - td) / 1000 / 60 / 60 / 24; | 257 | chart.source(this.chartData); |
243 | if (xc == -1) { | 258 | chart.scale({ |
244 | return "昨天"; | 259 | value: { |
245 | } else if (xc == 0) { | 260 | min: 10000 |
246 | return "今天"; | 261 | }, |
247 | } else { | 262 | year: { |
248 | return d | 263 | range: [0, 1] |
249 | } | ||
250 | }, | ||
251 | buildChart () { | ||
252 | let height = document.getElementById("mountNodeCon").offsetHeight - 20 | ||
253 | var chart = new G2.Chart({ | ||
254 | container: 'mountNode', | ||
255 | height: height | ||
256 | }); | ||
257 | chart.source(this.chartData); | ||
258 | chart.scale({ | ||
259 | value: { | ||
260 | min: 10000 | ||
261 | }, | ||
262 | year: { | ||
263 | range: [0, 1] | ||
264 | } | ||
265 | }); | ||
266 | chart.axis('value', { | ||
267 | label: { | ||
268 | formatter: function formatter (val) { | ||
269 | return (val / 10000).toFixed(1) + 'k'; | ||
270 | } | 264 | } |
271 | } | 265 | }); |
272 | }); | 266 | chart.axis('value', { |
273 | chart.tooltip({ | 267 | label: { |
274 | crosshairs: true | 268 | formatter: function formatter (val) { |
275 | }) | 269 | return (val / 10000).toFixed(1) + 'k'; |
276 | chart.forceFit(); | 270 | } |
277 | chart.area().position('year*value').shape('smooth'); | ||
278 | chart.line().position('year*value').size(2).shape('smooth'); | ||
279 | chart.render(); | ||
280 | }, | ||
281 | loginTimeChart () { | ||
282 | var data = [{ | ||
283 | item: '用户1', | ||
284 | count: 40, | ||
285 | percent: 0.4 | ||
286 | }, { | ||
287 | item: '用户2', | ||
288 | count: 21, | ||
289 | percent: 0.21 | ||
290 | }, { | ||
291 | item: '用户3', | ||
292 | count: 17, | ||
293 | percent: 0.17 | ||
294 | }] | ||
295 | var chart = new G2.Chart({ | ||
296 | container: 'loginTime', | ||
297 | height: 260 | ||
298 | }); | ||
299 | chart.source(data, { | ||
300 | percent: { | ||
301 | formatter: function formatter (val) { | ||
302 | val = val * 100 + '小时'; | ||
303 | return val; | ||
304 | } | 271 | } |
305 | } | 272 | }); |
306 | }); | 273 | chart.tooltip({ |
307 | chart.coord('theta'); | 274 | crosshairs: true |
308 | chart.tooltip({ | 275 | }) |
309 | showTitle: false | 276 | chart.forceFit(); |
310 | }); | 277 | chart.area().position('year*value').shape('smooth'); |
311 | chart.interval().position('percent').color('item').label('percent', { | 278 | chart.line().position('year*value').size(2).shape('smooth'); |
312 | offset: -40, | 279 | chart.render(); |
313 | textStyle: { | 280 | }, |
314 | textAlign: 'center', | 281 | loginTimeChart () { |
315 | shadowBlur: 2, | 282 | var data = [{ |
316 | shadowColor: 'rgba(0, 0, 0, .45)' | 283 | item: '用户1', |
317 | } | 284 | count: 40, |
318 | }).tooltip('item*percent', function (item, percent) { | 285 | percent: 0.4 |
319 | percent = percent * 100 + '小时'; | 286 | }, { |
320 | return { | 287 | item: '用户2', |
321 | name: item, | 288 | count: 21, |
322 | value: percent | 289 | percent: 0.21 |
323 | }; | 290 | }, { |
324 | }).style({ | 291 | item: '用户3', |
325 | lineWidth: 1, | 292 | count: 17, |
326 | stroke: '#fff' | 293 | percent: 0.17 |
327 | }); | 294 | }] |
328 | chart.forceFit(); | 295 | var chart = new G2.Chart({ |
329 | chart.render(); | 296 | container: 'loginTime', |
330 | }, | 297 | height: 260 |
331 | //跳转到更多通知列表页面 | 298 | }); |
332 | jumpToMoreNotice () { | 299 | chart.source(data, { |
333 | console.log(this.$route); | 300 | percent: { |
334 | }, | 301 | formatter: function formatter (val) { |
335 | //配置常办项目 | 302 | val = val * 100 + '小时'; |
336 | setFrequencyProject () { | 303 | return val; |
337 | this.projectDialog = true; | 304 | } |
338 | }, | 305 | } |
339 | handleNotice (item) { | 306 | }); |
340 | setReadStatus({ bsmNotice: item.bsmNotice }).then(res => { | 307 | chart.coord('theta'); |
341 | if (res.code == 200) { | 308 | chart.tooltip({ |
342 | this.queryNoticeList() | 309 | showTitle: false |
343 | } | 310 | }); |
344 | }) | 311 | chart.interval().position('percent').color('item').label('percent', { |
345 | this.$alertMes(item.noticeTitle, item.noticeContent) | 312 | offset: -40, |
313 | textStyle: { | ||
314 | textAlign: 'center', | ||
315 | shadowBlur: 2, | ||
316 | shadowColor: 'rgba(0, 0, 0, .45)' | ||
317 | } | ||
318 | }).tooltip('item*percent', function (item, percent) { | ||
319 | percent = percent * 100 + '小时'; | ||
320 | return { | ||
321 | name: item, | ||
322 | value: percent | ||
323 | }; | ||
324 | }).style({ | ||
325 | lineWidth: 1, | ||
326 | stroke: '#fff' | ||
327 | }); | ||
328 | chart.forceFit(); | ||
329 | chart.render(); | ||
330 | }, | ||
331 | //跳转到更多通知列表页面 | ||
332 | jumpToMoreNotice () { | ||
333 | console.log(this.$route); | ||
334 | }, | ||
335 | //配置常办项目 | ||
336 | setFrequencyProject () { | ||
337 | this.projectDialog = true; | ||
338 | }, | ||
339 | handleNotice (item) { | ||
340 | setReadStatus({ bsmNotice: item.bsmNotice }).then(res => { | ||
341 | if (res.code == 200) { | ||
342 | this.queryNoticeList() | ||
343 | } | ||
344 | }) | ||
345 | this.$alertMes(item.noticeTitle, item.noticeContent) | ||
346 | } | ||
346 | } | 347 | } |
347 | } | 348 | } |
348 | } | ||
349 | </script> | 349 | </script> |
350 | <style scoped lang="scss"> | 350 | <style scoped lang="scss"> |
351 | @import "~@/styles/mixin.scss"; | 351 | @import "~@/styles/mixin.scss"; |
352 | @import "./index.scss"; | 352 | @import "./index.scss"; |
353 | 353 | /deep/.el-card__header { | |
354 | /deep/.el-card__header { | 354 | padding: 8px 15px; |
355 | padding: 8px 15px | 355 | } |
356 | } | ||
357 | 356 | ||
358 | /deep/.el-card__body { | 357 | /deep/.el-card__body { |
359 | padding: 3px 10px 5px 10px; | 358 | padding: 3px 10px 5px 10px; |
360 | overflow: hidden; | 359 | overflow: hidden; |
361 | } | 360 | } |
362 | </style> | 361 | </style> |
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
-
Please register or sign in to post a comment