Skip to content

杨炀 / dangan_dataV

Go to a project
Toggle navigation
Toggle navigation pinning
5a091cb6 by zrj
Options

daping zonggongsi

1 parent 43ee9327
Inline Side-by-side
Showing 7 changed files with 326 additions and 114 deletions
src/viewsPc/home.vue
1 <template> 1 <template>
2 <div class="main"> 2 <div class="main">
3 <el-row class="w100"> 3 <el-row class="w100">
4 <el-col v-if="obj.IFBASE" :span="type=='否'?8:12"> 4 <el-col v-if="obj.IFBASE" :span="8">
5 <left-page :obj="obj" :type="type" :url="result"/> 5 <left-page :obj="obj" :type="type" :url="result"/>
6 </el-col> 6 </el-col>
7 <el-col v-if="type=='否'" :span="8"> 7 <el-col v-if="obj.IFBASE" :span="8">
8 <center-page :obj="obj" :type="type=='否'" :url="result"/> 8 <center-page :obj="obj" :isLeader="isLeader" :type="type=='否'" :url="result"/>
9 </el-col> 9 </el-col>
10 <el-col v-if="obj.IFBASE" :span="type=='否'?8:12"> 10 <el-col v-if="obj.IFBASE" :span="8">
11 <right-page :obj="obj" :type="type" :url="result"/> 11 <right-page :obj="obj" :type="type" :url="result"/>
12 </el-col> 12 </el-col>
13 </el-row> 13 </el-row>
...@@ -28,15 +28,22 @@ const url = ref() ...@@ -28,15 +28,22 @@ const url = ref()
28 const obj = ref({}) 28 const obj = ref({})
29 const result = ref() 29 const result = ref()
30 const router = useRouter() 30 const router = useRouter()
31 // url.value = 'http://192.168.1.152:8899/login/sid=a3afc265-1e60-4376-bcfb-6ca124db8704#/' 31 let isLeader = ref(false)
32 url.value = window.location.href 32 url.value = 'http://192.168.1.152:8899/login/sid=3e6ac454-6d9a-4f37-a593-d06c65703792#/'
33 // url.value = window.location.href
33 result.value = url.value?.split('=')[1]?.split('#')[0]; 34 result.value = url.value?.split('=')[1]?.split('#')[0];
34 35
36 function validateEmail(email) {
37 const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
38 return re.test(String(email).toLowerCase());
39 }
40
35 onMounted(() => { 41 onMounted(() => {
36 console.log(url.value) 42 console.log(url.value)
37 console.log(result.value) 43 console.log(result.value)
38 if (result.value) { 44 if (result.value) {
39 handelGetYS000() 45 handelGetYS000()
46 isLeader.value = validateEmail(result.value)
40 } else { 47 } else {
41 // result.value = 'a3afc265-1e60-4376-bcfb-6ca124db8704' 48 // result.value = 'a3afc265-1e60-4376-bcfb-6ca124db8704'
42 // handelGetYS000() 49 // handelGetYS000()
......
src/viewsPc/vip/centerPage.vue
...@@ -28,9 +28,9 @@ ...@@ -28,9 +28,9 @@
28 </div> 28 </div>
29 <div ref="bing1" style="width: 100%;height:13.3vh;"> 29 <div ref="bing1" style="width: 100%;height:13.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%;height: 17.3vh"/>
36 </div> 36 </div>
...@@ -46,11 +46,11 @@ ...@@ -46,11 +46,11 @@
46 </div> 46 </div>
47 <div ref="bing2" style="width: 100%;height:13.3vh;"> 47 <div ref="bing2" style="width: 100%;height:13.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>-->
51 累计应收余额 <br>(万元) 51 <!-- 累计应收余额 <br>(万元)-->
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%;height: 17.3vh"/>
56 </div> 56 </div>
...@@ -64,12 +64,13 @@ ...@@ -64,12 +64,13 @@
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 ref="bing3" style="width: 100%;height:13.3vh;"> 67 <div class="bingImg" style="width: 100%;height:13.3vh;">{{bing_number3}}</div>
68 </div> 68 <!-- <div ref="bing3" style="width: 100%;height:13.3vh;">-->
69 <div class="bingBottom"> 69 <!-- </div>-->
70 <div style="text-align: center">{{ `${dayjs().format('YYYY')}年${dayjs().format('MM')}月` }}前 <br> 累计现金余额<br>(万元) 70 <!-- <div class="bingBottom">-->
71 </div> 71 <!-- <div style="text-align: center">{{ `${dayjs().format('YYYY')}年${dayjs().format('MM')}月` }}前 <br> 累计现金余额<br>(万元)-->
72 </div> 72 <!-- </div>-->
73 <!-- </div>-->
73 </div> 74 </div>
74 <div ref="zhuRef3" class="zhu" style="width:70%;height: 17.3vh"/> 75 <div ref="zhuRef3" class="zhu" style="width:70%;height: 17.3vh"/>
75 </div> 76 </div>
...@@ -97,7 +98,7 @@ import {autoToolTip} from "@/plugins/auto-toolTip"; ...@@ -97,7 +98,7 @@ import {autoToolTip} from "@/plugins/auto-toolTip";
97 import ScrollingData from './scrollingData.vue' 98 import ScrollingData from './scrollingData.vue'
98 import * as echarts from "echarts"; 99 import * as echarts from "echarts";
99 import * as api from "@/apiPc/common" 100 import * as api from "@/apiPc/common"
100 import {onMounted, ref, computed, onUnmounted, getCurrentInstance} from 'vue' 101 import {onMounted, ref, computed, onUnmounted, getCurrentInstance, nextTick} from 'vue'
101 import {dayjs} from 'element-plus' 102 import {dayjs} from 'element-plus'
102 import {getYS000, getYS001, getYS002, getYS003, getYS004, getYS005} from '@/api/server.js' 103 import {getYS000, getYS001, getYS002, getYS003, getYS004, getYS005} from '@/api/server.js'
103 import Information from "/@/viewsPc/vip/components/information.vue"; 104 import Information from "/@/viewsPc/vip/components/information.vue";
...@@ -109,6 +110,10 @@ const props = defineProps({ ...@@ -109,6 +110,10 @@ const props = defineProps({
109 type: Boolean, 110 type: Boolean,
110 default: false 111 default: false
111 }, 112 },
113 isLeader: {
114 type: Boolean,
115 default: false
116 },
112 url: { 117 url: {
113 type: String, 118 type: String,
114 default: undefined 119 default: undefined
...@@ -123,6 +128,7 @@ const props = defineProps({ ...@@ -123,6 +128,7 @@ const props = defineProps({
123 128
124 const url = computed(() => props.url) 129 const url = computed(() => props.url)
125 const obj = computed(() => props.obj) 130 const obj = computed(() => props.obj)
131 const isLeader = computed(() => props.isLeader)
126 const zhuRef1 = ref(null) 132 const zhuRef1 = ref(null)
127 const zhuRef2 = ref(null) 133 const zhuRef2 = ref(null)
128 const zhuRef3 = ref(null) 134 const zhuRef3 = ref(null)
...@@ -143,6 +149,7 @@ const resYear3 = ref() ...@@ -143,6 +149,7 @@ const resYear3 = ref()
143 const activeName1 = ref() 149 const activeName1 = ref()
144 const activeName2 = ref() 150 const activeName2 = ref()
145 const activeName3 = ref() 151 const activeName3 = ref()
152 const bing_number3 = ref()
146 153
147 154
148 let chart1 155 let chart1
...@@ -165,7 +172,6 @@ onMounted(async () => { ...@@ -165,7 +172,6 @@ onMounted(async () => {
165 } 172 }
166 window.addEventListener('resize', handleResize); 173 window.addEventListener('resize', handleResize);
167 } 174 }
168
169 // handelBing1() 175 // handelBing1()
170 // handelZhu1() 176 // handelZhu1()
171 // handelGetYS001() 177 // handelGetYS001()
...@@ -218,9 +224,10 @@ async function handelGetYS003() { ...@@ -218,9 +224,10 @@ async function handelGetYS003() {
218 // if (v.XJCOST == 0) v.XJCOST = null 224 // if (v.XJCOST == 0) v.XJCOST = null
219 // } 225 // }
220 obj1.list = obj1.list.filter(v => v.XJCOST != 0) 226 obj1.list = obj1.list.filter(v => v.XJCOST != 0)
227
228 bing_number3.value = toDieThousands((res.data.yeargroup[0].TOTAL / 10000).toFixed() || 0)
221 229
222 230 // handelBing3(obj1, obj2)
223 handelBing3(obj1, obj2)
224 handelZhu3(obj1, obj2) 231 handelZhu3(obj1, obj2)
225 232
226 233
...@@ -345,6 +352,10 @@ async function handelGetYS004() { ...@@ -345,6 +352,10 @@ async function handelGetYS004() {
345 async function handelGetYS005() { 352 async function handelGetYS005() {
346 const res = await getYS005(url.value, obj.value) 353 const res = await getYS005(url.value, obj.value)
347 form.value = res.data 354 form.value = res.data
355 console.log(isLeader)
356 if (isLeader.value) {
357 proxy.$refs['InformationRef'].open(form.value.leaderinfo,form.value.APPLYDATE)
358 }
348 } 359 }
349 360
350 361
...@@ -367,6 +378,17 @@ function handleResize() { ...@@ -367,6 +378,17 @@ function handleResize() {
367 chart44?.resize() 378 chart44?.resize()
368 } 379 }
369 380
381 function toDieThousands(num) {
382 let newNum = num
383 if (num) {
384 //转为数字类型
385 const numNum = Number(newNum.toString())
386 //正则修改千分位
387 newNum = numNum.toFixed(0).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
388 }
389 return newNum
390 }
391
370 const handelBing1 = (arr1, arr2) => { 392 const handelBing1 = (arr1, arr2) => {
371 // arr1 2025 393 // arr1 2025
372 // arr2 2024 394 // arr2 2024
...@@ -429,7 +451,7 @@ const handelBing1 = (arr1, arr2) => { ...@@ -429,7 +451,7 @@ const handelBing1 = (arr1, arr2) => {
429 label: { 451 label: {
430 show: true, // 显示标签 452 show: true, // 显示标签
431 position: 'center', // 位置居中 453 position: 'center', // 位置居中
432 formatter: (arr1.TOTAL / 10000).toFixed(), // 文字内容 454 formatter: toDieThousands((arr1.TOTAL / 10000).toFixed()), // 文字内容
433 color: "#ffff", 455 color: "#ffff",
434 rich: { 456 rich: {
435 total: { 457 total: {
...@@ -598,7 +620,7 @@ const handelBing2 = (row1, row2) => { ...@@ -598,7 +620,7 @@ const handelBing2 = (row1, row2) => {
598 label: { 620 label: {
599 show: true, // 显示标签 621 show: true, // 显示标签
600 position: 'center', // 位置居中 622 position: 'center', // 位置居中
601 formatter: (row1.TOTAL / 10000).toFixed() || 0, // 文字内容 623 formatter: toDieThousands((row1.TOTAL / 10000).toFixed() || 0), // 文字内容
602 color: "#ffff", 624 color: "#ffff",
603 rich: { 625 rich: {
604 total: { 626 total: {
...@@ -834,7 +856,6 @@ const handelZhu1 = (row1, row2) => { ...@@ -834,7 +856,6 @@ const handelZhu1 = (row1, row2) => {
834 yAxis: [ 856 yAxis: [
835 { 857 {
836 type: 'value', 858 type: 'value',
837 name: '单位(万)',
838 axisLine: { 859 axisLine: {
839 show: true, 860 show: true,
840 lineStyle: { 861 lineStyle: {
...@@ -843,6 +864,10 @@ const handelZhu1 = (row1, row2) => { ...@@ -843,6 +864,10 @@ const handelZhu1 = (row1, row2) => {
843 type: 'solid' 864 type: 'solid'
844 }, 865 },
845 }, 866 },
867 axisLabel: {
868 show:false
869 // formatter: '{value}w' // 在数值后添加单位
870 },
846 splitLine: { 871 splitLine: {
847 show: true, // 默认false，需显式开启 872 show: true, // 默认false，需显式开启
848 lineStyle: { 873 lineStyle: {
...@@ -952,7 +977,6 @@ const handelZhu2 = (row1, row2) => { ...@@ -952,7 +977,6 @@ const handelZhu2 = (row1, row2) => {
952 yAxis: [ 977 yAxis: [
953 { 978 {
954 type: 'value', 979 type: 'value',
955 name: '单位(万)',
956 axisLine: { 980 axisLine: {
957 show: true, 981 show: true,
958 lineStyle: { 982 lineStyle: {
...@@ -961,6 +985,10 @@ const handelZhu2 = (row1, row2) => { ...@@ -961,6 +985,10 @@ const handelZhu2 = (row1, row2) => {
961 type: 'solid' 985 type: 'solid'
962 } 986 }
963 }, 987 },
988 axisLabel: {
989 show:false
990 // formatter: '{value}w' // 在数值后添加单位
991 },
964 splitLine: { 992 splitLine: {
965 show: true, // 默认false，需显式开启 993 show: true, // 默认false，需显式开启
966 lineStyle: { 994 lineStyle: {
...@@ -1025,7 +1053,6 @@ const handelZhu2 = (row1, row2) => { ...@@ -1025,7 +1053,6 @@ const handelZhu2 = (row1, row2) => {
1025 // autoHover(chart22, option, 0, 2000) 1053 // autoHover(chart22, option, 0, 2000)
1026 } 1054 }
1027 const handelZhu3 = (row1, row2) => { 1055 const handelZhu3 = (row1, row2) => {
1028 console.log(11111, row1, row2)
1029 let name1 = row1.YEAR + '年' 1056 let name1 = row1.YEAR + '年'
1030 let name2 = row2.YEAR + '年' 1057 let name2 = row2.YEAR + '年'
1031 console.log('年', row1.YEAR) 1058 console.log('年', row1.YEAR)
...@@ -1091,7 +1118,6 @@ const handelZhu3 = (row1, row2) => { ...@@ -1091,7 +1118,6 @@ const handelZhu3 = (row1, row2) => {
1091 yAxis: [ 1118 yAxis: [
1092 { 1119 {
1093 type: 'value', 1120 type: 'value',
1094 name: '单位(万)',
1095 axisLine: { 1121 axisLine: {
1096 show: true, 1122 show: true,
1097 lineStyle: { 1123 lineStyle: {
...@@ -1100,6 +1126,10 @@ const handelZhu3 = (row1, row2) => { ...@@ -1100,6 +1126,10 @@ const handelZhu3 = (row1, row2) => {
1100 type: 'solid' 1126 type: 'solid'
1101 } 1127 }
1102 }, 1128 },
1129 axisLabel: {
1130 show:false
1131 // formatter: '{value}w' // 在数值后添加单位
1132 },
1103 splitLine: { 1133 splitLine: {
1104 show: true, // 默认false，需显式开启 1134 show: true, // 默认false，需显式开启
1105 lineStyle: { 1135 lineStyle: {
...@@ -1248,6 +1278,10 @@ const handelZhu4 = (listX, dataList, arr1, arr2) => { ...@@ -1248,6 +1278,10 @@ const handelZhu4 = (listX, dataList, arr1, arr2) => {
1248 type: 'solid' 1278 type: 'solid'
1249 } 1279 }
1250 }, 1280 },
1281 axisLabel: {
1282 show:false
1283 // formatter: '{value}w' // 在数值后添加单位
1284 },
1251 splitLine: { 1285 splitLine: {
1252 show: true, // 默认false，需显式开启 1286 show: true, // 默认false，需显式开启
1253 lineStyle: { 1287 lineStyle: {
...@@ -1419,7 +1453,7 @@ const clear = () => { ...@@ -1419,7 +1453,7 @@ const clear = () => {
1419 } 1453 }
1420 1454
1421 function handelView() { 1455 function handelView() {
1422 proxy.$refs['InformationRef'].open(form.value.leaderinfo) 1456 proxy.$refs['InformationRef'].open(form.value.leaderinfo,form.value.APPLYDATE)
1423 } 1457 }
1424 1458
1425 onUnmounted(() => { 1459 onUnmounted(() => {
...@@ -1632,6 +1666,13 @@ onUnmounted(() => { ...@@ -1632,6 +1666,13 @@ onUnmounted(() => {
1632 color: #FFFFFF; 1666 color: #FFFFFF;
1633 } 1667 }
1634 } 1668 }
1669
1670 .bingImg {
1671 background: url("@/assets/image/rmb.png") no-repeat center;
1672 color: #fff;
1673 font-size: 12px;
1674 padding: 49px;
1675 }
1635 } 1676 }
1636 } 1677 }
1637 } 1678 }
......
src/viewsPc/vip/components/information.vue
...@@ -7,6 +7,7 @@ ...@@ -7,6 +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 <p v-for="val in list" :key="val" class="row"> 11 <p v-for="val in list" :key="val" class="row">
11 <span></span> {{ val }} 12 <span></span> {{ val }}
12 </p> 13 </p>
...@@ -19,14 +20,15 @@ ...@@ -19,14 +20,15 @@
19 import {ref} from 'vue' 20 import {ref} from 'vue'
20 21
21 const list = ref([]) 22 const list = ref([])
23 const myDate = ref()
22 const showGroup = ref(false) 24 const showGroup = ref(false)
23 25
24 26
25 function open(row) { 27 function open(row,date) {
26 debugger 28 debugger
27 showGroup.value = true 29 showGroup.value = true
28 list.value = row 30 list.value = row
29 31 myDate.value = date
30 console.log(list.value) 32 console.log(list.value)
31 } 33 }
32 34
...@@ -73,4 +75,12 @@ defineExpose({ ...@@ -73,4 +75,12 @@ defineExpose({
73 border-radius: calc(3 * 100vw / 1920); 75 border-radius: calc(3 * 100vw / 1920);
74 } 76 }
75 } 77 }
78
79 .el-overlay {
80 /* 自定义样式 */
81 background-color: rgba(0, 0, 0, 0.7); /* 例如，更改背景颜色 */
82 }
83 .el-dialog__title{
84 color: #fff;
85 }
76 </style> 86 </style>
......
src/viewsPc/vip/leftPage.vue
1 <template> 1 <template>
2 <div class="pd20"> 2 <div class="pd20">
3 <div class="chartCard"> 3 <div class="chartCard">
4 <div class="title">应收账款余额</div>
5 <div ref="zhuRef" style="width: 100%; height: 24vh;"></div>
6 </div>
7
8 <div class="chartCard mt30">
9 <div> 4 <div>
10 <div class="title">应收账款余额与收入</div> 5 <div class="title">收入对比</div>
11 <div class="po_right"> 6 <div class="po_right">
12 <div class="itemBox"> 7 <div class="itemBox">
13 <el-select 8 <el-select
14 v-model="type2" 9 v-model="type2"
15 class="select" 10 class="select"
16 collapse-tags 11 collapse-tags
17 multiple 12 multiple
18 placeholder="全部基地" 13 placeholder="全部基地"
19 size="small" 14 size="small"
20 @change="handelSelect2"> 15 @change="handelSelect2">
21 <el-option v-for="val in list" :key="val.BASE" :label="val.BASEJC" :value="val.BASEJC"/> 16 <el-option v-for="val in list" :key="val.BASE" :label="val.BASEJC" :value="val.BASEJC"/>
22 </el-select> 17 </el-select>
23 </div> 18 </div>
24 <div class="itemBox"> 19 <div class="itemBox">
25 <el-select 20 <el-select
26 v-model="type1" 21 v-model="type1"
27 class="select" 22 class="select"
28 collapse-tags 23 collapse-tags
29 multiple 24 multiple
30 placeholder="数据因素" 25 placeholder="数据因素"
31 size="small" 26 size="small"
32 @change="handelSelect1"> 27 @change="handelSelect1">
33 <el-option label="收入" value="1"/> 28 <el-option label="收入" value="1"/>
34 <el-option label="应收账款余额" value="2"/> 29 <el-option label="应收账款余额" value="2"/>
35 </el-select> 30 </el-select>
36 </div> 31 </div>
37 </div> 32 </div>
38 </div> 33 </div>
39 34
40 <div ref="lineRef" style="width: 100%; height: 24vh;"></div> 35 <div ref="lineRef" style="width: 100%; height: 24vh;"></div>
41 </div> 36 </div>
37
38 <div class="chartCard mt30">
39 <div class="title">余额占比</div>
40 <div ref="zhuRef" style="width: 100%; height: 24vh;"></div>
41 </div>
42
43
42 <div class="chartCard mt30"> 44 <div class="chartCard mt30">
43 <div> 45 <div>
44 <div class="title">应收账款余额组成</div> 46 <div class="title">节点组成</div>
45 47
46 <div class="po_right"> 48 <div class="po_right">
47 <div class="itemBox"> 49 <div class="itemBox">
...@@ -211,6 +213,14 @@ async function handelGetYS006() { ...@@ -211,6 +213,14 @@ async function handelGetYS006() {
211 s4.value[i] += v2.YSBALANCE / 10000 || 0; 213 s4.value[i] += v2.YSBALANCE / 10000 || 0;
212 } 214 }
213 } 215 }
216
217 set2.value.sort((a,b)=>{
218 return b.value - a.value
219 })
220
221 set3.value.sort((a,b)=>{
222 return b.value - a.value
223 })
214 224
215 setA(set1.value, set2.value, set3.value) 225 setA(set1.value, set2.value, set3.value)
216 setB( 226 setB(
...@@ -370,6 +380,9 @@ const getdata = () => { ...@@ -370,6 +380,9 @@ const getdata = () => {
370 } 380 }
371 381
372 const setA = (arr, arr2, arr3) => { 382 const setA = (arr, arr2, arr3) => {
383 let sum1 = arr.reduce((a, b) => a + b.value, 0)
384 let sumPercent1 = ((arr2.reduce((a, b) => a + b.value, 0)/sum1)*100).toFixed(2)
385 let sumPercent2 = ((arr3.reduce((a, b) => a + b.value, 0)/sum1)*100).toFixed(2)
373 chartA = echarts.init(zhuRef.value) 386 chartA = echarts.init(zhuRef.value)
374 const option = { 387 const option = {
375 tooltip: { 388 tooltip: {
...@@ -390,21 +403,60 @@ const setA = (arr, arr2, arr3) => { ...@@ -390,21 +403,60 @@ const setA = (arr, arr2, arr3) => {
390 right: '5%', 403 right: '5%',
391 top: '12%', 404 top: '12%',
392 bottom: 20, 405 bottom: 20,
406 itemGap:5,
393 textStyle: { 407 textStyle: {
394 color: '#FFF' 408 color: '#FFF',
409 rich: {
410 a:{
411 float:'left',
412 fontSize: 12,
413 lineHeight: 12,
414 width:40,
415 },
416 b:{
417 float:'right',
418 fontSize: 12,
419 lineHeight: 12,
420 width:40,
421 },
422 c:{
423 float:'left',
424 fontSize: 12,
425 lineHeight: 22,
426 width:40,
427 },
428 d:{
429 float:'right',
430 fontSize: 12,
431 lineHeight: 22,
432 width:40,
433 },
434 hr: {
435 borderColor: '#fff',
436 borderWidth: 1,
437 width: '100%',
438 height: 0,
439 margin:10
440 }
441 },
395 }, 442 },
396 formatter: function (name) { 443 formatter: function (name) {
397 let value = 0 444 let value = 0
445 let isLast = false
398 for (let i = 0; i < option.series[2].data?.length; i++) { 446 for (let i = 0; i < option.series[2].data?.length; i++) {
399 if (option.series[2].data[i].name === name) { 447 if (option.series[2].data[i].name === name) {
400 value = option.series[2].data[i].value; 448 value = option.series[2].data[i].value;
401 break; 449 break;
402 } 450 }
403 } 451 }
452 if (arr2[arr2.length-1].name === name) {
453 isLast = true
454 }
404 // 计算百分比 455 // 计算百分比
405 let num1 = ((value / option.series[2].data.reduce((a, b) => a + b.value, 0)) * 100).toFixed(2); 456 let num1 = ((value / option.series[2].data.reduce((a, b) => a + b.value, 0)) * 100).toFixed(2);
406 let num2 = num1 > 0 ? num1 + '%' : 0 + '%' 457 let num2 = num1 > 0 ? num1 + '%' : 0 + '%'
407 return name + ' ' + num2; 458 return isLast?['{c|' + name + '}' + ' ' + '{d|' + num2 + '}','{hr|}'].join('\n') : '{a|' + name + '}' + ' ' + '{b|' + num2 + '}';
459 // return name + ' ' + num2;
408 }, 460 },
409 }, 461 },
410 { 462 {
...@@ -413,24 +465,84 @@ const setA = (arr, arr2, arr3) => { ...@@ -413,24 +465,84 @@ const setA = (arr, arr2, arr3) => {
413 right: '30%', 465 right: '30%',
414 top: '12%', 466 top: '12%',
415 bottom: 20, 467 bottom: 20,
468 itemGap:5,
416 textStyle: { 469 textStyle: {
417 color: '#FFF' 470 color: '#FFF',
471 rich: {
472 a:{
473 float:'left',
474 fontSize: 12,
475 lineHeight: 12,
476 width:40,
477 },
478 b:{
479 float:'right',
480 fontSize: 12,
481 lineHeight: 12,
482 width:40,
483 },
484 c:{
485 float:'left',
486 fontSize: 12,
487 lineHeight: 22,
488 width:40,
489 },
490 d:{
491 float:'right',
492 fontSize: 12,
493 lineHeight: 22,
494 width:40,
495 },
496 hr: {
497 borderColor: '#fff',
498 borderWidth: 1,
499 width: '100%',
500 height: 0,
501 margin:10
502 }
503 },
418 }, 504 },
419 formatter: function (name) { 505 formatter: function (name) {
420 let value = 0 506 let value = 0
507 let isLast = false
421 for (let i = 0; i < option.series[2].data?.length; i++) { 508 for (let i = 0; i < option.series[2].data?.length; i++) {
422 if (option.series[2].data[i].name === name) { 509 if (option.series[2].data[i].name === name) {
423 value = option.series[2].data[i].value; 510 value = option.series[2].data[i].value;
424 break; 511 break;
425 } 512 }
426 } 513 }
514 if (arr3[arr3.length-1].name === name) {
515 isLast = true
516 }
427 // 计算百分比 517 // 计算百分比
428 let num1 = ((value / option.series[2].data.reduce((a, b) => a + b.value, 0)) * 100).toFixed(2); 518 let num1 = ((value / option.series[2].data.reduce((a, b) => a + b.value, 0)) * 100).toFixed(2);
429 let num2 = num1 > 0 ? num1 + '%' : 0 + '%' 519 let num2 = num1 > 0 ? num1 + '%' : 0 + '%'
430 return name + ' ' + num2; 520 return isLast?['{c|' + name + '}' + ' ' + '{d|' + num2 + '}','{hr|}'].join('\n') : '{a|' + name + '}' + ' ' + '{b|' + num2 + '}';
521 // return name + ' ' + num2;
431 }, 522 },
432 } 523 }
433 ], 524 ],
525 graphic: {
526 elements: [{
527 type: 'text',
528 bottom: '15%', // 可以调整位置，例如使用 'bottom' 来定位到图例下方
529 right: '33%',
530 style: {
531 text: '陆地：' + sumPercent2+'%', // 这里可以计算合计值并显示
532 fill: '#fff', // 文本颜色
533 fontSize: 12, // 文本大小
534 },
535 },{
536 type: 'text',
537 bottom: '15%', // 可以调整位置，例如使用 'bottom' 来定位到图例下方
538 right: '8%',
539 style: {
540 text: '海上：' + sumPercent1+'%', // 这里可以计算合计值并显示
541 fill: '#fff', // 文本颜色
542 fontSize: 12, // 文本大小
543 }
544 }],
545 },
434 series: [ 546 series: [
435 { 547 {
436 type: 'pie', 548 type: 'pie',
...@@ -484,8 +596,7 @@ const setA = (arr, arr2, arr3) => { ...@@ -484,8 +596,7 @@ const setA = (arr, arr2, arr3) => {
484 color: function (params) { 596 color: function (params) {
485 // 自定义颜色 597 // 自定义颜色
486 let colorList = [ 598 let colorList = [
487 '#8791FD', '#E35E1C', '#E47B75', '#F4AB09', '#F7E10F', '#068EEF', '#1050E4', '#01D7F0', '#46E874', '#F5F5F5', '#5470C6', '#91CC75', '#FAC858', '#EE6666', '#73C0DE', '#3BA272', '#FC8452', '#9A60B4', '#EA7CCC', '#1E90FF', '#508DFF', '#5FE2E4', '#FCE5CA', 599 '#A4E6FF', '#6ED8FF', '#2FA9FF', '#187CEC', '#0142DA', '#FEFFD3', '#FFF59C', '#F7E20F', '#F7CE10', '#D29F05',
488 '#A6A9FF', '#7AFF9C', '#FFD6D4', '#FFE082'
489 ]; 600 ];
490 return colorList[params.dataIndex] 601 return colorList[params.dataIndex]
491 } 602 }
...@@ -570,7 +681,8 @@ const setB = (arr1, arr2, arr3, arr4) => { ...@@ -570,7 +681,8 @@ const setB = (arr1, arr2, arr3, arr4) => {
570 { 681 {
571 type: 'value', 682 type: 'value',
572 axisLabel: { 683 axisLabel: {
573 formatter: '{value}w' // 在数值后添加单位 684 show:false
685 // formatter: '{value}w' // 在数值后添加单位
574 }, 686 },
575 name: '', 687 name: '',
576 axisLine: { 688 axisLine: {
...@@ -592,7 +704,7 @@ const setB = (arr1, arr2, arr3, arr4) => { ...@@ -592,7 +704,7 @@ const setB = (arr1, arr2, arr3, arr4) => {
592 ], 704 ],
593 series: [ 705 series: [
594 { 706 {
595 name: `${Year2}年应收账款余额`, 707 name: `${Year2}应收余额`,
596 type: 'bar', 708 type: 'bar',
597 barGap: 0, 709 barGap: 0,
598 emphasis: { 710 emphasis: {
...@@ -615,7 +727,7 @@ const setB = (arr1, arr2, arr3, arr4) => { ...@@ -615,7 +727,7 @@ const setB = (arr1, arr2, arr3, arr4) => {
615 barWidth: '15%' 727 barWidth: '15%'
616 }, 728 },
617 { 729 {
618 name: `${Year1}年应收账款余额`, 730 name: `${Year1}应收余额`,
619 type: 'bar', 731 type: 'bar',
620 emphasis: { 732 emphasis: {
621 focus: 'series' 733 focus: 'series'
...@@ -638,7 +750,7 @@ const setB = (arr1, arr2, arr3, arr4) => { ...@@ -638,7 +750,7 @@ const setB = (arr1, arr2, arr3, arr4) => {
638 barWidth: '15%' 750 barWidth: '15%'
639 }, 751 },
640 { 752 {
641 name: `${Year2}年收入`, 753 name: `${Year2}收入`,
642 type: 'bar', 754 type: 'bar',
643 emphasis: { 755 emphasis: {
644 focus: 'series' 756 focus: 'series'
...@@ -660,7 +772,7 @@ const setB = (arr1, arr2, arr3, arr4) => { ...@@ -660,7 +772,7 @@ const setB = (arr1, arr2, arr3, arr4) => {
660 barWidth: '15%' 772 barWidth: '15%'
661 }, 773 },
662 { 774 {
663 name: `${Year1}年收入`, 775 name: `${Year1}收入`,
664 type: 'bar', 776 type: 'bar',
665 emphasis: { 777 emphasis: {
666 focus: 'series' 778 focus: 'series'
...@@ -709,7 +821,7 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => { ...@@ -709,7 +821,7 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => {
709 <div style="font-weight:bold">${row.name}</div> 821 <div style="font-weight:bold">${row.name}</div>
710 <div style="display:flex;align-items:center;margin-top:5px"> 822 <div style="display:flex;align-items:center;margin-top:5px">
711 ${row.marker} 823 ${row.marker}
712 ${row.seriesName}: ${row.value.toFixed(2)}万 824 ${row.seriesName}: ${row.value.toFixed(0)}万
713 </div> 825 </div>
714 <div> 826 <div>
715 ${row.data?.info ? row.data?.info?.replaceAll('万', '万<br>') : ''} 827 ${row.data?.info ? row.data?.info?.replaceAll('万', '万<br>') : ''}
...@@ -765,8 +877,10 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => { ...@@ -765,8 +877,10 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => {
765 type: 'value', 877 type: 'value',
766 name: '', 878 name: '',
767 axisLabel: { 879 axisLabel: {
768 formatter: '{value}w' // 在数值后添加单位 880 // formatter: '{value}w' // 在数值后添加单位
881 show:false,
769 }, 882 },
883
770 axisLine: { 884 axisLine: {
771 show: true, 885 show: true,
772 lineStyle: { 886 lineStyle: {
...@@ -799,8 +913,8 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => { ...@@ -799,8 +913,8 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => {
799 type: 'linear', 913 type: 'linear',
800 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变 914 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
801 colorStops: [ 915 colorStops: [
802 {offset: 0, color: 'rgba(17, 201, 104,1 )'}, // 顶部颜色 916 {offset: 0, color: 'rgba(141, 251, 116,1 )'}, // 顶部颜色
803 {offset: 1, color: 'rgba(70, 232, 116,1 )'} // 底部颜色 917 // {offset: 1, color: 'rgba(70, 232, 116,1 )'} // 底部颜色
804 ] 918 ]
805 }, 919 },
806 }, 920 },
...@@ -821,8 +935,8 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => { ...@@ -821,8 +935,8 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => {
821 type: 'linear', 935 type: 'linear',
822 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变 936 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
823 colorStops: [ 937 colorStops: [
824 {offset: 0, color: 'rgba(244, 171, 9, 1)'}, // 顶部颜色 938 {offset: 0, color: 'rgba(1, 255, 133, 1)'}, // 顶部颜色
825 {offset: 1, color: 'rgba(234, 216, 18, 1)'} // 底部颜色 939 // {offset: 1, color: 'rgba(234, 216, 18, 1)'} // 底部颜色
826 ] 940 ]
827 }, 941 },
828 }, 942 },
...@@ -843,8 +957,8 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => { ...@@ -843,8 +957,8 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => {
843 type: 'linear', 957 type: 'linear',
844 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变 958 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
845 colorStops: [ 959 colorStops: [
846 {offset: 0, color: 'rgba(0, 168, 255, 1)'}, // 顶部颜色 960 {offset: 0, color: 'rgba(9, 173, 122, 1)'}, // 顶部颜色
847 {offset: 1, color: 'rgba(77, 197, 243, 1)'} // 底部颜色 961 // {offset: 1, color: 'rgba(77, 197, 243, 1)'} // 底部颜色
848 ] 962 ]
849 }, 963 },
850 }, 964 },
...@@ -866,8 +980,8 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => { ...@@ -866,8 +980,8 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => {
866 type: 'linear', 980 type: 'linear',
867 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变 981 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
868 colorStops: [ 982 colorStops: [
869 {offset: 0, color: 'rgba(46, 125, 50, 1)'}, 983 {offset: 0, color: 'rgba(109, 217, 255,1)'},
870 {offset: 1, color: 'rgba(76, 175, 80, 1)'} 984 // {offset: 1, color: 'rgba(76, 175, 80, 1)'}
871 ] 985 ]
872 }, 986 },
873 }, 987 },
...@@ -888,8 +1002,8 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => { ...@@ -888,8 +1002,8 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => {
888 type: 'linear', 1002 type: 'linear',
889 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变 1003 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
890 colorStops: [ 1004 colorStops: [
891 {offset: 0, color: 'rgba(58, 123, 213, 1)'}, 1005 {offset: 0, color: 'rgba(47, 169, 254, 1)'},
892 {offset: 1, color: 'rgba(96, 181, 255, 1)'} 1006 // {offset: 1, color: 'rgba(96, 181, 255, 1)'}
893 1007
894 // {offset: 0, color: 'rgba(142, 36, 170, 1)'}, 1008 // {offset: 0, color: 'rgba(142, 36, 170, 1)'},
895 // {offset: 1, color: 'rgba(213, 0, 249, 1)'} 1009 // {offset: 1, color: 'rgba(213, 0, 249, 1)'}
...@@ -918,8 +1032,8 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => { ...@@ -918,8 +1032,8 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => {
918 colorStops: [ 1032 colorStops: [
919 // {offset: 0, color: 'rgba(255, 87, 34, 0.8)'}, 1033 // {offset: 0, color: 'rgba(255, 87, 34, 0.8)'},
920 // {offset: 1, color: 'rgba(255, 138, 101, 0.6)'} 1034 // {offset: 1, color: 'rgba(255, 138, 101, 0.6)'}
921 {offset: 0, color: 'rgba(138, 43, 226, 0.8)'}, 1035 {offset: 0, color: 'rgba(2, 62, 218, 1)'},
922 {offset: 1, color: 'rgba(180, 120, 255, 0.6)'} 1036 // {offset: 1, color: 'rgba(180, 120, 255, 0.6)'}
923 ] 1037 ]
924 }, 1038 },
925 }, 1039 },
......
src/viewsPc/vip/rightPage.vue
1 <template> 1 <template>
2 <div class="pd20"> 2 <div class="pd20">
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">
7 <el-select 7 <el-select
...@@ -21,17 +21,18 @@ ...@@ -21,17 +21,18 @@
21 </div> 21 </div>
22 22
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 month" style="margin-right: 5px;width: 30%;"> 26 <div class="itemBox" style="margin-right: 5px;width: 45%;">
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
32 multiple
31 size="small" 33 size="small"
32 @change="handelType8"> 34 @change="handelType8">
33 <el-option label="本月" value="1"/> 35 <el-option v-for="(item,index) in monthList" :label="item" :value="index"/>
34 <el-option label="累计" value="2"/>
35 </el-select> 36 </el-select>
36 </div> 37 </div>
37 <div class="itemBox"> 38 <div class="itemBox">
...@@ -53,7 +54,7 @@ ...@@ -53,7 +54,7 @@
53 </div> 54 </div>
54 55
55 <div class="chartCard mt30"> 56 <div class="chartCard mt30">
56 <div class="title">应收账款账期</div> 57 <div class="title">应收账期</div>
57 <div ref="overdueRef" style="width: 100%; height: 24vh;"></div> 58 <div ref="overdueRef" style="width: 100%; height: 24vh;"></div>
58 </div> 59 </div>
59 </div> 60 </div>
...@@ -86,6 +87,7 @@ const overdueRef = ref(null) ...@@ -86,6 +87,7 @@ const overdueRef = ref(null)
86 const kindList = ref(['文书', '婚姻', '图书', '档案', '司法', '环保', '音频', '视频', '会计', '其他']) 87 const kindList = ref(['文书', '婚姻', '图书', '档案', '司法', '环保', '音频', '视频', '会计', '其他'])
87 const dataA = ref([80, 60, 55, 62, 50, 55, 60, 62, 48, 53]) 88 const dataA = ref([80, 60, 55, 62, 50, 55, 60, 62, 48, 53])
88 const radioA = ref('month') 89 const radioA = ref('month')
90 const monthList = ref(["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"])
89 91
90 const itemStyleList = ref([ 92 const itemStyleList = ref([
91 { 93 {
...@@ -182,7 +184,7 @@ const itemStyleList = ref([ ...@@ -182,7 +184,7 @@ const itemStyleList = ref([
182 184
183 const list9 = ref([]) 185 const list9 = ref([])
184 const list8Y = ref([]) 186 const list8Y = ref([])
185 const type8 = ref('2') 187 const type8 = ref([])
186 const month8 = ref([]) 188 const month8 = ref([])
187 const year8 = ref([]) 189 const year8 = ref([])
188 const list8 = ref([ 190 const list8 = ref([
...@@ -366,51 +368,76 @@ function handelSelect7() { ...@@ -366,51 +368,76 @@ function handelSelect7() {
366 368
367 async function handelGetYS008() { 369 async function handelGetYS008() {
368 const res = await getYS008(url.value, obj.value) 370 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 }
369 list8.value = res.data.list || [] 375 list8.value = res.data.list || []
370 list8Y.value = [] 376 list8Y.value = []
371 month8.value = [] 377 month8.value = []
372 year8.value = [] 378 year8.value = []
373 list8.value.sort((a, b) => a.HKQKMONTH - b.HKQKMONTH); 379 list8.value.sort((a, b) => a.HKQKMONTH - b.HKQKMONTH);
374 for (let i = 0; i < list8.value.length; i++) { 380 for (let i = 0; i < list8.value.length; i++) {
381 let monthValue = []
375 list8.value[i].itemStyle = itemStyleList.value[i % itemStyleList.value.length] 382 list8.value[i].itemStyle = itemStyleList.value[i % itemStyleList.value.length]
376 list8Y.value.push(list8.value[i].BASEJC) 383 list8Y.value.push(list8.value[i].BASEJC)
377 month8.value.push({ 384 month8.value.push({
378 value: list8.value[i].HKQKTOTAL / 10000, 385 value: list8.value[i].HKQKTOTAL / 10000,
379 itemStyle: list8.value[i].itemStyle, 386 itemStyle: list8.value[i].itemStyle,
380 }) 387 })
388 for (let j=1;j<13;j++) {
389 monthValue.push(list8.value[i]["HKQKMONTH"+j]/10000)
390 }
381 year8.value.push({ 391 year8.value.push({
382 value: list8.value[i].HKQKMONTH / 10000, 392 value: monthValue,
383 itemStyle: list8.value[i].itemStyle, 393 itemStyle: list8.value[i].itemStyle,
384 }) 394 })
385 } 395 }
386 let arr = type8.value == '2' ? month8.value : year8.value 396 let arr = month8.value
387 setB(list8Y.value, arr) 397 setB(list8Y.value, arr)
388 } 398 }
389 399
390 function handelSelect8() { 400 function handelSelect8() {
391 console.log(list8.value)
392 month8.value = [] 401 month8.value = []
393 year8.value = [] 402 year8.value = []
394 let arr = list8Y.value.map(val => list8.value.find(item => item.BASEJC === val)); 403 let arr = list8Y.value.map(val => list8.value.find(item => item.BASEJC === val));
395 list8Y.value = [] 404 list8Y.value = []
396 arr.sort((a, b) => a.HKQKMONTH - b.HKQKMONTH); 405 arr.sort((a, b) => a.HKQKTOTAL - b.HKQKTOTAL);
397 for (let i = 0; i < arr.length; i++) { 406 for (let i = 0; i < arr.length; i++) {
407 let monthValue = []
398 list8Y.value.push(arr[i].BASEJC) 408 list8Y.value.push(arr[i].BASEJC)
399 month8.value.push({ 409 month8.value.push({
400 value: arr[i].HKQKTOTAL / 10000, 410 value: arr[i].HKQKTOTAL / 10000,
401 itemStyle: arr[i].itemStyle, 411 itemStyle: arr[i].itemStyle,
402 }) 412 })
413 for (let j=1;j<13;j++) {
414 monthValue.push(arr[i]["HKQKMONTH"+j]/10000)
415 }
403 year8.value.push({ 416 year8.value.push({
404 value: arr[i].HKQKMONTH / 10000, 417 value: monthValue,
405 itemStyle: arr[i].itemStyle, 418 itemStyle: arr[i].itemStyle,
406 }) 419 })
407 } 420 }
408 let arrc = type8.value == '2' ? month8.value : year8.value 421 let arrc = month8.value
409 setB(list8Y.value, arrc) 422 setB(list8Y.value, arrc)
410 } 423 }
411 424
412 function handelType8() { 425 function handelType8() {
413 let arrc = type8.value == '2' ? month8.value : year8.value 426 // let arrc = type8.value == '2' ? month8.value : year8.value
427 let myData = [];
428 for (let i=0;i<year8.value.length;i++) {
429 let sum = 0
430 for (let j=0;j<type8.value.length;j++) {
431 sum += year8.value[i].value[type8.value[j]]
432 }
433 myData.push({
434 value:sum,
435 itemStyle:year8.value[i].itemStyle
436 })
437 }
438
439 let arrc = type8.value.length>0 ? myData : month8.value
440
414 setB(list8Y.value, arrc) 441 setB(list8Y.value, arrc)
415 } 442 }
416 443
...@@ -472,7 +499,7 @@ const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => { ...@@ -472,7 +499,7 @@ const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => {
472 xAxis: { 499 xAxis: {
473 type: 'value', 500 type: 'value',
474 axisLabel: { 501 axisLabel: {
475 formatter: '{value}w' // 在数值后添加单位 502 formatter: '{value}' // 在数值后添加单位
476 }, 503 },
477 axisLine: { 504 axisLine: {
478 show: true, 505 show: true,
...@@ -655,7 +682,7 @@ const setB = (arrY, arr1, arr2) => { ...@@ -655,7 +682,7 @@ const setB = (arrY, arr1, arr2) => {
655 xAxis: { 682 xAxis: {
656 type: 'value', 683 type: 'value',
657 axisLabel: { 684 axisLabel: {
658 formatter: '{value}w' // 在数值后添加单位 685 formatter: '{value}' // 在数值后添加单位
659 }, 686 },
660 axisLine: { 687 axisLine: {
661 show: true, 688 show: true,
...@@ -932,8 +959,8 @@ const setC = (arry, arr1, arr2, arr3) => { ...@@ -932,8 +959,8 @@ const setC = (arry, arr1, arr2, arr3) => {
932 type: 'linear', 959 type: 'linear',
933 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变 960 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
934 colorStops: [ 961 colorStops: [
935 {offset: 0, color: 'rgba(147, 119, 28, 1)'}, // 顶部颜色 962 {offset: 0, color: 'rgba(109, 217, 255, 1)'}, // 顶部颜色
936 {offset: 1, color: 'rgba(244, 171, 9, 1)'} // 底部颜色 963 // {offset: 1, color: 'rgba(244, 171, 9, 1)'} // 底部颜色
937 ], 964 ],
938 }, 965 },
939 }, 966 },
...@@ -954,8 +981,8 @@ const setC = (arry, arr1, arr2, arr3) => { ...@@ -954,8 +981,8 @@ const setC = (arry, arr1, arr2, arr3) => {
954 type: 'linear', 981 type: 'linear',
955 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变 982 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
956 colorStops: [ 983 colorStops: [
957 {offset: 0, color: 'rgba(82, 72, 228, 1)'}, // 顶部颜色 984 {offset: 0, color: 'rgba(24, 124, 236, 1)'}, // 顶部颜色
958 {offset: 1, color: 'rgba(148, 140, 252, 1)'} // 底部颜色 985 // {offset: 1, color: 'rgba(148, 140, 252, 1)'} // 底部颜色
959 ], 986 ],
960 }, 987 },
961 }, 988 },
...@@ -977,8 +1004,8 @@ const setC = (arry, arr1, arr2, arr3) => { ...@@ -977,8 +1004,8 @@ const setC = (arry, arr1, arr2, arr3) => {
977 type: 'linear', 1004 type: 'linear',
978 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变 1005 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
979 colorStops: [ 1006 colorStops: [
980 {offset: 0, color: 'rgba(254, 151, 198, 1)'}, // 顶部颜色 1007 {offset: 0, color: 'rgba(201, 19, 34, 1)'}, // 顶部颜色
981 {offset: 1, color: 'rgba(176, 72, 119, 1)'} // 底部颜色 1008 // {offset: 1, color: 'rgba(176, 72, 119, 1)'} // 底部颜色
982 ], 1009 ],
983 }, 1010 },
984 }, 1011 },
......
src/viewsPc/vip/scrollingData.vue
...@@ -34,11 +34,15 @@ const list = computed(() => props.data || []) ...@@ -34,11 +34,15 @@ const list = computed(() => props.data || [])
34 34
35 const offset = ref(0); 35 const offset = ref(0);
36 const scrollInterval = ref(null); 36 const scrollInterval = ref(null);
37 const scrollInterval2 = ref(null);
37 const isPaused = ref(false); 38 const isPaused = ref(false);
38 const containerHeight = ref(0); 39 const containerHeight = ref(0);
39 const contentHeight = ref(0); 40 const contentHeight = ref(0);
40 const itemHeight = ref(0); 41 const itemHeight = ref(0);
41 42
43 function delay(ms) {
44 return new Promise(resolve => setTimeout(resolve, ms));
45 }
42 // 初始化滚动 46 // 初始化滚动
43 const initScroll = () => { 47 const initScroll = () => {
44 // 清除之前的定时器 48 // 清除之前的定时器
...@@ -46,18 +50,24 @@ const initScroll = () => { ...@@ -46,18 +50,24 @@ const initScroll = () => {
46 clearInterval(scrollInterval.value); 50 clearInterval(scrollInterval.value);
47 } 51 }
48 // 重置位置到第一条数据 52 // 重置位置到第一条数据
49 offset.value = 0; 53 offset.value = -props.speed-0.1;
50 54 scrollInterval2.value = setInterval(()=> {
51 // 设置定时器 55 // 设置定时器
52 scrollInterval.value = setInterval(() => { 56 scrollInterval.value = setInterval(() => {
53 if (!isPaused.value) { 57 if (!isPaused.value) {
54 offset.value -= props.speed; 58 offset.value -= props.speed;
55 // 当滚动到内容的一半时，重置位置实现无缝滚动 59 // 当滚动到内容的一半时，重置位置实现无缝滚动
56 if (Math.abs(offset.value) >= contentHeight.value / 2) { 60 if (Math.abs(offset.value) >= contentHeight.value / 2) {
57 offset.value += contentHeight.value / 2; 61 offset.value += contentHeight.value / 2;
62 }
58 } 63 }
59 } 64 if (offset.value>=(-props.speed)) {
60 }, 20); 65 console.log("1111111111111111111111111")
66 clearInterval(scrollInterval.value);
67 }
68 }, 20);
69 },10000)
70
61 }; 71 };
62 72
63 // 暂停滚动 73 // 暂停滚动
...@@ -96,6 +106,9 @@ onUnmounted(() => { ...@@ -96,6 +106,9 @@ onUnmounted(() => {
96 if (scrollInterval.value) { 106 if (scrollInterval.value) {
97 clearInterval(scrollInterval.value); 107 clearInterval(scrollInterval.value);
98 } 108 }
109 if (scrollInterval2.value) {
110 clearInterval(scrollInterval2.value);
111 }
99 }); 112 });
100 </script> 113 </script>
101 114
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!