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