Skip to content

杨炀 / dangan_dataV

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

daping quan

1 parent 5a091cb6
Expand all
Inline Side-by-side
Showing 6 changed files with 119 additions and 61 deletions
src/viewsPc/home.vue
<template>
<div class="main">
<!-- <div style="position: absolute;top: 23px;right: 20px">-->
<!-- <el-date-picker-->
<!-- v-model="nowDate"-->
<!-- type="date"-->
<!-- placeholder="Pick a day"-->
<!-- :size="size"-->
<!-- ></el-date-picker>-->
<!-- </div>-->
<el-row class="w100">
<el-col v-if="obj.IFBASE" :span="8">
<left-page :obj="obj" :type="type" :url="result"/>
<left-page :obj="obj" :type="type=='否'" :url="result"/>
</el-col>
<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="8">
<right-page :obj="obj" :type="type" :url="result"/>
<right-page :obj="obj" :type="type=='否'" :url="result"/>
</el-col>
</el-row>
</div>
......@@ -28,9 +36,10 @@ const url = ref()
const obj = ref({})
const result = ref()
const router = useRouter()
const nowDate = new Date()
let isLeader = ref(false)
url.value = 'http://192.168.1.152:8899/login/sid=3e6ac454-6d9a-4f37-a593-d06c65703792#/'
// url.value = window.location.href
// url.value = 'http://192.168.1.152:8899/login/sid=a5d48b77-0da4-4008-aa1c-f7f0ed575413#/'
url.value = window.location.href
result.value = url.value?.split('=')[1]?.split('#')[0];
function validateEmail(email) {
......@@ -44,6 +53,7 @@ onMounted(() => {
if (result.value) {
handelGetYS000()
isLeader.value = validateEmail(result.value)
console.log(isLeader.value)
} else {
// result.value = 'a3afc265-1e60-4376-bcfb-6ca124db8704'
// handelGetYS000()
......@@ -62,4 +72,25 @@ async function handelGetYS000() {
</script>
<style lang="scss" scoped>
::v-deep .el-date-editor .el-input__inner {
background-color: transparent !important;
border-color: #80ffff;
box-shadow: none;
height: 30px;
color: #fff;
}
::v-deep .el-input__wrapper {
background: transparent;
border: none;
box-shadow: none;
}
/* 隐藏默认图标 */
::v-deep .el-date-editor .el-input__prefix {
display: none;
}
/* 强制右侧显示图标 */
::v-deep .el-date-editor .el-input__suffix {
right: 10px !important;
}
</style>
......
src/viewsPc/vip/components/information.vue
......@@ -7,7 +7,7 @@
width="33%"
>
<div class="son">
<div style="color: #fff;font-size: 15px">填写日期: {{myDate}}</div>
<div style="font-family: SimHei, serif;font-weight: 400;font-size: 20px;color: #FFFFFF;">更新日期: {{myDate}}</div>
<p v-for="val in list" :key="val" class="row">
<span></span> {{ val }}
</p>
......
src/viewsPc/vip/leftPage.vue
......@@ -105,7 +105,7 @@ const lineRef = ref(null)
const payeeRef = ref(null)
const type3 = ref('0')
const type4 = ref(['1'])
const type4 = ref(['1','2'])
const type2 = ref([])
const type1 = ref(['1', '2'])
......@@ -181,7 +181,7 @@ async function handelGetYS006() {
set2.value.push({
value: v1.TOTAL,
name: v1.BASEJC,
type: v1.BLOCK
type: v1.BLOCK,
})
} else {
set3.value.push({
......@@ -221,6 +221,16 @@ async function handelGetYS006() {
set3.value.sort((a,b)=>{
return b.value - a.value
})
let colorList = ['#A4E6FF', '#6ED8FF', '#2FA9FF', '#187CEC', '#0142DA']
set2.value.forEach((n,index) => {
n.itemStyle = {borderColor: colorList[index], borderWidth: 2}
})
let colorList2 = ['#FEFFD3', '#FFF59C', '#F7E20F', '#F7CE10', '#D29F05']
set3.value.forEach((n,index) => {
n.itemStyle = {borderColor: colorList2[index], borderWidth: 2}
})
setA(set1.value, set2.value, set3.value)
setB(
......@@ -241,7 +251,7 @@ async function handelGetYS006() {
type4.value.includes('1') ? legend1 : [],
type4.value.includes('2') ? legend2 : [],
)
console.log(2222222, h3.value)
console.log(33333333, h6.value)
}
......@@ -401,9 +411,9 @@ const setA = (arr, arr2, arr3) => {
orient: 'vertical',
data: arr2,
right: '5%',
top: '12%',
bottom: 20,
itemGap:5,
top: 20,
bottom: '25%',
itemGap:10,
textStyle: {
color: '#FFF',
rich: {
......@@ -414,7 +424,7 @@ const setA = (arr, arr2, arr3) => {
width:40,
},
b:{
float:'right',
align:'right',
fontSize: 12,
lineHeight: 12,
width:40,
......@@ -426,7 +436,7 @@ const setA = (arr, arr2, arr3) => {
width:40,
},
d:{
float:'right',
align:'right',
fontSize: 12,
lineHeight: 22,
width:40,
......@@ -463,9 +473,9 @@ const setA = (arr, arr2, arr3) => {
orient: 'vertical',
data: arr3,
right: '30%',
top: '12%',
bottom: 20,
itemGap:5,
top: 20,
bottom: '25%',
itemGap:10,
textStyle: {
color: '#FFF',
rich: {
......@@ -476,7 +486,7 @@ const setA = (arr, arr2, arr3) => {
width:40,
},
b:{
float:'right',
align:'right',
fontSize: 12,
lineHeight: 12,
width:40,
......@@ -488,7 +498,7 @@ const setA = (arr, arr2, arr3) => {
width:40,
},
d:{
float:'right',
align:'right',
fontSize: 12,
lineHeight: 22,
width:40,
......@@ -525,19 +535,19 @@ const setA = (arr, arr2, arr3) => {
graphic: {
elements: [{
type: 'text',
bottom: '15%', // 可以调整位置，例如使用 'bottom' 来定位到图例下方
right: '33%',
top: 157, // 可以调整位置，例如使用 'bottom' 来定位到图例下方
right: '31%',
style: {
text: '陆地：' + sumPercent2+'%', // 这里可以计算合计值并显示
text: '陆地： ' + sumPercent2+'%', // 这里可以计算合计值并显示
fill: '#fff', // 文本颜色
fontSize: 12, // 文本大小
},
},{
type: 'text',
bottom: '15%', // 可以调整位置，例如使用 'bottom' 来定位到图例下方
right: '8%',
top: 157, // 可以调整位置，例如使用 'bottom' 来定位到图例下方
right: '6%',
style: {
text: '海上：' + sumPercent1+'%', // 这里可以计算合计值并显示
text: '海上： ' + sumPercent1+'%', // 这里可以计算合计值并显示
fill: '#fff', // 文本颜色
fontSize: 12, // 文本大小
}
......@@ -591,8 +601,6 @@ const setA = (arr, arr2, arr3) => {
radius: ['30%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderWidth: 2,
borderColor: 'rgba(255,0,0,0.05)',
color: function (params) {
// 自定义颜色
let colorList = [
......@@ -611,7 +619,7 @@ const setA = (arr, arr2, arr3) => {
show: false,
fontSize: 20,
fontWeight: 'bold'
}
},
},
labelLine: {
show: false
......@@ -674,7 +682,12 @@ const setB = (arr1, arr2, arr3, arr4) => {
type: 'solid'
}
},
axisLabel: {
formatter: function(value, index) {
// 只显示奇数索引的标签(从0开始计数)
return index % 2 === 0 ? value : '';
}
}
},
],
yAxis: [
......@@ -827,6 +840,18 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => {
${row.data?.info ? row.data?.info?.replaceAll('万', '万<br>') : ''}
</div>
`;
},
extraCssText: `
max-height: 150px;
overflow: auto !important;
padding-right: 10px; /* 为滚动条留出空间 */
`,
enterable: true, // 允许鼠标进入tooltip
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: [
......@@ -870,6 +895,12 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => {
type: 'solid'
}
},
axisLabel: {
formatter: function(value, index) {
// 只显示奇数索引的标签(从0开始计数)
return index % 2 === 0 ? value : '';
}
}
}
],
yAxis: [
......@@ -913,12 +944,12 @@ 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(141, 251, 116,1 )'}, // 顶部颜色
{offset: 0, color: '#18c877'}, // 顶部颜色
// {offset: 1, color: 'rgba(70, 232, 116,1 )'} // 底部颜色
]
},
},
barWidth: '40%'
barWidth: '30%'
},
{
name: `${Year1}收费单待签`,
......@@ -935,12 +966,12 @@ 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(1, 255, 133, 1)'}, // 顶部颜色
{offset: 0, color: '#69c818'}, // 顶部颜色
// {offset: 1, color: 'rgba(234, 216, 18, 1)'} // 底部颜色
]
},
},
barWidth: '40%'
barWidth: '30%'
},
{
name: `${Year1}合同待签`,
......@@ -962,7 +993,7 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => {
]
},
},
barWidth: '40%'
barWidth: '30%'
},
{
......@@ -980,12 +1011,12 @@ 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(109, 217, 255,1)'},
{offset: 0, color: '#2FA9FF'},
// {offset: 1, color: 'rgba(76, 175, 80, 1)'}
]
},
},
barWidth: '40%'
barWidth: '30%'
},
{
name: `${Year2}收费单待签`,
......@@ -1002,7 +1033,7 @@ 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(47, 169, 254, 1)'},
{offset: 0, color: '#187CEC'},
// {offset: 1, color: 'rgba(96, 181, 255, 1)'}
// {offset: 0, color: 'rgba(142, 36, 170, 1)'},
......@@ -1013,7 +1044,7 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => {
]
},
},
barWidth: '40%'
barWidth: '30%'
},
{
name: `${Year2}合同待签`,
......@@ -1037,7 +1068,7 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => {
]
},
},
barWidth: '40%'
barWidth: '30%'
},
]
}
......@@ -1179,11 +1210,12 @@ onUnmounted(() => {
:deep(.el-select__placeholder) {
font-family: PingFang SC, serif;
font-weight: 500;
color: #13C1F4;
text-shadow: 0px 2px 0px rgba(0, 1, 1, 0.41);
background: linear-gradient(180deg, #75E2E9 0%, #FFFFFF 100%);
color: #fff;
//text-shadow: 0 2px 0 rgba(0, 1, 1, 0.41);
//background: linear-gradient(180deg, #75E2E9 0%, #FFFFFF 100%);
background-color: rgb(33, 123, 188, .1); /* 背景色 */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent
//-webkit-text-fill-color: transparent
}
:deep(.el-tag--info) {
......
src/viewsPc/vip/scrollingData.vue
......@@ -5,7 +5,7 @@
<span/> {{ item }}
</div>
<!-- 复制一份数据实现无缝滚动 -->
<div v-for="(item, index) in list" :key="`copy-${index}`" class="scrolling-item">
<div v-if="list.length > 1" v-for="(item, index) in list" :key="`copy-${index}`" class="scrolling-item">
<span/> {{ item }}
</div>
</div>
......@@ -51,22 +51,20 @@ const initScroll = () => {
}
// 重置位置到第一条数据
offset.value = -props.speed-0.1;
scrollInterval2.value = setInterval(()=> {
// 设置定时器
scrollInterval.value = setInterval(() => {
if (!isPaused.value) {
offset.value -= props.speed;
// 当滚动到内容的一半时，重置位置实现无缝滚动
if (Math.abs(offset.value) >= contentHeight.value / 2) {
offset.value += contentHeight.value / 2;
}
}
if (offset.value>=(-props.speed)) {
console.log("1111111111111111111111111")
clearInterval(scrollInterval.value);
scrollInterval.value = setInterval(() => {
if (!isPaused.value) {
offset.value -= props.speed;
// 当滚动到内容的一半时，重置位置实现无缝滚动
if (Math.abs(offset.value) >= contentHeight.value / 2) {
offset.value += contentHeight.value / 2;
}
}, 20);
},10000)
}
if (offset.value>=(-props.speed)) {
clearInterval(scrollInterval.value);
setTimeout(initScroll,10000)
}
}, 20);
};
......@@ -106,9 +104,6 @@ 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!