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 300 additions and 88 deletions
src/viewsPc/home.vue
<template>
<div class="main">
<el-row class="w100">
<el-col v-if="obj.IFBASE" :span="type=='否'?8:12">
<el-col v-if="obj.IFBASE" :span="8">
<left-page :obj="obj" :type="type" :url="result"/>
</el-col>
<el-col v-if="type=='否'" :span="8">
<center-page :obj="obj" :type="type=='否'" :url="result"/>
<el-col v-if="obj.IFBASE" :span="8">
<center-page :obj="obj" :isLeader="isLeader" :type="type=='否'" :url="result"/>
</el-col>
<el-col v-if="obj.IFBASE" :span="type=='否'?8:12">
<el-col v-if="obj.IFBASE" :span="8">
<right-page :obj="obj" :type="type" :url="result"/>
</el-col>
</el-row>
......@@ -28,15 +28,22 @@ const url = ref()
const obj = ref({})
const result = ref()
const router = useRouter()
// url.value = 'http://192.168.1.152:8899/login/sid=a3afc265-1e60-4376-bcfb-6ca124db8704#/'
url.value = window.location.href
let isLeader = ref(false)
url.value = 'http://192.168.1.152:8899/login/sid=3e6ac454-6d9a-4f37-a593-d06c65703792#/'
// url.value = window.location.href
result.value = url.value?.split('=')[1]?.split('#')[0];
function validateEmail(email) {
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,}))$/;
return re.test(String(email).toLowerCase());
}
onMounted(() => {
console.log(url.value)
console.log(result.value)
if (result.value) {
handelGetYS000()
isLeader.value = validateEmail(result.value)
} else {
// result.value = 'a3afc265-1e60-4376-bcfb-6ca124db8704'
// handelGetYS000()
......
src/viewsPc/vip/centerPage.vue
......@@ -28,9 +28,9 @@
</div>
<div ref="bing1" style="width: 100%;height:13.3vh;">
</div>
<div class="bingBottom heiti">
<div style="text-align: center">{{ `${dayjs().format('YYYY')}年` }}营业收入 <br>(万元)</div>
</div>
<!-- <div class="bingBottom heiti">-->
<!-- <div style="text-align: center">{{ `${dayjs().format('YYYY')}年` }}营业收入 <br>(万元)</div>-->
<!-- </div>-->
</div>
<div ref="zhuRef1" class="zhu" style="width:70%;height: 17.3vh"/>
</div>
......@@ -46,11 +46,11 @@
</div>
<div ref="bing2" style="width: 100%;height:13.3vh;">
</div>
<div class="bingBottom">
<div style="text-align: center;">{{ `${dayjs().format('YYYY')}年${dayjs().format('MM')}月` }}前 <br>
累计应收余额 <br>(万元)
</div>
</div>
<!-- <div class="bingBottom">-->
<!-- <div style="text-align: center;">{{ `${dayjs().format('YYYY')}年${dayjs().format('MM')}月` }}前 <br>-->
<!-- 累计应收余额 <br>(万元)-->
<!-- </div>-->
<!-- </div>-->
</div>
<div ref="zhuRef2" class="zhu" style="width:70%;height: 17.3vh"/>
</div>
......@@ -64,12 +64,13 @@
<span><img alt="" class="titleImg" src="@/assets/image/title_bg.png"></span>
现金余额
</div>
<div ref="bing3" style="width: 100%;height:13.3vh;">
</div>
<div class="bingBottom">
<div style="text-align: center">{{ `${dayjs().format('YYYY')}年${dayjs().format('MM')}月` }}前 <br> 累计现金余额<br>(万元)
</div>
</div>
<div class="bingImg" style="width: 100%;height:13.3vh;">{{bing_number3}}</div>
<!-- <div ref="bing3" style="width: 100%;height:13.3vh;">-->
<!-- </div>-->
<!-- <div class="bingBottom">-->
<!-- <div style="text-align: center">{{ `${dayjs().format('YYYY')}年${dayjs().format('MM')}月` }}前 <br> 累计现金余额<br>(万元)-->
<!-- </div>-->
<!-- </div>-->
</div>
<div ref="zhuRef3" class="zhu" style="width:70%;height: 17.3vh"/>
</div>
......@@ -97,7 +98,7 @@ import {autoToolTip} from "@/plugins/auto-toolTip";
import ScrollingData from './scrollingData.vue'
import * as echarts from "echarts";
import * as api from "@/apiPc/common"
import {onMounted, ref, computed, onUnmounted, getCurrentInstance} from 'vue'
import {onMounted, ref, computed, onUnmounted, getCurrentInstance, nextTick} from 'vue'
import {dayjs} from 'element-plus'
import {getYS000, getYS001, getYS002, getYS003, getYS004, getYS005} from '@/api/server.js'
import Information from "/@/viewsPc/vip/components/information.vue";
......@@ -109,6 +110,10 @@ const props = defineProps({
type: Boolean,
default: false
},
isLeader: {
type: Boolean,
default: false
},
url: {
type: String,
default: undefined
......@@ -123,6 +128,7 @@ const props = defineProps({
const url = computed(() => props.url)
const obj = computed(() => props.obj)
const isLeader = computed(() => props.isLeader)
const zhuRef1 = ref(null)
const zhuRef2 = ref(null)
const zhuRef3 = ref(null)
......@@ -143,6 +149,7 @@ const resYear3 = ref()
const activeName1 = ref()
const activeName2 = ref()
const activeName3 = ref()
const bing_number3 = ref()
let chart1
......@@ -165,7 +172,6 @@ onMounted(async () => {
}
window.addEventListener('resize', handleResize);
}
// handelBing1()
// handelZhu1()
// handelGetYS001()
......@@ -219,8 +225,9 @@ async function handelGetYS003() {
// }
obj1.list = obj1.list.filter(v => v.XJCOST != 0)
bing_number3.value = toDieThousands((res.data.yeargroup[0].TOTAL / 10000).toFixed() || 0)
handelBing3(obj1, obj2)
// handelBing3(obj1, obj2)
handelZhu3(obj1, obj2)
......@@ -345,6 +352,10 @@ async function handelGetYS004() {
async function handelGetYS005() {
const res = await getYS005(url.value, obj.value)
form.value = res.data
console.log(isLeader)
if (isLeader.value) {
proxy.$refs['InformationRef'].open(form.value.leaderinfo,form.value.APPLYDATE)
}
}
......@@ -367,6 +378,17 @@ function handleResize() {
chart44?.resize()
}
function toDieThousands(num) {
let newNum = num
if (num) {
//转为数字类型
const numNum = Number(newNum.toString())
//正则修改千分位
newNum = numNum.toFixed(0).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
}
return newNum
}
const handelBing1 = (arr1, arr2) => {
// arr1 2025
// arr2 2024
......@@ -429,7 +451,7 @@ const handelBing1 = (arr1, arr2) => {
label: {
show: true, // 显示标签
position: 'center', // 位置居中
formatter: (arr1.TOTAL / 10000).toFixed(), // 文字内容
formatter: toDieThousands((arr1.TOTAL / 10000).toFixed()), // 文字内容
color: "#ffff",
rich: {
total: {
......@@ -598,7 +620,7 @@ const handelBing2 = (row1, row2) => {
label: {
show: true, // 显示标签
position: 'center', // 位置居中
formatter: (row1.TOTAL / 10000).toFixed() || 0, // 文字内容
formatter: toDieThousands((row1.TOTAL / 10000).toFixed() || 0), // 文字内容
color: "#ffff",
rich: {
total: {
......@@ -834,7 +856,6 @@ const handelZhu1 = (row1, row2) => {
yAxis: [
{
type: 'value',
name: '单位(万)',
axisLine: {
show: true,
lineStyle: {
......@@ -843,6 +864,10 @@ const handelZhu1 = (row1, row2) => {
type: 'solid'
},
},
axisLabel: {
show:false
// formatter: '{value}w' // 在数值后添加单位
},
splitLine: {
show: true, // 默认false，需显式开启
lineStyle: {
......@@ -952,7 +977,6 @@ const handelZhu2 = (row1, row2) => {
yAxis: [
{
type: 'value',
name: '单位(万)',
axisLine: {
show: true,
lineStyle: {
......@@ -961,6 +985,10 @@ const handelZhu2 = (row1, row2) => {
type: 'solid'
}
},
axisLabel: {
show:false
// formatter: '{value}w' // 在数值后添加单位
},
splitLine: {
show: true, // 默认false，需显式开启
lineStyle: {
......@@ -1025,7 +1053,6 @@ const handelZhu2 = (row1, row2) => {
// autoHover(chart22, option, 0, 2000)
}
const handelZhu3 = (row1, row2) => {
console.log(11111, row1, row2)
let name1 = row1.YEAR + '年'
let name2 = row2.YEAR + '年'
console.log('年', row1.YEAR)
......@@ -1091,7 +1118,6 @@ const handelZhu3 = (row1, row2) => {
yAxis: [
{
type: 'value',
name: '单位(万)',
axisLine: {
show: true,
lineStyle: {
......@@ -1100,6 +1126,10 @@ const handelZhu3 = (row1, row2) => {
type: 'solid'
}
},
axisLabel: {
show:false
// formatter: '{value}w' // 在数值后添加单位
},
splitLine: {
show: true, // 默认false，需显式开启
lineStyle: {
......@@ -1248,6 +1278,10 @@ const handelZhu4 = (listX, dataList, arr1, arr2) => {
type: 'solid'
}
},
axisLabel: {
show:false
// formatter: '{value}w' // 在数值后添加单位
},
splitLine: {
show: true, // 默认false，需显式开启
lineStyle: {
......@@ -1419,7 +1453,7 @@ const clear = () => {
}
function handelView() {
proxy.$refs['InformationRef'].open(form.value.leaderinfo)
proxy.$refs['InformationRef'].open(form.value.leaderinfo,form.value.APPLYDATE)
}
onUnmounted(() => {
......@@ -1632,6 +1666,13 @@ onUnmounted(() => {
color: #FFFFFF;
}
}
.bingImg {
background: url("@/assets/image/rmb.png") no-repeat center;
color: #fff;
font-size: 12px;
padding: 49px;
}
}
}
}
......
src/viewsPc/vip/components/information.vue
......@@ -7,6 +7,7 @@
width="33%"
>
<div class="son">
<div style="color: #fff;font-size: 15px">填写日期: {{myDate}}</div>
<p v-for="val in list" :key="val" class="row">
<span></span> {{ val }}
</p>
......@@ -19,14 +20,15 @@
import {ref} from 'vue'
const list = ref([])
const myDate = ref()
const showGroup = ref(false)
function open(row) {
function open(row,date) {
debugger
showGroup.value = true
list.value = row
myDate.value = date
console.log(list.value)
}
......@@ -73,4 +75,12 @@ defineExpose({
border-radius: calc(3 * 100vw / 1920);
}
}
.el-overlay {
/* 自定义样式 */
background-color: rgba(0, 0, 0, 0.7); /* 例如，更改背景颜色 */
}
.el-dialog__title{
color: #fff;
}
</style>
......
src/viewsPc/vip/leftPage.vue
<template>
<div class="pd20">
<div class="chartCard">
<div class="title">应收账款余额</div>
<div ref="zhuRef" style="width: 100%; height: 24vh;"></div>
</div>
<div class="chartCard mt30">
<div>
<div class="title">应收账款余额与收入</div>
<div class="title">收入对比</div>
<div class="po_right">
<div class="itemBox">
<el-select
......@@ -39,9 +34,16 @@
<div ref="lineRef" style="width: 100%; height: 24vh;"></div>
</div>
<div class="chartCard mt30">
<div class="title">余额占比</div>
<div ref="zhuRef" style="width: 100%; height: 24vh;"></div>
</div>
<div class="chartCard mt30">
<div>
<div class="title">应收账款余额组成</div>
<div class="title">节点组成</div>
<div class="po_right">
<div class="itemBox">
......@@ -212,6 +214,14 @@ async function handelGetYS006() {
}
}
set2.value.sort((a,b)=>{
return b.value - a.value
})
set3.value.sort((a,b)=>{
return b.value - a.value
})
setA(set1.value, set2.value, set3.value)
setB(
type1.value.includes('1') ? s1.value : [],
......@@ -370,6 +380,9 @@ const getdata = () => {
}
const setA = (arr, arr2, arr3) => {
let sum1 = arr.reduce((a, b) => a + b.value, 0)
let sumPercent1 = ((arr2.reduce((a, b) => a + b.value, 0)/sum1)*100).toFixed(2)
let sumPercent2 = ((arr3.reduce((a, b) => a + b.value, 0)/sum1)*100).toFixed(2)
chartA = echarts.init(zhuRef.value)
const option = {
tooltip: {
......@@ -390,21 +403,60 @@ const setA = (arr, arr2, arr3) => {
right: '5%',
top: '12%',
bottom: 20,
itemGap:5,
textStyle: {
color: '#FFF'
color: '#FFF',
rich: {
a:{
float:'left',
fontSize: 12,
lineHeight: 12,
width:40,
},
b:{
float:'right',
fontSize: 12,
lineHeight: 12,
width:40,
},
c:{
float:'left',
fontSize: 12,
lineHeight: 22,
width:40,
},
d:{
float:'right',
fontSize: 12,
lineHeight: 22,
width:40,
},
hr: {
borderColor: '#fff',
borderWidth: 1,
width: '100%',
height: 0,
margin:10
}
},
},
formatter: function (name) {
let value = 0
let isLast = false
for (let i = 0; i < option.series[2].data?.length; i++) {
if (option.series[2].data[i].name === name) {
value = option.series[2].data[i].value;
break;
}
}
if (arr2[arr2.length-1].name === name) {
isLast = true
}
// 计算百分比
let num1 = ((value / option.series[2].data.reduce((a, b) => a + b.value, 0)) * 100).toFixed(2);
let num2 = num1 > 0 ? num1 + '%' : 0 + '%'
return name + ' ' + num2;
return isLast?['{c|' + name + '}' + ' ' + '{d|' + num2 + '}','{hr|}'].join('\n') : '{a|' + name + '}' + ' ' + '{b|' + num2 + '}';
// return name + ' ' + num2;
},
},
{
......@@ -413,24 +465,84 @@ const setA = (arr, arr2, arr3) => {
right: '30%',
top: '12%',
bottom: 20,
itemGap:5,
textStyle: {
color: '#FFF'
color: '#FFF',
rich: {
a:{
float:'left',
fontSize: 12,
lineHeight: 12,
width:40,
},
b:{
float:'right',
fontSize: 12,
lineHeight: 12,
width:40,
},
c:{
float:'left',
fontSize: 12,
lineHeight: 22,
width:40,
},
d:{
float:'right',
fontSize: 12,
lineHeight: 22,
width:40,
},
hr: {
borderColor: '#fff',
borderWidth: 1,
width: '100%',
height: 0,
margin:10
}
},
},
formatter: function (name) {
let value = 0
let isLast = false
for (let i = 0; i < option.series[2].data?.length; i++) {
if (option.series[2].data[i].name === name) {
value = option.series[2].data[i].value;
break;
}
}
if (arr3[arr3.length-1].name === name) {
isLast = true
}
// 计算百分比
let num1 = ((value / option.series[2].data.reduce((a, b) => a + b.value, 0)) * 100).toFixed(2);
let num2 = num1 > 0 ? num1 + '%' : 0 + '%'
return name + ' ' + num2;
return isLast?['{c|' + name + '}' + ' ' + '{d|' + num2 + '}','{hr|}'].join('\n') : '{a|' + name + '}' + ' ' + '{b|' + num2 + '}';
// return name + ' ' + num2;
},
}
],
graphic: {
elements: [{
type: 'text',
bottom: '15%', // 可以调整位置，例如使用 'bottom' 来定位到图例下方
right: '33%',
style: {
text: '陆地：' + sumPercent2+'%', // 这里可以计算合计值并显示
fill: '#fff', // 文本颜色
fontSize: 12, // 文本大小
},
},{
type: 'text',
bottom: '15%', // 可以调整位置，例如使用 'bottom' 来定位到图例下方
right: '8%',
style: {
text: '海上：' + sumPercent1+'%', // 这里可以计算合计值并显示
fill: '#fff', // 文本颜色
fontSize: 12, // 文本大小
}
}],
},
series: [
{
type: 'pie',
......@@ -484,8 +596,7 @@ const setA = (arr, arr2, arr3) => {
color: function (params) {
// 自定义颜色
let colorList = [
'#8791FD', '#E35E1C', '#E47B75', '#F4AB09', '#F7E10F', '#068EEF', '#1050E4', '#01D7F0', '#46E874', '#F5F5F5', '#5470C6', '#91CC75', '#FAC858', '#EE6666', '#73C0DE', '#3BA272', '#FC8452', '#9A60B4', '#EA7CCC', '#1E90FF', '#508DFF', '#5FE2E4', '#FCE5CA',
'#A6A9FF', '#7AFF9C', '#FFD6D4', '#FFE082'
'#A4E6FF', '#6ED8FF', '#2FA9FF', '#187CEC', '#0142DA', '#FEFFD3', '#FFF59C', '#F7E20F', '#F7CE10', '#D29F05',
];
return colorList[params.dataIndex]
}
......@@ -570,7 +681,8 @@ const setB = (arr1, arr2, arr3, arr4) => {
{
type: 'value',
axisLabel: {
formatter: '{value}w' // 在数值后添加单位
show:false
// formatter: '{value}w' // 在数值后添加单位
},
name: '',
axisLine: {
......@@ -592,7 +704,7 @@ const setB = (arr1, arr2, arr3, arr4) => {
],
series: [
{
name: `${Year2}年应收账款余额`,
name: `${Year2}应收余额`,
type: 'bar',
barGap: 0,
emphasis: {
......@@ -615,7 +727,7 @@ const setB = (arr1, arr2, arr3, arr4) => {
barWidth: '15%'
},
{
name: `${Year1}年应收账款余额`,
name: `${Year1}应收余额`,
type: 'bar',
emphasis: {
focus: 'series'
......@@ -638,7 +750,7 @@ const setB = (arr1, arr2, arr3, arr4) => {
barWidth: '15%'
},
{
name: `${Year2}年收入`,
name: `${Year2}收入`,
type: 'bar',
emphasis: {
focus: 'series'
......@@ -660,7 +772,7 @@ const setB = (arr1, arr2, arr3, arr4) => {
barWidth: '15%'
},
{
name: `${Year1}年收入`,
name: `${Year1}收入`,
type: 'bar',
emphasis: {
focus: 'series'
......@@ -709,7 +821,7 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => {
<div style="font-weight:bold">${row.name}</div>
<div style="display:flex;align-items:center;margin-top:5px">
${row.marker}
${row.seriesName}: ${row.value.toFixed(2)}万
${row.seriesName}: ${row.value.toFixed(0)}万
</div>
<div>
${row.data?.info ? row.data?.info?.replaceAll('万', '万<br>') : ''}
......@@ -765,8 +877,10 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => {
type: 'value',
name: '',
axisLabel: {
formatter: '{value}w' // 在数值后添加单位
// formatter: '{value}w' // 在数值后添加单位
show:false,
},
axisLine: {
show: true,
lineStyle: {
......@@ -799,8 +913,8 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => {
type: 'linear',
x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
colorStops: [
{offset: 0, color: 'rgba(17, 201, 104,1 )'}, // 顶部颜色
{offset: 1, color: 'rgba(70, 232, 116,1 )'} // 底部颜色
{offset: 0, color: 'rgba(141, 251, 116,1 )'}, // 顶部颜色
// {offset: 1, color: 'rgba(70, 232, 116,1 )'} // 底部颜色
]
},
},
......@@ -821,8 +935,8 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => {
type: 'linear',
x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
colorStops: [
{offset: 0, color: 'rgba(244, 171, 9, 1)'}, // 顶部颜色
{offset: 1, color: 'rgba(234, 216, 18, 1)'} // 底部颜色
{offset: 0, color: 'rgba(1, 255, 133, 1)'}, // 顶部颜色
// {offset: 1, color: 'rgba(234, 216, 18, 1)'} // 底部颜色
]
},
},
......@@ -843,8 +957,8 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => {
type: 'linear',
x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
colorStops: [
{offset: 0, color: 'rgba(0, 168, 255, 1)'}, // 顶部颜色
{offset: 1, color: 'rgba(77, 197, 243, 1)'} // 底部颜色
{offset: 0, color: 'rgba(9, 173, 122, 1)'}, // 顶部颜色
// {offset: 1, color: 'rgba(77, 197, 243, 1)'} // 底部颜色
]
},
},
......@@ -866,8 +980,8 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => {
type: 'linear',
x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
colorStops: [
{offset: 0, color: 'rgba(46, 125, 50, 1)'},
{offset: 1, color: 'rgba(76, 175, 80, 1)'}
{offset: 0, color: 'rgba(109, 217, 255,1)'},
// {offset: 1, color: 'rgba(76, 175, 80, 1)'}
]
},
},
......@@ -888,8 +1002,8 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => {
type: 'linear',
x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
colorStops: [
{offset: 0, color: 'rgba(58, 123, 213, 1)'},
{offset: 1, color: 'rgba(96, 181, 255, 1)'}
{offset: 0, color: 'rgba(47, 169, 254, 1)'},
// {offset: 1, color: 'rgba(96, 181, 255, 1)'}
// {offset: 0, color: 'rgba(142, 36, 170, 1)'},
// {offset: 1, color: 'rgba(213, 0, 249, 1)'}
......@@ -918,8 +1032,8 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => {
colorStops: [
// {offset: 0, color: 'rgba(255, 87, 34, 0.8)'},
// {offset: 1, color: 'rgba(255, 138, 101, 0.6)'}
{offset: 0, color: 'rgba(138, 43, 226, 0.8)'},
{offset: 1, color: 'rgba(180, 120, 255, 0.6)'}
{offset: 0, color: 'rgba(2, 62, 218, 1)'},
// {offset: 1, color: 'rgba(180, 120, 255, 0.6)'}
]
},
},
......
src/viewsPc/vip/rightPage.vue
<template>
<div class="pd20">
<div class="chartCard">
<div class="title">开票计划与执行</div>
<div class="title">开票情况</div>
<div class="po_right" style="justify-content: end">
<div class="itemBox">
<el-select
......@@ -21,17 +21,18 @@
</div>
<div class="chartCard mt30">
<div class="title">回款</div>
<div class="title">回款情况</div>
<div class="po_right" style="justify-content: end;">
<div class="itemBox month" style="margin-right: 5px;width: 30%;">
<div class="itemBox" style="margin-right: 5px;width: 45%;">
<el-select
v-model="type8"
class="select"
placeholder="全部基地"
collapse-tags
multiple
size="small"
@change="handelType8">
<el-option label="本月" value="1"/>
<el-option label="累计" value="2"/>
<el-option v-for="(item,index) in monthList" :label="item" :value="index"/>
</el-select>
</div>
<div class="itemBox">
......@@ -53,7 +54,7 @@
</div>
<div class="chartCard mt30">
<div class="title">应收账款账期</div>
<div class="title">应收账期</div>
<div ref="overdueRef" style="width: 100%; height: 24vh;"></div>
</div>
</div>
......@@ -86,6 +87,7 @@ const overdueRef = ref(null)
const kindList = ref(['文书', '婚姻', '图书', '档案', '司法', '环保', '音频', '视频', '会计', '其他'])
const dataA = ref([80, 60, 55, 62, 50, 55, 60, 62, 48, 53])
const radioA = ref('month')
const monthList = ref(["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"])
const itemStyleList = ref([
{
......@@ -182,7 +184,7 @@ const itemStyleList = ref([
const list9 = ref([])
const list8Y = ref([])
const type8 = ref('2')
const type8 = ref([])
const month8 = ref([])
const year8 = ref([])
const list8 = ref([
......@@ -366,51 +368,76 @@ function handelSelect7() {
async function handelGetYS008() {
const res = await getYS008(url.value, obj.value)
let nowMonth = new Date().getMonth()
for (let i = 0;i <= nowMonth;i++) {
type8.value.push(i)
}
list8.value = res.data.list || []
list8Y.value = []
month8.value = []
year8.value = []
list8.value.sort((a, b) => a.HKQKMONTH - b.HKQKMONTH);
for (let i = 0; i < list8.value.length; i++) {
let monthValue = []
list8.value[i].itemStyle = itemStyleList.value[i % itemStyleList.value.length]
list8Y.value.push(list8.value[i].BASEJC)
month8.value.push({
value: list8.value[i].HKQKTOTAL / 10000,
itemStyle: list8.value[i].itemStyle,
})
for (let j=1;j<13;j++) {
monthValue.push(list8.value[i]["HKQKMONTH"+j]/10000)
}
year8.value.push({
value: list8.value[i].HKQKMONTH / 10000,
value: monthValue,
itemStyle: list8.value[i].itemStyle,
})
}
let arr = type8.value == '2' ? month8.value : year8.value
let arr = month8.value
setB(list8Y.value, arr)
}
function handelSelect8() {
console.log(list8.value)
month8.value = []
year8.value = []
let arr = list8Y.value.map(val => list8.value.find(item => item.BASEJC === val));
list8Y.value = []
arr.sort((a, b) => a.HKQKMONTH - b.HKQKMONTH);
arr.sort((a, b) => a.HKQKTOTAL - b.HKQKTOTAL);
for (let i = 0; i < arr.length; i++) {
let monthValue = []
list8Y.value.push(arr[i].BASEJC)
month8.value.push({
value: arr[i].HKQKTOTAL / 10000,
itemStyle: arr[i].itemStyle,
})
for (let j=1;j<13;j++) {
monthValue.push(arr[i]["HKQKMONTH"+j]/10000)
}
year8.value.push({
value: arr[i].HKQKMONTH / 10000,
value: monthValue,
itemStyle: arr[i].itemStyle,
})
}
let arrc = type8.value == '2' ? month8.value : year8.value
let arrc = month8.value
setB(list8Y.value, arrc)
}
function handelType8() {
let arrc = type8.value == '2' ? month8.value : year8.value
// let arrc = type8.value == '2' ? month8.value : year8.value
let myData = [];
for (let i=0;i<year8.value.length;i++) {
let sum = 0
for (let j=0;j<type8.value.length;j++) {
sum += year8.value[i].value[type8.value[j]]
}
myData.push({
value:sum,
itemStyle:year8.value[i].itemStyle
})
}
let arrc = type8.value.length>0 ? myData : month8.value
setB(list8Y.value, arrc)
}
......@@ -472,7 +499,7 @@ const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => {
xAxis: {
type: 'value',
axisLabel: {
formatter: '{value}w' // 在数值后添加单位
formatter: '{value}' // 在数值后添加单位
},
axisLine: {
show: true,
......@@ -655,7 +682,7 @@ const setB = (arrY, arr1, arr2) => {
xAxis: {
type: 'value',
axisLabel: {
formatter: '{value}w' // 在数值后添加单位
formatter: '{value}' // 在数值后添加单位
},
axisLine: {
show: true,
......@@ -932,8 +959,8 @@ const setC = (arry, arr1, arr2, arr3) => {
type: 'linear',
x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
colorStops: [
{offset: 0, color: 'rgba(147, 119, 28, 1)'}, // 顶部颜色
{offset: 1, color: 'rgba(244, 171, 9, 1)'} // 底部颜色
{offset: 0, color: 'rgba(109, 217, 255, 1)'}, // 顶部颜色
// {offset: 1, color: 'rgba(244, 171, 9, 1)'} // 底部颜色
],
},
},
......@@ -954,8 +981,8 @@ const setC = (arry, arr1, arr2, arr3) => {
type: 'linear',
x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
colorStops: [
{offset: 0, color: 'rgba(82, 72, 228, 1)'}, // 顶部颜色
{offset: 1, color: 'rgba(148, 140, 252, 1)'} // 底部颜色
{offset: 0, color: 'rgba(24, 124, 236, 1)'}, // 顶部颜色
// {offset: 1, color: 'rgba(148, 140, 252, 1)'} // 底部颜色
],
},
},
......@@ -977,8 +1004,8 @@ const setC = (arry, arr1, arr2, arr3) => {
type: 'linear',
x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
colorStops: [
{offset: 0, color: 'rgba(254, 151, 198, 1)'}, // 顶部颜色
{offset: 1, color: 'rgba(176, 72, 119, 1)'} // 底部颜色
{offset: 0, color: 'rgba(201, 19, 34, 1)'}, // 顶部颜色
// {offset: 1, color: 'rgba(176, 72, 119, 1)'} // 底部颜色
],
},
},
......
src/viewsPc/vip/scrollingData.vue
......@@ -34,11 +34,15 @@ const list = computed(() => props.data || [])
const offset = ref(0);
const scrollInterval = ref(null);
const scrollInterval2 = ref(null);
const isPaused = ref(false);
const containerHeight = ref(0);
const contentHeight = ref(0);
const itemHeight = ref(0);
function delay(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
// 初始化滚动
const initScroll = () => {
// 清除之前的定时器
......@@ -46,8 +50,8 @@ const initScroll = () => {
clearInterval(scrollInterval.value);
}
// 重置位置到第一条数据
offset.value = 0;
offset.value = -props.speed-0.1;
scrollInterval2.value = setInterval(()=> {
// 设置定时器
scrollInterval.value = setInterval(() => {
if (!isPaused.value) {
......@@ -57,7 +61,13 @@ const initScroll = () => {
offset.value += contentHeight.value / 2;
}
}
if (offset.value>=(-props.speed)) {
console.log("1111111111111111111111111")
clearInterval(scrollInterval.value);
}
}, 20);
},10000)
};
// 暂停滚动
......@@ -96,6 +106,9 @@ onUnmounted(() => {
if (scrollInterval.value) {
clearInterval(scrollInterval.value);
}
if (scrollInterval2.value) {
clearInterval(scrollInterval2.value);
}
});
</script>
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!