Skip to content

杨炀 / dangan_dataV

Go to a project
Toggle navigation
Toggle navigation pinning
6a8890c2 by zrj
Options

daping quan

1 parent 5a091cb6
Inline Side-by-side
Showing 6 changed files with 1398 additions and 147 deletions
src/viewsPc/home.vue
1 <template> 1 <template>
2 <div class="main"> 2 <div class="main">
3 <!-- <div style="position: absolute;top: 23px;right: 20px">-->
4 <!-- <el-date-picker-->
5 <!-- v-model="nowDate"-->
6 <!-- type="date"-->
7 <!-- placeholder="Pick a day"-->
8 <!-- :size="size"-->
9 <!-- ></el-date-picker>-->
10 <!-- </div>-->
3 <el-row class="w100"> 11 <el-row class="w100">
4 <el-col v-if="obj.IFBASE" :span="8"> 12 <el-col v-if="obj.IFBASE" :span="8">
5 <left-page :obj="obj" :type="type" :url="result"/> 13 <left-page :obj="obj" :type="type=='否'" :url="result"/>
6 </el-col> 14 </el-col>
7 <el-col v-if="obj.IFBASE" :span="8"> 15 <el-col v-if="obj.IFBASE" :span="8">
8 <center-page :obj="obj" :isLeader="isLeader" :type="type=='否'" :url="result"/> 16 <center-page :obj="obj" :isLeader="isLeader" :type="type=='否'" :url="result"/>
9 </el-col> 17 </el-col>
10 <el-col v-if="obj.IFBASE" :span="8"> 18 <el-col v-if="obj.IFBASE" :span="8">
11 <right-page :obj="obj" :type="type" :url="result"/> 19 <right-page :obj="obj" :type="type=='否'" :url="result"/>
12 </el-col> 20 </el-col>
13 </el-row> 21 </el-row>
14 </div> 22 </div>
...@@ -28,9 +36,10 @@ const url = ref() ...@@ -28,9 +36,10 @@ const url = ref()
28 const obj = ref({}) 36 const obj = ref({})
29 const result = ref() 37 const result = ref()
30 const router = useRouter() 38 const router = useRouter()
39 const nowDate = new Date()
31 let isLeader = ref(false) 40 let isLeader = ref(false)
32 url.value = 'http://192.168.1.152:8899/login/sid=3e6ac454-6d9a-4f37-a593-d06c65703792#/' 41 // url.value = 'http://192.168.1.152:8899/login/sid=a5d48b77-0da4-4008-aa1c-f7f0ed575413#/'
33 // url.value = window.location.href 42 url.value = window.location.href
34 result.value = url.value?.split('=')[1]?.split('#')[0]; 43 result.value = url.value?.split('=')[1]?.split('#')[0];
35 44
36 function validateEmail(email) { 45 function validateEmail(email) {
...@@ -44,6 +53,7 @@ onMounted(() => { ...@@ -44,6 +53,7 @@ onMounted(() => {
44 if (result.value) { 53 if (result.value) {
45 handelGetYS000() 54 handelGetYS000()
46 isLeader.value = validateEmail(result.value) 55 isLeader.value = validateEmail(result.value)
56 console.log(isLeader.value)
47 } else { 57 } else {
48 // result.value = 'a3afc265-1e60-4376-bcfb-6ca124db8704' 58 // result.value = 'a3afc265-1e60-4376-bcfb-6ca124db8704'
49 // handelGetYS000() 59 // handelGetYS000()
...@@ -62,4 +72,25 @@ async function handelGetYS000() { ...@@ -62,4 +72,25 @@ async function handelGetYS000() {
62 </script> 72 </script>
63 73
64 <style lang="scss" scoped> 74 <style lang="scss" scoped>
75 ::v-deep .el-date-editor .el-input__inner {
76 background-color: transparent !important;
77 border-color: #80ffff;
78 box-shadow: none;
79 height: 30px;
80 color: #fff;
81 }
82 ::v-deep .el-input__wrapper {
83 background: transparent;
84 border: none;
85 box-shadow: none;
86 }
87 /* 隐藏默认图标 */
88 ::v-deep .el-date-editor .el-input__prefix {
89 display: none;
90 }
91
92 /* 强制右侧显示图标 */
93 ::v-deep .el-date-editor .el-input__suffix {
94 right: 10px !important;
95 }
65 </style> 96 </style>
......
src/viewsPc/vip/centerPage.vue
1 <template> 1 <template>
2 <div class="center"> 2 <div class="center">
3 <div ref="textRef" class="top"> 3 <div ref="textRef" class="top">
4 <div class="left"> 4 <div class="left" v-if="myType">
5 <div class="titleTop">董事会得分</div> 5 <div class="titleTop">董事会得分</div>
6 <div class="titleCenter heiti">预计得分 <span class="tex1">{{ form?.YJSCORE }}</span></div> 6 <div class="titleCenter heiti">预计得分 <span class="tex1">{{ form?.YJSCORE }}</span></div>
7 <div class="titleCenter heiti">标准得分 <span class="tex2">{{ form?.STANDARDSCORE }}</span> 7 <div class="titleCenter heiti">标准得分 <span class="tex2">{{ form?.STANDARDSCORE }}</span>
8 </div> 8 </div>
9 </div> 9 </div>
10 <div class="right"> 10 <div class="right" :style="{width:myType?'calc(480 * 100vw / 1920)':'calc(640 * 100vw / 1920)'}">
11 <div class="rTop"> 11 <div class="rTop">
12 <div style="font-family: SimHei, serif;">领导重点关注</div> 12 <div style="font-family: SimHei, serif;">领导重点关注</div>
13 <div @click="handelView"><img alt="" class="rTop-img" src="@/assets/image/more@2x.png"></div> 13 <div @click="handelView"><img alt="" class="rTop-img" src="@/assets/image/more@2x.png"></div>
...@@ -26,13 +26,13 @@ ...@@ -26,13 +26,13 @@
26 <span><img alt="" class="titleImg" src="@/assets/image/title_bg.png"></span> 26 <span><img alt="" class="titleImg" src="@/assets/image/title_bg.png"></span>
27 营业收入 27 营业收入
28 </div> 28 </div>
29 <div ref="bing1" style="width: 100%;height:13.3vh;"> 29 <div ref="bing1" style="width: 100%" :style="{height:myType?'13.3vh':'18.3vh'}">
30 </div> 30 </div>
31 <!-- <div class="bingBottom heiti">--> 31 <!-- <div class="bingBottom heiti">-->
32 <!-- <div style="text-align: center">{{ `${dayjs().format('YYYY')}年` }}营业收入 <br>(万元)</div>--> 32 <!-- <div style="text-align: center">{{ `${dayjs().format('YYYY')}年` }}营业收入 <br>(万元)</div>-->
33 <!-- </div>--> 33 <!-- </div>-->
34 </div> 34 </div>
35 <div ref="zhuRef1" class="zhu" style="width:70%;height: 17.3vh"/> 35 <div ref="zhuRef1" class="zhu" style="width:70%" :style="{height:myType?'calc(19vh + 1vw - 43px)':'calc(20.5vh + 1vw + 6px)'}"/>
36 </div> 36 </div>
37 37
38 <hr> 38 <hr>
...@@ -44,7 +44,7 @@ ...@@ -44,7 +44,7 @@
44 <span><img alt="" class="titleImg heiti" src="@/assets/image/title_bg.png"></span> 44 <span><img alt="" class="titleImg heiti" src="@/assets/image/title_bg.png"></span>
45 应收余额 45 应收余额
46 </div> 46 </div>
47 <div ref="bing2" style="width: 100%;height:13.3vh;"> 47 <div ref="bing2" style="width: 100%" :style="{height:myType?'13.3vh':'18.3vh'}">
48 </div> 48 </div>
49 <!-- <div class="bingBottom">--> 49 <!-- <div class="bingBottom">-->
50 <!-- <div style="text-align: center;">{{ `${dayjs().format('YYYY')}年${dayjs().format('MM')}月` }}前 <br>--> 50 <!-- <div style="text-align: center;">{{ `${dayjs().format('YYYY')}年${dayjs().format('MM')}月` }}前 <br>-->
...@@ -52,19 +52,19 @@ ...@@ -52,19 +52,19 @@
52 <!-- </div>--> 52 <!-- </div>-->
53 <!-- </div>--> 53 <!-- </div>-->
54 </div> 54 </div>
55 <div ref="zhuRef2" class="zhu" style="width:70%;height: 17.3vh"/> 55 <div ref="zhuRef2" class="zhu" style="width:70%" :style="{height:myType?'calc(19vh + 1vw - 43px)':'calc(20.5vh + 1vw + 6px)'}"/>
56 </div> 56 </div>
57 57
58 <hr> 58 <hr>
59 </div> 59 </div>
60 <div class="father"> 60 <div class="father" v-if="myType">
61 <div style="display: flex"> 61 <div style="display: flex">
62 <div class="bing" style="width: 30%"> 62 <div class="bing" style="width: 30%">
63 <div class="bingTitle heiti"> 63 <div class="bingTitle heiti">
64 <span><img alt="" class="titleImg" src="@/assets/image/title_bg.png"></span> 64 <span><img alt="" class="titleImg" src="@/assets/image/title_bg.png"></span>
65 现金余额 65 现金余额
66 </div> 66 </div>
67 <div class="bingImg" style="width: 100%;height:13.3vh;">{{bing_number3}}</div> 67 <div class="bingImg" style="width: 100%;height:13.3vh;position: relative"><span style="position: absolute;top:50%;left:0;width: 100%">{{bing_number3}}</span></div>
68 <!-- <div ref="bing3" style="width: 100%;height:13.3vh;">--> 68 <!-- <div ref="bing3" style="width: 100%;height:13.3vh;">-->
69 <!-- </div>--> 69 <!-- </div>-->
70 <!-- <div class="bingBottom">--> 70 <!-- <div class="bingBottom">-->
...@@ -72,7 +72,7 @@ ...@@ -72,7 +72,7 @@
72 <!-- </div>--> 72 <!-- </div>-->
73 <!-- </div>--> 73 <!-- </div>-->
74 </div> 74 </div>
75 <div ref="zhuRef3" class="zhu" style="width:70%;height: 17.3vh"/> 75 <div ref="zhuRef3" class="zhu" style="width:70%;height: calc(19vh + 1vw - 43px)"/>
76 </div> 76 </div>
77 <hr> 77 <hr>
78 </div> 78 </div>
...@@ -82,7 +82,7 @@ ...@@ -82,7 +82,7 @@
82 <span class="heiti">DSO天数</span> 82 <span class="heiti">DSO天数</span>
83 <span class="dsotext heiti">&nbsp;{{ dso }}</span> 83 <span class="dsotext heiti">&nbsp;{{ dso }}</span>
84 </div> 84 </div>
85 <div ref="zhuRef4" style="width: 100%;height: 17.3vh"> 85 <div ref="zhuRef4" style="width: 100%" :style="{height:myType?'calc(16vh + 1vw - 1px)':'calc(20.5vh + 1vw + 6px)'}">
86 </div> 86 </div>
87 </div> 87 </div>
88 </div> 88 </div>
...@@ -129,6 +129,7 @@ const props = defineProps({ ...@@ -129,6 +129,7 @@ const props = defineProps({
129 const url = computed(() => props.url) 129 const url = computed(() => props.url)
130 const obj = computed(() => props.obj) 130 const obj = computed(() => props.obj)
131 const isLeader = computed(() => props.isLeader) 131 const isLeader = computed(() => props.isLeader)
132 const myType = computed(() => props.type)
132 const zhuRef1 = ref(null) 133 const zhuRef1 = ref(null)
133 const zhuRef2 = ref(null) 134 const zhuRef2 = ref(null)
134 const zhuRef3 = ref(null) 135 const zhuRef3 = ref(null)
...@@ -166,12 +167,10 @@ let total = 0 ...@@ -166,12 +167,10 @@ let total = 0
166 let intervalA = null 167 let intervalA = null
167 168
168 onMounted(async () => { 169 onMounted(async () => {
169 if (props.type) {
170 if (url.value) { 170 if (url.value) {
171 init() 171 init()
172 } 172 }
173 window.addEventListener('resize', handleResize); 173 window.addEventListener('resize', handleResize);
174 }
175 // handelBing1() 174 // handelBing1()
176 // handelZhu1() 175 // handelZhu1()
177 // handelGetYS001() 176 // handelGetYS001()
...@@ -217,6 +216,7 @@ async function handelGetYS002() { ...@@ -217,6 +216,7 @@ async function handelGetYS002() {
217 216
218 async function handelGetYS003() { 217 async function handelGetYS003() {
219 const res = await getYS003(url.value, obj.value) 218 const res = await getYS003(url.value, obj.value)
219 if (res.data) {
220 resYear3.value = res.data.yeargroup 220 resYear3.value = res.data.yeargroup
221 let obj1 = res.data.yeargroup[0] 221 let obj1 = res.data.yeargroup[0]
222 let obj2 = res.data.yeargroup[1] 222 let obj2 = res.data.yeargroup[1]
...@@ -232,11 +232,14 @@ async function handelGetYS003() { ...@@ -232,11 +232,14 @@ async function handelGetYS003() {
232 232
233 233
234 activeName3.value = res.data.yeargroup[1].YEAR 234 activeName3.value = res.data.yeargroup[1].YEAR
235 }
235 } 236 }
236 237
238 let nowYearString = new Date().getFullYear()
237 async function handelGetYS004() { 239 async function handelGetYS004() {
238 const res = await getYS004(url.value, obj.value) 240 const res = await getYS004(url.value, obj.value)
239 let arrList = res.data.blockgroup || [] 241 let arrList = res.data.blockgroup || []
242 dso.value = res.data.DSOTOTAL || 0
240 // let arrList = [ 243 // let arrList = [
241 // { 244 // {
242 // BLOCK: '海上', 245 // BLOCK: '海上',
...@@ -279,9 +282,10 @@ async function handelGetYS004() { ...@@ -279,9 +282,10 @@ async function handelGetYS004() {
279 // ] 282 // ]
280 // } 283 // }
281 // ] 284 // ]
285 if (myType.value) {
282 let haishang 286 let haishang
283 let dalu 287 let dalu
284 dso.value = res.data.DSOTOTAL || 0 288
285 for (const v of arrList) { 289 for (const v of arrList) {
286 if (v.BLOCK === '海上') { 290 if (v.BLOCK === '海上') {
287 haishang = v 291 haishang = v
...@@ -330,7 +334,7 @@ async function handelGetYS004() { ...@@ -330,7 +334,7 @@ async function handelGetYS004() {
330 value: v.DSO, 334 value: v.DSO,
331 day: v.DAYS, 335 day: v.DAYS,
332 itemStyle: v.type == 2 ? styleItem1 : styleItem2, 336 itemStyle: v.type == 2 ? styleItem1 : styleItem2,
333 name: v.type == 2 ? "陆地" : '海上', 337 name: v.BASEJC,
334 type: v.type 338 type: v.type
335 })) 339 }))
336 let arr1 = [] 340 let arr1 = []
...@@ -347,11 +351,87 @@ async function handelGetYS004() { ...@@ -347,11 +351,87 @@ async function handelGetYS004() {
347 if (arr2.length > 0) arr2.push(290) 351 if (arr2.length > 0) arr2.push(290)
348 if (arr1.length > 0) arr1.unshift(150) 352 if (arr1.length > 0) arr1.unshift(150)
349 handelZhu4(listX, dataList, arr1, arr2) 353 handelZhu4(listX, dataList, arr1, arr2)
354 } else {
355 let nowYear=[],lastYear=[]
356 for (const v of arrList[0].list) {
357 if (v.YEAR == nowYearString) {
358 nowYear.push(v)
359 } else {
360 lastYear.push(v)
361 }
362 }
363 let nowYearArr = nowYear.map(v => ({
364 ...v,
365 type: 1
366 })).sort((v1, v2) => v1.MONTH - v2.MONTH)
367 let lastYearArr = lastYear.map(v => ({
368 ...v,
369 type: 2
370 })).sort((v1, v2) => v1.MONTH - v2.MONTH)
371
372 let listX1 = ['','1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月','']
373
374 let styleItem1 = {
375 color: {
376 type: 'linear',
377 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
378 colorStops: [
379 {offset: 0, color: 'rgba(21, 219, 203, 1)'}, // 顶部颜色
380 {offset: 1, color: 'rgba(106, 235, 228, 1)'} // 底部颜色
381 ]
382 },
383 borderColor: 'rgba(0, 255, 190, 1)',
384 borderWidth: 1
385 }
386 let styleItem2 = {
387 color: {
388 type: 'linear',
389 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
390 colorStops: [
391 {offset: 0, color: 'rgba(0, 168, 255, 1)'}, // 顶部颜色
392 {offset: 1, color: 'rgba(77, 197, 243, 1)'} // 底部颜色
393 ]
394 },
395 borderColor: 'rgba(0, 168, 255, 1)',
396 borderWidth: 1
397 }
398
399 let dataList1 = nowYearArr.map(v => ({
400 value: v.DSO,
401 day: v.DAYS,
402 itemStyle: styleItem2,
403 name: nowYearString,
404 type: v.type
405 }))
406 let dataList2 = lastYearArr.map(v => ({
407 value: v.DSO,
408 day: v.DAYS,
409 itemStyle: styleItem1,
410 name: nowYearString-1,
411 type: v.type
412 }))
413 let arr1 = []
414 for (let i=0;i<14;i++) {
415 if (arrList[0].BLOCK == '陆地') {
416 arr1.push(290)
417 } else {
418 arr1.push(150)
419 }
420 }
421 dataList1.unshift('')
422 dataList1.push('')
423 dataList2.unshift('')
424 dataList2.push('')
425 handelZhu4_2(listX1, dataList1,dataList2, arr1)
426 }
427
428
350 } 429 }
351 430
352 async function handelGetYS005() { 431 async function handelGetYS005() {
353 const res = await getYS005(url.value, obj.value) 432 const res = await getYS005(url.value, obj.value)
354 form.value = res.data 433 form.value = res.data
434 form.value.YJSCORE = parseFloat(form.value.YJSCORE).toFixed(2)
355 console.log(isLeader) 435 console.log(isLeader)
356 if (isLeader.value) { 436 if (isLeader.value) {
357 proxy.$refs['InformationRef'].open(form.value.leaderinfo,form.value.APPLYDATE) 437 proxy.$refs['InformationRef'].open(form.value.leaderinfo,form.value.APPLYDATE)
...@@ -393,7 +473,9 @@ const handelBing1 = (arr1, arr2) => { ...@@ -393,7 +473,9 @@ const handelBing1 = (arr1, arr2) => {
393 // arr1 2025 473 // arr1 2025
394 // arr2 2024 474 // arr2 2024
395 chart1 = echarts.init(bing1.value) 475 chart1 = echarts.init(bing1.value)
396 const option = { 476 let option
477 if (myType.value) {
478 option = {
397 tooltip: { 479 tooltip: {
398 trigger: 'item', 480 trigger: 'item',
399 position: ['20%', '30%'], 481 position: ['20%', '30%'],
...@@ -517,23 +599,321 @@ const handelBing1 = (arr1, arr2) => { ...@@ -517,23 +599,321 @@ const handelBing1 = (arr1, arr2) => {
517 name: arr2.YEAR, 599 name: arr2.YEAR,
518 itemStyle: {color: "rgba(240, 255, 0, .5)"} 600 itemStyle: {color: "rgba(240, 255, 0, .5)"}
519 }, 601 },
520 // {value: arr2.TOTAL, name: (arr2.TOTAL / 10000).toFixed(0) + 'W'} 602 // {value: arr2.TOTAL, name: (arr2.TOTAL / 10000).toFixed(0) + 'W'}
603 {
604 value: (arr1.TOTAL / 10000).toFixed() || 0,
605 name: arr1.YEAR
606 }
607 ],
608 itemStyle: {
609 color: 'rgba(1, 162, 237, .3)',
610 },
611 },
612 // {
613 // name: '4',
614 // type: 'pie',
615 // radius: ['38%', '50%'],
616 // center: ['50%', '60%'],
617 // label: {
618 // show: false
619 // },
620 // emphasis: {
621 // scale: false
622 // },
623 // // adjust the start and end angle
624 // startAngle: 180,
625 // endAngle: 360,
626 // data: [{value: 1048, name: ''}],
627 // itemStyle: {
628 // color: {
629 // image: yy,
630 // repeat: 'repeat'
631 // }
632 // }
633 // // itemStyle: {
634 // // color: {
635 // // type: 'linear',
636 // // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
637 // // colorStops: [
638 // // {offset: 0, color: 'rgba(1, 162, 237, 1)'}, // 顶部颜色
639 // // {offset: 1, color: 'rgba(16, 123, 184, 1)'} // 底部颜色
640 // // ]
641 // // },
642 // // },
643 // }
644 ]
645 }
646 } else {
647 option = {
648 tooltip: {
649 trigger: 'item',
650 position: ['20%', '30%'],
651 // valueFormatter: (value) => value + '万',
652 backgroundColor: 'rgba(5, 28, 51, 1)', // 背景色
653 borderColor: 'rgba(46, 151, 198, 1)', // 边框颜色
654 borderWidth: 1, // 边框宽度
655 textStyle: {
656 color: '#fff', // 文字颜色
657 fontSize: 12, // 文字大小
658 },
659 formatter: function (params) {
660 // params.seriesIndex 可以判断是哪个系列（外环或内环）
661 // params.seriesName 可以获取系列名称
662 if (params.seriesIndex === 1) {
663 // 外环的提示内容
664 return `营业收入<br/>${arr1.YEAR}: ${(arr1.TOTAL / 10000).toFixed()}万`;
665 } else if (params.seriesIndex === 2) {
666 // 内环的提示内容
667 return `营业收入<br/>${arr2.YEAR}: ${(arr2.TOTAL / 10000).toFixed()}万`;
668 }
669 }
670 },
671 series: [
672 {
673 name: '',
674 type: 'pie',
675 radius: ['89%', '90%'],
676 center: ['50%', '60%'],
677 emphasis: {
678 scale: false,
679 },
680 label: {
681 show: false,
682 emphasis: {
683 show: false
684 }
685 },
686 startAngle: 180,
687 endAngle: 360,
688 data: [1],
689 itemStyle: {
690 color: 'rgba(1, 162, 237, 1)',
691 },
692 barWidth: 2,
693 tooltip: {
694 trigger: ''
695 }
696 },
697 {
698 name: '营业收入',
699 type: 'pie',
700 radius: ['65%', '85%'],
701 center: ['50%', '60%'],
702 label: {
703 show: true, // 显示标签
704 position: 'center', // 位置居中
705 formatter: toDieThousands((arr1.TOTAL / 10000).toFixed()), // 文字内容
706 color: "#ffff",
707 rich: {
708 total: {
709 fontSize: 5,
710 color: '#fff'
711 }
712 }
713 },
714
715 // adjust the start and end angle
716 startAngle: 180,
717 endAngle: 360,
718 emphasis: {
719 scale: true,
720 label: {
721 show: true,
722 }
723 },
724 data: [
725 {
726 value: (arr1.TOTAL / 10000).toFixed(),
727 name: arr1.YEAR,
728 itemStyle: {color: "rgb(255,217,0)"}
729 },
730 {
731 value: (arr2.TOTAL / 10000).toFixed(),
732 name: arr2.YEAR
733 },
734 ],
735 itemStyle: {
736 color: 'rgba(1, 162, 237, .3)',
737 },
738 },
739 {
740 name: '营业收入',
741 type: 'pie',
742 radius: ['45%', '60%'],
743 center: ['50%', '60%'],
744 label: {
745 show: false, // 显示标签
746 position: 'center', // 位置居中
747 formatter: (arr1.TOTAL / 10000).toFixed(), // 文字内容
748 color: "#ffff",
749 rich: {
750 total: {
751 fontSize: 5,
752 color: '#fff'
753 }
754 }
755 },
756 emphasis: {
757 scale: true,
758 label: {
759 show: true,
760 }
761 },
762 // adjust the start and end angle
763 startAngle: 180,
764 endAngle: 360,
765 data: [
766 {
767 value: (arr2.TOTAL / 10000).toFixed() || 0,
768 name: arr2.YEAR,
769 itemStyle: {color: "rgba(240, 255, 0, .5)"}
770 },
771 // {value: arr2.TOTAL, name: (arr2.TOTAL / 10000).toFixed(0) + 'W'}
772 {
773 value: (arr1.TOTAL / 10000).toFixed() || 0,
774 name: arr1.YEAR
775 }
776 ],
777 itemStyle: {
778 color: 'rgba(1, 162, 237, .3)',
779 },
780 },
781 // {
782 // name: '4',
783 // type: 'pie',
784 // radius: ['38%', '50%'],
785 // center: ['50%', '60%'],
786 // label: {
787 // show: false
788 // },
789 // emphasis: {
790 // scale: false
791 // },
792 // // adjust the start and end angle
793 // startAngle: 180,
794 // endAngle: 360,
795 // data: [{value: 1048, name: ''}],
796 // itemStyle: {
797 // color: {
798 // image: yy,
799 // repeat: 'repeat'
800 // }
801 // }
802 // // itemStyle: {
803 // // color: {
804 // // type: 'linear',
805 // // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
806 // // colorStops: [
807 // // {offset: 0, color: 'rgba(1, 162, 237, 1)'}, // 顶部颜色
808 // // {offset: 1, color: 'rgba(16, 123, 184, 1)'} // 底部颜色
809 // // ]
810 // // },
811 // // },
812 // }
813 ]
814 }
815 }
816
817
818 chart1.setOption(option)
819 autoHover(chart1, option, 0, 2000)
820 }
821 const handelBing2 = (row1, row2) => {
822 chart2 = echarts.init(bing2.value)
823 let option
824 if (myType.value) {
825 option = {
826 tooltip: {
827 trigger: 'item',
828 position: ['20%', '30%'],
829 valueFormatter: (value) => value + '万',
830 backgroundColor: 'rgba(5, 28, 51, 1)', // 背景色
831 borderColor: 'rgba(46, 151, 198, 1)', // 边框颜色
832 borderWidth: 1, // 边框宽度
833 textStyle: {
834 color: '#fff', // 文字颜色
835 fontSize: 12, // 文字大小
836 },
837 formatter: function (params) {
838 // params.seriesIndex 可以判断是哪个系列（外环或内环）
839 // params.seriesName 可以获取系列名称
840 if (params.seriesIndex === 1) {
841 // 外环的提示内容
842 return `应收余额<br/>${params.name}: ${params.value}万`;
843 }
844 }
845 },
846
847 series: [
848 {
849 name: '',
850 type: 'pie',
851 radius: ['99%', '100%'],
852 center: ['50%', '60%'],
853 emphasis: {
854 scale: false,
855 },
856 label: {
857 show: false,
858 emphasis: {
859 show: false
860 }
861 },
862 startAngle: 180,
863 endAngle: 360,
864 data: [1],
865 itemStyle: {
866 color: 'rgba(1, 162, 237, 1)',
867 },
868 barWidth: 2
869 },
870 {
871 name: '应收余额',
872 type: 'pie',
873 radius: ['75%', '95%'],
874 center: ['50%', '60%'],
875 label: {
876 show: true, // 显示标签
877 position: 'center', // 位置居中
878 formatter: toDieThousands((row1.TOTAL / 10000).toFixed() || 0), // 文字内容
879 color: "#ffff",
880 rich: {
881 total: {
882 fontSize: 5,
883 color: '#fff'
884 }
885 }
886 },
887 // adjust the start and end angle
888 startAngle: 180,
889 endAngle: 360,
890 emphasis: {
891 scale: true
892 },
893 data: [
894 {
895 value: (row1.TOTAL / 10000).toFixed() || 0,
896 name: row1.YEAR,
897 itemStyle: {color: "rgba(0, 255, 190,1)"}
898 },
521 { 899 {
522 value: (arr1.TOTAL / 10000).toFixed() || 0, 900 value: (row2.TOTAL / 10000).toFixed() || 0,
523 name: arr1.YEAR 901 name: row2.YEAR
524 } 902 }
525 ], 903 ],
526 itemStyle: { 904 itemStyle: {
527 color: 'rgba(1, 162, 237, .3)', 905 color: 'rgba(1, 162, 237, .5)',
528 }, 906 },
529 }, 907 },
530 // { 908 // {
531 // name: '4', 909 // name: '3',
532 // type: 'pie', 910 // type: 'pie',
533 // radius: ['38%', '50%'], 911 // radius: ['55%', '70%'],
534 // center: ['50%', '60%'], 912 // center: ['50%', '60%'],
535 // label: { 913 // label: {
536 // show: false 914 // show: true,
915 // position: 'center',
916 // formatter: '{b}'
537 // }, 917 // },
538 // emphasis: { 918 // emphasis: {
539 // scale: false 919 // scale: false
...@@ -541,33 +921,24 @@ const handelBing1 = (arr1, arr2) => { ...@@ -541,33 +921,24 @@ const handelBing1 = (arr1, arr2) => {
541 // // adjust the start and end angle 921 // // adjust the start and end angle
542 // startAngle: 180, 922 // startAngle: 180,
543 // endAngle: 360, 923 // endAngle: 360,
544 // data: [{value: 1048, name: ''}], 924 // data: [
925 // {value: 1048,},
926 // ],
545 // itemStyle: { 927 // itemStyle: {
546 // color: { 928 // color: {
547 // image: yy, 929 // type: 'linear',
548 // repeat: 'repeat' 930 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
549 // } 931 // colorStops: [
550 // } 932 // {offset: 0, color: 'rgba(1, 162, 237, 1)'}, // 顶部颜色
551 // // itemStyle: { 933 // {offset: 1, color: 'rgba(16, 123, 184, 1)'} // 底部颜色
552 // // color: { 934 // ]
553 // // type: 'linear', 935 // },
554 // // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变 936 // },
555 // // colorStops: [ 937 // },
556 // // {offset: 0, color: 'rgba(1, 162, 237, 1)'}, // 顶部颜色
557 // // {offset: 1, color: 'rgba(16, 123, 184, 1)'} // 底部颜色
558 // // ]
559 // // },
560 // // },
561 // }
562 ] 938 ]
563 } 939 }
564 940 } else {
565 chart1.setOption(option) 941 option = {
566 autoHover(chart1, option, 0, 2000)
567 }
568 const handelBing2 = (row1, row2) => {
569 chart2 = echarts.init(bing2.value)
570 const option = {
571 tooltip: { 942 tooltip: {
572 trigger: 'item', 943 trigger: 'item',
573 position: ['20%', '30%'], 944 position: ['20%', '30%'],
...@@ -593,7 +964,7 @@ const handelBing2 = (row1, row2) => { ...@@ -593,7 +964,7 @@ const handelBing2 = (row1, row2) => {
593 { 964 {
594 name: '', 965 name: '',
595 type: 'pie', 966 type: 'pie',
596 radius: ['99%', '100%'], 967 radius: ['89%', '90%'],
597 center: ['50%', '60%'], 968 center: ['50%', '60%'],
598 emphasis: { 969 emphasis: {
599 scale: false, 970 scale: false,
...@@ -615,7 +986,7 @@ const handelBing2 = (row1, row2) => { ...@@ -615,7 +986,7 @@ const handelBing2 = (row1, row2) => {
615 { 986 {
616 name: '应收余额', 987 name: '应收余额',
617 type: 'pie', 988 type: 'pie',
618 radius: ['75%', '95%'], 989 radius: ['65%', '85%'],
619 center: ['50%', '60%'], 990 center: ['50%', '60%'],
620 label: { 991 label: {
621 show: true, // 显示标签 992 show: true, // 显示标签
...@@ -682,6 +1053,8 @@ const handelBing2 = (row1, row2) => { ...@@ -682,6 +1053,8 @@ const handelBing2 = (row1, row2) => {
682 // }, 1053 // },
683 ] 1054 ]
684 } 1055 }
1056 }
1057
685 1058
686 chart2.setOption(option) 1059 chart2.setOption(option)
687 autoHover(chart2, option, 0, 2000) 1060 autoHover(chart2, option, 0, 2000)
...@@ -851,6 +1224,12 @@ const handelZhu1 = (row1, row2) => { ...@@ -851,6 +1224,12 @@ const handelZhu1 = (row1, row2) => {
851 type: 'solid' 1224 type: 'solid'
852 } 1225 }
853 }, 1226 },
1227 axisLabel: {
1228 formatter: function(value, index) {
1229 // 只显示奇数索引的标签(从0开始计数)
1230 return index % 2 === 0 ? value : '';
1231 }
1232 }
854 } 1233 }
855 ], 1234 ],
856 yAxis: [ 1235 yAxis: [
...@@ -955,9 +1334,9 @@ const handelZhu2 = (row1, row2) => { ...@@ -955,9 +1334,9 @@ const handelZhu2 = (row1, row2) => {
955 }, 1334 },
956 grid: { 1335 grid: {
957 top: "25%", 1336 top: "25%",
958 left: '3%', 1337 left: '0%',
959 right: '4%', 1338 right: '0%',
960 bottom: '3%', 1339 bottom: '1%',
961 containLabel: true 1340 containLabel: true
962 }, 1341 },
963 xAxis: [ 1342 xAxis: [
...@@ -972,6 +1351,13 @@ const handelZhu2 = (row1, row2) => { ...@@ -972,6 +1351,13 @@ const handelZhu2 = (row1, row2) => {
972 type: 'solid' 1351 type: 'solid'
973 } 1352 }
974 }, 1353 },
1354 axisLabel: {
1355 interval:0,
1356 formatter: function(value, index) {
1357 // 只显示奇数索引的标签(从0开始计数)
1358 return index % 2 === 0 ? value : '';
1359 }
1360 },
975 } 1361 }
976 ], 1362 ],
977 yAxis: [ 1363 yAxis: [
...@@ -1095,9 +1481,9 @@ const handelZhu3 = (row1, row2) => { ...@@ -1095,9 +1481,9 @@ const handelZhu3 = (row1, row2) => {
1095 }, 1481 },
1096 grid: { 1482 grid: {
1097 top: "18%", 1483 top: "18%",
1098 left: '3%', 1484 left: '0%',
1099 right: '4%', 1485 right: '0%',
1100 bottom: '3%', 1486 bottom: '1%',
1101 containLabel: true 1487 containLabel: true
1102 }, 1488 },
1103 xAxis: [ 1489 xAxis: [
...@@ -1113,6 +1499,13 @@ const handelZhu3 = (row1, row2) => { ...@@ -1113,6 +1499,13 @@ const handelZhu3 = (row1, row2) => {
1113 type: 'solid', 1499 type: 'solid',
1114 } 1500 }
1115 }, 1501 },
1502 axisLabel: {
1503 padding: [0, 0, 0, 20],
1504 formatter: function(value, index) {
1505 // 只显示奇数索引的标签(从0开始计数)
1506 return index % 2 === 0 ? value : '';
1507 }
1508 }
1116 } 1509 }
1117 ], 1510 ],
1118 yAxis: [ 1511 yAxis: [
...@@ -1264,6 +1657,9 @@ const handelZhu4 = (listX, dataList, arr1, arr2) => { ...@@ -1264,6 +1657,9 @@ const handelZhu4 = (listX, dataList, arr1, arr2) => {
1264 type: 'solid' 1657 type: 'solid'
1265 } 1658 }
1266 }, 1659 },
1660 axisLabel:{
1661 padding: [0, 0, 0, 6]
1662 }
1267 } 1663 }
1268 ], 1664 ],
1269 yAxis: [ 1665 yAxis: [
...@@ -1316,7 +1712,7 @@ const handelZhu4 = (listX, dataList, arr1, arr2) => { ...@@ -1316,7 +1712,7 @@ const handelZhu4 = (listX, dataList, arr1, arr2) => {
1316 borderColor: 'rgba(0, 168, 255, .5)', 1712 borderColor: 'rgba(0, 168, 255, .5)',
1317 borderWidth: 1 1713 borderWidth: 1
1318 }, 1714 },
1319 barWidth: '30%', 1715 barWidth: 0,
1320 }, 1716 },
1321 { 1717 {
1322 name: '陆地', 1718 name: '陆地',
...@@ -1438,6 +1834,199 @@ const handelZhu4 = (listX, dataList, arr1, arr2) => { ...@@ -1438,6 +1834,199 @@ const handelZhu4 = (listX, dataList, arr1, arr2) => {
1438 // autoHover(chart44, option, 0, 2000) 1834 // autoHover(chart44, option, 0, 2000)
1439 } 1835 }
1440 1836
1837 const handelZhu4_2 = (listX1, dataList1,dataList2, arr1) => {
1838 chart44 = echarts.init(zhuRef4.value)
1839 const option = {
1840 tooltip: {
1841 trigger: 'axis',
1842 axisPointer: {
1843 type: 'shadow'
1844 },
1845 valueFormatter: (value) => value + '天',
1846 backgroundColor: 'rgba(5, 28, 51, 1)', // 背景色
1847 borderColor: 'rgba(46, 151, 198, 1)', // 边框颜色
1848 borderWidth: 1, // 边框宽度
1849 textStyle: {
1850 color: '#fff', // 文字颜色
1851 fontSize: 12, // 文字大小
1852 },
1853 // 过滤数据
1854 formatter: (row) => {
1855 let htmlStr = ''
1856 row.forEach(item => {
1857 if (item.seriesType === "bar" &&item.data.itemStyle) {
1858 htmlStr += `<div style="color: #fff;font-size: 12px;">${item.data.name}</div>
1859 <div style="color: #fff;font-size: 12px;">
1860 <span style="background:${item.data.itemStyle.borderColor};display: inline-block;width: 10px;height: 10px;border-radius: 50%;"></span>
1861 <span style="margin-right: 20px;">DSO</span>
1862 ${item?.data?.value}
1863 </div>`
1864 }
1865 })
1866 return htmlStr
1867 }
1868 // <div style="color: #fff;font-size: 12px;">
1869 // <span style="background:${row[0].data.itemStyle.borderColor};display: inline-block;width: 10px;height: 10px;border-radius: 50%;"></span>
1870 // <span style="margin-right: 20px;">天数</span>
1871 // ${row[0]?.data?.day}
1872 // </div>
1873 },
1874 legend: {
1875 textStyle: {
1876 color: '#FFF'
1877 },
1878 },
1879 grid: {
1880 left: '3%',
1881 right: '4%',
1882 bottom: '3%',
1883 top: "20%",
1884 containLabel: true
1885 },
1886 xAxis: [
1887 {
1888 type: 'category',
1889 stack: 'Ad',
1890 // data: ['山西', '陕西', '新疆', '伊拉克', '塘沽', '深圳', '湛江', '汉南', '上海'],
1891 data: listX1,
1892 axisLine: {
1893 show: true,
1894 lineStyle: {
1895 color: '#fff',
1896 width: 2,
1897 type: 'solid'
1898 }
1899 },
1900 axisLabel: {
1901 interval:0,
1902 formatter: function(value, index) {
1903 // 只显示奇数索引的标签(从0开始计数)
1904 return index % 2 === 1 ? value : '';
1905 }
1906 }
1907 }
1908 ],
1909 yAxis: [
1910 {
1911 type: 'value',
1912 name: '',
1913 axisLine: {
1914 show: true,
1915 lineStyle: {
1916 color: '#fff',
1917 width: 1,
1918 type: 'solid'
1919 }
1920 },
1921 axisLabel: {
1922 show:false
1923 // formatter: '{value}w' // 在数值后添加单位
1924 },
1925 splitLine: {
1926 show: true, // 默认false，需显式开启
1927 lineStyle: {
1928 color: 'rgba(255, 255, 255, .2)', // 绿色轴线
1929 }
1930 }
1931 }
1932 ],
1933 series: [
1934 {
1935 name: nowYearString,
1936 type: 'bar',
1937 barGap: 0,
1938 data:dataList1,
1939 emphasis: {
1940 focus: 'series',
1941 },
1942 // data: [30, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390],
1943 // data: listHai,
1944 itemStyle: {
1945 color: {
1946 type: 'linear',
1947 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
1948 colorStops: [
1949 {offset: 0, color: 'rgba(0, 168, 255, 1)'}, // 顶部颜色
1950 {offset: 1, color: 'rgba(77, 197, 243, 1)'} // 底部颜色
1951 ]
1952 },
1953 borderColor: 'rgba(0, 168, 255, .5)',
1954 borderWidth: 1
1955 },
1956 barWidth: '30%',
1957 },
1958 {
1959 name: nowYearString-1,
1960 type: 'bar',
1961 barGap: 0,
1962 emphasis: {
1963 focus: 'series',
1964 },
1965 // data: [320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390],
1966 data: dataList2,
1967 itemStyle: {
1968 color: {
1969 type: 'linear',
1970 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
1971 colorStops: [
1972 {offset: 0, color: 'rgba(21, 219, 203, 1)'}, // 顶部颜色
1973 {offset: 1, color: 'rgba(106, 235, 228, 1)'} // 底部颜色
1974 ]
1975 },
1976 // borderColor: 'rgba(0, 255, 190, .5)',
1977 // borderWidth: 1
1978 },
1979 barWidth: '30%',
1980 },
1981 {
1982 type: 'line',
1983 smooth: false,
1984 lineStyle: {
1985 width: 1
1986 },
1987 showSymbol: true,
1988 areaStyle: {
1989 opacity: 0.2,
1990 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
1991 // {
1992 // offset: 0,
1993 // color: 'rgb(128, 255, 165)'
1994 // },
1995 {
1996 offset: 0.3,
1997 color: 'rgb(1, 191, 236)'
1998 }
1999 ])
2000 },
2001 emphasis: {
2002 focus: 'series',
2003 label: false,
2004 disabled: true,
2005 },
2006 data: arr1,
2007 label: {
2008 show: true,
2009 position: 'right', // 起始点标签放在左侧
2010 formatter: function (params) {
2011 // 仅当为第一个数据点时显示数值
2012 if (params.dataIndex === arr1.length - 1) {
2013 return params.value; // 显示数值
2014 }
2015 return ''; // 其他点不显示
2016 },
2017 fontSize: 13,
2018 color: '#fff',
2019 // fontWeight: 'bold',
2020 opacity: 1, // 关键：取消透明度
2021 shadowBlur: 0 // 取消阴影
2022 },
2023 },
2024 ]
2025 }
2026 chart44.setOption(option)
2027 // autoHover(chart44, option, 0, 2000)
2028 }
2029
1441 function autoHover(myChart, option, index, time) { 2030 function autoHover(myChart, option, index, time) {
1442 autoToolTip(myChart, option, { 2031 autoToolTip(myChart, option, {
1443 interval: time,// 轮播间隔时间 默认2s 2032 interval: time,// 轮播间隔时间 默认2s
......
src/viewsPc/vip/components/information.vue
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
7 width="33%" 7 width="33%"
8 > 8 >
9 <div class="son"> 9 <div class="son">
10 <div style="color: #fff;font-size: 15px">填写日期: {{myDate}}</div> 10 <div style="font-family: SimHei, serif;font-weight: 400;font-size: 20px;color: #FFFFFF;">更新日期: {{myDate}}</div>
11 <p v-for="val in list" :key="val" class="row"> 11 <p v-for="val in list" :key="val" class="row">
12 <span></span> {{ val }} 12 <span></span> {{ val }}
13 </p> 13 </p>
......
src/viewsPc/vip/leftPage.vue
...@@ -105,7 +105,7 @@ const lineRef = ref(null) ...@@ -105,7 +105,7 @@ const lineRef = ref(null)
105 const payeeRef = ref(null) 105 const payeeRef = ref(null)
106 106
107 const type3 = ref('0') 107 const type3 = ref('0')
108 const type4 = ref(['1']) 108 const type4 = ref(['1','2'])
109 const type2 = ref([]) 109 const type2 = ref([])
110 const type1 = ref(['1', '2']) 110 const type1 = ref(['1', '2'])
111 111
...@@ -181,7 +181,7 @@ async function handelGetYS006() { ...@@ -181,7 +181,7 @@ async function handelGetYS006() {
181 set2.value.push({ 181 set2.value.push({
182 value: v1.TOTAL, 182 value: v1.TOTAL,
183 name: v1.BASEJC, 183 name: v1.BASEJC,
184 type: v1.BLOCK 184 type: v1.BLOCK,
185 }) 185 })
186 } else { 186 } else {
187 set3.value.push({ 187 set3.value.push({
...@@ -222,6 +222,16 @@ async function handelGetYS006() { ...@@ -222,6 +222,16 @@ async function handelGetYS006() {
222 return b.value - a.value 222 return b.value - a.value
223 }) 223 })
224 224
225 let colorList = ['#A4E6FF', '#6ED8FF', '#2FA9FF', '#187CEC', '#0142DA']
226 set2.value.forEach((n,index) => {
227 n.itemStyle = {borderColor: colorList[index], borderWidth: 2}
228 })
229
230 let colorList2 = ['#FEFFD3', '#FFF59C', '#F7E20F', '#F7CE10', '#D29F05']
231 set3.value.forEach((n,index) => {
232 n.itemStyle = {borderColor: colorList2[index], borderWidth: 2}
233 })
234
225 setA(set1.value, set2.value, set3.value) 235 setA(set1.value, set2.value, set3.value)
226 setB( 236 setB(
227 type1.value.includes('1') ? s1.value : [], 237 type1.value.includes('1') ? s1.value : [],
...@@ -401,9 +411,9 @@ const setA = (arr, arr2, arr3) => { ...@@ -401,9 +411,9 @@ const setA = (arr, arr2, arr3) => {
401 orient: 'vertical', 411 orient: 'vertical',
402 data: arr2, 412 data: arr2,
403 right: '5%', 413 right: '5%',
404 top: '12%', 414 top: 20,
405 bottom: 20, 415 bottom: '25%',
406 itemGap:5, 416 itemGap:10,
407 textStyle: { 417 textStyle: {
408 color: '#FFF', 418 color: '#FFF',
409 rich: { 419 rich: {
...@@ -414,7 +424,7 @@ const setA = (arr, arr2, arr3) => { ...@@ -414,7 +424,7 @@ const setA = (arr, arr2, arr3) => {
414 width:40, 424 width:40,
415 }, 425 },
416 b:{ 426 b:{
417 float:'right', 427 align:'right',
418 fontSize: 12, 428 fontSize: 12,
419 lineHeight: 12, 429 lineHeight: 12,
420 width:40, 430 width:40,
...@@ -426,7 +436,7 @@ const setA = (arr, arr2, arr3) => { ...@@ -426,7 +436,7 @@ const setA = (arr, arr2, arr3) => {
426 width:40, 436 width:40,
427 }, 437 },
428 d:{ 438 d:{
429 float:'right', 439 align:'right',
430 fontSize: 12, 440 fontSize: 12,
431 lineHeight: 22, 441 lineHeight: 22,
432 width:40, 442 width:40,
...@@ -463,9 +473,9 @@ const setA = (arr, arr2, arr3) => { ...@@ -463,9 +473,9 @@ const setA = (arr, arr2, arr3) => {
463 orient: 'vertical', 473 orient: 'vertical',
464 data: arr3, 474 data: arr3,
465 right: '30%', 475 right: '30%',
466 top: '12%', 476 top: 20,
467 bottom: 20, 477 bottom: '25%',
468 itemGap:5, 478 itemGap:10,
469 textStyle: { 479 textStyle: {
470 color: '#FFF', 480 color: '#FFF',
471 rich: { 481 rich: {
...@@ -476,7 +486,7 @@ const setA = (arr, arr2, arr3) => { ...@@ -476,7 +486,7 @@ const setA = (arr, arr2, arr3) => {
476 width:40, 486 width:40,
477 }, 487 },
478 b:{ 488 b:{
479 float:'right', 489 align:'right',
480 fontSize: 12, 490 fontSize: 12,
481 lineHeight: 12, 491 lineHeight: 12,
482 width:40, 492 width:40,
...@@ -488,7 +498,7 @@ const setA = (arr, arr2, arr3) => { ...@@ -488,7 +498,7 @@ const setA = (arr, arr2, arr3) => {
488 width:40, 498 width:40,
489 }, 499 },
490 d:{ 500 d:{
491 float:'right', 501 align:'right',
492 fontSize: 12, 502 fontSize: 12,
493 lineHeight: 22, 503 lineHeight: 22,
494 width:40, 504 width:40,
...@@ -525,19 +535,19 @@ const setA = (arr, arr2, arr3) => { ...@@ -525,19 +535,19 @@ const setA = (arr, arr2, arr3) => {
525 graphic: { 535 graphic: {
526 elements: [{ 536 elements: [{
527 type: 'text', 537 type: 'text',
528 bottom: '15%', // 可以调整位置，例如使用 'bottom' 来定位到图例下方 538 top: 157, // 可以调整位置，例如使用 'bottom' 来定位到图例下方
529 right: '33%', 539 right: '31%',
530 style: { 540 style: {
531 text: '陆地：' + sumPercent2+'%', // 这里可以计算合计值并显示 541 text: '陆地： ' + sumPercent2+'%', // 这里可以计算合计值并显示
532 fill: '#fff', // 文本颜色 542 fill: '#fff', // 文本颜色
533 fontSize: 12, // 文本大小 543 fontSize: 12, // 文本大小
534 }, 544 },
535 },{ 545 },{
536 type: 'text', 546 type: 'text',
537 bottom: '15%', // 可以调整位置，例如使用 'bottom' 来定位到图例下方 547 top: 157, // 可以调整位置，例如使用 'bottom' 来定位到图例下方
538 right: '8%', 548 right: '6%',
539 style: { 549 style: {
540 text: '海上：' + sumPercent1+'%', // 这里可以计算合计值并显示 550 text: '海上： ' + sumPercent1+'%', // 这里可以计算合计值并显示
541 fill: '#fff', // 文本颜色 551 fill: '#fff', // 文本颜色
542 fontSize: 12, // 文本大小 552 fontSize: 12, // 文本大小
543 } 553 }
...@@ -591,8 +601,6 @@ const setA = (arr, arr2, arr3) => { ...@@ -591,8 +601,6 @@ const setA = (arr, arr2, arr3) => {
591 radius: ['30%', '70%'], 601 radius: ['30%', '70%'],
592 avoidLabelOverlap: false, 602 avoidLabelOverlap: false,
593 itemStyle: { 603 itemStyle: {
594 borderWidth: 2,
595 borderColor: 'rgba(255,0,0,0.05)',
596 color: function (params) { 604 color: function (params) {
597 // 自定义颜色 605 // 自定义颜色
598 let colorList = [ 606 let colorList = [
...@@ -611,7 +619,7 @@ const setA = (arr, arr2, arr3) => { ...@@ -611,7 +619,7 @@ const setA = (arr, arr2, arr3) => {
611 show: false, 619 show: false,
612 fontSize: 20, 620 fontSize: 20,
613 fontWeight: 'bold' 621 fontWeight: 'bold'
614 } 622 },
615 }, 623 },
616 labelLine: { 624 labelLine: {
617 show: false 625 show: false
...@@ -674,7 +682,12 @@ const setB = (arr1, arr2, arr3, arr4) => { ...@@ -674,7 +682,12 @@ const setB = (arr1, arr2, arr3, arr4) => {
674 type: 'solid' 682 type: 'solid'
675 } 683 }
676 }, 684 },
677 685 axisLabel: {
686 formatter: function(value, index) {
687 // 只显示奇数索引的标签(从0开始计数)
688 return index % 2 === 0 ? value : '';
689 }
690 }
678 }, 691 },
679 ], 692 ],
680 yAxis: [ 693 yAxis: [
...@@ -827,6 +840,18 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => { ...@@ -827,6 +840,18 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => {
827 ${row.data?.info ? row.data?.info?.replaceAll('万', '万<br>') : ''} 840 ${row.data?.info ? row.data?.info?.replaceAll('万', '万<br>') : ''}
828 </div> 841 </div>
829 `; 842 `;
843 },
844 extraCssText: `
845 max-height: 150px;
846 overflow: auto !important;
847 padding-right: 10px; /* 为滚动条留出空间 */
848 `,
849 enterable: true, // 允许鼠标进入tooltip
850 axisPointer: {
851 type: 'cross',
852 label: {
853 backgroundColor: '#6a7985'
854 }
830 } 855 }
831 }, 856 },
832 legend: [ 857 legend: [
...@@ -870,6 +895,12 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => { ...@@ -870,6 +895,12 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => {
870 type: 'solid' 895 type: 'solid'
871 } 896 }
872 }, 897 },
898 axisLabel: {
899 formatter: function(value, index) {
900 // 只显示奇数索引的标签(从0开始计数)
901 return index % 2 === 0 ? value : '';
902 }
903 }
873 } 904 }
874 ], 905 ],
875 yAxis: [ 906 yAxis: [
...@@ -913,12 +944,12 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => { ...@@ -913,12 +944,12 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => {
913 type: 'linear', 944 type: 'linear',
914 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变 945 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
915 colorStops: [ 946 colorStops: [
916 {offset: 0, color: 'rgba(141, 251, 116,1 )'}, // 顶部颜色 947 {offset: 0, color: '#18c877'}, // 顶部颜色
917 // {offset: 1, color: 'rgba(70, 232, 116,1 )'} // 底部颜色 948 // {offset: 1, color: 'rgba(70, 232, 116,1 )'} // 底部颜色
918 ] 949 ]
919 }, 950 },
920 }, 951 },
921 barWidth: '40%' 952 barWidth: '30%'
922 }, 953 },
923 { 954 {
924 name: `${Year1}收费单待签`, 955 name: `${Year1}收费单待签`,
...@@ -935,12 +966,12 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => { ...@@ -935,12 +966,12 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => {
935 type: 'linear', 966 type: 'linear',
936 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变 967 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
937 colorStops: [ 968 colorStops: [
938 {offset: 0, color: 'rgba(1, 255, 133, 1)'}, // 顶部颜色 969 {offset: 0, color: '#69c818'}, // 顶部颜色
939 // {offset: 1, color: 'rgba(234, 216, 18, 1)'} // 底部颜色 970 // {offset: 1, color: 'rgba(234, 216, 18, 1)'} // 底部颜色
940 ] 971 ]
941 }, 972 },
942 }, 973 },
943 barWidth: '40%' 974 barWidth: '30%'
944 }, 975 },
945 { 976 {
946 name: `${Year1}合同待签`, 977 name: `${Year1}合同待签`,
...@@ -962,7 +993,7 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => { ...@@ -962,7 +993,7 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => {
962 ] 993 ]
963 }, 994 },
964 }, 995 },
965 barWidth: '40%' 996 barWidth: '30%'
966 }, 997 },
967 998
968 { 999 {
...@@ -980,12 +1011,12 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => { ...@@ -980,12 +1011,12 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => {
980 type: 'linear', 1011 type: 'linear',
981 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变 1012 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
982 colorStops: [ 1013 colorStops: [
983 {offset: 0, color: 'rgba(109, 217, 255,1)'}, 1014 {offset: 0, color: '#2FA9FF'},
984 // {offset: 1, color: 'rgba(76, 175, 80, 1)'} 1015 // {offset: 1, color: 'rgba(76, 175, 80, 1)'}
985 ] 1016 ]
986 }, 1017 },
987 }, 1018 },
988 barWidth: '40%' 1019 barWidth: '30%'
989 }, 1020 },
990 { 1021 {
991 name: `${Year2}收费单待签`, 1022 name: `${Year2}收费单待签`,
...@@ -1002,7 +1033,7 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => { ...@@ -1002,7 +1033,7 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => {
1002 type: 'linear', 1033 type: 'linear',
1003 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变 1034 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
1004 colorStops: [ 1035 colorStops: [
1005 {offset: 0, color: 'rgba(47, 169, 254, 1)'}, 1036 {offset: 0, color: '#187CEC'},
1006 // {offset: 1, color: 'rgba(96, 181, 255, 1)'} 1037 // {offset: 1, color: 'rgba(96, 181, 255, 1)'}
1007 1038
1008 // {offset: 0, color: 'rgba(142, 36, 170, 1)'}, 1039 // {offset: 0, color: 'rgba(142, 36, 170, 1)'},
...@@ -1013,7 +1044,7 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => { ...@@ -1013,7 +1044,7 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => {
1013 ] 1044 ]
1014 }, 1045 },
1015 }, 1046 },
1016 barWidth: '40%' 1047 barWidth: '30%'
1017 }, 1048 },
1018 { 1049 {
1019 name: `${Year2}合同待签`, 1050 name: `${Year2}合同待签`,
...@@ -1037,7 +1068,7 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => { ...@@ -1037,7 +1068,7 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => {
1037 ] 1068 ]
1038 }, 1069 },
1039 }, 1070 },
1040 barWidth: '40%' 1071 barWidth: '30%'
1041 }, 1072 },
1042 ] 1073 ]
1043 } 1074 }
...@@ -1179,11 +1210,12 @@ onUnmounted(() => { ...@@ -1179,11 +1210,12 @@ onUnmounted(() => {
1179 :deep(.el-select__placeholder) { 1210 :deep(.el-select__placeholder) {
1180 font-family: PingFang SC, serif; 1211 font-family: PingFang SC, serif;
1181 font-weight: 500; 1212 font-weight: 500;
1182 color: #13C1F4; 1213 color: #fff;
1183 text-shadow: 0px 2px 0px rgba(0, 1, 1, 0.41); 1214 //text-shadow: 0 2px 0 rgba(0, 1, 1, 0.41);
1184 background: linear-gradient(180deg, #75E2E9 0%, #FFFFFF 100%); 1215 //background: linear-gradient(180deg, #75E2E9 0%, #FFFFFF 100%);
1216 background-color: rgb(33, 123, 188, .1); /* 背景色 */
1185 -webkit-background-clip: text; 1217 -webkit-background-clip: text;
1186 -webkit-text-fill-color: transparent 1218 //-webkit-text-fill-color: transparent
1187 } 1219 }
1188 1220
1189 :deep(.el-tag--info) { 1221 :deep(.el-tag--info) {
......
src/viewsPc/vip/rightPage.vue
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
3 <div class="chartCard"> 3 <div class="chartCard">
4 <div class="title">开票情况</div> 4 <div class="title">开票情况</div>
5 <div class="po_right" style="justify-content: end"> 5 <div class="po_right" style="justify-content: end">
6 <div class="itemBox"> 6 <div class="itemBox" v-if="myType">
7 <el-select 7 <el-select
8 v-model="select7" 8 v-model="select7"
9 class="select" 9 class="select"
...@@ -23,19 +23,18 @@ ...@@ -23,19 +23,18 @@
23 <div class="chartCard mt30"> 23 <div class="chartCard mt30">
24 <div class="title">回款情况</div> 24 <div class="title">回款情况</div>
25 <div class="po_right" style="justify-content: end;"> 25 <div class="po_right" style="justify-content: end;">
26 <div class="itemBox" style="margin-right: 5px;width: 45%;"> 26 <div class="itemBox" style="margin-right: 5px;width: 45%;" v-if="myType">
27 <el-select 27 <el-select
28 v-model="type8" 28 v-model="type8"
29 class="select" 29 class="select"
30 placeholder="全部基地" 30 placeholder="全部基地"
31 collapse-tags 31 collapse-tags
32 multiple
33 size="small" 32 size="small"
34 @change="handelType8"> 33 @change="handelType8">
35 <el-option v-for="(item,index) in monthList" :label="item" :value="index"/> 34 <el-option v-for="(item,index) in monthList" :label="item" :value="index"/>
36 </el-select> 35 </el-select>
37 </div> 36 </div>
38 <div class="itemBox"> 37 <div class="itemBox" v-if="myType">
39 <el-select 38 <el-select
40 v-model="list8Y" 39 v-model="list8Y"
41 class="select" 40 class="select"
...@@ -76,18 +75,23 @@ const props = defineProps({ ...@@ -76,18 +75,23 @@ const props = defineProps({
76 type: Object, 75 type: Object,
77 default: () => { 76 default: () => {
78 } 77 }
78 },
79 type: {
80 type: Boolean,
81 default: false
79 } 82 }
80 }) 83 })
81 84
82 const url = computed(() => props.url) 85 const url = computed(() => props.url)
83 const obj = computed(() => props.obj) 86 const obj = computed(() => props.obj)
87 const myType = computed(() => props.type)
84 const zhuRef = ref(null) 88 const zhuRef = ref(null)
85 const lineRef = ref(null) 89 const lineRef = ref(null)
86 const overdueRef = ref(null) 90 const overdueRef = ref(null)
87 const kindList = ref(['文书', '婚姻', '图书', '档案', '司法', '环保', '音频', '视频', '会计', '其他']) 91 const kindList = ref(['文书', '婚姻', '图书', '档案', '司法', '环保', '音频', '视频', '会计', '其他'])
88 const dataA = ref([80, 60, 55, 62, 50, 55, 60, 62, 48, 53]) 92 const dataA = ref([80, 60, 55, 62, 50, 55, 60, 62, 48, 53])
89 const radioA = ref('month') 93 const radioA = ref('month')
90 const monthList = ref(["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"]) 94 const monthList = ref(["累计","1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"])
91 95
92 const itemStyleList = ref([ 96 const itemStyleList = ref([
93 { 97 {
...@@ -184,9 +188,10 @@ const itemStyleList = ref([ ...@@ -184,9 +188,10 @@ const itemStyleList = ref([
184 188
185 const list9 = ref([]) 189 const list9 = ref([])
186 const list8Y = ref([]) 190 const list8Y = ref([])
187 const type8 = ref([]) 191 const type8 = ref(0)
188 const month8 = ref([]) 192 const month8 = ref([])
189 const year8 = ref([]) 193 const year8 = ref([])
194 const nowYear = new Date().getFullYear()
190 const list8 = ref([ 195 const list8 = ref([
191 { 196 {
192 BASE: '上海分公司1', 197 BASE: '上海分公司1',
...@@ -293,13 +298,15 @@ async function handelGetYS007() { ...@@ -293,13 +298,15 @@ async function handelGetYS007() {
293 const res = await getYS007(url.value, obj.value) 298 const res = await getYS007(url.value, obj.value)
294 list7.value = res.data.list 299 list7.value = res.data.list
295 BC.value = res.data.BC * 100 || 0 300 BC.value = res.data.BC * 100 || 0
296 list7.value.sort((a, b) => a.EXECOST - b.EXECOST); 301 let firstVal = ''
297 list7Y.value = [] 302 list7Y.value = []
298 select7.value = [] 303 select7.value = []
299 let arr1 = [] 304 let arr1 = []
300 let arr2 = [] 305 let arr2 = []
301 let arr3 = [] 306 let arr3 = []
302 307
308 if (myType.value) {
309 list7.value.sort((a, b) => a.EXECOST - b.EXECOST);
303 for (const val of list7.value) { 310 for (const val of list7.value) {
304 select7.value.push(val.BASEJC) 311 select7.value.push(val.BASEJC)
305 list7Y.value.push({ 312 list7Y.value.push({
...@@ -320,14 +327,33 @@ async function handelGetYS007() { ...@@ -320,14 +327,33 @@ async function handelGetYS007() {
320 }) 327 })
321 arr3.push(val.EXERATIO) 328 arr3.push(val.EXERATIO)
322 } 329 }
323
324 const firstAbove = list7Y.value.find(v => v.name >= BC.value); 330 const firstAbove = list7Y.value.find(v => v.name >= BC.value);
325 let firstVal = ''
326 if (firstAbove && firstAbove.value) { 331 if (firstAbove && firstAbove.value) {
327 firstVal = firstAbove.value 332 firstVal = firstAbove.value
328 } else { 333 } else {
329 firstVal = '' 334 firstVal = ''
330 } 335 }
336 } else {
337 for (const val of list7.value) {
338 list7Y.value.push({
339 name: (val.EXERATIO * 100).toFixed(),
340 value: val.MONTH,
341 })
342 arr1.push({
343 value: Math.round(val.PLANCOST / 10000),
344 // itemStyle: val.EXERATIO * 100 >= BC.value ? color1 : color3,
345 itemStyle: color4,
346 name: (val.EXERATIO * 100).toFixed() + '%',
347 })
348 arr2.push({
349 value: Math.round(val.EXECOST / 10000),
350 name: (val.EXERATIO * 100).toFixed() + '%',
351 // itemStyle: val.EXERATIO * 100 >= BC.value ? color2 : color4
352 itemStyle: color2
353 })
354 arr3.push(val.EXERATIO)
355 }
356 }
331 setA(list7Y.value, arr1, arr2, arr3, firstVal, BC.value) 357 setA(list7Y.value, arr1, arr2, arr3, firstVal, BC.value)
332 } 358 }
333 359
...@@ -368,14 +394,12 @@ function handelSelect7() { ...@@ -368,14 +394,12 @@ function handelSelect7() {
368 394
369 async function handelGetYS008() { 395 async function handelGetYS008() {
370 const res = await getYS008(url.value, obj.value) 396 const res = await getYS008(url.value, obj.value)
371 let nowMonth = new Date().getMonth()
372 for (let i = 0;i <= nowMonth;i++) {
373 type8.value.push(i)
374 }
375 list8.value = res.data.list || [] 397 list8.value = res.data.list || []
398 let arr,arr2
376 list8Y.value = [] 399 list8Y.value = []
377 month8.value = [] 400 month8.value = []
378 year8.value = [] 401 year8.value = []
402 if (myType.value) {
379 list8.value.sort((a, b) => a.HKQKMONTH - b.HKQKMONTH); 403 list8.value.sort((a, b) => a.HKQKMONTH - b.HKQKMONTH);
380 for (let i = 0; i < list8.value.length; i++) { 404 for (let i = 0; i < list8.value.length; i++) {
381 let monthValue = [] 405 let monthValue = []
...@@ -393,8 +417,18 @@ async function handelGetYS008() { ...@@ -393,8 +417,18 @@ async function handelGetYS008() {
393 itemStyle: list8.value[i].itemStyle, 417 itemStyle: list8.value[i].itemStyle,
394 }) 418 })
395 } 419 }
396 let arr = month8.value 420 arr = month8.value
397 setB(list8Y.value, arr) 421 setB(list8Y.value, arr)
422 } else {
423 let nowValue = []
424 let lastValue = []
425 for (let i=1;i<13;i++) {
426 nowValue.push(list8.value[0]["HKQKMONTH"+i]/10000)
427 lastValue.push((list8.value[0].lastHKQK[i-1].COST||0)/10000)
428 }
429 setB(list8Y.value, nowValue,lastValue)
430 }
431
398 } 432 }
399 433
400 function handelSelect8() { 434 function handelSelect8() {
...@@ -425,19 +459,20 @@ function handelSelect8() { ...@@ -425,19 +459,20 @@ function handelSelect8() {
425 function handelType8() { 459 function handelType8() {
426 // let arrc = type8.value == '2' ? month8.value : year8.value 460 // let arrc = type8.value == '2' ? month8.value : year8.value
427 let myData = []; 461 let myData = [];
462 if (type8.value != '0') {
428 for (let i=0;i<year8.value.length;i++) { 463 for (let i=0;i<year8.value.length;i++) {
429 let sum = 0 464 // let sum = 0
430 for (let j=0;j<type8.value.length;j++) { 465 // for (let j=0;j<type8.value.length;j++) {
431 sum += year8.value[i].value[type8.value[j]] 466 // sum += year8.value[i].value[type8.value[j]]
432 } 467 // }
433 myData.push({ 468 myData.push({
434 value:sum, 469 value:year8.value[i].value[type8.value-1],
435 itemStyle:year8.value[i].itemStyle 470 itemStyle:year8.value[i].itemStyle
436 }) 471 })
437 } 472 }
473 }
438 474
439 let arrc = type8.value.length>0 ? myData : month8.value 475 let arrc = type8.value == '0' ? month8.value : myData
440
441 setB(list8Y.value, arrc) 476 setB(list8Y.value, arrc)
442 } 477 }
443 478
...@@ -448,6 +483,8 @@ async function handelGetYS009() { ...@@ -448,6 +483,8 @@ async function handelGetYS009() {
448 let arr1 = [] 483 let arr1 = []
449 let arr2 = [] 484 let arr2 = []
450 let arr3 = [] 485 let arr3 = []
486
487 if (myType.value) {
451 for (const val of list9.value) { 488 for (const val of list9.value) {
452 arrY.push(val.BASEJC) 489 arrY.push(val.BASEJC)
453 arr1.push(Math.round(val.WKPCOSTONE / 10000)) 490 arr1.push(Math.round(val.WKPCOSTONE / 10000))
...@@ -457,6 +494,18 @@ async function handelGetYS009() { ...@@ -457,6 +494,18 @@ async function handelGetYS009() {
457 info: val.YQWELLINFO 494 info: val.YQWELLINFO
458 }) 495 })
459 } 496 }
497 } else {
498 for (const val of list9.value) {
499 arrY.push(val.MONTH)
500 arr1.push(Math.round(val.WKPCOSTONE / 10000))
501 arr2.push(Math.round(val.WKPCOSTTWO / 10000))
502 arr3.push({
503 value: Math.round(val.WKPCOSTTHREE / 10000),
504 info: val.YQWELLINFO
505 })
506 }
507 }
508
460 setC(arrY, arr1, arr2, arr3) 509 setC(arrY, arr1, arr2, arr3)
461 } 510 }
462 511
...@@ -468,7 +517,9 @@ const getdata = () => { ...@@ -468,7 +517,9 @@ const getdata = () => {
468 517
469 const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => { 518 const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => {
470 chartA = echarts.init(zhuRef.value) 519 chartA = echarts.init(zhuRef.value)
471 const option = { 520 let option
521 if (myType.value) {
522 option = {
472 tooltip: { 523 tooltip: {
473 trigger: 'axis', 524 trigger: 'axis',
474 axisPointer: { 525 axisPointer: {
...@@ -490,8 +541,8 @@ const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => { ...@@ -490,8 +541,8 @@ const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => {
490 }, 541 },
491 }, 542 },
492 grid: { 543 grid: {
493 top: "30", 544 top: "15%",
494 left: '3%', 545 left: '5%',
495 right: '4%', 546 right: '4%',
496 bottom: '3%', 547 bottom: '3%',
497 containLabel: true 548 containLabel: true
...@@ -536,7 +587,6 @@ const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => { ...@@ -536,7 +587,6 @@ const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => {
536 { 587 {
537 type: 'category', 588 type: 'category',
538 data: arrY, 589 data: arrY,
539 offset: 10,
540 axisLabel: { 590 axisLabel: {
541 // formatter: '{value}w' // 在数值后添加单位 591 // formatter: '{value}w' // 在数值后添加单位
542 interval: 0, 592 interval: 0,
...@@ -587,6 +637,8 @@ const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => { ...@@ -587,6 +637,8 @@ const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => {
587 {offset: 1, color: 'rgba(8, 130, 160, 1)'} // 底部颜色 637 {offset: 1, color: 'rgba(8, 130, 160, 1)'} // 底部颜色
588 ], 638 ],
589 }, 639 },
640 // 设置柱状图顶部圆角（半圆形）
641 borderRadius: [0, 10, 10, 0] // 顺时针方向：左上、右上、右下、左下
590 }, 642 },
591 }, 643 },
592 { 644 {
...@@ -623,6 +675,188 @@ const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => { ...@@ -623,6 +675,188 @@ const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => {
623 {offset: 1, color: 'rgba(34, 117, 255, 1)'} // 底部颜色 675 {offset: 1, color: 'rgba(34, 117, 255, 1)'} // 底部颜色
624 ], 676 ],
625 }, 677 },
678 // 设置柱状图顶部圆角（半圆形）
679 borderRadius: [0, 10, 10, 0] // 顺时针方向：左上、右上、右下、左下
680 // borderColor: 'rgba(0, 246, 255, 1)',
681 // borderWidth: 1
682 },
683 markLine: {
684 symbol: 'none',
685 data: [
686 {
687 name: '',
688 yAxis: markLineName, // 在Y轴150的位置画垂直线
689 lineStyle: {
690 color: 'rgba(255, 252, 40, 1)',
691 type: 'dashed',
692 lineWidth: 2
693 },
694 label: {
695 formatter: BC + '%',
696 position: 'end', // 可选值: 'start', 'middle', 'end'
697 distance: [-20, 40],
698 color: "#fff"
699 }
700 }
701 ]
702 }
703 },
704
705 ],
706 }
707 } else {
708 option = {
709 tooltip: {
710 trigger: 'axis',
711 axisPointer: {
712 type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
713 },
714 valueFormatter: (value) => value + '万',
715 backgroundColor: 'rgba(5, 28, 51, 1)', // 背景色
716 borderColor: 'rgba(46, 151, 198, 1)', // 边框颜色
717 borderWidth: 1, // 边框宽度
718 textStyle: {
719 color: '#fff', // 文字颜色
720 fontSize: 12, // 文字大小
721 },
722 },
723 legend: {
724 top: "3%",
725 textStyle: {
726 color: '#FFF'
727 },
728 },
729 grid: {
730 top: "15%",
731 left: '5%',
732 right: '4%',
733 bottom: '3%',
734 containLabel: true
735 },
736 yAxis: {
737 type: 'value',
738 axisLabel: {
739 show: false,
740 },
741 axisLine: {
742 show: false,
743 },
744 splitLine: {
745 show: true, // 默认false，需显式开启
746 lineStyle: {
747 color: 'rgba(255, 255, 255, .2)', // 绿色轴线
748 }
749 }
750 },
751 // dataZoom: [
752 // {
753 // type: 'slider',
754 // show: true,
755 // yAxisIndex: [0],
756 // start: 0,
757 // end: 6, //初始值10条数据
758 // // filterMode: 'filter'
759 // },
760 // {
761 // type: 'inside',
762 // yAxisIndex: [0],
763 // start: 0,
764 // end: 6, //初始值10条数据
765 // }
766 // ],
767 xAxis: [
768 {
769 type: 'category',
770 data: arrY,
771 axisLabel: {
772 formatter: function(value, index) {
773 // 只显示奇数索引的标签(从0开始计数)
774 return index % 2 === 0 ? value : '';
775 },
776 interval: 0,
777 fontSize: 10,
778 },
779 axisLine: {
780 show: true,
781 lineStyle: {
782 color: 'rgba(255, 255, 255, 1)',
783 width: 1,
784 type: 'solid'
785 }
786 },
787
788 },
789 ],
790 series: [
791 {
792 name: '计划金额',
793 type: 'bar',
794 datasetIndex: 1,
795 barGap: 0,
796 barMaxWidth: 10, // 设置柱子的最大宽度为40px
797
798 label: {
799 show: false,
800 position: 'right',
801 formatter: function (v1) {
802 return v1.data.name
803 // 计算总数
804 // const total = params.value + /* 其他系列的值 */;
805 // 计算百分比
806 // const percent = ((params.value / total) * 100).toFixed(1);
807 // return `${percent}%`;
808 }
809 },
810 emphasis: {
811 focus: 'series'
812 },
813 // data: [320, 302, 301, 334, 390, 330, 320, 330, 320],
814 data: arr1,
815 itemStyle: {
816 color: {
817 type: 'linear',
818 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
819 colorStops: [
820 {offset: 0, color: 'rgba(0, 255, 190, 1)'}, // 顶部颜色
821 {offset: 1, color: 'rgba(8, 130, 160, 1)'} // 底部颜色
822 ],
823 },
824 },
825 },
826 {
827 name: '执行金额',
828 type: 'bar',
829 barMaxWidth: 10, // 设置柱子的最大宽度为40px
830
831 label: {
832 show: true,
833 position: 'right',
834 textStyle: {
835 color: 'rgba(255, 255, 255, 1)',
836 },
837 formatter: function (v1) {
838 return v1.data.name
839 // 计算总数
840 // const total = params.value + /* 其他系列的值 */;
841 // 计算百分比
842 // const percent = ((params.value / total) * 100).toFixed(1);
843 // return `${percent}%`;
844 }
845 },
846 emphasis: {
847 focus: 'series'
848 },
849 // data: [320, 302, 301, 334, 390, 330, 320, 330, 320],
850 data: arr2,
851 itemStyle: {
852 color: {
853 type: 'linear',
854 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
855 colorStops: [
856 {offset: 0, color: 'rgba(0, 162, 255, 1)'}, // 顶部颜色
857 {offset: 1, color: 'rgba(34, 117, 255, 1)'} // 底部颜色
858 ],
859 },
626 // borderColor: 'rgba(0, 246, 255, 1)', 860 // borderColor: 'rgba(0, 246, 255, 1)',
627 // borderWidth: 1 861 // borderWidth: 1
628 }, 862 },
...@@ -650,13 +884,17 @@ const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => { ...@@ -650,13 +884,17 @@ const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => {
650 884
651 ], 885 ],
652 } 886 }
887 }
888
653 889
654 chartA.setOption(option) 890 chartA.setOption(option)
655 // autoHover(chartA, option, 0, 2000) 891 // autoHover(chartA, option, 0, 2000)
656 } 892 }
657 const setB = (arrY, arr1, arr2) => { 893 const setB = (arrY, arr1, arr2) => {
658 chartB = echarts.init(lineRef.value) 894 chartB = echarts.init(lineRef.value)
659 const option = { 895 let option
896 if (myType.value) {
897 option = {
660 tooltip: { 898 tooltip: {
661 trigger: 'axis', 899 trigger: 'axis',
662 axisPointer: { 900 axisPointer: {
...@@ -856,30 +1094,388 @@ const setB = (arrY, arr1, arr2) => { ...@@ -856,30 +1094,388 @@ const setB = (arrY, arr1, arr2) => {
856 } 1094 }
857 ] 1095 ]
858 } 1096 }
859 chartB.setOption(option) 1097 } else {
860 // autoHover(chartB, option, 0, 2000) 1098 option = {
861 }
862 const setC = (arry, arr1, arr2, arr3) => {
863 chartC = echarts.init(overdueRef.value)
864 const option = {
865 tooltip: { 1099 tooltip: {
866 trigger: 'axis', 1100 trigger: 'axis',
867 confine: true, 1101 axisPointer: {
868 valueFormatter: (value) => value + '万', 1102 // Use axis to trigger tooltip
1103 type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
1104 },
1105 valueFormatter: (value) => (value * 1).toFixed() + '万',
869 backgroundColor: 'rgba(5, 28, 51, 1)', // 背景色 1106 backgroundColor: 'rgba(5, 28, 51, 1)', // 背景色
870 borderColor: 'rgba(46, 151, 198, 1)', // 边框颜色 1107 borderColor: 'rgba(46, 151, 198, 1)', // 边框颜色
871 borderWidth: 1, // 边框宽度 1108 borderWidth: 1, // 边框宽度
872 textStyle: { 1109 textStyle: {
873 color: '#fff', // 文字颜色 1110 color: '#fff', // 文字颜色
874 fontSize: 12, // 文字大小 1111 fontSize: 12, // 文字大小
1112 }
875 }, 1113 },
876 axisPointer: { 1114 legend: {
877 type: 'none' // 关闭悬浮竖线 1115 top: "3%",
1116 textStyle: {
1117 color: '#FFF'
878 }, 1118 },
879 position: 'top', 1119 },
880 // formatter: function (row) { 1120 grid: {
881 // return ` 1121 top: "15%",
882 // <div style="font-weight:bold">${row.name}</div> 1122 left: '3%',
1123 right: '4%',
1124 bottom: '3%',
1125 containLabel: true
1126 },
1127 yAxis: {
1128 type: 'value',
1129 axisLabel: {
1130 show: false,
1131 },
1132 axisLine: {
1133 show: false,
1134 },
1135 splitLine: {
1136 show: true, // 默认false，需显式开启
1137 lineStyle: {
1138 color: 'rgba(255, 255, 255, .2)', // 绿色轴线
1139 }
1140 }
1141 },
1142 xAxis: {
1143 type: 'category',
1144 // data: ['塘沽', '深圳', '漳江', '上海', '海南', '山西', '陕西', '新疆', '伊拉克'],
1145 data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
1146 axisLabel: {
1147 formatter: function(value, index) {
1148 // 只显示奇数索引的标签(从0开始计数)
1149 return index % 2 === 0 ? value : '';
1150 },
1151 interval: 0,
1152 fontSize: 10,
1153 },
1154 axisLine: {
1155 show: true,
1156 lineStyle: {
1157 color: '#fff',
1158 width: 2,
1159 type: 'solid'
1160 }
1161 },
1162 },
1163 series: [
1164 {
1165 name: nowYear,
1166 type: 'bar',
1167 label: {
1168 show: false
1169 },
1170 barMaxWidth: 20, // 设置柱子的最大宽度为40px
1171 data: arr1,
1172 itemStyle: {
1173 color: {
1174 type: 'linear',
1175 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
1176 colorStops: [
1177 {offset: 0, color: 'rgba(0, 200, 234,1 )'}, // 顶部颜色
1178 {offset: 1, color: 'rgba(7, 105, 132,1 )'} // 底部颜色
1179 ]
1180 },
1181 // 设置柱状图顶部圆角（半圆形）
1182 // borderRadius: [0, 10, 10, 0] // 顺时针方向：左上、右上、右下、左下
1183 },
1184 emphasis: {
1185 focus: 'series'
1186 },
1187 // data: [
1188 // {
1189 // value: 320,
1190 // itemStyle: {
1191 // color: {
1192 // type: 'linear',
1193 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
1194 // colorStops: [
1195 // {offset: 0, color: 'rgba(9, 79, 130, 1)'}, // 顶部颜色
1196 // {offset: 1, color: 'rgba(6, 142, 239, 1)'} // 底部颜色
1197 // ],
1198 // },
1199 // }
1200 // },
1201 // {
1202 // value: 302,
1203 // itemStyle: {
1204 // color: {
1205 // type: 'linear',
1206 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
1207 // colorStops: [
1208 // {offset: 0, color: 'rgba(14, 54, 125, 1)'}, // 顶部颜色
1209 // {offset: 1, color: 'rgba(53, 108, 248, 1)'} // 底部颜色
1210 // ],
1211 // },
1212 // }
1213 // },
1214 // {
1215 // value: 301,
1216 // itemStyle: {
1217 // color: {
1218 // type: 'linear',
1219 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
1220 // colorStops: [
1221 // {offset: 0, color: 'rgba(8, 102, 130, 1)'}, // 顶部颜色
1222 // {offset: 1, color: 'rgba(1, 200, 240, 1)'} // 底部颜色
1223 // ],
1224 // },
1225 // }
1226 // },
1227 // {
1228 // value: 334,
1229 // itemStyle: {
1230 // color: {
1231 // type: 'linear',
1232 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
1233 // colorStops: [
1234 // {offset: 0, color: 'rgba(40, 97, 84, 1)'}, // 顶部颜色
1235 // {offset: 1, color: 'rgba(70, 232, 116, 1)'} // 底部颜色
1236 // ],
1237 // },
1238 // }
1239 // },
1240 // {
1241 // value: 390,
1242 // itemStyle: {
1243 // color: {
1244 // type: 'linear',
1245 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
1246 // colorStops: [
1247 // {offset: 0, color: 'rgba(101, 103, 41, 1)'}, // 顶部颜色
1248 // {offset: 1, color: 'rgba(234, 231, 18, 1)'} // 底部颜色
1249 // ],
1250 // },
1251 // }
1252 // },
1253 // {
1254 // value: 330,
1255 // itemStyle: {
1256 // color: {
1257 // type: 'linear',
1258 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
1259 // colorStops: [
1260 // {offset: 0, color: 'rgba(147, 119, 28, 1)'}, // 顶部颜色
1261 // {offset: 1, color: 'rgba(244, 171, 9, 1)'} // 底部颜色
1262 // ],
1263 // },
1264 // }
1265 // },
1266 // {
1267 // value: 320,
1268 // itemStyle: {
1269 // color: {
1270 // type: 'linear',
1271 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
1272 // colorStops: [
1273 // {offset: 0, color: 'rgba(228, 123, 117, 1)'}, // 顶部颜色
1274 // {offset: 1, color: 'rgba(228, 123, 117, 1)'} // 底部颜色
1275 // ],
1276 // },
1277 // }
1278 // },
1279 // {
1280 // value: 330,
1281 // itemStyle: {
1282 // color: {
1283 // type: 'linear',
1284 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
1285 // colorStops: [
1286 // {offset: 0, color: 'rgba(99, 50, 26, 1)'}, // 顶部颜色
1287 // {offset: 1, color: 'rgba(227, 94, 28, 1)'} // 底部颜色
1288 // ],
1289 // },
1290 // }
1291 // },
1292 // {
1293 // value: 320,
1294 // itemStyle: {
1295 // color: {
1296 // type: 'linear',
1297 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
1298 // colorStops: [
1299 // {offset: 0, color: 'rgba(44, 54, 140, 1)'}, // 顶部颜色
1300 // {offset: 1, color: 'rgba(135, 145, 253, 1)'} // 底部颜色
1301 // ],
1302 // },
1303 // }
1304 // }
1305 // ]
1306
1307 },
1308 {
1309 name: nowYear-1,
1310 type: 'bar',
1311 label: {
1312 show: false
1313 },
1314 barMaxWidth: 20, // 设置柱子的最大宽度为40px
1315
1316 itemStyle: {
1317 color: {
1318 type: 'linear',
1319 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
1320 colorStops: [
1321 {offset: 0, color: 'rgba(183, 133, 2,1 )'}, // 顶部颜色
1322 {offset: 1, color: 'rgba(228, 184, 1,1 )'} // 底部颜色
1323 ]
1324 },
1325 // 设置柱状图顶部圆角（半圆形）
1326 // borderRadius: [0, 10, 10, 0] // 顺时针方向：左上、右上、右下、左下
1327 },
1328 emphasis: {
1329 focus: 'series'
1330 },
1331 // data: [
1332 // {
1333 // value: 320,
1334 // itemStyle: {
1335 // color: {
1336 // type: 'linear',
1337 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
1338 // colorStops: [
1339 // {offset: 0, color: 'rgba(9, 79, 130, 1)'}, // 顶部颜色
1340 // {offset: 1, color: 'rgba(6, 142, 239, 1)'} // 底部颜色
1341 // ],
1342 // },
1343 // }
1344 // },
1345 // {
1346 // value: 302,
1347 // itemStyle: {
1348 // color: {
1349 // type: 'linear',
1350 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
1351 // colorStops: [
1352 // {offset: 0, color: 'rgba(14, 54, 125, 1)'}, // 顶部颜色
1353 // {offset: 1, color: 'rgba(53, 108, 248, 1)'} // 底部颜色
1354 // ],
1355 // },
1356 // }
1357 // },
1358 // {
1359 // value: 301,
1360 // itemStyle: {
1361 // color: {
1362 // type: 'linear',
1363 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
1364 // colorStops: [
1365 // {offset: 0, color: 'rgba(8, 102, 130, 1)'}, // 顶部颜色
1366 // {offset: 1, color: 'rgba(1, 200, 240, 1)'} // 底部颜色
1367 // ],
1368 // },
1369 // }
1370 // },
1371 // {
1372 // value: 334,
1373 // itemStyle: {
1374 // color: {
1375 // type: 'linear',
1376 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
1377 // colorStops: [
1378 // {offset: 0, color: 'rgba(40, 97, 84, 1)'}, // 顶部颜色
1379 // {offset: 1, color: 'rgba(70, 232, 116, 1)'} // 底部颜色
1380 // ],
1381 // },
1382 // }
1383 // },
1384 // {
1385 // value: 390,
1386 // itemStyle: {
1387 // color: {
1388 // type: 'linear',
1389 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
1390 // colorStops: [
1391 // {offset: 0, color: 'rgba(101, 103, 41, 1)'}, // 顶部颜色
1392 // {offset: 1, color: 'rgba(234, 231, 18, 1)'} // 底部颜色
1393 // ],
1394 // },
1395 // }
1396 // },
1397 // {
1398 // value: 330,
1399 // itemStyle: {
1400 // color: {
1401 // type: 'linear',
1402 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
1403 // colorStops: [
1404 // {offset: 0, color: 'rgba(147, 119, 28, 1)'}, // 顶部颜色
1405 // {offset: 1, color: 'rgba(244, 171, 9, 1)'} // 底部颜色
1406 // ],
1407 // },
1408 // }
1409 // },
1410 // {
1411 // value: 320,
1412 // itemStyle: {
1413 // color: {
1414 // type: 'linear',
1415 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
1416 // colorStops: [
1417 // {offset: 0, color: 'rgba(228, 123, 117, 1)'}, // 顶部颜色
1418 // {offset: 1, color: 'rgba(228, 123, 117, 1)'} // 底部颜色
1419 // ],
1420 // },
1421 // }
1422 // },
1423 // {
1424 // value: 330,
1425 // itemStyle: {
1426 // color: {
1427 // type: 'linear',
1428 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
1429 // colorStops: [
1430 // {offset: 0, color: 'rgba(99, 50, 26, 1)'}, // 顶部颜色
1431 // {offset: 1, color: 'rgba(227, 94, 28, 1)'} // 底部颜色
1432 // ],
1433 // },
1434 // }
1435 // },
1436 // {
1437 // value: 320,
1438 // itemStyle: {
1439 // color: {
1440 // type: 'linear',
1441 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
1442 // colorStops: [
1443 // {offset: 0, color: 'rgba(44, 54, 140, 1)'}, // 顶部颜色
1444 // {offset: 1, color: 'rgba(135, 145, 253, 1)'} // 底部颜色
1445 // ],
1446 // },
1447 // }
1448 // }
1449 // ]
1450 data: arr2
1451 }
1452 ]
1453 }
1454 }
1455 chartB.setOption(option)
1456 // autoHover(chartB, option, 0, 2000)
1457 }
1458 const setC = (arry, arr1, arr2, arr3) => {
1459 chartC = echarts.init(overdueRef.value)
1460 const option = {
1461 tooltip: {
1462 trigger: 'axis',
1463 confine: true,
1464 valueFormatter: (value) => value + '万',
1465 backgroundColor: 'rgba(5, 28, 51, 1)', // 背景色
1466 borderColor: 'rgba(46, 151, 198, 1)', // 边框颜色
1467 borderWidth: 1, // 边框宽度
1468 textStyle: {
1469 color: '#fff', // 文字颜色
1470 fontSize: 12, // 文字大小
1471 },
1472 axisPointer: {
1473 type: 'none' // 关闭悬浮竖线
1474 },
1475 position: 'top',
1476 // formatter: function (row) {
1477 // return `
1478 // <div style="font-weight:bold">${row.name}</div>
883 // <div style="display:flex;align-items:center;margin-top:5px"> 1479 // <div style="display:flex;align-items:center;margin-top:5px">
884 // ${row.marker} 1480 // ${row.marker}
885 // ${row.seriesName == '逾期360天以上' ? '未开票金额' : row.seriesName}: ${row.value}万 1481 // ${row.seriesName == '逾期360天以上' ? '未开票金额' : row.seriesName}: ${row.value}万
...@@ -909,6 +1505,13 @@ const setC = (arry, arr1, arr2, arr3) => { ...@@ -909,6 +1505,13 @@ const setC = (arry, arr1, arr2, arr3) => {
909 // data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], 1505 // data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
910 data: arry, 1506 data: arry,
911 axisLabel: { 1507 axisLabel: {
1508 formatter: function(value, index) {
1509 // 只显示奇数索引的标签(从0开始计数)
1510 if (myType.value) {
1511 return value;
1512 }
1513 return index % 2 === 0 ? value : ''
1514 },
912 interval: 0, 1515 interval: 0,
913 // rotate: 45, 1516 // rotate: 45,
914 fontSize: 10, 1517 fontSize: 10,
...@@ -1150,11 +1753,12 @@ onUnmounted(() => { ...@@ -1150,11 +1753,12 @@ onUnmounted(() => {
1150 :deep(.el-select__placeholder) { 1753 :deep(.el-select__placeholder) {
1151 font-family: PingFang SC, serif; 1754 font-family: PingFang SC, serif;
1152 font-weight: 500; 1755 font-weight: 500;
1153 color: #13C1F4; 1756 color: #fff;
1154 text-shadow: 0 2px 0 rgba(0, 1, 1, 0.41); 1757 //text-shadow: 0 2px 0 rgba(0, 1, 1, 0.41);
1155 background: linear-gradient(180deg, #75E2E9 0%, #FFFFFF 100%); 1758 //background: linear-gradient(180deg, #75E2E9 0%, #FFFFFF 100%);
1759 background-color: rgb(33, 123, 188, .1); /* 背景色 */
1156 -webkit-background-clip: text; 1760 -webkit-background-clip: text;
1157 -webkit-text-fill-color: transparent 1761 //-webkit-text-fill-color: transparent
1158 } 1762 }
1159 1763
1160 :deep(.el-tag--info) { 1764 :deep(.el-tag--info) {
......
src/viewsPc/vip/scrollingData.vue
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
5 <span/> {{ item }} 5 <span/> {{ item }}
6 </div> 6 </div>
7 <!-- 复制一份数据实现无缝滚动 --> 7 <!-- 复制一份数据实现无缝滚动 -->
8 <div v-for="(item, index) in list" :key="`copy-${index}`" class="scrolling-item"> 8 <div v-if="list.length > 1" v-for="(item, index) in list" :key="`copy-${index}`" class="scrolling-item">
9 <span/> {{ item }} 9 <span/> {{ item }}
10 </div> 10 </div>
11 </div> 11 </div>
...@@ -51,8 +51,7 @@ const initScroll = () => { ...@@ -51,8 +51,7 @@ const initScroll = () => {
51 } 51 }
52 // 重置位置到第一条数据 52 // 重置位置到第一条数据
53 offset.value = -props.speed-0.1; 53 offset.value = -props.speed-0.1;
54 scrollInterval2.value = setInterval(()=> { 54
55 // 设置定时器
56 scrollInterval.value = setInterval(() => { 55 scrollInterval.value = setInterval(() => {
57 if (!isPaused.value) { 56 if (!isPaused.value) {
58 offset.value -= props.speed; 57 offset.value -= props.speed;
...@@ -62,11 +61,10 @@ const initScroll = () => { ...@@ -62,11 +61,10 @@ const initScroll = () => {
62 } 61 }
63 } 62 }
64 if (offset.value>=(-props.speed)) { 63 if (offset.value>=(-props.speed)) {
65 console.log("1111111111111111111111111")
66 clearInterval(scrollInterval.value); 64 clearInterval(scrollInterval.value);
65 setTimeout(initScroll,10000)
67 } 66 }
68 }, 20); 67 }, 20);
69 },10000)
70 68
71 }; 69 };
72 70
...@@ -106,9 +104,6 @@ onUnmounted(() => { ...@@ -106,9 +104,6 @@ onUnmounted(() => {
106 if (scrollInterval.value) { 104 if (scrollInterval.value) {
107 clearInterval(scrollInterval.value); 105 clearInterval(scrollInterval.value);
108 } 106 }
109 if (scrollInterval2.value) {
110 clearInterval(scrollInterval2.value);
111 }
112 }); 107 });
113 </script> 108 </script>
114 109
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!