<template> <div class="home"> <div class="home-left"> <el-row :gutter="8"> <el-col :span="12"> <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" @click="handleProject(item)" class="pointer" :key="index" :style="{ backgroundColor: newsListColor[index] }"> <i class="el-icon-s-claim"></i> {{ item.name }} </li> </ul> </el-card> </el-col> <el-col :span="12"> <el-card shadow="hover" style="height:260px"> <div slot="header" class="flexst"> <h5 class="title">系统通知</h5> <el-popover placement="right" width="50" trigger="hover"> <ul class="pointer"> <li @click="$store.dispatch('tagsView/addView', moreNotice)">查看更多</li> </ul> <i class="el-icon-s-unfold pointer" slot="reference"></i> </el-popover> </div> <ul> <li v-for="(item, index) in noticeList" :key="index" @click="handleNotice(item)" class="flexst pointer"> <p class="list-title">{{ item.noticeTitle }}</p> <p class="marginZL15">{{ item.noticePublishTime.substring(0, 10) }}</p> <p v-if="item.userBrowse == '1'" style="color:red">未读</p> <p v-else style="color:green">已读</p> </li> </ul> </el-card> </el-col> </el-row> <el-row :gutter="8" class="marginTop10"> <el-col :span="12"> <el-card shadow="hover" style="height:215px"> <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 todoList" :key="index" class="flexst"> <p class="right15">{{ item.dealTime.substring(0, 10) }}</p> <p class="list-title" style="text-align:right">{{ item.dealBusiness }} ({{ item.dealStep + '环节' }})</p> </li> </ul> </el-card> </el-col> <el-col :span="12"> <el-card shadow="hover" style="height:215px"> <div slot="header" class="flexst"> <h5 class="title">政策法规</h5> <el-popover placement="right" width="50" trigger="hover"> <ul class="pointer"> <li @click="$store.dispatch('tagsView/addView', moreNotice)">查看更多</li> </ul> <i class="el-icon-s-unfold pointer" slot="reference"></i> </el-popover> </div> <ul> <li v-for="(item, index) in policyList" @click="handleView(item.noticeFileUrl)" :key="index" class="flexst pointer"> <p class="right15 list-title">{{ item.noticeTitle }}</p> <p>{{ item.createtime.substring(0, 10) }}</p> </li> </ul> </el-card> </el-col> </el-row> <el-card shadow="hover" class="marginTop10 box-mountNode" id="mountNodeCon" :body-style="{ padding: '8px 6px 0 6px' }"> <div id="mountNode"></div> </el-card> </div> <div class="home-right"> <el-card shadow="hover"> <div slot="header" class="flexst"> <h5 class="title">用户登录时间</h5> </div> <div id="loginTime"></div> </el-card> <el-card class="marginTop10" shadow="hover" style="height:60%"> <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 doneList.slice(0, 13)" :key="index" class="flexst dynamicInfo"> <p class="right15">{{ item.dealTime.substring(0, 10) }}</p> <p class="list-title">{{ item.dealBusiness }} ({{ item.dealStep + '环节' }})</p> </li> </ul> </el-card> </div> <addDialog ref="addProject" v-model="projectDialog" :bindItem="projectList" /> </div> </template> <script> import * as G2 from '@antv/g2' import vueSeamlessScroll from "vue-seamless-scroll" import { getHomeNoticeList, getHomeTodoList, getHomeDoneList, getHomeFrequentProjects } from "@/api/home.js"; import { setReadStatus } from '@/api/system' import addDialog from "./components/addProject.vue"; export default { name: 'home', components: { vueSeamlessScroll, addDialog }, data () { return { 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 }, { year: '1992', value: 16100 }, { year: '1993', value: 15900 }, { year: '1994', value: 17409 }, { year: '1995', value: 17000 }, { year: '1996', value: 31056 }, { year: '1996', value: 31056 }], // 系统通知 noticeData: {}, noticeList: [],//通知列表 todoList: [],//待办列表 doneList: [],//已办列表 policyList: [],//法律法规列表 projectList: [],//常办项目列表 projectDialog: false, moreNotice: { fullPath: '/system/xttz/xttzview', name: '系统通知', path: '/system/xttz/xttzview', meta: { title: '系统通知' } }, } }, mounted () { this.buildChart();//构建图标 this.loginTimeChart() this.queryTodoList();//获取待办列表 this.queryDoneList();//获取已办列表 this.queryNoticeList();//获取通知、法律法规列表 this.queryProjectList();//获取常办项目列表 }, methods: { handleProject (item) { let url = item.uri.split('/').slice(0, 3).join('/') this.$router.push(url) }, handleView (pdfUrl) { const href = pdfUrl window.open(href, '_blank'); }, //获取待办事项列表 queryTodoList () { getHomeTodoList().then(res => { if (res.result) { this.todoList = res.result } }) }, //获取已办事项列表 queryDoneList () { getHomeDoneList().then(res => { if (res.result) { this.doneList = res.result } }) }, //获取通知列表 queryNoticeList () { getHomeNoticeList().then(res => { if (res.result) { this.noticeList = res.result.noticeList this.noticeList.forEach(item => { item.noticePublishTime = this._timedate(item.noticePublishTime) }) this.policyList = res.result.policyList } }) }, //获取常办项目列表 queryProjectList () { getHomeFrequentProjects().then(res => { if (res.result && res.result.length > 0) { this.projectList = res.result } else { this.projectList = this.listData } }) }, _timedate (d) { var td = new Date(); td = new Date(td.getFullYear(), td.getMonth(), td.getDate()); var od = new Date(d); od = new Date(od.getFullYear(), od.getMonth(), od.getDate()); var xc = (od - td) / 1000 / 60 / 60 / 24; if (xc == -1) { return "昨天"; } else if (xc == 0) { return "今天"; } else { return d } }, buildChart () { let height = document.getElementById("mountNodeCon").offsetHeight - 20 var chart = new G2.Chart({ container: 'mountNode', height: height }); 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(); }, 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 () { console.log(this.$route); }, //配置常办项目 setFrequencyProject () { this.projectDialog = true; }, handleNotice (item) { setReadStatus({ bsmNotice: item.bsmNotice }).then(res => { if (res.code == 200) { this.queryNoticeList() } }) this.$alertMes(item.noticeTitle, item.noticeContent) } } } </script> <style scoped lang="scss"> @import "~@/styles/mixin.scss"; @import "./index.scss"; /deep/.el-card__header { padding: 8px 15px; } /deep/.el-card__body { padding: 3px 10px 5px 10px; overflow: hidden; } </style>