d2dc1f37 by renchao@pashanhoo.com

style:首页样式修改

1 parent c79e188b
...@@ -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
......