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
<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/centerPage.vue
<template>
<div class="center">
<div ref="textRef" class="top">
<div class="left">
<div class="left" v-if="myType">
<div class="titleTop">董事会得分</div>
<div class="titleCenter heiti">预计得分 <span class="tex1">{{ form?.YJSCORE }}</span></div>
<div class="titleCenter heiti">标准得分 <span class="tex2">{{ form?.STANDARDSCORE }}</span>
</div>
</div>
<div class="right">
<div class="right" :style="{width:myType?'calc(480 * 100vw / 1920)':'calc(640 * 100vw / 1920)'}">
<div class="rTop">
<div style="font-family: SimHei, serif;">领导重点关注</div>
<div @click="handelView"><img alt="" class="rTop-img" src="@/assets/image/more@2x.png"></div>
......@@ -26,13 +26,13 @@
<span><img alt="" class="titleImg" src="@/assets/image/title_bg.png"></span>
营业收入
</div>
<div ref="bing1" style="width: 100%;height:13.3vh;">
<div ref="bing1" style="width: 100%" :style="{height:myType?'13.3vh':'18.3vh'}">
</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 ref="zhuRef1" class="zhu" style="width:70%" :style="{height:myType?'calc(19vh + 1vw - 43px)':'calc(20.5vh + 1vw + 6px)'}"/>
</div>
<hr>
......@@ -44,7 +44,7 @@
<span><img alt="" class="titleImg heiti" src="@/assets/image/title_bg.png"></span>
应收余额
</div>
<div ref="bing2" style="width: 100%;height:13.3vh;">
<div ref="bing2" style="width: 100%" :style="{height:myType?'13.3vh':'18.3vh'}">
</div>
<!-- <div class="bingBottom">-->
<!-- <div style="text-align: center;">{{ `${dayjs().format('YYYY')}年${dayjs().format('MM')}月` }}前 <br>-->
......@@ -52,19 +52,19 @@
<!-- </div>-->
<!-- </div>-->
</div>
<div ref="zhuRef2" class="zhu" style="width:70%;height: 17.3vh"/>
<div ref="zhuRef2" class="zhu" style="width:70%" :style="{height:myType?'calc(19vh + 1vw - 43px)':'calc(20.5vh + 1vw + 6px)'}"/>
</div>
<hr>
</div>
<div class="father">
<div class="father" v-if="myType">
<div style="display: flex">
<div class="bing" style="width: 30%">
<div class="bingTitle heiti">
<span><img alt="" class="titleImg" src="@/assets/image/title_bg.png"></span>
现金余额
</div>
<div class="bingImg" style="width: 100%;height:13.3vh;">{{bing_number3}}</div>
<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>
<!-- <div ref="bing3" style="width: 100%;height:13.3vh;">-->
<!-- </div>-->
<!-- <div class="bingBottom">-->
......@@ -72,7 +72,7 @@
<!-- </div>-->
<!-- </div>-->
</div>
<div ref="zhuRef3" class="zhu" style="width:70%;height: 17.3vh"/>
<div ref="zhuRef3" class="zhu" style="width:70%;height: calc(19vh + 1vw - 43px)"/>
</div>
<hr>
</div>
......@@ -82,7 +82,7 @@
<span class="heiti">DSO天数</span>
<span class="dsotext heiti">&nbsp;{{ dso }}</span>
</div>
<div ref="zhuRef4" style="width: 100%;height: 17.3vh">
<div ref="zhuRef4" style="width: 100%" :style="{height:myType?'calc(16vh + 1vw - 1px)':'calc(20.5vh + 1vw + 6px)'}">
</div>
</div>
</div>
......@@ -129,6 +129,7 @@ const props = defineProps({
const url = computed(() => props.url)
const obj = computed(() => props.obj)
const isLeader = computed(() => props.isLeader)
const myType = computed(() => props.type)
const zhuRef1 = ref(null)
const zhuRef2 = ref(null)
const zhuRef3 = ref(null)
......@@ -166,12 +167,10 @@ let total = 0
let intervalA = null
onMounted(async () => {
if (props.type) {
if (url.value) {
init()
}
window.addEventListener('resize', handleResize);
}
// handelBing1()
// handelZhu1()
// handelGetYS001()
......@@ -217,6 +216,7 @@ async function handelGetYS002() {
async function handelGetYS003() {
const res = await getYS003(url.value, obj.value)
if (res.data) {
resYear3.value = res.data.yeargroup
let obj1 = res.data.yeargroup[0]
let obj2 = res.data.yeargroup[1]
......@@ -232,11 +232,14 @@ async function handelGetYS003() {
activeName3.value = res.data.yeargroup[1].YEAR
}
}
let nowYearString = new Date().getFullYear()
async function handelGetYS004() {
const res = await getYS004(url.value, obj.value)
let arrList = res.data.blockgroup || []
dso.value = res.data.DSOTOTAL || 0
// let arrList = [
// {
// BLOCK: '海上',
......@@ -279,9 +282,10 @@ async function handelGetYS004() {
// ]
// }
// ]
if (myType.value) {
let haishang
let dalu
dso.value = res.data.DSOTOTAL || 0
for (const v of arrList) {
if (v.BLOCK === '海上') {
haishang = v
......@@ -330,7 +334,7 @@ async function handelGetYS004() {
value: v.DSO,
day: v.DAYS,
itemStyle: v.type == 2 ? styleItem1 : styleItem2,
name: v.type == 2 ? "陆地" : '海上',
name: v.BASEJC,
type: v.type
}))
let arr1 = []
......@@ -347,11 +351,87 @@ async function handelGetYS004() {
if (arr2.length > 0) arr2.push(290)
if (arr1.length > 0) arr1.unshift(150)
handelZhu4(listX, dataList, arr1, arr2)
} else {
let nowYear=[],lastYear=[]
for (const v of arrList[0].list) {
if (v.YEAR == nowYearString) {
nowYear.push(v)
} else {
lastYear.push(v)
}
}
let nowYearArr = nowYear.map(v => ({
...v,
type: 1
})).sort((v1, v2) => v1.MONTH - v2.MONTH)
let lastYearArr = lastYear.map(v => ({
...v,
type: 2
})).sort((v1, v2) => v1.MONTH - v2.MONTH)
let listX1 = ['','1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月','']
let styleItem1 = {
color: {
type: 'linear',
x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
colorStops: [
{offset: 0, color: 'rgba(21, 219, 203, 1)'}, // 顶部颜色
{offset: 1, color: 'rgba(106, 235, 228, 1)'} // 底部颜色
]
},
borderColor: 'rgba(0, 255, 190, 1)',
borderWidth: 1
}
let styleItem2 = {
color: {
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)'} // 底部颜色
]
},
borderColor: 'rgba(0, 168, 255, 1)',
borderWidth: 1
}
let dataList1 = nowYearArr.map(v => ({
value: v.DSO,
day: v.DAYS,
itemStyle: styleItem2,
name: nowYearString,
type: v.type
}))
let dataList2 = lastYearArr.map(v => ({
value: v.DSO,
day: v.DAYS,
itemStyle: styleItem1,
name: nowYearString-1,
type: v.type
}))
let arr1 = []
for (let i=0;i<14;i++) {
if (arrList[0].BLOCK == '陆地') {
arr1.push(290)
} else {
arr1.push(150)
}
}
dataList1.unshift('')
dataList1.push('')
dataList2.unshift('')
dataList2.push('')
handelZhu4_2(listX1, dataList1,dataList2, arr1)
}
}
async function handelGetYS005() {
const res = await getYS005(url.value, obj.value)
form.value = res.data
form.value.YJSCORE = parseFloat(form.value.YJSCORE).toFixed(2)
console.log(isLeader)
if (isLeader.value) {
proxy.$refs['InformationRef'].open(form.value.leaderinfo,form.value.APPLYDATE)
......@@ -393,7 +473,9 @@ const handelBing1 = (arr1, arr2) => {
// arr1 2025
// arr2 2024
chart1 = echarts.init(bing1.value)
const option = {
let option
if (myType.value) {
option = {
tooltip: {
trigger: 'item',
position: ['20%', '30%'],
......@@ -517,23 +599,321 @@ const handelBing1 = (arr1, arr2) => {
name: arr2.YEAR,
itemStyle: {color: "rgba(240, 255, 0, .5)"}
},
// {value: arr2.TOTAL, name: (arr2.TOTAL / 10000).toFixed(0) + 'W'}
// {value: arr2.TOTAL, name: (arr2.TOTAL / 10000).toFixed(0) + 'W'}
{
value: (arr1.TOTAL / 10000).toFixed() || 0,
name: arr1.YEAR
}
],
itemStyle: {
color: 'rgba(1, 162, 237, .3)',
},
},
// {
// name: '4',
// type: 'pie',
// radius: ['38%', '50%'],
// center: ['50%', '60%'],
// label: {
// show: false
// },
// emphasis: {
// scale: false
// },
// // adjust the start and end angle
// startAngle: 180,
// endAngle: 360,
// data: [{value: 1048, name: ''}],
// itemStyle: {
// color: {
// image: yy,
// repeat: 'repeat'
// }
// }
// // itemStyle: {
// // color: {
// // type: 'linear',
// // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
// // colorStops: [
// // {offset: 0, color: 'rgba(1, 162, 237, 1)'}, // 顶部颜色
// // {offset: 1, color: 'rgba(16, 123, 184, 1)'} // 底部颜色
// // ]
// // },
// // },
// }
]
}
} else {
option = {
tooltip: {
trigger: 'item',
position: ['20%', '30%'],
// valueFormatter: (value) => value + '万',
backgroundColor: 'rgba(5, 28, 51, 1)', // 背景色
borderColor: 'rgba(46, 151, 198, 1)', // 边框颜色
borderWidth: 1, // 边框宽度
textStyle: {
color: '#fff', // 文字颜色
fontSize: 12, // 文字大小
},
formatter: function (params) {
// params.seriesIndex 可以判断是哪个系列（外环或内环）
// params.seriesName 可以获取系列名称
if (params.seriesIndex === 1) {
// 外环的提示内容
return `营业收入<br/>${arr1.YEAR}: ${(arr1.TOTAL / 10000).toFixed()}万`;
} else if (params.seriesIndex === 2) {
// 内环的提示内容
return `营业收入<br/>${arr2.YEAR}: ${(arr2.TOTAL / 10000).toFixed()}万`;
}
}
},
series: [
{
name: '',
type: 'pie',
radius: ['89%', '90%'],
center: ['50%', '60%'],
emphasis: {
scale: false,
},
label: {
show: false,
emphasis: {
show: false
}
},
startAngle: 180,
endAngle: 360,
data: [1],
itemStyle: {
color: 'rgba(1, 162, 237, 1)',
},
barWidth: 2,
tooltip: {
trigger: ''
}
},
{
name: '营业收入',
type: 'pie',
radius: ['65%', '85%'],
center: ['50%', '60%'],
label: {
show: true, // 显示标签
position: 'center', // 位置居中
formatter: toDieThousands((arr1.TOTAL / 10000).toFixed()), // 文字内容
color: "#ffff",
rich: {
total: {
fontSize: 5,
color: '#fff'
}
}
},
// adjust the start and end angle
startAngle: 180,
endAngle: 360,
emphasis: {
scale: true,
label: {
show: true,
}
},
data: [
{
value: (arr1.TOTAL / 10000).toFixed(),
name: arr1.YEAR,
itemStyle: {color: "rgb(255,217,0)"}
},
{
value: (arr2.TOTAL / 10000).toFixed(),
name: arr2.YEAR
},
],
itemStyle: {
color: 'rgba(1, 162, 237, .3)',
},
},
{
name: '营业收入',
type: 'pie',
radius: ['45%', '60%'],
center: ['50%', '60%'],
label: {
show: false, // 显示标签
position: 'center', // 位置居中
formatter: (arr1.TOTAL / 10000).toFixed(), // 文字内容
color: "#ffff",
rich: {
total: {
fontSize: 5,
color: '#fff'
}
}
},
emphasis: {
scale: true,
label: {
show: true,
}
},
// adjust the start and end angle
startAngle: 180,
endAngle: 360,
data: [
{
value: (arr2.TOTAL / 10000).toFixed() || 0,
name: arr2.YEAR,
itemStyle: {color: "rgba(240, 255, 0, .5)"}
},
// {value: arr2.TOTAL, name: (arr2.TOTAL / 10000).toFixed(0) + 'W'}
{
value: (arr1.TOTAL / 10000).toFixed() || 0,
name: arr1.YEAR
}
],
itemStyle: {
color: 'rgba(1, 162, 237, .3)',
},
},
// {
// name: '4',
// type: 'pie',
// radius: ['38%', '50%'],
// center: ['50%', '60%'],
// label: {
// show: false
// },
// emphasis: {
// scale: false
// },
// // adjust the start and end angle
// startAngle: 180,
// endAngle: 360,
// data: [{value: 1048, name: ''}],
// itemStyle: {
// color: {
// image: yy,
// repeat: 'repeat'
// }
// }
// // itemStyle: {
// // color: {
// // type: 'linear',
// // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
// // colorStops: [
// // {offset: 0, color: 'rgba(1, 162, 237, 1)'}, // 顶部颜色
// // {offset: 1, color: 'rgba(16, 123, 184, 1)'} // 底部颜色
// // ]
// // },
// // },
// }
]
}
}
chart1.setOption(option)
autoHover(chart1, option, 0, 2000)
}
const handelBing2 = (row1, row2) => {
chart2 = echarts.init(bing2.value)
let option
if (myType.value) {
option = {
tooltip: {
trigger: 'item',
position: ['20%', '30%'],
valueFormatter: (value) => value + '万',
backgroundColor: 'rgba(5, 28, 51, 1)', // 背景色
borderColor: 'rgba(46, 151, 198, 1)', // 边框颜色
borderWidth: 1, // 边框宽度
textStyle: {
color: '#fff', // 文字颜色
fontSize: 12, // 文字大小
},
formatter: function (params) {
// params.seriesIndex 可以判断是哪个系列（外环或内环）
// params.seriesName 可以获取系列名称
if (params.seriesIndex === 1) {
// 外环的提示内容
return `应收余额<br/>${params.name}: ${params.value}万`;
}
}
},
series: [
{
name: '',
type: 'pie',
radius: ['99%', '100%'],
center: ['50%', '60%'],
emphasis: {
scale: false,
},
label: {
show: false,
emphasis: {
show: false
}
},
startAngle: 180,
endAngle: 360,
data: [1],
itemStyle: {
color: 'rgba(1, 162, 237, 1)',
},
barWidth: 2
},
{
name: '应收余额',
type: 'pie',
radius: ['75%', '95%'],
center: ['50%', '60%'],
label: {
show: true, // 显示标签
position: 'center', // 位置居中
formatter: toDieThousands((row1.TOTAL / 10000).toFixed() || 0), // 文字内容
color: "#ffff",
rich: {
total: {
fontSize: 5,
color: '#fff'
}
}
},
// adjust the start and end angle
startAngle: 180,
endAngle: 360,
emphasis: {
scale: true
},
data: [
{
value: (row1.TOTAL / 10000).toFixed() || 0,
name: row1.YEAR,
itemStyle: {color: "rgba(0, 255, 190,1)"}
},
{
value: (arr1.TOTAL / 10000).toFixed() || 0,
name: arr1.YEAR
value: (row2.TOTAL / 10000).toFixed() || 0,
name: row2.YEAR
}
],
itemStyle: {
color: 'rgba(1, 162, 237, .3)',
color: 'rgba(1, 162, 237, .5)',
},
},
// {
// name: '4',
// name: '3',
// type: 'pie',
// radius: ['38%', '50%'],
// radius: ['55%', '70%'],
// center: ['50%', '60%'],
// label: {
// show: false
// show: true,
// position: 'center',
// formatter: '{b}'
// },
// emphasis: {
// scale: false
......@@ -541,33 +921,24 @@ const handelBing1 = (arr1, arr2) => {
// // adjust the start and end angle
// startAngle: 180,
// endAngle: 360,
// data: [{value: 1048, name: ''}],
// data: [
// {value: 1048,},
// ],
// itemStyle: {
// color: {
// image: yy,
// repeat: 'repeat'
// }
// }
// // itemStyle: {
// // color: {
// // type: 'linear',
// // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
// // colorStops: [
// // {offset: 0, color: 'rgba(1, 162, 237, 1)'}, // 顶部颜色
// // {offset: 1, color: 'rgba(16, 123, 184, 1)'} // 底部颜色
// // ]
// // },
// // },
// }
// type: 'linear',
// x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
// colorStops: [
// {offset: 0, color: 'rgba(1, 162, 237, 1)'}, // 顶部颜色
// {offset: 1, color: 'rgba(16, 123, 184, 1)'} // 底部颜色
// ]
// },
// },
// },
]
}
chart1.setOption(option)
autoHover(chart1, option, 0, 2000)
}
const handelBing2 = (row1, row2) => {
chart2 = echarts.init(bing2.value)
const option = {
} else {
option = {
tooltip: {
trigger: 'item',
position: ['20%', '30%'],
......@@ -593,7 +964,7 @@ const handelBing2 = (row1, row2) => {
{
name: '',
type: 'pie',
radius: ['99%', '100%'],
radius: ['89%', '90%'],
center: ['50%', '60%'],
emphasis: {
scale: false,
......@@ -615,7 +986,7 @@ const handelBing2 = (row1, row2) => {
{
name: '应收余额',
type: 'pie',
radius: ['75%', '95%'],
radius: ['65%', '85%'],
center: ['50%', '60%'],
label: {
show: true, // 显示标签
......@@ -682,6 +1053,8 @@ const handelBing2 = (row1, row2) => {
// },
]
}
}
chart2.setOption(option)
autoHover(chart2, option, 0, 2000)
......@@ -851,6 +1224,12 @@ const handelZhu1 = (row1, row2) => {
type: 'solid'
}
},
axisLabel: {
formatter: function(value, index) {
// 只显示奇数索引的标签(从0开始计数)
return index % 2 === 0 ? value : '';
}
}
}
],
yAxis: [
......@@ -955,9 +1334,9 @@ const handelZhu2 = (row1, row2) => {
},
grid: {
top: "25%",
left: '3%',
right: '4%',
bottom: '3%',
left: '0%',
right: '0%',
bottom: '1%',
containLabel: true
},
xAxis: [
......@@ -972,6 +1351,13 @@ const handelZhu2 = (row1, row2) => {
type: 'solid'
}
},
axisLabel: {
interval:0,
formatter: function(value, index) {
// 只显示奇数索引的标签(从0开始计数)
return index % 2 === 0 ? value : '';
}
},
}
],
yAxis: [
......@@ -1095,9 +1481,9 @@ const handelZhu3 = (row1, row2) => {
},
grid: {
top: "18%",
left: '3%',
right: '4%',
bottom: '3%',
left: '0%',
right: '0%',
bottom: '1%',
containLabel: true
},
xAxis: [
......@@ -1113,6 +1499,13 @@ const handelZhu3 = (row1, row2) => {
type: 'solid',
}
},
axisLabel: {
padding: [0, 0, 0, 20],
formatter: function(value, index) {
// 只显示奇数索引的标签(从0开始计数)
return index % 2 === 0 ? value : '';
}
}
}
],
yAxis: [
......@@ -1264,6 +1657,9 @@ const handelZhu4 = (listX, dataList, arr1, arr2) => {
type: 'solid'
}
},
axisLabel:{
padding: [0, 0, 0, 6]
}
}
],
yAxis: [
......@@ -1316,7 +1712,7 @@ const handelZhu4 = (listX, dataList, arr1, arr2) => {
borderColor: 'rgba(0, 168, 255, .5)',
borderWidth: 1
},
barWidth: '30%',
barWidth: 0,
},
{
name: '陆地',
......@@ -1438,6 +1834,199 @@ const handelZhu4 = (listX, dataList, arr1, arr2) => {
// autoHover(chart44, option, 0, 2000)
}
const handelZhu4_2 = (listX1, dataList1,dataList2, arr1) => {
chart44 = echarts.init(zhuRef4.value)
const option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
valueFormatter: (value) => value + '天',
backgroundColor: 'rgba(5, 28, 51, 1)', // 背景色
borderColor: 'rgba(46, 151, 198, 1)', // 边框颜色
borderWidth: 1, // 边框宽度
textStyle: {
color: '#fff', // 文字颜色
fontSize: 12, // 文字大小
},
// 过滤数据
formatter: (row) => {
let htmlStr = ''
row.forEach(item => {
if (item.seriesType === "bar" &&item.data.itemStyle) {
htmlStr += `<div style="color: #fff;font-size: 12px;">${item.data.name}</div>
<div style="color: #fff;font-size: 12px;">
<span style="background:${item.data.itemStyle.borderColor};display: inline-block;width: 10px;height: 10px;border-radius: 50%;"></span>
<span style="margin-right: 20px;">DSO</span>
${item?.data?.value}
</div>`
}
})
return htmlStr
}
// <div style="color: #fff;font-size: 12px;">
// <span style="background:${row[0].data.itemStyle.borderColor};display: inline-block;width: 10px;height: 10px;border-radius: 50%;"></span>
// <span style="margin-right: 20px;">天数</span>
// ${row[0]?.data?.day}
// </div>
},
legend: {
textStyle: {
color: '#FFF'
},
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
top: "20%",
containLabel: true
},
xAxis: [
{
type: 'category',
stack: 'Ad',
// data: ['山西', '陕西', '新疆', '伊拉克', '塘沽', '深圳', '湛江', '汉南', '上海'],
data: listX1,
axisLine: {
show: true,
lineStyle: {
color: '#fff',
width: 2,
type: 'solid'
}
},
axisLabel: {
interval:0,
formatter: function(value, index) {
// 只显示奇数索引的标签(从0开始计数)
return index % 2 === 1 ? value : '';
}
}
}
],
yAxis: [
{
type: 'value',
name: '',
axisLine: {
show: true,
lineStyle: {
color: '#fff',
width: 1,
type: 'solid'
}
},
axisLabel: {
show:false
// formatter: '{value}w' // 在数值后添加单位
},
splitLine: {
show: true, // 默认false，需显式开启
lineStyle: {
color: 'rgba(255, 255, 255, .2)', // 绿色轴线
}
}
}
],
series: [
{
name: nowYearString,
type: 'bar',
barGap: 0,
data:dataList1,
emphasis: {
focus: 'series',
},
// data: [30, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390],
// data: listHai,
itemStyle: {
color: {
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)'} // 底部颜色
]
},
borderColor: 'rgba(0, 168, 255, .5)',
borderWidth: 1
},
barWidth: '30%',
},
{
name: nowYearString-1,
type: 'bar',
barGap: 0,
emphasis: {
focus: 'series',
},
// data: [320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390],
data: dataList2,
itemStyle: {
color: {
type: 'linear',
x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
colorStops: [
{offset: 0, color: 'rgba(21, 219, 203, 1)'}, // 顶部颜色
{offset: 1, color: 'rgba(106, 235, 228, 1)'} // 底部颜色
]
},
// borderColor: 'rgba(0, 255, 190, .5)',
// borderWidth: 1
},
barWidth: '30%',
},
{
type: 'line',
smooth: false,
lineStyle: {
width: 1
},
showSymbol: true,
areaStyle: {
opacity: 0.2,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// {
// offset: 0,
// color: 'rgb(128, 255, 165)'
// },
{
offset: 0.3,
color: 'rgb(1, 191, 236)'
}
])
},
emphasis: {
focus: 'series',
label: false,
disabled: true,
},
data: arr1,
label: {
show: true,
position: 'right', // 起始点标签放在左侧
formatter: function (params) {
// 仅当为第一个数据点时显示数值
if (params.dataIndex === arr1.length - 1) {
return params.value; // 显示数值
}
return ''; // 其他点不显示
},
fontSize: 13,
color: '#fff',
// fontWeight: 'bold',
opacity: 1, // 关键：取消透明度
shadowBlur: 0 // 取消阴影
},
},
]
}
chart44.setOption(option)
// autoHover(chart44, option, 0, 2000)
}
function autoHover(myChart, option, index, time) {
autoToolTip(myChart, option, {
interval: time,// 轮播间隔时间 默认2s
......
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({
......@@ -222,6 +222,16 @@ async function handelGetYS006() {
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(
type1.value.includes('1') ? s1.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/rightPage.vue
......@@ -3,7 +3,7 @@
<div class="chartCard">
<div class="title">开票情况</div>
<div class="po_right" style="justify-content: end">
<div class="itemBox">
<div class="itemBox" v-if="myType">
<el-select
v-model="select7"
class="select"
......@@ -23,19 +23,18 @@
<div class="chartCard mt30">
<div class="title">回款情况</div>
<div class="po_right" style="justify-content: end;">
<div class="itemBox" style="margin-right: 5px;width: 45%;">
<div class="itemBox" style="margin-right: 5px;width: 45%;" v-if="myType">
<el-select
v-model="type8"
class="select"
placeholder="全部基地"
collapse-tags
multiple
size="small"
@change="handelType8">
<el-option v-for="(item,index) in monthList" :label="item" :value="index"/>
</el-select>
</div>
<div class="itemBox">
<div class="itemBox" v-if="myType">
<el-select
v-model="list8Y"
class="select"
......@@ -76,18 +75,23 @@ const props = defineProps({
type: Object,
default: () => {
}
},
type: {
type: Boolean,
default: false
}
})
const url = computed(() => props.url)
const obj = computed(() => props.obj)
const myType = computed(() => props.type)
const zhuRef = ref(null)
const lineRef = ref(null)
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 monthList = ref(["累计","1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"])
const itemStyleList = ref([
{
......@@ -184,9 +188,10 @@ const itemStyleList = ref([
const list9 = ref([])
const list8Y = ref([])
const type8 = ref([])
const type8 = ref(0)
const month8 = ref([])
const year8 = ref([])
const nowYear = new Date().getFullYear()
const list8 = ref([
{
BASE: '上海分公司1',
......@@ -293,13 +298,15 @@ async function handelGetYS007() {
const res = await getYS007(url.value, obj.value)
list7.value = res.data.list
BC.value = res.data.BC * 100 || 0
list7.value.sort((a, b) => a.EXECOST - b.EXECOST);
let firstVal = ''
list7Y.value = []
select7.value = []
let arr1 = []
let arr2 = []
let arr3 = []
if (myType.value) {
list7.value.sort((a, b) => a.EXECOST - b.EXECOST);
for (const val of list7.value) {
select7.value.push(val.BASEJC)
list7Y.value.push({
......@@ -320,14 +327,33 @@ async function handelGetYS007() {
})
arr3.push(val.EXERATIO)
}
const firstAbove = list7Y.value.find(v => v.name >= BC.value);
let firstVal = ''
if (firstAbove && firstAbove.value) {
firstVal = firstAbove.value
} else {
firstVal = ''
}
} else {
for (const val of list7.value) {
list7Y.value.push({
name: (val.EXERATIO * 100).toFixed(),
value: val.MONTH,
})
arr1.push({
value: Math.round(val.PLANCOST / 10000),
// itemStyle: val.EXERATIO * 100 >= BC.value ? color1 : color3,
itemStyle: color4,
name: (val.EXERATIO * 100).toFixed() + '%',
})
arr2.push({
value: Math.round(val.EXECOST / 10000),
name: (val.EXERATIO * 100).toFixed() + '%',
// itemStyle: val.EXERATIO * 100 >= BC.value ? color2 : color4
itemStyle: color2
})
arr3.push(val.EXERATIO)
}
}
setA(list7Y.value, arr1, arr2, arr3, firstVal, BC.value)
}
......@@ -368,14 +394,12 @@ 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 || []
let arr,arr2
list8Y.value = []
month8.value = []
year8.value = []
if (myType.value) {
list8.value.sort((a, b) => a.HKQKMONTH - b.HKQKMONTH);
for (let i = 0; i < list8.value.length; i++) {
let monthValue = []
......@@ -393,8 +417,18 @@ async function handelGetYS008() {
itemStyle: list8.value[i].itemStyle,
})
}
let arr = month8.value
arr = month8.value
setB(list8Y.value, arr)
} else {
let nowValue = []
let lastValue = []
for (let i=1;i<13;i++) {
nowValue.push(list8.value[0]["HKQKMONTH"+i]/10000)
lastValue.push((list8.value[0].lastHKQK[i-1].COST||0)/10000)
}
setB(list8Y.value, nowValue,lastValue)
}
}
function handelSelect8() {
......@@ -425,19 +459,20 @@ function handelSelect8() {
function handelType8() {
// let arrc = type8.value == '2' ? month8.value : year8.value
let myData = [];
if (type8.value != '0') {
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]]
}
// let sum = 0
// for (let j=0;j<type8.value.length;j++) {
// sum += year8.value[i].value[type8.value[j]]
// }
myData.push({
value:sum,
value:year8.value[i].value[type8.value-1],
itemStyle:year8.value[i].itemStyle
})
}
}
let arrc = type8.value.length>0 ? myData : month8.value
let arrc = type8.value == '0' ? month8.value : myData
setB(list8Y.value, arrc)
}
......@@ -448,6 +483,8 @@ async function handelGetYS009() {
let arr1 = []
let arr2 = []
let arr3 = []
if (myType.value) {
for (const val of list9.value) {
arrY.push(val.BASEJC)
arr1.push(Math.round(val.WKPCOSTONE / 10000))
......@@ -457,6 +494,18 @@ async function handelGetYS009() {
info: val.YQWELLINFO
})
}
} else {
for (const val of list9.value) {
arrY.push(val.MONTH)
arr1.push(Math.round(val.WKPCOSTONE / 10000))
arr2.push(Math.round(val.WKPCOSTTWO / 10000))
arr3.push({
value: Math.round(val.WKPCOSTTHREE / 10000),
info: val.YQWELLINFO
})
}
}
setC(arrY, arr1, arr2, arr3)
}
......@@ -468,7 +517,9 @@ const getdata = () => {
const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => {
chartA = echarts.init(zhuRef.value)
const option = {
let option
if (myType.value) {
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
......@@ -490,8 +541,8 @@ const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => {
},
},
grid: {
top: "30",
left: '3%',
top: "15%",
left: '5%',
right: '4%',
bottom: '3%',
containLabel: true
......@@ -536,7 +587,6 @@ const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => {
{
type: 'category',
data: arrY,
offset: 10,
axisLabel: {
// formatter: '{value}w' // 在数值后添加单位
interval: 0,
......@@ -587,6 +637,8 @@ const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => {
{offset: 1, color: 'rgba(8, 130, 160, 1)'} // 底部颜色
],
},
// 设置柱状图顶部圆角（半圆形）
borderRadius: [0, 10, 10, 0] // 顺时针方向：左上、右上、右下、左下
},
},
{
......@@ -623,6 +675,188 @@ const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => {
{offset: 1, color: 'rgba(34, 117, 255, 1)'} // 底部颜色
],
},
// 设置柱状图顶部圆角（半圆形）
borderRadius: [0, 10, 10, 0] // 顺时针方向：左上、右上、右下、左下
// borderColor: 'rgba(0, 246, 255, 1)',
// borderWidth: 1
},
markLine: {
symbol: 'none',
data: [
{
name: '',
yAxis: markLineName, // 在Y轴150的位置画垂直线
lineStyle: {
color: 'rgba(255, 252, 40, 1)',
type: 'dashed',
lineWidth: 2
},
label: {
formatter: BC + '%',
position: 'end', // 可选值: 'start', 'middle', 'end'
distance: [-20, 40],
color: "#fff"
}
}
]
}
},
],
}
} else {
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
},
valueFormatter: (value) => value + '万',
backgroundColor: 'rgba(5, 28, 51, 1)', // 背景色
borderColor: 'rgba(46, 151, 198, 1)', // 边框颜色
borderWidth: 1, // 边框宽度
textStyle: {
color: '#fff', // 文字颜色
fontSize: 12, // 文字大小
},
},
legend: {
top: "3%",
textStyle: {
color: '#FFF'
},
},
grid: {
top: "15%",
left: '5%',
right: '4%',
bottom: '3%',
containLabel: true
},
yAxis: {
type: 'value',
axisLabel: {
show: false,
},
axisLine: {
show: false,
},
splitLine: {
show: true, // 默认false，需显式开启
lineStyle: {
color: 'rgba(255, 255, 255, .2)', // 绿色轴线
}
}
},
// dataZoom: [
// {
// type: 'slider',
// show: true,
// yAxisIndex: [0],
// start: 0,
// end: 6, //初始值10条数据
// // filterMode: 'filter'
// },
// {
// type: 'inside',
// yAxisIndex: [0],
// start: 0,
// end: 6, //初始值10条数据
// }
// ],
xAxis: [
{
type: 'category',
data: arrY,
axisLabel: {
formatter: function(value, index) {
// 只显示奇数索引的标签(从0开始计数)
return index % 2 === 0 ? value : '';
},
interval: 0,
fontSize: 10,
},
axisLine: {
show: true,
lineStyle: {
color: 'rgba(255, 255, 255, 1)',
width: 1,
type: 'solid'
}
},
},
],
series: [
{
name: '计划金额',
type: 'bar',
datasetIndex: 1,
barGap: 0,
barMaxWidth: 10, // 设置柱子的最大宽度为40px
label: {
show: false,
position: 'right',
formatter: function (v1) {
return v1.data.name
// 计算总数
// const total = params.value + /* 其他系列的值 */;
// 计算百分比
// const percent = ((params.value / total) * 100).toFixed(1);
// return `${percent}%`;
}
},
emphasis: {
focus: 'series'
},
// data: [320, 302, 301, 334, 390, 330, 320, 330, 320],
data: arr1,
itemStyle: {
color: {
type: 'linear',
x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
colorStops: [
{offset: 0, color: 'rgba(0, 255, 190, 1)'}, // 顶部颜色
{offset: 1, color: 'rgba(8, 130, 160, 1)'} // 底部颜色
],
},
},
},
{
name: '执行金额',
type: 'bar',
barMaxWidth: 10, // 设置柱子的最大宽度为40px
label: {
show: true,
position: 'right',
textStyle: {
color: 'rgba(255, 255, 255, 1)',
},
formatter: function (v1) {
return v1.data.name
// 计算总数
// const total = params.value + /* 其他系列的值 */;
// 计算百分比
// const percent = ((params.value / total) * 100).toFixed(1);
// return `${percent}%`;
}
},
emphasis: {
focus: 'series'
},
// data: [320, 302, 301, 334, 390, 330, 320, 330, 320],
data: arr2,
itemStyle: {
color: {
type: 'linear',
x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
colorStops: [
{offset: 0, color: 'rgba(0, 162, 255, 1)'}, // 顶部颜色
{offset: 1, color: 'rgba(34, 117, 255, 1)'} // 底部颜色
],
},
// borderColor: 'rgba(0, 246, 255, 1)',
// borderWidth: 1
},
......@@ -650,13 +884,17 @@ const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => {
],
}
}
chartA.setOption(option)
// autoHover(chartA, option, 0, 2000)
}
const setB = (arrY, arr1, arr2) => {
chartB = echarts.init(lineRef.value)
const option = {
let option
if (myType.value) {
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
......@@ -856,30 +1094,388 @@ const setB = (arrY, arr1, arr2) => {
}
]
}
chartB.setOption(option)
// autoHover(chartB, option, 0, 2000)
}
const setC = (arry, arr1, arr2, arr3) => {
chartC = echarts.init(overdueRef.value)
const option = {
} else {
option = {
tooltip: {
trigger: 'axis',
confine: true,
valueFormatter: (value) => value + '万',
axisPointer: {
// Use axis to trigger tooltip
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
},
valueFormatter: (value) => (value * 1).toFixed() + '万',
backgroundColor: 'rgba(5, 28, 51, 1)', // 背景色
borderColor: 'rgba(46, 151, 198, 1)', // 边框颜色
borderWidth: 1, // 边框宽度
textStyle: {
color: '#fff', // 文字颜色
fontSize: 12, // 文字大小
}
},
axisPointer: {
type: 'none' // 关闭悬浮竖线
legend: {
top: "3%",
textStyle: {
color: '#FFF'
},
position: 'top',
// formatter: function (row) {
// return `
// <div style="font-weight:bold">${row.name}</div>
},
grid: {
top: "15%",
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
yAxis: {
type: 'value',
axisLabel: {
show: false,
},
axisLine: {
show: false,
},
splitLine: {
show: true, // 默认false，需显式开启
lineStyle: {
color: 'rgba(255, 255, 255, .2)', // 绿色轴线
}
}
},
xAxis: {
type: 'category',
// data: ['塘沽', '深圳', '漳江', '上海', '海南', '山西', '陕西', '新疆', '伊拉克'],
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
axisLabel: {
formatter: function(value, index) {
// 只显示奇数索引的标签(从0开始计数)
return index % 2 === 0 ? value : '';
},
interval: 0,
fontSize: 10,
},
axisLine: {
show: true,
lineStyle: {
color: '#fff',
width: 2,
type: 'solid'
}
},
},
series: [
{
name: nowYear,
type: 'bar',
label: {
show: false
},
barMaxWidth: 20, // 设置柱子的最大宽度为40px
data: arr1,
itemStyle: {
color: {
type: 'linear',
x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
colorStops: [
{offset: 0, color: 'rgba(0, 200, 234,1 )'}, // 顶部颜色
{offset: 1, color: 'rgba(7, 105, 132,1 )'} // 底部颜色
]
},
// 设置柱状图顶部圆角（半圆形）
// borderRadius: [0, 10, 10, 0] // 顺时针方向：左上、右上、右下、左下
},
emphasis: {
focus: 'series'
},
// data: [
// {
// value: 320,
// itemStyle: {
// color: {
// type: 'linear',
// x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
// colorStops: [
// {offset: 0, color: 'rgba(9, 79, 130, 1)'}, // 顶部颜色
// {offset: 1, color: 'rgba(6, 142, 239, 1)'} // 底部颜色
// ],
// },
// }
// },
// {
// value: 302,
// itemStyle: {
// color: {
// type: 'linear',
// x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
// colorStops: [
// {offset: 0, color: 'rgba(14, 54, 125, 1)'}, // 顶部颜色
// {offset: 1, color: 'rgba(53, 108, 248, 1)'} // 底部颜色
// ],
// },
// }
// },
// {
// value: 301,
// itemStyle: {
// color: {
// type: 'linear',
// x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
// colorStops: [
// {offset: 0, color: 'rgba(8, 102, 130, 1)'}, // 顶部颜色
// {offset: 1, color: 'rgba(1, 200, 240, 1)'} // 底部颜色
// ],
// },
// }
// },
// {
// value: 334,
// itemStyle: {
// color: {
// type: 'linear',
// x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
// colorStops: [
// {offset: 0, color: 'rgba(40, 97, 84, 1)'}, // 顶部颜色
// {offset: 1, color: 'rgba(70, 232, 116, 1)'} // 底部颜色
// ],
// },
// }
// },
// {
// value: 390,
// itemStyle: {
// color: {
// type: 'linear',
// x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
// colorStops: [
// {offset: 0, color: 'rgba(101, 103, 41, 1)'}, // 顶部颜色
// {offset: 1, color: 'rgba(234, 231, 18, 1)'} // 底部颜色
// ],
// },
// }
// },
// {
// value: 330,
// itemStyle: {
// color: {
// 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)'} // 底部颜色
// ],
// },
// }
// },
// {
// value: 320,
// itemStyle: {
// color: {
// type: 'linear',
// x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
// colorStops: [
// {offset: 0, color: 'rgba(228, 123, 117, 1)'}, // 顶部颜色
// {offset: 1, color: 'rgba(228, 123, 117, 1)'} // 底部颜色
// ],
// },
// }
// },
// {
// value: 330,
// itemStyle: {
// color: {
// type: 'linear',
// x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
// colorStops: [
// {offset: 0, color: 'rgba(99, 50, 26, 1)'}, // 顶部颜色
// {offset: 1, color: 'rgba(227, 94, 28, 1)'} // 底部颜色
// ],
// },
// }
// },
// {
// value: 320,
// itemStyle: {
// color: {
// type: 'linear',
// x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
// colorStops: [
// {offset: 0, color: 'rgba(44, 54, 140, 1)'}, // 顶部颜色
// {offset: 1, color: 'rgba(135, 145, 253, 1)'} // 底部颜色
// ],
// },
// }
// }
// ]
},
{
name: nowYear-1,
type: 'bar',
label: {
show: false
},
barMaxWidth: 20, // 设置柱子的最大宽度为40px
itemStyle: {
color: {
type: 'linear',
x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
colorStops: [
{offset: 0, color: 'rgba(183, 133, 2,1 )'}, // 顶部颜色
{offset: 1, color: 'rgba(228, 184, 1,1 )'} // 底部颜色
]
},
// 设置柱状图顶部圆角（半圆形）
// borderRadius: [0, 10, 10, 0] // 顺时针方向：左上、右上、右下、左下
},
emphasis: {
focus: 'series'
},
// data: [
// {
// value: 320,
// itemStyle: {
// color: {
// type: 'linear',
// x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
// colorStops: [
// {offset: 0, color: 'rgba(9, 79, 130, 1)'}, // 顶部颜色
// {offset: 1, color: 'rgba(6, 142, 239, 1)'} // 底部颜色
// ],
// },
// }
// },
// {
// value: 302,
// itemStyle: {
// color: {
// type: 'linear',
// x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
// colorStops: [
// {offset: 0, color: 'rgba(14, 54, 125, 1)'}, // 顶部颜色
// {offset: 1, color: 'rgba(53, 108, 248, 1)'} // 底部颜色
// ],
// },
// }
// },
// {
// value: 301,
// itemStyle: {
// color: {
// type: 'linear',
// x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
// colorStops: [
// {offset: 0, color: 'rgba(8, 102, 130, 1)'}, // 顶部颜色
// {offset: 1, color: 'rgba(1, 200, 240, 1)'} // 底部颜色
// ],
// },
// }
// },
// {
// value: 334,
// itemStyle: {
// color: {
// type: 'linear',
// x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
// colorStops: [
// {offset: 0, color: 'rgba(40, 97, 84, 1)'}, // 顶部颜色
// {offset: 1, color: 'rgba(70, 232, 116, 1)'} // 底部颜色
// ],
// },
// }
// },
// {
// value: 390,
// itemStyle: {
// color: {
// type: 'linear',
// x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
// colorStops: [
// {offset: 0, color: 'rgba(101, 103, 41, 1)'}, // 顶部颜色
// {offset: 1, color: 'rgba(234, 231, 18, 1)'} // 底部颜色
// ],
// },
// }
// },
// {
// value: 330,
// itemStyle: {
// color: {
// 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)'} // 底部颜色
// ],
// },
// }
// },
// {
// value: 320,
// itemStyle: {
// color: {
// type: 'linear',
// x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
// colorStops: [
// {offset: 0, color: 'rgba(228, 123, 117, 1)'}, // 顶部颜色
// {offset: 1, color: 'rgba(228, 123, 117, 1)'} // 底部颜色
// ],
// },
// }
// },
// {
// value: 330,
// itemStyle: {
// color: {
// type: 'linear',
// x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
// colorStops: [
// {offset: 0, color: 'rgba(99, 50, 26, 1)'}, // 顶部颜色
// {offset: 1, color: 'rgba(227, 94, 28, 1)'} // 底部颜色
// ],
// },
// }
// },
// {
// value: 320,
// itemStyle: {
// color: {
// type: 'linear',
// x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
// colorStops: [
// {offset: 0, color: 'rgba(44, 54, 140, 1)'}, // 顶部颜色
// {offset: 1, color: 'rgba(135, 145, 253, 1)'} // 底部颜色
// ],
// },
// }
// }
// ]
data: arr2
}
]
}
}
chartB.setOption(option)
// autoHover(chartB, option, 0, 2000)
}
const setC = (arry, arr1, arr2, arr3) => {
chartC = echarts.init(overdueRef.value)
const option = {
tooltip: {
trigger: 'axis',
confine: true,
valueFormatter: (value) => value + '万',
backgroundColor: 'rgba(5, 28, 51, 1)', // 背景色
borderColor: 'rgba(46, 151, 198, 1)', // 边框颜色
borderWidth: 1, // 边框宽度
textStyle: {
color: '#fff', // 文字颜色
fontSize: 12, // 文字大小
},
axisPointer: {
type: 'none' // 关闭悬浮竖线
},
position: 'top',
// formatter: function (row) {
// return `
// <div style="font-weight:bold">${row.name}</div>
// <div style="display:flex;align-items:center;margin-top:5px">
// ${row.marker}
// ${row.seriesName == '逾期360天以上' ? '未开票金额' : row.seriesName}: ${row.value}万
......@@ -909,6 +1505,13 @@ const setC = (arry, arr1, arr2, arr3) => {
// data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
data: arry,
axisLabel: {
formatter: function(value, index) {
// 只显示奇数索引的标签(从0开始计数)
if (myType.value) {
return value;
}
return index % 2 === 0 ? value : ''
},
interval: 0,
// rotate: 45,
fontSize: 10,
......@@ -1150,11 +1753,12 @@ onUnmounted(() => {
:deep(.el-select__placeholder) {
font-family: PingFang SC, serif;
font-weight: 500;
color: #13C1F4;
text-shadow: 0 2px 0 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,8 +51,7 @@ const initScroll = () => {
}
// 重置位置到第一条数据
offset.value = -props.speed-0.1;
scrollInterval2.value = setInterval(()=> {
// 设置定时器
scrollInterval.value = setInterval(() => {
if (!isPaused.value) {
offset.value -= props.speed;
......@@ -62,11 +61,10 @@ const initScroll = () => {
}
}
if (offset.value>=(-props.speed)) {
console.log("1111111111111111111111111")
clearInterval(scrollInterval.value);
setTimeout(initScroll,10000)
}
}, 20);
},10000)
};
......@@ -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!