Skip to content

杨炀 / dangan_dataV

Go to a project
Toggle navigation
Toggle navigation pinning
91e152cb by zhangmeng
Options

看板

1 parent 9835b057
Inline Side-by-side
Showing 3 changed files with 367 additions and 193 deletions
src/viewsPc/vip/centerPage.vue
...@@ -29,8 +29,7 @@ ...@@ -29,8 +29,7 @@
29 <div ref="bing1" style="width: 100%;height:13vh;"> 29 <div ref="bing1" style="width: 100%;height:13vh;">
30 </div> 30 </div>
31 <div class="bingBottom"> 31 <div class="bingBottom">
32 <div>{{ activeName1 }}年营业收入</div> 32 <div style="text-align: center">{{ `${dayjs().format('YYYY')}年` }}营业收入 <br>(万元)</div>
33 <div>(万元)</div>
34 </div> 33 </div>
35 </div> 34 </div>
36 <div ref="zhuRef1" class="zhu" style="width:70%;height: 17vh"/> 35 <div ref="zhuRef1" class="zhu" style="width:70%;height: 17vh"/>
...@@ -48,8 +47,9 @@ ...@@ -48,8 +47,9 @@
48 <div ref="bing2" style="width: 100%;height:13vh;"> 47 <div ref="bing2" style="width: 100%;height:13vh;">
49 </div> 48 </div>
50 <div class="bingBottom"> 49 <div class="bingBottom">
51 <div>{{ `${dayjs().format('YYYY')}年${dayjs().format('MM')}月` }}前累计应收余额</div> 50 <div style="text-align: center;">{{ `${dayjs().format('YYYY')}年${dayjs().format('MM')}月` }}前 <br>
52 <div>(万元)</div> 51 累计应收余额 <br>(万元)
52 </div>
53 </div> 53 </div>
54 </div> 54 </div>
55 <div ref="zhuRef2" class="zhu" style="width:70%;height: 17vh"/> 55 <div ref="zhuRef2" class="zhu" style="width:70%;height: 17vh"/>
...@@ -67,8 +67,8 @@ ...@@ -67,8 +67,8 @@
67 <div ref="bing3" style="width: 100%;height:13vh;"> 67 <div ref="bing3" style="width: 100%;height:13vh;">
68 </div> 68 </div>
69 <div class="bingBottom"> 69 <div class="bingBottom">
70 <div>{{ `${dayjs().format('YYYY')}年${dayjs().format('MM')}月` }}前累计应收余额</div> 70 <div style="text-align: center">{{ `${dayjs().format('YYYY')}年${dayjs().format('MM')}月` }}前 <br> 累计应收余额<br>(万元)
71 <div>(万元)</div> 71 </div>
72 </div> 72 </div>
73 </div> 73 </div>
74 <div ref="zhuRef3" class="zhu" style="width:70%;height: 17vh"/> 74 <div ref="zhuRef3" class="zhu" style="width:70%;height: 17vh"/>
...@@ -97,8 +97,6 @@ import * as api from "@/apiPc/common" ...@@ -97,8 +97,6 @@ import * as api from "@/apiPc/common"
97 import {onMounted, ref} from 'vue' 97 import {onMounted, ref} from 'vue'
98 import {dayjs} from 'element-plus' 98 import {dayjs} from 'element-plus'
99 import {getYS001, getYS002, getYS003, getYS004, getYS005} from '@/api/server.js' 99 import {getYS001, getYS002, getYS003, getYS004, getYS005} from '@/api/server.js'
100 import yy from '@/assets/image/yy1.png'
101 import {getLocalList} from "/@/apiPc/local";
102 100
103 101
104 const dataItems = ref([]); 102 const dataItems = ref([]);
...@@ -110,6 +108,7 @@ const bing1 = ref(null) ...@@ -110,6 +108,7 @@ const bing1 = ref(null)
110 const bing2 = ref(null) 108 const bing2 = ref(null)
111 const bing3 = ref(null) 109 const bing3 = ref(null)
112 const textRef = ref(null) 110 const textRef = ref(null)
111
113 const form = ref({ 112 const form = ref({
114 leaderinfo: [] 113 leaderinfo: []
115 }) 114 })
...@@ -136,23 +135,36 @@ let total = 0 ...@@ -136,23 +135,36 @@ let total = 0
136 let intervalA = null 135 let intervalA = null
137 136
138 onMounted(() => { 137 onMounted(() => {
139 // init() 138 init()
140 window.addEventListener('resize', handleResize); 139 window.addEventListener('resize', handleResize);
141 // handelBing1() 140 // handelBing1()
142 // handelZhu1() 141 // handelZhu1()
143 handelGetYS001() 142 // handelGetYS001()
144 handelGetYS002() 143 // handelGetYS002()
145 handelGetYS003() 144 // handelGetYS003()
146 handelGetYS004() 145 // handelGetYS004()
147 handelGetYS005() 146 // handelGetYS005()
148 // handelBing2() 147 // handelBing2()
149 // handelZhu2() 148 // handelZhu2()
150 // handelBing3() 149 // handelBing3()
151 // handelZhu3() 150 // handelZhu3()
152 // handelZhu4() 151 // handelZhu4()
153 152
153
154 }) 154 })
155 155
156 const init = () => {
157 clear()
158 if (!intervalA) {
159 handelGetYS001()
160 handelGetYS002()
161 handelGetYS003()
162 handelGetYS004()
163 handelGetYS005()
164 }
165 intervalA = setInterval(getdata, 1000 * 60 * 60);
166 }
167
156 async function handelGetYS001() { 168 async function handelGetYS001() {
157 const res = await getYS001() 169 const res = await getYS001()
158 resYear1.value = res.data.yeargroup 170 resYear1.value = res.data.yeargroup
...@@ -161,7 +173,6 @@ async function handelGetYS001() { ...@@ -161,7 +173,6 @@ async function handelGetYS001() {
161 activeName1.value = res.data.yeargroup[1].YEAR 173 activeName1.value = res.data.yeargroup[1].YEAR
162 } 174 }
163 175
164
165 async function handelGetYS002() { 176 async function handelGetYS002() {
166 const res = await getYS002() 177 const res = await getYS002()
167 resYear2.value = res.data.yeargroup 178 resYear2.value = res.data.yeargroup
...@@ -272,6 +283,7 @@ async function handelGetYS004() { ...@@ -272,6 +283,7 @@ async function handelGetYS004() {
272 283
273 let dataList = arr.map(v => ({ 284 let dataList = arr.map(v => ({
274 value: v.DSO, 285 value: v.DSO,
286 day: v.DAYS,
275 itemStyle: v.type == 2 ? styleItem1 : styleItem2, 287 itemStyle: v.type == 2 ? styleItem1 : styleItem2,
276 name: v.type == 2 ? "陆地" : '海上' 288 name: v.type == 2 ? "陆地" : '海上'
277 })) 289 }))
...@@ -287,12 +299,6 @@ async function handelGetYS005() { ...@@ -287,12 +299,6 @@ async function handelGetYS005() {
287 form.value = res.data 299 form.value = res.data
288 } 300 }
289 301
290 const init = () => {
291 if (!intervalA) {
292 getdata()
293 }
294 intervalA = setInterval(getdata, 1000 * 60 * 60);
295 }
296 302
297 function getdata() { 303 function getdata() {
298 total = 0 304 total = 0
...@@ -315,12 +321,21 @@ function handleResize() { ...@@ -315,12 +321,21 @@ function handleResize() {
315 } 321 }
316 322
317 const handelBing1 = (arr1, arr2) => { 323 const handelBing1 = (arr1, arr2) => {
324 // arr1 2025
325 // arr2 2024
318 chart1 = echarts.init(bing1.value) 326 chart1 = echarts.init(bing1.value)
319 const option = { 327 const option = {
320 tooltip: { 328 tooltip: {
321 trigger: '' 329 trigger: 'item',
330 valueFormatter: (value) => value + '万',
331 backgroundColor: 'rgba(5, 28, 51, 1)', // 背景色
332 borderColor: 'rgba(46, 151, 198, 1)', // 边框颜色
333 borderWidth: 1, // 边框宽度
334 textStyle: {
335 color: '#fff', // 文字颜色
336 fontSize: 12, // 文字大小
337 }
322 }, 338 },
323
324 series: [ 339 series: [
325 { 340 {
326 name: '', 341 name: '',
...@@ -332,7 +347,10 @@ const handelBing1 = (arr1, arr2) => { ...@@ -332,7 +347,10 @@ const handelBing1 = (arr1, arr2) => {
332 }, 347 },
333 348
334 emphasis: { 349 emphasis: {
335 scale: false 350 scale: false,
351 // label: {
352 // show: true,
353 // }
336 }, 354 },
337 startAngle: 180, 355 startAngle: 180,
338 endAngle: 360, 356 endAngle: 360,
...@@ -347,189 +365,251 @@ const handelBing1 = (arr1, arr2) => { ...@@ -347,189 +365,251 @@ const handelBing1 = (arr1, arr2) => {
347 barWidth: 2 365 barWidth: 2
348 }, 366 },
349 { 367 {
350 name: arr1.YEAR, 368 name: '营业收入',
351 type: 'pie', 369 type: 'pie',
352 radius: ['75%', '95%'], 370 radius: ['75%', '95%'],
353 center: ['50%', '60%'], 371 center: ['50%', '60%'],
354 label: { 372 label: {
355 show: false 373 show: true, // 显示标签
374 position: 'center', // 位置居中
375 formatter: (arr1.TOTAL / 10000).toFixed(), // 文字内容
376 rich: {
377 total: {
378 fontSize: 5,
379 color: '#fff'
380 }
381 }
356 }, 382 },
383
357 // adjust the start and end angle 384 // adjust the start and end angle
358 startAngle: 180, 385 startAngle: 180,
359 endAngle: 360, 386 endAngle: 360,
360 emphasis: { 387 emphasis: {
361 scale: false 388 scale: true,
389 label: {
390 show: true,
391 }
362 }, 392 },
363 data: [ 393 data: [
364 {value: arr1.TOTAL, name: '营业收入', itemStyle: {color: "rgb(255,217,0)"}}, 394 {
365 {value: arr1.TOTAL ? arr1.TOTAL * 2 : 1, name: '营业收入'}, 395 value: (arr1.TOTAL / 10000).toFixed(),
396 name: arr1.YEAR,
397 itemStyle: {color: "rgb(255,217,0)"}
398 },
399 {
400 value: (arr2.TOTAL / 10000).toFixed(),
401 name: arr2.YEAR
402 },
366 ], 403 ],
367 itemStyle: { 404 itemStyle: {
368 color: 'rgba(1, 162, 237, .3)', 405 color: 'rgba(1, 162, 237, .3)',
369 }, 406 },
370 }, 407 },
371 { 408 {
372 name: arr2.YEAR, 409 name: '营业收入',
373 type: 'pie', 410 type: 'pie',
374 radius: ['55%', '70%'], 411 radius: ['55%', '70%'],
375 center: ['50%', '60%'], 412 center: ['50%', '60%'],
376 label: { 413 label: {
377 show: true, 414 show: false, // 显示标签
378 position: 'center', 415 position: 'center', // 位置居中
379 formatter: '{b}' 416 formatter: (arr1.TOTAL / 10000).toFixed(), // 文字内容
417 rich: {
418 total: {
419 fontSize: 5,
420 color: '#fff'
421 }
422 }
380 }, 423 },
381 emphasis: { 424 emphasis: {
382 scale: false 425 scale: true,
426 label: {
427 show: true,
428 }
383 }, 429 },
384 // adjust the start and end angle 430 // adjust the start and end angle
385 startAngle: 180, 431 startAngle: 180,
386 endAngle: 360, 432 endAngle: 360,
387 data: [ 433 data: [
388 {value: arr2.TOTAL, name: '', itemStyle: {color: "rgba(240, 255, 0, .5)"}}, 434 {
389 {value: arr2.TOTAL ? arr2.TOTAL * 2 : 1, name: (arr2.TOTAL / 10000).toFixed(0) + 'W'} 435 value: (arr2.TOTAL / 10000).toFixed() || 0,
436 name: arr2.YEAR,
437 itemStyle: {color: "rgba(240, 255, 0, .5)"}
438 },
439 // {value: arr2.TOTAL, name: (arr2.TOTAL / 10000).toFixed(0) + 'W'}
440 {
441 value: (arr1.TOTAL / 10000).toFixed() || 0,
442 name: arr1.YEAR
443 }
390 ], 444 ],
391 itemStyle: { 445 itemStyle: {
392 color: 'rgba(1, 162, 237, .3)', 446 color: 'rgba(1, 162, 237, .3)',
393 }, 447 },
394 }, 448 },
395 { 449 // {
396 name: '4', 450 // name: '4',
397 type: 'pie', 451 // type: 'pie',
398 radius: ['38%', '50%'], 452 // radius: ['38%', '50%'],
399 center: ['50%', '60%'], 453 // center: ['50%', '60%'],
400 label: { 454 // label: {
401 show: false 455 // show: false
402 }, 456 // },
403 emphasis: { 457 // emphasis: {
404 scale: false 458 // scale: false
405 }, 459 // },
406 // adjust the start and end angle 460 // // adjust the start and end angle
407 startAngle: 180, 461 // startAngle: 180,
408 endAngle: 360, 462 // endAngle: 360,
409 data: [{value: 1048, name: ''}], 463 // data: [{value: 1048, name: ''}],
410 464 // itemStyle: {
411 itemStyle: { 465 // color: {
412 color: { 466 // image: yy,
413 image: 'yy', 467 // repeat: 'repeat'
414 // repeat: 'repeat' 468 // }
415 } 469 // }
416 } 470 // // itemStyle: {
417 // itemStyle: { 471 // // color: {
418 // color: { 472 // // type: 'linear',
419 // type: 'linear', 473 // // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
420 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变 474 // // colorStops: [
421 // colorStops: [ 475 // // {offset: 0, color: 'rgba(1, 162, 237, 1)'}, // 顶部颜色
422 // {offset: 0, color: 'rgba(1, 162, 237, 1)'}, // 顶部颜色 476 // // {offset: 1, color: 'rgba(16, 123, 184, 1)'} // 底部颜色
423 // {offset: 1, color: 'rgba(16, 123, 184, 1)'} // 底部颜色 477 // // ]
424 // ] 478 // // },
425 // }, 479 // // },
426 // }, 480 // }
427 }
428 ] 481 ]
429 } 482 }
430 483
431 chart1.setOption(option) 484 chart1.setOption(option)
432 autoHover(chart1, option, 3, 2000) 485 autoHover(chart1, option, 0, 2000)
433 } 486 }
434 const handelBing2 = (row1, row2) => { 487 const handelBing2 = (row1, row2) => {
435 chart2 = echarts.init(bing2.value) 488 chart2 = echarts.init(bing2.value)
436 const option = { 489 const option = {
437 tooltip: { 490 tooltip: {
438 trigger: '' 491 trigger: 'item',
492 valueFormatter: (value) => value + '万',
493 backgroundColor: 'rgba(5, 28, 51, 1)', // 背景色
494 borderColor: 'rgba(46, 151, 198, 1)', // 边框颜色
495 borderWidth: 1, // 边框宽度
496 textStyle: {
497 color: '#fff', // 文字颜色
498 fontSize: 12, // 文字大小
499 }
439 }, 500 },
440 501
441 series: [ 502 series: [
442 { 503 {
443 name: '1', 504 name: '应收余额',
444 type: 'pie', 505 type: 'pie',
445 radius: ['99%', '100%'], 506 radius: ['99%', '100%'],
446 center: ['50%', '60%'], 507 center: ['50%', '60%'],
447 label: { 508 label: {
448 show: false 509 show: false,
449 }, 510 },
450 emphasis: { 511 emphasis: {
451 scale: false 512 scale: false
452 }, 513 },
453 startAngle: 180, 514 startAngle: 180,
454 endAngle: 360, 515 endAngle: 360,
455 data: [ 516 data: [1],
456 {value: 48, name: '1'},
457 {value: 1, name: '1'},
458 {value: 48, name: '1'}
459 ],
460 itemStyle: { 517 itemStyle: {
461 color: 'rgba(1, 162, 237, 1)', 518 color: 'rgba(1, 162, 237, 1)',
462 }, 519 },
463 barWidth: 2 520 barWidth: 2
464 }, 521 },
465 { 522 {
466 name: row2.YEAR, 523 name: '应收余额',
467 type: 'pie', 524 type: 'pie',
468 radius: ['75%', '95%'], 525 radius: ['75%', '95%'],
469 center: ['50%', '60%'], 526 center: ['50%', '60%'],
470 label: { 527 label: {
471 show: false 528 show: true, // 显示标签
529 position: 'center', // 位置居中
530 formatter: (row1.TOTAL / 10000).toFixed() || 0, // 文字内容
531 rich: {
532 total: {
533 fontSize: 5,
534 color: '#fff'
535 }
536 }
472 }, 537 },
473 // adjust the start and end angle 538 // adjust the start and end angle
474 startAngle: 180, 539 startAngle: 180,
475 endAngle: 360, 540 endAngle: 360,
476 emphasis: { 541 emphasis: {
477 scale: false 542 scale: true
478 }, 543 },
479 data: [ 544 data: [
480 {value: row1.TOTAL, name: (row1.TOTAL / 10000).toFixed(0) + 'W', itemStyle: {color: "rgba(0, 255, 190,1)"}}, 545 {
481 {value: row2.TOTAL, name: (row2.TOTAL / 10000).toFixed(0) + 'W'} 546 value: (row1.TOTAL / 10000).toFixed() || 0,
547 name: row1.YEAR,
548 itemStyle: {color: "rgba(0, 255, 190,1)"}
549 },
550 {
551 value: (row2.TOTAL / 10000).toFixed() || 0,
552 name: row2.YEAR
553 }
482 ], 554 ],
483 itemStyle: { 555 itemStyle: {
484 color: 'rgba(1, 162, 237, .5)', 556 color: 'rgba(1, 162, 237, .5)',
485 }, 557 },
486 }, 558 },
487 { 559 // {
488 name: '3', 560 // name: '3',
489 type: 'pie', 561 // type: 'pie',
490 radius: ['55%', '70%'], 562 // radius: ['55%', '70%'],
491 center: ['50%', '60%'], 563 // center: ['50%', '60%'],
492 label: { 564 // label: {
493 show: true, 565 // show: true,
494 position: 'center', 566 // position: 'center',
495 formatter: '{b}' 567 // formatter: '{b}'
496 }, 568 // },
497 emphasis: { 569 // emphasis: {
498 scale: false 570 // scale: false
499 }, 571 // },
500 // adjust the start and end angle 572 // // adjust the start and end angle
501 startAngle: 180, 573 // startAngle: 180,
502 endAngle: 360, 574 // endAngle: 360,
503 data: [ 575 // data: [
504 {value: 1048,}, 576 // {value: 1048,},
505 ], 577 // ],
506 itemStyle: { 578 // itemStyle: {
507 color: { 579 // color: {
508 type: 'linear', 580 // type: 'linear',
509 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变 581 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
510 colorStops: [ 582 // colorStops: [
511 {offset: 0, color: 'rgba(1, 162, 237, 1)'}, // 顶部颜色 583 // {offset: 0, color: 'rgba(1, 162, 237, 1)'}, // 顶部颜色
512 {offset: 1, color: 'rgba(16, 123, 184, 1)'} // 底部颜色 584 // {offset: 1, color: 'rgba(16, 123, 184, 1)'} // 底部颜色
513 ] 585 // ]
514 }, 586 // },
515 }, 587 // },
516 }, 588 // },
517 ] 589 ]
518 } 590 }
519 591
520 chart2.setOption(option) 592 chart2.setOption(option)
521 autoHover(chart2, option, 2, 2000) 593 autoHover(chart2, option, 0, 2000)
522 } 594 }
523 const handelBing3 = (row1, row2) => { 595 const handelBing3 = (row1, row2) => {
524 chart3 = echarts.init(bing3.value) 596 chart3 = echarts.init(bing3.value)
525 const option = { 597 const option = {
526 tooltip: { 598 tooltip: {
527 trigger: '' 599 trigger: 'item',
600 valueFormatter: (value) => value + '万',
601 backgroundColor: 'rgba(5, 28, 51, 1)', // 背景色
602 borderColor: 'rgba(46, 151, 198, 1)', // 边框颜色
603 borderWidth: 1, // 边框宽度
604 textStyle: {
605 color: '#fff', // 文字颜色
606 fontSize: 12, // 文字大小
607 }
528 }, 608 },
529 609
530 series: [ 610 series: [
531 { 611 {
532 name: '1', 612 name: '现金余额',
533 type: 'pie', 613 type: 'pie',
534 radius: ['99%', '100%'], 614 radius: ['99%', '100%'],
535 center: ['50%', '60%'], 615 center: ['50%', '60%'],
...@@ -541,22 +621,26 @@ const handelBing3 = (row1, row2) => { ...@@ -541,22 +621,26 @@ const handelBing3 = (row1, row2) => {
541 }, 621 },
542 startAngle: 180, 622 startAngle: 180,
543 endAngle: 360, 623 endAngle: 360,
544 data: [ 624 data: [1],
545 {value: 48, name: '1'},
546 {value: 1, name: '1'},
547 {value: 48, name: '1'}
548 ],
549 itemStyle: { 625 itemStyle: {
550 color: 'rgba(1, 162, 237, 1)', 626 color: 'rgba(1, 162, 237, 1)',
551 }, 627 },
552 }, 628 },
553 { 629 {
554 name: '2', 630 name: '现金余额',
555 type: 'pie', 631 type: 'pie',
556 radius: ['75%', '95%'], 632 radius: ['75%', '95%'],
557 center: ['50%', '60%'], 633 center: ['50%', '60%'],
558 label: { 634 label: {
559 show: false 635 show: true, // 显示标签
636 position: 'center', // 位置居中
637 formatter: (row1.TOTAL / 10000).toFixed() || 0, // 文字内容
638 rich: {
639 total: {
640 fontSize: 5,
641 color: '#fff'
642 }
643 }
560 }, 644 },
561 // adjust the start and end angle 645 // adjust the start and end angle
562 startAngle: 180, 646 startAngle: 180,
...@@ -566,7 +650,7 @@ const handelBing3 = (row1, row2) => { ...@@ -566,7 +650,7 @@ const handelBing3 = (row1, row2) => {
566 }, 650 },
567 data: [ 651 data: [
568 { 652 {
569 value: row2.TOTAL, name: row2.YEAR, 653 value: (row1.TOTAL / 10000).toFixed(), name: row1.YEAR,
570 itemStyle: { 654 itemStyle: {
571 color: { 655 color: {
572 type: 'linear', 656 type: 'linear',
...@@ -578,50 +662,51 @@ const handelBing3 = (row1, row2) => { ...@@ -578,50 +662,51 @@ const handelBing3 = (row1, row2) => {
578 } 662 }
579 } 663 }
580 }, 664 },
581 {value: row1.TOTAL, name: row1.YEAR} 665 {value: (row2.TOTAL / 10000).toFixed(), name: row2.YEAR}
582 ], 666 ],
583 itemStyle: { 667 itemStyle: {
584 color: 'rgba(1, 162, 237, .3)', 668 color: 'rgba(1, 162, 237, .3)',
585 }, 669 },
586 }, 670 },
587 { 671 // {
588 name: '3', 672 // name: '3',
589 type: 'pie', 673 // type: 'pie',
590 radius: ['55%', '70%'], 674 // radius: ['55%', '70%'],
591 center: ['50%', '60%'], 675 // center: ['50%', '60%'],
592 label: { 676 // label: {
593 show: true, 677 // show: true,
594 position: 'center', 678 // position: 'center',
595 formatter: '{b}' 679 // formatter: '{b}'
596 }, 680 // },
597 emphasis: { 681 // emphasis: {
598 scale: false 682 // scale: false
599 }, 683 // },
600 // adjust the start and end angle 684 // // adjust the start and end angle
601 startAngle: 180, 685 // startAngle: 180,
602 endAngle: 360, 686 // endAngle: 360,
603 data: [ 687 // data: [
604 {value: 1048, name: ''}, 688 // {value: 1048, name: ''},
605 ], 689 // ],
606 itemStyle: { 690 // itemStyle: {
607 color: { 691 // color: {
608 type: 'linear', 692 // type: 'linear',
609 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变 693 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
610 colorStops: [ 694 // colorStops: [
611 {offset: 0, color: 'rgba(1, 162, 237, 1)'}, // 顶部颜色 695 // {offset: 0, color: 'rgba(1, 162, 237, 1)'}, // 顶部颜色
612 {offset: 1, color: 'rgba(16, 123, 184, 1)'} // 底部颜色 696 // {offset: 1, color: 'rgba(16, 123, 184, 1)'} // 底部颜色
613 ] 697 // ]
614 }, 698 // },
615 }, 699 // },
616 }, 700 // },
617 ] 701 ]
618 } 702 }
619 703
620 chart3.setOption(option) 704 chart3.setOption(option)
621 autoHover(chart3, option, 0, 2000) 705 autoHover(chart3, option, 1, 2000)
622 } 706 }
623 707
624 const handelZhu1 = (row1, row2) => { 708 const handelZhu1 = (row1, row2) => {
709 console.log(row1, row2)
625 chart11 = echarts.init(zhuRef1.value) 710 chart11 = echarts.init(zhuRef1.value)
626 const option = { 711 const option = {
627 tooltip: { 712 tooltip: {
...@@ -629,7 +714,14 @@ const handelZhu1 = (row1, row2) => { ...@@ -629,7 +714,14 @@ const handelZhu1 = (row1, row2) => {
629 axisPointer: { 714 axisPointer: {
630 type: 'shadow' 715 type: 'shadow'
631 }, 716 },
632 // formatter: '{a0},{b0},{c}W <br /> {a1},{b1},{c1}W ' 717 valueFormatter: (value) => value + '万',
718 backgroundColor: 'rgba(5, 28, 51, 1)', // 背景色
719 borderColor: 'rgba(46, 151, 198, 1)', // 边框颜色
720 borderWidth: 1, // 边框宽度
721 textStyle: {
722 color: '#fff', // 文字颜色
723 fontSize: 12, // 文字大小
724 }
633 }, 725 },
634 legend: { 726 legend: {
635 top: '0', 727 top: '0',
...@@ -687,7 +779,7 @@ const handelZhu1 = (row1, row2) => { ...@@ -687,7 +779,7 @@ const handelZhu1 = (row1, row2) => {
687 focus: 'series' 779 focus: 'series'
688 }, 780 },
689 data: row1.list.map(val => { 781 data: row1.list.map(val => {
690 return (val.SRJE / 10000).toFixed(2) 782 return (val.SRJE / 10000).toFixed()
691 }), 783 }),
692 itemStyle: { 784 itemStyle: {
693 color: { 785 color: {
...@@ -711,7 +803,7 @@ const handelZhu1 = (row1, row2) => { ...@@ -711,7 +803,7 @@ const handelZhu1 = (row1, row2) => {
711 focus: 'series' 803 focus: 'series'
712 }, 804 },
713 data: row2.list.map(val => { 805 data: row2.list.map(val => {
714 return (val.SRJE / 10000).toFixed(2) 806 return (val.SRJE / 10000).toFixed()
715 }), 807 }),
716 itemStyle: { 808 itemStyle: {
717 color: { 809 color: {
...@@ -739,6 +831,14 @@ const handelZhu2 = (row1, row2) => { ...@@ -739,6 +831,14 @@ const handelZhu2 = (row1, row2) => {
739 trigger: 'axis', 831 trigger: 'axis',
740 axisPointer: { 832 axisPointer: {
741 type: 'shadow' 833 type: 'shadow'
834 },
835 valueFormatter: (value) => value + '万',
836 backgroundColor: 'rgba(5, 28, 51, 1)', // 背景色
837 borderColor: 'rgba(46, 151, 198, 1)', // 边框颜色
838 borderWidth: 1, // 边框宽度
839 textStyle: {
840 color: '#fff', // 文字颜色
841 fontSize: 12, // 文字大小
742 } 842 }
743 }, 843 },
744 legend: { 844 legend: {
...@@ -798,7 +898,7 @@ const handelZhu2 = (row1, row2) => { ...@@ -798,7 +898,7 @@ const handelZhu2 = (row1, row2) => {
798 }, 898 },
799 // data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290,], 899 // data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290,],
800 data: row1.list.map(val => { 900 data: row1.list.map(val => {
801 return (val.YSCOST / 10000).toFixed(2) 901 return (val.YSCOST / 10000).toFixed()
802 }), 902 }),
803 itemStyle: { 903 itemStyle: {
804 color: { 904 color: {
...@@ -822,7 +922,7 @@ const handelZhu2 = (row1, row2) => { ...@@ -822,7 +922,7 @@ const handelZhu2 = (row1, row2) => {
822 }, 922 },
823 // data: [150, 232, 201, 154, 190, 330, 410, 201, 154, 190, 330, 410], 923 // data: [150, 232, 201, 154, 190, 330, 410, 201, 154, 190, 330, 410],
824 data: row2.list.map(val => { 924 data: row2.list.map(val => {
825 return (val.YSCOST / 10000).toFixed(2) 925 return (val.YSCOST / 10000).toFixed()
826 }), 926 }),
827 itemStyle: { 927 itemStyle: {
828 color: { 928 color: {
...@@ -859,6 +959,14 @@ const handelZhu3 = (row1, row2) => { ...@@ -859,6 +959,14 @@ const handelZhu3 = (row1, row2) => {
859 label: { 959 label: {
860 backgroundColor: '#6a7985' 960 backgroundColor: '#6a7985'
861 } 961 }
962 },
963 valueFormatter: (value) => value + '万',
964 backgroundColor: 'rgba(5, 28, 51, 1)', // 背景色
965 borderColor: 'rgba(46, 151, 198, 1)', // 边框颜色
966 borderWidth: 1, // 边框宽度
967 textStyle: {
968 color: '#fff', // 文字颜色
969 fontSize: 12, // 文字大小
862 } 970 }
863 }, 971 },
864 legend: { 972 legend: {
...@@ -1009,6 +1117,14 @@ const handelZhu4 = (listX, dataList) => { ...@@ -1009,6 +1117,14 @@ const handelZhu4 = (listX, dataList) => {
1009 trigger: 'axis', 1117 trigger: 'axis',
1010 axisPointer: { 1118 axisPointer: {
1011 type: 'shadow' 1119 type: 'shadow'
1120 },
1121 valueFormatter: (value) => value + '天',
1122 backgroundColor: 'rgba(5, 28, 51, 1)', // 背景色
1123 borderColor: 'rgba(46, 151, 198, 1)', // 边框颜色
1124 borderWidth: 1, // 边框宽度
1125 textStyle: {
1126 color: '#fff', // 文字颜色
1127 fontSize: 12, // 文字大小
1012 } 1128 }
1013 }, 1129 },
1014 legend: { 1130 legend: {
...@@ -1118,6 +1234,12 @@ function autoHover(myChart, option, index, time) { ...@@ -1118,6 +1234,12 @@ function autoHover(myChart, option, index, time) {
1118 seriesIndex: index, // 第1个被轮播的序列下标 1234 seriesIndex: index, // 第1个被轮播的序列下标
1119 }); 1235 });
1120 } 1236 }
1237
1238 const clear = () => {
1239 if (autoToolTip) {
1240 clearTimeout(autoToolTip);
1241 }
1242 }
1121 </script> 1243 </script>
1122 1244
1123 <style lang="scss" scoped> 1245 <style lang="scss" scoped>
...@@ -1312,7 +1434,7 @@ function autoHover(myChart, option, index, time) { ...@@ -1312,7 +1434,7 @@ function autoHover(myChart, option, index, time) {
1312 div { 1434 div {
1313 font-family: PingFang SC; 1435 font-family: PingFang SC;
1314 font-weight: 400; 1436 font-weight: 400;
1315 font-size: calc(14 * 100vw / 1920); 1437 font-size: calc(12 * 100vw / 1920);
1316 color: #FFFFFF; 1438 color: #FFFFFF;
1317 } 1439 }
1318 } 1440 }
......
src/viewsPc/vip/leftPage.vue
...@@ -104,7 +104,8 @@ let intervalA = null; ...@@ -104,7 +104,8 @@ let intervalA = null;
104 onMounted(() => { 104 onMounted(() => {
105 // init() 105 // init()
106 window.addEventListener('resize', handleResize); 106 window.addEventListener('resize', handleResize);
107 handelGetYS006() 107 init()
108 // handelGetYS006()
108 // setA() 109 // setA()
109 // setB() 110 // setB()
110 // setC() 111 // setC()
...@@ -131,13 +132,13 @@ async function handelGetYS006() { ...@@ -131,13 +132,13 @@ async function handelGetYS006() {
131 type2.value.push(v1.BASE) 132 type2.value.push(v1.BASE)
132 for (const v2 of v1.list) { 133 for (const v2 of v1.list) {
133 const i2 = v2.MONTH - 1; // 转为 0~11 的索引 134 const i2 = v2.MONTH - 1; // 转为 0~11 的索引
134 h1.value[i2] += v2.YSDSK || 0; 135 h1.value[i2] += v2.YSDSK / 10000 || 0;
135 h2.value[i2] += v2.SFDDQ || 0; 136 h2.value[i2] += v2.SFDDQ / 10000 || 0;
136 h3.value[i2] += v2.HTDQ || 0; 137 h3.value[i2] += v2.HTDQ / 10000 || 0;
137 s1.value[i2] += v2.INCOME || 0; 138 s1.value[i2] += v2.INCOME / 10000 || 0;
138 s2.value[i2] += v2.LASTINCOME || 0; 139 s2.value[i2] += v2.LASTINCOME / 10000 || 0;
139 s3.value[i2] += v2.LASTYSBALANCE || 0; 140 s3.value[i2] += v2.LASTYSBALANCE / 10000 || 0;
140 s4.value[i2] += v2.YSBALANCE || 0; 141 s4.value[i2] += v2.YSBALANCE / 10000 || 0;
141 } 142 }
142 } 143 }
143 144
...@@ -187,10 +188,10 @@ function handelSelect2() { ...@@ -187,10 +188,10 @@ function handelSelect2() {
187 for (const v1 of arr) { 188 for (const v1 of arr) {
188 for (const v2 of v1.list) { 189 for (const v2 of v1.list) {
189 const i2 = v2.MONTH - 1; // 转为 0~11 的索引 190 const i2 = v2.MONTH - 1; // 转为 0~11 的索引
190 s1.value[i2] += v2.INCOME || 0; 191 s1.value[i2] += v2.INCOME / 10000 || 0;
191 s2.value[i2] += v2.LASTINCOME || 0; 192 s2.value[i2] += v2.LASTINCOME / 10000 || 0;
192 s3.value[i2] += v2.LASTYSBALANCE || 0; 193 s3.value[i2] += v2.LASTYSBALANCE / 10000 || 0;
193 s4.value[i2] += v2.YSBALANCE || 0; 194 s4.value[i2] += v2.YSBALANCE / 10000 || 0;
194 } 195 }
195 } 196 }
196 197
...@@ -218,9 +219,9 @@ function handelSelect3() { ...@@ -218,9 +219,9 @@ function handelSelect3() {
218 for (const department of list.value) { 219 for (const department of list.value) {
219 for (const monthData of department.list) { 220 for (const monthData of department.list) {
220 const monthIndex = monthData.MONTH - 1; // 转为 0~11 的索引 221 const monthIndex = monthData.MONTH - 1; // 转为 0~11 的索引
221 h1.value[monthIndex] += monthData.YSDSK || 0; 222 h1.value[monthIndex] += monthData.YSDSK / 10000 || 0;
222 h2.value[monthIndex] += monthData.SFDDQ || 0; 223 h2.value[monthIndex] += monthData.SFDDQ / 10000 || 0;
223 h3.value[monthIndex] += monthData.HTDQ || 0; 224 h3.value[monthIndex] += monthData.HTDQ / 10000 || 0;
224 } 225 }
225 } 226 }
226 227
...@@ -239,8 +240,9 @@ function handelSelect3() { ...@@ -239,8 +240,9 @@ function handelSelect3() {
239 240
240 241
241 const init = () => { 242 const init = () => {
243 clear()
242 if (!intervalA) { 244 if (!intervalA) {
243 getdata() 245 handelGetYS006()
244 } 246 }
245 intervalA = setInterval(getdata, 1000 * 60 * 60); 247 intervalA = setInterval(getdata, 1000 * 60 * 60);
246 } 248 }
...@@ -284,6 +286,14 @@ const setA = (arr) => { ...@@ -284,6 +286,14 @@ const setA = (arr) => {
284 const option = { 286 const option = {
285 tooltip: { 287 tooltip: {
286 trigger: 'item', 288 trigger: 'item',
289 valueFormatter: (value) => (value / 10000).toFixed() + '万',
290 backgroundColor: 'rgba(5, 28, 51, 1)', // 背景色
291 borderColor: 'rgba(46, 151, 198, 1)', // 边框颜色
292 borderWidth: 1, // 边框宽度
293 textStyle: {
294 color: '#fff', // 文字颜色
295 fontSize: 12, // 文字大小
296 }
287 }, 297 },
288 legend: { 298 legend: {
289 orient: 'vertical', 299 orient: 'vertical',
...@@ -402,6 +412,14 @@ const setB = (arr1, arr2, arr3, arr4) => { ...@@ -402,6 +412,14 @@ const setB = (arr1, arr2, arr3, arr4) => {
402 const option = { 412 const option = {
403 tooltip: { 413 tooltip: {
404 trigger: 'axis', 414 trigger: 'axis',
415 valueFormatter: (value) => (value / 10000).toFixed() + '万',
416 backgroundColor: 'rgba(5, 28, 51, 1)', // 背景色
417 borderColor: 'rgba(46, 151, 198, 1)', // 边框颜色
418 borderWidth: 1, // 边框宽度
419 textStyle: {
420 color: '#fff', // 文字颜色
421 fontSize: 12, // 文字大小
422 },
405 axisPointer: { 423 axisPointer: {
406 type: 'shadow' 424 type: 'shadow'
407 } 425 }
...@@ -559,6 +577,14 @@ const setC = (h1, h2, h3) => { ...@@ -559,6 +577,14 @@ const setC = (h1, h2, h3) => {
559 trigger: 'axis', 577 trigger: 'axis',
560 axisPointer: { 578 axisPointer: {
561 type: 'shadow' 579 type: 'shadow'
580 },
581 valueFormatter: (value) => (value / 10000).toFixed() + '万',
582 backgroundColor: 'rgba(5, 28, 51, 1)', // 背景色
583 borderColor: 'rgba(46, 151, 198, 1)', // 边框颜色
584 borderWidth: 1, // 边框宽度
585 textStyle: {
586 color: '#fff', // 文字颜色
587 fontSize: 12, // 文字大小
562 } 588 }
563 }, 589 },
564 legend: { 590 legend: {
......
src/viewsPc/vip/rightPage.vue
...@@ -216,13 +216,23 @@ let chartC ...@@ -216,13 +216,23 @@ let chartC
216 let intervalA = null 216 let intervalA = null
217 217
218 onMounted(() => { 218 onMounted(() => {
219 // init() 219 init()
220 window.addEventListener('resize', handleResize); 220 window.addEventListener('resize', handleResize);
221 handelGetYS007() 221 // handelGetYS007()
222 handelGetYS008() 222 // handelGetYS008()
223 handelGetYS009() 223 // handelGetYS009()
224 224
225 }) 225 })
226 const init = () => {
227 clear()
228 if (!intervalA) {
229 handelGetYS007()
230 handelGetYS008()
231 handelGetYS009()
232 }
233 intervalA = setInterval(getdata, 1000 * 60 * 60);
234 }
235
226 236
227 async function handelGetYS007() { 237 async function handelGetYS007() {
228 const res = await getYS007() 238 const res = await getYS007()
...@@ -256,7 +266,6 @@ function handelSelect7() { ...@@ -256,7 +266,6 @@ function handelSelect7() {
256 setA(list7Y.value, arr1, arr2, arr3) 266 setA(list7Y.value, arr1, arr2, arr3)
257 } 267 }
258 268
259
260 async function handelGetYS008() { 269 async function handelGetYS008() {
261 const res = await getYS008() 270 const res = await getYS008()
262 list8Y.value = [] 271 list8Y.value = []
...@@ -311,20 +320,13 @@ async function handelGetYS009() { ...@@ -311,20 +320,13 @@ async function handelGetYS009() {
311 let arr3 = [] 320 let arr3 = []
312 for (const val of list9.value) { 321 for (const val of list9.value) {
313 arrY.push(val.BASE) 322 arrY.push(val.BASE)
314 arr1.push(val.WKPCOSTONE) 323 arr1.push(Math.round(val.WKPCOSTONE / 10000))
315 arr2.push(val.WKPCOSTTWO) 324 arr2.push(Math.round(val.WKPCOSTTWO / 10000))
316 arr3.push(val.WKPCOSTTHREE) 325 arr3.push(Math.round(val.WKPCOSTTHREE / 10000))
317 } 326 }
318 setC(arrY, arr1, arr2, arr3) 327 setC(arrY, arr1, arr2, arr3)
319 } 328 }
320 329
321 const init = () => {
322 clear()
323 if (!intervalA) {
324 getdata()
325 }
326 intervalA = setInterval(getdata, 1000 * 60 * 60);
327 }
328 const getdata = () => { 330 const getdata = () => {
329 getA() 331 getA()
330 getB() 332 getB()
...@@ -353,6 +355,14 @@ const setA = (arrY, arr1, arr2, arr3) => { ...@@ -353,6 +355,14 @@ const setA = (arrY, arr1, arr2, arr3) => {
353 trigger: 'axis', 355 trigger: 'axis',
354 axisPointer: { 356 axisPointer: {
355 type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow' 357 type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
358 },
359 valueFormatter: (value) => value + '万',
360 backgroundColor: 'rgba(5, 28, 51, 1)', // 背景色
361 borderColor: 'rgba(46, 151, 198, 1)', // 边框颜色
362 borderWidth: 1, // 边框宽度
363 textStyle: {
364 color: '#fff', // 文字颜色
365 fontSize: 12, // 文字大小
356 } 366 }
357 }, 367 },
358 legend: { 368 legend: {
...@@ -492,6 +502,14 @@ const setB = (arrY, arr1, arr2) => { ...@@ -492,6 +502,14 @@ const setB = (arrY, arr1, arr2) => {
492 axisPointer: { 502 axisPointer: {
493 // Use axis to trigger tooltip 503 // Use axis to trigger tooltip
494 type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow' 504 type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
505 },
506 valueFormatter: (value) => value + '万',
507 backgroundColor: 'rgba(5, 28, 51, 1)', // 背景色
508 borderColor: 'rgba(46, 151, 198, 1)', // 边框颜色
509 borderWidth: 1, // 边框宽度
510 textStyle: {
511 color: '#fff', // 文字颜色
512 fontSize: 12, // 文字大小
495 } 513 }
496 }, 514 },
497 grid: { 515 grid: {
...@@ -685,6 +703,14 @@ const setC = (arry, arr1, arr2, arr3) => { ...@@ -685,6 +703,14 @@ const setC = (arry, arr1, arr2, arr3) => {
685 trigger: 'axis', 703 trigger: 'axis',
686 axisPointer: { 704 axisPointer: {
687 type: 'shadow' 705 type: 'shadow'
706 },
707 valueFormatter: (value) => value + '万',
708 backgroundColor: 'rgba(5, 28, 51, 1)', // 背景色
709 borderColor: 'rgba(46, 151, 198, 1)', // 边框颜色
710 borderWidth: 1, // 边框宽度
711 textStyle: {
712 color: '#fff', // 文字颜色
713 fontSize: 12, // 文字大小
688 } 714 }
689 }, 715 },
690 legend: { 716 legend: {
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!